/* ══════════════════════════════════════════════════════════════ Useful Solutions SAS — Aplicativo de Facturación Electrónica Tipografías: Playfair Display (títulos) + DM Sans (cuerpo) Paleta: #E31517, #29A632, #BCD689, #E9501C, #F29446 ══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Playfair+Display:wght@400;500;600;700&display=swap'); :root { --primary: #E9501C; --primary-rgb: 233, 80, 28; --primary-light: #F29446; --accent: #E9501C; --accent-hover: #E31517; --green: #29A632; --green-light: #BCD689; --red: #E31517; --bg-body: #FAFAF8; --bg-card: #ffffff; --bg-sidebar: #ffffff; --text-main: #2D2D2A; --text-muted: #6B6B65; --text-light: #C7C7C2; --placeholder-color: #C7C7C2; --border: #E0E0DC; --border-light: #EFEFED; --success: #29A632; --warning: #F29446; --danger: #E31517; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04); --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04); --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --transition: all 0.2s ease-in-out; --sidebar-width: 260px; --header-height: 64px; } /* ══════════════════════════════════════════════════════════════════════ MODO OSCURO — Paleta "Navy Premium" heredada de la landing page Se activa con el atributo data-theme="dark" en el . Solo redefine variables CSS: el resto del layout ya usa esas variables, por lo que todo el aplicativo cambia sin tocar reglas individuales. ══════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* Colores de acento: mismos que en claro (identidad de marca) */ --primary: #E9501C; --primary-rgb: 233, 80, 28; --primary-light: #F29446; --accent: #E9501C; --accent-hover: #F29446; --green: #29A632; --green-light: #BCD689; --red: #E31517; /* Fondos: navy con gradientes radiales cálidos (como la landing) */ --bg-body: #0F1A2E; --bg-card: #162240; --bg-sidebar: #0B1424; /* Textos sobre fondo oscuro */ --text-main: #F1EEE6; --text-muted: #C5CBD6; --text-light: #8C95A8; /* Bordes sutiles sobre navy */ --border: rgba(255, 255, 255, 0.10); --border-light: rgba(255, 255, 255, 0.06); /* Semánticos (se aclaran un poco para legibilidad sobre oscuro) */ --success: #6DD577; --warning: #F29446; --danger: #FF6B6B; /* Sombras más intensas para profundidad */ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.35), 0 1px 2px -1px rgb(0 0 0 / 0.25); --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.40), 0 2px 4px -2px rgb(0 0 0 / 0.30); --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.50), 0 4px 8px -4px rgb(0 0 0 / 0.30); } /* Fondo del body en modo oscuro: navy + radiales cálidos muy sutiles */ :root[data-theme="dark"] body { background-color: var(--bg-body); background-image: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(233, 80, 28, 0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 20%, rgba(212, 168, 83, 0.05) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 50% 50%, rgba(41, 166, 50, 0.03) 0%, transparent 60%); background-attachment: fixed; } /* ── Ajustes finos para componentes específicos en modo oscuro ── */ /* Inputs, selects y textareas: fondo más oscuro que las tarjetas */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background-color: #0B1424 !important; color: var(--text-main) !important; border-color: var(--border) !important; } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(233, 80, 28, 0.18) !important; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--text-light) !important; opacity: 1; } /* Autocompletado de Chrome en oscuro: evitar fondo blanco */ :root[data-theme="dark"] input:-webkit-autofill, :root[data-theme="dark"] input:-webkit-autofill:hover, :root[data-theme="dark"] input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-main) !important; -webkit-box-shadow: 0 0 0 1000px #0B1424 inset !important; transition: background-color 99999s ease-in-out 0s; } /* Tablas: filas y hover */ :root[data-theme="dark"] table thead { background-color: rgba(255, 255, 255, 0.03); } :root[data-theme="dark"] table tbody tr:hover, :root[data-theme="dark"] tr:hover { background-color: rgba(255, 255, 255, 0.04); } :root[data-theme="dark"] tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); } /* Barra superior móvil y drawer: fondo oscuro */ :root[data-theme="dark"] .mobile-topbar { background-color: var(--bg-sidebar) !important; border-bottom-color: var(--border) !important; } :root[data-theme="dark"] .mobile-topbar-btn { color: var(--text-main) !important; } :root[data-theme="dark"] .mobile-drawer { background-color: var(--bg-sidebar) !important; border-right-color: var(--border) !important; } :root[data-theme="dark"] .mobile-drawer-header, :root[data-theme="dark"] .mobile-drawer-footer { border-color: var(--border) !important; } :root[data-theme="dark"] .mobile-drawer-close { background-color: rgba(233, 80, 28, 0.15) !important; color: var(--text-muted) !important; } /* Scrollbars en oscuro (WebKit / Blink) */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 5px; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.20); } /* Selector de color en ajustes: que se vea bien sobre oscuro */ :root[data-theme="dark"] .color-picker-wrapper { border-color: var(--border); } /* Modales, dropdowns y paneles flotantes heredan automáticamente los fondos y bordes por usar var(--bg-card), var(--border), etc. */ /* ── Toggle de tema en el panel de ajustes ── */ .theme-toggle-group { display: flex; gap: 0.5rem; background: var(--bg-body); padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--border); } .theme-toggle-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 0.75rem; background: transparent; color: var(--text-muted); border: none; border-radius: calc(var(--radius-md) - 2px); font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: var(--transition); } .theme-toggle-btn:hover { color: var(--text-main); } .theme-toggle-btn.active { background: var(--bg-card); color: var(--text-main); box-shadow: var(--shadow-sm); font-weight: 600; } .theme-toggle-btn i { font-size: 1.05rem; } :root[data-theme="dark"] .theme-toggle-btn.active { background: rgba(255, 255, 255, 0.08); color: #F1EEE6; } /* ══════════════════════════════════════════════════════════════════════ MODO OSCURO — Neutralización de estilos inline legados ══════════════════════════════════════════════════════════════════════ Varios módulos (factura, reportes, etc.) tienen style="background: white" escrito dentro del JavaScript. Reescribir cada uno es invasivo y frágil, así que los neutralizamos aquí con selectores agresivos. Rendimiento: son reglas CSS planas (sin filtros, blur ni animaciones), el costo es cero. Solo se aplican cuando data-theme="dark", así que el modo claro no se ve afectado en absoluto. ══════════════════════════════════════════════════════════════════════ */ /* Elementos con fondo blanco inline → fondo de tarjeta oscura */ :root[data-theme="dark"] [style*="background: white"], :root[data-theme="dark"] [style*="background:white"], :root[data-theme="dark"] [style*="background: #fff"], :root[data-theme="dark"] [style*="background:#fff"], :root[data-theme="dark"] [style*="background: #FFFFFF"], :root[data-theme="dark"] [style*="background:#FFFFFF"], :root[data-theme="dark"] [style*="background-color: white"], :root[data-theme="dark"] [style*="background-color:white"], :root[data-theme="dark"] [style*="background-color: #fff"], :root[data-theme="dark"] [style*="background-color:#fff"] { background: var(--bg-card) !important; color: var(--text-main); } /* Bordes de tonos claros hardcoded → borde sutil oscuro */ :root[data-theme="dark"] [style*="border: 1px solid var(--border-light)"], :root[data-theme="dark"] [style*="border: 1px solid #86efac"], :root[data-theme="dark"] [style*="border: 1px solid #fde68a"] { border-color: var(--border) !important; } /* Fondos amarillentos/pastel hardcoded (alertas en factura.js) */ :root[data-theme="dark"] [style*="background: #fffbeb"], :root[data-theme="dark"] [style*="background:#fffbeb"] { background: rgba(251, 191, 36, 0.08) !important; color: var(--text-main); } /* Sombras inline (box-shadow: 0 1px 2px rgba(0,0,0,0.05)) pierden visibilidad sobre navy. Forzamos una sombra útil. */ :root[data-theme="dark"] .nav-control, :root[data-theme="dark"] .btn-icon { box-shadow: none !important; } /* Iconos y títulos con colores oscuros hardcoded (color:#1e293b etc.) */ :root[data-theme="dark"] [style*="color: #1e293b"], :root[data-theme="dark"] [style*="color:#1e293b"], :root[data-theme="dark"] [style*="color: #0f172a"], :root[data-theme="dark"] [style*="color:#0f172a"], :root[data-theme="dark"] [style*="color: #111827"], :root[data-theme="dark"] [style*="color:#111827"], :root[data-theme="dark"] [style*="color: #1f2937"], :root[data-theme="dark"] [style*="color:#1f2937"], :root[data-theme="dark"] [style*="color: #374151"], :root[data-theme="dark"] [style*="color:#374151"] { color: var(--text-main) !important; } /* Texto gris medio hardcoded → muted del tema */ :root[data-theme="dark"] [style*="color: #6b7280"], :root[data-theme="dark"] [style*="color:#6b7280"], :root[data-theme="dark"] [style*="color: #64748b"], :root[data-theme="dark"] [style*="color:#64748b"] { color: var(--text-muted) !important; } /* Texto marrón ámbar de paneles de referencia (factura.js) → dorado claro */ :root[data-theme="dark"] [style*="color: #92400e"], :root[data-theme="dark"] [style*="color:#92400e"] { color: #E8C97A !important; } /* ══════════════════════════════════════════════════════════════════════ TOQUES PREMIUM LIGEROS (inspirados en la landing, sin costo de render) ══════════════════════════════════════════════════════════════════════ Solo transparencias con rgba() y un borde sutil — nada de backdrop-filter, nada de blur, nada de animaciones. Son reglas que el navegador resuelve en una sola pasada. Probado como inocuo incluso en móviles antiguos. ══════════════════════════════════════════════════════════════════════ */ /* Tarjetas principales: fondo semi-transparente sobre navy, con un leve resplandor interior que da sensación de "vidrio", pero sin blur. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .dashboard-card, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .module-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-md); } /* Sidebar: un gradiente vertical muy suave para separar visualmente del área de contenido, sin sobrecargar. */ :root[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #0B1424 0%, #0A1220 100%); border-right-color: rgba(255, 255, 255, 0.06); } /* Header superior: transparente sobre el body (deja ver el gradiente) */ :root[data-theme="dark"] .top-header { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.06); } /* Panel de ajustes (settings-panel): el mismo tratamiento de tarjeta */ :root[data-theme="dark"] .settings-panel { background: rgba(22, 34, 64, 0.98); border-left: 1px solid rgba(255, 255, 255, 0.08); } /* Botones ghost (sin fondo) más visibles en oscuro */ :root[data-theme="dark"] .btn-ghost { color: var(--text-muted); } :root[data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-main); } /* Bordes de inputs más sutiles y hover con luz tenue del accent */ :root[data-theme="dark"] input:hover, :root[data-theme="dark"] select:hover, :root[data-theme="dark"] textarea:hover { border-color: rgba(255, 255, 255, 0.18) !important; } /* Badges / chips: fondos translúcidos (costo cero) */ :root[data-theme="dark"] .badge, :root[data-theme="dark"] .chip, :root[data-theme="dark"] .tag { background: rgba(255, 255, 255, 0.06); color: var(--text-main); border-color: rgba(255, 255, 255, 0.10); } /* Bordes divisorios (hr, líneas separadoras) */ :root[data-theme="dark"] hr, :root[data-theme="dark"] .divider { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08); } /* Enlaces dentro del contenido */ :root[data-theme="dark"] a:not(.nav-item):not(.sub-nav-item):not(.btn) { color: var(--primary-light); } :root[data-theme="dark"] a:not(.nav-item):not(.sub-nav-item):not(.btn):hover { color: var(--primary); } /* ══════════════════════════════════════════════════════════════════════ MODO OSCURO — Inputs deshabilitados (modo de solo lectura) ══════════════════════════════════════════════════════════════════════ Cuando se abre una factura ya emitida, el JS hace disabled=true sobre todos los campos. Por defecto el navegador les aplica un color de texto grisáceo del sistema ("GrayText") que sobre fondo navy queda ilegible. Aquí los dejamos con el color de texto principal pero con un matiz atenuado, y un fondo sutilmente diferente para que se note que no se pueden editar. ══════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] input:disabled, :root[data-theme="dark"] select:disabled, :root[data-theme="dark"] textarea:disabled, :root[data-theme="dark"] input[readonly], :root[data-theme="dark"] select[readonly], :root[data-theme="dark"] textarea[readonly] { background: rgba(255, 255, 255, 0.03) !important; color: #E0E5EF !important; -webkit-text-fill-color: #E0E5EF !important; /* Safari/Chrome ignoran color en disabled sin esto */ border-color: rgba(255, 255, 255, 0.08) !important; opacity: 1 !important; cursor: not-allowed; } /* Botones inline "Descargar PDF" y "Descargar XML" que se inyectan en modo readOnly desde factura.js con estilos hardcoded. */ :root[data-theme="dark"] [style*="border: 1px solid #fca5a5"] { border-color: rgba(255, 107, 107, 0.50) !important; color: #FF8A8A !important; background: rgba(255, 107, 107, 0.08) !important; } :root[data-theme="dark"] [style*="border: 1px solid #93c5fd"] { border-color: rgba(147, 197, 253, 0.50) !important; color: #9BC5FF !important; background: rgba(147, 197, 253, 0.08) !important; } /* Colores de texto rojos, azules, verdes, violetas hardcoded → variantes más claras para legibilidad sobre navy */ :root[data-theme="dark"] [style*="color: #dc2626"], :root[data-theme="dark"] [style*="color:#dc2626"], :root[data-theme="dark"] [style*="color: #b91c1c"], :root[data-theme="dark"] [style*="color:#b91c1c"] { color: #FF8A8A !important; } :root[data-theme="dark"] [style*="color: #2563eb"], :root[data-theme="dark"] [style*="color:#2563eb"] { color: #9BC5FF !important; } :root[data-theme="dark"] [style*="color: #16a34a"], :root[data-theme="dark"] [style*="color:#16a34a"], :root[data-theme="dark"] [style*="color: #15803d"], :root[data-theme="dark"] [style*="color:#15803d"], :root[data-theme="dark"] [style*="color: #166534"], :root[data-theme="dark"] [style*="color:#166534"] { color: #7DE08A !important; } :root[data-theme="dark"] [style*="color: #7c3aed"], :root[data-theme="dark"] [style*="color:#7c3aed"] { color: #C4A1FF !important; } :root[data-theme="dark"] [style*="color: #94a3b8"], :root[data-theme="dark"] [style*="color:#94a3b8"], :root[data-theme="dark"] [style*="color: #475569"], :root[data-theme="dark"] [style*="color:#475569"] { color: var(--text-muted) !important; } /* Elementos con color gris fantasma hardcoded (placeholders simulados) */ :root[data-theme="dark"] [style*="color: rgba(180, 180, 180"] { color: rgba(200, 210, 225, 0.50) !important; } /* Refuerzo: texto dentro del cuadro del cliente (por si algún navegador aplica estilos disabled a los SPAN dentro de un form con campos disabled — observado en Chromium con formularios complejos) */ :root[data-theme="dark"] .client-info-compact .client-name { color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main) !important; } :root[data-theme="dark"] .client-info-compact .info-row, :root[data-theme="dark"] .client-info-compact .info-item, :root[data-theme="dark"] .client-info-compact .info-item span { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } /* Celdas de tabla también pueden caer en el efecto disabled — forzar color legible dentro de celdas con inputs disabled */ :root[data-theme="dark"] td input:disabled, :root[data-theme="dark"] td select:disabled { background: transparent !important; border-color: transparent !important; color: #E0E5EF !important; -webkit-text-fill-color: #E0E5EF !important; } /* ══════════════════════════════════════════════════════════════════════ MODO OSCURO — CORRECCIONES V4: Barra CUFE, Badges, Botones, Tablas ══════════════════════════════════════════════════════════════════════ */ /* ── 1. Barra CUFE: fondo verde claro → verde translúcido sobre navy ── */ :root[data-theme="dark"] [style*="background: linear-gradient(135deg, #ecfdf5"], :root[data-theme="dark"] [style*="background: linear-gradient(135deg,#ecfdf5"] { background: rgba(41, 166, 50, 0.12) !important; border-color: rgba(41, 166, 50, 0.30) !important; } /* Texto CUFE y label → verde brillante legible */ :root[data-theme="dark"] #cufe-bar code, :root[data-theme="dark"] #cufe-bar span, :root[data-theme="dark"] [style*="color: #166534"], :root[data-theme="dark"] [style*="color:#166534"] { color: #86EFAC !important; -webkit-text-fill-color: #86EFAC !important; } /* Icono check del CUFE */ :root[data-theme="dark"] #cufe-bar .ri-shield-check-fill { color: #6DD577 !important; } /* Borde verde del CUFE */ :root[data-theme="dark"] [style*="border: 1px solid #86efac"] { border-color: rgba(41, 166, 50, 0.35) !important; } /* ── 2. Badges de estado del listado de facturas ── */ /* Enviada / Aceptada: verde claro → verde translúcido */ :root[data-theme="dark"] [style*="background:#dcfce7"], :root[data-theme="dark"] [style*="background: #dcfce7"] { background: rgba(41, 166, 50, 0.15) !important; color: #86EFAC !important; -webkit-text-fill-color: #86EFAC !important; } /* Borrador: gris claro → gris translúcido */ :root[data-theme="dark"] [style*="background:#f1f5f9"], :root[data-theme="dark"] [style*="background: #f1f5f9"] { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } /* Emitida: amarillo claro → ámbar translúcido */ :root[data-theme="dark"] [style*="background:#fef3c7"], :root[data-theme="dark"] [style*="background: #fef3c7"] { background: rgba(251, 191, 36, 0.12) !important; color: #FCD34D !important; -webkit-text-fill-color: #FCD34D !important; } /* Rechazada: rojo claro → rojo translúcido */ :root[data-theme="dark"] [style*="background:#fee2e2"], :root[data-theme="dark"] [style*="background: #fee2e2"] { background: rgba(255, 107, 107, 0.12) !important; color: #FCA5A5 !important; -webkit-text-fill-color: #FCA5A5 !important; } /* Anulada: violeta claro → violeta translúcido */ :root[data-theme="dark"] [style*="background:#f3e8ff"], :root[data-theme="dark"] [style*="background: #f3e8ff"] { background: rgba(196, 161, 255, 0.12) !important; color: #D8B4FE !important; -webkit-text-fill-color: #D8B4FE !important; } /* ── 3. Botones disabled (Volver, Imprimir, etc.) ── */ :root[data-theme="dark"] button:disabled, :root[data-theme="dark"] .btn:disabled { color: var(--text-light) !important; -webkit-text-fill-color: var(--text-light) !important; opacity: 0.7 !important; border-color: var(--border) !important; } /* Botones ghost activos (no disabled): reforzar visibilidad */ :root[data-theme="dark"] .btn.btn-ghost:not(:disabled) { color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); border-color: var(--border); } :root[data-theme="dark"] .btn.btn-ghost:not(:disabled):hover { color: var(--text-main); -webkit-text-fill-color: var(--text-main); background: rgba(255, 255, 255, 0.06); } /* ── 4. Botones de navegación de facturas (flechas ◄ ► con bg white) ── */ :root[data-theme="dark"] .nav-control { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } :root[data-theme="dark"] .nav-control:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main) !important; } :root[data-theme="dark"] .nav-control:disabled { background: rgba(255, 255, 255, 0.02) !important; color: var(--text-light) !important; -webkit-text-fill-color: var(--text-light) !important; opacity: 0.5 !important; } /* ── 5. Placeholder dentro de factura-form ── */ :root[data-theme="dark"] #factura-form ::placeholder { color: var(--text-light) !important; -webkit-text-fill-color: var(--text-light) !important; opacity: 1; } /* ── 6. Labels, th y text-muted dentro de factura: refuerzo ── */ :root[data-theme="dark"] #factura-form label, :root[data-theme="dark"] #factura-form th, :root[data-theme="dark"] #factura-form .text-muted, :root[data-theme="dark"] #factura-form .info-row { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } /* Encabezados de tabla: forzar sobre navy */ :root[data-theme="dark"] .data-table th { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; background-color: rgba(255, 255, 255, 0.03) !important; } /* ── 7. Totales (Subtotal, IVA Total, Total a Pagar) ── */ :root[data-theme="dark"] #box-totales .text-muted, :root[data-theme="dark"] #box-totales span { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } :root[data-theme="dark"] #box-totales .font-bold { color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main) !important; } :root[data-theme="dark"] #box-totales .text-primary { color: var(--primary) !important; -webkit-text-fill-color: var(--primary) !important; } /* ── 8. Select y date inputs dentro del box de detalles ── */ :root[data-theme="dark"] #box-detalles select, :root[data-theme="dark"] #box-detalles input { background: rgba(255, 255, 255, 0.04) !important; color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main) !important; border-color: var(--border) !important; } :root[data-theme="dark"] #box-detalles select:disabled, :root[data-theme="dark"] #box-detalles input:disabled { color: #E0E5EF !important; -webkit-text-fill-color: #E0E5EF !important; } /* ── 9. Textarea de observaciones ── */ :root[data-theme="dark"] #f-observaciones { background: var(--bg-card) !important; color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main) !important; border-color: var(--border) !important; } :root[data-theme="dark"] #f-observaciones:disabled { color: #E0E5EF !important; -webkit-text-fill-color: #E0E5EF !important; } /* ── 10. Refuerzo general: TODOS los span, div, p dentro del form ── */ :root[data-theme="dark"] #factura-form span:not(.text-primary):not(.text-danger):not(.text-accent), :root[data-theme="dark"] #factura-form p, :root[data-theme="dark"] #factura-form div:not([style*="background"]), :root[data-theme="dark"] #factura-form h4:not(.text-primary) { -webkit-text-fill-color: inherit; } /* ── 11. Iconos btn-icon dentro de la tabla (PDF, XML, Eye, Pencil) ── */ :root[data-theme="dark"] .btn-icon { color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); } :root[data-theme="dark"] .btn-icon:hover { color: var(--text-main); -webkit-text-fill-color: var(--text-main); background: rgba(255, 255, 255, 0.06); } /* ── 12. Consecutivo (SETP-990000018) ── */ :root[data-theme="dark"] #box-consecutivo, :root[data-theme="dark"] .doc-status-label { color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main) !important; } /* ── 13. Dropdown select (resuelve el fondo blanco del desplegable) ── */ :root[data-theme="dark"] select option { background: var(--bg-card); color: var(--text-main); } /* ── 14. Fondos pasteles adicionales encontrados en otros módulos ── */ /* Azul claro (info/tipo) */ :root[data-theme="dark"] [style*="background: #e0f2fe"], :root[data-theme="dark"] [style*="background:#e0f2fe"], :root[data-theme="dark"] [style*="background:#e6f1fb"], :root[data-theme="dark"] [style*="background: #e6f1fb"] { background: rgba(96, 165, 250, 0.12) !important; color: #93C5FD !important; -webkit-text-fill-color: #93C5FD !important; } /* Verde muy claro */ :root[data-theme="dark"] [style*="background: #f0fdf4"], :root[data-theme="dark"] [style*="background:#f0fdf4"] { background: rgba(41, 166, 50, 0.08) !important; } /* Gris muy claro (slate-50) */ :root[data-theme="dark"] [style*="background: #f8fafc"], :root[data-theme="dark"] [style*="background:#f8fafc"] { background: rgba(255, 255, 255, 0.04) !important; } /* Rojo claro */ :root[data-theme="dark"] [style*="background: #fef2f2"], :root[data-theme="dark"] [style*="background:#fef2f2"] { background: rgba(255, 107, 107, 0.10) !important; } /* Naranja claro */ :root[data-theme="dark"] [style*="background: #fff0eb"], :root[data-theme="dark"] [style*="background:#fff0eb"] { background: rgba(233, 80, 28, 0.10) !important; } /* Gris medio (slate-200) */ :root[data-theme="dark"] [style*="background:#e2e8f0"], :root[data-theme="dark"] [style*="background: #e2e8f0"] { background: rgba(255, 255, 255, 0.06) !important; } /* Navy hardcoded (fondo oscuro que queda bien en dark) */ :root[data-theme="dark"] [style*="background:#1e293b"] { background: var(--bg-card) !important; } /* ── 15. Regla maestra: cualquier fondo que empiece con #f en inline ── */ /* Esta regla atrapa fondos claros residuales que no se cubrieron arriba. Solo se activa en modo oscuro y para elementos con estilos inline. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'DM Sans', sans-serif; background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; -webkit-font-smoothing: antialiased; height: 100vh; overflow: hidden; overflow-x: hidden; max-width: 100vw; } html { overflow-x: hidden; max-width: 100vw; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { font-family: inherit; } h1, h2, h3, h4, .header-title, .modal-title, .form-section-title { font-family: 'Playfair Display', serif; } /* ── Layout ── */ .app-container { display: flex; height: 100vh; width: 100%; max-width: 100vw; overflow-x: hidden; } /* ── Sidebar ── */ .sidebar { width: var(--sidebar-width); background-color: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.25rem; transition: var(--transition); z-index: 50; } .brand { font-size: 1.15rem; font-weight: 700; color: var(--primary); margin-bottom: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; } .brand img { max-width: 100%; max-height: 90px; object-fit: contain; transition: var(--transition); } .brand i { font-size: 2rem; color: var(--primary); } .nav-menu { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; } .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.9rem; border-radius: var(--radius-md); color: var(--text-muted); font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: var(--transition); } .nav-item:hover { background-color: rgba(var(--primary-rgb), 0.06); color: var(--primary); } .nav-item.active { background-color: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25); } .nav-item i { font-size: 1.1rem; } .user-profile { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: var(--transition); } .avatar { width: 38px; height: 38px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } /* ── Main ── */ .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; } .top-header { height: var(--header-height); background-color: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; } .header-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 600; color: var(--text-main); } .header-actions { display: flex; align-items: center; gap: 0.5rem; } .page-content { flex: 1; overflow-y: auto; padding: 1.5rem; background-color: var(--bg-body); } /* ── Cards ── */ .card { background-color: var(--bg-card); border-radius: var(--radius-lg); padding: 1.5rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); transition: var(--transition); } .card:hover { box-shadow: var(--shadow-md); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 600; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); border: none; outline: none; } .btn-primary { background-color: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2); } .btn-primary:hover { background-color: var(--accent-hover); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); transform: translateY(-1px); } .btn-ghost { background-color: transparent; color: var(--text-muted); } .btn-ghost:hover { background-color: rgba(var(--primary-rgb), 0.06); color: var(--text-main); } /* ══ MOBILE: Topbar + Drawer (ocultos en desktop) ══ */ .mobile-topbar { display: none; } .mobile-drawer-overlay { display: none; } .mobile-drawer { display: none; } /* ── Responsive ── */ @media (max-width: 768px) { /* ═══ Ocultar sidebar desktop ═══ */ .sidebar { display: none !important; } /* ═══ TOPBAR MÓVIL ═══ */ .mobile-topbar { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 52px; padding: 0 0.75rem; background: var(--bg-sidebar); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; flex-shrink: 0; } .mobile-topbar-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: none; border: none; font-size: 1.5rem; color: var(--text-main); cursor: pointer; border-radius: var(--radius-md); transition: var(--transition); } .mobile-topbar-btn:hover { background: rgba(var(--primary-rgb), 0.06); } .mobile-topbar-brand { display: flex; align-items: center; gap: 0.4rem; color: var(--primary); font-weight: 700; font-size: 1rem; } .mobile-topbar-brand i { font-size: 1.4rem; } .mobile-topbar-brand img { max-height: 32px; width: auto; object-fit: contain; } /* ═══ OVERLAY ═══ */ .mobile-drawer-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 998; pointer-events: none; transition: background 0.3s ease; } .mobile-drawer-overlay.active { background: rgba(0, 0, 0, 0.5); pointer-events: auto; } /* ═══ DRAWER (Panel lateral) ═══ */ .mobile-drawer { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 78%; max-width: 290px; height: 100vh; height: 100dvh; background: var(--bg-sidebar); z-index: 999; transform: translateX(-105%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: none; border-right: 1px solid var(--border-light); border-radius: 0 16px 16px 0; overflow: hidden; } .mobile-drawer.open { transform: translateX(0); box-shadow: 8px 0 30px rgba(0, 0, 0, 0.15); } /* Header del drawer: logo + cerrar */ .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--border-light); flex-shrink: 0; } .mobile-drawer-logo { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--primary); font-weight: 700; font-size: 1.05rem; flex: 1; text-align: center; } .mobile-drawer-logo i { font-size: 1.8rem; } .mobile-drawer-logo img { max-height: 60px; max-width: 80%; object-fit: contain; } .mobile-drawer-close { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: rgba(var(--primary-rgb), 0.06); color: var(--text-muted); font-size: 1.3rem; cursor: pointer; border-radius: 50%; transition: var(--transition); flex-shrink: 0; position: absolute; right: 0.75rem; top: 0.75rem; } .mobile-drawer-close:hover { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); } /* Navegación dentro del drawer */ .mobile-drawer-nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.75rem; } /* Reusar los mismos estilos del nav-menu desktop */ .mobile-drawer-nav .nav-menu { display: flex; flex-direction: column; gap: 0.2rem; flex: unset; } .mobile-drawer-nav .nav-item { padding: 0.85rem 1rem; font-size: 0.95rem; border-radius: var(--radius-md); } .mobile-drawer-nav .nav-sub-menu .sub-nav-item { padding: 0.7rem 0.8rem; font-size: 0.9rem; } /* Footer del drawer: perfil */ .mobile-drawer-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-light); flex-shrink: 0; } .mobile-drawer-footer .user-profile { display: flex; margin-top: 0; padding-top: 0; border-top: none; } /* ═══ APP LAYOUT ═══ */ .app-container { flex-direction: column; } .main-content { height: auto; min-height: 0; flex: 1; overflow: visible; } .top-header { display: none; } .page-content { padding: 0.5rem; overflow-y: auto; height: calc(100vh - 52px); height: calc(100dvh - 52px); -webkit-overflow-scrolling: touch; } /* ═══ CARDS ═══ */ .card { padding: 0.75rem; border-radius: var(--radius-md); overflow: hidden; } .max-w-form { max-width: 100% !important; } /* ═══ DASHBOARD ═══ */ .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .grid-2 { grid-template-columns: 1fr; gap: 0.75rem; } .stat-card { padding: 0.6rem; } .stat-value { font-size: 1.1rem; } .stat-label { font-size: 0.65rem; } .stat-card .text-sm { font-size: 0.6rem; } /* ═══ CABECERA DE MÓDULOS (Terceros, Productos, Facturas) ═══ */ .card > .flex.justify-between.items-center { flex-direction: column; align-items: stretch !important; gap: 0.75rem; } .card > .flex.justify-between.items-center > .flex.gap-3 { flex-direction: column; gap: 0.5rem; } .card > .flex.justify-between.items-center .search-box { width: 100%; } .card > .flex.justify-between.items-center .search-box input.form-input { width: 100% !important; } .card > .flex.justify-between.items-center .btn-primary { width: 100%; justify-content: center; padding: 0.75rem 1rem; font-size: 0.95rem; } /* ═══ TABLAS ═══ */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); } .data-table th, .data-table td { padding: 0.45rem 0.5rem; font-size: 0.78rem; } /* ═══ PAGINACIÓN ═══ */ .pagination-bar { flex-direction: column; gap: 0.5rem; align-items: center; padding: 0.75rem; } .pagination-bar .pg-left { order: 2; } .pagination-bar .pg-right { order: 1; flex-wrap: wrap; justify-content: center; } .pagination-bar .pg-btn { width: 34px; height: 34px; } /* ═══ FORMULARIO DE FACTURA ═══ */ .card.max-w-form .flex.justify-between.items-center.mb-6 { flex-direction: column; align-items: stretch !important; gap: 0.5rem; } .card.max-w-form .flex.justify-between.items-center.mb-6 > .flex.items-center.gap-3:last-child { width: 100%; flex-direction: column; gap: 0.5rem; } #box-consecutivo { width: 100% !important; justify-content: center; } #f-rango { width: 100% !important; } #factura-form { gap: 1rem !important; overflow: hidden; } #factura-form .col-12 { overflow: visible; } .factura-header-row { flex-direction: column !important; gap: 0.75rem !important; } #box-tercero, #box-detalles { flex: none !important; width: 100% !important; padding: 1rem !important; } div[style*="border: 1px solid #fde68a"] { flex: none !important; width: 100% !important; padding: 1rem !important; } #box-items { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } #items-table { min-width: 800px; table-layout: auto !important; } #items-table th, #items-table td { padding: 0.3rem 0.35rem; font-size: 0.76rem; white-space: nowrap; } /* Columnas texto: permitir wrap */ #items-table th:nth-child(3), #items-table td:nth-child(3), #items-table th:nth-child(4), #items-table td:nth-child(4) { white-space: normal; min-width: 80px; } /* # y botón borrar: compactos */ #items-table th:nth-child(1), #items-table td:nth-child(1) { width: 24px; } #items-table th:nth-child(10), #items-table td:nth-child(10) { width: 30px; } /* Inputs numéricos dentro de la tabla */ #items-table .seamless-input { font-size: 0.78rem; padding: 0.35rem 0.25rem; min-width: 45px; } #items-table .text-right .seamless-input, #items-table td:nth-child(6) .seamless-input, #items-table td:nth-child(8) .seamless-input, #items-table td:nth-child(9) .seamless-input { min-width: 140px; text-align: right; } .factura-footer-row { flex-direction: column !important; gap: 0.75rem !important; } .factura-footer-row > div:first-child { width: 100%; } #box-totales { width: 100% !important; order: -1; } .nav-control { width: 38px !important; height: 38px !important; } /* ═══ MODALS ═══ */ .modal-content { width: 95% !important; max-width: 95% !important; max-height: 85vh; padding: 1.25rem !important; margin: 0.5rem; border-radius: var(--radius-md) !important; } .modal-content .form-grid { gap: 0.75rem; } /* ═══ SETTINGS ═══ */ .settings-panel { width: 100%; top: 52px; height: calc(100vh - 52px); z-index: 1001; } /* ═══ CLIENT INFO ═══ */ .client-info-compact .info-row { flex-direction: column; gap: 0.35rem; } .client-info-compact .info-row .info-item { margin-left: 0 !important; } .client-info-compact .client-name { font-size: 1rem; } /* ═══ INPUTS TÁCTILES ═══ */ .form-input, .form-select, .form-textarea, .form-control { font-size: 16px !important; padding: 0.6rem 0.75rem; min-height: 42px; } #factura-form .form-input, #factura-form .form-select { min-height: 38px; font-size: 15px !important; } .btn { min-height: 42px; padding: 0.6rem 1rem; } .btn-icon { width: 38px; height: 38px; } .autocomplete-list { max-height: 180px; } .autocomplete-item { padding: 0.75rem; font-size: 0.9rem; } #cufe-bar code { font-size: 0.65rem !important; word-break: break-all; white-space: normal !important; } .sub-nav { gap: 0.25rem; padding-bottom: 0.5rem; } .sub-nav .sub-nav-item { padding: 0.55rem 0.75rem; font-size: 0.85rem; } /* ═══ NÚMERO DE FACTURA EN UNA LÍNEA ═══ */ .doc-number-display { font-size: 1.1rem !important; white-space: nowrap; } .doc-type-label { font-size: 0.6rem !important; } .doc-status-label { font-size: 0.75rem !important; } #box-consecutivo { padding: 0.4rem 0.75rem !important; } /* ═══ BOTONES VOLVER/IMPRIMIR/PDF/XML SIMÉTRICOS ═══ */ #factura-form .flex.gap-3.items-center { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem !important; width: 100%; } #factura-form .flex.gap-3.items-center .btn { width: 100% !important; min-width: 0 !important; flex: none !important; display: flex; align-items: center; justify-content: center; padding: 0.65rem 0.4rem; font-size: 0.78rem; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Botones ocultos no deben ocupar espacio */ #factura-form .flex.gap-3.items-center .btn[style*="display: none"], #factura-form .flex.gap-3.items-center .btn[style*="display:none"] { display: none !important; } #factura-form .flex.gap-3.items-center .btn-primary { grid-column: 1 / -1; order: -1; padding: 0.85rem 1rem; font-size: 0.95rem; flex: none !important; } /* Separador vertical — ocultar en mobile */ #factura-form .flex.gap-3.items-center > div[style*="height: 24px"] { display: none !important; } /* Navegación entre documentos — ocupar fila completa */ #factura-form .flex.gap-3.items-center > .flex.gap-1 { grid-column: 1 / -1; justify-content: center; margin-top: 0.25rem; } } /* ── Utilities ── */ .text-sm { font-size: 0.85rem; } .text-xs { font-size: 0.75rem; } .text-muted { color: var(--text-muted); } .text-primary { color: var(--primary); } .text-main { color: var(--text-main); } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .font-bold { font-weight: 700; } .uppercase { text-transform: uppercase; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .w-full { width: 100%; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2.5rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2.5rem; } .pb-4 { padding-bottom: 1rem; } .p-4 { padding: 1rem; } .p-8 { padding: 2rem; } .grid { display: grid; } .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } /* ── Dashboard ── */ .stat-card { display: flex; flex-direction: column; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); } .stat-value { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--text-main); margin: 0.5rem 0; } .stat-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } /* ── Tables ── */ .table-container { overflow-x: auto; background-color: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; text-align: left; } .data-table th, .data-table td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-light); white-space: nowrap; } .data-table th { background-color: var(--bg-body); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; position: sticky; top: 0; } /* Columnas que se recortan con tooltip (Cliente, Proveedor, Razón Social, Nombre Producto) */ .cell-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover { background-color: rgba(var(--primary-rgb), 0.03); } /* ── Paginación estándar para listados ── */ .pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; border-top: 1px solid var(--border-light); font-size: 0.78rem; color: var(--text-muted); background: var(--bg-body); border-radius: 0 0 var(--radius-md) var(--radius-md); } .pagination-bar .pg-left { display: flex; align-items: center; gap: 0.5rem; } .pagination-bar .pg-left select { padding: 2px 1.5rem 2px 6px; font-size: 0.78rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-main); cursor: pointer; height: auto; } .pagination-bar .pg-right { display: flex; align-items: center; gap: 0.3rem; } .pagination-bar .pg-btn { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: var(--transition); } .pagination-bar .pg-btn:hover:not(:disabled) { background: var(--primary); color: white; border-color: var(--primary); } .pagination-bar .pg-btn:disabled { opacity: 0.35; cursor: default; } .pagination-bar .pg-btn.pg-active { background: var(--primary); color: white; border-color: var(--primary); font-weight: 700; } .pagination-bar .pg-info { margin: 0 0.5rem; white-space: nowrap; } .action-buttons { display: flex; gap: 0.4rem; } .btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--transition); border: none; background-color: transparent; cursor: pointer; } .btn-icon:hover { background-color: var(--border-light); color: var(--primary); } .btn-icon.edit:hover { background-color: rgba(var(--primary-rgb), 0.08); color: var(--primary); } .btn-icon.delete:hover { background-color: rgba(227, 21, 23, 0.08); color: var(--red); } /* ── Sub-nav ── */ .sub-nav { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-light); } .sub-nav-item { white-space: nowrap; padding: 0.45rem 0.9rem; cursor: pointer; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); border-radius: var(--radius-md); transition: var(--transition); } .sub-nav-item:hover { color: var(--primary); background-color: rgba(var(--primary-rgb), 0.06); } .sub-nav-item.active { color: var(--primary); background-color: rgba(var(--primary-rgb), 0.08); font-weight: 600; } /* ── Nav Groups (Ventas / Compras con sub-menú) ── */ .nav-group { display: flex; flex-direction: column; } .nav-group-toggle { position: relative; } .nav-group-toggle .nav-arrow { margin-left: auto; font-size: 1rem; transition: transform 0.25s ease; } .nav-group.open > .nav-group-toggle .nav-arrow { transform: rotate(180deg); } .nav-group.open > .nav-group-toggle:not(.active) { color: var(--primary); background-color: rgba(var(--primary-rgb), 0.04); } .nav-sub-menu { display: none; flex-direction: column; padding-left: 2.2rem; gap: 0.25rem; overflow: hidden; margin-top: 0.25rem; position: relative; } .nav-group.open > .nav-sub-menu { display: flex; } /* Esquema de árbol: línea principal (vertical) */ .nav-sub-menu::before { content: ''; position: absolute; left: 1.45rem; top: 0; bottom: 1.1rem; width: 1.5px; background-color: var(--primary); } .nav-sub-menu .sub-nav-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; text-decoration: none; position: relative; } /* Esquema de árbol: línea de rama (horizontal) */ .nav-sub-menu .sub-nav-item::before { content: ''; position: absolute; left: -0.75rem; top: 50%; width: 0.75rem; height: 1.5px; background-color: var(--primary); } .nav-sub-menu .sub-nav-item i { font-size: 0.9rem; z-index: 1; } .nav-sub-menu .sub-nav-item.active { background-color: rgba(var(--primary-rgb), 0.15); } .hidden-file-input { display: none; } /* ── Settings Panel ── */ .settings-panel { position: fixed; top: var(--header-height); right: 0; width: 300px; height: calc(100vh - var(--header-height)); background-color: var(--bg-card); border-left: 1px solid var(--border); padding: 1.5rem; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.3s ease-in-out; z-index: 100; } .settings-panel.open { transform: translateX(0); } .color-picker-wrapper { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; } .color-preview { width: 38px; height: 38px; border-radius: 10px; border: 2px solid var(--border); cursor: pointer; overflow: hidden; position: relative; box-shadow: var(--shadow-sm); background-color: var(--primary); } .color-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; } /* ── Factura Client ── */ .client-info-compact .info-row { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.88rem; color: var(--text-muted); } .client-info-compact .client-name { font-family: 'DM Sans', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.02em; } .client-info-compact .info-item { display: flex; align-items: center; gap: 0.35rem; } .client-info-compact .info-item i { color: var(--primary); } /* ── Modals ── */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-content { background-color: var(--bg-card); padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; transform: translateY(16px); transition: transform 0.25s ease; border: 1px solid var(--border-light); } .modal-overlay.active .modal-content { transform: translateY(0); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .modal-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; color: var(--text-main); } .close-modal { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .close-modal:hover { background-color: rgba(var(--primary-rgb), 0.08); color: var(--primary); } /* ── Forms ── */ .form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } @media (max-width: 768px) { .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-8, .col-9, .col-10 { grid-column: span 12; } } .form-group { display: flex; flex-direction: column; gap: 0.35rem; } .form-section-title { font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 600; color: var(--primary); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(var(--primary-rgb), 0.12); margin-top: 1.25rem; } .form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.01em; } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-family: inherit; font-size: 0.88rem; color: var(--text-main); background-color: var(--bg-card); transition: var(--transition); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08); } .form-input[readonly] { background-color: var(--bg-body); color: var(--text-muted); cursor: not-allowed; } .hidden { display: none !important; } .max-w-form { max-width: 1500px; margin: 0 auto; } /* ── Autocomplete ── */ .autocomplete-list { position: absolute; top: 100%; left: 0; width: 100%; min-width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-md); z-index: 50; max-height: 240px; overflow-y: auto; overflow-x: hidden; display: none; box-sizing: border-box; } /* Dropdown de producto en filas de ítems: que se expanda al contenido sin barra de scroll horizontal y mostrando el nombre completo. */ .item-row .autocomplete-list { width: max-content; min-width: 100%; max-width: 460px; } /* En las filas de ítems, el nombre del producto y el detalle deben verse completos, envolviendo en varias líneas si es necesario. */ .autocomplete-list .autocomplete-item, .autocomplete-list .autocomplete-item strong, .autocomplete-list .autocomplete-item small { white-space: normal; word-break: break-word; overflow-wrap: anywhere; line-height: 1.3; } .autocomplete-list .autocomplete-item small { display: block; margin-top: 2px; } /* ── Picker (split modal: crear / buscar) ───────────────────────────── */ .modal-overlay.picker-overlay { z-index: 2000; } .picker-modal-content { background: var(--bg-card, #fff); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.18); width: 95vw; max-width: 1200px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } .picker-header { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border, #e5e7eb); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, rgba(var(--primary-rgb,233,80,28),0.03), transparent); } .picker-header h3 { margin: 0; font-size: 1rem; color: var(--primary, #E9501C); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .picker-header .close-modal { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #64748b; padding: 0 6px; } .picker-body { display: flex; flex: 1; overflow: hidden; min-height: 0; } .picker-pane { flex: 1; padding: 1.1rem 1.25rem; overflow-y: auto; min-width: 0; } .picker-pane-left { border-right: 1px solid var(--border, #e5e7eb); flex: 1.1; } .picker-pane-right { background: #fafafa; flex: 0.9; display: flex; flex-direction: column; } .picker-pane h4 { margin: 0 0 0.85rem 0; font-size: 0.78rem; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .picker-search { margin-bottom: 0.6rem; } .picker-list { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: #fff; } .picker-item { padding: 0.65rem 0.85rem; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background 0.12s ease; display: block; } .picker-item:last-child { border-bottom: none; } .picker-item:hover { background: rgba(var(--primary-rgb, 233,80,28), 0.06); } .picker-item strong { display: block; font-weight: 700; color: #111827; font-size: 0.92rem; margin-bottom: 2px; word-break: break-word; line-height: 1.25; } .picker-item small { display: block; color: #64748b; font-size: 0.78rem; } .picker-empty { padding: 1.25rem; text-align: center; color: #94a3b8; font-size: 0.85rem; } .picker-count { color: #64748b; font-size: 0.78rem; margin-bottom: 0.5rem; } @media (max-width: 900px) { .picker-body { flex-direction: column; } .picker-pane-left { border-right: none; border-bottom: 1px solid var(--border, #e5e7eb); } .picker-modal-content { max-height: 95vh; } } .autocomplete-list.active { display: block; } .client-search-input { font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--text-main); text-transform: uppercase; } .client-search-input::placeholder { text-transform: none; font-weight: 400; color: var(--text-light); } .autocomplete-item { padding: 0.55rem 0.75rem; cursor: pointer; font-size: 0.85rem; border-bottom: 1px solid var(--border-light); transition: background-color 0.15s ease; } .autocomplete-item:hover { background-color: rgba(var(--primary-rgb), 0.06); } .autocomplete-item:hover strong { color: var(--primary); } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item strong { font-family: 'DM Sans', sans-serif; color: var(--text-main); display: block; font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.01em; transition: color 0.15s ease; } .autocomplete-item small { color: var(--text-muted); font-size: 0.78rem; font-family: 'DM Sans', sans-serif; } /* ── Seamless Inputs ── */ .seamless-input { width: 100%; border: none; background: transparent; padding: 0.5rem; font-family: inherit; font-size: 0.85rem; color: var(--text-main); outline: none; transition: background-color 0.15s ease; } .seamless-input:focus { background-color: rgba(var(--primary-rgb), 0.04); box-shadow: inset 0 0 0 2px var(--primary); border-radius: 4px; } .seamless-input.auto-resize-ta { resize: none; overflow: hidden; line-height: 1.2; min-height: 1lh; box-sizing: border-box; vertical-align: middle; } .seamless-input.auto-resize-ta.max-2-lines { max-height: 2.65rem; overflow-y: auto; } .seamless-input.ellipsis-input { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: auto; max-width: 100%; } /* ── Pill ── */ .btn-pill { padding: 0.35rem 0.9rem; border-radius: 99px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .text-center { text-align: center; } .text-right { text-align: right; } /* ── Subscription ── */ .balance-card { box-shadow: var(--shadow-sm); transition: all 0.2s; } .balance-card:hover { box-shadow: var(--shadow-md); } .hover-effect { transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; } .hover-effect:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .w-100 { width: 100%; } .text-uppercase { text-transform: uppercase; } /* ── Scrollbar ── */ .page-content::-webkit-scrollbar, .modal-content::-webkit-scrollbar, .table-container::-webkit-scrollbar { width: 6px; } .page-content::-webkit-scrollbar-track, .modal-content::-webkit-scrollbar-track, .table-container::-webkit-scrollbar-track { background: transparent; } .page-content::-webkit-scrollbar-thumb, .modal-content::-webkit-scrollbar-thumb, .table-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .page-content::-webkit-scrollbar-thumb:hover, .modal-content::-webkit-scrollbar-thumb:hover, .table-container::-webkit-scrollbar-thumb:hover { background: var(--text-light); } /* Oscurecer letras y números dentro de creación de facturas y NC - Gris entre negro y gris actual */ #factura-form { --text-main: #20201E; /* Gris muy oscuro, casi negro */ --text-muted: #42423E; /* Gris oscuro intermedio entre #000 y #6B6B65 */ } /* En modo oscuro: restaurar las variables a valores legibles */ :root[data-theme="dark"] #factura-form { --text-main: #F1EEE6; --text-muted: #C5CBD6; } /* Forzar mayor opacidad y peso ligeramente para inputs */ #factura-form input:not([type="checkbox"]), #factura-form select, #factura-form textarea { color: var(--text-main); font-weight: 500; } /* Modificar específicamente las etiquetas y placeholders */ #factura-form label, #factura-form th, #factura-form .text-muted, #factura-form .info-row { color: var(--text-muted) !important; } #factura-form ::placeholder { color: #555550; opacity: 1; } :root[data-theme="dark"] #factura-form ::placeholder { color: var(--text-light); opacity: 1; } /* ── App Blurred (durante login) ─────────────────────────────── */ .app-container.app-blurred { filter: blur(5px); pointer-events: none; } /* ── Auth Styles ──────────────────────────────────────────────── */ /* Auth Styles — Useful Solutions */ .auth-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #FAFAF8 0%, #FFF5F0 100%); display: flex; align-items: center; justify-content: center; z-index: 2000; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 1rem; box-sizing: border-box; } .auth-overlay.hidden { display: none !important; } .auth-logo { display: block; max-width: 160px; max-height: 70px; margin: 0 auto 0.5rem; object-fit: contain; } .auth-box { background-color: var(--bg-card); width: 100%; max-width: 400px; padding: 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-light); text-align: center; box-sizing: border-box; } .auth-box .form-group { text-align: left; } .auth-header { margin-bottom: 2rem; } .auth-header h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; margin: 0.75rem 0 0.3rem; color: var(--text-main); } /* ── Auth Mobile — encajar en pantalla sin zoom ── */ @media (max-width: 480px) { .auth-overlay { padding: 0.75rem; align-items: flex-start; padding-top: 1.5rem; } .auth-box { padding: 1.5rem 1.25rem; max-width: 100%; border-radius: 16px; } .auth-header { margin-bottom: 1rem; } .auth-header h2 { font-size: 1.2rem; margin: 0.4rem 0 0.2rem; } .auth-header p { font-size: 0.85rem; } .auth-logo { max-width: 120px; max-height: 55px; } .form-group { margin-bottom: 0.5rem !important; } .form-group label { font-size: 0.85rem; } .form-control { padding: 0.55rem 0.8rem; font-size: 16px; /* evita zoom en iOS */ } .auth-box .btn.w-full { padding: 0.65rem 1rem; font-size: 0.95rem; } } .form-control { width: 100%; padding: 0.65rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); margin-top: 0.5rem; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: var(--text-main); transition: var(--transition); } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08); } /* ─── Botón pequeño ─────────────────────────────────────────────── */ .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: var(--radius-md); } .btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); padding: 0.45rem 0.85rem; border-radius: var(--radius-md); cursor: pointer; font-size: 0.8rem; font-family: 'DM Sans', sans-serif; transition: var(--transition); display: inline-flex; align-items: center; gap: 4px; } .btn-outline:hover { background: var(--primary); color: #fff; } .form-control-sm { padding: 0.4rem 0.7rem; font-size: 0.82rem; margin-top: 0.25rem; } /* ─── Acordeón API en tabla de usuarios ─────────────────────────── */ .api-accordion-row td { background: var(--bg-secondary, #f8fafc); } .api-accordion-content { padding: 0; overflow: hidden; } .api-accordion-inner { padding: 14px 20px 14px 20px; border-top: 2px solid var(--primary, #1e40af); background: linear-gradient(135deg, rgba(var(--primary-rgb, 30, 64, 175), 0.03) 0%, transparent 100%); } .api-form-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .api-field { flex: 1; min-width: 160px; } .api-field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-muted, #64748b); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.03em; } .api-field label i { margin-right: 3px; font-size: 0.85rem; } .api-actions { display: flex; gap: 6px; align-items: flex-end; padding-bottom: 1px; flex-shrink: 0; } .api-message { font-size: 0.83rem; } /* Animación del punto API */ .api-status-dot { transition: transform 0.2s ease, box-shadow 0.3s ease; } .api-status-dot:hover { transform: scale(1.2); } /* Spinner para loading */ @keyframes ri-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ri-spin { animation: ri-spin 1s linear infinite; display: inline-block; } /* Botón parpadeante para "Habilite su facturación DIAN" */ @keyframes habilitacion-blink { 0%, 100% { box-shadow: 0 4px 14px rgba(233,80,28,0.35); transform: scale(1); opacity: 1; } 50% { box-shadow: 0 4px 22px rgba(233,80,28,0.85), 0 0 0 4px rgba(233,80,28,0.18); transform: scale(1.04); opacity: 0.92; } } .habilitacion-blink, .comprar-blink { animation: habilitacion-blink 1.1s ease-in-out infinite; } .habilitacion-blink:hover, .comprar-blink:hover { animation-play-state: paused; } /* ── Placeholders globales: gris claro suave para que NO parezcan texto diligenciado en cualquier input/select/textarea del aplicativo. */ input::placeholder, textarea::placeholder, select::placeholder, input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input::-moz-placeholder, textarea::-moz-placeholder, input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--placeholder-color, #C7C7C2) !important; -webkit-text-fill-color: var(--placeholder-color, #C7C7C2) !important; opacity: 1 !important; font-weight: 400 !important; font-style: italic; } /* Modo oscuro: placeholder un poco más claro pero sin acercarse al texto */ :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder, :root[data-theme="dark"] select::placeholder { color: rgba(255, 255, 255, 0.32) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important; } /* Toast genérico (usado por _showDraftSavedToast) */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Responsive: en pantallas pequeñas, el form se apila */ @media (max-width: 768px) { .api-form-row { flex-direction: column; gap: 8px; } .api-field { min-width: 100%; } .api-actions { width: 100%; justify-content: flex-start; } }