/* JDServer-Webs v6.1 — modules/climate/climate.css
   Estilo Apple/Aurora-Live para la página de Clima
*/

/* ===== 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; }
#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;
}
#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;     /* altura estable escritorio */
  display:block;
}

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