/* ╔══════════════════════════════════════════════════════════╗
   ║  EL MAPA DE CALOR — estilos                                ║
   ╚══════════════════════════════════════════════════════════╝

   Copiado VERBATIM del CSS que llevan dentro los componentes de
   components/mapa/ del Design System (MapaEspana, MapaCalor, LeyendaTramos,
   FiltroFrecuencia y TarjetaZona). Allí cada componente se inyecta su propia
   hoja al montarse, porque son React; aquí no hay React, así que las cinco
   hojas viven juntas en este archivo y en el mismo orden.

   Las clases se llaman IGUAL que en el Design System (da-mapa, da-calor,
   da-tramos, da-frec, da-zona) a propósito: cuando el mapa baje a la app de
   verdad, se reconoce que es el mismo componente y no un primo lejano. */

/* ─────────── la rampa de calor, como tokens ───────────
   Seis pasos con luminosidad monótona: la información va en el claro-oscuro,
   no en el tono. Funciona en blanco y negro y para daltónicos.

   El calor de esta marca es verde lima, no rojo. El amarillo del sello
   (--da-stamp-oficial) marca las zonas top y NUNCA rellena una provincia. */
:root {
	/* ⚠️ CORREGIDO EL 30/8/2026. Venían del Design System con DOS inversiones:
	   --heat-1 (#c7ce9e) era más oscuro que --heat-2 (#dee2b7), y --heat-3
	   (#a8bd1c) más oscuro que --heat-4 (#b9c91c). O sea que en 4 de los 6
	   pasos "más oscuro" significaba "menos", justo al revés de lo que el mapa
	   dice que significa. Se ve peor ahora que el mapa es el argumento de la
	   página: una provincia con 3 planes salía más oscura que una con 15.

	   Estos son los valores buenos, portados de apps/web/src/shared/ui/mapa/
	   MapaEspana.css, donde ya se arreglaron el 28/8. La luminosidad baja de
	   forma monótona, así que el mapa se sigue leyendo en blanco y negro y con
	   daltonismo. SIGUE MAL en el Design System: hay que arreglarlo allí. */
	--heat-0: var(--da-paper-2); /* #ececec — sin apuntar → 👀 */
	--heat-1: #dee2b7; /* ya ha pasado algo */
	--heat-2: #c7ce9e; /* hay costumbre */
	--heat-3: #b9c91c; /* zona con vida (≥8) */
	--heat-4: #a8bd1c; /* aquí se sale mucho */
	--heat-5: #6e7615; /* aquí ya hay tren */

	--heat-linea: rgba(47, 36, 24, 0.28); /* el borde entre provincias */
	--heat-silueta: rgba(47, 36, 24, 0.34); /* la provincia sin sellar (pokédex) */
}

/* ─────────── MapaEspana — la geografía y nada más ─────────── */

.da-mapa { position:relative; width:100%; font-family:var(--font-body) }
.da-mapa__svg { display:block; width:100%; height:auto }
.da-mapa__g { cursor:pointer; outline:none }
.da-mapa__p { stroke:var(--heat-linea); stroke-width:1.1; stroke-linejoin:round; transform-box:fill-box; transform-origin:center; transition:fill var(--dur) var(--ease) }
.da-mapa__g:hover .da-mapa__p { filter:brightness(.94) }
.da-mapa__g:focus-visible .da-mapa__p { stroke:var(--da-ink); stroke-width:2.4 }
.da-mapa__g.is-silueta .da-mapa__p { fill:none; stroke:var(--heat-silueta); stroke-width:1.2; stroke-dasharray:4 3 }
.da-mapa__g.is-sel .da-mapa__p { stroke:var(--da-ink); stroke-width:2.4 }
.da-mapa__marca { font-size:15px; text-anchor:middle; dominant-baseline:central; pointer-events:none; user-select:none; opacity:.85 }
.da-mapa__hit { fill:transparent; stroke:none }
.da-mapa__lider { stroke:var(--da-ink); stroke-width:.8; opacity:.4 }
.da-mapa__punto { stroke:var(--da-paper); stroke-width:1.4 }
.da-mapa__g.is-silueta .da-mapa__punto { fill:none; stroke:var(--heat-silueta); stroke-dasharray:3 2 }
.da-mapa__sello { fill:none; stroke:var(--da-stamp-oficial); stroke-width:3; transform-box:fill-box; transform-origin:center }
.da-mapa__g.is-estampa .da-mapa__p { animation:da-mapa-golpe .4s var(--ease-bounce) }
.da-mapa__g.is-estampa .da-mapa__sello,
.da-mapa__g.is-estampa .da-mapa__punto { animation:da-mapa-estampa .45s var(--ease-bounce) }
@keyframes da-mapa-golpe { 0% { transform:scale(1) } 30% { transform:scale(1.09) } 100% { transform:scale(1) } }
@keyframes da-mapa-estampa { 0% { transform:scale(2.6); opacity:0 } 40% { opacity:1 } 100% { transform:scale(1); opacity:1 } }

