/* =========================================
   1. VARIABLES DE TEMA (MODO CLARO / OSCURO)
   ========================================= */
:root {
    /* Colores Corporativos */
    --color-brand-blue: #0E1A35;
    --color-brand-yellow: #F1C40F;

    /* Variables Modo CLARO (Default) */
    --bg-body: #f4f6f9;
    --text-main: #212529;       /* Texto casi negro */
    --text-secondary: #6c757d;  /* Texto gris */
    --card-bg: #ffffff;
    --border-color: rgba(0,0,0,0.1);
    --table-hover: rgba(0,0,0,0.05);
    --input-bg: #ffffff;
    --input-text: #212529;
}

[data-theme="dark"] {
    /* Variables Modo OSCURO */
    --bg-body: #121212;         /* Fondo muy oscuro */
    --text-main: #ffffff;       /* Texto BLANCO PURO */
    --text-secondary: #adb5bd;  /* Texto gris claro */
    --card-bg: #1e1e1e;         /* Tarjetas gris oscuro */
    --border-color: rgba(255,255,255,0.1);
    --table-hover: rgba(255,255,255,0.05);
    --input-bg: #2d2d2d;
    --input-text: #ffffff;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================
   2. FORZAR COLORES EN MODO OSCURO (CORRECCIÓN CLAVE)
   ========================================= */
/* Esto fuerza a Bootstrap a obedecer nuestro modo oscuro */

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6,
[data-theme="dark"] .fw-bold {
    color: #ffffff !important;
}

/* Invertir la clase .text-dark de Bootstrap para que se vea blanco */
[data-theme="dark"] .text-dark {
    color: #f8f9fa !important; 
}

/* Aclarar el texto .text-muted para que se lea en fondo negro */
[data-theme="dark"] .text-muted {
    color: #b0b3b8 !important;
}

/* Ajustar fondos grises de Bootstrap (.bg-light) a oscuro */
[data-theme="dark"] .bg-light {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

/* Ajustar Inputs de formularios */
[data-theme="dark"] .form-control {
    background-color: var(--input-bg);
    border-color: #444;
    color: var(--input-text);
}

/* =========================================
   3. ESTILO CORPORATIVO - COMPONENTES
   ========================================= */

/* BARRA LATERAL */
.sidebar {
    background-color: var(--color-brand-blue);
    min-height: 100vh;
    color: white;
    box-shadow: 4px 0 10px rgba(0,0,0,0.1);
    border-right: 1px solid rgba(255,255,255,0.1);
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.75);
    padding: 12px 20px;
    margin-bottom: 5px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.sidebar .nav-link:hover {
    color: var(--color-brand-yellow);
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.sidebar .nav-link.active {
    background-color: var(--color-brand-yellow) !important;
    color: var(--color-brand-blue) !important;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3);
}

/* LOGO */
.logo-box {
    padding: 20px 10px;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 20px;
}
.logo-img {
    width: 90%;
    max-width: 200px;
    height: auto;
    transition: opacity 0.3s;
}

/* TARJETAS */
.card-boss {
    border: none;
    border-radius: 15px;
    background: var(--card-bg);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.2s, background-color 0.3s;
    color: var(--text-main);
}

/* TEXTOS DE MARCA */
.text-brand { color: var(--color-brand-blue) !important; }
[data-theme="dark"] .text-brand { color: var(--color-brand-yellow) !important; }

/* BOTÓN AMARILLO */
.btn-amarillo {
    background-color: var(--color-brand-yellow);
    color: var(--color-brand-blue);
    font-weight: bold;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    transition: 0.3s;
}
.btn-amarillo:hover {
    background-color: #d4ac0d;
    color: var(--color-brand-blue);
    transform: translateY(-2px);
}

/* TABLAS */
.table { color: var(--text-main); }
.table-hover tbody tr:hover { 
    background-color: var(--table-hover); 
    color: var(--text-main); 
}

/* =========================================
   4. ANIMACIONES (PULSO)
   ========================================= */

/* Luz de estado */
.live-indicator {
    width: 12px; height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    display: inline-block;
}
.live-green { background-color: #10B981; animation: pulse-green 2s infinite; }
.live-yellow { background-color: #F59E0B; animation: pulse-yellow 2s infinite; }
.live-red { background-color: #EF4444; opacity: 0.6; }

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes pulse-yellow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Icono Guardia */
.guard-icon-box {
    background-color: var(--color-brand-blue);
    color: var(--color-brand-yellow);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--color-brand-yellow);
}
[data-theme="dark"] .guard-icon-box { 
    border-color: rgba(255,255,255,0.2); 
}

/* Animaciones Entrada */
.entrada-suave { animation: fadeIn 0.5s ease-out forwards; opacity: 0; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }