/* ==========================================================================
   VARIABLES Y PALETA DE COLORES
   ========================================================================== */
:root {
    /* Paleta Base (Modo Claro) */
    --brand-primary: #0a4da2;
    --brand-secondary: #e6f0ff;
    --accent: #f39c12;
    
    --bg-header: #ffffff;
    --text-main: #2c3e50;
    --text-muted: #576574;
    --border-color: #ecf0f1;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Tipografía */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Variables para Modo Oscuro */
[data-theme='dark'] {
    --bg-header: #1a1a1a;
    --text-main: #f5f6fa;
    --text-muted: #dcdde1;
    --border-color: #2f3640;
    --brand-primary: #3498db;
    --brand-secondary: #2c3e50;
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}



/* ==========================================================================
   RESET & ESTILOS BASE
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--text-main);
    background-color: var(--brand-secondary);
}