/* Canarias en su recuadro, con marco. Convención cartográfica: nunca
   flotando a escala falsa al lado de la península. */
.da-mapa__caja { position:absolute; right:0; bottom:0; width:37%; padding:3px 4px 1px; background:var(--da-paper); border:1.5px dashed rgba(37,37,37,.32); border-radius:var(--radius-sm) }
.da-mapa__caja-tag { display:block; font-size:9px; font-weight:var(--fw-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--da-gray); margin:0 0 1px 2px }

/* ─────────── MapaCalor — la que opina ─────────── */

.da-calor { font-family:var(--font-body); color:var(--text-primary); max-width:520px; margin:0 auto }
.da-calor__kicker { margin:0 0 var(--space-2); font:var(--fw-bold) var(--text-xs)/1 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--da-gray) }
.da-calor__titular { margin:0; font-family:'Poppins', sans-serif; font-size:32px; font-weight:var(--fw-black); letter-spacing:-0.05em; line-height:1; text-wrap:balance }
.da-calor__entradilla { margin:var(--space-2) 0 0; font-size:var(--text-base); line-height:var(--leading-normal); color:var(--text-primary) }
.da-calor__entradilla b { color:var(--da-accent-ink); background:var(--accent-tint); border-radius:var(--radius-xs); padding:0 4px }
.da-calor__filtro { margin-top:var(--space-5) }
.da-calor__panel { position:relative; margin-top:var(--space-4); padding:0 0 var(--space-3); background:var(--da-paper); border:1.5px dashed rgba(37,37,37,.28); border-radius:var(--radius-md); box-shadow:var(--shadow-card); overflow:hidden }
.da-calor__banda { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); padding:9px 12px; border-bottom:1.5px dashed rgba(37,37,37,.22); background:var(--da-paper-soft); font:var(--fw-bold) var(--text-xs)/1 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--da-gray); white-space:nowrap }
.da-calor__banda b { color:var(--text-primary) }
.da-calor__mapa { padding:var(--space-3) var(--space-3) 0 }
.da-calor__escala { display:flex; gap:0; margin:var(--space-3) var(--space-3) 0; border-radius:var(--radius-xs); overflow:hidden }
.da-calor__paso { flex:1 1 0; height:12px }
.da-calor__escala-pies { display:flex; justify-content:space-between; margin:4px var(--space-3) 0; font-size:var(--text-xs); color:var(--da-gray) }
.da-calor__leyenda { display:flex; flex-wrap:wrap; gap:6px; margin:var(--space-3) var(--space-3) 0 }
.da-calor__lg { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-xs); color:var(--da-gray) }
.da-calor__lg i { width:12px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.10) }
.da-calor__lg.is-masa { color:var(--da-accent-ink); font-weight:var(--fw-bold) }
.da-calor__pie { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-3); font-size:var(--text-xs); color:var(--da-gray) }
.da-calor__pie span:last-child { white-space:nowrap }
.da-calor__pie b { color:var(--text-primary); font-family:'Poppins', sans-serif; font-size:var(--text-md); font-weight:var(--fw-black); letter-spacing:var(--tracking-tight) }
.da-calor__tramos { margin-top:var(--space-5) }
.da-calor__aviso { margin:var(--space-4) 0 0; padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); background:var(--da-paper-2); font-size:var(--text-sm); line-height:var(--leading-normal); color:var(--text-primary) }
.da-calor__aviso a { color:var(--da-accent-ink); text-decoration:underline; text-decoration-color:var(--da-accent); text-underline-offset:3px }
.da-calor__aviso a:hover { color:var(--da-accent) }

/* ─────────── FiltroFrecuencia — el segmented control ─────────── */

