/* ===========================================================================
   MUNDO: marquesina y talón
   ---------------------------------------------------------------------------
   Este archivo se carga DESPUÉS de style.css y reemplaza el mundo visual.
   Quitar su <link> en base.html devuelve la app al diseño anterior.

   Dos materiales, nada más:
     - tablero de esmalte verde  (la marquesina, el pie, el fondo de noche)
     - cartón manila de boleto   (las superficies, los talones)
   Dos tintas:
     - rojo de numerador  -> todo número impreso
     - ámbar de ampolleta -> la luz, y lo que está vivo

   De día el cartón va bajo los pies y el tablero es la banda de arriba.
   De noche el tablero pasa a ser el suelo. La escena manda: esta app se abre
   en un PC, muchas veces de noche, y una marquesina es un objeto nocturno.
   =========================================================================== */

/* --- La fuente de rótulo, empaquetada ------------------------------------
   Big Shoulders Display (SIL OFL, licencia en static/fuentes/OFL.txt).
   Condensada, de señalética: sirve igual para el rótulo de la marquesina y
   para los seriales del boleto, así que hay UNA sola familia display.
   Viaja dentro del instalador; no se pide nada a internet.
   La del sistema se queda en etiquetas, botones, campos y datos. */
@font-face {
    font-family: "Rotulo";
    src: url("fuentes/big-shoulders-latin.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: block;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC,
                   U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Rotulo";
    src: url("fuentes/big-shoulders-latin-ext.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: block;
    unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

/* --- Tintas y materiales ------------------------------------------------- */

:root,
:root[data-theme="dia"] {
    --tablero:      #123A33;   /* esmalte verde */
    --tablero-alto: #17483F;   /* el mismo, un paso más claro */
    --papel:        #F3E6C6;   /* cartón manila, suelo de día */
    --papel-2:      #FCF5E2;   /* papel de talón, superficies */
    --tinta:        #241C10;   /* 15.2:1 sobre el talón */
    --tinta-2:      #5E5040;   /*  7.0:1 sobre el talón */
    --rojo:         #B3271A;   /*  5.9:1 sobre el talón */
    --verde:        #1C5C50;   /*  7.0:1 sobre el talón */
    --ampolleta:    #E8A93A;
    --hueso:        #EFE3C8;   /*  9.8:1 sobre el tablero */

    --suelo:        var(--papel);
    --sobre-tablero: var(--hueso);
    --regla:        color-mix(in srgb, var(--tinta) 26%, transparent);
    --regla-fuerte: color-mix(in srgb, var(--tinta) 55%, transparent);

    /* La fibra del cartón. Va como ruido SVG y no como rayas repetidas por
       dos razones: unas rayas de gradiente son un tell conocido de interfaz
       generada, y además el analizador de contraste lee el tope oscuro del
       degradado como si fuera una banda maciza y reporta fallos que no
       existen. Esto es una textura de verdad: fibra, no rayas. */
    --fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)' opacity='0.42'/%3E%3C/svg%3E");
    /* La fibra en multiply le quitaba amarillo al cartón y el resultado en
       pantalla derivaba hacia la crema neutra pálida, que es exactamente el
       sitio donde cae cualquier interfaz generada. Se baja la fuerza y se
       calienta el manila para que el píxel que se ve de verdad sea el que
       nombra la paleta, no uno apagado. */
    --fibra-dia: url("fibra-dia.png");
    --fibra-noche: url("fibra-noche.png");
    --fibra-fuerza: .3;

    /* Tokens del diseño anterior, reapuntados: así el mundo alcanza hasta el
       último átomo (un campo, una regla, una barra) sin reescribir 3400
       líneas. Ningún gris neutro de escape. */
    --bg: var(--papel);
    --surface: var(--papel-2);
    --border: var(--regla);
    --text: var(--tinta);
    --muted: var(--tinta-2);
    --primary: var(--verde);
    --primary-hover: #123F37;
    --accent: var(--ampolleta);
    --accent-text: #2A1B00;
    --oro: #8A5A0B;
    --oro-texto: #6F4708;
    --danger: var(--rojo);
    --danger-bg: color-mix(in srgb, var(--rojo) 10%, transparent);
    --track-bg: color-mix(in srgb, var(--tinta) 12%, transparent);
    --btn-icon-bg: color-mix(in srgb, var(--papel-2) 92%, transparent);
    --sobre-relleno: #FFF6E4;
    --textura: transparent;      /* la trama de puntos la reemplaza la fibra */
    --radius: 3px;               /* el cartón troquelado no tiene esquinas blandas */
    --sombra:    color-mix(in srgb, #000 38%, transparent);
    --sombra-suave: color-mix(in srgb, #000 22%, transparent);
    --shadow: 0 8px 18px -12px var(--sombra);
    --fuente-titulo: "Rotulo", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    color-scheme: light;
}

:root[data-theme="noche"] {
    --tablero:      #0A1F1B;
    --tablero-alto: #103029;
    --papel:        #0E2A25;   /* de noche el tablero es el suelo */
    --papel-2:      #14382F;
    --tinta:        #EDE2C8;   /* 10.0:1 */
    --tinta-2:      #A9B8A5;   /*  6.2:1 */
    --rojo:         #F5836B;   /*  4.9:1, con margen sobre el mínimo */
    /* #7FD6BE era cian-verde (tono 163 deg): cian sobre oscuro es uno de
       los tells mas reconocibles. Este es el verde del tablero aclarado
       con calidez (tono 93 deg), 7.7:1 sobre la superficie. */
    --verde:        #B9D0A6;
    --ampolleta:    #F2BB55;
    --hueso:        #EFE3C8;

    --suelo:        var(--papel);
    --regla:        color-mix(in srgb, var(--tinta) 22%, transparent);
    --regla-fuerte: color-mix(in srgb, var(--tinta) 45%, transparent);
    /* De noche la fibra se nota menos: el tablero pintado es más liso que
       el cartón. */
    --fibra-fuerza: .32;

    --primary-hover: #CFE0BC;
    --accent-text: #241C10;
    --oro: var(--ampolleta);
    --oro-texto: var(--ampolleta);
    --danger-bg: color-mix(in srgb, var(--rojo) 16%, transparent);
    --sobre-relleno: #0B221D;
    /* De noche la sombra tiene que seguir siendo oscura: si se deriva de
       --tinta (que aqui es hueso) sale un halo claro, que es justo el
       tell de interfaz generada. */
    --sombra:    color-mix(in srgb, #000 62%, transparent);
    --sombra-suave: color-mix(in srgb, #000 45%, transparent);
    --btn-icon-bg: color-mix(in srgb, var(--papel-2) 92%, transparent);
    color-scheme: dark;
}

/* --- El suelo es un material, no un telón -------------------------------
   Se ve en todas las pantallas, no solo detrás de las tarjetas. */

body {
    background-color: var(--papel);
    color: var(--tinta);
    position: relative;
}
/* La fibra va en una capa propia y fija, para que el grano no se deslice con
   el scroll: el papel no se mueve, lo que se mueve es lo impreso encima. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    /* Sin mix-blend-mode, a propósito: una capa fija a pantalla completa en
       multiply obligaba a recomponer la pantalla entera en cada cuadro de
       scroll, y en un PC con gráficos modestos el scroll caía a 30 fps. Es
       el mismo efecto sin mezclar: multiplicar por un gris es lo mismo que
       poner encima negro con transparencia (1 - gris), y "screen" lo mismo
       que blanco con transparencia (gris). */
    background-image: var(--fibra-dia);
    opacity: var(--fibra-fuerza);
    pointer-events: none;
    z-index: 0;

}
:root[data-theme="noche"] body::before { background-image: var(--fibra-noche); }
body > * { position: relative; z-index: 1; }

/* --- Las superficies del navegador que uno no dibuja ---------------------
   Selección, cursor de texto, barras y anillo de foco vienen con los colores
   de nadie. Se visten con la paleta. */

::selection { background: var(--ampolleta); color: #241C10; }
:root { caret-color: var(--rojo); }

* { scrollbar-color: var(--regla-fuerte) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
::-webkit-scrollbar-thumb {
    background: var(--regla-fuerte);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--verde); background-clip: content-box; }

:focus-visible {
    outline: 2px solid var(--ampolleta);
    outline-offset: 2px;
    border-radius: 2px;
}

a { text-underline-offset: .18em; text-decoration-thickness: from-font; }

/* Todo número impreso es un serial: cifras de ancho fijo, para que una
   columna de notas quede alineada como en un talonario. */
.count-number,
.nota,
.reciente-nota,
.puesto-numero,
.talon-serial,
td,
th,
time {
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   LA MARQUESINA
   =========================================================================== */

header {
    position: relative;
    background: var(--tablero);
    background-image: linear-gradient(
        180deg,
        var(--tablero-alto) 0%,
        var(--tablero) 55%,
        color-mix(in srgb, var(--tablero) 86%, #000) 100%);
    border: 0;
    border-radius: 0;
    box-shadow: 0 10px 22px -16px color-mix(in srgb, #000 60%, transparent);
    padding: 1.15rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
    margin: 0 0 0 0;
    color: var(--hueso);
}

/* La fila de ampolletas del borde inferior. Círculos macizos, sin halo:
   un halo de color sin desplazamiento es decoración, no luz. */
header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 10px;
    background-image: radial-gradient(
        circle at 7px 5px,
        var(--ampolleta) 0 3px,
        color-mix(in srgb, var(--ampolleta) 55%, #000) 3px 3.6px,
        transparent 3.7px);
    background-size: 26px 10px;
    background-repeat: repeat-x;
    pointer-events: none;
}

header .logo,
header a.logo {
    font-family: var(--fuente-titulo);
    font-weight: 800;
    font-size: clamp(2rem, 5.5vw, 3.1rem);
    line-height: .86;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hueso);
    text-decoration: none;
    /* El rótulo está pintado sobre el tablero: una sombra hacia abajo y a la
       derecha, del color del tablero oscurecido, imita la mano del pintor. */
    text-shadow: 2px 2px 0 color-mix(in srgb, #000 45%, var(--tablero));
}
header .logo:hover { color: var(--ampolleta); }

header .header-acciones { gap: .4rem; }

header .enlace-datos,
header .theme-toggle,
header .boton-salir {
    background: color-mix(in srgb, #000 22%, var(--tablero));
    color: var(--hueso);
    border: 1px solid color-mix(in srgb, var(--hueso) 28%, transparent);
    border-radius: 2px;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background-color .18s ease-out, color .18s ease-out;
}
header .enlace-datos:hover,
header .theme-toggle:hover,
header .boton-salir:hover {
    background: var(--ampolleta);
    color: #241C10;
    border-color: var(--ampolleta);
}
header .enlace-datos .icon,
header .theme-toggle .icon,
header .boton-salir .icon { color: currentColor; }

/* ===========================================================================
   LETRAS INTERCAMBIABLES: la navegación entre las dos mitades de la app
   Cada sección es una tablilla que se mete en su riel, como en la cartelera
   de un cine de barrio.
   =========================================================================== */

.nav-principal {
    display: flex;
    gap: 0;
    background: var(--tablero);
    border: 1px solid color-mix(in srgb, #000 45%, var(--tablero));
    border-radius: 2px;
    padding: 6px;
    box-shadow: inset 0 2px 6px color-mix(in srgb, #000 45%, transparent);
    margin: 1.6rem 0 1.4rem;
    max-width: 100%;
    overflow: hidden;
}

.nav-principal .nav-seccion {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem .6rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in srgb, var(--hueso) 72%, var(--tablero));
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: clamp(1.05rem, 2.6vw, 1.5rem);
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none;
    /* La ranura que separa una tablilla de la siguiente. */
    box-shadow: inset -1px 0 0 color-mix(in srgb, #000 45%, transparent);
    transition: color .18s ease-out, background-color .18s ease-out;
}
.nav-principal .nav-seccion:last-child { box-shadow: none; }
.nav-principal .nav-seccion:hover { color: var(--hueso); background: color-mix(in srgb, var(--hueso) 8%, transparent); }

/* La tablilla puesta: sale del riel hacia adelante y se ilumina. */
.nav-principal .nav-seccion.activa {
    background: var(--hueso);
    color: #17372F;
    box-shadow: 0 2px 0 color-mix(in srgb, #000 35%, transparent);
}
.nav-principal .nav-seccion .icon { width: 1.1em; height: 1.1em; color: currentColor; }
.nav-principal .nav-seccion.activa .icon { color: var(--rojo); }

/* ===========================================================================
   TÍTULOS: la jerarquía sale de la caja, el interletrado y las reglas.
   Una sola familia display, ninguna segunda fuente.
   =========================================================================== */

h1, h2, h3 {
    font-family: var(--fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta);
    text-wrap: balance;
}
h1 {
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    font-weight: 800;
    line-height: .92;
    letter-spacing: .04em;
    margin: .2rem 0 .3rem;
}
h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
    /* La regla bajo el título: el filete de un cartel impreso. */
    border-bottom: 2px solid var(--regla-fuerte);
    padding-bottom: .35rem;
    margin-top: 2.4rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}
h2 .icon { color: var(--rojo); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; }

.page-subtitle {
    font-family: var(--fuente-texto);
    text-transform: none;
    letter-spacing: 0;
    color: var(--tinta-2);
    max-width: 68ch;
}

/* El listón activo ya dice TU COLECCIÓN; repetirlo 60px más abajo en un
   titular produce exactamente la figura que el piso de oficio prohíbe sin
   excepción: una etiqueta encima de un encabezado diciendo lo mismo.
   Se esconde a la vista pero NO del árbol de accesibilidad: la página
   necesita su h1 y un lector de pantalla tiene que encontrarlo. */
.titulo-coleccion {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ===========================================================================
   LOS AFICHES DE LA CARTELERA: cada categoría, un cartel colgado del riel
   Reemplaza la cuadrícula de tarjetas idénticas de icono + título + texto.
   =========================================================================== */

.grid-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: 1.6rem 1.1rem;
    /* stretch: todos los carteles de una fila miden lo mismo. Antes iban a
       su altura (start) y, sumado al escalonado, ni los bordes de arriba ni
       los de abajo coincidían: se leía como desorden, no como algo rústico. */
    align-items: stretch;
    /* El riel del que cuelgan los carteles: filete doble.
       Ni 'border-top: 3px double' (un borde grueso de un solo lado es un tell
       marcado) ni un degradado de fondo: el analizador de contraste compone
       los degradados con alfa de los ancestros y leia sus topes oscuros como
       banda maciza, reportando fallos que no existen. Dos reglas de 1px, una
       en el borde y otra en una sombra interior, no tienen ese problema. */
    border-top: 1px solid var(--regla-fuerte);
    box-shadow: inset 0 3px 0 -2px var(--regla);
    padding-top: 1.5rem;
}

.grid-categories .category-card {
    position: relative;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
    box-shadow: 0 3px 6px -4px var(--sombra);
    padding: 0;
    min-width: 0;
    /* Todos a la misma altura del riel, como en una cartelera de verdad.
       Antes cada tercer cartel bajaba un poco para darle aire rústico, pero
       el resultado se veía desalineado, no hecho a mano. Lo rústico lo
       siguen poniendo el clavo, el cartón y la tinta. */
    margin-top: 0;
    /* Columna: así el enlace puede ocupar todo el alto del cartel. */
    display: flex;
    flex-direction: column;
    transition: transform .18s ease-out, box-shadow .18s ease-out;
}

/* El clavo del que cuelga. */
.grid-categories .category-card::before {
    content: "";
    position: absolute;
    top: -7px; left: 50%;
    width: 7px; height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--regla-fuerte);
    box-shadow: 0 1px 2px var(--sombra);
}

.grid-categories .category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 11px -5px var(--sombra);
}

/* El cartel se arma en dos pisos: arriba la franja de tablero, con el
   nombre impreso encima del icono; abajo el talón con los ítems. El nombre
   vive en .category-text, pero con display:contents se puede colgar en el
   mismo piso que el icono sin tocar el HTML. */
.grid-categories .card-link {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 1fr) auto;
    grid-template-areas: "cartel" "pie";
    flex: 1 1 auto;
    gap: 0;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

/* --- El cartel: un afiche serigrafiado ----------------------------------
   El icono va enorme, cortado por el borde y torcido, como el grabado de un
   afiche; cada cartel lo lleva en otro lugar y otro ángulo (data-pose,
   se fija al cargar: no cambia mientras se arrastra). Lo que varía es
   el dibujo, no la cuadrícula: los carteles siguen alineados en el riel. */
.grid-categories .category-badge {
    grid-area: cartel;
    align-self: stretch;   /* el enlace alinea al inicio; el cartel llena su piso */
    position: relative;
    display: block;
    width: auto;
    height: auto;
    inset: auto;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: var(--tablero) !important;
    /* La trama de puntos de la serigrafía, en el mismo verde un paso más claro. */
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px) !important;
    background-size: 7px 7px !important;
    opacity: 1;
    /* Un filete de hueso adentro, como el margen impreso de un afiche. */
    box-shadow: inset 0 0 0 6px var(--tablero),
                inset 0 0 0 7px color-mix(in srgb, var(--hueso) 28%, transparent);
    border-bottom: 0;
    color: var(--hueso);
    filter: none;
}
.grid-categories .category-badge .icon,
.grid-categories .category-badge .monogram {
    position: absolute;
    top: -10px;
    right: -18px;
    width: 128px;
    height: 128px;
    /* Segunda tinta del afiche: el ámbar hundido en el verde, para que el
       nombre (hueso) mande y el grabado acompañe. */
    color: color-mix(in srgb, var(--ampolleta) 72%, var(--tablero));
    transform: rotate(-12deg);
    transition: transform .25s ease-out;
}
.grid-categories .category-card[data-pose="1"] .category-badge .icon,
.grid-categories .category-card[data-pose="1"] .category-badge .monogram {
    top: 2px; right: -4px; width: 112px; height: 112px; transform: rotate(9deg);
}
.grid-categories .category-card[data-pose="2"] .category-badge .icon,
.grid-categories .category-card[data-pose="2"] .category-badge .monogram {
    top: -26px; right: -30px; width: 150px; height: 150px; transform: rotate(-4deg);
}
.grid-categories .category-card:hover .category-badge .icon,
.grid-categories .category-card:hover .category-badge .monogram {
    transform: rotate(0deg) scale(1.04);
}
.grid-categories .category-badge .monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-titulo);
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

/* El texto se reparte entre los dos pisos (ver .card-link). */
.grid-categories .category-text { display: contents; }

/* El nombre, impreso en hueso sobre el tablero y por encima del grabado. El
   contorno de tablero lo despega del icono cuando se cruzan. */
.grid-categories .category-text .name {
    grid-area: cartel;
    align-self: end;
    position: relative;
    z-index: 1;
    display: block;
    margin: 0;
    padding: 0 1rem .95rem;
    font-family: var(--fuente-titulo);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: .95;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hueso);
    text-shadow: 0 0 1px var(--tablero), 0 0 6px var(--tablero), 0 0 12px var(--tablero), 0 2px 0 var(--tablero);
    overflow-wrap: break-word;
    pointer-events: none;
}

/* El talón: la parte de la entrada que se corta, separada por el picado. */
.grid-categories .category-text .count {
    grid-area: pie;
    position: relative;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .6rem 1rem;
    border-top: 2px dotted color-mix(in srgb, var(--tinta) 35%, transparent);
    font-family: var(--fuente-texto);
    min-height: 2.9rem;
}
.grid-categories .count-number {
    font-family: var(--fuente-titulo);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--rojo);
    background: none;
    padding: 0;
}
.grid-categories .count-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--tinta-2);
}
/* Lo pendiente de una categoría: un boleto entero, sin cortar, no una
   insignia de texto. El build declara que el estado es la FORMA del objeto
   y lo cumple en el talón; aquí tiene que cumplirlo igual. */
.grid-categories .count-deseos {
    position: relative;
    margin-left: auto;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--verde);
    border: 1px solid var(--verde);
    border-left: 0;
    border-radius: 0;
    padding: .12rem .4rem .12rem .5rem;
    background: color-mix(in srgb, var(--verde) 7%, transparent);
}
/* Su canto de troquel, sin cortar: el mismo festón del talón, de pie. */
.grid-categories .count-deseos::before {
    content: "";
    position: absolute;
    top: -1px; bottom: -1px; left: -4px;
    width: 8px;
    background-image: radial-gradient(
        circle at 4px 4px,
        var(--papel-2) 0 3px,
        var(--verde) 3px 3.7px,
        transparent 3.8px);
    background-size: 8px 8px;
    background-repeat: repeat-y;
    pointer-events: none;
}

.grid-categories .drag-handle { color: color-mix(in srgb, var(--hueso) 70%, transparent); z-index: 2; }
.grid-categories .delete-form { z-index: 2; }

/* ===========================================================================
   LO ÚLTIMO: una fila de afiches sobre el tablero
   Antes eran tablillas de texto con una foto diminuta: se leía rígido, como
   una lista. Ahora manda la portada, que es lo que uno reconoce de un vistazo,
   con el nombre y la nota debajo. Una sola fila: caben las 8 a lo ancho, y
   si la pantalla es angosta se desliza de lado en vez de partirse en dos
   filas con huecos.
   =========================================================================== */

.recientes {
    display: grid;
    /* La rejilla de 4 columnas del diseño clásico no aplica aquí: una sola
       fila de afiches, una columna por cada uno. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    background: var(--tablero);
    border: 1px solid color-mix(in srgb, #000 45%, var(--tablero));
    border-radius: 2px;
    padding: 1.1rem 1.1rem 0.9rem;
    box-shadow: inset 0 2px 8px color-mix(in srgb, #000 45%, transparent);
    scrollbar-color: color-mix(in srgb, var(--hueso) 35%, transparent) transparent;
}

.recientes .reciente {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform .18s ease-out;
}
.recientes .reciente:hover { transform: translateY(-3px); }
.recientes .reciente:hover .reciente-foto {
    box-shadow: 0 8px 16px -8px color-mix(in srgb, #000 70%, transparent);
}

/* El afiche */
.recientes .reciente-foto {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    flex: 0 0 auto;
    border-radius: 3px;
    overflow: hidden;
    background: var(--tablero-alto);
    border: 1px solid color-mix(in srgb, var(--hueso) 18%, transparent);
    box-shadow: 0 4px 10px -6px color-mix(in srgb, #000 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--hueso) 40%, transparent);
    transition: box-shadow .18s ease-out;
}
.recientes .reciente-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recientes .reciente-foto .icon { width: 30%; height: auto; }

.recientes .reciente-texto {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding-top: 0.55rem;
}

.recientes .reciente-nombre {
    font-family: var(--fuente-titulo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--hueso);
    /* Hasta dos líneas: un nombre largo se lee entero casi siempre, y si
       no cabe termina en "…" en vez de cortarse a la mitad de una palabra. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    /* El diseño clásico lo deja en una línea (nowrap): aquí se anula para
       que de verdad use las dos. */
    white-space: normal;
    text-overflow: clip;
}

.recientes .reciente-pie {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.45rem;
}
.recientes .reciente-nota {
    font-family: var(--fuente-titulo);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ampolleta);
    background: none;
    padding: 0;
}
.recientes .reciente-pendiente {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--hueso);
    background: none;
    border: 1px dashed color-mix(in srgb, var(--hueso) 60%, transparent);
    border-radius: 2px;
    padding: 0 .3rem;
}
.recientes .reciente-cuando {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: color-mix(in srgb, var(--hueso) 72%, var(--tablero));
}

/* ===========================================================================
   EL TALÓN
   ---------------------------------------------------------------------------
   El componente que carga el mundo. Cartón manila con:
     - troquel arriba (círculos del color del suelo, "perforando" el papel)
     - la nota impresa como serial rojo
     - la escala del boleto, picada en el valor
     - borde inferior roto si ya lo viste; troquel entero si está pendiente
   =========================================================================== */

.talon {
    /* El macro lo emite como <span> (va dentro de un <a>), así que hay que
       sacarlo de inline: si no, el troquel absoluto se cuelga de la caja
       inline y sale torcido. */
    display: block;
    position: relative;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-top: 0;
    padding: .75rem .7rem .7rem;
    min-width: 0;
}

/* El troquel: círculos del color del suelo mordiendo el borde de arriba. */
.talon::before {
    content: "";
    position: absolute;
    top: -6px; left: -1px; right: -1px;
    height: 12px;
    background-image: radial-gradient(
        circle at 6px 6px,
        var(--suelo) 0 5px,
        var(--regla) 5px 5.8px,
        transparent 5.9px);
    background-size: 13px 12px;
    background-repeat: repeat-x;
    pointer-events: none;
}

/* Ya lo viste: el talón está roto por abajo. */
.talon-roto::after {
    content: "";
    position: absolute;
    left: -1px; right: -1px; bottom: -1px;
    height: 9px;
    background-color: var(--suelo);
    /* La silueta del desgarro va como máscara, así hereda el color del suelo
       y sirve igual de día que de noche. */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='9'><path d='M0 9 L0 4.2 L7 6.1 L14 3.4 L22 5.6 L29 2.8 L37 5.2 L45 3.1 L52 6.0 L60 3.6 L68 5.9 L75 2.9 L83 5.4 L91 3.2 L98 6.2 L106 3.8 L113 5.7 L120 4.0 L120 9 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='9'><path d='M0 9 L0 4.2 L7 6.1 L14 3.4 L22 5.6 L29 2.8 L37 5.2 L45 3.1 L52 6.0 L60 3.6 L68 5.9 L75 2.9 L83 5.4 L91 3.2 L98 6.2 L106 3.8 L113 5.7 L120 4.0 L120 9 Z' fill='black'/></svg>");
    -webkit-mask-size: 120px 9px;
    mask-size: 120px 9px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    pointer-events: none;
}

/* Pendiente: boleto entero, con su línea de troquel sin cortar. */
.talon-entero {
    border-bottom: 1px dashed var(--verde);
}

.talon-nombre {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: .98;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--tinta);
    overflow-wrap: break-word;
}

.talon-linea {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .5rem;
    padding-top: .45rem;
    border-top: 1px solid var(--regla);
}

.talon-pie {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-2);
    line-height: 1.5;
}
.talon-pie .icon { width: 12px; height: 12px; vertical-align: -1px; }

/* El serial: la nota, impresa como el número de un talonario. */
.talon-serial {
    font-family: var(--fuente-titulo);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: .8;
    letter-spacing: .01em;
    color: var(--rojo);
    flex: 0 0 auto;
}
.talon-serial small {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--tinta-2);
}
.talon-sin-serial {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-2);
    border: 1px dashed var(--regla-fuerte);
    border-radius: 2px;
    padding: .15rem .4rem;
}

