@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;700;800&display=swap');

/* ═══════════════════════════════════════════════════
   QuiniTrackr — Mundial de Fútbol 2026
   "We Are 26" — Guía de Estilos Oficial
   ═══════════════════════════════════════════════════ */

:root {
    /* ── Mundial 2026 — Paleta Oficial ── */
    --negro-cancha:   #0E1512;          /* campo oscuro — máximo contraste  */
    --verde-profundo: #006B36;          /* verde institucional              */
    --verde-cesped:   #00A651;          /* verde césped vivo                */
    --oro:            #E5B838;          /* oro del trofeo                   */
    --oro-dark:       #C89B20;          /* oro oscuro para hover            */
    --papel:          #F7F5EF;          /* blanco cálido de papel           */
    --arena:          #EDEAE0;          /* superficie arena                 */
    --negro-suave:    #1B2620;          /* negro suave                      */

    /* Alias de compatibilidad (mantienen referencia semántica) */
    --pl-morado:      #006B36;          /* verde profundo como primario     */
    --pl-mint:        #E5B838;          /* oro como highlight               */
    --pl-mint-dark:   #C89B20;          /* oro oscuro                       */

    /* Superficies */
    --fondo:          #EAE7DF;          /* fondo cálido arena suave         */
    --surface:        #F7F5EF;          /* tarjetas papel blanco cálido     */
    --surface2:       #EDEAE0;          /* fondo alternado arena            */
    --nav-bg:         #0E1512;          /* navbar negro cancha              */

    /* Texto */
    --texto:          #0E1512;          /* negro cancha para texto          */
    --gris:           #596B5D;          /* gris verdoso neutro              */
    --blanco:         #ffffff;

    /* Semánticos */
    --verde:          #00A651;          /* verde césped — éxito             */
    --rojo:           #EA2A3C;          /* rojo acento                      */
    --azul:           #1565E0;          /* azul acento                      */
    --acento:         var(--oro);       /* acento = oro trofeo              */

    /* Bordes y sombras */
    --borde:          rgba(14,21,18,.13);
    --borde-table:    rgba(14,21,18,.08);
    --sombra:         0 2px 16px rgba(14,21,18,.10);
    --sombra-card:    0 1px 4px rgba(14,21,18,.06), 0 4px 16px rgba(14,21,18,.08);
}

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

body {
    font-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* El main crece para empujar el footer al fondo.
   width:100% evita que margin:auto del .container lo encoja al ancho del contenido. */
main { flex: 1; width: 100%; }

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: rgba(14,21,18,.2); border-radius: 3px; }

/* ── Inputs y selects globales ──────────────────── */
select, input[type="number"], input[type="text"] {
    background: var(--surface);
    color: var(--texto);
    border: 1.5px solid var(--borde);
    border-radius: 5px;
    padding: .3rem .5rem;
    font-family: inherit;
}
select:focus, input[type="number"]:focus, input[type="text"]:focus {
    outline: none;
    border-color: var(--pl-morado);
    box-shadow: 0 0 0 3px rgba(14,21,18,.1);
}

/* ══════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════ */
.navbar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--nav-bg);
    padding: 0 1.5rem;
    height: 58px;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.navbar-brand {
    display: flex; align-items: center; gap: .5rem;
    text-decoration: none;
}
.brand-icon { flex-shrink: 0; display: block; }
.brand-text {
    font-size: 1.15rem; font-weight: 900; letter-spacing: .06em;
    color: var(--blanco);
    text-transform: uppercase;
}
.navbar-menu  { display: flex; align-items: center; gap: .25rem; }
.navbar-menu a {
    color: rgba(255,255,255,.8); text-decoration: none;
    font-size: .88rem; font-weight: 600; padding: .4rem .75rem;
    border-radius: 4px; transition: background .15s, color .15s;
    text-transform: uppercase; letter-spacing: .04em;
}
.navbar-menu a:hover {
    background: rgba(255,255,255,.12);
    color: var(--blanco);
}
/* ── Avatar ─────────────────────────────────────── */
.avatar-wrapper {
    position: relative;
    display: flex; align-items: center;
}
.avatar-btn {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.12);
    cursor: pointer; padding: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, box-shadow .15s;
    flex-shrink: 0;
}
.avatar-btn-inicial {
    color: #fff; font-size: .88rem; font-weight: 900; line-height: 1;
}
.avatar-btn-img { display: flex; width: 100%; height: 100%; }
.avatar-btn-img svg { width: 100%; height: 100%; }
.avatar-btn:hover, .avatar-btn.active {
    border-color: var(--pl-mint);
    box-shadow: 0 0 0 3px rgba(229,184,56,.2);
}

/* Dropdown */
.avatar-dropdown {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 272px;
    background: var(--surface);
    border: 1px solid var(--borde);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(14,21,18,.18);
    z-index: 200;
    animation: modalIn .15s ease;
    overflow: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
}
.avatar-dropdown.open { display: block; }

.avatar-dd-header {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--borde);
    background: var(--surface2);
}
.avatar-dd-big {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--pl-morado);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
    border: 2px solid var(--borde);
}
.avatar-dd-big svg { width: 100%; height: 100%; display: block; }
.avatar-dd-info { min-width: 0; }
.avatar-dd-nombre {
    font-size: .92rem; font-weight: 800; color: var(--texto);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avatar-dd-email {
    font-size: .74rem; color: var(--gris);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: .1rem;
}

.avatar-dd-section {
    padding: .85rem 1rem 1rem;
    border-bottom: 1px solid var(--borde);
}
.avatar-dd-label {
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--gris); margin-bottom: .65rem;
}

/* Grid 4 columnas */
.avatar-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
.avatar-grid-opt {
    aspect-ratio: 1; border-radius: 10px; padding: 5px;
    background: var(--surface2); border: 2.5px solid transparent;
    cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s, border-color .12s, background .12s;
}
.avatar-grid-opt svg { width: 100%; height: 100%; display: block; }
.avatar-grid-opt:hover {
    transform: scale(1.08);
    background: var(--fondo);
    border-color: var(--borde);
}
.avatar-grid-opt.selected {
    border-color: var(--pl-morado);
    background: rgba(14,21,18,.07);
    box-shadow: 0 0 0 2px rgba(14,21,18,.12);
}

.avatar-dd-footer {
    padding: .65rem .75rem;
    border-top: 1px solid var(--borde);
    background: var(--surface);
}
.avatar-dd-btn {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; padding: .55rem .75rem;
    background: none; border: none; border-radius: 8px;
    font-size: .88rem; font-weight: 700; color: var(--texto);
    cursor: pointer; text-decoration: none;
    transition: background .12s;
    box-sizing: border-box;
}
.avatar-dd-btn:hover { background: var(--surface2); }
.avatar-dd-btn svg { flex-shrink: 0; }
.avatar-dd-btn-danger {
    color: #EA2A3C !important;
    background: rgba(228,0,70,.08);
    border: 1.5px solid rgba(228,0,70,.25);
    margin-top: .1rem;
}
.avatar-dd-btn-danger svg {
    stroke: #EA2A3C;
}
.avatar-dd-btn-danger:hover {
    background: rgba(228,0,70,.16);
    border-color: rgba(228,0,70,.5);
}

/* ── Navbar login button (guest) ─────────────── */
.navbar-login-btn {
    display: inline-flex; align-items: center;
    padding: .38rem .9rem;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 8px;
    color: #fff; font-size: .86rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.navbar-login-btn:hover {
    background: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.7);
    color: #fff;
}

