/* Demostración (/demostracion/): el plano, los vehículos, los subtítulos y los controles, y las estimaciones de
   «Hoy, en cifras» (sus tablas y sus fuentes). Se carga solo en esa página, después de site.css, y usa sus tokens (--ink, --bg, --signo...) fuera del
   escenario. El escenario es como una pantalla dentro de la página: cada escena tiene su paleta, la misma con
   el tema claro y el oscuro del sitio. «Hoy» va en negro y rojo (contaminación y emergencia): el plano casi
   negro, las calles grises y en rojo las camionetas, sus estelas, la congestión y la doble fila. Sus grises son
   neutros, sin el malva de la paleta anterior de la marca ni el azul de la actual, que es el de «Con DOD».
   «Con DOD» va en celeste y blanco (limpio): el plano blanco, el agua celeste y en azul las camionetas eléctricas,
   sus estelas, los microdepósitos y las bicicletas. Las camionetas y sus estelas van en Azul Río, el acento de la
   marca que usa la página alrededor con el tema claro (los botones, el + del subtítulo): el azul que tenían antes
   (#1565C0) era casi igual y, al lado de los botones, parecían dos azules que no coincidían. El + de los
   microdepósitos va en un azul noche del mismo tono, a la misma distancia de las camionetas que antes, y las
   bicicletas, en un azul más claro.
   En las dos paletas, los nombres llegan a 4,5:1 contra el fondo sobre el que se dibujan, y los símbolos, las
   autopistas, los límites de las zonas y el contorno, a 3:1 (WCAG). Las camionetas rojas y las azules nunca
   comparten un panel: en el cierre cada escena tiene el suyo, con su rótulo, y la leyenda las nombra. */
:root {
  /* «Hoy»: grises neutros, sin matiz (el azul es el de «Con DOD») */
  --hoy-agua: #070707;
  --hoy-tierra: #131313;
  --hoy-ciudad: #1D1D1D;
  --hoy-limite: #2A2A2A;
  --hoy-zona: #797979;        /* 3,9:1 sobre la Ciudad */
  --hoy-comuna: #2B2B2B;
  --hoy-avenida: #383838;
  --hoy-autopista: #686868;   /* 3,3:1 sobre la tierra */
  --hoy-ruta: #3B3B3B;
  --hoy-borde: #D5D5D5;
  --hoy-texto: #B1B1B1;       /* 7,9:1 sobre la Ciudad */
  --hoy-texto-suave: #A3A3A3; /* los partidos: 7,4:1 sobre la tierra */
  --hoy-texto-agua: #9B9B9B;  /* 7,2:1 sobre el agua */
  --hoy-tinta: #F2F2F2;       /* los depósitos y los nombres fuertes */
  --hoy-fondo: #0D0D0D;       /* la leyenda y el rótulo sobre el plano */
  --hoy-texto-tenue: #878787; /* en la leyenda, los nombres de la otra escena: 5,4:1 sobre el fondo */
  /* «Con DOD» */
  --dod-agua: #BEE3F8;
  --dod-tierra: #EEF5FA;
  --dod-ciudad: #FFFFFF;
  --dod-limite: #D2E1EB;
  --dod-zona: #6E8EA4;        /* 3,5:1 sobre la Ciudad */
  --dod-comuna: #E5EEF4;
  --dod-avenida: #DCE7EF;
  --dod-autopista: #6F8CA2;   /* 3,2:1 sobre la tierra */
  --dod-ruta: #C3D5E1;
  --dod-borde: #0F3B5F;
  --dod-texto: #3E5A6E;       /* 7,3:1 sobre la Ciudad */
  --dod-texto-suave: #4C6A7F; /* 5,2:1 sobre la tierra */
  --dod-texto-agua: #285774;  /* 5,7:1 sobre el agua */
  --dod-tinta: #0B2E4A;
  --dod-fondo: #FFFFFF;
  --dod-texto-tenue: #587186; /* 5,1:1 sobre el fondo */
  /* Los vehículos (no cambian con la paleta). demostracion.js lee --c-rojo y --c-azul para pintar las estelas
     y la congestión. */
  --c-rojo: #FF3B30;          /* las camionetas de hoy, sus estelas y la congestión: 4,8:1 sobre la Ciudad de
                                 «Hoy» y 3,5:1 sobre blanco (la leyenda, la impresión) */
  --c-doble: #D32F2F;         /* el aviso de doble fila: letra blanca a 5:1, y 3,4:1 sobre la Ciudad */
  --c-doble-borde: #F2F2F2;   /* su borde: 15:1 sobre la Ciudad de «Hoy», así se recorta también con daltonismo */
  --c-azul: #1D5C99;          /* las camionetas eléctricas y sus estelas, en Azul Río: 6,9:1 sobre blanco y 5,1:1
                                 sobre el agua */
  --c-micro: #034279;         /* el pin de los microdepósitos: un azul noche del tono de Azul Río, 10,2:1 sobre blanco
                                 y a 1,5:1 de las camionetas (ΔE 0,09 en OKLab), como estaba antes #0D47A1 de
                                 #1565C0. #0D47A1, casi igual a Azul Río, parecía el + del logo de Metaurbis en otro azul */
  --c-bici: #1E88E5;          /* las bicicletas y los anillos de las entregas: 3,7:1 sobre blanco; más clara que
                                 Azul Río (1,9:1), así se distingue sin parecer el mismo azul */
}

