/*================================================================
VARIABLES CSS GLOBALES - CashFlow · Cortex Digital
Design Tokens basados en Manual de Marca Cortex Digital 2026
Regla de oro: Lime + Violeta sobre blanco limpio.
Fondo: blanco/claro (estilo ElevenLabs).
Tipografia: Inter (sistema ElevenLabs).
Fuente: Manual de Marca Cortex Digital · Edicion 2026
================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
:root {
scroll-behavior: smooth;
/* ─────────────────────────────────────────────────────────────
ACENTOS DE MARCA — Manual de Marca Cortex Digital 2026
───────────────────────────────────────────────────────────── */
/* Lime Green — Acento primario · CTAs · badges · acentos de identidad */
--color-lime: #A3E635;
--color-lime-dark: #84cc16;
--color-lime-light: #bef264;
--color-lime-glow: rgba(163, 230, 53, 0.35);
--color-lime-subtle: rgba(163, 230, 53, 0.10);
--color-lime-border: rgba(163, 230, 53, 0.40);
/* Violet — Acento secundario · H3 · enfasis · indicadores */
--color-violet: #A855F7;
--color-violet-dark: #7C3AED;
--color-violet-light: #c084fc;
--color-violet-glow: rgba(168, 85, 247, 0.35);
--color-violet-subtle: rgba(168, 85, 247, 0.08);
--color-violet-border: rgba(168, 85, 247, 0.30);
/* Alias semanticos del primario */
--color-primary: var(--color-lime);
--color-primary-dark: var(--color-lime-dark);
--color-primary-light: var(--color-lime-light);
--color-primary-glow: var(--color-lime-glow);
--color-primary-subtle: var(--color-lime-subtle);
/* Color de accion/interactividad (lectura sobre fondo blanco) */
--color-action: var(--color-violet-dark); /* #7C3AED — contraste 5.74:1 sobre blanco */
--color-action-hover: var(--color-violet);
/* ─────────────────────────────────────────────────────────────
BACKGROUNDS — Tema Claro (ElevenLabs style)
───────────────────────────────────────────────────────────── */
/* Fondo principal — blanco limpio */
--bg-base: #FFFFFF;
--bg-primary: #FFFFFF;
/* Surface — Tarjetas, paneles, sidebar */
--bg-surface: #F8F9FA;
--bg-secondary: #F8F9FA;
/* Surface 2 — Hover states, elementos elevados */
--bg-surface-2: #F0F1F3;
--bg-tertiary: #F0F1F3;
/* Border — Hairlines · separadores */
--bg-border: #E5E7EB;
/* Aliases para compatibilidad */
--bg-card: var(--bg-base);
--bg-card-solid: var(--bg-base);
--bg-hover: var(--bg-surface);
/* ─────────────────────────────────────────────────────────────
TEXTO — Oscuro sobre fondo claro
───────────────────────────────────────────────────────────── */
/* Texto principal sobre fondo blanco */
--text-primary: #111111;
/* Headings de maxima jerarquia */
--text-heading: #0A0A0A;
/* Texto secundario · metadatos · captions */
--text-secondary: #4B5563; /* 6.9:1 sobre blanco */
--text-muted: #596172; /* 5.5:1 sobre blanco — nunca se camufla */
/* Texto sobre acentos */
--text-on-lime: #0A0A0A; /* lime tiene bajo contraste — texto oscuro encima */
--text-on-violet: #FFFFFF;
/* ─────────────────────────────────────────────────────────────
BORDES
───────────────────────────────────────────────────────────── */
--border-color: #E5E7EB;
--border-soft: rgba(0, 0, 0, 0.06);
--border-strong: rgba(0, 0, 0, 0.12);
--border-lime: var(--color-lime-border);
--border-violet: var(--color-violet-border);
--border-radius-xs: 4px;
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 20px;
--border-radius-xl: 24px;
--border-radius-full: 999px;
/* ─────────────────────────────────────────────────────────────
SOMBRAS — Suaves para tema claro
───────────────────────────────────────────────────────────── */
--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.07);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.09);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);
--shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.15);
/* Glow con acentos de marca */
--shadow-lime: 0 0 20px rgba(163, 230, 53, 0.4);
--shadow-lime-lg: 0 0 40px rgba(163, 230, 53, 0.3);
--shadow-violet: 0 0 20px rgba(168, 85, 247, 0.3);
--shadow-violet-lg: 0 0 40px rgba(168, 85, 247, 0.2);
/* ─────────────────────────────────────────────────────────────
GRADIENTES
───────────────────────────────────────────────────────────── */
/* Barra bicolor institucional: lime 55% + violeta 45% */
--gradient-brand: linear-gradient(90deg, #A3E635 55%, #A855F7 45%);
--gradient-brand-subtle: linear-gradient(90deg, rgba(163, 230, 53, 0.40), rgba(168, 85, 247, 0.30));
/* Fondos claros */
--gradient-bg: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%);
--gradient-surface: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%);
/* Acentos sobre surfaces claras */
--gradient-lime: linear-gradient(135deg, rgba(163, 230, 53, 0.12) 0%, rgba(163, 230, 53, 0.04) 100%);
--gradient-violet: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%);
/* Estados semanticos */
--gradient-success: var(--gradient-lime);
--gradient-danger: linear-gradient(135deg, rgba(220, 38, 38, 0.10) 0%, rgba(220, 38, 38, 0.04) 100%);
--gradient-warning: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.04) 100%);
--gradient-info: var(--gradient-violet);
/* ─────────────────────────────────────────────────────────────
COLORES SEMANTICOS (estados UI)
───────────────────────────────────────────────────────────── */
--color-success: #16a34a;
--color-success-light: #A3E635;
--color-success-bg: #f0fdf4;
--color-success-dark: #15803d;
--color-success-glow: rgba(22, 163, 74, 0.20);
--color-danger: #dc2626;
--color-danger-bg: #fef2f2;
--color-danger-dark: #b91c1c;
--color-danger-glow: rgba(220, 38, 38, 0.20);
--color-warning: #d97706;
--color-warning-bg: #fffbeb;
--color-warning-dark: #b45309;
--color-warning-glow: rgba(217, 119, 6, 0.20);
--color-info: var(--color-violet-dark);
--color-info-bg: rgba(124, 58, 237, 0.08);
--color-info-dark: #6d28d9;
--color-info-glow: rgba(124, 58, 237, 0.20);
/* Aliases para backward-compat */
--accent-green-main: var(--color-lime);
--accent-green-soft: var(--color-lime-light);
--accent-green-glow: var(--color-lime-glow);
/* ─────────────────────────────────────────────────────────────
TIPOGRAFIA — Inter (estilo ElevenLabs)
───────────────────────────────────────────────────────────── */
--font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-secondary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-accent: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "Courier Prime", "Courier New", Courier, monospace;
/* Escala tipografica */
--fs-xs: 0.67rem;
--fs-sm: 0.8125rem;
--fs-base: 0.875rem;
--fs-md: 1rem;
--fs-lg: 1.0625rem;
--fs-xl: 1.25rem;
--fs-2xl: 1.5rem;
--fs-3xl: 1.875rem;
--fs-4xl: 2.25rem;
--fs-5xl: 3rem;
--fs-6xl: 3.75rem;
--fs-7xl: 4.5rem;
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--lh-tight: 1.2;
--lh-normal: 1.4;
--lh-relaxed: 1.6;
--lh-loose: 1.8;
--ls-tight: -0.02em;
--ls-normal: 0;
--ls-wide: 0.01em;
--ls-wider: 0.025em;
--ls-widest: 0.05em;
/* ─────────────────────────────────────────────────────────────
ESPACIADO
───────────────────────────────────────────────────────────── */
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-32: 8rem;
--padding-xs: var(--spacing-2) var(--spacing-3);
--padding-sm: var(--spacing-3) var(--spacing-4);
--padding-md: var(--spacing-4) var(--spacing-6);
--padding-lg: var(--spacing-6) var(--spacing-8);
--padding-xl: var(--spacing-8) var(--spacing-10);
--margin-xs: var(--spacing-2);
--margin-sm: var(--spacing-3);
--margin-md: var(--spacing-4);
--margin-lg: var(--spacing-6);
--margin-xl: var(--spacing-8);
/* ─────────────────────────────────────────────────────────────
TRANSICIONES
───────────────────────────────────────────────────────────── */
--transition-base: 0.20s ease-in-out;
--transition-fast: 0.12s ease-in-out;
--transition-slow: 0.30s ease-in-out;
--transition-slower: 0.45s ease-in-out;
--ease-cubic: cubic-bezier(0.4, 0.0, 0.2, 1);
/* ─────────────────────────────────────────────────────────────
Z-INDEX
───────────────────────────────────────────────────────────── */
--z-hide: -1;
--z-base: 0;
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
--z-notification: 9999;
/* ─────────────────────────────────────────────────────────────
ALIASES DE COMPATIBILIDAD
Variables que algunas páginas referencian directamente.
───────────────────────────────────────────────────────────── */
/* Borders — nombres legacy usados en page CSS */
--border-dark: var(--border-color);
--border-light: rgba(0, 0, 0, 0.04);
--border-medium: rgba(0, 0, 0, 0.08);
--border-subtle: rgba(0, 0, 0, 0.03);
--border: var(--border-color);
/* Shadows — shadow-xl no existía en variables.css */
--shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);
/* Transitions */
--transition-speed: var(--transition-base);
/* Backgrounds alternativos */
--bg-elevated: var(--bg-surface-2);
--bg-main: var(--bg-base);
/* Text */
--text-white: var(--text-primary);
/* Primary/secondary aliases (algunas páginas usan --primary en vez de --color-primary) */
--primary: var(--color-lime);
--primary-dark: var(--color-lime-dark);
--primary-light: var(--color-lime-light);
--secondary: var(--color-violet);
--accent: var(--color-lime);
/* ─────────────────────────────────────────────────────────────
COLORES DE MÓDULO — identificación visual consistente
Cada módulo tiene su acento fijo. En light mode se usa la
variante oscura (contraste sobre blanco). En dark se usa la
variante vibrante (OLED-quality sobre negro).
───────────────────────────────────────────────────────────── */
--mod-finanzas: #16A34A; /* verde-700 */
--mod-cortex: #7C3AED; /* violeta-700 */
--mod-debitos: #DC2626; /* rojo-600 */
--mod-servicios: #B45309; /* ámbar-700 — legible sobre blanco */
--mod-ingresos: #16A34A; /* verde-700 */
--mod-ganancias: #2563EB; /* azul-600 */
--mod-deudas: #475569; /* slate-600 */
--mod-creditos: #C2410C; /* naranja-700 */
--mod-mercado: #0E7490; /* cyan-700 */
/* Lime como texto: en light mode es ilegible (1.5:1) → usar violet-dark */
--color-text-accent: var(--color-violet-dark); /* 5.74:1 sobre blanco */
/* ─────────────────────────────────────────────────────────────
COMPONENTES
───────────────────────────────────────────────────────────── */
--btn-height-sm: 32px;
--btn-height-md: 40px;
--btn-height-lg: 48px;
--btn-height-xl: 56px;
--input-height-sm: 32px;
--input-height-md: 40px;
--input-height-lg: 48px;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-2xl: 1400px;
}
/* ═════════════════════════════════════════════════════════════════
ESTILOS BASE GLOBALES
═════════════════════════════════════════════════════════════════ */
/* Transición suave al cambiar de tema */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
transition:
background-color 0.30s ease,
border-color 0.28s ease,
color 0.25s ease,
box-shadow 0.28s ease,
fill 0.25s ease !important;
}
body {
font-family: var(--font-primary);
background-color: var(--bg-base);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: var(--fw-semibold);
color: var(--text-heading);
letter-spacing: var(--ls-tight);
}
code, pre, kbd, samp {
font-family: var(--font-mono);
}
a {
color: var(--color-action);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-violet);
}
/* ═════════════════════════════════════════════════════════════════
BARRA DE ACENTO BICOLOR INSTITUCIONAL
Lime 55% + Violeta 45% — segun Manual de Marca
═════════════════════════════════════════════════════════════════ */
.cortex-brand-bar {
height: 3px;
background: var(--gradient-brand);
width: 100%;
}
.cortex-brand-bar-top {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-brand);
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
/* ═════════════════════════════════════════════════════════════════
UTILIDADES
═════════════════════════════════════════════════════════════════ */
/* Lime como texto: solo readable en dark → en light usa violet-dark */
.text-lime { color: var(--color-text-accent) !important; }
.text-violet { color: var(--color-violet) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-heading { color: var(--text-heading) !important; }
.bg-base { background-color: var(--bg-base) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-surface-2 { background-color: var(--bg-surface-2) !important; }
.glow-lime { box-shadow: var(--shadow-lime) !important; }
.glow-violet { box-shadow: var(--shadow-violet) !important; }
.border-lime { border-color: var(--color-lime-border) !important; }
.border-violet { border-color: var(--color-violet-border) !important; }
/* ── Utilidades de módulo — aplican el acento del módulo en cualquier elemento ──
Uso: o Servicios
El color se adapta automáticamente a light/dark vía CSS variables. */
.mod-finanzas { color: var(--mod-finanzas) !important; }
.mod-cortex { color: var(--mod-cortex) !important; }
.mod-debitos { color: var(--mod-debitos) !important; }
.mod-servicios { color: var(--mod-servicios) !important; }
.mod-ingresos { color: var(--mod-ingresos) !important; }
.mod-ganancias { color: var(--mod-ganancias) !important; }
.mod-deudas { color: var(--mod-deudas) !important; }
.mod-creditos { color: var(--mod-creditos) !important; }
.mod-mercado { color: var(--mod-mercado) !important; }
/* Variante de fondo de módulo (para badges, pills, etc.) */
.mod-bg-finanzas { background: rgba(22, 163, 74, 0.12); color: var(--mod-finanzas) !important; }
.mod-bg-debitos { background: rgba(220, 38, 38, 0.12); color: var(--mod-debitos) !important; }
.mod-bg-servicios { background: rgba(180, 83, 9, 0.12); color: var(--mod-servicios) !important; }
.mod-bg-ingresos { background: rgba(22, 163, 74, 0.12); color: var(--mod-ingresos) !important; }
.mod-bg-ganancias { background: rgba(37, 99, 235, 0.12); color: var(--mod-ganancias) !important; }
.mod-bg-deudas { background: rgba(71, 85, 105, 0.12); color: var(--mod-deudas) !important; }
.mod-bg-creditos { background: rgba(194, 65, 12, 0.12); color: var(--mod-creditos) !important; }
.mod-bg-mercado { background: rgba(14, 116, 144, 0.12); color: var(--mod-mercado) !important; }
.mod-bg-cortex { background: var(--color-violet-subtle); color: var(--mod-cortex) !important; }
.p-xs { padding: var(--padding-xs); }
.p-sm { padding: var(--padding-sm); }
.p-md { padding: var(--padding-md); }
.p-lg { padding: var(--padding-lg); }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.transition-base { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
/* ═════════════════════════════════════════════════════════════════
DARK MODE — [data-theme="dark"] en
Cortex Negro Original · solo sobreescribe fondos, texto y bordes.
Los colores de acento de módulo (lime, violet, verde, rojo, cyan,
naranja, azul, etc.) se conservan idénticos en ambos temas.
═════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
DARK MODE — [data-theme="dark"] en
Paleta fiel al Manual de Marca Cortex Digital 2026.
Tríada obligatoria: #0E0E10 + lime #A3E635 + violet #A855F7.
Surfaces puro-negras (sin tinte azul) → calidad OLED máxima.
═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
/* ── Fondos — Manual: Background #0E0E10 / Surface #1A1A1D / Surface 2 #242428 ── */
--bg-base: #0E0E10;
--bg-primary: #0E0E10;
--bg-surface: #1A1A1D; /* manual: Surface — tarjetas, paneles */
--bg-secondary: #1A1A1D;
--bg-surface-2: #242428; /* manual: Surface 2 — elevado, banners */
--bg-tertiary: #242428;
--bg-card: #1A1A1D;
--bg-card-solid: #1A1A1D;
--bg-hover: #242428;
--bg-elevated: #242428;
--bg-main: #0E0E10;
--bg-border: #2E2E33; /* manual: Border — hairlines */
/* ── Texto — Manual: Text #EDEDED / Muted #9A9AA2 / White #FFFFFF ── */
--text-primary: #EDEDED; /* manual: Text */
--text-heading: #FFFFFF; /* manual: White — máxima jerarquía */
--text-secondary: #B4B4BC; /* entre Text y Muted */
--text-muted: #9A9AA2; /* manual: Muted */
--text-on-lime: #0A0A0A;
--text-on-violet: #FFFFFF;
--text-white: #EDEDED;
/* ── Bordes sólidos — sin alpha para OLED auténtico ── */
--border-color: #2E2E33; /* manual: Border */
--border-soft: rgba(46, 46, 51, 0.60);
--border-strong: #3C3C42;
--border-dark: #2E2E33;
--border-light: rgba(46, 46, 51, 0.40);
--border-medium: #2E2E33;
--border-subtle: rgba(46, 46, 51, 0.30);
--border: #2E2E33;
/* ── Sombras OLED — más profundas para mayor contraste y profundidad ── */
--shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.60);
--shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.70);
--shadow-md: 0 10px 32px rgba(0, 0, 0, 0.80);
--shadow-lg: 0 20px 54px rgba(0, 0, 0, 0.88);
--shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.88);
--shadow-strong: 0 32px 90px rgba(0, 0, 0, 0.95);
/* Glows vibrantes — lime y violet saturados para OLED */
--shadow-lime: 0 0 28px rgba(163, 230, 53, 0.55);
--shadow-lime-lg: 0 0 54px rgba(163, 230, 53, 0.42);
--shadow-violet: 0 0 28px rgba(168, 85, 247, 0.50);
--shadow-violet-lg: 0 0 54px rgba(168, 85, 247, 0.38);
/* ── Gradientes oscuros — sin tinte azul ── */
--gradient-bg: linear-gradient(135deg, #0E0E10 0%, #1A1A1D 100%);
--gradient-surface: linear-gradient(135deg, #1A1A1D 0%, #242428 100%);
--gradient-lime: linear-gradient(135deg, rgba(163, 230, 53, 0.18) 0%, rgba(163, 230, 53, 0.07) 100%);
--gradient-violet: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(168, 85, 247, 0.07) 100%);
--gradient-success: linear-gradient(135deg, rgba(163, 230, 53, 0.18) 0%, rgba(163, 230, 53, 0.07) 100%);
--gradient-danger: linear-gradient(135deg, rgba(220, 38, 38, 0.18) 0%, rgba(220, 38, 38, 0.07) 100%);
--gradient-warning: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.07) 100%);
--gradient-info: linear-gradient(135deg, rgba(168, 85,247, 0.18) 0%, rgba(168, 85,247, 0.07) 100%);
/* ── Acción: violet completo en dark (más visible que violet-dark) ── */
--color-action: var(--color-violet);
--color-action-hover: var(--color-violet-light);
/* ── Lime/violet subtles y bordes — más saturados en OLED ── */
--color-lime-subtle: rgba(163, 230, 53, 0.18);
--color-lime-border: rgba(163, 230, 53, 0.55);
--color-violet-subtle: rgba(168, 85, 247, 0.18);
--color-violet-border: rgba(168, 85, 247, 0.45);
/* ── Colores semánticos — fondos más visibles en oscuro ── */
--color-success-bg: rgba(74, 222, 128, 0.12);
--color-danger-bg: rgba(248, 113, 113, 0.12);
--color-warning-bg: rgba(252, 211, 77, 0.12);
--color-info-bg: rgba(192, 132, 252, 0.12);
/* ── Colores de módulo vibrantes — OLED-quality sobre negro ── */
--mod-finanzas: #4ADE80; /* green-400 */
--mod-cortex: #C084FC; /* violet-400 */
--mod-debitos: #F87171; /* red-400 */
--mod-servicios: #FCD34D; /* yellow-300 */
--mod-ingresos: #4ADE80; /* green-400 */
--mod-ganancias: #93C5FD; /* blue-300 */
--mod-deudas: #94A3B8; /* slate-400 */
--mod-creditos: #FB923C; /* orange-400 */
--mod-mercado: #22D3EE; /* cyan-400 */
/* Lime ES legible en dark → úsalo como text-accent */
--color-text-accent: var(--color-lime);
}