/* Universidad Transparente — «La universidad pública, a la vista».
   La transparencia como material: paneles de vidrio translúcido sobre papel crema con cuadrícula; tinta azul marino. */

:root {
  /* Paleta de papel y tinta: crema, beige y azul marino */
  --fondo: #f2efe4; --papel-2: #ebe7d8; --tinta: #141b34; --tenue: #4a5068; --linea: rgb(20 27 52 / .14);
  --vidrio: rgb(242 239 228 / .55); --vidrio-borde: rgb(20 27 52 / .12); --vidrio-solido: rgb(242 239 228 / .85);
  --sombra: 0 10px 30px rgb(20 27 52 / .06);
  --cuadricula: rgb(20 27 52 / .05);
  --magenta: #141b34; --acento: #141b34; --sobre-acento: #f2efe4; --rojo: #c62828; --sec: #8a5a00;
  --serie-1: #2a78d6; --serie-2: #eb6834; --grilla: rgb(20 27 52 / .08);
  --actor-congreso: #2a78d6; --actor-ejecutivo: #eb6834; --actor-justicia: #1baf7a; --actor-acuerdo: #eda100;
  --radio: 18px;
  /* Espaciado (ADR 0033): las partes aparecen al hacer scroll; con aire entre ellas, entra una cosa por vez */
  --entre-secciones: clamp(96px, 14vw, 160px); --entre-partes: clamp(48px, 7vw, 80px);
  color-scheme: light dark;
  interpolate-size: allow-keywords;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #141b34; --papel-2: #1b2342; --tinta: #f2efe4; --tenue: rgb(242 239 228 / .72); --linea: rgb(242 239 228 / .14);
    --vidrio: rgb(242 239 228 / .05); --vidrio-borde: rgb(242 239 228 / .14); --vidrio-solido: rgb(27 35 66 / .9);
    --sombra: 0 12px 34px rgb(0 0 0 / .25);
    --cuadricula: rgb(242 239 228 / .05);
    --magenta: #ebe7d8; --acento: #ebe7d8; --sobre-acento: #141b34; --rojo: #ff7a6b; --sec: #e8c46a;
    --serie-1: #3987e5; --serie-2: #d95926; --grilla: rgb(242 239 228 / .08);
    --actor-congreso: #3987e5; --actor-ejecutivo: #d95926; --actor-justicia: #199e70; --actor-acuerdo: #c98500;
  }
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; color: var(--tinta);
       background-color: var(--fondo);
       background-image: linear-gradient(var(--cuadricula) 1px, transparent 1px), linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px);
       background-size: 40px 40px; background-attachment: fixed;
       font: 17px/1.6 Lato, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
a { color: inherit; }
h1, h2, h3 { letter-spacing: -.02em; }

/* Vidrio */
.vidrio { background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--radio);
          box-shadow: var(--sombra); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
.luz { position: relative; isolation: isolate; }
.luz::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
               background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .55), transparent 60%);
               transition: opacity .3s ease; }
.luz:hover::before { opacity: 1; }
@media (prefers-color-scheme: dark) { .luz::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(242 239 228 / .08), transparent 60%); } }

/* Aparición al hacer scroll */
/* Solo con JavaScript activo: sin él, todo se ve desde el principio. */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .js .revelar.visible { opacity: 1; transform: none; }
}

/* Barra superior */
.barra-sup { position: sticky; top: 12px; z-index: 10; max-width: 1040px; margin: 12px auto 0; padding: 10px 20px;
             display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; justify-content: space-between; border-radius: 999px; }
