/* ==========================================================================
   SISTEMA CFDI - TEMA EJECUTIVO MODO CLARO (FONDO BLANCO / SOFT SLATE)
   Diseñado para máxima legibilidad contable, contraste y descanso visual
   ========================================================================== */

/* Fondo general y texto base */
html.light-theme,
html.light-theme body {
    background-color: #f8fafc !important; /* Slate 50 */
    color: #1e293b !important;            /* Slate 800 */
}

/* Scrollbar en Modo Claro */
html.light-theme ::-webkit-scrollbar-track {
    background: #f1f5f9;
}
html.light-theme ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
html.light-theme ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Encabezado / Navbar */
html.light-theme header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05) !important;
}

html.light-theme header nav a {
    color: #475569 !important;
}

html.light-theme header nav a:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Menús desplegables del Navbar */
html.light-theme .group .absolute.bg-slate-800 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05) !important;
}

html.light-theme .group .absolute.bg-slate-800 a {
    color: #334155 !important;
}

html.light-theme .group .absolute.bg-slate-800 a:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* ==========================================================================
   DESACTIVACIÓN DE GRADIENTES OSCUROS EN CONTENEDORES Y TARJETAS
   ========================================================================== */

/* Card 3 Dashboard: Balance de IVA del Mes */
html.light-theme #card-kpi-balance-iva {
    background-image: none !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05) !important;
}
html.light-theme #card-kpi-balance-iva #label-kpi-iva {
    color: #9333ea !important;
}
html.light-theme #card-kpi-balance-iva .text-purple-300 {
    color: #7e22ce !important;
}
html.light-theme #card-kpi-balance-iva .text-slate-400 {
    color: #64748b !important;
}

/* Sección Principal: Reporte de Utilidad Bruta (Sin IVA) */
html.light-theme #section-reporte-utilidad-bruta {
    background-image: none !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05) !important;
}
html.light-theme #section-reporte-utilidad-bruta h3 {
    color: #0f172a !important;
}

/* Card 4 Utilidad Bruta: Utilidad Bruta del Periodo */
html.light-theme #card-kpi-utilidad-bruta-periodo {
    background-image: none !important;
    background-color: #f0fdf4 !important; /* Soft emerald */
    border: 2px solid #10b981 !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1) !important;
}
html.light-theme #card-kpi-utilidad-bruta-periodo #ub-resultado {
    color: #047857 !important;
}
html.light-theme #card-kpi-utilidad-bruta-periodo span {
    color: #065f46 !important;
}
html.light-theme #card-kpi-utilidad-bruta-periodo #ub-margen-badge {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #34d399 !important;
}
html.light-theme #card-kpi-utilidad-bruta-periodo #ub-margen-pct {
    color: #047857 !important;
}
html.light-theme #card-kpi-utilidad-bruta-periodo .border-t {
    border-color: #a7f3d0 !important;
}

/* Paso 3: Total a Enterar (SAT) (Cálculo Preliminar de Impuestos) */
html.light-theme #box-paso3-total-enterar {
    background-image: none !important;
    background-color: #f0fdf4 !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1) !important;
}
html.light-theme #box-paso3-total-enterar #tax-total-a-enterar {
    color: #047857 !important;
}
html.light-theme #box-paso3-total-enterar span {
    color: #334155 !important;
}
html.light-theme #box-paso3-total-enterar strong {
    color: #0f172a !important;
}
html.light-theme #box-paso3-total-enterar .fa-landmark {
    color: #059669 !important;
}

/* Card 4 Cancelaciones: Total Facturado en Riesgo */
html.light-theme #card-kpi-canc-total-riesgo {
    background-image: none !important;
    background-color: #fff1f2 !important; /* Soft rose */
    border: 2px solid #f43f5e !important;
    box-shadow: 0 4px 6px -1px rgba(244, 63, 94, 0.1) !important;
}
html.light-theme #card-kpi-canc-total-riesgo #kpi-canc-monto-total {
    color: #be123c !important;
}
html.light-theme #card-kpi-canc-total-riesgo span {
    color: #9f1239 !important;
}
html.light-theme #card-kpi-canc-total-riesgo #kpi-canc-reemplazos {
    color: #e11d48 !important;
}
html.light-theme #card-kpi-canc-total-riesgo .border-t {
    border-color: #fecdd3 !important;
}

