/* ==========================================================================
   RefSim — Simulador arbitral IFAB
   Hoja de estilos v3 · identidad "cabina VAR" · arquitectura multipágina
   --------------------------------------------------------------------------
   Compartida por todas las páginas: index.html (Hub), modo-practica.html,
   modo-examen.html y estadisticas.html.

   ÍNDICE
   01. Tokens (variables) + temas white-label
   02. Reset y base
   03. Layout general
   04. Scorebug (cabecera)
   05. Selector de idioma y acceso
   06. Modal de autenticación
   07. Publicidad
   08. Monitor VAR y campo
   09. Marcador de posición
   10. Panel de situación
   11. Botones de decisión
   12. Feedback
   13. Pie de página
   13b–13j. Utilidades, tema, breadcrumb, hero, resumen, tarjetas del hub,
            intro de examen, acta de examen, página de estadísticas
   14. Responsive
   15. Accesibilidad y preferencias
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
    /* --- Superficies --- */
    --noche: #050706;
    --noche-2: #080B0A;
    --panel: #0C110F;
    --panel-alto: #121A17;
    --panel-glass: rgba(14, 20, 18, 0.72);
    /* Bordes teñidos del acento: siguen al tema white-label activo */
    --linea: color-mix(in srgb, var(--verde-claro) 22%, transparent);
    --linea-fuerte: color-mix(in srgb, var(--verde-claro) 42%, transparent);
    --superficie: linear-gradient(165deg, rgba(16, 23, 20, 0.94), rgba(9, 13, 11, 0.96));
    --superficie-hero: linear-gradient(165deg, rgba(18, 26, 23, 0.96), rgba(7, 10, 9, 0.98));

    /* --- Acentos arbitrales --- */
    --amarilla: #F5C518;
    --amarilla-clara: #FFD95A;
    --amarilla-oscura: #B98F0A;
    --roja: #E63946;
    --roja-clara: #FF5C6B;
    --roja-oscura: #9B1F2B;

    /* --- Césped --- */
    --verde: #2E9B5E;
    --verde-claro: #3FD684;
    --verde-oscuro: #1B5E3C;
    --cesped-a: #2B8F58;
    --cesped-b: #24794A;

    /* --- Texto --- */
    --papel: #FFFFFF;
    --tenue: #8FA097;
    --tenue-oscuro: #788A81;

    /* --- Tipografía --- */
    --fuente-display: 'Barlow Condensed', 'Inter', sans-serif;
    --fuente-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --paso-0: 0.94rem;
    --paso-1: 1.05rem;
    --paso-2: 1.45rem;
    --paso-3: 2rem;

    /* --- Formas y profundidad --- */
    --radio-s: 8px;
    --radio-m: 16px;
    --radio-l: 20px;
    --radio-pill: 999px;
    --sombra: 0 24px 50px -24px rgba(0, 0, 0, 0.85);
    --sombra-suave: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
    --brillo-amarillo: 0 0 0 1px rgba(245, 197, 24, 0.35), 0 10px 28px -14px rgba(245, 197, 24, 0.55);
    --brillo-verde: 0 0 0 1px rgba(63, 214, 132, 0.45), 0 12px 30px -12px rgba(63, 214, 132, 0.7);

    /* --- Ritmo y movimiento --- */
    --gap: 18px;
    --ancho-max: 1120px;
    --rapido: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --medio: 260ms cubic-bezier(0.22, 0.8, 0.3, 1);
    --lento: 520ms cubic-bezier(0.22, 0.8, 0.3, 1);

    /* --- Lienzo de referencia del campo (coordenadas posX / posY) --- */
    --campo-ancho-ref: 760;
    --campo-alto-ref: 450;

    /* --- Identidad (logotipo) --- */
    --marca-logo-tam: 34px;
}

/* ==========================================================================
   01b. TEMAS — sistema white-label
   --------------------------------------------------------------------------
   Todo el archivo consume únicamente los tokens de arriba (--amarilla,
   --verde, --roja, --noche…), nunca valores sueltos. Para vestir RefSim con
   la identidad de otra federación no se toca ni una regla: se añade un
   bloque de tema aquí y se activa con `<html data-tema="...">`.

   Ejemplo incluido: "atlantico" (acento azul/naranja) demuestra el patrón.
   Para una federación real, basta con sustituir los seis valores de acento
   y, si aplica, el logotipo en el <svg> del header.
   ========================================================================== */
:root[data-tema="atlantico"] {
    --amarilla: #FFB238;
    --amarilla-clara: #FFC968;
    --amarilla-oscura: #C77E10;
    --verde: #2E7FD6;
    --verde-claro: #5FA8F5;
    --verde-oscuro: #1B4A80;
    --cesped-a: #2C6FB8;
    --cesped-b: #24599A;
}

/* Segundo ejemplo de tema white-label: acento granate/oro. */
:root[data-tema="granate"] {
    --amarilla: #D6A24B;
    --amarilla-clara: #E8C27A;
    --amarilla-oscura: #A8791F;
    --verde: #8C1D2B;
    --verde-claro: #B9394A;
    --verde-oscuro: #5C1220;
    --cesped-a: #7A1B2A;
    --cesped-b: #611521;
}

/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    min-height: 100dvh;
    font-family: var(--fuente-texto);
    font-size: var(--paso-0);
    line-height: 1.55;
    color: var(--papel);
    background-color: var(--noche);
    background-image:
        radial-gradient(1100px 620px at 50% -18%, rgba(63, 214, 132, 0.14), transparent 62%),
        radial-gradient(760px 420px at 100% 0%, rgba(245, 197, 24, 0.07), transparent 60%),
        linear-gradient(180deg, var(--noche-2), var(--noche) 55%);
    background-attachment: fixed;
    border-top: 3px solid var(--amarilla);
    -webkit-font-smoothing: antialiased;
}

/* Textura fina de "señal de emisión" sobre todo el fondo */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.022) 0 1px,
        transparent 1px 3px
    );
    opacity: 0.6;
}

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

button,
input {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--amarilla);
    outline-offset: 3px;
    border-radius: var(--radio-s);
}

::selection {
    background: rgba(245, 197, 24, 0.3);
}

/* ==========================================================================
   03. LAYOUT GENERAL
   ========================================================================== */
/* Cristal reutilizable: base de todos los paneles */
.scorebug,
.sidebar,
.topbar,
.monitor,
.panel,
.ad-slot,
.auth-card,
.glass-panel {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    box-shadow: var(--sombra);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* ==========================================================================
   03b. APP SHELL — sidebar (escritorio) + topbar + bottombar (móvil)
   --------------------------------------------------------------------------
   Sustituye la antigua cabecera "scorebug" de ancho completo por un panel
   de navegación lateral fijo en escritorio y una barra inferior de pestañas
   en móvil, siguiendo el patrón de dashboard de referencia.
   ========================================================================== */
.app-shell {
    position: relative;
    z-index: 1;
    max-width: 1360px;
    margin: 0 auto;
    padding: 22px 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* --- Sidebar (navegación principal, ≥960px) --- */
.sidebar {
    position: sticky;
    top: 22px;
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 14px 16px;
    max-height: calc(100dvh - 44px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 16px;
    margin-bottom: 8px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--linea);
}

.sidebar__mark {
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(63, 214, 132, 0.4));
}

.sidebar__brandname {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: 1.32rem;
    letter-spacing: 0.3px;
}

.sidebar__brandname b {
    color: var(--verde-claro);
    font-weight: 800;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar .navlink {
    padding: 11px 12px;
    border-radius: var(--radio-m);
    border-bottom: none;
    font-size: 0.87rem;
}

.sidebar .navlink:hover {
    color: var(--papel);
    background: rgba(255, 255, 255, 0.05);
}

.sidebar .navlink.is-activo {
    color: var(--noche);
    background: linear-gradient(180deg, var(--verde-claro), var(--verde));
    box-shadow: 0 10px 24px -14px rgba(63, 214, 132, 0.6);
}

.sidebar__ajustes {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--linea);
}

.sidebar__ajustes > summary {
    list-style: none;
    cursor: pointer;
}

.sidebar__ajustes > summary::-webkit-details-marker {
    display: none;
}

.sidebar__ajustes[open] > summary {
    color: var(--papel);
    background: rgba(255, 255, 255, 0.05);
}

.sidebar__ajustes-panel {
    padding: 12px 12px 2px;
    animation: subir var(--medio) both;
}

.sidebar__ajustes-titulo {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--tenue-oscuro);
    margin-bottom: 8px;
}

/* --- Columna de contenido principal --- */
.app-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* --- Topbar --- */
.topbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    overflow: hidden;
}

.topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--verde-claro) 18%, var(--amarilla) 82%, transparent);
    opacity: 0.85;
}

.topbar__brand {
    display: none;
    align-items: center;
    gap: 9px;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
}

.topbar__mark {
    filter: drop-shadow(0 0 8px rgba(63, 214, 132, 0.35));
}

.topbar__brandname {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: 1.25rem;
}

.topbar__spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar__seccion {
    font-family: var(--fuente-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.topbar__stats {
    flex-shrink: 0;
}

.topbar__reloj {
    flex-shrink: 0;
}

.topbar__controles {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* --- Bottombar (navegación principal, móvil) --- */
.bottombar {
    display: none;
}

/* ==========================================================================
   04. SCOREBUG (cabecera)
   ========================================================================== */
.scorebug {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 22px;
    padding: 15px 20px;
    overflow: hidden;
}

/* Filo superior amarillo del grafismo televisivo */
.scorebug::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--amarilla) 18%, var(--verde-claro) 82%, transparent);
    opacity: 0.85;
}

.scorebug__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.scorebug__mark {
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(245, 197, 24, 0.35));
}

.scorebug h1 {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.1rem);
    letter-spacing: 0.3px;
    line-height: 0.95;
}

.scorebug__tag {
    color: var(--tenue);
    font-size: 0.8rem;
    margin-top: 2px;
}

.scorebug__controles {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* --- Marcador de estadísticas --- */
.scorebug__stats {
    display: flex;
    gap: 8px;
}

.stat {
    position: relative;
    min-width: 76px;
    padding: 6px 12px;
    text-align: right;
    background: rgba(4, 7, 6, 0.55);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    overflow: hidden;
}

/* Franja de progreso de la precisión: se alimenta de --valor-precision (JS) */
.stat:nth-child(2)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--verde-claro);
    width: var(--valor-precision, 0%);
    transition: width var(--lento);
}

.stat dt {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--tenue-oscuro);
}

.stat dd {
    font-family: var(--fuente-display);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--verde-claro);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(63, 214, 132, 0.28);
}

.stat:nth-child(2) dd {
    color: var(--papel);
    text-shadow: none;
}

.stat:nth-child(3) dd {
    color: var(--amarilla-clara);
    text-shadow: 0 0 18px rgba(245, 197, 24, 0.25);
}

/* ==========================================================================
   04b. NAVEGACIÓN PRINCIPAL
   ========================================================================== */
.scorebug__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.navlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tenue);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--rapido), border-color var(--rapido);
}

.navlink svg { flex-shrink: 0; }

.navlink:hover {
    color: var(--papel);
}

.navlink.is-activo {
    color: var(--verde-claro);
    border-bottom-color: var(--verde-claro);
}

/* ==========================================================================
   05. SELECTOR DE IDIOMA Y ACCESO
   ========================================================================== */
.idioma {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: rgba(4, 7, 6, 0.6);
    border: 1px solid var(--linea);
    border-radius: var(--radio-pill);
}

.idioma button {
    padding: 4px 9px;
    font-size: 0.95rem;
    line-height: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background var(--rapido), transform var(--rapido), border-color var(--rapido);
}

.idioma button:hover {
    background: rgba(63, 214, 132, 0.12);
    transform: translateY(-1px);
}

.idioma button[aria-pressed="true"],
.idioma button.is-activo {
    background: rgba(63, 214, 132, 0.18);
    border-color: rgba(63, 214, 132, 0.45);
    color: var(--verde-claro);
}

.btn-acceso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--noche);
    background: linear-gradient(180deg, var(--verde-claro), var(--verde));
    border: none;
    border-radius: var(--radio-pill);
    cursor: pointer;
    box-shadow: var(--brillo-verde);
    transition: transform var(--rapido), box-shadow var(--rapido), filter var(--rapido);
}

.btn-acceso:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.btn-acceso:active {
    transform: translateY(0);
}

#auth-container-ui {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pill de cuenta autenticada, en la cabecera: solo avatar + nombre.
   El botón de cerrar sesión vive aparte, al pie de la página
   (ver .pie-sesion / .btn-cerrar-sesion-pie más abajo). */
.cuenta-pill {
    padding: 5px 12px;
    background: rgba(4, 7, 6, 0.6);
    border: 1px solid var(--linea);
    border-radius: var(--radio-pill);
}