@media (max-width: 1080px) { .barra-sup { margin-inline: 12px; } }
.logo { font-weight: 900; text-decoration: none; font-size: 1.05rem; line-height: 1.1; }
.logo small { display: block; font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
nav { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: .92rem; }
nav a { text-decoration: none; color: var(--tenue); transition: color .2s; }
nav a:hover { color: var(--acento); }
@media (max-width: 640px) { .barra-sup { border-radius: 18px; } nav { font-size: .85rem; gap: 2px 12px; } }

/* Números: siempre abren su ficha */
.num { font-weight: 900; text-decoration: underline dotted color-mix(in srgb, currentColor 40%, transparent);
       text-underline-offset: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.num:hover, .num:focus-visible { text-decoration-style: solid; text-decoration-color: var(--acento); }
.sec { font-size: .62rem; font-weight: 900; text-transform: uppercase; color: var(--sec); vertical-align: super; margin-left: 2px; }
.rojo, .rojo .num { color: var(--rojo); }
[data-contar] { font-variant-numeric: tabular-nums; }

/* Portada */
.portada { min-height: min(66vh, 620px); display: grid; gap: 40px; align-items: center; padding: 64px 0 32px; }
@media (min-width: 860px) { .portada { grid-template-columns: 1.1fr .9fr; } }
.sobretitulo, .sec-numero { margin: 0 0 12px; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; color: var(--tenue); }
.portada h1 { margin: 0; font-size: clamp(3rem, 9vw, 6rem); line-height: .95; font-weight: 900; letter-spacing: -.045em; }
.bajada { margin: 20px 0 0; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--tenue); max-width: 30rem; line-height: 1.45; }
.cifra-portada { display: grid; gap: 8px; text-decoration: none; padding-left: 28px; border-left: 2px solid var(--linea); }
.rotulo { font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; max-width: 26rem; }
.enorme { font-size: clamp(5rem, 13vw, 8.5rem); line-height: .85; font-weight: 900; letter-spacing: -.06em; }
.pie-cifra { color: var(--tenue); font-size: .92rem; }
.cifra-portada:hover .pie-cifra { color: var(--tinta); }

/* Motivación, justo después de la portada */
.porque { padding: var(--entre-partes) 0 calc(var(--entre-partes) * .75); max-width: 46rem; }
.porque blockquote { margin: 0 0 18px; padding-left: 22px; border-left: 5px solid var(--tinta);
                     font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 900; line-height: 1.12; letter-spacing: -.03em; }
.porque p { color: var(--tenue); margin: 0; max-width: 36rem; }
.porque .sobretitulo { margin-bottom: 14px; }
.porque blockquote + p { padding-left: 27px; }

/* Secciones: parte de la página, separadas por una línea */
.seccion { padding: var(--entre-secciones) 0 calc(var(--entre-secciones) / 2); border-top: 1px solid var(--linea); scroll-margin-top: 84px; }
.sec-encabezado { margin-bottom: var(--entre-partes); }
/* Cada parte de una sección (cifras, imagen, gráfico, «ver más») separada de la anterior */
.seccion > :not(:first-child), [data-bloque-arts34] > :not(:first-child) { margin-top: var(--entre-partes); }
/* El selector «Ver:» queda pegado a las cifras que cambia */
[data-bloque-arts34] > [data-cifras] { margin-top: 24px; }
.sec-encabezado h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; max-width: 40rem; }

/* Fila de datos, sin recuadros: separados por líneas verticales */
.datos { display: flex; flex-wrap: wrap; gap: 20px 0; margin: 0 0 28px; }
.dato { display: grid; gap: 2px; padding: 0 28px; border-left: 1px solid var(--linea); }
.dato:first-child { padding-left: 0; border-left: 0; }
.dato small { color: var(--tenue); font-size: .82rem; }
.dato .num, .dato > span { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; }
.dato-grande .num, .dato-grande > span .num { font-size: clamp(2.6rem, 6vw, 3.8rem); letter-spacing: -.04em; }
@media (max-width: 600px) { .dato { padding: 0 16px; } .dato:nth-child(odd) { padding-left: 0; border-left: 0; } .datos { gap: 16px 0; } .dato { flex: 1 1 45%; } }

.aviso { font-size: .88rem; color: var(--tenue); margin: 12px 0; padding-left: 12px; border-left: 2px solid var(--tinta); max-width: 46rem; }
.hoy { margin: 0 0 28px; padding-left: 18px; border-left: 3px solid var(--tinta); max-width: 46rem; }
.hoy small { font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.hoy p { margin: 4px 0 6px; font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.35; }
/* Debajo del hecho destacado, el resumen de la situación en letra normal (ADR 0037) */
.hoy .hoy-resumen { margin: 14px 0 0; font-weight: 400; font-size: 1rem; line-height: 1.5; }
.enlace { font-weight: 700; font-size: .9rem; color: var(--acento); }

.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: 12px; }
.tabla th, .tabla td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: baseline; }
.tabla thead th { font-size: .74rem; text-transform: uppercase; color: var(--tenue); font-weight: 700; text-align: right; }
.tabla thead th:first-child { text-align: left; }
.tabla td { text-align: right; }
@media (max-width: 600px) {
  .tabla thead { display: none; }
  .tabla tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--linea); }
  .tabla th, .tabla td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 0; }
  .tabla td::before { content: attr(data-r); color: var(--tenue); font-size: .85rem; }
  .tabla td.sin-dato { display: none; }
.tabla small.sin-dato { display: block; font-size: .78rem; color: var(--tenue); }
}

/* «¿De dónde sale?» y artículo */
.mas-info { margin-top: 18px; }
.mas-info > summary { padding: 6px 0; }
.mas-info > summary { cursor: pointer; font-weight: 900; color: var(--tinta); list-style: none; display: inline-flex; gap: 8px; align-items: center; }
.mas-info > summary::-webkit-details-marker { display: none; }
.mas-info > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
                              border: 1.5px solid currentColor; font-size: .9rem; transition: transform .3s; }
