/* ==========================================================================
   CashFlow Pro - Sistema de Temas: Modo Día (Claro) y Modo Noche (Oscuro)
   Garantiza contraste visual perfecto y máxima legibilidad de tipografía
   ========================================================================== */

:root {
    color-scheme: dark light;
    --transition-theme: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease, box-shadow 0.25s ease;
}

/* --------------------------------------------------------------------------
   ESTILOS BASE PARA MODO NOCHE (POR DEFECTO / .dark)
   -------------------------------------------------------------------------- */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #020617;
    color: #f8fafc;
}

/* Scrollbar en Modo Noche */
html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* --------------------------------------------------------------------------
   ESTILOS COMPLETOS PARA MODO DÍA (CLARO) - .light / [data-theme="light"]
   Mantiene una estética sumamente premium, limpia y con 100% de legibilidad
   -------------------------------------------------------------------------- */
html.light {
    color-scheme: light;
}

/* 1. Fondos Generales */
html.light,
html.light body {
    background-color: #f8fafc !important; /* Slate 50 */
    color: #0f172a !important; /* Slate 900 */
}

/* Scrollbar en Modo Día */
html.light ::-webkit-scrollbar-track {
    background: #f1f5f9;
}
html.light ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
html.light ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 2. Contenedores y Estructura */
html.light .bg-slate-950 {
    background-color: #f8fafc !important;
}

html.light .bg-slate-950\/60,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/40 {
    background-color: #f1f5f9 !important;
}

html.light .bg-slate-900,
html.light .bg-slate-900\/95,
html.light .bg-slate-900\/90,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/40 {
    background-color: #ffffff !important;
}

html.light .bg-slate-800,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/50,
html.light .bg-slate-800\/40,
html.light .bg-slate-800\/30 {
    background-color: #f1f5f9 !important;
}

html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-800\/50:hover,
html.light .hover\:bg-slate-800\/30:hover,
html.light .hover\:bg-slate-700:hover {
    background-color: #e2e8f0 !important;
}

html.light .bg-slate-700 {
    background-color: #e2e8f0 !important;
}

/* 3. Bordes en Modo Día */
html.light .border-slate-900,
html.light .border-slate-800,
html.light .border-slate-800\/90,
html.light .border-slate-800\/80,
html.light .border-slate-800\/40 {
    border-color: #e2e8f0 !important; /* Slate 200 */
}

html.light .border-slate-700,
html.light .border-slate-700\/80,
html.light .border-slate-700\/60,
html.light .border-slate-700\/50,
html.light .border-slate-700\/40 {
    border-color: #cbd5e1 !important; /* Slate 300 */
}

/* Sombras suaves elegantes para tarjetas y paneles en Modo Día */
html.light .shadow-xl,
html.light .shadow-2xl {
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -2px rgba(15, 23, 42, 0.04) !important;
}

/* 4. TIPOGRAFÍA Y LEGIBILIDAD - NINGÚN TEXTO SE PIERDE EN MODO DÍA */

/* Títulos, encabezados, cifras y textos blancos en modo oscuro deben volverse oscuros en modo claro,
   EXCEPTO en botones y elementos que tengan fondo de color sólido (índigo, verde, rojo, degradado, etc.) */
html.light .text-white:not(
    .bg-indigo-600, .bg-indigo-600 *,
    .bg-indigo-500, .bg-indigo-500 *,
    .bg-emerald-600, .bg-emerald-600 *,
    .bg-emerald-500, .bg-emerald-500 *,
    .bg-rose-600, .bg-rose-600 *,
    .bg-rose-500, .bg-rose-500 *,
    .bg-teal-600, .bg-teal-600 *,
    .bg-purple-600, .bg-purple-600 *,
    .bg-blue-600, .bg-blue-600 *,
    [class*="from-indigo-"], [class*="from-indigo-"] *,
    [class*="from-emerald-"], [class*="from-emerald-"] *,
    [class*="from-rose-"], [class*="from-rose-"] *,
    button[type="submit"], button[type="submit"] *,
    .badge-solid, .badge-solid *
) {
    color: #0f172a !important; /* Slate 900: Contraste ultra nítido */
}

/* Textos secundarios claros pasan a tonos oscuros sumamente legibles */
html.light .text-slate-100 {
    color: #0f172a !important;
}

html.light .text-slate-200 {
    color: #1e293b !important; /* Slate 800 */
}

