/* charts_listas-frente-amplio_min.css
   BUNDLE DE PRODUCCION: tokens.css + base.css (de shared/) + estilos del proyecto.
   Generado por concatenacion; subir este unico CSS al servidor. */

/*
 * shared/styles/tokens.css
 * -------------------------------------------------------------------
 * Tokens de marca elDiario.es como variables CSS.
 * Se definen una sola vez en :root y se referencian con var(--ed-*).
 * Mantener sincronizado con shared/colors/paleta.js.
 * -------------------------------------------------------------------
 */
:root {
  /* Colores de marca */
  --ed-rojo: #D0021B;
  --ed-negro: #1a1a1a;
  --ed-amarillo: #ECDC19;
  --ed-azul: #4A90E2;
  /* Azul principal de elDiario.es: color por defecto de acentos/controles de los gráficos
     (spinner, interruptores…) salvo que un proyecto use otro color principal. */
  --ed-azul-principal: #005695;

  /* Grises de UI / ejes */
  --ed-gris-900: #333333;
  --ed-gris-700: #4a4a4a;
  --ed-gris-500: #939393;
  --ed-gris-300: #c5c5c5;
  --ed-gris-200: #dedede;
  --ed-gris-100: #eaeaea;

  /* Texto */
  --ed-texto: #1a1a1a;
  --ed-texto-suave: #4a4a4a;

  /* Radio de las esquinas de los controles (botones, switch, dropdown, buscador).
     Por defecto ligero (4px). Para esquinas RECTAS, envuelve en un elemento con
     la clase .ed-rectos (pone --ed-radio: 0) o cambia este valor. */
  --ed-radio: 4px;

  /* Tipografías.
     - --ed-fuente: Encode Sans (Google Fonts). Es la fuente por defecto, también
       para los TÍTULOS estándar (como en incendios).
     - --ed-fuente-titulo: Sanomat, fuente editorial "de entidad" para proyectos más
       visuales. La sirve el propio CMS de elDiario; fuera del CMS cae a Georgia.
       Se activa con la clase `ed-display` en el contenedor. */
  --ed-fuente: 'Encode Sans', 'Helvetica Neue', Arial, sans-serif;
  --ed-fuente-titulo: 'Sanomat-Bold', Georgia, 'Times New Roman', serif;
}

/* Variante de esquinas RECTAS: envuelve los controles en un elemento con esta clase. */
.ed-rectos { --ed-radio: 0px; }


/*
 * shared/styles/base.css
 * -------------------------------------------------------------------
 * Base para gráficos que se incrustan INLINE en el CMS (no en iframe).
 * Como el gráfico convive en el mismo DOM que el artículo, TODO cuelga de
 * clases propias para no colisionar con los estilos del CMS.
 *
 * CONVENIO DE SCOPING (fijado):
 *   Cada contenedor de gráfico lleva DOS clases:
 *     - `.ed-chart`         -> base UNIVERSAL de la casa (este archivo). Se comparte.
 *     - `.chart-<proyecto>` -> estilos ESPECÍFICOS del proyecto (su charts_<x>.css).
 *   Así el reset/tipografía/anti-CMS y las primitivas comunes (svg, ejes, tooltip)
 *   se definen una sola vez aquí, y lo propio de cada proyecto se aísla bajo su
 *   clase, de modo que dos proyectos distintos nunca se pisen en una misma pieza.
 *
 * Requiere shared/styles/tokens.css cargado antes (variables --ed-*).
 * -------------------------------------------------------------------
 */

/* Reset mínimo, SOLO dentro del gráfico */
.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;
  /* El CMS suele forzar text-align:center en el cuerpo del artículo: lo neutralizamos. */
  text-align: left;
  /* Evita que el gráfico se coloque pegado a un elemento flotado del CMS. */
  clear: left;
}

/* Título ESTÁNDAR: en Encode Sans (como incendios). Es el que se usa por defecto. */
/* CABECERA — título, subtítulo y fuente.
   Clases de nivel superior (no dependen de .ed-chart) para que funcionen en las DOS formas:
   (A) renderadas por el JS dentro del gráfico (init({ titulo, subtitulo, fuente }));
   (B) escritas A MANO en el HTML, como sibling del contenedor del gráfico. */
.ed-titulo {
  font-family: var(--ed-fuente);
  font-weight: 700;
  color: var(--ed-negro);
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 4px;
}
/* Variante de entidad: título en Sanomat. Añade `ed-display` al título o a un ancestro. */
.ed-titulo.ed-display,
.ed-display .ed-titulo {
  font-family: var(--ed-fuente-titulo);
}
.ed-subtitulo {
  font-family: var(--ed-fuente);
  color: var(--ed-texto-suave);
  font-size: 14px;
  margin: 0 0 16px;
}
.ed-fuente {
  font-family: var(--ed-fuente);
  color: var(--ed-gris-500);
  font-size: 12px;
  margin-top: 8px;
}

