/* ISPV — página de datos. Superficie blanca (el logo tiene fondo blanco opaco). */
:root{
	/* Marca y polos divergentes. El rojo de CCOO ES el polo de deterioro,
	   así que la marca y la semántica no compiten. Validado con el
	   comprobador de paletas: ΔE 27,3 (deutan) / 34,0 (normal), ambos ≥3:1. */
	--rojo:#C20E1A;          /* por debajo de 100: deterioro */
	--azul:#2a78d6;          /* por encima de 100: mejora */
	--rojo-suave:rgba(194,14,26,.12);
	--azul-suave:rgba(42,120,214,.12);

	--papel:#fff;
	--tinta:#0b0b0b;
	--tinta-2:#52514e;
	--tinta-3:#8a8985;
	--rejilla:#e9e8e5;
	--referencia:#b9b8b4;    /* la línea del 100 */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;background:var(--papel);color:var(--tinta);
	font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
	line-height:1.55;
}
.env{max-width:60rem;margin:0 auto;padding:clamp(1.5rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem) 5rem}

/* --- cabecera --- */
.cab__logo{display:block;width:clamp(11rem,26vw,16rem);height:auto;margin-bottom:clamp(1.75rem,5vw,2.75rem)}
.cab__titulo{
	margin:0;font-size:clamp(2rem,5.5vw,3.25rem);font-weight:900;
	line-height:1.02;letter-spacing:-.025em;
}
.cab__bajada{
	margin:.9rem 0 0;max-width:46ch;font-size:clamp(1rem,1.6vw,1.15rem);color:var(--tinta-2);
}
.cab__regla{height:6px;background:var(--rojo);border:0;margin:clamp(1.75rem,5vw,2.5rem) 0 0;width:5.5rem}

/* --- titular numérico --- */
.titular{margin:clamp(2.25rem,6vw,3.25rem) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.25rem}
.titular__cifra{
	font-size:clamp(3.5rem,12vw,6.5rem);font-weight:900;line-height:.85;
	letter-spacing:-.04em;color:var(--azul);
}
.titular__glosa{max-width:34ch;color:var(--tinta-2);font-size:1rem;margin:0}
.titular__glosa b{color:var(--tinta);font-weight:600}

/* --- secciones --- */
.sec{margin-top:clamp(3rem,8vw,4.5rem)}
.sec__titulo{margin:0 0 .35rem;font-size:clamp(1.35rem,3vw,1.85rem);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.sec__nota{margin:0 0 1.5rem;max-width:58ch;color:var(--tinta-2);font-size:.98rem}

/* --- figuras --- */
.fig{position:relative;margin:0}
.fig svg{display:block;width:100%;height:auto;overflow:visible}
.rejilla line{stroke:var(--rejilla);stroke-width:1}
.eje text{fill:var(--tinta-3);font-size:12px;font-weight:500}
.ref line{stroke:var(--referencia);stroke-width:1.5;stroke-dasharray:4 3}
.ref text{fill:var(--tinta-3);font-size:11px;font-weight:600}
.serie{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.etq{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.etq--fondo{paint-order:stroke;stroke:var(--papel);stroke-width:4px;stroke-linejoin:round}

/* leyenda: la identidad nunca depende solo del color */
.leyenda{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:0 0 1.1rem;padding:0;list-style:none;font-size:.9rem;color:var(--tinta-2)}
.leyenda li{display:flex;align-items:center;gap:.45rem}
.leyenda i{width:.85rem;height:.85rem;border-radius:2px;display:block;flex:none}

/* --- panel múltiple --- */
.paneles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 1.25rem}
@media (max-width:64rem){.paneles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:30rem){.paneles{grid-template-columns:1fr}}
.panel__cab{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.3rem}
.panel__nom{font-size:.92rem;font-weight:600;color:var(--tinta)}
.panel__val{font-size:1rem;font-weight:900}

/* --- tooltip --- */
.tip{
	position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;
	background:var(--tinta);color:#fff;padding:.5rem .65rem;border-radius:4px;
	font-size:.85rem;line-height:1.35;white-space:nowrap;z-index:5;
	font-variant-numeric:tabular-nums;transform:translate(-50%,-115%);
}
.tip[data-visible="1"]{opacity:1}
.tip b{font-weight:700}

/* --- tabla (vista alternativa y respaldo sin JS) --- */
.datos{margin-top:clamp(2.5rem,6vw,3.5rem)}
.datos summary{cursor:pointer;font-weight:700;padding:.6rem 0;border-top:2px solid var(--tinta);border-bottom:1px solid var(--rejilla)}
.datos summary:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
.tabla-env{overflow-x:auto;margin-top:1rem}
table{border-collapse:collapse;width:100%;font-size:.88rem;font-variant-numeric:tabular-nums}
caption{text-align:left;font-weight:600;color:var(--tinta-2);padding-bottom:.5rem}
th,td{padding:.4rem .6rem;text-align:right;border-bottom:1px solid var(--rejilla);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{border-bottom:2px solid var(--tinta);font-weight:700}

/* --- pie --- */
.pie{margin-top:clamp(3rem,7vw,4rem);padding-top:1.5rem;border-top:1px solid var(--rejilla);color:var(--tinta-2);font-size:.92rem}
.pie h2{font-size:1.05rem;font-weight:900;color:var(--tinta);margin:0 0 .5rem}
.pie p{margin:0 0 .8rem;max-width:68ch}
.pie a{color:var(--tinta);text-decoration-color:var(--rojo);text-decoration-thickness:.12em;text-underline-offset:.2em}
.pie a:hover{color:var(--rojo)}
a:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}