/* ===== estilos_generales.css ===== */
/*
 * ==========================================================================
 *  EL SISTEMA VISUAL DE UNCORRENTINO — «Siesta y río»
 * ==========================================================================
 *
 * Una sola identidad para todo el juego: la casa, el mapa, el taller, las
 * páginas. Antes era «panel oscuro con botones turquesa», que parecía la
 * administración de algo y no un juego. Ahora es cálida, como Corrientes:
 *
 *   · la NOCHE (tema por defecto) es un índigo ciruela, no un negro azulado;
 *   · el DÍA es arena y crema de siesta;
 *   · el color que llama a la acción es MANDARINA (el atardecer sobre el
 *     Paraná), el de lo social es LAPACHO, el de la plata es SOL, el del agua
 *     es RÍO y el de lo que salió bien es MONTE.
 *
 * Las variables conservan los nombres de siempre (--sup-*, --carbon-*,
 * --acento…) porque las usa todo el proyecto; lo que cambió es lo que valen.
 * Los componentes (botones, paneles, tarjetas…) están en `unc_ui.css`.
 *
 * El tema claro se aplica con `data-theme="light"` en <html> (lo pone
 * `tema.js`); sin ese atributo, es de noche.
 */

:root {

  /* ---- la paleta cruda: nadie la usa directo salvo este archivo ---- */
  --p-noche-0: #140f29;
  --p-noche-1: #1d1738;
  --p-noche-2: #262048;
  --p-noche-3: #312a59;
  --p-noche-4: #40377a;
  --p-noche-5: #6a5fa8;

  --p-mandarina: #ff8a3d;
  --p-mandarina-viva: #ffa15c;
  --p-mandarina-honda: #d8601c;
  --p-mandarina-clara: #ffb987;

  --p-claro-0: #ffffff;
  --p-claro-1: #fff4e4;
  --p-claro-2: #d8cdea;
  --p-claro-3: #ab9fcb;

  --p-monte: #5ad68e;
  --p-rio: #45c8dc;
  --p-sol: #ffd05a;
  --p-peligro: #ff6b7d;

  --p-oro: #ffc43d;
  --p-violeta: #b294ff;
  --p-azul-mapa: #5aa9ff;

  --p-lapacho: #ff7ab8;
}

:root {
  color-scheme: dark;

  /* ---- superficies: mundo → HUD → panel → modal → elegido ---- */
  --sup-0: var(--p-noche-0);
  --sup-1: var(--p-noche-1);
  --sup-2: var(--p-noche-2);
  --sup-3: var(--p-noche-3);

  --carbon: var(--p-claro-1);
  --carbon-2: var(--p-claro-2);
  --carbon-3: var(--p-claro-3);
  --carbon-apagado: #7d72a3;

  --linea: var(--p-noche-4);
  --trazo: var(--p-noche-5);

  --filo: rgb(255 244 228 / .07);
  --filo-fuerte: rgb(255 244 228 / .14);

  --acento: var(--p-mandarina);
  --acento-fuerte: var(--p-mandarina-viva);
  --acento-hondo: var(--p-mandarina-honda);
  --acento-tinte: #3a2338;
  --acento-borde: #7b4540;
  --acento-texto: var(--p-mandarina-clara);
  --sobre-acento: #2b1405;

  /* los otros colores con nombre propio */
  --lapacho: var(--p-lapacho);
  --lapacho-tinte: #3b1f44;
  --rio: var(--p-rio);
  --rio-tinte: #16304a;
  --sol: var(--p-sol);
  --sol-tinte: #3a2e22;
  --sol-texto: #ffdc85;

  --grad-luz: linear-gradient(180deg, var(--p-mandarina-viva) 0%, var(--p-mandarina) 100%);
  --grad-luz-viva: linear-gradient(180deg, #ffb778 0%, var(--p-mandarina-viva) 100%);

  /* el cielo detrás del mundo y de las páginas */
  --grad-lienzo:
    radial-gradient(900px 520px at 14% -6%, rgb(255 138 61 / .14), transparent 62%),
    radial-gradient(900px 560px at 90% 0%, rgb(178 148 255 / .14), transparent 62%),
    radial-gradient(1200px 700px at 50% 120%, rgb(69 200 220 / .10), transparent 60%);

  --vidrio: rgb(29 23 56 / .86);

  --verde: var(--p-monte);
  --verde-tinte: #193a37;
  --indigo: var(--p-violeta);
  --indigo-tinte: #2c2556;
  --ambar-fondo: #3d3021;
  --ambar-texto: var(--p-sol);
  --peligro: var(--p-peligro);
  --peligro-tinte: #3d1a33;

  --radar-transito: #ff9a52;
  --radar-infra: #ffd05a;
  --radar-evento: #ff8fbf;
  --radar-situacion: #c9b0ff;

  --barra-visita: var(--p-noche-5);
  --barra-contacto: var(--p-mandarina);

  --filete-mapa: rgb(255 244 228 / .46);
  --filete-mapa-suave: rgb(255 244 228 / .24);

  --velo-mapa: rgb(29 23 56 / .14);

  --marcador-visitante: var(--p-azul-mapa);

  --zona-linea: var(--p-lapacho);
  --zona-relleno: rgb(255 122 184 / .08);

  --zona-velo: rgb(20 15 41 / .52);

  --zona-vertice: var(--p-claro-0);
  --zona-vertice-borde: var(--p-lapacho);

  --zona-recuadro: rgb(216 205 234 / .28);

  --zona-local: var(--p-claro-3);
  --zona-local-afuera: var(--p-peligro);

  --tipo-local: #7fd8ea;          --tipo-local-fondo: #17304a;
  --tipo-servicio: #cdb6ff;       --tipo-servicio-fondo: #2b2256;
  --tipo-alquiler: #fff4e4;       --tipo-alquiler-fondo: #3a3160;
  --tipo-evento: #ffd05a;         --tipo-evento-fondo: #3d3021;
  --tipo-pedido: #ff9cc8;         --tipo-pedido-fondo: #3b1f44;

  --lavada: #2a2150;
  --lavada-fin: rgb(42 33 80 / 0);

  --foco-color: var(--p-sol);
  --foco: 0 0 0 2px var(--sup-1), 0 0 0 4px var(--foco-color);
  --foco-outline: 2px solid var(--foco-color);

  /* ---- profundidad ---- */
  --s-0: none;
  --s-1: 0 1px 2px rgb(8 4 22 / .40);
  --s-2: 0 2px 4px rgb(8 4 22 / .36), 0 6px 16px rgb(8 4 22 / .30);
  --s-3: 0 10px 28px rgb(8 4 22 / .48), 0 2px 6px rgb(8 4 22 / .36);
  --s-4: 0 -12px 36px rgb(8 4 22 / .50);
  --s-tarjeta:      0 2px 0 rgb(8 4 22 / .28), 0 10px 26px rgb(8 4 22 / .30);
  --s-tarjeta-alta: 0 3px 0 rgb(8 4 22 / .30), 0 20px 44px rgb(8 4 22 / .46);

  /* el «canto» de abajo de los botones y fichas: da el volumen de juego */
  --canto: rgb(8 4 22 / .55);
  --canto-acento: var(--p-mandarina-honda);
  --luz-arriba: inset 0 1px 0 rgb(255 255 255 / .10);

  --brillo: 0 6px 22px rgb(255 138 61 / .30);
  --brillo-fuerte: 0 8px 30px rgb(255 138 61 / .45);

  --sombra-tinta: 8 4 22;

  --halo-visitante: rgb(90 169 255 / .55);

  --sello-pro: #7fd8ea;
  --sello-pro-fondo: #17304a;
  --sello-premium: #2b1405;
  --sello-premium-fondo: #fff4e4;

  --nivel-pro: var(--p-oro);
  --nivel-pro-texto: #2b1a05;
  --nivel-premium: var(--p-violeta);
  --nivel-premium-texto: #1d1238;
  --nivel-pro-halo: rgb(255 196 61 / .45);
  --nivel-premium-halo: rgb(178 148 255 / .50);
  --nivel-elegido-fondo: #3a2e22;

  --panel-barra-fondo: #120d25;
  --panel-barra-texto: var(--p-claro-1);

  --h-panel: 44px;

  /* ---- letras ---- */
  --f-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-nombre: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-juego: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --f-numero: 'Fredoka', 'Nunito', system-ui, sans-serif;

  /* Doce es el piso de lo legible en un teléfono. Los títulos van con la
     letra del juego y más apretados; el texto, con aire. */
  --t-1-size: 12px;  --t-1-lh: 1.35; --t-1-ls:  .02em;   --t-1-w: 700;
  --t-2-size: 13px;  --t-2-lh: 1.40; --t-2-ls:  0;       --t-2-w: 600;
  --t-3-size: 15px;  --t-3-lh: 1.50; --t-3-ls:  0;       --t-3-w: 500;
  --t-4-size: 17px;  --t-4-lh: 1.45; --t-4-ls: -.005em;  --t-4-w: 500;
  --t-5-size: 20px;  --t-5-lh: 1.25; --t-5-ls: -.005em;  --t-5-w: 600;
  --t-6-size: 26px;  --t-6-lh: 1.18; --t-6-ls: -.01em;   --t-6-w: 600;
  --t-7-size: 34px;  --t-7-lh: 1.10; --t-7-ls: -.015em;  --t-7-w: 600;
  --t-8-size: 48px;  --t-8-lh: 1.02; --t-8-ls: -.02em;   --t-8-w: 700;

  /*
   * LA ESCALA DE ESPACIOS, EN CRUDO.
   *
   * Estos nueve valores son el RESPALDO: `unc_responsive.css` —que se lee
   * inmediatamente después— los vuelve a declarar multiplicados por
   * `--densidad`, y ésos son los que usa el navegador. Quedan acá para que una
   * página que por lo que sea no cargue esa capa no se dibuje sin aire.
   *
   * Lo mismo vale para `--h-1..4` de más abajo.
   */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;

  /* formas redondas y con cuerpo: nada de esquinas de planilla */
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 20px;
  --r-4: 28px;
  --r-full: 999px;

  --h-1: 40px; --h-2: 44px; --h-3: 52px; --h-4: 58px;

  --tocable: 44px;
  --tocable-chico: 40px;

  --q-telefono: 640px;
  --q-tableta: 1024px;
  --q-ancho: 1440px;

  /* movimientos cortos; el «rebote» es para lo que se agarra o aparece */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 380ms;
  --curva: cubic-bezier(.2, 0, 0, 1);
  --curva-rebote: cubic-bezier(.34, 1.56, .64, 1);

  --ancho-hoja: min(55rem + 46vw, 137.5rem);
  --ancho-comercio: 82.5rem;
  --ancho-ficha: 680px;
  --ancho-prosa: 62ch;

  --ancho-campo: 38rem;

  --canal: clamp(16px, 2.2vw, 40px);

  --col-guia: clamp(20rem, 15.6vw + 12.5rem, 28.75rem);

  --cal-0: var(--sup-0);
  --cal-1: var(--sup-1);
  --cal-2: var(--sup-2);
  --cal-3: var(--sup-3);
  --tinta: var(--carbon);
  --tinta-2: var(--carbon-2);
  --tinta-3: var(--carbon-3);
  --ladrillo: var(--acento-texto);
  --ladrillo-tinte: var(--acento-tinte);
  --monte: var(--verde);

  --ancho-lectura: var(--ancho-hoja);
}

/*
 * ACÁ HABÍA DOS BLOQUES Y SE MUDARON A `unc_responsive.css`.
 *
 *   · los pisos táctiles de `--h-1..4`, que ahora están AL FINAL de aquel
 *     archivo. Escritos acá se leían antes que la escala de densidad y la
 *     densidad se los comía: un teléfono terminaba con botones de 38 px;
 *   · los tamaños de título para pantalla angosta, que dejaron de hacer falta
 *     cuando `--t-7` y `--t-8` pasaron a `clamp()` por densidad y cubren todos
 *     los anchos en vez de sólo «menos de 768».
 *
 * La regla que salió de esto, y que vale para todo el proyecto: un escalón
 * tiene que ir DESPUÉS de la base que pisa.
 */

/* ============================================================ DE DÍA */

:root[data-theme="light"] {
  color-scheme: light;

  --sup-0: #f4e8d6;
  --sup-1: #fff9f0;
  --sup-2: #ffffff;
  --sup-3: #fff0dc;

  --carbon: #2e2140;
  --carbon-2: #5f4f73;
  --carbon-3: #6f6082;
  --carbon-apagado: #a495b3;

  --linea: #ecdcc4;
  --trazo: #b8a48e;
  --filo: rgb(46 33 64 / .07);
  --filo-fuerte: rgb(46 33 64 / .13);

  --acento: #ff7a26;
  --acento-fuerte: #ff8f45;
  --acento-hondo: #c9520e;
  --acento-tinte: #ffeedd;
  --acento-borde: #ffc59a;
  --acento-texto: #a8410a;
  --sobre-acento: #2b1405;

  --lapacho: #d6408a;
  --lapacho-tinte: #fde6f1;
  --rio: #0f8aa0;
  --rio-tinte: #ddf4f8;
  --sol: #e0a100;
  --sol-tinte: #fff3cf;
  --sol-texto: #8a5a00;

  --grad-luz: linear-gradient(180deg, #ff9a52 0%, #ff7a26 100%);
  --grad-luz-viva: linear-gradient(180deg, #ffab6b 0%, #ff8f45 100%);
  --grad-lienzo:
    radial-gradient(900px 520px at 14% -6%, rgb(255 190 120 / .16), transparent 62%),
    radial-gradient(900px 560px at 90% 0%, rgb(255 214 140 / .14), transparent 62%),
    radial-gradient(1200px 700px at 50% 120%, rgb(69 200 220 / .12), transparent 60%);
  --vidrio: rgb(255 249 240 / .90);

  --verde: #16804a;
  --verde-tinte: #e2f6ea;
  --indigo: #6a45d8;
  --indigo-tinte: #efe9fd;
  --ambar-fondo: #fff3cf;
  --ambar-texto: #8a5a00;
  --peligro: #c7283f;
  --peligro-tinte: #fde8ec;

  --barra-visita: #d9c8ae;
  --barra-contacto: #ff7a26;

  --radar-transito: #d2621b;
  --radar-infra: #b07d05;
  --radar-evento: #c94f7c;
  --radar-situacion: #7c4dd6;

  --filete-mapa: rgb(46 33 64 / .55);
  --filete-mapa-suave: rgb(46 33 64 / .30);
  --velo-mapa: rgb(255 255 255 / .10);

  --marcador-visitante: #1361b0;

  --zona-linea: #c02f7a;
  --zona-relleno: rgb(192 47 122 / .08);

  --zona-velo: rgb(46 33 64 / .38);
  --zona-vertice: #ffffff;
  --zona-vertice-borde: #c02f7a;
  --zona-recuadro: rgb(46 33 64 / .22);
  --zona-local: #6f6082;
  --zona-local-afuera: #d3392f;

  --tipo-local: #0b7489;          --tipo-local-fondo: #ddf4f8;
  --tipo-servicio: #6a45d8;       --tipo-servicio-fondo: #efe9fd;
  --tipo-alquiler: #2e2140;       --tipo-alquiler-fondo: #f4ebde;
  --tipo-evento: #8a5a00;         --tipo-evento-fondo: #fff3cf;
  --tipo-pedido: #b02d6d;         --tipo-pedido-fondo: #fde6f1;

  --lavada: #fff0dc;
  --lavada-fin: rgb(255 240 220 / 0);

  --foco-color: #6a45d8;
  --foco: 0 0 0 2px var(--sup-2), 0 0 0 4px var(--foco-color);
  --foco-outline: 2px solid var(--foco-color);

  --s-1: 0 1px 2px rgb(92 58 30 / .08);
  --s-2: 0 2px 4px rgb(92 58 30 / .08), 0 6px 16px rgb(92 58 30 / .08);
  --s-3: 0 10px 28px rgb(92 58 30 / .16), 0 2px 6px rgb(92 58 30 / .08);
  --s-4: 0 -10px 30px rgb(92 58 30 / .14);
  --s-tarjeta:      0 2px 0 rgb(92 58 30 / .10), 0 8px 22px rgb(92 58 30 / .10);
  --s-tarjeta-alta: 0 3px 0 rgb(92 58 30 / .12), 0 18px 40px rgb(92 58 30 / .18);

  --canto: #e2cfb3;
  --canto-acento: #c9520e;
  --luz-arriba: inset 0 1px 0 rgb(255 255 255 / .75);

  --brillo: 0 6px 20px rgb(255 122 38 / .28);
  --brillo-fuerte: 0 8px 28px rgb(255 122 38 / .40);
  --sombra-tinta: 92 58 30;
  --halo-visitante: rgb(29 127 224 / .55);

  --sello-pro: #0b7489;
  --sello-pro-fondo: #ddf4f8;
  --sello-premium: #fff9f0;
  --sello-premium-fondo: #2e2140;

  --nivel-pro: #e0a100;
  --nivel-pro-texto: #2b1a05;
  --nivel-premium: #8b5cf6;
  --nivel-premium-texto: #ffffff;
  --nivel-pro-halo: rgb(224 161 0 / .45);
  --nivel-premium-halo: rgb(139 92 246 / .50);
  --nivel-elegido-fondo: #fff3cf;

  --panel-barra-fondo: #2e2140;
  --panel-barra-texto: #fff9f0;
}

/* Las teselas del mapa de la ciudad (Leaflet), teñidas para la paleta. */
.mapa-teselas {
  filter: brightness(2.3) contrast(1.05) sepia(1) hue-rotate(215deg) saturate(1.7);
}

:root[data-theme="light"] .mapa-teselas {
  filter: brightness(.55) contrast(6) sepia(1) hue-rotate(345deg) saturate(.45) brightness(1.42);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== unc_responsive.css ===== */
/*
 * ==========================================================================
 *  EL SISTEMA QUE SE ADAPTA
 * ==========================================================================
 *
 * No es «el CSS del celular». Es la capa que hace que TODO el juego se acomode
 * solo, y que las pantallas nuevas nazcan ya adaptadas sin tener que acordarse
 * de nada.
 *
 * Se carga en los dos paquetes (`juego.css` y `paginas.css`), justo después de
 * los tokens y antes de los componentes, así que llega a todas las pantallas:
 * el ingreso, la portada, el mapa, el mercado, la casa, los paneles, el taller
 * y el panel de administración.
 *
 * --------------------------------------------------------------------------
 *  POR QUÉ HIZO FALTA: LOS NÚMEROS
 * --------------------------------------------------------------------------
 *
 * Medido con un navegador de verdad sobre las once resoluciones que usa el
 * banco (`scratchpad/revisar.py`), antes de tocar nada:
 *
 *   · 94 media queries repartidas en 26 puntos de corte DISTINTOS
 *     (330, 370, 380, 400, 420, 440, 480, 500, 520, 560, 599, 600, 640, 700,
 *      719, 720, 760, 767, 860, 861, 899, 900, 950, 1099, 1140, 1320).
 *     Veintiséis cortes es no tener ninguno: cada pantalla se rompía en un
 *     ancho distinto y arreglar una no arreglaba las otras.
 *
 *   · 146 controles por debajo de 40 px en pantallas táctiles;
 *   · 216 textos por debajo de 12 px;
 *   ·  79 avisos de paneles que se salen por abajo;
 *   ·   5 controles fuera del alcance, sin forma de llegar a ellos.
 *
 * Y una falla de fondo: TODAS las reglas miraban el ancho y NINGUNA el alto.
 * Por eso el ingreso, en un celular acostado (844×390), dibujaba la escena
 * decorativa ocupando la pantalla entera y el campo de usuario quedaba recién
 * debajo del borde de abajo.
 *
 * --------------------------------------------------------------------------
 *  LOS CORTES, QUE DE ACÁ EN MÁS SON ESTOS Y NO OTROS
 * --------------------------------------------------------------------------
 *
 * CSS no deja usar variables adentro de `@media`, así que no se pueden
 * declarar como tokens: se declaran acá, en palabras, y se respetan.
 *
 *   ANCHO
 *     xs   ≤ 400px    el celular más chico que existe todavía
 *     sm   ≤ 560px    celular de parado
 *     md   ≤ 768px    celular grande / tableta angosta
 *     lg   ≤ 1024px   tableta de parado / notebook chica
 *     xl   ≤ 1280px   notebook
 *     (más de 1280 es escritorio y no lleva media query: es el estado natural)
 *
 *   ALTO — el eje que faltaba
 *     bajo    ≤ 620px   notebook chica, ventana a media pantalla
 *     rasante ≤ 440px   celular acostado
 *
 *   ENTRADA
 *     (pointer: coarse)   se toca con el dedo: todo tiene que medir 44
 *     (hover: none)       no hay puntero que se pose: el tooltip no alcanza
 *
 * Usar SIEMPRE uno de estos. Si hace falta un corte nuevo, se agrega acá y se
 * explica por qué; lo que no se hace es inventar un 861 porque el diseño se
 * rompía en 860.
 */

/* ==========================================================================
 *  0. LA DENSIDAD: UN SOLO DISEÑO QUE RESPIRA DISTINTO SEGÚN EL LUGAR
 * ==========================================================================
 *
 * Es la pieza que faltaba, y la que evita las dos salidas fáciles:
 *
 *   · «no entra ⇒ le pongo scroll», que es esconder el problema;
 *   · «no entra ⇒ achico todo al 60 %», que es romper la legibilidad.
 *
 * Lo que sobra cuando falta lugar NO son las letras ni los controles: es el
 * AIRE. Un panel con 24 px de relleno arriba, 24 abajo y 24 entre cada cosa
 * gasta, en una notebook de 768, más alto del que le queda al contenido. Pero
 * ese mismo panel en un monitor de 1080 con 16 px se ve apretado y barato.
 *
 * Entonces el aire deja de ser un número y pasa a ser una FRACCIÓN: la escala
 * de espacios completa se multiplica por `--densidad`, que vale 1 donde sobra
 * lugar y baja hasta .78 donde falta. Nadie escribe una media query por
 * pantalla: se escribe `var(--e-4)` como siempre y el sistema decide cuánto es
 * eso acá.
 *
 * DOS EJES, Y GANA EL MÁS APRETADO. Una notebook de 1366 × 768 no tiene poco
 * ancho: tiene poco ALTO. Un teléfono de 390 × 844 es lo contrario. Con un solo
 * eje, cada uno arreglaba a costa del otro. Con dos ejes y `min()`, cada
 * pantalla recibe la densidad del recurso que le falta:
 *
 *      1920 × 1080  ancho 1.06  alto 1.06  ⇒  1.06  holgada
 *      1440 × 900   ancho 1     alto .96   ⇒  .96   cómoda
 *      1366 × 768   ancho 1     alto .90   ⇒  .90   compacta
 *      1280 × 720   ancho .96   alto .86   ⇒  .86   compacta
 *      1024 × 768   ancho .93   alto .90   ⇒  .90   compacta
 *       768 × 1024  ancho .91   alto 1     ⇒  .91   compacta
 *       390 × 844   ancho .85   alto .96   ⇒  .85   apretada
 *       844 × 390   ancho .93   alto .78   ⇒  .78   apretada
 *
 * LO QUE LA DENSIDAD NO TOCA, Y ES A PROPÓSITO: el tamaño del texto corriente
 * (`--t-1` a `--t-4`) y el piso de lo que se toca con el dedo. Achicar el aire
 * no se nota; achicar la letra o el botón, sí. Los pisos táctiles se vuelven a
 * poner al final de este archivo, después de todo lo demás.
 */

:root {
  /*
   * Los dos ejes. Cada media query de más abajo mueve UNO solo, así que no se
   * pisan entre ellas y el resultado no depende del orden en que estén
   * escritas —que es exactamente el error que este proyecto ya cometió tres
   * veces con `--aire-pagina`—.
   */
  --den-ancho: 1;
  --den-alto: 1;

  --densidad: min(var(--den-ancho), var(--den-alto));

  /*
   * LA ESCALA DE ESPACIOS, ENTERA Y EN UN SOLO LUGAR.
   *
   * Los nueve escalones vivían partidos: del 1 al 5 fijos en
   * `estilos_generales.css` y del 6 al 9 fluidos acá. Ahora los nueve salen de
   * la misma cuenta y responden al mismo mando.
   *
   * Los chicos (1-4) son el aire de ADENTRO de un botón o una tarjeta: se
   * mueven poco, porque ahí un píxel se nota. Los grandes (5-9) son separación
   * entre secciones, que es donde de verdad se gasta la pantalla.
   */
  --e-1: calc(4px * var(--densidad));
  --e-2: calc(8px * var(--densidad));
  --e-3: calc(12px * var(--densidad));
  --e-4: calc(16px * var(--densidad));
  --e-5: calc(22px * var(--densidad));
  --e-6: calc(clamp(18px, 14.4px + 1.0vw, 30px) * var(--densidad));
  --e-7: calc(clamp(24px, 18px + 1.7vw, 42px) * var(--densidad));
  --e-8: calc(clamp(30px, 22.3px + 2.1vw, 54px) * var(--densidad));
  --e-9: calc(clamp(36px, 22.7px + 3.7vw, 76px) * var(--densidad));

  /*
   * LOS NOMBRES QUE PIDIÓ EL PEDIDO.
   *
   * `--unc-space-N` y `--e-N` son la MISMA escala con dos nombres: los seis mil
   * usos de `--e-*` que ya hay en el proyecto no se renombran —eso sería un
   * cambio de veinte mil líneas sin un solo píxel de mejora—, y lo nuevo se
   * puede escribir con el nombre largo, que se lee mejor.
   */
  --unc-space-1: var(--e-1);
  --unc-space-2: var(--e-2);
  --unc-space-3: var(--e-3);
  --unc-space-4: var(--e-4);
  --unc-space-5: var(--e-5);
  --unc-space-6: var(--e-6);
  --unc-space-7: var(--e-7);
  --unc-space-8: var(--e-8);
  --unc-space-9: var(--e-9);

  /*
   * LAS ALTURAS DE CONTROL, TAMBIÉN POR DENSIDAD.
   *
   * Estaban clavadas en 40/44/52/58 y con un bloque táctil en
   * `estilos_generales.css` que las subía. Ese bloque se MUDÓ al final de este
   * archivo: escrito allá se leía antes que esto y la densidad se lo comía.
   *
   * Con mouse, un botón de 38 px es cómodo y deja entrar una fila más de
   * información. Con dedo, el piso vuelve a ser 44.
   */
  --h-1: calc(40px * var(--densidad));
  --h-2: calc(44px * var(--densidad));
  --h-3: calc(50px * var(--densidad));
  --h-4: calc(56px * var(--densidad));

  /*
   * LAS FRANJAS HORIZONTALES: EL IMPUESTO QUE PAGA TODA PANTALLA.
   *
   * La cabecera del sitio, la barra de herramientas del taller y el pie de una
   * herramienta son las tres cosas que se cobran alto ANTES de que el
   * contenido empiece. Medido en el taller a 1366 × 768: 58 + 64 + 54 = 176 px,
   * o sea el 23 % de la pantalla gastado en barras.
   *
   * Que sean tokens quiere decir que se pueden bajar de golpe y que cualquier
   * pantalla que necesite descontarlas las tiene con el nombre puesto, en vez
   * de escribir el número a mano y desincronizarse el día que cambie.
   */
  --h-barra: calc(52px * var(--densidad));     /* la cabecera del sitio */
  --h-banda: calc(48px * var(--densidad));     /* una barra de herramientas */
  --h-banda-chica: calc(40px * var(--densidad));   /* un pie de estado */
}

/* ---- el eje del ANCHO ---- */

@media (max-width: 1280px) { :root { --den-ancho: .96; } }
@media (max-width: 1024px) { :root { --den-ancho: .93; } }
@media (max-width: 768px)  { :root { --den-ancho: .91; } }
@media (max-width: 560px)  { :root { --den-ancho: .88; } }
@media (max-width: 400px)  { :root { --den-ancho: .85; } }

/* ---- el eje del ALTO, que es el que nadie miraba ---- */

@media (max-height: 900px) { :root { --den-alto: .96; } }
@media (max-height: 820px) { :root { --den-alto: .90; } }
@media (max-height: 720px) { :root { --den-alto: .86; } }
@media (max-height: 620px) { :root { --den-alto: .82; } }
@media (max-height: 440px) { :root { --den-alto: .78; } }

/*
 * Y EN UN MONITOR GRANDE, AL REVÉS.
 *
 * Con 1.600 px de ancho y 1.000 de alto sobra lugar: apretar ahí es
 * desperdiciarlo. La densidad sube por encima de 1 —el único punto del sistema
 * donde eso pasa— y la interfaz se abre sola sin una sola regla nueva.
 */
@media (min-width: 1600px) and (min-height: 950px) {
  :root { --den-ancho: 1.06; --den-alto: 1.06; }
}

/* ==========================================================================
 *  1. LO QUE MIDE EL ALTO DE VERDAD
 * ========================================================================== */

:root {
  /*
   * `100vh` EN UN TELÉFONO MIENTE.
   *
   * El navegador cuenta la barra de direcciones como si no estuviera, así que
   * `100vh` es más alto que lo que se ve y el último trozo de la interfaz
   * queda escondido detrás de ella. `dvh` es el alto que hay AHORA, con la
   * barra puesta o corrida.
   *
   * Se deja `vh` como respaldo en la primera línea para los navegadores
   * viejos: los que entienden `dvh` pisan el valor con la segunda.
   */
  --alto-util: 100vh;
  --alto-util: 100dvh;

  /* El alto chico garantizado: sirve para lo que NO puede saltar cuando la
     barra del navegador aparece y desaparece (un panel fijo, por ejemplo). */
  --alto-firme: 100vh;
  --alto-firme: 100svh;

  /* Las zonas que se come el aparato: el notch arriba, la barra de gestos
     abajo. Se usan con `calc()` en todo lo que va pegado a un borde. */
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
}

/* ==========================================================================
 *  2. LAS LETRAS SE ACOMODAN SOLAS
 * ========================================================================== */

/*
 * SÓLO LOS TAMAÑOS GRANDES SON FLUIDOS, Y ES A PROPÓSITO.
 *
 * Del 1 al 4 son el texto de todos los días —etiquetas, botones, párrafos— y
 * ya están en tamaños sanos: 12 es el piso de lo legible y 17 es cómodo. Si se
 * los hiciera fluidos, TODAS las tarjetas y botones del juego cambiarían de
 * medida en cada ancho, que es justo la clase de temblor que rompe una
 * interfaz que hoy funciona.
 *
 * Del 5 al 8 son los títulos, y ahí sí: 48 px de título en un teléfono de 360
 * es un título que ocupa tres renglones y empuja todo lo importante abajo del
 * borde. Estos bajan solos hasta un tamaño que entra, y suben en una pantalla
 * grande sin que nadie escriba una media query.
 *
 * La cuenta de cada `clamp` es la recta que pasa por (360px → mínimo) y
 * (1440px → máximo); el término en `vw` es la pendiente.
 */
/*
 * LOS TÍTULOS BAJARON UN ESCALÓN, Y ADEMÁS SIGUEN LA DENSIDAD.
 *
 * El tope de `--t-8` era 50 px. Medido en la portada de una notebook de 768: el
 * título solo se llevaba 58 px de alto y, con su aire, empujaba los dos botones
 * principales casi al borde. Un título no compite con el contenido por ser
 * grande: compite por ser el primero y estar solo.
 *
 * Los nuevos topes son 18 / 24 / 30 / 40, y del 6 al 8 se multiplican por la
 * densidad: en una pantalla baja el título es lo primero que tiene que ceder,
 * porque es lo único que se entiende igual en 26 que en 40.
 *
 * Del 1 al 4 siguen fijos por el motivo de siempre: son el texto de botones y
 * tarjetas, y hacerlos fluidos hace temblar toda la interfaz.
 */
:root {
  --t-5-size: clamp(16px, 15.3px + 0.19vw, 19px);
  --t-6-size: calc(clamp(18px, 16.7px + 0.37vw, 24px) * var(--densidad));
  --t-7-size: calc(clamp(21px, 18.4px + 0.74vw, 29px) * var(--densidad));
  --t-8-size: calc(clamp(25px, 20.5px + 1.25vw, 39px) * var(--densidad));

  /*
   * Y EL RENGLÓN DE LOS TÍTULOS SE APRETÓ.
   *
   * `1.18` en un título de 39 px son 7 px de aire entre renglones que no dicen
   * nada. Los títulos grandes van apretados; el texto que se lee de corrido,
   * no se toca.
   */
  --t-6-lh: 1.14;
  --t-7-lh: 1.08;
  --t-8-lh: 1.0;
}

/*
 * EL PISO DE LO LEGIBLE, Y EL ESCALÓN QUE FALTABA.
 *
 * Había 216 textos por debajo de 12 px. Buscándolos en el CSS aparecieron
 * CUARENTA Y CINCO reglas con `11px` o `10px` escritos a mano, repartidas en
 * siete archivos: insignias, contadores, teclas, rótulos de grupo, el crédito
 * del mapa. Nadie los eligió como sistema; cada uno se puso donde hacía falta
 * que algo entrara.
 *
 * O sea que faltaba un escalón. La escala arrancaba en 12 y abajo de eso cada
 * quien improvisaba. `--t-0-size` es ese escalón, y tiene una gracia: vale 11
 * donde hay mouse —una pantalla grande, de cerca, donde 11 se lee bien y deja
 * la interfaz compacta— y 12,5 donde hay dedo, que es donde el texto chico se
 * vuelve ilegible: pantalla chica, lejos de los ojos y a veces al sol.
 *
 * Es la idea de todo el archivo en una línea: el mismo componente, distinto
 * según el aparato, sin duplicar nada.
 */
:root {
  --t-0-size: 11px;
}

@media (pointer: coarse) {
  :root {
    --t-0-size: 12.5px;
    --t-1-size: 12.5px;
  }
}

/* ==========================================================================
 *  3. TODO LO QUE SE TOCA, SE PUEDE TOCAR
 * ========================================================================== */

/*
 * LA REGLA, Y POR QUÉ NO ES `min-height` A SECAS.
 *
 * Agrandar el botón a 44 px rompe los diseños donde el botón es una pieza
 * dentro de una fila apretada: una paleta de colores, los puntitos de paginar,
 * el zoom del mapa. Lo que hace falta no es que el DIBUJO sea más grande, es
 * que el ÁREA QUE RESPONDE lo sea.
 *
 * Por eso se agranda con un `::after` invisible centrado: el botón se sigue
 * viendo de 36 px y se toca como si midiera 44. Es la técnica que usan las
 * aplicaciones nativas y no mueve ni un píxel del diseño.
 *
 * Se aplica sólo donde hay dedo. Con mouse, 36 px es cómodo y agrandar el área
 * taparía lo de al lado sin motivo.
 */
@media (pointer: coarse) {

  .unc-area-tocable {
    position: relative;
  }

  .unc-area-tocable::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tocable));
    height: max(100%, var(--tocable));
    transform: translate(-50%, -50%);

    /* Que no tape al vecino ni se coma el clic de nadie más. */
    z-index: 0;
  }
}

/*
 * LOS ENLACES SUELTOS ADENTRO DE UN TEXTO.
 *
 * «¿Te olvidaste la contraseña?», «Creala gratis», «Pedí otros dibujos». Son
 * renglones de 18 px de alto, y son la salida de emergencia de alguien que se
 * trabó: el que no puede entrar, el que no tiene cuenta, el que no distingue
 * los dibujos. Errarles con el dedo es quedarse afuera.
 *
 * Se les da alto de dedo sin sacarlos del párrafo: siguen siendo un enlace en
 * medio de una frase, sólo que ahora se puede tocar.
 */
@media (pointer: coarse) {
  .ayuda a,
  .entrada-pie a,
  .entrada-olvide a,
  .aviso a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tocable-chico);
  }
}

