/* ════════════════════════════════════════════════════════════════════════════════════════════
   salaDatos/assets/sala.css — Observatorio de la Sexualidad

   Doc: docs/prensa/SALA_DE_DATOS_PERIODISTAS.md §4

   Paleta tomada de css/style.css:63-80, que es la marca real del sitio. NO se importa ese
   fichero: es global, va cacheado con hash y arrastra el maquetado entero de la tienda. Aqui
   solo se copian los siete colores y la tipografia.

   ⚠️ La paleta de marca no es una paleta de graficas: fucsia, morado y azul claro juntos no se
   distinguen. En los graficos solo se usan DOS colores —fucsia para lo que destaca, azul para
   el resto— y la diferencia se refuerza con texto, nunca solo con color.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
	--fucsia:#f04d98;
	--vv:#313a48;
	--negro:#292c39;
	--gris:#f7f8ff;
	--grisaceo:#eee;
	--sub:#707070;
	--azul:#6aade4;
	--amarillo:#ffb71b;
	--verde:#45c2b1;
	--blanco:#fff;
	--barra-alto:44px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;
	/* Hueco de la barra fija de bloques. Tiene que cuadrar con --barra-alto o la cabecera
	   se mete debajo; por eso la altura es una variable y no un numero suelto. */
	padding-top:var(--barra-alto);
	font-family:'Montserrat',Arial,Helvetica,sans-serif;
	font-size:16px;
	line-height:1.55;
	color:var(--negro);
	background:var(--blanco);
}
a{color:var(--fucsia);text-decoration:none}
a:hover{text-decoration:underline}

.sala-ancho{max-width:980px;margin:0 auto;padding:0 20px}

/* ── barra fija de bloques ─────────────────────────────────────────────────────
   ⚠️ NO lleva flex-wrap: si en un movil estrecho las pastillas se apilaran, la barra creceria
   y el `padding-top` del body se quedaria corto, dejando la cabecera medio tapada. Se resuelve
   con scroll horizontal, que mantiene la altura fija pase lo que pase. */
.sala-barra{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--barra-alto);
	background:var(--vv);border-bottom:2px solid var(--fucsia);
	overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.sala-barra::-webkit-scrollbar{height:0}
