/* Gourmeats Premium — Base Styles */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: 'Montserrat', sans-serif;
}

body, .mud-typography, .mud-button, .mud-input, .mud-nav-link {
    font-family: 'Montserrat', sans-serif !important;
}

/* ── 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: negro Gourmeats */
.mud-appbar {
    background-color: #231f20 !important;
    color: #fbad18 !important;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    transition: background-color 0.25s ease;
}

/* Dark mode: negro profundo Gourmeats con borde sutil dorado */
html[data-mud-theme="dark"] .mud-appbar,
html.dark-mode .mud-appbar {
    background-color: #1c191a !important;
    color: #fbad18 !important;
    border-bottom: 1px solid #3a3335 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.6) !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: #1c191a !important;
    border-right: 1px solid #3a3335 !important;
}

/* NavLink active en dark */
html[data-mud-theme="dark"] .mud-nav-link.active,
html.dark-mode .mud-nav-link.active {
    background-color: rgba(251,173,24,0.12) !important;
    color: #fbad18 !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)) {
    /* Espacio extra en iOS para que el badge de Términos no quede bajo la barra de Safari */
    .mud-main-content { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ── Botones CTA del Dashboard (Registrarse / Iniciar sesión) ───────────────
   Mobile: columna, cada botón ocupa el 100% del ancho.
   Desktop (≥600px): fila, ambos con el mismo ancho. */
.dash-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}
.dash-cta-buttons .mud-button-root {
    width: 100% !important;
}
@media (min-width: 600px) {
    .dash-cta-buttons {
        flex-direction: row;
        max-width: 520px;
    }
    .dash-cta-buttons .mud-button-root {
        flex: 1 1 0;
    }
}

/* ── 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: 64px !important;                     /* debajo del AppBar (ClipMode.Always) */
        left: 0 !important;
        height: calc(100vh - 64px) !important;    /* fallback iOS < 15.4 */
        height: calc(100dvh - 64px) !important;   /* dvh evita salto por barra de Safari */
        z-index: 1200 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    /* JS agrega mw-open al abrir.
       5 clases (0,5,0) para ganar a la regla mud-drawer--initial de MudBlazor (0,4,0). */
    .mud-drawer.mw-open,
    .mud-drawer.mud-drawer-responsive.mud-drawer-md.mud-drawer--initial.mw-open {
        display: flex !important;
        transform: translateX(0) !important;
    }
    /* iOS Safari bug: position:fixed + transform + overflow:scroll = scroll roto.
       JS agrega .mw-scrollable después de que termina la animación de entrada.
       transform:none elimina la capa de compositing y habilita el scroll. */
    .mud-drawer.mw-open.mw-scrollable {
        transform: none !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:              #1a1618;
    --lp-bg2:             #1e1a1c;
    --lp-bg3:             #161214;
    --lp-surface:         rgba(255,255,255,0.04);
    --lp-border:          rgba(251,173,24,0.10);
    --lp-text:            #f5f0e8;
    --lp-text-dim:        rgba(245,240,232,0.62);
    --lp-text-dimmer:     rgba(245,240,232,0.38);
    --lp-accent:          #fbad18;
    --lp-accent-dim:      rgba(251,173,24,0.15);
    --lp-accent-border:   rgba(251,173,24,0.28);
    --lp-primary:         #e0a230;
    --lp-primary-dim:     rgba(224,162,48,0.12);
    --lp-primary-border:  rgba(224,162,48,0.22);
    --lp-nav-bg:          rgba(26,22,24,0.94);
    --lp-nav-border:      rgba(251,173,24,0.15);
    --lp-hero-grad:       linear-gradient(150deg,#161214 0%,#1e1a1c 45%,#231f20 75%,#2a2528 100%);
    --lp-num-bg:          rgba(251,173,24,0.07);
    --lp-num-border:      rgba(251,173,24,0.18);
    --lp-card-hover:      rgba(251,173,24,0.4);
    --lp-card-shadow:     rgba(0,0,0,0.4);
    --lp-terminal-bg:     #120f10;
    --lp-terminal-prompt: #fbad18;
    --lp-terminal-cursor: #e0a230;
    --lp-cta-bg:          linear-gradient(135deg,#1a1618 0%,#231f20 50%,#1a1618 100%);
    --lp-footer-bg:       #120f10;
    --lp-dot-active:      #fbad18;
    --lp-blockquote-l:    #e0a230;
    --lp-blockquote-bg:   rgba(224,162,48,0.07);
}

body.tema-claro {
    background-color:     #f5f0e8;
    --lp-bg:              #f5f0e8;
    --lp-bg2:             #ede6d8;
    --lp-bg3:             #f0ebe2;
    --lp-surface:         rgba(0,0,0,0.032);
    --lp-border:          rgba(0,0,0,0.07);
    --lp-text:            #231f20;
    --lp-text-dim:        rgba(35,31,32,0.65);
    --lp-text-dimmer:     rgba(35,31,32,0.42);
    --lp-accent:          #e0a230;
    --lp-accent-dim:      rgba(224,162,48,0.1);
    --lp-accent-border:   rgba(224,162,48,0.22);
    --lp-primary:         #c8911e;
    --lp-primary-dim:     rgba(200,145,30,0.08);
    --lp-primary-border:  rgba(200,145,30,0.2);
    --lp-nav-bg:          rgba(245,240,232,0.94);
    --lp-nav-border:      rgba(224,162,48,0.18);
    --lp-hero-grad:       linear-gradient(150deg,#ede6d8 0%,#f0ebe2 45%,#f5f0e8 75%,#f8f5f0 100%);
    --lp-num-bg:          rgba(224,162,48,0.06);
    --lp-num-border:      rgba(224,162,48,0.15);
    --lp-card-hover:      rgba(224,162,48,0.35);
    --lp-card-shadow:     rgba(35,31,32,0.09);
    --lp-terminal-bg:     #231f20;
    --lp-terminal-prompt: #fbad18;
    --lp-terminal-cursor: #e0a230;
    --lp-cta-bg:          linear-gradient(135deg,#ede6d8 0%,#f0ebe2 50%,#e8e0d0 100%);
    --lp-footer-bg:       #ede6d8;
    --lp-dot-active:      #e0a230;
    --lp-blockquote-l:    #e0a230;
    --lp-blockquote-bg:   rgba(224,162,48,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; }

/* ── Cookie Consent Banner ───────────────────────────────────────────────────
   Aparece en la parte inferior de la pantalla si el usuario no ha aceptado.
   Pure CSS — JS controla display:flex / display:none según localStorage. */
#mw-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: rgba(18, 18, 18, 0.97);
    border-top: 1px solid rgba(26, 107, 60, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
    animation: mwCookieSlide 0.35s cubic-bezier(0.22,1,0.36,1);
}

/* Light mode: fondo claro */
html:not(.dark-mode) #mw-cookie-banner,
html[data-mud-theme="light"] #mw-cookie-banner {
    background: rgba(245, 247, 245, 0.97);
    border-top: 1px solid rgba(26, 107, 60, 0.25);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
}

#mw-cookie-banner .mw-cookie-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

#mw-cookie-banner .mw-cookie-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

#mw-cookie-banner .mw-cookie-text {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(220, 220, 220, 0.92);
}

html:not(.dark-mode) #mw-cookie-banner .mw-cookie-text,
html[data-mud-theme="light"] #mw-cookie-banner .mw-cookie-text {
    color: rgba(30, 40, 30, 0.88);
}

#mw-cookie-banner .mw-cookie-text strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 3px;
    color: #ffffff;
}

html:not(.dark-mode) #mw-cookie-banner .mw-cookie-text strong,
html[data-mud-theme="light"] #mw-cookie-banner .mw-cookie-text strong {
    color: #111111;
}

#mw-cookie-banner .mw-cookie-text a {
    color: #4caf7d;
    text-decoration: underline;
    white-space: nowrap;
}