/* ── Login gate overlay ───────────────────────── */
.login-gate-overlay {
    position: fixed; inset: 0;
    background: rgba(14,21,18,.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.login-gate-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 2.25rem 2rem 2rem;
    width: 100%; max-width: 390px;
    box-shadow: 0 24px 80px rgba(14,21,18,.4);
    border: 1px solid var(--borde);
    text-align: center;
    animation: modalIn .18s ease;
    position: relative;
}
.login-gate-close {
    position: absolute; top: .9rem; right: .9rem;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface2); border: 1px solid var(--borde);
    color: var(--gris); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
    padding: 0;
}
.login-gate-close:hover { background: var(--borde); color: var(--texto); }
.login-gate-brand {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-bottom: 1.6rem;
}
.login-gate-brand-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--negro-cancha);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.login-gate-brand-name {
    font-size: 1.05rem; font-weight: 900;
    color: var(--pl-morado); letter-spacing: -.02em;
}
.login-gate-title {
    font-size: 1.2rem; font-weight: 800;
    color: var(--texto); margin: 0 0 .35rem;
    line-height: 1.25;
}
.login-gate-sub {
    font-size: .86rem; color: var(--gris); margin: 0 0 1.4rem;
}
.login-gate-divider {
    display: flex; align-items: center; gap: .75rem;
    margin: 1rem 0; color: var(--gris); font-size: .76rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
}
.login-gate-divider::before,
.login-gate-divider::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.login-gate-error {
    background: rgba(228,0,70,.07);
    border: 1px solid rgba(228,0,70,.22);
    color: #EA2A3C; border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem; font-weight: 600;
    margin-bottom: .85rem; text-align: left;
}
.login-gate-form { text-align: left; }
.login-gate-form label {
    display: block; font-size: .8rem; font-weight: 700;
    color: var(--gris); text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: .75rem;
}
.login-gate-form label + label { margin-top: -.1rem; }
.login-gate-form input {
    display: block; width: 100%; margin-top: .3rem;
    padding: .58rem .75rem;
    background: var(--surface2); border: 1.5px solid var(--borde);
    border-radius: 8px; font-size: .95rem; color: var(--texto);
    outline: none; box-sizing: border-box;
    transition: border-color .15s, background .15s;
    font-family: inherit;
}
.login-gate-form input:focus {
    border-color: var(--pl-morado);
    background: var(--surface);
}
.login-gate-submit {
    display: block; width: 100%; margin-top: 1rem;
    padding: .68rem;
    background: var(--pl-morado); color: #fff;
    border: none; border-radius: 10px;
    font-size: .95rem; font-weight: 800; cursor: pointer;
    font-family: inherit;
    transition: opacity .15s, transform .1s;
}
.login-gate-submit:hover { opacity: .88; }
.login-gate-submit:active { transform: scale(.98); }
.login-gate-footer {
    margin-top: 1.25rem;
    font-size: .82rem; color: var(--gris);
}
.login-gate-footer a { color: var(--pl-morado); font-weight: 700; text-decoration: none; }
.login-gate-footer a:hover { text-decoration: underline; }
.login-gate-inline { display: none; }
.login-gate-inline.modal-visible { display: flex; }

/* Botón info flotante (FAB) */
.btn-info-fab {
    position: fixed; bottom: 5rem; right: 1.5rem; z-index: 90;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--pl-morado);
    border: 2px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.8);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(14,21,18,.35);
    transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn-info-fab:hover {
    background: #004d24;
    color: var(--pl-mint);
    box-shadow: 0 6px 20px rgba(14,21,18,.45);
    transform: scale(1.08);
}

/* Botón inline "Nueva quiniela" dentro del grupo */
.btn-nueva-quiniela-inline {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    background: transparent;
    border: 2px dashed rgba(0,166,81,.4);
    border-radius: 8px;
    padding: .8rem 1rem;
    color: var(--verde);
    font-family: inherit;
    font-size: .85rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-nueva-quiniela-inline svg { flex-shrink: 0; }
.btn-nueva-quiniela-inline:hover {
    background: rgba(0,166,81,.06);
    border-color: var(--verde);
    color: var(--verde-profundo);
}
.btn-nueva-quiniela-inline:active { opacity: .8; }

.btn-logout {
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.2); border-radius: 4px;
    padding: .3rem .8rem; font-size: .82rem; font-weight: 600;
    text-decoration: none; transition: background .15s;
    text-transform: uppercase; letter-spacing: .04em;
}
.btn-logout:hover { background: rgba(255,255,255,.22); color: var(--blanco); }

/* ══════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════ */
.container { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
.tabla-wrapper { overflow-x: auto; overscroll-behavior-x: contain; }

/* ══════════════════════════════════════════════════
   AUTH
   ══════════════════════════════════════════════════ */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--negro-cancha); }
.auth-card {
    background: var(--surface);
    border-radius: 12px; padding: 2.25rem 2rem;
    width: 100%; max-width: 400px;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.auth-card h1 {
    font-size: 1.7rem; font-weight: 900; letter-spacing: .5px;
    color: var(--pl-morado); margin-bottom: .15rem;
    text-transform: uppercase;
}
.auth-card h2  { font-size: .95rem; font-weight: 500; color: var(--gris); margin-bottom: 1.5rem; }
.auth-card label {
    display: flex; flex-direction: column; gap: .25rem;
    margin-bottom: 1rem; font-size: .88rem; color: var(--gris);
    font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
    padding: .6rem .75rem;
    background: var(--surface); border: 1.5px solid var(--borde);
    border-radius: 6px; font-size: 1rem; color: var(--texto);
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.auth-card input:focus {
    outline: none; border-color: var(--pl-morado);
    box-shadow: 0 0 0 3px rgba(14,21,18,.1);
}
.auth-card button {
    width: 100%; padding: .7rem;
    background: var(--pl-morado); color: var(--blanco);
    border: none; border-radius: 6px;
    font-size: .95rem; font-weight: 800; cursor: pointer;
    letter-spacing: .06em; text-transform: uppercase;
    transition: background .15s, box-shadow .15s;
}
.auth-card button:hover {
    background: #004d24;
    box-shadow: 0 4px 16px rgba(14,21,18,.35);
}
.auth-card p  { margin-top: 1rem; font-size: .88rem; color: var(--gris); }
.auth-card p a { color: var(--pl-morado); font-weight: 600; }
.error { color: var(--rojo); margin-bottom: 1rem; font-size: .88rem; font-weight: 600; }

/* ── Botón Google ───────────────────────────────── */
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: .65rem; margin-bottom: .25rem;
    background: var(--surface); color: var(--texto);
    border: 1.5px solid var(--borde); border-radius: 6px;
    font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.btn-google:hover {
    border-color: var(--pl-morado);
    box-shadow: 0 0 0 3px rgba(14,21,18,.08);
}
.google-divider {
    display: flex; align-items: center; gap: .6rem;
    margin: .9rem 0; color: var(--gris); font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
}
.google-divider::before,
.google-divider::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

/* ══════════════════════════════════════════════════
   QUINIELA HEADER
   ══════════════════════════════════════════════════ */
.quiniela-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem;
}
.quiniela-header h2 {
    font-size: 1.3rem; font-weight: 900; color: var(--pl-morado);
    text-transform: uppercase; letter-spacing: .03em;
}
.quiniela-header-acciones {
    display: flex; gap: .5rem; align-items: center; flex-shrink: 0;
}

/* ── Cabecera de sección (mis-quinielas) ────────── */
.seccion-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.seccion-header-inicio {
    display: flex; align-items: center; gap: .9rem;
}
.seccion-icono-live {
    width: 48px; height: 48px; flex-shrink: 0;
    background: rgba(14,21,18,.06);
    border: 1.5px solid rgba(14,21,18,.14);
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
}
.seccion-titulo-fila {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.seccion-titulo-fila h2 {
    font-size: 1.25rem; font-weight: 900; color: var(--pl-morado);
    text-transform: uppercase; letter-spacing: .04em; margin: 0;
}
.seccion-desc {
    font-size: .8rem; color: var(--gris);
    margin: .18rem 0 0; line-height: 1.45;
}
.live-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(0,166,81,.1); border: 1px solid rgba(0,166,81,.28);
    color: var(--verde); border-radius: 20px;
    font-size: .65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; padding: .18rem .55rem; white-space: nowrap;
}
.live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--verde); flex-shrink: 0;
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .35; transform: scale(.65); }
}

