:root { 
    --primary: #0f62fe; --primary-hover: #0050e6; --bg-app: #f4f5f7; --surface: #ffffff; 
    --text-main: #111827; --text-sec: #6b7280; --border: #e5e7eb; --hover-bg: #f9fafb; 
    --badge-bg: #eff6ff; --badge-text: #1d4ed8; --active-bg: #eff6ff;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] { 
    --primary: #60a5fa; --primary-hover: #93c5fd; --bg-app: #111827; --surface: #1f2937; 
    --text-main: #f9fafb; --text-sec: #9ca3af; --border: #374151; --hover-bg: #273548; 
    --badge-bg: #1e3a8a; --badge-text: #bfdbfe; --active-bg: #223454;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-sec); }

body { font-family: 'Inter', sans-serif; margin: 0; display: flex; height: 100vh; background-color: var(--bg-app); color: var(--text-main); overflow: hidden; transition: background-color 0.4s ease, color 0.4s ease; }

.modulo-app { display: none; width: 100%; height: 100%; flex-direction: row; }
.modulo-app.activo { display: flex; }

.toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; }
.toast { padding: 12px 18px; border-radius: 10px; color: white; font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateX(100%) scale(0.9); animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, toastOut 0.4s 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.toast.success { background-color: #059669; }
.toast.error { background-color: #dc2626; }
.toast.warning { background-color: #d97706; }
.toast.live-alert { background-color: #0f62fe; }
@keyframes toastIn { to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(120%) scale(0.9); } }
@keyframes fadeIn { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes floatLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes loadProgress { 0% { width: 0%; } 100% { width: 100%; } }
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }

/* ========================================================================= */
/* MODO OSCURO QUIRÚRGICO (MAPEADO EXACTO AL HTML DE ABATA SAS)              */
/* ========================================================================= */

/* 1. FONDO PRINCIPAL DEL MÓDULO ACTIVO */
.modulo-app.dark-mode {
    background-color: #0f172a !important;
}

/* 2. MÓDULO 1 (DIAN): Paneles Laterales y Visor */
.modulo-app.dark-mode .sidebar,
.modulo-app.dark-mode .content,
.modulo-app.dark-mode .panel-avanzado,
.modulo-app.dark-mode .dashboard-mini,
.modulo-app.dark-mode .empty-state,
.modulo-app.dark-mode .mail-paper {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.modulo-app.dark-mode .sidebar-header,
.modulo-app.dark-mode .content-header {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 3. MÓDULOS 2 al 5 (Herramientas): Contenedores y Zonas de Arrastre */
.modulo-app.dark-mode .extractos-container {
    background-color: transparent !important;
}

.modulo-app.dark-mode .drop-zone,
.modulo-app.dark-mode .cruce-drop-zone,
.modulo-app.dark-mode .metric-card,
.modulo-app.dark-mode .file-success-banner {
    background-color: #1e293b !important;
    background-image: none !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
}

/* 4. INPUTS, CONTRASEÑAS Y BUSCADORES */
.modulo-app.dark-mode .search-box input,
.modulo-app.dark-mode .input-nit-container input,
.modulo-app.dark-mode .secure-input-wrapper,
.modulo-app.dark-mode .secure-input-wrapper input {
    background-color: rgba(15, 23, 42, 0.8) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 5. FIX DE TÍTULOS Y TEXTOS (Destruye los degradados en línea del Mod 5) */
.modulo-app.dark-mode h2,
.modulo-app.dark-mode h3,
.modulo-app.dark-mode h4,
.modulo-app.dark-mode p,
.modulo-app.dark-mode label,
.modulo-app.dark-mode .brand-title,
.modulo-app.dark-mode .brand-email,
.modulo-app.dark-mode .brand-version,
.modulo-app.dark-mode .dash-valor,
.modulo-app.dark-mode .dash-conteo {
    background: none !important;
    -webkit-text-fill-color: #f8fafc !important;
    color: #f8fafc !important;
}

.modulo-app.dark-mode .icon-tema-local {
    color: #f8fafc !important;
}

/* 6. TABLAS DE RESULTADOS */
.modulo-app.dark-mode table thead th {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modulo-app.dark-mode table tbody td {
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 7. TARJETAS DE LISTA (Módulo 1) */
.modulo-app.dark-mode .correo-item,
.modulo-app.dark-mode .factura-item {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================================================= */
/* REPARACIÓN EXCLUSIVA Y DEFINITIVA: MÓDULO 1 (DIAN)                        */
/* ========================================================================= */

/* 1. Atrapa el modo oscuro global o local y pinta los fondos base */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .sidebar,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .content,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .content-body,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian #lista-scroll-container,
#modulo-dian.dark-mode .sidebar,
#modulo-dian.dark-mode .content,
#modulo-dian.dark-mode .content-body,
#modulo-dian.dark-mode #lista-scroll-container {
    background-color: #0f172a !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* 2. Cabeceras con tono sutilmente más claro */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .sidebar-header,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .content-header,
#modulo-dian.dark-mode .sidebar-header,
#modulo-dian.dark-mode .content-header {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 3. Tarjetas de la lista de correos / facturas generadas por JS */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian #lista-correos > div,
#modulo-dian.dark-mode #lista-correos > div {
    background-color: #1e293b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
}

:is(.dark-mode, [data-theme="dark"]) #modulo-dian #lista-correos > div:hover,
#modulo-dian.dark-mode #lista-correos > div:hover {
    background-color: #334155 !important;
}

/* 4. Paneles internos (Filtros y Métricas) */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .panel-avanzado,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .dashboard-mini,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .dash-metricas > div,
#modulo-dian.dark-mode .panel-avanzado,
#modulo-dian.dark-mode .dashboard-mini,
#modulo-dian.dark-mode .dash-metricas > div {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 5. Inputs y Cajas de Búsqueda */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .search-box input,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .input-nit-container,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .input-nit-container input,
#modulo-dian.dark-mode .search-box input,
#modulo-dian.dark-mode .input-nit-container,
#modulo-dian.dark-mode .input-nit-container input {
    background-color: rgba(15, 23, 42, 0.8) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 6. Textos y Títulos (Sobrescribir blancos/negros quemados) */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian h2,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian h3,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian p,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian span:not(.material-icons):not(.badge),
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .brand-title,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .brand-email,
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .brand-version,
#modulo-dian.dark-mode h2,
#modulo-dian.dark-mode h3,
#modulo-dian.dark-mode p,
#modulo-dian.dark-mode span:not(.material-icons):not(.badge),
#modulo-dian.dark-mode .brand-title,
#modulo-dian.dark-mode .brand-email,
#modulo-dian.dark-mode .brand-version {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}
/* ========================================================================= */
/* FIX: RECUPERAR ETIQUETAS INVISIBLES DE LAS FACTURAS (MÓDULO 1)            */
/* ========================================================================= */

/* 1. Darle fondo oscuro y borde a las pastillas internas para que el texto blanco resalte */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian #lista-correos span:not(.material-icons),
#modulo-dian.dark-mode #lista-correos span:not(.material-icons) {
    background-color: rgba(255, 255, 255, 0.1) !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

/* 2. Reparar los botones de filtros rápidos superiores ("Últimos 7 días", etc.) */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian .chip,
#modulo-dian.dark-mode .chip {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* ========================================================================= */
/* FIX: EL TOQUE FINAL - RECUADRO VERDE DEL VALOR (MÓDULO 1)                 */
/* ========================================================================= */

/* 1. Apuntamos específicamente a la última pastilla de la fila (el precio) */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian #lista-correos span:not(.material-icons):last-child,
#modulo-dian.dark-mode #lista-correos span:not(.material-icons):last-child {
    background-color: rgba(16, 185, 129, 0.15) !important; /* Verde oscuro translúcido */
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important; /* Verde esmeralda brillante */
    -webkit-text-fill-color: #34d399 !important;
}

/* 2. Pintamos también el iconito de billete que va por dentro de la pastilla */
:is(.dark-mode, [data-theme="dark"]) #modulo-dian #lista-correos span:not(.material-icons):last-child .material-icons,
#modulo-dian.dark-mode #lista-correos span:not(.material-icons):last-child .material-icons {
    color: #34d399 !important;
    -webkit-text-fill-color: #34d399 !important;
}
/* ========================================================================= */
/* FIX EXCLUSIVO: MODO OSCURO PARA LA SUITE PDF (MÓDULO 4)                   */
/* ========================================================================= */

/* 1. Pintar los fondos principales (Barra lateral, Área de trabajo y Contenedor de lista) */
#modulo-boveda.dark-mode .sidebar,
#modulo-boveda.dark-mode .content,
#modulo-boveda.dark-mode .content-body,
#modulo-boveda.dark-mode #lista-scroll-container {
    background-color: #0f172a !important;
    background-image: none !important;
}

/* 2. Cabeceras (Tono sutilmente más claro para separarlas del fondo) */
#modulo-boveda.dark-mode .sidebar-header,
#modulo-boveda.dark-mode .content-header {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 3. Textos y Títulos (Fuerza el blanco y elimina colores oscuros originales) */
#modulo-boveda.dark-mode .brand-title,
#modulo-boveda.dark-mode .brand-version,
#modulo-boveda.dark-mode .content-header h2,
#modulo-boveda.dark-mode .content-header .remitente-detalle,
#modulo-boveda.dark-mode .correo-item strong {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

#modulo-boveda.dark-mode .correo-item .asunto {
    color: #94a3b8 !important;
}

/* 4. Botones superiores en la barra lateral (Sol/Luna y Home) */
#modulo-boveda.dark-mode .btn-icon {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#modulo-boveda.dark-mode .btn-icon .material-icons {
    color: #f8fafc !important;
}

/* 5. Tarjetas del menú izquierdo (Desbloqueador, Unir, Extraer) */
#modulo-boveda.dark-mode .correo-item {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#modulo-boveda.dark-mode .correo-item:hover {
    background-color: #334155 !important;
}

/* Efecto para la pestaña activa */
#modulo-boveda.dark-mode .correo-item.active {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-left: 4px solid #3b82f6 !important;
}
/* TRUNCAMIENTO FORZADO PARA EVITAR DESBORDAMIENTO */
#modulo-boveda .correo-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: hidden !important;      /* Contiene el desborde */
    max-width: 100% !important;       /* Asegura que no se salga del padre */
}

/* El div que contiene el icono y el texto */
#modulo-boveda .correo-item > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;          /* CLAVE: Permite que el contenedor se encoja */
    flex: 1 1 auto !important;        /* Permite que tome el espacio disponible */
    overflow: hidden !important;      /* Oculta lo que sobra */
}

/* El texto del nombre del archivo */
#modulo-boveda .correo-item strong {
    min-width: 0 !important;          /* CLAVE: Permite que el texto se encoja */
    white-space: nowrap !important;   /* Evita saltos de línea */
    overflow: hidden !important;      /* Oculta el exceso */
    text-overflow: ellipsis !important; /* Pone los puntos suspensivos (...) */
    display: block !important;
}