.mas-info[open] > summary::before { transform: rotate(45deg); }
.mas-info::details-content { block-size: 0; overflow: clip; transition: block-size .45s ease, content-visibility .45s allow-discrete; }
.mas-info[open]::details-content { block-size: auto; }
/* Rótulo de un desplegable que cambia al abrirlo: «Ver más» / «Ver menos» (ADR 0025) */
details:not([open]) > summary .si-abierto, details[open] > summary .si-cerrado { display: none; }
/* Texto de presentación de una sección, antes de su cronología (ADR 0025) */
.presentacion { max-width: 52rem; margin: 0 0 36px; }
/* Una cronología por universidad, en su recuadro; un selector «Ver:» elige cuál (ADR 0025 y 0034) */
.universidad { max-width: 54rem; margin: 12px 0 0; padding: 0 20px 18px; border: 1px solid var(--linea); border-radius: 14px; }
@media (max-width: 600px) { .universidad { padding-inline: 12px; } }
.universidad-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; padding: 14px 0; }
.universidad-nombre { font-weight: 900; font-size: 1.1rem; }
.universidad-cuenta { font-size: .85rem; color: var(--tenue); }
.universidad .aviso { margin-top: 0; }
.articulo { margin-top: 14px; }
.entrada { color: var(--tenue); margin: 0 0 14px; }
.paso { padding: 14px 0 14px 18px; margin: 0 0 4px; border-left: 2px solid var(--linea); max-width: 46rem; }
.paso h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.08rem; }
.paso h3 span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
                background: var(--acento); color: var(--sobre-acento); font-size: .82rem; flex: none; }
.paso p { margin: 0 0 8px; }
.cuenta { background: var(--vidrio); border-radius: 12px; padding: 12px 14px; margin: 0 0 8px; }
.cuenta p { margin: 0 0 4px; }

