/* ============================================================================
   TOKENS · dos modos, un solo juego de nombres
   ----------------------------------------------------------------------------
   Los ACENTOS (verde, amarillo, azul, rojo) no cambian entre modos: son la marca
   y aparecen igual en el logo, los mails y las tarjetas que se comparten.
   Lo que cambia son las SUPERFICIES y el TEXTO.

   --white y --black siguen siendo colores literales a propósito: se usan como
   texto sobre botones de color, donde el blanco tiene que ser blanco en los dos
   modos. Para superficies y texto de página van los tokens semánticos.
   ============================================================================ */
:root {
    /* --- marca, idéntica en los dos modos --- */
    --primary: #2ECC71;
    --primary-dark: #27AE60;
    --green: #2ECC71;
    --green-deep: #1E8E52;      /* verde legible sobre fondo claro */
    /* Texto sobre un tinte del mismo color: oscuro en claro, claro en oscuro. */
    --yellow-deep: #8A6B08;
    --red-deep: #A32E3E;
    --blue-deep: #17457F;
    --yellow: #F1C40F;
    --blue: #3BA7FF;
    --red: #FF5470;
    --on-primary: #08240F;      /* texto sobre verde: el blanco vibra */
    --white: #FFFFFF;
    --black: #1A1A2E;
    --cream: #F0F4F1;

    /* --- superficies y texto: MODO CLARO --- */
    --bg: #EDF2EE;
    --surface: #FFFFFF;
    --surface-2: #F5F8F5;
    --sunken: #0E0E1A;          /* header, chips de resultado: oscuro siempre */
    --ink: #15152A;
    --ink-2: #4A4A63;
    --ink-3: #7A7A92;
    --line: rgba(20,20,42,.10);
    --line-soft: rgba(20,20,42,.06);
    --glow: rgba(46,204,113,.07);
    --grain: 0;

    /* compatibilidad con el CSS viejo: apuntan a los semánticos */
    --gray-100: var(--surface-2);
    --gray-200: var(--line);
    --gray-300: var(--ink-3);
    --gray-500: var(--ink-2);

    --radius: 10px;
    --radius-card: 16px;
    --radius-panel: 20px;
    --shadow: 0 2px 8px rgba(20, 20, 42, 0.07);
    --shadow-lg: 0 18px 40px -28px rgba(20, 20, 42, 0.45);


    /* --- Alias de tokens que el código ya usaba sin que existieran ---
       Estaban escritos como var(--gray-50, #fafafa): al no existir el token, siempre ganaba
       el fallback claro y esas zonas quedaban blancas en modo oscuro. Definirlos acá hace que
       el fallback no se dispare nunca y que todo siga al modo. */
    --gray-50: var(--surface-2);
    --gray-400: var(--ink-3);
    --gray-600: var(--ink-2);
    --gray-700: var(--ink-2);
    --gray-800: var(--ink);
    --gray-900: var(--ink);
    --dark: var(--ink);
    --text: var(--ink);
    --muted: var(--ink-3);
    --card-bg: var(--surface);
    --bg-card: var(--surface);
    --accent: var(--primary);
    --secondary: var(--blue);
    --green-dark: var(--primary-dark);
    --green-soft: rgba(46,204,113,.13);
    --radius-lg: var(--radius-card);
    --font-display: 'Anybody', sans-serif;
    --font-body: 'Montserrat', sans-serif;

    /* --- colores de DATOS (gráficos del historial entre equipos) ---
       No son tokens de marca: identifican a los dos equipos de un cruce y tienen que
       distinguirse también con daltonismo. Verde↔rojo, que es lo que usa el resto de la página
       para ganó/perdió, colapsa a ΔE 4,7 en deuteranopía (por debajo del piso de 6) y ahí sirve
       porque cada chip lleva su letra; en una barra rellena no hay letra que valga.
       Azul↔rojo pasa: ΔE 21,8 protan / 33,0 visión normal, y son cálido/frío, que es lo que pide
       una escala divergente. Validado con el script del skill dataviz. Los pasos del modo oscuro
       son OTROS a propósito: los claros se salen de la banda de luminosidad sobre fondo oscuro. */
    --viz-a: #3BA7FF;           /* el equipo de la página */
    --viz-b: #FF5470;           /* el rival */
    --viz-neutral: #A8ADBB;     /* empates: tiene que leerse como "nada" */
}

/* --- MODO OSCURO --- */
[data-modo="oscuro"] {
    --bg: #0E0E1A;
    --surface: #171728;
    --surface-2: #20203A;
    --sunken: #0A0A14;
    --ink: #F0F4F1;
    --ink-2: #A9A9C2;
    --ink-3: #8A8AA8;
    --line: rgba(255,255,255,.09);
    --line-soft: rgba(255,255,255,.05);
    --glow: rgba(46,204,113,.12);
    --grain: .04;
    --green-deep: #45C77E;      /* sobre fondo oscuro el verde profundo no se lee */
    --yellow-deep: #E8C455;
    --red-deep: #F08C99;
    --blue-deep: #8FC5F5;
    --shadow: 0 2px 10px rgba(0,0,0,.5);
    --shadow-lg: 0 30px 70px -40px rgba(0,0,0,.85);
    /* Pasos propios del modo oscuro: los claros quedan por encima de la banda L 0,48-0,67
       sobre superficie oscura. Mismo par cálido/frío, revalidado. */
    --viz-a: #3399EE;
    --viz-b: #F04D69;
    --viz-neutral: #4E4E68;
}

/* Sin preferencia guardada, seguimos al sistema. */
@media (prefers-color-scheme: dark) {
    :root:not([data-modo="claro"]) {
        --bg: #0E0E1A;
        --surface: #171728;
        --surface-2: #20203A;
        --sunken: #0A0A14;
        --ink: #F0F4F1;
        --ink-2: #A9A9C2;
        --ink-3: #8A8AA8;
        --line: rgba(255,255,255,.09);
        --line-soft: rgba(255,255,255,.05);
        --glow: rgba(46,204,113,.12);
        --grain: .04;
        --green-deep: #45C77E;
        --yellow-deep: #E8C455;
        --red-deep: #F08C99;
        --blue-deep: #8FC5F5;
        --shadow: 0 2px 10px rgba(0,0,0,.5);
        --shadow-lg: 0 30px 70px -40px rgba(0,0,0,.85);
        --viz-a: #3399EE;
        --viz-b: #F04D69;
        --viz-neutral: #4E4E68;
    }
}

/* ---- Reset ---- */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* iOS Safari auto-infla el texto de cualquier bloque que desborde horizontalmente
   (p.ej. una tabla ancha en mobile) — se ve "todo gigante" en iPhone y normal en
   desktop/Android. Fijamos el ajuste al 100% para que nunca reescale por su cuenta. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    /* Atmósfera: dos luces suaves en las esquinas opuestas. En claro casi no se notan;
       en oscuro son la mitad del carácter de la marca y cuestan cero. */
    background-image:
        radial-gradient(circle at 8% -6%, var(--glow), transparent 42%),
        radial-gradient(circle at 98% 100%, rgba(59,167,255,.07), transparent 42%);
    background-attachment: fixed;
}
/* Grano. Sólo se ve en oscuro (--grain vale 0 en claro): saca el aspecto de "azul plano
   de pantalla" y le da textura al fondo. No intercepta clicks. */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; }

/* ---- Layout ---- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.main-content { padding: 30px 0 60px; min-height: calc(100vh - 140px); }

/* ---- Navbar ---- */
.navbar {
    background: var(--sunken);
    padding: 0 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}
.navbar-inner {
    display: flex;
    align-items: center;
    height: 60px;
    gap: 30px;
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.navbar-brand:hover { color: var(--primary); }
.navbar-logo { height: 28px; width: auto; }
/* Adentro de la app la marca es sólo la pelota: el wordmark son 110px que no trabajan
   —nadie duda dónde está— y la barra ya venía desbordando ~94px. El logo completo sigue
   en las páginas públicas (landing, login, /join), que usan .logo y no esta clase. */
.logo-text { display: none; }
.navbar-links {
    display: flex;
    gap: 2px;
    flex: 1;
    flex-wrap: nowrap;
    align-items: center;
}
.nav-link {
    color: var(--gray-300);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: all 0.2s;
    white-space: nowrap;
    position: relative;
}
.nav-link:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.nav-link.active {
    color: var(--white);
    background: none;
    border-radius: 0;
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 4px;
    right: 4px;
    height: 3px;
    background: var(--primary);
    border-radius: 6px 3px 0 0;
}

/* Nav dropdowns */
.nav-dropdown { position: relative; }
.nav-dropdown-btn {
    background: none; border: none; cursor: pointer;
    color: var(--gray-300); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.3px;
    padding: 8px 12px; border-radius: var(--radius);
    transition: all 0.2s; white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
    font-family: var(--font-body);
}
.nav-dropdown-btn:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.nav-dropdown-btn.active { color: var(--white); background: none; }
.nav-dropdown-btn .arrow { font-size: 8px; opacity: 0.6; }
.nav-dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); min-width: 160px;
    padding: 6px 0; z-index: 200; padding-top: 12px;
}
.nav-dropdown-menu::before {
    content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 12px;
}
.nav-dropdown-right { left: auto; right: 0; }
.nav-dropdown-menu a {
    display: block; padding: 8px 16px; color: var(--ink);
    font-size: 13px; font-weight: 500; transition: background 0.15s;
}
.nav-dropdown-menu a:hover { background: var(--gray-100); color: var(--ink); }
.nav-dropdown-menu a.active { color: var(--primary); font-weight: 700; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: block; }

/* Right side: bell + user */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.navbar .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.3); }
.navbar .btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* User menu button */
.user-menu-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
}
.user-name {
    color: var(--gray-300);
    font-size: 13px;
    font-weight: 500;
}


/* Notification bell */
.notif-bell { position: relative; }
.notif-bell-btn {
    background: none; border: none; cursor: pointer;
    color: var(--gray-300); padding: 6px; border-radius: var(--radius);
    transition: all 0.2s; position: relative;
    display: flex; align-items: center;
}
.notif-bell-btn:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.notif-badge {
    position: absolute; top: 0; right: -2px;
    background: var(--red); color: #fff;
    font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: var(--radius); display: flex;
    align-items: center; justify-content: center;
    padding: 0 4px; line-height: 1;
}
.notif-dropdown {
    display: none; position: absolute; top: 100%; right: 0;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); width: 320px;
    z-index: 200; margin-top: 6px; overflow: hidden;
}
.notif-dropdown.open { display: block; }
.notif-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item {
    display: block; padding: 10px 16px;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s; color: var(--ink);
    font-size: 13px; line-height: 1.4;
}
.notif-item:hover { background: var(--gray-100); color: var(--ink); }
.notif-item.unread { background: rgba(46,204,113,.10); }
.notif-item .notif-time {
    font-size: 11px; color: var(--gray-300); margin-top: 2px;
}
.notif-empty {
    padding: 30px 16px; text-align: center;
    color: var(--gray-300); font-size: 13px;
}
.notif-header-actions { display: flex; gap: 8px; align-items: center; }
.notif-item { position: relative; }
.notif-item-link { color: inherit; display: block; }
.notif-item-link:hover { color: inherit; }
.notif-delete-btn {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; cursor: pointer;
    color: var(--gray-300); font-size: 18px; line-height: 1;
    padding: 0 4px; border-radius: 6px;
    opacity: 0; transition: opacity 0.15s, color 0.15s;
}
.notif-item:hover .notif-delete-btn { opacity: 1; }
.notif-delete-btn:hover { color: var(--red); }

/* Pending join requests */
.notif-badge-pending { background: var(--yellow); }
.notif-pending-section { border-bottom: 2px solid var(--yellow); background: rgba(241,196,15,.13); }
.notif-pending-header {
    padding: 8px 16px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--yellow); background: rgba(241,196,15,.15); border-bottom: 1px solid rgba(241,196,15,.25);
}
.notif-pending-item {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 16px; border-bottom: 1px solid rgba(241,196,15,.15);
    font-size: 13px; transition: opacity 0.3s, max-height 0.3s; overflow: hidden;
    max-height: 120px;
}
.notif-pending-item.removing { opacity: 0; max-height: 0; padding: 0 16px; border-bottom: none; }
.notif-pending-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.notif-pending-info .avatar { flex-shrink: 0; }
.notif-pending-info strong { display: block; }
.notif-pending-email { font-size: 11px; color: var(--gray-500); }
.notif-pending-group { font-size: 11px; color: var(--gray-500); }
.notif-pending-actions { display: flex; gap: 6px; padding-left: 36px; }
.btn-approve-req, .btn-reject-req {
    border: none; border-radius: 6px; padding: 4px 10px;
    font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
}
.btn-approve-req { background: var(--primary-dark); color: #fff; }
.btn-approve-req:hover { background: var(--primary-dark); }
.btn-reject-req { background: transparent; color: var(--red); border: 1px solid var(--red); }
.btn-reject-req:hover { background: rgba(255,84,112,.13); }
.btn-approve-req:disabled, .btn-reject-req:disabled { opacity: 0.5; cursor: not-allowed; }
.notif-pending-result { font-size: 11px; font-weight: 600; padding: 4px 0; }

.navbar-toggle { display: none; background: none; border: none; cursor: pointer; padding: 5px; }
.navbar-toggle span {
    display: block; width: 22px; height: 2px;
    background: var(--surface); margin: 5px 0;
    transition: 0.3s;
}
.desktop-only { display: flex; }
.mobile-only { display: none; }

/* Mobile menu (hidden on desktop) */
/* ---- Mobile group bar ---- */
.mobile-group-bar { display: none; }
@media (max-width: 768px) {
    .mobile-group-bar {
        display: block;
        background: var(--sunken);
        border-top: 1px solid rgba(255,255,255,0.08);
        position: relative;
    }
    .mobile-group-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 8px 16px;
        background: none;
        border: none;
        color: var(--white);
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    .mobile-group-current {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
    }
    .mobile-group-icon { font-size: 14px; flex-shrink: 0; }
    .mobile-group-tournament {
        font-size: 11px;
        color: var(--gray-300);
        font-weight: 500;
        flex-shrink: 0;
    }
    .mobile-group-tournament::before { content: '·'; margin: 0 4px; }
    .mobile-group-arrow {
        font-size: 10px;
        color: var(--gray-300);
        transition: transform 0.2s;
        flex-shrink: 0;
    }
    .mobile-group-list {
        display: none;
        background: var(--sunken);
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .mobile-group-list.open {
        display: block;
    }
    .mobile-group-list.open + .mobile-group-arrow,
    .mobile-group-bar:has(.mobile-group-list.open) .mobile-group-arrow {
        transform: rotate(180deg);
    }
    .mobile-group-option {
        display: flex;
        flex-direction: column;
        padding: 10px 16px 10px 38px;
        color: var(--gray-300);
        font-size: 13px;
        transition: background 0.15s;
    }
    .mobile-group-option:hover { background: rgba(255,255,255,0.05); color: var(--white); }
    .mobile-group-option.active { color: var(--primary); }
    .mobile-group-option strong { font-weight: 700; }
    .mobile-group-option span { font-size: 11px; color: var(--gray-500); margin-top: 1px; }
    .mobile-group-option.active span { color: var(--primary); opacity: 0.7; }
    .mobile-group-add {
        color: var(--primary) !important;
        font-weight: 700;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
}

.mobile-menu { display: none; }
.mobile-menu-link {
    display: block;
    padding: 12px 20px;
    color: var(--gray-300);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.mobile-menu-link:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.mobile-menu-link.active { color: var(--primary); }
.mobile-menu-sep {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 4px 20px;
}
.mobile-menu-section {
    padding: 12px 20px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 4px;
}
.mobile-menu-section:first-child {
    border-top: none;
    margin-top: 0;
}
.mobile-menu-group {
    padding-left: 32px;
    font-size: 13px;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--gray-200); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 5px 14px; font-size: 12px; }
.btn-black { background: var(--sunken); color: var(--white); border-color: var(--ink); }
.btn-black:hover { background: var(--ink-2); }
.btn-success { background: var(--green); color: var(--white); border-color: var(--green); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Cards ---- */
/* PANEL — la unidad básica del lenguaje.
   Barra de acento arriba, glow radial desde la esquina, borde de 1px y sombra profunda.
   El acento se cambia por sección con --accent-card: verde por defecto, amarillo para bonus
   y puntería, azul para historial y datos, rojo para lo que está en vivo. */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}
.card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent-card, var(--primary)); z-index: 2;
}
/* Si la tarjeta ya tiene su cabecera oscura, esa cabecera ES el ancla visual: una barra de
   acento encima queda como una línea suelta flotando sobre el negro. Una cosa o la otra. */
.card:has(> .card-header)::before { content: none; }
/* Los avisos ya llevan su acento a la izquierda (borde de 4px). Sumarle uno arriba hacía
   una escuadra rara en la esquina. */
.card:has(> .card-body > .alert)::before,
.alert::before { content: none; }
.card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(110% 70% at 0% 0%, var(--card-glow, transparent), transparent 58%);
}
.card > * { position: relative; z-index: 1; }
.card--yellow { --accent-card: var(--yellow); --card-glow: rgba(241,196,15,.09); }
.card--blue   { --accent-card: var(--blue);   --card-glow: rgba(59,167,255,.09); }
.card--red    { --accent-card: var(--red);    --card-glow: rgba(255,84,112,.09); }
.card--plain  { --accent-card: var(--line); }