/* --- El termómetro de la nota -------------------------------------------
   Antes era una regla, con marcas de unidad y topes impresos: se leía como un
   instrumento de medir, frío. Ahora es una barra redondeada que se llena de
   1 a 10, como el líquido de un termómetro.

   El relleno se "calienta": va del ámbar de las ampolletas al rojo del
   numerador, las dos tintas de la app. El degradado mide lo que mide el tubo
   entero, no lo que mide el relleno, así que un 4 se queda en ámbar y solo un
   9 o un 10 llegan al rojo. El color dice lo mismo que el largo.

   Sin bulbo: se probó con uno a la izquierda y sobraba. La barra sola se
   entiende igual.

   La tira recibe --p, de 0 (un 1) a 1 (un 10), y sus hijos lo heredan. */

.escala {
    display: flex;
    align-items: center;
    margin-top: .6rem;
}

.escala-tira {
    --alto: 11px;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--alto);
    border-radius: 999px;
    /* El vidrio del tubo: un tinte de la tinta con una sombra interior, para
       que se lea hueco por dentro y no como una franja plana. */
    background: color-mix(in srgb, var(--tinta) 9%, transparent);
    box-shadow: inset 0 1px 2px color-mix(in srgb, #000 22%, transparent);
}

/* El líquido. Su ancho mínimo es el alto del tubo, para que un 1 se vea como
   una gota de color al principio y no como un tubo vacío. */
.escala-recorrido {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: max(var(--alto), calc(100% * var(--p)));
    border-radius: 999px;
    background-image: linear-gradient(90deg, var(--ampolleta), var(--rojo));
    /* El degradado ocupa el tubo entero: se estira en proporción inversa al
       relleno, y así el color depende del valor y no del largo. */
    background-size: calc(100% / max(var(--p), .06)) 100%;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
    pointer-events: none;
}

/* --- La nota en la ficha: el boleto picado ------------------------------
   Reemplaza el anillo del mundo anterior. El anillo iba de 0 a 10 y gastaba
   medio recorrido en valores que esta colección no usa. */

.pica {
    display: flex;
    flex-direction: column;
    /* stretch y no flex-start: si no, la tira se encoge al ancho de su
       contenido y las cifras quedan ilegibles dentro de su columna. */
    align-items: stretch;
    gap: .3rem;
    min-width: 0;
}
.pica .escala { margin-top: 0; width: 100%; }
.pica .escala-tira { width: 100%; }

.pica-serial {
    font-family: var(--fuente-titulo);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: .85;
    color: var(--rojo);
}
.pica-serial small {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--tinta-2);
}

/* El puntaje de la ficha ES un talón, no un recuadro con filete. En la
   página del objeto tiene que estar el objeto: mismo troquel arriba, mismo
   rasgado abajo que en la cartelera. */
.pica-grande {
    position: relative;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-top: 0;
    border-radius: 0;
    padding: 1rem .85rem 1.1rem;
    box-shadow: 0 3px 7px -5px var(--sombra);
    min-width: 190px;
}
/* El troquel de arriba: los mismos círculos del suelo mordiendo el canto. */
.pica-grande::before {
    content: "";
    position: absolute;
    top: -6px; left: -1px; right: -1px;
    height: 12px;
    background-image: radial-gradient(
        circle at 6px 6px,
        var(--suelo) 0 5px,
        var(--regla) 5px 5.8px,
        transparent 5.9px);
    background-size: 13px 12px;
    background-repeat: repeat-x;
    pointer-events: none;
}
/* Y el rasgado de abajo: este boleto ya se cortó. */
.pica-grande::after {
    content: "";
    position: absolute;
    left: -1px; right: -1px; bottom: -1px;
    height: 9px;
    background-color: var(--suelo);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='9'><path d='M0 9 L0 4.2 L7 6.1 L14 3.4 L22 5.6 L29 2.8 L37 5.2 L45 3.1 L52 6.0 L60 3.6 L68 5.9 L75 2.9 L83 5.4 L91 3.2 L98 6.2 L106 3.8 L113 5.7 L120 4.0 L120 9 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='9'><path d='M0 9 L0 4.2 L7 6.1 L14 3.4 L22 5.6 L29 2.8 L37 5.2 L45 3.1 L52 6.0 L60 3.6 L68 5.9 L75 2.9 L83 5.4 L91 3.2 L98 6.2 L106 3.8 L113 5.7 L120 4.0 L120 9 Z' fill='black'/></svg>");
    -webkit-mask-size: 120px 9px;
    mask-size: 120px 9px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    pointer-events: none;
}
.pica-grande .pica-serial { font-size: 3.4rem; line-height: .78; }
.pica-grande .pica-serial small { font-size: 1rem; }

.pica-etiqueta {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--tinta-2);
}

/* Las subcategorías son un renglón de primera, no un caso borde: 37 de los
   45 ítems las tienen, hasta 6 por ficha, y usan el rango 1-10 completo.

   Van como los renglones de una cuenta: concepto a la izquierda, su tira
   marcada y su importe a la derecha, separados por un filete. Antes eran
   seis tarjetas idénticas de etiqueta + número grande, que es a la vez la
   plantilla de métrica-héroe y una rejilla de tarjetas iguales usada como
   estructura: las dos cosas que el piso de oficio rechaza. */
.anillos {
    display: block;
    max-width: 680px;
    border-top: 1px solid var(--regla-fuerte);
}
.anillo-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(165px, 250px);
    align-items: center;
    gap: 1rem;
    min-width: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--regla);
    border-radius: 0;
    padding: .5rem 0;
}
.anillo-nombre {
    /* En el HTML la nota va antes que el nombre; en una cuenta el concepto
       va primero. */
    order: -1;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tinta);
    overflow-wrap: break-word;
    padding: 0;
    border: 0;
    /* La hoja anterior centraba el nombre bajo su anillo; en una lista de
       renglones eso sangra los nombres cortos y la columna queda torcida. */
    text-align: left;
}
/* El importe del renglón: tira a la izquierda, cifra a la derecha. */
.anillo-item .pica {
    flex-direction: row;
    align-items: center;
    gap: .7rem;
}
.anillo-item .pica .escala { flex: 1 1 auto; min-width: 0; }
.anillo-item .pica-serial {
    order: 2;
    flex: 0 0 auto;
    font-size: 1.35rem;
    min-width: 2.6ch;
    text-align: right;
}

/* ===========================================================================
   LA CARTELERA DE UNA CATEGORÍA: afiches en su proporción real
   =========================================================================== */

.grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 1.8rem 1.2rem;
    /* Cada afiche conserva su alto: no se estiran para igualar la fila. */
    align-items: start;
    /* El riel del que cuelgan los carteles: filete doble.
       Ni 'border-top: 3px double' (un borde grueso de un solo lado es un tell
       marcado) ni un degradado de fondo: el analizador de contraste compone
       los degradados con alfa de los ancestros y leia sus topes oscuros como
       banda maciza, reportando fallos que no existen. Dos reglas de 1px, una
       en el borde y otra en una sombra interior, no tienen ese problema. */
    border-top: 1px solid var(--regla-fuerte);
    box-shadow: inset 0 3px 0 -2px var(--regla);
    padding-top: 1.6rem;
}

.grid-items .item-card {
    position: relative;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    transition: transform .18s ease-out;
}
.grid-items .item-card:hover { transform: translateY(-3px); }

.grid-items .card-link { display: block; padding: 0; text-decoration: none; }

/* El afiche: proporción original, nunca recortado a cuadrado. */
.grid-items .thumb {
    position: relative;
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    background: var(--tablero);
    border: 1px solid var(--regla-fuerte);
    border-radius: 0;
    overflow: hidden;
    display: block;
    box-shadow: 0 3px 7px -4px var(--sombra);
}
.grid-items .thumb img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}
/* Sin foto: un marco de afiche vacío, dibujado. El hueco está compuesto,
   no es un sobrante. */
.grid-items .thumb > .icon {
    width: 100%;
    height: 210px;
    padding: 30%;
    color: color-mix(in srgb, var(--hueso) 35%, var(--tablero));
    background-image: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--hueso) 6%, transparent) 0 6px,
        transparent 6px 12px);
}

/* La etiqueta es una faja: la tira que se pega cruzando un afiche de cine
   ("¡Última semana!"). Atraviesa la portada entera, un poco torcida y cortada
   por los bordes, así tiene todo el ancho para leerse. Antes era una
   pegatina en la esquina, al lado del botón de borrar: en los tamaños chicos
   no cabía y quedaba en "ES ME...". Ahora baja a una segunda línea antes de
   cortarse. */
