/* Regulaciones argentinas: estilos de la página y de las fichas estáticas (r/<id>/).
   Comparte la aurora y la barra de cristal con la portada (portada.css) y, como las otras
   subpáginas, trae sus colores: el azul de noche de Optimizar PC para que la barra se vea
   igual que en la home, el celeste de la bandera como acento y un naranja para «nadie»,
   la víctima que no existe. Pages sirve este archivo 4 horas en caché: al cambiarlo,
   subir el ?v= en index.html y en ficha.mjs. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#edf1f8, #090e1b);
  --fg: light-dark(#162139, #f2f5fd);
  --muted: light-dark(#43516a, #bcc8dd);
  --accent: light-dark(#2e5aa8, #8ccbff);
  --sol: light-dark(#a86f00, #f6b40e);
  --fuego: light-dark(#b8432b, #ff9b7a);
  --line: light-dark(#c5cddd, #303c51);
  --cristal: light-dark(rgb(255 255 255 / 62%), rgb(23 34 55 / 62%));
  --canto: light-dark(rgb(255 255 255 / 90%), rgb(210 234 255 / 28%));
  --boton: linear-gradient(115deg, #c2c9ff, #9ce5e8);
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="oscuro"] { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  isolation: isolate;
  /* Los mismos valores de la portada: la aurora de portada.css los lee de un ancestro. */
  --aurora-ancho: .5; --aurora-alto: .7; --aurora-velocidad: 4; --aurora-blur: 0px;
  --aurora-luz: .4; --aurora-halo: 1.5; --aurora-giro: 0deg; --aurora-apertura: 3.45;
}
.liviano .aurora-rayo { display: none; }
.liviano .aurora-portada { filter: none; }
.liviano .aurora-portada::before, .liviano .aurora-portada::after { animation: none; }
.liviano .vidrio { backdrop-filter: none; -webkit-backdrop-filter: none; background: light-dark(#f4f7fc, #111a2c); }

.envoltorio { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
section { padding: 56px 0; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.15rem; letter-spacing: -.02em; }
p, li, dd { color: var(--muted); }
strong, b { color: var(--fg); }
a { color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .18em; }
.seccion-bajada { max-width: 62ch; margin: 12px 0 0; font-size: 1.02rem; }
.antetitulo, .rotulo {
  display: block;
  font: 600 .72rem/1.5 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.antetitulo { margin-bottom: 14px; }
.rotulo { font-weight: 500; letter-spacing: .14em; color: var(--muted); }

.vidrio {
  background: var(--cristal);
  border: 1px solid var(--canto);
  border-radius: 24px;
  box-shadow: 0 18px 40px -32px #0008;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  border: 1px solid rgb(255 255 255 / 65%); border-radius: 100px;
  background: var(--boton); color: #101b35;
  font: 700 .92rem/1 "Instrument Sans", sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 30px -12px #76b9eb80;
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
.boton:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px #76b9eb90; }
.boton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.boton-suave { background: transparent; color: var(--fg); border-color: var(--line); box-shadow: none; }
.boton-suave:hover { background: var(--cristal); box-shadow: none; }
.boton-chico {
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line);
  background: transparent; color: var(--fg); font: 600 .8rem/1 inherit; cursor: pointer; white-space: nowrap;
}
.boton-chico:hover { background: var(--cristal); border-color: var(--canto); }

.volver { display: inline-flex; align-items: center; gap: 7px; margin: 28px 0 0; color: var(--muted); font-size: .9rem; text-decoration: none; }
.volver::before { content: "←"; }
.volver:hover { color: var(--accent); }

/* ------------------------------------------------------------------ hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: stretch; padding: 34px 0 20px; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }
.hero h1 span { color: var(--fuego); }
.bajada { max-width: 56ch; margin: 18px 0 0; font-size: 1.06rem; }
.bajada + .bajada { margin-top: 12px; }
.lema { color: var(--fg); font-weight: 700; letter-spacing: -.01em; }
.buscador { display: flex; margin-top: 26px; padding: 6px 6px 6px 18px; gap: 8px; align-items: center; border-radius: 100px; }
.buscador svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: 500 1.05rem/1 inherit; padding: 12px 0; outline: none; }
.buscador input::placeholder { color: var(--muted); }
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador .boton { min-height: 44px; padding: 0 18px; }
.pistas { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; align-items: center; font-size: .85rem; }
.pista { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 100px; padding: 5px 11px; font: 500 .8rem/1 inherit; cursor: pointer; }
.pista:hover { color: var(--fg); border-style: solid; }

.escena { position: relative; min-height: 440px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--cristal) url(/regulacionesargentinas/escena.jpg?v=1) center / cover no-repeat; }
.hud { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font: 500 .68rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); position: relative; z-index: 2; width: max-content; max-width: 100%; }
/* Sobre la escena el tablero y el pie llevan su propio vidrio: si no, las cadenas los tapan. */
.hud, .pie-escena { padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hud b { color: var(--fg); font-weight: 600; }
.escena-lienzo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 1; touch-action: pan-y; }
.escena-tip {
  position: absolute; left: 0; top: 0; z-index: 3; max-width: 46%; padding: 7px 11px; border-radius: 12px; pointer-events: none;
  background: var(--cristal); border: 1px solid var(--canto); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--fg); font-size: .8rem; line-height: 1.3;
}
.escena .pie-escena { position: relative; z-index: 2; margin: 0; font-size: .82rem; width: max-content; max-width: 100%; }

/* El mapa con los rubros alrededor, como un marco. */
.mapa-marco { display: grid; grid-template: "a a a" auto "i m d" 1fr "b b b" auto / auto 1fr auto; gap: 8px; padding: 10px; min-height: 520px; }
.marco { display: flex; justify-content: space-around; gap: 6px; }
.marco.arriba { grid-area: a; } .marco.abajo { grid-area: b; }
.marco.izquierda { grid-area: i; flex-direction: column; } .marco.derecha { grid-area: d; flex-direction: column; }
.mapa-caja { grid-area: m; position: relative; min-height: 0; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--bg) 35%, transparent); }
.mapa-caja .hud { position: absolute; left: 10px; top: 10px; }
.mapa-caja .pie-escena { position: absolute; left: 10px; bottom: 10px; z-index: 2; }
.mapa-botones { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: 6px; }
/* El mapa plano (mapa.svg, lo escribe el generador) para teléfonos chicos o sin WebGL: sin él la
   portada quedaba con un recuadro vacío y tres botones de zoom que no hacían nada. */
.mapa-caja.plano { background: url(mapa.svg?v=1) center / contain no-repeat content-box, color-mix(in srgb, var(--bg) 35%, transparent); padding: 40px 14px; }
.mapa-caja:not(.viva) .mapa-botones { display: none; }
.mapa-botones button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--canto); background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--fg); font: 600 1.15rem/1 inherit; cursor: pointer; display: grid; place-items: center; }
.mapa-botones button:hover { border-color: var(--accent); }
.mapa-botones svg { width: 18px; height: 18px; }
.glifo { position: relative; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--cristal); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: border-color .2s, background .2s; }
.glifo:hover, .glifo:focus-visible { border-color: var(--fuego); outline: none; }
.glifo[aria-pressed="true"] { border-color: var(--fuego); background: color-mix(in srgb, var(--fuego) 24%, transparent); }
.glifo::after { content: attr(data-nombre); position: absolute; z-index: 5; white-space: nowrap; padding: 5px 9px; border-radius: 8px; background: var(--bg); border: 1px solid var(--canto); color: var(--fg); font: 600 .75rem/1.2 "Instrument Sans", sans-serif; opacity: 0; pointer-events: none; transition: opacity .15s; }
.glifo:hover::after, .glifo:focus-visible::after { opacity: 1; }
.arriba .glifo::after { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.abajo .glifo::after { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.izquierda .glifo::after { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.derecha .glifo::after { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
#rubros .escena { min-height: 480px; margin-top: 26px; }
/* La foto es solo para mientras carga: con la escena viva quedaba una bandera fantasma atrás. */
.escena.viva { background-image: none; }

/* ------------------------------------------------------------------ ranking */
.ranking-cabeza { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; }
.filtros select {
  appearance: none; -webkit-appearance: none; max-width: 240px;
  border: 1px solid var(--line); background: var(--cristal); color: var(--fg); border-radius: 100px;
  padding: 10px 36px 10px 14px; font: 500 .85rem/1.2 inherit; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ccbff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.tabs { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 4px; border-radius: 100px; margin-bottom: 16px; }
.tab { border: 0; background: transparent; color: var(--muted); border-radius: 100px; padding: 9px 15px; font: 600 .85rem/1 inherit; cursor: pointer; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.pendiente { padding: 12px 16px; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; font-size: .9rem; }
.pendiente p { margin: 0; }
.pendiente form { display: flex; gap: 8px; flex-wrap: wrap; }
.pendiente input { border: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: 100px; padding: 6px 12px; font: inherit; font-size: .85rem; width: 220px; max-width: 100%; }
.campo-correo { display: grid; gap: 6px; margin-top: 18px; }
.campo-correo span { font: 600 .66rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.campo-correo input { border: 1px solid var(--line); background: var(--cristal); color: var(--fg); border-radius: 14px; padding: 12px 14px; font: 500 1rem/1.2 inherit; }
.campo-correo input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .92rem; color: var(--muted); cursor: pointer; }
.opcion input { margin-top: 4px; accent-color: var(--fuego); }
#entrar h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); padding-right: 40px; }
#entrar-que { margin: 12px 0 0; }
#entrar form .boton { margin-top: 18px; }
.campo-correo select, .campo-correo textarea { border: 1px solid var(--line); background: var(--cristal); color: var(--fg); border-radius: 14px; padding: 12px 14px; font: 500 1rem/1.3 inherit; }
.campo-correo textarea { resize: vertical; }
.prop-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.parecidas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.parecidas:empty { display: none; }
.parecidas li { padding: 8px 12px; border-radius: 12px; background: var(--cristal); }
.parecidas span { color: var(--muted); font-size: .8rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#proponer form .boton { margin-top: 18px; }
.ficha-conteo { font-size: .85rem; color: var(--muted); align-self: center; }
.resultado { margin: 0 0 14px; font-size: .95rem; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: fila; }
.reg {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 290px); gap: 14px 18px; align-items: center;
  padding: 12px 18px 12px 10px; border-radius: 18px; background: var(--cristal); border: 1px solid transparent;
  transition: border-color .2s;
}
.reg:hover, .reg:focus-within { border-color: var(--canto); }
.reg.recien { border-color: var(--fuego); }
.reg { will-change: transform; }
.reg.derogada { opacity: .78; }
.reg.derogada .criollo { text-decoration: line-through; text-decoration-color: var(--fuego); text-decoration-thickness: .12em; }
/* Las flechas en una píldora propia: son la acción principal y tienen que pesar más que
   cualquier otro botón de la fila. */
.voto { display: grid; justify-items: center; gap: 3px; padding: 4px; border-radius: 16px; background: light-dark(rgb(255 255 255 / 55%), rgb(9 14 27 / 55%)); border: 1px solid var(--canto); }
.flecha { width: 46px; height: 36px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.flecha svg { width: 24px; height: 24px; fill: currentColor; }
.flecha.arriba { color: var(--fuego); }
.flecha.arriba:hover:not([disabled]) { background: color-mix(in srgb, var(--fuego) 20%, transparent); transform: translateY(-1px); }
.flecha.abajo:hover:not([disabled]) { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); transform: translateY(1px); }
.flecha[disabled] { opacity: .3; cursor: default; }
.flecha.activa { background: var(--fuego); color: #1b1410; }
.conteo { font: 700 .82rem/1 var(--mono); color: var(--fg); }
.conteo:empty { display: none; }
.medidor { width: 34px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.medidor i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--fuego); }
.flecha-titulo { display: inline-block; width: .62em; height: .62em; margin: 0 .04em; background: var(--fuego); clip-path: polygon(50% 0, 100% 58%, 68% 58%, 68% 100%, 32% 100%, 32% 58%, 0 58%); vertical-align: -.02em; }
.como-votar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 14px; font-size: .82rem; }
.como-votar #mis-votos { margin-left: auto; }
#mis-votos[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.flechita { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; vertical-align: 1px; }
.flechita.arriba { border-bottom: 9px solid var(--fuego); }
.flechita.abajo { border-top: 9px solid var(--muted); }
.muestra-medidor { display: inline-block; width: 22px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--fuego) 60%, var(--line) 60%); vertical-align: 2px; }
.criollo { text-decoration: line-through; text-decoration-color: var(--fuego); text-decoration-thickness: .12em; }
.voto { display: grid; justify-items: center; gap: 2px; }
.flecha { width: 36px; height: 30px; border: 0; background: transparent; color: var(--muted); font-size: .9rem; cursor: pointer; border-radius: 10px; }
.flecha:hover:not([disabled]) { background: var(--cristal); color: var(--fg); }
.flecha[disabled] { opacity: .35; cursor: default; }
.flecha.activa { color: var(--fuego); }
.medidor { width: 30px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.medidor i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--fuego); }
.criollo { display: block; color: var(--fg); font-weight: 600; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.012em; text-decoration: none; }
.criollo:hover { color: var(--accent); }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; align-items: center; font-size: .78rem; }
.chip {
  display: inline-block; padding: 3px 9px; border-radius: 100px; border: 1px solid var(--line);
  font: 500 .68rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.chip.victima.nadie, .chip.victima.propio { color: var(--fuego); border-color: color-mix(in srgb, var(--fuego) 55%, transparent); }
.chip.estado.derogada { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.chip.estado.en_tramite { color: var(--sol); border-color: color-mix(in srgb, var(--sol) 55%, transparent); }
.chip.estado.suspendida, .chip.estado.restablecida { color: var(--sol); }
.costo { margin: 6px 0 0; font-size: .82rem; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pedir {
  padding: 3px 10px; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: transparent; color: var(--accent); font: 600 .68rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.pedir:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.norma-col { display: grid; gap: 3px; align-content: center; min-width: 0; padding-left: 18px; border-left: 1px solid var(--line); font-size: .8rem; }
.norma-titulo { color: var(--fg); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.norma-cita { font-family: var(--mono); font-size: .68rem; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.norma-leer { font-size: .78rem; text-decoration: none; width: max-content; }
.norma-leer:hover { text-decoration: underline; }
.ver-mas { margin: 18px auto 0; display: flex; }

/* ------------------------------------------------------------------ no victim, no crime */
.nadie-bloque { padding: 44px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.nadie-bloque h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.05em; line-height: .98; max-width: none; }
.nadie-bloque h2 span { color: var(--fuego); }
.nadie-bloque p { margin: 14px 0 0; }
.cifra-grande { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--fg); margin: 0; }
.cifra-grande + p { margin-top: 8px; }
.barra-victimas { display: flex; height: 14px; border-radius: 100px; overflow: hidden; gap: 2px; margin: 18px 0 12px; }
.tramo { display: block; min-width: 2px; }
.tramo.nadie, .muestra.nadie { background: var(--fuego); }
.tramo.propio, .muestra.propio { background: var(--sol); }
.tramo.terceros_remoto, .muestra.terceros_remoto { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.tramo.terceros, .muestra.terceros { background: var(--muted); }
.leyenda { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .85rem; }
.muestra { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.nota { font-size: .9rem; }

/* ------------------------------------------------------------------ rubros */
.rubros { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; margin-top: 26px; }
.rubro { display: grid; gap: 6px; padding: 18px; text-decoration: none; color: inherit; border-radius: 18px; transition: transform .2s, border-color .2s; align-content: start; }
.rubro:hover { transform: translateY(-2px); border-color: var(--accent); }
.rubro-nombre { font: 600 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.rubro-n { font-size: 1.9rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--fg); }
.rubro-top { font-size: .84rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rubro-barra { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 4px; }
.rubro-barra i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--fuego); }

/* ------------------------------------------------------------------ gráficos */
.graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.grafico-caja { margin: 0; padding: 20px 22px; min-width: 0; }
.grafico-caja.ancha { margin-top: 26px; }
.grafico-caja figcaption { font: 600 .7rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.grafico { width: 100%; height: auto; display: block; }
.grafico .barra { fill: var(--fuego); opacity: .9; }
.grafico .guia { stroke: var(--line); stroke-width: 1; }
.grafico .eje { font: 500 11px var(--mono); fill: var(--muted); }
.grafico .valor { font: 700 11px var(--mono); fill: var(--fg); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.grafico .linea { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: .55; stroke-linejoin: round; }
.grafico .linea.arg { stroke: var(--fuego); stroke-width: 3; opacity: 1; }
.grafico .valor.arg { fill: var(--fuego); }
.grafico .linea.contador { stroke: var(--accent); stroke-width: 3; opacity: 1; }
.grafico .valor.contador { fill: var(--accent); }
.grafico-caja .nota { margin: 12px 0 0; font-size: .85rem; }
.componentes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 24px; }
.componentes li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: .85rem; align-items: baseline; }
.componentes b { font-family: var(--mono); font-size: .8rem; }
.componentes i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; display: block; }
.componentes i::after { content: ""; display: block; height: 100%; width: var(--p); background: var(--fuego); }

/* ------------------------------------------------------------------ cómo se pide, aportar, pie */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.paso { padding: 22px; }
.paso .num { display: block; font: 600 .7rem/1 var(--mono); letter-spacing: .14em; color: var(--accent); margin-bottom: 12px; }
.paso p { margin: 8px 0 0; font-size: .95rem; }
.aportar { padding: 34px 40px; display: flex; gap: 30px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.aportar p { margin: 10px 0 0; max-width: 56ch; }
.pie { border-top: 1px solid var(--line); padding: 32px 0 44px; color: var(--muted); font-size: .94rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }

/* ------------------------------------------------------------------ ficha y diálogos */
dialog.vidrio { width: min(780px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto; padding: 0; color: var(--fg); overflow: hidden; border-radius: 24px; }
dialog::backdrop { background: rgb(5 9 20 / 55%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dialogo-cuerpo { position: relative; overflow: auto; max-height: calc(100vh - 48px); padding: 28px 30px 26px; }
.cerrar { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--cristal); color: var(--fg); cursor: pointer; font-size: 1rem; z-index: 2; }
.cerrar:hover { border-color: var(--canto); }
.ficha-cabeza .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 40px 14px 0; }
.criollo-grande { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.035em; line-height: 1.12; padding-right: 40px; }
.criollo-grande.tachada { text-decoration: line-through; text-decoration-color: var(--fuego); text-decoration-thickness: .1em; }
.ficha-titulo { margin: 10px 0 0; font-size: .95rem; }
.ficha-titulo .norma { font-family: var(--mono); font-size: .78rem; }
.ficha-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 22px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.ficha-datos dt { font: 600 .66rem/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ficha-datos dd { margin: 0; }
.fuentes { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fuentes a { display: inline-block; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--line); font-size: .8rem; text-decoration: none; }
.fuentes a:hover { border-color: var(--accent); }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.voto-ficha { display: flex; gap: 6px; }
.voto-ficha .boton { min-height: 44px; padding: 0 16px; }
.pagina-ficha main { padding-bottom: 40px; }
/* Migas, listas por rubro, lugar y estado, y las relacionadas al pie de cada ficha. */
.migas { margin: 28px 0 0; color: var(--muted); font-size: .9rem; }
.migas a { color: inherit; text-decoration: none; }
.migas a:hover { color: var(--accent); }
.lista-cabeza { margin: 22px 0 18px; }
.lista-cabeza h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
.lista-cabeza p { max-width: 64ch; margin: 12px 0 0; }
.lista-cabeza a, .otras a { color: var(--accent); }
.lista-plana { padding: 18px 24px; margin-top: 16px; }
.lista-plana h2 { font-size: 1.2rem; margin: 6px 0 8px; }
.lista-plana ul { list-style: none; margin: 0; padding: 0; }
.lista-plana li { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid var(--line); }
.lista-plana li:first-child { border-top: 0; }
.lista-plana li a { color: var(--fg); font-weight: 600; text-decoration: none; }
.lista-plana li a:hover { color: var(--accent); }
.lista-plana li span { font-size: .85rem; }
.lista-plana li.tachada a { text-decoration: line-through; text-decoration-color: var(--fuego); }
.otras { display: grid; gap: 10px; margin: 26px 0 10px; font-size: .9rem; }
.otras p { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; }
.otras b { width: 100%; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.otras a { text-decoration: none; }
.otras a[aria-current] { color: var(--fg); font-weight: 700; }
.pagina-ficha .ficha { padding: 30px 32px; margin-top: 20px; }

.caminos { display: grid; gap: 14px; margin-top: 18px; }
.camino { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); }
.camino h3 { margin-bottom: 4px; }
.camino p { margin: 0; font-size: .92rem; }
.camino .boton { margin-top: 12px; }
.campos { display: grid; gap: 8px; margin: 14px 0 0; }
.campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--cristal); }
.campo b { display: block; font: 600 .64rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.campo span { font-size: .9rem; color: var(--fg); }
.aviso { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); font-size: .9rem; margin: 12px 0 0; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 100px; font-size: .9rem; color: var(--fg); transition: .25s; pointer-events: none; z-index: 20; max-width: calc(100vw - 32px); }
.toast.ver { transform: translate(-50%, 0); opacity: 1; }

.js .revela { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .revela.visto { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .envoltorio { width: min(1120px, calc(100% - 32px)); }
  section { padding: 40px 0; }
  .hero { grid-template-columns: 1fr; gap: 26px; padding-top: 22px; }
  .escena { min-height: 340px; }
  .mapa-marco { min-height: 460px; }
  .nadie-bloque { grid-template-columns: 1fr; padding: 28px 22px; gap: 26px; }
  .pasos, .graficos { grid-template-columns: 1fr; }
  .grafico-caja { padding: 16px 14px; }
  .reg { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; padding: 10px 12px 12px 6px; }
  .norma-col { grid-column: 2; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .ficha-datos { grid-template-columns: 1fr; gap: 2px 0; }
  .ficha-datos dd { margin-bottom: 12px; }
  .dialogo-cuerpo { padding: 22px 18px 20px; }
  .aportar { padding: 26px 22px; }
  .prop-fila { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .revela { opacity: 1; transform: none; transition: none; }
  .aurora-portada::before, .aurora-portada::after, .aurora-rayo { animation: none; }
}