/* NOTA — no es un panel, es un aviso: lleva el acento a la izquierda y ninguno arriba.
   Antes esto se escribía con estilos inline (border-left + fondo gris) y al sumarle la barra
   superior del panel quedaba una escuadra rara en la esquina. */
.card--nota {
    background: var(--surface-2);
    border-left: 3px solid var(--accent-card, var(--ink-3));
    box-shadow: none;
}
.card--nota::before { content: none; }
.card--nota .card-body { color: var(--ink-2); font-weight: 500; }
.card-header {
    background: var(--sunken);
    color: var(--white);
    padding: 14px 20px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header .phase-badge {
    background: var(--primary);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--font-body);
    font-weight: 700;
}
.card-body { padding: 20px; }

/* ---- Login ---- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sunken);
    position: relative;
    overflow: hidden;
}
.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='58'%3E%3Ctext x='0' y='52' font-family='Arial Black,sans-serif' font-weight='900' font-size='68' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1' letter-spacing='-2'%3EPRODELIBRE%C2%B7PRODELIBRE%3C/text%3E%3C/svg%3E");
    background-size: 720px 58px;
    transform: rotate(-15deg) scale(1.5);
    pointer-events: none;
}
.login-box {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 50px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.login-logo {
    text-align: center;
    margin-bottom: 35px;
}
.login-logo svg { color: var(--primary); }
.login-logo h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    color: var(--ink);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 10px;
}
.login-logo p {
    color: var(--gray-500);
    font-size: 13px;
    margin-top: 4px;
    font-weight: 500;
}

/* ---- Forms ---- */
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    margin-bottom: 6px;
}
.form-control {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-100);
    color: var(--ink);
    transition: border-color 0.2s;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
}
select.form-control {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23262524' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* ---- Countdown Banner ---- */
.countdown-banner {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue) 33%, var(--white) 33%, var(--white) 66%, var(--blue) 66%, var(--blue) 100%);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    animation: bannerGlow 3s ease-in-out infinite;
}
@keyframes bannerGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(117,170,219,0.3); }
    50% { box-shadow: 0 4px 30px rgba(117,170,219,0.6), 0 0 60px rgba(255,215,0,0.15); }
}
.countdown-inner {
    background: var(--sunken);
    border-radius: 6px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
}
.countdown-inner::before {
    content: '★ ★ ★';
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 10px;
    letter-spacing: 4px;
    color: rgba(255,215,0,0.3);
    animation: starsPulse 2s ease-in-out infinite;
}
@keyframes starsPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}
.countdown-inner::after {
    content: '🏆🏆🏆';
    position: absolute;
    bottom: 6px;
    right: 16px;
    font-size: 10px;
    letter-spacing: 2px;
    opacity: 0.2;
}
/* Sparkle particles */
.countdown-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.countdown-sparkles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--yellow);
    animation: sparkle 3s ease-in-out infinite;
}
.countdown-sparkles span:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.countdown-sparkles span:nth-child(2) { top: 70%; left: 25%; animation-delay: 0.7s; }
.countdown-sparkles span:nth-child(3) { top: 25%; left: 55%; animation-delay: 1.4s; }
.countdown-sparkles span:nth-child(4) { top: 80%; left: 70%; animation-delay: 0.3s; }
.countdown-sparkles span:nth-child(5) { top: 10%; left: 85%; animation-delay: 1.1s; }
.countdown-sparkles span:nth-child(6) { top: 55%; left: 40%; animation-delay: 1.8s; }
.countdown-sparkles span:nth-child(7) { top: 40%; left: 92%; animation-delay: 0.5s; }
.countdown-sparkles span:nth-child(8) { top: 85%; left: 50%; animation-delay: 2.2s; }
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    20% { opacity: 1; transform: scale(1); }
    30% { opacity: 1; transform: scale(1.5); }
    50% { opacity: 0; transform: scale(0); }
}
.countdown-flag {
    font-size: 52px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
    animation: flagFloat 3s ease-in-out infinite;
}
.countdown-flag img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}
@keyframes flagFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.countdown-info { flex: 1; min-width: 0; }
.countdown-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--yellow);
    animation: labelShimmer 3s ease-in-out infinite;
}
@keyframes labelShimmer {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; text-shadow: 0 0 8px rgba(255,215,0,0.4); }
}
.countdown-match {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    color: var(--white);
    margin-top: 4px;
}
.countdown-date {
    font-size: 13px;
    color: var(--gray-300);
    font-weight: 500;
    margin-top: 4px;
}
.countdown-timer {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.countdown-block {
    background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 100%);
    border-radius: var(--radius);
    padding: 10px 8px;
    text-align: center;
    min-width: 56px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.countdown-block:hover {
    transform: translateY(-2px);
}
.cd-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 26px;
    color: var(--white);
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cd-unit {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .countdown-banner { padding: 3px; }
    .countdown-inner {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }
    .countdown-inner { flex-direction: column; align-items: center; text-align: center; }
    .countdown-flag { font-size: 40px; }
    .countdown-info { text-align: center; width: 100%; }
    .countdown-match { font-size: 16px; }
    .countdown-timer { width: 100%; justify-content: center; }
    .countdown-block { min-width: 48px; padding: 8px 6px; }
    .cd-num { font-size: 22px; }
}

/* ---- Argentina Schedule Toggle ---- */
.arg-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--sunken);
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.arg-chevron {
    display: inline-block;
    font-size: 10px;
    transition: transform 0.3s;
}
.arg-toggle-btn.open .arg-chevron {
    transform: rotate(180deg);
}
.arg-toggle-btn:hover { background: var(--surface-2); }
.arg-toggle-btn.open { color: var(--white); }
.arg-schedule-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(0,0,0,0.3);
    border-radius: 0 0 4px 4px;
}
.arg-schedule-dropdown.open {
    max-height: 600px;
}
.arg-schedule-dropdown .arg-schedule-table td {
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.arg-schedule-dropdown .arg-day-name { color: var(--white); }
.arg-schedule-dropdown .arg-day-num { color: rgba(255,255,255,0.5); }
.arg-schedule-dropdown .arg-loc { color: rgba(255,255,255,0.4); }
.arg-schedule-dropdown .arg-phase { color: rgba(255,255,255,0.4); }
.arg-schedule-dropdown .arg-finished td { opacity: 0.5; }

/* ---- Argentina Schedule ---- */
.arg-schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.arg-schedule-table tr { border-bottom: 1px solid var(--gray-100); }
.arg-schedule-table tr:last-child { border-bottom: none; }
.arg-schedule-table td { padding: 12px 14px; vertical-align: middle; }
.arg-date { white-space: nowrap; }
.arg-day-name {
    font-weight: 700;
    color: var(--ink);
    display: block;
    font-size: 13px;
}
.arg-day-num {
    font-size: 12px;
    color: var(--gray-500);
}
.arg-time {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.arg-vs {
    font-weight: 600;
}
.arg-loc {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 500;
}
.arg-phase {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
}
.arg-result { text-align: center; white-space: nowrap; }
.arg-finished { opacity: 0.6; }
.arg-playing { background: rgba(46, 204, 113, 0.06); }

@media (max-width: 768px) {
    .arg-schedule-table td { padding: 10px 8px; font-size: 12px; }
    .arg-phase { display: none; }
}

/* ---- Upcoming Match Alert ---- */
.upcoming-alert {
    margin-bottom: 20px;
}
.upcoming-alert-inner {
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(239, 65, 45, 0.12);
    animation: alertPulse 3s ease-in-out infinite;
}
@keyframes alertPulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(239, 65, 45, 0.12); }
    50% { box-shadow: 0 2px 20px rgba(239, 65, 45, 0.25); }
}
.upcoming-alert-timer {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}
.upcoming-cd-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius);
    padding: 6px 10px;
    min-width: 46px;
}
.upcoming-cd-num {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}
.upcoming-cd-unit {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    opacity: 0.85;
}
.upcoming-alert-content {
    flex: 1;
    min-width: 0;
}
.upcoming-alert-title {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
    margin-bottom: 4px;
}
.upcoming-alert-match {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    color: var(--ink);
    /* Antes era texto suelto: en un celular angosto el renglón cortaba donde caía y el escudo
       del visitante terminaba solo en una línea. Ahora cada equipo es una unidad indivisible y
       el corte, si hace falta, cae entre los dos. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}
.ua-team {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.ua-team .team-logo-sm { flex-shrink: 0; }
.ua-vs {
    font-size: .75em;
    font-weight: 700;
    color: var(--gray-400, #999);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.upcoming-alert-date {
    font-size: 12px;
    color: var(--gray-500);
    font-weight: 600;
    margin-top: 2px;
}
.upcoming-alert-btn {
    flex-shrink: 0;
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: var(--radius);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}
.upcoming-alert-btn:hover {
    background: var(--primary-dark);
    color: var(--white);
}

@media (max-width: 768px) {
    .upcoming-alert-inner {
        flex-wrap: wrap;
        padding: 14px;
        gap: 10px;
    }
    .upcoming-alert-match { font-size: 14px; }
    /* El contador se lleva una fila entera. Compartiéndola con el nombre de los equipos, al
       texto le quedaba la mitad del ancho y partía "Atlanta United vs Orlando City" en cuatro. */
    /* Todo centrado: el contador y el botón ya lo estaban, y dejar el título y los equipos
       pegados a la izquierda partía la tarjeta en dos ejes distintos. */
    .upcoming-alert-content { flex: 1 1 100%; text-align: center; }
    .upcoming-alert-match { justify-content: center; }
    .upcoming-alert-timer { order: 3; justify-content: center; width: 100%; }
    .upcoming-alert-btn { width: 100%; text-align: center; order: 4; }
}

@media (max-width: 420px) {
    /* Nombres largos (Atlético Bucaramanga vs Independiente Medellín) no entran en dos columnas
       ni con la fila entera: cada equipo a su renglón, con el "vs" alineado a la izquierda. */
    .upcoming-alert-match { flex-direction: column; align-items: center; gap: 1px; }
}

/* ---- Google Button ---- */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}
.btn-google:hover {
    border-color: var(--gray-300);
    background: var(--gray-100);
    color: var(--ink);
}

/* ---- Alert ---- */
.alert {
    padding: 12px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}
.alert-error { background: rgba(255,84,112,.13); color: var(--primary-dark); border-left: 4px solid var(--primary); }
.alert-success { background: rgba(46,204,113,.13); color: var(--primary-dark); border-left: 4px solid var(--green); }

/* ---- Page Header ---- */
.page-header {
    margin-bottom: 30px;
}
/* El titular con la escala de la infografía: más grande, más apretado, casi sin interlínea.
   El tracking negativo es lo que hace que Anybody 900 se lea como bloque y no como palabras
   sueltas. Escala fluida para que en teléfono no se coma tres renglones. */
.page-header h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(30px, 5.2vw, 46px);
    color: var(--ink);
    text-transform: uppercase;
    line-height: .92;
    letter-spacing: -1.8px;
    text-wrap: balance;
}
.page-header p {
    color: var(--ink-3);
    margin-top: 8px;
    font-weight: 500;
    max-width: 60ch;
}

/* ---- Match Card ---- */
.match-list { display: flex; flex-direction: column; gap: 3px; }
.match-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 14px 20px;
    background: var(--surface);
    gap: 15px;
    transition: background 0.15s;
}
.match-row:has(.prediction-stepper) {
    padding-bottom: 40px;
}
.match-row:has(.power-up-btn) {
    padding-bottom: 54px;
}
/* Cuando aparece el aviso de carga incompleta (absoluto, flota abajo), reservamos espacio
   vertical para que no se solape con la fila siguiente. */
.match-row:has(.pred-incomplete-msg),
.match-row:has(.pred-locked-msg) {
    padding-bottom: 96px;
}
.match-row:hover { background: var(--gray-100); }
.match-row.finished { opacity: 0.85; }
.match-team {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
}
.match-team.home { justify-content: flex-end; text-align: right; }
.match-team.away { justify-content: flex-start; }
.team-flag { font-size: 32px; line-height: 1; }
.match-center { text-align: center; min-width: 160px; position: relative; }
.match-center:has(.prediction-stepper) { margin-bottom: -34px; }
.match-center:has(.power-up-btn) { margin-bottom: -48px; }
.match-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
}
.match-score .separator { color: var(--gray-300); font-size: 16px; }
.match-score.has-result .score-num { color: var(--ink); }
.match-score.no-result .score-num { color: var(--gray-300); }
.match-pen {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    color: var(--gray-500, var(--ink-3));
    text-align: center;
    margin-top: 2px;
    letter-spacing: 0.2px;
}
.match-time-info {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    margin-top: 4px;
}
.match-date {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 2px;
}
.match-status {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 6px;
    margin-top: 8px;
}
.status-pending { background: var(--gray-200); color: var(--gray-500); }
/* .status-playing: look unificado con .pub-live (rojo + dot pulsante), definido más abajo. */
.status-finished { background: var(--sunken); color: var(--white); }
.status-suspended { background: var(--yellow); color: var(--ink); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ---- Prediction Stepper (user fixture) ---- */
.prediction-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.prediction-stepper .stepper-input.saved {
    border-color: var(--green);
    background: rgba(46,204,113,.13);
}
.prediction-stepper .stepper-input.cleared {
    border-color: var(--gray-300);
    background: var(--gray-100);
}
.prediction-stepper .stepper-input.rejected {
    border-color: var(--primary);
    background: rgba(255,84,112,.13);
}
/* Badge "NEW" para items de menú (ej. Blog en el dropdown / sandwich). */
.nav-new-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
    background: var(--primary, var(--primary));
    padding: 1px 5px;
    border-radius: var(--radius);
    margin-left: 6px;
    vertical-align: middle;
}

/* Un solo lado cargado: el pronóstico NO se guarda (faltan los dos números).
   Marcamos el casillero vacío en naranja para que se note que está incompleto. */