/*
 * LAS INSIGNIAS, LAS TECLAS Y LOS RÓTULOS CHIQUITOS.
 *
 * Son los que quedaron abajo de 12: las insignias del mapa y de la agenda
 * («Tuya», «3 adentro»), las teclas del menú de atajos, los grupos del
 * catálogo del taller. Ninguno es decorativo: los tres dicen algo que no está
 * escrito en ningún otro lado.
 *
 * `--t-1-size` es el piso del sistema (12, y 12,5 donde se toca con el dedo),
 * así que esto no es un número más: es el mismo piso que todo lo demás.
 */
/*
 * (Los ocho que la auditoría encontró a la vista usan `--t-0-size` en su
 * propio archivo, que es donde viven. Acá sólo queda el token.)
 */

/*
 * EL CRÉDITO DEL MAPA, EN TODAS LAS PANTALLAS QUE TENGAN MAPA.
 *
 * Estaba resuelto en `mapa.css`… que sólo carga el mapa de la ciudad. El
 * mercado de terrenos, «crear personaje» y el panel de terrenos también
 * muestran mapas y no cargan ese archivo: ahí el crédito quedaba en 10 px.
 *
 * Y hay una trampa de orden: `leaflet.css` se carga DESPUÉS del paquete
 * (`layouts/app.php`), así que sus reglas ganan a las de acá aunque estén
 * escritas antes. Por eso el selector nombra también al contenedor: con
 * `.leaflet-container` adelante pesa más y no depende del orden.
 *
 * Es un crédito OBLIGATORIO por la licencia de OpenStreetMap: no se puede
 * esconder ni dejar ilegible.
 */
.leaflet-container .leaflet-control-attribution {
  font-size: max(var(--t-0-size), 11px) !important;
}

@media (pointer: coarse) {
  .leaflet-container .leaflet-control-attribution {
    padding: 0 10px !important;
  }

  .leaflet-container .leaflet-control-attribution a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tocable-chico);
  }
}

/* ==========================================================================
 *  4. NADA SE SALE DE ANCHO, POR CONSTRUCCIÓN
 * ========================================================================== */

/*
 * EL CULPABLE DE CASI TODO EL SCROLL HORIZONTAL DEL MUNDO.
 *
 * Una pieza de flex o de grid arranca con `min-width: auto`, que quiere decir
 * «no me achiques más allá de mi contenido». Un nombre largo sin espacios, un
 * precio de siete cifras o una imagen ancha empujan al padre y el padre empuja
 * la página.
 *
 * Esto NO es esconder el problema con `overflow: hidden` —que es lo que el
 * usuario prohibió y con razón—: es dejar que la pieza se achique y que el
 * texto haga lo que sabe hacer, que es ir al renglón de abajo.
 */
.j-panel > *,
.j-tarjeta > *,
.unc-fila > *,
.eco-cabecera > *,
.unc-hoja-cuerpo > * {
  min-width: 0;
}

/*
 * Y LAS PALABRAS QUE NO ENTRAN.
 *
 * Un nombre de mueble como «Estantería-modular-de-tres-cuerpos» no tiene dónde
 * cortarse. `overflow-wrap` la deja partir antes que empujar la tarjeta.
 */
.j-tarjeta,
.unc-fila,
.unc-teja-texto,
.entrada-ficha,
.eco-veredicto-texto {
  overflow-wrap: anywhere;
}

/*
 * NINGUNA IMAGEN ROMPE SU CAJA.
 *
 * Es de esas reglas que valen por veinte arreglos: cualquier retrato, mueble o
 * ilustración que llegue más ancho de lo previsto se acomoda en vez de abrir
 * la página. No toca los lienzos del juego, que miden lo que el motor les dice.
 */
