/* ── Variables CSS: Light (default) ──────────────────────────────────── */
:root {
    --primary:          #1B4332;
    --primary-light:    #2d6a4f;
    --color-navy:       #1B4332;
    --color-navy-lt:    #2d6a4f;
    --color-surface:    #F4F7FB;
    --color-card:       #ffffff;
    --color-border:     #DDE4EE;
    --color-ink:        #0F172A;
    --color-muted:      #7B8CA0;
}

/* ── Variables CSS: Dark — paleta del prototipo VistasPrototipo ───────── */
.dark {
    --primary:          #1B3A6B;   /* navy original; overrides CSS manejan uso visual */
    --primary-light:    #2a5298;
    --color-navy:       #cbd5ff;   /* text-navy → periwinkle claro                   */
    --color-navy-lt:    #93c5fd;
    --color-surface:    #0a1120;   /* fondo de página                                */
    --color-card:       #111a2e;   /* cards y contenedores                           */
    --color-border:     #273449;   /* bordes y divisores                             */
    --color-ink:        #f8fafc;   /* texto principal                                */
    --color-muted:      #a7b5cc;   /* texto secundario                               */
}

/* ── Font feature settings (igual que prototipo) ──────────────────────── */
body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-feature-settings: 'ss01', 'cv11';
}