/* ══════════════════════════════════════════════════
   BOTONES ACCIÓN
   ══════════════════════════════════════════════════ */
.btn-guardar {
    background: var(--pl-morado); color: var(--blanco);
    border: none; border-radius: 5px;
    padding: .5rem 1.3rem; cursor: pointer;
    font-size: .88rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    transition: background .15s, box-shadow .15s;
    display: inline-flex; align-items: center; gap: .4rem;
}
.btn-guardar:hover {
    background: #004d24;
    box-shadow: 0 4px 14px rgba(14,21,18,.3);
}
.btn-volver {
    background: transparent; color: var(--gris);
    border: 1.5px solid var(--borde); border-radius: 5px;
    padding: .35rem .85rem; cursor: pointer; font-size: .85rem; font-weight: 600;
    text-decoration: none; display: inline-block;
    transition: color .15s, border-color .15s;
    text-transform: uppercase; letter-spacing: .04em;
}
.btn-volver:hover { color: var(--pl-morado); border-color: var(--pl-morado); }

/* ── Botones icono ──────────────────────────────── */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; border-radius: 5px;
    cursor: pointer; text-decoration: none; flex-shrink: 0;
    transition: opacity .15s, transform .1s;
}
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:hover { opacity: .82; transform: scale(1.05); }
.btn-icon-ver    { background: var(--surface2); color: var(--gris); border: 1.5px solid var(--borde); }
.btn-icon-editar { background: var(--surface2); color: var(--gris); border: 1.5px solid var(--borde); }
.btn-icon-borrar { background: var(--rojo); color: var(--blanco); }
.btn-icon-ver:hover    { color: var(--pl-morado); border-color: var(--pl-morado); }
.btn-icon-editar:hover { color: var(--texto); border-color: var(--gris); }

.btn-ver-resultados {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .3rem .75rem; border: none; border-radius: 5px;
    cursor: pointer; text-decoration: none; flex-shrink: 0;
    background: var(--pl-morado); color: var(--blanco);
    font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; white-space: nowrap;
    transition: opacity .15s;
}
.btn-ver-resultados:hover { opacity: .82; }

/* ══════════════════════════════════════════════════
   TABLA QUINIELA
   ══════════════════════════════════════════════════ */