html.light .text-slate-300:not(
    .bg-indigo-600 *, .bg-emerald-600 *, .bg-rose-600 *
) {
    color: #334155 !important; /* Slate 700 */
}

/* Textos tenues / etiquetas: Aseguramos que NO se laven en modo día */
html.light .text-slate-400:not(
    .bg-indigo-600 *, .bg-emerald-600 *, .bg-rose-600 *
) {
    color: #475569 !important; /* Slate 600: Contraste AAA garantizado */
}

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

/* Hover de texto general */
html.light .hover\:text-white:hover {
    color: #0f172a !important;
}

/* Preservar blanco en botones principales con color */
html.light .bg-indigo-600,
html.light .bg-emerald-600,
html.light .bg-rose-600,
html.light .bg-purple-600,
html.light .bg-teal-600,
html.light a.bg-indigo-600,
html.light button.bg-indigo-600 {
    color: #ffffff !important;
}
html.light .bg-indigo-600 *,
html.light .bg-emerald-600 *,
html.light .bg-rose-600 *,
html.light .bg-purple-600 *,
html.light .bg-teal-600 * {
    color: #ffffff !important;
}

/* 5. Inputs, Formularios, Selects y Textareas */
html.light input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
    border-color: #6366f1 !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
    color: #94a3b8 !important;
}

/* Input deshabilitado */
html.light input:disabled,
html.light select:disabled {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
}

/* Iconos de calendario / hora en modo día */
html.light input[type="date"]::-webkit-calendar-picker-indicator,
html.light input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.2) !important;
    cursor: pointer;
}

/* 6. Colores de Énfasis y Badges (Mayor saturación y contraste para modo día) */
html.light .text-emerald-400 {
    color: #059669 !important; /* Emerald 600 */
}
html.light .bg-emerald-500\/10,
html.light .bg-emerald-500\/15 {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

html.light .text-rose-400 {
    color: #dc2626 !important; /* Rose 600 */
}
html.light .bg-rose-500\/10,
html.light .bg-rose-500\/15 {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
}

html.light .text-indigo-400 {
    color: #4f46e5 !important; /* Indigo 600 */
}
html.light .bg-indigo-500\/10,
html.light .bg-indigo-500\/20 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
}

html.light .text-purple-400,
html.light .text-purple-300 {
    color: #7c3aed !important; /* Purple 600 */
}
html.light .bg-purple-500\/10,
html.light .bg-purple-500\/20,
html.light .bg-purple-950\/20,
html.light .bg-purple-950\/30 {
    background-color: #f5f3ff !important;
    border-color: #ddd6fe !important;
}
html.light .border-purple-800\/40,
html.light .border-purple-800\/30 {
    border-color: #e9d5ff !important;
}

html.light .text-blue-400,
html.light .text-blue-300 {
    color: #2563eb !important; /* Blue 600 */
}
html.light .bg-blue-500\/10,
html.light .bg-blue-500\/20,
html.light .bg-blue-950\/20,
html.light .bg-blue-950\/30 {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}
html.light .border-blue-800\/40,
html.light .border-blue-800\/30 {
    border-color: #bfdbfe !important;
}

html.light .text-amber-400,
html.light .text-amber-300 {
    color: #d97706 !important; /* Amber 600 */
}
html.light .bg-amber-500\/10,
html.light .bg-amber-500\/20,
html.light .bg-amber-950\/20,
html.light .bg-amber-950\/30 {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
}
html.light .border-amber-800\/40,
html.light .border-amber-800\/30 {
    border-color: #fde68a !important;
}

/* 7. Tablas en Modo Día */
html.light table tr.border-b {
    border-color: #f1f5f9 !important;
}

html.light table thead tr {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light table thead th {
    color: #475569 !important;
}

html.light table tbody tr:hover {
    background-color: #f8fafc !important;
}

/* 8. Sidebar & Navegación en Modo Día */
html.light #mainSidebar {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #mainSidebar .border-b,
html.light #mainSidebar .border-t {
    border-color: #e2e8f0 !important;
}

/* Elementos inactivos del sidebar */
html.light #mainSidebar nav a:not(.bg-indigo-600) {
    color: #475569 !important;
}
html.light #mainSidebar nav a:not(.bg-indigo-600):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Títulos de sección en sidebar */
html.light #mainSidebar nav p {
    color: #64748b !important;
}