/* Gráfico */
.grafico { margin: 0 0 8px; }
.grafico figcaption { font-size: .85rem; color: var(--tenue); margin-bottom: 8px; }
.grafico-lienzo { position: relative; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grilla { stroke: var(--grilla); stroke-width: 1; }
.eje-texto { fill: var(--tenue); font-size: 12px; font-variant-numeric: tabular-nums; }
.linea { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.linea.pagado { stroke: var(--serie-1); } .linea.exigido { stroke: var(--serie-2); }
.linea.no-confirmado { stroke-dasharray: 4 4; }
.punto { stroke: var(--fondo); stroke-width: 2; } .punto.pagado { fill: var(--serie-1); } .punto.exigido { fill: var(--serie-2); }
text.rotulo { fill: var(--tinta); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.cruz { stroke: var(--tenue); stroke-width: 1; }
.zona { fill: transparent; cursor: crosshair; }
.tooltip { position: absolute; top: 8px; pointer-events: none; background: var(--vidrio-solido); border: 1px solid var(--linea);
           border-radius: 12px; padding: 8px 12px; font-size: .85rem; white-space: nowrap; box-shadow: var(--sombra);
           -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.leyenda { font-size: .85rem; color: var(--tenue); margin: 8px 0 0; }
.clave { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid; vertical-align: middle; margin: 0 4px 0 12px; }
.clave:first-child { margin-left: 0; }
.clave.pagado { border-color: var(--serie-1); } .clave.exigido { border-color: var(--serie-2); }
.clave.discontinuo { border-top-style: dashed; }
.solo-angosto { display: none; }
@media (max-width: 600px) { .solo-ancho { display: none; } .solo-angosto { display: block; } }
/* Las líneas se dibujan cuando el gráfico aparece en pantalla */
@media (prefers-reduced-motion: no-preference) {
  .js .dibujar .linea.pagado:not(.no-confirmado), .js .dibujar .linea.exigido { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .dibujar .linea.no-confirmado, .js .dibujar .punto, .js .dibujar text.rotulo { opacity: 0; }
  .js .dibujar.visible .linea.pagado:not(.no-confirmado), .js .dibujar.visible .linea.exigido { animation: dibujar 1.8s .2s cubic-bezier(.4, 0, .2, 1) forwards; }
  .js .dibujar.visible .linea.no-confirmado, .js .dibujar.visible .punto, .js .dibujar.visible text.rotulo { animation: aparecer .4s 1.9s forwards; }
}
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }

/* Línea de tiempo simple (Control) */
.tiempo { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.tiempo li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.tiempo time { font-size: .9rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.tiempo a { text-decoration: none; } .tiempo a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tiempo li.estado a { color: var(--tenue); font-style: italic; }
@media (max-width: 480px) { .tiempo li { grid-template-columns: 1fr; gap: 0; } }
.mas > summary { cursor: pointer; font-size: .9rem; font-weight: 700; padding: 12px 0; }

/* Filtros por actor */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.filtros-rotulo { font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); margin-right: 4px; }
.actor { font: inherit; font-size: .88rem; color: var(--tinta); cursor: pointer; border-radius: 999px; padding: 5px 14px;
         background: transparent; border: 1px solid var(--linea); transition: background .2s, border-color .2s, transform .15s; }
.actor:hover { border-color: var(--tinta); }
.actor:active { transform: scale(.96); }
.actor[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.actor i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; background: var(--c); }
.actor-congreso { --c: var(--actor-congreso); } .actor-ejecutivo { --c: var(--actor-ejecutivo); }
.actor-justicia { --c: var(--actor-justicia); } .actor-acuerdo { --c: var(--actor-acuerdo); } .actor-otro { --c: var(--tenue); }

/* Cronología vertical (Ley 27.795), de lo más antiguo a lo más reciente, con scroll propio (ADR 0030) */
.cronologia-guia { margin: 0 0 10px; font-size: .85rem; color: var(--tenue); }
.cronologia-scroll { max-width: 52rem; max-height: min(60vh, 36rem); overflow: hidden auto; padding: 0 20px 0 16px;
                     border-block: 1px solid var(--linea); scrollbar-color: var(--tenue) transparent; scrollbar-gutter: stable; }
.cronologia-scroll:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
.linea-v { list-style: none; margin: 0; padding: 20px 0 28px 30px; position: relative;
           background: linear-gradient(var(--linea), var(--linea)) 7px 0 / 1.5px 100% no-repeat; }
/* El año queda arriba del recuadro mientras se recorren sus hechos. */
.anio { position: sticky; top: 0; z-index: 1; margin: 0 0 12px -30px; padding: 8px 0 4px; font-weight: 900; font-size: 1.1rem;
        background: var(--fondo); }
.hito { position: relative; padding: 0 0 24px; }
.hito-marca { position: absolute; left: -30px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--c);
              border: 3px solid var(--fondo); box-shadow: 0 0 0 1.5px var(--c); transition: transform .2s; }
.hito:hover .hito-marca { transform: scale(1.3); }
.hito time { font-weight: 900; font-size: .92rem; margin-right: 10px; }
.hito-actor { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.hito-detalle > summary { list-style: none; cursor: pointer; }
.hito-detalle > summary::-webkit-details-marker { display: none; }
.hito-titulo { display: block; margin-top: 4px; font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.hito-titulo::after { content: "+ detalle"; display: inline-block; margin-left: 8px; font-size: .74rem; font-weight: 900; color: var(--tenue);
                      text-transform: uppercase; letter-spacing: .05em; }
.hito-detalle[open] > .hito-titulo::after { content: "− cerrar"; }
.hito-detalle > summary:hover .hito-titulo, .hito-detalle > summary.hito-titulo:hover { text-decoration: underline; text-underline-offset: 4px; }
.hito-detalle::details-content { block-size: 0; overflow: clip; opacity: 0;
                                 transition: block-size .4s ease, opacity .3s ease, content-visibility .4s allow-discrete; }
.hito-detalle[open]::details-content { block-size: auto; opacity: 1; }
.hito-cuerpo { margin-top: 10px; padding: 4px 0 4px 16px; border-left: 2px solid var(--linea); }
.hito-argumento { font-size: .9rem; color: var(--tenue); margin: 0 0 10px; }
.hito-medios-rotulo { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
.hito-medios { list-style: none; margin: 0 0 8px; padding: 0; font-size: .88rem; line-height: 1.4; }
.hito-medios li { margin: 0 0 6px; }
.hito-medios a { text-decoration: none; color: var(--tenue); } .hito-medios a:hover { color: var(--tinta); text-decoration: underline; }
.hito-medios strong { color: var(--tinta); }
.hito-ficha { font-size: .88rem; font-weight: 700; color: var(--acento); }
/* Último hecho importante de la cronología: el mismo que destaca «Dónde está hoy» (ADR 0037) */
.hito-etiqueta { display: inline-block; margin-left: 8px; padding: 1px 9px; border: 1px solid var(--c); border-radius: 999px;
                 font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta); }
.hito-importante .hito-marca { transform: scale(1.25); box-shadow: 0 0 0 1.5px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent); }
.hito { scroll-margin-top: 48px; }
@media (prefers-reduced-motion: no-preference) { .hito.resaltado { animation: resaltar 1.6s ease-out; } }
@keyframes resaltar { 0%, 30% { background: color-mix(in srgb, var(--c) 18%, transparent); } 100% { background: transparent; } }

/* Recorrido hecho por hecho, con sellos (ADR 0031). Los controles solo aparecen con JavaScript. */
.cronologia-titulo { margin: 0 0 2px; font-size: 1.35rem; font-weight: 900; }
.recorrido-modos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -6px 0 14px; }
.recorrido-pista { font-size: .85rem; color: var(--tenue); }
.recorrido-boton { font: inherit; font-weight: 900; font-size: .9rem; color: var(--tinta); background: transparent; cursor: pointer;
                   border: 1px solid var(--tinta); border-radius: 999px; padding: 7px 16px; transition: background .2s, color .2s, opacity .2s; }
.recorrido-boton:hover:not(:disabled), .recorrido-boton[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }
.recorrido-boton:disabled { opacity: .35; cursor: default; }
.recorrido-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 52rem; margin-top: 14px; }
.recorrido-modos[hidden], .recorrido-nav[hidden], .recorrido-pista[hidden] { display: none; }
.recorrido-contador { font-weight: 900; font-size: .92rem; font-variant-numeric: tabular-nums; text-align: center; }

.sello { display: none; }
.cronologia-scroll.modo-carrusel { max-height: none; overflow: visible; min-height: 17rem; }
/* Sin sellos (p. ej. Control, ADR 0025) no hace falta reservar su lugar. */
.cronologia-scroll.modo-carrusel:not(:has(.sello)) { min-height: 0; }
.modo-carrusel .linea-v { background: none; padding-block: 28px; }
.modo-carrusel .hito { transition-delay: 0s; }
.modo-carrusel .hito-titulo { font-size: 1.3rem; }
.modo-carrusel .sello { display: flex; flex-direction: column; align-items: center; gap: 2px; width: fit-content; max-width: 100%;
                        margin: 30px 0 6px 6px; padding: 9px 22px 8px; color: var(--c); text-align: center; text-transform: uppercase;
                        border: 3px solid var(--c); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--fondo), inset 0 0 0 5px var(--c);
                        transform: rotate(-4deg); opacity: .92; }
.sello b { font-size: clamp(1.2rem, 5.5vw, 2.1rem); font-weight: 900; letter-spacing: .08em; line-height: 1.05; }
.sello small { font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
@media (prefers-reduced-motion: no-preference) {
  .sello.estampar { animation: estampar .55s cubic-bezier(.2, .9, .3, 1.2) both; }
  .modo-carrusel.golpe { animation: golpe .3s .42s ease-out; }
}
@keyframes estampar {
  0% { opacity: 0; transform: scale(2.6) rotate(-12deg); }
  55% { opacity: 1; transform: scale(.94) rotate(-3deg); }
  75% { transform: scale(1.03) rotate(-4.5deg); }
  100% { opacity: .92; transform: scale(1) rotate(-4deg); }
}
@keyframes golpe { 0%, 100% { translate: 0; } 25% { translate: 0 3px; } 50% { translate: -2px -1px; } 75% { translate: 1px 1px; } }
/* Paso suave entre hechos del recorrido, en las cronologías con data-transicion (ADR 0025) */
@media (prefers-reduced-motion: no-preference) {
  [data-transicion] .hito.sale-izq { animation: salir-izq .18s ease-in forwards; }
  [data-transicion] .hito.sale-der { animation: salir-der .18s ease-in forwards; }
  [data-transicion] .hito.entra-der { animation: entrar-der .28s cubic-bezier(.2, .7, .2, 1) both; }
  [data-transicion] .hito.entra-izq { animation: entrar-izq .28s cubic-bezier(.2, .7, .2, 1) both; }
  [data-transicion] .hito:is(.entra-der, .entra-izq) .sello { opacity: 0; } /* el sello cae después de que entra el hecho */
}
@keyframes salir-izq { to { opacity: 0; translate: -32px 0; } }
@keyframes salir-der { to { opacity: 0; translate: 32px 0; } }
@keyframes entrar-der { from { opacity: 0; translate: 32px 0; } }
@keyframes entrar-izq { from { opacity: 0; translate: -32px 0; } }

/* Entrada escalonada de cada hecho */
@media (prefers-reduced-motion: no-preference) {
  .js .hito, .js .tiempo li { opacity: 0; transform: translateX(-12px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .hito.visible, .js .tiempo li.visible { opacity: 1; transform: none; }
}

/* Cómo leer */
.demo { display: grid; gap: 18px; align-items: center; }
@media (min-width: 760px) { .demo { grid-template-columns: 1fr auto 1.1fr; } }
.demo-frase { margin: 0; font-size: 1.3rem; }
.demo-flecha { font-size: 2rem; font-weight: 900; text-align: center; }
@media (max-width: 759px) { .demo-flecha { transform: rotate(90deg); } }
.demo-ficha { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--vidrio-solido);
              border: 1px solid var(--linea); border-top: 4px solid var(--tinta); font-size: .88rem; box-shadow: var(--sombra); }
.demo-ficha > strong { font-size: 1.05rem; line-height: 1.3; }
.demo-ficha .ficha-valor { margin: 4px 0 10px; font-size: 1.5rem; }
.demo-ficha .ficha-calculo { margin-bottom: 12px; }

/* Ficha */
dialog { width: min(600px, calc(100vw - 32px)); padding: 26px; color: var(--tinta); background: var(--vidrio-solido); }
dialog::backdrop { background: rgb(20 27 52 / .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ficha-rotulo { margin: 0; font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--acento); }
dialog h3, .ficha-pagina h3 { margin: 4px 0 0; font-size: 1.15rem; line-height: 1.3; }
.ficha-valor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 1.7rem; font-weight: 900;
               margin: 8px 0 16px; overflow-wrap: anywhere; }
.ficha-periodo { font-size: .85rem; font-weight: 700; color: var(--tenue); }
.ficha-subtitulo { margin: 0 0 6px; font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.ficha-calculo { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--papel-2); border-left: 4px solid var(--tinta); }
.ficha-calculo > p { margin: 0; line-height: 1.45; }
.ficha-calculo .ficha-nota { margin-top: 10px; font-size: .86rem; color: var(--tenue); }
.ficha-suma { list-style: none; margin: 10px 0 0; padding: 0; font-size: .88rem; }
.ficha-suma li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--linea); }
.ficha-suma li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ficha-suma .total { font-weight: 900; border-bottom: 0; }
.ficha-origen { margin: 0; padding-left: 18px; font-size: .92rem; line-height: 1.5; }
.ficha-pie { margin: 8px 0 0; font-size: .78rem; color: var(--tenue); }
.ficha-detalle { margin-top: 16px; border-top: 1px solid var(--linea); padding-top: 12px; }
.ficha-detalle summary { cursor: pointer; font-size: .85rem; font-weight: 700; }
.ficha-detalle .ficha { margin-top: 12px; }
.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: .92rem; }
.ficha dt { font-size: .74rem; text-transform: uppercase; color: var(--tenue); padding-top: 2px; }
.ficha dd { margin: 0; } .ficha dd p { margin: 0 0 8px; }
.ficha-composicion { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ficha-composicion th, .ficha-composicion td { padding: 4px 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; font-weight: 400; }
.ficha-composicion td { padding-left: 12px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.ficha-composicion .total th, .ficha-composicion .total td { font-weight: 700; border-bottom: 0; }
.ids { margin-top: 16px; font-size: .74rem; color: var(--tenue); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.cerrar { margin-top: 16px; font: inherit; font-weight: 900; font-size: .85rem; cursor: pointer;
          background: var(--acento); color: var(--sobre-acento); border: 0; border-radius: 999px; padding: 9px 20px; }
.ficha-pagina { padding: 40px 0; max-width: 640px; }

.pie { max-width: 1040px; margin: 0 auto; padding: 20px 20px 40px; border-top: 1px solid var(--linea); font-size: .8rem; color: var(--tenue); }
.pie p { margin: 0 0 4px; }

/* Mapa de quién audita (ADR 0034): la UNR al centro, el control externo a la izquierda y el del Poder Ejecutivo a la
   derecha. Las líneas se dibujan al aparecer y un punto viaja hacia la UNR. Sin JavaScript se ven todos los paneles. */
.mapa-control { max-width: 54rem; }
.mapa-escena { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: start; gap: 8px;
               margin: 18px 0 28px; }
.mapa-lado, .mapa-unr { display: grid; justify-items: center; gap: 14px; text-align: center; position: relative; z-index: 1; }
.mapa-linea { position: absolute; top: 44px; height: 2px; background: var(--c); z-index: 0; }
.mapa-linea-izq { left: 16.5%; right: 50%; transform-origin: left; }
.mapa-linea-der { left: 50%; right: 16.5%; transform-origin: right; }
/* Los dos órganos con el mismo trato: el mismo azul y línea continua, para que ninguno se lea como «bueno» o «malo».
   El color de su actor queda solo en el punto del rótulo del panel, igual que en los filtros de la línea de tiempo. */
.mapa-control .organo, .mapa-control .mapa-linea, .mapa-control .organo-panel { --c: var(--serie-1); }
.mapa-linea i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0; }
.organo { display: grid; justify-items: center; gap: 2px; font: inherit; color: var(--tinta); background: none; border: 0;
          padding: 0; cursor: pointer; max-width: 11rem; }
.organo strong { font-size: 1.05rem; font-weight: 900; margin-top: 6px; }
.organo small { font-size: .78rem; color: var(--tenue); line-height: 1.3; }
.organo-icono { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 12px; border-radius: 50%;
                background: var(--fondo); border: 2px solid var(--c); color: var(--c);
                transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
.organo-icono svg { width: 30px; height: 30px; }
.organo:hover .organo-icono { transform: translateY(-3px); box-shadow: var(--sombra); }
.organo:active .organo-icono { transform: scale(.94); }
.organo:focus-visible { outline: none; } .organo:focus-visible .organo-icono { outline: 3px solid var(--tinta); outline-offset: 3px; }
.organo[aria-pressed="true"] .organo-icono { background: var(--c); color: var(--fondo); }
.organo[aria-pressed="true"] strong { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.unr-icono { position: relative; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
             background: var(--tinta); color: var(--fondo); }
.unr-icono svg { width: 40px; height: 40px; }
.mapa-unr > strong { font-size: 1.1rem; font-weight: 900; margin-top: -6px; line-height: 1.2; }
.organo-panel { max-width: 46rem; padding: 18px 20px; border-radius: 14px; background: var(--papel-2); border-left: 4px solid var(--c); }
.organo-panel + .organo-panel { margin-top: 12px; }
.organo-panel h4 { margin: 2px 0 6px; font-size: 1.1rem; }
.organo-panel > p { margin: 0 0 10px; }
.organo-rol { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 900; text-transform: uppercase;
              letter-spacing: .08em; color: var(--tenue); }
.organo-rol i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.organo-panel .organo-rol + .organo-hechos, .organo-panel > p + .organo-rol { margin-top: 14px; }
.organo-hechos { list-style: none; margin: 6px 0 8px; padding: 0; }
.organo-hechos li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea); font-size: .92rem; }
.organo-hechos time { color: var(--tenue); font-size: .85rem; }
@media (max-width: 600px) {
  .mapa-escena { gap: 4px; } .mapa-linea { top: 38px; }
  .organo-icono { width: 52px; height: 52px; } .organo-icono svg { width: 24px; height: 24px; }
  .unr-icono { width: 76px; height: 76px; } .organo small { font-size: .72rem; }
  .organo-hechos li { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .mapa-control .mapa-linea { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .5s; }
  .js .mapa-control.visible .mapa-linea { transform: none; }
  .js .mapa-control.visible .mapa-linea i { animation: viaje 3.2s ease-in-out 1.6s infinite; }
  .js .mapa-control.visible .mapa-linea-der i { animation-name: viaje-izq; animation-delay: 2.4s; }
  .js .mapa-control .organo, .js .mapa-control .unr-icono { opacity: 0; transform: scale(.8); transition: opacity .5s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
  .js .mapa-control.visible .organo, .js .mapa-control.visible .unr-icono { opacity: 1; transform: none; }
  .js .mapa-control.visible .unr-icono { transition-delay: .1s; }
  .js .mapa-control.visible .mapa-lado .organo { transition-delay: .35s; }
  .js .organo-panel:not([hidden]) { animation: panel-entra .45s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes viaje { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes viaje-izq { 0% { left: calc(100% - 8px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes panel-entra { from { opacity: 0; transform: translateY(10px); } }

/* Recorrido de la ley (ADR 0038): un paso por sello sobre una línea; los rótulos alternan arriba y abajo para no
   pisarse. La línea se dibuja al aparecer, los pasos entran en orden y el último late. */
.camino-ley { max-width: 64rem; }
.camino-pista { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; margin: 0 0 8px; }
.camino-pista:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; border-radius: 8px; }
.camino { list-style: none; margin: 0; padding: 0; position: relative; display: grid;
          grid-template-columns: repeat(var(--pasos), minmax(72px, 1fr)); min-width: calc(var(--pasos) * 72px); height: 168px; }
.camino::before { content: ""; position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--tenue); opacity: .45;
                  left: calc(50% / var(--pasos)); right: calc(50% / var(--pasos)); transform-origin: left; }
.camino-paso { position: relative; }
.camino-paso a { position: absolute; inset: 0; color: inherit; text-decoration: none; }
.camino-punto { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
                background: var(--fondo); border: 3px solid var(--c); transition: transform .2s ease, background .2s ease; }
.camino-paso a::before { content: ""; position: absolute; left: 50%; width: 1px; height: 10px; background: var(--c); bottom: calc(50% + 9px); }
.camino-paso.abajo a::before { bottom: auto; top: calc(50% + 9px); }
.camino-texto { position: absolute; left: 50%; bottom: calc(50% + 22px); width: 140px; transform: translateX(-50%);
                display: grid; gap: 1px; text-align: center; }
.camino-paso.abajo .camino-texto { bottom: auto; top: calc(50% + 22px); }
.camino-paso:first-child .camino-texto { left: 0; width: 120px; transform: none; text-align: left; }
.camino-paso:last-child .camino-texto { left: auto; right: 0; width: 120px; transform: none; text-align: right; }
.camino-texto strong { font-size: .82rem; font-weight: 900; line-height: 1.2; }
.camino-texto small { font-size: .72rem; color: var(--tenue); }
.camino-paso a:hover .camino-punto, .camino-paso a:focus-visible .camino-punto { transform: scale(1.35); background: var(--c); }
.camino-paso a:hover strong { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; }
.camino-paso a:focus-visible { outline: none; }
.camino-hoy .camino-punto { background: var(--c); }
@media (prefers-reduced-motion: no-preference) {
  .js .camino-ley .camino::before { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.3, .6, .2, 1) .2s; }
  .js .camino-ley.visible .camino::before { transform: none; }
  .js .camino-ley .camino-paso { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s cubic-bezier(.3, 1.3, .5, 1); }
  .js .camino-ley.visible .camino-paso { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * 110ms); }
  .js .camino-ley.visible .camino-hoy .camino-punto { animation: latido 2.2s ease-out 2s infinite; }
}
@keyframes latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
                    100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--c) 0%, transparent); } }
.camino-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: .78rem; color: var(--tenue); }
.camino-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.camino-leyenda i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--c); }

