/* JDServer-Webs v6.3 — 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;
}

/* Override en tema claro (antes el selector no aplicaba bien) */
html[data-theme="light"]{
  --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 dentro del SVG */
.climo-month{
  fill: var(--muted);
  font-size: .85rem;
}