/* ========================================================== Brexek Digital — variables y piezas compartidas para páginas con claro/oscuro (hoy: / y /login/). Requiere theme.js para poner data-theme en . Incluir DESPUÉS de style.css. ========================================================== */ html[data-theme="dark"] { /* El hero de marca (login y la franja de arriba de home) se queda navy/lime tal cual — a Héctor le gusta esa parte. */ --page-1: #14224a; --page-2: var(--navy); --page-3: var(--ink); /* El resto del producto (dashboards) ahora vive en un gris cenizo: navy pasa a ser color secundario/de acento, no el fondo. */ --surface-bg: #1C1D1F; /* La tarjeta del login ya casi no lleva azul — cenizo con un toque de brillo, el navy queda solo como borde/kicker mínimo. */ --card-bg: rgba(45, 47, 51, 0.55); --card-border: rgba(197,241,53,0.16); --card-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) inset; --title-color: var(--paper); --subtitle-color: rgba(238,240,230,0.62); --kicker-color: var(--lime); --back-color: rgba(238,240,230,0.45); --toggle-bg: rgba(255,255,255,0.08); --toggle-border: rgba(255,255,255,0.16); --toggle-icon: var(--paper); --bokeh-opacity: 0.6; --bokeh-1: rgba(197,241,53,0.55); --bokeh-2: rgba(197,241,53,0.32); --bokeh-3: rgba(238,240,230,0.22); /* Bokeh más discreto para los dashboards (fondo cenizo fijo detrás de todo, no la franja de hero). Por defecto lima (marca Brexek) — pero una vez hay sesión, applyClientBrand() en app.js sobreescribe --client-dash-dark-1/2/3 con el secondary_color_hex del cliente desde login/index.html en adelante, así el bokeh del dashboard usa el color de marca de cada cliente en vez del lima genérico. Las páginas públicas/antes de iniciar sesión (login, home, lender) no usan esta variable — se quedan con la marca de Brexek porque ahí todavía no se sabe de qué cliente se trata. */ --bokeh-dash-opacity: 0.4; --bokeh-dash-1: var(--client-dash-dark-1, rgba(197,241,53,0.35)); --bokeh-dash-2: var(--client-dash-dark-2, rgba(197,241,53,0.18)); --bokeh-dash-3: rgba(255,255,255,0.08); /* Degradado exclusivo del login (oscuro): solo gris cenizo, de claro a casi negro — sin azul. El hero de home se queda como estaba. */ --login-page-1: #3d3f43; --login-page-2: #232427; --login-page-3: #121316; --module-bg: #29292c; --module-border: rgba(255,255,255,0.08); --module-heading: var(--paper); --module-desc: rgba(238,240,230,0.55); --module-tag-bg: rgba(197,241,53,0.12); --module-tag-color: #cdf17a; --footer-color: rgba(238,240,230,0.35); /* Nav lateral */ --sidebar-bg: #17181a; --sidebar-border: rgba(255,255,255,0.07); --sidebar-text: rgba(238,240,230,0.55); --sidebar-text-active: var(--paper); --sidebar-active-bg: rgba(197,241,53,0.14); --sidebar-hover-bg: rgba(255,255,255,0.05); } html[data-theme="light"] { --page-1: #ffffff; --page-2: #f7f8f1; --page-3: var(--paper); --surface-bg: #F3F3F0; --card-bg: rgba(255,255,255,0.62); --card-border: rgba(13,26,58,0.10); --card-shadow: 0 24px 60px rgba(13,26,58,0.12), 0 0 0 1px rgba(255,255,255,0.6) inset; --title-color: var(--navy); --subtitle-color: rgba(35,40,58,0.65); --kicker-color: #5C6B0E; --back-color: #8a8a80; --toggle-bg: rgba(13,26,58,0.06); --toggle-border: rgba(13,26,58,0.14); --toggle-icon: var(--navy); --bokeh-opacity: 0.9; --bokeh-1: rgba(30,88,224,0.9); --bokeh-2: rgba(30,88,224,0.65); --bokeh-3: rgba(13,26,58,0.35); /* Igual que en modo oscuro: una vez hay sesión, applyClientBrand() sobreescribe --client-dash-light-1/2/3 con el primary_color_hex del cliente, así el bokeh claro del dashboard usa su color de marca en vez del lima/navy genérico de Brexek. */ --bokeh-dash-opacity: 0.6; --bokeh-dash-1: var(--client-dash-light-1, rgba(197,241,53,0.55)); --bokeh-dash-2: var(--client-dash-light-2, rgba(13,26,58,0.12)); --bokeh-dash-3: var(--client-dash-light-3, rgba(197,241,53,0.3)); /* El login claro se queda con el degradado blanco/paper de siempre. */ --login-page-1: #ffffff; --login-page-2: #f7f8f1; --login-page-3: var(--paper); --module-bg: #ffffff; --module-border: #E7E7E2; --module-heading: var(--navy); --module-desc: #777; --module-tag-bg: #EEF0E6; --module-tag-color: #5C6B0E; --footer-color: #aaa; /* Nav lateral */ --sidebar-bg: #ffffff; --sidebar-border: #E7E7E2; --sidebar-text: #6E6E68; --sidebar-text-active: var(--navy); --sidebar-active-bg: rgba(197,241,53,0.35); --sidebar-hover-bg: rgba(13,26,58,0.04); } /* ---------- Toggle de tema (sol/luna) ---------- */ .theme-toggle { width: 38px; height: 38px; border-radius: 999px; background: var(--toggle-bg); border: 1px solid var(--toggle-border); color: var(--toggle-icon); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; flex: none; } .theme-toggle:hover { border-color: var(--lime); } .theme-toggle svg { width: 18px; height: 18px; } html[data-theme="dark"] .icon-sun { display: none; } html[data-theme="light"] .icon-moon { display: none; } /* Logos que cambian según el tema del fondo donde están */ html[data-theme="dark"] .logo-light, html[data-theme="light"] .logo-dark { display: none; } /* ---------- Switch de idioma (EN/ES) ---------- */ .lang-switch { display: flex; gap: 2px; background: var(--toggle-bg); border: 1px solid var(--toggle-border); border-radius: 999px; padding: 3px; flex: none; } .lang-pill { font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px; border: none; background: transparent; color: var(--toggle-icon); opacity: 0.55; cursor: pointer; line-height: 1.4; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .lang-pill:hover { opacity: 0.9; } .lang-pill.active { background: var(--lime); color: var(--navy); opacity: 1; } /* ---------- Bokeh de fondo: círculos suaves flotando ---------- */ .bokeh-field { position: absolute; inset: 0; overflow: hidden; z-index: 0; } /* Variante para los dashboards: fija al viewport completo (no a un contenedor .hero relativo) y detrás de todo el app-shell, con colores/opacidad propios (--bokeh-dash-*) más discretos. */ .bokeh-field.bokeh-field-fixed { position: fixed; pointer-events: none; } .bokeh-field-fixed .bokeh { opacity: var(--bokeh-dash-opacity, 0.4); } .bokeh-field-fixed .bokeh:nth-child(1), .bokeh-field-fixed .bokeh:nth-child(4) { background: radial-gradient(circle, var(--bokeh-dash-1) 0%, transparent 70%); } .bokeh-field-fixed .bokeh:nth-child(2), .bokeh-field-fixed .bokeh:nth-child(5) { background: radial-gradient(circle, var(--bokeh-dash-2) 0%, transparent 70%); } .bokeh-field-fixed .bokeh:nth-child(3), .bokeh-field-fixed .bokeh:nth-child(6) { background: radial-gradient(circle, var(--bokeh-dash-3) 0%, transparent 70%); } .bokeh { position: absolute; border-radius: 50%; filter: blur(40px); opacity: var(--bokeh-opacity, 0.6); will-change: transform; animation: drift linear infinite; } .bokeh:nth-child(1) { width: 260px; height: 260px; left: 8%; top: 68%; background: radial-gradient(circle, var(--bokeh-1) 0%, transparent 70%); animation-duration: 26s; animation-delay: -2s; } .bokeh:nth-child(2) { width: 160px; height: 160px; left: 78%; top: 12%; background: radial-gradient(circle, var(--bokeh-2) 0%, transparent 70%); animation-duration: 20s; animation-delay: -8s; } .bokeh:nth-child(3) { width: 340px; height: 340px; left: 62%; top: 58%; background: radial-gradient(circle, var(--bokeh-3) 0%, transparent 70%); animation-duration: 32s; animation-delay: -14s; } .bokeh:nth-child(4) { width: 120px; height: 120px; left: 20%; top: 14%; background: radial-gradient(circle, var(--bokeh-3) 0%, transparent 70%); animation-duration: 18s; animation-delay: -5s; } .bokeh:nth-child(5) { width: 200px; height: 200px; left: 46%; top: 82%; background: radial-gradient(circle, var(--bokeh-2) 0%, transparent 70%); animation-duration: 24s; animation-delay: -11s; } .bokeh:nth-child(6) { width: 90px; height: 90px; left: 90%; top: 76%; background: radial-gradient(circle, var(--bokeh-3) 0%, transparent 70%); animation-duration: 16s; animation-delay: -3s; } @keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(-16px, -26px, 0) scale(1.06); } 50% { transform: translate3d(10px, -46px, 0) scale(0.96); } 75% { transform: translate3d(22px, -14px, 0) scale(1.04); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .bokeh { animation: none; } }