/* Portal de clientes — capa PROPIA del portal sobre el Wealth Dashboard canon (css/styles.css = design_system_db_clientes/styles.modern.css + compat). Contiene SOLO: (1) la página de login (scoped bajo .portal-login para no contaminar el dashboard), (2) el overlay de carga, (3) los controles que portal-loader inyecta en .nav-r, (4) tabs navegables en móvil (el canon las oculta bajo 920px sin menú alternativo). */ /* ---- 1 · Login (index.html lleva ) ---- */ .portal-login { --bg-0:#0A1212; --bg-1:#0F1919; --bg-2:#141F1F; --bg-el:#1A2B2B; --bd:#1E3333; --bd-2:#2C5B59; --fg-0:#E9FCF8; --fg-1:#9FB3B3; --fg-2:#607D8B; --fg-3:#476978; --teal:#1DC9A4; --neg:#E8627F; --sans:'Inter',-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; margin: 0; background: var(--bg-0); background-image: radial-gradient(ellipse 70% 44% at 50% -7%, rgba(29,201,164,.07), transparent), linear-gradient(180deg, var(--bg-0), var(--bg-1)); background-attachment: fixed; color: var(--fg-0); font-family: var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; } .portal-login * { box-sizing: border-box; } .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; margin: 0; } .login-card { width: 100%; max-width: 380px; background: linear-gradient(160deg, var(--bg-el), var(--bg-2)); border: 1px solid var(--bd); border-radius: 16px; padding: 34px 32px 26px; box-shadow: 0 8px 30px rgba(0,0,0,.30); } .login-card .brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .login-card .brand img { height: 38px; } .login-card .brand h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .login-card .brand .sub { font-family: var(--mono); font-size: 9px; color: var(--fg-3); letter-spacing: .22em; } .login-card label { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); margin: 14px 0 6px; } .login-card input { width: 100%; background: var(--bg-1); border: 1px solid var(--bd); border-radius: 8px; color: var(--fg-0); font-family: var(--sans); font-size: 14px; padding: 11px 13px; outline: none; transition: border-color .15s; } .login-card input:focus { border-color: var(--teal); } .login-card button[type="submit"] { width: 100%; margin-top: 22px; background: var(--teal); color: #06231C; border: none; border-radius: 8px; font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 12px; cursor: pointer; transition: filter .15s; } .login-card button[type="submit"]:hover { filter: brightness(1.08); } .login-card button[type="submit"]:disabled { opacity: .55; cursor: default; } .login-card .error { margin-top: 14px; color: var(--neg); font-size: 12.5px; } .login-card .foot { margin-top: 22px; font-size: 11px; color: var(--fg-3); line-height: 1.6; text-align: center; } /* ---- 2 · Overlay de carga (dashboard, antes del boot) ---- */ .portal-loading { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--bg-0, #0A1212); color: var(--fg-2, #607D8B); font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .14em; } /* ---- 3 · Controles del portal en .nav-r (gramática .btn-ghost del canon) ---- */ .portal-select { appearance: none; -webkit-appearance: none; background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--bd-2); border-radius: var(--r-sm); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; padding: 7px 26px 7px 11px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color .15s, color .15s; } .portal-select:hover { border-color: var(--teal); color: var(--teal); } .nav-r { gap: 8px; } /* ---- 4 · Móvil: tabs visibles y desplazables (el canon las oculta) ---- */ @media (max-width: 920px) { .nav { flex-wrap: wrap; height: auto; padding-top: 9px; } .nav-c { display: flex; order: 10; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 9px; scrollbar-width: none; } .nav-c::-webkit-scrollbar { display: none; } .nav-c .tab { flex-shrink: 0; white-space: nowrap; } .nav-meta { display: none; } }