/* Mundial 2026 — Base Styles */

html.dark-mode {
    color-scheme: dark;
}

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

/* ── AppBar theming ─────────────────────────────────────────────────────────
   MudBlazor siempre aplica mud-theme-primary a MudAppBar, ignorando el
   AppbarBackground de la paleta. Usamos el atributo data-mud-theme que pone
   el anti-flash script + window.applyTheme para forzar el color correcto.
   ── */

/* Light mode: verde FIFA */
.mud-appbar {
    background-color: #1a6b3c !important;
    color: #ffffff !important;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    transition: background-color 0.25s ease;
}

/* Dark mode: casi negro con borde sutil */
html[data-mud-theme="dark"] .mud-appbar,
html.dark-mode .mud-appbar {
    background-color: #111111 !important;
    color: #e8e8e8 !important;
    border-bottom: 1px solid #2a2a2a !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
}

/* Íconos y texto dentro del AppBar */
.mud-appbar .mud-button-root,
.mud-appbar .mud-icon-button,
.mud-appbar .mud-typography {
    color: inherit !important;
}

/* Drawer dark mode */
html[data-mud-theme="dark"] .mud-drawer,
html.dark-mode .mud-drawer {
    background-color: #161616 !important;
    border-right: 1px solid #2a2a2a !important;
}

