/* ===================================================================
 * charts_sequia.css — Monitor de sequía (elDiario.es)
 * Autocontenido: tokens de marca + base universal .ed-chart + estilos
 * propios .chart-sequia. Un solo CSS para todas las piezas.
 * =================================================================== */

/* ------------------------------ TOKENS ------------------------------ */
:root {
  --ed-rojo: #D0021B; --ed-negro: #1a1a1a; --ed-amarillo: #ECDC19;
  --ed-azul: #4A90E2; --ed-azul-principal: #005695;
  --ed-gris-900: #333333; --ed-gris-700: #4a4a4a; --ed-gris-500: #939393;
  --ed-gris-300: #c5c5c5; --ed-gris-200: #dedede; --ed-gris-100: #eaeaea;
  --ed-texto: #1a1a1a; --ed-texto-suave: #4a4a4a; --ed-radio: 4px;
  --ed-fuente: 'Encode Sans', 'Helvetica Neue', Arial, sans-serif;
  --ed-fuente-titulo: 'Sanomat-Bold', Georgia, 'Times New Roman', serif;
}

/* ------------------------- BASE UNIVERSAL --------------------------- */
.ed-chart, .ed-chart *, .ed-chart *::before, .ed-chart *::after { box-sizing: border-box; }
.ed-chart {
  font-family: var(--ed-fuente); color: var(--ed-texto); line-height: 1.4;
  margin: 24px 0; text-align: left; clear: left;
}
.ed-chart h2, .ed-chart h3, .ed-chart .ed-titulo {
  font-family: var(--ed-fuente); font-weight: 700; color: var(--ed-negro);
  margin: 0 0 4px; line-height: 1.2; font-size: 20px;
}
.ed-chart .ed-subtitulo { color: var(--ed-texto-suave); font-size: 14px; margin: 0 0 16px; }
.ed-chart .ed-actualizado { color: var(--ed-gris-500); font-size: 12px; margin: -8px 0 14px; }
.ed-chart .ed-fuente { color: var(--ed-gris-500); font-size: 12px; margin-top: 8px; }
.ed-chart .ed-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ed-chart .ed-svg text { font-family: var(--ed-fuente); }
.ed-chart .ed-eje text { font-size: 13px; fill: var(--ed-gris-500); }
.ed-chart .ed-eje path { stroke-width: 0; }
.ed-chart .ed-eje line { stroke: var(--ed-gris-500); stroke-width: 1; }
.ed-chart .ed-eje-grid line { stroke: var(--ed-gris-300); stroke-width: 0.5; stroke-dasharray: 3; }

/* ====================================================================
 * ESTILOS DEL PROYECTO (.chart-sequia)
 * ==================================================================== */

/* --- Línea del cero (referencia común) --- */
.chart-sequia .sq-cero { stroke: var(--ed-gris-500); stroke-width: 1; }

/* --- Ranking: barras divergentes --- */
.chart-sequia .sq-barra { }
.chart-sequia .sq-nombre { font-size: 13px; fill: var(--ed-negro); }
.chart-sequia .sq-nombre-activa { font-weight: 700; }                         /* CCAA elegida en el selector global */
.chart-sequia .sq-valor  { font-size: 12px; fill: var(--ed-gris-700); font-variant-numeric: tabular-nums; }
.chart-sequia .sq-fila:hover .sq-barra { stroke: var(--ed-negro); stroke-width: 1.5; }
.chart-sequia .sq-fila-activa .sq-barra { stroke: var(--ed-negro); stroke-width: 1.5; }

/* --- Leyenda (estilo EDLeyenda de la plantilla: fina y ligera) --- */
.chart-sequia .ed-leyenda { font-family: var(--ed-fuente); margin: 4px 0 14px; max-width: 420px; }
.chart-sequia .ed-leyenda-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ed-gris-700); margin-bottom: 6px; }
.chart-sequia .ed-leyenda-escala { display: flex; }
.chart-sequia .ed-leyenda-bloque { flex: 1 1 auto; height: 10px; }
.chart-sequia .ed-leyenda-labels { display: flex; justify-content: space-between; margin-top: 4px; }
.chart-sequia .ed-leyenda-label { font-size: 12px; color: var(--ed-gris-500); }

/* --- Franjas (climate stripes de todas las CCAA: heatmap fila=CCAA) --- */
.chart-sequia .sq-franja-cel { shape-rendering: crispEdges; }
.chart-sequia .sq-franja-lab { font-size: 12px; fill: var(--ed-negro); }
.chart-sequia .sq-franja-lab-activa { font-weight: 700; }
.chart-sequia .sq-franja-foco { fill: none; stroke: var(--ed-negro); stroke-width: 1.5; }
.chart-sequia .sq-franja-sel { fill: none; stroke: var(--ed-negro); stroke-width: 1.5; }

/* --- Evolución (stripes: una barrita por semana, tipo heatmap) --- */
.chart-sequia .sq-stripe { shape-rendering: crispEdges; }
.chart-sequia .sq-stripe-marca { fill: none; stroke: var(--ed-negro); stroke-width: 1.5; pointer-events: none; }
.chart-sequia .sq-captura { fill: transparent; }
/* Anotación del sentido del eje (verde = húmedo, marrón = seco; el color va inline) */
.chart-sequia .sq-eje-nota { font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }

/* --- Brecha (diferencia SPEI−SPI; fill por gradiente inline) --- */
.chart-sequia .sq-area-brecha { stroke: none; }
.chart-sequia .sq-linea-brecha { fill: none; stroke-width: 1.25; }   /* color = degradado del relleno (inline) */
.chart-sequia .sq-foco { stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.chart-sequia .sq-nota-brecha { font-size: 12px; color: var(--ed-gris-700); margin: 6px 0 0; line-height: 1.4; }

/* --- Mapa (MapLibre) con leyenda flotante --- */
.chart-sequia .sq-mapa-box { position: relative; width: 100%; border: 1px solid var(--ed-gris-200); border-radius: var(--ed-radio); overflow: hidden; background: #e9e9e9; }
.chart-sequia .sq-mapa { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-sequia .sq-mapa-leyenda { position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: rgba(255,255,255,.9); border-radius: 3px; padding: 7px 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); pointer-events: none; max-width: calc(100% - 20px); }
.chart-sequia .sq-mapa-leyenda .ed-leyenda { margin: 0; min-width: 190px; }
.chart-sequia .sq-mapa-leyenda .ed-leyenda-label { font-size: 10px; }
/* Botón "volver a España" del mapa (icono de la casa, mismo que incendios) */
.chart-sequia .maplibregl-ctrl-volver-sequia {
  background-image: url('https://lab.eldiario.es/elections-maps/elecciones/autonomicas/iconos/volver/zoom_return.svg');
  background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
}
.sq-map-popup .maplibregl-popup-content { font-family: var(--ed-fuente); font-size: 12px; padding: 6px 10px; border-radius: var(--ed-radio); box-shadow: 0 2px 2px 0 #ccc; }
.sq-map-popup .maplibregl-popup-tip { display: none; }
/* Punto que marca el lugar tocado (sobre todo en móvil) */
.chart-sequia .sq-mapa-punto { width: 13px; height: 13px; border-radius: 50%; background: var(--ed-negro);
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

/* --- Selector global de CCAA (arriba, controla evolución/brecha/tabla) --- */
.chart-sequia.chart-sequia .sq-selector-global {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--ed-gris-100); border-radius: var(--ed-radio); padding: 12px 14px; margin: 0;
}
.chart-sequia .sq-selector-label { font-size: 14px; font-weight: 600; color: var(--ed-gris-900); }

/* --- Control desplegable --- */
.chart-sequia .sq-control { margin: 0 0 12px; }
.chart-sequia .sq-dropdown {
  font-family: var(--ed-fuente); font-size: 14px; color: var(--ed-negro);
  padding: 7px 30px 7px 12px; border: 1px solid var(--ed-gris-300); border-radius: var(--ed-radio);
  background: #fff; cursor: pointer; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23939393'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.chart-sequia .sq-dropdown:focus { outline: none; border-color: var(--ed-azul-principal); }

/* --- Tabla-buscador --- */
/* Buscador (izquierda) + paginación (derecha) en una fila; en móvil, sin envolver */
.chart-sequia .sq-tabla-controles {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  flex-wrap: nowrap; margin: 0 0 12px;
}
.chart-sequia .sq-buscador {
  font-family: var(--ed-fuente); font-size: 14px;
  flex: 1 1 auto; min-width: 0; width: auto; max-width: 250px;
  padding: 8px 12px; border: 1px solid var(--ed-gris-300); border-radius: var(--ed-radio);
  /* colores explícitos para que iOS no aplique sus defaults */
  background-color: #ffffff; color: var(--ed-negro);
  -webkit-appearance: none; appearance: none;
}
.chart-sequia .sq-buscador::placeholder { color: var(--ed-gris-500); opacity: 1; }
.chart-sequia .sq-buscador:focus { outline: none; border-color: var(--ed-azul-principal); }
.chart-sequia .sq-tabla-wrap { overflow-x: auto; }
.chart-sequia .sq-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.chart-sequia .sq-th {
  text-align: right; font-weight: 600; color: var(--ed-gris-700); cursor: pointer;
  padding: 8px 10px; border-bottom: 2px solid var(--ed-gris-300); user-select: none;
}
.chart-sequia .sq-th-txt { text-align: left; }
.chart-sequia .sq-th:hover { color: var(--ed-negro); }
.chart-sequia .sq-th-cat { text-align: left; }
.chart-sequia .sq-tabla td { padding: 6px 10px; border-bottom: 1px solid var(--ed-gris-100); line-height: 1.3; vertical-align: middle; }
.chart-sequia .sq-td-txt { text-align: left; }
.chart-sequia .sq-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.chart-sequia .sq-td-cat { text-align: left; }
.chart-sequia .sq-sub { color: var(--ed-gris-500); font-weight: 400; font-size: 11px; }
.chart-sequia .sq-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chart-sequia .sq-tabla tbody tr:hover { background: var(--ed-gris-100); }

.chart-sequia .sq-paginacion { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 13px; color: var(--ed-gris-700); white-space: nowrap; }
.chart-sequia .sq-pag-btn {
  font-family: var(--ed-fuente); font-size: 14px; line-height: 1; cursor: pointer;
  border: 1px solid var(--ed-gris-300); border-radius: var(--ed-radio); padding: 5px 9px;
  /* colores explícitos para que iOS no aplique sus defaults */
  background-color: #ffffff; color: var(--ed-negro);
  -webkit-appearance: none; appearance: none;
}
.chart-sequia .sq-pag-btn:disabled { opacity: 0.4; cursor: default; }
.chart-sequia .sq-pag-info { font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; color: var(--ed-gris-700); }