.prediction-stepper .stepper-input.pred-incomplete {
    border-color: var(--yellow);
    background: rgba(241,196,15,.14);
    box-shadow: 0 0 0 2px rgba(230,81,0,0.22);
}
.pred-error-msg {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 6px;
    text-align: center;
    animation: fadeIn 0.2s ease;
}
/* Aviso persistente cuando falta un lado: el pronóstico NO quedó guardado. */
.pred-incomplete-msg {
    /* Absoluto: así NO ensancha la columna `auto` del medio del grid (que empujaba las
       banderas hacia afuera). Flota centrado debajo del stepper; el espacio vertical lo
       reserva .match-row:has(.pred-incomplete-msg). */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(86vw, 360px);
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    color: var(--yellow-deep);
    background: rgba(241,196,15,.14);
    border: 1px solid rgba(241,196,15,.30);
    border-radius: var(--radius);
    padding: 5px 9px;
    margin-top: 7px;
    text-align: center;
    line-height: 1.35;
    animation: fadeIn 0.2s ease;
}
/* Stepper bloqueado en vivo cuando el partido arrancó con la página abierta. */
.prediction-stepper.is-locked { opacity: 0.45; pointer-events: none; }
.pred-locked-msg {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(86vw, 360px);
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    background: var(--gray-100);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 5px 9px;
    margin-top: 7px;
    text-align: center;
    line-height: 1.35;
    animation: fadeIn 0.2s ease;
}
.pred-incomplete-msg strong { color: var(--yellow); }
/* Confirmación persistente del guardado de un pronóstico (refleja la respuesta real
   del server). 'saved' queda fijo hasta que el usuario vuelva a editar la fila. */
.pred-save-status {
    font-size: 11px;
    font-weight: 700;
    margin-top: 6px;
    text-align: center;
    line-height: 1.3;
    animation: fadeIn 0.2s ease;
}
.pred-save-status.is-saving { color: var(--gray-500); }
.pred-save-status.is-saved { color: var(--green); }
.pred-save-status.is-error {
    color: var(--red);
    background: rgba(255,84,112,.13);
    border: 1px solid rgba(255,84,112,.35);
    border-radius: var(--radius);
    padding: 4px 8px;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.prediction-points {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 900;
    font-size: 13px;
    margin-left: 8px;
}
.points-3 { background: var(--green); color: var(--white); }
.points-1 { background: var(--yellow); color: var(--ink); }
.points-0 { background: var(--gray-200); color: var(--gray-500); }

/* ---- Prediction Result Box (mis-predicciones) ---- */
.pred-result-box {
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 2px solid var(--gray-200);
}
.pred-result-box.pred-result-exact { border-color: var(--green); background: rgba(46,204,113,.11); }
.pred-result-box.pred-result-ok { border-color: var(--yellow); background: rgba(241,196,15,.12); }
.pred-result-box.pred-result-miss { border-color: var(--gray-200); background: var(--gray-100); }
.pred-result-box.pred-result-none { border-color: var(--gray-200); background: var(--gray-100); }
.pred-result-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    margin-bottom: 2px;
}
.pred-yours {
    font-size: 12px;
    color: var(--gray-500);
    font-weight: 600;
    margin-top: 4px;
}
.pred-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 6px;
    margin-top: 6px;
}
.pred-badge-exact { background: var(--green); color: var(--white); }
.pred-badge-ok { background: var(--yellow); color: var(--ink); }
.pred-badge-miss { background: var(--gray-200); color: var(--gray-500); }

.pred-result-box.pred-result-live { border-color: var(--red); background: rgba(255,84,112,.10); }
.pred-result-box.pred-result-live.pred-result-exact { border-color: var(--green); background: rgba(46,204,113,.11); }
.pred-result-box.pred-result-live.pred-result-ok { border-color: var(--yellow); background: rgba(241,196,15,.12); }
.pred-result-label-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--red);
}
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* ---- Power-up x2 ---- */
.power-up-btn {
    display: inline-block;
    padding: 1px 8px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--gray-200);
    border-radius: 6px;
    background: var(--surface);
    color: var(--gray-300);
    cursor: pointer;
    margin-top: 2px;
    margin-bottom: -6px;
    transition: all 0.15s;
}
.power-up-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.power-up-btn.active {
    background: var(--sunken);
    border-color: var(--ink);
    color: var(--primary);
}
.sparkle-particle {
    position: fixed;
    pointer-events: none;
    font-size: 14px;
    color: var(--primary);
    z-index: 9999;
    animation: sparkleOut 0.6s ease-out forwards;
}
@keyframes sparkleOut {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}
.power-up-badge-inline {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 900;
    color: var(--primary);
    margin-right: 2px;
}
/* Contador de power-ups del header. Reformula el viejo "1/3 x2" (que leía como un
   tag del título) en una etiqueta clara: el token X2 (mismo formato que el botón)
   + el conteo en palabras. "disponibles" deja sin ambigüedad que el número es lo
   que queda para usar. */
.page-header-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    flex-wrap: wrap;
}
.powerup-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    cursor: default;
}
/* El token calca el formato del botón .power-up-btn en estado activo: misma fuente
   display 900 uppercase, borde 2px y radio 3px, y escribe "x2" → "X2". Así el
   indicador del header y el botón x2 de cada partido usan el mismo criterio. */
.powerup-chip-tok {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 17px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border: 2px solid var(--black);
    border-radius: 6px;
    background: var(--sunken);
    color: var(--primary);
}
.powerup-chip-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-500);
}
.powerup-chip-text strong {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 17px;
    color: var(--ink);
}
.powerup-chip.is-empty .powerup-chip-text { color: var(--gray-300); }
.powerup-chip.is-empty .powerup-chip-text strong { color: var(--gray-500); }

/* ---- My Position Banner ---- */
.my-position-banner {
    background: var(--sunken);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-lg);
}
.my-pos-rank { text-align: center; flex-shrink: 0; }
.my-pos-number {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 36px;
    color: var(--primary);
    display: block;
    line-height: 1;
}
.my-pos-label {
    font-size: 12px;
    color: var(--gray-300);
    font-weight: 600;
}
.my-pos-info { flex: 1; }
.my-pos-points {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    color: var(--white);
}
.my-pos-detail {
    font-size: 13px;
    color: var(--gray-300);
    font-weight: 500;
    margin-top: 2px;
}
.my-pos-alert {
    flex-shrink: 0;
}
.my-pos-alert a {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.my-pos-alert a:hover { background: var(--primary-dark); color: var(--white); }

@media (max-width: 768px) {
    .my-position-banner { flex-wrap: wrap; padding: 16px; gap: 14px; }
    .my-pos-number { font-size: 28px; }
    .my-pos-points { font-size: 16px; }
    .my-pos-alert { width: 100%; text-align: center; }
    .my-pos-alert a { width: 100%; display: block; }
}

/* ---- Ranking ---- */
.ranking-table-wrap {
    max-height: 70vh;
    overflow-y: auto;
}
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 2;
}
.ranking-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    padding: 10px 16px;
    border-bottom: 2px solid var(--gray-200);
    font-weight: 700;
}
.ranking-search {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    text-transform: none;
    letter-spacing: 0;
    width: 200px;
    outline: none;
}
.ranking-search::placeholder { color: rgba(255,255,255,0.6); }
.ranking-search:focus { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); }
.ranking-table th.center, .ranking-table td.center { text-align: center; }
.ranking-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-100);
    font-weight: 500;
}
.ranking-table tr:hover td { background: var(--gray-100); }
.ranking-pos {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    color: var(--gray-300);
    width: 40px;
}
.ranking-pos.top-1 { color: var(--primary); font-size: 22px; }
.ranking-pos.top-2 { color: var(--ink); }
.ranking-pos.top-3 { color: var(--primary-dark); }
.ranking-name {
    font-weight: 700;
    font-size: 15px;
}
.ranking-name.is-me { color: var(--primary); }
.ranking-row-divider td { text-align:center; padding:8px 0; color:var(--gray-300); font-weight:900; letter-spacing:6px; background:var(--gray-100); border-bottom: 1px solid var(--line); }
.ranking-row-self td { background:rgba(46, 204, 113, 0.12); }
.ranking-row-self td:first-child { box-shadow:inset 4px 0 0 var(--primary); }
.ranking-row-self:hover td { background:rgba(46, 204, 113, 0.2); }
@keyframes rankingFlash { 0%, 100% { background:rgba(46, 204, 113, 0.12); } 30%, 60% { background:rgba(46, 204, 113, 0.45); } }
.ranking-row-flash td { animation: rankingFlash 1.5s ease-in-out; }
.my-rank-jump-btn { padding:5px 12px; font-size:11px; font-weight:700; background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.3); border-radius:var(--radius); cursor:pointer; white-space:nowrap; transition:all 0.15s; }
.my-rank-jump-btn:hover { background:rgba(255,255,255,0.25); border-color:rgba(255,255,255,0.5); }
.rank-change {
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
    margin-left: 4px;
    vertical-align: baseline;
}
.rank-up { color: var(--green); }
.rank-down { color: var(--primary); }
.rank-same { color: var(--gray-300); font-size: 12px; }
.points-gained {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
    margin-left: 6px;
    background: rgba(46,204,113,.13);
    padding: 1px 6px;
    border-radius: 6px;
}
.ranking-points {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    color: var(--ink);
}
.ranking-stat {
    font-size: 13px;
    color: var(--gray-500);
}
.ranking-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 900;
    font-size: 14px;
    font-family: var(--font-display);
    flex-shrink: 0;
}
img.ranking-avatar, img.podium-avatar {
    object-fit: cover;
}

/* ---- Podium ---- */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 30px;
    padding: 20px 0 0;
}
.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 140px;
}
.podium-medal { font-size: 32px; line-height: 1; }
.podium-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 900;
    font-size: 20px;
    font-family: var(--font-display);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.podium-1st .podium-avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
    border: 3px solid var(--yellow);
}
.podium-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    text-align: center;
}
.podium-points {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    color: var(--primary);
    width: 100%;
    text-align: center;
}
.podium-1st .podium-points { font-size: 20px; }
.podium-bar {
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/* Oro, plata y bronce macizos. El podio es la única parte del sitio donde el color ES el dato:
   la altura sola no distingue el segundo del tercero de un vistazo. Los tonos se definen por
   modo para que en oscuro no encandilen. */
:root {
    --oro:    #F2C511;
    --plata:  #ACB2BA;
    --bronce: #C1793C;
}
[data-modo="oscuro"] {
    --oro:    #C9A310;
    --plata:  #7E858F;
    --bronce: #9B6130;
}
.podium-bar { border: none; }
.podium-1st .podium-bar { background: linear-gradient(180deg, var(--oro)    0%, color-mix(in srgb, var(--oro)    88%, #000) 100%); }
.podium-2nd .podium-bar { background: linear-gradient(180deg, var(--plata)  0%, color-mix(in srgb, var(--plata)  88%, #000) 100%); }
.podium-3rd .podium-bar { background: linear-gradient(180deg, var(--bronce) 0%, color-mix(in srgb, var(--bronce) 88%, #000) 100%); }
.podium-pos {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    color: var(--white);
    background: var(--sunken);
    width: 100%;
    text-align: center;
    padding: 8px 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

@media (max-width: 768px) {
    .podium-container { gap: 8px; padding: 10px 0 0; }
    .podium-item { width: 100px; }
    .podium-avatar { width: 40px; height: 40px; font-size: 16px; }
    .podium-1st .podium-avatar { width: 48px; height: 48px; font-size: 18px; }
    .podium-medal { font-size: 24px; }
    .podium-name { font-size: 13px; }
    .podium-points { font-size: 15px; }
    .podium-1st .podium-points { font-size: 18px; }
    .podium-1st .podium-bar { height: 120px !important; }
    .podium-2nd .podium-bar { height: 90px !important; }
    .podium-3rd .podium-bar { height: 70px !important; }
}

/* Podio final (torneo terminado): leve glow dorado en el 1er puesto + tag CAMPEÓN */
.podium-final .podium-1st .podium-avatar {
    box-shadow: 0 0 0 3px var(--yellow), 0 4px 12px rgba(255, 215, 0, .45);
}
.podium-champion-tag {
    display: inline-block;
    margin: 4px 0 6px;
    padding: 3px 10px;
    background: linear-gradient(135deg, var(--yellow) 0%, #F0C030 100%);
    color: var(--sunken);
    font-family: var(--font-display, sans-serif);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
@media (max-width: 768px) {
    .podium-champion-tag { font-size: 10px; padding: 2px 8px; }
}


/* ---- Score Stepper ---- */
.score-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stepper-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.stepper-btn {
    width: 44px;
    height: 30px;
    touch-action: manipulation;
    border: 2px solid var(--gray-200);
    background: var(--gray-100);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    user-select: none;
    padding: 0;
}
.stepper-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.stepper-btn:active {
    transform: scale(0.95);
}
.stepper-input {
    width: 44px;
    height: 44px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    -moz-appearance: textfield;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.stepper-input:focus {
    outline: none;
    border-color: var(--primary);
}
.stepper-sep {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    color: var(--gray-300);
    padding: 0 2px;
}
.btn-disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Tabs ---- */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--gray-200);
    overflow-x: auto;
}
.tab {
    padding: 10px 20px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-body);
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-past { color: var(--gray-300); font-weight: 600; opacity: 0.75; }
.tab-past:hover { opacity: 1; }
.tab-past.active { color: var(--primary); opacity: 1; }
.tab-past-first { margin-left: 14px; padding-left: 22px; position: relative; }
.tab-past-first::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--gray-200); }
a.tab { text-decoration: none; }

/* ---- View switch (Por grupo / Por fecha) ---- */
.view-switch {
    display: inline-flex;
    gap: 2px;
    background: var(--gray-100);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 16px;
}
.view-switch-btn {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-500);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
}
.view-switch-btn:hover { color: var(--ink); text-decoration: none; }
.view-switch-btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* ---- Stats Row ---- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}
.stat-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
}
.stat-value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    color: var(--primary);
}
.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    font-weight: 700;
    margin-top: 4px;
}

/* ---- Grid Helpers ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mt-2 { margin-top: 20px; }
.mb-2 { margin-bottom: 20px; }
.text-center { text-align: center; }
.text-red { color: var(--primary); }

/* ---- Bonus Predictions ---- */
.bonus-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.bonus-group-card {
    background: var(--gray-100);
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--gray-200);
}
.bonus-group-header {
    background: var(--sunken);
    color: var(--white);
    padding: 10px 14px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bonus-group-teams {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bonus-team-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border-radius: var(--radius);
    cursor: pointer;
    border: 2px solid var(--gray-200);
    transition: all 0.2s;
    user-select: none;
}
.bonus-team-option:hover { border-color: var(--gray-300); }
.bonus-team-option.selected {
    border-color: var(--primary);
    background: rgba(255,84,112,.12);
}
.bonus-team-option.locked { cursor: not-allowed; opacity: 0.7; }
.bonus-team-option input[type="checkbox"] { display: none; }
.bonus-team-flag { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; }
.bonus-team-flag .team-logo-sm { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
.bonus-team-name { font-weight: 600; font-size: 14px; }
.bonus-group-status {
    padding: 6px 14px 10px;
    text-align: center;
    min-height: 28px;
}
.bonus-saved {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--green);
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(46,204,113,.13);
}
.bonus-save-status {
    margin-top: 10px;
    min-height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bonus-saving {
    font-size: 12px;
    color: var(--gray-500);
    font-weight: 600;
}

/* Bonus summary in mis-predicciones */
.bonus-summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
    flex-wrap: wrap;
}
.bonus-summary-row:last-child { border-bottom: none; }
.bonus-summary-label {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    min-width: 100px;
}
.bonus-summary-value {
    flex: 1;
    font-weight: 600;
    font-size: 15px;
}
/* ---- Bonus Detail Cards (mis-predicciones) ---- */
.bonus-detail-card {
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
}
.bonus-detail-card:last-child { margin-bottom: 0; }
.bonus-detail-card.bonus-hit { border-color: var(--green); }
.bonus-detail-card.bonus-miss { border-color: var(--gray-200); }
.bonus-detail-header {
    background: var(--gray-100);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--line);
}
.bonus-hit .bonus-detail-header { background: rgba(46,204,113,.11); }
.bonus-detail-icon { font-size: 18px; }
.bonus-detail-title {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}
.bonus-detail-max {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 600;
}
.bonus-detail-body { padding: 14px 16px; }
.bonus-detail-pick {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 8px;
}
.bonus-groups-mini {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}
.bonus-group-mini-card {
    background: var(--gray-100);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
}
.bonus-group-mini-header {
    font-weight: 900;
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.bonus-group-mini-team {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* badge alineado a la 1ra línea del nombre cuando wrappea */
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    padding: 3px 0;
    line-height: 1.2;
}
.bonus-group-mini-name {
    flex: 1 1 auto;
    min-width: 0; /* permite que nombres largos wrappeen prolijo a la izquierda */
}
.bonus-group-mini-team.team-hit { color: var(--green); }
.bonus-group-mini-team.team-miss { color: var(--gray-300); }
.bonus-group-mini-team.team-miss .bonus-group-mini-name { text-decoration: line-through; }
.bonus-group-mini-check,
.bonus-group-mini-cross,
.bonus-group-mini-pending {
    flex: 0 0 auto;       /* el badge no se encoge */
    white-space: nowrap;  /* ✓ y +2 nunca se separan en dos líneas */
    font-weight: 900;
    font-size: 12px;
    line-height: 1.2;
}
.bonus-group-mini-check { color: var(--green); }
.bonus-group-mini-cross { color: var(--primary); font-size: 14px; }
.bonus-group-mini-pending { color: var(--gray-300); font-weight: 600; }

.bonus-pending-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--gray-200);
    color: var(--gray-500);
}

/* ---- Confirm Modal ---- */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 1000;
    align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: var(--surface); border-radius: var(--radius-card);
    padding: 28px 24px 20px; max-width: 400px; width: 90%;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
/* Los mensajes del confirm llegan con saltos de línea reales (van por textContent, nunca por
   innerHTML): pre-line los respeta sin abrir la puerta a inyectar HTML en un cartel de confirmación. */
#confirm-modal-msg { white-space: pre-line; }
.modal-body {
    font-size: 15px; line-height: 1.5; color: var(--ink);
    margin-bottom: 24px;
}
.modal-actions {
    display: flex; justify-content: flex-end; gap: 10px;
}

/* ---- PWA Install Prompt ---- */
@keyframes pwaSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.pwa-prompt-inner {
    max-width: 500px;
    margin: 0 auto;
    background: var(--sunken);
    color: var(--white);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    position: relative;
}
.pwa-prompt-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
}
.pwa-prompt-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}
.pwa-prompt-text span {
    color: var(--gray-300);
}
.pwa-prompt-close {
    background: none;
    border: none;
    color: var(--gray-300);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.pwa-prompt-close:hover {
    color: var(--white);
}
.pwa-prompt-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.pwa-prompt-arrow {
    color: var(--primary);
    font-weight: 700;
}
.pwa-prompt-arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--black);
    position: absolute;
    bottom: -10px;
    right: 30px;
}
.pwa-prompt {
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 12px;
    animation: pwaSlideUp 0.4s ease;
}

