/* 1. VARIABLES DE TEMA (MODO CLARO / OSCURO) */
    :root {
        /* Colores Base Fastbook */
        --theme-primary: #1E293B;
        --theme-action: #00A7E1;        /* Tu Azul Fastbook */
        --theme-action-hover: #008cc0;  /* Un azul un poco más oscuro al pasar el mouse */
        
        /* Tema Light (Default) */
        --theme-bg: #F5F7F9;
        --theme-card-bg: #ffffff;
        --theme-text: #1e293b;
        --theme-text-muted: #64748b;
        --theme-border: #e2e8f0;
        --theme-table-hover: #f8fafc;
    }

    [data-bs-theme="dark"] {
        /* Tema Dark */
        --theme-bg: #0F172A;
        --theme-card-bg: #1e293b;
        --theme-text: #f8fafc;
        --theme-text-muted: #94a3b8;
        --theme-border: #334155;
        --theme-table-hover: rgba(255, 255, 255, 0.05);
    }

    /* 2. ESTILOS GENERALES */
    body {
        font-family: 'Lexend', sans-serif;
        background-color: var(--theme-bg);
        color: var(--theme-text);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* 3. HEADER Y NAVBAR (UNIFICADO) */
    .card-custom {
        background-color: var(--theme-card-bg);
        transition: background-color 0.3s ease;
    }

    .header-nav a {
        color: var(--theme-text);
        font-size: 0.9rem;
        font-weight: 500;
        transition: color 0.2s;
    }

    .header-nav a:hover, .header-nav a.active {
        color: var(--theme-action) !important;
    }

    .text-primary-custom {
        color: var(--theme-action) !important;
    }

    /* Animación del Logo */
    .loading-img-spin {
        transition: transform 0.5s ease;
    }
    .loading-img-spin:hover {
        transform: scale(1.02);
    }

    /* 4. COMPONENTES DE LA PÁGINA (PEDIDOS) */
    .btn-action {
        background-color: var(--theme-action);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 24px;
        font-weight: 600;
        transition: all 0.2s;
    }

    .btn-action:hover {
        background-color: var(--theme-action-hover);
        color: white;
        transform: translateY(-1px);
    }

    .table-container {
        background-color: var(--theme-card-bg);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--theme-border);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .thead-custom {
        background-color: var(--theme-primary);
        color: white;
    }

    /* Buscador Estilizado */
    .search-wrapper {
        position: relative;
    }
    .search-wrapper .material-symbols-outlined {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--theme-text-muted);
    }
    .search-input {
        padding-left: 40px;
        background-color: var(--theme-bg) !important;
        border: 1px solid var(--theme-border) !important;
        color: var(--theme-text) !important;
        border-radius: 8px;
    }

    /* Estatus Badges */
    .badge-status {
        font-size: 11px;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .dot { width: 6px; height: 6px; border-radius: 50%; }

    /* Iconos de Acción */
    .action-icon {
        color: var(--theme-text-muted);
        cursor: pointer;
        transition: all 0.2s;
        padding: 5px;
        border-radius: 6px;
    }
    .action-icon:hover {
        color: var(--theme-action);
        background-color: var(--theme-table-hover);
    }

    /* Footer de Tabla */
    .table-footer {
        background-color: var(--theme-table-hover);
        border-top: 1px solid var(--theme-border);
    }

    /* 5. MODO OSCURO (CORRECCIONES BOOTSTRAP) */
    .navbar-toggler {
        color: var(--theme-text);
    }
    
    .hover-scale {
        transition: transform 0.2s ease;
    }
    .hover-scale:hover {
        transform: scale(1.05);
    }
    /* ==========================================
   ESTILOS DEL ENCABEZADO (MODO LUZ Y OSCURO)
   ========================================== */

/* --- 1. MODO LUZ (Azul con sombra Naranja) --- */
.header-main {
    background-color: #00A7E1 !important; /* Azul Fastbook */
    border-bottom: 3px solid #E77955 !important; /* Borde Naranja */
    box-shadow: 0 6px 1px 0px #E77955;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.header-main .header-nav a {
    color: rgba(255, 255, 255, 0.9) !important;
}
.header-main .header-nav a:hover, 
.header-main .header-nav a.active {
    color: #ffffff !important;
}
.header-main .btn-menu-mobile { color: white !important; }
.header-main .logo-img { filter: brightness(0) invert(1); } /* Logo en blanco */
.header-main .btn-theme-toggle {
    border: 1px solid rgba(255,255,255,0.4) !important; 
    color: white !important; 
    background: rgba(255,255,255,0.1) !important;
}

/* --- 2. MODO OSCURO (Intacto / Regresa a los colores oscuros de pedidos) --- */
[data-bs-theme="dark"] .header-main {
    background-color: var(--theme-card-bg) !important; /* Usa el fondo oscuro de las tarjetas de esta página */
    border-bottom: 1px solid var(--theme-border) !important;
    box-shadow: none !important; 
}
[data-bs-theme="dark"] .header-main .header-nav a {
    color: var(--theme-text-muted) !important;
}
[data-bs-theme="dark"] .header-main .header-nav a:hover,
[data-bs-theme="dark"] .header-main .header-nav a.active {
    color: var(--theme-action) !important; /* Regresa a tu color turquesa/acción original */
}
[data-bs-theme="dark"] .header-main .btn-menu-mobile { color: var(--theme-text) !important; }
[data-bs-theme="dark"] .header-main .logo-img { filter: brightness(0) invert(1); } 
[data-bs-theme="dark"] .header-main .btn-theme-toggle {
    border: 1px solid var(--theme-border) !important; 
    color: var(--theme-text) !important; 
    background: transparent !important;
}