/* ============================================================ * FacturaScan — sistema de diseño LogicNET sobre Bootstrap 5.3 * * Mismos design tokens que LogicHub (esquema verde LogicNET) con * soporte de tema claro / oscuro / sistema. El tema se controla con * el atributo data-bs-theme en (lo fija el snippet anti-FOUC * del y, en runtime, theme.js). Bootstrap 5.3 lee data-bs-theme * de forma nativa; aquí solo recoloreamos el primario a verde LogicNET * y puenteamos los tokens a las variables --bs-*. * ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap"); /* ---------- Tokens LogicNET (RGB separados por espacio) ---------- */ :root { /* Superficies */ --color-bg: 249 250 251; /* #F9FAFB */ --color-surface: 255 255 255; /* #FFFFFF */ --color-surface-2: 243 244 246; /* #F3F4F6 */ /* Bordes */ --color-border: 229 231 235; /* #E5E7EB */ --color-border-strong: 209 213 219; /* #D1D5DB */ /* Texto */ --color-text: 15 23 42; /* #0F172A */ --color-text-muted: 100 116 139; /* #64748B */ --color-text-subtle: 148 163 184; /* #94A3B8 */ /* Acento (verde LogicNET) */ --color-accent: 3 152 85; /* #039855 */ --color-accent-hover: 2 122 72; /* #027A48 */ --color-accent-soft: 236 253 243; /* #ECFDF3 */ /* Estados */ --color-success: 21 128 61; /* #15803D */ --color-warning: 180 83 9; /* #B45309 */ --color-danger: 185 28 28; /* #B91C1C */ } [data-bs-theme="dark"] { --color-bg: 10 15 12; /* #0A0F0C */ --color-surface: 17 23 26; /* #11171A */ --color-surface-2: 26 33 37; /* #1A2125 */ --color-border: 42 51 56; /* #2A3338 */ --color-border-strong: 61 72 82; /* #3D4852 */ --color-text: 229 231 235; /* #E5E7EB */ --color-text-muted: 148 163 184; /* #94A3B8 */ --color-text-subtle: 107 114 128; /* #6B7280 */ --color-accent: 18 183 106; /* #12B76A */ --color-accent-hover: 50 213 131; /* #32D583 */ --color-accent-soft: 5 51 33; /* #053321 */ --color-success: 34 197 94; /* #22C55E */ --color-warning: 245 158 11; /* #F59E0B */ --color-danger: 239 68 68; /* #EF4444 */ } /* ---------- Puente a variables Bootstrap 5.3 ---------- */ :root, [data-bs-theme="dark"] { --bs-body-bg: rgb(var(--color-bg)); --bs-body-color: rgb(var(--color-text)); --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-emphasis-color: rgb(var(--color-text)); --bs-heading-color: rgb(var(--color-text)); --bs-secondary-color: rgb(var(--color-text-muted)); --bs-secondary-bg: rgb(var(--color-surface-2)); --bs-tertiary-color: rgb(var(--color-text-subtle)); --bs-tertiary-bg: rgb(var(--color-surface-2)); --bs-border-color: rgb(var(--color-border)); --bs-primary: rgb(var(--color-accent)); --bs-link-color: rgb(var(--color-accent)); --bs-link-hover-color: rgb(var(--color-accent-hover)); } /* Los triplets que Bootstrap consume con rgba(var(--x), alpha) necesitan comas, así que se definen por tema de forma explícita. */ :root { --bs-primary-rgb: 3, 152, 85; --bs-link-color-rgb: 3, 152, 85; --bs-link-hover-color-rgb: 2, 122, 72; --bs-success-rgb: 21, 128, 61; --bs-warning-rgb: 180, 83, 9; --bs-danger-rgb: 185, 28, 28; } [data-bs-theme="dark"] { --bs-primary-rgb: 18, 183, 106; --bs-link-color-rgb: 18, 183, 106; --bs-link-hover-color-rgb: 50, 213, 131; --bs-success-rgb: 34, 197, 94; --bs-warning-rgb: 245, 158, 11; --bs-danger-rgb: 239, 68, 68; } /* Botón primario verde (Bootstrap compila .btn-primary con hex fijos, por eso se sobreescriben las variables --bs-btn-* explícitamente). */ .btn-primary { --bs-btn-bg: rgb(var(--color-accent)); --bs-btn-border-color: rgb(var(--color-accent)); --bs-btn-hover-bg: rgb(var(--color-accent-hover)); --bs-btn-hover-border-color: rgb(var(--color-accent-hover)); --bs-btn-active-bg: rgb(var(--color-accent-hover)); --bs-btn-active-border-color: rgb(var(--color-accent-hover)); --bs-btn-disabled-bg: rgb(var(--color-accent)); --bs-btn-disabled-border-color: rgb(var(--color-accent)); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; } .btn-outline-primary { --bs-btn-color: rgb(var(--color-accent)); --bs-btn-border-color: rgb(var(--color-accent)); --bs-btn-hover-bg: rgb(var(--color-accent)); --bs-btn-hover-border-color: rgb(var(--color-accent)); --bs-btn-hover-color: #fff; --bs-btn-active-bg: rgb(var(--color-accent)); --bs-btn-active-border-color: rgb(var(--color-accent)); --bs-btn-active-color: #fff; --bs-btn-disabled-color: rgb(var(--color-accent)); --bs-btn-disabled-border-color: rgb(var(--color-accent)); } /* ---------- Base ---------- */ body { background: var(--bs-body-bg); transition: background-color 0.2s ease, color 0.2s ease; } a { text-decoration: none; } ::selection { background-color: rgb(var(--color-accent) / 0.2); } /* Scrollbars discretas que respetan el tema (igual que LogicHub). */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgb(var(--color-border-strong) / 0.5); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--color-border-strong) / 0.8); } /* ---------- Navbar ---------- */ .navbar { --bs-navbar-color: rgb(var(--color-text-muted)); --bs-navbar-hover-color: rgb(var(--color-text)); --bs-navbar-active-color: rgb(var(--color-accent)); --bs-navbar-brand-color: rgb(var(--color-text)); --bs-navbar-brand-hover-color: rgb(var(--color-text)); background: rgb(var(--color-surface)); border-bottom: 1px solid rgb(var(--color-border)); } .navbar-brand { font-weight: 700; letter-spacing: -0.02em; } .brand-logo { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; margin-right: 9px; box-shadow: 0 0 0 1px rgb(var(--color-border)); } /* ---------- Toggle de tema (claro / sistema / oscuro) ---------- */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid rgb(var(--color-border)); border-radius: 8px; background: rgb(var(--color-surface-2)); } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: rgb(var(--color-text-muted)); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .theme-toggle button:hover { color: rgb(var(--color-text)); } .theme-toggle button[aria-checked="true"] { background: rgb(var(--color-surface)); color: rgb(var(--color-text)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); } .theme-toggle svg { width: 15px; height: 15px; } /* ---------- Tarjetas / KPIs ---------- */ .kpi-card { background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); border-radius: 12px; padding: 1.25rem 1.5rem; height: 100%; } .kpi-card .label { font-size: 0.85rem; color: rgb(var(--color-text-muted)); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; } .kpi-card .value { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--color-text)); } .kpi-card .delta { font-size: 0.85rem; color: rgb(var(--color-text-muted)); } /* ---------- Tabla de facturas ---------- */ .table { --bs-table-hover-bg: rgb(var(--color-accent-soft)); } .invoice-row { cursor: pointer; } code { font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------- Subir factura (dropzone) ---------- */ .dropzone { border: 2px dashed rgb(var(--color-border-strong)); border-radius: 14px; padding: 3rem 2rem; text-align: center; background: rgb(var(--color-surface)); transition: all 0.15s ease; cursor: pointer; } .dropzone:hover, .dropzone.dragover { border-color: rgb(var(--color-accent)); background: rgb(var(--color-accent-soft)); } .dropzone .icon { font-size: 3rem; display: block; margin-bottom: 0.5rem; } .preview-thumb { max-width: 100%; max-height: 240px; border-radius: 8px; margin-top: 1rem; } /* ---------- Detalle de factura ---------- */ .factura-detail-img { width: 100%; border-radius: 12px; border: 1px solid rgb(var(--color-border)); } .field-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgb(var(--color-border)); } .field-row:last-child { border-bottom: none; } .field-row .label { color: rgb(var(--color-text-muted)); font-size: 0.9rem; } .field-row .value { font-weight: 500; text-align: right; color: rgb(var(--color-text)); } /* ---------- Banner MOCK (aviso amarillo, intencional en ambos temas) ---------- */ .mock-banner { background: linear-gradient(90deg, #fff3cd, #ffeaa7); border-bottom: 1px solid #ffc107; color: #664d03; padding: 0.4rem 1rem; font-size: 0.8rem; text-align: center; } /* ---------- Overlay de carga ---------- */ .spinner-overlay { position: fixed; inset: 0; background: rgb(var(--color-bg) / 0.7); display: none; justify-content: center; align-items: center; z-index: 10000; } .spinner-overlay.show { display: flex; } /* ---------- Iconos (Lucide — mismos que LogicHub) ---------- */ /* Los SVG que genera Lucide heredan currentColor y escalan con el texto. */ svg.lucide { width: 1.05em; height: 1.05em; vertical-align: -0.18em; stroke-width: 2; flex: none; } /* En botones, deja un respiro entre el icono y el texto. */ .btn svg.lucide { margin-right: 0.4em; } /* Icono grande del dropzone de "Subir factura". */ .dropzone .icon { display: block; width: 2.75rem; height: 2.75rem; margin: 0 auto 0.5rem; color: rgb(var(--color-text-subtle)); }