img, svg:not(.unc-i):not(.j-icono):not(.icono-svg), video {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
 *  5. LO QUE VA PEGADO A UN BORDE RESPETA EL APARATO
 * ========================================================================== */

/*
 * En un teléfono con notch o con barra de gestos, lo que va pegado al borde
 * queda debajo del vidrio. `env(safe-area-inset-*)` vale 0 en todo lo demás,
 * así que esto no cambia nada en una computadora.
 */
.masthead {
  padding-top: var(--seguro-arriba);
  padding-left: var(--seguro-izq);
  padding-right: var(--seguro-der);
}

/* ==========================================================================
 *  6. EL TOOLTIP NO PUEDE DEPENDER DE UN PUNTERO QUE NO EXISTE
 * ========================================================================== */

/*
 * `data-tip` se muestra al pasar el mouse por encima. En una pantalla táctil no
 * hay «por encima»: el primer toque ya es un clic, así que el cartelito no
 * aparece NUNCA y lo que explicaba se pierde.
 *
 * Donde no hay puntero, el texto de la pista pasa a ser la etiqueta accesible
 * del control —la que lee el lector de pantalla— y se muestra al mantener
 * apretado, que es el gesto que la gente ya conoce.
 */
@media (hover: none) {
  [data-tip]::after,
  [data-tip]::before {
    display: none !important;
  }

  /* Y al mantener apretado, el navegador muestra el título nativo. */
  [data-tip] { -webkit-touch-callout: default; }
}

/* ==========================================================================
 *  7. PANTALLA BAJA: EL EJE QUE FALTABA
 * ========================================================================== */

/*
 * Una notebook de 1366×768 con la barra del navegador tiene ~620 px de alto
 * útil. Un celular acostado tiene 390. Ninguna regla del proyecto miraba eso,
 * así que las dos recibían el diseño pensado para 900 px de alto y el botón de
 * abajo quedaba abajo del borde.
 *
 * Acá se recorta el aire de arriba y abajo, que es lo que sobra cuando falta
 * altura, sin tocar el aire de los costados, que es lo que hace que se lea.
 */
/*
 * ACÁ HABÍA DOS ESCALERAS DE `--e-*` PARA 620 Y 440 PX DE ALTO.
 *
 * Se fueron, y no porque sobraran: porque las hace la sección 0. Eran valores
 * fijos escritos a mano para dos alturas concretas —y sólo esas dos—, así que
 * una notebook de 768 no recibía ninguno. La densidad cubre todas las alturas
 * con una sola cuenta, incluidas ésas: a 620 px de alto vale .82, que sobre
 * los mismos escalones da 14,8 / 24,6 / 34,4 / 44,3. Muy parecido a lo que
 * decían estas reglas, pero sin tener que acertarle a cada pantalla.
 *
 * El aire de la página —`--aire-pagina`, `--aire-pie`— tiene su propia escalera
 * y está al final de la sección 8: se declara por primera vez más abajo, así
 * que un escalón escrito en este punto del archivo no pisaría nada.
 */

/* ==========================================================================
 *  8. EL ARMAZÓN: LA VENTANA ES LA RESTRICCIÓN, NO UNA SUGERENCIA
 * ==========================================================================
 *
 * ACÁ ESTABA EL BUG QUE LE PONÍA UNA BARRA DE DESPLAZAMIENTO A TODO.
 *
 * El armazón del sitio es `body` en columna con `min-height: 100dvh`, la
 * cabecera arriba, `main` con `flex: 1 0 auto` y el pie abajo. Leído así
 * parece correcto, y tiene un agujero:
 *
 *     main crece hasta llenar la ventana
 *     y DESPUÉS se suma el pie
 *     ⇒ el documento mide 100dvh + el pie, SIEMPRE
 *
 * Medido en el login de 1366 × 768: el documento medía 903 px. De los 135 que
 * sobraban, 121 eran el pie (73 de alto + 48 de margen). O sea que hasta una
 * página vacía tenía garantizada su barra de desplazamiento, y por eso la
 * auditoría de este proyecto —que sólo miraba el scroll HORIZONTAL— decía
 * «0 defectos» mientras el captcha del login quedaba abajo del borde.
 *
 * El arreglo son dos líneas y valen para las 14 pantallas del proyecto:
 *
 *   · el margen de arriba del pie pasa a ser `auto`. En una columna de flex un
 *     margen `auto` SE COME el espacio libre en vez de sumar alto, así que en
 *     una página que entra el pie se va al fondo de la ventana y el documento
 *     mide exactamente 100dvh;
 *   · y `main` puede encogerse (`min-height: 0`), que es lo que hace falta
 *     para que un hijo con su propio desplazamiento no empuje la página.
 *
 * La separación que daba el margen la da ahora el relleno del propio pie, que
 * se ve igual y no miente sobre el alto.
 */
body > .pie { margin-top: auto; }

body > main {
  flex: 1 1 auto;
  min-height: 0;
}

/*
 * EL AIRE DE LA PÁGINA ES UN TOKEN, NO UNA REGLA.
 *
 * Primero escribí esto como reglas —`.hoja { padding-block: … }` adentro de
 * una media query— y NO FUNCIONÓ. El motivo es el orden de los paquetes:
 * `unc_responsive.css` se lee SEGUNDO, antes que `base.css`, así que a igual
 * especificidad gana siempre el componente y la capa del sistema no pisa nada.
 *
 * Y está bien que sea así: esta capa existe para poner TOKENS antes de que los
 * componentes los usen. Entonces el aire de arriba y abajo de una página pasa
 * a ser un token, los componentes lo leen, y el sistema lo mueve según la
 * pantalla sin pelearse con nadie por la especificidad.
 *
 * Lo usan `.hoja`, `.hoja-angosta`, `.entrada-hoja` y el pie.
 */
:root {
  --aire-pagina: var(--e-6);
  --aire-pagina-abajo: var(--e-5);
  --aire-pie: var(--e-5);
}

/*
 * PRIMER ESCALÓN: 920. Es el monitor de 1440 × 900 y la notebook de 1536 × 864,
 * que se salían por seis y por treinta píxeles. Treinta píxeles de relleno no
 * son una decisión de diseño: son la diferencia entre ver el botón y tener que
 * ir a buscarlo con la rueda.
 */
@media (max-height: 920px) {
  :root {
    --aire-pagina: var(--e-5);
    --aire-pagina-abajo: var(--e-5);
    --aire-pie: var(--e-4);
  }
}

/*
 * LA PANTALLA BAJA DE VERDAD EMPIEZA EN 820, NO EN 620.
 *
 * El eje del alto arrancaba en 620 px, que es un celular acostado. Pero las
 * dos resoluciones donde de verdad falta altura son las notebooks —1366 × 768
 * y 1280 × 720— y ninguna de las dos llegaba a ningún corte: recibían el
 * diseño pensado para 900 px de alto y se salían por abajo.
 *
 * Acá se recorta el aire de arriba y abajo —que es lo que sobra cuando falta
 * altura— sin tocar el de los costados, que es lo que hace que se lea, y sin
 * achicar una sola letra.
 */
@media (max-height: 820px) {
  :root {
    --aire-pagina: var(--e-4);
    --aire-pagina-abajo: var(--e-4);

    /* El pie es una línea de copyright: en una pantalla baja no puede costar
       73 px de los 768 que hay. */
    --aire-pie: var(--e-3);
  }
}

/*
 * LOS DOS ESCALONES QUE FALTABAN, Y POR QUÉ ESTÁN ACÁ ABAJO.
 *
 * La sección 7 ya fijaba estos mismos tres tokens para 620 y para 440, y NO
 * HACÍAN NADA: están escritos más arriba en el archivo, así que el bloque
 * `:root` de esta sección —sin media query, a igual especificidad y más
 * abajo— los volvía a poner en el valor grande. Resultado medido: un celular
 * acostado recibía el aire de una notebook.
 *
 * El escalón tiene que venir DESPUÉS de la base que pisa. Los tamaños de letra
 * y la escala de espacios se quedan arriba, donde estaban, porque ésos no los
 * toca nadie después.
 */
@media (max-height: 620px) {
  :root {
    --aire-pagina: var(--e-3);
    --aire-pagina-abajo: var(--e-3);
    --aire-pie: var(--e-2);
  }
}

@media (max-height: 440px) {
  :root {
    --aire-pagina: var(--e-2);
    --aire-pagina-abajo: var(--e-2);
    --aire-pie: var(--e-2);
  }
}

/* ==========================================================================
 *  9. LO QUE SE DESPLAZA, SE DESPLAZA ADENTRO
 * ==========================================================================
 *
 * La regla que el usuario pidió y que faltaba escribir en algún lado:
 *
 *   · una pantalla que ENTRARÍA no puede tener barra de desplazamiento;
 *   · una lista naturalmente larga —un inventario, un chat, una tabla de
 *     cientos de filas— SÍ se desplaza, pero adentro de su caja, no llevándose
 *     la aplicación entera.
 *
 * `--alto-libre` es lo que queda después de la cabecera: es la medida con la
 * que una caja se dice «yo ocupo lo que hay y adentro me desplazo». Se calcula
 * una sola vez acá para que ninguna pantalla se invente la suya.
 */
:root {
  /* La cabecera tiene su propio token desde el rediseño de densidad: la altura
     de la barra de arriba y la de un botón alto dejaron de ser el mismo
     número, que es lo que obligaba a elegir entre una cabecera de 58 px y un
     botón principal chico. */
  --alto-cabecera: var(--h-barra);
  --alto-libre: calc(var(--alto-util) - var(--alto-cabecera));

  /*
   * LO QUE MIDE EL PIE, CALCULADO Y NO ADIVINADO.
   *
   * Es su relleno de arriba y abajo —que se achica con la pantalla, ver
   * `--aire-pie`— más el renglón de adentro y el borde de arriba. Medido: da
   * 49 px en una notebook y 57 en un monitor, que es exactamente lo que el
   * navegador informa.
   *
   * Hace falta porque una pantalla que quiere ocupar «lo que hay» tiene que
   * descontar el pie: la primera versión de esto lo estimaba en 5,5rem y le
   * erraba por 60 px, que es justo lo que después se salía por abajo.
   */
  --alto-pie: calc(var(--aire-pie) * 2 + 25px);

  /* La medida que usa una pantalla para decir «yo ocupo todo lo que hay». */
  --alto-contenido: calc(var(--alto-libre) - var(--alto-pie));
}

/*
 * La caja que se queda con lo que hay y se desplaza adentro. Quien la use
 * tiene que ser hijo de algo que ya sepa cuánto mide.
 */
.j-rodable {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Con el dedo, el desplazamiento de adentro tiene que frenar solo en los
     bordes en vez de arrastrar la página de atrás. */
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
 *  10. UNA PÁGINA QUE SE PLANTA EN LA VENTANA
 * ==========================================================================
 *
 * `body` tiene `min-height: 100dvh`, que quiere decir «por lo menos la ventana»
 * y no «como mucho la ventana». Para una página de lectura está bien: si el
 * texto es largo, la página crece y se desplaza, que es lo que uno espera.
 *
 * Para un FORMULARIO no. Ahí el contenido es una tarea con principio y fin, y
 * lo que hay que garantizar es otra cosa: que la cabecera, el aviso de error y
 * el pie se queden donde están, y que lo que sobre se desplace ADENTRO de la
 * ficha en vez de llevarse la página entera. Medido en el ingreso con captcha
 * de un 390 × 844: el documento medía 1.205 px contra 844 de ventana, así que
 * el botón de entrar quedaba 361 px por debajo del borde.
 *
 * `j-planta` es eso, y son tres reglas:
 *
 *   · `body` pasa de «por lo menos la ventana» a «exactamente la ventana»;
 *   · el centro se vuelve una columna;
 *   · y la página se queda con lo que sobra después de la cabecera, los avisos
 *     y el pie —sin restarlos a mano: los descuenta el propio flex—.
 *
 * Lo importante es que NO se calcula ningún alto. Un `calc()` con la cabecera y
 * el pie adentro es una estimación que se rompe el día que el pie tiene dos
 * renglones; esto mide de verdad.
 *
 * Después, quien quiera desplazarse adentro se pone `j-rodable` (o su
 * equivalente). Lo que nunca puede pasar es que el contenido quede cortado: si
 * no entra, se desplaza, pero adentro de su caja.
 */
body:has(> main > .j-planta) {
  height: 100vh;
  height: var(--alto-util);
}

body:has(> main > .j-planta) > main {
  display: flex;
  flex-direction: column;
}

.j-planta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;

  /*
   * `width: 100%` NO SOBRA, aunque un hijo de flex ya se estire por defecto.
   *
   * `.hoja` —y casi toda página del proyecto— se centra con `margin-inline:
   * auto`. Un margen automático en un hijo de flex APAGA el estiramiento y lo
   * deja del ancho de su contenido. Medido apenas puse esto: el ingreso pasó de
   * usar los 1.224 px de la ventana a 854, la escena de la izquierda quedó en
   * una tira de 72 px y los muñecos se veían cortados por la mitad.
   *
   * Con el ancho declarado, el margen automático no tiene sobrante que repartir
   * y `max-width` sigue mandando igual que antes.
   */
  width: 100%;
}

/*
 * EL RESPALDO PARA EL NAVEGADOR QUE NO ENTIENDE `:has()`.
 *
 * Sin `:has()`, `body` se queda con su `min-height` y la página vuelve a
 * desplazarse como antes: se ve peor, pero no se pierde nada ni queda nada
 * tapado. Es la degradación correcta para una pantalla de ingreso, donde lo
 * único que no se puede perdonar es que alguien no llegue al botón.
 */

/* ==========================================================================
 *  11. LOS PISOS DEL DEDO — ESTE BLOQUE VA ÚLTIMO, SIEMPRE
 * ==========================================================================
 *
 * LA TRAMPA QUE YA APARECIÓ CUATRO VECES EN ESTE PROYECTO: una regla de ANCHO
 * achica un control por debajo de lo que un dedo acierta, y gana por estar
 * escrita después. Pasó con los pines del mapa (28 px), las herramientas del
 * taller (20-38 px), las solapas de los paneles (38 px) y ahora habría vuelto a
 * pasar con la densidad, que en un teléfono vale .88 y dejaría los botones en
 * 38,7.
 *
 * Por eso los pisos van acá abajo, después de TODO lo demás del archivo:
 * cualquier cosa que el sistema haya achicado por falta de lugar, acá se
 * vuelve a levantar hasta lo que se puede tocar.
 *
 * Y sólo donde hay dedo. Con mouse, 38 px es cómodo y deja entrar una fila más
 * de información en la misma pantalla, que es justamente el objetivo.
 *
 * (Este bloque estaba en `estilos_generales.css`, que se lee PRIMERO. Ahí no
 * servía: la densidad, escrita después, se lo comía.)
 */
@media (pointer: coarse) {
  :root {
    --h-1: 44px;
    --h-2: 48px;
    --h-3: 52px;
    --h-4: 56px;

    /*
     * LA CABECERA NO ES UN CONTROL: NO LLEVA PISO TÁCTIL.
     *
     * Lo que se toca adentro de ella —el menú, el tema, «Jugar»— sí, y esos son
     * `--h-1`, que acá arriba ya volvió a 44. La franja en sí puede medir 52 en
     * un teléfono, y son 6 px menos de los 844 que hay. Que la barra creciera
     * con sus botones era justamente el problema: ver el punto 14 del pedido.
     */
    --h-barra: 52px;
    --h-banda: 52px;
    --h-banda-chica: 44px;
  }
}


/* ===== base.css ===== */
/*
 * ==========================================================================
 *  LAS PÁGINAS DE UNCORRENTINO — la base de todo lo que no es la sala
 * ==========================================================================
 *
 * Este archivo vino de CtesYa (una guía de comercios) y tenía de todo:
 * fichas de locales, radar, planes, horarios. Lo que usan de verdad las
 * páginas del juego (la portada, el mapa, los terrenos, el panel, el taller,
 * entrar y los errores) está rehecho con el lenguaje del juego —piezas
 * redondas con canto, Fredoka en títulos y botones, profundidad por capas— y
 * lleva su comentario: el fondo, los botones, los campos, los avisos, la
 * barra, el pie, el menú de la cuenta y, al final, «LAS PÁGINAS DEL JUEGO».
 * El resto (fichas de comercio, radar, planes, horarios, galerías) es
 * herencia que ninguna vista usa hoy; se deja porque ya toma los colores de
 * las variables.
 *
 * Los componentes nuevos van en `unc_ui.css` (prefijo `j-`); acá quedan las
 * clases de siempre (`.btn-1`, `.aviso`, `.masthead`…) porque las usan las
 * vistas, el JS que arma los globos del mapa y el panel de terrenos.
 */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/*
 * EL FONDO DE LAS PÁGINAS ES EL «MUNDO»: la capa más honda. Los paneles
 * (`--sup-1`) y las fichas (`--sup-2`) se apoyan encima. Lleva una trama de
 * baldosas isométricas casi invisible, la misma forma del piso de las casas:
 * es lo que dice «esto es el juego» aunque el recorte no muestre un mueble.
 * Sin `background-attachment: fixed`, que obliga a repintar todo el fondo en
 * cada paso de la rueda (y la máquina de prueba es un Celeron).
 */
body {
  font-family: var(--f-texto);
  font-size: var(--t-3-size);
  line-height: var(--t-3-lh);
  letter-spacing: var(--t-3-ls);
  color: var(--carbon);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;

  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cpath d='M32 0 64 16 32 32 0 16Z' fill='none' stroke='%23fff4e4' stroke-opacity='.035' stroke-width='1'/%3E%3C/svg%3E");

  background-color: var(--sup-0);
  background-image: var(--grad-lienzo), var(--trama);
  background-size: auto, 64px 32px;
}

:root[data-theme="light"] body {
  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cpath d='M32 0 64 16 32 32 0 16Z' fill='none' stroke='%232e2140' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
}

img, video, svg { max-width: 100%; display: block; }

a { color: var(--acento-texto); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

:focus-visible { outline: var(--foco-outline); outline-offset: 2px; }

::selection { background: var(--acento-tinte); color: var(--carbon); }

.tabular, .cifra { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 {
  font-family: var(--f-juego);
  font-weight: 600;
  color: var(--carbon);
  text-wrap: balance;
}

.t-1 {
  font-size: var(--t-1-size); line-height: var(--t-1-lh);
  letter-spacing: var(--t-1-ls); font-weight: var(--t-1-w);
  text-transform: uppercase;
}
.t-2 { font-size: var(--t-2-size); line-height: var(--t-2-lh); letter-spacing: var(--t-2-ls); font-weight: var(--t-2-w); }
.t-3 { font-size: var(--t-3-size); line-height: var(--t-3-lh); letter-spacing: var(--t-3-ls); font-weight: var(--t-3-w); }
.t-4 { font-size: var(--t-4-size); line-height: var(--t-4-lh); letter-spacing: var(--t-4-ls); font-weight: var(--t-4-w); }
.t-5 { font-size: var(--t-5-size); line-height: var(--t-5-lh); letter-spacing: var(--t-5-ls); font-weight: var(--t-5-w); }
.t-6 { font-size: var(--t-6-size); line-height: var(--t-6-lh); letter-spacing: var(--t-6-ls); font-weight: var(--t-6-w); }
.t-7 { font-size: var(--t-7-size); line-height: var(--t-7-lh); letter-spacing: var(--t-7-ls); font-weight: var(--t-7-w); }
.t-8 {
  font-size: var(--t-8-size); line-height: var(--t-8-lh);
  letter-spacing: var(--t-8-ls); font-weight: var(--t-8-w);
  font-variant-numeric: tabular-nums;
}

.nombre {
  font-family: var(--f-nombre);
  font-weight: 600;
  letter-spacing: -.019em;
}

.icono-svg { display: block; flex-shrink: 0; }

.rotulo {
  font-size: var(--t-1-size); line-height: var(--t-1-lh);
  letter-spacing: var(--t-1-ls); font-weight: var(--t-1-w);
  text-transform: uppercase; color: var(--tinta-3);
}

.suave { color: var(--tinta-2); }
.tenue { color: var(--tinta-3); }

.prosa { max-width: var(--ancho-prosa); }

.prosa-corta { max-width: 48ch; }

.prosa-centro { max-width: 48ch; margin-inline: auto; }
.prosa p + p { margin-top: var(--e-4); }

/*
 * LOS BOTONES DE SIEMPRE, CON CUERPO DE JUEGO.
 *
 * `.btn-1/2/3` los usan las vistas y también el JS que arma los globos del
 * mapa y el panel de terrenos, así que se quedan con su nombre; lo que cambió
 * es que ahora son las mismas piezas que `.j-boton`: redondas, con la letra
 * del juego y un canto abajo que se hunde al apretar.
 *   · `.btn-1`: la acción principal (mandarina);
 *   · `.btn-2`: la secundaria (una pieza de la superficie);
 *   · `.btn-3`: la terciaria (sin cuerpo hasta que pasás por encima).
 */
.btn,
.btn-1, .btn-2, .btn-3 {
  --b-fondo: transparent;
  --b-texto: var(--carbon);
  --b-borde: transparent;
  --b-canto: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--h-2);
  padding: 0 var(--e-4);
  font: 600 var(--t-3-size)/1.1 var(--f-juego);
  letter-spacing: .01em;
  border: 1px solid var(--b-borde);
  border-radius: var(--r-2);
  background: var(--b-fondo);
  color: var(--b-texto);
  box-shadow: 0 3px 0 var(--b-canto), var(--luz-arriba);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition: transform var(--dur-1) var(--curva),
              box-shadow var(--dur-1) var(--curva),
              background-color var(--dur-2) var(--curva),
              border-color var(--dur-2) var(--curva),
              color var(--dur-2) var(--curva),
              filter var(--dur-2) var(--curva);
}
.btn:hover, .btn-1:hover, .btn-2:hover, .btn-3:hover { text-decoration: none; }

.btn:active:not(:disabled), .btn-1:active:not(:disabled),
.btn-2:active:not(:disabled), .btn-3:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--b-canto), var(--luz-arriba);
}

.btn-1 {
  --b-fondo: var(--grad-luz);
  --b-texto: var(--sobre-acento);
  --b-canto: var(--canto-acento);
}
.btn-1:hover { --b-fondo: var(--grad-luz-viva); color: var(--sobre-acento); }

.btn-2 {
  --b-fondo: var(--sup-3);
  --b-borde: var(--filo-fuerte);
  --b-canto: var(--canto);
}
.btn-2:hover { filter: brightness(1.08); }

.btn-3 {
  --b-texto: var(--carbon-2);
  padding: 0 var(--e-3);
  box-shadow: none;
}
.btn-3:hover { --b-fondo: var(--filo); --b-texto: var(--carbon); }
.btn-3:active:not(:disabled) { box-shadow: none; }

.btn .icono-svg, .btn-1 .icono-svg, .btn-2 .icono-svg, .btn-3 .icono-svg { flex: none; }

.btn-alto { min-height: var(--h-4); padding: 0 var(--e-5); font-size: var(--t-4-size); border-radius: var(--r-3); }
.btn-bajo { min-height: var(--h-1); padding: 0 var(--e-3); font-size: var(--t-2-size); }
.btn-ancho { width: 100%; }

.btn-peligro {
  --b-texto: var(--peligro);
}
.btn-peligro:hover { --b-fondo: var(--peligro-tinte); --b-texto: var(--peligro); }

.btn-2.btn-peligro {
  --b-fondo: var(--peligro-tinte);
  --b-borde: color-mix(in srgb, var(--peligro) 45%, transparent);
  --b-canto: color-mix(in srgb, var(--peligro) 40%, var(--canto));
}
.btn-2.btn-peligro:hover { filter: brightness(1.1); }

.btn-1.btn-peligro {
  --b-fondo: var(--peligro);
  --b-texto: #2b0610;
  --b-canto: color-mix(in srgb, var(--peligro) 60%, #000);
}
.btn-1.btn-peligro:hover { --b-fondo: var(--peligro); filter: brightness(1.08); }

.btn:disabled, .btn-1:disabled, .btn-2:disabled, .btn-3:disabled, button:disabled {
  opacity: .5; cursor: not-allowed; filter: saturate(.4);
}

input:disabled, select:disabled, textarea:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: var(--cal-0);
  border-style: dashed;
}

.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--h-2); height: var(--h-2); padding: 0;
  font: inherit;
  border: 1px solid var(--trazo); border-radius: var(--r-2);
  background: var(--sup-2); color: var(--carbon); cursor: pointer;
  transition: background-color var(--dur-1) var(--curva),
              border-color var(--dur-1) var(--curva),
              color var(--dur-1) var(--curva);
}
.btn-icono:hover { background: var(--cal-3); }

.segmentado {
  display: flex;

  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--sup-0);
  border-radius: var(--r-2);
}

.segmento {

  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;

  height: var(--h-1);
  padding: 0 var(--e-2);
  font-family: var(--f-texto);
  font-size: var(--t-2-size);
  font-weight: 500;
  line-height: 1;
  color: var(--carbon-2);
  text-align: center;
  text-decoration: none;
  background: none;
  border: 0;

  border-radius: calc(var(--r-2) - 3px);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva),
              color var(--dur-1) var(--curva),
              box-shadow var(--dur-1) var(--curva);
}

.segmento .icono-svg {
  flex-shrink: 0;
  opacity: .68;
  transition: opacity var(--dur-1) var(--curva);
}

.segmento-texto { white-space: nowrap; }

.segmento:hover { color: var(--carbon); }
.segmento:hover .icono-svg { opacity: 1; }

.segmento[aria-pressed="true"],
.segmento[aria-current="page"] {
  color: var(--acento-texto);
  font-weight: 600;
  background: var(--sup-2);
  box-shadow: var(--s-1);
}
.segmento[aria-pressed="true"] .icono-svg,
.segmento[aria-current="page"] .icono-svg { opacity: 1; }

.segmento:focus-visible { outline: var(--foco-outline); outline-offset: 1px; }

.segmento[disabled] { opacity: .45; cursor: default; }

.segmento-cuenta {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  font-size: var(--t-1-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--r-full);
}
.segmento-cuenta:empty { display: none; }

label, .etiqueta {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-2-size);
  font-weight: 700;
  color: var(--carbon-2);
}

/*
 * Los campos son los mismos que `.j-campo`: un hueco más hondo que el panel
 * (`--sup-0`), borde grueso y, al escribir, borde mandarina. Se mantienen la
 * altura y el ancho de antes porque el taller los usa sin clase.
 */
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="tel"], input[type="search"], input[type="number"], input[type="time"],
input[type="date"], textarea, select, .campo {
  width: 100%;

  max-width: var(--ancho-campo);
  height: var(--h-2);
  padding: 0 var(--e-4);
  font-family: var(--f-texto);
  font-size: var(--t-3-size);
  font-weight: 600;
  color: var(--carbon);
  background: var(--sup-0);
  border: 2px solid var(--linea);
  border-radius: var(--r-2);
  transition: border-color var(--dur-2) var(--curva), background-color var(--dur-2) var(--curva);
}

input[type="number"] { font-family: var(--f-numero); font-variant-numeric: tabular-nums; }

textarea { height: auto; min-height: 7rem; padding: var(--e-3) var(--e-4); line-height: 1.55; resize: vertical; }

:is(input, textarea, select, .campo):hover:not(:disabled) { border-color: var(--trazo); }

input:focus, textarea:focus, select:focus, .campo:focus {
  outline: none;
  border-color: var(--acento);
  background-color: var(--sup-1);
}

input::placeholder, textarea::placeholder { color: var(--carbon-3); font-weight: 500; }

select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--e-6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%),
    linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  padding: 0; accent-color: var(--acento); cursor: pointer;
}

input[type="file"] {
  height: auto; padding: var(--e-2); font-size: var(--t-2-size);
  color: var(--tinta-2); cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: var(--e-3); height: var(--h-1); padding: 0 var(--e-3);
  font-family: inherit; font-size: var(--t-2-size); font-weight: 500;
  color: var(--tinta); background: var(--cal-2);
  border: 1px solid var(--trazo); border-radius: var(--r-1); cursor: pointer;
}

.grupo-campo { margin-bottom: var(--e-4); }

.ayuda {
  margin-top: var(--e-2);
  font-size: var(--t-2-size);
  line-height: 1.5;
  color: var(--carbon-2);
  max-width: var(--ancho-prosa);
}

.ayuda strong { color: var(--carbon); }

.casilla {
  display: flex; align-items: flex-start; gap: var(--e-3);
  margin: 0;
  font-size: var(--t-3-size);
  line-height: var(--t-3-lh);
  font-weight: 400;
  color: var(--tinta);
  cursor: pointer;
}
.casilla input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.casilla strong { font-weight: 600; }

.ficha {
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  padding: var(--e-5);
}

/* La ficha que se levanta: es el `.j-panel` con otro nombre. */
.ficha-alzada {
  background: var(--sup-1);
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-4);
  box-shadow: var(--s-3), var(--luz-arriba);
  padding: var(--e-5);
}

.ficha-formulario { padding: clamp(var(--e-4), 4vw, var(--e-6)); }

.ficha-enlace {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-2) var(--curva),
              box-shadow var(--dur-2) var(--curva);
}
.ficha-enlace:hover {
  text-decoration: none;
  border-color: var(--trazo);
  box-shadow: var(--s-2);
}
.ficha-enlace:focus-visible { outline: var(--foco-outline); outline-offset: 2px; }