.sala-barra-in{display:flex;align-items:center;gap:14px;height:var(--barra-alto);white-space:nowrap}
.sala-barra-et{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
	color:#8b93a1;flex:0 0 auto}
.sala-barra-nav{display:flex;gap:8px;flex:0 0 auto}
.sala-barra-b{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:15px;
	font-size:13px;font-weight:600;color:#d9dde4;background:rgba(255,255,255,.07)}
.sala-barra-b:hover{color:var(--blanco);background:rgba(255,255,255,.15);text-decoration:none}
.sala-barra-b.es-actual{background:var(--fucsia);color:var(--blanco)}
/* El badge: cuantas preguntas contestadas tiene el bloque. */
.sala-barra-n{display:inline-block;min-width:19px;padding:0 5px;border-radius:9px;
	background:rgba(0,0,0,.28);color:var(--blanco);font-size:11px;font-weight:900;
	line-height:17px;text-align:center}
.sala-barra-b.es-actual .sala-barra-n{background:rgba(0,0,0,.22)}

/* ── cabecera ─────────────────────────────────────────────────────────────────────────────── */
.sala-cab{background:var(--vv);color:var(--blanco);padding:14px 0}
.sala-cab-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sala-marca{display:flex;flex-direction:column;line-height:1.15;text-decoration:none}
.sala-marca:hover{text-decoration:none}
/* El logo real sustituye a la tipografia (2026-09-12). `height:auto` respeta la proporcion
   aunque alguien cambie el ancho; el `width`/`height` del HTML evita el salto al cargar. */
.sala-marca-logo{display:block;width:108px;height:auto}
.sala-marca-obs{font-size:11px;color:var(--fucsia);font-weight:600;text-transform:uppercase;letter-spacing:1.2px}
.sala-nav{display:flex;gap:20px;flex-wrap:wrap}
.sala-nav a{color:#d9dde4;font-size:14px}
.sala-nav a:hover{color:var(--blanco)}

/* ── textos ───────────────────────────────────────────────────────────────────────────────── */
main{padding:38px 20px 60px}
.sala-h1{font-size:38px;font-weight:900;line-height:1.15;margin:0 0 14px;padding-top:30px;color:var(--vv);letter-spacing:-.5px}
.sala-entradilla{font-size:18px;color:var(--vv);max-width:70ch;margin:0 0 30px}
.sala-migas{font-size:13px;color:var(--sub);margin:0 0 16px}
h2{font-size:22px;font-weight:900;color:var(--vv);margin:44px 0 12px}
.sala-vacio{color:var(--sub);font-style:italic}

/* ── tres cifras de portada ───────────────────────────────────────────────────────────────── */
.sala-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0 0 8px}
.sala-cifras div{background:var(--gris);border-radius:10px;padding:18px 20px;border-left:4px solid var(--fucsia)}
.sala-cifras .c{display:block;font-size:26px;font-weight:900;color:var(--vv);line-height:1.15}
.sala-cifras .l{display:block;font-size:12px;color:var(--sub);text-transform:uppercase;letter-spacing:.8px;margin-top:4px}

/* ── uso y avisos ─────────────────────────────────────────────────────────────────────────── */
.sala-uso p{max-width:74ch}
.sala-cita-caja{background:var(--gris);border-radius:8px;padding:12px 14px;display:flex;
	align-items:center;gap:12px;flex-wrap:wrap}
.sala-cita{font-style:italic;color:var(--vv)}
.sala-aviso{background:#fff8e6;border-left:4px solid var(--amarillo);border-radius:0 8px 8px 0;
	padding:14px 16px;font-size:15px;max-width:none}

/* ── botones ──────────────────────────────────────────────────────────────────────────────── */
.sala-btn{display:inline-block;font-family:inherit;font-size:12px;font-weight:600;
	padding:6px 12px;border-radius:999px;border:1px solid var(--grisaceo);background:var(--blanco);
	color:var(--vv);cursor:pointer;text-decoration:none;line-height:1.4}
.sala-btn:hover{border-color:var(--fucsia);color:var(--fucsia);text-decoration:none}
.sala-btn-fuerte{background:var(--fucsia);border-color:var(--fucsia);color:var(--blanco);font-size:14px;padding:9px 18px}
.sala-btn-fuerte:hover{background:#d93d85;border-color:#d93d85;color:var(--blanco)}

/* ── indice del bloque ────────────────────────────────────────────────────────────────────── */
.sala-indice{background:var(--gris);border-radius:12px;padding:22px 26px;margin:0 0 34px}
.sala-indice h2{margin:0 0 10px;font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--sub)}
.sala-indice ol{margin:0;padding-left:20px}
.sala-indice li{margin:6px 0}
.sala-indice li a{color:var(--vv);font-weight:600}
.sala-indice li a:hover{color:var(--fucsia)}
.sala-indice-pie{margin:18px 0 0}

/* ── tarjetas de bloque (portada) ─────────────────────────────────────────────────────────── */
.sala-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.sala-bloque{display:block;background:var(--blanco);border:1px solid var(--grisaceo);border-radius:12px;
	padding:20px 22px;color:var(--negro);transition:border-color .15s,transform .15s}
.sala-bloque:hover{border-color:var(--fucsia);transform:translateY(-2px);text-decoration:none}
.sala-bloque h3{margin:0 0 6px;font-size:18px;font-weight:900;color:var(--vv)}
.sala-bloque p{margin:0 0 12px;font-size:14px;color:var(--sub)}
.sala-bloque-n{font-size:12px;font-weight:600;color:var(--fucsia);text-transform:uppercase;letter-spacing:.6px}
.sala-proximos{font-size:14px;color:var(--sub);margin-top:18px;max-width:74ch}

/* ── LA TARJETA DE UNA PREGUNTA ───────────────────────────────────────────────────────────── */
.sala-tarjeta{border:1px solid var(--grisaceo);border-radius:14px;padding:26px 28px;margin:0 0 34px;
	box-shadow:0 1px 3px rgba(41,44,57,.05);scroll-margin-top:calc(var(--barra-alto) + 20px)}   /* la barra fija tapaba el salto a #p-001 */
.sala-t-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.sala-t-id{font-size:12px;color:var(--sub);font-weight:600;letter-spacing:.5px}
.sala-t-acc{display:flex;gap:8px}
.sala-t-tit{margin:0 0 16px;font-size:23px;font-weight:900;color:var(--vv);line-height:1.25}

/* La respuesta en una frase. Regla 1 de §5.3: va ANTES de la grafica, y se ve. */
.sala-t-resp{background:var(--gris);border-left:4px solid var(--fucsia);border-radius:0 8px 8px 0;
	padding:16px 18px;margin:0 0 22px;font-size:18px;font-weight:600;color:var(--vv);line-height:1.45}

.sala-t-graf{margin:0 0 22px;overflow-x:auto}
.sala-svg{display:block;min-width:560px}

/* ── tabla ────────────────────────────────────────────────────────────────────────────────── */
.sala-tabla-cont{overflow-x:auto;margin:0 0 22px;border:1px solid var(--grisaceo);border-radius:10px}
.sala-tabla{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
.sala-tabla th{background:var(--vv);color:var(--blanco);font-weight:600;font-size:12px;
	text-transform:uppercase;letter-spacing:.6px;padding:10px 12px;text-align:left;
	cursor:pointer;white-space:nowrap;user-select:none}
.sala-tabla th:hover{background:#3d4757}
.sala-tabla th.num,.sala-tabla td.num{text-align:right}
.sala-tabla td{padding:8px 12px;border-top:1px solid var(--grisaceo)}
.sala-tabla tbody tr:nth-child(odd){background:var(--gris)}
.sala-tabla tr.sig td{background:#fdeef5}
.sala-pin{color:var(--fucsia);font-size:10px;vertical-align:middle}
.sala-ic{color:var(--sub);font-size:13px;white-space:nowrap}

/* ── metadatos de la tarjeta ──────────────────────────────────────────────────────────────── */
.sala-t-meta{margin:0;font-size:14px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.sala-t-meta dt{font-weight:600;color:var(--sub);font-size:12px;text-transform:uppercase;
	letter-spacing:.5px;padding-top:2px;white-space:nowrap}
.sala-t-meta dd{margin:0;color:var(--negro)}
.sala-t-meta dt.lim{color:#c2410c}
.sala-t-meta dd.lim{color:#c2410c}

/* ── metodologia ──────────────────────────────────────────────────────────────────────────── */
.sala-doc{max-width:74ch}
.sala-doc h2{margin-top:38px}
.sala-doc h3{font-size:17px;color:var(--vv);margin:26px 0 8px}
.sala-doc li{margin:6px 0}
.sala-doc code{background:var(--gris);padding:1px 5px;border-radius:4px;font-size:13px}

/* ── pie ──────────────────────────────────────────────────────────────────────────────────── */
.sala-pie{background:var(--gris);border-top:1px solid var(--grisaceo);padding:32px 0;margin-top:50px;
	font-size:14px;color:var(--sub)}
.sala-pie p{margin:0 0 10px;max-width:78ch}
.sala-pie-cont{font-weight:600;color:var(--vv)}

/* ── movil ────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:620px){
	.sala-h1{font-size:29px}
	.sala-entradilla{font-size:16px}
	.sala-tarjeta{padding:20px 16px;border-radius:10px}
	.sala-t-tit{font-size:20px}
	.sala-t-resp{font-size:16px}
	.sala-t-meta{grid-template-columns:1fr;gap:2px 0}
	.sala-t-meta dd{margin-bottom:10px}
	main{padding:26px 16px 40px}
}

/* ── impresion: un periodista imprime la ficha ────────────────────────────────────────────── */
@media print{
	.sala-barra,.sala-cab,.sala-nav,.sala-t-acc,.sala-indice-pie,.sala-btn{display:none}
	body{padding-top:0}
	.sala-tarjeta{border:none;box-shadow:none;page-break-inside:avoid}
	.sala-svg{min-width:0}
	body{font-size:12px}
}

/* Hito del calendario (San Valentin, Black Friday...) marcado en la tabla */
.sala-hito{background:#313a48;color:#fff;font-size:10px;padding:1px 7px;border-radius:9px;margin-left:6px;white-space:nowrap}

/* ── el angulo del redactor mensual (F7, §6) ───────────────────────────────────────────────
   Se distingue de la respuesta a proposito: aquella es el dato y esta es una lectura. Fondo
   claro y filete punteado — nada de fucsia, que aqui compite con la frase de arriba. */
.sala-t-ang{border:1px dashed var(--grisaceo);border-radius:10px;padding:16px 18px;margin:0 0 22px;
	background:#fffdf9}
.sala-t-ang-tit{margin:0 0 8px;font-size:19px;font-weight:800;color:var(--vv);line-height:1.3}
.sala-t-ang-txt{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--negro)}
.sala-t-ang-no{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--vv);
	border-left:3px solid var(--fucsia);padding-left:12px}
.sala-t-ang-pie{margin:0;font-size:12px;color:var(--sub);line-height:1.45}

/* ── «Los datos del mes» (§6.7) ────────────────────────────────────────────────────────────
   Aqui el titular es lo primero que se lee, asi que manda el; la tarjeta del bloque es al
   reves —arriba el dato— y por eso no comparten estilo. */
.sala-mes-item{border-bottom:1px solid var(--grisaceo);padding:0 0 30px;margin:0 0 30px}
.sala-mes-item:last-of-type{border-bottom:0}
.sala-mes-tit{margin:0 0 10px;font-size:26px;font-weight:900;color:var(--vv);line-height:1.25}
.sala-mes-txt{margin:0 0 18px;font-size:17px;line-height:1.55;color:var(--negro)}
.sala-mes-pie{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sala-mes-n{font-size:12px;color:var(--sub)}

/* ── El mapa de comunidades de la portada y las fichas por comunidad ──────────────────────────
   Doc: docs/prensa/MOTOR_ALERTAS_PERIODISTICAS.md §28

   ⚠️ La escala de color va del azul de marca al fucsia pasando por el gris del medio, y NO es un
      degradado continuo: son cinco escalones. Ademas el numero va escrito dentro de la casilla,
      porque una escala de color sola no la lee ni quien distingue mal los colores ni quien
      imprime la pagina en blanco y negro. */

.sala-mapa{margin:32px 0}
.sala-mapa-intro{color:var(--sub);max-width:62ch}
.sala-mapa-svg{display:block;width:100%;height:auto;max-width:760px;margin:16px 0}
.sala-mapa-celda rect{fill:var(--grisaceo);stroke:var(--blanco);stroke-width:2;transition:fill .15s}
.sala-mapa-celda .et{font:600 13px/1 'Montserrat',Arial,sans-serif;text-anchor:middle;fill:var(--negro)}
.sala-mapa-celda .ci{font:700 20px/1 'Montserrat',Arial,sans-serif;text-anchor:middle;fill:var(--negro)}
.sala-mapa-celda.n1 rect{fill:#cfe6f7}
.sala-mapa-celda.n2 rect{fill:#e6f0f7}
.sala-mapa-celda.n3 rect{fill:var(--gris)}
.sala-mapa-celda.n4 rect{fill:#fbd7e7}
.sala-mapa-celda.n5 rect{fill:#f7aacd}
.sala-mapa-celda.apagada rect{fill:#f2f2f2}
.sala-mapa-celda.apagada .et{fill:#aaa}
a.sala-mapa-celda{cursor:pointer}
a.sala-mapa-celda:hover rect,a.sala-mapa-celda:focus rect{fill:var(--fucsia)}
a.sala-mapa-celda:hover .et,a.sala-mapa-celda:hover .ci,
a.sala-mapa-celda:focus .et,a.sala-mapa-celda:focus .ci{fill:var(--blanco)}
/* El foco tiene que verse: dentro de un SVG el outline del navegador se pierde. */
a.sala-mapa-celda:focus rect{stroke:var(--negro);stroke-width:3}

.sala-mapa-leyenda{font-size:14px;color:var(--sub);max-width:70ch}
.sala-mapa-leyenda .c{display:inline-block;width:14px;height:14px;border-radius:3px;
	vertical-align:-2px;margin:0 4px 0 10px;border:1px solid var(--grisaceo)}
.sala-mapa-leyenda .c.n1{background:#cfe6f7} .sala-mapa-leyenda .c.n2{background:#e6f0f7}
.sala-mapa-leyenda .c.n3{background:var(--gris)} .sala-mapa-leyenda .c.n4{background:#fbd7e7}
.sala-mapa-leyenda .c.n5{background:#f7aacd} .sala-mapa-leyenda .c.n0{background:#f2f2f2}
.sala-mapa-aviso{font-size:14px;color:var(--sub);max-width:70ch}

/* La lista de texto va SIEMPRE, no solo sin JavaScript: es la que usa un lector de pantalla y
   la que hace que estas 19 URL sean alcanzables sin depender del SVG. */
.sala-mapa-lista{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px}
.sala-mapa-lista a{color:var(--sub)}

.sala-ccaa-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:24px 0}
.sala-ccaa-ficha{border:1px solid var(--grisaceo);border-radius:10px;padding:18px;background:var(--blanco)}
.sala-ccaa-ficha.es-sig{border-color:var(--fucsia)}
.sala-ccaa-ficha h2{font-size:15px;margin:0 0 8px;color:var(--sub);font-weight:600;line-height:1.35}
.sala-ccaa-cifra{font-size:34px;font-weight:700;margin:0;line-height:1.1;color:var(--negro)}
.sala-ccaa-frase{margin:8px 0 12px}
.sala-ccaa-pie{font-size:13px;color:var(--sub);margin:0}
.sala-ccaa-otras ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:14px}

/* ══ CIFRAS BAJO SOLICITUD (2026-09-08) ═════════════════════════════════════════════════════
   La tarjeta cerrada tiene que leerse como «esto existe y se pide», no como «esto falla».
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.sala-t-cerrada{ border-left:4px solid #c9a227; }
.sala-t-candado{
	font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px;
	color:#8a6d10; background:#fdf5d8; border:1px solid #eddfa4;
	border-radius:12px; padding:3px 10px; white-space:nowrap;
}
.sala-t-velo{
	background:#fdfaf0; border:1px solid #eddfa4; border-radius:8px;
	padding:16px 18px; margin:14px 0 16px;
}
.sala-t-velo-txt{ margin:0 0 12px; font-size:14px; line-height:1.55; color:#4a4a4a; }
.sala-t-meta{
	display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
	margin:0 0 12px; font-size:13px;
}
.sala-t-meta dt{ font-weight:600; color:#707070; }
.sala-t-meta dd{ margin:0; }
.sala-t-det{ font-size:13px; margin:0 0 10px; }
.sala-t-det summary{ cursor:pointer; color:#707070; }

/* El formulario. Sin librería: son seis campos. */
.sala-form{ max-width:560px; margin:22px 0; }
.sala-form label{ display:block; font-weight:600; font-size:13px; margin:16px 0 5px; }
.sala-form input, .sala-form select, .sala-form textarea{
	width:100%; box-sizing:border-box; padding:9px 11px; font:inherit; font-size:14px;
	border:1px solid #cfd3da; border-radius:6px; background:#fff; color:#222;
}
.sala-form textarea{ resize:vertical; }
.sala-form small{ display:block; color:#707070; font-size:12px; margin-top:4px; }
.sala-form button{ margin-top:22px; }

.sala-aviso{ border-radius:8px; padding:16px 18px; margin:20px 0; font-size:14px; line-height:1.55; }
.sala-aviso p{ margin:0 0 10px; }
.sala-aviso p:last-child{ margin-bottom:0; }
.sala-aviso-ok{  background:#eef8f2; border:1px solid #bfe3ce; }
.sala-aviso-mal{ background:#fdeeee; border:1px solid #f0c4c4; }

@media (max-width:560px){
	.sala-t-meta{ grid-template-columns:1fr; }
	.sala-t-meta dt{ margin-top:8px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   RESUMEN VISUAL DEL BLOQUE «LUBRICANTES»  (2026-09-10)
   salaDatos/_resumen_lubricantes.php · doc: docs/prensa/BLOQUE_LUBRICANTES_2026-09-10.md

   🔑 Todo el prefijo es `lu-`. Nada de esto toca a los otros nueve bloques: es presentacion
      de uno solo, y separarlo por prefijo es lo que deja borrarlo entero sin miedo.

   ⚠️ Los colores salen de las variables de arriba (--fucsia, --vv, --verde…). El lila y los
      dos fondos pastel son nuevos y se declaran aqui, no repartidos por las reglas.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
	--lu-lila:#c3bede;
	--lu-rosa-bg:#fdeef4;
	--lu-menta-bg:#eaf7f4;
}

.lu-info{ margin:0 0 42px; }
.lu-info-cab{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px; }
.lu-eyebrow{ background:var(--fucsia); color:var(--blanco); font-size:11px; font-weight:800;
	text-transform:uppercase; letter-spacing:1.1px; padding:5px 12px; border-radius:20px; }
.lu-cab-n{ font-size:12px; font-weight:700; color:var(--sub); text-transform:uppercase;
	letter-spacing:1px; }
.lu-info-h2{ font-size:34px; font-weight:900; color:var(--vv); margin:0 0 10px;
	letter-spacing:-.6px; line-height:1.12; }
.lu-info-sub{ font-size:17px; color:var(--vv); max-width:74ch; margin:0 0 24px; line-height:1.5; }

/* Tres columnas en pantalla ancha; la tarjeta del cruce ocupa dos. */
.lu-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.lu-card{ border-radius:14px; padding:20px 20px 16px; display:flex; flex-direction:column; }
/* ⛔ `lu-ancha` retirada el 2026-09-10: con seis tarjetas y una del doble salen SIETE huecos
   en una rejilla de tres, o sea dos filas y media con dos celdas vacias al final. Seis iguales
   son 3+3 exactos, que ademas es como venia el boceto. Se deja la clase declarada por si vuelve
   a hacer falta, pero no la usa nadie. */
.lu-card.lu-ancha{ grid-column:span 1; }
.lu-rosa{ background:var(--lu-rosa-bg); }
.lu-menta{ background:var(--lu-menta-bg); }

.lu-card h3{ font-size:19px; font-weight:800; color:var(--vv); margin:0 0 10px;
	line-height:1.25; display:flex; align-items:center; gap:10px; }
.lu-num{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--fucsia);
	color:var(--blanco); font-size:13px; font-weight:800; display:inline-flex;
	align-items:center; justify-content:center; }
.lu-txt{ font-size:14px; line-height:1.5; color:#4a4f5e; margin:0 0 14px; }

.lu-visual{ margin-top:0; }
.lu-visual-fila{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
/* La 05 va en columna: en una tarjeta de un tercio, el donut y su remate uno al lado del otro
   dejan el texto en tiras de cuatro palabras. */
.lu-visual-columna{ display:flex; flex-direction:column; align-items:center; gap:10px;
	text-align:center; }
.lu-visual-columna .lu-lado{ text-align:center; }
.lu-centro{ text-align:center; padding:6px 0 2px; }
.lu-donut{ flex:0 0 auto; }
.lu-lado{ font-size:13px; color:var(--sub); line-height:1.35; }
.lu-lado hr{ border:0; border-top:1px solid rgba(0,0,0,.12); margin:10px 0; }
.lu-cifra-sm{ display:block; font-size:26px; font-weight:900; color:var(--fucsia);
	line-height:1.1; }
.lu-cifra-sm.lu-lila{ color:#7b74a8; }
.lu-cifra-xl{ display:block; font-size:52px; font-weight:900; color:var(--fucsia);
	line-height:1; letter-spacing:-1.5px; }
.lu-cifra-pie{ display:block; font-size:15px; color:var(--vv); line-height:1.4; margin-top:6px; }
.lu-remate{ font-size:13px; line-height:1.45; color:var(--vv); margin:10px 0 0; }

/* Barras horizontales */
.lu-barras{ list-style:none; margin:0; padding:0; }
.lu-barras li{ margin:0 0 11px; font-size:13px; }
.lu-b-nom{ display:block; color:var(--vv); margin:0 0 4px; }
.lu-b-pista{ display:inline-block; vertical-align:middle; width:calc(100% - 62px); height:11px;
	background:rgba(0,0,0,.09); border-radius:6px; overflow:hidden; }
.lu-b-fill{ display:block; height:100%; background:var(--fucsia); border-radius:6px; }
.lu-b-val{ display:inline-block; vertical-align:middle; width:58px; text-align:right;
	font-weight:800; color:var(--vv); }

/* Columnas verticales */
.lu-cols{ list-style:none; margin:0; padding:0; display:flex; align-items:flex-end;
	gap:12px; height:170px; }
.lu-cols li{ flex:1; display:flex; flex-direction:column; align-items:center;
	justify-content:flex-end; height:100%; }
.lu-cols b{ font-size:15px; font-weight:900; color:var(--vv); margin:0 0 5px; }
.lu-col-barra{ display:block; width:100%; max-width:62px; background:var(--fucsia);
	border-radius:5px 5px 0 0; min-height:4px; }
.lu-col-barra.es-verde{ background:var(--verde); }
.lu-cols em{ font-style:normal; font-size:11px; color:var(--sub); text-align:center;
	margin-top:7px; line-height:1.25; }

/* ⚠️ El `margin-top:auto` vive AQUI y no en `.lu-visual`. Puesto en el grafico, las tarjetas
   de barras —que llevan menos texto— empujaban su grafico al fondo y dejaban un claro enorme
   en medio, porque la rejilla iguala la altura de las tres de la fila. Lo que tiene que quedar
   alineado abajo es el enlace, no el grafico. */
.lu-mas{ display:inline-block; margin-top:auto; padding-top:14px; font-size:12px; font-weight:700; }

.lu-info-pie{ margin:18px 0 0; padding:14px 16px; background:var(--gris);
	border-left:4px solid var(--fucsia); border-radius:0 8px 8px 0;
	font-size:13px; line-height:1.5; color:#4a4f5e; }

/* ⚠️ Dos cortes, no uno: a 900 px la rejilla de tres deja tarjetas de 240 px con un donut de
   140 dentro, que es donde se rompe de verdad. */
@media (max-width:900px){
	.lu-grid{ grid-template-columns:repeat(2, 1fr); }
	.lu-card.lu-ancha{ grid-column:span 2; }
	.lu-info-h2{ font-size:28px; }
}
@media (max-width:600px){
	.lu-grid{ grid-template-columns:1fr; }
	.lu-card.lu-ancha{ grid-column:span 1; }
	.lu-info-h2{ font-size:24px; }
	.lu-info-sub{ font-size:15px; }
	.lu-visual-fila{ justify-content:center; }
	.lu-cols{ height:140px; gap:8px; }
}

/* ══ LA PORTADA (2026-09-11) ════════════════════════════════════════════════════════════════
   Doc: docs/prensa/OBSERVATORIO_PORTADA_2026-09-11.md

   Todo con prefijo `obs-` para que ninguna otra página de la sala se entere. Móvil primero: las
   reglas sin media query son las de 360 px, y cada @media sólo añade.

   Paleta: base blanca, fucsia de acento. Los otros colores de marca sólo distinguen temas en
   iconos, y con un tono más oscuro que el de marca para que el trazo se lea sobre blanco.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
	--obs-rosa:#fdf1f7;
	--obs-borde:#e9e9f0;
	--obs-texto:#454b58;
	--obs-radio:14px;
	--obs-sombra:0 1px 2px rgba(41,44,57,.05),0 8px 24px -12px rgba(41,44,57,.16);
}

/* ── cabecera: afecta a toda la sala, a propósito y en pequeño ───────────────────────────── */
.sala-nav{align-items:center;gap:6px 18px}
.sala-nav a{padding:6px 0}
.sala-nav a[aria-current="page"]{color:var(--blanco);font-weight:600}
.sala-nav a.sala-nav-prensa{border:2px solid var(--fucsia);border-radius:10px;padding:6px 14px;color:var(--blanco);font-weight:600}
.sala-nav a.sala-nav-prensa:hover{background:var(--fucsia);text-decoration:none}

/* ── estructura ───────────────────────────────────────────────────────────────────────────── */
body.es-portada{padding-top:0}
main.obs-main{padding:0;display:block}
.obs-in{max-width:1140px;margin:0 auto;padding:0 20px}
.obs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.obs-ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
	stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}

.obs-c-fucsia{--ic:#d92f7b;--ic-bg:#fdeaf3}
.obs-c-azul{--ic:#337fc0;--ic-bg:#e9f2fb}
.obs-c-lila{--ic:#9a58b9;--ic-bg:#f4ebf8}
.obs-c-verde{--ic:#1f9c86;--ic-bg:#e5f6f2}
.obs-c-amarillo{--ic:#bb7a00;--ic-bg:#fff3d9}

.obs-sec{padding:44px 0}
.obs-sec-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin:0 0 22px}
.obs-h2{margin:0 0 6px;font-size:26px;line-height:1.15;font-weight:900;color:var(--negro);letter-spacing:-.01em}
.obs-h3{margin:0 0 8px;font-size:20px;line-height:1.25;font-weight:900;color:var(--negro)}
.obs-sub{margin:0;font-size:15px;line-height:1.5;color:var(--sub);max-width:64ch}
.obs-mas{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600}
.obs-nota{margin:18px 0 0;font-size:13px;color:var(--sub);max-width:74ch}

/* ── botones ──────────────────────────────────────────────────────────────────────────────── */
.obs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
	padding:12px 22px;border-radius:10px;border:2px solid transparent;font-family:inherit;
	font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
	transition:background-color .15s,border-color .15s,color .15s}
.obs-btn:hover{text-decoration:none}
.obs-btn-fuerte{background:var(--fucsia);border-color:var(--fucsia);color:var(--blanco)}
.obs-btn-fuerte:hover{background:#d93d85;border-color:#d93d85;color:var(--blanco)}
.obs-btn-borde{background:var(--blanco);border-color:var(--fucsia);color:#d02f78}
.obs-btn-borde:hover{background:var(--obs-rosa);color:#d02f78}
.obs-btn-peq{min-height:40px;padding:8px 16px;font-size:14px}
.obs-btn:focus-visible,.obs-tema:focus-visible,.obs-mas:focus-visible,
.obs-dest-tit a:focus-visible,.obs-nuevo-lista a:focus-visible,.obs-prensa-mail:focus-visible,
.obs-cred-pie a:focus-visible,.sala-nav a:focus-visible{outline:3px solid #6aade4;outline-offset:3px;border-radius:6px}

/* ── 1 · hero ─────────────────────────────────────────────────────────────────────────────── */
.obs-hero{background:linear-gradient(180deg,var(--obs-rosa) 0%,var(--blanco) 100%);padding:36px 0 32px}
.obs-hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.obs-kicker{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#d02f78}
.obs-h1{margin:0 0 16px;font-size:31px;line-height:1.1;font-weight:900;letter-spacing:-.02em;color:var(--negro);
	max-width:22ch;overflow-wrap:break-word;hyphens:manual}
.obs-lead{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--obs-texto);max-width:58ch}
.obs-lead strong{color:var(--negro)}
.obs-senales{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--obs-texto)}
.obs-senales li{display:flex;align-items:center;gap:8px}
.obs-senales .obs-ic{width:20px;height:20px;color:var(--fucsia)}
.obs-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.obs-hero-mosaico{display:none}

/* ── 2 · banda de credibilidad ────────────────────────────────────────────────────────────── */
.obs-cred{background:var(--blanco);border-top:1px solid var(--obs-borde);border-bottom:1px solid var(--obs-borde);padding:20px 0}
.obs-cred-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.obs-cred-lista li{display:flex;align-items:center;gap:12px;min-width:0;font-size:14px;line-height:1.35;color:var(--obs-texto)}
.obs-cred-lista strong{display:block;font-size:17px;font-weight:900;color:var(--negro)}
.obs-cred-lista small{display:block;font-size:12px;color:var(--sub)}
.obs-cred-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--gris);color:var(--vv)}
.obs-cred-ic .obs-ic{width:22px;height:22px}
.obs-cred-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;
	margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--obs-borde);font-size:13px;line-height:1.5;color:var(--sub)}
.obs-cred-pie a{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-weight:600;white-space:nowrap}

/* ── 3 · titulares destacados ─────────────────────────────────────────────────────────────── */
.obs-dest{background:var(--obs-rosa)}
/* Alturas naturales, no estiradas: con la entradilla sólo en algunas tarjetas, igualarlas dejaba
   huecos blancos que parecían contenido perdido. */
.obs-dest-rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.obs-dest-card{display:flex;flex-direction:column;min-width:0;background:var(--blanco);border-radius:var(--obs-radio);
	padding:22px 22px 16px;box-shadow:var(--obs-sombra)}
.obs-chip{align-self:flex-start;margin:0 0 14px;padding:4px 10px;border-radius:999px;background:var(--obs-rosa);
	color:#c02a6d;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}
.obs-dest-tit{margin:0 0 12px;font-size:21px;line-height:1.22;font-weight:900;letter-spacing:-.01em;overflow-wrap:break-word}
.obs-dest-tit a{color:var(--negro)}
.obs-dest-tit a:hover{color:#d02f78;text-decoration:none}
/* Cuatro líneas: da contexto sin que una tarjeta con entradilla doble la altura de las otras. El texto
   entero está en el análisis, a un clic. */
.obs-dest-ctx{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--obs-texto);
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.obs-dest-traza{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;padding-top:12px;border-top:1px solid var(--obs-borde);
	font-size:12.5px;line-height:1.45;color:var(--sub);overflow-wrap:break-word}
.obs-dest-cta{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:14px;font-weight:600}

/* ── 4 · explorador ───────────────────────────────────────────────────────────────────────── */
/* En móvil, DOS columnas compactas y sin sumario: en una columna eran doce tarjetas y 1.600 px de
   scroll, que es lo contrario de ver el Observatorio de un vistazo. El sumario vuelve a partir de 560. */
.obs-exp-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.obs-exp-rejilla .obs-tema{flex-direction:column;gap:10px;padding:14px 12px 14px;min-height:0}
.obs-exp-rejilla .obs-tema-ic{width:42px;height:42px}
.obs-exp-rejilla .obs-tema-ic .obs-ic{width:23px;height:23px}
.obs-exp-rejilla .obs-tema-tit{font-size:15px}
.obs-exp-rejilla .obs-tema-sum,.obs-exp-rejilla .obs-tema-flecha{display:none}
.obs-tema{position:relative;display:flex;align-items:flex-start;gap:14px;min-width:0;min-height:72px;
	padding:16px 52px 16px 16px;background:var(--blanco);border:1px solid var(--obs-borde);border-radius:var(--obs-radio);
	color:var(--negro);transition:border-color .15s,box-shadow .15s,transform .15s}
.obs-tema:hover{text-decoration:none;border-color:var(--ic);box-shadow:var(--obs-sombra);transform:translateY(-2px)}
.obs-tema-ic{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:12px;background:var(--ic-bg);color:var(--ic)}
.obs-tema-ic .obs-ic{width:26px;height:26px}
.obs-tema-txt{display:flex;flex-direction:column;min-width:0}
.obs-tema-tit{margin:0;font-size:16px;line-height:1.25;font-weight:900;color:var(--negro)}
.obs-tema-n{margin-top:2px;font-size:13px;font-weight:600;color:var(--sub)}
.obs-tema-sum{margin-top:6px;font-size:13px;line-height:1.45;color:var(--sub)}
.obs-tema-flecha{position:absolute;top:16px;right:14px;display:grid;place-items:center;width:30px;height:30px;
	border-radius:50%;background:var(--gris);color:var(--vv);transition:background-color .15s,color .15s}
.obs-tema-flecha .obs-ic{width:16px;height:16px}
.obs-tema:hover .obs-tema-flecha{background:var(--ic);color:var(--blanco)}

/* ── 5 · lo nuevo ─────────────────────────────────────────────────────────────────────────── */
.obs-nuevo-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 36px}
.obs-nuevo-lista li{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 0;border-bottom:1px solid var(--obs-borde)}
.obs-nuevo-tema{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--sub)}
.obs-nuevo-lista a{display:block;min-height:40px;padding:4px 0;font-size:16px;font-weight:600;line-height:1.4;color:var(--negro);overflow-wrap:break-word}
.obs-nuevo-lista a:hover{color:#d02f78;text-decoration:none}

/* ── 6 · territorio ───────────────────────────────────────────────────────────────────────── */
.obs-terr{background:var(--gris)}
.obs-terr-accesos{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.obs-mapa{margin:24px 0 0;padding:22px 20px 20px;background:var(--blanco);border-radius:var(--obs-radio)}
.obs-mapa .sala-mapa-lista{margin-bottom:0}

/* El pie de la sala repite la invitación a pedir un corte; en la portada va justo encima. */
body.es-portada .sala-pie-cont{display:none}

/* ── 7 · metodología ──────────────────────────────────────────────────────────────────────── */
.obs-metodo-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.obs-metodo-lista li{position:relative;padding:14px 16px 14px 46px;background:var(--gris);border-radius:12px;
	font-size:14px;line-height:1.5;color:var(--obs-texto)}
.obs-metodo-lista li::before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;border-radius:50%;
	background:var(--fucsia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.obs-metodo-lista strong{color:var(--negro)}
.obs-cita{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:18px;padding:16px 18px;
	border:1px solid var(--obs-borde);border-radius:12px}
.obs-cita p{flex:1 1 260px;margin:0;font-size:14px;line-height:1.5;color:var(--obs-texto)}
.obs-cita-ic{width:26px;height:26px;color:var(--fucsia)}

/* ── 8 · prensa ───────────────────────────────────────────────────────────────────────────── */
.obs-prensa{background:var(--negro);color:var(--blanco)}
.obs-prensa-in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.obs-prensa .obs-h2{color:var(--blanco)}
.obs-prensa-txt p{margin:0 0 20px;font-size:16px;line-height:1.6;color:#d9dbe3;max-width:60ch}
.obs-prensa-txt p.obs-ctas{margin:0}
.obs-prensa-mail{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:var(--blanco);font-weight:600;overflow-wrap:anywhere}
.obs-prensa-mail:hover{color:#ffc6e0;text-decoration:none}
.obs-prensa-senales{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.obs-prensa-senales li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.4;color:#e8e9ee}
.obs-prensa-senales .obs-ic{width:22px;height:22px;color:#ff8fc2}

/* ── puntos de corte ──────────────────────────────────────────────────────────────────────── */
@media (min-width:430px){
	.obs-h1{font-size:34px}
}
@media (min-width:560px){
	.obs-cred-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
	.obs-exp-rejilla{gap:12px}
	.obs-exp-rejilla .obs-tema{flex-direction:row;gap:14px;padding:16px 52px 16px 16px;min-height:72px}
	.obs-exp-rejilla .obs-tema-ic{width:48px;height:48px}
	.obs-exp-rejilla .obs-tema-ic .obs-ic{width:26px;height:26px}
	.obs-exp-rejilla .obs-tema-tit{font-size:16px}
	.obs-exp-rejilla .obs-tema-sum{display:block}
	.obs-exp-rejilla .obs-tema-flecha{display:grid}
}
@media (min-width:700px){
	.obs-h1{font-size:42px}
	.obs-lead{font-size:17px}
	.obs-h2{font-size:30px}
	.obs-dest-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
	.obs-terr-accesos{grid-template-columns:repeat(2,minmax(0,1fr))}
	.obs-metodo-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:800px){
	.obs-nuevo-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
	.obs-sec{padding:64px 0}
	.obs-hero{padding:60px 0 54px}
	.obs-hero-in{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:48px}
	.obs-hero-mosaico{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;justify-self:end;width:100%;max-width:340px}
	.obs-mos{display:grid;place-items:center;aspect-ratio:1/1;border-radius:18px;background:var(--ic-bg);color:var(--ic)}
	.obs-mos .obs-ic{width:46%;height:46%;stroke-width:1.6}
	.obs-mos:nth-child(4n+2),.obs-mos:nth-child(4n+4){transform:translateY(16px)}
	.obs-exp-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}
	.obs-prensa-in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px}
	.obs-prensa-senales{padding-left:40px;border-left:1px solid rgba(255,255,255,.14)}
}
@media (min-width:1000px){
	.obs-h1{font-size:44px}
	.obs-cred-lista{grid-template-columns:repeat(4,minmax(0,1fr))}
	.obs-dest-rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
	.obs-metodo-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px){
	.obs-h1{font-size:49px}
	.obs-exp-rejilla{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
	.obs-exp-rejilla .obs-tema{flex-direction:column;gap:12px;min-height:186px;padding:20px 20px 18px}
	.obs-exp-rejilla .obs-tema-flecha{top:20px;right:18px}
}
@media (prefers-reduced-motion:reduce){
	.obs-tema,.obs-tema-flecha,.obs-btn{transition:none}
	.obs-tema:hover{transform:none}
}
@media print{
	.obs-hero-mosaico,.obs-ctas,.obs-prensa-senales,.obs-mas{display:none}
	.obs-prensa{background:none;color:var(--negro)}
	.obs-prensa .obs-h2,.obs-prensa-txt p{color:var(--negro)}
}

/* ══ MODO EDICIÓN (2026-09-11) ══════════════════════════════════════════════════════════════
   Sólo sale con un administrador identificado. Aspecto de herramienta, no de contenido: fondo
   amarillo claro y borde discontinuo, para que nunca se confunda con lo que ve un periodista. */
.sala-ed-banda{background:#fff4d6;border-bottom:1px solid #f0d58a;color:#5c4400;font-size:14px;padding:9px 0}
.sala-ed-banda .sala-ancho{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.sala-ed-banda a{font-weight:600;margin-left:auto}
.sala-ed-ok{color:#1d6b3a;font-weight:600}
.sala-ed-mal{color:#a02020;font-weight:600}
.sala-ed{margin:0 0 20px;border:2px dashed #e0b84a;border-radius:10px;background:#fffbef}
.sala-ed summary{cursor:pointer;padding:10px 14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:14px;list-style:none}
.sala-ed summary::-webkit-details-marker{display:none}
.sala-ed summary::before{content:"▸";color:#a07a10}
.sala-ed[open] summary::before{content:"▾"}
.sala-ed-est{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.sala-ed-est.ok{background:#dcf2e3;color:#1d6b3a}
.sala-ed-est.mal{background:#fde0e0;color:#a02020}
.sala-ed-est.gris{background:#eee;color:#555}
.sala-ed-meta{font-size:12px;color:#7a6a3a}
.sala-ed-form{padding:0 14px 14px;display:grid;gap:10px}
.sala-ed-form label{display:block;font-size:13px;font-weight:600;color:#3d3520}
.sala-ed-form label > input[type=text],.sala-ed-form label > textarea,.sala-ed-form label > input[type=number]{display:block;margin-top:4px}
.sala-ed-form label small{font-weight:400;color:#7a6a3a}
.sala-ed-form input[type=text],.sala-ed-form textarea,.sala-ed-form input[type=number]{font:inherit;font-size:15px;font-weight:400;
	padding:8px 10px;border:1px solid #d9c690;border-radius:6px;background:#fff;width:100%;box-sizing:border-box}
.sala-ed-form textarea{resize:vertical}
.sala-ed-fila{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:end}
.sala-ed-nota input{width:90px !important}
.sala-ed-form label.sala-ed-conf{display:flex;gap:8px;align-items:center;font-weight:400}
.sala-ed-ayuda{margin:0;font-size:12px;color:#7a6a3a;line-height:1.5}
.sala-ed-botones{display:flex;flex-wrap:wrap;gap:10px}
.sala-ed-aviso{margin:0 14px 10px;padding:9px 12px;border-radius:6px;font-size:13px}
.sala-ed-aviso.mal{background:#fde0e0;color:#7a1a1a}
.sala-ed-aviso.ok{background:#dcf2e3;color:#1d4d2c}
@media print{.sala-ed,.sala-ed-banda{display:none}}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   PAGINAS TEMATICAS DEL OBSERVATORIO — bloque `obt-` (2026-09-12)

   Doc: docs/prensa/OBSERVATORIO_TEMATICAS_2026-09-12.md

   Se ANADE; no se modifica ni una regla de arriba. `.obt-ficha` comparte elemento con
   `.sala-tarjeta` —que sigue existiendo porque `sala.js` la necesita para el PNG— y por eso
   redefine explicitamente fondo, borde y espaciado en vez de confiar en el orden de cascada.

   MOVIL PRIMERO: las reglas sin media query son las de 360 px. Cada @media solo ANADE.

   ⚠️ Paleta contenida (§45 del encargo): mucho blanco, y el fucsia reservado para jerarquia,
      dato y accion. Un observatorio de datos que parece un escaparate deja de parecer fiable.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

.obt-main{max-width:1280px;margin:0 auto;padding:0 16px}
.obt-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
	clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── botones, comunes a toda la pagina ──────────────────────────────────────────────────── */
.obt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
	padding:7px 13px;border-radius:7px;border:1px solid #dfe3ec;background:var(--blanco);
	color:var(--vv);font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2;
	cursor:pointer;text-decoration:none;white-space:nowrap}
.obt-btn:hover{border-color:var(--fucsia);color:var(--fucsia);text-decoration:none}
.obt-btn:focus-visible{outline:2px solid var(--fucsia);outline-offset:2px}
.obt-btn-fuerte{background:var(--fucsia);border-color:var(--fucsia);color:var(--blanco)}
.obt-btn-fuerte:hover{background:#d93c84;border-color:#d93c84;color:var(--blanco)}
.obt-link{background:none;border:0;padding:0;color:var(--fucsia);font:inherit;font-weight:600;
	cursor:pointer;text-decoration:underline}

/* ── 1 · cabecera tematica ──────────────────────────────────────────────────────────────── */
.obt-cab{padding:18px 0 22px;border-bottom:1px solid var(--grisaceo)}
.obt-migas{font-size:12.5px;color:var(--sub);margin-bottom:14px}
.obt-migas a{color:var(--sub)}
.obt-migas a:hover{color:var(--fucsia)}
.obt-migas span[aria-hidden]{margin:0 5px}
.obt-eyebrow{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:1.4px;
	text-transform:uppercase;color:var(--fucsia)}
.obt-h1{margin:0 0 6px;font-size:34px;line-height:1.08;font-weight:900;color:var(--negro);
	letter-spacing:-.5px}
.obt-sumario{margin:0 0 18px;font-size:16px;line-height:1.5;color:var(--sub);max-width:62ch}

.obt-metricas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 18px}
.obt-metrica{padding:12px 14px;background:var(--gris);border-radius:10px;
	border:1px solid #edeff7}
.obt-metrica dt{margin:0;font-size:22px;font-weight:900;color:var(--negro);line-height:1.1;
	letter-spacing:-.4px}
.obt-metrica dd{margin:2px 0 0;font-size:12px;color:var(--sub);line-height:1.35}

.obt-acciones{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-start}
.obt-desc{position:relative}
.obt-desc>summary{list-style:none;padding:9px 15px;font-size:13px}
.obt-desc>summary::-webkit-details-marker{display:none}
.obt-desc>summary::after{content:"▾";font-size:11px;margin-left:2px}
.obt-desc[open]>summary::after{content:"▴"}
.obt-desc-menu{position:absolute;z-index:60;left:0;top:calc(100% + 6px);min-width:262px;
	background:var(--blanco);border:1px solid #dfe3ec;border-radius:10px;padding:6px;
	box-shadow:0 10px 28px rgba(41,44,57,.14)}
.obt-desc-menu a{display:block;padding:9px 11px;border-radius:7px;color:var(--negro);
	text-decoration:none}
.obt-desc-menu a:hover{background:var(--gris);text-decoration:none}
.obt-desc-menu strong{display:block;font-size:13.5px}
.obt-desc-menu span{display:block;font-size:11.5px;color:var(--sub);line-height:1.35}

/* ── 2 · datos clave ────────────────────────────────────────────────────────────────────── */
.obt-clave{margin:24px 0 6px}
.obt-clave-cab h2{margin:0 0 2px;font-size:22px;font-weight:900;color:var(--negro)}
.obt-clave-cab p{margin:0 0 14px;font-size:13.5px;color:var(--sub)}
.obt-clave-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px;
	grid-template-columns:1fr}
.obt-clave-c a{display:block;height:100%;padding:14px 15px;border:1px solid #edeff7;
	border-radius:12px;background:var(--blanco);text-decoration:none;color:inherit;
	transition:border-color .15s,transform .15s}
.obt-clave-c a:hover{border-color:var(--fucsia);text-decoration:none;transform:translateY(-1px)}
.obt-clave-c a:focus-visible{outline:2px solid var(--fucsia);outline-offset:2px}
.obt-clave-grupo{display:block;font-size:10.5px;font-weight:700;letter-spacing:1px;
	text-transform:uppercase;color:var(--sub);margin-bottom:7px}
.obt-clave-valor{display:block;font-size:30px;font-weight:900;color:var(--fucsia);
	line-height:1.05;letter-spacing:-.6px}
.obt-clave-txt{display:block;margin-top:3px;font-size:13.5px;font-weight:600;color:var(--negro)}
.obt-clave-pie{display:block;margin-top:7px;font-size:12px;color:var(--sub);line-height:1.4}

/* ── 3 · filtros y buscador ─────────────────────────────────────────────────────────────── */
.obt-filtros{display:flex;flex-direction:column;gap:10px;margin:0 0 18px;
	padding:14px 0;border-bottom:1px solid var(--grisaceo)}
.obt-chips{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;
	padding-bottom:2px;scrollbar-width:none}
.obt-chips::-webkit-scrollbar{height:0}
.obt-chip{flex:0 0 auto;padding:7px 13px;border-radius:18px;border:1px solid #dfe3ec;
	background:var(--blanco);color:var(--vv);font-family:inherit;font-size:12.5px;
	font-weight:600;cursor:pointer;white-space:nowrap}
.obt-chip span{opacity:.55;margin-left:3px}
.obt-chip:hover{border-color:var(--fucsia);color:var(--fucsia)}
.obt-chip:focus-visible{outline:2px solid var(--fucsia);outline-offset:2px}
.obt-chip.es-activo{background:var(--fucsia);border-color:var(--fucsia);color:var(--blanco)}
.obt-chip.es-activo span{opacity:.8}
.obt-buscar input{width:100%;padding:9px 13px;border:1px solid #dfe3ec;border-radius:8px;
	font-family:inherit;font-size:13.5px;color:var(--negro);background:var(--blanco)}
.obt-buscar input:focus{outline:2px solid var(--fucsia);outline-offset:0;border-color:var(--fucsia)}
.obt-sinres{margin:0 0 18px;padding:14px;background:var(--gris);border-radius:10px;
	font-size:13.5px;color:var(--sub)}

/* ── 4 · cuerpo: indice + fichas ────────────────────────────────────────────────────────── */
.obt-cuerpo{display:block;margin:18px 0 0}
.obt-fichas{min-width:0}

/*
   El indice. En movil es un desplegable —una lista de 16 antes del primer dato es justo lo que
   no se puede hacer (§41)— y en escritorio, una columna pegajosa.
*/
.obt-indice{margin:0 0 20px}
.obt-indice-caja{border:1px solid #edeff7;border-radius:12px;background:var(--blanco);
	overflow:hidden}
.obt-indice-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:13px 15px;cursor:pointer;list-style:none;background:var(--gris)}
.obt-indice-cab::-webkit-details-marker{display:none}
.obt-indice-cab::after{content:"▾";font-size:11px;color:var(--sub)}
.obt-indice-caja[open] .obt-indice-cab::after{content:"▴"}
.obt-indice-tit{font-size:14px;font-weight:700;color:var(--negro)}
.obt-indice-cuenta{font-size:11.5px;color:var(--sub);margin-left:auto;margin-right:6px}
.obt-indice-lista{list-style:none;margin:0;padding:6px;counter-reset:none;max-height:none;
	overflow:visible}
.obt-indice-lista a{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;
	border-radius:8px;color:var(--negro);text-decoration:none;font-size:13px;line-height:1.35}
.obt-indice-lista a:hover{background:var(--gris);text-decoration:none}
.obt-indice-lista a:focus-visible{outline:2px solid var(--fucsia);outline-offset:-2px}
.obt-indice-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--gris);
	color:var(--sub);font-size:11px;font-weight:700;display:flex;align-items:center;
	justify-content:center}
.obt-indice-lista a:hover .obt-indice-n{background:var(--fucsia);color:var(--blanco)}
.obt-indice-txt{flex:1 1 auto;min-width:0}
.obt-indice-desc{display:block;margin:6px;padding:11px 12px;border-radius:9px;
	background:var(--gris);color:var(--negro);text-decoration:none;border:1px dashed #d7dbe6}
.obt-indice-desc:hover{border-color:var(--fucsia);text-decoration:none}
.obt-indice-desc strong{display:block;font-size:12.5px}
.obt-indice-desc span{display:block;font-size:11px;color:var(--sub)}

/* ── 5 · la ficha de investigacion ──────────────────────────────────────────────────────── */
.obt-ficha{background:var(--blanco);border:1px solid #edeff7;border-radius:14px;
	padding:18px 16px;margin:0 0 18px;scroll-margin-top:calc(var(--barra-alto) + 12px)}
.obt-f-cab{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
	justify-content:space-between;margin-bottom:10px}
.obt-f-eyebrow{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;font-weight:700;
	letter-spacing:1.1px;text-transform:uppercase;color:var(--sub)}
.obt-f-num{display:inline-flex;align-items:center;justify-content:center;min-width:26px;
	height:22px;padding:0 6px;border-radius:11px;background:var(--fucsia);color:var(--blanco);
	font-size:11px;letter-spacing:.5px}
.obt-f-acc{display:flex;flex-wrap:wrap;gap:6px}
.obt-f-tit{margin:0 0 8px;font-size:23px;line-height:1.2;font-weight:900;color:var(--negro);
	letter-spacing:-.4px}

/*
   El hallazgo. Es la conclusion en una frase y va ANTES de la grafica: quien solo lee esto ya
   se lleva el dato bien contado.
*/
.obt-f-hallazgo{margin:0 0 12px;padding:12px 14px;border-left:3px solid var(--fucsia);
	background:#fff5f9;border-radius:0 9px 9px 0;font-size:15px;line-height:1.5;
	color:var(--negro);font-weight:600}
.obt-f-entradilla{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--sub)}

/*
   🔴 `overflow-x:auto` NO es opcional: `.sala-svg` lleva `min-width:560px` desde el diseno
   original, y es deliberado —una grafica de 12 filas aplastada a 360 px deja de leerse—. El
   contenedor viejo (`.sala-t-graf`) lo contenia; al renombrarlo aqui se perdio y la pagina
   desbordaba a lo ancho en movil. Lo cazo el QA del 2026-09-12, no la vista.

   La sombra lateral es la senal de que se puede desplazar (§43): sale sola cuando hay algo
   fuera y desaparece al llegar al borde, porque las capas de fondo van con `local`.
*/
.obt-f-graf,
.obt-f-tabla .sala-tabla-cont{
	background-image:linear-gradient(to right,var(--blanco) 30%,rgba(255,255,255,0)),
		linear-gradient(to right,rgba(255,255,255,0),var(--blanco) 70%),
		radial-gradient(farthest-side at 0 50%,rgba(41,44,57,.13),rgba(41,44,57,0)),
		radial-gradient(farthest-side at 100% 50%,rgba(41,44,57,.13),rgba(41,44,57,0));
	background-position:0 0,100% 0,0 0,100% 0;
	background-repeat:no-repeat;
	background-size:34px 100%,34px 100%,13px 100%,13px 100%;
	background-attachment:local,local,scroll,scroll;
}
.obt-f-graf{margin:0 0 14px;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.obt-f-graf svg{display:block;width:100%;height:auto}
.obt-f-tabla{margin:0 0 14px}

/*
   Contexto (§22). Informativo, NO una alerta de error: un aviso rojo sobre un dato correcto hace
   que el lector desconfie del dato en vez de entender el matiz.
*/
.obt-f-ctx{margin:0 0 14px;padding:13px 15px;background:#f2f8fd;border:1px solid #dcebf8;
	border-radius:10px}
.obt-f-ctx-tit{margin:0 0 3px;font-size:11.5px;font-weight:700;letter-spacing:.8px;
	text-transform:uppercase;color:#3f7ba8}
.obt-f-ctx p{margin:0;font-size:13.5px;line-height:1.5;color:var(--negro)}

/* metodologia: compacta pero legible, y la limitacion distinguible de un vistazo */
.obt-f-meta{display:grid;gap:1px;margin:0 0 14px;padding:0;background:#edeff7;
	border:1px solid #edeff7;border-radius:11px;overflow:hidden}
.obt-f-m{background:var(--blanco);padding:12px 14px;display:grid;gap:3px;align-content:start}
.obt-f-m dt{margin:0;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
	color:var(--sub)}
.obt-f-m dd{margin:0;font-size:13px;line-height:1.5;color:var(--negro)}
.obt-f-m-lim dt{color:#b8791a}
.obt-f-m-lim{background:#fffaf0}
.obt-f-cita{display:inline-block;margin-right:8px;font-style:italic;color:var(--sub)}

/*
   El cierre de la pagina: la llamada a descargar, UNA vez. Estas reglas eran del CTA que iba
   DENTRO de cada ficha; se retiro el 2026-09-12 porque 16 copias hacian la pagina mas larga
   que la que veniamos a arreglar (20.263 px frente a 19.656).
*/
.obt-cierre{display:flex;flex-direction:column;gap:12px;margin:22px 0 0;padding:18px;
	border-radius:12px;background:var(--gris);border:1px solid #edeff7}
.obt-cierre-tit{margin:0 0 2px;font-size:17px;font-weight:800;color:var(--negro)}
.obt-cierre-tx p{margin:0;font-size:13.5px;color:var(--sub);line-height:1.5}
.obt-cierre-acc{display:flex;flex-wrap:wrap;gap:9px}

/* ════ 430 px ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width:430px){
	.obt-h1{font-size:38px}
	.obt-ficha{padding:20px 18px}
}

/* ════ 620 px: la tabla de metodologia ya cabe en dos columnas ═════════════════════════════ */
@media (min-width:620px){
	.obt-main{padding:0 20px}
	.obt-metricas{grid-template-columns:repeat(4,1fr)}
	.obt-clave-lista{grid-template-columns:repeat(2,1fr)}
	.obt-filtros{flex-direction:row;align-items:center;justify-content:space-between}
	.obt-buscar{flex:0 0 250px}
	.obt-cierre{flex-direction:row;align-items:center;justify-content:space-between;
		padding:20px 22px}
}

/* ════ 900 px: aparece la columna lateral ══════════════════════════════════════════════════
   Aqui es donde el indice deja de ser un desplegable y pasa a ser barra lateral pegajosa.
   `align-items:start` es lo que impide que la columna estire hasta el alto del contenido y se
   lleve por delante el `position:sticky`.
   ═════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
	.obt-cuerpo{display:grid;grid-template-columns:268px minmax(0,1fr);gap:26px;
		align-items:start}
	.obt-indice{margin:0;position:sticky;top:calc(var(--barra-alto) + 14px)}
	.obt-indice-cab{cursor:default;pointer-events:none;background:var(--blanco);
		border-bottom:1px solid var(--grisaceo)}
	.obt-indice-cab::after{content:""}
	/* El indice nunca puede pasar del alto de la ventana: si lo hace, scroll propio y ya. */
	.obt-indice-lista{max-height:calc(100vh - var(--barra-alto) - 132px);overflow-y:auto}
	.obt-clave-lista{grid-template-columns:repeat(3,1fr)}
	.obt-clave-c.es-primero{grid-column:span 3}
	.obt-clave-c.es-primero .obt-clave-valor{font-size:38px}
	.obt-f-tit{font-size:26px}
	.obt-f-meta{grid-template-columns:1fr 1fr}
	.obt-ficha{padding:24px 22px}
}

/* ════ 1100 px ═════════════════════════════════════════════════════════════════════════════ */
@media (min-width:1100px){
	.obt-cuerpo{grid-template-columns:292px minmax(0,1fr);gap:32px}
	.obt-clave-lista{grid-template-columns:repeat(5,1fr)}
	.obt-clave-c.es-primero{grid-column:span 1}
	.obt-clave-c.es-primero .obt-clave-valor{font-size:30px}
	.obt-h1{font-size:44px}
}

@media (prefers-reduced-motion:reduce){
	.obt-clave-c a{transition:none}
	.obt-clave-c a:hover{transform:none}
}

/* ════ IMPRESION (§49) ═════════════════════════════════════════════════════════════════════
   El periodista imprime o guarda en PDF. Fuera lo que no se puede pulsar en papel; dentro el
   titulo, la grafica, la tabla, la muestra, la limitacion, el metodo y la cita.
   ═════════════════════════════════════════════════════════════════════════════════════════ */
@media print{
	.obt-main{max-width:none;padding:0}
	.obt-acciones,.obt-filtros,.obt-sinres,.obt-f-acc,.obt-indice,
	.obt-cierre,.obt-desc{display:none !important}
	.obt-cuerpo{display:block}
	.obt-ficha{border:0;padding:0;margin:0 0 22px;break-inside:avoid;page-break-inside:avoid}
	.obt-f-hallazgo{background:none;border-left:2px solid #999}
	.obt-f-meta{border:1px solid #ccc}
	.obt-f-ctx{background:none;border:1px solid #ccc}
	.obt-clave-lista{grid-template-columns:repeat(2,1fr)}
	.obt-f-graf{break-inside:avoid;page-break-inside:avoid}
}