.grid-items .etiquetas-esquina {
    top: auto;
    bottom: 14%;
    left: -8%;
    right: -8%;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .3rem 12%;
    background: var(--ampolleta);
    box-shadow: 0 3px 6px -2px color-mix(in srgb, #000 55%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent),
                inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent);
    transform: rotate(-4deg);
}
.grid-items .etiqueta,
.grid-items.tam-chico .etiqueta,
.grid-items.tam-mini .etiqueta {
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    color: #241C10;
    font-family: var(--fuente-titulo);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    /* Hasta dos líneas; si una etiqueta larguísima no cabe ni así, recién
       ahí se corta. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/* "+2": cuántas etiquetas más tiene, como un sello aparte sobre la faja. */
.grid-items .etiquetas-esquina .etiqueta-mas {
    flex: 0 0 auto;
    display: inline-block;
    padding: .05rem .3rem;
    background: #241C10;
    color: var(--ampolleta);
    font-family: var(--fuente-texto);
    font-size: .68rem;
    letter-spacing: .02em;
    transform: none;
}
.grid-items.tam-mediano .etiqueta { font-size: .92rem; }
.grid-items.tam-chico .etiqueta { font-size: .8rem; }
.grid-items.tam-mini .etiqueta { font-size: .68rem; }
.grid-items.tam-chico .etiquetas-esquina,
.grid-items.tam-mini .etiquetas-esquina { padding: .22rem 11%; gap: .25rem; }
.grid-items.tam-mini .etiquetas-esquina .etiqueta-mas { font-size: .58rem; padding: 0 .2rem; }

/* ===========================================================================
   UN TOP POR DENTRO: el afiche y el bloque de créditos
   A la izquierda, el afiche del top (el mismo de la lista de tops, en
   grande). A la derecha, el ranking: el podio (1-3) en el cuerpo más
   grande, como el billing block de un cartel de cine.
   =========================================================================== */

/* --- El afiche -------------------------------------------------------------- */
.top-afiche {
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
    box-shadow: 0 4px 10px -6px var(--sombra);
}
.top-afiche-tablero {
    position: relative;
    height: 230px;
    overflow: hidden;
    background-color: var(--tablero);
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    box-shadow: inset 0 0 0 6px var(--tablero), inset 0 0 0 7px color-mix(in srgb, var(--hueso) 28%, transparent);
}
.top-afiche-foto {
    position: absolute;
    top: 34px;
    left: 24px;
    width: 104px;
    height: 150px;
    border: 3px solid var(--hueso);
    background: var(--tablero-alto);
    box-shadow: 0 8px 14px -8px rgb(0 0 0 / .75);
    transform: rotate(-5deg);
}
.top-afiche-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-afiche-foto[style*="--capa: 1"] { top: 48px; left: 104px; width: 86px; height: 124px; transform: rotate(6deg); z-index: -0; }
.top-afiche-foto[style*="--capa: 2"] { top: 42px; left: 168px; width: 76px; height: 110px; transform: rotate(-2deg); }
.top-afiche-foto[style*="--capa: 0"] { z-index: 2; }
.top-afiche-foto[style*="--capa: 1"] { z-index: 1; }
.top-afiche-numero {
    position: absolute;
    right: 18px;
    bottom: 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ampolleta);
    text-shadow: 0 0 8px var(--tablero), 0 2px 0 var(--tablero);
}
.top-afiche-numero b {
    font-size: 5.4rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: .85;
    color: var(--hueso);
}
.top-afiche-pie { padding: 1rem 1.1rem 1.1rem; }
h1.top-afiche-nombre {
    margin: 0 0 .9rem;
    font-size: 2rem;
    line-height: .95;
    overflow-wrap: anywhere;
}
.top-afiche-progreso { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.top-afiche-progreso-texto {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-2);
}
.top-afiche-progreso .escala { margin: 0; }
.top-afiche-acciones { display: flex; flex-direction: column; gap: .5rem; }
.top-afiche-acciones > * { justify-content: center; }
.top-afiche .editar-top > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--verde);
    cursor: pointer;
}
.top-afiche .editar-top .form-card { margin-top: .8rem; padding: 1rem; }

/* --- El ranking -------------------------------------------------------------- */
/* Cada puesto es un <li>, y los <li> llevan la medida de lectura (72ch):
   aquí la fila ocupa todo el ancho de su columna. */
.puestos .puesto { max-width: none; }
/* Los nombres largos bajan a una segunda línea antes de cortarse. */
.puestos .puesto-nombre {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.05;
    overflow-wrap: anywhere;
}
.puestos .puesto {
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
    box-shadow: 0 2px 5px -3px var(--sombra);
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.puestos .puesto:hover { border-color: var(--regla-fuerte); }
.puestos .puesto:has(> .puesto-editar[open]) {
    border-color: var(--verde);
    box-shadow: 0 6px 14px -8px var(--sombra);
}
.puestos .puesto-numero {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: .8;
    color: var(--rojo);
}
.puestos .puesto-nombre {
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta);
}
.puestos .puesto-ficha { color: var(--verde); font-weight: 600; }
.puestos .puesto-foto { border: 1px solid var(--regla-fuerte); border-radius: 2px; background: var(--tablero); }
.puestos .puesto-nota {
    font-family: var(--fuente-titulo);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--rojo);
}
.puestos .puesto-nota small { font-size: .8rem; font-weight: 600; color: var(--tinta-2); }

/* El podio: los tres primeros en el cuerpo más grande. Por posición (y no
   por clase) para que al arrastrar el tamaño siga al puesto. */
.puestos .puesto:nth-child(-n+3) .puesto-fila { min-height: 92px; }
.puestos .puesto:nth-child(-n+3) .puesto-foto { width: 68px; height: 68px; }
.puestos .puesto:nth-child(1) .puesto-fila { min-height: 112px; }
.puestos .puesto:nth-child(1) .puesto-foto { width: 88px; height: 88px; }
/* El 1 en dorado: oscuro de día (se lee sobre el papel), ámbar de noche. */
.puestos .puesto:nth-child(1) .puesto-numero { font-size: 3.6rem; color: var(--oro); }
.puestos .puesto:nth-child(2) .puesto-numero { font-size: 3rem; }
.puestos .puesto:nth-child(3) .puesto-numero { font-size: 2.6rem; }
.puestos .puesto:nth-child(1) .puesto-nombre { font-size: 1.9rem; }
.puestos .puesto:nth-child(2) .puesto-nombre { font-size: 1.6rem; }
.puestos .puesto:nth-child(3) .puesto-nombre { font-size: 1.45rem; }
.puestos .puesto:nth-child(1) .puesto-nota { font-size: 2.3rem; }
.puestos .puesto:nth-child(-n+3) .puesto-editar > summary,
.puestos .puesto:nth-child(-n+3) .drag-handle { top: 46px; }
.puestos .puesto:nth-child(1) .puesto-editar > summary,
.puestos .puesto:nth-child(1) .drag-handle { top: 56px; }
/* El primero lleva una franja de ampolleta arriba: el estreno de la noche. */
.puestos .puesto:nth-child(1) { border-top: 3px solid var(--ampolleta); }

/* Vacío: dibujado, no sobrante. */
.puestos .puesto-vacio {
    background: transparent;
    background-image: none;
    border: 2px dashed var(--regla-fuerte);
    box-shadow: none;
}
.puestos .puesto-vacio .puesto-numero { color: color-mix(in srgb, var(--tinta-2) 70%, transparent); text-shadow: none; }
.puesto-llenar {
    color: var(--tinta-2);
    font-size: .95rem;
    font-weight: 600;
}
.puesto-llenar:hover, .puesto-llenar:focus-visible { color: var(--verde); }
.puesto-quitar-rapido { color: var(--tinta-2); border-radius: 2px; transition: color .15s ease-out, border-color .15s ease-out; }
.puesto-quitar-rapido:hover, .puesto-quitar-rapido:focus-visible { color: var(--rojo); border-color: var(--rojo); }

/* El botón de editar: lápiz de contorno; con el texto al pasar. */
.puestos .puesto-editar > summary {
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--tinta-2);
    transition: color .15s ease-out, border-color .15s ease-out, background-color .15s ease-out;
}
.puestos .puesto:hover .puesto-editar > summary,
.puestos .puesto-editar > summary:focus-visible { border-color: var(--regla-fuerte); background: var(--papel); color: var(--tinta); }
.puestos .puesto-editar[open] > summary { border-color: var(--verde); background: var(--verde); color: var(--sobre-relleno); }
.puesto-editor {
    border-top: 1px dashed var(--regla-fuerte);
    padding-top: 1rem;
    animation: desplegar .22s ease-out;
}
.form-puesto label { font-size: .78rem; }

/* Agregar un puesto: el renglón punteado al final de la lista. */
.agregar-puesto {
    border-color: var(--regla-fuerte);
    border-radius: 2px;
    color: var(--verde);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: background-color .15s ease-out, border-color .15s ease-out;
}
.agregar-puesto:hover { background: color-mix(in srgb, var(--verde) 7%, transparent); border-color: var(--verde); }

@media (max-width: 860px) {
    .top-afiche { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
    .top-afiche-tablero { height: auto; min-height: 190px; }
    .top-afiche-foto { left: 14px; width: 84px; height: 120px; }
    .top-afiche-foto[style*="--capa: 1"] { left: 70px; width: 70px; height: 100px; }
    .top-afiche-foto[style*="--capa: 2"] { display: none; }
    .top-afiche-numero b { font-size: 4rem; }
}
@media (max-width: 560px) {
    .top-afiche { grid-template-columns: 1fr; }
    .top-afiche-tablero { min-height: 170px; }
    .top-afiche-foto[style*="--capa: 2"] { display: block; left: 128px; }
    .puestos .puesto-nombre { font-size: 1.05rem; }
    .puestos .puesto:nth-child(1) .puesto-nombre { font-size: 1.35rem; }
    .puestos .puesto:nth-child(2) .puesto-nombre { font-size: 1.2rem; }
    .puestos .puesto:nth-child(3) .puesto-nombre { font-size: 1.1rem; }
    .puestos .puesto:nth-child(1) .puesto-numero { font-size: 2.6rem; }
    .puestos .puesto:nth-child(1) .puesto-foto { width: 64px; height: 64px; }
    .puestos .puesto-nota { font-size: 1.3rem; }
    .puestos .puesto:nth-child(1) .puesto-nota { font-size: 1.6rem; }
    .puestos .puesto-nota small { display: none; }
}

/* ---- Los tops: afiches de la misma cartelera que las categorías ---------
   Arriba, el tablero con las fotos de los tres primeros pegadas como
   afiches (el 1 adelante y más grande) y el número del top en letras de
   marquesina. Abajo, el nombre y el podio. Sin iconos: lo que se ve son
   las fotos y los números. */
.grid-tops {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.6rem 1.1rem;
    align-items: stretch;
    /* El mismo riel del que cuelgan los carteles del inicio. */
    border-top: 1px solid var(--regla-fuerte);
    box-shadow: inset 0 3px 0 -2px var(--regla);
    padding-top: 1.5rem;
}
.top-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 190px auto auto 1fr;
    grid-template-areas: "cartel" "nombre" "podio" "estado";
    gap: 0;
    padding: 0;
    align-items: start;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
    box-shadow: 0 3px 6px -4px var(--sombra);
    transition: transform .18s ease-out, box-shadow .18s ease-out;
}
/* El clavo del que cuelga, como los carteles del inicio. */
.top-card::before {
    content: "";
    position: absolute;
    top: -7px; left: 50%;
    width: 7px; height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--regla-fuerte);
    box-shadow: 0 1px 2px var(--sombra);
    z-index: 2;
}
.top-card:hover { transform: translateY(-3px); box-shadow: 0 6px 11px -5px var(--sombra); }

.top-portada {
    grid-area: cartel;
    align-self: stretch;
    position: relative;
    width: auto;
    height: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background-color: var(--tablero);
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    box-shadow: inset 0 0 0 6px var(--tablero),
                inset 0 0 0 7px color-mix(in srgb, var(--hueso) 28%, transparent);
}
/* Las fotos, pegadas como afiches con su margen de papel. */
.top-portada-foto {
    position: absolute;
    top: 30px;
    left: 26px;
    width: 92px;
    height: 132px;
    border: 3px solid var(--hueso);
    border-radius: 1px;
    background: var(--tablero-alto);
    box-shadow: 0 6px 12px -6px rgb(0 0 0 / .7);
    transform: rotate(-5deg);
    transition: transform .25s ease-out;
}
.top-portada-foto[style*="--capa: 1"] { top: 42px; left: 100px; width: 78px; height: 112px; transform: rotate(6deg); }
.top-portada-foto[style*="--capa: 2"] { top: 36px; left: 160px; width: 70px; height: 100px; transform: rotate(-2deg); }
.top-card:hover .top-portada-foto { transform: rotate(0deg); }
/* Sin fotos todavía: el tablero vacío y el número bastan. */
.top-portada-vacia { display: none; }

/* El texto se reparte por los pisos de la tarjeta. */
.top-card-texto { display: contents; }

/* "TOP 7" en letras de marquesina, a la derecha del tablero. */
.top-card-numero {
    grid-area: cartel;
    align-self: end;
    justify-self: end;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 1rem .7rem 0;
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ampolleta);
    text-shadow: 0 0 8px var(--tablero), 0 2px 0 var(--tablero);
    pointer-events: none;
}
.top-card-numero b {
    font-size: 5.6rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: .85;
    color: var(--hueso);
}

.top-card-nombre {
    grid-area: nombre;
    display: block;
    margin: 0;
    padding: .85rem 1rem 0;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: .98;
    color: var(--tinta);
    overflow-wrap: break-word;
}

/* El podio: los tres primeros, con su número en rojo de rótulo. */
.top-card-primeros {
    grid-area: podio;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: .6rem 1rem 0;
    padding-top: .55rem;
    border-top: 1px solid var(--regla);
    font-size: .9rem;
    color: var(--tinta);
}
.top-card-primeros span { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.top-card-primeros b {
    flex: 0 0 1.1rem;
    margin: 0;
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--rojo);
}

/* Solo cuando falta algo: un boleto, como los pendientes del inicio. */
.top-card-estado {
    grid-area: estado;
    align-self: end;
    justify-self: start;
    margin: .8rem 1rem .9rem;
    padding: .12rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--verde);
    border: 1px dashed var(--verde);
    background: color-mix(in srgb, var(--verde) 7%, transparent);
}
/* Si no hay boleto, el podio no queda pegado al borde de abajo. */
.top-card > .top-card-texto > :is(.top-card-primeros, .top-card-nombre):last-child { margin-bottom: 1rem; padding-bottom: 0; }

.top-card-nombre,
.top-nombre {
    font-family: var(--fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* --- El afiche de la ficha ----------------------------------------------
   En su proporción real y con canto recto: un afiche colgado no tiene las
   esquinas redondeadas. */

/* El radio de 16px vive en el CONTENEDOR, que además recorta con
   overflow:hidden; ponérselo a la imagen no quitaba nada. */
.ficha .item-hero,
.item-hero {
    border-radius: 0;
    border: 1px solid var(--regla-fuerte);
    background: var(--tablero);
    box-shadow: 0 5px 10px -6px var(--sombra);
}
.item-hero img,
.item-hero .foto-grande img {
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

/* El recuadro de "todavía no hay reseña": una hoja en blanco del talonario,
   no un marco punteado dentro de otro marco punteado. */
.ficha-cuerpo .empty {
    border-style: dashed;
    border-width: 1px;
    background: transparent;
    padding: 1.5rem 1.25rem;
}

/* ===========================================================================
   LA CABECERA DE UNA CATEGORÍA
   El "Volver" es el pasillo de salida; el título lleva su icono impreso en
   el tablero, igual que en el cartel de la portada.
   =========================================================================== */

.back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--tinta-2);
    text-decoration: none;
}
.back:hover { color: var(--rojo); }

.category-title { display: flex; align-items: center; gap: .9rem; }

.category-title .category-badge {
    position: static;
    opacity: 1;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 0;
    background: var(--tablero) !important;
    border: 0;
    box-shadow: 0 2px 5px -3px var(--sombra);
    filter: none;
}
.category-title .category-badge .icon { width: 28px; height: 28px; color: var(--ampolleta); }
.category-title .category-badge .monogram {
    font-family: var(--fuente-titulo);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ampolleta);
}

/* --- Las dos taquillas: tu colección y lo que está pendiente -------------
   Tablillas del mismo riel que la navegación principal, un paso más chicas.
   El mismo vocabulario en las dos pantallas. */