.zona-peligro { border-color: var(--peligro); }
.zona-peligro > .ficha-cabecera h2 { color: var(--peligro); }

.aviso-trato {
  border-left: 3px solid var(--acento);
  background: var(--acento-tinte);
}

.aviso-trato summary::-webkit-details-marker { display: none; }

.aviso-trato summary {
  list-style: none;
  color: var(--tinta-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aviso-trato summary:hover { color: var(--carbon); }

.mensaje-equipo {
  border-left: 3px solid var(--ladrillo);
  background: var(--ladrillo-tinte);
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ficha-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-4); padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--linea);
}

.ficha-pie {
  display: flex; gap: var(--e-2); flex-wrap: wrap;
  margin-top: var(--e-4); padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

.filete { height: 1px; background: var(--linea); border: 0; margin: var(--e-6) 0; }

.sello {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 8px;
  font-size: var(--t-0-size); font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  white-space: nowrap;
  line-height: 1;
}

.sello-pro { color: var(--sello-pro); background: var(--sello-pro-fondo); }

.sello-premium {
  color: var(--sello-premium);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--sello-premium-fondo), var(--sello-premium-fondo)) padding-box,
    var(--grad-luz) border-box;
  box-shadow: var(--brillo);
}

.sello-pro::before,
.sello-premium::before {
  content: ''; width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: currentColor;
  flex-shrink: 0;
}

.promo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid transparent;
  border-radius: var(--r-3);
  background:
    linear-gradient(var(--acento-tinte), var(--acento-tinte)) padding-box,
    var(--grad-luz) border-box;
  font-size: var(--t-4-size);
  color: var(--carbon);
}

.promo-rotulo {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--grad-luz);
  color: var(--sobre-acento);
  font-size: var(--t-0-size); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1;
}

.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
  gap: var(--e-5);
  align-items: start;
}

.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--sup-2);

  border: 1px solid var(--filo);
  border-radius: var(--r-3);
  box-shadow: var(--s-tarjeta);
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: box-shadow var(--dur-2) var(--curva),
              transform var(--dur-2) var(--curva),
              border-color var(--dur-2) var(--curva);
}
.tarjeta:hover, .tarjeta:focus-visible {
  text-decoration: none;

  border-color: var(--filo-fuerte);
  box-shadow: var(--s-tarjeta-alta);
  transform: translateY(-2px);
}
.tarjeta:focus-visible { outline: var(--foco-outline); outline-offset: 3px; }

.tarjeta-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--cal-0);
  overflow: hidden;
}
.tarjeta-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--curva);
}
.tarjeta:hover .tarjeta-foto img { transform: scale(1.03); }

.tarjeta-sello { position: absolute; top: var(--e-3); right: var(--e-3); z-index: 2; }

.tarjeta-logo {
  position: absolute; left: var(--e-4); bottom: calc(var(--e-4) * -1);
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--cal-3);
  border: 3px solid var(--cal-2);
  display: grid; place-items: center;
  font-family: var(--f-nombre); font-size: 20px; color: var(--tinta-2);
  z-index: 2;
}

.tarjeta-cuerpo { padding: var(--e-4); display: grid; gap: var(--e-2); }
.tarjeta-foto + .tarjeta-cuerpo { padding-top: var(--e-6); }

.tarjeta-nombre {
  font-size: 17px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3;
  color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-meta {
  font-size: var(--t-2-size); color: var(--tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-resumen {
  font-size: var(--t-2-size); line-height: 1.5; color: var(--tinta-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-pie {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  margin-top: var(--e-1);
}

.tarjeta-sin-foto {
  background: var(--cal-2);
  box-shadow: none;
  border: 1px solid var(--linea);
}
.tarjeta-sin-foto:hover { box-shadow: var(--s-1); transform: none; border-color: var(--trazo); }
.tarjeta-sin-foto .tarjeta-cuerpo {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-3) var(--e-4);
}
.tarjeta-sin-foto .tarjeta-inicial {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: var(--cal-0);
  display: grid; place-items: center;
  font-family: var(--f-nombre); font-size: 18px; color: var(--tinta-2);
}
.tarjeta-sin-foto .tarjeta-nombre { font-size: 15.5px; -webkit-line-clamp: 1; }

.tarjeta-compacta-texto { min-width: 0; display: block; }
.tarjeta-compacta-texto .tarjeta-nombre,
.tarjeta-compacta-texto .tarjeta-meta { display: block; }
.tarjeta-compacta-texto .estado { margin-top: 2px; font-size: var(--t-2-size); }

.tarjeta-premium { grid-column: span 2; }
.tarjeta-premium .tarjeta-foto { aspect-ratio: 16 / 9; }
.tarjeta-premium .tarjeta-nombre { font-size: 21px; }
.tarjeta-premium .tarjeta-logo { width: 60px; height: 60px; font-size: 24px; }

@media (max-width: 719px) {

  .tarjeta-premium { grid-column: span 1; }
}

.tarjeta-tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.tarjeta-tira img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cal-0); }

.puntaje { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-2-size); }
.puntaje b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }
.puntaje .estrella { color: var(--ambar-texto); }
.puntaje-vacio { font-size: var(--t-2-size); color: var(--tinta-3); }

.estado {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-3-size);
}

.estado::before {
  content: '';
  width: 8px; height: 8px; flex-shrink: 0;
  border-radius: var(--r-full);
}

.estado-abierto { color: var(--monte); font-weight: 600; }
.estado-abierto::before { background: var(--monte); }

.estado-cerrado { color: var(--tinta-2); }
.estado-cerrado::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

.estado-sin-horario { color: var(--tinta-3); }
.estado-sin-horario::before { display: none; }

.estado-insignia {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: var(--h-1); padding: 0 var(--e-4);
  background: var(--sup-1);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  font-size: var(--t-3-size); font-weight: 500;
}

.estado-insignia.estado-abierto { background: var(--verde-tinte); border-color: transparent; }
.estado-insignia::before {
  content: ''; width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--r-full);
}
.estado-insignia.estado-abierto::before { background: var(--monte); }
.estado-insignia.estado-cerrado::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.estado-insignia.estado-sin-horario::before { display: none; }

.etiqueta-dato {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 3px var(--e-3);
  font-size: var(--t-2-size); font-weight: 500;
  color: var(--carbon-2); background: var(--sup-1);
  border: 1px solid transparent; border-radius: var(--r-full);
  white-space: nowrap;
}
.etiqueta-dato.acento { color: var(--acento-texto); background: var(--acento-tinte); }
.etiqueta-dato.viva { color: var(--verde); background: var(--verde-tinte); }

.etiqueta-dato.zona { color: var(--indigo); background: var(--indigo-tinte); }

.etiqueta-dato.atencion { color: var(--ambar-texto); background: var(--ambar-fondo); }
.etiqueta-dato.peligro { color: var(--peligro); background: var(--peligro-tinte); }

/*
 * LOS AVISOS: una placa redonda con el puntito de color a la izquierda, el
 * mismo que `.j-aviso` del juego. El texto va siempre en el color de lectura;
 * el color del aviso lo dicen el punto, el borde y el fondo.
 */
.aviso {
  --av-color: var(--rio);
  --av-fondo: var(--rio-tinte);

  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
  border: 1px solid color-mix(in srgb, var(--av-color) 40%, transparent);
  border-radius: var(--r-3);
  background: var(--av-fondo);
  color: var(--carbon);
  font-size: var(--t-2-size);
  font-weight: 600;
  line-height: 1.5;
}

.aviso::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: .38em;
  border-radius: 50%;
  background: var(--av-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--av-color) 22%, transparent);
}

.aviso > * { max-width: var(--ancho-prosa); }
.aviso strong { color: var(--carbon); font-weight: 800; }
.aviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.aviso-info     { --av-color: var(--rio);     --av-fondo: var(--rio-tinte); }
.aviso-bien     { --av-color: var(--verde);   --av-fondo: var(--verde-tinte); }
.aviso-atencion { --av-color: var(--sol);     --av-fondo: var(--sol-tinte); }
.aviso-error    { --av-color: var(--peligro); --av-fondo: var(--peligro-tinte); }

/* Los avisos que deja el servidor al volver de un formulario: aparecen con
   un saltito debajo de la barra, como los del juego. */
.avisos-hoja {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--canal) 0;
}

.aviso-flotante {
  margin: 0;
  max-width: min(560px, 100%);
  border-radius: var(--r-full);
  padding: 10px var(--e-5) 10px var(--e-4);
  box-shadow: var(--s-2);
  animation: j-aparece var(--dur-3) var(--curva-rebote) both;
}

.avisos-flotantes {
  position: fixed;
  top: calc(var(--h-barra) + var(--e-3));
  left: 50%;
  transform: translateX(-50%);

  z-index: 940;

  width: min(var(--ancho-ficha), calc(100vw - var(--e-6)));

  pointer-events: none;
}

.avisos-flotantes .aviso {
  margin-bottom: var(--e-2);
  pointer-events: none;

  box-shadow: var(--s-3);
}
.avisos-flotantes .aviso a,
.avisos-flotantes .aviso button { pointer-events: auto; }

.barra {
  height: 6px; width: 100%;
  background: var(--cal-0);
  border-radius: var(--r-1);
  overflow: hidden;
}
.barra > span { display: block; height: 100%; background: var(--tinta-2); }

.tira-deslizante {
  overflow-x: auto;
  overscroll-behavior-x: contain;

  --fondo-tira: var(--sup-1);

  background:

    linear-gradient(to right, var(--fondo-tira) 40%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--fondo-tira) 40%, transparent) right center / 28px 100% no-repeat local,

    linear-gradient(to right, var(--filo-fuerte), transparent) left center / 22px 100% no-repeat scroll,
    linear-gradient(to left,  var(--filo-fuerte), transparent) right center / 22px 100% no-repeat scroll;
}

.tira-deslizante { scrollbar-width: thin; scrollbar-color: var(--trazo) transparent; }
.tira-deslizante::-webkit-scrollbar { height: 8px; }
.tira-deslizante::-webkit-scrollbar-track { background: transparent; }
.tira-deslizante::-webkit-scrollbar-thumb {
  background: var(--trazo);
  border-radius: var(--r-full);

  border: 2px solid transparent;
  background-clip: padding-box;
}
.tira-deslizante::-webkit-scrollbar-thumb:hover { background: var(--carbon-3); }

.invitacion {
  position: fixed; z-index: 960;
  left: var(--e-4); right: var(--e-4);

  bottom: 0;
  transform: translateY(calc(100% + var(--e-5)));
  opacity: 0;

  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;

  max-width: min(var(--ancho-hoja), 72rem);
  margin: 0 auto;
  padding: var(--e-3) var(--e-5) var(--e-3) var(--e-4);

  background: var(--vidrio);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-3);
  box-shadow: var(--s-tarjeta-alta);

  transition: transform var(--dur-3) var(--curva), opacity var(--dur-3) var(--curva);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .invitacion { background: var(--sup-2); }
}

.invitacion-visible {
  transform: translateY(calc(-1 * var(--e-4)));
  opacity: 1;
}

.invitacion-texto { flex: 1 1 260px; min-width: 0; }

.invitacion-titulo {
  margin: 0;
  font-size: var(--t-4-size); font-weight: 650;
  letter-spacing: var(--t-4-ls);
  color: var(--carbon);
}

.invitacion-detalle {
  margin: 2px 0 0;
  font-size: var(--t-2-size);
  color: var(--carbon-2);
}

.invitacion-detalle strong { color: var(--carbon); font-weight: 650; }

.invitacion-acciones {
  display: flex; align-items: center; gap: var(--e-3);
  flex: 0 0 auto;
}

.invitacion-entrar {
  font-size: var(--t-2-size);
  color: var(--carbon-2);
  white-space: nowrap;
}
.invitacion-entrar:hover { color: var(--carbon); }

.invitacion-cerrar {
  position: absolute; top: 2px; right: 2px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font: inherit; font-size: 20px; line-height: 1;
  color: var(--carbon-3);
  background: none; border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
}
.invitacion-cerrar:hover { color: var(--carbon); background: var(--sup-1); }
.invitacion-cerrar:focus-visible { outline: var(--foco-outline); outline-offset: 2px; }

@media (max-width: 560px) {
  .invitacion {
    left: var(--e-2); right: var(--e-2);
    flex-direction: column; align-items: stretch;
    gap: var(--e-3);
    padding: var(--e-4);

  }

  .invitacion-titulo { padding-right: var(--e-6); }
  .invitacion-acciones { flex-direction: column-reverse; align-items: stretch; }
  .invitacion-acciones .btn-1 { width: 100%; }
  .invitacion-entrar { text-align: center; }
}

.franja-suplantacion {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-2) var(--e-4);
  background: var(--ambar-fondo);
  color: var(--ambar-texto);
  font-size: var(--t-2-size);
  border-bottom: 1px solid var(--filo-fuerte);
}

.franja-suplantacion-texto { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; min-width: 0; }
.franja-suplantacion-detalle { opacity: .8; }

.franja-suplantacion-volver {
  height: var(--h-1);
  padding: 0 var(--e-4);
  font: inherit; font-weight: 650;
  color: var(--ambar-fondo);
  background: var(--ambar-texto);
  border: 0; border-radius: var(--r-full);
  cursor: pointer;
  white-space: nowrap;
}
.franja-suplantacion-volver:hover { opacity: .88; }
.franja-suplantacion-volver:focus-visible { outline: var(--foco-outline); outline-offset: 2px; }

body:has(.franja-suplantacion) .app { height: calc(100dvh - var(--h-1) - var(--e-4)); }

/*
 * ------------------------------------------------------------ LA BARRA (HUD)
 *
 * Una franja sólida —sin vidrio: el desenfoque obliga a recomponer todo lo que
 * pasa por debajo al hacer scroll— con un canto abajo, como las barras del
 * juego.
 *
 * EL ALTO ES `--h-barra`, NO `--h-4`.
 *
 * Eran el mismo token, y eso ataba dos cosas que no tienen por qué medir igual:
 * la franja de arriba y el botón más alto del sistema. Mientras estuvieran
 * juntas, bajar la cabecera de 58 px quería decir achicar «Entrar a mi casa»,
 * así que nunca se bajaba. Ahora la franja tiene su propio token, sigue la
 * densidad (52 px cómoda, 43 en una pantalla baja) y lo que va adentro
 * conserva su piso para el dedo.
 *
 * Medido a 1366 × 768: 58 → 47 px. Once píxeles no parecen nada hasta que se
 * multiplican por las catorce pantallas que la llevan.
 */
.masthead {
  height: var(--h-barra);
  background: var(--sup-1);
  box-shadow: 0 1px 0 var(--filo-fuerte), 0 6px 20px rgb(var(--sombra-tinta) / .22);
  position: sticky; top: 0; z-index: 900;
}

.masthead-interior {
  height: 100%;
  max-width: var(--ancho-hoja);
  margin-inline: auto;
  padding-inline: var(--canal);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: nowrap;
}

.modo-app .masthead-interior { max-width: none; }

/* La marca: la ficha con la «U» —una pieza de juego, con su canto— y el
   nombre con la letra del juego. */
.marca {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--h-1);

  /* 21 px clavados en una franja que ahora mide 47 en una notebook: el nombre
     pesaba más que los destinos que están al lado. Sigue siendo la letra del
     juego y sigue siendo lo primero que se lee, sólo que ya no grita. */
  font: 700 clamp(16px, 15px + .28vw, 19px)/1 var(--f-juego);
  letter-spacing: -.01em;
  color: var(--carbon); text-decoration: none; white-space: nowrap;
}
.marca:hover { text-decoration: none; }

/*
 * En un teléfono de 320 px el nombre «UnCorrentino» se esconde y la marca
 * queda reducida a su fichita de 36: el enlace a la portada, que está en todas
 * las pantallas, pasaba a ser el control más difícil de acertar de todo el
 * sitio. `min-width` no cambia nada donde el nombre sí entra.
 */
@media (pointer: coarse) {
  .marca { min-width: var(--tocable-chico); }
}
.marca:hover .marca-ficha { transform: rotate(-8deg) scale(1.06); }

.marca-ficha {
  display: inline-grid;
  place-items: center;
  flex: none;
  /* Sigue la franja: 32 px en una cabecera de 52, 27 en una de 43. Con 36
     fijos, en una pantalla baja la fichita tocaba los dos bordes. */
  width: calc(32px * var(--densidad, 1));
  height: calc(32px * var(--densidad, 1));
  border-radius: 11px;
  background: var(--grad-luz);
  color: var(--sobre-acento);
  font: 700 clamp(17px, 16px + .28vw, 20px)/1 var(--f-juego);
  box-shadow: 0 3px 0 var(--canto-acento), inset 0 1px 0 rgb(255 255 255 / .35);
  transform: rotate(-4deg);
  transition: transform var(--dur-2) var(--curva-rebote);
}

.marca-ficha--chica {
  width: 24px; height: 24px; border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 2px 0 var(--canto-acento);
}

.masthead-nav { display: flex; align-items: center; gap: var(--e-2); flex-wrap: nowrap; }

.nav-enlace {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--h-1); padding: 0 var(--e-3);
  font: 600 var(--t-2-size)/1 var(--f-juego);
  color: var(--carbon-2);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--curva), color var(--dur-2) var(--curva);
}
.nav-enlace:hover { color: var(--carbon); background: var(--filo); text-decoration: none; }

/* La pestaña en la que estás: una pastilla hundida en la barra. */
.nav-enlace[aria-current="page"] {
  color: var(--carbon);
  background: var(--sup-3);
  box-shadow: 0 2px 0 var(--canto), var(--luz-arriba);
}
.nav-enlace[aria-current="page"] .icono-svg { color: var(--acento); }

.nav-jugar { min-height: var(--h-1); padding: 0 var(--e-4); margin-left: var(--e-1); }

.nav-filete { width: 1px; height: 18px; background: var(--linea); margin: 0 var(--e-2); flex-shrink: 0; }

:root { --barra-abajo: 0px; }

@media (max-width: 767px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* El pie: callado, con la ficha chica de la marca. */
/*
 * EL PIE NO PUEDE EMPUJAR LA PÁGINA FUERA DE LA VENTANA.
 *
 * Tenía `margin-top: var(--e-7)`: 48 px que se SUMABAN después de que `main`
 * ya había llenado los 100dvh, así que cualquier página del proyecto medía por
 * lo menos 100dvh + 121 px y tenía barra de desplazamiento garantizada.
 *
 * El margen lo pone ahora `unc_responsive.css` en `auto`, que en una columna
 * de flex se come el espacio libre en vez de sumar alto. Acá queda el borde,
 * que es lo que de verdad separa, y el relleno sale de un token que se achica
 * en las pantallas bajas.
 */
.pie {
  border-top: 1px solid var(--filo);
}

/*
 * EL PIE NO COBRA PEAJE EN UNA PANTALLA DE TRABAJO.
 *
 * El taller ya lo escondía del todo (`taller.css`). Faltaban las pantallas de
 * tablero —el mapa de la ciudad, los terrenos y el panel de terrenos—, que son
 * interfaces de pantalla completa: el mapa se planta en la ventana y se queda
 * con lo que sobra, así que cada píxel del pie es un píxel menos de mapa. Ahí
 * se lleva 47 de 768.
 *
 * No se esconde: se achica. Sigue estando el nombre y el año, que es todo lo
 * que dice, en un renglón de 12 px. Y se hace bajando `--aire-pie`, que es el
 * token con el que `unc_responsive.css` calcula `--alto-pie`: si se achicara
 * con reglas sueltas, la cuenta del alto del tablero quedaría mintiendo y la
 * página volvería a salirse por abajo.
 */
/*
 * VA EN `html` Y NO EN `body`, Y ES LA DIFERENCIA ENTRE QUE SIRVA Y NO SIRVA.
 *
 * `--alto-pie` está declarado en `:root` —o sea en `html`— como
 * `calc(var(--aire-pie) * 2 + 25px)`, y una variable se resuelve contra el
 * valor que tiene EN SU PROPIO ELEMENTO. Puesto en `body`, el pie se achicaba
 * pero `--alto-pie` seguía informando el valor grande: el tablero se quedaba
 * corto y abajo aparecía una franja vacía, que es justo lo contrario de lo que
 * se busca. Puesto en `html`, la cuenta del alto se entera y el mapa se queda
 * con los píxeles que el pie soltó.
 */
/* (22/10) `.unc-mapa-pantalla`: el mundo, que ya no usa el tablero y ocupa todo hasta el pie (ver mapa.css). */
html:has(main :is(.unc-tablero, .unc-mapa-pantalla)) {
  --aire-pie: var(--e-1);
}

body:has(main :is(.unc-tablero, .unc-mapa-pantalla)) .pie-marca { display: none; }

body:has(main :is(.unc-tablero, .unc-mapa-pantalla)) .pie-interior { font-size: var(--t-1-size); }
.pie-interior {
  max-width: var(--ancho-hoja); margin: 0 auto;
  padding-block: var(--aire-pie, var(--e-5));
  padding-inline: var(--canal);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  font-size: var(--t-2-size); color: var(--carbon-3);
}

.pie-marca {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font: 600 var(--t-3-size)/1 var(--f-juego);
  color: var(--carbon-2);
}

.pie-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e-5) var(--e-6);
  padding-bottom: var(--e-6);
}
.pie-columna ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e-1);
}
.pie-titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--t-1-size);
  line-height: var(--t-1-lh);
  letter-spacing: var(--t-1-ls);
  font-weight: var(--t-1-w);
  text-transform: uppercase;
  color: var(--carbon-2);
}
.pie-columna a {
  color: var(--carbon-3);
  text-decoration: none;

  display: inline-flex; align-items: center;
  min-height: var(--tocable-chico);
  transition: color var(--dur-1) var(--curva);
}
.pie-columna a:hover,
.pie-columna a:focus-visible { color: var(--acento-texto); }

.pie-firma {
  border-top: 1px solid var(--linea);
  padding-top: var(--e-4);
  display: flex; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
}

/*
 * EL AIRE DE ARRIBA Y ABAJO SALE DE UN TOKEN (`unc_responsive.css`).
 *
 * Estaba clavado en `--e-6 / --e-5`, o sea 56 px en cualquier pantalla: los
 * mismos en un monitor de 1080 que en una notebook de 768, donde son el 7 % de
 * todo lo que hay. El token lo achica solo cuando falta alto, y así una sola
 * definición vale para las catorce pantallas.
 */
.hoja {
  max-width: var(--ancho-hoja); margin: 0 auto;
  padding-block: var(--aire-pagina, var(--e-6)) var(--aire-pagina-abajo, var(--e-5));
  padding-inline: var(--canal);
}
.hoja-angosta {
  max-width: var(--ancho-ficha); margin: 0 auto;
  padding-block: var(--aire-pagina, var(--e-7));
  padding-inline: var(--canal);
}