/* Cascada de los arts. 3 y 4 (ADR 0038): de la partida mensual a lo que correspondía en el año. Lo que manda la ley,
   en el color de la serie «exigido»; lo recibido, en el de «pagado»; lo que falta, en rojo (la ley rige para 2025). */
.cascada { display: grid; gap: 18px; padding: 18px 18px 14px; }
.cascada-paso { display: grid; gap: 8px; }
.cascada-rotulo { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: .92rem; font-weight: 700; }
.cascada-rotulo b { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
                       background: var(--tinta); color: var(--fondo); font-size: .75rem; font-weight: 900; }
.cascada-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.cascada-fila.con-rotulo { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
.cascada-fila small { font-size: .8rem; color: var(--tenue); }
.cascada-fila .num { white-space: nowrap; font-weight: 700; }
.cascada-pista { display: block; height: 16px; border-radius: 4px; }
.cascada-pista.con-falta { border: 2px dashed var(--rojo); }
.cascada-barra { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--serie-2); }
.cascada-barra.recibido { background: var(--serie-1); }
.cascada-bimestres { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end;
                     height: 230px; padding-left: 4.5rem; }
/* El eje empieza en el piso (no en cero): su rótulo, a la izquierda */
.cascada-bimestres::before { content: attr(data-piso); position: absolute; left: 0; bottom: 61px; font-size: .72rem; color: var(--tenue);
                             transform: translateY(50%); }
