/* Manual de marca — APP - Finanzas Personales * * Cumple el Contrato de variables de `project:design`. Ese skill define * los ROLES; los valores los define este proyecto. * * Nombres de tokens: los del Design System (LNB) v1.21 (UI-166, D-068); ver * assets/manual-de-marca.md. Los valores son propios del proyecto. * * Identidad: oscura, un unico acento verde azulado (D-031). * Contrastes verificados contra WCAG AA sobre --bg y sobre --card; ver la tabla * al pie de este archivo. */ :root { /* --- superficies --- */ --bg: #0f1416; --card: #161e21; --card-alto: #1d272b; /* elevada: paneles, filas seleccionadas */ --border: #2a363b; --border-fuerte: #3a4950; --superficie: rgba(22, 30, 33, .7); /* --card translucida: topbar (vidrio con blur) */ --superficie-franja: rgba(22, 30, 33, .4); /* franja de la subnavegacion */ --sombra-panel: 0 12px 28px rgba(0, 0, 0, .45); /* paneles flotantes: combo y filtro por columna */ --overlay: rgba(0, 0, 0, .55); /* fondo detras de un dialogo */ /* --- acento unico --- */ --accent: #2dd4bf; --accent-rgb: 45, 212, 191; /* mismo color que --accent en RGB: base de los tintes de abajo */ /* tintes del acento, escala del LNB: el numero es la opacidad */ --accent-05: rgba(var(--accent-rgb), .05); /* halo del fondo */ --accent-08: rgba(var(--accent-rgb), .08); /* halo del fondo, hover suave */ --accent-14: rgba(var(--accent-rgb), .14); /* fondo de bloque: icono de KPI, fila seleccionada */ --accent-16: rgba(var(--accent-rgb), .16); /* borde de superficie: KPI, tabla, grafico, topbar */ --accent-32: rgba(var(--accent-rgb), .32); /* borde marcado sin llegar al acento solido */ --accent-55: rgba(var(--accent-rgb), .55); /* borde de pildora y resplandor de la activa */ --accent-text: #0c1a18; /* texto sobre fondo de acento */ /* --- texto --- */ --text: #e6eef0; --muted: #94a6ad; --tenue: #76878e; /* --- semaforo de estado: exito / alerta / error --- */ --sem-verde: #4ade80; --sem-amarillo: #fbbf24; --sem-rojo: #f87171; /* fondos tenues, escala del LNB: el numero es la opacidad */ --sem-verde-12: rgba(74, 222, 128, .12); --sem-amarillo-12: rgba(251, 191, 36, .12); --sem-rojo-10: rgba(248, 113, 113, .10); /* bordes de la pildora de estado (UI-188), version intermedia del color */ --sem-verde-40: rgba(74, 222, 128, .40); --sem-amarillo-40: rgba(251, 191, 36, .40); --sem-rojo-35: rgba(248, 113, 113, .35); /* --- paleta de series (Chart.js), estructura del LNB: el acento y neutros que se distinguen por luminosidad. Ningun color del semaforo: el verde y el rojo quedan para ingreso/egreso, donde el color dice si la plata entra o sale (UI-169) --- */ --chart-1: #2dd4bf; /* = --accent */ --chart-2: #f6f6f6; /* blanco hueso */ --chart-3: #60a5fa; /* azul */ --chart-4: #919191; /* gris */ --chart-5: #138a7c; /* acento oscuro */ --chart-6: #c7c7c7; /* gris claro */ /* --- escala tipografica --- */ --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --fs-xs: 12px; /* menor de la escala; el piso del skill es 11px */ --fs-sm: 13px; --fs-md: 14px; /* cuerpo */ --fs-lg: 15px; /* UI-031: alternativa B (Compacto + tipografia ajustada), antes 16px */ --fs-num: 22px; /* UI-031: alternativa B, antes 26px */ --lh-cuerpo: 1.5; --lh-num: 26px; /* FIJO en px (UI-178, norma del LNB): el valor del KPI mide igual en todas las tarjetas */ --lh-titulo: 1.25; /* --- geometria --- */ --r-card: 12px; /* tarjetas (D-044) */ --r-card-sm: 10px; /* tarjetas chicas, avisos y paneles flotantes */ --r-pill: 999px; --gap: 8px; /* UI-031: alternativa B (Compacto + tipografia ajustada), antes 10px */ --gap-sm: 5px; /* UI-031: alternativa B, antes 6px */ --tactil: 44px; /* area tactil de formularios de carga: campo/chk/colapsable-header */ --h-pill: 32px; /* pildoras de navegacion (.nav-btn), D-044 */ --h-ctrl: 38px; /* controles de filtro y accion (.filtro, .combo-btn, .catsel, botones de texto), D-044 */ --h-ico: 32px; /* boton de icono (.icon-btn), D-044 */ --r-ctrl: 9px; /* mismos controles que --h-ctrl */ --r-ico: 8px; /* boton de icono */ } /* Los importes SIEMPRE con cifras tabulares: en una app de finanzas, que las columnas de numeros no alineen digito con digito se nota en cada tabla. */ .num, .importe, td.num, .mono, table { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --------------------------------------------------------------------------- * Contraste MEDIDO (WCAG AA: 4.5:1 texto normal, 3:1 texto grande e iconos). * Calculado, no estimado a ojo: * * --text sobre --bg 15.8:1 sobre --card 14.4:1 AAA * --muted sobre --bg 7.3:1 sobre --card 6.7:1 AA * --tenue sobre --bg 5.0:1 sobre --card 4.5:1 AA * --accent sobre --bg 10.0:1 sobre --card 9.1:1 AAA * --sem-verde sobre --bg 10.6:1 sobre --card 9.7:1 AAA * --sem-amarillo sobre --bg 11.1:1 sobre --card 10.1:1 AAA * --sem-rojo sobre --bg 6.7:1 sobre --card 6.1:1 AA * --accent-text sobre --accent 9.6:1 AAA * * Nota: --tenue se ajusto de #6b7d85 a este valor porque el original daba 3.9:1 * sobre --card y no pasaba AA para texto normal. * * .badge-estado (UI-062, D-046) -- texto de semaforo sobre su propio fondo * tenue, compuesto sobre --bg y sobre --card (remedido con UI-168): * --sem-verde sobre --sem-verde-12 s/--bg 8.5:1 s/--card 7.5:1 AAA * --sem-amarillo sobre --sem-amarillo-12 s/--bg 8.8:1 s/--card 7.9:1 AAA * --sem-rojo sobre --sem-rojo-10 s/--bg 5.9:1 s/--card 5.3:1 AA * * Series de graficos (UI-169; piso 3:1 de elemento grafico, sobre --bg / --card): * --chart-1 10.0/9.1 --chart-2 17.2/15.6 --chart-3 7.3/6.7 * --chart-4 5.9/5.4 --chart-5 4.4/4.0 --chart-6 11.0/10.0 * --chart-3 tambien es texto (desplegable "Traslado a efectivo"): 6.7:1 sobre --card, AA. * ------------------------------------------------------------------------- */