/* NavLink active en dark */
html[data-mud-theme="dark"] .mud-nav-link.active,
html.dark-mode .mud-nav-link.active {
    background-color: rgba(45,155,90,0.15) !important;
    color: #2d9b5a !important;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.4); border-radius: 3px; }

.match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-flag { width: 32px; height: 24px; object-fit: cover; border-radius: 2px; }
.team-flag-lg { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; }

.score-display { font-size: 2rem; font-weight: 700; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }

.badge-live { animation: pulse-live 1.5s ease-in-out infinite; }
@keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.bracket-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

input, select, textarea { font-size: max(16px, 1rem); }

/* Headings no son interactivos — suprimir outline de foco programático (FocusOnNavigate) */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible { outline: none; }

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mud-main-content { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ── Logo adaptativo por tema ───────────────────────────────────────────────
   .logo-on-surface: usa dark en light mode, light en dark mode.
   .logo-on-dark:    siempre usa light (fondos fijos oscuros: AppBar, heroes).
   ── */
/* Por defecto dark mode es el default (script anti-flash) */
.logo-on-surface-dark  { display: block; }   /* light.svg — visible en dark  */
.logo-on-surface-light { display: none; }    /* dark.svg — oculto en dark    */

html[data-mud-theme="light"] .logo-on-surface-dark  { display: none; }
html[data-mud-theme="light"] .logo-on-surface-light { display: block; }

/* ── Desktop drawer toggle ──────────────────────────────────────────────────
   JS agrega .mw-closed al layout para colapsar el drawer en desktop.
   El CSS custom property --mud-drawer-width-left controla el ancho de la
   columna del grid de MudLayout. Al ponerlo a 0 el contenido toma todo el ancho. */
@media (min-width: 960px) {
    .mud-layout.mw-closed {
        --mud-drawer-width-left: 0px !important;
    }
    .mud-layout.mw-closed .mud-drawer {
        transform: translateX(-260px) !important;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
        overflow: hidden !important;
    }
    .mud-layout:not(.mw-closed) .mud-drawer {
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    }
}

/* ── Mobile drawer ───────────────────────────────────────────────────────────
   SSR renderiza el drawer abierto (mud-drawer--open) porque _drawerOpen=true.
   En mobile eso tapa el contenido. Este bloque lo oculta antes del primer paint
   y expone la clase .mw-open para que JS lo pueda mostrar con toggle. */
@media (max-width: 959.98px) {
    /* Oculto por defecto — posición fija como overlay */
    .mud-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100dvh !important;
        z-index: 1200 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
        will-change: transform;
        overflow-y: auto;
    }
    /* JS agrega esta clase al abrir */
    .mud-drawer.mw-open {
        transform: translateX(0) !important;
    }
    /* Quitar margen izquierdo que MudBlazor aplica al layout en mobile */
    .mud-layout {
        padding-left: 0 !important;
    }
    /* El contenido no se desplaza en mobile (drawer es overlay) */
    .mud-drawer-open-responsive-md-left .mud-main-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING — SISTEMA DE TEMAS (§12)
   Body classes: body.tema-oscuro (default), body.tema-claro, body.tema-sepia, body.tema-rojo
   ═══════════════════════════════════════════════════════════════════════════ */

body,
body.tema-oscuro {
    --lp-bg:              #050a06;
    --lp-bg2:             #060d07;
    --lp-bg3:             #040c06;
    --lp-surface:         rgba(255,255,255,0.04);
    --lp-border:          rgba(255,255,255,0.07);
    --lp-text:            #e8f0ea;
    --lp-text-dim:        rgba(232,240,234,0.62);
    --lp-text-dimmer:     rgba(232,240,234,0.38);
    --lp-accent:          #c9a84c;
    --lp-accent-dim:      rgba(201,168,76,0.18);
    --lp-accent-border:   rgba(201,168,76,0.28);
    --lp-primary:         #1a6b3c;
    --lp-primary-dim:     rgba(26,107,60,0.12);
    --lp-primary-border:  rgba(26,107,60,0.22);
    --lp-nav-bg:          rgba(5,10,6,0.92);
    --lp-nav-border:      rgba(26,107,60,0.18);
    --lp-hero-grad:       linear-gradient(150deg,#040c06 0%,#081508 45%,#0a1e14 75%,#0d2510 100%);
    --lp-num-bg:          rgba(26,107,60,0.08);
    --lp-num-border:      rgba(26,107,60,0.2);
    --lp-card-hover:      rgba(26,107,60,0.5);
    --lp-card-shadow:     rgba(26,107,60,0.15);
    --lp-terminal-bg:     #080d09;
    --lp-terminal-prompt: #4ade80;
    --lp-terminal-cursor: #4ade80;
    --lp-cta-bg:          linear-gradient(135deg,#0a1e14 0%,#0d2918 50%,#081408 100%);
    --lp-footer-bg:       #030806;
    --lp-dot-active:      #c9a84c;
    --lp-blockquote-l:    #1a6b3c;
    --lp-blockquote-bg:   rgba(26,107,60,0.08);
}

body.tema-claro {
    background-color:     #f3f7f3;
    --lp-bg:              #f3f7f3;
    --lp-bg2:             #eaf0ea;
    --lp-bg3:             #f0f5f0;
    --lp-surface:         rgba(0,0,0,0.032);
    --lp-border:          rgba(0,0,0,0.07);
    --lp-text:            #1a2a1d;
    --lp-text-dim:        rgba(26,42,29,0.65);
    --lp-text-dimmer:     rgba(26,42,29,0.42);
    --lp-accent:          #8a6215;
    --lp-accent-dim:      rgba(138,98,21,0.1);
    --lp-accent-border:   rgba(138,98,21,0.22);
    --lp-primary:         #1a6b3c;
    --lp-primary-dim:     rgba(26,107,60,0.08);
    --lp-primary-border:  rgba(26,107,60,0.2);
    --lp-nav-bg:          rgba(243,247,243,0.94);
    --lp-nav-border:      rgba(26,107,60,0.12);
    --lp-hero-grad:       linear-gradient(150deg,#daeada 0%,#e8f2e8 45%,#f0f7f0 75%,#f3f7f3 100%);
    --lp-num-bg:          rgba(26,107,60,0.06);
    --lp-num-border:      rgba(26,107,60,0.15);
    --lp-card-hover:      rgba(26,107,60,0.35);
    --lp-card-shadow:     rgba(26,107,60,0.09);
    --lp-terminal-bg:     #1a2a1d;
    --lp-terminal-prompt: #22c55e;
    --lp-terminal-cursor: #22c55e;
    --lp-cta-bg:          linear-gradient(135deg,#daeada 0%,#e4ede4 50%,#d8eada 100%);
    --lp-footer-bg:       #daeada;
    --lp-dot-active:      #8a6215;
    --lp-blockquote-l:    #1a6b3c;
    --lp-blockquote-bg:   rgba(26,107,60,0.06);
}

body.tema-sepia {
    --lp-bg:              #1a120a;
    --lp-bg2:             #1e1610;
    --lp-bg3:             #180f08;
    --lp-surface:         rgba(201,168,76,0.055);
    --lp-border:          rgba(201,168,76,0.11);
    --lp-text:            #f0e8d0;
    --lp-text-dim:        rgba(240,232,208,0.62);
    --lp-text-dimmer:     rgba(240,232,208,0.38);
    --lp-accent:          #c9a84c;
    --lp-accent-dim:      rgba(201,168,76,0.14);
    --lp-accent-border:   rgba(201,168,76,0.28);
    --lp-primary:         #9a7228;
    --lp-primary-dim:     rgba(154,114,40,0.12);
    --lp-primary-border:  rgba(154,114,40,0.25);
    --lp-nav-bg:          rgba(26,18,10,0.94);
    --lp-nav-border:      rgba(201,168,76,0.14);
    --lp-hero-grad:       linear-gradient(150deg,#180f08 0%,#1e1508 45%,#221a0a 75%,#241c0c 100%);
    --lp-num-bg:          rgba(201,168,76,0.07);
    --lp-num-border:      rgba(201,168,76,0.18);
    --lp-card-hover:      rgba(201,168,76,0.4);
    --lp-card-shadow:     rgba(201,168,76,0.1);
    --lp-terminal-bg:     #0e0a05;
    --lp-terminal-prompt: #d4a843;
    --lp-terminal-cursor: #d4a843;
    --lp-cta-bg:          linear-gradient(135deg,#1e1508 0%,#241a0a 50%,#1a1205 100%);
    --lp-footer-bg:       #140e06;
    --lp-dot-active:      #c9a84c;
    --lp-blockquote-l:    #9a7228;
    --lp-blockquote-bg:   rgba(154,114,40,0.1);
}

body.tema-rojo {
    --lp-bg:              #0a0404;
    --lp-bg2:             #0d0606;
    --lp-bg3:             #080303;
    --lp-surface:         rgba(200,40,40,0.05);
    --lp-border:          rgba(200,40,40,0.09);
    --lp-text:            #f5e8e8;
    --lp-text-dim:        rgba(245,232,232,0.62);
    --lp-text-dimmer:     rgba(245,232,232,0.38);
    --lp-accent:          #e85555;
    --lp-accent-dim:      rgba(232,85,85,0.14);
    --lp-accent-border:   rgba(232,85,85,0.28);
    --lp-primary:         #c42020;
    --lp-primary-dim:     rgba(196,32,32,0.12);
    --lp-primary-border:  rgba(196,32,32,0.22);
    --lp-nav-bg:          rgba(10,4,4,0.94);
    --lp-nav-border:      rgba(200,40,40,0.15);
    --lp-hero-grad:       linear-gradient(150deg,#080303 0%,#110606 45%,#150808 75%,#180a0a 100%);
    --lp-num-bg:          rgba(200,40,40,0.08);
    --lp-num-border:      rgba(200,40,40,0.18);
    --lp-card-hover:      rgba(200,40,40,0.42);
    --lp-card-shadow:     rgba(200,40,40,0.12);
    --lp-terminal-bg:     #060202;
    --lp-terminal-prompt: #f87171;
    --lp-terminal-cursor: #f87171;
    --lp-cta-bg:          linear-gradient(135deg,#110606 0%,#160808 50%,#0e0505 100%);
    --lp-footer-bg:       #060202;
    --lp-dot-active:      #e85555;
    --lp-blockquote-l:    #c42020;
    --lp-blockquote-bg:   rgba(196,32,32,0.1);
}

.lp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.lp-reveal.lp-visible { opacity: 1; transform: translateY(0); }
.lp-reveal-delay-1 { transition-delay: 0.1s; }
.lp-reveal-delay-2 { transition-delay: 0.2s; }
.lp-reveal-delay-3 { transition-delay: 0.32s; }
.lp-reveal-delay-4 { transition-delay: 0.44s; }