.panel-cuerpo {
  display: grid;

  grid-template-columns: clamp(12.5rem, 15vw, 16.5rem) minmax(0, 1fr);
  align-items: start;
}

.panel-nav {
  position: sticky; top: var(--panel-tope, 0px);
  display: grid; align-content: start; gap: 2px;
  padding: var(--e-4) var(--e-3);
  height: calc(100dvh - var(--panel-tope, 0px));
  background: var(--sup-2);
  border-right: 1px solid var(--linea);
  min-width: 0;
}

.panel-nav a {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 9px var(--e-3);
  font-size: var(--t-3-size); font-weight: 500;
  color: var(--tinta-2);
  border-radius: var(--r-2);
  text-decoration: none;
}
.panel-nav a:hover { background: var(--sup-1); color: var(--tinta); text-decoration: none; }
.panel-nav a[aria-current="page"] {
  background: var(--acento-tinte);
  color: var(--acento-texto);
  font-weight: 650;
}

.panel-nav-grupo {
  margin: var(--e-4) 0 2px;
  padding: 0 var(--e-3);
  font-size: var(--t-1-size);
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.panel-nav-grupo:first-child { margin-top: 0; }

.panel-nav-cuenta {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-1-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--peligro);
  background: var(--peligro-tinte);
  border-radius: var(--r-full);
}

.panel-nav-salir { margin-top: auto; padding-top: var(--e-4); border-top: 1px solid var(--linea); }

.panel-cuerpo-persona { --panel-tope: var(--h-4); }

.panel-nav .panel-plan {
  display: block;
  margin-bottom: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-2);
  background: var(--sup-1);
  color: var(--tinta);
  text-decoration: none;
}
.panel-nav .panel-plan:hover {
  border-color: var(--trazo);
  background: var(--sup-1);
  text-decoration: none;
}

.panel-plan-rotulo {
  display: block;
  font-size: var(--t-1-size); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}
.panel-plan-nombre {
  display: block; margin-top: 1px;
  font-size: var(--t-4-size); font-weight: 650;
  color: var(--tinta);
}

@media (max-width: 900px) {
  .panel-nav .panel-plan { display: none; }
}

.panel-hoja {
  min-width: 0;
  padding-block: var(--e-6) var(--e-9);
  padding-inline: var(--canal);
  width: min(100%, var(--ancho-hoja));

  margin-inline: auto;
}

.panel-hoja > .hoja { padding-inline: 0; padding-block: 0; max-width: none; }

.panel-hoja > .hoja-angosta {
  padding-inline: 0;
  padding-block: 0;
  margin-inline: 0 auto;
}

.panel-titulo { margin-bottom: var(--e-6); }
.panel-titulo h1 {
  margin: 0;
  font-size: var(--t-6-size); font-weight: 650; letter-spacing: -.021em;
}
.panel-titulo p { margin: var(--e-2) 0 0; color: var(--tinta-2); max-width: 68ch; }

.panel-titulo-accion {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
}

.panel-ficha {

  min-width: 0;
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  padding: var(--e-5);
  margin-bottom: var(--e-5);
}
.panel-ficha > h2 {
  margin: 0 0 var(--e-4);
  font-size: var(--t-4-size); font-weight: 650;
}
.panel-ficha > .ayuda { margin: 0 0 var(--e-4); }

.panel-ficha > table { display: block; overflow-x: auto; max-width: 100%; }

.panel-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e-4);
}

.panel-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}
.panel-cifra {
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  padding: var(--e-4) var(--e-5);
}

.panel-cifra b,
.panel-cifra > strong {
  display: block;
  font-size: var(--t-6-size); font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.panel-cifra span:not(.pastilla) {
  display: block; margin-top: 2px;
  font-size: var(--t-1-size); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}
.panel-cifra > .ayuda { margin: var(--e-2) 0 0; }

.panel-cifra.alerta b,
.panel-cifra.alerta > strong { color: var(--ambar-texto); }

.panel-cifra > .pastilla { white-space: normal; }

.panel-cifra-enlace {
  display: block;
  color: inherit;
  transition: border-color var(--dur-1) var(--curva), background var(--dur-1) var(--curva);
}
.panel-cifra-enlace:hover {
  border-color: var(--trazo);
  background: var(--sup-3);
  text-decoration: none;
}
.panel-cifra-enlace:focus-visible {
  outline: var(--foco-outline);
  outline-offset: 2px;
}

.panel-cifra span.panel-cifra-ir {
  display: block; margin-top: var(--e-2);
  font-size: var(--t-2-size);
  color: var(--acento-texto);

  text-transform: none; letter-spacing: normal;
}

.panel-pie-acciones {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}
.panel-pie-acciones .ayuda { margin: 0; }

@media (max-width: 599px) {
  .panel-pie-acciones > form { width: 100%; }
  .panel-pie-acciones .btn-1,
  .panel-pie-acciones .btn-2 { width: 100%; justify-content: center; }
}

.lista-beneficios {
  display: grid; gap: var(--e-2);
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
}
.lista-beneficios li {
  display: flex; align-items: baseline; gap: var(--e-2);
  font-size: var(--t-3-size);
}

.lista-beneficios li::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 11px;
  margin-top: 3px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: .75;
}

.datos-suscripcion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-4);
  margin: var(--e-4) 0 0;
}
.datos-suscripcion dt {
  font-size: var(--t-1-size); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}
.datos-suscripcion dd {
  margin: 2px 0 0;
  font-size: var(--t-4-size); font-weight: 600;
  color: var(--tinta);
}

@media (max-width: 900px) {
  .panel-cuerpo { grid-template-columns: 1fr; }

  .panel-nav {
    position: static;
    height: auto;
    display: flex; gap: var(--e-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: var(--e-3) var(--e-4) var(--e-2);
    border-right: 0; border-bottom: 1px solid var(--linea);

    background:
      linear-gradient(to right, var(--sup-2) 40%, transparent) left center / 28px 100% no-repeat local,
      linear-gradient(to left,  var(--sup-2) 40%, transparent) right center / 28px 100% no-repeat local,
      linear-gradient(to right, var(--filo-fuerte), transparent) left center / 22px 100% no-repeat scroll,
      linear-gradient(to left,  var(--filo-fuerte), transparent) right center / 22px 100% no-repeat scroll,
      var(--sup-2);

    scrollbar-width: thin;
    scrollbar-color: var(--trazo) transparent;
  }

  .panel-nav::-webkit-scrollbar { height: 8px; }
  .panel-nav::-webkit-scrollbar-track { background: transparent; }
  .panel-nav::-webkit-scrollbar-thumb {
    background: var(--trazo);
    border-radius: var(--r-full);
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  .panel-nav a { flex: 0 0 auto; white-space: nowrap; }
  .panel-nav-salir { margin: 0; padding: 0; border: 0; }

  .panel-nav-grupo { display: none; }

  .panel-hoja { padding-block: var(--e-5) var(--e-8); }
}

body { display: flex; flex-direction: column; }

/*
 * `1 1` Y NO `1 0`: EL CENTRO TIENE QUE PODER ENCOGERSE.
 *
 * `unc_responsive.css` ya declaraba esto mismo (su sección 8), y no servía de
 * nada: ese archivo se lee ANTES que éste, así que a igual especificidad ganaba
 * el `flex: 1 0 auto` de acá y el centro quedaba sin poder achicarse. Con
 * `flex-shrink: 0` una pantalla que se planta en la ventana no puede existir:
 * el centro se queda con el alto de su contenido y empuja el resto afuera.
 *
 * Es la tercera vez que este orden de lectura muerde. La regla que quedó: lo
 * que el sistema quiera imponer a un COMPONENTE va escrito donde vive el
 * componente; lo que viaja por `unc_responsive.css` son TOKENS.
 */
body > main { flex: 1 1 auto; min-width: 0; min-height: 0; }

.pagina-centrada { display: grid; align-content: center; }

.ficha-cuerpo {
  max-width: var(--ancho-comercio);
  margin: 0 auto;
  padding-block: var(--e-7) var(--e-9);
  padding-inline: var(--canal);
  display: grid;

  grid-template-columns: minmax(0, 1fr) clamp(18rem, 26%, 23.75rem);
  gap: var(--e-7);
  align-items: start;
}

.ficha-principal { min-width: 0; }

.ficha-lateral {
  min-width: 0;
  position: sticky;

  top: calc(var(--h-barra) + var(--e-3));
  display: grid;
  gap: var(--e-5);
}

.ficha-lateral .seccion { margin-bottom: 0; }

.ficha-lateral > .seccion {
  background: var(--sup-2);
  border: 1px solid var(--filo);
  border-radius: var(--r-3);
  padding: var(--e-4);
}

.ficha-lateral .seccion-cabecera {
  margin-bottom: var(--e-3);
  padding-bottom: 0;
  border-bottom: 0;
}

.ficha-lateral .seccion-cabecera h2 { font-size: var(--t-4-size); }

@media (max-width: 900px) {
  .ficha-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-6);
    padding-block: var(--e-5) var(--e-8);
  }

  .ficha-lateral { position: static; }
}

.seccion { margin-bottom: var(--e-8); }

.seccion-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  margin-bottom: var(--e-5); padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--trazo);
}

.rejilla { display: grid; gap: var(--e-4); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.fila { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.fila-fin { margin-left: auto; }
.pila { display: grid; gap: var(--e-3); }

.pila-junta { gap: var(--e-2); }

.pila-suelta { gap: var(--e-5); }

.fila-entre  { justify-content: space-between; }
.fila-centro { justify-content: center; }
.fila-derecha { justify-content: flex-end; }

.fila-arriba { align-items: flex-start; }

.fila-junta { gap: var(--e-2); }

.fila-firme { flex-wrap: nowrap; }
.fila-firme > .crece { min-width: 0; flex: 1 1 auto; }

.ficha-columna { display: flex; flex-direction: column; gap: var(--e-3); }
.ficha-columna > .ficha-pie { margin-top: auto; }

.empuja-abajo { margin-top: auto; }

.plan-pie { margin-top: auto; }

.avatar-circulo {
  flex: none;
  display: grid; place-items: center;
  width: var(--h-2); height: var(--h-2);
  object-fit: cover;

  overflow: hidden;
  font-family: var(--f-nombre);
  font-size: var(--t-5-size);
  color: var(--tinta-3);
  background: var(--cal-0);
  border-radius: var(--r-full);
}
.avatar-circulo-chico { width: 32px; height: 32px; font-size: var(--t-3-size); }

.vacio {
  padding: var(--e-8) var(--e-5);
  text-align: center;
  color: var(--tinta-3);
}

.vacio .ayuda,
.vacio .prosa,
.centrado .ayuda,
.centrado .prosa,
.galeria-falta .ayuda { margin-inline: auto; }
.vacio-titulo { font-family: var(--f-nombre); font-size: var(--t-6-size); color: var(--tinta-2); margin-bottom: var(--e-2); }

.portada-hero {
  background:
    radial-gradient(120% 130% at 12% -10%, var(--lavada) 0%, var(--lavada-fin) 58%),
    var(--sup-2);
  border-bottom: 1px solid var(--linea);
}
.portada-hero-interior {
  max-width: var(--ancho-hoja);
  margin: 0 auto;
  padding-block: var(--e-8) var(--e-7);
  padding-inline: var(--canal);
}

.portada-titulo {
  font-family: var(--f-nombre);
  font-size: clamp(32px, 4.8vw, 52px);
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: -.032em;
  margin: 0;
  text-wrap: balance;
}
.portada-bajada {
  margin: var(--e-3) 0 var(--e-5);
  font-size: var(--t-4-size);
  color: var(--carbon-2);
  max-width: 48ch;
}

.portada-buscador {
  display: flex; align-items: center; gap: var(--e-2);

  width: 100%;
  max-width: min(100%, 46rem);
  padding: var(--e-2);
  background: var(--sup-3);
  border: 1px solid var(--trazo);
  border-radius: var(--r-full);
  box-shadow: var(--s-2);
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}
.portada-buscador:focus-within {
  border-color: var(--foco-color);
  box-shadow: 0 0 0 4px var(--acento-tinte), var(--s-2);
}

.portada-lupa {
  display: grid; place-items: center;
  margin-left: var(--e-3);
  flex-shrink: 0;
  color: var(--carbon-3);
  pointer-events: none;
  transition: color var(--dur-1) var(--curva);
}
.portada-buscador:focus-within .portada-lupa { color: var(--acento-texto); }

.portada-buscador input {
  flex: 1; min-width: 0; width: auto;
  height: var(--h-3);
  padding-left: var(--e-2);
  border: 0; background: none; border-radius: 0;
  font-size: var(--t-4-size);
}

.portada-buscador input:focus { outline: none; box-shadow: none; }
.portada-buscador .btn-1 { height: var(--h-3); flex-shrink: 0; }

.portada-rubros {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  list-style: none; padding: 0;
  margin: var(--e-5) 0 0;
}

.portada-atajos-rotulo {
  margin: var(--e-5) 0 0;
  font-size: var(--t-1-size);
  font-weight: var(--t-1-w);
  letter-spacing: var(--t-1-ls);
  text-transform: uppercase;
  color: var(--tinta-3);
}
.portada-atajos-rotulo + .portada-rubros { margin-top: var(--e-3); }

.migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin-bottom: var(--e-4);
  font-size: var(--t-2-size);
  color: var(--tinta-3);
}
.migas a { color: var(--tinta-3); text-decoration: none; }
.migas a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }
.migas > span { flex: none; }
.migas [aria-current="page"] { color: var(--tinta-2); }

.rubro-hero {
  padding-bottom: var(--e-6);
  margin-bottom: var(--e-6);
  border-bottom: 1px solid var(--linea);
}
.rubro-hero h1 { margin: 0; }

.pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font-size: var(--t-0-size); font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r-full); line-height: 1;
  white-space: nowrap;
}
.pastilla::before { content: ''; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; }
.pastilla-viva   { color: var(--verde); background: var(--verde-tinte); }
.pastilla-espera { color: var(--ambar-texto); background: var(--ambar-fondo); }
.pastilla-fria   { color: var(--carbon-2); background: var(--sup-0); }
.pastilla-mala   { color: var(--peligro); background: var(--peligro-tinte); }
.pastilla-oficial { color: var(--marcador-visitante); background: var(--indigo-tinte); }

.nav-punto {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 2px;
  vertical-align: super;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 28%, transparent);
}

.radar-hero {
  display: flex; flex-wrap: wrap; gap: var(--e-5);
  align-items: flex-end; justify-content: space-between;
  padding-bottom: var(--e-6);
  margin-bottom: var(--e-6);
  border-bottom: 1px solid var(--linea);
}
.radar-hero h1 { margin: 0; }

.radar-resumen {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-2) var(--e-4);
  margin: 0 0 var(--e-5);
  font-size: var(--t-3-size);
  color: var(--tinta-2);
}
.radar-resumen strong { color: var(--tinta); font-weight: 650; }

.radar-resumen-grupo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-2-size);
  color: var(--tinta-3);
}
.radar-resumen-grupo::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: var(--trazo);
  flex-shrink: 0;
}
.radar-resumen-transito::before { background: var(--radar-transito); }
.radar-resumen-infraestructura::before { background: var(--radar-infra); }
.radar-resumen-evento::before { background: var(--radar-evento); }
.radar-resumen-situacion::before { background: var(--radar-situacion); }

.radar-lista {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  align-items: start;
}

.situacion {
  position: relative;
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-2);
}

.situacion::before {
  content: '';
  position: absolute; left: 0; top: var(--e-4); bottom: var(--e-4);
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--trazo);
}
.situacion-transito::before { background: var(--radar-transito); }
.situacion-infraestructura::before { background: var(--radar-infra); }
.situacion-evento::before { background: var(--radar-evento); }
.situacion-situacion::before { background: var(--radar-situacion); }

.situacion-sellos { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

.sello-fuente {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: 22px; padding: 0 var(--e-3);
  border-radius: var(--r-full);
  font-size: var(--t-1-size);
  font-weight: 700;
  letter-spacing: var(--t-1-ls);
  text-transform: uppercase;
}
.sello-fuente::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.sello-oficial {
  color: var(--marcador-visitante);
  background: color-mix(in srgb, var(--marcador-visitante) 14%, transparent);
}
.sello-vecinal {
  color: var(--tinta-3);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--linea);
}

.situacion-titulo {
  font-family: var(--f-nombre);
  font-size: var(--t-5-size);
  line-height: var(--t-5-lh);
  letter-spacing: var(--t-5-ls);
  font-weight: var(--t-5-w);
  color: var(--tinta);
  margin: 0;
}
.situacion-meta { font-size: var(--t-2-size); color: var(--tinta-2); margin: 0; }
.situacion-detalle { font-size: var(--t-3-size); color: var(--tinta-2); margin: 0; white-space: pre-wrap; }
.situacion-confirmaciones { font-size: var(--t-2-size); color: var(--tinta-3); margin: 0; }

.situacion-acciones {
  display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center;
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
}
.situacion-acciones form { display: contents; }

.btn-elegido {
  color: var(--acento-texto);
  background: var(--acento-tinte);
  border-color: var(--acento-borde);
}

.situacion-denuncia > summary {
  cursor: pointer; list-style: none;
  font-size: var(--t-2-size); color: var(--tinta-3);
}
.situacion-denuncia > summary::-webkit-details-marker { display: none; }
.situacion-denuncia > summary:hover { color: var(--tinta-2); }
.situacion-denuncia form { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); }

.radar-leyenda { border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-4); }
.radar-leyenda > summary { cursor: pointer; font-size: var(--t-3-size); color: var(--tinta-2); }
.radar-leyenda-lista {
  list-style: none; margin: var(--e-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e-3);
  font-size: var(--t-2-size); color: var(--tinta-2);
}

.radar-leyenda-lista li {
  display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: baseline;
  max-width: 74ch;
}
.radar-leyenda .ayuda { max-width: var(--ancho-prosa); }

.tipos-radar { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.tipo-radar {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-2);
  background: var(--sup-2);
  cursor: pointer;
  flex: 1 1 14rem;
}
.tipo-radar:hover { border-color: var(--trazo); }
.tipo-radar input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-radar-nombre { font-size: var(--t-3-size); font-weight: 600; color: var(--tinta); }

.tipo-radar-ayuda { display: none; font-size: var(--t-2-size); color: var(--tinta-2); }
.tipo-radar input:checked ~ .tipo-radar-ayuda { display: block; }
.tipo-radar-ayuda b { display: block; margin-top: var(--e-1); color: var(--tinta-3); font-weight: 600; }

.tipo-radar:has(input:checked),
.tipo-radar input:checked ~ .tipo-radar-nombre { color: var(--acento-texto); }
.tipo-radar:has(input:checked) {
  border-color: var(--acento-borde);
  background: var(--acento-tinte);
  flex-basis: 100%;
}

.tipo-radar:focus-within { outline: var(--foco-outline); outline-offset: 2px; }

.sin-marco { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
.sin-marco > legend { padding: 0; }

.portada-rubros a {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: var(--h-1); padding: 0 var(--e-4);
  font-size: var(--t-2-size); font-weight: 500;
  color: var(--carbon-2);
  background: var(--sup-1);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--curva),
              border-color var(--dur-1) var(--curva),
              color var(--dur-1) var(--curva);
}
.portada-rubros a:hover {
  text-decoration: none;
  color: var(--acento-texto);
  background: var(--acento-tinte);
  border-color: var(--acento-borde);
}
.portada-rubros .rubro-mapa { color: var(--acento-texto); background: none; font-weight: 600; }

.franja-alta {
  background:
    radial-gradient(100% 140% at 100% 0%, var(--lavada) 0%, var(--lavada-fin) 62%),
    var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-4);
  padding: var(--e-8) var(--e-6);
  margin-bottom: var(--e-8);
}

@media (max-width: 767px) {
  .portada-hero-interior { padding-block: var(--e-6) var(--e-5); }

  .portada-buscador {
    flex-wrap: wrap;
    border-radius: var(--r-3);
    padding: var(--e-3);
    gap: var(--e-2);
  }
  .portada-buscador input { flex-basis: 100%; }
  .portada-buscador .btn-1 { width: 100%; }

  .portada-lupa { margin-left: var(--e-2); }

  .franja-alta { padding: var(--e-6) var(--e-4); }
}

.ficha-comercio { padding-bottom: var(--e-8); }

.hero-comercio { background: var(--cal-2); border-bottom: 1px solid var(--linea); }

.hero-portada {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 420px;
  background: var(--sup-0);
  overflow: hidden;
}
.hero-portada img { width: 100%; height: 100%; object-fit: cover; }

.hero-portada-contenida {
  aspect-ratio: 16 / 7;
  max-height: 220px;

  max-width: min(var(--ancho-comercio), 100% - var(--canal) * 2);
  margin: var(--e-4) auto 0;
  border-radius: var(--r-2);
}

.hero-cuerpo {
  position: relative;
  max-width: var(--ancho-comercio);
  margin: 0 auto;
  padding-block: var(--e-5) var(--e-6);
  padding-inline: var(--canal);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e-4);
  align-items: end;
}

.hero-logo {
  width: 104px; height: 104px;
  margin-top: -68px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--cal-3);
  border: 4px solid var(--cal-2);
  display: grid; place-items: center;
  font-family: var(--f-nombre); font-size: 40px; color: var(--tinta-2);
  flex-shrink: 0;
}

.hero-simple .hero-logo { margin-top: 0; width: 72px; height: 72px; font-size: 28px; }
.hero-simple .hero-cuerpo { padding-top: var(--e-6); align-items: center; }

.hero-titulo-fila { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.hero-texto h1 { margin: 0; }

.hero-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }

.catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--e-4);
}

.item {
  display: flex; flex-direction: column;
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: box-shadow var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva);
}
.item:hover { border-color: transparent; box-shadow: var(--s-tarjeta); }

.item-foto {
  aspect-ratio: 4 / 3;
  background: var(--sup-0);
  overflow: hidden;
}
.item-foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--dur-3) var(--curva);
}
.item:hover .item-foto img { transform: scale(1.04); }

.item-cuerpo { padding: var(--e-4); display: grid; gap: var(--e-2); align-content: start; }

.item-nombre {
  margin: 0;
  font-family: var(--f-nombre);
  font-size: var(--t-4-size); font-weight: 600; letter-spacing: -.016em;
  color: var(--carbon);
}

.item-detalle {
  margin: 0;
  font-size: var(--t-2-size);
  line-height: 1.5;
  color: var(--carbon-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-precio {
  margin: var(--e-1) 0 0;
  font-size: var(--t-5-size); font-weight: 650; letter-spacing: -.018em;
  color: var(--carbon);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(45%, 200px), 1fr));
  gap: var(--e-2);
}
.galeria img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  background: var(--cal-0);
  border-radius: var(--r-1);
}

.galeria-edicion {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--e-3);
}
.galeria-item { margin: 0; position: relative; }
.galeria-item img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  background: var(--cal-0);
  border-radius: var(--r-1);
  display: block;
}