#mw-cookie-banner .mw-cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    align-items: center;
}

#mw-cookie-banner .mw-cookie-btn {
    padding: 9px 22px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

#mw-cookie-banner .mw-cookie-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}

#mw-cookie-banner .mw-cookie-btn-accept {
    background: #e0a230;
    color: #231f20;
}

#mw-cookie-banner .mw-cookie-btn-accept:hover {
    background: #1e7d46;
}

#mw-cookie-banner .mw-cookie-btn-reject {
    background: transparent;
    color: rgba(180, 180, 180, 0.8);
    border: 1px solid rgba(180, 180, 180, 0.3) !important;
}

html:not(.dark-mode) #mw-cookie-banner .mw-cookie-btn-reject,
html[data-mud-theme="light"] #mw-cookie-banner .mw-cookie-btn-reject {
    color: rgba(60, 60, 60, 0.7);
    border-color: rgba(60, 60, 60, 0.2) !important;
}

@keyframes mwCookieSlide {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 600px) {
    #mw-cookie-banner .mw-cookie-inner {
        gap: 10px;
    }
    #mw-cookie-banner .mw-cookie-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── Logo nombre: alterna blanco/oscuro según tema ─────────────────────────── */
/* Default (dark): muestra blanco, oculta oscuro */
.mw-logo-dark  { display: block; }
.mw-logo-light { display: none;  }
/* Light theme: muestra oscuro, oculta blanco */
html[data-mud-theme="light"] .mw-logo-dark  { display: none;  }
html[data-mud-theme="light"] .mw-logo-light { display: block; }