/* Cuadro Especial: Refacturación Phoenix Contact (Maniobras) */
html.light-theme #box-refacturacion-phoenix {
    background-image: none !important;
    background-color: #fffbeb !important; /* Soft warm amber */
    border: 1px solid #f59e0b !important;
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.08) !important;
}
html.light-theme #box-refacturacion-phoenix h4 {
    color: #92400e !important;
}
html.light-theme #box-refacturacion-phoenix p {
    color: #78350f !important;
}
html.light-theme #box-refacturacion-phoenix .border-b,
html.light-theme #box-refacturacion-phoenix .border-t {
    border-color: #fde68a !important;
}
html.light-theme #box-refacturacion-phoenix .bg-slate-900\/90,
html.light-theme #box-refacturacion-phoenix .bg-slate-900\/80,
html.light-theme #box-refacturacion-phoenix .bg-slate-900\/70 {
    background-color: #ffffff !important;
    border-color: #fde68a !important;
}
html.light-theme #box-refacturacion-phoenix #phx-aduana-select {
    background-color: #ffffff !important;
    color: #92400e !important;
}
html.light-theme #box-refacturacion-phoenix #phx-aduana-select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
html.light-theme #box-refacturacion-phoenix #phx-num-facturas,
html.light-theme #box-refacturacion-phoenix #phx-iva {
    color: #0f172a !important;
}
html.light-theme #box-refacturacion-phoenix #phx-subtotal,
html.light-theme #box-refacturacion-phoenix #phx-total {
    color: #b45309 !important;
}
html.light-theme #box-refacturacion-phoenix span.text-slate-400,
html.light-theme #box-refacturacion-phoenix span.text-slate-500 {
    color: #92400e !important;
}
html.light-theme #box-refacturacion-phoenix div.bg-amber-950\/20 {
    background-color: #fef3c7 !important;
    border-color: #f59e0b !important;
}

/* ==========================================================================
   TARJETAS, PANELES Y SUB-CONTENEDORES
   ========================================================================== */

/* Tarjetas Principales (bg-slate-800 con cualquier variante) */
html.light-theme .bg-slate-800,
html.light-theme [class*="bg-slate-800"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.03) !important;
}

