/* ============================================================ Ganancia Real — Design Tokens Mobile first: los tamaños base están pensados para el teléfono y crecen en tablet/escritorio con media queries. ============================================================ */ :root { /* ── Marca ── */ --brand: #0d9488; --brand-hover: #0f766e; --brand-dark: #0a7060; --brand-light: #ccfbf1; --brand-bg: #e6f7f5; /* ── Semántica financiera ── Verde = lo que entra, rojo = lo que sale. Es la lectura más rápida posible para el usuario y se respeta en toda la app. */ --ingreso: #16a34a; --ingreso-bg: #dcfce7; --ingreso-tx: #14532d; --gasto: #dc2626; --gasto-bg: #fee2e2; --gasto-tx: #7f1d1d; --ganancia: #0d9488; --ganancia-bg: #ccfbf1; --ganancia-tx: #134e4a; /* ── Fondos ── */ --bg-page: #f1f5f9; --bg-card: #ffffff; --bg-soft: #f8fafc; --bg-input: #f8fafc; --bg-dim: rgba(15, 23, 42, 0.55); /* ── Texto ── */ --tx-1: #0f172a; --tx-2: #334155; --tx-3: #64748b; --tx-4: #94a3b8; --tx-inv: #ffffff; /* ── Bordes ── */ --bd: #e2e8f0; --bd-light: #f1f5f9; /* ── Estados ── */ --ok: #16a34a; --ok-bg: #dcfce7; --ok-tx: #14532d; --warn: #d97706; --warn-bg: #fef3c7; --warn-tx: #92400e; --alert: #dc2626; --alert-bg: #fee2e2; --alert-tx: #7f1d1d; --info: #2563eb; --info-bg: #dbeafe; --info-tx: #1e3a8a; --neutral: #64748b; --neutral-bg: #f1f5f9; --neutral-tx: #334155; /* ── Tipografía ── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --f-xs: 0.6875rem; /* 11px */ --f-sm: 0.8125rem; /* 13px */ --f-base: 0.9375rem; /* 15px */ --f-lg: 1.0625rem; /* 17px */ --f-xl: 1.25rem; /* 20px */ --f-2xl: 1.5rem; /* 24px */ --f-3xl: 1.875rem; /* 30px */ --f-4xl: 2.25rem; /* 36px */ /* ── Espaciado ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* ── Formas ── */ --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-full: 999px; --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06); --sh-2: 0 2px 4px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.06); --sh-3: 0 12px 32px rgba(15, 23, 42, 0.16); /* ── Layout ── */ --nav-alto: 62px; /* barra inferior en móvil */ --safe-bottom: env(safe-area-inset-bottom, 0px); --header-alto: 56px; --max-ancho: 780px; /* la app nunca se estira: se centra */ --transicion: 160ms ease; } /* ── Tema oscuro ── Se aplica con data-theme="dark" en (lo escribe Utils.inicializarTema) y también respeta la preferencia del sistema si el usuario nunca eligió. */ [data-theme="dark"] { --bg-page: #0b1220; --bg-card: #131c2e; --bg-soft: #1a2438; --bg-input: #1a2438; --bg-dim: rgba(0, 0, 0, 0.7); --tx-1: #f1f5f9; --tx-2: #cbd5e1; --tx-3: #94a3b8; --tx-4: #64748b; --bd: #263449; --bd-light: #1e2a3d; --brand-light: #134e4a; --brand-bg: #10302e; --ingreso-bg: #10331f; --ingreso-tx: #86efac; --gasto-bg: #3b1517; --gasto-tx: #fca5a5; --ganancia-bg: #10302e; --ganancia-tx: #5eead4; --ok-bg: #10331f; --ok-tx: #86efac; --warn-bg: #3a2a0c; --warn-tx: #fcd34d; --alert-bg: #3b1517; --alert-tx: #fca5a5; --info-bg: #16274a; --info-tx: #93c5fd; --neutral-bg: #1a2438; --neutral-tx: #cbd5e1; --sh-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35); --sh-3: 0 12px 32px rgba(0, 0, 0, 0.55); }