/* ============================================================
   TEMA CLARO — Admin
   Se activa agregando la clase "theme-light" al <html>.
   No toca #printableInvoiceArea (la factura imprimible es
   siempre blanca) ni los botones sólidos de acción (se
   mantienen igual en ambos temas).
   ============================================================ */

html.theme-light body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* --- Fondos neutros (estructura: header, cards, modales) --- */
html.theme-light .bg-slate-600 { background-color: #94a3b8 !important; }
html.theme-light .bg-slate-700 { background-color: #cbd5e1 !important; }
html.theme-light .bg-slate-800 { background-color: #e2e8f0 !important; }
html.theme-light .bg-slate-800\/40 { background-color: rgba(226,232,240,.4) !important; }
html.theme-light .bg-slate-800\/80 { background-color: rgba(226,232,240,.8) !important; }
html.theme-light .bg-slate-800\/90 { background-color: rgba(226,232,240,.9) !important; }
html.theme-light .bg-slate-900 { background-color: #f1f5f9 !important; }
html.theme-light .bg-slate-900\/60 { background-color: rgba(241,245,249,.6) !important; }
html.theme-light .bg-slate-900\/90 { background-color: rgba(241,245,249,.9) !important; }
html.theme-light .bg-slate-950 { background-color: #f8fafc !important; }
html.theme-light .bg-slate-950\/40 { background-color: rgba(248,250,252,.4) !important; }
html.theme-light .bg-slate-950\/60 { background-color: rgba(248,250,252,.6) !important; }
html.theme-light .bg-slate-950\/70 { background-color: rgba(248,250,252,.7) !important; }

/* --- Bordes neutros --- */
html.theme-light .border-slate-700 { border-color: #cbd5e1 !important; }
html.theme-light .border-slate-700\/60 { border-color: rgba(203,213,225,.6) !important; }
html.theme-light .border-slate-700\/80 { border-color: rgba(203,213,225,.8) !important; }
html.theme-light .border-slate-800 { border-color: #e2e8f0 !important; }
html.theme-light .border-slate-800\/60 { border-color: rgba(226,232,240,.6) !important; }
html.theme-light .border-slate-800\/70 { border-color: rgba(226,232,240,.7) !important; }
html.theme-light .border-slate-800\/80 { border-color: rgba(226,232,240,.8) !important; }

html.theme-light .divide-slate-800\/40 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(226,232,240,.4) !important; }
html.theme-light .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(226,232,240,.6) !important; }

html.theme-light .ring-slate-900 { --tw-ring-color: #f1f5f9 !important; }

/* --- Texto neutro --- */
html.theme-light .text-slate-100 { color: #0f172a !important; }
html.theme-light .text-slate-200 { color: #1e293b !important; }
html.theme-light .text-slate-300 { color: #334155 !important; }
html.theme-light .text-slate-400 { color: #475569 !important; }
html.theme-light .text-slate-600 { color: #94a3b8 !important; }

/* --- Degradados decorativos (cards con bg-gradient sobre fondo slate) --- */
html.theme-light .from-slate-900.via-slate-900.to-slate-850 {
    background-image: linear-gradient(to right, #f8fafc, #f8fafc, #f1f5f9) !important;
}
html.theme-light .from-slate-900.via-slate-900.to-emerald-950\/20 {
    background-image: linear-gradient(to right, #f8fafc, #f8fafc, #d1fae5) !important;
}
html.theme-light .from-slate-950.via-slate-900.to-emerald-950\/30 {
    background-image: linear-gradient(to right, #ffffff, #f8fafc, #d1fae5) !important;
}
html.theme-light .from-slate-950.via-slate-900.to-slate-950 {
    background-image: linear-gradient(to bottom right, #ffffff, #f8fafc, #ffffff) !important;
}

/* --- Fondos "badge" muy oscuros (900/950) -> tinte claro sólido ---
   (Alertas, pills de estado, chat del agente, etc. No se tocan los
   botones de acción sólidos: esos usan 400-800 y quedan igual.) */
html.theme-light .bg-amber-900\/90,
html.theme-light .bg-amber-950,
html.theme-light .bg-amber-950\/10,
html.theme-light .bg-amber-950\/15,
html.theme-light .bg-amber-950\/40,
html.theme-light .bg-amber-950\/90 { background-color: #fef3c7 !important; }

html.theme-light .bg-cyan-950,
html.theme-light .bg-cyan-950\/10,
html.theme-light .bg-cyan-950\/40,
html.theme-light .bg-cyan-950\/70 { background-color: #cffafe !important; }

html.theme-light .bg-emerald-900\/40,
html.theme-light .bg-emerald-900\/50,
html.theme-light .bg-emerald-900\/90,
html.theme-light .bg-emerald-950,
html.theme-light .bg-emerald-950\/15,
html.theme-light .bg-emerald-950\/30,
html.theme-light .bg-emerald-950\/40,
html.theme-light .bg-emerald-950\/60,
html.theme-light .bg-emerald-950\/80 { background-color: #d1fae5 !important; }

html.theme-light .bg-red-900,
html.theme-light .bg-red-900\/40,
html.theme-light .bg-red-900\/90,
html.theme-light .bg-red-950,
html.theme-light .bg-red-950\/10 { background-color: #fee2e2 !important; }

html.theme-light .bg-rose-900,
html.theme-light .bg-rose-900\/50,
html.theme-light .bg-rose-900\/60,
html.theme-light .bg-rose-950,
html.theme-light .bg-rose-950\/40 { background-color: #ffe4e6 !important; }

html.theme-light .bg-yellow-950 { background-color: #fef9c3 !important; }

/* --- Bordes de acento oscuros (700+) -> versión clara --- */
html.theme-light .border-amber-700 { border-color: #fcd34d !important; }
html.theme-light .border-amber-700\/50 { border-color: rgba(252,211,77,.5) !important; }
html.theme-light .border-amber-700\/60 { border-color: rgba(252,211,77,.6) !important; }
html.theme-light .border-amber-800 { border-color: #fde68a !important; }

html.theme-light .border-cyan-800 { border-color: #a5f3fc !important; }
html.theme-light .border-cyan-800\/60 { border-color: rgba(165,243,252,.6) !important; }
html.theme-light .border-cyan-900\/50 { border-color: rgba(207,250,254,.5) !important; }
html.theme-light .border-cyan-950\/60 { border-color: rgba(236,254,255,.6) !important; }

html.theme-light .border-emerald-700 { border-color: #6ee7b7 !important; }
html.theme-light .border-emerald-800 { border-color: #a7f3d0 !important; }
html.theme-light .border-emerald-800\/50 { border-color: rgba(167,243,208,.5) !important; }
html.theme-light .border-emerald-900\/40 { border-color: rgba(209,250,229,.4) !important; }
html.theme-light .border-emerald-900\/50 { border-color: rgba(209,250,229,.5) !important; }
html.theme-light .border-emerald-900\/60 { border-color: rgba(209,250,229,.6) !important; }

html.theme-light .border-red-700 { border-color: #fca5a5 !important; }
html.theme-light .border-red-800 { border-color: #fecaca !important; }
html.theme-light .border-red-800\/50 { border-color: rgba(254,202,202,.5) !important; }

html.theme-light .border-rose-800 { border-color: #fecdd3 !important; }

html.theme-light .border-yellow-800 { border-color: #fef08a !important; }

/* --- Texto de acento claro (100-400, pensado para fondo oscuro) -> oscurecer --- */
html.theme-light .text-amber-100 { color: #78350f !important; }
html.theme-light .text-amber-300 { color: #b45309 !important; }
html.theme-light .text-amber-400 { color: #d97706 !important; }

html.theme-light .text-cyan-300 { color: #0e7490 !important; }
html.theme-light .text-cyan-400 { color: #0891b2 !important; }

html.theme-light .text-emerald-100 { color: #064e3b !important; }
html.theme-light .text-emerald-300 { color: #047857 !important; }
html.theme-light .text-emerald-400 { color: #059669 !important; }

html.theme-light .text-purple-300 { color: #7e22ce !important; }
html.theme-light .text-purple-400 { color: #9333ea !important; }

html.theme-light .text-red-100 { color: #7f1d1d !important; }
html.theme-light .text-red-300 { color: #b91c1c !important; }
html.theme-light .text-red-400 { color: #dc2626 !important; }

html.theme-light .text-rose-300 { color: #be123c !important; }
html.theme-light .text-rose-400 { color: #e11d48 !important; }

html.theme-light .text-yellow-400 { color: #ca8a04 !important; }

/* --- Scrollbar clara --- */
html.theme-light ::-webkit-scrollbar-track { background: #f1f5f9 !important; }
html.theme-light ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
html.theme-light ::-webkit-scrollbar-thumb:hover { background: #10b981 !important; }

/* --- Terminal (consola MikroTik): se mantiene oscura a propósito en ambos temas --- */

/* --- Botón de alternar tema --- */
#themeToggleBtn .icon-sun { display: none; }
#themeToggleBtn .icon-moon { display: inline-flex; }
html.theme-light #themeToggleBtn .icon-sun { display: inline-flex; }
html.theme-light #themeToggleBtn .icon-moon { display: none; }