/* ==========================================================================
   VARIABLES DE DISEÑO (EL MOTOR DEL TEMPLATE)
   ========================================================================== 
*/
/* 1. LAS VARIABLES (EL "ADN" DEL COLOR) */
:root {
    /* --- MODO DARK (Default) --- */
    --app-bg: #020617;
    --card-bg: rgba(30, 41, 59, 0.7);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-blur: 12px;
    --accent-primary: #6366f1;
    --accent-primary-glow: rgba(99, 102, 241, 0.3);
    --accent-secondary: #fbbf24;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --color-win: #10b981;
    --color-loss: #f43f5e;
    --color-draw: #94a3b8;
    --badge-gm-bg: rgba(245, 158, 11, 0.15);
    --badge-gm-text: #fbbf24;
    --badge-im-bg: rgba(129, 140, 248, 0.15);
    --badge-im-text: #a5b4fc;
    --elo-badge-bg: rgba(56, 189, 248, 0.1);
    --elo-badge-text: #38bdf8;
    --pos-text: #ffffff;
    --pos-opacity: 0.8;
    --footer-bg: rgba(0, 0, 0, 0.5);
    --header-title-shadow: 0 4px 20px rgba(0,0,0,0.5);
    --color-trend-up: #10b981;
    --color-trend-down: #f43f5e;
    --color-trend-neutral: #94a3b8;
}

/* --- MODO CLARO (Refactorizado para Alto Contraste) --- */
body.light-mode {
    --app-bg: #f1f5f9; /* Un gris sutil para que las cards blancas resalten */
    --card-bg: #ffffff;
    --card-border: #cbd5e1; /* Borde bien definido */
    --card-blur: 0px;
    /* Texto: Contraste Máximo */
    --text-main: #0f172a; /* Slate-900 */
    --text-muted: #334155; /* Slate-700 (Más legible que el anterior) */

    --accent-primary: #312e81; /* Indigo-900 */
    --accent-secondary: #0e7490;
    --badge-gm-bg: #fef3c7;
    --badge-gm-text: #92400e;
    --badge-im-bg: #e0e7ff;
    --badge-im-text: #3730a3;
    --elo-badge-bg: #f1f5f9;
    --elo-badge-text: #0369a1;
    --pos-text: #0f172a;
    --pos-opacity: 1;
    --footer-bg: #e2e8f0;
    --header-title-shadow: none;
}

    /* --- FIXES DE INTERFAZ PARA MODO CLARO --- */

    /* 1. Barra de búsqueda de Resultados y Spotlight */
    body.light-mode #playerSearch,
    body.light-mode #spotlightInput,
    body.light-mode .input-glass {
        background-color: #ffffff !important;
        border: 2px solid #cbd5e1 !important;
        color: #0f172a !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    /* 2. Barra gris sobre las Cards (Torneo, Ronda, Fecha) */
    body.light-mode .game-card-container > div:first-child {
        background-color: #e2e8f0 !important; /* Gris Slate sólido */
        border-color: #cbd5e1 !important;
    }

    body.light-mode .game-card-container span,
    body.light-mode .game-card-container i {
        color: #0f172a !important; /* Texto negro sobre la barra gris */
        font-weight: 700 !important;
    }

    /* 3. Spotlight Modal Fix */
    body.light-mode #spotlightModal .bg-black\/20,
    body.light-mode #spotlightModal .bg-black\/40 {
        background-color: #f8fafc !important;
        border-bottom: 2px solid #cbd5e1;
    }

    body.light-mode .spotlight-row {
        border-bottom-color: #e2e8f0 !important;
    }

        body.light-mode .spotlight-row:hover {
            background-color: #f1f5f9 !important;
        }

/* --- LÓGICA DE ICONOS --- */
.light-only {
    display: none !important;
}

.dark-only {
    display: block !important;
}

body.light-mode .dark-only {
    display: none !important;
}

body.light-mode .light-only {
    display: block !important;
}
/* ==========================================================================
   RESET Y BASE (LIMPIEZA DE BOOTSTRAP/BROWSER)
   ========================================================================== 
*/
html {
    font-size: 14px;
    min-height: 100%;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background-color: var(--app-bg) !important; /* Forzamos para evitar parpadeos blancos */
    color: var(--text-main);
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Reset de links global para el layout oscuro */
a {
    text-decoration: none !important;
    color: inherit;
    transition: all 0.2s ease;
}

/* ==========================================================================
   COMPONENTES GLOBALES (HEADER & NAV)
   ========================================================================== 
*/

/* Forzamos que los links del Header sean visibles sobre el fondo oscuro */
header a, nav a {
    color: var(--text-main);
}

    header a:hover, nav a:hover {
        color: var(--accent-primary);
    }

/* Estilo para los inputs "Glass" que usaremos en los buscadores */
.input-glass {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    color: var(--text-main);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

    .input-glass:focus {
        border-color: var(--accent-primary);
        background: rgba(255, 255, 255, 0.07);
        outline: none;
        box-shadow: 0 0 0 4px var(--accent-primary-glow);
    }

/* ==========================================================================
   SCROLLBAR PERSONALIZADA (DARK MODE)
   ========================================================================== 
*/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--app-bg);
}

::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 10px;
    border: 2px solid var(--app-bg);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--accent-primary);
    }

/* ==========================================================================
   UTILIDADES PARA EL DASHBOARD
   ========================================================================== 
*/
.glass-effect {
    background: var(--card-bg);
    backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border);
}

.text-gradient-primary {
    background: linear-gradient(to right, #fff, var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- FIX AUTOCOMPLETE DARK MODE --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* Esto reemplaza el color de fondo por el de tu variable con un delay infinito */
    -webkit-box-shadow: 0 0 0 1000px var(--app-bg) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Para que mantenga el estilo Glass incluso autocompletado */
.input-glass:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(30, 41, 59, 0.9) inset !important;
    border: 1px solid var(--accent-primary) !important;
}

/* --- CONSISTENCIA LIVE/INDEX --- */

/* Forzamos que los contenedores de las mesas en vivo sigan el tema Dark */
#tables-list > div {
    background-color: var(--card-bg) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 1rem !important; /* rounded-2xl */
    color: var(--text-main) !important;
    transition: all 0.3s ease;
}

    /* El hover para que se sienta igual que en Games/Index */
    #tables-list > div:hover {
        border-color: var(--accent-primary) !important;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    }

/* Arreglamos los textos internos que puedan venir negros */
#tables-list div,
#tables-list span,
#tables-list p {
    color: inherit !important;
}

/* Estilo para los badges de resultado o mesa dentro del live */
#tables-list .bg-gray-900,
#tables-list .bg-black {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Estilo para las filas del Spotlight */
.spotlight-row {
    @apply flex items-center gap-4 px-6 py-4 cursor-pointer transition-all border-b border-white/5;
}

    .spotlight-row.active {
        @apply bg-[var(--accent-primary)]/10 border-l-4 border-l-[var(--accent-primary)];
    }

    .spotlight-row:hover {
        @apply bg-white/5;
    }

/* Scrollbar minimalista para el modal */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-line {
    background: var(--accent-primary);
    border-radius: 10px;
}