/* JDServer-Webs v6.1 — modules/climate_climograph/climate-climograph.css */
/* Tarjeta + SVG responsivo en estilo Aurora-Live */

#climate-climograph.module {
  margin-top: 18px;
}

.climo-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-2);
  padding: 12px;
}

.climo-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}

.climo-head h3 {
  margin:0; font-size:1.05rem;
}

.climo-legend {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  font-size:.9rem;
}

.climo-legend .key {
  display:inline-flex; align-items:center; gap:6px;
  padding:.18rem .5rem; border-radius:999px;
  border:1px solid var(--border); background: var(--card);
  color: var(--muted);
}

.key .box {
  width:14px; height:10px; border-radius:3px;
  display:inline-block;
}

.key .line {
  width:16px; height:0; border-top:3px solid currentColor;
  display:inline-block;
}

/* Colores vía variables para integrarlo en la marca */
:root {
  --climo-prcp: #60a5fa; /* barras precip */
  --climo-tmax: #ef4444;
  --climo-tmin: #3b82f6;
}

html[data-theme="light"] :root,
body[data-theme="light"] :root,
.theme-light :root {
  --climo-prcp: #2563eb;
  --climo-tmax: #dc2626;
  --climo-tmin: #1d4ed8;
}

/* Lienzo */
.climo-svg-wrap {
  width:100%;
  aspect-ratio: 12 / 6;      /* estable en escritorio */
  max-height: 360px;         /* techo visual */
  display:block;
}

@media (max-width: 720px){
  .climo-svg-wrap { aspect-ratio: 12 / 8; max-height: 320px; }
}

.climo-svg {
  width:100%; height:100%;
}

/* Ejes y labels */
.climo-axis text {
  fill: var(--muted);
  font-size: .82rem;
}

.climo-grid line {
  stroke: var(--border);
  stroke-width: 1;
}

/* Series */
.climo-bar {
  fill: var(--climo-prcp);
  opacity: .85;
}

.climo-line-tmax { stroke: var(--climo-tmax); stroke-width: 2.5; fill: none; }
.climo-line-tmin { stroke: var(--climo-tmin); stroke-width: 2.5; fill: none; }

.climo-dots circle { r: 2.8; }
.climo-dots .tmax { fill: var(--climo-tmax); }
.climo-dots .tmin { fill: var(--climo-tmin); }

/* Meses en el pie */
.climo-months {
  margin-top: 8px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  font-size: .85rem;
  color: var(--muted);
  text-align:center;
}