/* La paleta de la pantalla (la escena, el plano y el subtítulo): demostracion.js pasa de «Hoy» (--mezcla: 0) a
   «Con DOD» (1) en la transición entre escenas. El panel «Hoy» del cierre queda siempre en 0. Cada token se
   declara en la pantalla, en el escenario y otra vez en cada panel, para que se calcule con el --mezcla de cada uno. */
.demo-pantalla, .demo-escenario, .demo-panel {
  --m-agua: color-mix(in oklab, var(--dod-agua) calc(var(--mezcla, 0) * 100%), var(--hoy-agua));
  --m-tierra: color-mix(in oklab, var(--dod-tierra) calc(var(--mezcla, 0) * 100%), var(--hoy-tierra));
  --m-ciudad: color-mix(in oklab, var(--dod-ciudad) calc(var(--mezcla, 0) * 100%), var(--hoy-ciudad));
  --m-limite: color-mix(in oklab, var(--dod-limite) calc(var(--mezcla, 0) * 100%), var(--hoy-limite));
  --m-zona: color-mix(in oklab, var(--dod-zona) calc(var(--mezcla, 0) * 100%), var(--hoy-zona));
  --m-comuna: color-mix(in oklab, var(--dod-comuna) calc(var(--mezcla, 0) * 100%), var(--hoy-comuna));
  --m-avenida: color-mix(in oklab, var(--dod-avenida) calc(var(--mezcla, 0) * 100%), var(--hoy-avenida));
  --m-autopista: color-mix(in oklab, var(--dod-autopista) calc(var(--mezcla, 0) * 100%), var(--hoy-autopista));
  --m-ruta: color-mix(in oklab, var(--dod-ruta) calc(var(--mezcla, 0) * 100%), var(--hoy-ruta));
  --m-borde: color-mix(in oklab, var(--dod-borde) calc(var(--mezcla, 0) * 100%), var(--hoy-borde));
  --m-texto: color-mix(in oklab, var(--dod-texto) calc(var(--mezcla, 0) * 100%), var(--hoy-texto));
  --m-texto-suave: color-mix(in oklab, var(--dod-texto-suave) calc(var(--mezcla, 0) * 100%), var(--hoy-texto-suave));
  --m-texto-agua: color-mix(in oklab, var(--dod-texto-agua) calc(var(--mezcla, 0) * 100%), var(--hoy-texto-agua));
  --m-tinta: color-mix(in oklab, var(--dod-tinta) calc(var(--mezcla, 0) * 100%), var(--hoy-tinta));
  --m-fondo: color-mix(in oklab, var(--dod-fondo) calc(var(--mezcla, 0) * 100%), var(--hoy-fondo));
}
.demo-panel[data-panel="hoy"] { --mezcla: 0; }
/* Sin color-mix() (navegadores de antes de 2023), la paleta cambia de golpe: demostracion.js pone
   data-paleta="dod" en la pantalla cuando la mezcla pasa de la mitad. */
@supports not (color: color-mix(in oklab, red 50%, blue)) {
  .demo-pantalla, .demo-escenario, .demo-panel {
    --m-agua: var(--hoy-agua); --m-tierra: var(--hoy-tierra); --m-ciudad: var(--hoy-ciudad); --m-limite: var(--hoy-limite);
    --m-zona: var(--hoy-zona); --m-comuna: var(--hoy-comuna); --m-avenida: var(--hoy-avenida); --m-autopista: var(--hoy-autopista);
    --m-ruta: var(--hoy-ruta); --m-borde: var(--hoy-borde); --m-texto: var(--hoy-texto); --m-texto-suave: var(--hoy-texto-suave);
    --m-texto-agua: var(--hoy-texto-agua); --m-tinta: var(--hoy-tinta); --m-fondo: var(--hoy-fondo);
  }
  .demo-pantalla[data-paleta="dod"], .demo-pantalla[data-paleta="dod"] .demo-escenario, .demo-pantalla[data-paleta="dod"] .demo-panel[data-panel="principal"] {
    --m-agua: var(--dod-agua); --m-tierra: var(--dod-tierra); --m-ciudad: var(--dod-ciudad); --m-limite: var(--dod-limite);
    --m-zona: var(--dod-zona); --m-comuna: var(--dod-comuna); --m-avenida: var(--dod-avenida); --m-autopista: var(--dod-autopista);
    --m-ruta: var(--dod-ruta); --m-borde: var(--dod-borde); --m-texto: var(--dod-texto); --m-texto-suave: var(--dod-texto-suave);
    --m-texto-agua: var(--dod-texto-agua); --m-tinta: var(--dod-tinta); --m-fondo: var(--dod-fondo);
  }
}

/* La sección del menú de una subpágina (aria-current="true"), igual que la de la página abierta */
.nav-main a[aria-current="true"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.menu-panel a[aria-current="true"] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* Portada */
.demo-portada { padding-block: var(--renglon) var(--section); }
.demo-cabeza { display: flex; flex-direction: column; gap: calc(var(--renglon) * 0.6); }
/* En pantallas anchas la bajada va a la derecha del título, para que el escenario entre entero en la pantalla */
@media (min-width: 1024px) {
  .demo-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21em); column-gap: calc(var(--calle) * 2); row-gap: calc(var(--renglon) * 0.6); align-items: end; }
  .demo-cabeza > .membrete { grid-column: 1 / -1; }
  .demo-cabeza > h1 { grid-column: 1; }
  .demo-cabeza > .lead { grid-column: 2; padding-bottom: 0.2em; }
}
/* El logo de DOD encabeza la página y lleva a /dod/; más chico que en la carátula del proyecto, para que el título siga siendo «Demostración» */
.demo-logo { margin-bottom: 0.25rem; }
/* El ancho va en el enlace y no en el SVG, así el contorno del foco abraza el logo */
.demo-logo a { display: block; width: min(100%, 18rem); }
.demo-logo .logo-dod { width: 100%; margin-bottom: 0; }

