/* ═══════════════════════════════════════════════════════════════════════════ DESIGN SYSTEM — Gastos SV v2 Inspirado en: Mercury Bank · Monzo · Revolut · Linear · Plaid ─────────────────────────────────────────────────────────────────────────── Se carga DESPUÉS de Bootstrap para poder overrideear lo necesario, pero NO pelea con Bootstrap: usa sus clases cuando se pueden reutilizar (dropdowns, modals, toasts, alerts). Sincroniza el tema usando DOS atributos en : data-theme="dark|light" (design system) data-bs-theme="dark|light" (bootstrap) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Tipografía */ --f-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --f-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --f-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace; /* Espaciado (base 4px) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* Radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* Escala tipográfica (fuente única de verdad — evita font-size mágicos) */ --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 32px; --fs-hero: 40px; /* Acento — verde-teal fintech */ --acc: #00d49f; --acc-soft: rgba(0, 212, 159, 0.12); --acc-wash: rgba(0, 212, 159, 0.04); --acc-dark: #009e77; /* Estado */ --ok: #16c784; --warn: #f7b500; --err: #ef4444; --info: #5b8def; /* Transición */ --t-fast: 120ms cubic-bezier(.4,0,.2,1); --t-med: 240ms cubic-bezier(.4,0,.2,1); /* Layout */ --sidebar-w: 248px; --topbar-h: 64px; } /* ─── DARK (default fintech — Mercury/Linear) ─── */ [data-theme="dark"] { --bg-0: #0a0b0f; /* fondo app */ --bg-1: #111318; /* sidebar / card bg */ --bg-2: #1a1d24; /* cards elevadas */ --bg-3: #242832; /* hover */ --line: rgba(255,255,255,0.06); --line-strong: rgba(255,255,255,0.10); --tx-1: #e8eaed; --tx-2: #9ba3af; --tx-3: #8a92a0; /* subido para cumplir contraste AA en texto chico */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 18px 48px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); } [data-theme="light"] { --bg-0: #f6f7f9; --bg-1: #ffffff; --bg-2: #ffffff; --bg-3: #f1f3f6; --line: rgba(15,23,42,0.08); --line-strong: rgba(15,23,42,0.14); --tx-1: #0f172a; --tx-2: #475569; --tx-3: #64707f; /* oscurecido para cumplir contraste AA sobre fondo claro */ --shadow-sm: 0 1px 2px rgba(15,23,42,.04); --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --shadow-lg: 0 18px 48px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06); } /* ═══════════ RESET Y BASE ═══════════ */ html, body { margin: 0; padding: 0; } body.ds { font-family: var(--f-body); background: var(--bg-0); color: var(--tx-1); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--t-med), color var(--t-med); } /* Profundidad ambiental: dos glows fijos (teal arriba-izq, azul abajo-der) que le sacan lo "plano/negro genérico" al fondo. Muy sutiles, no molestan la lectura. Solo dark; en light quedan casi imperceptibles. */ body.ds::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 12% -5%, rgba(0,212,159,.10), transparent 60%), radial-gradient(55% 45% at 105% 108%, rgba(91,141,239,.08), transparent 60%); } [data-theme="light"] body.ds::before { background: radial-gradient(60% 50% at 12% -5%, rgba(0,212,159,.06), transparent 60%), radial-gradient(55% 45% at 105% 108%, rgba(91,141,239,.05), transparent 60%); } /* Links genéricos dentro del DS: verde acento. EXCLUIMOS los que son botones (.ds-btn) porque cada variant (primary, success, warn, danger, ghost, outline) define su propio color y este selector les ganaba por especificidad → texto invisible en botones-. */ .ds a:not(.ds-btn) { color: var(--acc); text-decoration: none; } .ds a:not(.ds-btn):hover { color: var(--acc-dark); } .ds .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; } .ds h1, .ds h2, .ds h3, .ds h4, .ds h5 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; color: var(--tx-1); margin: 0; } /* Scrollbar minimalista (webkit + firefox) */ .ds * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .ds *::-webkit-scrollbar { width: 8px; height: 8px; } .ds *::-webkit-scrollbar-track { background: transparent; } .ds *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; } .ds *::-webkit-scrollbar-thumb:hover { background: var(--tx-3); } /* ═══════════ LAYOUT APP ═══════════ */ .ds-app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; /* El colapso del sidebar en desktop anima esta columna (ver [data-sidebar="hidden"] mas abajo). */ transition: grid-template-columns var(--t-med); } /* ═══════════ SIDEBAR ═══════════ */ .ds-sidebar { /* Gradiente sutil (bg-1 → bg-0) para dar profundidad coherente con el topbar glass y las KPI cards; antes era una superficie chata. */ background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-right: 1px solid var(--line); padding: var(--s-6) var(--s-4); position: sticky; top: 0; /* 100dvh (no 100vh): en moviles la barra de URL entra y sale, y 100vh mide el viewport GRANDE (sin barra) → el pie del menu queda debajo del borde visible y no se alcanza ni scrolleando. El 100vh queda como fallback. */ height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; /* no arrastra el scroll del fondo */ z-index: 20; transition: transform var(--t-med); } .ds-brand { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-3); margin-bottom: var(--s-8); text-decoration: none; color: inherit; } .ds-brand:hover { color: inherit; } .ds-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--acc), #00a3ff); display: grid; place-items: center; color: #000; font-weight: 800; font-size: 15px; box-shadow: 0 4px 14px rgba(0,212,159,0.3); flex-shrink: 0; } .ds-brand-name { font-weight: 700; letter-spacing: -0.01em; font-size: 15px; color: var(--tx-1); } .ds-brand-sub { font-size: 10.5px; color: var(--tx-3); letter-spacing: .04em; text-transform: uppercase; } .ds-nav-group { margin-bottom: var(--s-5); } /* Es un