.tabla-quiniela {
    width: 100%; border-collapse: collapse;
    background: var(--surface);
    border-radius: 10px; overflow: hidden;
    box-shadow: var(--sombra-card);
    border: 1px solid var(--borde);
}
.tabla-quiniela th, .tabla-quiniela td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--borde-table);
    vertical-align: middle;
}
.tabla-quiniela th {
    background: var(--negro-cancha);
    color: rgba(255,255,255,.85);
    font-weight: 700; text-align: center;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
}
/* Línea mint debajo del header de tabla */
.tabla-quiniela thead tr {
    border-bottom: 3px solid var(--pl-mint);
}
.tabla-quiniela tbody tr { transition: background .1s; }
.tabla-quiniela tbody tr:hover { background: var(--surface2); }
.tabla-quiniela tbody tr:nth-child(even) { background: #F0EDE5; }
.tabla-quiniela tbody tr:nth-child(even):hover { background: var(--surface2); }
.tabla-quiniela tbody tr:last-child td { border-bottom: none; }

/* Columnas fijas */
.col-num     { width: 36px; text-align: center; font-size: .85rem; white-space: nowrap; color: var(--gris); font-weight: 700; }
.num-live    { position: relative; display: inline-block; }
.col-partido { text-align: left; font-size: .92rem; min-width: 90px; }
.col-estado  { width: 88px; text-align: center; white-space: nowrap; }
.col-opciones{ text-align: center; white-space: nowrap; }
.col-res     { width: 68px; text-align: center; font-size: .82rem; white-space: nowrap; }
.partido     { color: var(--texto); font-weight: 500; }

/* ── Botones 1 X 2 / 0 1 2 M ───────────────────── */
.btn-opcion {
    width: 34px; height: 34px;
    border: 1.5px solid var(--borde); border-radius: 5px;
    touch-action: manipulation;
    background: var(--surface); cursor: pointer;
    font-weight: 800; font-size: .88rem; color: var(--gris);
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
    font-family: inherit;
}
.btn-opcion:hover:not(:disabled) {
    border-color: var(--oro); color: var(--negro-cancha);
    background: rgba(229,184,56,.12);
    box-shadow: 0 0 0 3px rgba(229,184,56,.18);
}
.btn-opcion:disabled { cursor: default; }
.btn-opcion.seleccionado {
    background: var(--oro); border-color: var(--oro); color: var(--negro-cancha);
    box-shadow: 0 2px 8px rgba(229,184,56,.4);
}
.btn-opcion.acierto {
    background: var(--verde); border-color: var(--verde); color: var(--blanco);
    box-shadow: 0 2px 8px rgba(0,166,81,.25);
}
.btn-opcion.fallo {
    background: var(--rojo); border-color: var(--rojo); color: var(--blanco);
    box-shadow: 0 2px 8px rgba(228,0,70,.2);
}

/* ── Fila normal ────────────────────────────────── */
.opciones-normal { display: flex; gap: 4px; justify-content: center; }

/* Badge Doble / Triple dentro de la celda */
.multi-badge {
    display: block; text-align: center; margin-top: 2px;
    font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: var(--pl-morado); background: rgba(14,21,18,.08);
    border-radius: 3px; padding: 0 4px; line-height: 1.5;
}

/* ── Fila Pleno al 15 ───────────────────────────── */
.fila-pleno           { background: rgba(0,166,81,.04) !important; }
.fila-pleno:hover     { background: rgba(0,166,81,.08) !important; }
.fila-pleno td        { border-color: rgba(0,166,81,.12) !important; }
.opciones-pleno       { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pleno-grupo          { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pleno-botones        { display: flex; gap: 3px; }
.pleno-eq-label {
    font-size: .7rem; color: var(--gris); font-weight: 700;
    max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-transform: uppercase; letter-spacing: .03em;
}
.pleno-guion  { font-weight: 800; color: var(--gris); font-size: 1.1rem; margin-top: 1.2rem; }
.pleno-label  { font-size: .68rem; color: var(--pl-morado); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* ══════════════════════════════════════════════════
   LISTA QUINIELAS (mis-quinielas)
   ══════════════════════════════════════════════════ */
.quinielas-grupo { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.quiniela-card {
    display: flex; align-items: center; gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--pl-morado);
    border-radius: 8px; padding: .85rem 1rem;
    transition: box-shadow .15s, border-color .15s;
    cursor: pointer;
}
.quiniela-card:hover {
    box-shadow: var(--sombra-card);
    border-left-color: var(--pl-mint-dark);
}
.card-info     { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.card-nombre   { font-weight: 700; font-size: .97rem; color: var(--pl-morado); }
.card-cols     { font-size: .78rem; color: var(--gris); }
.card-aciertos { font-size: .82rem; color: var(--verde); font-weight: 700; }
.card-acciones { display: flex; gap: .5rem; flex: 1; justify-content: flex-end; align-items: center; }

.card-progreso {
    flex: 0 0 33%; display: flex; flex-direction: column; gap: .25rem; justify-content: center;
}
.progreso-barra-wrap {
    height: 7px; background: var(--surface2);
    border-radius: 4px; overflow: hidden; border: 1px solid var(--borde);
}
.progreso-barra {
    height: 100%; background: var(--verde);
    border-radius: 4px; transition: width .3s ease;
    min-width: 0;
}
.progreso-label {
    font-size: .68rem; color: var(--gris); text-align: center; font-weight: 600;
}

/* ══════════════════════════════════════════════════
   RESUMEN ACIERTOS
   ══════════════════════════════════════════════════ */
.resumen-aciertos {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    background: var(--pl-morado);
    border-radius: 8px; padding: .85rem 1.1rem; margin-bottom: 1rem;
    color: var(--blanco);
}
.resumen-num   { font-size: 1.6rem; font-weight: 400; font-family: 'Anton', sans-serif; color: var(--pl-mint); }
.resumen-label { font-size: .88rem; color: rgba(255,255,255,.7); }
.resumen-col {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px; padding: .4rem .7rem; min-width: 52px;
}
.resumen-col-label { font-size: .7rem; color: rgba(255,255,255,.6); font-weight: 700; text-transform: uppercase; }

.sin-quinielas { color: var(--gris); font-size: .95rem; padding: .5rem 0; }
.limite-quinielas {
    font-size: .78rem; font-weight: 700; color: var(--gris);
    background: var(--surface2); border: 1px solid var(--borde);
    border-radius: 5px; padding: .3rem .75rem;
    text-transform: uppercase; letter-spacing: .04em;
}

.grupo-jornada {
    font-size: 1rem; font-weight: 900; color: var(--pl-morado);
    margin: 1.5rem 0 .5rem;
    display: flex; align-items: center; gap: .5rem;
    text-transform: uppercase; letter-spacing: .05em;
}

/* ══════════════════════════════════════════════════
   BADGES ESTADO JORNADA
   ══════════════════════════════════════════════════ */
.badge-estado {
    font-size: .7rem; font-weight: 800; padding: .2rem .6rem;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .06em;
}
.badge-abierta    { background: var(--oro); color: var(--negro-cancha); }
.badge-en_curso   { background: var(--rojo); color: #fff; }
.badge-finalizada { background: var(--pl-morado); color: rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════
   INPUT NOMBRE QUINIELA
   ══════════════════════════════════════════════════ */
.nombre-quiniela-row {
    display: flex; align-items: center; gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--borde);
    border-radius: 8px; padding: .65rem 1rem; margin-bottom: .75rem;
    box-shadow: 0 1px 4px rgba(14,21,18,.05);
}
.nombre-quiniela-label {
    font-size: .78rem; font-weight: 800; color: var(--gris);
    white-space: nowrap; text-transform: uppercase; letter-spacing: .06em;
}
.input-nombre-campo {
    flex: 1; min-width: 0; padding: .4rem .6rem;
    background: var(--surface2); border: 1.5px solid var(--borde);
    border-radius: 5px; font-size: .97rem; color: var(--texto);
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.input-nombre-campo:focus {
    outline: none; border-color: var(--pl-morado);
    box-shadow: 0 0 0 3px rgba(14,21,18,.1);
}
.input-nombre-campo.input-error { border-color: var(--rojo); }

/* ══════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════ */
.toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    padding: .65rem 1.5rem; border-radius: 8px;
    font-weight: 800; font-size: .9rem;
    animation: fadeInOut 2.8s ease forwards; z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    text-transform: uppercase; letter-spacing: .06em;
}
.toast-verde { background: var(--pl-mint); color: var(--pl-morado); }
.toast-rojo  { background: var(--rojo);   color: var(--blanco); }
@keyframes fadeInOut {
    0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ══════════════════════════════════════════════════
   MARCADOR RESULTADO
   ══════════════════════════════════════════════════ */
.marcador { font-weight: 800; color: var(--texto); }
.outcome-badge {
    display: inline-block; margin-left: 4px;
    font-size: .7rem; font-weight: 800;
    background: var(--negro-cancha); color: var(--blanco);
    padding: .1rem .4rem; border-radius: 3px;
    text-transform: uppercase;
}

.no-jornada { text-align: center; color: var(--gris); margin-top: 3rem; font-size: 1.1rem; }

/* ══════════════════════════════════════════════════
   PARPADEO VIVO
   ══════════════════════════════════════════════════ */
@keyframes parpadeo-vivo {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}
.btn-opcion.acierto-vivo {
    background: var(--verde); border-color: var(--verde); color: var(--blanco);
    box-shadow: 0 0 12px rgba(0,166,81,.5);
    animation: parpadeo-vivo 1s ease-in-out infinite;
}
.btn-opcion.fallo-vivo {
    background: var(--rojo); border-color: var(--rojo); color: var(--blanco);
    box-shadow: 0 0 12px rgba(228,0,70,.4);
    animation: parpadeo-vivo 1s ease-in-out infinite;
}
.live-dot {
    position: absolute; top: -3px; right: -9px;
    width: 7px; height: 7px;
    background: var(--rojo); border-radius: 50%;
    box-shadow: 0 0 6px rgba(228,0,70,.7);
    animation: parpadeo-vivo 1s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   BADGE ESTADO PARTIDO
   ══════════════════════════════════════════════════ */
.badge-partido-estado {
    display: inline-block; font-size: .68rem; font-weight: 800;
    padding: .18rem .5rem; border-radius: 3px;
    text-transform: uppercase; letter-spacing: .05em;
}
.estado-por-jugar  { background: rgba(14,21,18,.07);  color: var(--gris); }
.estado-en-juego   { background: var(--pl-mint);     color: var(--pl-morado); }
.estado-finalizado { background: var(--negro-cancha);  color: rgba(255,255,255,.75); }

/* ══════════════════════════════════════════════════
   SELECT ESTADO PARTIDO (admin)
   ══════════════════════════════════════════════════ */
.select-estado {
    border: 1.5px solid var(--borde); border-radius: 5px;
    padding: .28rem .5rem; font-size: .82rem; font-weight: 700; cursor: pointer;
    background: var(--surface); color: var(--texto); font-family: inherit;
}
.select-estado-por_jugar  { color: var(--gris); }
.select-estado-en_juego   { color: var(--pl-morado); border-color: var(--pl-mint-dark); }
.select-estado-finalizado { color: var(--pl-morado); border-color: rgba(14,21,18,.3); }

/* ══════════════════════════════════════════════════
   COLUMNAS CONTROL
   ══════════════════════════════════════════════════ */
.columnas-control { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; row-gap: .4rem; margin-bottom: .5rem; }
.columnas-info    { font-size: .82rem; color: var(--gris); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.btn-col-add, .btn-col-remove {
    border: none; border-radius: 5px;
    padding: .3rem .85rem; cursor: pointer;
    font-size: .82rem; font-weight: 800; transition: opacity .15s;
    letter-spacing: .04em; font-family: inherit; text-transform: uppercase;
    touch-action: manipulation;
}
.btn-col-add    { background: var(--pl-morado); color: var(--blanco); }
.btn-col-remove { background: var(--surface); color: var(--gris); border: 1.5px solid var(--borde); }
.btn-col-add:hover    { background: #004d24; }
.btn-col-remove:hover { color: var(--pl-morado); border-color: var(--pl-morado); }

/* ══════════════════════════════════════════════════
   HISTÓRICO JORNADAS (index)
   ══════════════════════════════════════════════════ */
.jornada-bloque {
    margin-bottom: 2rem;
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-card);
    transition: box-shadow .2s;
}
.jornada-bloque:hover { box-shadow: 0 4px 24px rgba(14,21,18,.12); }
.jornada-bloque-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .5rem;
    background: var(--negro-cancha);
    padding: .9rem 1.15rem;
    border-bottom: 3px solid var(--oro);
}
.jornada-bloque-meta {
    display: flex; flex-direction: column; gap: .1rem;
}
.jornada-bloque-titulo {
    font-size: 1rem; font-weight: 900; color: var(--blanco);
    text-transform: uppercase; letter-spacing: .06em; line-height: 1.2;
}
.jornada-bloque-fecha {
    font-size: .76rem; color: rgba(255,255,255,.55);
    font-weight: 500; letter-spacing: .02em;
}
.jornada-bloque-derecha {
    display: flex; align-items: center; gap: .6rem; flex-shrink: 0;
}
.jornada-bloque-count {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: rgba(255,255,255,.45);
    white-space: nowrap;
}
/* Tabla sin bordes propios dentro del bloque */
.jornada-bloque .tabla-quiniela {
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.jornada-bloque .tabla-quiniela thead tr { border-bottom: none; }
.tabla-historico td.col-res { color: var(--texto); font-weight: 700; }

/* ══════════════════════════════════════════════════
   HOMEPAGE — HERO, INFO, FAQ
   ══════════════════════════════════════════════════ */
.home-hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
    margin-bottom: .5rem;
}
.home-hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(14,21,18,.07);
    border: 1px solid rgba(14,21,18,.15);
    border-radius: 20px;
    padding: .3rem .9rem;
    font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--pl-morado);
    margin-bottom: 1rem;
}
.home-hero h1 {
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-family: 'Anton', 'Archivo', sans-serif;
    font-weight: 400;
    color: var(--pl-morado);
    line-height: 1.12;
    margin: 0 0 .75rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.home-hero-desc {
    font-size: .97rem;
    color: var(--gris);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ── Info section ─────────────────────────────── */
.home-info {
    margin: 3rem 0;
    padding: 2.75rem 0;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}
.home-info-header {
    text-align: center;
    margin-bottom: 2rem;
}
.home-info-eyebrow {
    display: inline-block;
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .12em; color: var(--pl-mint-dark);
    margin-bottom: .45rem;
}
.home-info-header h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 900; color: var(--pl-morado);
    margin: 0; letter-spacing: -.01em;
}
.home-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}
.home-info-card {
    background: var(--surface);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 1.6rem 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    box-shadow: var(--sombra-card);
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.home-info-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--pl-mint);
}
.home-info-card:hover {
    box-shadow: 0 6px 28px rgba(14,21,18,.13);
    transform: translateY(-2px);
}
.home-info-num {
    position: absolute; top: 1rem; right: 1.1rem;
    font-size: 3.2rem; font-weight: 400; line-height: 1;
    font-family: 'Anton', sans-serif;
    color: rgba(14,21,18,.05);
    user-select: none; pointer-events: none;
}
.home-info-icon {
    width: 44px; height: 44px;
    background: rgba(14,21,18,.07);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--pl-morado);
    flex-shrink: 0;
}
.home-info-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--pl-morado);
    margin: 0;
}
.home-info-card p {
    font-size: .86rem;
    color: var(--gris);
    line-height: 1.6;
    margin: 0;
}

/* ── FAQ accordion ────────────────────────────── */
.home-faq {
    margin: 3rem 0 1rem;
}
.home-faq-header {
    margin-bottom: 1.4rem;
}
.home-faq-header h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 900; color: var(--pl-morado);
    margin: .2rem 0 0; letter-spacing: -.01em;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-card);
}
.faq-item {
    background: var(--surface);
    border-bottom: 1px solid var(--borde);
}
.faq-item:last-child { border-bottom: none; }
.faq-item dt {
    font-weight: 700;
    font-size: .93rem;
    color: var(--texto);
    padding: 1.05rem 1.25rem;
    margin: 0;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    cursor: pointer; user-select: none;
    transition: background .15s, color .15s;
}
.faq-item dt:hover { background: var(--surface2); color: var(--pl-morado); }
.faq-item.open dt  { color: var(--pl-morado); background: var(--surface2); }
.faq-chevron {
    flex-shrink: 0;
    color: var(--gris);
    transition: transform .22s ease;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--pl-morado); }
