/* ════════════════════════════════════════════════════════════════════════════
ORBIX — SISTEMA DE TEMAS (fuente única de verdad de color + tipografía)
════════════════════════════════════════════════════════════════════════════
Este archivo RIGE la identidad visual de TODO el ecosistema ORBIX:
Landing, Asistente (Kyro), ERP (Nexus), Axis, Tienda y Automatizaciones.
CÓMO SE USA EN CUALQUIER INTERFAZ (regla oficial — ver skill orbix-design-system):
(aplica el tema guardado sin flash)
…y luego SIEMPRE consumir color/tipografía por token: var(--bg), var(--text),
var(--accent), var(--font-sans)… NUNCA hex sueltos. Así, cuando el usuario
cambia de paleta en su cuenta ORBIX, cambia toda la plataforma de golpe.
6 PALETAS (el usuario elige en su cuenta; se recuerda por dispositivo y cuenta):
── Oscuras ── orbix-noche (default) · medianoche · carbon
── Claras ── orbix-dia · perla · niebla
El tema activo se marca en . Los selectores
[data-orbix-theme] tienen mayor especificidad que :root, así que ganan siempre
sin depender del orden de carga.
════════════════════════════════════════════════════════════════════════════ */
/* ---- Tokens COMPARTIDOS por todas las paletas (no cambian con el tema) ---- */
:root{
/* Tipografía ORBIX — Inter en todo el ecosistema */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: var(--font-sans);
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Escala de radios y espaciado (mismos gestos que la landing) */
--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* Marca fija (colores de acento se re-declaran por paleta, esto es fallback) */
--brand-cyan: #22d3ee;
--brand-purple: #a855f7;
/* ── ESCALA CANÓNICA DEL LOGIN (2026-07-29) ────────────────────────────
Encargo de Sebas: "todos los logins tienen que tener una cierta
estructura y un cierto tamaño para que el salto entre diferentes cosas
no sea tan abrupto"; y "no están completamente en la pantalla, se ven
muy alejados".
MEDIDO antes de tocar: los 5 productos NO compartían proporción.
Panel/Tienda/Axis → flex 2.2 : 0.8 = 73/27, tarjeta 360px
Asistente (Kyro) → flex 1.7 : 1 = 63/37, tarjeta PEGADA al borde
derecho (align-items:flex-end)
Nexus ERP → flex 1 : 480px FIJOS → la proporción cambiaba con
el ancho de pantalla (67/33 a
1440px, 75/25 a 1920px)
De ahí el "salto" al pasar de un producto a otro y la sensación de
formulario chico y lejano.
Ahora los tres consumen ESTOS tokens → una sola fuente de verdad.
No son color, así que viven en el bloque compartido (no por paleta). */
--login-hero-flex: 1.3; /* héroe : formulario = 1.3 : 1 ≈ 57/43 */
--login-form-flex: 1;
--login-form-min: 400px; /* el formulario nunca queda estrecho */
--login-form-max: 640px; /* ni absurdamente ancho en monitores grandes */
--login-card-w: 420px; /* ancho de la tarjeta, IGUAL en los 5 */
--login-card-pad: 32px 28px 26px;
--login-split-bp: 960px; /* debajo de esto: una sola columna */
}
/* ════════════════ PALETAS OSCURAS ════════════════ */
/* ── orbix-noche (DEFAULT — idéntica a la landing aprobada) ── */
:root[data-orbix-theme="orbix-noche"],
:root:not([data-orbix-theme]){
color-scheme: dark;
--logo-mark:url(/orbix/orbix-mark-dark.png);
--bg:#020b18; --bg-alt:#0a0f1c; --card:#0d1424; --card-2:#10182b; --card-border:#1b2438;
--text:#eef2f8; --text-dim:#aab6cc; --text-dimmer:#8b97b0;
--cyan:#22d3ee; --cyan-2:#06b6d4; --purple:#a855f7; --pink:#ec4899; --green:#34d399; --orange:#fbbf24;
--accent:#22d3ee; --accent-2:#06b6d4; --on-accent:#031014;
--header-bg:rgba(2,11,24,0.82); --menu-bg:rgba(6,9,17,0.97); --stat-bg:rgba(255,255,255,0.015);
--fondo-dots:rgba(238,242,248,0.045);
--fondo-image:
radial-gradient(1200px 700px at 72% -10%, rgba(34,211,238,0.10), transparent 60%),
radial-gradient(900px 600px at 8% 20%, rgba(168,85,247,0.08), transparent 60%),
radial-gradient(1000px 800px at 50% 115%, rgba(6,182,212,0.07), transparent 60%),
linear-gradient(135deg,#020b18 0%,#0a1628 45%,#050d1f 100%);
--sphere:radial-gradient(circle at 32% 28%, #7dd3fc, #22d3ee 30%, #7c3aed 68%, #1e0a3c 100%);
--ring:rgba(139,150,172,0.25);
--shadow-card:0 6px 20px rgba(0,0,0,0.35);
--shadow-pop:0 14px 34px rgba(0,0,0,0.35);
/* Login split (ver /orbix/orbix-login.css) */
--login-hero-bg:
radial-gradient(820px 520px at 76% 38%, rgba(168,85,247,0.17), transparent 62%),
radial-gradient(680px 500px at 8% 94%, rgba(168,85,247,0.12), transparent 55%),
radial-gradient(560px 420px at 30% 4%, rgba(34,211,238,0.10), transparent 60%),
linear-gradient(160deg,#020b18 0%,#0a1628 55%,#020b18 100%);
--login-hero-ink:#eef2f8; --login-hero-ink-dim:rgba(238,242,248,0.58);
--login-hero-glass:rgba(255,255,255,0.035); --login-hero-line:rgba(255,255,255,0.09);
--login-star:rgba(255,255,255,0.45);
--login-form-bg:color-mix(in srgb, var(--bg) 86%, var(--purple) 5%);
}
/* ── medianoche (violeta profundo, casi negro) ── */
:root[data-orbix-theme="medianoche"]{
color-scheme: dark;
--logo-mark:url(/orbix/orbix-mark-dark.png);
--bg:#0b0714; --bg-alt:#120a20; --card:#160e28; --card-2:#1c1333; --card-border:#2a1c47;
--text:#f1ecfb; --text-dim:#bcaed8; --text-dimmer:#988cc0;
--cyan:#38bdf8; --cyan-2:#0ea5e9; --purple:#a855f7; --pink:#ec4899; --green:#34d399; --orange:#fbbf24;
--accent:#a855f7; --accent-2:#c084fc; --on-accent:#12061f;
--header-bg:rgba(11,7,20,0.84); --menu-bg:rgba(11,7,20,0.97); --stat-bg:rgba(255,255,255,0.02);
--fondo-dots:rgba(240,236,251,0.05);
--fondo-image:
radial-gradient(1200px 700px at 72% -10%, rgba(168,85,247,0.16), transparent 60%),
radial-gradient(900px 600px at 8% 20%, rgba(236,72,153,0.09), transparent 60%),
radial-gradient(1000px 800px at 50% 115%, rgba(56,189,248,0.07), transparent 60%),
linear-gradient(135deg,#0b0714 0%,#160a2b 45%,#0a0518 100%);
--sphere:radial-gradient(circle at 32% 28%, #d8b4fe, #a855f7 32%, #6d28d9 68%, #2a0a4a 100%);
--ring:rgba(168,150,200,0.28);
--shadow-card:0 6px 20px rgba(0,0,0,0.4);
--shadow-pop:0 14px 34px rgba(30,0,60,0.4);
--login-hero-bg:
radial-gradient(820px 520px at 76% 38%, rgba(168,85,247,0.24), transparent 62%),
radial-gradient(680px 500px at 8% 94%, rgba(236,72,153,0.12), transparent 55%),
radial-gradient(560px 420px at 30% 4%, rgba(56,189,248,0.09), transparent 60%),
linear-gradient(160deg,#0b0714 0%,#160a2b 55%,#0a0518 100%);
--login-hero-ink:#f1ecfb; --login-hero-ink-dim:rgba(241,236,251,0.58);
--login-hero-glass:rgba(255,255,255,0.04); --login-hero-line:rgba(255,255,255,0.10);
--login-star:rgba(255,255,255,0.45);
--login-form-bg:color-mix(in srgb, var(--bg) 86%, var(--purple) 6%);
}
/* ── carbon (grafito neutro, sin tinte azul, acento verde-agua) ── */
:root[data-orbix-theme="carbon"]{
color-scheme: dark;
--logo-mark:url(/orbix/orbix-mark-dark.png);
--bg:#0f1115; --bg-alt:#14171d; --card:#171a21; --card-2:#1d212a; --card-border:#2a2f3a;
--text:#e8ebf0; --text-dim:#adb5c4; --text-dimmer:#8c94a4;
--cyan:#2dd4bf; --cyan-2:#14b8a6; --purple:#818cf8; --pink:#f472b6; --green:#34d399; --orange:#fbbf24;
--accent:#2dd4bf; --accent-2:#14b8a6; --on-accent:#05130f;
--header-bg:rgba(15,17,21,0.85); --menu-bg:rgba(15,17,21,0.97); --stat-bg:rgba(255,255,255,0.015);
--fondo-dots:rgba(232,235,240,0.04);
--fondo-image:
radial-gradient(1200px 700px at 72% -10%, rgba(45,212,191,0.08), transparent 60%),
radial-gradient(900px 600px at 8% 20%, rgba(129,140,248,0.06), transparent 60%),
linear-gradient(135deg,#0f1115 0%,#161a22 45%,#0d0f13 100%);
--sphere:radial-gradient(circle at 32% 28%, #99f6e4, #2dd4bf 32%, #0f766e 70%, #0a1f1c 100%);
--ring:rgba(150,158,172,0.22);
--shadow-card:0 6px 20px rgba(0,0,0,0.4);
--shadow-pop:0 14px 34px rgba(0,0,0,0.4);
--login-hero-bg:
radial-gradient(820px 520px at 76% 38%, rgba(45,212,191,0.12), transparent 62%),
radial-gradient(680px 500px at 8% 94%, rgba(129,140,248,0.10), transparent 55%),
linear-gradient(160deg,#0f1115 0%,#161a22 55%,#0d0f13 100%);
--login-hero-ink:#e8ebf0; --login-hero-ink-dim:rgba(232,235,240,0.58);
--login-hero-glass:rgba(255,255,255,0.035); --login-hero-line:rgba(255,255,255,0.09);
--login-star:rgba(255,255,255,0.4);
--login-form-bg:color-mix(in srgb, var(--bg) 90%, var(--accent) 4%);
}
/* ════════════════ PALETAS CLARAS ════════════════ */
/* ── orbix-dia (blanco luminoso, acento cian ORBIX) ── */
:root[data-orbix-theme="orbix-dia"]{
color-scheme: light;
--logo-mark:url(/orbix/orbix-mark.png);
--bg:#ebf1f8; --bg-alt:#e3ebf5; --card:#ffffff; --card-2:#f4f8fc; --card-border:#c5d2e2;
--text:#0d1b2a; --text-dim:#3a4a5e; --text-dimmer:#566579;
--cyan:#0891b2; --cyan-2:#0e7490; --purple:#7c3aed; --pink:#db2777; --green:#059669; --orange:#d97706;
--accent:#0891b2; --accent-2:#06b6d4; --on-accent:#ffffff;
--header-bg:rgba(246,249,252,0.82); --menu-bg:rgba(255,255,255,0.97); --stat-bg:rgba(13,27,42,0.02);
--fondo-dots:rgba(13,27,42,0.05);
--fondo-image:
radial-gradient(1200px 700px at 72% -10%, rgba(8,145,178,0.10), transparent 60%),
radial-gradient(900px 600px at 8% 20%, rgba(124,58,237,0.07), transparent 60%),
radial-gradient(1000px 800px at 50% 115%, rgba(6,182,212,0.06), transparent 60%),
linear-gradient(135deg,#f6f9fc 0%,#eaf2fb 45%,#f4f8fd 100%);
--sphere:radial-gradient(circle at 32% 28%, #a5f3fc, #22d3ee 30%, #7c3aed 68%, #4c1d95 100%);
--ring:rgba(60,90,120,0.18);
--shadow-card:0 2px 8px rgba(13,27,42,0.10);
--shadow-pop:0 16px 38px rgba(13,27,42,0.12);
--login-hero-bg:
radial-gradient(820px 520px at 76% 38%, rgba(124,58,237,0.14), transparent 62%),
radial-gradient(680px 500px at 8% 94%, rgba(8,145,178,0.12), transparent 55%),
radial-gradient(560px 420px at 30% 4%, rgba(34,211,238,0.10), transparent 60%),
linear-gradient(160deg,#eaf2fb 0%,#f6f9fc 55%,#e7eef8 100%);
--login-hero-ink:#0d1b2a; --login-hero-ink-dim:rgba(13,27,42,0.62);
--login-hero-glass:rgba(255,255,255,0.62); --login-hero-line:rgba(13,27,42,0.10);
--login-star:rgba(13,27,42,0.22);
--login-form-bg:color-mix(in srgb, var(--bg) 92%, var(--purple) 4%);
}
/* ── perla (marfil cálido, acento ciruela) ── */
:root[data-orbix-theme="perla"]{
color-scheme: light;
--logo-mark:url(/orbix/orbix-mark.png);
--bg:#f3eee5; --bg-alt:#ebe4d8; --card:#fffdfa; --card-2:#f9f4ec; --card-border:#d6c9b6;
--text:#2a2320; --text-dim:#574d46; --text-dimmer:#766a60;
--cyan:#0e7490; --cyan-2:#0891b2; --purple:#9333ea; --pink:#be185d; --green:#047857; --orange:#c2660c;
--accent:#9333ea; --accent-2:#a855f7; --on-accent:#ffffff;
--header-bg:rgba(250,247,243,0.84); --menu-bg:rgba(255,253,250,0.97); --stat-bg:rgba(42,35,32,0.02);
--fondo-dots:rgba(42,35,32,0.045);
--fondo-image:
radial-gradient(1200px 700px at 72% -10%, rgba(147,51,234,0.08), transparent 60%),
radial-gradient(900px 600px at 8% 20%, rgba(194,102,12,0.07), transparent 60%),
linear-gradient(135deg,#faf7f3 0%,#f3eae0 45%,#faf6f0 100%);
--sphere:radial-gradient(circle at 32% 28%, #e9d5ff, #a855f7 32%, #7e22ce 68%, #3b0764 100%);
--ring:rgba(120,100,90,0.2);
--shadow-card:0 2px 8px rgba(42,35,32,0.10);
--shadow-pop:0 16px 38px rgba(42,35,32,0.12);
--login-hero-bg:
radial-gradient(820px 520px at 76% 38%, rgba(147,51,234,0.13), transparent 62%),
radial-gradient(680px 500px at 8% 94%, rgba(194,102,12,0.10), transparent 55%),
linear-gradient(160deg,#f3eae0 0%,#faf7f3 55%,#f1e7db 100%);
--login-hero-ink:#2a2320; --login-hero-ink-dim:rgba(42,35,32,0.62);
--login-hero-glass:rgba(255,255,255,0.6); --login-hero-line:rgba(42,35,32,0.10);
--login-star:rgba(42,35,32,0.2);
--login-form-bg:color-mix(in srgb, var(--bg) 92%, var(--purple) 4%);
}
/* ── niebla (gris frío suave, acento verde-pizarra) ── */
:root[data-orbix-theme="niebla"]{
color-scheme: light;
--logo-mark:url(/orbix/orbix-mark.png);
--bg:#e4e8ef; --bg-alt:#dae0e9; --card:#fdfefe; --card-2:#f2f5f9; --card-border:#bdc7d5;
--text:#1e2733; --text-dim:#444e5b; --text-dimmer:#5f6a78;
--cyan:#0f766e; --cyan-2:#0d9488; --purple:#6d28d9; --pink:#be185d; --green:#047857; --orange:#c2660c;
--accent:#0f766e; --accent-2:#14b8a6; --on-accent:#ffffff;
--header-bg:rgba(236,239,243,0.84); --menu-bg:rgba(248,250,252,0.97); --stat-bg:rgba(30,39,51,0.02);
--fondo-dots:rgba(30,39,51,0.05);
--fondo-image:
radial-gradient(1200px 700px at 72% -10%, rgba(15,118,110,0.08), transparent 60%),
radial-gradient(900px 600px at 8% 20%, rgba(109,40,217,0.05), transparent 60%),
linear-gradient(135deg,#eceff3 0%,#dfe6ee 45%,#eef1f5 100%);
--sphere:radial-gradient(circle at 32% 28%, #99f6e4, #14b8a6 32%, #0f766e 70%, #134e4a 100%);
--ring:rgba(70,85,105,0.2);
--shadow-card:0 2px 8px rgba(30,39,51,0.11);
--shadow-pop:0 16px 38px rgba(30,39,51,0.13);
--login-hero-bg:
radial-gradient(820px 520px at 76% 38%, rgba(15,118,110,0.13), transparent 62%),
radial-gradient(680px 500px at 8% 94%, rgba(109,40,217,0.08), transparent 55%),
linear-gradient(160deg,#dfe6ee 0%,#eceff3 55%,#dbe3ec 100%);
--login-hero-ink:#1e2733; --login-hero-ink-dim:rgba(30,39,51,0.62);
--login-hero-glass:rgba(255,255,255,0.6); --login-hero-line:rgba(30,39,51,0.10);
--login-star:rgba(30,39,51,0.2);
--login-form-bg:color-mix(in srgb, var(--bg) 92%, var(--accent) 4%);
}
/* ════════════════════════════════════════════════════════════════════════════
SELECTOR VISUAL DE PALETAS — compartido por TODO el ecosistema (2026-07-29)
════════════════════════════════════════════════════════════════════════════
Lo pinta window.OrbixTheme.togglePicker(boton) de orbix-theme.js, y usa las
MISMAS clases .tp-* que el componente React de la landing → un solo look en
los 5 productos. Antes el Panel mostraba una lista con un puntico y Axis no
mostraba nada (ciclaba la paleta a ciegas).
Todo por token: se ve bien en las 6 paletas, oscuras y claras.
════════════════════════════════════════════════════════════════════════════ */
.tp-pop-flotante{
position:fixed; z-index:10000; display:none;
background:var(--menu-bg, var(--card)); border:1px solid var(--card-border);
border-radius:var(--r-lg); box-shadow:var(--shadow-pop, var(--shadow-card));
padding:14px; width:268px; max-width:calc(100vw - 24px);
font-family:var(--font-sans); color:var(--text);
max-height:calc(100vh - 90px); overflow:auto;
}
.tp-pop-flotante.abierto{ display:block }
.tp-pop-flotante .tp-pop-head{ margin-bottom:12px }
.tp-pop-flotante .tp-pop-head b{ display:block; font-size:13px; font-weight:700; color:var(--text) }
.tp-pop-flotante .tp-pop-head span{ display:block; font-size:11px; color:var(--text-dimmer); margin-top:2px }
.tp-pop-flotante .tp-grupo{ margin-bottom:12px }
.tp-pop-flotante .tp-grupo:last-child{ margin-bottom:0 }
.tp-pop-flotante .tp-grupo-tit{
font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:var(--text-dimmer); margin-bottom:7px;
}
.tp-pop-flotante .tp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px }
.tp-pop-flotante .tp-card{
display:flex; flex-direction:column; align-items:center; gap:5px;
padding:7px 5px; cursor:pointer; background:none;
border:1px solid transparent; border-radius:var(--r-md); font-family:inherit;
transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.tp-pop-flotante .tp-card:hover{ background:var(--card-2); border-color:var(--card-border) }
.tp-pop-flotante .tp-card.activo{
border-color:var(--accent);
background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.tp-pop-flotante .tp-swatch{
position:relative; width:100%; height:30px; border-radius:7px;
border:1px solid color-mix(in srgb, var(--text) 18%, transparent);
display:flex; align-items:center; justify-content:center; gap:4px;
}
.tp-pop-flotante .tp-pip{ width:8px; height:8px; border-radius:50% }
.tp-pop-flotante .tp-nom{
font-size:10.5px; font-weight:600; line-height:1.1; text-align:center; color:var(--text-dim);
}
.tp-pop-flotante .tp-card.activo .tp-nom{ color:var(--text) }
.tp-pop-flotante .tp-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }