/* static/css_clientes/global_vars.css */

:root {
    /* --- MODO CLARO: Blanco, Negro y Dorado --- */
    --bg-body: #f8f9fa; /* Blanco roto/gris muy suave para el fondo */
    --bg-card: #ffffff; /* Blanco puro para tarjetas */
    --bg-secondary: #f1f1f1;
    --text-primary: #111111; /* Negro casi puro */
    --text-secondary: #666666;
    
    --accent-color: #d4af37; /* DORADO ELEGANTE */
    --accent-hover: #b5952f; /* Dorado más oscuro para hover */
    --accent-glow: rgba(212, 175, 55, 0.15); /* Brillo dorado */
    
    --border-color: #e0e0e0;
    
    /* Navbar siempre oscuro para contraste */
    --navbar-bg: #000000;
    --navbar-text: #ffffff;
    --navbar-shadow: 0 4px 15px rgba(0,0,0,0.1);

    /* Toggle */
    --toggle-bg: #e0e0e0;
    --slider-bg: #d4af37;

    /* Sombras globales */
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.04);
}

body.dark-mode {
    /* --- MODO OSCURO: Negro, Blanco y Dorado --- */
    --bg-body: #000000; /* Negro puro */
    --bg-card: #121212; /* Negro levemente gris para tarjetas */
    --bg-secondary: #1e1e1e;
    --text-primary: #ffffff; /* Blanco puro */
    --text-secondary: #a0a0a0;
    
    --accent-color: #d4af37; /* DORADO */
    --accent-hover: #f1c40f; /* Dorado más brillante */
    --accent-glow: rgba(212, 175, 55, 0.15);
    
    --border-color: #333333;

    --navbar-bg: #000000;
    --navbar-text: #ffffff;

    --toggle-bg: #333333;
    --slider-bg: #d4af37;
    
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Aplicación base a toda la web */
html, body {
    height: 100%;
    margin: 0;
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}