.faq-item dd {
    font-size: .875rem;
    color: var(--gris);
    line-height: 1.65;
    padding: 0 1.25rem 1.1rem;
    margin: 0;
    display: none;
    border-top: 1px solid var(--borde);
}
.faq-item.open dd { display: block; }

/* ══════════════════════════════════════════════════
   ESCALA ADAPTATIVA (multi-columna)
   ══════════════════════════════════════════════════ */
.tabla-quiniela[data-cols="4"] .btn-opcion,
.tabla-quiniela[data-cols="5"] .btn-opcion { width: 29px; height: 29px; font-size: .82rem; }
.tabla-quiniela[data-cols="4"] .opciones-normal,
.tabla-quiniela[data-cols="5"] .opciones-normal { gap: 3px; }
.tabla-quiniela[data-cols="4"] .pleno-botones,
.tabla-quiniela[data-cols="5"] .pleno-botones   { gap: 2px; }
.tabla-quiniela[data-cols="4"] th,
.tabla-quiniela[data-cols="4"] td,
.tabla-quiniela[data-cols="5"] th,
.tabla-quiniela[data-cols="5"] td { padding: .45rem .5rem; }

.tabla-quiniela[data-cols="6"] .btn-opcion,
.tabla-quiniela[data-cols="7"] .btn-opcion,
.tabla-quiniela[data-cols="8"] .btn-opcion { width: 24px; height: 24px; font-size: .74rem; }
.tabla-quiniela[data-cols="6"] .opciones-normal,
.tabla-quiniela[data-cols="7"] .opciones-normal,
.tabla-quiniela[data-cols="8"] .opciones-normal { gap: 2px; }
.tabla-quiniela[data-cols="6"] .pleno-botones,
.tabla-quiniela[data-cols="7"] .pleno-botones,
.tabla-quiniela[data-cols="8"] .pleno-botones   { gap: 2px; }
.tabla-quiniela[data-cols="6"] th,
.tabla-quiniela[data-cols="6"] td,
.tabla-quiniela[data-cols="7"] th,
.tabla-quiniela[data-cols="7"] td,
.tabla-quiniela[data-cols="8"] th,
.tabla-quiniela[data-cols="8"] td { padding: .35rem .35rem; }
.tabla-quiniela[data-cols="6"] .col-partido,
.tabla-quiniela[data-cols="7"] .col-partido,
.tabla-quiniela[data-cols="8"] .col-partido { font-size: .82rem; }

