/* ════════════════════════════════════════════════════════════ eInventiva · THEME SYSTEM Réplica fiel del index.css de producción. Tres temas conmutables vía data-theme en . - Dark Premium (default) → Midnight Blue + Electric Blue (Linear/Vercel) - Light Clean → Snow + Indigo eInventiva (Stripe/Notion) - Tech Futurista → Void + Cyan (Supabase/Warp) ════════════════════════════════════════════════════════════ */ /* ── DARK PREMIUM: Midnight Blue + Electric Blue ── */ :root, [data-theme="dark"] { --bg-primary: #0B0F19; --bg-secondary: #111827; --bg-card: rgba(255,255,255,0.04); --bg-card-hover: rgba(255,255,255,0.07); --bg-glass: rgba(11,15,25,0.88); --bg-input: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.07); --border-hover: rgba(255,255,255,0.15); --border-accent: rgba(45,127,249,0.3); --text-primary: #F9FAFB; --text-secondary: #9CA3AF; --text-muted: #6B7280; --text-accent: #60A5FA; --accent: #2D7FF9; --accent-light: #60A5FA; --accent-dark: #1D4ED8; --accent-glow: rgba(45,127,249,0.15); --gradient-hero: linear-gradient(160deg, #0B0F19 0%, #0F1629 45%, #0B1222 100%); --gradient-accent: linear-gradient(135deg, #2D7FF9, #60A5FA); --gradient-cta: linear-gradient(135deg, #1D4ED8 0%, #2D7FF9 50%, #60A5FA 100%); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 8px 30px rgba(0,0,0,0.4); --shadow-glow: 0 0 40px var(--accent-glow); --particle-color: #60A5FA; --particle-alpha: 0.8; --nav-bg: rgba(11,15,25,0.85); color-scheme: dark; } /* ── LIGHT CLEAN: Blanco + Azul eInventiva (#1a4793 / #4287c4 / #7fbde9) ── */ [data-theme="light"] { --logo-filter: brightness(0); --particle-color: #1a4793; --particle-alpha: 1; --bg-primary: #FFFFFF; --bg-secondary: #F5F7FA; --bg-card: #FFFFFF; --bg-card-hover: #FAFBFD; --bg-glass: rgba(255,255,255,0.92); --bg-input: #F5F7FA; --border: #E0E5EC; --border-hover: #C8D0DC; --border-accent: rgba(26,71,147,0.2); --text-primary: #111827; --text-secondary: #374151; --text-muted: #6B7280; --text-accent: #1a4793; --accent: #1a4793; --accent-light: #4287c4; --accent-dark: #0F2D5E; --accent-glow: rgba(26,71,147,0.08); --gradient-hero: linear-gradient(160deg, #FFFFFF 0%, #F5F7FA 50%, #FFFFFF 100%); --gradient-accent: linear-gradient(135deg, #1a4793, #4287c4); --gradient-cta: linear-gradient(135deg, #0F2D5E 0%, #1a4793 50%, #4287c4 100%); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 20px rgba(0,0,0,0.06); --shadow-glow: 0 0 30px rgba(26,71,147,0.08); --nav-bg: rgba(255,255,255,0.95); color-scheme: light; } /* ── TECH FUTURISTA: Void + Cyan (Supabase/Warp) ── */ [data-theme="tech"] { --bg-primary: #030712; --bg-secondary: #0A0F1E; --bg-card: rgba(6,182,212,0.04); --bg-card-hover: rgba(6,182,212,0.08); --bg-glass: rgba(3,7,18,0.9); --bg-input: rgba(6,182,212,0.06); --border: rgba(6,182,212,0.1); --border-hover: rgba(6,182,212,0.25); --border-accent: rgba(34,211,238,0.3); --text-primary: #ECFEFF; --text-secondary: #A5B4FC; --text-muted: #6366F1; --text-accent: #22D3EE; --accent: #06B6D4; --accent-light: #22D3EE; --accent-dark: #0E7490; --accent-glow: rgba(6,182,212,0.15); --gradient-hero: linear-gradient(160deg, #030712 0%, #061220 45%, #030B15 100%); --gradient-accent: linear-gradient(135deg, #06B6D4, #22D3EE); --gradient-cta: linear-gradient(135deg, #0E7490 0%, #06B6D4 50%, #22D3EE 100%); --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 8px 30px rgba(0,0,0,0.5); --shadow-glow: 0 0 40px var(--accent-glow); --particle-color: #22D3EE; --particle-alpha: 0.85; --nav-bg: rgba(3,7,18,0.9); color-scheme: dark; } /* ══════════════════════════════════════════════════════════ PRODUCT COLORS · capa 2 de theming Cada producto del ecosistema mantiene su acento propio. Se aplica con [data-product="chat|planner|hashtask|tickets|atencion"] en cualquier sección — los componentes leen --product como override opcional del --accent global. ══════════════════════════════════════════════════════════ */ :root { --product-chat: #7C3AED; /* LidIA / Agente WhatsApp · morado */ --product-planner: #2563EB; /* Planner · azul */ --product-hashtask: #059669; /* HashTask · verde */ --product-tickets: #D97706; /* Tickets · ámbar */ --product-atencion: #0891B2; /* Atención · cyan */ } /* En Light Clean, todos los productos convergen a la paleta azul de marca */ [data-theme="light"] { --product-chat: #1a4793; --product-planner: #1a6fb5; --product-hashtask: #0e7a5c; --product-tickets: #b86e0a; --product-atencion: #0a7a96; } /* ─── Producto · capa fina sobre el tema ─── Set 1: cada producto define SOLO --accent. Set 2: el atributo [data-product] (cualquier valor) re-deriva TODOS los tokens dependientes del acento usando ese --accent. Esto garantiza que botón, gradientes, glow, borde, hero, badges, shadows y texto-accent queden alineados al producto. */ [data-product="chat"] { --accent: var(--product-chat); } [data-product="planner"] { --accent: var(--product-planner); } [data-product="hashtask"] { --accent: var(--product-hashtask); } [data-product="tickets"] { --accent: var(--product-tickets); } [data-product="atencion"] { --accent: var(--product-atencion); } [data-product] { /* Variantes claras y oscuras derivadas del accent del producto */ --accent-light: color-mix(in oklab, var(--accent) 60%, white); --accent-dark: color-mix(in oklab, var(--accent) 70%, black); /* Auras: opacidad sobre transparente — el tema gobierna el fondo */ --accent-glow: color-mix(in srgb, var(--accent) 15%, transparent); --border-accent: color-mix(in srgb, var(--accent) 32%, transparent); /* Texto-accent: claro para temas oscuros, dark para light */ --text-accent: color-mix(in oklab, var(--accent) 55%, white); /* Gradientes alineados al acento del producto */ --gradient-accent: linear-gradient( 135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, white) ); --gradient-cta: linear-gradient( 135deg, color-mix(in oklab, var(--accent) 70%, black) 0%, var(--accent) 50%, color-mix(in oklab, var(--accent) 60%, white) 100% ); /* Shadow-glow heredea de accent-glow (ya está definido en cada tema como var(--accent-glow)), así que se actualiza automáticamente. */ } /* En light theme, el texto-accent debe ser oscuro para legibilidad */ [data-theme="light"][data-product], [data-theme="light"] [data-product] { --text-accent: var(--accent); --accent-glow: color-mix(in srgb, var(--accent) 8%, transparent); --border-accent: color-mix(in srgb, var(--accent) 22%, transparent); } /* ══════════════════════════════════════════════════════════ GLOBAL BASE ══════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } body { margin: 0; background: var(--bg-primary); color: var(--text-secondary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; transition: background 0.4s ease, color 0.4s ease; } ::selection { background: var(--accent); color: white; } /* ══════════════════════════════════════════════════════════ AOS · scroll animations (réplica del sistema de producción) ══════════════════════════════════════════════════════════ */ .aos { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .aos.visible { opacity: 1; transform: translateY(0); } .aos-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .aos-left.visible { opacity: 1; transform: translateX(0); } .aos-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .aos-right.visible { opacity: 1; transform: translateX(0); } .aos-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .aos-scale.visible { opacity: 1; transform: scale(1); } .stagger > .aos:nth-child(1), .stagger > .aos-left:nth-child(1), .stagger > .aos-right:nth-child(1), .stagger > .aos-scale:nth-child(1) { transition-delay: 0s; } .stagger > .aos:nth-child(2), .stagger > .aos-left:nth-child(2), .stagger > .aos-right:nth-child(2), .stagger > .aos-scale:nth-child(2) { transition-delay: 0.1s; } .stagger > .aos:nth-child(3), .stagger > .aos-left:nth-child(3), .stagger > .aos-right:nth-child(3), .stagger > .aos-scale:nth-child(3) { transition-delay: 0.15s; } .stagger > .aos:nth-child(4) { transition-delay: 0.2s; } .stagger > .aos:nth-child(5) { transition-delay: 0.25s; } .stagger > .aos:nth-child(6) { transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { .aos, .aos-left, .aos-right, .aos-scale { opacity: 1 !important; transform: none !important; transition: none !important; } }