.cuenta-pill__avatar {
    font-size: 0.1rem;
}

.cuenta-pill__nombre {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--papel);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Botón "Cerrar sesión" al pie de página --- */
.pie-sesion {
    display: flex;
    justify-content: center;
    padding: 4px 0 18px;
}

.pie-sesion:empty {
    display: none;
}

.btn-cerrar-sesion-pie {
    padding: 9px 20px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--papel);
    background: rgba(230, 57, 70, 0.18);
    border: 1px solid rgba(230, 57, 70, 0.45);
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background var(--rapido);
}

.btn-cerrar-sesion-pie:hover {
    background: rgba(230, 57, 70, 0.32);
}

.ajustes-card {
    max-width: 360px;
}

/* ==========================================================================
   06. MODAL DE AUTENTICACIÓN
   ========================================================================== */
#auth-modal,
#ajustes-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* display lo gobierna el JS (none / flex) */
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgba(3, 8, 6, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: velo var(--medio) both;
}

@keyframes velo {
    from { opacity: 0; }
    to { opacity: 1; }
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 390px;
    padding: 26px 24px 22px;
    border-radius: var(--radio-l);
    animation: subir var(--medio) both;
}

@keyframes subir {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.auth-card h3 {
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.auth-card__intro {
    color: var(--tenue);
    font-size: 0.86rem;
    margin-bottom: 18px;
}

.auth-card__cerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--tenue);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--rapido), background var(--rapido);
}

.auth-card__cerrar:hover {
    color: var(--papel);
    background: rgba(255, 255, 255, 0.08);
}

.campo-texto {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 14px;
    color: var(--papel);
    background: rgba(4, 7, 6, 0.7);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    transition: border-color var(--rapido), box-shadow var(--rapido);
}

.campo-texto::placeholder {
    color: var(--tenue-oscuro);
}

.campo-texto:focus {
    outline: none;
    border-color: rgba(245, 197, 24, 0.55);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.14);
}

.auth-card__acciones {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.btn-auth {
    text-decoration: none;
    flex: 1;
    padding: 11px 12px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--noche);
    border: none;
    border-radius: var(--radio-s);
    cursor: pointer;
    transition: transform var(--rapido), filter var(--rapido);
}

.btn-auth--primario {
    background: linear-gradient(180deg, var(--verde-claro), var(--verde));
}

.btn-auth--secundario {
    background: linear-gradient(180deg, var(--amarilla-clara), var(--amarilla));
}

.btn-auth:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

#auth-status {
    margin-top: 14px;
    font-size: 0.8rem;
    text-align: center;
    color: var(--tenue);
    min-height: 1.2em;
}

/* --- Botón "Continuar con Google" y separador --- */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--papel);
    background: rgba(237, 237, 230, 0.06);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-s);
    cursor: pointer;
    transition: transform var(--rapido), background var(--rapido);
}

.btn-google:hover {
    background: rgba(237, 237, 230, 0.12);
    transform: translateY(-1px);
}

.btn-google svg {
    flex-shrink: 0;
}

.auth-divisor {
    position: relative;
    text-align: center;
    margin-bottom: 16px;
    color: var(--tenue-oscuro);
    font-size: 0.74rem;
}

.auth-divisor::before,
.auth-divisor::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 68px);
    height: 1px;
    background: var(--linea);
}

.auth-divisor::before { left: 0; }
.auth-divisor::after { right: 0; }

/* --- Enlace "¿Olvidaste tu contraseña?" --- */
.auth-link-olvido {
    display: block;
    width: 100%;
    margin: -4px 0 14px;
    padding: 0;
    background: none;
    border: none;
    color: var(--tenue);
    font-size: 0.78rem;
    text-align: right;
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--rapido);
}

.auth-link-olvido:hover {
    color: var(--amarilla-clara);
}

/* --- Vistas del modal: selector / iniciar sesión / registrarse --- */
.auth-vista {
    display: none;
}

#auth-modal[data-modo="selector"] .auth-vista[data-vista="selector"],
#auth-modal[data-modo="login"] .auth-vista[data-vista="login"],
#auth-modal[data-modo="registro"] .auth-vista[data-vista="registro"] {
    display: block;
    animation: subir var(--rapido) both;
}

.auth-opciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.btn-auth--bloque {
    display: block;
    width: 100%;
    padding: 13px 14px;
    font-size: 0.95rem;
    text-align: center;
}

.auth-vista .btn-auth--bloque {
    margin-top: 2px;
}

.auth-volver {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    background: none;
    border: none;
    color: var(--tenue);
    font-size: 0.82rem;
    text-align: center;
    cursor: pointer;
    transition: color var(--rapido);
}

.auth-volver:hover {
    color: var(--papel);
}

.auth-card__nota {
    color: var(--tenue-oscuro);
    font-size: 0.75rem;
    margin-top: 10px;
}

/* En móvil, la tarjeta de acceso ocupa el ancho disponible y los campos
   son lo bastante altos para tocarlos con el dedo. */
@media (max-width: 480px) {
    #auth-modal {
        padding: 12px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .auth-card {
        max-width: 100%;
        margin: 12px 0;
        padding: 22px 18px 18px;
    }

    .campo-texto {
        font-size: 16px; /* evita el zoom automático de iOS al enfocar */
        padding: 13px 14px;
    }

    .btn-auth--bloque,
    .btn-google {
        padding: 14px 12px;
    }
}

/* ==========================================================================
   07. PUBLICIDAD
   ========================================================================== */
.ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 12px;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Mientras AdSense no rellene la unidad, el hueco se reduce a una franja
   discreta en vez de una caja grande vacía. */
.ad-slot:not(:has(ins[data-ad-status="filled"])) {
    padding-block: 6px;
}

.ad-slot:not(:has(ins[data-ad-status="filled"])) .ad-slot__unit {
    min-height: 0;
}

.ad-slot__label {
    font-size: 0.66rem;
    letter-spacing: 0.4px;
    color: var(--tenue-oscuro);
}

.ad-slot__unit {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 90px;
}

/* Sin ancho explícito, el <ins> de AdSense colapsa a 0px dentro del flex y
   Google responde "No slot size for availableWidth=0". */
.ad-slot__unit > ins.adsbygoogle {
    width: 100%;
}

.ad-slot--rectangle:has(ins[data-ad-status="filled"]) .ad-slot__unit {
    min-height: 250px;
}

/* Agrupa dos .ad-slot (p. ej. los dos espacios de una misma página cuando
   van juntos): en pantallas anchas se colocan uno junto a otro, en móvil
   se apilan. No cambia el aspecto de cada .ad-slot por separado. */
.ad-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.ad-group .ad-slot {
    flex: 1 1 260px;
}

/* Modo Carrera: durante el partido (campo, descripción, respuestas) no se
   muestra publicidad, igual que ya se oculta el pie de página — así la
   pantalla de juego no cambia respecto a como funciona ahora. Fuera del
   partido (inicio, dashboard, resúmenes) la publicidad se ve con
   normalidad. */
body[data-pagina="carrera"] .app-content:has(#vista-carrera-partido:not(.oculto)) .ad-slot,
body[data-pagina="carrera"] .app-content:has(#vista-carrera-partido:not(.oculto)) .ad-group {
    display: none;
}

/* ==========================================================================
   07b. TARJETAS DE MODO
   ========================================================================== */
.modecards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.modecard {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    text-align: left;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    cursor: pointer;
    transition: border-color var(--rapido), transform var(--rapido), background var(--rapido);
}

.modecard:hover {
    transform: translateY(-1px);
    border-color: var(--linea-fuerte);
}

.modecard.is-activo {
    border-color: rgba(46, 155, 94, 0.5);
    background: linear-gradient(165deg, rgba(46, 155, 94, 0.22), rgba(12, 24, 20, 0.94));
    box-shadow: 0 0 0 1px rgba(46, 155, 94, 0.35);
}

.modecard__icono {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radio-s);
    background: rgba(46, 155, 94, 0.16);
    color: var(--verde-claro);
}

.modecard__icono--ambar { background: rgba(245, 197, 24, 0.16); color: var(--amarilla); }
.modecard__icono--tenue { background: rgba(147, 167, 158, 0.14); color: var(--tenue); }

.modecard__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.modecard__texto strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--papel);
}

.modecard__texto small {
    font-size: 0.76rem;
    color: var(--tenue);
}

.modecard__reloj {
    margin-left: auto;
    display: none;
    align-items: center;
    font-family: var(--fuente-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--amarilla);
    flex-shrink: 0;
}

/* ==========================================================================
   08. MONITOR VAR Y CAMPO
   ========================================================================== */
.review {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
}

.monitor {
    position: relative;
    overflow: hidden;
}

/* Corchetes de encuadre: el gesto "cámara de revisión" del monitor VAR.
   Es el único elemento decorativo con movimiento propio de la página. */
.hud-esquina {
    position: absolute;
    z-index: 6;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity var(--medio), width var(--medio), height var(--medio);
}

.hud-esquina--tl { top: 10px;    left: 10px;  border-top: 2px solid var(--amarilla);    border-left: 2px solid var(--amarilla); }
.hud-esquina--tr { top: 10px;    right: 10px; border-top: 2px solid var(--amarilla);    border-right: 2px solid var(--amarilla); }
.hud-esquina--bl { bottom: 10px; left: 10px;  border-bottom: 2px solid var(--amarilla); border-left: 2px solid var(--amarilla); }
.hud-esquina--br { bottom: 10px; right: 10px; border-bottom: 2px solid var(--amarilla); border-right: 2px solid var(--amarilla); }

.monitor:hover .hud-esquina {
    width: 28px;
    height: 28px;
    opacity: 1;
}

.monitor__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    font-size: 0.76rem;
    letter-spacing: 0.3px;
    color: var(--tenue);
    background: rgba(4, 7, 6, 0.55);
    border-bottom: 1px solid var(--linea);
    flex-wrap: wrap;
}

.monitor__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.monitor__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--roja);
    box-shadow: 0 0 10px var(--roja);
    animation: parpadeo 2.2s ease-in-out infinite;
}

.monitor__nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.monitor__pill {
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--amarilla);
    background: rgba(245, 197, 24, 0.12);
    border: 1px solid rgba(245, 197, 24, 0.35);
    border-radius: var(--radio-pill);
    white-space: nowrap;
}

.monitor__flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--tenue);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--linea);
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--rapido), border-color var(--rapido);
}

.monitor__flecha:hover:not(:disabled) {
    color: var(--papel);
    border-color: var(--linea-fuerte);
}

.monitor__flecha:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@keyframes parpadeo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* --- El campo --- */
.pitch-stage {
    position: relative;
    width: 100%;
}

.pitch {
    position: relative;
    width: 100%;
    aspect-ratio: var(--campo-ancho-ref) / var(--campo-alto-ref);
    overflow: hidden;
    background-color: var(--cesped-b);
    background-image:
        repeating-linear-gradient(
            90deg,
            var(--cesped-a) 0 6.25%,
            var(--cesped-b) 6.25% 12.5%
        );
}

/* Foco de estadio + viñeta: da volumen al césped plano */
.pitch::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(80% 120% at 50% -20%, rgba(255, 255, 255, 0.2), transparent 55%),
        radial-gradient(120% 120% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 60%);
    mix-blend-mode: soft-light;
}

/* Capa de emisión: líneas de barrido muy sutiles */
.pitch::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.12) 0 1px,
        transparent 1px 4px
    );
    opacity: 0.45;
}

.pitch__line,
.pitch__circulo {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Perímetro del terreno */
.pitch__line--borde {
    inset: 4%;
}

.pitch__centro {
    top: 4%;
    bottom: 4%;
    left: 50%;
    width: 0;
    transform: translateX(-1px);
    border-width: 0 0 0 2px;
    box-shadow: none;
}

.pitch__circulo {
    top: 50%;
    left: 50%;
    width: 20%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

/* Punto central */
.pitch__circulo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.pitch__area-izq,
.pitch__area-der {
    top: 20%;
    bottom: 20%;
    width: 15%;
}

.pitch__area-izq { left: 4%; border-left: none; }
.pitch__area-der { right: 4%; border-right: none; }

.pitch__area-chica-izq,
.pitch__area-chica-der {
    top: 34%;
    bottom: 34%;
    width: 6.5%;
}

.pitch__area-chica-izq { left: 4%; border-left: none; }
.pitch__area-chica-der { right: 4%; border-right: none; }

/* Puntos de penalti */
.pitch__area-izq::after,
.pitch__area-der::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    transform: translateY(-50%);
}

.pitch__area-izq::after { right: 14%; }
.pitch__area-der::after { left: 14%; }

/* ==========================================================================
   08b. BARRA DE REPRODUCCIÓN Y METADATOS
   ========================================================================== */
.playbar {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: rgba(4, 7, 6, 0.72);
    border-top: 1px solid var(--linea);
}

.playbar__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--noche);
    background: var(--papel);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.playbar__tiempo {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--tenue);
}