.pestanas {
    display: flex;
    gap: 0;
    background: var(--tablero);
    border: 1px solid color-mix(in srgb, #000 45%, var(--tablero));
    border-radius: 2px;
    padding: 5px;
    box-shadow: inset 0 2px 6px color-mix(in srgb, #000 45%, transparent);
    margin: 1.2rem 0 1.3rem;
    max-width: 100%;
    overflow: hidden;
}

.pestanas .pestana {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in srgb, var(--hueso) 74%, var(--tablero));
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: inset -1px 0 0 color-mix(in srgb, #000 45%, transparent);
    transition: color .18s ease-out, background-color .18s ease-out;
}
.pestanas .pestana:last-child { box-shadow: none; }
.pestanas .pestana:hover { color: var(--hueso); background: color-mix(in srgb, var(--hueso) 8%, transparent); }

.pestanas .pestana.activa {
    background: var(--hueso);
    color: #17372F;
    box-shadow: 0 2px 0 color-mix(in srgb, #000 35%, transparent);
}

.pestanas .pestana-cuenta {
    font-size: .8rem;
    font-weight: 800;
    color: inherit;
    background: color-mix(in srgb, #000 25%, transparent);
    border-radius: 2px;
    padding: .05rem .35rem;
    min-width: 0;
}
.pestanas .pestana.activa .pestana-cuenta {
    background: color-mix(in srgb, var(--rojo) 16%, transparent);
    color: #8F1F14;
}

/* La barra de ordenar: un filete impreso, no una tarjeta. */
.orden-bar {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--regla);
    border-radius: 0;
    padding: 0 0 .8rem;
    box-shadow: none;
}
.orden-bar label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--tinta-2);
}

/* --- El banco de iconos --------------------------------------------------
   Había 300px de hueco entre los iconos y las subcategorías, y no era un
   margen: la rejilla usaba `repeat(auto-fill, ...)`, y con eso el navegador
   calcula la altura del bloque suponiendo el número MÍNIMO de columnas que
   podrían caber (3), o sea nueve filas, aunque en pantalla hubiera diez
   columnas y tres filas. El contenedor reservaba sitio para esas nueve.

   Fijar el número de columnas no servía: entonces reservaba de menos y la
   última fila de iconos se montaba encima del texto de Subcategorías.

   Con flex y ajuste de línea el alto que reserva es el que ocupa de verdad.
   Comprobado a 1280, 800, 560 y 390px: ni sobra ni falta un píxel. */
.banco-iconos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.banco-iconos .icono-opcion {
    flex: 0 0 52px;
}

/* ===========================================================================
   CONTROLES: mismo vocabulario en toda la app
   Etiquetas, botones y campos en la tipografía del sistema. La fuente de
   rótulo no entra aquí: una display en una etiqueta de formulario es ruido.
   =========================================================================== */

.btn-primary,
button.btn-primary {
    background: var(--verde);
    color: var(--sobre-relleno);
    border: 1px solid color-mix(in srgb, #000 25%, var(--verde));
    border-radius: 2px;
    font-family: var(--fuente-texto);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .85rem;
    box-shadow: 0 2px 0 color-mix(in srgb, #000 30%, var(--verde));
    transition: background-color .18s ease-out, transform .1s ease-out;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }
.btn-primary:disabled { opacity: .5; box-shadow: none; }

.btn-agregar {
    /* El botón de agregar es el acomodador: corta tu boleto. */
    font-size: .95rem;
    padding: .75rem 1.5rem;
}

.btn-secondary,
button.btn-secondary {
    border-radius: 2px;
    border: 1px solid var(--regla-fuerte);
    background: var(--papel-2);
    color: var(--tinta);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .8rem;
}

.btn-icon {
    border-radius: 2px;
    border: 1px solid var(--regla);
    background: var(--btn-icon-bg);
}
.btn-icon.danger { color: var(--rojo); }

input[type="text"], input[type="number"], input[type="date"], input[type="url"],
input[type="search"], textarea, select {
    background: var(--papel-2);
    border: 1px solid var(--regla-fuerte);
    border-radius: 2px;
    color: var(--tinta);
    font-family: var(--fuente-texto);
    /* Un select con opciones largas crece hasta su opción más ancha y se sale
       de la pantalla: a 320px el de "Ordenar por" desbordaba 15px. */
    max-width: 100%;
    min-width: 0;
}
input::placeholder, textarea::placeholder { color: var(--tinta-2); opacity: 1; }

.field label,
.form label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--tinta-2);
    font-weight: 600;
}

.form-card,
.card,
.panel-caja {
    background: var(--papel-2);
    border: 1px solid var(--regla-fuerte);
    border-radius: 2px;
}

/* El panel que se abre encima: una hoja de cartón sobre el tablero. */
dialog.panel .panel-caja {
    background-image: var(--fibra);
    background-blend-mode: multiply;
    box-shadow: 0 24px 48px -24px color-mix(in srgb, #000 70%, transparent);
    border: 2px solid var(--regla-fuerte);
}
dialog.panel::backdrop {
    background: color-mix(in srgb, #06140F 78%, transparent);
}

/* ===========================================================================
   ESTADOS VACÍOS QUE ENSEÑAN
   La app se va a publicar: quien entra sin nada tiene que entender qué es.
   =========================================================================== */

.empty,
.vacio {
    font-family: var(--fuente-texto);
    color: var(--tinta-2);
    border: 2px dashed var(--regla-fuerte);
    border-radius: 2px;
    background: color-mix(in srgb, var(--tinta) 3%, transparent);
    padding: 2rem 1.25rem;
    text-align: center;
    grid-column: 1 / -1;
}
/* El marco de afiche vacío solo tiene sentido donde faltan afiches: en una
   caja de texto se lee como una imagen rota, que es peor que nada. */
.grid .empty::before {
    content: "";
    display: block;
    width: 62px; height: 86px;
    margin: 0 auto 1rem;
    border: 2px solid var(--regla-fuerte);
    background-image: repeating-linear-gradient(
        45deg, var(--regla) 0 5px, transparent 5px 10px);
}

.hint {
    font-size: .78rem;
    color: var(--tinta-2);
    letter-spacing: .01em;
}

/* Medida de lectura. En /tops la prosa llegaba a 181 caracteres por línea:
   el ojo pierde el renglón al volver. */
p, .hint, .page-subtitle, .empty, li {
    max-width: 72ch;
}
.empty { max-width: none; }          /* ocupa su rejilla, pero su texto no */
.empty > * { max-width: 72ch; margin-inline: auto; }

/* ===========================================================================
   EL PIE: el tablero cierra la página por abajo
   =========================================================================== */

main { padding-bottom: 3rem; }

/* ===========================================================================
   MOVIMIENTO: un solo momento de autor
   Cortar el boleto. Todo lo demás son transiciones de estado de 150-250 ms.
   Nada de coreografías al cargar: la app abre dentro de una tarea.
   =========================================================================== */

@keyframes cortar-boleto {
    0%   { transform: translateY(-6px) rotate(-.6deg); }
    55%  { transform: translateY(2px)  rotate(.35deg); }
    100% { transform: translateY(0)    rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    
}

/* ===========================================================================
   PANTALLAS ANGOSTAS
   El comportamiento responsivo es estructural: la marquesina se apila, las
   tablillas se estrechan. La tipografía no se vuelve fluida en la interfaz.
   =========================================================================== */

@media (max-width: 720px) {
    header { padding: .9rem 1rem 1.2rem; }
    header .logo { font-size: 2rem; }
    .grid-categories { gap: 1.3rem .8rem; }
    .grid-items { gap: 1.4rem .9rem; }
    .talon-serial { font-size: 2rem; }
}

/* En pantalla angosta el rótulo y los cinco controles no caben en una línea:
   la marquesina se parte en dos pisos en vez de empujar la página fuera.

   El corte está en 900px: con Ayuda y el botón temporal de estética son
   seis controles, y a 768px ya no cabían (desbordaban 11px). Cuando el
   botón temporal se vaya, este corte puede volver a bajar. */
@media (max-width: 900px) {
    header {
        flex-wrap: wrap;
        justify-content: center;
        gap: .6rem;
    }
    header .header-acciones {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    header { padding: .8rem .6rem 1.1rem; }
    header .logo { font-size: 1.75rem; letter-spacing: .07em; }
    header .enlace-datos,
    header .theme-toggle,
    header .boton-salir { padding: .35rem .5rem; }
    .pestanas .pestana { padding: .45rem .6rem; font-size: 1rem; letter-spacing: .06em; }
}

/* ===========================================================================
   LA FICHA, MÁS AMABLE
   La etiqueta, los botones, las subcategorías y la review hablan el mismo
   idioma que la cartelera: faja, botones de verdad, termómetros.
   =========================================================================== */

/* --- La etiqueta: la misma faja del mosaico, en chico ------------------- */
.etiquetas-ficha { gap: .55rem; margin: .4rem 0 1rem; }
.etiquetas-ficha .etiqueta {
    padding: .28rem .7rem .22rem;
    background: var(--ampolleta);
    color: #241C10;
    border: 0;
    border-radius: 0;
    font-family: var(--fuente-titulo);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 2px 4px -1px color-mix(in srgb, #000 40%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
    transform: rotate(-2deg);
    transition: transform .15s ease-out;
}
.etiquetas-ficha .etiqueta:nth-child(even) { transform: rotate(1.5deg); }
.etiquetas-ficha .etiqueta-enlace:hover,
.etiquetas-ficha .etiqueta-enlace:focus-visible {
    color: #241C10;
    transform: rotate(0deg) translateY(-2px);
}

/* --- Los botones de la ficha: botones de verdad ------------------------- */
.ficha-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 1.1rem;
}
.ficha-acciones .edit-toggle,
.ficha-acciones .form-papelera { margin: 0; }

.ficha .edit-toggle > summary,
.ficha-acciones .boton-papelera {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: 2px;
    font-family: var(--fuente-texto);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out, transform .1s ease-out;
}
.ficha .edit-toggle > summary .icon,
.ficha-acciones .boton-papelera .icon { width: 15px; height: 15px; }

/* Editar: el botón principal, lleno, como "Crear una categoría". */
.ficha-acciones .edit-toggle > summary {
    background: var(--verde);
    color: var(--sobre-relleno);
    border: 1px solid color-mix(in srgb, #000 25%, var(--verde));
    box-shadow: 0 2px 0 color-mix(in srgb, #000 30%, var(--verde));
}
.ficha-acciones .edit-toggle > summary:hover { background: var(--primary-hover); color: var(--sobre-relleno); }
.ficha-acciones .edit-toggle > summary:active { transform: translateY(1px); box-shadow: none; }

/* Papelera y los demás "editar" de la ficha: de contorno, sobre papel. */
.ficha-acciones .boton-papelera,
.ficha-cuerpo .edit-toggle > summary {
    background: var(--papel-2);
    color: var(--tinta);
    border: 1px solid var(--regla-fuerte);
}
.ficha-cuerpo .edit-toggle > summary:hover { color: var(--verde); border-color: var(--verde); }
.ficha-acciones .boton-papelera:hover,
.ficha-acciones .boton-papelera:focus-visible { color: var(--rojo); border-color: var(--rojo); }

/* Editando: el formulario toma la fila entera y la papelera se aparta, para
   no tenerla al lado mientras se escribe. */
.ficha-acciones:has(> .edit-toggle[open]) .form-papelera { display: none; }
.ficha-acciones > .edit-toggle[open] { flex: 1 1 100%; }
.ficha .edit-toggle[open] > summary { box-shadow: none; transform: translateY(1px); }
.ficha-cuerpo .edit-toggle { margin-top: 1rem; }

/* --- Las subcategorías: termómetros en fila ----------------------------
   Cada una es la barra de la nota puesta de pie: la nota arriba, el nombre
   abajo. Puestos lado a lado se compara de un vistazo qué fue lo mejor y
   lo peor, que es para lo que están. Van sobre una tarjeta de papel para
   leerse igual con cualquier color de fondo. */
.anillos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.4rem 1rem;
    max-width: none;
    margin-top: .4rem;
    padding: 1.3rem 1.2rem 1.1rem;
    border: 1px solid var(--regla);
    border-radius: 2px;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    box-shadow: 0 3px 7px -5px var(--sombra);
}
.anillo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    width: 96px;
    padding: 0;
    border: 0;
}
.anillo-nombre {
    order: 2;
    font-size: .72rem;
    line-height: 1.25;
    letter-spacing: .06em;
    text-align: center;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
}
.anillo-item .pica {
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.anillo-item .pica-serial {
    order: 0;
    min-width: 0;
    font-size: 2.1rem;
    line-height: .9;
    text-align: center;
}
.anillo-item .pica .escala {
    flex: none;
    margin: 0;
    height: 120px;
}
.anillo-item .escala-tira {
    --alto: 11px;   /* el mismo grosor que la barra de la nota del ítem */
    flex: none;
    width: var(--alto);
    height: 100%;
}
/* El líquido sube desde abajo; el color depende de la nota, igual que en
   la tira acostada. */
.anillo-item .escala-recorrido {
    top: auto;
    bottom: 0; left: 0; right: 0;
    width: auto;
    height: max(var(--alto), calc(100% * var(--p)));
    background-image: linear-gradient(0deg, var(--ampolleta), var(--rojo));
    background-size: 100% calc(100% / max(var(--p), .06));
    background-position: bottom;
}
@media (max-width: 560px) {
    .anillos { gap: 1.2rem .6rem; padding: 1.1rem .8rem 1rem; justify-content: space-around; }
    .anillo-item { width: 76px; }
    .anillo-item .pica .escala { height: 96px; }
    .anillo-item .pica-serial { font-size: 1.8rem; }
}

/* --- La review --------------------------------------------------------
   Escrita: una tarjeta con su comilla de rótulo. Sin escribir: un solo
   recuadro punteado (antes eran dos, uno dentro del otro). */
.ficha .review-box {
    position: relative;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
    box-shadow: 0 3px 7px -5px var(--sombra);
    padding: 1.4rem 1.6rem 1.4rem 3.6rem;
}
.ficha .review-box::before {
    content: "\201C";
    position: absolute;
    top: .35rem;
    left: 1rem;
    font-family: var(--fuente-titulo);
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--rojo);
}
.ficha .review-box:has(> .empty) {
    background: color-mix(in srgb, var(--papel-2) 55%, transparent);
    border: 2px dashed var(--regla-fuerte);
    box-shadow: none;
    padding: 1.1rem 1.4rem;
}
.ficha .review-box:has(> .empty)::before { content: none; }
.ficha .review-box > .empty {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--tinta-2);
}

/* El marcador mide lo que sus termómetros: con tres no queda media tarjeta
   vacía a la derecha. */
.anillos { width: fit-content; max-width: 100%; padding-inline: 1.6rem; }

/* --- Los comentarios: el mismo papel de canto recto que la review ------ */
.ficha .comment-list li {
    border-radius: 2px;
    border: 1px solid var(--regla);
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    box-shadow: 0 3px 7px -5px var(--sombra);
}

/* "Quiero ver": un boleto sin cortar, como los pendientes del inicio. */
.ficha .etiqueta-pendiente {
    align-self: center;
    margin: 0;
    padding: .3rem .7rem;
    border: 1px dashed var(--verde);
    border-radius: 0;
    background: color-mix(in srgb, var(--papel-2) 80%, transparent);
    color: var(--verde);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ===========================================================================
   MOVIMIENTO (prueba): más vida, siempre al servicio de algo
   Cortas (200-700 ms) y una sola vez: nada que se repita ni distraiga. La
   regla de "menos movimiento" de arriba las apaga todas.
   =========================================================================== */

/* --- Lo que llega: los carteles entran en cascada ----------------------- */
@keyframes asomar {
    from { opacity: 0; transform: translateY(10px); }
}
.grid-categories > .category-card,
.grid-items > .item-card,
.grid-tops > .top-card,
.recientes > .reciente {
    animation: asomar .38s cubic-bezier(.22, 1, .36, 1) backwards;
}
:is(.grid-categories, .grid-items, .grid-tops, .recientes) > :nth-child(2)  { animation-delay: .03s; }
:is(.grid-categories, .grid-items, .grid-tops, .recientes) > :nth-child(3)  { animation-delay: .06s; }
:is(.grid-categories, .grid-items, .grid-tops, .recientes) > :nth-child(4)  { animation-delay: .09s; }
:is(.grid-categories, .grid-items, .grid-tops, .recientes) > :nth-child(5)  { animation-delay: .12s; }
:is(.grid-categories, .grid-items, .grid-tops, .recientes) > :nth-child(6)  { animation-delay: .15s; }
:is(.grid-categories, .grid-items, .grid-tops, .recientes) > :nth-child(7)  { animation-delay: .18s; }
:is(.grid-categories, .grid-items, .grid-tops, .recientes) > :nth-child(8)  { animation-delay: .21s; }
:is(.grid-categories, .grid-items, .grid-tops, .recientes) > :nth-child(n+9) { animation-delay: .24s; }

/* --- Las barras se llenan al entrar -------------------------------------
   Crecen desde su punta de partida hasta la nota: se lee "cuánto" antes de
   leer el número. */
@keyframes llenar-de-lado { from { transform: scaleX(0); } }
@keyframes llenar-de-pie  { from { transform: scaleY(0); } }
.escala-recorrido {
    transform-origin: left center;
    animation: llenar-de-lado .7s cubic-bezier(.22, 1, .36, 1) .12s backwards;
}
.anillo-item .escala-recorrido {
    transform-origin: center bottom;
    animation-name: llenar-de-pie;
    animation-duration: .8s;
}
/* Los termómetros, uno detrás de otro. */
.anillo-item:nth-child(2) .escala-recorrido { animation-delay: .2s; }
.anillo-item:nth-child(3) .escala-recorrido { animation-delay: .28s; }
.anillo-item:nth-child(4) .escala-recorrido { animation-delay: .36s; }
.anillo-item:nth-child(5) .escala-recorrido { animation-delay: .44s; }
.anillo-item:nth-child(6) .escala-recorrido { animation-delay: .52s; }

/* --- El boleto del puntaje cae en su sitio -------------------------------- */
@keyframes caer-boleto {
    0%   { opacity: 0; transform: translateY(-14px) rotate(-2deg); }
    60%  { opacity: 1; transform: translateY(2px) rotate(.4deg); }
    100% { transform: translateY(0) rotate(0); }
}
.ficha .pica-grande { animation: caer-boleto .5s cubic-bezier(.22, 1, .36, 1) .08s backwards; }
.ficha .etiquetas-ficha .etiqueta { animation: asomar .35s ease-out .25s backwards; }

/* --- Los termómetros: al pasar por uno, su nota se destaca ---------------- */
.anillo-item .pica-serial { transition: transform .18s ease-out; }
.anillo-item:hover .pica-serial { transform: translateY(-3px) scale(1.08); }
.anillo-item:hover .anillo-nombre { color: var(--tinta); }

/* --- Paneles: se abren con un leve zoom y el fondo se apaga suave -------- */
@keyframes panel-entra {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
}
@keyframes fondo-entra { from { opacity: 0; } }
dialog.panel[open] .panel-caja { animation: panel-entra .24s cubic-bezier(.22, 1, .36, 1); }
dialog.panel[open]::backdrop { animation: fondo-entra .24s ease-out; }

/* --- Formularios plegables: se despliegan, no aparecen de golpe ---------- */
@keyframes desplegar {
    from { opacity: 0; transform: translateY(-6px); }
}
.edit-toggle[open] > :not(summary) { animation: desplegar .22s ease-out; }

/* --- Botones: se levantan un poco al pasar, se hunden al pulsar ---------- */
.btn-primary,
.btn-secondary,
.ficha .edit-toggle > summary,
.ficha-acciones .boton-papelera,
header .btn-icon,
header button {
    transition: transform .14s ease-out, background-color .15s ease-out,
                color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}
.btn-primary:hover,
.btn-secondary:hover,
.ficha .edit-toggle:not([open]) > summary:hover,
.ficha-acciones .boton-papelera:hover,
header button:hover { transform: translateY(-1px); }
.btn-primary:active,
.btn-secondary:active,
.ficha .edit-toggle > summary:active,
.ficha-acciones .boton-papelera:active,
header button:active { transform: translateY(1px); }

/* --- Lo último: el afiche sube al pasar ---------------------------------- */
.recientes .reciente-foto { transition: transform .2s ease-out, box-shadow .2s ease-out; }
.recientes .reciente:hover .reciente-foto {
    transform: translateY(-4px);
    box-shadow: 0 10px 16px -10px rgb(0 0 0 / .8);
}

/* --- Los afiches del mosaico: además de subir, ganan sombra --------------- */
.grid-items .item-card { transition: transform .2s ease-out; }
.grid-items .item-card .thumb { transition: box-shadow .2s ease-out; }
.grid-items .item-card:hover .thumb { box-shadow: 0 12px 18px -12px var(--sombra); }
/* La faja de la etiqueta se acomoda un poco cuando pasas. */
.grid-items .etiquetas-esquina { transition: transform .2s ease-out; }
.grid-items .item-card:hover .etiquetas-esquina { transform: rotate(-2deg) scale(1.03); }

/* --- El tacho de basura avisa antes de borrar ---------------------------- */
@keyframes temblar {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}
.btn-icon.danger:hover .icon,
.boton-papelera:hover .icon { animation: temblar .35s ease-in-out; }

/* --- Las pestañas de arriba: el listón activo se desliza ------------------ */
.nav-principal .nav-seccion { transition: background-color .2s ease-out, color .2s ease-out; }

/* Con "menos movimiento" no solo se acortan: tampoco esperan. Sin esto, una
   barra con retraso se quedaría vacía un instante antes de aparecer llena. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-delay: 0s !important; }
}

/* Cabecera en pantalla angosta: el logo y los controles no caben en una línea
   y se parte en dos pisos centrados (antes vivía en un bloque temporal de
   base.html, junto al botón para cambiar de estética). */
@media (max-width: 720px) {
    header {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: .6rem;
    }
    header .header-acciones {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        min-width: 0;
    }
}

/* Compartir: con muchísimas cosas el cartel puede ir en varias imágenes; la
   vista previa las muestra una debajo de la otra. */
.compartir-vista { flex-direction: column; align-items: stretch; gap: .75rem; }

/* --- "Más detalles" en el formulario de agregar ----------------------------
   Plegado por defecto: un renglón punteado que se abre como los formularios de
   editar. Ocupa todo el ancho de la grilla del formulario. */
.mas-detalles {
    flex: 1 1 100%;
    grid-column: 1 / -1;
    width: 100%;
    margin: .2rem 0 .4rem;
    border: 1px dashed var(--regla-fuerte);
    border-radius: 2px;
    background: color-mix(in srgb, var(--papel-2) 60%, transparent);
}
.mas-detalles > summary {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    cursor: pointer;
    list-style: none;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--verde);
}
.mas-detalles > summary::-webkit-details-marker { display: none; }
.mas-detalles > summary .icon { width: 14px; height: 14px; align-self: center; transition: transform .2s ease-out; }
.mas-detalles[open] > summary .icon { transform: rotate(45deg); }
.mas-detalles > summary small {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: var(--tinta-2);
}
.mas-detalles > summary:hover { background: color-mix(in srgb, var(--verde) 6%, transparent); }
.mas-detalles[open] { background: var(--papel-2); }
.mas-detalles-cuerpo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    padding: .2rem .9rem 1rem;
}
.mas-detalles-cuerpo > * { flex: 1 1 100%; min-width: 0; }
.mas-detalles[open] > .mas-detalles-cuerpo { animation: desplegar .22s ease-out; }

/* --- Al guardar una nota (static/nota-guardada.js) ------------------------
   El boleto se sacude como cuando el boletero lo perfora, y cae un sello de
   tinta roja que se desvanece. */
@keyframes boleto-perforado {
    0%   { transform: translateY(-10px) rotate(-3deg) scale(1.04); }
    35%  { transform: translateY(3px) rotate(1.5deg) scale(.98); }
    60%  { transform: translateY(-1px) rotate(-.6deg) scale(1.01); }
    100% { transform: none; }
}
.ficha .pica-grande.recien-calificado { animation: boleto-perforado .6s cubic-bezier(.22, 1, .36, 1); }
@keyframes sellar {
    0%   { opacity: 0; transform: rotate(-14deg) scale(2.2); }
    60%  { opacity: 1; transform: rotate(-14deg) scale(.92); }
    100% { opacity: 1; transform: rotate(-14deg) scale(1); }
}
@keyframes sello-se-va { to { opacity: 0; transform: rotate(-14deg) scale(1) translateY(-4px); } }
.sello-nota {
    position: absolute;
    right: -18px;
    bottom: -12px;
    z-index: 3;
    padding: .28rem .6rem .22rem;
    border: 2px solid var(--rojo);
    border-radius: 3px;
    background: color-mix(in srgb, var(--papel-2) 85%, transparent);
    color: var(--rojo);
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rojo) 18%, transparent);
    animation: sellar .42s cubic-bezier(.22, 1, .36, 1) .3s backwards,
               sello-se-va .6s ease-in 2.5s forwards;
}

/* --- Desempatar ------------------------------------------------------------
   Dos afiches frente a frente, como en una cartelera de estreno doble. */
.btn-desempatar { display: inline-flex; align-items: center; gap: .4rem; }
.btn-desempatar[hidden] { display: none; }
.desempatar-cuantos {
    min-width: 1.4rem;
    padding: 0 .35rem;
    background: var(--ampolleta);
    color: #241C10;
    font-weight: 800;
    border-radius: 2px;
    text-align: center;
}
.panel-desempatar .panel-caja { max-width: 640px; }
.desempatar-titulo {
    margin: .4rem 0 .5rem;
    font-family: var(--fuente-titulo);
    font-size: 1.4rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta);
}
.desempatar-progreso {
    --p: 0;
    height: 6px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--tinta) 10%, transparent);
    overflow: hidden;
    margin-bottom: 1rem;
}
.desempatar-progreso > span {
    display: block;
    height: 100%;
    width: calc(100% * var(--p));
    background: linear-gradient(90deg, var(--ampolleta), var(--rojo));
    transition: width .3s ease-out;
}
.duelo-pregunta {
    margin: 0 0 .8rem;
    text-align: center;
    font-weight: 700;
    color: var(--tinta-2);
}
.duelo-lados {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}
.duelo-lado {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .8rem;
    border: 1px solid var(--regla);
    border-radius: 2px;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    cursor: pointer;
    font: inherit;
    color: var(--tinta);
    transition: transform .16s ease-out, box-shadow .16s ease-out, border-color .16s ease-out;
}
.duelo-lado:hover, .duelo-lado:focus-visible {
    transform: translateY(-4px) rotate(-1deg);
    border-color: var(--rojo);
    box-shadow: 0 12px 18px -12px var(--sombra);
}
.duelo-lado:last-child:hover, .duelo-lado:last-child:focus-visible { transform: translateY(-4px) rotate(1deg); }
.duelo-lado img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: contain;
    background: var(--tablero);
    border: 1px solid var(--regla-fuerte);
}
.duelo-nombre {
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.05;
    text-transform: uppercase;
    text-align: center;
}
.duelo-lado kbd {
    position: absolute;
    top: .4rem;
    left: .4rem;
    padding: .05rem .35rem;
    font-size: .8rem;
    border: 1px solid var(--regla-fuerte);
    border-radius: 2px;
    background: var(--papel);
    color: var(--tinta-2);
}
.duelo-vs {
    font-family: var(--fuente-titulo);
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--rojo);
}
/* El elegido salta y se marca antes de pasar a la siguiente pregunta. */
@keyframes duelo-ganador {
    40% { transform: translateY(-10px) scale(1.04); border-color: var(--rojo); }
    100% { transform: translateY(-4px); }
}
.duelo-lado.duelo-gano { animation: duelo-ganador .26s ease-out; border-color: var(--rojo); }
@keyframes duelo-llega { from { opacity: 0; transform: translateY(8px); } }
.desempatar-duelo.duelo-entra .duelo-lado { animation: duelo-llega .22s ease-out; }
.desempatar-acciones {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.1rem;
}
.desempatar-fin { text-align: center; padding: 1.5rem 0 .5rem; }
.desempatar-fin p { font-size: 1.1rem; font-weight: 700; color: var(--verde); }
@media (max-width: 520px) {
    .duelo-lados { gap: .5rem; }
    .duelo-vs { font-size: 1.3rem; }
    .duelo-nombre { font-size: .95rem; }
}