.da-frec { font-family:var(--font-body) }
.da-frec__cab { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); margin:0 0 var(--space-2) }
.da-frec__lbl { font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--da-gray); margin:0; flex:1 1 auto; min-width:0 }
.da-frec__nota { font-size:var(--text-xs); color:var(--da-gray); margin:0; white-space:nowrap }
.da-frec__seg { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--da-paper-2); border-radius:var(--radius) }
.da-frec__b { min-height:44px; padding:0 8px; border:0; border-radius:var(--radius-sm); background:transparent; font:var(--fw-medium) var(--text-sm)/1.2 var(--font-body); color:var(--da-gray); cursor:pointer; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) }
.da-frec__b:active { transform:scale(.97) }
.da-frec__b.is-on { background:var(--da-accent); color:var(--da-accent-ink); font-weight:var(--fw-bold); box-shadow:0 2px 0 var(--da-accent-shadow) }
.da-frec__b:disabled { cursor:default }
.da-frec__b:disabled.is-on { background:var(--da-paper); color:var(--text-primary); box-shadow:var(--shadow-xs) }
@media (min-width:520px) { .da-frec__seg { grid-template-columns:repeat(4, 1fr) } }

/* ─────────── LeyendaTramos — los 8 tramos de edad ─────────── */

.da-tramos { font-family:var(--font-body) }
.da-tramos__cab { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); margin:0 0 var(--space-2) }
.da-tramos__lbl { font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--da-gray); margin:0; flex:1 1 auto; min-width:0 }
/* Sin nowrap: "🔒 se desvela con tu respuesta" es más largo que la nota que
   había antes y a 390 px de ancho se salía por la derecha. */
.da-tramos__nota { font-size:var(--text-xs); color:var(--da-gray); margin:0; text-align:right; flex:0 1 auto }
.da-tramos__rejilla { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2) }
.da-tramos__b { display:flex; align-items:center; gap:var(--space-2); min-height:44px; padding:0 10px; border:var(--border-width-strong) solid var(--da-gray-line); border-radius:var(--radius); background:var(--da-paper); font:var(--fw-medium) var(--text-sm)/1.2 var(--font-body); color:var(--text-primary); text-align:left; cursor:pointer; transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) }
.da-tramos__b:active { transform:scale(.97) }
.da-tramos__b.is-on { border-color:var(--da-accent); background:var(--accent-tint); font-weight:var(--fw-bold); color:var(--da-accent-ink) }
.da-tramos__b:disabled { cursor:default; opacity:1; color:var(--da-gray); background:var(--da-paper-soft) }
.da-tramos__e { font-size:16px; line-height:1; flex:0 0 auto }
.da-tramos__t { flex:1 1 auto; min-width:0 }
.da-tramos__v { font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--da-gray); flex:0 0 auto }
.da-tramos__b.is-on .da-tramos__v { color:var(--da-accent-ink) }

/* ─────────── TarjetaZona — la ficha que sube al pulsar ─────────── */

.da-zona { position:fixed; inset:0; z-index:60; pointer-events:none; font-family:var(--font-body) }
.da-zona__velo { position:absolute; inset:0; background:var(--da-veil); backdrop-filter:blur(2px); opacity:0; transition:opacity var(--dur) var(--ease) }
.da-zona.is-abierta { pointer-events:auto }
.da-zona.is-abierta .da-zona__velo { opacity:1 }
.da-zona__hoja { position:absolute; left:0; right:0; bottom:0; margin:0 auto; max-width:440px; max-height:82%; display:flex; flex-direction:column; background:var(--da-paper); border-radius:var(--radius-xl) var(--radius-xl) 0 0; box-shadow:var(--shadow-modal); animation:sheetUp .34s var(--ease) }
.da-zona__tirador { flex:0 0 auto; padding:10px 0 2px; text-align:center; cursor:pointer; touch-action:none }
.da-zona__tirador i { display:inline-block; width:44px; height:4px; border-radius:var(--radius-pill); background:var(--da-gray-line) }
/* El hueco de abajo lleva 64px de más y no es capricho: el reproductor de
   música flota fijo sobre esa esquina y, sin ellos, se come el botón de votar.
   (Le pasa igual a las otras hojas de la página; aquí al menos no tapa el
   único sitio donde se puede seguir.) */