.galeria-falta {
  width: 100%; aspect-ratio: 1;
  display: grid; place-items: center;
  padding: var(--e-3);
  background: var(--cal-0);
  border: 1px dashed var(--trazo);
  border-radius: var(--r-1);

  color: var(--tinta-3);
  font-size: var(--t-1-size);
  text-align: center;
}
.galeria-sacar {
  position: absolute;
  right: var(--e-2); top: var(--e-2);
  min-height: 32px; padding: 0 var(--e-3);
  border: 1px solid var(--trazo);
  border-radius: var(--r-full);
  background: var(--cal-2);
  color: var(--peligro);
  font: inherit; font-size: var(--t-1-size);
  cursor: pointer;
}
.galeria-sacar:hover { background: var(--peligro); color: var(--cal-2); border-color: var(--peligro); }

.mapa-ficha {
  height: clamp(200px, 28dvh, 340px);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--cal-0);
}

@media (max-width: 767px) {
  .hero-portada { aspect-ratio: 16 / 10; }
  .hero-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--e-4);
    gap: var(--e-3);
    align-items: start;
  }
  .hero-logo { width: 76px; height: 76px; margin-top: -50px; font-size: 30px; }
  .hero-acciones { width: 100%; }
  .hero-acciones .btn-1 { flex: 1; }
}

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-3-size); }
.tabla th {
  text-align: left; padding: var(--e-2) var(--e-3);
  font-size: var(--t-1-size); letter-spacing: var(--t-1-ls); font-weight: var(--t-1-w);
  text-transform: uppercase; color: var(--tinta-3);
  background: var(--cal-0);
  border-bottom: 1px solid var(--trazo);
}
.tabla td { padding: var(--e-3); border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--cal-1); }
.tabla-envoltura { overflow-x: auto; }

@media (max-width: 719px) {
  .tabla-envoltura { overflow-x: visible; }

  .tabla, .tabla thead, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; }

  .tabla thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }

  .tabla tbody tr {
    border: 1px solid var(--linea);
    border-radius: var(--r-3);
    padding: var(--e-3);
    margin-bottom: var(--e-3);
    background: var(--sup-2);
  }
  .tabla tbody tr:hover { background: var(--sup-2); }

  .tabla td {
    border-bottom: 0;
    padding: var(--e-2) 0;
  }
  .tabla td + td { border-top: 1px solid var(--linea); }

  .tabla td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    margin-bottom: 4px;
    font-size: var(--t-1-size); letter-spacing: var(--t-1-ls); font-weight: var(--t-1-w);
    text-transform: uppercase; color: var(--tinta-3);
  }

  .tabla td select,
  .tabla td input[type="text"],
  .tabla td input[type="number"],
  .tabla td button { width: 100%; }
}

.horarios-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-3-size); }
.horarios-tabla td { padding: var(--e-2) var(--e-1); border-bottom: 1px solid var(--linea); }
.horarios-tabla tr:last-child td { border-bottom: 0; }

.horarios-tabla .dia {
  color: var(--tinta-3);
  width: 1%;
  white-space: nowrap;
  padding-right: var(--e-3);
}
.horarios-tabla .hoy { color: var(--tinta); font-weight: 600; }
.horarios-tabla .cerrado { color: var(--tinta-3); }
.horarios-tabla td:last-child { font-variant-numeric: tabular-nums; }

input[type="radio"].tipo-radio {
  position: absolute;
  width: 1px; height: 1px; min-width: 0; min-height: 0;
  margin: 0; padding: 0;
  opacity: 0;
}

.tipo-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--e-3);
}

.tipo-card {
  display: block;
  margin: 0;
  padding: var(--e-4);
  font-size: var(--t-3-size);
  font-weight: 400;
  color: var(--tinta);
  background: var(--cal-3);
  border: 1px solid var(--trazo);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva),
              border-color var(--dur-1) var(--curva);
}
.tipo-card:hover { background: var(--cal-2); }

.tipo-icono {
  display: block; line-height: 0; margin-bottom: var(--e-2);
  color: var(--carbon-2);
  transition: color var(--dur-1) var(--curva);
}
.tipo-radio:checked + * .tipo-icono,
.tipo-card:hover .tipo-icono { color: var(--acento-texto); }

.tipo-nombre {
  display: block;
  margin-bottom: var(--e-1);
  font-family: var(--f-nombre);
  font-size: var(--t-5-size);
  font-weight: var(--t-5-w);
  color: var(--tinta);
}

.tipo-detalle {
  display: block;
  font-size: var(--t-2-size);
  line-height: var(--t-2-lh);
  font-weight: 400;
  color: var(--tinta-3);
}

.tipo-costo {
  display: block;
  margin-top: auto;
  padding-top: var(--e-3);
  font-size: var(--t-1-size);
  font-weight: 600;
  color: var(--tinta-2);
}

#tipo-local:checked ~ * .tipo-card[data-tipo="local"],
#tipo-servicio:checked ~ * .tipo-card[data-tipo="servicio"],
#tipo-alquiler:checked ~ * .tipo-card[data-tipo="alquiler"],
#tipo-evento:checked ~ * .tipo-card[data-tipo="evento"],
#tipo-pedido:checked ~ * .tipo-card[data-tipo="pedido"] {
  background: var(--ladrillo-tinte);
  border-color: var(--ladrillo);
}
#tipo-local:checked ~ * .tipo-card[data-tipo="local"] .tipo-nombre,
#tipo-servicio:checked ~ * .tipo-card[data-tipo="servicio"] .tipo-nombre,
#tipo-alquiler:checked ~ * .tipo-card[data-tipo="alquiler"] .tipo-nombre,
#tipo-evento:checked ~ * .tipo-card[data-tipo="evento"] .tipo-nombre,
#tipo-pedido:checked ~ * .tipo-card[data-tipo="pedido"] .tipo-nombre {
  color: var(--ladrillo);
}

#tipo-local:focus-visible ~ * .tipo-card[data-tipo="local"],
#tipo-servicio:focus-visible ~ * .tipo-card[data-tipo="servicio"],
#tipo-alquiler:focus-visible ~ * .tipo-card[data-tipo="alquiler"],
#tipo-evento:focus-visible ~ * .tipo-card[data-tipo="evento"],
#tipo-pedido:focus-visible ~ * .tipo-card[data-tipo="pedido"] {
  outline: var(--foco-outline);
  outline-offset: 2px;
}

.solo-local, .solo-servicio, .solo-alquiler, .solo-evento, .solo-pedido,
.solo-vecino, .solo-comercio { display: none; }

#tipo-local:checked    ~ * :is(.solo-local, .solo-comercio),
#tipo-servicio:checked ~ * :is(.solo-servicio, .solo-comercio),
#tipo-alquiler:checked ~ * :is(.solo-alquiler, .solo-vecino),
#tipo-evento:checked   ~ * :is(.solo-evento, .solo-vecino),
#tipo-pedido:checked   ~ * :is(.solo-pedido, .solo-vecino) {
  display: block;
}

.selector-ayuda {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2);
  margin-bottom: var(--e-2);
  font-size: var(--t-2-size);
  color: var(--tinta-3);

  max-width: var(--ancho-prosa);
}

.selector-coords {
  padding: 2px var(--e-2);
  font-size: var(--t-2-size);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
  background: var(--cal-0);
  border-radius: var(--r-1);
}

.selector-barra {
  display: flex; gap: var(--e-2); flex-wrap: wrap;
  margin-bottom: var(--e-2);
}
.selector-barra input[type="text"] { flex: 1 1 12rem; width: auto; }

.selector-mapa {
  position: relative;

  height: clamp(16rem, 46dvh, 34rem);
  border: 1px solid var(--trazo);
  border-radius: var(--r-1);
  overflow: hidden;
}
.selector-mapa .mapa { width: 100%; height: 100%; }

.selector-cruz {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 500;
  transform: translate(-50%, -100%);
  pointer-events: none;
  font-size: var(--t-7-size);
  line-height: 1;
}

.selector-cruz-afuera { filter: grayscale(1); opacity: .45; }

@media (prefers-reduced-motion: no-preference) {
  .selector-cruz { transition: filter .15s ease, opacity .15s ease; }
}

.zona-poligono {
  stroke: var(--zona-linea);
  stroke-width: 3;
  stroke-linejoin: round;
  fill: var(--zona-relleno);
  fill-opacity: 1;
}

.zona-velo {
  stroke: none;
  fill: var(--zona-velo);
  fill-opacity: 1;
}

.zona-recuadro {
  stroke: var(--zona-recuadro);
  stroke-width: 1;
  stroke-dasharray: 6 6;
  fill: none;
}

.leaflet-marker-icon.zona-manija { cursor: pointer; }
.leaflet-marker-icon.zona-manija.leaflet-marker-draggable { cursor: move; }

.zona-vertice,
.zona-fantasma {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  box-sizing: border-box;
}

.zona-vertice {
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--zona-vertice);
  border: 2px solid var(--zona-vertice-borde);
}

.zona-manija:hover > .zona-vertice { transform: scale(1.25); }

.zona-fantasma {
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: none;
  border: 2px solid var(--zona-vertice-borde);
  opacity: .55;
}

.zona-manija:hover > .zona-fantasma { opacity: 1; transform: scale(1.35); }

@media (prefers-reduced-motion: no-preference) {
  .zona-vertice,
  .zona-fantasma { transition: transform .12s ease, opacity .12s ease; }
}

.horario-dia {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
}
.horario-dia:last-child { border-bottom: 0; padding-bottom: 0; }

.horario-dia-nombre {
  padding-top: var(--e-3);
  font-size: var(--t-2-size); font-weight: 600;
  color: var(--tinta-2);
}

.horario-tramos { display: grid; gap: var(--e-2); }

.horario-tramo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.horario-tramo input[type="time"] { width: auto; min-width: 8rem; }
.horario-tramo .a { font-size: var(--t-2-size); color: var(--tinta-3); }

@media (max-width: 640px) {
  .horario-dia { grid-template-columns: 1fr; gap: var(--e-1); }
  .horario-dia-nombre { padding-top: 0; }
}

.oculto { display: none !important; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.lista-limpia { list-style: none; padding: 0; margin: 0; }

.bloque { display: block; }

.centrado { text-align: center; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--e-2); }
.mt-3 { margin-top: var(--e-3); }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }

.mb-2 { margin-bottom: var(--e-2); }
.mb-3 { margin-bottom: var(--e-3); }
.mb-4 { margin-bottom: var(--e-4); }
.mb-5 { margin-bottom: var(--e-5); }

/*
 * ------------------------------------------------------------ EL MENÚ DE LA CUENTA
 *
 * El botón es una pieza cuadrada-redonda como las del HUD (`.j-redondo`); el
 * menú es un panel que cae con un saltito, con un icono por renglón.
 */
.menu-cuenta { display: block; position: relative; }

.menu-cuenta-boton,
.nav-tema {
  display: grid; place-items: center;
  width: var(--h-1); height: var(--h-1);
  padding: 0;
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-2);
  background: var(--sup-2);
  color: var(--carbon-2);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 3px 0 var(--canto), var(--luz-arriba);
  transition: transform var(--dur-1) var(--curva),
              box-shadow var(--dur-1) var(--curva),
              color var(--dur-2) var(--curva),
              background-color var(--dur-2) var(--curva);
}
.menu-cuenta-boton::-webkit-details-marker { display: none; }
.menu-cuenta-boton::marker { content: ''; }
.menu-cuenta-boton:hover,
.nav-tema:hover { background: var(--sup-3); color: var(--carbon); }
.menu-cuenta-boton:active,
.nav-tema:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--canto), var(--luz-arriba); }
.menu-cuenta-boton:focus-visible,
.nav-tema:focus-visible { outline: none; box-shadow: var(--foco); }

.menu-cuenta[open] .menu-cuenta-boton {
  background: var(--grad-luz);
  color: var(--sobre-acento);
  border-color: transparent;
  box-shadow: 0 3px 0 var(--canto-acento), var(--luz-arriba);
}

.menu-cuenta-panel {
  position: absolute; right: 0; top: calc(100% + var(--e-3));
  z-index: 60;
  min-width: 15.5rem;
  max-width: calc(100vw - var(--e-5));
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e-2);
  background: var(--sup-1);
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-3);
  box-shadow: var(--s-3), var(--luz-arriba);
  transform-origin: top right;
  animation: j-aparece var(--dur-2) var(--curva-rebote) both;
}

.menu-cuenta-panel a,
.menu-cuenta-salir {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%;
  min-height: var(--tocable);
  padding: 0 var(--e-3);
  font: 600 var(--t-3-size)/1.2 var(--f-juego);
  text-align: left; color: var(--carbon);
  background: none; border: 0; border-radius: var(--r-2);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva);
}
.menu-cuenta-panel a .icono-svg,
.menu-cuenta-salir .icono-svg { color: var(--carbon-3); }
.menu-cuenta-panel a:hover,
.menu-cuenta-salir:hover { background: var(--sup-3); text-decoration: none; }
.menu-cuenta-panel a:hover .icono-svg { color: var(--acento); }
.menu-cuenta-panel a[aria-current="page"] { background: var(--acento-tinte); color: var(--acento-texto); }
.menu-cuenta-panel a[aria-current="page"] .icono-svg { color: var(--acento); }

.menu-cuenta-rotulo {
  margin: var(--e-2) var(--e-3) 2px;
  padding-top: var(--e-2);
  border-top: 1px solid var(--filo);
  font: 600 var(--t-1-size)/1.3 var(--f-juego);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--carbon-3);
}

.menu-cuenta-panel form {
  margin-top: var(--e-1);
  padding-top: var(--e-1);
  border-top: 1px solid var(--filo);
}

.menu-cuenta-salir { color: var(--peligro); }
.menu-cuenta-salir .icono-svg { color: currentColor; }
.menu-cuenta-salir:hover { background: var(--peligro-tinte); }

.menu-solo-angosto { display: none !important; }

@media (max-width: 767px) {

  .hoja, .hoja-angosta { padding-block: var(--e-4); }

  /* En el teléfono la barra queda con la marca, «Jugar», el tema y la
     cuenta; el mapa y los terrenos pasan al menú. */
  .masthead-nav .nav-enlace { display: none; }
  .menu-solo-angosto { display: flex !important; }
  .marca-nombre { font-size: 19px; }
}

/* En un teléfono angosto «Jugar» queda como pieza con el icono solo (el
   nombre lo lee el lector de pantalla) y «Crear mi cuenta» se va al menú. */
@media (max-width: 440px) {
  .masthead-interior { gap: var(--e-2); }
  .masthead-nav { gap: 6px; }
  .marca { gap: 8px; }
  .marca-nombre { font-size: 17px; }
  .nav-jugar { width: var(--h-1); padding: 0; margin-left: 0; }
  .nav-jugar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav-cuenta-nueva { display: none; }
}

@media (max-width: 330px) {
  .marca-nombre { display: none; }
}

html, body { overflow-x: clip; }

.saltar-al-contenido {
  position: fixed;
  top: var(--e-2);
  left: var(--e-2);
  z-index: 999;

  transform: translateY(calc(-100% - var(--e-4)));
  display: inline-flex; align-items: center;
  min-height: var(--h-2);
  padding-inline: var(--e-4);
  border-radius: var(--r-2);
  background: var(--grad-luz);
  color: var(--sobre-acento);
  font-size: var(--t-2-size);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--s-3);
  transition: transform var(--dur-2) var(--curva);
}
.saltar-al-contenido:focus,
.saltar-al-contenido:focus-visible {
  transform: translateY(0);
}

#contenido:focus { outline: none; }

/* El botón del tema tiene la forma del de la cuenta (arriba). De noche
   muestra el sol —lo que pasa si lo tocás— en amarillo; de día, la luna. */
.nav-tema > span[aria-hidden] {
  grid-area: 1 / 1;
  line-height: 0;
}

.nav-tema .nav-tema-luna { display: none; color: var(--indigo); }
.nav-tema .nav-tema-sol { display: block; color: var(--sol); }

:root[data-theme="light"] .nav-tema .nav-tema-luna { display: block; }
:root[data-theme="light"] .nav-tema .nav-tema-sol { display: none; }

.migas {
  max-width: var(--ancho-hoja);
  margin: 0 auto;
  padding-inline: var(--canal);
  padding-block: var(--e-4) 0;
  font-size: var(--t-2-size);
}
.migas ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--e-2);
}
.migas li { display: flex; align-items: center; gap: var(--e-2); }
.migas li + li::before {
  content: '';
  width: 5px; height: 5px;
  border-top: 1.5px solid var(--carbon-3);
  border-right: 1.5px solid var(--carbon-3);
  transform: rotate(45deg);
  opacity: .55;
  flex: none;
}
.migas a {
  color: var(--carbon-2);
  text-decoration: none;
  min-height: var(--tocable-chico);
  display: inline-flex; align-items: center;
}
.migas a:hover, .migas a:focus-visible { color: var(--acento-texto); }
.migas [aria-current="page"] {
  color: var(--carbon-3);

  max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.opinion-fecha {
  display: block;
  font-size: var(--t-1-size);
  color: var(--carbon-3);
  margin-top: 2px;
}

.enlace-suave {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--trazo);
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--curva),
              text-decoration-color var(--dur-1) var(--curva);
}
.enlace-suave:hover, .enlace-suave:focus-visible {
  color: var(--acento-texto);
  text-decoration-color: currentColor;
}