/* ===========================================================================
   TU AÑO EN BAREMO
   =========================================================================== */

/* El cartel de entrada en el inicio: un letrero de estreno sobre el tablero. */
.cartel-anio {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 1.6rem 0 0;
    padding: 1rem 1.6rem;
    background: var(--tablero);
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    color: var(--hueso);
    text-decoration: none;
    border-radius: 2px;
    box-shadow: inset 0 0 0 6px var(--tablero), inset 0 0 0 7px color-mix(in srgb, var(--hueso) 28%, transparent),
                0 3px 7px -4px var(--sombra);
    transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.cartel-anio:hover { transform: translateY(-3px); }
.cartel-anio-tu, .cartel-anio-texto {
    font-family: var(--fuente-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cartel-anio-numero {
    font-family: var(--fuente-titulo);
    font-size: 3.6rem;
    font-weight: 800;
    line-height: .9;
    color: var(--ampolleta);
}
.cartel-anio-texto { display: flex; flex-direction: column; }
.cartel-anio-texto small {
    font-family: var(--fuente-texto);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    opacity: .85;
}

/* --- La página ----------------------------------------------------------- */
.anio-pestanas { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1rem; }
.anio-pestana {
    padding: .35rem .8rem;
    border: 1px solid var(--regla-fuerte);
    border-radius: 2px;
    background: var(--papel-2);
    color: var(--tinta);
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
}
.anio-pestana.activa { background: var(--tablero); color: var(--hueso); border-color: var(--tablero); }

.anio-marquesina {
    position: relative;
    text-align: center;
    padding: 2rem 1rem 2.4rem;
    margin-bottom: 2.4rem;
    background: var(--tablero);
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    color: var(--hueso);
    box-shadow: inset 0 0 0 8px var(--tablero), inset 0 0 0 9px color-mix(in srgb, var(--hueso) 28%, transparent);
}
/* Las ampolletas del borde de abajo, como la cabecera de la app. */
.anio-marquesina::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 10px;
    background-image: radial-gradient(circle, var(--ampolleta) 0 4px, transparent 4.5px);
    background-size: 26px 10px;
}
.anio-antetitulo {
    margin: 0;
    font-family: var(--fuente-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
h1.anio-numero {
    margin: 0;
    font-size: clamp(5rem, 16vw, 9rem);
    line-height: .9;
    color: var(--ampolleta);
    text-shadow: 0 4px 0 color-mix(in srgb, #000 30%, transparent);
}
.anio-total { margin: 1.1rem 0 1.2rem; font-size: 1.15rem; }
.anio-total b {
    font-family: var(--fuente-titulo);
    font-size: 2.4rem;
    color: var(--hueso);
    margin-right: .3rem;
}
.anio-cambio {
    display: inline-block;
    margin-left: .6rem;
    padding: .1rem .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px dashed currentColor;
}
.anio-cambio.sube { color: var(--ampolleta); }
.anio-cambio.baja { color: color-mix(in srgb, var(--hueso) 75%, transparent); }
.anio-descargar { margin-top: .2rem; max-width: 100%; white-space: normal; }
/* Los párrafos tienen un ancho máximo para leerse cómodos; en la marquesina
   del año van centrados de lado a lado. */
.anio-marquesina p { max-width: none; margin-inline: auto; }
.anio-aviso { color: var(--hueso); margin-top: .7rem; }

.anio-bloque { margin-bottom: 2.4rem; }
.anio-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
}
.anio-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1rem;
    overflow: hidden;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
    color: var(--tinta);
    text-decoration: none;
    transition: transform .16s ease-out;
}
.anio-cat:hover { transform: translateY(-2px); }
.anio-cat-icono {
    position: absolute;
    right: -10px; top: -6px;
    width: 64px; height: 64px;
    color: color-mix(in srgb, var(--ampolleta) 40%, transparent);
    transform: rotate(-10deg);
}
.anio-cat-icono .icon { width: 100%; height: 100%; }
.anio-cat-icono .monogram { font-family: var(--fuente-titulo); font-size: 3.4rem; font-weight: 800; }
.anio-cat-n {
    position: relative;
    font-family: var(--fuente-titulo);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--rojo);
}
.anio-cat-nombre {
    position: relative;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.anio-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.anio-dato {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem 1.1rem;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
}
.anio-dato .pica-grande { min-width: 0; box-shadow: none; border: 0; padding: 0; background: none; }
.anio-dato .pica-grande::before, .anio-dato .pica-grande::after { content: none; }
.anio-dato-titulo {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-2);
}
.anio-dato-grande {
    font-family: var(--fuente-titulo);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    color: var(--rojo);
}
.anio-dato-etiqueta {
    align-self: flex-start;
    padding: .3rem .7rem .22rem;
    background: var(--ampolleta);
    color: #241C10;
    font-family: var(--fuente-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    transform: rotate(-2deg);
    box-shadow: 0 2px 4px -1px color-mix(in srgb, #000 40%, transparent);
}
.anio-dato-pie { font-size: .85rem; color: var(--tinta-2); }

.anio-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.anio-top-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1rem;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
    color: var(--tinta);
    text-decoration: none;
    transition: transform .16s ease-out;
}
.anio-top-fila:hover { transform: translateX(4px); }
.anio-top-n {
    flex: 0 0 2.4rem;
    text-align: center;
    font-family: var(--fuente-titulo);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--rojo);
}
.anio-top-foto {
    flex: 0 0 54px;
    height: 80px;
    background: var(--tablero);
    border: 1px solid var(--regla-fuerte);
}
.anio-top-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.anio-top-texto { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.anio-top-nombre {
    font-family: var(--fuente-titulo);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anio-top-cat { font-size: .8rem; color: var(--tinta-2); }
.anio-top-nota {
    font-family: var(--fuente-titulo);
    font-size: 2rem;
    font-weight: 800;
    color: var(--rojo);
}
.anio-top-nota small { font-size: .9rem; color: var(--tinta-2); font-weight: 600; }

.anio-mejores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}
.anio-mejor {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    color: var(--tinta);
    text-decoration: none;
    transition: transform .16s ease-out;
}
.anio-mejor:hover { transform: translateY(-3px); }
.anio-mejor-cat {
    align-self: flex-start;
    padding: .1rem .45rem;
    background: var(--tablero);
    color: var(--hueso);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.anio-mejor-foto {
    aspect-ratio: 2 / 3;
    background: var(--tablero);
    border: 1px solid var(--regla-fuerte);
}
.anio-mejor-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.anio-mejor-nombre {
    font-family: var(--fuente-titulo);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
}
.anio-mejor-nota { font-family: var(--fuente-titulo); font-size: 1.6rem; font-weight: 800; color: var(--rojo); line-height: 1; }
.anio-peor .anio-top-fila { opacity: .9; }
.anio-sin-fecha { text-align: center; }
@media (max-width: 560px) {
    .cartel-anio { gap: .7rem; padding: .9rem 1rem; }
    .cartel-anio-numero { font-size: 2.6rem; }
    .cartel-anio-tu, .cartel-anio-texto { font-size: 1.15rem; }
    .anio-top-nombre { font-size: 1.1rem; }
}

/* --- Crear un top ---------------------------------------------------------- */
.panel-caja:has(#form-crear-top) { max-width: 680px; }
#form-crear-top { gap: 1rem; }
.cantidad-boton, .cantidad-numero { border-color: var(--regla-fuerte); }
.cantidad-boton {
    background: var(--papel-2);
    color: var(--tinta);
    border-radius: 2px;
    transition: background-color .15s ease-out, color .15s ease-out;
}
.cantidad-boton:first-child { border-radius: 2px 0 0 2px; }
.cantidad-boton:last-child { border-radius: 0 2px 2px 0; }
.cantidad-boton:hover:not(:disabled) { background: var(--verde); color: var(--sobre-relleno); border-color: var(--verde); }
.cantidad-numero { background: var(--papel); color: var(--rojo); }
.cantidad-atajo {
    border-color: var(--regla-fuerte);
    border-radius: 2px;
    color: var(--tinta-2);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color .15s ease-out, border-color .15s ease-out;
}
.cantidad-atajo:hover { color: var(--tinta); border-color: var(--tinta-2); }
.cantidad-atajo.activo { background: var(--tablero); border-color: var(--tablero); color: var(--hueso); }

.field-puestos-nuevos > label small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinta-2); }
.puesto-nuevo {
    background: var(--papel-2);
    border-color: var(--regla);
    border-radius: 2px;
    transition: border-color .15s ease-out;
}
.puesto-nuevo-activo { border-color: var(--verde); }
.puesto-nuevo-numero { color: var(--rojo); }
.puesto-nuevo:first-child .puesto-nuevo-numero { color: var(--oro); }
.puesto-nuevo-foto { border-color: var(--regla-fuerte); color: var(--tinta-2); border-radius: 2px; transition: color .15s ease-out, border-color .15s ease-out; }
.puesto-nuevo-foto:hover { color: var(--verde); border-color: var(--verde); }
.puesto-nuevo-foto:has(:focus-visible) { outline: 2px solid var(--verde); outline-offset: 2px; }
.puesto-nuevo-quitar { color: var(--tinta-2); border-radius: 2px; transition: color .15s ease-out, border-color .15s ease-out; }
.puesto-nuevo-quitar:hover, .puesto-nuevo-quitar:focus-visible { color: var(--rojo); border-color: var(--rojo); }
/* Con el mínimo de puestos la × solo vacía: más tenue, para que no
   parezca que va a quitar el puesto. */
.puestos-nuevos.en-minimo .puesto-nuevo-quitar { opacity: .55; }
@keyframes puesto-llega { from { opacity: 0; transform: translateY(-4px); } }
.puesto-nuevo { animation: puesto-llega .18s ease-out; }

/* --- Actualizaciones ------------------------------------------------------- */
/* El aviso de versión nueva: una franja de ampolleta bajo la cabecera. */
.aviso-actualizacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem 1rem;
    padding: .55rem 3rem .55rem 1rem;
    position: relative;
    background: var(--ampolleta);
    color: #241C10;
    font-size: .9rem;
    animation: desplegar .3s ease-out;
}
.aviso-actualizacion[hidden] { display: none; }
.aviso-actualizacion-ver {
    color: #241C10;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.aviso-actualizacion-cerrar {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border-color: transparent;
    color: #241C10;
}

/* La sección de Info: la versión y, al lado, buscar y actualizar. */
.actualizar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
    margin-bottom: 1rem;
}
.actualizar .version-caja { margin: 0; }
.actualizar-cuerpo { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.actualizar-estado { margin: 0; color: var(--tinta-2); }
.actualizar-estado:empty { display: none; }
.actualizar-estado.error { color: var(--rojo); font-weight: 600; }
.actualizar-acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.actualizar-nueva {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1rem 1.1rem;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-top: 3px solid var(--ampolleta);
    border-radius: 2px;
    animation: desplegar .25s ease-out;
}
.actualizar-nueva[hidden], .actualizar-progreso[hidden] { display: none; }
.actualizar-titulo { margin: 0; font-size: 1.05rem; }
.actualizar-titulo b { font-family: var(--fuente-titulo); font-size: 1.6rem; color: var(--rojo); margin: 0 .3rem; }
.actualizar-titulo small { color: var(--tinta-2); }
.actualizar-notas ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.actualizar-notas li { color: var(--tinta); }
.actualizar-progreso { display: flex; flex-direction: column; gap: .5rem; }
.actualizar-progreso-texto { margin: 0; font-weight: 600; color: var(--tinta); }
.actualizar-progreso .escala-recorrido { animation: none; transition: width .3s ease-out; }
@media (max-width: 640px) {
    .actualizar { grid-template-columns: 1fr; }
}

/* --- Tu año: más estadísticas ------------------------------------------- */
button.anio-cat, a.anio-cat { cursor: pointer; }
.anio-cat-prom { position: relative; font-size: .75rem; color: var(--tinta-2); }

/* Gráficos de barras: una sola serie, un solo color (el rojo de las notas),
   barras finas con la punta redondeada, el valor al pasar el mouse y solo
   el máximo rotulado. */
.anio-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
}
.grafico {
    margin: 0;
    padding: 1rem 1.1rem .8rem;
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
}
.grafico-titulo {
    margin-bottom: .8rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-2);
}
.grafico-barras {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    height: 150px;
    border-bottom: 1px solid var(--regla-fuerte);
}
.grafico-col {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    outline: none;
}
.grafico-barra {
    width: min(70%, 22px);
    height: var(--h);
    min-height: 0;
    background: var(--rojo);
    border-radius: 4px 4px 0 0;
    transition: opacity .15s ease-out;
}
.grafico-col:hover .grafico-barra { opacity: .8; }
.grafico-valor {
    font-family: var(--fuente-titulo);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--tinta);
    visibility: hidden;
}
.grafico-valor.visible, .grafico-col:hover .grafico-valor { visibility: visible; }
.grafico-eje {
    position: absolute;
    bottom: -1.4rem;
    font-size: .68rem;
    color: var(--tinta-2);
    text-transform: capitalize;
}
.grafico { padding-bottom: 1.9rem; }
.grafico .hint { margin: 1.6rem 0 0; }
.grafico-tip {
    position: absolute;
    z-index: 50;
    padding: .3rem .55rem;
    background: var(--tablero);
    color: var(--hueso);
    font-size: .8rem;
    font-weight: 600;
    border-radius: 2px;
    box-shadow: 0 4px 10px -4px rgb(0 0 0 / .5);
    pointer-events: none;
    white-space: nowrap;
}
.grafico-tip[hidden] { display: none; }