/* ══════════════════════════════════════════════════
   MODAL INFORMACIÓN
   ══════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 500;
    background: rgba(14,21,18,.55);
    backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
    padding: 1rem;
}
.modal-overlay.modal-visible { display: flex; }

.modal-box {
    position: relative;
    background: var(--surface);
    border-radius: 14px;
    width: 100%; max-width: 560px;
    max-height: 90vh; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(14,21,18,.35);
    animation: modalIn .2s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.modal-close {
    position: absolute; top: 1rem; right: 1rem;
    background: var(--surface2); border: 1px solid var(--borde);
    border-radius: 50%; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--gris);
    transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--rojo); color: var(--blanco); border-color: var(--rojo); }

.modal-header {
    display: flex; align-items: center; gap: .75rem;
    background: var(--negro-cancha);
    border-radius: 14px 14px 0 0;
    padding: 1.25rem 1.5rem;
}
.modal-header h2 {
    font-size: 1.1rem; font-weight: 900; color: var(--blanco);
    text-transform: uppercase; letter-spacing: .06em; margin: 0;
}

.modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; }

.modal-lead {
    font-size: .95rem; color: var(--texto); line-height: 1.6;
    margin-bottom: 1.1rem;
}

.modal-list {
    list-style: none; margin-bottom: 1.25rem;
    display: flex; flex-direction: column; gap: .45rem;
}
.modal-list li {
    font-size: .88rem; padding: .35rem .6rem;
    border-radius: 5px; display: flex; align-items: flex-start; gap: .5rem;
}
.modal-list-ok {
    background: rgba(0,166,81,.07); color: var(--texto);
}
.modal-list-ok::before {
    content: '✓'; color: var(--verde); font-weight: 900; flex-shrink: 0;
}
.modal-list-no {
    background: rgba(228,0,70,.06); color: var(--texto);
}
.modal-list-no::before {
    content: '✕'; color: var(--rojo); font-weight: 900; flex-shrink: 0;
}

.modal-aviso {
    background: rgba(14,21,18,.05);
    border-left: 4px solid var(--pl-morado);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.modal-aviso strong { font-size: .9rem; color: var(--pl-morado); display: block; margin-bottom: .6rem; }
.modal-aviso p {
    font-size: .82rem; color: var(--gris); line-height: 1.55;
    margin-bottom: .5rem;
}
.modal-aviso p:last-child { margin-bottom: 0; }

.modal-contacto {
    display: flex; flex-direction: column; align-items: center;
    gap: .5rem; text-align: center;
    border-top: 1px solid var(--borde);
    padding-top: 1.1rem; margin-top: .75rem;
}
.modal-contacto-label {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--gris);
}
.modal-contacto-link {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--surface2); border: 1.5px solid var(--borde);
    border-radius: 8px; padding: .5rem 1.1rem;
    color: var(--pl-morado); text-decoration: none;
    font-size: .92rem; font-weight: 700;
    transition: background .15s, border-color .15s;
}
.modal-contacto-link svg { flex-shrink: 0; opacity: .75; }
.modal-contacto-link:hover {
    background: rgba(14,21,18,.06);
    border-color: var(--pl-morado);
}

.modal-footer-text {
    text-align: center; font-size: .75rem; color: var(--gris);
    font-style: italic; margin-top: .75rem;
}

/* Modal de confirmación de borrado */
.modal-box-sm { max-width: 400px; }

.modal-borrar-body {
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
}
.modal-borrar-icono {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(228,0,70,.1);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.modal-borrar-icono svg {
    width: 26px; height: 26px; stroke: var(--rojo); stroke-width: 2.5;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.modal-borrar-titulo {
    font-size: 1.05rem; font-weight: 900; color: var(--texto);
    margin-bottom: .4rem;
}
.modal-borrar-desc {
    font-size: .88rem; color: var(--gris); line-height: 1.5;
    margin-bottom: 1.4rem;
}
.modal-borrar-desc strong { color: var(--texto); }
.modal-borrar-acciones {
    display: flex; gap: .65rem; justify-content: center;
}
.btn-borrar-confirmar {
    flex: 1; max-width: 150px;
    background: var(--rojo); color: #fff;
    border: none; border-radius: 7px;
    padding: .55rem 1rem; font-size: .9rem; font-weight: 800;
    cursor: pointer; transition: background .15s;
}
.btn-borrar-confirmar:hover { background: #C01830; }
.btn-borrar-cancelar {
    flex: 1; max-width: 150px;
    background: var(--surface2); color: var(--texto);
    border: 1.5px solid var(--borde); border-radius: 7px;
    padding: .55rem 1rem; font-size: .9rem; font-weight: 700;
    cursor: pointer; transition: background .15s, border-color .15s;
}
.btn-borrar-cancelar:hover { background: var(--fondo); border-color: var(--pl-morado); }

/* ══════════════════════════════════════════════════
   BALANCE
   ══════════════════════════════════════════════════ */

/* Checkbox "Activar balance" */
.balance-toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; font-weight: 800; color: var(--gris);
    text-transform: uppercase; letter-spacing: .05em;
    cursor: pointer; user-select: none;
    margin-left: .5rem;
}
.balance-toggle input[type="checkbox"] {
    accent-color: var(--pl-morado);
    width: 15px; height: 15px; cursor: pointer; flex-shrink: 0;
}
.balance-toggle:hover { color: var(--pl-morado); }

.balance-help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: rgba(14,21,18,.1);
    color: var(--gris); font-size: .65rem; font-weight: 900;
    cursor: help; opacity: .55;
    position: relative; flex-shrink: 0;
    transition: opacity .15s;
    line-height: 1;
}
.balance-help-icon:hover { opacity: 1; }
.balance-help-icon::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: var(--pl-morado); color: #fff;
    font-size: .75rem; font-weight: 500; line-height: 1.45;
    padding: .5rem .75rem; border-radius: 9px;
    white-space: normal; width: 210px; text-align: left;
    pointer-events: none; opacity: 0;
    transition: opacity .15s .05s;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(14,21,18,.25);
    text-transform: none; letter-spacing: 0;
}
.balance-help-icon:hover::after { opacity: 1; }

/* Panel de balance */
.balance-panel {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
    background: var(--negro-cancha);
    border-radius: 8px; padding: .75rem 1.1rem; margin-bottom: .6rem;
    color: var(--blanco);
    animation: fadeInDown .2s ease;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Estadísticas individuales */
.balance-stat {
    display: flex; flex-direction: column; align-items: center;
    min-width: 64px; padding: 0 .4rem;
    border-right: 1px solid rgba(255,255,255,.12);
}
.balance-stat:last-of-type { border-right: none; }
.balance-stat-label {
    font-size: .62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(255,255,255,.55);
    white-space: nowrap;
}
.balance-stat-value {
    font-size: 1.2rem; font-weight: 900; color: var(--blanco); line-height: 1.2;
}
.balance-stat-coste .balance-stat-value {
    color: var(--pl-mint); font-size: 1.35rem;
}

/* Sección de dobles/triples */
.balance-multiples {
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
    padding-left: .25rem; flex: 1;
}
.balance-badge {
    font-size: .72rem; font-weight: 800; padding: .2rem .55rem;
    border-radius: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.badge-doble  {
    background: rgba(229,184,56,.18); color: var(--pl-mint);
    border: 1px solid rgba(229,184,56,.3);
}
.badge-triple {
    background: rgba(255,215,0,.18); color: #E5B838;
    border: 1px solid rgba(255,215,0,.3);
}
.badge-pleno {
    background: rgba(255,140,0,.18); color: #ff8c00;
    border: 1px solid rgba(255,140,0,.3);
}
.balance-solo {
    font-size: .78rem; color: rgba(255,255,255,.45); font-style: italic;
}
.balance-nota {
    margin-left: auto;
    display: flex; align-items: flex-start; gap: .3rem;
    font-size: .68rem; color: rgba(255,255,255,.38); line-height: 1.45;
    max-width: 260px; flex-shrink: 1;
}
.balance-nota strong { font-weight: 800; color: rgba(255,255,255,.5); }
@media (max-width: 600px) {
    .balance-nota { max-width: 100%; margin-left: 0; }
}

/* ══════════════════════════════════════════════════
   BOTÓN CANCELAR (vista formulario)
   ══════════════════════════════════════════════════ */

.btn-cancelar-form {
    display: inline-flex; align-items: center; gap: .25rem;
    background: transparent;
    border: 1.5px solid var(--borde);
    color: var(--gris);
    border-radius: 6px; padding: .38rem .85rem;
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-cancelar-form:hover {
    background: var(--surface2);
    border-color: var(--pl-morado);
    color: var(--pl-morado);
}

/* ══════════════════════════════════════════════════
   BALANCE
   ══════════════════════════════════════════════════ */

.balance-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem;
}
.balance-page-header h2 {
    font-size: 1.4rem; font-weight: 900; color: var(--texto);
    text-transform: uppercase; letter-spacing: .05em;
}

.balance-empty {
    background: var(--surface); border: 1px solid var(--borde);
    border-radius: 10px; padding: 2rem; text-align: center;
    color: var(--gris); line-height: 1.7;
}
.balance-guest-cta {
    display: flex; flex-direction: column; align-items: center;
    gap: 1rem; padding: 3rem 1.5rem; text-align: center;
}
.balance-guest-cta .guest-lock-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--borde);
    display: flex; align-items: center; justify-content: center;
    color: var(--oro);
}
.balance-guest-cta h3 {
    font-size: 1.25rem; font-weight: 900; color: var(--texto);
    margin: 0;
}
.balance-guest-cta p {
    color: var(--gris); font-size: .9rem; max-width: 280px;
    margin: 0; line-height: 1.6;
}
.balance-guest-cta .btn-cta-login {
    display: inline-block; padding: .65rem 1.75rem;
    background: var(--pl-morado); color: #fff;
    border-radius: 8px; font-weight: 700; font-size: .95rem;
    text-decoration: none; transition: opacity .15s;
}
.balance-guest-cta .btn-cta-login:hover { opacity: .85; }
.balance-guest-cta .guest-register-link {
    font-size: .82rem; color: var(--gris);
}
.balance-guest-cta .guest-register-link a {
    color: var(--pl-morado); font-weight: 700; text-decoration: none;
}
.balance-guest-cta .guest-register-link a:hover { text-decoration: underline; }