.playbar__barra {
    position: relative;
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--radio-pill);
    overflow: visible;
}

.playbar__progreso {
    position: absolute;
    inset: 0 auto 0 0;
    width: 52%;
    background: var(--verde-claro);
    border-radius: var(--radio-pill);
}

.playbar__thumb {
    position: absolute;
    top: 50%;
    left: 52%;
    width: 10px;
    height: 10px;
    background: var(--papel);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

.playbar__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 22px;
    padding: 0 7px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--tenue);
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.playbar__chip--hd {
    cursor: default;
    color: var(--papel);
}

.monitor__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--linea);
}

.meta__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    background: rgba(6, 9, 8, 0.92);
}

.meta__icono {
    flex-shrink: 0;
    font-size: 1rem;
    opacity: 0.9;
}

.meta__item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.meta__label {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--tenue-oscuro);
}

.meta__valor {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--papel);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Práctica y Examen ya no muestran el bloque "Minuto" (dato de tiempo no
   necesario para resolver la jugada), así que su monitor__meta pasa a 2
   columnas en vez de 3. Acotado a estas dos páginas mediante data-pagina
   para no afectar a Carrera, que conserva su barra de reproducción y su
   metadato de minuto tal cual estaban. Solo aplica por encima del punto de
   corte móvil (680px), donde monitor__meta ya se colapsa a 1 columna. */
@media (min-width: 681px) {
    body[data-pagina="practica"] .monitor__meta,
    body[data-pagina="examen"] .monitor__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   09. MARCADOR DE POSICIÓN
   --------------------------------------------------------------------------
   El JS posiciona con left/top. Con el parche de coordenadas (%) el punto
   cae siempre donde toca, en cualquier tamaño de pantalla.
   ========================================================================== */
.marcador-accion {
    position: absolute;
    z-index: 5;
    width: 18px;
    height: 18px;
    background: var(--roja);
    border: 3px solid var(--papel);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5);
    animation: aterrizaje var(--lento) both, foco 2s 0.4s infinite;
}

/* Retícula de seguimiento VAR alrededor del punto */
.marcador-accion::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    animation: giro 9s linear infinite;
}

@keyframes aterrizaje {
    from { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes foco {
    0%   { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.55), 0 4px 12px rgba(0, 0, 0, 0.5); }
    70%  { box-shadow: 0 0 0 18px rgba(230, 57, 70, 0), 0 4px 12px rgba(0, 0, 0, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0), 0 4px 12px rgba(0, 0, 0, 0.5); }
}

@keyframes giro {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ==========================================================================
   10. PANEL DE SITUACIÓN
   ========================================================================== */
.panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.situation__id {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 11px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--verde-claro);
    background: rgba(46, 155, 94, 0.14);
    border: 1px solid rgba(46, 155, 94, 0.4);
    border-radius: var(--radio-pill);
}

.panel h2 {
    font-family: var(--fuente-display);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 8px;
    text-wrap: balance;
}

.panel p {
    color: var(--tenue);
    font-size: var(--paso-0);
    line-height: 1.62;
    max-width: 62ch;
}

/* Entrada de cada jugada nueva: un único gesto, sin ruido */
.situation {
    animation: jugada-entra var(--medio) both;
}

@keyframes jugada-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   11. BOTONES DE DECISIÓN
   ========================================================================== */
.decisions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.decision {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 30px 13px 16px;
    font-family: var(--fuente-texto);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
    color: var(--papel);
    background: linear-gradient(180deg, rgba(20, 28, 25, 0.9), rgba(10, 14, 12, 0.95));
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    cursor: pointer;
    overflow: hidden;
    transition:
        transform var(--rapido),
        border-color var(--rapido),
        box-shadow var(--rapido),
        background var(--rapido),
        opacity var(--medio);
}

/* Canto de color: identifica la familia de decisión de un vistazo */
.decision::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--canto, var(--tenue-oscuro));
    opacity: 0.85;
    transition: width var(--rapido), opacity var(--rapido);
}

.decision:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--linea-fuerte);
    box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.9), 0 0 0 1px color-mix(in srgb, var(--canto, var(--tenue-oscuro)) 45%, transparent);
}

/* Chip de atajo de teclado: refuerza la lectura "consola de mando" del panel */
.decision__tecla {
    position: absolute;
    top: 10px;
    right: 10px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--tenue-oscuro);
    background: rgba(4, 7, 6, 0.6);
    border: 1px solid var(--linea);
    border-radius: 5px;
    transition: color var(--rapido), border-color var(--rapido);
}

.decision__texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.decision__titulo {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--papel);
}

.decision__desc {
    font-weight: 500;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--tenue);
}

.decision:hover:not(:disabled) .decision__tecla {
    color: var(--canto, var(--papel));
    border-color: color-mix(in srgb, var(--canto, var(--tenue-oscuro)) 50%, transparent);
}

.decision:hover:not(:disabled)::before {
    width: 5px;
    opacity: 1;
}

.decision:active:not(:disabled) {
    transform: translateY(0);
}

.decision:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Familias de decisión */
.decision--clean         { --canto: var(--verde); }
.decision--foul          { --canto: var(--tenue); }
.decision--yellow        { --canto: var(--amarilla); }
.decision--red           { --canto: var(--roja); }
.decision--penalty       { --canto: var(--papel); }
.decision--penalty-yellow{ --canto: var(--amarilla-oscura); }
.decision--penalty-red   { --canto: var(--roja-oscura); }
.decision--indirect      { --canto: #7C83FD; }
.decision--goal          { --canto: var(--verde-claro); }
.decision--offside       { --canto: #4EA8DE; }

.decision--clean:hover:not(:disabled)  { border-color: rgba(46, 155, 94, 0.5); }
.decision--yellow:hover:not(:disabled) { border-color: rgba(245, 197, 24, 0.5); }
.decision--red:hover:not(:disabled)    { border-color: rgba(230, 57, 70, 0.5); }
.decision--penalty-red:hover:not(:disabled) { border-color: rgba(230, 57, 70, 0.5); }

.decision__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
    font-size: 1rem;
}

.decision--clean .decision__glyph { color: var(--verde-claro); }
.decision--foul .decision__glyph  { color: var(--tenue); }

.decision__card {
    display: inline-block;
    width: 13px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    transition: transform var(--rapido);
}

.decision--yellow .decision__card { background: var(--amarilla); }
.decision--red .decision__card    { background: var(--roja); }

.decision:hover:not(:disabled) .decision__card {
    transform: rotate(-9deg) translateY(-1px);
}

/* Estados opcionales tras responder (ver parche JS del README) */
.decision.es-correcta {
    opacity: 1;
    border-color: var(--verde-claro);
    background: linear-gradient(180deg, rgba(46, 155, 94, 0.32), rgba(10, 14, 12, 0.95));
    box-shadow: 0 0 0 1px rgba(63, 214, 132, 0.4);
}

.decision.es-elegida-fallo {
    opacity: 1;
    border-color: var(--roja);
    background: linear-gradient(180deg, rgba(230, 57, 70, 0.28), rgba(10, 14, 12, 0.95));
}

/* ==========================================================================
   12. FEEDBACK
   ========================================================================== */
.feedback {
    position: relative;
    padding: 16px 16px 16px 18px;
    background: rgba(4, 7, 6, 0.55);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--tenue-oscuro);
    border-radius: var(--radio-s);
    animation: veredicto var(--medio) both;
}

@keyframes veredicto {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.feedback.oculto {
    display: none;
}

.feedback.acierto {
    border-left-color: var(--verde-claro);
    background:
        linear-gradient(90deg, rgba(46, 155, 94, 0.16), transparent 55%),
        rgba(4, 7, 6, 0.55);
}

.feedback.fallo {
    border-left-color: var(--roja);
    background:
        linear-gradient(90deg, rgba(230, 57, 70, 0.14), transparent 55%),
        rgba(4, 7, 6, 0.55);
}

.feedback h3 {
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;
}

.feedback.acierto h3 { color: var(--verde-claro); }
.feedback.fallo h3   { color: var(--roja-clara); }

.feedback p {
    color: var(--tenue);
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.btn-siguiente {
    padding: 11px 22px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--noche);
    background: linear-gradient(180deg, var(--verde-claro), var(--verde));
    border: none;
    border-radius: var(--radio-s);
    cursor: pointer;
    transition: transform var(--rapido), filter var(--rapido), box-shadow var(--rapido);
}

.btn-siguiente:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 12px 26px -16px rgba(63, 214, 132, 0.9);
}

.btn-siguiente:active {
    transform: translateY(0);
}

/* ==========================================================================
   12b. TICKER INFERIOR
   ========================================================================== */
.ticker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    flex-wrap: wrap;
}

.ticker__msg {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.82rem;
    color: var(--tenue);
}

.ticker__msg svg { color: var(--verde-claro); flex-shrink: 0; }

.ticker__marca {
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--verde-claro);
    background: rgba(46, 155, 94, 0.14);
    border: 1px solid rgba(46, 155, 94, 0.4);
    border-radius: var(--radio-pill);
    white-space: nowrap;
}

/* ==========================================================================
   13. PIE DE PÁGINA
   ========================================================================== */
.footer-legal {
    padding: 26px 10px 34px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--tenue-oscuro);
}

.footer-legal__marca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    color: var(--tenue);
}

.footer-legal__logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.92;
}

.footer-links {
    margin-top: 6px;
}

.footer-links a {
    color: var(--tenue);
    text-decoration: none;
    transition: color var(--rapido);
}

.footer-links a:hover {
    color: var(--amarilla);
    text-decoration: underline;
}

.footer-links span {
    margin: 0 8px;
}

/* ==========================================================================
   13b. UTILIDADES
   ========================================================================== */
.oculto {
    display: none !important;
}

/* ==========================================================================
   13c. SELECTOR DE TEMA (white-label)
   ========================================================================== */
.tema-selector {
    display: flex;
    gap: 6px;
    padding: 4px 6px;
    background: rgba(4, 7, 6, 0.6);
    border: 1px solid var(--linea);
    border-radius: var(--radio-pill);
}

.tema-dot {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--rapido), border-color var(--rapido);
}

.tema-dot:hover {
    transform: translateY(-1px) scale(1.06);
}

.tema-dot.is-activo {
    border-color: var(--papel);
}

.tema-dot--clasico   { background: linear-gradient(135deg, #F5C518, #2E9B5E); }
.tema-dot--atlantico { background: linear-gradient(135deg, #FFB238, #2E7FD6); }
.tema-dot--granate   { background: linear-gradient(135deg, #D6A24B, #8C1D2B); }

/* ==========================================================================
   13d. BREADCRUMB Y CABECERA DE PÁGINA INTERIOR
   ========================================================================== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--tenue);
}

.breadcrumb a {
    color: var(--tenue);
    text-decoration: none;
    transition: color var(--rapido);
}

.breadcrumb a:hover {
    color: var(--amarilla);
}

.breadcrumb__actual {
    color: var(--papel);
    font-weight: 600;
}

.page-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 2px;
}

.page-heading h1,
.page-heading h2 {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.9rem);
}

.page-heading p {
    color: var(--tenue);
    font-size: 0.9rem;
    max-width: 62ch;
}

/* ==========================================================================
   13e. HERO DEL MENÚ PRINCIPAL
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 44px 32px;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(63, 214, 132, 0.20), transparent 55%),
        var(--superficie-hero);
    border: 1px solid var(--linea);
    border-radius: var(--radio-l);
    box-shadow: var(--sombra);
}

.hero {
    container-type: inline-size;
}

/* El disco del logo solo aparece si el titular tiene sitio de sobra */
@container (max-width: 620px) {
    .hero__grafico {
        display: none;
    }
}

.hero__interior {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.hero__texto {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    flex: 1 1 0;
}

.hero__grafico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(63, 214, 132, 0.22), rgba(63, 214, 132, 0.02) 70%);
    border: 1px solid rgba(63, 214, 132, 0.22);
}

.hero__grafico img {
    width: 88px;
    height: 88px;
    opacity: 0.92;
    filter: drop-shadow(0 0 22px rgba(63, 214, 132, 0.45));
}

.hero__kicker {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 13px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--verde-claro);
    background: rgba(63, 214, 132, 0.14);
    border: 1px solid rgba(63, 214, 132, 0.4);
    border-radius: var(--radio-pill);
    text-transform: uppercase;
}

.hero h1 {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
    line-height: 1.05;
    max-width: 22ch;
}

.hero p {
    color: var(--tenue);
    font-size: 1rem;
    max-width: 56ch;
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.btn-hero-primario,
.btn-hero-secundario {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: var(--radio-pill);
    text-decoration: none;
    transition: transform var(--rapido), filter var(--rapido), box-shadow var(--rapido);
}

.btn-hero-primario {
    color: var(--noche);
    background: linear-gradient(180deg, var(--verde-claro), var(--verde));
    box-shadow: var(--brillo-verde);
}

.btn-hero-secundario {
    color: var(--papel);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--linea-fuerte);
}

.btn-hero-primario:hover,
.btn-hero-secundario:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* ==========================================================================
   13f. RESUMEN DE PROGRESO (mini panel de estadísticas)
   ========================================================================== */
.resumen-progreso {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.resumen-progreso .stat-card {
    padding: 16px 18px;
    text-align: center;
}

.resumen-progreso .stat-card dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--tenue-oscuro);
    margin-bottom: 6px;
}

.resumen-progreso .stat-card dd {
    font-family: var(--fuente-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--verde-claro);
}

.resumen-progreso .stat-card:nth-child(2) dd {
    color: var(--papel);
}

.resumen-progreso .stat-card:nth-child(3) dd {
    color: var(--amarilla-clara);
}

.aviso-invitado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    font-size: 0.85rem;
    color: var(--tenue);
    background: rgba(63, 214, 132, 0.08);
    border: 1px solid rgba(63, 214, 132, 0.3);
    border-radius: var(--radio-m);
}

.aviso-invitado a,
.aviso-invitado button {
    flex-shrink: 0;
}

/* ==========================================================================
   13f2. FILA SUPERIOR DEL HUB — hero + panel de progreso lateral
   ========================================================================== */
.dashboard-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: stretch;
    gap: var(--gap);
}

.dashboard-top .hero {
    min-width: 0;
}

.progreso-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 20px;
}