.da-zona__cuerpo { overflow:auto; -webkit-overflow-scrolling:touch; padding:var(--space-2) var(--space-5) calc(var(--space-6) + 64px + env(safe-area-inset-bottom)) }
.da-zona__cab { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-3); border-bottom:1px dashed var(--da-gray-line); padding-bottom:var(--space-3) }
.da-zona__nombre { margin:0; font-family:'Poppins', sans-serif; font-size:var(--text-xl); font-weight:var(--fw-black); letter-spacing:var(--tracking-tight); color:var(--text-primary); text-wrap:pretty }
.da-zona__iso { display:block; font:var(--fw-regular) var(--text-xs)/1 var(--font-mono); letter-spacing:var(--tracking-label); color:var(--da-gray); margin-top:4px }
.da-zona__cifra { margin:0; text-align:right; flex:0 0 auto }
.da-zona__n { display:block; font-family:'Poppins', sans-serif; font-size:var(--text-2xl); font-weight:var(--fw-black); letter-spacing:var(--tracking-mega); line-height:.9; color:var(--text-primary) }
.da-zona__n.is-vacia { font-size:var(--text-xl); letter-spacing:0 }
.da-zona__n-sub { display:block; font-size:var(--text-xs); color:var(--da-gray); margin-top:2px }
.da-zona__masa { display:flex; align-items:center; gap:6px; margin:var(--space-3) 0 0; padding:8px 10px; border-radius:var(--radius-sm); background:var(--accent-tint); font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--da-accent-ink) }
.da-zona__masa b { background:var(--da-stamp-oficial); color:var(--da-ink-warm); border-radius:var(--radius-xs); padding:1px 5px; letter-spacing:var(--tracking-snug); white-space:nowrap }
.da-zona__metricas { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-top:var(--space-3) }
.da-zona__m { padding:10px 12px; border-radius:var(--radius-sm); background:var(--da-paper-2) }
.da-zona__m-lbl { display:block; font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--da-gray) }
.da-zona__m-val { display:block; margin-top:4px; font-family:'Poppins', sans-serif; font-size:var(--text-lg); font-weight:var(--fw-black); letter-spacing:var(--tracking-tight); color:var(--text-primary) }
.da-zona__m-val.is-texto { font-size:var(--text-base); letter-spacing:var(--tracking-snug); line-height:1.15 }
.da-zona__m-pie { display:block; font-size:var(--text-xs); color:var(--da-gray); margin-top:2px; line-height:1.3 }
.da-zona__tramos { display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-4) }
.da-zona__tramo { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--radius-pill); background:var(--da-paper-2); font-size:var(--text-xs); color:var(--text-primary); white-space:nowrap }
.da-zona__tramo b { font-weight:var(--fw-bold) }
/* ─────────── el aviso de escasez ───────────
   Tres tonos, y el más flojo es el de la zona que va bien: aquí el color no
   premia, avisa. Rojo-magenta de la marca para "sois cuatro", ámbar para "hay
   poco", lima para "esto ya rueda". El borde izquierdo grueso es lo que lo
   separa de una tarjeta más y lo convierte en un aviso. */

.da-zona__aviso { margin-top:var(--space-3); padding:11px 13px; border-radius:var(--radius-sm); border-left:4px solid var(--da-gray-line); background:var(--da-paper-2) }
.da-zona__aviso-t { margin:0; font-family:'Poppins', sans-serif; font-size:var(--text-base); font-weight:var(--fw-black); letter-spacing:var(--tracking-tight); line-height:1.15; color:var(--text-primary) }
.da-zona__aviso-x { margin:5px 0 0; font-size:var(--text-sm); line-height:var(--leading-normal); color:var(--text-primary); text-wrap:pretty }
.da-zona__aviso.is-urgente { border-left-color:#DC00D3; background:rgba(220,0,211,.07) }
.da-zona__aviso.is-urgente .da-zona__aviso-t { color:#a4009d }
.da-zona__aviso.is-medio { border-left-color:var(--da-stamp-oficial); background:rgba(254,208,26,.14) }
.da-zona__aviso.is-vivo { border-left-color:var(--da-accent); background:var(--accent-tint) }
.da-zona__aviso.is-vivo .da-zona__aviso-t { color:var(--da-accent-ink) }

/* ─────────── lo vivido en esa provincia ───────────
   Los nombres de los planes que se hicieron allí. Es la parte de la ficha que
   hace que alguien pulse una segunda provincia: un número dice "hay 37",
   un nombre dice qué clase de sitio es esto. Se pintan como renglones de
   cuaderno porque eso es lo que son — apuntes de un calendario. */

.da-zona__vividos { margin-top:var(--space-4); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); background:var(--da-paper-soft); border:1px solid var(--da-gray-line) }
.da-zona__vividos-lbl { margin:0 0 6px; font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--da-gray) }
.da-zona__vivido { margin:0; padding:5px 0 5px 16px; position:relative; font-size:var(--text-sm); line-height:1.35; color:var(--text-primary); text-wrap:pretty; border-bottom:1px dashed var(--da-gray-line) }
.da-zona__vivido:last-of-type { border-bottom:0 }
.da-zona__vivido::before { content:'·'; position:absolute; left:4px; top:5px; font-weight:var(--fw-black); color:var(--da-accent) }
.da-zona__sitios { margin:8px 0 0; font-size:var(--text-xs); color:var(--da-gray); line-height:1.4; text-wrap:pretty }