@media (pointer: coarse) {
  .nav-avatar,
  .panel-salida,
  .btn-icono,
  .chip,
  .pie-columna a,

  .panel-hoja details a,
  .seccion-cabecera .btn-3 {
    min-height: var(--tocable);
    min-width: var(--tocable);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-tema {
    width: var(--tocable);
    height: var(--tocable);
  }

  .panel-nav a,
  .panel-nav-salir a {
    min-height: var(--tocable);
    display: inline-flex;
    align-items: center;
  }

  .conmutador button {
    min-height: var(--tocable);
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 22px; height: 22px;
  }

  .casilla {
    display: flex; align-items: flex-start; gap: var(--e-3);
    min-height: var(--tocable);
    padding-block: var(--e-1);
  }

  .leaflet-control-zoom a {
    width: var(--tocable) !important;
    height: var(--tocable) !important;
    line-height: var(--tocable) !important;
  }
}

/*
 * ==========================================================================
 *  LAS PÁGINAS DEL JUEGO: entrar, el escenario y los errores
 * ==========================================================================
 */

/* ---------------------------------------------------------- el escenario
 *
 * Un pedacito del juego: cielo (noche con estrellas o siesta con sol), un
 * piso de baldosas isométricas y los dos modelos parados, mirándose. Las
 * personas son las hojas reales (8 cuadros de 120 × 112) al doble, sin
 * suavizar, para que se vea el píxel.
 */
.escenario {
  --escala: 2;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  min-height: 260px;
  padding-bottom: 34px;
  border-radius: var(--r-3);
  background:
    radial-gradient(2px 2px at 18% 22%, rgb(255 244 228 / .8), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 12%, rgb(255 244 228 / .6), transparent 60%),
    radial-gradient(2px 2px at 62% 28%, rgb(255 244 228 / .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 16%, rgb(255 244 228 / .55), transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 40%, rgb(255 244 228 / .4), transparent 60%),
    radial-gradient(120% 80% at 50% 110%, rgb(255 138 61 / .35), transparent 60%),
    linear-gradient(180deg, #221a47 0%, #3a2c66 55%, #5b3f73 100%);
}

:root[data-theme="light"] .escenario {
  background:
    radial-gradient(120% 80% at 50% 115%, rgb(255 255 255 / .55), transparent 60%),
    linear-gradient(180deg, #8fd3e8 0%, #bfe6ef 45%, #ffe2bd 100%);
}

/* La luna (o el sol): un disco con su halo. */
.escenario-astro {
  position: absolute;
  top: 26px;
  right: 30px;
  z-index: -1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff8e6 0 38%, #ffe3a3 70%);
  box-shadow: 0 0 0 10px rgb(255 227 163 / .10), 0 0 40px rgb(255 227 163 / .35);
}

:root[data-theme="light"] .escenario-astro {
  background: radial-gradient(circle at 40% 38%, #fffbe8 0 30%, #ffd05a 72%);
  box-shadow: 0 0 0 12px rgb(255 208 90 / .22), 0 0 50px rgb(255 190 60 / .5);
}

/* Nubes de píxel: tres rectángulos redondeados, casi transparentes. */
.escenario-nube {
  position: absolute;
  top: 58px;
  left: 12%;
  z-index: -1;
  width: 64px;
  height: 14px;
  border-radius: 8px;
  background: rgb(255 244 228 / .10);
  box-shadow: 14px -9px 0 -2px rgb(255 244 228 / .10);
}

.escenario-nube--2 { top: 96px; left: auto; right: 22%; width: 48px; }

:root[data-theme="light"] .escenario-nube { background: rgb(255 255 255 / .75); box-shadow: 14px -9px 0 -2px rgb(255 255 255 / .75); }

@media (prefers-reduced-motion: no-preference) {
  .escenario-nube { animation: escenario-nube 38s linear infinite alternate; }
  .escenario-nube--2 { animation-duration: 52s; animation-direction: alternate-reverse; }
}

@keyframes escenario-nube {
  from { transform: translateX(-20px); }
  to { transform: translateX(40px); }
}

/* El piso: un rombo de baldosas, como el de las casas. */
.escenario-piso {
  position: absolute;
  left: 50%;
  bottom: -70px;
  z-index: -1;
  width: 360px;
  height: 180px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background:
    repeating-linear-gradient(26.57deg, transparent 0 22px, rgb(0 0 0 / .12) 22px 24px),
    repeating-linear-gradient(-26.57deg, transparent 0 22px, rgb(0 0 0 / .12) 22px 24px),
    linear-gradient(180deg, #7a5a8e, #5a4172);
}

:root[data-theme="light"] .escenario-piso {
  background:
    repeating-linear-gradient(26.57deg, transparent 0 22px, rgb(92 58 30 / .14) 22px 24px),
    repeating-linear-gradient(-26.57deg, transparent 0 22px, rgb(92 58 30 / .14) 22px 24px),
    linear-gradient(180deg, #f3cf9c, #e2b27a);
}

.escenario-muneco {
  position: relative;
  flex: none;
  width: calc(120px * var(--escala));
  height: calc(112px * var(--escala));
  margin: 0 calc(-34px * var(--escala));
  background-image: var(--hoja);
  background-repeat: no-repeat;
  background-size: calc(960px * var(--escala)) calc(112px * var(--escala));
  background-position: calc(-120px * var(--cuadro) * var(--escala)) 0;
  image-rendering: pixelated;
}

/* Respiran: un píxel arriba y abajo, a destiempo. Es lo único que se mueve. */
@media (prefers-reduced-motion: no-preference) {
  .escenario-muneco { animation: escenario-respira 2.4s steps(2, jump-none) infinite; }
  .escenario-muneco--2 { animation-delay: -1.2s; }
}

@keyframes escenario-respira {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

/* El globito de lo que dice, como los del chat del juego. */
.escenario-globo {
  position: absolute;
  left: 50%;
  top: calc(4px * var(--escala));
  transform: translate(-60%, -100%);
  padding: 7px 12px;
  border-radius: var(--r-2);
  background: #fff9f0;
  color: #2e2140;
  font: 600 14px/1.15 var(--f-juego);
  white-space: nowrap;
  box-shadow: 0 3px 0 rgb(8 4 22 / .25);
  animation: j-aparece var(--dur-3) var(--curva-rebote) .3s both;
}

.escenario-globo::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 0 0 4px 0;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

/* ---------------------------------------------------------- entrar y crear cuenta */

.entrada-hoja { padding-block: var(--aire-pagina, var(--e-6)) var(--aire-pagina-abajo, var(--e-5)); }

/*
 * LA FICHA SE QUEDA CON LO QUE HAY, Y SI NO ENTRA RUEDA ADENTRO.
 *
 * `.entrada-hoja` lleva además `j-planta` en las cuatro vistas de cuenta, que
 * es lo que hace que la página mida exactamente la ventana. Acá se reparte ese
 * alto: la ficha nunca pasa del borde de abajo, y lo que no entre se desplaza
 * adentro de la tarjeta en vez de llevarse la página.
 *
 * POR QUÉ HACE FALTA, si el formulario de ingreso son dos campos: porque a
 * veces no son dos campos. Cuando `Sospecha` pide el CAPTCHA se suman 455 px de
 * grilla, y el registro tiene cuatro campos, los tres pasos y las condiciones.
 * Medido en un 390 × 844 con captcha: el ingreso pedía 1.062 px de contenido
 * para 701 de hueco. Recortar aire no alcanza —ni cerca— y esconder la grilla
 * sería esconder el control que hay que tocar.
 *
 * Entonces se desplaza, pero DENTRO DE LA TARJETA. La diferencia no es
 * cosmética: la cabecera, el aviso de error —«contraseña incorrecta»— y el pie
 * se quedan quietos y a la vista, que es justo lo que se perdía cuando la
 * página entera se iba para arriba.
 *
 * En un monitor no cambia nada: si el contenido entra, no hay qué desplazar.
 */
.entrada-hoja.j-planta > .entrada {
  max-height: 100%;
  min-height: 0;

  /* Se centra con `margin: 0 auto`, y un margen automático apaga el
     estiramiento del hijo de flex. Ver la nota de `.j-planta`. */
  width: 100%;
}

.entrada-hoja.j-planta .entrada-ficha {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.entrada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  max-width: 66rem;
  margin: 0 auto;
  background: var(--sup-1);
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-4);
  box-shadow: var(--s-tarjeta-alta), var(--luz-arriba);
  overflow: hidden;
  animation: j-sube var(--dur-3) var(--curva) both;
}

.entrada > .escenario {
  --escala: 2.4;
  border-radius: 0;
  min-height: 100%;
  padding-bottom: 60px;
}

.entrada > .escenario .escenario-piso { width: 520px; height: 260px; bottom: -110px; }

.entrada-ficha {
  padding: clamp(var(--e-4), 3vw, var(--e-6));
}

.entrada-sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--acento-tinte);
  color: var(--acento-texto);
  font: 600 var(--t-1-size)/1 var(--f-juego);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.entrada-titulo {
  margin: var(--e-2) 0 var(--e-1);
  font: 600 var(--t-6-size)/1.1 var(--f-juego);
  letter-spacing: -.015em;
}

.entrada-bajada {
  margin: 0 0 var(--e-5);
  color: var(--carbon-2);
  max-width: 44ch;
}

.entrada-form .grupo-campo { margin-bottom: var(--e-3); }
.entrada-form .btn-1 { margin-top: var(--e-2); }

.entrada-olvide { margin-top: var(--e-2); text-align: right; max-width: none; }

.entrada-pie {
  margin: var(--e-3) 0 0;
  padding-top: var(--e-3);
  border-top: 1px dashed var(--linea);
  font-size: var(--t-2-size);
  color: var(--carbon-2);
  text-align: center;
}

/* Los tres pasos del registro: fichitas con su icono de color. */
.entrada-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
  margin: var(--e-2) 0 var(--e-3);
  padding: 0;
  list-style: none;
}

.entrada-pasos li {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: var(--e-2);
  border-radius: var(--r-2);
  background: var(--sup-2);
  box-shadow: 0 2px 0 var(--canto), var(--luz-arriba);
  font: 600 var(--t-2-size)/1.2 var(--f-juego);
  text-align: center;
  color: var(--carbon);
}

.entrada-paso-icono {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lapacho);
  color: #2a0a1c;
}

.entrada-paso-icono--sol { background: var(--sol); color: #3d2600; }
.entrada-paso-icono--rio { background: var(--rio); color: #04262c; }

.entrada-dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--e-3);
}

.entrada-dos-ayuda { grid-column: 1 / -1; margin: calc(-1 * var(--e-2)) 0 var(--e-4); }

.entrada-casilla {
  padding: var(--e-3);
  border-radius: var(--r-2);
  background: var(--sup-2);
  font-size: var(--t-2-size);
  font-weight: 600;
}

/* Un campo con su icono adentro, a la izquierda (como `.j-buscador`). */
.campo-con-icono {
  position: relative;
  display: flex;
  align-items: center;
}

.campo-con-icono > .icono-svg {
  position: absolute;
  left: 14px;
  color: var(--carbon-3);
  pointer-events: none;
  transition: color var(--dur-2) var(--curva);
}

.campo-con-icono > input { padding-left: 42px; max-width: none; height: var(--h-3); }
.campo-con-icono:focus-within > .icono-svg { color: var(--acento); }

/* ==========================================================================
 *  EL INGRESO SE ACOMODA POR ANCHO **Y POR ALTO**
 * ==========================================================================
 *
 * Lo que había: un solo corte, en 860 px de ancho. Arriba de eso, dos
 * columnas; abajo, una. Medido con el navegador, eso daba dos problemas que se
 * ven en cuanto se mira:
 *
 *  1. EN UNA NOTEBOOK (1280×720) la columna de la izquierda era un rectángulo
 *     vacío de 544×630 con una luna y dos nubes, mientras el formulario —que
 *     con la grilla del captcha mide unos 900 px— quedaba cortado abajo. Medio
 *     ancho de pantalla sin usar Y contenido que no entra, las dos cosas a la
 *     vez.
 *
 *  2. EN UN CELULAR ACOSTADO (844×390) el ancho 844 es menor que 860, así que
 *     caía en «una columna»: la escena decorativa ocupaba 190 px, la barra de
 *     arriba 58, y el campo «Usuario o correo» empezaba JUSTO debajo del borde
 *     de abajo. Al que entra acostado le aparecía una pantalla de adorno y
 *     nada más.
 *
 * Lo que hay ahora mira las dos medidas, y CADA UNA DECIDE LO SUYO:
 *
 *   ancho ≥ 900                 el formulario se abre en dos: los campos a la
 *                               izquierda, la grilla del captcha a la derecha.
 *                               Lo decide el ANCHO y nada más;
 *   alto ≤ 820                  se recorta el aire: rellenos, márgenes y el
 *                               tamaño de la escena. Lo decide el ALTO;
 *   ancho < 768                 una columna, con la escena arriba;
 *   alto ≤ 440                  una columna sin escena. La escena es adorno y
 *                               el formulario es la tarea: con 390 px de alto
 *                               el adorno se va.
 *
 * ==========================================================================
 *  POR QUÉ SE SEPARARON LOS DOS EJES
 * ==========================================================================
 *
 * El formulario en dos columnas colgaba de `max-height`, o sea que sólo se
 * armaba cuando faltaba alto. Eso dejaba el peor de los dos mundos en un
 * monitor grande: con 1920 × 1080 hay ancho de sobra y el formulario se
 * apilaba igual, midiendo 1.113 px contra 949 disponibles. Medido: se salía
 * 164 px por abajo en la pantalla MÁS grande del banco.
 *
 * Partir el formulario en dos es bueno siempre que haya ancho. Y recortar el
 * aire es bueno siempre que falte alto. Son dos preguntas distintas y ahora
 * cada una tiene su media query.
 */

/*
 * ANCHO DE SOBRA: el formulario se reparte en dos.
 *
 * En vez de achicar la letra —que es lo que el usuario pidió expresamente que
 * NO se haga— se usa el ancho que estaba vacío: los campos de un lado, la
 * grilla del otro. El formulario pasa de ~1.100 px de alto a ~450.
 */
@media (min-width: 900px) {
  /*
   * EL FORMULARIO ES EL PROTAGONISTA DE ESTA PANTALLA, Y NO LO ERA.
   *
   * Medido en el registro a 1366 × 768: la escena decorativa se quedaba con
   * 448 px, el bloque del captcha con 435 —por una frase de ayuda larga que le
   * estiraba la columna `auto`— y los CAMPOS, que son lo que hay que llenar,
   * con 195. Un campo de 195 px muestra «Cómo te lla…» y obliga a escribir un
   * correo mirando por una rendija.
   *
   * Dos cambios y ninguno saca nada de la pantalla:
   *
   *   · la ficha crece a 52rem y la escena se queda con lo que sobra (sigue
   *     siendo un tercio, que es lo que necesita para que se vean los dos
   *     muñecos enteros);
   *   · la columna del captcha deja de ser `auto` y se acota a 22rem, que es
   *     lo que mide la grilla más su aire. Lo que la estiraba era el renglón
   *     de ayuda, y un renglón de ayuda puede ir en dos líneas.
   *
   * Los campos pasan de 195 px a unos 400.
   */
  .entrada {
    grid-template-columns: minmax(0, 1fr) minmax(0, 52rem);
    max-width: 78rem;
  }


  .entrada-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: 0 var(--e-4);
    align-items: start;
  }

  /*
   * TODO lo que no es el captcha va a la izquierda, uno abajo del otro.
   *
   * Antes esto nombraba `.grupo-campo` y `.btn-1`, y con eso alcanzaba para el
   * ingreso, que no tiene otra cosa. En el REGISTRO no: ahí hay un
   * `.entrada-dos` —dos campos en una fila— y una casilla de condiciones que
   * no estaban nombrados, así que caían en la colocación automática y se
   * peleaban con el captcha por la segunda columna. Medido: el registro medía
   * 1.015 px contra 768 de ventana.
   *
   * Nombrar a todos los hijos y hacer una sola excepción es más corto y no se
   * rompe cuando mañana el formulario tenga un campo más.
   */
  .entrada-form > * { grid-column: 1; }

  /* Y la grilla de dibujos al lado, ocupando todo el alto de la columna. */
  .entrada-form > .captcha {
    grid-column: 2;
    grid-row: 1 / span 99;
    margin: 0;

    /* Centrada y no arriba: la columna de los campos es más alta que la
       grilla, y con la grilla pegada arriba quedaba un vacío de 300 px
       abajo que parecía un pedazo de pantalla que no cargó. */
    align-self: center;
  }

  /*
   * Y LOS PARES DE CAMPOS VUELVEN A CABER EN UNA FILA.
   *
   * Esta regla los apilaba, y tenía razón cuando la columna de los campos
   * medía 205 px: cada uno quedaba en 95 y el navegador mostraba «Eleg» y
   * «La r». Con la columna en ~400, dos campos de 190 muestran «Elegí una» y
   * «La misma» enteros, así que la fila vuelve — y el formulario pierde dos
   * renglones de alto, que es lo que hace que el botón de crear la cuenta
   * quede a la vista sin rodar.
   *
   * Es el mismo componente `.entrada-dos` para los cuatro campos: el nombre y
   * el correo arriba, las dos contraseñas abajo.
   */
  .entrada-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /*
   * =========================================================================
   *  QUE LAS DOS COLUMNAS CUADREN, Y QUE SÓLO ESTÉN CUANDO HACEN FALTA
   * =========================================================================
   *
   * Quedaban dos huecos a la vista:
   *
   *   · CON la grilla de dibujos: las dos columnas eran del FORMULARIO, y el
   *     sello, el título y la bajada van antes, a todo el ancho. Así que la
   *     grilla arrancaba recién debajo de ellos —y encima centrada en alto—:
   *     arriba a la derecha sobraba un rectángulo vacío, y abajo la ficha no
   *     entraba en la ventana y había que rodar para leer la ayuda.
   *   · SIN la grilla —que es como entra casi todo el mundo—: la segunda
   *     columna seguía reservada, vacía, y los campos ocupaban media ficha.
   *
   * Ahora las columnas son de la FICHA: la izquierda lleva el título, los
   * campos y el botón; la derecha, la grilla, desde arriba de todo y a la par
   * del título. El formulario se vuelve transparente para la grilla
   * (`display: contents`): sus hijos pasan a ser celdas de la ficha, y sigue
   * siendo el mismo formulario para el navegador. Y sin grilla de dibujos hay
   * una sola columna, angosta, que es lo que mide un ingreso.
   */
  .entrada-ficha:has(.captcha) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: 0 var(--e-5);
    align-items: start;
    align-content: start;
  }

  .entrada-ficha:has(.captcha) > *,
  .entrada-ficha:has(.captcha) > .entrada-form > * { grid-column: 1; }

  .entrada-ficha:has(.captcha) > .entrada-form { display: contents; }

  .entrada-ficha:has(.captcha) > .entrada-form > .captcha {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: start;
    margin: 0;
  }

  .entrada-form:not(:has(.captcha)) { display: block; }

  .entrada:has(.entrada-form:not(:has(.captcha))) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  }
}

/*
 * LA ESCENA NECESITA SU ANCHO O NO VA.
 *
 * La ficha con el formulario en dos columnas pide 46 rem —736 px— y se los
 * queda primero; la escena se conforma con lo que sobre. Medido: en una ventana
 * de 960 le sobraban 111 px, y en 111 px lo que se ve es media luna, medio
 * muñeco y un globo de diálogo partido al medio. Un adorno cortado se lee como
 * una pantalla rota, y era exactamente lo que se veía.
 *
 * Entre 900 y 1180 de ancho, entonces, la escena se va y la ficha se queda con
 * todo. Es la misma decisión que ya estaba tomada para el celular y para la
 * pantalla rasante, con la misma razón: la escena no tiene ni un dato ni un
 * control, y el formulario es la tarea. De 1180 para arriba vuelve, con sus
 * 277 px o más, que es donde se ve entera.
 */
@media (min-width: 900px) and (max-width: 1179px) {
  .entrada > .escenario { display: none; }

  .entrada {
    grid-template-columns: minmax(0, 46rem);
    max-width: 46rem;
  }

  /* Sin la grilla de dibujos la ficha es de una columna: más angosta. */
  .entrada:has(.entrada-form:not(:has(.captcha))) {
    grid-template-columns: minmax(0, 30rem);
    max-width: 30rem;
  }
}

/*
 * FALTA ALTO: se recorta el aire, no el contenido.
 *
 * El corte está en 820 para que entren las dos notebooks de verdad —1366 × 768
 * y 1280 × 720—, que eran justamente las que se salían y no llegaban a ningún
 * corte de los que había (el más alto era 780).
 */
@media (max-height: 920px) {
  .entrada-ficha { padding: var(--e-4) var(--e-6); }
  .entrada-bajada { margin-bottom: var(--e-4); }
}

@media (max-height: 820px) {
  .entrada-titulo { margin-top: var(--e-2); }
  .entrada-bajada { margin-bottom: var(--e-3); }
  .entrada-pie { margin-top: var(--e-4); }

  /*
   * LOS TRES PASOS DEL REGISTRO, EN UNA FILA.
   *
   * Apilados son 78 px más 36 de margen: 114 de los 768 que hay, para decir
   * tres cosas de cuatro palabras. En una fila dicen lo mismo en 40.
   *
   * No se sacan: son lo que contesta «¿para qué me estoy registrando?», que en
   * una pantalla de alta es justamente lo que hay que poder leer.
   */
  .entrada-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    margin-block: var(--e-2) var(--e-3);
  }

  .entrada-pasos li { padding-block: 2px; }
}

/* LA ESCENA NO PUEDE SER MÁS ALTA QUE LA PANTALLA. */
@media (max-height: 820px) {
  .entrada > .escenario { --escala: 1.8; padding-bottom: 32px; }
  .entrada > .escenario .escenario-piso { width: 400px; height: 200px; bottom: -92px; }
}

/*
 * UNA SOLA COLUMNA.
 *
 * El corte bajó de 860 a 768 —uno de los cortes del sistema— justamente para
 * que el celular acostado (844) NO caiga acá: ahí hay ancho de sobra y lo que
 * falta es alto, así que le sirve la regla de arriba y no ésta.
 */
@media (max-width: 768px) {
  .entrada { grid-template-columns: 1fr; max-width: 34rem; }

  .entrada > .escenario {
    --escala: 1.5;
    min-height: 0;
    height: clamp(120px, 24vh, 190px);
    padding-bottom: 24px;
  }

  .entrada > .escenario .escenario-piso { width: 340px; height: 170px; bottom: -84px; }
}

/*
 * PANTALLA RASANTE: se va el adorno, entre en una o en dos columnas.
 *
 * Es el celular acostado (844×390) y la ventana achatada de una notebook. Es
 * el único caso en que se saca algo de la pantalla, y es una decisión tomada,
 * no una rendija para tapar un problema: la escena es DECORATIVA —no tiene ni
 * un dato ni un control— y con 390 px de alto lo único que hacía era empujar
 * el formulario fuera de la vista.
 *
 * Medido: la escena se estaba llevando 325 de los 844 px de ancho. Sacándola,
 * el formulario queda en dos columnas de verdad —campos y grilla, uno al lado
 * del otro— y entra entero sin desplazar.
 */
@media (max-height: 440px) {
  .entrada > .escenario { display: none; }

  .entrada {
    grid-template-columns: minmax(0, 1fr);
    max-width: 60rem;
  }

  .entrada-hoja { padding-block: var(--e-3); }
  .entrada-ficha { padding: var(--e-4) var(--e-5); }
  .entrada-titulo { margin-top: 0; }
  .entrada-bajada { margin-bottom: var(--e-3); }
}

@media (max-width: 560px) {
  .entrada-hoja { padding-inline: var(--e-3); padding-top: var(--e-3); }
  .entrada-dos { grid-template-columns: 1fr; }
  .entrada-pasos li { font-size: var(--t-1-size); padding: var(--e-2) 4px; }

  /*
   * EN EL CELULAR, LA ESCENA SE VA.
   *
   * Es la misma decisión que ya estaba tomada para el celular acostado, con la
   * misma razón y ahora también con el número: medido en un 390 × 844, la
   * escena se llevaba 214 px de los 844. Con ella, el formulario SIN captcha
   * medía 906 y no entraba; sin ella mide 692 y entra entero.
   *
   * Se puede sacar porque es DECORATIVA: no tiene ni un dato, ni un control,
   * ni un texto que haga falta leer. Lo que no se saca nunca es el formulario,
   * el botón ni la ayuda: eso es la tarea.
   */
  .entrada > .escenario { display: none; }

  .entrada { grid-template-columns: minmax(0, 1fr); }
}

/*
 * =============================================================================
 *  EL INGRESO EN EL CELULAR: TODO A LA VISTA, DE UNA (17/10)
 * =============================================================================
 *
 * Medido en el teléfono del dueño (392 × 735): la ficha pedía 1.150 px para
 * 620 de hueco. La grilla del captcha arrancaba a los 446 px, la mitad de abajo
 * quedaba tapada por el pie y el botón «Entrar» ni aparecía: la gente ponía
 * usuario y contraseña, no veía nada más y se quedaba esperando.
 *
 * Lo que se hace, en orden de cuánto alto devuelve, y sin achicar la letra:
 *
 *   · el pie del sitio y el sello se van (son adorno, no tienen un control);
 *   · la bajada y la ayuda del usuario también: el rótulo y el ejemplo del
 *     campo ya dicen lo mismo;
 *   · «¿Te olvidaste la contraseña?» sube al renglón del rótulo;
 *   · y la grilla se pone AL LADO de la consigna en vez de debajo, con un
 *     tamaño que sale del alto de la pantalla (entre 150 y 220 px: los
 *     casilleros nunca bajan de 50, que es más que un dedo).
 *
 * Con eso entra entera en 392 × 735. En un teléfono más bajo la grilla se
 * achica hasta su piso y, si igual no entra, se desplaza adentro de la ficha
 * como antes (ver `.j-planta`), pero ya con el cartel del paso a la vista.
 */
@media (max-width: 560px) {
  body:has(> main > .entrada-hoja--ingreso) > .pie { display: none; }

  .entrada-hoja--ingreso { padding-block: var(--e-2); }

  .entrada-hoja--ingreso .entrada-ficha { padding: var(--e-3) var(--e-4); }

  .entrada-hoja--ingreso .entrada-sello,
  .entrada-hoja--ingreso .entrada-bajada,
  .entrada-hoja--ingreso #login-email-ayuda,
  .entrada-hoja--ingreso .captcha-ayuda { display: none; }

  .entrada-hoja--ingreso .entrada-titulo {
    margin: 0 0 var(--e-3);
    font-size: 1.35rem;
  }

  .entrada-hoja--ingreso .entrada-form .grupo-campo { margin-bottom: var(--e-3); }

  /* «¿Te olvidaste…?» en el renglón del rótulo, a la derecha. */
  .entrada-hoja--ingreso .grupo-campo:has(> .entrada-olvide) { position: relative; }

  .entrada-hoja--ingreso .entrada-olvide {
    position: absolute;
    top: -10px;
    right: 0;
    margin: 0;
  }

  /* La grilla a la izquierda; la consigna, «otros dibujos» y la cuenta a su lado. */
  .entrada-hoja--ingreso .captcha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "explica explica"
      "grilla  cabeza"
      "grilla  cuenta";
    gap: 0 var(--e-3);
    padding: var(--e-3);
  }

  .entrada-hoja--ingreso .captcha-explica { grid-area: explica; margin-bottom: var(--e-2); }

  .entrada-hoja--ingreso .captcha-cabeza {
    grid-area: cabeza;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
  }

  .entrada-hoja--ingreso .captcha-grilla {
    grid-area: grilla;
    width: min(clamp(150px, calc(100dvh - 515px), 220px), 58vw);
  }

  .entrada-hoja--ingreso .captcha-cuenta { grid-area: cuenta; margin: var(--e-1) 0 0; }

  .entrada-hoja--ingreso .entrada-pie { margin-top: var(--e-3); padding-top: var(--e-2); }
}

/* ---------------------------------------------------------- las páginas de error */

.error-pagina {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--e-5) var(--e-4);
}

.error {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  width: min(100%, 60rem);
}

.error-caja {
  --tono: var(--rio);

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  width: 100%;
  background: var(--sup-1);
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-4);
  box-shadow: var(--s-tarjeta-alta), var(--luz-arriba);
  overflow: hidden;
  animation: j-sube var(--dur-3) var(--curva) both;
}

.error-caja--mal { --tono: var(--peligro); }