/* La figura: el escenario entra entero en la pantalla junto con la barra y el subtítulo (--demo-reserva es
   lo que ocupan la cabecera, la banda de la escena y la del subtítulo, con dos renglones). Su proporción va de 1:1 (celular) a
   16:9 (escritorio), las que cubre el plano sin mostrar su borde.
   Nada de la figura sirve de ancla de desplazamiento (overflow-anchor): la animación cambia sus textos y
   símbolos sin cambiar su alto, pero si Chrome eligiera uno como ancla la página saltaría (en el cierre, el
   número de la escena se vacía y su caja baja hasta la línea de base: 22 px). */
.demo {
  --demo-proporcion: 1;
  --demo-reserva: 14rem;
  overflow-anchor: none;
  margin: var(--renglon) 0 0;
  max-width: max(18rem, calc((100svh - var(--demo-reserva)) * var(--demo-proporcion)));
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 84px);
}
@media (min-width: 600px) { .demo { --demo-proporcion: 1.3333; } }
@media (min-width: 1024px) { .demo { --demo-proporcion: 1.7778; } }
/* En una pantalla apaisada baja (un celular de costado) la barra, el escenario y el subtítulo no entran juntos:
   el escenario toma, en 16:9, el alto que deja la cabecera. Si no, quedaría de 18rem, un tercio del ancho.
   La animación arranca entonces con el escenario solo (demostracion.js). */
@media (min-width: 600px) and (max-height: 500px) { .demo { --demo-proporcion: 1.7778; --demo-reserva: 6rem; } }

/* La pantalla: arriba del plano, una banda con la escena y los contadores; debajo, otra con el subtítulo. Las
   bandas tienen el color de la tierra del plano, así la escena, el plano y el subtítulo se leen como una sola
   pieza, la animación, distinta de la página. Sus textos cambian de color de golpe a mitad de la transición
   (data-paleta): si se mezclaran como el fondo, a mitad de camino quedarían grises sobre gris. */