/* ── Safe area iOS (notch / Dynamic Island) ──────────────────────────── */
.safe-top    { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ── Scrollbar personalizado (webkit) ────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #DDE4EE; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #7B8CA0; }

.dark ::-webkit-scrollbar-thumb { background: #273449; }
.dark ::-webkit-scrollbar-thumb:hover { background: #a7b5cc; }

/* ── Canvas de firma digital ─────────────────────────────────────────── */
#sig-canvas {
    touch-action: none;
    cursor: crosshair;
    display: block;
}
.dark #sig-canvas { background: #0f172a; }

/* ── Transición de módulos SPA ───────────────────────────────────────── */
#app-content {
    animation: fadeIn 0.18s ease-out;
    background-color: var(--color-surface);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Animación view-enter ────────────────────────────────────────────── */
.view-enter { animation: fadeIn 0.18s ease-out; }

/* ── Animación count-pop para valores reactivos ──────────────────────── */
@keyframes count-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.count-pop { animation: count-pop 0.2s ease-out; }

/* ── Bottom nav activo ───────────────────────────────────────────────── */
.nav-btn.active span:first-child { transform: scale(1.1); }

/* ── Bottom sheet overlay ────────────────────────────────────────────── */
#sheet-overlay {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
}

/* ── Ocultar scrollbar en listas horizontales ────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Sidebar activo con tokens del sistema ───────────────────────────── */
.sidebar-btn.active {
    background-color: rgba(27, 67, 50, 0.08);
    color: var(--primary);
    font-weight: 700;
}

/* ── Responsive: safe areas solo en móvil ────────────────────────────── */
@media (min-width: 1024px) {
    #safe-top, #safe-bottom { display: none !important; }
}

/* ── Content area desktop: fondo surface ─────────────────────────────── */
@media (min-width: 1024px) {
    #app-content { background-color: var(--color-surface); }
}

/* ── Módulos autenticados en desktop: centrar contenido ──────────────── */
@media (min-width: 1024px) {
    .module-wrapper {
        max-width: 960px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
    }
}

/* ── Gradiente navy (para topbar y hero del prototipo) ───────────────── */
.gradient-navy {
    background: linear-gradient(160deg, #1B4332 0%, #2d6a4f 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — Overrides exactos del prototipo VistasPrototipo
═══════════════════════════════════════════════════════════════════════ */

/* ── Transición suave durante el switch de tema ──────────────────────── */
html.transitioning *,
html.transitioning *::before,
html.transitioning *::after {
    transition: background-color 0.25s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.25s ease !important;
}

/* ── Fondo de página y contenido principal ───────────────────────────── */
.dark body { background: radial-gradient(ellipse at top, #0b1220 0%, #020617 100%); }
.dark #app-content { background-color: var(--color-surface) !important; }
@media (min-width: 1024px) {
    .dark #app-content { background-color: var(--color-surface) !important; }
}

/* ── Cards y fondos blancos ──────────────────────────────────────────── */
.dark .bg-white  { background: #111a2e !important; color: #f1f5f9; }
.dark .bg-surface { background: #0a1120 !important; }

/* ── bg-navy: fondo oscuro profundo (topbar, hero, avatares) ─────────── */
.dark .bg-navy { background: #0b1220 !important; }

/* ── Elementos con background inline var(--primary) ─────────────────── */
/* Hero sections, topbar, safe-area → near-black                         */
.dark [style*="background: var(--primary)"],
.dark [style*="background:var(--primary)"] {
    background: #060c16 !important;
    color: #f8fafc !important;
}
/* Avatares y chips (rounded-full, rounded-xl) → slate distinguible      */
.dark [class*="rounded-full"][style*="background: var(--primary)"],
.dark [class*="rounded-full"][style*="background:var(--primary)"],
.dark [class*="rounded-xl"][style*="background: var(--primary)"],
.dark [class*="rounded-xl"][style*="background:var(--primary)"],
.dark [class*="rounded-\[1"][style*="background: var(--primary)"],
.dark [class*="rounded-\[1"][style*="background:var(--primary)"] {
    background: #1e2d42 !important;
    color: #f8fafc !important;
}
/* Iconos y elementos con color inline var(--primary) */
.dark [style*="color:var(--primary)"],
.dark [style*="color: var(--primary)"] { color: #cbd5ff !important; }

/* ── Texto ───────────────────────────────────────────────────────────── */
.dark .text-ink, .dark .text-gray-900 { color: #f8fafc !important; }
.dark .text-gray-700                  { color: #e2e8f0 !important; }
.dark .text-muted                     { color: #a7b5cc !important; }
.dark .text-navy, .dark [style*="color: var(--primary)"] { color: #cbd5ff !important; }

/* ── Bordes y divisores ──────────────────────────────────────────────── */
.dark .border-border          { border-color: #273449 !important; }
.dark .bg-border              { background: #273449 !important; }
.dark .divide-border > * + *  { border-color: #273449 !important; }
.dark .border-dashed          { border-color: #334155 !important; }

/* ── Sombras (inset glow sutil + sombra oscura) ──────────────────────── */
.dark .shadow-card {
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
                0 6px 14px rgba(0,0,0,0.45) !important;
}
.dark .shadow-pop {
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset,
                0 18px 40px rgba(0,0,0,0.55) !important;
}
.dark .shadow-top { box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important; }
.dark .shadow-btn { box-shadow: 0 8px 20px rgba(0,0,0,0.5) !important; }

/* ── Inputs, selects y textareas ─────────────────────────────────────── */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark select,
.dark textarea {
    background: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #273449 !important;
}
.dark input[readonly] { background: #0a1120 !important; }
.dark input::placeholder,
.dark textarea::placeholder { color: #64748b !important; }
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #6ea8ff !important;
    box-shadow: 0 0 0 3px rgba(110,168,255,0.15) !important;
}

/* ── Sidebar activo ──────────────────────────────────────────────────── */
.dark .sidebar-btn.active {
    background-color: rgba(203,213,255,0.10);
    color: #cbd5ff;
}

/* ── Hero gradient en dark ───────────────────────────────────────────── */
.dark .gradient-navy { background: linear-gradient(160deg, #060c16 0%, #0a1020 100%); }
.dark .from-navy     { --tw-gradient-from: #060c16 !important; }
.dark .to-success-dark { --tw-gradient-to: #0f5132 !important; }
.dark .from-success  { --tw-gradient-from: #16A34A !important; }

/* ── Badges semánticos (boost opacity para legibilidad) ──────────────── */
.dark .bg-success-light { background: rgba(22,163,74,0.18)  !important; }
.dark .bg-warning-light { background: rgba(217,119,6,0.20)  !important; }
.dark .bg-danger-light  { background: rgba(220,38,38,0.20)  !important; }
.dark .bg-info-light    { background: rgba(96,165,250,0.18) !important; }
.dark .text-success-dark { color: #6ee7a8 !important; }
.dark .text-warning-dark { color: #fbbf24 !important; }
.dark .text-danger-dark  { color: #fca5a5 !important; }
.dark .text-info-dark    { color: #93c5fd !important; }
.dark .text-success { color: #34d399 !important; }
.dark .text-warning { color: #fbbf24 !important; }
.dark .text-danger  { color: #f87171 !important; }
.dark .text-info    { color: #93c5fd !important; }

/* ── Tipografía mono / código ────────────────────────────────────────── */
.dark code, .dark .font-mono { color: #e2e8f0; }

/* ── Banda de estado del detalle de pago ────────────────────────────── */
.pd-estado-banda          { background: #E8F8EF; }
.pd-estado-text           { color: #15803d; }
.pd-estado-label          { color: rgba(21,128,61,0.60); }
.dark .pd-estado-banda    { background: rgba(22,163,74,0.15) !important; }
.dark .pd-estado-text     { color: #6ee7a8 !important; }
.dark .pd-estado-label    { color: rgba(110,231,168,0.65) !important; }

/* ── Barra de progreso de crédito ───────────────────────────────────── */
.cred-prog-track { background: rgba(0,0,0,0.08); }
.dark .cred-prog-track { background: rgba(255,255,255,0.12) !important; }
#cred-prog-bar { background: #16a34a !important; }
.dark #cred-prog-bar { background: #22c55e !important; }

/* ── Filas de cuotas pagadas (Plan de pagos) ─────────────────────────── */
.dark .bg-green-50\/60,
.dark .bg-green-50 { background: rgba(22,163,74,0.12) !important; }
/* Sub-textos de cuotas pagadas (recibo, forma de pago) */
.dark .text-success-dark\/60 { color: rgba(110,231,168,0.65) !important; }
.dark .text-success-dark\/70 { color: rgba(110,231,168,0.80) !important; }
.dark .text-success-dark\/40 { color: rgba(110,231,168,0.45) !important; }

/* ── Chart bars / barra de progreso navy ─────────────────────────────── */
.dark .bg-navy\/25 { background: rgba(148,163,184,0.35) !important; }

/* ── SweetAlert2 en dark ─────────────────────────────────────────────── */
.dark .swal2-popup {
    background: #111a2e !important;
    color: #f1f5f9 !important;
}
.dark .swal2-title,
.dark .swal2-html-container { color: #f1f5f9 !important; }

/* ── Fondos con rgba del primary inline ──────────────────────────────── */
.dark [style*="background: rgba(27,58,107"],
.dark [style*="background:rgba(27,58,107"] {
    background: rgba(148,163,184,0.08) !important;
    border-color: rgba(148,163,184,0.15) !important;
}
.dark [style*="background: rgba(27,67,50"],
.dark [style*="background:rgba(27,67,50"] {
    background: rgba(148,163,184,0.08) !important;
    color: #cbd5ff !important;
}

/* ── Surface tinted buttons ──────────────────────────────────────────── */
.dark button.bg-surface, .dark .bg-surface button { color: #e2e8f0; }