/* presupuestos.css — «Lo publicado frente a su gasto» (WEB-CONPREL, 26-oct-2026): el gasto liquidado de un ayuntamiento
 * (CONPREL) frente a lo adjudicado que publica la web, en /comparar/municipios y en la ficha de los órganos de un
 * ayuntamiento (_presupuestos.html). La identidad de la casa: cifras en Instrument Serif, rótulos en versalitas de 12 px,
 * filetes en vez de cajas; colores neutros (el azul marino para el municipio, gris para la mediana, azul muy claro para la
 * mitad central de los parecidos): ni rojo ni verde, no es un juicio. Apretado (plantillas-mas-apretadas): tres cifras en
 * una fila, el gráfico de 150 px y lo demás plegado. Sin estilos en línea: las posiciones van como atributos del SVG. */

.pre-metodo { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tactil); font-size: var(--fs-14); }
.pre-enlaces { margin: calc(-1 * var(--sp-2)) 0 var(--sp-2); font-size: var(--fs-14); }
.pre-enlaces a { display: inline-block; padding: 0.75rem 0; line-height: var(--lh-ajustada); }
.pre-enlaces a .icono { vertical-align: -0.15em; margin-left: var(--sp-1); }
.pre-sin-corte { white-space: nowrap; }
.pre-de { margin: 0 0 var(--sp-2); max-width: 80ch; font-size: var(--fs-14); color: var(--color-texto-2); }
.pre-frase { margin: 0 0 var(--sp-4); max-width: 72ch; font-size: var(--fs-16); line-height: var(--lh-texto); color: var(--color-texto); }
.pre-frase-no { color: var(--color-texto-2); }
.pre-frase-cifra { font-weight: var(--peso-fuerte); color: var(--color-acento); white-space: nowrap; }

/* Las tres cifras: una fila entre filetes */
.pre-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-borde-fuerte); border-bottom: 1px solid var(--color-borde); }
.pre-cifra { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-3) var(--sp-5) var(--sp-4) 0; }
.pre-cifra + .pre-cifra { padding-left: var(--sp-5); border-left: 1px solid var(--color-borde); }
.pre-rotulo { margin: 0; font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--color-texto-3); }
.pre-valor { margin: 0; font-family: var(--fuente-cifra); font-weight: var(--peso-inter); font-size: calc(var(--fs-40) * var(--inter-k) + var(--inter-b)); line-height: 1.05; color: var(--color-texto-fuerte); font-variant-numeric: tabular-nums; }
.pre-cifra-cociente .pre-valor { color: var(--color-acento); }
.pre-cifra-vacia .pre-valor { color: var(--color-texto-3); }
.pre-sub { margin: 0; font-size: var(--fs-13); line-height: var(--lh-ajustada); color: var(--color-texto-2); overflow-wrap: anywhere; }
.pre-sub strong { color: var(--color-texto); font-weight: var(--peso-fuerte); }
.pre-marca-avance { color: var(--color-aviso); }
.pre-mas { color: var(--color-aviso); }
.pre-lista { columns: 3 15rem; }

/* La barra del cociente: pista de 0 a la escala, la mitad central de los parecidos, su mediana y el municipio */
.pre-barra { display: block; width: calc(100% - 14px); height: 20px; margin: var(--sp-1) 7px 0; overflow: visible; }
.pre-barra-pista { fill: var(--color-fondo-hundido); stroke: var(--color-borde); stroke-width: 1; }
.pre-barra-banda { fill: var(--color-acento-suave); stroke: var(--color-acento-borde); stroke-width: 1; }
.pre-barra-med { stroke: var(--color-texto-2); stroke-width: 2; }
.pre-barra-mun { fill: var(--color-acento); stroke: var(--color-superficie); stroke-width: 2; }
.pre-barra-escala { display: flex; justify-content: space-between; margin: 0 0 var(--sp-1); font-size: var(--fs-13); color: var(--color-texto-3); font-variant-numeric: tabular-nums; }

/* Cada año: una columna por año con la mitad central de los parecidos, su mediana y el punto del municipio; las rayas
   de 0, la mitad y la escala, de fondo (solo en los 150 px del dibujo) */
.pre-serie { margin: var(--sp-5) 0 0; }
.pre-serie-titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-14); font-weight: var(--peso-fuerte); color: var(--color-texto); }
.pre-serie-marco { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); }
.pre-serie-eje { display: flex; flex-direction: column; justify-content: space-between; height: 150px; margin: 0; font-size: var(--fs-13); line-height: 1; color: var(--color-texto-3); text-align: right; font-variant-numeric: tabular-nums; }
.pre-serie-eje span:first-child { transform: translateY(-40%); }
.pre-serie-eje span:last-child { transform: translateY(40%); }
.pre-serie-anios {
    display: flex; gap: 2px; margin: 0; padding: 0; list-style: none;
    background-image: linear-gradient(var(--color-borde), var(--color-borde)), linear-gradient(var(--color-borde), var(--color-borde)),
                      linear-gradient(var(--color-borde-fuerte), var(--color-borde-fuerte));
    background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 0, 0 75px, 0 149px;
}
.pre-serie-anios li { flex: 1 1 0; min-width: 0; position: relative; }
.pre-serie-anios li.pre-lateral { z-index: 1; }
.pre-serie-anios a { display: flex; flex-direction: column; min-height: var(--tactil); border-radius: var(--radio-s); text-decoration: none; color: inherit; }
.pre-serie-anios a:hover { background: color-mix(in srgb, var(--color-fondo-hundido) 70%, transparent); }
.pre-serie-anios a:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 1px; }
.pre-serie-anios .pre-actual a { box-shadow: inset 0 -3px 0 var(--color-acento); }
.pre-serie-anios svg { display: block; width: 100%; height: 150px; overflow: visible; }
.pre-serie-banda { fill: var(--color-acento-suave); stroke: var(--color-acento-borde); stroke-width: 1; }
.pre-serie-med { stroke: var(--color-texto-2); stroke-width: 2; }
.pre-serie-mun { fill: var(--color-acento); stroke: var(--color-superficie); stroke-width: 2; }
.pre-avance .pre-serie-mun { fill: var(--color-superficie); stroke: var(--color-acento); stroke-dasharray: 3 2; }
.pre-serie-dato { font-family: var(--fuente-sans); font-size: var(--fs-12); font-weight: var(--peso-fuerte); fill: var(--color-acento); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--color-fondo); stroke-width: 3px; stroke-linejoin: round; }
.pre-serie-no { font-family: var(--fuente-sans); font-size: var(--fs-13); fill: var(--color-texto-3); }
.pre-serie-anio { display: block; padding: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-13); text-align: center; color: var(--color-texto-2); font-variant-numeric: tabular-nums; }
.pre-actual .pre-serie-anio { font-weight: var(--peso-fuerte); color: var(--color-texto-fuerte); }
.pre-serie-avance { display: block; font-size: var(--fs-13); color: var(--color-aviso); }
.pre-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0 0; font-size: var(--fs-13); color: var(--color-texto-2); }
.pre-ley { display: inline-flex; align-items: center; gap: 6px; }
.pre-ley-svg { width: 16px; height: 16px; overflow: visible; }
.pre-ley-nota { color: var(--color-texto-3); }

/* Lo plegado: una lista entre filetes (no cajas), apretada; y las notas */
.pre-plegables { margin-top: var(--sp-4); border-top: 1px solid var(--color-borde); }
.pre-plegable { border-bottom: 1px solid var(--color-borde); }
.pre-plegable > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tactil); cursor: pointer; list-style: none; font-size: var(--fs-14); font-weight: var(--peso-medio); color: var(--color-acento); }
.pre-plegable > summary::-webkit-details-marker { display: none; }
.pre-plegable > summary::before { content: ""; flex: none; width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--mov-rapido); margin: 0 var(--sp-1) 0 2px; }
.pre-plegable[open] > summary::before { transform: rotate(45deg); }
.pre-plegable > summary:hover { color: var(--color-acento-hover); }
.pre-plegable > summary:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.pre-plegable > .tabla-marco, .pre-plegable > .pre-lista { margin: var(--sp-1) 0 var(--sp-3); }
.pre-plegable > .pre-nota:first-of-type { margin-top: 0; }
.pre-plegable > .pre-nota:last-child { margin-bottom: var(--sp-3); }
.pre-tabla tr.pre-bsi td { font-weight: var(--peso-fuerte); color: var(--color-texto-fuerte); }
.pre-nota { margin: var(--sp-3) 0 0; max-width: 100ch; font-size: var(--fs-13); line-height: var(--lh-texto); color: var(--color-texto-2); }
.pre-lectura strong { color: var(--color-texto); }
.pre-descarga { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.pre-descarga a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tactil); }

@media (max-width: 760px) {
    /* Las dos cifras en una fila y el cociente debajo, a lo ancho */
    .pre-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pre-cifra { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; }
    .pre-cifra + .pre-cifra { padding-left: var(--sp-3); }
    .pre-cifra-cociente { grid-column: 1 / -1; padding: var(--sp-3) 0; }
    .pre-cifra + .pre-cifra-cociente { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-borde); }
    .pre-valor { font-size: calc(var(--fs-28) * var(--inter-k) + var(--inter-b)); }
    .pre-frase { font-size: var(--fs-16); }
    .pre-serie-anios svg, .pre-serie-eje { height: 130px; }
    .pre-serie-anios { background-position: 0 0, 0 65px, 0 129px; }
    /* Las cifras al lado del punto pisarían la columna vecina, que es estrecha: solo la del año elegido y la que se
       señala (ratón, toque o teclado); todas están en «Ver los datos de cada año» */
    .pre-serie-anios li.pre-lateral:not(.pre-actual) .pre-serie-dato { display: none; }
    .pre-serie-anios li.pre-lateral a:hover .pre-serie-dato, .pre-serie-anios li.pre-lateral a:focus-visible .pre-serie-dato { display: inline; }
}