Sistema de Diseño Institucional Claro

🎨 Sistema de Diseño Institucional Claro

Criptofolio implementa un riguroso sistema de diseño denominado Institutional Light.

Inspirado en los terminales financieros profesionales (como Bloomberg, FactSet o la banca privada suiza), la interfaz busca el máximo contraste, cero fatiga visual y una legibilidad numérica absoluta.

[!IMPORTANT] Modo Claro Exclusivo: La interfaz funciona exclusivamente en modo claro. Los fondos nunca abandonan la gama de blancos y grises tenues para preservar una presencia formal y solvente.

---

🎨 Paleta de Color y Tokens de Diseño

1. Superficies (Blancos y Grises Suaves)

Token	Valor Hex	OKLCH	Uso Principal
--bg	#ffffff	oklch(100% 0 0)	Lienzo global de la ventana
--surface	#ffffff	oklch(100% 0 0)	Tarjetas principales y paneles
--surface-2	#fafbfc	oklch(98.5% 0.003 240)	Filas alternas de tablas, franjas de fondo
--surface-3	#f4f6f8	oklch(96% 0.005 240)	Botones de filtro activos, hovers sutiles

2. Tipografía y Bordes de Alto Contraste

Token	Valor Hex	Uso Principal
--fg	#0a0f1c	Texto principal de alto contraste
--fg-2	#1f2937	Subtítulos, encabezados de sección
--muted	#6b7280	Texto secundario, metadatos, etiquetas de formulario
--border	#e5e7eb	Bordes nítidos para tarjetas y celdas

3. Identidad Institucional (Azul Índigo Profundo)

El índigo institucional actúa como único color de acento corporativo, evitando degradados saturados:

Variable	Valor Hex	Uso
--brand	#1e3a8a	Botones de acción primaria, enlaces activos
--brand-hover	#1d4ed8	Estados interactivos hover
--brand-soft	rgba(30, 58, 138, 0.08)	Fondos de insignias suaves, píldoras activas

4. Colores Financieros Semánticos

Token Semántico	Color	Fondo Suave	Contexto Financiero
Profit	#00875a (Verde)	rgba(0, 135, 90, 0.10)	PnL positivo, plusvalías patrimoniales
Loss	#d14343 (Rojo)	rgba(209, 67, 67, 0.10)	PnL negativo, minusvalías, pérdidas ATH
Warning	#b45309 (Ámbar)	rgba(180, 83, 9, 0.10)	Alertas de desviación, falta de FX
Info	#1d4ed8 (Azul)	rgba(29, 78, 216, 0.08)	Mensajes informativos, avisos tributarios

---

🔤 Tipografía y Números Tabulares

El sistema prescribe el uso de dos familias tipográficas:

--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

La Regla Obligatoria del Monoespaciado

• Mono Obligatorio (utilidad .num): Todos los valores numéricos —precios, cantidades, porcentajes, ratios, marcas temporales, hashes y lot IDs— deben usar JetBrains Mono con font-variant-numeric: tabular-nums.
• Alineación Vertical Impecable: Los números tabulares garantizan que las cifras decimales y los signos positivos/negativos queden perfectamente alineados verticalmente en tablas financieras sin desplazamientos al refrescar datos.

---

📐 Radios de Curvatura y Sombras

Token	Dimensión	Uso en Componentes
--radius-sm	6px	Píldoras pequeñas, etiquetas de tabla
--radius	10px	Entradas de formulario, controles select
--radius-lg	14px	Tarjetas resumen de KPIs
--radius-2xl	24px	Paneles principales y gráficos destacados

Sombras Suaves (Soft Shadows)

Las sombras se calibran con opacidades muy reducidas para evitar el efecto de sombras negras pesadas:

--shadow-soft: 0 1px 2px rgba(10, 14, 26, 0.04), 0 2px 6px rgba(10, 14, 26, 0.03);
--shadow-card: 0 1px 2px rgba(10, 14, 26, 0.04), 0 8px 24px rgba(10, 14, 26, 0.04);