/* ═══════════════════════════════════════════════════════════════════════════
quorbex — login compartido · hoja única de estilos (LOGIN-COMPARTIDO-001)
ORIGEN: el login de quorbex 360 (templates/home.html) tal como quedó con
LOGIN-UX-CSRF-001 (PRs #551/#552, 2026-09-24): la referencia que eligió el
founder. Las reglas son las mismas; lo que cambia respecto del inline de 360:
1. el acento no está escrito a mano: sale de variables por producto
(html[data-product="..."]) con los colores UI de BRAND_GUIDELINES §5;
2. la tipografía se auto-aloja (fonts/, SEC-WEB-1), nada de Google Fonts;
3. tres huecos opcionales que 360 no tenía y otros sí: .btn-sec (passkey
de host), .alt (enlace secundario) y .forgot (go/host).
CÓMO SE USA (dos líneas en la plantilla del producto; el resto es el
esqueleto HTML del README):
y en el : data-product="360|host|bill|go|crm|build|people|ecom".
DUEÑO: auditor de web y servidor (DEC-048). Cambios por PR en quorbex-server,
con el arnés (shared/login/arnes/) en verde y VV del founder. Servido por nginx
en /shared/login/ con Cache-Control: no-cache (ETag): no hace falta ?v=.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Tipografía auto-alojada (misma declaración que landing/fonts, SEC-WEB-1) ── */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/varela-round-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/varela-round-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ── Acento por producto: BRAND_GUIDELINES §5 (UI = --accent, Claro = --accent-2).
--btn-fg: color del texto del botón. Oscuro sobre acentos claros (como 360);
blanco sobre los acentos oscuros (host, crm, ecom), donde #0b0f1a no llega
al contraste mínimo. Si falta data-product, se ve como 360. ───────────── */
:root,
html[data-product="360"] { --bg:#0b0f1a; --accent:#2EC4B6; --accent-rgb:46,196,182; --accent-2:#5cd4c9; --btn-fg:#0b0f1a; }
html[data-product="host"] { --accent:#6b3df0; --accent-rgb:107,61,240; --accent-2:#7c5cff; --btn-fg:#ffffff; }
html[data-product="bill"] { --accent:#22c55e; --accent-rgb:34,197,94; --accent-2:#22c55e; --btn-fg:#0b0f1a; }
html[data-product="go"] { --accent:#06b6d4; --accent-rgb:6,182,212; --accent-2:#22d3ee; --btn-fg:#0b0f1a; }
html[data-product="crm"] { --accent:#ef4444; --accent-rgb:239,68,68; --accent-2:#dc2626; --btn-fg:#ffffff; }
html[data-product="build"] { --accent:#ffb020; --accent-rgb:255,176,32; --accent-2:#ffb020; --btn-fg:#0b0f1a; }
html[data-product="people"] { --accent:#facc15; --accent-rgb:250,204,21; --accent-2:#fde047; --btn-fg:#0b0f1a; }
html[data-product="ecom"] { --accent:#688391; --accent-rgb:104,131,145; --accent-2:#87a1ab; --btn-fg:#ffffff; }
:root { --accent-glow: rgba(var(--accent-rgb), .25); }
/* ── A partir de acá: el CSS de 360, con el acento por variable ─────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Varela Round',sans-serif; background:var(--bg); color:#e5e7eb; height:100vh;height:100dvh; overflow:hidden; -webkit-font-smoothing:antialiased; }
.bg { position:fixed; inset:0; z-index:0; overflow:hidden; }
.bg .o { position:absolute; border-radius:50%; filter:blur(120px); animation:of 20s infinite ease-in-out; }
.bg .o1 { width:600px; height:600px; background:rgba(var(--accent-rgb),.12); top:-15%; right:-10%; }
.bg .o2 { width:500px; height:500px; background:rgba(var(--accent-rgb),.09); bottom:-20%; left:-15%; animation-delay:-7s; }
.bg .o3 { width:400px; height:400px; background:rgba(var(--accent-rgb),.14); top:35%; left:45%; animation-delay:-14s; }
@keyframes of { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-20px,15px) scale(.95)} }
/* Red de partículas: la MISMA de quorbex.com (landing/pricing/360). Canvas fijo
detrás de todo, sin interceptar clics. El color lo toma el JS de --accent-rgb. */
#net { position:fixed; inset:0; z-index:0; pointer-events:none; }
.page { position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:24px; }
.card {
width:100%; max-width:420px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.07);
border-radius:24px;
padding:44px 36px 36px;
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
box-shadow:0 24px 80px rgba(0,0,0,.4);
animation:ci .6s ease;
}
@keyframes ci { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.brand { text-align:center; margin-bottom:32px; }
.brand img { height:40px; margin-bottom:10px; }
.brand .sub { font-size:.8rem; color:#9ca3af; }
/* Mensajes del servidor (django.contrib.messages o {{ error }}): .err (error, de 360) y .ok (éxito/info,
pedido de go y crm, 2026-10-09). Van entre .brand y el