/* Sub-contenedores y paneles secundarios (bg-slate-900 con cualquier opacidad) */
html.light-theme .bg-slate-900,
html.light-theme [class*="bg-slate-900"],
html.light-theme [class*="bg-slate-850"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Cajas y widgets internos dentro de tarjetas */
html.light-theme .p-2[class*="bg-slate-900"],
html.light-theme .p-2\.5[class*="bg-slate-900"],
html.light-theme .p-3[class*="bg-slate-900"],
html.light-theme .p-3\.5[class*="bg-slate-900"],
html.light-theme .p-4[class*="bg-slate-900"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

html.light-theme .bg-slate-950 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html.light-theme .bg-slate-700,
html.light-theme [class*="bg-slate-700"] {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

/* Bordes y Divisores */
html.light-theme .border-slate-800,
html.light-theme .border-slate-700,
html.light-theme [class*="border-slate-700"],
html.light-theme [class*="border-slate-800"],
html.light-theme .border-slate-600 {
    border-color: #e2e8f0 !important;
}

html.light-theme .divide-slate-700,
html.light-theme [class*="divide-slate-700"],
html.light-theme .divide-slate-800 {
    border-color: #f1f5f9 !important;
}

/* ==========================================================================
   TIPOGRAFÍA Y ENCABEZADOS
   ========================================================================== */
html.light-theme h1,
html.light-theme h2,
html.light-theme h3,
html.light-theme h4,
html.light-theme .font-black.text-white,
html.light-theme .font-bold.text-white {
    color: #0f172a !important; /* Slate 900 */
}

/* Texto blanco genérico que no sea botón */
html.light-theme .text-white:not(button):not(button *):not(a.bg-sky-600):not(a.bg-rose-600):not(a.bg-emerald-600):not(.badge):not(.badge *):not([class*="bg-sky"]):not([class*="bg-rose"]):not([class*="bg-emerald"]):not([class*="bg-indigo"]):not([class*="bg-purple"]):not([class*="bg-amber"]):not([class*="bg-gradient"]) {
    color: #0f172a !important;
}

html.light-theme .text-slate-100,
html.light-theme .text-slate-200 {
    color: #1e293b !important;
}

html.light-theme .text-slate-300 {
    color: #334155 !important;
}

html.light-theme .text-slate-400 {
    color: #64748b !important;
}

html.light-theme .text-slate-500 {
    color: #64748b !important;
}

/* ==========================================================================
   TABLAS DE DATOS CONTABLES Y ENCABEZADOS (HIGH CONTRAST)
   ========================================================================== */
html.light-theme table {
    border-color: #e2e8f0 !important;
    background-color: #ffffff !important;
}

html.light-theme table thead,
html.light-theme table thead.bg-slate-900,
html.light-theme table thead tr {
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

html.light-theme th,
html.light-theme thead th,
html.light-theme table thead th {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    border-color: #cbd5e1 !important;
}

html.light-theme table tbody tr {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
}

html.light-theme table tbody tr:hover,
html.light-theme table tbody tr.hover\:bg-slate-700\/40:hover,
html.light-theme table tbody tr.hover\:bg-slate-800\/60:hover,
html.light-theme table tbody tr.hover\:bg-slate-800\/50:hover {
    background-color: #f8fafc !important;
}

html.light-theme table td {
    color: #1e293b !important;
    border-color: #f1f5f9 !important;
}

/* Pie de tablas y barras inferiores de estado */
html.light-theme div[class*="bg-slate-900"].border-t,
html.light-theme .bg-slate-900\/90.border-t,
html.light-theme .bg-slate-900\/80.border-t {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

/* ==========================================================================
   FORMULARIOS: INPUTS, SELECTS, BUSCADORES
   ========================================================================== */
html.light-theme input:not([type="checkbox"]):not([type="radio"]),
html.light-theme select,
html.light-theme textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-theme input::placeholder {
    color: #94a3b8 !important;
}

html.light-theme select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html.light-theme input:focus,
html.light-theme select:focus,
html.light-theme textarea:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}

/* ==========================================================================
   MODALES Y DIÁLOGOS FLOTANTES
   ========================================================================== */
html.light-theme .fixed.bg-black\/70,
html.light-theme .fixed.bg-black\/80 {
    background-color: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
}

html.light-theme .fixed .bg-slate-800,
html.light-theme .fixed .bg-slate-900,
html.light-theme .fixed [class*="bg-slate-800"],
html.light-theme .fixed [class*="bg-slate-900"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.15) !important;
}

/* Footer en Modo Claro */
html.light-theme footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

/* ==========================================================================
   PROTECCIÓN DE BOTONES DE ACCIÓN Y BADGES
   ========================================================================== */
html.light-theme button[class*="bg-sky-"],
html.light-theme button[class*="bg-rose-"],
html.light-theme button[class*="bg-emerald-"],
html.light-theme button[class*="bg-purple-"],
html.light-theme button[class*="bg-indigo-"],
html.light-theme button[class*="bg-amber-"],
html.light-theme button[class*="bg-gradient-"],
html.light-theme a[class*="bg-sky-"],
html.light-theme a[class*="bg-rose-"],
html.light-theme a[class*="bg-emerald-"],
html.light-theme a[class*="bg-purple-"],
html.light-theme a[class*="bg-indigo-"],
html.light-theme a[class*="bg-gradient-"] {
    color: #ffffff !important;
}

html.light-theme button[class*="bg-sky-"] *,
html.light-theme button[class*="bg-rose-"] *,
html.light-theme button[class*="bg-emerald-"] *,
html.light-theme button[class*="bg-purple-"] *,
html.light-theme button[class*="bg-indigo-"] *,
html.light-theme button[class*="bg-amber-"] *,
html.light-theme button[class*="bg-gradient-"] *,
html.light-theme a[class*="bg-sky-"] *,
html.light-theme a[class*="bg-rose-"] *,
html.light-theme a[class*="bg-emerald-"] *,
html.light-theme a[class*="bg-purple-"] *,
html.light-theme a[class*="bg-indigo-"] *,
html.light-theme a[class*="bg-gradient-"] * {
    color: #ffffff !important;
}

/* Gradientes preservados en botones e iconos decorativos */
html.light-theme button[class*="bg-gradient-"],
html.light-theme a[class*="bg-gradient-"] {
    background-color: #0284c7 !important;
    background-image: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
}

html.light-theme div[class*="bg-gradient-tr"].w-12,
html.light-theme div[class*="bg-gradient-tr"].w-11,
html.light-theme div[class*="bg-gradient-tr"].w-10,
html.light-theme div[class*="bg-gradient-tr"].w-9,
html.light-theme div[class*="bg-gradient-to-tr"].w-12,
html.light-theme div[class*="bg-gradient-to-tr"].w-11,
html.light-theme div[class*="bg-gradient-to-tr"].w-10,
html.light-theme div[class*="bg-gradient-to-tr"].w-9 {
    background-color: #0284c7 !important;
}
html.light-theme #live-progress-bar {
    background-color: #0284c7 !important;
    background-image: linear-gradient(90deg, #0284c7 0%, #f59e0b 100%) !important;
}

/* ==========================================================================
   AJUSTES DE CONTRASTE PARA TEXTOS COLOREADOS SOBRE FONDO CLARO
   ========================================================================== */
html.light-theme .text-sky-400:not(button):not(button *):not([class*="bg-sky"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-indigo"]) {
    color: #0284c7 !important;
}
html.light-theme .text-sky-300:not(button):not(button *):not([class*="bg-sky"]) {
    color: #0369a1 !important;
}
html.light-theme .text-emerald-400:not(button):not(button *):not([class*="bg-emerald"]) {
    color: #16a34a !important;
}
html.light-theme .text-emerald-300:not(button):not(button *):not([class*="bg-emerald"]) {
    color: #15803d !important;
}
html.light-theme .text-rose-400:not(button):not(button *):not([class*="bg-rose"]) {
    color: #e11d48 !important;
}
html.light-theme .text-rose-300:not(button):not(button *):not([class*="bg-rose"]) {
    color: #be123c !important;
}
html.light-theme .text-amber-400:not(button):not(button *):not([class*="bg-amber"]) {
    color: #d97706 !important;
}
html.light-theme .text-amber-300:not(button):not(button *):not([class*="bg-amber"]) {
    color: #b45309 !important;
}
html.light-theme .text-purple-400:not(button):not(button *):not([class*="bg-purple"]) {
    color: #9333ea !important;
}
html.light-theme .text-purple-300:not(button):not(button *):not([class*="bg-purple"]) {
    color: #7e22ce !important;
}
html.light-theme .text-indigo-400:not(button):not(button *):not([class*="bg-indigo"]) {
    color: #4f46e5 !important;
}
html.light-theme .text-indigo-300:not(button):not(button *):not([class*="bg-indigo"]) {
    color: #4338ca !important;
}

/* ==========================================================================
   CAJAS DE MÉTRICAS Y BADGES CON FONDOS SUAVES
   ========================================================================== */
html.light-theme .bg-sky-500\/10 {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
}
html.light-theme .bg-rose-500\/10 {
    background-color: #ffe4e6 !important;
    color: #e11d48 !important;
}
html.light-theme .bg-emerald-500\/10 {
    background-color: #dcfce7 !important;
    color: #16a34a !important;
}
html.light-theme .bg-amber-500\/10,
html.light-theme .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
}
html.light-theme .bg-purple-500\/10 {
    background-color: #f3e8ff !important;
    color: #9333ea !important;
}

/* Bordes coloreados suaves */
html.light-theme .border-amber-500\/40,
html.light-theme .border-amber-500\/30 {
    border-color: #f59e0b !important;
}
html.light-theme .border-rose-500\/40,
html.light-theme .border-rose-500\/30 {
    border-color: #f43f5e !important;
}
html.light-theme .border-sky-500\/40,
html.light-theme .border-sky-500\/30 {
    border-color: #38bdf8 !important;
}
html.light-theme .border-emerald-500\/40,
html.light-theme .border-emerald-500\/30 {
    border-color: #34d399 !important;
}
html.light-theme .border-purple-500\/40 {
    border-color: #c084fc !important;
}

/* Cajas de métricas con borde coloreado y fondo suave */
html.light-theme .border-emerald-500\/30 {
    background-color: #f0fdf4 !important;
    border-color: #6ee7b7 !important;
}
html.light-theme .border-sky-500\/30 {
    background-color: #f0f9ff !important;
    border-color: #7dd3fc !important;
}
html.light-theme .border-blue-500\/30 {
    background-color: #eff6ff !important;
    border-color: #93c5fd !important;
}
html.light-theme .border-rose-500\/30 {
    background-color: #fff1f2 !important;
    border-color: #fca5a5 !important;
}
html.light-theme .border-purple-500\/40 {
    background-color: #faf5ff !important;
    border-color: #c084fc !important;
}

/* Barra de progreso de distribución financiera */
html.light-theme .w-full.h-3\.5.bg-slate-800 {
    background-color: #e2e8f0 !important;
}

/* Fondos tintados oscuros a fondos tintados claros */
html.light-theme .bg-sky-950,
html.light-theme [class*="bg-sky-950"] {
    background-color: #f0f9ff !important;
    border-color: #bae6fd !important;
}

html.light-theme .bg-emerald-950,
html.light-theme [class*="bg-emerald-950"] {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

html.light-theme .bg-rose-950,
html.light-theme [class*="bg-rose-950"] {
    background-color: #fff1f2 !important;
    border-color: #fecdd3 !important;
}

html.light-theme .bg-amber-950,
html.light-theme [class*="bg-amber-950"] {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
}

/* Botones de categorías rápidas e inactivas */
html.light-theme button[id^="cat-btn-"]:not(.bg-sky-600) {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

html.light-theme button[id^="cat-btn-"]:not(.bg-sky-600):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Pestañas de módulos */
html.light-theme #tab-btn-proveedores:not(.bg-rose-600),
html.light-theme #tab-btn-categorias:not(.bg-rose-600) {
    color: #475569 !important;
}

html.light-theme #tab-btn-proveedores:not(.bg-rose-600):hover,
html.light-theme #tab-btn-categorias:not(.bg-rose-600):hover {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ==========================================================================
   BANNER EJECUTIVO DE SINCRONIZACIÓN Y BOTÓN ACTUALIZAR
   ========================================================================== */
#banner-sync-ejecutivo {
    transition: all 0.3s ease;
}

/* Modo Claro: Fondo blanco/suave, bordes limpios, textos oscuros de alto contraste */
html.light-theme #banner-sync-ejecutivo {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 60%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 4px 15px -3px rgba(2, 132, 199, 0.08), 0 2px 6px -2px rgba(2, 132, 199, 0.05) !important;
}

html.light-theme #banner-sync-ejecutivo h2,
html.light-theme #banner-sync-ejecutivo h2 span {
    color: #0f172a !important;
    font-weight: 900 !important;
}

html.light-theme #banner-sync-ejecutivo p {
    color: #334155 !important;
}