/* El puente entre el pasado y lo que se vota hoy: cuánta gente hay por allí. */
.da-zona__censo { margin:var(--space-3) 0 0; font-size:var(--text-sm); color:var(--da-gray) }
.da-zona__censo b { font-family:'Poppins', sans-serif; font-weight:var(--fw-black); color:var(--text-primary); letter-spacing:var(--tracking-snug) }

/* ─────────── el candado ───────────
   Lo único apagado de toda la página, y por eso se le puede pedir que
   enganche. Se pinta como algo que está a punto de abrirse, no como un
   hueco: borde de rayas, fondo de acento flojo, y los 8 tramos asomando. */

.da-zona__candado { margin-top:var(--space-4); padding:var(--space-3) var(--space-4) var(--space-4); border:1.5px dashed var(--da-accent); border-radius:var(--radius-md); background:var(--accent-tint) }
.da-zona__candado-lbl { display:block; font-size:var(--text-sm); font-weight:var(--fw-black); letter-spacing:var(--tracking-tight); color:var(--da-accent-ink) }
.da-zona__candado-txt { display:block; margin-top:3px; font-size:var(--text-xs); line-height:1.45; color:var(--text-primary); text-wrap:pretty }
.da-zona__candado .da-zona__tramos { margin-top:var(--space-3) }
.da-zona__candado .da-zona__tramo { background:var(--da-paper); opacity:.72 }

.da-zona__vacia { margin-top:var(--space-4); padding:var(--space-4); border:1.5px dashed var(--da-gray-line); border-radius:var(--radius-md); background:var(--da-paper-soft) }
.da-zona__ojos { font-size:26px; line-height:1 }
.da-zona__breve { margin:6px 0 0; font-size:var(--text-md); font-weight:var(--fw-bold); color:var(--text-primary) }
.da-zona__breve a { color:var(--da-accent-ink); text-decoration:underline; text-decoration-color:var(--da-accent); text-underline-offset:3px }
.da-zona__breve a:hover { color:var(--da-accent) }
.da-zona__poco { margin:var(--space-3) 0 0; font-size:var(--text-sm); line-height:var(--leading-normal); color:var(--text-primary); text-wrap:pretty }
.da-zona__cta { display:block; width:100%; min-height:48px; margin-top:var(--space-4); border:0; border-radius:var(--radius); background:var(--da-accent); color:var(--da-accent-ink); font:var(--fw-bold) var(--text-base)/1.2 var(--font-body); cursor:pointer; box-shadow:var(--press-accent); transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease) }
.da-zona__cta:active { transform:translateY(2px); box-shadow:0 1px 0 var(--da-accent-shadow) }

/* app.css ya apaga TODAS las animaciones con prefers-reduced-motion, pero el
   componente del Design System trae la suya y aquí se conserva: si algún día
   este archivo viaja solo, sigue estando bien. */
@media (prefers-reduced-motion:reduce) {
	.da-mapa__p, .da-mapa__sello, .da-mapa__punto { animation:none !important; transition:none }
	.da-frec__b, .da-tramos__b, .da-zona__hoja, .da-zona__velo, .da-zona__cta { transition:none }
}

/* El enlace del aviso es una diana de verdad, no una palabra subrayada de
   15 px de alto en mitad de un párrafo. */
.da-calor__aviso-a { display:inline-flex; align-items:center; min-height:44px; padding:0 2px }