/* --- Primitivas comunes de gráfico (universales, se comparten) --- */

/* SVG responsive: ocupa el ancho del contenedor y escala en alto. */
.ed-chart .ed-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Ejes D3 — estilo elDiario:
   - dominio (línea del eje) SIEMPRE oculto,
   - texto en gris medio (#939393),
   - ejes de VALOR con rejilla gris clara punteada (clase .ed-eje-grid),
   - eje base (categorías) con marcas gris medio sólidas. */
/* Todo el texto SVG en la fuente de la casa (los ejes y etiquetas la necesitan
   explícita: la herencia de font-family dentro del SVG no siempre es fiable). */
.ed-chart .ed-svg text { font-family: var(--ed-fuente); }
.ed-chart .ed-eje text { font-size: 14px; fill: var(--ed-gris-500); }
.ed-chart .ed-eje path { stroke-width: 0; }                 /* dominio oculto */
.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; }

/* Halo de texto: contorno blanco para que una etiqueta SVG se lea sobre un fondo
   con color (mapas, líneas, barras). Añade la clase .ed-halo al <text>. */
.ed-chart .ed-halo {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: 0.9;
  paint-order: stroke; /* pinta el contorno DEBAJO del relleno */
}

/* Capa de resalte (borde negro sobre el elemento activo).
   La crea shared/utils/highlight.js (EDHighlight.crear). */
.ed-chart .ed-highlight-layer rect,
.ed-chart .ed-highlight-layer circle,
.ed-chart .ed-highlight-layer path {
  fill: none;
  stroke: var(--ed-negro);
  stroke-width: 2px;
}

/* El tooltip (.ed-tooltip) se crea en <body> con estilos INLINE (patrón de la casa,
   ver shared/utils/tooltip.js). No lleva CSS aquí a propósito: vive fuera de .ed-chart. */


/*
 * charts_listas-frente-amplio.css — estilos ESPECÍFICOS del proyecto.
 * -------------------------------------------------------------------
 * Va DESPUÉS de shared/styles/tokens.css y shared/styles/base.css:
 *   - tokens.css  -> variables --ed-*
 *   - base.css    -> .ed-chart (reset, tipografía, anti-CMS, cabecera, tooltip)
 *
 * Todo cuelga de la clase de proyecto `.chart-listas-frente-amplio` para no
 * chocar con otros gráficos que convivan en la misma pieza del CMS.
 * -------------------------------------------------------------------
 */

/* ---- Cuadrícula de provincias ---- */
.chart-listas-frente-amplio .lfa-grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 4px;
}

.chart-listas-frente-amplio .lfa-prov {
  margin-bottom: 15px;
}

.chart-listas-frente-amplio .lfa-prov-nombre {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
  text-align: left;
}

.chart-listas-frente-amplio .lfa-fila {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* Grupos "con escaño" (sólido) y "sin escaño" (translúcido) */
.chart-listas-frente-amplio .lfa-grupo {
  display: flex;
  flex-direction: row;
  padding: 5px 0;
}
.chart-listas-frente-amplio .lfa-grupo--si {
  font-weight: 700;
  color: #fff;
}
.chart-listas-frente-amplio .lfa-grupo--divisor {
  border-right: 3px solid var(--ed-gris-500);
  padding-right: 0;
}
.chart-listas-frente-amplio .lfa-grupo--no {
  opacity: 0.5;
}

/* Un bloque = un puesto de lista */
.chart-listas-frente-amplio .lfa-bloque {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

/* Resalte en hover: atenúa el resto y deja a plena opacidad los del mismo partido.
   (La translucidez base de .lfa-grupo--no la pone su contenedor, encima de esto.) */
.chart-listas-frente-amplio .lfa-grid.lfa-hover .lfa-bloque { opacity: 0.3; }
.chart-listas-frente-amplio .lfa-grid.lfa-hover .lfa-bloque.lfa-activo { opacity: 1; }
/* Borde negro en el bloque bajo el cursor: siempre, también en los sin confirmar. */
.chart-listas-frente-amplio .lfa-bloque.lfa-hovered {
  opacity: 1;
  border-color: var(--ed-negro);
}

/* ---- Caja de ejemplo (cómo leer la cuadrícula) ---- */
.chart-listas-frente-amplio .lfa-ejemplo {
  display: flex;
  justify-content: center;
  margin: 28px 0 24px;
}
.chart-listas-frente-amplio .lfa-fila--ejemplo { position: relative; }
.chart-listas-frente-amplio .lfa-bloque--demo {
  background-color: var(--ed-gris-500);
  cursor: default;
}
.chart-listas-frente-amplio .lfa-ej-etiqueta {
  position: absolute;
  color: var(--ed-negro);
  font-weight: 400;
  font-size: 11px;
  white-space: nowrap;
}
.chart-listas-frente-amplio .lfa-ej-etiqueta--result { top: -16px; right: 3px; }
.chart-listas-frente-amplio .lfa-ej-etiqueta--puesto { bottom: -16px; left: 0; }
.chart-listas-frente-amplio .lfa-ej-etiqueta--sin { bottom: -16px; right: 0; }

/* ---- Leyenda de partidos ---- */
.chart-listas-frente-amplio .lfa-leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 14px;
  font-weight: 700;
}
.chart-listas-frente-amplio .lfa-leyenda-item {
  padding: 5px 8px;
  color: #fff;
}

/* ---- Tooltip (contenido; la caja la estila shared/utils/tooltip.js) ---- */
.ed-tooltip .lfa-tt-titulo {
  display: block;
  text-align: left;
  margin: 0 0 1px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ed-negro);
}
.ed-tooltip .lfa-tt-sub {
  display: block;
  text-align: left;
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--ed-gris-500);
}
/* Fila por año: muestra de color + año + partido/candidato */
.ed-tooltip .lfa-tt-fila {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 7px;
  padding-top: 7px;
  border-top: 1px solid var(--ed-gris-200);
}
.ed-tooltip .lfa-tt-chip {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.ed-tooltip .lfa-tt-ano {
  flex: 0 0 auto;
  width: 30px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ed-gris-500);
  margin-top: 1px;
}
.ed-tooltip .lfa-tt-dato {
  font-size: 12px;
  line-height: 1.35;
}
.ed-tooltip .lfa-tt-escano {
  display: block;
  text-align: left;
  margin: 4px 0 0;
  font-size: 12px;
}
.ed-tooltip .lfa-tt-escano:first-of-type {
  margin-top: 8px;
}

/* ---- Mapa de candidaturas de izquierda ---- */
.chart-listas-frente-amplio .lfa-mapa-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 9px;
  align-items: center;
  justify-content: center;
  margin: 2px 0 6px;
  font-size: 11px;
}
.chart-listas-frente-amplio .lfa-mapa-ley-item {
  display: flex;
  align-items: center;
  gap: 3px;
}
.chart-listas-frente-amplio .lfa-mapa-ley-sw {
  width: 10px;
  height: 10px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex: 0 0 auto;
}
.chart-listas-frente-amplio .lfa-mapa-ley-txt { font-size: 11px; line-height: 1.2; }
/* Dos cajitas de leyenda: en escritorio lado a lado (conjunta izquierda, colores derecha);
   en móvil apiladas. Cada una se ve distinta (fondo gris muy claro). */
.chart-listas-frente-amplio .lfa-mapa-leyenda-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 2px 0 6px;
}
.chart-listas-frente-amplio .lfa-mapa-leyenda--nota,
.chart-listas-frente-amplio .lfa-mapa-leyenda--colores {
  margin: 0;
  border: 1px solid #ececec;   /* mismo estilo que el recuadro de las provincias */
  padding: 6px 8px;
}
.chart-listas-frente-amplio .lfa-mapa-leyenda--nota { flex: 0 0 auto; }
.chart-listas-frente-amplio .lfa-mapa-leyenda--colores { flex: 0 1 auto; max-width: 400px; }
@media (max-width: 600px) {
  .chart-listas-frente-amplio .lfa-mapa-leyenda-wrap { flex-direction: column; }
}

/* Cartograma: etiqueta de provincia encima de los cuadraditos */
.chart-listas-frente-amplio .lfa-carto-lab {
  font-size: 11px;
  font-weight: 400;
  fill: var(--ed-gris-700);
  pointer-events: none;
}
/* Separación entre la leyenda y el cartograma */
.chart-listas-frente-amplio .lfa-carto-svg { margin-top: 28px; }
/* Borde gris muy suave al recuadro completo de cada provincia */
.chart-listas-frente-amplio .lfa-carto-hit {
  stroke: #ececec;
  stroke-width: 1;
}

/* Tooltip del mapa (dentro de .ed-tooltip) */
.ed-tooltip .lfa-mapa-tt-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  margin: 2px 0;
}
.ed-tooltip .lfa-mapa-tt-chip {
  width: 11px;
  height: 11px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex: 0 0 auto;
}
.ed-tooltip .lfa-mapa-tt-estado { color: var(--ed-gris-500); font-size: 11px; }
/* Tooltip del cartograma: una candidatura por bloque, separadas por una línea */
.ed-tooltip .lfa-mapa-tt-cand {
  border-top: 1px solid var(--ed-gris-200);
  padding-top: 6px;
  margin-top: 6px;
}
.ed-tooltip .lfa-mapa-tt-nombre {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 3px;
}
.ed-tooltip .lfa-mapa-tt-bloque {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  margin: 1px 0;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .chart-listas-frente-amplio .lfa-grid { column-gap: 20px; }
}