html.light-theme #banner-sync-ejecutivo .banner-feature-text {
    color: #475569 !important;
}

html.light-theme #banner-sync-ejecutivo .banner-control-box {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme #banner-sync-ejecutivo .banner-control-box label {
    color: #475569 !important;
}

html.light-theme #banner-sync-ejecutivo #select-dias-sync {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-theme #banner-sync-ejecutivo #btn-actualizar-sat {
    background-color: #0284c7 !important;
    background-image: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0284c7 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

html.light-theme #banner-sync-ejecutivo #btn-actualizar-sat:hover {
    background-color: #0369a1 !important;
    background-image: none !important;
}

html.light-theme #banner-sync-ejecutivo #btn-actualizar-sat * {
    color: #ffffff !important;
}

/* Modo Oscuro para Banner */
html:not(.light-theme) #banner-sync-ejecutivo,
html.dark #banner-sync-ejecutivo {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

html:not(.light-theme) #banner-sync-ejecutivo h2,
html:not(.light-theme) #banner-sync-ejecutivo h2 span,
html.dark #banner-sync-ejecutivo h2,
html.dark #banner-sync-ejecutivo h2 span {
    color: #ffffff !important;
}

html:not(.light-theme) #banner-sync-ejecutivo p,
html.dark #banner-sync-ejecutivo p {
    color: #cbd5e1 !important;
}