/* ---- Footer ---- */
/* --------------------------------------------------------------------------
   Footer en columnas. El .footer de arriba pone TODO en mayúsculas con tracking:
   eso sirve para los títulos de columna, pero con 16 links seguidos hace que todo
   pese igual y no se encuentre nada. Por eso los links vuelven a minúscula.
   -------------------------------------------------------------------------- */
.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px 20px;
    text-align: left;
    max-width: 880px;
    margin: 4px auto 22px;
}
.footer-cols h4 {
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gray-400, #9aa4ab); margin: 0 0 11px;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 8px; }
.footer-cols a,
.footer-links,
.footer-links a {
    font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--gray-300); line-height: 1.4;
}
.footer-cols a:hover, .footer-links a:hover { color: var(--primary); }
/* Barra de cierre: marca, versión, Cafecito y autoría, a todo el ancho. */
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.09); padding-top: 16px; }
@media (max-width: 700px) {
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; max-width: 420px; }
}
.footer {
    background: var(--sunken);
    color: var(--gray-500);
    text-align: center;
    padding: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    /* Show 3 main links as compact tabs */
    .navbar-links {
        display: flex;
        flex: 1;
        gap: 0;
        justify-content: center;
    }
    .navbar-links .nav-link {
        padding: 6px 8px;
        font-size: 12px;
        letter-spacing: 0;
    }
    .navbar-links .nav-link.mobile-only { display: none !important; }
    /* Hide desktop-only, show mobile-only */
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; }
    /* Notification bell stays visible */
    .navbar-right {
        display: flex;
        flex-shrink: 0;
    }
    /* Hamburger visible and prominent */
    .navbar-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        order: 10;
        background: var(--primary);
        border-radius: var(--radius);
        width: 36px;
        height: 36px;
        padding: 0;
    }
    .navbar-toggle span {
        width: 18px;
        height: 2px;
        background: var(--surface);
        margin: 2px 0;
    }
    .navbar-inner { gap: 6px; }
    /* Menú lateral. Antes empujaba la página hacia abajo: con 15 entradas el contenido
       se iba de la pantalla y había que scrollear el menú y después volver arriba. Como
       panel lateral se abre encima, no mueve nada y scrollea solo si hace falta. */
    .mobile-menu {
        display: block;
        position: fixed; top: 0; right: 0; bottom: 0;
        width: min(82vw, 320px);
        background: var(--sunken);
        padding: 14px 0 24px;
        box-shadow: -18px 0 44px -20px rgba(0,0,0,.65);
        transform: translateX(100%);
        transition: transform .24s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 200;
    }
    .mobile-menu.open { transform: translateX(0); }
    /* Velo: cierra al tocar afuera y despega el panel del contenido. */
    .mobile-menu-velo {
        position: fixed; inset: 0;
        background: rgba(6,6,14,.55);
        opacity: 0; pointer-events: none;
        transition: opacity .24s ease;
        z-index: 199;
    }
    .mobile-menu-velo.open { opacity: 1; pointer-events: auto; }
    body.menu-abierto { overflow: hidden; }
    /* Group selector: hide on mobile (accessible from Mis Grupos) */
    .group-selector { display: none; }
    .notif-dropdown { right: -40px; width: 290px; }
    .navbar-brand { flex-shrink: 0; }
    .navbar-brand .logo-icon { font-size: 20px; }
    .navbar-brand .logo-text { display: none; }
    .container { padding: 0 12px; }
    .main-content { padding: 20px 0 40px; }

    /* Base font bump for mobile */
    body { font-size: 16px; }

    /* Match rows */
    .match-row {
        grid-template-columns: 1fr auto 1fr;
        gap: 4px;
        text-align: center;
        padding: 14px 8px;
        align-items: center;
        border-bottom: 1px solid var(--gray-100, #eee);
    }
    .match-row:last-child { border-bottom: none; }
    .match-team {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 12px;
    }
    .match-team.home, .match-team.away {
        text-align: center;
    }
    .team-flag { font-size: 34px; line-height: 1; order: -1; margin-top: 26px; }
    .match-center {
        text-align: center;
        min-width: auto;
        align-self: start;
    }
    .match-team {
        align-self: start;
    }
    /* En un partido ya jugado el centro de la fila es sólo el marcador y la fase, así que el escudo
       se alinea con el marcador en vez de colgar debajo. En los pendientes el centro es el stepper
       de carga, mucho más alto, y ahí el escudo tiene que seguir arriba: por eso no va para todos. */
    .match-row.finished .match-team,
    .match-row.finished .match-center,
    .match-row.playing .match-team,
    .match-row.playing .match-center { align-self: center; }
    .match-row.finished .team-flag,
    .match-row.playing .team-flag { margin-top: 0; }
    .match-time-info {
        font-size: 13px;
    }
    .match-date {
        font-size: 10px;
        margin-top: 2px;
        margin-bottom: 0;
    }

    /* Stepper mobile */
    .stepper-btn { width: 42px; height: 30px; font-size: 16px; }
    .stepper-input { width: 42px; height: 42px; font-size: 22px; }
    .stepper-sep { font-size: 20px; }
    .prediction-stepper { gap: 6px; }
    .match-team { font-size: 12px; gap: 4px; }
    .team-logo-sm { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }

    /* Score display */
    .match-score { font-size: 26px; }

    /* Cards */
    .card-header { padding: 12px 14px; font-size: 14px; }
    .card-body { padding: 14px; }

    /* Tabs scroll */
    .tabs { gap: 0; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
    .tab { padding: 10px 14px; font-size: 14px; }

    /* Stats / dashboard cards */
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    /* Con 3 cajas, dos columnas dejan un hueco vacío abajo: van las tres en una fila. */
    .stats-row:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stats-row:has(> :nth-child(3):last-child) .stat-card { padding: 14px 6px; }
    .stats-row:has(> :nth-child(3):last-child) .stat-value { font-size: 26px; }
    .stats-row:has(> :nth-child(3):last-child) .stat-label { font-size: 10.5px; letter-spacing: .3px; }
    /* Cantidad impar mayor: la última ocupa el ancho en vez de quedar sola a media fila. */
    .stats-row > .stat-card:last-child:nth-child(odd):nth-child(n+5) { grid-column: 1 / -1; }
    .stat-card { padding: 16px 12px; }
    .stat-value { font-size: 30px; }
    .stat-label { font-size: 12px; }

    /* Page header */
    .page-header h1 { font-size: 28px; }
    .page-header p { font-size: 15px; }
    .page-header { margin-bottom: 20px; }

    /* Grid */
    .grid-2 { grid-template-columns: 1fr; }

    /* Login */
    .login-box { margin: 20px; padding: 35px 25px; }

    /* Ranking */
    .ranking-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: 65vh; }
    .ranking-table th, .ranking-table td { padding: 12px 10px; font-size: 14px; white-space: nowrap; }
    .ranking-points { font-size: 20px; }
    .ranking-pos { font-size: 18px; }
    .ranking-name { font-size: 14px; }
    .ranking-search { width: 140px; font-size: 12px; padding: 5px 10px; }

    /* Alerts */
    .alert { font-size: 15px; }

    /* Forms */
    .form-control { font-size: 16px; }

    /* Buttons */
    .btn { font-size: 14px; }

    /* Members list */
    .member-row { font-size: 14px; }

    /* Groups */
    .group-card-name { font-size: 16px; }
    .group-card-meta { font-size: 13px; }

    /* Bonus */
    .bonus-groups-grid { grid-template-columns: 1fr 1fr; }

    .score-stepper { gap: 6px; }

    /* Awards */
    .awards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .award-card { padding: 20px 14px; }
    .award-emoji { font-size: 36px; margin-bottom: 8px; }
    .award-name { font-size: 13px; }
    .award-winner { font-size: 13px; }
    .award-stat { font-size: 12px; }
    .office-stat-item { padding: 12px; gap: 12px; }
    .office-stat-icon { font-size: 26px; width: 40px; }
    .office-stat-value { font-size: 13px; }

    /* Bonus */
    .bonus-groups-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
    .bonus-team-option { padding: 8px 10px; gap: 8px; }
    .bonus-team-name { font-size: 13px; }
    .bonus-summary-row { gap: 8px; }
    .bonus-summary-label { min-width: auto; }
    .bonus-summary-value { font-size: 13px; }
}

/* ---- Stats Page: Awards ---- */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.award-card {
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    border: 2px solid var(--gray-200);
    transition: transform 0.2s, box-shadow 0.2s;
}
.award-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.award-emoji {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
}
.award-name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.award-winner {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 4px;
}
.award-stat {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 600;
}
.award-desc {
    font-size: 11px;
    color: var(--gray-300);
    font-weight: 500;
    margin-top: 6px;
    font-style: italic;
    line-height: 1.3;
}
.stats-empty {
    text-align: center;
    color: var(--gray-500);
    font-weight: 500;
    padding: 30px 20px;
    font-size: 14px;
}

/* ---- Stats Page: Office Stats ---- */
.office-stats-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.office-stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--gray-100);
    border-radius: var(--radius);
    transition: background 0.15s;
}
.office-stat-item:hover {
    background: var(--gray-200);
}
.office-stat-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
    text-align: center;
}
.office-stat-content {
    flex: 1;
    min-width: 0;
}
.office-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    margin-bottom: 2px;
}
.office-stat-value {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}
.office-stat-detail {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 500;
    margin-top: 2px;
}

/* ---- Help Page ---- */
.help-content { padding: 20px; }
.help-content p { margin-bottom: 12px; line-height: 1.6; color: var(--ink); font-size: 14px; }
.help-content p:last-child { margin-bottom: 0; }

.help-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.help-points-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px;
    border-radius: var(--radius);
    border: 2px solid var(--gray-200);
}
.help-points-item.help-points-exact { border-color: var(--green); background: rgba(46, 204, 113, 0.06); }
.help-points-item.help-points-ok { border-color: var(--yellow); background: rgba(241, 196, 15, 0.06); }
.help-points-item.help-points-miss { border-color: var(--gray-300); background: var(--gray-100); }
.help-points-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--ink);
}
.help-points-exact .help-points-value { color: var(--primary-dark); }
.help-points-ok .help-points-value { color: var(--yellow-deep); }
.help-points-miss .help-points-value { color: var(--gray-300); }
.help-points-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 4px 0;
}
.help-points-desc {
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.5;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 12px 0;
}
.help-table th, .help-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.help-table th {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    background: var(--gray-100);
}
.help-table td.center, .help-table th.center { text-align: center; }
.help-table tbody tr:last-child td { border-bottom: none; }

.help-note {
    font-size: 13px !important;
    color: var(--gray-500) !important;
    font-style: italic;
    padding: 10px 14px;
    background: var(--gray-100);
    border-radius: var(--radius);
    border-left: 3px solid var(--primary);
}

.help-faq-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.help-faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.help-faq-item:first-child { padding-top: 0; }
.help-faq-item h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.help-faq-item p {
    font-size: 13px !important;
    color: var(--gray-500) !important;
    margin-bottom: 0 !important;
}

/* Small phones */
@media (max-width: 380px) {
    .match-team { font-size: 12px; }
    .stepper-btn { width: 44px; height: 30px; }
    .stepper-input { width: 44px; height: 44px; font-size: 20px; }
    .navbar-brand .logo-text { font-size: 16px; }
}

/* ---- Group Selector ---- */
.group-selector {
    position: relative;
    margin-left: 8px;
}
.group-selector-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--white);
    padding: 6px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-selector-btn:hover {
    background: rgba(255,255,255,0.18);
}
.group-selector-btn .arrow {
    font-size: 8px;
    opacity: 0.6;
}
.group-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    z-index: 200;
    overflow: hidden;
}
.group-dropdown.open {
    display: block;
}
.group-dropdown a {
    display: block;
    padding: 10px 14px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid var(--gray-100);
}
.group-dropdown a:hover {
    background: var(--gray-100);
}
.group-dropdown a.active {
    color: var(--primary);
    font-weight: 700;
}
.group-dropdown a.group-dropdown-action {
    color: var(--primary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Groups Page ---- */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.group-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.group-card-name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase;
}
.group-card-meta {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 500;
}
.group-card-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}
.group-card-actions .btn {
    font-size: 10px;
    padding: 6px 8px;
}
.invite-code-display {
    background: var(--gray-100);
    border: 2px dashed var(--gray-200);
    border-radius: var(--radius);
    padding: 12px 16px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 4px;
    color: var(--primary);
    cursor: pointer;
    user-select: all;
}
.invite-code-display:hover {
    border-color: var(--primary);
}
.onboarding-box {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px;
    text-align: center;
    margin-bottom: 24px;
}
.onboarding-box h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.onboarding-box p {
    color: var(--gray-500);
    font-size: 14px;
    margin-bottom: 20px;
}
.members-list {
    border-top: 1px solid var(--line);
}
.member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 14px;
}
.member-role {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
}
.match-locked-badge {
    display: inline-block;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
}

/* ---- Logo Icon ---- */
.logo-icon {
    font-size: 22px;
    line-height: 1;
}



/* ---- Impersonate banner ---- */
.impersonate-banner {
    background: var(--yellow);
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.impersonate-banner-btn {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 4px 12px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.impersonate-banner-btn:hover {
    background: rgba(255,255,255,0.35);
}

/* ---- Mi cuenta layout (admin-grid usado también acá) ---- */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) {
    .admin-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Danger zone (collapsible delete account) ---- */
.danger-zone { background: transparent; border: 1px solid var(--gray-100); border-radius: var(--radius); transition: border-color 0.15s; }
.danger-zone[open] { border-color: rgba(192, 57, 43, 0.3); }
.danger-zone > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-size: 13px; color: var(--gray-500); display: flex; align-items: center; justify-content: space-between; user-select: none; }
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone > summary::after { content: '⌃'; transform: rotate(180deg); transition: transform 0.2s; opacity: 0.5; font-size: 14px; }
.danger-zone[open] > summary { color: var(--red); }
.danger-zone[open] > summary::after { transform: rotate(0deg); opacity: 1; }
.danger-zone > summary:hover { color: var(--red); }
/* Mi cuenta: el link a eliminar se muestra como una nota discreta, alineado con su posición al desplegarse. */
.danger-zone-account { border-color: transparent; }
.danger-zone-account[open] { border-color: rgba(192, 57, 43, 0.2); }
.danger-zone-account > summary { font-size: 11px; padding: 6px 16px; opacity: 0.45; }
.danger-zone-account > summary::after { display: none; }
.danger-zone-account[open] > summary { opacity: 1; padding: 12px 16px; font-size: 13px; }
.danger-zone-account[open] > summary::after { display: inline; }
/* En desktop limitamos el danger-zone de mi-cuenta al ancho de la columna izquierda del admin-grid (50% - mitad del gap). */
@media (min-width: 769px) {
    .danger-zone-account { max-width: calc(50% - 12px); }
}

/* ---- Push preferences ---- */
.push-pref-item:hover { border-color: var(--gray-200) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.push-pref-item:has(input:checked) { background: rgba(46, 204, 113, 0.04) !important; border-color: rgba(46, 204, 113, 0.3) !important; }

/* ---- Push notification banner ---- */
.push-banner { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); color:#fff; box-shadow: 0 3px 12px rgba(46, 204, 113, 0.25); position: relative; z-index: 5; }
.push-banner-inner { max-width:1200px; margin:0 auto; padding:16px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.push-banner-icon { font-size:32px; flex-shrink:0; line-height:1; display:inline-block; transform-origin: 50% 0; animation: pushBellRing 2.4s ease-in-out infinite; }
@keyframes pushBellRing {
    0%, 50%, 100% { transform: rotate(0); }
    8%, 24%, 40%  { transform: rotate(-12deg); }
    16%, 32%      { transform: rotate(12deg); }
}
.push-banner-text { flex:1; min-width:220px; line-height:1.4; font-size:14px; }
.push-banner-text strong { display:block; font-size:16px; margin-bottom:2px; letter-spacing:0.2px; }
.push-banner-text span { opacity:0.95; }
.push-banner-actions { display:flex; gap:8px; flex-shrink:0; }
.push-banner-actions .btn { font-weight:700; padding:9px 18px; }
.push-banner-actions .btn-primary { background: var(--surface); color:var(--primary-dark); border:1px solid #fff; }
.push-banner-actions .btn-primary:hover { background:var(--surface-2); color:var(--green-deep); }
.push-banner-actions .btn-outline { color:#fff; border-color:rgba(255,255,255,0.7); background:transparent; }
.push-banner-actions .btn-outline:hover { background:rgba(255,255,255,0.15); border-color:#fff; }
@media (prefers-reduced-motion: reduce) { .push-banner-icon { animation: none; } }

/* ---- Collapsible match groups ---- */
.match-group.collapsed .match-list {
    display: none;
}
.collapse-arrow {
    font-size: 11px;
    margin-left: 6px;
    transition: transform 0.2s;
    display: inline-block;
}
.match-group.collapsed .collapse-arrow {
    transform: rotate(-90deg);
}
.collapsible-header:hover {
    opacity: 0.8;
}

/* ---- Team Logo (for club tournaments) ---- */
.team-logo-sm {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    vertical-align: middle;
    object-fit: contain;
    display: inline-block;
}

/* ---- Public nav bar ---- */
.pub-nav { background: var(--sunken); padding: 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
.pub-nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 60px; }
.pub-nav .logo { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 22px; text-transform: uppercase; }
.pub-nav .logo span { font-size: 28px; }
.pub-nav-links { display: flex; align-items: center; gap: 8px; }
.pub-nav-links a { padding: 8px 18px; border-radius: var(--radius); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; }
.pub-nav-links .btn-login { color: var(--gray-300); }
.pub-nav-links .btn-login:hover { color: #fff; }
.pub-nav-links .btn-register { background: var(--primary); color: #fff; }
.pub-nav-links .btn-register:hover { background: var(--primary-dark); color: #fff; }

/* ---- Public pages nav menu ---- */
.pub-nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pub-nav-menu a {
    color: var(--gray-300);
    font-weight: 600;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: var(--radius);
    transition: color 0.2s;
}
.pub-nav-menu a:hover {
    color: #fff;
}
.pub-nav-menu a.active {
    color: #fff;
}
@media (max-width: 768px) {
    .pub-nav-inner {
        padding: 0 12px;
        flex-wrap: wrap;
        height: auto;
        padding-top: 10px;
        padding-bottom: 6px;
        gap: 0;
    }
    .pub-nav .logo { font-size: 18px; gap: 6px; }
    .pub-nav .logo span { font-size: 22px; }
    .pub-nav-links a { padding: 6px 10px; font-size: 11px; }
    .pub-nav-menu {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 0;
        margin-top: 4px;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 6px;
    }
    .pub-nav-menu a {
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* ---- Public pages: steps ---- */
.pub-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    text-align: center;
    margin: 40px 0;
}
.pub-step-num {
    width: 56px;
    height: 56px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    margin: 0 auto 16px;
}
.pub-step h3 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pub-step p {
    color: var(--gray-500);
    font-size: 14px;
    line-height: 1.6;
}

/* ---- Public CTA banner ---- */
/* CTA — pasa de rectángulo verde macizo a panel oscuro con barra de acento.
   Un bloque de color saturado a todo el ancho aplasta lo que tiene alrededor y compite con
   el botón, que es lo único que debería pedir el click. Acá el fondo se calla y el verde
   queda sólo donde se toca. */
.pub-cta-banner {
    background: var(--sunken);
    color: #fff;
    text-align: center;
    padding: 48px 20px;
    margin: 40px 0 30px;
    border-radius: var(--radius-panel);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.pub-cta-banner::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--primary);
}
.pub-cta-banner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 80% at 50% 0%, rgba(46,204,113,.16), transparent 60%);
}
.pub-cta-banner > * { position: relative; z-index: 1; }
.pub-cta-banner p { color: rgba(255,255,255,.72); }
.pub-cta-banner h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.pub-cta-banner p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 24px;
}
/* Píldora = la acción principal de la pantalla. Una por pantalla, nunca dos. */
.pub-cta-banner a {
    display: inline-block;
    background: var(--primary);
    color: var(--on-primary);
    padding: 15px 38px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    box-shadow: 0 12px 30px -12px rgba(46,204,113,.9);
}
.pub-cta-banner a:hover {
    transform: translateY(-2px);
    background: var(--primary-dark);
    color: var(--on-primary);
}

/* ---- SEO content section ---- */
.seo-section {
    margin-top: 32px;
    margin-bottom: 12px;
}
.seo-inner {
    background: var(--surface);
    border: 1px solid var(--gray-100, #eee);
    border-radius: var(--radius-card);
    padding: 32px 28px;
}
.seo-inner h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--gray-900, #1a1a1a);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.seo-inner h2:not(:first-child) {
    margin-top: 24px;
}
.seo-inner p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-500, #6b6b6b);
    margin: 0 0 4px;
}
.seo-inner a {
    color: var(--primary);
    font-weight: 600;
}
.seo-inner a:hover {
    text-decoration: underline;
}

/* ---- Public upcoming matches box ---- */
.pub-upcoming-box {
    border: 2px solid var(--primary);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(46,204,113,0.12);
}
.pub-upcoming-header {
    background: var(--primary);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 20px;
}
.pub-upcoming-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
}
.pub-upcoming-border {
    border-bottom: 1px solid var(--gray-100);
}
.pub-upcoming-info {
    flex: 1;
    min-width: 0;
}
.pub-upcoming-match {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    color: var(--ink);
}
/* Equipo + escudo como una sola unidad, para el bloque de próximos partidos y para el contador del
   partido destacado. El contenido era inline suelto (escudo, nombre, "vs", nombre, escudo) y con
   nombres largos —"Albion FC vs CA Progreso Montevideo"— la línea cortaba en cualquier lado: los
   dos escudos terminaban apilados a la izquierda, lejos del equipo al que pertenecen. Ahora corta
   sólo entre los dos equipos. */
.pub-upcoming-match, .countdown-match {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 8px;
}
.pub-upcoming-match .mt-lado, .countdown-match .mt-lado {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
}
.pub-upcoming-match .mt-nombre, .countdown-match .mt-nombre { overflow-wrap: anywhere; }
.pub-upcoming-match .mt-vs, .countdown-match .mt-vs { flex: 0 0 auto; opacity: .55; font-weight: 700; }
.countdown-match { justify-content: center; }

.pub-upcoming-date {
    font-size: 12px;
    color: var(--gray-500);
    font-weight: 600;
    margin-top: 2px;
}
@media (max-width: 768px) {
    .pub-upcoming-item {
        flex-wrap: wrap;
        padding: 14px;
        gap: 10px;
    }
    .pub-upcoming-match { font-size: 14px; justify-content: flex-start; }
    .pub-upcoming-match .team-logo-sm, .countdown-match .team-logo-sm {
        width: 26px; height: 26px; min-width: 26px; min-height: 26px;
    }
    .pub-upcoming-item .upcoming-alert-timer { justify-content: center; width: 100%; }
}

/* ---- Public tournament tabs ---- */
.pub-tabs-wrapper {
    position: relative;
    margin-bottom: 20px;
}
.pub-tabs-wrapper::before,
.pub-tabs-wrapper::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-400);
}
.pub-tabs-wrapper::before {
    content: '‹';
    left: 0;
    background: linear-gradient(to right, var(--surface) 60%, transparent 100%);
    justify-content: flex-start;
    padding-left: 4px;
}
.pub-tabs-wrapper::after {
    content: '›';
    right: 0;
    background: linear-gradient(to left, var(--surface) 60%, transparent 100%);
    justify-content: flex-end;
    padding-right: 4px;
}
.pub-tabs-wrapper.fade-left::before { opacity: 1; }
.pub-tabs-wrapper.fade-right::after { opacity: 1; }
.pub-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}
.pub-tabs::-webkit-scrollbar { display: none; }
.pub-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--gray-100);
    color: var(--gray-500);
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.pub-tab:hover {
    background: var(--gray-200);
    color: var(--ink);
}
.pub-tab.active {
    background: var(--primary);
    color: #fff;
}
.pub-tab.active:hover {
    color: #fff;
}
.pub-tab-finished {
    opacity: .72;
}
.pub-tab-finished.active { opacity: 1; }
.pub-tab-check {
    margin-left: 4px;
    font-size: 11px;
    opacity: .9;
}

/* ============================================================
   Bracket / fase eliminatoria (en /posiciones para world_cup, cup, etc.)
   ============================================================ */
.bracket-section { margin-top: 24px; }
.bracket-section-title {
    font-family: var(--font-display, sans-serif);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 12px;
}
/* La fase eliminatoria reusa el componente de partido del fixture (.match-list/.match-row),
   agrupado por fecha. El layout y los estilos viven en las reglas .match-* existentes; acá
   solo queda el rótulo de día y el acordeón de fase (ver el <style> de standings-content.php). */
@media (max-width: 600px) {
    .bracket-section-title { font-size: 18px; }
}

/* ---- Public fixture/results read-only ---- */
.pub-match-time {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    color: var(--ink);
    text-align: center;
}
.pub-match-tbc {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--gray-400);
}
.pub-match-center {
    text-align: center;
}
.pub-match-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pub-match-score .score-num {
    background: var(--sunken);
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 900;
    font-size: 16px;
}
.pub-match-score .separator {
    font-weight: 700;
    color: var(--gray-300);
}

/* Match details (venue + TV) */
.pub-match-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--gray-500);
}
.pub-match-venue {
    font-weight: 600;
}
.pub-match-tv {
    color: var(--gray-400);
}
.pub-next-match-venue {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-500);
}
.pub-next-match-tv {
    margin-top: 2px;
    font-size: 12px;
    color: var(--gray-400);
}

/* ---- Public page section ---- */
.pub-section {
    margin-bottom: 32px;
}
.pub-section-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--ink);
}

/* ---- Public points grid (for que-es and como-jugar) ---- */
.pub-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.pub-points-item {
    background: var(--gray-100);
    border-radius: var(--radius-card);
    padding: 24px;
    text-align: center;
}
.pub-points-value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    display: block;
    margin-bottom: 4px;
}
.pub-points-label {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}
.pub-points-desc {
    font-size: 13px;
    color: var(--gray-500);
    display: block;
}
.pub-points-exact .pub-points-value { color: var(--primary); }
.pub-points-ok .pub-points-value { color: var(--yellow); }
.pub-points-miss .pub-points-value { color: var(--red, var(--red)); }

/* Share toast */
.share-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-card, #1e1e2e);
    color: var(--primary);
    padding: 10px 24px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
}
.share-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.share-toast-error {
    background: var(--red, var(--red));
    color: var(--white);
}

/* ---- Toast (general) ---- */
.admin-toast {
    position: fixed;
    top: 70px;
    right: 20px;
    left: auto;
    z-index: 9999;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: toastIn 0.3s ease, toastOut 0.4s ease 3.5s forwards;
    max-width: 400px;
}
.toast-success { background: var(--primary); color: #fff; }
.toast-error { background: var(--red, var(--red)); color: #fff; }
@keyframes toastIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
    from { opacity: 1; }
    to { opacity: 0; pointer-events: none; }
}
@media (max-width: 600px) {
    .admin-toast {
        top: 64px;
        right: 12px;
        left: auto;
        max-width: calc(100vw - 24px);
        padding: 10px 16px;
        font-size: 12px;
    }
}

/* ---- Conversations ---- */
.conv-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.conv-msg {
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.7;
}
.conv-msg-user { background: var(--surface); border: 1px solid var(--line); }
.conv-msg-admin { background: var(--sunken); color: var(--white); }
.conv-msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
}
.conv-msg-user .conv-msg-header span { color: var(--gray-400); }
.conv-msg-admin .conv-msg-header span { color: var(--gray-300); }
.conv-msg-admin .conv-msg-header strong { color: var(--primary); }
.conv-msg-body { word-break: break-word; }
.conv-msg-delete {
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.4;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    transition: opacity 0.15s, background 0.15s;
}
.conv-msg-delete:hover { opacity: 1; background: rgba(231,76,60,0.15); color: var(--red); }

.conv-msg-seen, .conv-msg-unseen {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.conv-msg-admin .conv-msg-header .conv-msg-seen,
.conv-msg-user .conv-msg-header .conv-msg-seen { color: var(--primary); }
.conv-msg-admin .conv-msg-header .conv-msg-unseen,
.conv-msg-user .conv-msg-header .conv-msg-unseen { color: var(--gray-300); opacity: 0.7; }
.conv-msg-body p { margin: 0 0 10px 0; }
.conv-msg-body p:last-child { margin-bottom: 0; }

/* Tarjeta de preview de nota del blog (mensajes de admin via [blog:slug]) — estilo OG/redes */
.blog-card { display: block; max-width: 330px; margin: 10px 0; border: 1px solid var(--gray-200, #e5e5e5); border-radius: 13px; overflow: hidden; text-decoration: none; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor: pointer; }
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); border-color: var(--primary); }
.blog-card-cover { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--gray-100, #eee); overflow: hidden; }
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { display: block; padding: 10px 12px 11px; }
.blog-card-kicker { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--gray-400, #aaa); margin-bottom: 3px; }
.blog-card-title { display: block; font-weight: 800; font-size: 14px; color: var(--dark, #2a2a3a); line-height: 1.28; }
.blog-card-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--gray-500, #888); margin-top: 4px; line-height: 1.4; }
.blog-card-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--primary); }
.blog-card-cta svg { width: 13px; height: 13px; transition: transform .15s ease; }
.blog-card:hover .blog-card-cta svg { transform: translateX(4px); }
/* Sin portada: la card sigue siendo una tarjeta (no un texto suelto) */
.blog-card[data-no-cover] .blog-card-body { padding-top: 11px; }

textarea[data-counter] { line-height: 1.9; }

.btn-attach svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-attach.has-file { border-color: var(--primary); color: var(--primary); background: rgba(46,204,113,0.08); }
.char-counter { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--gray-500); }
.char-counter-bar { flex: 1; height: 4px; background: var(--gray-200); border-radius: 2px; overflow: hidden; }
.char-counter-fill { height: 100%; width: 0; background: var(--primary); transition: width 0.15s ease, background 0.15s ease; }
.char-counter-label { font-variant-numeric: tabular-nums; white-space: nowrap; }
.char-counter.warn .char-counter-fill { background: var(--yellow); }
.char-counter.warn .char-counter-label { color: var(--yellow); }
.char-counter.danger .char-counter-fill { background: var(--red); }
.char-counter.danger .char-counter-label { color: var(--red); font-weight: 600; }
.conv-cat-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.conv-cat-bug { background: rgba(255,84,112,.13); color: var(--red, var(--red)); }
.conv-cat-suggestion { background: rgba(46,204,113,.13); color: var(--green-deep); }
.conv-cat-other { background: var(--gray-100); color: var(--gray-500); }
.conv-cat-report { background: rgba(241,196,15,.16); color: var(--yellow-deep); }
.conv-cat-ads { background: rgba(59,167,255,.14); color: var(--blue-deep); }
.conv-status-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}
.conv-status-closed { background: var(--gray-200); color: var(--gray-500); }
.conv-new-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--primary);
    color: var(--white);
    text-transform: uppercase;
}
.conv-list-item {
    display: block;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--ink);
    transition: background 0.15s;
    border-bottom: 1px solid var(--gray-100);
}
.conv-list-item:hover { background: var(--gray-100); }
.conv-list-item.conv-unread { border-left: 3px solid var(--primary); }
.conv-list-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conv-list-meta { font-size: 12px; color: var(--gray-400); margin-top: 4px; }

/* Invite banner (post-creation) */
.invite-banner {
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
}
.invite-banner h2 {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--primary);
}
.invite-banner p {
    color: var(--gray-500);
    font-size: 13px;
    margin-bottom: 16px;
}
.invite-banner .invite-code-display {
    margin: 0 auto 16px;
}
.invite-banner .invite-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================================
   PUBLIC STANDINGS TABLE (/posiciones)
   ========================================================= */
.pub-standings-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pub-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.pub-standings-table th {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    padding: 10px 6px;
    text-align: center;
    border-bottom: 2px solid var(--gray-200);
}
.pub-standings-table td {
    padding: 10px 6px;
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
}
.pub-standings-table th { white-space: nowrap; }
.pub-standings-table tbody tr:hover {
    background: var(--gray-50);
}
.pub-st-pos {
    font-weight: 700;
    color: var(--gray-500);
    width: 40px;
    padding-left: 16px;
}
.pub-st-team {
    text-align: left !important;
    min-width: 140px;
}
a.pub-standings-team,
a.match-team {
    text-decoration: none;
    color: inherit;
}
a.pub-standings-team:hover span,
a.match-team:hover span:not(.team-flag) {
    text-decoration: underline;
}
.pub-standings-team {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pub-standings-team .team-logo-sm {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.pub-st-pts {
    font-weight: 700;
    color: var(--primary);
    font-size: 15px;
}
@media (max-width: 600px) {
    .pub-st-hide-mobile { display: none; }
    .pub-standings-table { font-size: 11px; width: 100%; }
    .pub-standings-table th, .pub-standings-table td { padding: 7px 2px; white-space: nowrap; }
    .pub-st-pos { width: 20px; padding-left: 4px; }
    .pub-st-team { white-space: normal; }
    .pub-st-team .pub-standings-team { gap: 4px; }
    .pub-standings-team img, .pub-standings-team span[style*="font-size"] { flex-shrink: 0; }
    .pub-st-pts { font-size: 13px; }
    .pub-standings-wrap { overflow-x: hidden; }
}

/* =========================================================
   TEAM GRID (/proximo-partido index)
   ========================================================= */
/* ---- Directorio de equipos (/proximo-partido) ----
   Con 7 torneos y ~140 equipos, un título suelto no alcanzaba para separar: todo se leía como
   una lista única e interminable. Cada torneo pasa a vivir en su propia card con banda oscura
   (el mismo device de separación que usa el resto del sitio).
   La tarjeta dejó de ser una fila con ícono chico: ahora manda el ESCUDO —es el artefacto del
   tema y desde que bajamos los SVG se ve nítido a cualquier tamaño— y el nombre va debajo.
   Alto mínimo fijo + nombre a dos líneas para que las filas no queden dentadas con los nombres
   largos ("Independiente Rivadavia de Mendoza"), que era la mitad de la sensación de desprolijo. */
.pub-tgroup { margin-bottom: 18px; }
.pub-tgroup .card-header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.pub-tgroup-count {
    font-family: var(--font-body, inherit); font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.55); white-space: nowrap;
}
.pub-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 2px;
    padding: 12px;
    margin: 0;
}
.pub-team-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 9px;
    padding: 14px 8px 12px;
    min-height: 108px;
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.pub-team-card:hover {
    background: var(--cream, #f7faf8);
    border-color: var(--gray-100);
    transform: translateY(-2px);
}
.pub-team-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* Caja de alto fijo: con o sin escudo, el nombre arranca siempre a la misma altura. */
.pub-team-badge {
    width: 46px; height: 46px; flex: none;
    display: flex; align-items: center; justify-content: center;
}
.pub-team-card .team-logo-sm { width: 46px; height: 46px; object-fit: contain; }
/* Sin escudo: monograma en vez de un hueco. Son ~14 equipos y el hueco desalineaba la grilla. */
.pub-team-mono {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gray-100, #eef0ee); color: var(--gray-500, #6b7280);
    font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: 0.02em;
}
.pub-team-name {
    font-size: 12.5px; font-weight: 600; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: break-word;
}
/* La barra de torneos acompaña el scroll: con la página larga, volver arriba para cambiar de
   torneo era el movimiento más repetido. */
.pub-tabs-sticky {
    position: sticky; top: 60px; z-index: 20;
    background: var(--bg, #f5f5f2);
    padding: 8px 0;
    margin-bottom: 14px;
}
.pub-tabs-sticky .pub-tab.is-current {
    background: var(--sunken); color: var(--white); border-color: var(--ink);
}
@media (max-width: 600px) {
    .pub-team-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); padding: 8px; }
    .pub-team-card { min-height: 100px; padding: 12px 4px 10px; }
    .pub-team-badge, .pub-team-card .team-logo-sm { width: 40px; height: 40px; }
    .pub-team-name { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .pub-team-card { transition: none; }
    .pub-team-card:hover { transform: none; }
}

/* =========================================================
   NEXT MATCH CARD (/proximo-partido/{team})
   ========================================================= */
.pub-next-match-card {
    background: var(--card-bg);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    margin-bottom: 20px;
}

/* ---- Próximo partido POR TORNEO (/proximo-partido/<equipo>) ----
   Un equipo puede estar jugando tres competencias a la vez (Estudiantes: Libertadores, Clausura y
   Copa Argentina). Apiladas, las tarjetas se leían como un solo bloque continuo: el nombre del
   torneo era una línea gris más, del mismo peso tipográfico que el estadio o el canal de TV, y no
   marcaba dónde terminaba un partido y empezaba el siguiente.
   Cada torneo pasa a tener su propia card con banda oscura — el mismo separador que el directorio
   de equipos y el resto del sitio — y la banda suma la fase, que antes no se mostraba en ningún lado. */
.pub-next-group { margin-bottom: 18px; }
.pub-next-group .card-header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.pub-next-group-phase {
    font-family: var(--font-body, inherit); font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; color: rgba(255,255,255,0.55); white-space: nowrap;
    text-transform: none;
}
/* La card interna ya no necesita borde propio: el contenedor se lo da. */
.pub-next-group .pub-next-match-card {
    border: 0; border-radius: 0; margin: 0; background: transparent;
}
/* El torneo ya está en la banda: repetirlo arriba del partido era ruido. */
.pub-next-group .pub-next-match-tournament { display: none; }
.pub-next-match-live {
    border-color: var(--red);
    box-shadow: 0 0 0 1px var(--red);
}
.pub-next-match-tournament {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}
.pub-next-match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.pub-next-match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
    flex: 1;
    text-align: center;
    min-width: 0;
}
.pub-next-match-team .team-logo-sm {
    width: 64px;
    height: 64px;
}
.pub-next-match-team > .team-flag {
    font-size: 56px;
    line-height: 1;
}
.pub-next-match-team > .team-flag .team-logo-sm {
    width: 64px;
    height: 64px;
}
.pub-next-match-vs {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-400);
}
.pub-next-match-score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pub-next-match-score .score-num {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 900;
}
.pub-next-match-score .separator {
    font-size: 20px;
    color: var(--gray-300);
}
.pub-next-match-score .match-status {
    width: 100%;
}
/* Indicador "en vivo / en juego" UNIFICADO en todo el sitio: pill rojo con dot pulsante.
   .pub-live (páginas públicas) y .status-playing (fixture logueado, admin, etc.) comparten
   el mismo look. .status-playing también lleva .match-status (de ahí hereda tamaño base). */
.pub-live,
.match-status.status-playing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--red, var(--red));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 11px;
    border-radius: 20px;
    animation: none;
}
.pub-live::before,
.match-status.status-playing::before {
    content: "";
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--surface);
    flex-shrink: 0;
    animation: pub-live-pulse 1.2s ease-in-out infinite;
}
@keyframes pub-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }

.pub-next-match-meta {
    margin-top: 16px;
}
.pub-next-match-date {
    color: var(--gray-600);
    font-size: 15px;
}

/* ---- La fecha manda (/proximo-partido/<equipo>) ----
   La pregunta de la página es "cuándo juega". La fecha salía en 15px gris y regular, debajo de un
   estadio en 13px BOLD y más oscuro: el dato secundario pesaba más que el principal. Se invierte —
   la fecha sube a tamaño de titular y el estadio baja a texto de apoyo.
   Sólo acá (.pub-next-group): en /quien-juega-hoy hay decenas de partidos y una fecha de 21px por
   cada uno sería una pared. */
.pub-next-group .pub-next-match-date {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}
.pub-next-group .pub-next-match-venue {
    margin-top: 10px;
    font-weight: 500;
}
.pub-next-match-card .upcoming-alert-timer {
    margin-top: 16px;
    justify-content: center;
}
@media (max-width: 480px) {
    .pub-next-match-teams { gap: 16px; }
    .pub-next-match-team { font-size: 14px; }
    .pub-next-match-team .team-logo-sm { width: 44px; height: 44px; }
    /* "Domingo 27 de septiembre · 17:00hs" en 21px se parte en tres líneas en un teléfono. */
    .pub-next-group .pub-next-match-date { font-size: 18px; }
}
/* ---- HISTORIAL ENTRE LOS DOS (H2H) — dentro de la card de cada torneo ----
   Va pegado al partido al que corresponde, no como card aparte: un equipo que juega tres
   competencias tiene tres rivales distintos, y un historial suelto abajo no dice de cuál habla.
   Separado del partido por una línea, no por otra card, para que se lea como continuación.

   Cuatro secciones (balance · enfrentamientos · cómo llegan · promedios) separadas por AIRE y un
   subtítulo, no por bordes: antes venían una atrás de la otra con el mismo salto de 16px y se
   leían como una sola lista larga. */
/* El link a la página del cruce. Vive acá y no en cada ruta porque lo usan cuatro: el índice del
   fixture, el fixture de un torneo, quién juega hoy y la página de equipo. Estaba escrito una vez
   en el índice y copiarlo era garantizar que las cuatro se vieran distinto en seis meses.
   `grid-column: 1 / -1` lo baja a una fila propia debajo de los escudos: al lado competiría con
   ellos, que son lo que se mira primero. */