/* Tarjetas resumen */
.balance-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin-bottom: 1.25rem;
}
.balance-card {
    background: var(--surface); border: 1px solid var(--borde);
    border-radius: 12px; padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: .25rem;
    box-shadow: var(--sombra-card);
}
.balance-card-label {
    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--gris);
}
.balance-card-valor {
    font-size: 1.7rem; font-weight: 900; letter-spacing: -.01em; line-height: 1.1;
}
.balance-card-gasto  .balance-card-valor { color: var(--rojo); }
.balance-card-ganado .balance-card-valor { color: var(--verde); }
.balance-card-neto.positivo .balance-card-valor { color: var(--verde); }
.balance-card-neto.negativo .balance-card-valor { color: var(--rojo); }
.balance-card-neto { border-top: 3px solid transparent; }
.balance-card-neto.positivo { border-top-color: var(--verde); }
.balance-card-neto.negativo { border-top-color: var(--rojo); }

/* Gráfica */
.balance-chart-card {
    background: var(--surface); border: 1px solid var(--borde);
    border-radius: 12px; padding: 1rem 1.25rem 1rem;
    margin-bottom: 1.25rem; box-shadow: var(--sombra-card);
}
.balance-chart-legend {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    margin-bottom: .75rem;
}
.legend-item {
    display: flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 600; color: var(--gris);
}
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-line-icon {
    width: 18px; height: 2px; background: var(--pl-morado);
    border-radius: 2px; flex-shrink: 0; opacity: .6;
}
.balance-chart-svg { width: 100%; height: auto; display: block; }
.chart-empty {
    text-align: center; padding: 2rem 1rem; color: var(--gris);
    font-size: .9rem; line-height: 1.7;
}

/* Tabla por jornada */
.balance-tabla-card {
    background: var(--surface); border: 1px solid var(--borde);
    border-radius: 12px; overflow: hidden; box-shadow: var(--sombra-card);
}
.balance-tabla {
    width: 100%; border-collapse: collapse; font-size: .9rem;
}
.balance-tabla thead th {
    background: var(--negro-cancha); color: rgba(255,255,255,.75);
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; padding: .65rem 1rem; text-align: left;
    border-bottom: 3px solid var(--pl-mint);
}
.balance-tabla tbody tr {
    border-bottom: 1px solid var(--borde-table);
    transition: background .12s;
}
.balance-tabla tbody tr:last-child { border-bottom: none; }
.balance-tabla tbody tr:hover { background: var(--surface2); }
.balance-tabla td { padding: .65rem 1rem; vertical-align: middle; }

.jornada-num {
    font-weight: 800; color: var(--texto); margin-right: .4rem;
}
.jornada-temp { font-size: .78rem; color: var(--gris); }

.monto-gasto  { color: var(--rojo);  font-weight: 700; }
.monto-ganado { color: var(--verde); font-weight: 700; }
.sin-dato { color: var(--gris); font-size: .85rem; }

.badge-neto {
    display: inline-block; padding: .2rem .55rem;
    border-radius: 5px; font-size: .82rem; font-weight: 800;
}
.badge-positivo { background: rgba(0,166,81,.1);  color: var(--verde); }
.badge-negativo { background: rgba(228,0,70,.08); color: var(--rojo);  }

.btn-añadir-ganancia {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--surface2); border: 1.5px solid var(--borde);
    color: var(--pl-morado); border-radius: 7px; padding: .3rem .7rem;
    font-size: .78rem; font-weight: 700; cursor: pointer;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}
.btn-añadir-ganancia:hover {
    background: rgba(14,21,18,.07); border-color: var(--pl-morado);
}