.demo-pantalla { position: relative; background: var(--m-tierra); color: var(--banda-tinta); --banda-tinta: var(--hoy-tinta); --banda-texto: var(--hoy-texto); }
.demo-pantalla[data-paleta="dod"] { --banda-tinta: var(--dod-tinta); --banda-texto: var(--dod-texto); }
/* Banda de arriba: la escena, con su número, y los contadores */
.demo-barra { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; padding: 0.55rem 0.9rem 0.6rem; }
.demo-escena { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5em; align-items: baseline; font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }
.demo-escena .n { color: var(--banda-texto); }
.demo-escena .n:empty { display: none; }
.demo-cuentas { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
/* Hasta 1024 px los contadores van siempre en su renglón: así la barra no cambia de alto con la escena */
@media (max-width: 1023px) { .demo-cuentas { flex-basis: 100%; } }
/* Sin JavaScript los contadores no se muestran, pero su renglón queda reservado: así, cuando la animación
   los muestra, el escenario no se corre (en pantallas angostas van en su propio renglón, arriba del plano) */
.demo-cuentas[hidden] { visibility: hidden; }
.demo-cuenta { font-size: var(--t-ui); font-weight: 500; color: var(--banda-texto); white-space: nowrap; }
.demo-cifra { display: inline-block; min-width: 1.3em; margin-right: 0.15em; text-align: right; font-size: var(--t-h3); font-weight: 600; color: var(--banda-tinta); font-variant-numeric: tabular-nums lining-nums; }
.demo.es-cierre .demo-cuentas { visibility: hidden; }
@media (max-width: 599px) {
  .demo-cuentas { gap: 0.25rem 1rem; }
  .demo-cuenta { font-size: var(--t-nota); }
  .demo-cifra { min-width: 0; text-align: left; font-size: 1.25rem; }
  .demo-cuenta-resto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Escenario: un panel principal y, en el cierre, el de «Hoy» a su izquierda */
.demo-escenario { position: relative; overflow: hidden; aspect-ratio: var(--demo-proporcion); background: var(--m-agua); container-type: inline-size; }
.demo-panel { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; overflow: hidden; background: var(--m-agua); }
.demo-panel[hidden] { display: none; }
.demo-panel[data-panel="principal"] { z-index: 1; }
.demo-panel[data-panel="hoy"] { width: 50%; }
.demo.es-cierre .demo-panel[data-panel="principal"] { border-left: 2px solid var(--bg); }
.demo-mapa, .demo-capa, .demo-lienzo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; display: block; overflow: hidden; }
.demo-capa, .demo-lienzo { pointer-events: none; }
.demo-capa { will-change: transform; }

/* El plano. Las reglas usan clases solas, sin ancestros: el panel «Hoy» del cierre reusa el plano con
   <use>, y los clones viven en un árbol aparte donde un selector como .demo-mapa .m-tierra no llega.
   vector-effect hace que las líneas no se engrosen con el zoom. */
.m-base path { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.m-tierra { fill: var(--m-tierra); stroke: none; }
.m-limites { fill: none; stroke: var(--m-limite); stroke-width: 1; }
.m-ciudad { fill: var(--m-ciudad); stroke: none; }
.m-avenidas { fill: none; stroke: var(--m-avenida); stroke-width: 1; }
.m-comunas { fill: none; stroke: var(--m-comuna); stroke-width: 1; }
/* Los límites de las zonas, más marcados que las calles y las autopistas y con trazo discontinuo, como un límite
   (cada borde va una sola vez en el path, así la discontinuidad no se superpone consigo misma) */
.m-zonas path { fill: none; stroke: var(--m-zona); stroke-width: 1.5; stroke-dasharray: 5 3; stroke-linecap: butt; }
.m-diques { fill: var(--m-agua); stroke: none; }
/* El agua que el límite del IGN cuenta como Ciudad en la boca del Riachuelo y la Dársena Sur. El trazo del color
   del agua tapa la mitad de los límites de las zonas que caen sobre ella. */
.m-agua-ciudad { fill: var(--m-agua); fill-rule: evenodd; stroke: var(--m-agua); stroke-width: 2; }
/* El Riachuelo: debajo del contorno en la vista grande y, en la de la Ciudad, otra vez encima y más ancho
   (.m-rio-cerca, que demostracion.js muestra con el zoom), porque el límite de la Ciudad va por su cauce */
.m-riachuelo { fill: none; stroke: var(--m-agua); stroke-width: var(--m-rio, 2.5px); vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.m-rio-cerca { --m-rio: 5px; }
/* De cerca, la orilla de la boca del Riachuelo, que la banda no alcanza a tapar en la Vuelta de Rocha */
.m-costa-rio { fill: none; stroke: var(--m-agua); stroke-width: 3; }
.m-autopista { fill: none; stroke: var(--m-autopista); stroke-width: 1.25; }
.m-ruta { fill: none; stroke: var(--m-ruta); stroke-width: 1; }
.m-borde { fill: none; stroke: var(--m-borde); stroke-width: 1.5; }
/* La línea que une «Ciudad de Buenos Aires», sobre el agua, con la Ciudad */
.m-guia { fill: none; stroke: var(--m-tinta); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Nombres del plano, con un halo del color del fondo para leerse sobre las líneas */
.m-et text {
  font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 0.01em;
  fill: var(--m-texto); stroke: var(--m-tierra); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke;
  text-anchor: middle; dominant-baseline: central;
}
.m-et-ciudad text { font-size: 13px; font-weight: 600; fill: var(--m-tinta); stroke: var(--m-agua); text-anchor: start; }
.m-et-agua text { font-size: 11.5px; letter-spacing: 0.08em; fill: var(--m-texto-agua); stroke: var(--m-agua); }
.m-et-partido text { font-size: 10.5px; font-weight: 400; fill: var(--m-texto-suave); }
.m-et-zona text { font-size: 12px; font-weight: 600; fill: var(--m-texto); stroke: var(--m-ciudad); }
/* En un escenario angosto no entran los nombres de los partidos ni los de las autopistas */
@container (max-width: 759px) { .m-et-partido { display: none; } }
@container (max-width: 599px) { .m-et-autopista { display: none; } }

/* Símbolos: dibujados en píxeles (la animación los escala), y los mismos en la leyenda. Los vehículos llevan un
   borde del color de la Ciudad, que los separa de las estelas y de la congestión que pasan por debajo. */
.c-hoy { fill: var(--c-rojo); stroke: var(--m-ciudad); stroke-width: 1; }
.c-dod { fill: var(--c-azul); stroke: var(--m-ciudad); stroke-width: 1; }
.c-bici { fill: var(--c-bici); stroke: var(--m-ciudad); stroke-width: 1.5; }
.c-deposito { fill: var(--m-tinta); stroke: var(--m-tierra); stroke-width: 1.5; }
.c-micro { fill: var(--c-micro); stroke: var(--m-ciudad); stroke-width: 2.5; stroke-linejoin: round; paint-order: stroke; }
/* El recorrido dentro del pin, del color de la Ciudad de DOD (la única escena con microdepósitos) */
.c-micro .c-micro-ruta { fill: none; stroke: var(--dod-ciudad); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.c-micro .c-micro-parada { fill: var(--dod-ciudad); stroke: none; }
.c-anillo { fill: none; stroke: var(--c-bici); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.c-anillo-hoy { stroke: var(--c-rojo); stroke-width: 2; }
.c-nombre text {
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  fill: var(--m-tinta); stroke: var(--m-tierra); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke;
  dominant-baseline: central;
}
/* El aviso de doble fila, junto a la camioneta detenida: largo («Doble fila») y corto («!») en las mitades
   angostas del cierre (demostracion.js pone .dobles-cortos en su grupo y elige de qué lado de la camioneta va).
   Su borde claro, de 1 px por fuera, lo recorta de la congestión que tiene debajo. */
.c-doble-fondo { fill: var(--c-doble); stroke: var(--c-doble-borde); stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
.c-doble-texto { font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; fill: #FFFFFF; text-anchor: middle; dominant-baseline: central; }
.c-doble-signo { fill: #FFFFFF; }
.c-doble-corta, .dobles-cortos .c-doble-larga { display: none; }
.dobles-cortos .c-doble-corta { display: inline; }
/* La congestión de la leyenda, con su halo como en el plano (ahí la pinta demostracion.js en el lienzo) */
.c-congestion, .c-congestion-halo { fill: none; stroke: var(--c-rojo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-congestion-halo { stroke-width: 8; stroke-opacity: 0.3; }

/* Rótulos de los dos paneles del cierre, cada uno con la paleta de su escena y la cifra en su color */
.demo-rotulo {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; margin: 0;
  padding: 0.3rem 0.6rem 0.4rem; background: var(--m-fondo); color: var(--m-texto);
  font-size: var(--t-nota); font-weight: 500; line-height: 1.3; opacity: 0; pointer-events: none;
}
.demo-rotulo-escena { display: block; color: var(--m-tinta); font-weight: 600; }
.demo-rotulo-cifra { font-size: 1.375rem; font-weight: 600; color: var(--c-azul); font-variant-numeric: tabular-nums lining-nums; }
.demo-panel[data-panel="hoy"] .demo-rotulo-cifra { color: var(--c-rojo); }
@container (max-width: 599px) {
  .demo-rotulo { top: 0.4rem; left: 0.4rem; padding: 0.2rem 0.4rem 0.25rem; font-size: 0.75rem; line-height: 1.2; }
  .demo-rotulo-cifra { font-size: 1rem; }
}

/* Banda de abajo: el subtítulo, que narra la animación. Cuando cambia, el texto nuevo sube un poco mientras
   aparece (demostracion.js), para que se note. La raya de 2 px y el + solo aparecen en el resultado, el cierre,
   que tiene la paleta de «Con DOD»: el + va en Azul Río, que sobre esa banda clara llega a 6,3:1. */
.demo-subtitulo { display: grid; grid-template-columns: 0 minmax(0, 1fr); align-items: baseline; padding: 0.65rem 0.9rem 0.8rem; border-top: 2px solid transparent; font-size: var(--t-bajada); font-weight: 500; line-height: 1.4; }
/* Una medida ancha, como la de un subtítulo en una pantalla: en escritorio ninguno pasa de dos renglones */
.demo-subtitulo > p { max-width: 46em; }
.demo-subtitulo > .mas { visibility: hidden; width: 0.9em; height: 0.9em; fill: var(--c-azul); }
.demo-subtitulo.es-resultado { grid-template-columns: 1.6em minmax(0, 1fr); border-top-color: var(--banda-tinta); }
.demo-subtitulo.es-resultado > .mas { visibility: visible; }

/* Debajo de la pantalla: los controles y la leyenda, alineados con el texto de la página */
.demo-pie { position: relative; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
@media (min-width: 760px) { .demo-pie, .demo-notas { margin-left: var(--signo); } }

/* Controles y leyenda, en una fila que se parte en las pantallas angostas */
.demo-mandos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; }
.demo-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.demo-controles[hidden] { display: none; }
.demo-reproducir { min-width: 8.75rem; }
.demo-ic { width: 0.95em; height: 0.95em; fill: currentColor; flex: none; }
.demo-ic-pausa { display: none; }
.demo.reproduciendo .demo-ic-pausa { display: inline; }
.demo.reproduciendo .demo-ic-reproducir { display: none; }
.demo-escenas { display: inline-flex; align-items: center; gap: 0.15rem; }
.demo-escenas-titulo { margin-right: 0.35rem; font-size: var(--t-nota); color: var(--muted); }
.demo-escenas button {
  min-height: 44px; padding: 0 0.55rem; background: none; border: 0; border-radius: 0; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--muted);
}
.demo-escenas button:hover { color: var(--accent); }
.demo-escenas button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.demo-completa[hidden] { display: none; }
.demo-leyenda { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: var(--t-nota); color: var(--muted); }
.demo-leyenda li { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.demo-leyenda svg { width: 20px; height: 20px; flex: none; overflow: visible; }
/* Cada símbolo, sobre una baldosa con la Ciudad de su escena: se lee igual sobre el plano y sobre la página */
.c-baldosa-hoy { fill: var(--hoy-ciudad); }
.c-baldosa-dod { fill: var(--dod-ciudad); stroke: var(--dod-limite); stroke-width: 1; }
.demo-leyenda .c-hoy, .demo-leyenda .c-dod, .demo-leyenda .c-bici, .demo-leyenda .c-micro, .demo-leyenda .c-deposito, .demo-leyenda .c-doble-fondo { stroke: none; }
.demo-leyenda-pie .c-deposito { fill: var(--ink); }
/* Sobre el plano, la leyenda sigue la mezcla de las paletas (--mezcla, que demostracion.js pone en el
   escenario): los símbolos de la otra escena quedan al 40 % y su nombre, en un gris más suave que sigue llegando
   a 4,5:1 (atenuar el renglón entero lo dejaría en 2,4:1 sobre el negro y en 1,9:1 sobre el blanco). Sin
   color-mix(), los nombres quedan todos con el color de la leyenda. */
.demo-leyenda-sobre .ley-hoy svg { opacity: calc(1 - 0.6 * var(--mezcla, 0)); }
.demo-leyenda-sobre .ley-dod svg { opacity: calc(0.4 + 0.6 * var(--mezcla, 0)); }
.demo-leyenda-sobre .ley-hoy { color: color-mix(in oklab, var(--dod-texto-tenue) calc(var(--mezcla, 0) * 100%), var(--hoy-texto)); }
.demo-leyenda-sobre .ley-dod { color: color-mix(in oklab, var(--dod-texto) calc(var(--mezcla, 0) * 100%), var(--hoy-texto-tenue)); }
/* Con un escenario ancho la leyenda va sobre el agua, arriba a la derecha, así se ve siempre junto al plano
   (demostracion.js pone .con-leyenda-sobre), con la paleta de la escena; con uno angosto, y sin JavaScript, va
   debajo de los controles. En el cierre se oculta: el agua de la mitad derecha es más chica y los rótulos ya
   dicen qué se compara. */
.demo-leyenda-sobre { display: none; }
.demo.con-leyenda-sobre .demo-leyenda-sobre {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0.25rem;
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; margin: 0;
  padding: 0.5rem 0.75rem 0.55rem; background: var(--m-fondo); color: var(--m-texto); font-size: 0.8125rem; line-height: 1.25; pointer-events: none;
}
.demo.con-leyenda-sobre .demo-leyenda-pie { display: none; }
.demo.es-cierre .demo-leyenda-sobre { visibility: hidden; }

/* Aviso y atribución */
.demo-notas { display: flex; flex-direction: column; gap: 0.5rem; margin-top: calc(var(--renglon) * 0.75); padding-top: 0.75rem; border-top: 1px solid var(--line); }
.demo-aviso { max-width: 46em; font-size: var(--t-nota); line-height: 1.5; color: var(--ink); }

/* Paso a paso: los números cuelgan en la columna de los signos, y el resultado lleva la raya y el + */
.demo-pasos { display: flex; flex-direction: column; gap: calc(var(--renglon) * 0.6); max-width: var(--medida); }
.demo-pasos li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); align-items: baseline; }
.demo-saldo { display: grid; grid-template-columns: var(--signo) minmax(0, 1fr); align-items: baseline; width: fit-content; max-width: 100%; padding-top: var(--renglon); border-top: 2px solid var(--raya); font-size: var(--t-h1); }
.demo-saldo > .mas { justify-self: start; width: 0.686em; height: 0.686em; }
.demo-saldo > p { max-width: 30em; font-size: var(--t-bajada); line-height: 1.4; }
@media (min-width: 760px) {
  .demo-pasos li { grid-template-columns: var(--signo) minmax(0, 1fr); margin-left: calc(-1 * var(--signo)); }
  .demo-pasos .n { justify-self: end; padding-right: var(--calle); }
  .demo-saldo { margin-left: calc(-1 * var(--signo)); max-width: calc(100% + var(--signo)); font-size: var(--t-cifra); }
  .demo-saldo > .mas { justify-self: end; margin-right: var(--calle); }
}

/* «Hoy, en cifras»: dos estimaciones con su texto, sus tablas y su nota, y las fuentes plegadas. Las tablas son
   cuentas: cifras en tabular, alineadas a la derecha, el valor central en negrita y el rango en gris; un filete
   entre renglones, uno de tinta bajo los títulos de las columnas y la raya de 2 px que cierra cada cuenta. Sin
   tarjetas ni fondos. La que no entra a lo ancho (un celular de 360 px, por ejemplo) se desplaza dentro de su
   marco, con los nombres de los renglones fijos a la izquierda, nunca la página. */
.est-cuerpo { display: flex; flex-direction: column; gap: calc(var(--renglon) * 2); }
.estimacion { display: flex; flex-direction: column; gap: var(--renglon); }
.estimacion + .estimacion { padding-top: calc(var(--renglon) * 2); border-top: 1px solid var(--line); }
.est-texto { display: flex; flex-direction: column; gap: calc(var(--renglon) * 0.75); max-width: var(--medida); }
.est-bajada { font-size: var(--t-bajada); line-height: 1.45; }
/* Los subíndices de las fórmulas (CO₂, PM₂,₅) no cambian el alto del renglón */
.estimaciones sub { position: relative; bottom: -0.25em; font-size: 0.72em; line-height: 0; vertical-align: baseline; }

.est-tablas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--renglon) * 1.5) clamp(2.5rem, 6vw, 4.5rem); }
/* position: relative hace del marco el bloque contenedor de los textos ocultos de las casillas (.visually-hidden,
   absolutos): si no, quedan fuera del desplazamiento del marco y, en 320 px, corren la página 2 px a lo ancho */
.tabla-marco { position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.tabla-cifras { border-collapse: separate; border-spacing: 0; font-size: var(--t-ui); line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.tabla-cifras caption { caption-side: top; padding-bottom: 0.75rem; text-align: left; font-weight: 600; line-height: 1.35; text-wrap: balance; }
/* El título no se va con la tabla cuando ella se desplaza dentro de su marco: queda fijo a la izquierda y no es
   más ancho que el marco (en un celular, el ancho de la pantalla menos sus márgenes), así se lee entero */
.tabla-titulo { display: block; position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter)); }
.tabla-leyenda { display: block; margin-top: 0.1rem; font-size: var(--t-nota); font-weight: 400; color: var(--muted); }
.tabla-cifras th, .tabla-cifras td { padding: 0.55rem 0 0.55rem 1.25rem; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.tabla-cifras thead th, .tabla-cifras thead td {
  padding-top: 0; padding-bottom: 0.45rem; border-bottom-color: var(--ink);
  font-size: var(--t-nota); font-weight: 500; line-height: 1.25; color: var(--muted); text-align: right; vertical-align: bottom;
}
.tabla-cifras thead th[colspan] { text-align: center; }
.tabla-cifras tbody tr:last-child > * { border-bottom: 2px solid var(--raya); }
.tabla-cifras tr > :first-child { padding-left: 0; }
/* Los nombres de los renglones quedan fijos cuando la tabla se desplaza dentro de su marco */
.tabla-cifras th[scope="row"], .tabla-cifras thead td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.tabla-cifras th[scope="row"] { padding-right: 0.75rem; text-align: left; font-weight: 500; }
.tabla-cifras .unidad { font-weight: 400; color: var(--muted); }
.tabla-cifras td { text-align: right; white-space: nowrap; }
.t-central { font-weight: 600; }
.t-rango, .tabla-cifras .t-bajo, .tabla-cifras .t-alto { font-size: var(--t-nota); color: var(--muted); }
.t-rango { display: block; margin-top: 0.15rem; }
/* El rango en dos casillas: el valor bajo contra la «a» y el alto a su derecha */
.tabla-cifras .t-bajo { padding-left: 1.5rem; }
.tabla-cifras .t-alto { padding-left: 0.3em; text-align: left; }
.tabla-vehiculos thead th { min-width: 5.5em; }
.tabla-paradas th[scope="row"] { min-width: 9.5em; font-weight: 400; }
/* En un celular angosto, menos aire entre columnas: así las tablas entran enteras desde 360 px de pantalla */
@media (max-width: 419px) {
  .tabla-cifras th, .tabla-cifras td { padding-left: 0.75rem; }
  .tabla-cifras th[scope="row"] { padding-right: 0.5rem; }
  .tabla-cifras .t-bajo { padding-left: 1rem; }
  .tabla-paradas th[scope="row"] { min-width: 8.5em; }
  .tabla-cifras thead th, .tabla-cifras thead td, .t-rango, .tabla-cifras .t-bajo, .tabla-cifras .t-alto { font-size: 0.8125rem; }
}

.est-glosario, .est-nota { max-width: 48em; }
.est-nota strong { font-weight: 600; color: var(--ink); }

/* Fuentes y método: plegadas, con el aspecto de las acciones del sitio y la flecha del menú. Se imprimen abiertas. */
.fuentes > summary {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.fuentes > summary::-webkit-details-marker { display: none; }
.fuentes > summary::after { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15rem) rotate(45deg); }
.fuentes[open] > summary::after { transform: translateY(0.1rem) rotate(225deg); }
.fuentes > summary:hover { color: var(--accent); }
.fuentes-cuerpo { display: flex; flex-direction: column; gap: var(--renglon); padding-top: calc(var(--renglon) * 0.75); }
.fuentes-cuerpo > p { max-width: var(--medida); }
.fuentes-lista { display: flex; flex-direction: column; gap: 0.6rem; max-width: 48em; font-size: var(--t-nota); line-height: 1.5; }
.fuentes-lista li { display: grid; grid-template-columns: 2.25em minmax(0, 1fr); align-items: baseline; }
.fuentes-lista p { overflow-wrap: break-word; }
.fuentes-lista a { color: inherit; }
@media (min-width: 760px) {
  .fuentes-lista li { grid-template-columns: var(--signo) minmax(0, 1fr); margin-left: calc(-1 * var(--signo)); }
  .fuentes-lista .n { justify-self: end; padding-right: var(--calle); }
}

/* Pantalla completa (para proyectar): todo toma el ancho del escenario, que demostracion.js calcula
   (--demo-completa) para que las bandas, el escenario en 16:9 y el pie entren en la pantalla. La leyenda va
   sobre el plano y los controles en un renglón, así el escenario queda lo más grande posible. */
.demo:fullscreen { display: flex; flex-direction: column; justify-content: center; max-width: none; width: 100%; height: 100%; margin: 0; padding: clamp(8px, 1.5vh, 20px) clamp(16px, 3vw, 48px); overflow: auto; background: var(--bg); }
.demo:fullscreen > * { width: var(--demo-completa, 100%); max-width: 100%; margin-inline: auto; }
.demo:fullscreen .demo-escenario { flex: none; aspect-ratio: 16 / 9; }
.demo:fullscreen .demo-pie { gap: 0.5rem; margin-top: 0.5rem; margin-left: auto; }
.demo:fullscreen .demo-subtitulo > p { max-width: none; }
.demo:fullscreen .demo-mandos { flex-wrap: nowrap; }
.demo:fullscreen .demo-controles { flex-wrap: nowrap; gap: 0.5rem 1.25rem; }
.demo:fullscreen .demo-notas { display: none; }

@media (forced-colors: active) {
  .demo-pantalla, .demo-escenario, .demo-panel { background: Canvas; }
  .demo-subtitulo.es-resultado { border-top-color: CanvasText; }
  .demo-subtitulo > .mas { fill: CanvasText; }
  .m-tierra, .m-ciudad, .m-diques, .m-agua-ciudad { fill: Canvas; }
  .m-agua-ciudad { stroke: Canvas; }
  .m-guia { stroke: CanvasText; }
  .demo.con-leyenda-sobre .demo-leyenda-sobre { background: Canvas; border: 1px solid CanvasText; }
  .m-borde, .m-autopista { stroke: CanvasText; }
  .m-limites, .m-zonas path, .m-avenidas, .m-comunas, .m-ruta, .m-riachuelo, .m-costa-rio { stroke: GrayText; }
  .c-hoy, .c-deposito { fill: CanvasText; stroke: Canvas; }
  .c-dod { fill: Canvas; stroke: Highlight; }
  .c-bici, .c-micro { fill: Highlight; stroke: Canvas; }
  .c-micro .c-micro-ruta { stroke: Canvas; }
  .c-micro .c-micro-parada { fill: Canvas; }
  .c-anillo { stroke: Highlight; }
  .c-anillo-hoy, .c-congestion { stroke: CanvasText; }
  .c-congestion-halo { stroke: none; }
  .c-doble-fondo { fill: CanvasText; stroke: Canvas; }
  .c-doble-texto, .c-doble-signo { fill: Canvas; }
  .c-baldosa-hoy, .c-baldosa-dod { fill: Canvas; stroke: CanvasText; }
  .demo-rotulo { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .demo-rotulo-escena, .demo-rotulo-cifra, .demo-panel[data-panel="hoy"] .demo-rotulo-cifra { color: CanvasText; }
  .m-et text, .c-nombre text { fill: CanvasText; stroke: Canvas; }
}

/* Impresión: el cierre, en claro. Los selectores repiten los del tema oscuro para ganarles aunque el sistema
   esté en modo oscuro (si no, se imprimiría texto claro sobre papel blanco). La paleta de «Hoy» pasa a grises
   claros, para no gastar tinta en un plano negro; el rojo de sus camionetas, estelas y congestión y el azul de
   DOD quedan iguales (los dos llegan a 3:1 sobre blanco). */
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #FFFFFF; --bg-alt: #FFFFFF; --line: #BBBBBB; --ink: #000000; --muted: #333333; --raya: #000000;
    --accent: #1D5C99; --on-accent: #FFFFFF; --logo-ink: #17212D; --logo-plus: #1D5C99; color-scheme: light;
    --hoy-agua: #D2D2D2; --hoy-tierra: #EEEEEE; --hoy-ciudad: #FFFFFF; --hoy-limite: #DBDBDB; --hoy-zona: #747474;
    --hoy-comuna: #E8E8E8; --hoy-avenida: #E3E3E3; --hoy-autopista: #9F9F9F; --hoy-ruta: #CBCBCB; --hoy-borde: #000000;
    --hoy-texto: #333333; --hoy-texto-suave: #555555; --hoy-texto-agua: #333333; --hoy-tinta: #000000; --hoy-fondo: #FFFFFF;
    --dod-borde: #000000; --dod-texto: #233F52; --dod-tinta: #000000;
  }
  /* La figura pasa de hoja, si hace falta, solo antes de sus notas: el nombre de la escena, el escenario y el pie
     (el subtítulo y la leyenda) van juntos, y cada nota, entera. Toda junta no entraba debajo del título y pasaba
     a la hoja 2, que quedaba casi en blanco. */
  .demo { max-width: none; }
  .demo-barra { break-after: avoid; }
  .demo-escenario { aspect-ratio: 16 / 9; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .demo-pie { break-before: avoid; break-inside: avoid; }
  .demo-notas > p { break-inside: avoid; }
  /* El filete de las notas va con la primera, así no queda solo al pie de una hoja si ella pasa a la siguiente */
  .demo-notas { padding-top: 0; border-top: 0; }
  .demo-aviso { padding-top: 0.75rem; border-top: 1px solid var(--line); }
  .demo-capa { will-change: auto; }
  .demo-controles, .demo-cuentas, .demo-leyenda-sobre { display: none !important; }
  .demo-leyenda-pie { display: flex !important; }
  /* El alto que demostracion.js reserva en pantalla para el subtítulo más largo (un min-height en línea, medido
     para el ancho de la pantalla) no sirve en la hoja, que muestra uno solo: al imprimir no se vuelve a medir, y
     desde un celular dejaba un hueco de unos 15 mm. El !important le gana al estilo en línea. */
  .demo-subtitulo { font-size: 12pt; min-height: 0 !important; }
  /* En papel, las bandas de la pantalla van sin fondo: la escena y el subtítulo, en negro sobre blanco */
  .demo-pantalla { background: none; }
  .demo-barra, .demo-subtitulo { padding-inline: 0; }
  .demo-pasos li, .demo-saldo { break-inside: avoid; }
  .demo-saldo { font-size: 24pt; }
  .demo-saldo > p { font-size: 12pt; }
  /* «Hoy, en cifras»: el título con su bajada, las tablas enteras, sin marco que las recorte, y las fuentes
     abiertas, como una lista más */
  .estimaciones .band-head { break-inside: avoid; }
  .est-bajada { font-size: 12pt; }
  .tabla-marco { overflow: visible; }
  .tabla-cifras th[scope="row"], .tabla-cifras thead td:first-child { position: static; }
  .tabla-cifras { font-size: 9.5pt; }
  .tabla-cifras thead th, .tabla-cifras thead td, .tabla-leyenda, .t-rango, .tabla-cifras .t-bajo, .tabla-cifras .t-alto { font-size: 8pt; }
  .est-glosario, .est-nota, .fuentes-cuerpo, .fuentes-lista { font-size: 9pt; }
  .tabla-marco, .est-glosario, .fuentes-lista li { break-inside: avoid; }
  .fuentes > summary { display: block; min-height: 0; text-decoration: none; font-size: 12.5pt; break-after: avoid; }
  .fuentes > summary::after { display: none; }
}
/* Aparte, porque un navegador que no conoce ::details-content descarta la regla entera (ahí abre las fuentes site.js) */
@media print {
  .fuentes::details-content { display: block; content-visibility: visible; }
}