.anio-datos-mas { margin-top: -1rem; }
.anio-datos-mas .anio-dato-grande { font-size: 2rem; }
a.anio-dato-pie { color: var(--verde); text-decoration: none; font-weight: 600; }
a.anio-dato-pie:hover { text-decoration: underline; }

.anio-subcats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-width: 640px; }
.anio-subcats li {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}
.anio-subcat-nombre { font-weight: 700; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; }
.anio-subcats .escala { margin: 0; }
.anio-subcat-nota { font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 800; color: var(--rojo); display: flex; align-items: baseline; gap: .4rem; }
.anio-subcat-nota small { font-family: var(--fuente-texto); font-size: .72rem; font-weight: 500; color: var(--tinta-2); }

/* La lista del año, con filtros por categoría. */
.anio-filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.anio-filtro {
    padding: .35rem .75rem;
    border: 1px solid var(--regla-fuerte);
    border-radius: 2px;
    background: var(--papel-2);
    color: var(--tinta);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
.anio-filtro b { margin-left: .2rem; color: var(--rojo); }
.anio-filtro[aria-pressed="true"] { background: var(--tablero); border-color: var(--tablero); color: var(--hueso); }
.anio-filtro[aria-pressed="true"] b { color: var(--ampolleta); }
.anio-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}
.anio-lista li { max-width: none; }
.anio-lista li[hidden] { display: none; }
.anio-lista-item { display: flex; flex-direction: column; gap: .35rem; color: var(--tinta); text-decoration: none; transition: transform .16s ease-out; }
.anio-lista-item:hover { transform: translateY(-3px); }
.anio-lista-foto { aspect-ratio: 2 / 3; background: var(--tablero); border: 1px solid var(--regla-fuerte); }
.anio-lista-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.anio-lista-nombre { font-family: var(--fuente-titulo); font-size: 1.05rem; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.anio-lista-pie { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; font-size: .75rem; color: var(--tinta-2); }
.anio-lista-pie b { font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--rojo); }
.anio-ir-cat { display: inline-block; margin-top: 1rem; color: var(--verde); font-weight: 700; text-decoration: none; }
.anio-ir-cat[hidden] { display: none; }
@media (max-width: 560px) {
    .anio-subcats li { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto; gap: .6rem; }
    .grafico-eje { font-size: .6rem; }
}

/* El resultado de la última actualización. */
.aviso-resultado { background: var(--verde); color: var(--sobre-relleno); }
.aviso-resultado .aviso-actualizacion-ver,
.aviso-resultado .aviso-actualizacion-cerrar { color: var(--sobre-relleno); }
.actualizar-fallo {
    display: flex; flex-direction: column; gap: .6rem;
    padding: 1rem 1.1rem;
    background: var(--papel-2);
    border: 1px solid var(--regla);
    border-top: 3px solid var(--rojo);
    border-radius: 2px;
}
.actualizar-fallo[hidden] { display: none; }
.actualizar-fallo p { margin: 0; }
.actualizar-registro summary { cursor: pointer; font-size: .8rem; color: var(--tinta-2); }
.actualizar-registro pre { white-space: pre-wrap; font-size: .72rem; max-height: 200px; overflow: auto; margin: .5rem 0 0; }

/* ===========================================================================
   AYUDA: más grande y con índice
   En pantalla ancha, un panel casi a pantalla completa: índice de temas a la
   izquierda y el tema elegido a la derecha, con su propio scroll (ayuda.js).
   En la angosta, la lista desplegable de siempre.
   =========================================================================== */
.ayuda-indice { display: none; }
.panel-ayuda .ayuda-seccion {
    background: var(--papel-2);
    background-image: var(--fibra);
    background-blend-mode: multiply;
    border: 1px solid var(--regla);
    border-radius: 2px;
}
.panel-ayuda .ayuda-seccion > summary {
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.panel-ayuda .ayuda-seccion > summary:hover { color: var(--verde); }
.panel-ayuda .ayuda-seccion p,
.panel-ayuda .ayuda-seccion li { font-size: 1.02rem; line-height: 1.65; max-width: 78ch; }
.panel-ayuda .ayuda-seccion > p,
.panel-ayuda .ayuda-seccion > ul,
.panel-ayuda .ayuda-seccion > ol { max-width: none; }
.panel-ayuda kbd { border-color: var(--regla-fuerte); background: var(--papel); border-radius: 2px; }

@media (min-width: 860px) {
    .panel-ayuda .panel-caja.ayuda-caja {
        width: min(1120px, 94vw);
        max-width: none;
        height: min(860px, 90vh);
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
        column-gap: 1.6rem;
        overflow: hidden;
    }
    .ayuda-caja > h2,
    .ayuda-caja > .ayuda-intro { grid-column: 1 / -1; }
    .ayuda-caja > .ayuda-intro { max-width: 90ch; margin-bottom: 1rem; }
    .ayuda-indice {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        overflow-y: auto;
        padding-right: .4rem;
        border-right: 1px solid var(--regla);
    }
    .ayuda-tema {
        text-align: left;
        padding: .55rem .75rem;
        border: 0;
        border-radius: 2px;
        background: none;
        font: inherit;
        font-size: .92rem;
        font-weight: 600;
        line-height: 1.25;
        color: var(--tinta-2);
        cursor: pointer;
        transition: background-color .15s ease-out, color .15s ease-out;
    }
    .ayuda-tema:hover { background: color-mix(in srgb, var(--verde) 8%, transparent); color: var(--tinta); }
    .ayuda-tema[aria-current="true"] { background: var(--tablero); color: var(--hueso); }
    .ayuda-caja > .ayuda {
        margin: 0;
        overflow-y: auto;
        padding-right: .4rem;
    }
    /* De a un tema: los cerrados no se muestran (el índice los reemplaza). */
    .ayuda-caja .ayuda-seccion:not([open]) { display: none; }
    .ayuda-caja .ayuda-seccion[open] { border: 0; background: none; }
    .ayuda-caja .ayuda-seccion[open] > summary {
        pointer-events: none;
        padding: 0 0 .8rem;
        font-size: 2rem;
        border-bottom: 2px solid var(--regla-fuerte);
        margin-bottom: 1rem;
    }
    .ayuda-caja .ayuda-seccion[open] > summary::after { content: none; }
    .ayuda-caja .ayuda-seccion > p,
    .ayuda-caja .ayuda-seccion > ul,
    .ayuda-caja .ayuda-seccion > ol { margin-left: 0; margin-right: 0; }
    .ayuda-caja .ayuda-seccion p,
    .ayuda-caja .ayuda-seccion li { font-size: 1.08rem; }
}

/* ===========================================================================
   NOTAS DEL PARCHE: el número de cada versión en amarillo
   Un boleto de ampolleta con el número en la letra de los rótulos.
   =========================================================================== */
.nota-version {
    display: inline-block;
    padding: .2rem .6rem .1rem;
    background: var(--ampolleta);
    color: #241C10;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .03em;
    border-radius: 2px;
    box-shadow: 0 2px 4px -2px color-mix(in srgb, #000 45%, transparent);
}
.nota-cabeza { gap: .7rem; }

/* --- Agrupar el mosaico (Canciones y Álbumes) ------------------------------ */
.grid-items > .grupo-titulo {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 1rem 0 -.6rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--regla-fuerte);
    font-family: var(--fuente-titulo);
    font-size: 1.5rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta);
}
.grid-items > .grupo-titulo:first-of-type { margin-top: 0; }
.grid-items > .grupo-titulo span {
    font-family: var(--fuente-texto);
    font-size: .8rem;
    font-weight: 700;
    color: var(--rojo);
}


/* --- Apartado "Dónde" (0.16.0) ------------------------------------------- */
/* En el formulario ocupa su propia fila: el campo y, al lado, los botones
   con lo ya usado. En pantalla angosta, uno debajo del otro. */
.form-card .campo-donde {
    flex: 1 1 100%;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
}
.form-card .campo-donde > label { grid-column: 1 / -1; }
.form-card .campo-donde .donde-opciones { margin-top: 0; }
@media (max-width: 560px) {
    .form-card .campo-donde { grid-template-columns: minmax(0, 1fr); }
    .form-card .campo-donde .donde-opciones { margin-top: .5rem; }
}
.donde-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}
.donde-opcion {
    padding: .3rem .7rem .24rem;
    background: transparent;
    color: var(--tinta);
    border: 1.5px solid var(--regla);
    border-radius: 0;
    font-family: var(--fuente-titulo);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.donde-opcion:hover { transform: translateY(-1px); border-color: var(--ampolleta); }
.donde-opcion.donde-sugerida { border-style: dashed; color: var(--tinta-2); }
.donde-opcion[aria-pressed="true"] {
    background: var(--ampolleta);
    border-color: var(--ampolleta);
    color: #241C10;
}
.field-donde-cat .donde-cat-activar {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    margin: .3rem 0 .6rem;
}
.field-donde-cat .donde-cat-titulo[hidden] { display: none; }
.item-donde a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.anio-donde-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.2rem 2rem;
}
.anio-donde-cat h3 { margin: 0 0 .4rem; }
.anio-donde-cat h3 small {
    margin-left: .4rem;
    font-size: .8em;
    font-weight: 400;
    color: var(--tinta-2);
    text-transform: none;
    letter-spacing: 0;
}
.anio-donde-cat .anio-subcat-nombre { color: inherit; }


/* --- Ficha: anterior / siguiente (0.16.0) ---------------------------------- */
.ficha-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.ficha-nav .back { margin-bottom: 0; }
.ficha-vecinos {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.ficha-vecino {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .7rem;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    color: var(--tinta-2);
    text-decoration: none;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.ficha-vecino[hidden] { display: none; }
.ficha-vecino .icon { width: 14px; height: 14px; }
.ficha-vecino-sig .icon { transform: scaleX(-1); }
.ficha-vecino:hover,
.ficha-vecino:focus-visible { color: var(--rojo); border-color: currentColor; }
.ficha-vecino-ant:hover { transform: translateX(-2px); }
.ficha-vecino-sig:hover { transform: translateX(2px); }
.ficha-vecinos-pos {
    min-width: 4.5em;
    text-align: center;
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--tinta-2);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
    .ficha-vecino span { display: none; }      /* en el celular, solo la flecha */
}

/* --- Ficha: los datos, cada uno con su rótulo (0.16.0) -------------------- */
.ficha-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 0;
    margin: .2rem 0 1.1rem;
    padding: 0;
}
.ficha-dato {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    padding: 0 1.15rem;
    border-left: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
    min-width: 0;
}
.ficha-dato:first-child { padding-left: 0; border-left: 0; }
.ficha-dato dt {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .68;
}
.ficha-dato dt .icon { width: 13px; height: 13px; }
.ficha-dato dd {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}
.ficha-dato-menor dd { font-size: .88rem; opacity: .8; }
.ficha-dato.item-donde a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.ficha-dato.item-donde a:hover { color: var(--rojo); }
/* En el celular, de a dos por fila y sin rayas: al partirse la fila, la
   raya quedaba colgando al comienzo de la segunda. */
@media (max-width: 560px) {
    .ficha-datos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem 1rem;
    }
    .ficha-dato, .ficha-dato:first-child { padding: 0; border-left: 0; }
}


/* --- Atajos de teclado del formulario (0.16.0) ----------------------------- */
.guardar-barra:has(.atajos-teclado) { flex-wrap: wrap; justify-content: center; }
.atajos-teclado {
    flex: 1 1 100%;
    order: 2;                 /* debajo del botón Guardar */
    max-width: none;
    margin: .65rem 0 0;
    text-align: center;
    font-size: .76rem;
    color: var(--tinta-2);
}
.atajos-teclado kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: .05rem .35rem;
    margin: 0 .08rem;
    border: 1px solid var(--regla);
    border-bottom-width: 2px;
    font-family: inherit;
    font-size: .72rem;
    line-height: 1.3;
    text-align: center;
    background: var(--papel);
    color: var(--tinta);
}
@media (hover: none) { .atajos-teclado { display: none; } }   /* sin teclado, no aplica */
/* Que se note en qué campo está el foco al moverse con Tab. */
.form-card input[type="range"]:focus-visible,
.form-card summary:focus-visible,
.form-card input[type="checkbox"]:focus-visible,
.form-card input[type="file"]:focus-visible {
    outline: 2px solid var(--rojo);
    outline-offset: 3px;
}

/* Año, mes y día en una fila (también en las dos columnas de inicio y término). */
.fecha-inputs .fecha-anio { width: 5.8rem; }
.fecha-inputs .fecha-mes { width: 9.2rem; }
.fecha-inputs .fecha-dia { width: 5.4rem; }


/* --- Qué pasa con los ítems al cambiar subcategorías (0.17.0) ------------- */
.subcats-efecto {
    margin: .7rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: .2rem;
}


/* --- Subcategoría nueva desde el formulario de agregar (0.17.0) ---------- */
.subcats-nuevas { display: grid; gap: .8rem; margin-top: .8rem; }
.subcats-nuevas:empty { display: none; }
.subcat-nueva {
    padding: .7rem .8rem;
    border: 1px dashed var(--regla);
}
.subcat-nueva .subrating-header { display: flex; align-items: center; gap: .6rem; }
.subcat-nueva .subcat-nueva-nombre { flex: 1 1 auto; min-width: 0; }
.subcat-nueva-todas {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .45rem;
    font-size: .82rem;
    color: var(--tinta-2);
}
.subcat-nueva-agregar { margin-top: .8rem; }
.subcat-nueva-agregar[hidden] { display: none; }


/* --- Guardando: el botón queda quieto mientras se envía (0.17.1) --------- */
button.enviando { opacity: .7; cursor: progress; pointer-events: none; }