@media (max-width: 600px) {
    .balance-cards { grid-template-columns: 1fr; }
    .balance-card-valor { font-size: 1.4rem; }
    .balance-tabla thead th:nth-child(2),
    .balance-tabla tbody td:nth-child(2) { display: none; }
    .balance-tabla td, .balance-tabla thead th { padding: .55rem .65rem; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .container  { margin: .75rem auto; padding: 0 .5rem; }
    .navbar     { padding: 0 .75rem; height: 50px; }
    .navbar-brand { font-size: 1rem; }
    .navbar-menu  { gap: .25rem; }
    .navbar-menu a { font-size: .78rem; padding: .3rem .5rem; }
    .quiniela-header h2 { font-size: 1rem; }
    .btn-guardar { padding: .4rem .9rem; font-size: .82rem; }
    .tabla-quiniela th, .tabla-quiniela td { padding: .4rem .35rem; }
    .btn-opcion  { width: 28px; height: 28px; font-size: .8rem; }
    .opciones-normal  { gap: 3px; }
    .col-num     { width: 26px; font-size: .78rem; }
    .col-res     { width: 54px; font-size: .75rem; }
    .col-partido { font-size: .82rem; min-width: 70px; }
    .pleno-eq-label  { max-width: 60px; font-size: .65rem; }
    .pleno-botones   { gap: 2px; }
    .resumen-num     { font-size: 1.15rem; }
    /* Jornada header compacto en móvil */
    .jornada-bloque-titulo { font-size: .9rem; }
    .jornada-bloque-count  { display: none; }
    .jornada-bloque-header { padding: .75rem .9rem; gap: .4rem; }
    /* Hero compacto */
    .home-hero { padding: 2rem 1rem 1.25rem; }
    .home-hero-badge { font-size: .68rem; padding: .25rem .7rem; }
    /* Info section */
    .home-info { margin: 1.25rem 0 2rem; padding: 2rem 0; }
    .home-info-card { padding: 1.3rem 1.1rem 1.2rem; }
    .home-info-num  { font-size: 2.2rem; }
    /* FAQ */
    .faq-item dt { padding: .9rem 1rem; font-size: .88rem; }
    .faq-item dd  { padding: 0 1rem .9rem; }
}

@media (max-width: 480px) {
    .col-estado { display: none; }
    /* Ocultar links de navegación del desktop; el avatar-wrapper es un div, no se ve afectado */
    .navbar-menu > a,
    .navbar-menu > span { display: none; }
    .btn-opcion  { width: 24px; height: 24px; font-size: .72rem; }
    .col-partido { min-width: 55px; font-size: .78rem; }
    .pleno-eq-label { max-width: 45px; }
    .balance-toggle { margin-left: 0; }
    .columnas-info { font-size: .78rem; }

    /* Quiniela header: wrap title + buttons to separate rows */
    .quiniela-header { flex-wrap: wrap; row-gap: .4rem; }
    .quiniela-header h2 { font-size: .95rem; }
    .quiniela-header-acciones { margin-left: auto; }

    /* Cards (mis-quinielas): info+actions on row 1, progress bar on row 2 */
    .quiniela-card { flex-wrap: wrap; gap: .5rem .75rem; }
    .card-info     { flex: 1 1 0; }
    .card-acciones { flex: 0 0 auto; }
    .card-progreso { flex: 0 0 100%; order: 3; }

    /* Section header icon */
    .seccion-icono-live { width: 38px; height: 38px; border-radius: 10px; }

    /* Balance panel: compact stats */
    .balance-stat { min-width: 52px; }
    .balance-stat-value { font-size: 1rem; }
    .balance-stat-coste .balance-stat-value { font-size: 1.15rem; }

    /* Columnas control buttons: compact */
    .btn-col-add, .btn-col-remove { padding: .25rem .6rem; font-size: .78rem; }
}

/* ══════════════════════════════════════════════════
   MENÚ HAMBURGUESA Y MENÚ MÓVIL
   ══════════════════════════════════════════════════ */
.hamburger {
    display: none;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 8px; cursor: pointer; padding: 0;
    transition: background .15s;
    flex-shrink: 0;
}
.hamburger span {
    display: block; width: 18px; height: 2px;
    background: rgba(255,255,255,.9); border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.hamburger:hover { background: rgba(255,255,255,.22); }

@media (max-width: 480px) {
    .hamburger { display: flex; }
}

/* Overlay y panel del menú móvil */
.mobile-menu-overlay {
    display: none;
    visibility: hidden;
    position: fixed; inset: 0; z-index: 300;
    background: rgba(14,21,18,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.mobile-menu-overlay.open {
    display: block;
    visibility: visible;
}

.mobile-menu-panel {
    position: absolute; top: 0; right: 0;
    width: min(320px, 88vw); height: 100%;
    background: var(--surface);
    display: flex; flex-direction: column;
    box-shadow: -8px 0 40px rgba(14,21,18,.25);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .22s ease;
}
.mobile-menu-overlay.open .mobile-menu-panel {
    transform: translateX(0);
}

/* Garantía absoluta: hamburguesa y menú móvil invisibles en desktop */
@media (min-width: 481px) {
    .hamburger { display: none !important; }
    .mobile-menu-overlay { display: none !important; visibility: hidden !important; }
}

.mobile-menu-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1rem;
    background: var(--negro-cancha);
    flex-shrink: 0;
}
.mobile-menu-brand {
    display: flex; align-items: center; gap: .5rem;
    color: #fff; font-size: .95rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .06em;
}
.mobile-menu-close {
    background: rgba(255,255,255,.12); border: none;
    color: rgba(255,255,255,.8); border-radius: 50%;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: background .15s;
}
.mobile-menu-close:hover { background: rgba(255,255,255,.25); }

.mobile-menu-nav {
    padding: .75rem .5rem;
    flex: 1;
    display: flex; flex-direction: column; gap: .15rem;
}
.mobile-menu-nav a {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    color: var(--texto); text-decoration: none;
    font-size: .97rem; font-weight: 700;
    transition: background .15s, color .15s;
}
.mobile-menu-nav a svg { stroke: var(--gris); flex-shrink: 0; transition: stroke .15s; }
.mobile-menu-nav a:hover { background: var(--surface2); color: var(--pl-morado); }
.mobile-menu-nav a:hover svg { stroke: var(--pl-morado); }
.mobile-menu-admin { color: var(--pl-mint) !important; }
.mobile-menu-admin svg { stroke: var(--pl-mint) !important; }
.mobile-menu-login {
    margin-top: .5rem;
    background: var(--negro-cancha) !important;
    color: #fff !important;
    border-radius: 10px;
}
.mobile-menu-login svg { stroke: rgba(255,255,255,.8) !important; }
.mobile-menu-login:hover { background: var(--verde-profundo) !important; color: #fff !important; }

.mobile-menu-user {
    border-top: 1px solid var(--borde);
    padding: .85rem 1rem;
    flex-shrink: 0;
}
.mobile-menu-user-info {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: .75rem;
}
.mobile-menu-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--pl-morado);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: #fff; font-size: 1rem;
    flex-shrink: 0; overflow: hidden;
}
.mobile-menu-avatar svg { width: 100%; height: 100%; display: block; }
.mobile-menu-user-name { font-size: .9rem; font-weight: 800; color: var(--texto); }
.mobile-menu-user-email { font-size: .75rem; color: var(--gris); margin-top: .1rem; word-break: break-all; }
.mobile-menu-logout {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; padding: .55rem .75rem;
    background: rgba(228,0,70,.07); border: 1.5px solid rgba(228,0,70,.2);
    border-radius: 8px; color: #EA2A3C;
    font-size: .88rem; font-weight: 700; text-decoration: none;
    transition: background .15s;
}
.mobile-menu-logout svg { stroke: #EA2A3C; flex-shrink: 0; }
.mobile-menu-logout:hover { background: rgba(228,0,70,.14); }

/* ══════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════ */
.site-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--borde);
    background: var(--surface);
}
.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}
.site-footer-copy {
    font-size: .78rem;
    color: var(--gris);
}
.site-footer-copy a {
    color: var(--gris);
    font-weight: 700;
    text-decoration: none;
}
.site-footer-copy a:hover { color: var(--pl-morado); }

.site-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem;
}
.site-footer-links a,
.site-footer-cookies {
    font-size: .75rem;
    color: var(--gris);
    text-decoration: none;
    padding: .25rem .55rem;
    border-radius: 5px;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.site-footer-links a:hover,
.site-footer-cookies:hover {
    background: rgba(14,21,18,.07);
    color: var(--pl-morado);
}
.site-footer-cookies {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* ═══════════════════════════════════════════════════
   TEMA PREMIER LEAGUE CLÁSICO
   Activo con data-theme="mundial2026" (toggle admin)
   ═══════════════════════════════════════════════════ */
[data-theme="mundial2026"] {
    --negro-cancha:   #1a0520;
    --verde-profundo: #37003c;
    --verde-cesped:   #00a651;
    --oro:            #00ff87;
    --oro-dark:       #00c96b;
    --papel:          #ffffff;
    --arena:          #f8f4fb;
    --negro-suave:    #1a0520;
    --pl-morado:      #37003c;
    --pl-mint:        #00ff87;
    --pl-mint-dark:   #00c96b;
    --fondo:          #f2eef5;
    --surface:        #ffffff;
    --surface2:       #f8f4fb;
    --nav-bg:         #37003c;
    --texto:          #1a0520;
    --gris:           #7a6882;
    --blanco:         #ffffff;
    --verde:          #00a651;
    --rojo:           #EA2A3C;
    --azul:           #0068d6;
    --acento:         #00ff87;
    --borde:          rgba(14,21,18,.12);
    --borde-table:    rgba(14,21,18,.08);
    --sombra:         0 2px 16px rgba(14,21,18,.10);
    --sombra-card:    0 1px 4px rgba(14,21,18,.07), 0 4px 16px rgba(14,21,18,.08);
}