.pub-cruce-link {
    grid-column: 1 / -1; justify-self: center; margin-top: 6px;
    font-size: 11.5px; font-weight: 600; color: var(--gray-500);
    text-decoration: none; border-bottom: 1px dotted var(--gray-300, #c8ccd0);
}
.pub-cruce-link:hover { color: var(--primary-dark, #1e9e5a); border-bottom-color: currentColor; }

/* El cierre del bloque de historial en la página de equipo: lo que NO está acá y sí en la previa.
   Es la razón por la que este bloque puede quedarse en el balance y los últimos cruces en vez de
   repetir la previa entera — dos URLs nuestras con el mismo contenido compiten entre ellas. */
.pub-h2h-mas {
    max-width: 620px; margin: 26px auto 0; padding: 16px 18px;
    background: var(--gray-50, #fafafa); border: 1px solid var(--gray-100);
    border-radius: 10px; text-align: center;
}
.pub-h2h-mas p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--gray-500); }
.pub-h2h-mas a {
    display: inline-block; font-size: 13px; font-weight: 700; color: var(--primary-dark, #1e9e5a);
    text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px;
}
.pub-h2h-mas a:hover { color: var(--ink, #16181d); }

.pub-h2h {
    border-top: 1px solid var(--gray-100);
    padding: 22px 20px 24px;
}
/* En desktop la card llega a ~1100px y una lista de 6 líneas cortas estirada de punta a punta deja
   la fecha y la competencia a diez centímetros del marcador. El contenido se centra en una columna
   legible; la card sigue ocupando todo el ancho. */
.pub-h2h-sec { max-width: 620px; margin-inline: auto; }
.pub-h2h-sec + .pub-h2h-sec { margin-top: 30px; }
.pub-h2h-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--gray-500); text-align: center; margin-bottom: 16px;
}
/* Los subtítulos de sección van al ras de la izquierda: el título del bloque está centrado y es el
   único que manda, y tres centrados más lo empatarían en jerarquía. */
.pub-h2h-subtitle {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--gray-400); margin: 0 0 10px;
}
.pub-h2h-balance {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;
}
.pub-h2h-bal-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pub-h2h-bal-num {
    font-family: var(--font-display); font-size: 28px; line-height: 1;
    /* Cifras proporcionales: en un número grande y suelto, tabular-nums lo deja flojo. */
    font-variant-numeric: proportional-nums;
}
/* Cada número se pinta del color de su tramo en la barra: es lo que ata el número a la barra
   sin necesidad de una leyenda aparte. */
.pub-h2h-num-a { color: var(--viz-a); }
.pub-h2h-num-b { color: var(--viz-b); }
.pub-h2h-num-n { color: var(--gray-400); }
.pub-h2h-bal-lbl {
    font-size: 11px; color: var(--gray-500); line-height: 1.25;
    overflow-wrap: anywhere;   /* "Independiente Rivadavia" no puede desbordar la columna */
}

/* Barra divergente del balance: ganados | empates | perdidos, en proporción a los partidos
   jugados. Los tramos se separan con un hueco del color de la superficie, no con un borde:
   un borde suma tinta que no es dato. */
.pub-h2h-bar {
    display: flex; height: 10px; margin-top: 14px;
    border-radius: 5px; overflow: hidden;
    background: var(--gray-100);
}
.pub-h2h-seg { display: block; height: 100%; }
.pub-h2h-seg + .pub-h2h-seg { border-left: 2px solid var(--card-bg); }
.pub-h2h-seg-a { background: var(--viz-a); }
.pub-h2h-seg-n { background: var(--viz-neutral); }
.pub-h2h-seg-b { background: var(--viz-b); }

.pub-h2h-goles {
    text-align: center; font-size: 11px; color: var(--gray-400); margin-top: 10px;
}
.pub-h2h-list { list-style: none; margin: 0; padding: 0; }
.pub-h2h-row {
    display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: baseline;
    padding: 8px 0; border-top: 1px solid var(--gray-100); font-size: 13px;
}
.pub-h2h-row:first-child { border-top: 0; }
.pub-h2h-fecha { font-size: 11px; color: var(--gray-400); white-space: nowrap; }
.pub-h2h-equipos { min-width: 0; color: var(--gray-700); }
.pub-h2h-equipos b { font-family: var(--font-display); padding: 0 4px; }
.pub-h2h-comp {
    font-size: 10px; color: var(--gray-400); text-align: right; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
/* Una barrita al costado marca cómo le fue al equipo de la página, sin teñir la fila entera.
   Acá el verde/rojo sí va: es un pelo de 3px al margen, no una superficie rellena, y la fila
   dice el marcador al lado. */
.pub-h2h-row { border-left: 3px solid transparent; padding-left: 8px; }
.pub-h2h-g { border-left-color: var(--green); }
.pub-h2h-e { border-left-color: var(--gray-300); }
.pub-h2h-p { border-left-color: var(--red); }

.pub-h2h-forma-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0;
}
.pub-h2h-forma-team {
    font-size: 13px; color: var(--gray-700); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-h2h-forma-chips { display: flex; gap: 4px; flex-shrink: 0; }
.pub-h2h-chip {
    width: 20px; height: 20px; border-radius: 4px; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff;
}
.pub-h2h-chip-g { background: var(--green-deep); }
.pub-h2h-chip-e { background: var(--gray-400); }
.pub-h2h-chip-p { background: var(--red-deep); }

/* Leyenda de los promedios: el color va en la pastilla, nunca en el texto — un azul o un rojo
   como color de letra no llega al contraste y además el nombre del equipo no es un dato. */
.pub-h2h-leyenda {
    display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
    margin-bottom: 12px; font-size: 11px; color: var(--gray-500);
}
.pub-h2h-leg { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pub-h2h-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pub-h2h-sw-a { background: var(--viz-a); }
.pub-h2h-sw-b { background: var(--viz-b); }

/* Promedios enfrentados: número · barra · métrica · barra · número.
   Cada fila se reparte entre los dos equipos según SU métrica. No hay eje común entre posesión
   (55) y tiros al arco (4,6): forzarlos a la misma escala haría que la posesión se coma todo. */
.pub-h2h-prom-row {
    display: grid;
    grid-template-columns: 42px 1fr minmax(0, 130px) 1fr 42px;
    align-items: center; gap: 8px;
    padding: 9px 0; border-bottom: 1px solid var(--gray-100);
}
.pub-h2h-prom-row:last-child { border-bottom: 0; }
.pub-h2h-prom-val {
    font-family: var(--font-display); font-size: 16px; text-align: center; color: var(--gray-400);
}
.pub-h2h-prom-row .pub-h2h-prom-val:first-child { text-align: right; }
.pub-h2h-prom-row .pub-h2h-prom-val:last-child  { text-align: left; }
/* El más alto se resalta y el otro queda gris. No se pinta de verde: "más faltas" no es mejor,
   y el color de los equipos ya lo lleva la barra. */
.pub-h2h-prom-alto { color: var(--gray-800); }
.pub-h2h-prom-lbl {
    text-align: center; font-size: 12px; color: var(--gray-600); line-height: 1.3;
}
.pub-h2h-prom-lbl small { display: block; font-size: 10px; color: var(--gray-400); }
/* La pista gris es la fila completa; el relleno sale del centro hacia afuera, así las dos barras
   arrancan del mismo eje y se comparan de un vistazo. */
/* La pista se redondea SÓLO del lado de afuera. Redondearla entera le comía la punta cuadrada del
   relleno —queda recortada por el overflow— y las dos barras parecían pastillas sueltas en vez de
   salir del mismo eje. */
.pub-h2h-prom-track {
    display: block; height: 8px; background: var(--gray-100);
    position: relative; overflow: hidden;
}
.pub-h2h-prom-track-a { border-radius: 4px 0 0 4px; }
.pub-h2h-prom-track-b { border-radius: 0 4px 4px 0; }
/* Punta redondeada del lado que crece, escuadra del lado del eje: las dos barras salen del centro
   (donde está la métrica) hacia afuera, así que su base es el borde interno y su punta el externo.
   Redondear las cuatro esquinas convertiría la barra en una pastilla flotante y se perdería de
   dónde arranca. */
.pub-h2h-prom-track i {
    position: absolute; top: 0; height: 100%; display: block;
}
.pub-h2h-prom-track-a i { right: 0; background: var(--viz-a); border-radius: 4px 0 0 4px; }
.pub-h2h-prom-track-b i { left: 0;  background: var(--viz-b); border-radius: 0 4px 4px 0; }

@media (max-width: 480px) {
    .pub-h2h { padding: 18px 14px 20px; }
    .pub-h2h-sec + .pub-h2h-sec { margin-top: 26px; }
    .pub-h2h-bal-num { font-size: 24px; }
    /* El nombre de la competencia es lo primero que sobra cuando no entra todo. */
    .pub-h2h-row { grid-template-columns: 42px 1fr; }
    .pub-h2h-comp { display: none; }
    /* La métrica se achica antes que las barras: son ellas las que hay que poder comparar. */
    .pub-h2h-prom-row { grid-template-columns: 34px 1fr minmax(0, 92px) 1fr 34px; gap: 6px; }
    .pub-h2h-prom-val { font-size: 15px; }
    .pub-h2h-prom-lbl { font-size: 11px; }
}

/* =========================================================
   PUBLIC STATS (/estadisticas)
   ========================================================= */
.pub-accuracy-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pub-accuracy-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 12px;
}
.pub-accuracy-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
}
.pub-accuracy-bar {
    height: 22px;
    background: var(--gray-100);
    border-radius: 11px;
    overflow: hidden;
}
.pub-accuracy-fill {
    height: 100%;
    border-radius: 11px;
    min-width: 18px;
    transition: width 0.5s ease;
}
.pub-accuracy-exact { background: var(--primary); }
.pub-accuracy-winner { background: var(--yellow, #f0ad4e); }
.pub-accuracy-miss { background: var(--red, var(--red)); }
.pub-accuracy-value {
    font-size: 14px;
    font-weight: 700;
    min-width: 80px;
    text-align: right;
}
.pub-accuracy-count {
    font-weight: 400;
    color: var(--gray-500);
    font-size: 12px;
    margin-left: 4px;
}
.pub-scoreline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pub-scoreline-item {
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    align-items: center;
    gap: 12px;
}
.pub-scoreline {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    font-family: var(--font-display);
}
.pub-scoreline-bar {
    height: 18px;
    background: var(--gray-100);
    border-radius: var(--radius);
    overflow: hidden;
}
.pub-scoreline-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius);
    min-width: 4px;
    transition: width 0.5s ease;
}
.pub-scoreline-count {
    font-size: 13px;
    color: var(--gray-500);
    text-align: right;
}
@media (max-width: 480px) {
    .pub-accuracy-item { grid-template-columns: 70px 1fr auto; gap: 8px; }
}



/* ============================================
   Group branding
   ============================================ */
.navbar-brand-custom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
}
.group-logo {
    max-height: 44px;
    max-width: 180px;
    object-fit: contain;
    display: block;
}
.group-brand-sub {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.4;
    display: block;
    text-align: left;
    margin-top: 2px;
    white-space: nowrap;
    color: var(--white, #fff);
}
/* Logos anchos no deben empujar los nav-links ni el hamburger fuera de pantalla.
   La marca estándar colapsa al ícono en mobile; la del grupo necesita su propio tope. */
@media (max-width: 768px) {
    .navbar-brand-custom { flex-shrink: 0; max-width: 130px; }
    .group-logo { max-width: 118px; max-height: 36px; }
}
@media (max-width: 480px) {
    .navbar-brand-custom { max-width: 96px; }
    .group-logo { max-width: 88px; max-height: 32px; }
}

/* Avisos de admins (panel Comunicaciones / Avisos): en mobile la tabla se apila
   para que no haga falta scroll horizontal. */
@media (max-width: 768px) {
    .avisos-table, .avisos-table tbody { display: block; width: 100%; }
    .avisos-table thead { display: none; }
    .avisos-table tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--gray-100, #eee); }
    .avisos-table td { display: block; border: none !important; padding: 1px 0 !important; text-align: left !important; white-space: normal !important; max-width: none !important; overflow-wrap: anywhere; }
    .avisos-table td.av-date { font-size: 11px; color: var(--gray-500); margin-bottom: 2px; }
    .avisos-table td.av-meta { display: inline-block; margin: 6px 16px 0 0; font-size: 12px; color: var(--gray-500); }
    .avisos-table td.av-meta::before { content: attr(data-label) ": "; font-weight: 700; }
}

/* Pronósticos del grupo: tabla cruzada miembros × partidos */
.preds-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    max-height: 70vh;
}
.preds-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    width: max-content;
    min-width: 100%;
}
.preds-table th, .preds-table td {
    padding: 12px 14px;
    text-align: center;
    white-space: nowrap;
    background: var(--surface);
    border-bottom: 1px solid var(--gray-100);
}
.preds-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 2;
    border-bottom: 2px solid var(--gray-200);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    font-weight: 700;
    padding: 12px 14px;
}
.preds-table .preds-th-name, .preds-table .preds-td-name {
    position: sticky;
    left: 0;
    text-align: left;
    z-index: 3;
    background: var(--surface);
    min-width: 180px;
    max-width: 220px;
    box-shadow: 1px 0 0 var(--gray-100);
}
.preds-table thead .preds-th-name {
    z-index: 4;
}
.preds-table tbody tr:hover td { background: var(--gray-100); }
.preds-table tbody tr:hover .preds-td-name { background: var(--gray-100); }
.preds-td-name {
    font-weight: 600;
    text-align: left;
}
.preds-td-name > div {
    display: flex;
    align-items: center;
    gap: 8px;
}
.preds-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.preds-th-match {
    min-width: 110px;
    line-height: 1.3;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.preds-match-teams {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 700;
    font-size: 12px;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
}
.preds-vs {
    font-size: 9px;
    color: var(--gray-300);
    font-weight: 400;
    text-transform: uppercase;
}
.preds-match-meta {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
}
.preds-real-score {
    display: inline-block;
    background: var(--sunken);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.preds-playing {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
}
.preds-suspended {
    color: var(--gray-500);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
}
.preds-cell {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
}
.preds-cell-exact { background: rgba(46,204,113,.16); color: var(--green-deep); }
.preds-cell-ok { background: rgba(241,196,15,.16); color: var(--yellow-deep); }
.preds-cell-miss { background: rgba(255,84,112,.14); color: var(--red-deep); }
.preds-cell-pending { background: var(--gray-100); color: var(--gray-500); }
.preds-table tbody tr:hover .preds-cell-exact { background: rgba(46,204,113,.16); }
.preds-table tbody tr:hover .preds-cell-ok { background: rgba(241,196,15,.20); }
.preds-table tbody tr:hover .preds-cell-miss { background: rgba(255,84,112,.20); }
@media (max-width: 768px) {
    .preds-td-name .ranking-avatar { display: none; }
    .preds-name-text { margin-left: 0; max-width: 130px; }
    .preds-table .preds-th-name, .preds-table .preds-td-name { min-width: 130px; max-width: 150px; }
}
.preds-cell-none { background: var(--surface); }
.preds-empty { color: var(--gray-300); font-weight: 400; font-family: var(--font-body); }
.preds-legend-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 0 4px;
    font-size: 12px;
    color: var(--gray-500);
    align-items: center;
}
.preds-legend {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 11px;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
}

/* Toolbar: info + acciones (ir a mi posición, toggle partidos, CSV) */
.preds-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.preds-toolbar-info {
    font-size: 13px;
    color: var(--gray-500);
}
.preds-toolbar-info strong { color: var(--ink); }
.preds-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Columna de puntos (no sticky, después del nombre) */
.preds-table .preds-th-pts, .preds-table .preds-td-pts {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    min-width: 50px;
    border-right: 1px solid var(--gray-100);
}
.preds-table thead .preds-th-pts { color: var(--gray-500); font-size: 11px; }

/* Posición dentro de la celda del nombre */
.preds-pos {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 12px;
    color: var(--gray-300);
    font-variant-numeric: tabular-nums;
    min-width: 24px;
}

/* Fila del usuario actual */
.preds-table tbody tr.preds-row-me td,
.preds-table tbody tr.preds-row-me .preds-td-name {
    background: rgba(241,196,15,.12);
}
.preds-table tbody tr.preds-row-me:hover td,
.preds-table tbody tr.preds-row-me:hover .preds-td-name { background: rgba(241,196,15,.20); }
.preds-row-me { scroll-margin-top: 80px; }
.preds-me-tag {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Paginación */
.preds-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.preds-pagination-info {
    font-size: 13px;
    color: var(--gray-500);
}
.preds-pag-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Tabs + buscador + paginación de miembros (grupo-settings) */
.members-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
}
.members-tab {
    flex: 1;
    text-align: center;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-500);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}
.members-tab:hover { background: var(--gray-100); color: var(--ink); }
.members-tab.active {
    color: var(--ink);
    border-bottom-color: var(--primary);
}
.members-tab-pending.active { border-bottom-color: var(--yellow, var(--yellow)); }
.members-tab-badge {
    display: inline-block;
    background: var(--gray-200);
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 4px;
}
.members-tab.active .members-tab-badge { background: var(--primary); color: var(--white); }
.members-tab-pending.active .members-tab-badge { background: var(--yellow, var(--yellow)); color: var(--ink); }

.members-search {
    position: relative;
    padding: 12px 16px 4px;
}
.members-search input[type="text"] {
    font-size: 13px;
    padding: 6px 32px 6px 10px;
}
.members-search-clear {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-30%);
    color: var(--gray-400);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    padding: 0 4px;
}
.members-search-clear:hover { color: var(--ink); }

.members-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--gray-400);
    font-size: 13px;
}

.members-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
    flex-wrap: wrap;
}
.members-pagination-info {
    font-size: 12px;
    color: var(--gray-500);
}

/* ============================================================
   Settings rows — used in /grupo-settings (and reusable)
   ============================================================ */
.settings-section {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    margin-bottom: 16px;
    overflow: hidden;
}
.settings-section-header {
    background: var(--sunken);
    color: var(--white);
    padding: 14px 20px;
}
.settings-section-title {
    font-family: var(--font-display, inherit);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
}
.settings-section-note {
    font-size: 12px;
    color: var(--gray-500);
    margin: 0;
    padding: 12px 20px;
    line-height: 1.4;
    border-bottom: 1px solid var(--gray-100);
}
.settings-section-header .phase-badge {
    background: var(--primary);
    color: var(--white);
}
.settings-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-text {
    flex: 1;
    min-width: 0;
}
.settings-row-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--black, var(--sunken));
    margin: 0 0 2px 0;
}
.settings-row-desc {
    font-size: 12px;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.4;
}
.settings-row-control {
    flex-shrink: 0;
}
.settings-row-block {
    display: block;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
}
.settings-row-block:last-child { border-bottom: none; }
.settings-row-block .settings-row-label { margin-bottom: 8px; }

