/* JDServer-Webs v6.2 — modules/climate/climate.css (responsive tuned) */

/* ===== Vars base ===== */
:root{
  --cl-gap: 14px;
  --cl-radius: 18px;
  --cl-shadow: 0 10px 30px rgba(0,0,0,.18);
  --cl-border: rgba(255,255,255,.08);
  --cl-row-alt: rgba(255,255,255,.04);
  --cl-chip: rgba(255,255,255,.08);
  --cl-chip-text: #fff;
  --cl-card-bg: var(--card);
}

/* Light */
html[data-theme="light"],
body[data-theme="light"],
.theme-light{
  --cl-border: rgba(0,0,0,.08);
  --cl-row-alt: rgba(0,0,0,.03);
  --cl-chip: rgba(0,0,0,.06);
  --cl-chip-text: #111;
}

/* ===== Utilidades ===== */
.card{
  border:1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  background: var(--cl-card-bg);
  box-shadow: var(--cl-shadow);
  padding: 14px;
}

/* ===== Cabecera ubicación ===== */
#clim-location h3{ margin: 0 0 6px 0; }
#clim-location .clim-meta{
  display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 0 0; padding:0; list-style:none;
}
#clim-location .clim-meta li{
  background: var(--cl-chip);
  color: var(--cl-chip-text);
  padding: .28rem .6rem;
  border-radius: 999px;
  border:1px solid var(--cl-border);
  font-size: .9rem;
}

/* ===== KPIs ===== */
.clim-kpi-grid{
  margin-top: var(--cl-gap);
  display:grid; gap: var(--cl-gap);
  grid-template-columns: repeat(4, 1fr);
}
.kpi{ display:flex; flex-direction:column; gap:6px; text-align:center; }
.kpi span{ opacity:.8; font-size:.95rem; }
.kpi strong{ font-size:1.4rem; }

/* ===== Tabla ===== */
#clim-table h3{ margin: 4px 0 10px 0; }

/* Contenedor desplazable en móvil */
#clim-table{
  /* se usará como contenedor de scroll en pantallas pequeñas */
}

#clim-table table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#clim-table thead th{
  text-align:left;
  font-weight:600;
  padding:10px;
  border-bottom:1px solid var(--cl-border);
  white-space: nowrap;        /* desktop: una sola línea */
}

#clim-table tbody td{
  padding:10px;
  border-bottom:1px dashed var(--cl-border);
  vertical-align: middle;
  white-space: nowrap;
}

#clim-table tbody tr:nth-child(even){ background: var(--cl-row-alt); }
#clim-table .muted{ text-align:center; }

/* ===== Gráficas ===== */
.module .module-head{
  display:flex; align-items:center; justify-content:space-between;
  margin: 18px 0 10px;
}
.clim-charts{
  display:grid; gap: var(--cl-gap);
  grid-template-columns: repeat(2, 1fr);
}
.chart-card h4{ margin: 2px 2px 10px 2px; }

/* Tamaño CANVAS fijo para evitar “estiramientos infinitos” */
.chart-card canvas{
  width: 100% !important;
  height: 260px !important;     /* escritorio */
  display:block;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .clim-kpi-grid{ grid-template-columns: repeat(2, 1fr); }
  .chart-card canvas{ height: 220px !important; }
}

@media (max-width: 640px){
  /* KPIs más discretos en móvil */
  .clim-kpi-grid{ grid-template-columns: 1fr; }
  .kpi span{ font-size:.88rem; }
  .kpi strong{ font-size:1.22rem; }

  /* Tabla: scroll horizontal + cabeceras multilínea + sticky primera col */
  #clim-table{
    overflow-x: auto;             /* contenedor de scroll */
    -webkit-overflow-scrolling: touch;
  }
  #clim-table table{
    min-width: 720px;             /* fuerza scroll si no cabe */
  }

  #clim-table thead th{
    white-space: normal;          /* permitimos romper línea */
    line-height: 1.2;
    word-break: break-word;
    font-size: .9rem;
    padding: 8px;
  }
  #clim-table tbody td{
    font-size: .95rem;
    padding: 8px;
  }

  /* sticky primera columna (Mes) para no perderla al desplazar */
  #clim-table thead th:first-child,
  #clim-table tbody td:first-child{
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--cl-card-bg);
    /* pequeño borde para que no “flote” */
    box-shadow: 1px 0 0 var(--cl-border);
  }

  /* Gráficas: más bajas en móvil */
  .clim-charts{ grid-template-columns: 1fr; }
  .chart-card canvas{ height: 180px !important; }
}