/* Header Superior */
html.light header {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: #e2e8f0 !important;
}

html.light header h1 {
    color: #0f172a !important;
}

/* Botón de Menú */
html.light header button[onclick*="toggleSidebar"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}
html.light header button[onclick*="toggleSidebar"]:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Barra Móvil Inferior */
html.light nav.fixed.bottom-0 {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05) !important;
}

html.light nav.fixed.bottom-0 a:not(.text-indigo-400),
html.light nav.fixed.bottom-0 button {
    color: #64748b !important;
}
html.light nav.fixed.bottom-0 a:not(.text-indigo-400):hover,
html.light nav.fixed.bottom-0 button:hover {
    color: #0f172a !important;
}
html.light nav.fixed.bottom-0 .text-indigo-400 {
    color: #4f46e5 !important;
}

/* 9. Botón Toggle de Tema */
.theme-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

html.dark .theme-toggle-btn {
    background-color: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(51, 65, 85, 0.8);
    color: #cbd5e1;
}
html.dark .theme-toggle-btn:hover {
    background-color: #334155;
    color: #ffffff;
    border-color: #475569;
}

html.light .theme-toggle-btn {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
html.light .theme-toggle-btn:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* 10. Modales y Overlays */
html.light #catModal,
html.light #userModal {
    background-color: rgba(15, 23, 42, 0.45) !important;
}

html.light #catModal > div,
html.light #userModal > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2) !important;
}

/* 11. Componentes específicos de Usuarios y Configuración en Modo Día */
html.light .role-kpi-card {
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px -1px rgba(15, 23, 42, 0.05), 0 2px 6px -2px rgba(15, 23, 42, 0.03) !important;
}

html.light .user-card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 15px -1px rgba(15, 23, 42, 0.05) !important;
}

html.light .user-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.08) !important;
}

html.light .view-mode-btn:not(.bg-indigo-600) {
    color: #64748b !important;
}
html.light .view-mode-btn:not(.bg-indigo-600):hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

html.light .config-tab-btn:not(.bg-indigo-600) {
    color: #475569 !important;
}
html.light .config-tab-btn:not(.bg-indigo-600):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light .currency-chip {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html.light .currency-chip:hover {
    border-color: #6366f1 !important;
    color: #4f46e5 !important;
    background-color: #eef2ff !important;
}

html.light .role-option:not(.border-indigo-500) {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html.light .role-option:not(.border-indigo-500):hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

/* 12. Transiciones suaves para la experiencia */
body,
#mainSidebar,
header,
main,
.theme-toggle-btn,
input, select, textarea,
.role-kpi-card,
.user-card,
.card-cajero-pastel {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease, box-shadow 0.2s ease;
}

/* ==========================================================================
   Tarjeta Pastel para Módulo de Caja (Dashboard Cajero)
   ========================================================================== */
.card-cajero-pastel {
    background: linear-gradient(135deg, #e0e7fe 0%, #ede9fe 50%, #dcfce7 100%) !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.12), 0 8px 10px -6px rgba(99, 102, 241, 0.06) !important;
}

.text-title-cajero {
    color: #1e1b4b !important; /* Deep Indigo Navy - Alto contraste y máxima legibilidad */
}

.text-sub-cajero {
    color: #334155 !important; /* Slate 700 - Texto complementario legible */
}

.text-highlight-cajero {
    color: #4338ca !important; /* Indigo 700 - Resaltado */
}

.badge-cajero-hoy {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #6ee7b7 !important;
}

/* En Modo Noche: Pastel suave oscuro con luminosidad y legibilidad total */
html.dark .card-cajero-pastel,
html:not(.light) .card-cajero-pastel {
    background: linear-gradient(135deg, #1e1e38 0%, #292042 50%, #172a3a 100%) !important;
    border: 1px solid rgba(129, 140, 248, 0.35) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

html.dark .text-title-cajero,
html:not(.light) .text-title-cajero {
    color: #ffffff !important;
}

html.dark .text-sub-cajero,
html:not(.light) .text-sub-cajero {
    color: #cbd5e1 !important;
}

html.dark .text-highlight-cajero,
html:not(.light) .text-highlight-cajero {
    color: #a5b4fc !important;
}

html.dark .badge-cajero-hoy,
html:not(.light) .badge-cajero-hoy {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}