/* ==========================================================================
   ROC | Estilos Base Unificados
   Este archivo controla los colores y elementos comunes de toda la web.
   ========================================================================== */

/* 1. VARIABLES DE COLOR GLOBALES (TEMA OSCURO - POR DEFECTO) */
:root {
    --bg: #0e1116;           /* Fondo principal de la web */
    --panel: #161b22;        /* Fondo de las tarjetas y paneles */
    --panel-2: #0b1016;      /* Fondo alternativo más oscuro */
    
    --text: #e5e7eb;         /* Texto principal (blanco roto) */
    --muted: #9aa4af;        /* Texto secundario (grisáceo) */
    --border: #2b3340;       /* Color de los bordes o separadores */
    
    --accent: #e11d48;       /* Color principal (Rojo ROC) */
    --ok: #10b981;           /* Verde (Récords, válido, éxito) */
    --warn: #eab308;         /* Amarillo (Avisos, sanciones leves) */
    --err: #ff4d4f;          /* Rojo (Errores, inválido, penalizaciones) */
    
    --shadow: 0 6px 14px rgba(0,0,0,.18); /* Sombra estándar para dar profundidad */
    --hover: #222b36;        /* Color al pasar el ratón por encima */
    --badge: #0b1220;
    --badgeText: #fff;
}

/* 1.1 VARIABLES DE COLOR GLOBALES (TEMA CLARO) */
:root[data-theme='light'] {
    --bg: #f7f9fc; 
    --panel: #ffffff; 
    --panel-2: #f1f5f9; 
    --text: #1e293b; 
    --muted: #64748b; 
    --border: #e2e8f0;
    --shadow: 0 8px 20px rgba(15,23,42,.06); 
    --ok: #16a34a; 
    --warn: #f59e0b; 
    --accent: #e11d48;       /* Color principal (Rojo ROC para modo claro) */
    --err: #ef4444; 
    --hover: #fef2f2;        /* Fondo rojizo muy suave al pasar el ratón */
    --badge: #f1f5f9; 
    --badgeText: #1e293b;
}

/* 2. REGLAS GENERALES PARA TODA LA WEB */
body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    /* Usamos la fuente Inter que ya tenías, es muy limpia para SimRacing */
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    -webkit-font-smoothing: antialiased;
}

/* 3. BANDERAS (Flag Icons) - Para las páginas que sí lo usan */
.flag-icon {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    width: 24px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.1);
    object-fit: cover;
}

/* Tamaño grande para los perfiles de piloto */
.flag-icon.lg {
    width: 32px;
    height: 24px;
}

/* 4. SCROLLBAR (Barra de desplazamiento) ESTILO ROC */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}