.cascada-bim { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; height: 100%; text-align: center; font-size: .78rem; }
/* Cada bimestre: lo que manda la ley (naranja) y, al lado, lo recibido (azul) */
.cascada-par { align-self: end; display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; height: 100%; }
.cascada-columna { display: block; width: min(30px, 32%); height: var(--h); min-height: 3px; border-radius: 3px 3px 0 0; background: var(--serie-2); }
.cascada-columna.recibido { background: var(--serie-1); }
.cascada-montos { display: grid; gap: 1px; }
.cascada-montos .num:first-child { color: var(--serie-2); } .cascada-montos .num:last-child { color: var(--serie-1); }
.cascada-leyenda { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; font-size: .78rem; color: var(--tenue); }
.cascada-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cascada-leyenda i { width: 12px; height: 12px; border-radius: 2px; background: var(--serie-2); }
.cascada-leyenda i.recibido { background: var(--serie-1); }
.cascada-bim small { margin-top: 4px; color: var(--tenue); }
.cascada-bim .num { font-weight: 700; }
@media (max-width: 600px) {
  .cascada { padding: 14px 12px 12px; }
  .cascada-fila.con-rotulo { grid-template-columns: 5rem minmax(0, 1fr); }
  .cascada-fila.con-rotulo .num { grid-column: 2; }
  /* En celular, los bimestres van en filas: las dos columnas pasan a barras horizontales, una arriba de la otra */
  .cascada-bimestres { grid-template-columns: 1fr; height: auto; gap: 10px; padding-left: 0; }
  .cascada-bimestres::before { position: static; transform: none; padding-left: calc(3.6rem + 8px); }
  .cascada-bim { grid-template-columns: 3.6rem minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; gap: 8px; text-align: left; font-size: .8rem; }
  .cascada-par { align-self: center; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; height: auto; }
  .cascada-columna { width: var(--h); height: 7px; border-radius: 3px; }
  .cascada-montos { text-align: right; }
  .cascada-bim small { order: -1; margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  details[open] .cascada-paso { animation: cascada-entra .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .45s); }
  details[open] .cascada-barra { animation: cascada-crece .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * .45s + .2s); }
  details[open] .cascada-paso .cascada-barra { animation-delay: inherit; }
  details[open] .cascada-columna { animation: cascada-sube .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.9s + .25s + var(--j) * .12s); }
  @media (max-width: 600px) { details[open] .cascada-columna { animation-name: cascada-crece; } }
}
@keyframes cascada-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes cascada-crece { from { width: 0; } }
@keyframes cascada-sube { from { height: 0; } }