.error-caja > .escenario { border-radius: 0; min-height: 320px; }

.error-texto {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--e-3);
  padding: clamp(var(--e-5), 4vw, var(--e-7));
}

/* El número del error como cartel de juego: grande, con canto de color. */
.error-numero {
  margin: 0;
  font: 700 clamp(64px, 11vw, 112px)/.9 var(--f-juego);
  letter-spacing: -.02em;
  color: var(--carbon);
  text-shadow:
    0 3px 0 var(--tono),
    0 6px 0 color-mix(in srgb, var(--tono) 55%, #000),
    0 14px 24px rgb(var(--sombra-tinta) / .35);
}

.error-titulo { margin: var(--e-2) 0 0; font-size: var(--t-6-size); line-height: 1.15; }

.error-bajada { margin: 0; color: var(--carbon-2); max-width: 46ch; }

.error-texto .aviso { margin: 0; }

.error-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-3);
}

.error-botones form { display: contents; }

@media (max-width: 760px) {
  .error-caja { grid-template-columns: 1fr; }
  .error-caja > .escenario { --escala: 1.5; min-height: 0; height: 200px; padding-bottom: 20px; }
  .error-caja > .escenario .escenario-piso { width: 320px; height: 160px; bottom: -80px; }
  .error-botones { width: 100%; }
  .error-botones > * { flex: 1 1 100%; }
}


/* ===== unc_ui.css ===== */
/*
 * ==========================================================================
 *  LAS PIEZAS DE LA INTERFAZ — un solo juego de componentes para todo
 * ==========================================================================
 *
 * Todo lo que se toca o se lee en UnCorrentino sale de acá: el HUD de la
 * casa, el modo decorar, el ropero, el mapa, el taller y las páginas. Cada
 * pantalla puede acomodar las piezas a su manera, pero no inventa las suyas.
 * Las medidas y colores vienen de `estilos_generales.css`.
 *
 * El lenguaje:
 *   · formas redondas y con CUERPO: los botones y fichas tienen un canto
 *     abajo, como una pieza de juego, y al apretarlos se hunden;
 *   · la letra del juego (Fredoka) para títulos, números y botones;
 *   · profundidad en capas: mundo → HUD → panel → ventana → lo elegido;
 *   · movimientos cortos que explican algo (aparecer, elegir, hundirse).
 *
 * Prefijo `j-`. Las variantes van con `--`; los estados con `es-` o con los
 * atributos de accesibilidad (`aria-pressed`, `aria-selected`,
 * `aria-current`, `disabled`).
 */

/* ------------------------------------------------------------ la base */

body {
  font-family: var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .j-titulo {
  font-family: var(--f-juego);
  font-weight: 600;
  letter-spacing: -.005em;
}

.j-titulo { margin: 0; color: var(--carbon); font-size: var(--t-5-size); line-height: 1.2; }
.j-titulo--grande { font-size: var(--t-7-size); line-height: 1.08; }
.j-titulo--chico { font-size: var(--t-4-size); }

/* El rótulo de una sección dentro de un panel: chico, con la letra del juego. */
.j-rotulo {
  margin: 0;
  font: 600 var(--t-1-size)/1.3 var(--f-juego);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--carbon-3);
}

.j-texto { margin: 0; color: var(--carbon-2); font-size: var(--t-2-size); line-height: 1.45; }

.j-numero {
  font-family: var(--f-numero);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.j-icono {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.j-icono--chico { width: 16px; height: 16px; }
.j-icono--grande { width: 24px; height: 24px; }

:where(.j-boton, .j-pestana, .j-chip, .j-tarjeta, .j-campo, .j-redondo):focus-visible {
  outline: none;
  box-shadow: var(--foco);
}

/* ------------------------------------------------------------ botones */

.j-boton {
  --b-fondo: var(--sup-3);
  --b-texto: var(--carbon);
  --b-borde: var(--filo-fuerte);
  --b-canto: var(--canto);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--h-2);
  padding: 0 var(--e-4);
  border: 1px solid var(--b-borde);
  border-radius: var(--r-2);
  background: var(--b-fondo);
  color: var(--b-texto);
  font: 600 var(--t-3-size)/1 var(--f-juego);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 3px 0 var(--b-canto), var(--luz-arriba);
  transform: translateY(0);
  transition:
    transform var(--dur-1) var(--curva),
    box-shadow var(--dur-1) var(--curva),
    background-color var(--dur-2) var(--curva),
    filter var(--dur-2) var(--curva);
}

.j-boton:hover { filter: brightness(1.08); }

.j-boton:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--b-canto), var(--luz-arriba);
}

.j-boton:disabled,
.j-boton[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .5;
  filter: saturate(.4);
}

.j-boton--primario {
  --b-fondo: var(--grad-luz);
  --b-texto: var(--sobre-acento);
  --b-borde: transparent;
  --b-canto: var(--canto-acento);
}

.j-boton--social {
  --b-fondo: var(--lapacho);
  --b-texto: #2a0a1c;
  --b-borde: transparent;
  --b-canto: #a8306e;
}

.j-boton--bien {
  --b-fondo: var(--verde);
  --b-texto: #06261a;
  --b-borde: transparent;
  --b-canto: #2f8f5a;
}

.j-boton--peligro {
  --b-fondo: var(--peligro-tinte);
  --b-texto: var(--peligro);
  --b-borde: color-mix(in srgb, var(--peligro) 45%, transparent);
  --b-canto: color-mix(in srgb, var(--peligro) 40%, var(--canto));
}

.j-boton--fantasma {
  --b-fondo: transparent;
  --b-borde: transparent;
  --b-canto: transparent;
  box-shadow: none;
}

.j-boton--fantasma:hover { background: var(--filo); filter: none; }
.j-boton--fantasma:active:not(:disabled) { box-shadow: none; }

/*
 * EL BOTÓN CHICO ES CHICO DE DIBUJO, NO DE ÁREA.
 *
 * Eran 34 px clavados, y es el botón más repetido del juego: «Abrir», «Cerrar»,
 * «Vender», «Restaurar»… Medido en el panel de administración de la sala, doce
 * de estos por pantalla, todos por debajo de lo que un dedo acierta.
 *
 * `--tocable-chico` vale 40 y `--h-1` sube solo a 44 en pantalla táctil, así
 * que con esto el mismo botón mide 34 con mouse —donde 34 está bien y de paso
 * entra más información en una fila— y 44 con dedo, sin una media query por
 * pantalla.
 */
.j-boton--chico { min-height: 34px; padding: 0 var(--e-3); font-size: var(--t-2-size); border-radius: var(--r-1); }

@media (pointer: coarse) {
  .j-boton--chico { min-height: var(--tocable-chico); padding-inline: var(--e-4); }

  /* Las solapas, en todas las pantallas que usen el componente. */
  .j-pestana { min-height: var(--tocable); }

  /*
   * Y los plegables: un `<summary>` es un renglón de texto de 22 px de alto y
   * es lo único que abre la sección. En el taller hay dos («Medidas» y
   * «Escala») y esconden herramientas que no están en ningún otro lado.
   */
  details > summary {
    display: flex;
    align-items: center;
    min-height: var(--tocable-chico);
  }
}
.j-boton--grande { min-height: var(--h-4); padding: 0 var(--e-5); font-size: var(--t-4-size); border-radius: var(--r-3); }
.j-boton--ancho { width: 100%; }
.j-boton--pastilla { border-radius: var(--r-full); }

/* Apretado (un interruptor encendido). Los de color propio no se tiñen:
   «Estoy listo» o el género elegido tienen que seguir viéndose mandarina o
   verdes; se marcan hundidos. */
.j-boton:not(.j-boton--primario, .j-boton--bien, .j-boton--social)[aria-pressed="true"],
.j-boton:not(.j-boton--primario, .j-boton--bien, .j-boton--social).es-activo {
  --b-fondo: var(--acento-tinte);
  --b-texto: var(--acento-texto);
  --b-borde: var(--acento-borde);
}

/* Botón redondo con un icono: el de las barras del HUD. */
.j-redondo {
  --b-fondo: var(--sup-2);
  --b-texto: var(--carbon-2);
  --b-canto: var(--canto);

  position: relative;
  display: grid;
  place-items: center;
  width: var(--tocable);
  height: var(--tocable);
  padding: 0;
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-2);
  background: var(--b-fondo);
  color: var(--b-texto);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--b-canto), var(--luz-arriba);
  transition:
    transform var(--dur-1) var(--curva),
    box-shadow var(--dur-1) var(--curva),
    color var(--dur-2) var(--curva),
    background-color var(--dur-2) var(--curva);
}

.j-redondo:hover { color: var(--carbon); background: var(--sup-3); }

.j-redondo:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--b-canto), var(--luz-arriba);
}

.j-redondo[aria-pressed="true"],
.j-redondo[aria-current],
.j-redondo.es-activo {
  --b-fondo: var(--grad-luz);
  --b-texto: var(--sobre-acento);
  --b-canto: var(--canto-acento);
  border-color: transparent;
}

.j-redondo .j-icono { width: 22px; height: 22px; }

/* El puntito de «hay algo nuevo» (un trato, un pedido de amistad). */
.j-punto {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--lapacho);
  color: #2a0a1c;
  font: 700 var(--t-0-size)/18px var(--f-numero);
  text-align: center;
  box-shadow: 0 0 0 2px var(--sup-1);
  animation: j-late 1.6s var(--curva) infinite;
}

/* ------------------------------------------------------------ superficies */

.j-panel {
  position: relative;
  background: var(--sup-1);
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-4);
  box-shadow: var(--s-3), var(--luz-arriba);
  color: var(--carbon);
}

.j-panel--alto { background: var(--sup-2); box-shadow: var(--s-tarjeta-alta), var(--luz-arriba); }

.j-panel__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-3) var(--e-5);
}

.j-panel__cuerpo { padding: 0 var(--e-5) var(--e-5); }

/* Una caja dentro de un panel: agrupa sin pesar. */
.j-caja {
  background: var(--sup-2);
  border: 1px solid var(--filo);
  border-radius: var(--r-3);
  padding: var(--e-3) var(--e-4);
}

/* La pastilla del HUD: un icono y un dato. */
.j-contador {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 var(--e-3) 0 6px;
  border-radius: var(--r-full);
  background: var(--sup-2);
  border: 1px solid var(--filo-fuerte);
  color: var(--carbon);
  box-shadow: 0 2px 0 var(--canto), var(--luz-arriba);
  font: 600 var(--t-3-size)/1 var(--f-numero);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.j-contador__icono {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--sup-3);
  color: var(--carbon-2);
}

.j-contador__icono .j-icono { width: 16px; height: 16px; }

.j-contador--plata .j-contador__icono { background: var(--sol); color: #3d2600; }
.j-contador--casa .j-contador__icono { background: var(--rio); color: #04262c; }
.j-contador--gente .j-contador__icono { background: var(--lapacho); color: #2a0a1c; }

/* ------------------------------------------------------------ pestañas */

.j-pestanas {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--sup-0);
  border: 1px solid var(--filo);
  overflow-x: auto;
  scrollbar-width: none;
}

.j-pestanas::-webkit-scrollbar { display: none; }

.j-pestana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 0 auto;

  /*
   * 36 con mouse, 44 con dedo (ver el bloque `pointer: coarse` de más abajo).
   * `.j-pestana` es el componente de solapas de TODO el proyecto —el taller,
   * el panel de administración, los paneles del juego— así que este número
   * decide si se le acierta a una solapa en siete pantallas distintas.
   */
  min-height: 36px;
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--carbon-2);
  font: 600 var(--t-2-size)/1 var(--f-juego);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--curva), color var(--dur-2) var(--curva);
}

.j-pestana:hover { color: var(--carbon); background: var(--filo); }

.j-pestana[aria-selected="true"],
.j-pestana.es-activo {
  background: var(--sup-3);
  color: var(--carbon);
  box-shadow: 0 2px 0 var(--canto), var(--luz-arriba);
}

.j-pestana .j-icono { width: 16px; height: 16px; }

/* Chips: filtros y opciones cortas. */
.j-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 var(--e-3);
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-full);
  background: var(--sup-2);
  color: var(--carbon-2);
  font: 600 var(--t-2-size)/1 var(--f-texto);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--curva), color var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva);
}

.j-chip:hover { color: var(--carbon); border-color: var(--trazo); }

.j-chip[aria-pressed="true"],
.j-chip[aria-selected="true"],
.j-chip.es-activo {
  background: var(--acento-tinte);
  border-color: var(--acento-borde);
  color: var(--acento-texto);
}

/* ------------------------------------------------------------ campos */

.j-campo {
  width: 100%;
  min-height: var(--h-2);
  padding: 0 var(--e-4);
  border: 2px solid var(--linea);
  border-radius: var(--r-2);
  background: var(--sup-0);
  color: var(--carbon);
  font: 600 var(--t-3-size)/1.2 var(--f-texto);
  transition: border-color var(--dur-2) var(--curva), background-color var(--dur-2) var(--curva);
}

.j-campo::placeholder { color: var(--carbon-3); font-weight: 500; }
.j-campo:hover { border-color: var(--trazo); }
.j-campo:focus { outline: none; border-color: var(--acento); background: var(--sup-1); }

select.j-campo {
  appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--carbon-2) 50%),
    linear-gradient(135deg, var(--carbon-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* El buscador: la lupa adentro del campo. */
.j-buscador {
  position: relative;
  display: flex;
  align-items: center;
}

.j-buscador > .j-icono {
  position: absolute;
  left: 14px;
  color: var(--carbon-3);
  pointer-events: none;
}

.j-buscador > .j-campo { padding-left: 42px; }

/* ------------------------------------------------------------ fichas de cosas */

/*
 * La ficha de un mueble, una prenda o un objeto. El dibujo es el
 * protagonista: va grande, sobre un «escenario» con luz, y el nombre y el
 * precio abajo. Elegida: borde mandarina y se levanta.
 */
.j-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 6px 6px var(--e-2);
  border: 2px solid transparent;
  border-radius: var(--r-3);
  background: var(--sup-2);
  color: var(--carbon);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--canto), var(--luz-arriba);
  transition:
    transform var(--dur-2) var(--curva-rebote),
    box-shadow var(--dur-2) var(--curva),
    border-color var(--dur-2) var(--curva);
}

.j-tarjeta:hover { transform: translateY(-2px); border-color: var(--trazo); }
.j-tarjeta:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--canto), var(--luz-arriba); }

/*
 * EL ESCENARIO DE LA FICHA.
 *
 * `grid-template-*` NO SOBRA, aunque adentro haya un solo hijo.
 *
 * Sin declararlas, la única fila de la grilla queda en `auto`, que quiere decir
 * «tan alta como su hijo». Y el hijo —la imagen del mueble— se mide con
 * porcentajes contra esa misma fila: la cuenta se muerde la cola, el navegador
 * la resuelve con el tamaño natural del dibujo y los topes `max-height` no
 * limitan nada. Con `overflow: hidden` encima, el resultado es un mueble alto
 * recortado.
 *
 * Medido en el inventario antes de esto: escena de 121 × 97 con la mesada
 * dibujada a 77 × 142, o sea 57 px afuera. Lo mismo le pasaba al catálogo de
 * decorar, que es de donde vino el reporte («las heladeras son una caja
 * blanca»).
 *
 * Con la fila y la columna en `minmax(0, 1fr)` el alto lo pone la escena —que
 * sí lo tiene, por su `aspect-ratio`— y los porcentajes del hijo tienen contra
 * qué resolverse.
 */
.j-tarjeta__escena {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 5 / 4;
  border-radius: calc(var(--r-3) - 6px);
  background:
    radial-gradient(70% 60% at 50% 38%, rgb(255 244 228 / .12), transparent 70%),
    linear-gradient(180deg, var(--sup-3), var(--sup-1));
  overflow: hidden;
}

:root[data-theme="light"] .j-tarjeta__escena {
  background:
    radial-gradient(70% 60% at 50% 38%, #ffffff, transparent 72%),
    linear-gradient(180deg, #fff3e2, #f6e3c8);
}

/* el piso donde apoya: una elipse de sombra */
.j-tarjeta__escena::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 12%;
  height: 12%;
  border-radius: 50%;
  background: rgb(var(--sombra-tinta) / .22);
  filter: blur(3px);
}

.j-tarjeta__escena img,
.j-tarjeta__escena canvas {
  position: relative;
  z-index: 1;
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform var(--dur-3) var(--curva-rebote);
}

.j-tarjeta:hover .j-tarjeta__escena img,
.j-tarjeta:hover .j-tarjeta__escena canvas { transform: scale(1.06); }

.j-tarjeta__nombre {
  margin: var(--e-2) 2px 2px;
  font: 700 var(--t-2-size)/1.2 var(--f-texto);
  color: var(--carbon);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.j-tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 2px;
}

.j-tarjeta[aria-pressed="true"],
.j-tarjeta.es-elegida {
  border-color: var(--acento);
  box-shadow: 0 3px 0 var(--canto-acento), 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent);
  transform: translateY(-2px);
}

.j-tarjeta.no-alcanza .j-precio { color: var(--peligro); }
.j-tarjeta.no-alcanza .j-tarjeta__escena img { filter: saturate(.55); opacity: .8; }

/* La esquina de la ficha: «tenés 2», «nuevo». */
.j-tarjeta__marca {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* ------------------------------------------------------------ plata e insignias */

.j-precio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 var(--t-2-size)/1 var(--f-numero);
  color: var(--sol-texto);
  font-variant-numeric: tabular-nums;
}

/* la monedita */
.j-precio::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1b8 0 18%, var(--p-sol) 20% 62%, #d59a00 64%);
  box-shadow: 0 1px 0 #a87a00;
}

.j-precio--gratis::before { display: none; }

.j-insignia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--sup-3);
  color: var(--carbon-2);
  /* `--t-0-size`: 11 con mouse, 12,5 con dedo. Ver `unc_responsive.css`. La
     insignia dice cosas que no están escritas en ningún otro lado («Tuya»,
     «3 adentro»), así que en un teléfono tiene que leerse. */
  font: 600 var(--t-0-size)/1 var(--f-juego);
  letter-spacing: .03em;
  white-space: nowrap;
}

.j-insignia--mia { background: var(--verde); color: #06261a; }
.j-insignia--aviso { background: var(--sol); color: #3d2600; }
.j-insignia--social { background: var(--lapacho); color: #2a0a1c; }
.j-insignia--info { background: var(--rio); color: #04262c; }
.j-insignia--peligro { background: var(--peligro); color: #2b0610; }

.j-boton:is(.j-boton--primario, .j-boton--bien, .j-boton--social):is([aria-pressed="true"], .es-activo) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--b-canto), inset 0 2px 6px rgb(0 0 0 / .18);
}

/* De día los fondos de color son más hondos: el texto va claro. */
:root[data-theme="light"] :is(.j-insignia--mia, .j-insignia--info, .j-insignia--social, .j-insignia--peligro) { color: #fff; }
:root[data-theme="light"] .j-boton--bien { --b-texto: #fff; --b-canto: #0e5a33; }
:root[data-theme="light"] .j-boton--social { --b-texto: #fff; --b-canto: #8f2560; }
:root[data-theme="light"] :is(.j-contador--casa, .j-contador--gente) .j-contador__icono { color: #fff; }

/* ------------------------------------------------------------ globos */

/* Tooltip: cualquier cosa con `data-tip`. En el teléfono no aparece. */
@media (hover: hover) and (pointer: fine) {
  [data-tip] { position: relative; }

  [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: calc(100% + 8px);
    padding: 6px 10px;
    border-radius: var(--r-1);
    background: var(--panel-barra-fondo);
    color: var(--panel-barra-texto);
    font: 600 12px/1.2 var(--f-juego);
    white-space: nowrap;
    box-shadow: var(--s-2);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
  }

  [data-tip-lado="der"]::after { left: calc(100% + 10px); bottom: auto; top: 50%; transform: translate(-4px, -50%); }
  [data-tip-lado="izq"]::after { left: auto; right: calc(100% + 10px); bottom: auto; top: 50%; transform: translate(4px, -50%); }
  [data-tip-lado="abajo"]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }

  [data-tip]:hover::after,
  [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

  [data-tip-lado="der"]:hover::after,
  [data-tip-lado="der"]:focus-visible::after,
  [data-tip-lado="izq"]:hover::after,
  [data-tip-lado="izq"]:focus-visible::after { transform: translate(0, -50%); }
}

/* Avisos que aparecen y se van. */
.j-aviso {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  max-width: min(460px, calc(100vw - 32px));
  padding: 10px var(--e-4) 10px 10px;
  border-radius: var(--r-full);
  background: var(--panel-barra-fondo);
  color: var(--panel-barra-texto);
  font: 600 var(--t-2-size)/1.3 var(--f-texto);
  box-shadow: var(--s-3);
  animation: j-aparece var(--dur-3) var(--curva-rebote) both;
}

.j-aviso::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--rio);
}

.j-aviso--bien::before { background: var(--verde); }
.j-aviso--plata::before { background: var(--sol); }
.j-aviso--mal::before { background: var(--peligro); }

/* ------------------------------------------------------------ ventanas */

.j-velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(var(--sombra-tinta) / .55);
  animation: j-funde var(--dur-2) var(--curva) both;
}

.j-ventana {
  position: fixed;
  z-index: 41;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  transform: translate(-50%, -50%);
  animation: j-ventana var(--dur-3) var(--curva-rebote) both;
}

/* ------------------------------------------------------------ vacíos y esperas */

.j-vacio {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  padding: var(--e-6) var(--e-4);
  text-align: center;
  color: var(--carbon-2);
  font: 500 var(--t-2-size)/1.45 var(--f-texto);
}

.j-vacio::before {
  content: '';
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, var(--sup-3) 0 30%, transparent 32%),
    var(--sup-2);
  box-shadow: 0 3px 0 var(--canto);
}

.j-cargando {
  display: inline-flex;
  gap: 6px;
}

.j-cargando i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acento);
  animation: j-salta 900ms var(--curva) infinite;
}

.j-cargando i:nth-child(2) { background: var(--lapacho); animation-delay: 120ms; }
.j-cargando i:nth-child(3) { background: var(--rio); animation-delay: 240ms; }

/* Paginar: dos flechas y el texto en el medio. */
.j-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  font: 600 var(--t-2-size)/1 var(--f-numero);
  color: var(--carbon-2);
}

/* ------------------------------------------------------------ barras de desplazamiento */

.j-desplaza {
  scrollbar-width: thin;
  scrollbar-color: var(--trazo) transparent;
}

.j-desplaza::-webkit-scrollbar { width: 8px; height: 8px; }
.j-desplaza::-webkit-scrollbar-thumb { background: var(--trazo); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

/* ------------------------------------------------------------ movimientos */

@keyframes j-aparece {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@keyframes j-sube {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes j-funde {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes j-ventana {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes j-late {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@keyframes j-salta {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-7px); }
}

@keyframes j-rebote {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.j-rebota { animation: j-rebote var(--dur-3) var(--curva-rebote); }