.progreso-panel h2,
.progreso-panel h3 {
    font-family: var(--fuente-display);
    font-size: 1.1rem;
    font-weight: 700;
}

/* Anillo de precisión: se alimenta de --valor (0–100) desde hub.js */
.progreso-anillo {
    position: relative;
    align-self: center;
    width: 148px;
    aspect-ratio: 1;
}

.progreso-anillo svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progreso-anillo circle {
    fill: none;
    stroke-width: 10;
}

.progreso-anillo__pista {
    stroke: rgba(255, 255, 255, 0.07);
}

.progreso-anillo__valor {
    stroke: var(--verde-claro);
    stroke-linecap: round;
    stroke-dasharray: var(--valor) 100;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--verde-claro) 55%, transparent));
    transition: stroke-dasharray var(--lento);
}

.progreso-anillo[style*="--valor: 0"] .progreso-anillo__valor {
    stroke-linecap: butt;
}

.progreso-anillo__centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.progreso-anillo__centro strong {
    font-family: var(--fuente-display);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.progreso-anillo__centro span {
    max-width: 10ch;
    margin-top: 4px;
    font-size: 0.66rem;
    line-height: 1.2;
    color: var(--tenue);
}

.progreso-panel__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.progreso-panel__fila {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 10px 4px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
}

.progreso-panel__fila dt {
    font-size: 0.64rem;
    line-height: 1.2;
    color: var(--tenue);
}

.progreso-panel__fila dd {
    font-family: var(--fuente-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--verde-claro);
    font-variant-numeric: tabular-nums;
}

.progreso-panel__fila:nth-child(2) dd,
.progreso-panel__fila:nth-child(3) dd {
    color: var(--amarilla-clara);
}

.aviso-invitado--panel {
    flex-direction: column;
    align-items: flex-start;
    margin-top: auto;
}

.aviso-invitado--panel button {
    align-self: stretch;
    justify-content: center;
}

/* ==========================================================================
   13g. TARJETAS DE MODO — versión enlace grande (hub)
   ========================================================================== */
.modecards--hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--gap);
}

/* --- Portada: estructura por secciones --- */
.inicio {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1.6);
}

.inicio__seccion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.seccion-titulo {
    font-family: var(--fuente-display);
    font-size: var(--paso-2);
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* --- Portada: "Cómo funciona" (usuario sin jugadas) --- */
.pasos-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 22px;
}

.pasos-panel h2 {
    font-family: var(--fuente-display);
    font-size: 1.2rem;
    font-weight: 700;
}

.pasos-panel__lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    counter-reset: paso;
}

.pasos-panel__lista li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 44px;
    counter-increment: paso;
}

.pasos-panel__lista li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-family: var(--fuente-display);
    font-weight: 800;
    color: var(--verde-claro);
    background: color-mix(in srgb, var(--verde-claro) 12%, transparent);
    border: 1px solid var(--linea-fuerte);
    border-radius: 50%;
}

.pasos-panel__lista strong {
    font-size: 0.95rem;
}

.pasos-panel__lista span {
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--tenue);
}

/* --- Portada: bloque para escuelas --- */
.escuelas {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 30px 28px;
}

.escuelas__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.escuelas__texto h2 {
    font-family: var(--fuente-display);
    font-size: var(--paso-2);
    font-weight: 700;
    line-height: 1.1;
}

.escuelas__texto p {
    max-width: 52ch;
    color: var(--tenue);
    font-size: 0.95rem;
}

.escuelas__puntos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}

.escuelas__puntos li {
    position: relative;
    padding-left: 26px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.escuelas__puntos li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--verde-claro);
    border-bottom: 2px solid var(--verde-claro);
    transform: rotate(-45deg);
}

.modecard-link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px;
    text-align: left;
    text-decoration: none;
    color: var(--papel);
    overflow: hidden;
    transition: transform var(--medio), border-color var(--rapido), box-shadow var(--medio);
}

.modecard-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(245, 197, 24, 0.10), transparent 60%);
    opacity: 0;
    transition: opacity var(--medio);
}

.modecard-link:hover {
    transform: translateY(-3px);
    border-color: var(--linea-fuerte);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.modecard-link:hover::after {
    opacity: 1;
}

.modecard-link__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radio-m);
    background: rgba(245, 197, 24, 0.14);
    color: var(--amarilla);
}

.modecard-link__icono--verde  { background: rgba(46, 155, 94, 0.16); color: var(--verde-claro); }
.modecard-link__icono--ambar  { background: rgba(245, 197, 24, 0.16); color: var(--amarilla); }
.modecard-link__icono--tenue  { background: rgba(147, 167, 158, 0.14); color: var(--tenue); }

.modecard-link strong {
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.modecard-link p {
    color: var(--tenue);
    font-size: 0.86rem;
    line-height: 1.4;
}

.modecard-link__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--verde-claro);
}

/* ==========================================================================
   13h. INTRODUCCIÓN DE EXAMEN
   ========================================================================== */
.examen-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px 28px;
}

.examen-intro ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 2px;
    list-style: none;
}

.examen-intro li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--tenue);
    font-size: 0.92rem;
}

.examen-intro li::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--amarilla);
}

/* ==========================================================================
   13i. ACTA DE EXAMEN Y HISTORIAL (compartido examen / estadísticas)
   ========================================================================== */
.acta {
    padding: 22px;
    background: rgba(6, 9, 8, 0.95);
    border: 1px solid var(--amarilla);
    border-radius: var(--radio-m);
}

.acta__titulo {
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    color: var(--amarilla);
    margin-bottom: 6px;
}

.acta__linea {
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.acta__linea--tenue {
    color: var(--tenue);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.acta__subtitulo {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--amarilla-clara);
}

.acta__lista {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.acta__item {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--tenue-oscuro);
    border-radius: 4px;
    font-size: 0.84rem;
}

.acta__item--ok   { border-left-color: var(--verde-claro); }
.acta__item--fail { border-left-color: var(--roja); }

.acta__item-titulo { margin-bottom: 3px; }

.acta__item-detalle {
    color: var(--tenue);
    font-size: 0.8rem;
}

.acta__item-explicacion {
    color: var(--tenue-oscuro);
    font-size: 0.78rem;
    margin-top: 3px;
}

.acta__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.acta__acciones > * {
    flex: 1;
    min-width: 180px;
    text-align: center;
}

.acta__link-historial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ==========================================================================
   13j. PÁGINA "MIS PARTIDOS"
   ========================================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.stats-grid .stat-card {
    padding: 16px 14px;
    text-align: center;
}

.stats-grid .stat-card dt {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--tenue-oscuro);
    margin-bottom: 6px;
}

.stats-grid .stat-card dd {
    font-family: var(--fuente-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--verde-claro);
}

.stats-grid .stat-card:nth-child(2) dd {
    color: var(--papel);
}

.stats-grid .stat-card:nth-child(3) dd {
    color: var(--amarilla-clara);
}

.login-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
}

.login-cta__texto h3 {
    font-family: var(--fuente-display);
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.login-cta__texto p {
    color: var(--tenue);
    font-size: 0.85rem;
    max-width: 52ch;
}

.hist-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hist-item {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--tenue-oscuro);
    border-radius: var(--radio-s);
}

.hist-item--ok   { border-left-color: var(--verde-claro); }
.hist-item--fail { border-left-color: var(--roja); }

.hist-item__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 10px;
}

.hist-item__nota {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--verde-claro);
}

.hist-item__meta {
    color: var(--tenue);
    font-size: 0.78rem;
}

.hist-vacio {
    color: var(--tenue);
    text-align: center;
    font-size: 0.9rem;
    padding: 26px 10px;
}

/* ==========================================================================
   13k. PÁGINA "LIGAS / CLASIFICACIÓN"
   ========================================================================== */
.ranking-tabla {
    display: flex;
    flex-direction: column;
}

.ranking-fila {
    display: grid;
    grid-template-columns: 44px 1fr 90px 100px 110px;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--linea);
}

.ranking-fila:last-child {
    border-bottom: none;
}

.ranking-fila--cabecera {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--tenue-oscuro);
    border-bottom: 1px solid var(--linea-fuerte);
}

.ranking-col-pos {
    font-family: var(--fuente-display);
    font-weight: 700;
    color: var(--tenue);
    text-align: center;
}

.ranking-col-jugador {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-col-num {
    font-family: var(--fuente-display);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ranking-col-puntos {
    color: var(--amarilla);
}

.ranking-fila--oro .ranking-col-pos {
    color: var(--amarilla);
    text-shadow: 0 0 14px rgba(245, 197, 24, 0.5);
}

.ranking-fila--plata .ranking-col-pos {
    color: var(--papel);
}

.ranking-fila--bronce .ranking-col-pos {
    color: #C97A3D;
}

.ranking-fila--yo {
    background: rgba(63, 214, 132, 0.08);
    border-radius: var(--radio-s);
}

.ranking-tag-yo {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--noche);
    background: var(--verde-claro);
    border-radius: var(--radio-pill);
    vertical-align: middle;
}

/* --- Selector de vista: Ranking Global / Mis Ligas --- */
.ranking-tabs {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    padding: 3px;
    background: rgba(4, 7, 6, 0.6);
    border: 1px solid var(--linea);
    border-radius: var(--radio-pill);
}

.ranking-tab {
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tenue);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background var(--rapido), color var(--rapido);
}

.ranking-tab:hover {
    color: var(--papel);
}

.ranking-tab.is-activo {
    color: var(--noche);
    background: linear-gradient(180deg, var(--verde-claro), var(--verde));
}

/* --- Ligas privadas: crear / unirse / listado --- */
.ligas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.ligas-card {
    padding: 22px;
    display: flex;
    flex-direction: column;
}

