/* ===== PALETA DE COLORES GLOBAL (THEME DEFINITION - ENERGY SECTOR) ===== */
:root {
    /* --- BASE PALETTE --- */
    /* CAMBIO PRINCIPAL: De Gold a "Energy Blue" 
       Este azul (#00A3E0) es vibrante, tecnológico y profesional. */
    --palette-primary: #00A3E0;
    /* Fade ajustado al nuevo azul (para sombras o fondos sutiles) */
    --palette-primary-fade: rgba(0, 163, 224, 0.25);
    --palette-danger: #e53e3e; /* El rojo de error se queda igual */
    /* --- NEUTRALS / GRAYS (Base Oscura Industrial) --- */
    /* Mantenemos la base oscura de Reloj de Luz, funciona perfecto para Energía */
    --palette-white: #FFFFFF;
    --palette-soft-white: #F0F2F5; /* Ligeramente más "frío" que el anterior */
    --palette-gray-light: #B0B0B0;
    --palette-gray-mid: #666666;
    --palette-gray-dark: #2D2D2D;
    --palette-gray-darker: #1F1F1F;
    --palette-black: #000000;
    --palette-dark: #363636;
    /* Carbon: Usamos tonos casi negros pero azulados muy sutiles si quisieras,
       por ahora mantenemos el neutro puro para seriedad */
    --palette-carbon: #2A2A2A;
    --palette-carbon-deep: #121212; /* Fondo principal */
    --palette-carbon-dark: #181818;
    /* ============================================= 
       MAPPING SEMÁNTICO
       ============================================= */
    /* --- MAIN LAYOUT --- */
    --app-bg: var(--palette-carbon-deep);
    --app-text: var(--palette-soft-white);
    /* --- SIDEBAR --- */
    --sidebar-bg: var(--palette-black);
    --sidebar-border: var(--palette-gray-dark);
    --sidebar-logo: var(--palette-primary); /* El logo ahora brillará azul */
    --sidebar-link: var(--palette-soft-white);
    --sidebar-link-hover-bg: var(--palette-gray-darker);
    --sidebar-link-active-bg: var(--palette-gray-darker);
    /* --- TOP BAR --- */
    --topbar-bg: rgba(18, 18, 18, 0.95); /* Le di un toque de solidez semi-transparente */
    --topbar-border: var(--palette-gray-dark);
    --topbar-mobile-toggle: var(--palette-soft-white);
    /* --- USER MENU --- */
    --usermenu-bg: transparent;
    --usermenu-bg-hover: var(--palette-gray-darker);
    --usermenu-text: var(--palette-soft-white);
    /* Dropdown */
    --usermenu-dropdown-bg: var(--palette-carbon-dark);
    --usermenu-dropdown-hover: var(--palette-carbon);
    --usermenu-dropdown-icon: var(--palette-primary);
    --usermenu-dropdown-divider: var(--palette-dark);
    /* --- SECTIONS --- */
    --section-border: var(--palette-gray-dark);
    /* --- COMPONENT: IMAGE --- */
    --image-container-bg: var(--palette-black);
    /* --- COMPONENT: EVENT CARD (Ahora Service Card) --- */
    --card-bg: var(--palette-carbon-dark);
    --card-date: var(--palette-gray-light);
    --card-title: var(--palette-primary); /* Títulos en azul eléctrico */
    --card-text-highlight: var(--palette-white);
    --card-text-normal: var(--palette-soft-white);
    --card-link: var(--palette-primary);
    --card-link-hover: var(--palette-white);
    /* --- BUTTONS --- */
    /* Cancel */
    --btn-cancel-bg: var(--palette-carbon);
    --btn-cancel-hover: var(--palette-dark);
    --btn-cancel-text: var(--palette-soft-white);
    /* Save/Action/Primary Button */
    --btn-save-bg: var(--palette-primary);
    --btn-save-hover: #0088BE; /* Un poco más oscuro al hover */
    --btn-save-text: var(--palette-white); /* Texto blanco sobre azul para contraste */
    /* --- FORMS (MODO OSCURO PROFESIONAL) --- */
    /* AJUSTE: Cambié el fondo de blanco a oscuro. 
       Los formularios blancos sobre web negra se ven muy agresivos. */
    --form-bg: var(--palette-carbon-dark);
    --form-text: var(--palette-white);
    --form-label: var(--palette-primary); /* Label en azul */

    --form-input-bg: var(--palette-gray-darker);
    --form-input-bg-focus: var(--palette-black);
    --form-input-border: var(--palette-gray-mid);
    --form-input-border-focus: var(--palette-primary);
    --form-input-shadow-focus: var(--palette-primary-fade);
    --form-check-list-bg: var(--palette-gray-darker);
    --form-check-item-hover: var(--palette-carbon);
    --form-check-active: var(--palette-primary);
    --form-check-active-bg: var(--palette-dark);
    --form-check-border: var(--palette-gray-mid);
    /* ============================================= 
       CLIENT LAYOUT PALETTE (Light / Engineering Mode)
       Variables exclusivas para el visor del cliente
       ============================================= */
    /* Fondo General: Gris muy pálido para descansar la vista */
    --client-bg: var(--palette-soft-white);
    /* Superficies: Blanco puro para tarjetas y paneles */
    --client-surface: var(--palette-white);
    /* Texto: Invertimos polaridad. Texto oscuro sobre fondo claro */
    --client-text-main: var(--palette-carbon-deep);
    --client-text-secondary: var(--palette-gray-mid);
    /* Bordes y Líneas: Necesitamos un gris muy suave para "planos" */
    --client-border: #E0E0E0;
    /* Acentos en Modo Claro: El azul se mantiene, pero los hovers cambian */
    --client-primary-hover: rgba(0, 163, 224, 0.08); /* Azul muy tenue para hovers */
    /* Sombras: Suaves para dar profundidad en fondo blanco */
    --client-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --client-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* ============================================= 
       EMPLOYEE LAYOUT PALETTE (Operational Mode)
       Variables para el entorno de empleados/staff
       ============================================= */
    /* Fondo General: Un azul muy pálido ("Alice Blue" técnico) */
    --employee-bg: #F0F7FA;
    /* Superficies: Blanco puro para máximo contraste de datos */
    --employee-surface: #FFFFFF;
    /* Texto: Mantenemos la legibilidad del modo claro */
    --employee-text-main: var(--palette-carbon-deep);
    --employee-text-secondary: var(--palette-gray-mid);
    /* Bordes: Un gris azulado para separar áreas */
    --employee-border: #CFD8DC;
    /* Acentos: Un hover azul un poco más saturado que el del cliente */
    --employee-primary-hover: rgba(0, 163, 224, 0.12);
    /* Sidebar Empleado: Opcional, si queremos que la barra sea distinta */
    --employee-sidebar-bg: #FFFFFF;
    --employee-sidebar-border: #CFD8DC;
    /* Sombras: Ligeramente azuladas para dar atmósfera */
    --employee-shadow: 0 1px 3px 0 rgba(0, 163, 224, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}