html:not(.light-theme) #banner-sync-ejecutivo .banner-control-box,
html.dark #banner-sync-ejecutivo .banner-control-box {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid #334155 !important;
}

html:not(.light-theme) #banner-sync-ejecutivo #btn-actualizar-sat,
html.dark #banner-sync-ejecutivo #btn-actualizar-sat {
    background-color: #0284c7 !important;
    background-image: linear-gradient(135deg, #0284c7 0%, #4338ca 100%) !important;
    color: #ffffff !important;
}

/* Botón Global Actualizar en el Header */
html.light-theme #global-sync-btn {
    background-color: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0369a1 !important;
}
html.light-theme #global-sync-btn:hover {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
}
html.light-theme #global-sync-btn i {
    color: #0284c7 !important;
}
html.light-theme #global-sync-btn span {
    color: #0369a1 !important;
}

/* Header Dashboard y Perfil en Modo Claro */
html.light-theme #app-layout header a[href="/"] {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
html.light-theme #app-layout header a[href="/"]:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html.light-theme #app-layout header a[href="/"] i {
    color: #0284c7 !important;
}
html.light-theme #app-layout header .border-l {
    border-color: #e2e8f0 !important;
}
html.light-theme #app-layout header span.text-slate-200 {
    color: #0f172a !important;
}