/* ===========================================================================
   LA BARRA DEL MOSAICO (0.18.0)
   Antes eran seis rótulos en mayúscula con sus listas, partidos en dos
   renglones. Ahora: ordenar y agrupar (con su icono dentro), los filtros
   juntos tras "Filtrar", y el tamaño en cuadritos a la derecha.
   =========================================================================== */
.orden-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem 1.2rem;
    flex-wrap: wrap;
}
.orden-bar-principal {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    min-width: 0;
}
.orden-bar label.control-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: inherit;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tinta);
    max-width: 100%;
}
.control-select > .icon {
    position: absolute;
    left: .75rem;
    width: 15px;
    height: 15px;
    color: var(--tinta-2);
    pointer-events: none;
}
.orden-bar .control-select select { padding-left: 2.15rem; max-width: 100%; }

/* Filtrar: un botón que abre una cajita con los filtros. */
.filtros-menu { position: relative; }
.filtros-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    user-select: none;
}
.filtros-menu > summary::-webkit-details-marker { display: none; }
.filtros-menu[open] > summary { border-color: var(--ampolleta); }
.filtros-cuantos {
    min-width: 1.3rem;
    padding: 0 .3rem;
    background: var(--ampolleta);
    color: #241C10;
    font-weight: 800;
    border-radius: 2px;
    text-align: center;
}
.filtros-cuantos[hidden] { display: none; }
.filtros-caja {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    z-index: 40;
    display: grid;
    gap: .75rem;
    min-width: min(290px, 86vw);
    padding: .9rem 1rem 1rem;
    background: var(--papel-2);
    border: 1px solid var(--regla-fuerte);
    box-shadow: 0 18px 36px -18px color-mix(in srgb, #000 65%, transparent);
    animation: desplegar .18s ease-out;
}
.orden-bar .filtros-caja label.filtro {
    display: grid;
    gap: .3rem;
    color: var(--tinta-2);
}
.filtros-caja .filtro > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.filtros-caja select { width: 100%; }

/* Los filtros puestos, a la vista: fichas que se quitan con un toque. */
.filtros-activos {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: -.4rem 0 1rem;
}
.filtros-activos[hidden] { display: none; }
.ficha-filtro {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .4rem .3rem .75rem;
    background: var(--ampolleta);
    color: #241C10;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.ficha-filtro b {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1rem;
    line-height: 1;
    background: color-mix(in srgb, #241C10 14%, transparent);
}
.ficha-filtro:hover b { background: color-mix(in srgb, #241C10 26%, transparent); }

/* Tamaño: cuadritos, de una tarjeta grande a muchas chiquitas. */
.orden-bar .tamanos {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--regla-fuerte);
}
.orden-bar .tamano {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tinta-2);
    cursor: pointer;
}
.orden-bar .tamano + .tamano { border-left: 1px solid var(--regla); }
.orden-bar .tamano .icon { width: 16px; height: 16px; }
.orden-bar .tamano:hover { color: var(--tinta); }
.orden-bar .tamano[aria-pressed="true"] { background: var(--ampolleta); color: #241C10; }

@media (max-width: 560px) {
    .orden-bar-principal { width: 100%; }
    .orden-bar label.control-select { flex: 1 1 100%; }
    .orden-bar .control-select select { width: 100%; }
}

/* ===========================================================================
   DESEMPATAR (0.18.0): un aviso que explica, puestos en las tarjetas y el
   mosaico que se reordena delante tuyo al terminar.
   =========================================================================== */
/* Desempatar: un botón chico en la barra. Pendiente, con borde punteado
   amarillo y "=" lleno; resuelto, más apagado (pero sigue ahí para rehacer). */
.chip-empates {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .75rem .3rem .3rem;
    background: color-mix(in srgb, var(--ampolleta) 10%, transparent);
    color: var(--tinta);
    border: 1px dashed var(--ampolleta);
    border-radius: 0;
    font: inherit;
    font-size: .86rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}
.chip-empates[hidden] { display: none; }
.chip-empates:hover { background: color-mix(in srgb, var(--ampolleta) 22%, transparent); }
.chip-empates-icono {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--ampolleta);
    color: #1C150B;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
}
.chip-empates .aviso-listo { display: none; }
.chip-empates.resuelto .aviso-pendiente { display: none; }
.chip-empates.resuelto .aviso-listo { display: inline; }
.chip-empates.resuelto {
    background: transparent;
    border: 1px dotted var(--regla-fuerte);
    color: var(--tinta-2);
}
.chip-empates.resuelto .chip-empates-icono {
    background: transparent;
    color: var(--tinta-2);
    border: 1px solid var(--regla);
}
.chip-empates.resuelto:hover { color: var(--tinta); background: transparent; border-color: var(--ampolleta); }

/* El puesto de cada tarjeta, abajo a la izquierda de la portada. */
/* Letra de texto en negrita y números de ancho fijo: la de títulos, angosta,
   se volvía ilegible al achicar el mosaico. */
.puesto-mosaico {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    min-width: 2.2em;
    padding: .3em .5em .26em;
    background: var(--ampolleta);
    color: #1C150B;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    box-shadow: 0 1px 0 color-mix(in srgb, #000 35%, transparent);
    pointer-events: none;
}
.puesto-mosaico::before { content: "#"; font-weight: 600; opacity: .6; margin-right: .08em; }
.puesto-mosaico[hidden] { display: none; }
.grid-items.tam-mediano .puesto-mosaico { font-size: .88rem; }
.grid-items.tam-chico .puesto-mosaico { font-size: .8rem; }
.grid-items.tam-mini .puesto-mosaico { font-size: .74rem; padding: .26em .38em .22em; }
.grid-items.tam-mini .puesto-mosaico::before { display: none; }

/* Recién desempatada: un pulso de luz alrededor de la portada. */
@keyframes desempatada {
    0%   { box-shadow: 0 0 0 0 transparent; }
    20%  { box-shadow: 0 0 0 4px var(--ampolleta), 0 0 26px 6px color-mix(in srgb, var(--ampolleta) 55%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.grid-items .item-card.recien-desempatada .thumb { animation: desempatada 2.4s ease-out; }
.grid-items .item-card.recien-desempatada .puesto-mosaico { background: var(--rojo); color: #FFF6E5; }
@media (prefers-reduced-motion: reduce) {
    .grid-items .item-card.recien-desempatada .thumb { animation: none; outline: 3px solid var(--ampolleta); }
}

/* El resultado, en el panel: cada empate en su orden nuevo. */
.desempatar-resultado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: .8rem 1.4rem;
    margin: .6rem 0 1.1rem;
    text-align: left;
}
.desempatar-resultado-nota {
    margin: 0 0 .3rem;
    font-family: var(--fuente-titulo);
    font-size: 1.1rem;
    color: var(--rojo);
}
.desempatar-resultado ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .15rem; }
.desempatar-resultado li::marker { font-weight: 700; color: var(--tinta-2); }
/* Mientras cargan las fotos del par nuevo, no se ve el par viejo. */
.desempatar-duelo.duelo-cargando .duelo-lado { opacity: .35; pointer-events: none; }
.desempatar-duelo.duelo-cargando .duelo-lado img { visibility: hidden; }


/* --- Rehacer solo algunos desempates (0.18.0) ---------------------------- */
.elegir-grupos { display: grid; gap: 1rem; margin: .4rem 0 1rem; max-height: 52vh; overflow: auto; }
.elegir-fila { display: flex; flex-wrap: wrap; gap: .5rem; }
.elegir-cosa {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .7rem .3rem .3rem;
    background: transparent;
    color: var(--tinta);
    border: 1.5px solid var(--regla);
    border-radius: 0;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    text-align: left;
}
.elegir-cosa img { width: 30px; height: 40px; object-fit: cover; }
.elegir-cosa:hover { border-color: var(--ampolleta); }
.elegir-cosa[aria-pressed="true"] {
    background: var(--ampolleta);
    border-color: var(--ampolleta);
    color: #1C150B;
    font-weight: 700;
}
.elegir-acciones { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.elegir-acciones .btn-primary:disabled { opacity: .5; cursor: not-allowed; }


/* --- La edición web se distingue en el logo (rama web) ------------------- */
.logo-edicion {
    display: inline-block;
    margin-left: .45rem;
    padding: .15rem .4rem .1rem;
    background: var(--ampolleta);
    color: #1C150B;
    font-size: .38em;
    letter-spacing: .12em;
    vertical-align: middle;
    transform: rotate(-4deg) translateY(-.15em);
}


/* ===========================================================================
   EN PROCESO (0.19.0): "Jugando ahora" / "Ahora mismo"
   Una franja chica, como la luz de "al aire" de una cabina: suele ser una o
   dos cosas, así que no merece un mosaico propio.
   =========================================================================== */
@keyframes punto-vivo {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo) 55%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--rojo) 0%, transparent); }
}
.punto-vivo {
    display: inline-block;
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: var(--rojo);
    vertical-align: middle;
    animation: punto-vivo 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }

.franja-en-curso { margin: 0 0 1.4rem; }
.franja-en-curso-titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .6rem;
    font-size: 1.15rem;
}
.en-curso-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: .7rem;
}
.en-curso {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .55rem .7rem .55rem .55rem;
    background: var(--papel-2);
    border: 1px solid var(--regla-fuerte);
    border-left: 4px solid var(--rojo);
}
.en-curso-foto {
    display: grid;
    place-items: center;
    width: 54px;
    height: 76px;
    overflow: hidden;
    background: var(--tablero);
    color: var(--tinta-2);
}
.en-curso-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.en-curso-texto { display: grid; gap: .15rem; min-width: 0; }
.en-curso-que {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rojo);
}
.en-curso-nombre {
    color: var(--tinta);
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
    line-height: 1.1;
    text-decoration: none;
    /* Hasta dos líneas: los nombres de juegos suelen ser largos. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.en-curso-nombre:hover { color: var(--rojo); }
.en-curso-desde { font-size: .85rem; color: var(--tinta-2); }
.en-curso-terminar { white-space: nowrap; }
@media (max-width: 560px) {
    .en-curso { grid-template-columns: 48px minmax(0, 1fr); }
    .en-curso-foto { width: 48px; height: 68px; grid-row: span 2; }
    .en-curso-terminar { grid-column: 2; justify-self: start; }
}

/* En la ficha */
.etiqueta-en-curso { display: inline-flex; align-items: center; gap: .45rem; }
.agregar-barra-deseo { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.btn-empezar { display: inline-flex; align-items: center; gap: .5rem; }
.form-dejar { margin: 0; }
.reciente-en-curso { color: var(--rojo); }

/* Dejar algo en proceso: el panel, con el punto "en vivo" apagado. */
.punto-apagado { background: var(--tinta-2); animation: none; }
.panel-dejar .panel-caja { max-width: 500px; }
.panel-dejar h2 { display: flex; align-items: center; gap: .6rem; }
.dejar-texto { font-size: 1.02rem; }
.dejar-acciones { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }
.bloque-recientes, .cartel-anio { scroll-margin-top: 1rem; }
.franja-en-curso + .cartel-anio, .drag-hint + .franja-en-curso { margin-top: 1.2rem; }


/* --- Confirmaciones de Baremo (en vez del aviso del navegador) ------------ */
.panel-confirmar .panel-caja { max-width: 480px; }
.confirmar-texto { white-space: pre-line; font-size: 1.02rem; margin: .4rem 0 0; }
.confirmar-acciones { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1.3rem; }
.panel-confirmar.es-peligro .panel-caja { border-color: var(--rojo); }
.panel-confirmar.es-peligro h2 { color: var(--rojo); }
/* Que se vea bien dónde está el foco al moverse con el teclado. */
.confirmar-acciones button:focus-visible,
.dejar-acciones button:focus-visible,
.agregar-barra-deseo button:focus-visible,
.en-curso a:focus-visible {
    outline: 3px solid var(--ampolleta);
    outline-offset: 3px;
}


/* ===========================================================================
   CALIFICAR OTRA VEZ (0.20.0)
   =========================================================================== */
.btn-de-nuevo { display: inline-flex; align-items: center; gap: .45rem; }
.vez-antes { margin-left: .5rem; font-weight: 400; color: var(--tinta-2); text-transform: none; letter-spacing: 0; }
/* La columna de la izquierda: póster y, debajo, "Tus veces". */
.ficha .ficha-lado { position: sticky; top: 1.5rem; grid-row: span 2; min-width: 0; }
.ficha .ficha-lado .item-hero { position: static; }
/* Con veces la columna puede ser más alta que la pantalla: deja de ser fija
   para que se pueda leer entera bajando. */
.ficha .ficha-lado:has(.lado-veces) { position: static; }
.ficha[data-vista="musica"] .ficha-lado { position: static; width: 300px; flex-shrink: 0; }
.ficha[data-vista="musica"] .ficha-lado .item-hero { width: auto; }

.lado-veces { margin-top: 1.3rem; }
.lado-veces h2 {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .6rem; font-size: 1.25rem;
}
.veces-cuantas {
    display: inline-grid; place-items: center; min-width: 1.5rem; padding: 0 .3rem;
    background: var(--ampolleta); color: #1C150B; font-size: .8em; line-height: 1.5;
}
.veces-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.vez { background: var(--papel-2); border: 1px solid var(--regla); }
.vez-actual { border-left: 4px solid var(--ampolleta); border-color: var(--regla-fuerte); }
.vez-linea {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
}
summary.vez-linea { list-style: none; cursor: pointer; }
summary.vez-linea::-webkit-details-marker { display: none; }
summary.vez-linea:hover .vez-numero, summary.vez-linea:focus-visible .vez-numero { color: var(--rojo); }
summary.vez-linea { position: relative; }
summary.vez-linea::after {
    content: "▾"; position: absolute; right: .55rem; top: 50%; translate: 0 -50%;
    font-size: .75rem; color: var(--tinta-2); transition: rotate .15s ease;
}
.vez-detalle[open] > summary.vez-linea::after { rotate: 180deg; }
summary.vez-linea { padding-right: 1.6rem; }
.vez-numero { font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--tinta); }
.vez-cuando { color: var(--tinta-2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vez-nota { font-family: var(--fuente-titulo); font-size: 1.35rem; color: var(--rojo); line-height: 1; }
.vez-pie { margin: -.35rem 0 0; padding: 0 .65rem .45rem 3.4rem; font-size: .72rem; font-weight: 700;
           letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.vez-cambio { letter-spacing: 0; }
.vez-cambio.sube { color: var(--verde); }
.vez-cambio.baja { color: var(--rojo); }
.vez-cuerpo { padding: 0 .65rem .65rem; display: grid; gap: .5rem; }
.vez-review { margin: 0; font-size: .9rem; color: var(--tinta); }
.vez-vacia { color: var(--tinta-2); font-style: italic; }
.vez-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .78rem; color: var(--tinta-2); }
.vez-subs b { color: var(--tinta); }
.vez-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.vez-editar > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; padding: .3rem .6rem; }
.vez-editar > summary::-webkit-details-marker { display: none; }
.vez-editar[open] { flex: 1 1 100%; }
.vez-form { margin-top: .5rem; }
.vez-form .fechas-rango-par { display: grid; gap: .6rem; }
.vez-borrar { margin: 0; }
.vez-borrar .boton-papelera { font-size: .78rem; }

/* Celular y pantallas angostas: una sola columna, y las veces van al final
   (después de review, subcategorías y comentarios). */
@media (max-width: 900px) {
    .ficha { display: flex; flex-direction: column; }
    .ficha .item-header, .ficha .ficha-lado { display: contents; }
    .ficha .item-hero { order: 1; max-width: 260px; margin-bottom: 1.2rem; }
    .ficha .item-header-info { order: 2; }
    .ficha .ficha-cuerpo { order: 3; }
    .ficha .lado-veces { order: 4; margin-top: 1.6rem; }
}

/* En el mosaico: cuántas veces la calificaste */
.marca-veces {
    position: absolute;
    top: .4rem;
    left: .4rem;
    z-index: 2;
    padding: .15em .4em .1em;
    background: var(--tablero);
    color: var(--ampolleta);
    font-weight: 800;
    font-size: .8rem;
    line-height: 1.1;
    border: 1px solid var(--ampolleta);
}

/* En Tu año: cuál vez es */
.marca-vez {
    display: inline-block;
    margin-left: .35rem;
    padding: .05em .4em;
    font-family: inherit;
    font-size: .68em;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: none;
    vertical-align: middle;
    background: var(--ampolleta);
    color: #1C150B;
}
.marca-vez-primera { background: transparent; color: var(--tinta-2); border: 1px solid currentColor; }


/* ===========================================================================
   SUBÍTEMS (0.20.0): partes de algo que se califican aparte
   =========================================================================== */
.subitem-de { margin: 0 0 .3rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.subitem-de a { color: inherit; }
.subitem-de a:hover { color: var(--rojo); }
.subitems-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.subitems-cabeza h2 { margin: 0; }
.subitems-grupo { margin-top: 1rem; }
.subitems-grupo h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.1rem; }
.subitems-cuantos {
    display: inline-grid; place-items: center; min-width: 1.4rem; padding: 0 .3rem;
    background: var(--ampolleta); color: #1C150B; font-size: .75em; line-height: 1.5;
}
/* Cada subítem es una fila compacta: foto cuadrada chica, nombre y nota.
   Caben varios por fila sin achicar la letra. */
.subitems-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: .5rem;
}
.subitem {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .4rem .75rem .4rem .4rem;
    background: var(--papel-2);
    border: 1px solid var(--regla);
    color: var(--tinta);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease;
}
.subitem:hover, .subitem:focus-visible { transform: translateY(-2px); border-color: var(--ampolleta); }
.subitem:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.subitem-foto {
    width: 64px; aspect-ratio: 1;
    display: grid; place-items: center;
    overflow: hidden;
    background: var(--tablero);
    color: var(--tinta-2);
}
.subitem-foto svg { width: 26px; height: 26px; }
.subitem-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Letra de texto, en negrita: la de títulos (angosta) no se leía en chico. */
.subitem-nombre {
    font-family: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.subitem-nota { font-family: var(--fuente-titulo); font-size: 1.6rem; color: var(--rojo); line-height: 1; }
.subitems-vacio { margin-top: .6rem; }
.subitem-subcats-filas:empty { display: none; }
.subitem-otra-subcat { margin-top: .5rem; }
.sub-nueva .sub-nombre-nuevo { min-width: 0; flex: 1 1 auto; }
.sub-nueva .subrating-header { display: flex; align-items: center; gap: .5rem; }
.panel-subitem .panel-caja { max-width: 680px; }
/* En el panel de agregar: el tipo en su fila, con los ya usados al lado. */
.form-subitem .campo-tipo {
    flex: 1 1 100%;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
}
.form-subitem .campo-tipo > label, .form-subitem .campo-tipo > .fecha-hint { grid-column: 1 / -1; }
.form-subitem .campo-tipo .donde-opciones { margin-top: 0; }
@media (max-width: 560px) { .form-subitem .campo-tipo { grid-template-columns: minmax(0, 1fr); } }

.subitem-vista { max-width: 140px; max-height: 180px; margin-top: .5rem; object-fit: cover; }
.subitem-vista[hidden] { display: none; }



/* ===========================================================================
   CREAR, ARRIBA (0.20.1)
   Crear una categoría o un top ya no queda al final de la página: va a la
   derecha del subtítulo, compacto. Un boleto verde con su "+" en ampolleta.
   En el celular queda solo el "+".
   =========================================================================== */
.cabeza-mosaico {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.2rem;
    margin: 0 0 1.4rem;
}
.cabeza-mosaico .page-subtitle { margin: 0; }
.btn-nuevo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 40px;
    padding: .3rem .85rem .3rem .3rem;
    background: var(--verde);
    color: var(--sobre-relleno);
    border: 1px solid color-mix(in srgb, #000 25%, var(--verde));
    border-radius: 2px;
    box-shadow: 0 2px 0 color-mix(in srgb, #000 30%, var(--verde));
    font-family: var(--fuente-texto);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .18s ease-out, transform .1s ease-out;
}
.btn-nuevo .icon {
    width: 30px;
    height: 30px;
    padding: 6px;
    background: var(--ampolleta);
    color: #1C150B;
    border-radius: 1px;
    stroke-width: 3;
    transition: transform .2s ease-out;
}
.btn-nuevo:hover { background: var(--primary-hover); }
.btn-nuevo:hover .icon { transform: rotate(90deg); }
.btn-nuevo:active { transform: translateY(1px); box-shadow: none; }
.btn-nuevo:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn-nuevo:hover .icon { transform: none; } }
/* Angosto: solo el "+", del tamaño de un dedo. El texto sigue ahí para los
   lectores de pantalla. */
@media (max-width: 560px) {
    .btn-nuevo { padding: 4px; min-height: 0; }
    .btn-nuevo .icon { width: 36px; height: 36px; padding: 8px; }
    .btn-nuevo span {
        position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
}


/* ===========================================================================
   TOPS: ORDENAR Y TARJETAS MÁS LLENAS (0.20.1)
   La barra de ordenar como la de una categoría, los tops se arrastran en
   "Mi orden", y cada tarjeta muestra los cinco primeros con su foto chica.
   En pantallas anchas la tarjeta se acuesta: el tablero a la izquierda y el
   podio a la derecha, así caben dos por fila sin tanto aire.
   =========================================================================== */
.orden-bar-tops { margin: 0 0 1.1rem; }
.tops-resumen { margin: 0; font-size: .85rem; color: var(--tinta-2); }
.tops-resumen b { font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--rojo); }

/* El número del top vive ahora dentro del tablero. */
.top-portada .top-card-numero {
    position: absolute;
    right: 0;
    bottom: 0;
    grid-area: auto;
}

/* El podio: número, foto chica y nombre. */
.top-card-primeros { gap: .3rem; }
.top-card-primeros .top-card-puesto {
    display: grid;
    grid-template-columns: 1.3rem 28px minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
}
.top-card-primeros .top-card-puesto b { flex: none; text-align: right; line-height: 1; }
.top-card-mini {
    width: 28px;
    height: 28px;
    overflow: hidden;
    background: color-mix(in srgb, var(--tablero) 14%, transparent);
    border: 1px solid var(--regla);
}
.top-card-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-card-puesto-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-card-primeros .top-card-mas {
    display: block;
    padding-left: calc(1.3rem + 28px + 1.1rem);
    font-size: .8rem;
    color: var(--tinta-2);
}

/* Lo que falta, con una barrita de cuánto va. */
.top-card-estado { display: inline-flex; align-items: center; gap: .5rem; }
.top-card-barra {
    width: 54px;
    height: 5px;
    background: color-mix(in srgb, var(--verde) 18%, transparent);
    overflow: hidden;
}
.top-card-barra span { display: block; height: 100%; background: var(--verde); }

/* Arrastrar: el tirador sobre el tablero, solo en "Mi orden". */
.grid-tops .drag-handle {
    z-index: 3;
    color: color-mix(in srgb, var(--hueso) 75%, transparent);
    background: color-mix(in srgb, var(--tablero) 70%, transparent);
}
.grid-tops:not(.orden-manual) .drag-handle { display: none; }
.grid-tops.orden-manual .top-card:hover .drag-handle,
.grid-tops.orden-manual .top-card:focus-visible .drag-handle { opacity: 1; }
@media (hover: none) { .grid-tops.orden-manual .drag-handle { opacity: 1; } }
.grid-tops + .drag-hint { margin-top: 1rem; }

/* Pantalla ancha: tarjetas acostadas, dos por fila. */
@media (min-width: 760px) {
    .grid-tops { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
    .top-card {
        grid-template-columns: 290px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "cartel nombre" "cartel podio" "cartel estado";
        min-height: 220px;
    }
    .top-card-nombre { padding: 1rem 1.2rem 0; }
    .top-card-primeros { margin: .65rem 1.2rem 0; }
    .top-card-estado { margin: .8rem 1.2rem 1rem; }
    .top-portada-foto { top: 38px; }
    .top-portada-foto[style*="--capa: 1"] { top: 50px; }
    .top-portada-foto[style*="--capa: 2"] { top: 44px; }
}
.top-card-primeros .top-card-puesto-nombre { display: block; }
/* Un top sin fotos todavía: una corona tenue en el tablero, no un hueco. */
.top-portada .top-portada-vacia {
    position: absolute;
    inset: 0 90px 0 0;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--hueso) 16%, transparent);
}
.top-portada-vacia .icon { width: 72px; height: 72px; }


/* ===========================================================================
   LA BARRA (0.20.3)
   Antes eran cinco (u ocho) botones iguales, pegados, y en el teléfono una
   fila de íconos que no se distinguían. Ahora:
   - En el PC, grupos que se distinguen, separados por un filete: lo social
     (Baremo Web) con su nombre y en ampolleta; las herramientas como
     íconos cuadrados con su nombre al pasar el mouse; y la cuenta y Salir
     aparte, a la derecha. La sección donde estás queda marcada.
   - En el teléfono, una barra abajo, tipo app: ícono y nombre, siempre a
     mano. Lo que se usa menos va en "Más".
   =========================================================================== */
header { flex-wrap: nowrap; }
.barra { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.barra-grupo { display: flex; align-items: center; gap: .4rem; }
.barra-grupo + .barra-grupo {
    padding-left: 1rem;
    border-left: 1px solid color-mix(in srgb, var(--hueso) 22%, transparent);
}

/* Herramientas: íconos cuadrados. El nombre aparece debajo al pasar el mouse
   o al llegar con el teclado (y siempre está para lectores de pantalla). */
header .barra-icono {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: color-mix(in srgb, #000 22%, var(--tablero));
    color: var(--hueso);
    border: 1px solid color-mix(in srgb, var(--hueso) 24%, transparent);
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
header .barra-icono .icon { width: 20px; height: 20px; }
header .barra-icono .theme-icon .icon { display: block; }
header .barra-icono:hover { background: var(--ampolleta); color: #241C10; border-color: var(--ampolleta); }
header .barra-icono.activo {
    background: color-mix(in srgb, var(--hueso) 14%, var(--tablero));
    border-color: color-mix(in srgb, var(--hueso) 45%, transparent);
    box-shadow: inset 0 -3px 0 var(--ampolleta);
}
header .barra-icono:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
header .barra-icono[data-nombre]::after {
    content: attr(data-nombre);
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translate(-50%, -3px);
    padding: .3rem .55rem;
    background: #1C150B;
    color: var(--hueso);
    border-radius: 2px;
    font-family: var(--fuente-texto);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-out, transform .15s ease-out;
    z-index: 70;
}
header .barra-icono:hover::after,
header .barra-icono:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { header .barra-icono[data-nombre]::after { transition: none; } }

/* Salir (y, en Baremo Web, tu cuenta): aparte y con su nombre. */
.barra-cuenta form { margin: 0; }
header .barra-salir {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 42px;
    padding: 0 .9rem;
    background: transparent;
    color: var(--hueso);
    border: 1px solid color-mix(in srgb, var(--hueso) 30%, transparent);
    border-radius: 2px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
header .barra-salir .icon { width: 18px; height: 18px; }
header .barra-salir:hover { background: #B3271A; border-color: #B3271A; color: #FFF6E4; }
header .barra-salir:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }

/* --- Abajo, en el teléfono ------------------------------------------------- */
.barra-abajo { display: none; }
@media (max-width: 720px) {
    header { justify-content: center; padding-bottom: 1.3rem; }
    header .barra { display: none; }
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    .barra-abajo {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 55;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        padding: 0 0 env(safe-area-inset-bottom);
        background: var(--tablero);
        background-image: linear-gradient(180deg, var(--tablero-alto), var(--tablero));
        border-top: 2px solid var(--ampolleta);
        box-shadow: 0 -8px 18px -12px rgb(0 0 0 / .6);
    }
    .barra-abajo-boton {
        position: relative;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: .2rem;
        min-height: 62px;
        padding: .35rem .1rem;
        background: none;
        border: 0;
        color: color-mix(in srgb, var(--hueso) 82%, transparent);
        text-decoration: none;
        font-family: var(--fuente-texto);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .barra-abajo-boton .icon { width: 22px; height: 22px; }
    .barra-abajo-boton.activo { color: var(--ampolleta); }
    .barra-abajo-boton.activo::before {
        content: "";
        position: absolute;
        top: 0; left: 22%; right: 22%;
        height: 3px;
        background: var(--ampolleta);
    }
    .barra-abajo-boton:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: -4px; }
    .barra-abajo-boton .barra-numero { position: absolute; top: 6px; left: calc(50% + 6px); }
}

/* "Más": filas grandes, fáciles de tocar. */
.panel-mas .panel-caja { max-width: 420px; }
.barra-mas { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.barra-mas-fila {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    min-height: 52px;
    padding: .6rem .9rem;
    background: var(--papel-2);
    border: 1px solid var(--regla);
    border-radius: 2px;
    color: var(--tinta);
    font: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.barra-mas-fila .icon { width: 22px; height: 22px; color: var(--verde); }
.barra-mas-fila:hover { border-color: var(--ampolleta); }
.barra-mas-fila:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.barra-mas-salir .icon { color: var(--rojo); }

/* --- Pegar foto (0.20.4) ---------------------------------------------------
   Un recuadro editable de verdad (con la selección permitida: si no, el
   iPhone no ofrece "Pegar"). El texto de adentro es un ::before, no
   contenido: así el recuadro queda vacío y listo para recibir la imagen. */
.pegar-foto { display: grid; gap: .3rem; margin-top: .45rem; max-width: 420px; }
.pegar-caja {
    min-height: 48px;
    padding: .7rem .9rem;
    border: 1px dashed var(--regla-fuerte); border-radius: 2px;
    background: var(--papel-2); color: var(--tinta);
    font-size: 16px;                      /* 16px: así el iPhone no hace zoom al tocar */
    line-height: 1.3;
    cursor: text;
    overflow: hidden;
    max-height: 120px;
    -webkit-user-select: text; user-select: text;
}
.pegar-caja:empty::before {
    content: "📋 Pegar foto";
    font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tinta-2);
    pointer-events: none;
}
.pegar-caja:focus { outline: none; border-style: solid; border-color: var(--ampolleta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ampolleta) 35%, transparent); }
.pegar-caja:focus:empty::before { content: "Toca otra vez y elige «Pegar»"; }
.pegar-caja img { max-height: 60px; }
.pegar-estado { font-size: .82rem; font-weight: 700; }
.pegar-estado:empty { display: none; }
.pegar-estado.pegar-listo { color: var(--verde); }
.pegar-ayuda { font-size: .75rem; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) {
    .pegar-ayuda { display: none; }
    .pegar-caja:focus:empty::before { content: "Ctrl+V para pegar"; }
}

/* --- Buscar dentro de la categoría (0.20.5) --- */
.buscar-items {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 .8rem;
    max-width: 30rem;
}
.buscar-items > .icon {
    position: absolute;
    left: .8rem;
    width: 16px;
    height: 16px;
    color: var(--tinta-2);
    pointer-events: none;
}
.buscar-items input[type=search] {
    width: 100%;
    font-size: 16px;          /* menos de 16px y el iPhone hace zoom al tocar */
    padding: .6rem 6.2rem .6rem 2.4rem;
}
.buscar-items-cuantos {
    position: absolute;
    right: .9rem;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-2);
    pointer-events: none;
}
.buscar-items-nada { margin-top: 1rem; }

/* --- Ranking por subcategoría (0.20.5) --- */
/* Una fila de botones bajo la barra del mosaico, con la letra de marquesina
   de los botones de "Dónde". En el teléfono se desliza de lado. */
.ranking-por {
    display: flex;
    align-items: center;
    gap: .4rem .8rem;
    margin: .2rem 0 1rem;
    min-width: 0;
}
.ranking-por-titulo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: none;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-2);
}
.ranking-por-titulo .icon { width: 13px; height: 13px; color: var(--oro); }
.ranking-por-chips {
    display: flex;
    gap: .35rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;                /* que el foco no se corte */
    scroll-snap-type: x proximity;
}
.ranking-por-chips::-webkit-scrollbar { display: none; }
.ranking-chip {
    flex: none;
    scroll-snap-align: start;
    padding: .38rem .8rem .3rem;
    background: transparent;
    color: var(--tinta);
    border: 1.5px solid var(--regla);
    border-radius: 0;
    font-family: var(--fuente-titulo);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.ranking-chip:hover { transform: translateY(-1px); border-color: var(--ampolleta); }
.ranking-chip[aria-pressed="true"] {
    background: var(--ampolleta);
    border-color: var(--ampolleta);
    color: #241C10;
}
.ranking-chip:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
@media (max-width: 560px) {
    .ranking-por { flex-direction: column; align-items: stretch; }
    .ranking-por-chips { margin: 0 -16px; padding: 2px 16px; }
}

/* El sello: la nota de la subcategoría elegida, abajo a la derecha de la
   portada (el puesto va abajo a la izquierda): el nombre chico arriba
   ("OPENINGS") y la nota grande abajo. */
.sello-sub {
    position: absolute;
    right: .45rem;
    bottom: .45rem;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: .12rem;
    min-width: 2.8rem;
    max-width: calc(100% - 4rem);
    padding: .3rem .5rem .32rem;
    border-radius: 4px;
    background: var(--ampolleta);
    color: #241C10;
    line-height: 1;
    box-shadow: 0 0 0 2px #241C10, 0 0 0 3.5px var(--ampolleta), 0 4px 10px -2px color-mix(in srgb, #000 55%, transparent);
    animation: sello-entra .28s cubic-bezier(.2, .9, .3, 1.3) both;
}
.sello-sub small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sello-sub b {
    font-family: var(--fuente-titulo);
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sello-sub-vacio {
    background: color-mix(in srgb, #241C10 78%, transparent);
    color: color-mix(in srgb, #EFE3C8 85%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, #EFE3C8 45%, transparent);
}
.grid-items.con-nota-sub .item-card:has(.sello-sub-vacio) .thumb img { filter: saturate(.35) brightness(.8); }
@keyframes sello-entra { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sello-sub { animation: none; } }
.grid-items.tam-chico .sello-sub { right: .3rem; bottom: .3rem; padding: .25rem .4rem; min-width: 2.2rem; }
.grid-items.tam-chico .sello-sub small { font-size: .52rem; }
.grid-items.tam-chico .sello-sub b { font-size: 1rem; }
.grid-items.tam-mini .sello-sub { right: .2rem; bottom: .2rem; padding: .2rem .3rem; min-width: 1.7rem; box-shadow: 0 0 0 1.5px #241C10; }
.grid-items.tam-mini .sello-sub small { display: none; }
.grid-items.tam-mini .sello-sub b { font-size: .8rem; }

/* --- Quitar opciones de "Dónde" (0.20.5) --- */
.donde-editar {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem .24rem;
    background: transparent;
    color: var(--tinta-2);
    border: 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
}
.donde-editar .icon { width: 13px; height: 13px; }
.donde-editar:hover,
.donde-editar[aria-pressed="true"] { color: var(--oro-texto); }
/* Editando: cada opción lleva su × y se ve que tocarla la quita. */
.donde-editando .donde-opcion {
    position: relative;
    padding-right: 1.7rem;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--rojo) 70%, transparent);
    background: transparent;
    color: var(--tinta);
    animation: donde-temblor .5s ease-in-out 1;
}
.donde-editando .donde-opcion::after {
    content: "×";
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-52%);
    font-family: system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rojo);
}
.donde-editando .donde-opcion:hover { background: color-mix(in srgb, var(--rojo) 14%, transparent); transform: none; }
@keyframes donde-temblor {
    25% { transform: rotate(-1.5deg); }
    75% { transform: rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) { .donde-editando .donde-opcion { animation: none; } }
.donde-deshacer { flex-basis: 100%; font-size: .85rem; color: var(--tinta-2); }
.donde-deshacer .enlace {
    padding: 0;
    background: none;
    border: 0;
    color: var(--oro-texto);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}