/* Toggle switch (CSS-only). Funciona con <input type="checkbox"> */
.settings-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.settings-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--gray-200);
    border-radius: 24px;
    cursor: pointer;
    transition: background .2s;
}
.settings-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: var(--surface);
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.settings-switch input:checked + .settings-switch-slider {
    background: var(--primary);
}
.settings-switch input:checked + .settings-switch-slider::before {
    transform: translateX(20px);
}
.settings-switch input:disabled + .settings-switch-slider {
    opacity: .5;
    cursor: not-allowed;
}
/* Variante chica para el master de categoría (Activar todo) */
.settings-switch.settings-switch-sm { width: 34px; height: 18px; }
.settings-switch.settings-switch-sm .settings-switch-slider::before { width: 12px; height: 12px; left: 3px; top: 3px; }
.settings-switch.settings-switch-sm input:checked + .settings-switch-slider::before { transform: translateX(16px); }
/* Indeterminate (some children on, some off): pinta el slider en gris medio con dash visual */
.settings-switch input:indeterminate + .settings-switch-slider { background: var(--gray-300); }
.settings-switch input:indeterminate + .settings-switch-slider::before { transform: translateX(8px); }
.settings-switch.settings-switch-sm input:indeterminate + .settings-switch-slider::before { transform: translateX(7px); }

/* ============================================================
   Tournament finished banner (full + pill variants)
   ============================================================ */
.tf-banner {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-lg);
    margin-bottom: 16px;
}
.tf-banner-full {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
}
.tf-banner-full .tf-banner-icon { font-size: 40px; line-height: 1; flex-shrink: 0; }
.tf-banner-full .tf-banner-body { flex: 1; min-width: 0; }
.tf-banner-full .tf-banner-title {
    font-family: var(--font-display, sans-serif);
    font-weight: 900;
    letter-spacing: .5px;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1.2;
}
.tf-banner-full .tf-banner-title span { opacity: .85; font-weight: 700; }
.tf-banner-full .tf-banner-meta {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    opacity: .92;
    line-height: 1.4;
}
.tf-banner-full .tf-banner-meta strong { font-weight: 800; }

.tf-banner-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.3;
}
.tf-banner-pill .tf-banner-icon-sm { font-size: 16px; flex-shrink: 0; }
.tf-banner-pill .tf-banner-text { flex: 1; min-width: 0; }
.tf-banner-pill .tf-banner-text strong { font-weight: 800; }
.tf-banner-pill .tf-banner-link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    flex-shrink: 0;
    opacity: .95;
}
.tf-banner-pill .tf-banner-link:hover { opacity: 1; }

.tf-banner-pill .tf-banner-cta {
    background: var(--white);
    color: var(--black);
    font-weight: 800;
    border-radius: 999px;
    padding: 6px 14px;
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.tf-banner-pill .tf-banner-cta:hover { opacity: .92; }

@media (max-width: 600px) {
    .tf-banner-full { padding: 14px 16px; gap: 12px; }
    .tf-banner-full .tf-banner-icon { font-size: 32px; }
    .tf-banner-full .tf-banner-title { font-size: 16px; }
    .tf-banner-pill { flex-wrap: wrap; }
    .tf-banner-pill .tf-banner-link { width: auto; margin-left: auto; }
    .tf-banner-pill .tf-banner-cta { order: 3; width: 100%; text-align: center; }
}

/* Inline display de código de invitación dentro de la fila */
.settings-invite-code {
    font-family: var(--font-display, monospace);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--primary);
    font-size: 18px;
    user-select: all;
}

@media (max-width: 600px) {
    .settings-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px 12px;
        align-items: start;
    }
    .settings-row-text { grid-column: 1; }
    .settings-row-control { grid-column: 2; align-self: start; margin-top: 0; }
    /* Si el control tiene flex (varios botones), permitimos que envuelva debajo del texto en lugar de pisar */
    .settings-row-control.settings-row-control-wide {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* ===== Filtro de FAQs previo al envío (Contacto) ===== */
.faq-suggest {
    margin: 4px 0 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--gray-100);
    overflow: hidden;
}
.faq-suggest-flash { animation: faqFlash .7s ease; }
@keyframes faqFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
    30% { box-shadow: 0 0 0 4px rgba(46,204,113,.35); }
}
.faq-suggest-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    font-size: 13px; font-weight: 700; color: var(--ink);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.faq-suggest-head svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; }
.faq-card { border-bottom: 1px solid var(--line); background: var(--surface); }
.faq-card:last-child { border-bottom: none; }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.faq-q:hover { background: var(--gray-100); }
.faq-chevron { color: var(--gray-500); transition: transform .2s ease; flex-shrink: 0; }
.faq-card.open .faq-chevron { transform: rotate(180deg); }
.faq-a { padding: 0 14px 14px; }
.faq-a-body { font-size: 14px; line-height: 1.6; color: var(--gray-500); margin: 0 0 10px; }
.faq-a-body a { color: var(--primary); font-weight: 600; text-decoration: underline; }
/* Aviso destacado dentro de una FAQ (ej: "tu cuenta ya está verificada") */
.faq-notice {
    margin: 0 14px 12px; padding: 10px 12px; font-size: 13px; font-weight: 600;
    color: var(--green-deep); background: rgba(46,204,113,.13); border: 1px solid rgba(46,204,113,.32); border-radius: var(--radius);
}
/* Preloader estilo "buscando con IA" */
.faq-loading {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 14px; font-size: 13.5px; color: var(--gray-500); font-weight: 600;
}
.faq-dots { display: inline-flex; gap: 4px; }
.faq-dots i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
    display: inline-block; animation: faqDot 1s infinite ease-in-out both;
}
.faq-dots i:nth-child(2) { animation-delay: .15s; }
.faq-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes faqDot {
    0%, 80%, 100% { transform: scale(.5); opacity: .4; }
    40% { transform: scale(1); opacity: 1; }
}
.faq-helpful {
    background: none; border: 1px solid var(--primary); color: var(--primary);
    border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.faq-helpful:hover { background: var(--primary); color: #fff; }
/* Desbloqueo de la caja de mensaje en Contacto */
.cf-unlock-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cf-unlock-hint { font-size: 12.5px; color: var(--gray-500); }
#cf-message:disabled { background: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }
.faq-resolved {
    padding: 18px 16px; text-align: center; font-size: 15px; font-weight: 700; color: var(--primary);
    background: var(--surface);
}
.faq-resolved span { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; color: var(--gray-500); }

/* ===== Acciones masivas en /admin-mensajes ===== */
.bulk-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 12px; padding: 10px 14px;
    background: var(--gray-100); border-radius: var(--radius);
}
.bulk-all-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; cursor: pointer; }
.bulk-count { font-size: 12.5px; color: var(--gray-500); }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bulk-actions .btn { font-size: 12px; padding: 6px 14px; }
.bulk-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.bulk-actions .bulk-delete { background: var(--red, var(--red)); }
.conv-row { display: flex; align-items: stretch; }
.conv-row .conv-check {
    display: flex; align-items: center; padding: 0 8px 0 14px; cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
}
.conv-row .conv-check input { width: 17px; height: 17px; cursor: pointer; }
.conv-row .conv-list-item { flex: 1; }

/* Números que se leen en columna o cambian en vivo: sin esto bailan al actualizarse. */
.ranking-points, .ranking-pos, .podium-points, .score-num, .stat-value, .fx-stat-val, .match-score, .cd-num, .upcoming-cd-num { font-variant-numeric: tabular-nums; }

/* KICKER — el volante que encabeza una sección. Anybody chico, muy espaciado, con una regla
   corta delante. Es lo que da el aire editorial de la infografía. */
.kicker {
    font-family: var(--font-display); font-weight: 700; font-size: 11px;
    letter-spacing: 2.6px; text-transform: uppercase; color: var(--primary);
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 6px;
}
.kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; display: inline-block; }

/* Título de página con la escala de la infografía: pesado, apretado, en caja alta. */
.page-title, h1.page-title {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(30px, 5.2vw, 46px); line-height: .92; letter-spacing: -1.8px;
    margin: 0 0 6px; text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   Botón de modo claro/oscuro en la barra
   Vive al lado de la campanita y se ve también en celular: adentro del menú
   hamburguesa quedaba escondido justo cuando más se busca. Más contraste que la
   campanita a propósito: es un control que la gente va a buscar, no un aviso.
   Se muestra un solo ícono — el del modo en el que estás — y lo elige el CSS
   según data-modo, así no parpadea antes de que corra el JS.
--------------------------------------------------------------------------- */
.modo-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    color: rgba(255,255,255,.90);
    cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.modo-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.26); color: #fff; }
.modo-btn svg { width: 18px; height: 18px; display: block; }
.modo-btn .modo-ico-luna { display: none; }
[data-modo="oscuro"] .modo-btn .modo-ico-sol  { display: none; }
[data-modo="oscuro"] .modo-btn .modo-ico-luna { display: block; }

/* Chip de estado en las filas de menú (escritorio y celular). */
.modo-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 99px;
    border: 1px solid var(--line); color: var(--ink-2);
}
.modo-chip svg { width: 12px; height: 12px; flex: none; }

/* Nombre del usuario como encabezado del menú del avatar. Salió de la barra (eran ~50px
   que repetían lo que ya dice la foto) y entra acá, donde además hay lugar para el nombre
   completo sin recortarlo. */
.user-menu-nombre {
    padding: 10px 16px 9px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 900; font-size: 12px;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Cabecera del menú lateral: quién sos y la X para cerrar. */
.mobile-menu-cab {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 4px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    margin-bottom: 6px;
}
.mobile-menu-usuario {
    font-family: var(--font-display); font-weight: 900; font-size: 13px;
    letter-spacing: .09em; text-transform: uppercase; color: var(--white);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-menu-cerrar {
    flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius); color: rgba(255,255,255,.9); cursor: pointer;
}
.mobile-menu-cerrar:hover { background: rgba(255,255,255,.18); color: #fff; }

/* El nombre del grupo puede ser largo: se recorta en vez de empujar la barra. */
.group-selector-btn { max-width: 240px; }
.group-selector-btn > :not(.arrow) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Detalle debajo del marcador (tabla match_events, la llena el sync de LiveScore; lo dibuja
   matchEventsHtml()). Es un <details> plegado: el <summary> muestra los goles de cada lado (uno por
   línea, local a la izquierda) y debajo un botón "Detalle"; abierto, la línea de tiempo: el minuto en el eje
   central, el local a la izquierda (alineado hacia el eje) y el visitante a la derecha, con
   "Entretiempo 1-0" como separador. Ancho acotado y centrado para que en las filas anchas del
   fixture no quede cada equipo pegado a un borde. */
.match-events { margin: 8px auto 0; max-width: 620px; width: 100%; font-size: 12.5px; color: var(--gray-600, #666); text-align: left; }
.match-events-meta { text-align: center; font-weight: 600; letter-spacing: .2px; }
.match-events summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 16px; row-gap: 6px; user-select: none; }
.match-events summary::-webkit-details-marker { display: none; }
/* Un gol por línea: en columna, no en flujo horizontal. Con dos goles seguidos del mismo equipo
   quedaban uno al lado del otro y no se leía de quién era cada uno. */
.match-events .ev-sum-l, .match-events .ev-sum-r { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--ink); }
.match-events .ev-sum-l { align-items: flex-end; text-align: right; }
.match-events .ev-sum-r { align-items: flex-start; text-align: left; }
.match-events .ev-g { max-width: 100%; overflow-wrap: anywhere; }
.match-events .ev-g b { font-weight: 700; color: var(--gray-600, #666); }
.match-events .ev-meta { grid-column: 1 / -1; text-align: center; font-weight: 600; letter-spacing: .2px; }
/* El botón va debajo de los goles y ocupa el ancho: la línea de tiempo se despliega justo abajo. */
.match-events .ev-toggle { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
    color: var(--gray-600, #666); background: var(--gray-100, #f1f3f5); border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 999px; padding: 5px 14px; transition: background .15s, border-color .15s, color .15s; }
.match-events .ev-toggle-txt::after { content: " ▾"; }
.match-events[open] .ev-toggle-txt::after { content: " ▴"; }
.match-events summary:hover .ev-toggle, .match-events summary:focus-visible .ev-toggle {
    color: var(--primary-dark, #1e9e5a); border-color: var(--primary, #2ECC71); background: var(--surface, #fff); }
.match-events[open] .ev-toggle { color: var(--primary-dark, #1e9e5a); border-color: var(--primary, #2ECC71); background: var(--surface, #fff); }
.match-events-list { list-style: none; margin: 8px 0 0; padding: 0; }
.match-events li { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; column-gap: 8px; line-height: 1.4; padding: 2px 0; }
.match-events .ev-min { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11.5px; color: var(--ink); background: var(--gray-100, #f1f3f5); border-radius: 999px; padding: 2px 0; }
.match-events .ev-l { text-align: right; min-width: 0; }
.match-events .ev-r { text-align: left; min-width: 0; }
.match-events .ev-txt { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; }
.match-events .ev-l .ev-txt { flex-direction: row-reverse; }
.match-events .ev-ico { font-size: 11px; line-height: 1; flex: 0 0 auto; }
.match-events .ev-name { min-width: 0; overflow-wrap: anywhere; }
.match-events .ev-name small { font-size: 11px; color: var(--gray-500, #8a8f98); font-weight: 400; }
.match-events .ev-gol .ev-name { color: var(--ink); font-weight: 600; }
.match-events .ev-roja .ev-name { color: var(--ink); }
.match-events .ev-amarilla { color: var(--gray-500, #8a8f98); }
.match-events .ev-sep { grid-template-columns: 1fr auto 1fr; margin: 6px 0; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gray-500, #8a8f98); }
.match-events .ev-sep::before, .match-events .ev-sep::after { content: ""; height: 1px; background: var(--gray-200, #e5e5e5); }
.match-events .ev-sep span { padding: 0 6px; }
/* En las filas del fixture ocupa el ancho completo del grid, debajo de las tres columnas. */
.match-row .match-events { grid-column: 1 / -1; margin-top: 0; padding-top: 8px; border-top: 1px dashed var(--gray-200, #e5e5e5); }
.pub-next-match-card .match-events { margin-top: 12px; }
@media (max-width: 600px) {
    .match-events { font-size: 12px; }
    .match-events summary { column-gap: 10px; }
    .match-events .ev-sum-l, .match-events .ev-sum-r { gap: 1px; }
    .match-events li { grid-template-columns: 1fr 38px 1fr; column-gap: 6px; }
    /* El separador tiene su propio grid (línea · texto · línea): la regla de arriba se lo pisaba
       y "Entretiempo 1-0" quedaba partido en la columna del minuto. */
    .match-events .ev-sep { grid-template-columns: 1fr auto 1fr; }
    .match-events .ev-min { font-size: 11px; }
    .match-events .ev-name small { display: block; }
}

/* Desktop: escudos más grandes en las filas del fixture, y en partidos en juego o terminados los
   equipos se alinean con el marcador. El cajón de resultado es alto (etiqueta + marcador + "tu
   pronóstico" + badge) y el centrado vertical dejaba escudos y nombres a la altura de "Tu
   pronóstico", no del 1-2. Pedido del 05/09/2026; en mobile no cambia nada. */
@media (min-width: 769px) {
    .match-row .match-team .team-logo-sm { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
    .match-row:has(.pred-result-box) { align-items: start; }
    .match-row:has(.pred-result-box) .match-team { padding-top: 24px; }
}

/* Selector de mercado (país) en el footer público: la misma página en cada país. */
.footer-mercados { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 14px 0 4px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 18px; font-size: 13px; }
.footer-mercados a { color: var(--gray-300, #b8c2bc); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; }
.footer-mercados a:hover { color: #fff; background: rgba(255,255,255,.06); }
.footer-mercados a.actual { color: #fff; font-weight: 700; background: rgba(255,255,255,.1); }