.ligas-card h3 {
    font-family: var(--fuente-display);
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.ligas-card p {
    color: var(--tenue);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.ligas-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ligas-form .campo-texto {
    flex: 1;
    min-width: 160px;
    margin-bottom: 0;
}

.ligas-form button {
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.ligas-status {
    margin-top: 10px;
    font-size: 0.8rem;
    min-height: 1.2em;
    color: var(--tenue);
}

.liga-item {
    padding: 14px 16px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
}

.liga-item:last-child {
    margin-bottom: 0;
}

.liga-item__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.liga-item__cabecera strong {
    font-family: var(--fuente-display);
    font-size: 1.05rem;
}

.liga-item__codigo {
    display: block;
    margin-top: 2px;
    color: var(--tenue);
    font-size: 0.78rem;
}

.liga-item__codigo code {
    padding: 1px 6px;
    color: var(--amarilla-clara);
    background: rgba(245, 197, 24, 0.1);
    border-radius: 4px;
    font-family: var(--fuente-texto);
    letter-spacing: 0.5px;
}

.liga-item__acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.liga-item__acciones .btn-auth {
    flex: none;
    padding: 8px 12px;
    font-size: 0.78rem;
}

.liga-item__ranking {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--linea);
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
    .app-shell {
        flex-direction: column;
        gap: 14px;
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .sidebar {
        display: none;
    }

    /* Ancho fijo al de la carcasa: los anuncios "full-width responsive" de
       AdSense miden todo el viewport y, con align-items: flex-start,
       ensanchaban la columna y provocaban scroll horizontal. */
    .app-content {
        align-self: stretch;
    }

    .topbar__brand {
        /* No debe encogerse nunca: si no hay sitio, es .topbar__controles
           quien cede espacio (ver más abajo), así el logo y el nombre no
           quedan tapados por el selector de idioma. */
        display: flex;
        flex: 0 0 auto;
        min-width: 0;
    }

    .topbar {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 10px;
    }

    .topbar__brandname {
        font-size: 1.05rem;
    }

    .topbar__mark {
        width: 22px;
        height: 22px;
    }

    .topbar__spacer {
        display: none;
    }

    .topbar__stats {
        display: flex;
        flex: 1 1 auto;
        justify-content: flex-end;
        align-items: stretch;
        gap: 4px;
        min-width: 0;
        margin: 0;
    }

    .topbar__stats .stat {
        min-width: 0;
        padding: 2px 7px;
        text-align: center;
    }

    .topbar__stats .stat dt {
        font-size: 0.55rem;
        letter-spacing: 0.2px;
    }

    .topbar__stats .stat dd {
        font-size: 1.02rem;
        line-height: 1.1;
    }

    .topbar__reloj {
        flex: 0 0 auto;
        font-size: 0.82rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .topbar__controles {
        /* Puede encoger y, si hace falta, envolver sus propios elementos
           en una segunda línea (hereda flex-wrap: wrap) — así nunca se
           superpone ni tapa el logo/nombre de .topbar__brand, que ya no
           encoge. */
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        gap: 6px;
        margin-left: 0;
    }

    .btn-acceso {
        padding: 7px 9px;
    }

    .btn-acceso span {
        display: none;
    }

    .aviso-invitado .btn-acceso span {
        display: inline;
    }

    #auth-container-ui.cuenta-pill {
        gap: 5px;
        padding: 4px 8px;
    }

    .cuenta-pill__avatar {
        font-size: 0.74rem;
    }

    .cuenta-pill__nombre {
        max-width: 5ch;
        font-size: 0.66rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bottombar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(0deg, rgba(5, 7, 6, 0.97), rgba(5, 7, 6, 0.9));
        border-top: 1px solid var(--linea);
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
    }

    .bottombar__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        flex: 1 1 0;
        min-width: 0;
        padding: 6px 2px;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: var(--tenue);
        text-decoration: none;
        border-radius: var(--radio-s);
        transition: color var(--rapido), background var(--rapido);
    }

    .bottombar__link svg {
        flex-shrink: 0;
    }

    .bottombar__link span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .bottombar__link:hover {
        color: var(--papel);
    }

    .bottombar__link.is-activo {
        color: var(--verde-claro);
        background: rgba(63, 214, 132, 0.12);
    }
}

@media (max-width: 900px) {
    /* Orden en móvil: cabecera (fuera de .review) → dos columnas horizontales:
       IZQUIERDA el campo + la descripción de la jugada (agrupados por
       common.js en un contenedor ".review__col-campo" SOLO a partir de este
       ancho, sin tocar IDs, datos ni lógica: el campo y el texto siguen
       siendo los mismos elementos, solo se reordenan visualmente), DERECHA
       las decisiones y el resultado (.panel). Así la descripción queda
       justo debajo del campo y las decisiones "suben" para empezar arriba
       del todo en su columna, en vez de dejar hueco. Por encima de este
       ancho, common.js deshace la agrupación y todo vuelve exactamente a
       como estaba (campo a la izquierda; descripción, decisiones y
       resultado apilados a la derecha). */
    .review {
        grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: start;
        gap: 10px;
    }

    .review > .review__col-campo {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        align-self: start;
        position: sticky;
        top: 8px;
    }

    /* Antes de que common.js agrupe el campo y la descripción (o si el
       navegador no ejecuta JS), .monitor sigue siendo hijo directo de
       .review: se mantiene visible y en su sitio igualmente. */
    .review > .monitor {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    .review > .panel {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
    }

    .review .situation {
        min-width: 0;
        padding: 10px 12px;
        overflow: visible;
        background: var(--superficie);
        border: 1px solid var(--linea);
        border-radius: var(--radio-m);
    }

    .review .situation .situation__id {
        margin-bottom: 6px;
    }

    .review .situation h2,
    .review .panel h2 {
        font-size: 1.0rem;
        margin-bottom: 6px;
    }

    .review .situation p,
    .review .panel p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* La columna derecha es más estrecha que el ancho completo de la
       pantalla, así que las decisiones pasan a una sola columna (en vez de
       las 2 columnas del escritorio) para que el texto de cada botón se
       siga leyendo bien. */
    .review .decisions {
        grid-template-columns: 1fr;
    }

    /* Campo vertical: el terreno (.pitch, líneas, áreas, círculo) y el
       marcador de la jugada que colocan game.js/carrera.js NO cambian:
       sigue siendo el mismo rectángulo de referencia 760×450 con
       posiciones en %, calculadas siempre sobre CAMPO_REF en el JS. Lo
       único que se hace aquí es girar ese rectángulo 90° con CSS y
       recalcular su tamaño (ancho ⇄ alto intercambiados) para que, ya
       girado, aproveche la columna estrecha en vertical sin recortes ni
       deformar el círculo central ni las áreas. */
    .pitch-stage {
        width: 100%;
        aspect-ratio: calc(var(--campo-alto-ref) / var(--campo-ancho-ref));
        overflow: hidden;
    }

    .pitch-stage .pitch {
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(100% * var(--campo-ancho-ref) / var(--campo-alto-ref));
        height: calc(100% * var(--campo-alto-ref) / var(--campo-ancho-ref));
        aspect-ratio: auto;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .monitor:fullscreen .pitch-stage,
    .monitor:-webkit-full-screen .pitch-stage {
        width: 100%;
        aspect-ratio: var(--campo-ancho-ref) / var(--campo-alto-ref);
    }

    .monitor:fullscreen .pitch-stage .pitch,
    .monitor:-webkit-full-screen .pitch-stage .pitch {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        aspect-ratio: var(--campo-ancho-ref) / var(--campo-alto-ref);
        transform: none;
    }

    .review .monitor__bar {
        display: none;
    }

    .review .monitor__meta,
    .review .playbar,
    .review .hud-esquina {
        display: none;
    }

    .review .monitor {
        padding: 6px;
        overflow: hidden;
    }

    .decision__desc,
    .decision__tecla {
        display: none;
    }

    .decision {
        align-items: center;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 0.82rem;
        gap: 8px;
    }

    .app-shell {
        padding: 10px 10px 0;
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .idioma button {
        min-width: 36px;
        padding: 5px 8px;
        font-size: 0.72rem;
    }

    .dashboard-top {
        grid-template-columns: 1fr;
    }

    .escuelas {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 20px;
    }

    .hero__interior {
        flex-direction: column;
        align-items: flex-start;
    }

    /* En columna, la base de 420px pasaría a ser altura y dejaría un hueco */
    .hero__texto {
        flex-basis: auto;
        width: 100%;
    }

    .hero__grafico {
        display: none;
    }

    .modecards {
        grid-template-columns: 1fr;
    }

    .modecards--hub {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .resumen-progreso {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero {
        padding: 32px 24px;
    }

    .ligas-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   15b. CABECERA COMPACTA — PANTALLA DE JUEGO (móvil)
   --------------------------------------------------------------------------
   Ajustes adicionales, SOLO en móvil y SOLO en las páginas de juego
   (Práctica, Examen, Carrera), para reducir la altura de la cabecera y el
   scroll necesario para llegar al campo, la descripción, las opciones y el
   resultado. No toca estructura HTML, datos ni lógica de juego: son
   únicamente ajustes de densidad visual (paddings, tamaños de fuente y,
   cuando la jugada ya está respondida, ocultar las opciones no elegidas
   apoyándose en las clases que game.js/carrera.js ya añaden).
   ========================================================================== */
@media (max-width: 900px) {
    /* --- Cabecera (topbar) más compacta --- */
    body[data-pagina="practica"] .topbar,
    body[data-pagina="examen"] .topbar,
    body[data-pagina="carrera"] .topbar {
        padding: 6px 10px;
        gap: 6px;
    }

    body[data-pagina="practica"] .topbar__mark,
    body[data-pagina="examen"] .topbar__mark,
    body[data-pagina="carrera"] .topbar__mark {
        width: 20px;
        height: 20px;
    }

    body[data-pagina="practica"] .btn-acceso,
    body[data-pagina="examen"] .btn-acceso,
    body[data-pagina="carrera"] .btn-acceso {
        padding: 6px 8px;
    }

    body[data-pagina="practica"] #auth-container-ui.cuenta-pill,
    body[data-pagina="examen"] #auth-container-ui.cuenta-pill,
    body[data-pagina="carrera"] #auth-container-ui.cuenta-pill {
        padding: 3px 4px 3px 8px;
    }

    /* --- Menos aire entre cabecera y contenido --- */
    body[data-pagina="practica"] .app-content,
    body[data-pagina="examen"] .app-content,
    body[data-pagina="carrera"] .app-content {
        gap: 10px;
    }

    body[data-pagina="practica"] .review,
    body[data-pagina="examen"] .review,
    body[data-pagina="carrera"] .review {
        gap: 8px;
    }

    /* --- Resultado sin scroll extra: al responder, las opciones no
       elegidas se recogen para dejar sitio a la explicación. Se apoya en
       las clases "es-correcta" / "es-elegida-fallo" / "es-elegida-gestion"
       que ya añade el JS existente; si el navegador no soporta :has(), el
       diseño actual (sin recoger) se mantiene igual que antes del cambio. */
    body[data-pagina="practica"] .decision-host:has(~ #panel-feedback:not(.oculto)),
    body[data-pagina="carrera"] #partido-decisiones:has(~ #partido-panel-feedback:not(.oculto)) {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    body[data-pagina="practica"] .decision-host:has(~ #panel-feedback:not(.oculto)) .decision:not(.es-correcta):not(.es-elegida-fallo),
    body[data-pagina="carrera"] #partido-decisiones:has(~ #partido-panel-feedback:not(.oculto)) .decision:not(.es-correcta):not(.es-elegida-fallo):not(.es-elegida-gestion) {
        display: none;
    }

    /* --- Explicación del resultado, algo más compacta --- */
    body[data-pagina="practica"] .feedback,
    body[data-pagina="carrera"] .feedback {
        padding: 12px 14px;
    }

    body[data-pagina="practica"] .feedback h3,
    body[data-pagina="carrera"] .feedback h3 {
        font-size: 1.05rem;
        margin-bottom: 4px;
    }

    body[data-pagina="practica"] .feedback p,
    body[data-pagina="carrera"] .feedback p {
        font-size: 0.82rem;
        margin-bottom: 10px;
    }

    body[data-pagina="practica"] .btn-siguiente,
    body[data-pagina="carrera"] .btn-siguiente {
        padding: 9px 18px;
        font-size: 0.84rem;
    }

    /* --- Carrera: durante el partido, el título de la página y el aviso de
       inicio de sesión (que son fijos, no parte de ninguna vista) no
       aportan nada mientras se está jugando y solo añaden scroll antes del
       campo. Se ocultan únicamente cuando la vista de partido está activa
       (carrera.js quita "oculto" de #vista-carrera-partido); el resto de
       pantallas de Carrera (intro, perfil, dashboard, resúmenes) no se ven
       afectadas. */
    body[data-pagina="carrera"] main:has(#vista-carrera-partido:not(.oculto)) .page-heading,
    body[data-pagina="carrera"] main:has(#vista-carrera-partido:not(.oculto)) #carrera-aviso-invitado {
        display: none;
    }

    /* Igual que Práctica/Examen ya hacen: durante el partido de Carrera, el
       pie de página tampoco aporta nada por encima del resultado y solo
       suma scroll. Fuera del partido (dashboard, resúmenes…) sigue
       mostrándose exactamente igual que antes. */
    body[data-pagina="carrera"] .app-content:has(#vista-carrera-partido:not(.oculto)) .footer-legal {
        display: none;
    }
}

@media (max-width: 680px) {
    .scorebug {
        padding: 13px 14px;
    }

    .scorebug__nav {
        order: 4;
        width: 100%;
        justify-content: space-between;
        border-top: 1px solid var(--linea);
        padding-top: 8px;
    }

    .navlink span {
        display: none;
    }

    .navlink {
        padding: 6px;
    }

    .playbar__tiempo {
        display: none;
    }

    .scorebug__controles {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .scorebug__stats {
        order: 3;
        width: auto;
        gap: 4px;
    }

    .stat {
        flex: 1;
        min-width: 0;
        text-align: center;
        padding: 3px 8px;
    }

    .stat dd {
        font-size: 1.05rem;
    }

    .decisions {
        gap: 7px;
    }

    body[data-pagina="practica"] .breadcrumb,
    body[data-pagina="examen"] .breadcrumb,
    body[data-pagina="carrera"] .breadcrumb,
    body[data-pagina="practica"] .ticker,
    body[data-pagina="examen"] .ticker,
    body[data-pagina="carrera"] .ticker,
    body[data-pagina="practica"] .footer-legal,
    body[data-pagina="examen"] .footer-legal {
        display: none;
    }

    .progreso-panel {
        padding: 12px 14px;
    }

    .progreso-panel h2,
    .progreso-panel h3 {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .progreso-panel__fila dd {
        font-size: 1.2rem;
    }

    .progreso-anillo {
        width: 116px;
    }

    .progreso-anillo__centro strong {
        font-size: 1.7rem;
    }

    .marcador-accion {
        width: 15px;
        height: 15px;
        border-width: 2px;
    }

    .marcador-accion::before {
        width: 34px;
        height: 34px;
    }

    .hero {
        padding: 26px 18px;
        border-radius: var(--radio-m);
    }

    .hero__acciones {
        flex-direction: column;
    }

    .btn-hero-primario,
    .btn-hero-secundario {
        justify-content: center;
    }

    .resumen-progreso {
        grid-template-columns: 1fr 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .acta__acciones {
        flex-direction: column;
    }

    .acta__acciones > * {
        min-width: 0;
    }

    .login-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .ranking-fila {
        grid-template-columns: 34px 1fr 74px;
    }

    .ranking-col-opcional {
        display: none;
    }

    .ligas-form {
        flex-direction: column;
    }

    .ligas-form .campo-texto {
        min-width: 0;
    }

    .liga-item__cabecera {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Móvil estrecho: la columna del campo (38 %) deja la descripción de la
   jugada en ~130px y se lee a trozos. Aquí la descripción pasa a ancho
   completo encima; debajo siguen campo (izquierda) y decisiones (derecha)
   una junto a otra, como en el diseño de dos columnas. Solo CSS: el
   agrupado de common.js se mantiene y "display: contents" lo aplana. */
@media (max-width: 560px) {
    .review > .review__col-campo {
        display: contents;
    }

    .review > .review__col-campo > .situation {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .review > .review__col-campo > .monitor {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        position: sticky;
        top: 8px;
    }

    .review > .panel {
        grid-row: 2;
    }

    .review .situation p {
        font-size: 0.86rem;
        line-height: 1.45;
    }
}

@media (max-width: 420px) {
    /* El nombre "RefSim" debe verse siempre en la cabecera, en todas las
       páginas — aquí solo se reduce un poco más el tamaño de letra para
       ganar espacio en pantallas muy estrechas, ya no se oculta. */
    .topbar__brandname {
        font-size: 0.92rem;
    }

    .resumen-progreso {
        grid-template-columns: 1fr 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .decision__glyph,
    .decision__card {
        display: none;
    }

    .cuenta-pill__nombre {
        max-width: 3.5ch;
        font-size: 0.6rem;
    }
}

/* ==========================================================================
   15. ACCESIBILIDAD Y PREFERENCIAS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --tenue: #C3D2CB;
        --linea: rgba(237, 237, 230, 0.28);
    }
}

@media print {
    .ad-slot,
    #auth-modal,
    .decisions {
        display: none;
    }
}


/* ==========================================================================
   Compartir resultado (campaña #TúPitas)
   ========================================================================== */
.btn-compartir {
    padding: 11px 22px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--noche);
    background: linear-gradient(180deg, var(--amarilla-clara), var(--amarilla));
    border: none;
    border-radius: var(--radio-s);
    cursor: pointer;
    box-shadow: var(--brillo-amarillo);
    transition: transform var(--rapido), filter var(--rapido);
}

.btn-compartir:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-compartir:focus-visible {
    outline: 2px solid var(--amarilla-clara);
    outline-offset: 2px;
}

.feedback__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.aviso-breve {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--noche);
    background: var(--amarilla);
    border-radius: var(--radio-pill);
    box-shadow: var(--sombra-suave);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity var(--medio), transform var(--medio);
}

.aviso-breve.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ==========================================================================
   16. DECISIÓN EN DOS PASOS (decision.js) E INFORME DE EXAMEN
   ========================================================================== */
.decision-host {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.decision-paso {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.decision-paso[hidden] {
    display: none;
}

.decision-paso__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--tenue);
}

.decision-paso__num {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
    color: var(--noche);
    background: var(--verde-claro);
    border-radius: 50%;
}

.decision-paso--sancion {
    animation: veredicto var(--medio) both;
}

.decision-host .decisions--sancion {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

kbd.decision__tecla {
    font-family: var(--fuente-texto);
}

/* Familias de reanudación: el canto de color agrupa decisiones parecidas */
.decision--r-continuar    { --canto: var(--verde); }
.decision--r-tld          { --canto: var(--tenue); }
.decision--r-tli          { --canto: #7C83FD; }
.decision--r-penalti      { --canto: var(--papel); }
.decision--r-fueraDeJuego { --canto: #4EA8DE; }
.decision--r-gol          { --canto: var(--verde-claro); }
.decision--r-saqueMeta,
.decision--r-saqueEsquina,
.decision--r-saqueBanda,
.decision--r-balonTierra,
.decision--r-repetir      { --canto: var(--tenue-oscuro); }

.decision--s-ninguna  { --canto: var(--tenue); }
.decision--s-amarilla { --canto: var(--amarilla); }
.decision--s-roja     { --canto: var(--roja); }

.decision.is-seleccionada {
    border-color: var(--canto, var(--linea-fuerte));
    background: linear-gradient(180deg, color-mix(in srgb, var(--canto, var(--verde)) 16%, rgba(20, 28, 25, 0.9)), rgba(10, 14, 12, 0.95));
}

.decision.is-seleccionada::before {
    width: 5px;
    opacity: 1;
}

.decisions--sancion .decision {
    align-items: center;
    padding-right: 30px;
}

.decision__tarjeta {
    flex-shrink: 0;
    width: 14px;
    height: 19px;
    border-radius: 3px;
    border: 1.5px dashed var(--tenue-oscuro);
}

.decision__tarjeta--amarilla { border: none; background: var(--amarilla); }
.decision__tarjeta--roja     { border: none; background: var(--roja); }

/* Corrección: aciertos parciales (reanudación o sanción) */
.feedback.parcial {
    border-left-color: var(--amarilla);
    background:
        linear-gradient(90deg, rgba(245, 197, 24, 0.12), transparent 55%),
        rgba(4, 7, 6, 0.55);
}

.feedback.parcial h3 { color: var(--amarilla-clara); }

.feedback .feedback__detalle {
    color: var(--papel);
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 6px;
}

.feedback .feedback__titulo {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--verde-claro);
    margin-bottom: 6px;
}

/* Informe del examen */
.informe__cifras {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 6px;
}

.informe__cifra {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
}

.informe__cifra dt {
    font-size: 0.72rem;
    color: var(--tenue);
}

.informe__cifra dd {
    font-family: var(--fuente-display);
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.informe__cifra--principal dd {
    color: var(--verde-claro);
    font-size: 2.2rem;
}

.informe__bloque {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.informe__areas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
}

.informe__areas li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    font-weight: 600;
    background: rgba(230, 57, 70, 0.08);
    border: 1px solid rgba(230, 57, 70, 0.28);
    border-radius: var(--radio-s);
}

.informe__areas-dato {
    color: var(--roja-clara);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.informe__sin-areas {
    color: var(--verde-claro);
    font-weight: 600;
}

.informe__grupo {
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: rgba(4, 7, 6, 0.4);
}

.informe__grupo summary {
    padding: 12px 14px;
    font-weight: 700;
    cursor: pointer;
}

.informe__grupo .acta__lista {
    list-style: none;
    padding: 0 12px 12px;
}

@media (max-width: 680px) {
    .informe__cifras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .decisions--sancion {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .decisions--sancion .decision {
        flex-direction: column;
        gap: 6px;
        padding: 10px 6px;
        text-align: center;
    }

    .decisions--sancion .decision__tecla {
        display: none;
    }
}

/* ==========================================================================
   17. ESTADÍSTICAS: EVOLUCIÓN Y ACIERTO POR ÁREA
   ========================================================================== */
/* Texto solo para lectores de pantalla */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.analisis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 28px;
    padding: 22px;
}

.analisis__bloque {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.analisis__bloque h3 {
    font-family: var(--fuente-display);
    font-size: 1.15rem;
}

.analisis__nota {
    margin-top: -6px;
    font-size: 0.8rem;
    color: var(--tenue);
}

.evolucion {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
    padding-top: 18px;
    list-style: none;
    border-bottom: 1px solid var(--linea);
}

.evolucion__barra {
    position: relative;
    flex: 1 1 0;
    max-width: 44px;
    height: calc(var(--valor) * 1%);
    min-height: 3px;
    background: color-mix(in srgb, var(--amarilla) 70%, transparent);
    border-radius: 4px 4px 0 0;
}

.evolucion__barra--ok {
    background: color-mix(in srgb, var(--verde-claro) 75%, transparent);
}

.evolucion__valor {
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
}

.areas-barras {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.areas-barras__fila {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
}

.areas-barras__pista {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.areas-barras__relleno {
    display: block;
    height: 100%;
    background: var(--amarilla);
    border-radius: inherit;
}

.areas-barras__relleno--ok {
    background: var(--verde-claro);
}

.areas-barras__dato {
    color: var(--tenue);
    font-size: 0.76rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

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

@media (max-width: 480px) {
    .areas-barras__fila {
        grid-template-columns: 1fr auto;
    }

    .areas-barras__pista {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* ==========================================================================
   18. GAMIFICACIÓN: NIVEL, JUGADA DEL DÍA, ÁREAS DOMINADAS
   ========================================================================== */
.nivel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nivel__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.nivel__cabecera strong {
    font-family: var(--fuente-display);
    font-size: 1.05rem;
    color: var(--amarilla-clara);
}

.nivel__cabecera span {
    font-size: 0.72rem;
    color: var(--tenue);
}

.nivel__barra {
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    overflow: hidden;
}

.nivel__barra span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--amarilla);
    border-radius: inherit;
    transition: width var(--lento);
}

.dia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
}

.dia__texto h2 {
    font-family: var(--fuente-display);
    font-size: 1.3rem;
    font-weight: 700;
}

.dia__texto p {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--tenue);
}

.dia__estado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.dia__chip {
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--amarilla-clara);
    background: rgba(245, 197, 24, 0.12);
    border: 1px solid rgba(245, 197, 24, 0.35);
    border-radius: 999px;
}

.dia__chip--hecha {
    color: var(--verde-claro);
    background: rgba(63, 214, 132, 0.12);
    border-color: var(--linea-fuerte);
}

.dia__racha {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tenue);
}

.insignia-dominada {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.66rem;
    font-weight: 700;
    vertical-align: middle;
    color: var(--noche);
    background: var(--verde-claro);
    border-radius: 999px;
}

@media (max-width: 680px) {
    .dia {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px;
    }

    .dia__estado {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .dia .btn-hero-primario {
        justify-content: center;
    }
}

/* ==========================================================================
   19. ACCESIBILIDAD
   ========================================================================== */
/* Foco visible y uniforme en todo lo interactivo (solo con teclado) */
:focus-visible {
    outline: 2px solid var(--amarilla-clara);
    outline-offset: 2px;
}

.campo-texto:focus-visible {
    outline: 2px solid var(--amarilla-clara);
    outline-offset: 1px;
}

/* Enlace para saltar la navegación: visible solo al recibir foco */
.saltar-contenido {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 10px 16px;
    font-weight: 700;
    color: var(--noche);
    background: var(--amarilla-clara);
    border-radius: var(--radio-s);
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--rapido);
}

.saltar-contenido:focus {
    transform: none;
}

/* Móvil: tarjetas de modo en horizontal (icono a la izquierda), menos scroll */
@media (max-width: 680px) {
    .modecard-link {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 4px;
        padding: 16px;
    }

    .modecard-link__icono {
        grid-row: 1 / span 3;
        width: 44px;
        height: 44px;
    }

    .modecard-link strong {
        font-size: 1.1rem;
    }

    .modecard-link__cta {
        margin-top: 2px;
    }
}

/* Móvil estrecho con la decisión en dos pasos: 11 reanudaciones no caben
   en la columna junto al campo. Se apila todo: descripción, campo en
   horizontal a todo el ancho y decisiones en dos columnas. */
@media (max-width: 560px) {
    .review {
        grid-template-columns: minmax(0, 1fr);
    }

    .review > .review__col-campo > .monitor,
    .review > .monitor {
        grid-column: 1;
        grid-row: 2;
        position: static;
    }

    .review > .panel {
        grid-column: 1;
        grid-row: 3;
    }

    .pitch-stage {
        aspect-ratio: calc(var(--campo-ancho-ref) / var(--campo-alto-ref));
    }

    .pitch-stage .pitch {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: 100%;
        transform: none;
    }

    .review .decisions--reanudacion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .review .decisions--reanudacion .decision {
        min-height: 48px;
        padding: 10px 10px 10px 14px;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   20. PANTALLA DE JUEGO (Práctica, Examen y Carrera)
   --------------------------------------------------------------------------
   Izquierda: la jugada (texto protagonista), el campo y el estado de la
   sesión, fija al desplazar. Derecha: la decisión y la corrección.
   ========================================================================== */
.juego {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
}

.juego.oculto {
    display: none;
}

.juego__escena {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.situation--juego {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
}

.situation__cabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.situation__zona {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tenue);
}

.situation__saltar {
    margin-left: auto;
    padding: 4px 10px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tenue);
    background: transparent;
    border: 1px solid var(--linea);
    border-radius: var(--radio-pill);
    cursor: pointer;
}

.situation__saltar:hover {
    color: var(--papel);
    border-color: var(--linea-fuerte);
}

.situation--juego h2 {
    font-family: var(--fuente-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
}

.situation--juego p {
    font-size: 1.02rem;
    line-height: 1.55;
    color: #D9E2DD;
}

.juego .monitor {
    padding: 8px;
}

.juego .marcador-accion {
    z-index: 2;
}

/* Estado de la sesión (Práctica) */
.sesion {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sesion > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
}

.sesion dt {
    font-size: 0.7rem;
    color: var(--tenue);
}

.sesion dd {
    font-family: var(--fuente-display);
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Progreso del examen */
.examen-progreso {
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    overflow: hidden;
}

.examen-progreso span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--verde-claro);
    border-radius: inherit;
    transition: width var(--medio);
}

.juego__decision {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

/* Tras responder: solo la opción elegida y la correcta */
.decision-host.is-revelado .decision:not(.es-correcta):not(.es-elegida-fallo) {
    display: none;
}

.decision-host.is-revelado .decision {
    opacity: 1;
}

.decision-atajos {
    font-size: 0.72rem;
    color: var(--tenue);
}

.decision-host.is-revelado ~ .decision-atajos {
    display: none;
}

@media (hover: none) {
    .decision-atajos {
        display: none;
    }
}

.btn-compartir--discreto {
    color: var(--tenue);
    background: transparent;
    border: 1px solid var(--linea);
    box-shadow: none;
}

.btn-compartir--discreto:hover {
    color: var(--papel);
}

/* Tablet y móvil: una columna y el campo siempre en horizontal */
@media (max-width: 900px) {
    .juego {
        grid-template-columns: minmax(0, 1fr);
    }

    .juego__escena {
        position: static;
    }

    .juego .pitch-stage {
        aspect-ratio: calc(var(--campo-ancho-ref) / var(--campo-alto-ref));
    }

    .juego .pitch-stage .pitch {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: 100%;
        transform: none;
    }

    .juego .decisions--reanudacion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .situation--juego {
        padding: 16px;
    }

    .situation--juego h2 {
        font-size: 1.2rem;
    }

    .situation--juego p {
        font-size: 0.95rem;
    }

    .sesion dd {
        font-size: 1.1rem;
    }

    .juego__decision {
        padding: 14px;
    }
}

.situation__contexto {
    padding: 2px 9px;
    color: var(--amarilla-clara);
    background: rgba(245, 197, 24, 0.1);
    border: 1px solid rgba(245, 197, 24, 0.3);
    border-radius: var(--radio-pill);
}

.situation__contexto:empty {
    display: none;
}

/* Durante el partido de Carrera, el título de la página y el aviso de
   invitado no aportan nada y empujan el juego fuera de la pantalla. */
body[data-pagina="carrera"] main:has(#vista-carrera-partido:not(.oculto)) .page-heading,
body[data-pagina="carrera"] main:has(#vista-carrera-partido:not(.oculto)) #carrera-aviso-invitado {
    display: none;
}

/* Móvil y tablet: la sesión va después de la decisión, para que las
   opciones queden justo debajo del campo. */
@media (max-width: 900px) {
    .juego__escena {
        display: contents;
    }

    .juego__decision {
        order: 2;
    }

    .juego .sesion {
        order: 3;
    }

    .juego .examen-progreso {
        order: 1;
    }
}

/* ==========================================================================
   21. TEMPORADAS
   ========================================================================== */
.temporada-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 18px;
    padding: 18px 22px;
}

.temporada-cabecera__texto {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.temporada-cabecera__kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--verde-claro);
}

.temporada-cabecera__texto strong {
    font-family: var(--fuente-display);
    font-size: 1.4rem;
    font-weight: 700;
}

.temporada-cabecera__restante {
    font-size: 0.82rem;
    color: var(--amarilla-clara);
}

.temporada-cabecera__puesto {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    font-weight: 600;
}

.ranking-periodo {
    display: inline-flex;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--linea);
    border-radius: var(--radio-pill);
}

.ranking-periodo__btn {
    padding: 7px 14px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tenue);
    background: transparent;
    border: none;
    border-radius: var(--radio-pill);
    cursor: pointer;
}

.ranking-periodo__btn.is-activo {
    color: var(--noche);
    background: var(--verde-claro);
}

.progreso-temporada {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--amarilla-clara);
}

.temporadas-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.temporadas-lista li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 14px;
    font-size: 0.86rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
}

.temporadas-lista strong {
    font-weight: 700;
}

.temporadas-lista .temporadas-lista__curso {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--verde-claro);
}

.temporadas-lista span {
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
    .temporada-cabecera {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   22. MÓVIL COMPACTO (≤ 560 px)
   --------------------------------------------------------------------------
   Objetivo: en la pantalla de juego, leer la jugada y decidir sin
   desplazarse; en el resto, menos altura por bloque.
   ========================================================================== */
@media (max-width: 560px) {
    /* ---------- Pantalla de juego ---------- */
    .juego {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 8px;
    }

    .juego .situation--juego,
    .juego .juego__decision,
    .juego .examen-progreso {
        grid-column: 1 / -1;
    }

    .situation--juego {
        gap: 6px;
        padding: 12px 14px;
    }

    .situation--juego h2 {
        font-size: 1.05rem;
    }

    .situation--juego p {
        font-size: 0.92rem;
        line-height: 1.45;
    }

    /* Campo reducido (solo marca un punto) con la sesión al lado */
    .juego .monitor {
        grid-column: 1;
        order: 1;
        padding: 4px;
        border-radius: var(--radio-s);
    }

    .juego .sesion {
        grid-column: 2;
        order: 1;
        grid-template-columns: 1fr;
        gap: 4px;
        align-self: stretch;
    }

    .juego .sesion > div {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        padding: 4px 10px;
    }

    .juego .sesion dt {
        font-size: 0.66rem;
    }

    .juego .sesion dd {
        font-size: 1rem;
    }

    /* Sin sesión (Examen, Carrera): el campo centrado y más pequeño */
    .juego:not(:has(.sesion)) .monitor {
        grid-column: 1 / -1;
        justify-self: center;
        width: 62%;
    }

    .juego__decision {
        order: 2;
        gap: 10px;
        padding: 12px;
    }

    .decision-host {
        gap: 10px;
    }

    .decision-paso {
        gap: 6px;
    }

    .decision-paso__titulo {
        font-size: 0.7rem;
    }

    /* Reanudaciones en 3 columnas compactas */
    .juego .decisions--reanudacion {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .juego .decisions--reanudacion .decision {
        min-height: 46px;
        padding: 6px 6px 6px 10px;
        align-items: center;
    }

    .juego .decisions--reanudacion .decision__titulo {
        font-size: 0.74rem;
        line-height: 1.15;
    }

    .juego .decisions--sancion .decision {
        min-height: 44px;
        flex-direction: row;
        padding: 6px 8px;
        gap: 6px;
    }

    .juego .decisions--sancion .decision__titulo {
        font-size: 0.78rem;
    }

    /* Corrección: el botón para seguir queda fijo sobre la barra inferior */
    .juego .feedback {
        padding: 12px 14px;
    }

    .juego .feedback h3 {
        font-size: 1.05rem;
    }

    .juego .feedback p {
        font-size: 0.86rem;
        margin-bottom: 8px;
    }

    .juego .feedback__acciones {
        position: sticky;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        z-index: 5;
        display: flex;
        gap: 8px;
        padding: 8px 0 0;
        background: linear-gradient(0deg, var(--noche) 70%, transparent);
    }

    .juego .feedback__acciones .btn-siguiente {
        flex: 1 1 auto;
    }

    .juego .btn-compartir--discreto {
        padding: 10px 12px;
        font-size: 0.78rem;
    }
}

@media (max-width: 560px) {
    /* ---------- Portada ---------- */
    .inicio {
        gap: 12px;
    }

    .hero {
        gap: 10px;
        padding: 18px 16px;
    }

    .hero__kicker {
        font-size: 0.64rem;
        padding: 4px 10px;
    }

    .hero h1 {
        font-size: 1.55rem;
    }

    .hero p {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .hero__acciones {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-direction: row;
        gap: 8px;
    }

    .btn-hero-primario,
    .btn-hero-secundario {
        padding: 11px 10px;
        font-size: 0.8rem;
        line-height: 1.2;
        text-align: center;
    }

    /* Progreso en horizontal: anillo pequeño junto a las cifras */
    .progreso-panel {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 10px 14px;
        padding: 14px;
    }

    .progreso-panel > h2,
    .progreso-panel > .nivel,
    .progreso-panel > .progreso-temporada,
    .progreso-panel > .aviso-invitado {
        grid-column: 1 / -1;
    }

    .progreso-anillo {
        width: 92px;
    }

    .progreso-anillo__centro strong {
        font-size: 1.35rem;
    }

    .progreso-anillo__centro span {
        font-size: 0.56rem;
    }

    .progreso-panel__lista {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .progreso-panel__fila {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        padding: 6px 10px;
        text-align: left;
    }

    .progreso-panel__fila dd {
        font-size: 1.05rem;
    }

    .aviso-invitado--panel {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        font-size: 0.78rem;
    }

    .aviso-invitado--panel button {
        align-self: center;
        flex: 0 0 auto;
    }

    .aviso-invitado--panel .btn-acceso span {
        display: inline;
    }

    .pasos-panel {
        gap: 10px;
        padding: 14px;
    }

    .pasos-panel__lista {
        gap: 10px;
    }

    .pasos-panel__lista li {
        padding-left: 38px;
    }

    .pasos-panel__lista li::before {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }

    /* Jugada del día en una franja */
    .dia {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding: 14px;
    }

    .dia__texto p {
        display: none;
    }

    .dia__texto h2 {
        font-size: 1.1rem;
    }

    .dia__estado {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }

    .dia .btn-hero-primario {
        grid-column: 1 / -1;
        padding: 10px;
    }

    /* Modos en cuadrícula 2 × 2: icono y nombre */
    .seccion-titulo {
        font-size: 1.15rem;
    }

    .inicio__seccion {
        gap: 10px;
    }

    .modecards--hub {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .modecard-link {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px;
    }

    .modecard-link__icono {
        width: 38px;
        height: 38px;
    }

    .modecard-link strong {
        font-size: 1rem;
        line-height: 1.15;
    }

    .modecard-link p,
    .modecard-link__cta {
        display: none;
    }

    /* Escuelas: solo lo esencial */
    .escuelas {
        gap: 10px;
        padding: 16px;
    }

    .escuelas__puntos {
        display: none;
    }

    .escuelas__texto h2 {
        font-size: 1.15rem;
    }

    .escuelas__texto p {
        font-size: 0.86rem;
    }

    .footer-legal {
        padding-block: 14px;
        gap: 6px;
    }
}

/* Quien ya ha jugado no necesita la presentación: en móvil, el hero se
   reduce al titular y los botones. */
@media (max-width: 560px) {
    body.ha-jugado .hero p,
    body.ha-jugado .hero__kicker {
        display: none;
    }

    body.ha-jugado .hero h1 {
        font-size: 1.35rem;
    }
}

@media (max-width: 560px) {
    /* ---------- Estadísticas ---------- */
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .stats-grid .stat-card {
        padding: 10px 8px;
    }

    .stats-grid .stat-card dt {
        font-size: 0.62rem;
        line-height: 1.2;
    }

    .stats-grid .stat-card dd {
        font-size: 1.25rem;
    }

    .login-cta {
        gap: 10px;
        padding: 14px;
    }

    .login-cta__texto p {
        display: none;
    }

    .login-cta .btn-hero-primario {
        align-self: stretch;
        justify-content: center;
        padding: 10px;
    }

    .analisis {
        gap: 18px;
        padding: 14px;
    }

    .evolucion {
        height: 110px;
    }

    .page-heading p {
        font-size: 0.84rem;
    }

    /* ---------- Ligas ---------- */
    .temporada-cabecera {
        gap: 8px;
        padding: 12px 14px;
    }

    .temporada-cabecera__texto strong {
        font-size: 1.15rem;
    }

    .ranking-periodo {
        justify-self: stretch;
    }

    .ranking-periodo__btn {
        flex: 1 1 0;
    }
}

/* ==========================================================================
   23. COLABORADORES Y PÁGINAS LEGALES
   ========================================================================== */
.colab,
.legal {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.colab-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 28px;
}
.colab-intro__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.colab-intro__texto h2 { font-family: var(--fuente-display); font-size: var(--paso-2); line-height: 1.1; }
.colab-intro__texto p { max-width: 60ch; color: var(--tenue); font-size: 0.95rem; }
.colab-intro__cifra {
    min-width: 140px;
    padding: 16px 20px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    text-align: center;
}
.colab-intro__cifra dt { color: var(--tenue); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.colab-intro__cifra dd { font-family: var(--fuente-display); font-size: 2.6rem; font-weight: 800; line-height: 1; margin-top: 6px; }

.colab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    list-style: none;
}
.colab-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--rapido), transform var(--rapido);
}
a.colab-card:hover,
a.colab-card:focus-visible { border-color: var(--linea-fuerte); transform: translateY(-2px); }
.colab-card__logo,
.colab-card__iniciales {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
}
.colab-card__iniciales {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--verde-claro) 14%, var(--panel-alto));
    color: var(--verde-claro);
    font-family: var(--fuente-display);
    font-size: 1.35rem;
    font-weight: 800;
}
.colab-card__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.colab-card__tipo { color: var(--tenue); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.colab-card__nombre { font-size: 1rem; line-height: 1.25; }
.colab-card__desc { color: var(--tenue); font-size: 0.85rem; line-height: 1.4; }
.colab-card__ir { margin-left: auto; color: var(--tenue); }

.colab-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 24px;
    text-align: center;
    border-style: dashed;
}
.colab-vacio__icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--verde-claro) 12%, transparent);
    color: var(--verde-claro);
}
.colab-vacio h3 { font-family: var(--fuente-display); font-size: 1.3rem; }
.colab-vacio p { max-width: 46ch; color: var(--tenue); font-size: 0.92rem; }

.colab-unete { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; }
.colab-unete h2 { font-family: var(--fuente-display); font-size: var(--paso-2); }
.colab-unete__intro { color: var(--tenue); }
.colab-formas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    width: 100%;
    list-style: none;
}
.colab-formas li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--noche-2);
}
.colab-formas span { color: var(--tenue); font-size: 0.88rem; line-height: 1.45; }

/* Franja de la portada */
.colab-franja {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 4px 4px;
    border-top: 1px solid var(--linea);
}
.colab-franja__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.colab-franja__cabecera h2 {
    color: var(--tenue);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.colab-franja__ver { color: var(--verde-claro); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.colab-franja__ver:hover { text-decoration: underline; }
.colab-franja__lista { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; }
.colab-franja__lista li { font-family: var(--fuente-display); font-size: 1.15rem; font-weight: 700; opacity: 0.8; }
.colab-franja__vacio { color: var(--tenue); font-size: 0.92rem; }

/* Texto legal */
.legal__texto { display: flex; flex-direction: column; gap: 10px; padding: 28px; max-width: 760px; }
.legal__texto h2 { font-family: var(--fuente-display); font-size: 1.25rem; margin-top: 10px; }
.legal__texto h2:first-child { margin-top: 0; }
.legal__texto p { color: var(--tenue); line-height: 1.6; }
.legal__fecha { margin-top: 12px; font-size: 0.82rem; }

[hidden] { display: none !important; }

@media (max-width: 720px) {
    .colab-intro { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
    .colab-intro__cifra { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
    .colab-intro__cifra dd { font-size: 1.8rem; margin: 0; }
    .colab-formas { grid-template-columns: 1fr; }
    .colab-unete,
    .legal__texto { padding: 20px; }
}

/* ==========================================================================
   24. PRÁCTICA POR ÁREA Y DURACIÓN DEL EXAMEN
   ========================================================================== */
.practica-barra {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.practica-filtro {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tenue);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.practica-filtro__select {
    min-height: 40px;
    max-width: min(320px, 70vw);
    padding: 8px 36px 8px 12px;
    background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238FA097' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    color: var(--papel);
    font: 500 0.9rem var(--fuente-texto);
    letter-spacing: 0;
    text-transform: none;
    appearance: none;
    cursor: pointer;
}
.practica-filtro__select:hover { border-color: var(--linea-fuerte); }
.practica-filtro__select:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }
.practica-filtro__select option { background: var(--panel); color: var(--papel); }

.examen-duracion {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: 0;
    padding: 0;
    margin: 4px 0;
}
.examen-duracion legend {
    width: 100%;
    margin-bottom: 8px;
    color: var(--tenue);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.examen-duracion__op { position: relative; flex: 1 1 200px; cursor: pointer; }
.examen-duracion__op input { position: absolute; opacity: 0; pointer-events: none; }
.examen-duracion__op > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--noche-2);
    transition: border-color var(--rapido), background var(--rapido);
}
.examen-duracion__op small { color: var(--tenue); font-size: 0.82rem; }
.examen-duracion__op input:checked + span {
    border-color: var(--verde-claro);
    background: color-mix(in srgb, var(--verde-claro) 10%, var(--noche-2));
}
.examen-duracion__op input:focus-visible + span { outline: 2px solid var(--verde-claro); outline-offset: 2px; }

.areas-barras__practicar { color: var(--verde-claro); font-weight: 600; text-decoration: none; white-space: nowrap; }
.areas-barras__practicar:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .practica-barra { justify-content: stretch; margin-bottom: 8px; }
    .practica-filtro { width: 100%; }
    .practica-filtro__select { flex: 1; max-width: none; }
}

.ligas-invitacion {
    padding: 14px 16px;
    border: 1px solid var(--linea-fuerte);
    border-left: 3px solid var(--verde-claro);
    border-radius: var(--radio-s);
    background: color-mix(in srgb, var(--verde-claro) 8%, var(--panel));
    font-size: 0.92rem;
}

/* ==========================================================================
   25. ACABADO PROFESIONAL
   --------------------------------------------------------------------------
   Capa final: menos brillo y degradado, más contraste tipográfico y
   superficies sobrias. Va al final para ganar a igual especificidad.
   ========================================================================== */
:root {
    --brillo-verde: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 8px 20px -12px color-mix(in srgb, var(--verde-claro) 55%, transparent);
    --brillo-amarillo: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 20px -12px color-mix(in srgb, var(--amarilla) 55%, transparent);
    --sombra: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 20px 40px -30px rgba(0, 0, 0, 0.9);
}

body {
    background-image:
        radial-gradient(1100px 560px at 50% -20%, color-mix(in srgb, var(--verde-claro) 8%, transparent), transparent 62%),
        linear-gradient(180deg, var(--noche-2), var(--noche) 55%);
    border-top-width: 2px;
    font-feature-settings: "cv11", "ss01";
}
body::before { opacity: 0.3; }

h1, h2, h3 { letter-spacing: -0.005em; text-wrap: balance; }
p { text-wrap: pretty; }
dd, .stat-card dd, .colab-intro__cifra dd { font-variant-numeric: tabular-nums; }

/* Navegación lateral: activo sobrio con barra de acento */
.sidebar .navlink { position: relative; transition: color var(--rapido), background var(--rapido); }
.sidebar .navlink.is-activo {
    color: var(--papel);
    background: color-mix(in srgb, var(--verde-claro) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde-claro) 22%, transparent);
}
.sidebar .navlink.is-activo::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--verde-claro);
}
.sidebar .navlink.is-activo svg { color: var(--verde-claro); }

/* Botones: color sólido, sombra contenida */
.btn-hero-primario,
.btn-auth--primario {
    background: var(--verde-claro);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
}
.btn-hero-primario:hover,
.btn-auth:hover { filter: brightness(1.04); }
.btn-hero-primario:active,
.btn-hero-secundario:active,
.btn-auth:active { transform: translateY(0); filter: brightness(0.97); }
.btn-hero-secundario { background: rgba(255, 255, 255, 0.04); }
.btn-hero-secundario:hover { background: rgba(255, 255, 255, 0.08); }

/* Paneles: menos desenfoque (también rinde mejor en móviles modestos) */
.scorebug,
.sidebar,
.topbar,
.monitor,
.panel,
.ad-slot,
.auth-card,
.glass-panel {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Enlaces del pie */
.footer-links a { text-underline-offset: 3px; }
.footer-links a:hover { color: var(--papel); text-decoration: underline; }

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

/* ==========================================================================
   26. GUÍA DE LAS REGLAS, ACERCA DE Y 404
   ========================================================================== */
.guia { display: flex; flex-direction: column; gap: var(--gap); }

/* Aviso "solo en castellano": visible solo con otro idioma activo */
.guia-aviso-idioma {
    padding: 10px 14px;
    border-left: 3px solid var(--amarilla);
    border-radius: var(--radio-s);
    background: color-mix(in srgb, var(--amarilla) 8%, transparent);
    color: var(--tenue);
    font-size: 0.88rem;
}
html[lang="es"] .guia-aviso-idioma { display: none; }

.guia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    list-style: none;
}
.guia-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 20px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--rapido), transform var(--rapido);
}
.guia-card:hover,
.guia-card:focus-visible { border-color: var(--linea-fuerte); transform: translateY(-2px); }
.guia-card__regla { color: var(--verde-claro); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.guia-card__titulo { font-family: var(--fuente-display); font-size: 1.2rem; line-height: 1.15; }
.guia-card__desc { color: var(--tenue); font-size: 0.88rem; line-height: 1.5; flex: 1; }
.guia-card__leer { color: var(--verde-claro); font-size: 0.88rem; font-weight: 600; }

.guia-articulo { padding: 32px; max-width: 820px; width: 100%; }
.guia-articulo__cabecera { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.guia-articulo__cabecera h1 { font-family: var(--fuente-display); font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.1; }
.guia-articulo__intro { font-size: 1.05rem; line-height: 1.6; color: var(--papel); opacity: 0.9; }
.guia-articulo__cuerpo { display: flex; flex-direction: column; gap: 12px; }
.guia-articulo__cuerpo h2 { font-family: var(--fuente-display); font-size: 1.35rem; margin-top: 18px; }
.guia-articulo__cuerpo p,
.guia-articulo__cuerpo li { color: color-mix(in srgb, var(--papel) 82%, var(--tenue)); line-height: 1.65; }
.guia-articulo__cuerpo ul { display: flex; flex-direction: column; gap: 8px; padding-left: 1.2em; }
.guia-articulo__cuerpo li::marker { color: var(--verde-claro); }
.guia-articulo__cuerpo strong { color: var(--papel); }
.guia-articulo__cuerpo a { color: var(--verde-claro); text-underline-offset: 3px; }
.guia-articulo__nota { margin-top: 18px; color: var(--tenue); font-size: 0.8rem; line-height: 1.5; }

.guia-practica {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 26px;
    padding: 18px 20px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-m);
    background: color-mix(in srgb, var(--verde-claro) 7%, var(--panel));
}
.guia-practica--suelta { margin-top: 0; }
.guia-practica strong { font-family: var(--fuente-display); font-size: 1.15rem; }
.guia-practica p { color: var(--tenue); font-size: 0.9rem; margin-top: 2px; }
.guia-practica .btn-hero-primario { flex: none; }

.guia-siguiente {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    max-width: 820px;
}
.guia-siguiente span { color: var(--tenue); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.guia-siguiente a { color: var(--papel); font-weight: 600; text-decoration: none; }
.guia-siguiente a:hover { color: var(--verde-claro); }

.guia-enlaces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    list-style: none;
}
.guia-enlaces a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    color: var(--papel);
    font-size: 0.9rem;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color var(--rapido);
}
.guia-enlaces a:hover { border-color: var(--linea-fuerte); }
.guia-enlaces span { color: var(--verde-claro); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Franja de la guía en la portada */
.guia-inicio { display: flex; flex-direction: column; gap: 14px; }
.guia-inicio__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.guia-inicio__cabecera > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.guia-inicio__cabecera h2 { font-family: var(--fuente-display); font-size: var(--paso-2); line-height: 1.1; }
.guia-inicio__cabecera p { color: var(--tenue); max-width: 60ch; font-size: 0.95rem; }

.error-404 { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px; }

@media (max-width: 720px) {
    .guia-articulo { padding: 20px; }
    .guia-practica { flex-direction: column; align-items: stretch; text-align: left; }
    .guia-practica .btn-hero-primario { justify-content: center; }
}