:root { color-scheme:light dark; font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif; --canvas:#f4f9ff; --paper:#fff; --ink:#0a1d3d; --soft:#526b84; --line:#d5e3f2; --rust:#1459d9; --rust-soft:#e6f1ff; --focus:#1459d9; --shadow:0 24px 70px rgba(20,89,217,.14); }
@media (prefers-color-scheme:dark) { :root { --canvas:#07152e; --paper:#10294c; --ink:#f4faff; --soft:#c0d3e5; --line:#284769; --rust:#78b9ff; --rust-soft:#143b68; --focus:#67b7ff; --shadow:0 28px 80px rgba(0,0,0,.4); } }
* { box-sizing:border-box; } html,body { min-width:320px; min-height:100%; } body { margin:0; background:radial-gradient(circle at 82% 15%,rgba(40,197,217,.13),transparent 28rem),radial-gradient(circle at 16% 88%,rgba(30,134,245,.12),transparent 24rem),var(--canvas); color:var(--ink); } button,input { font:inherit; } :focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus-visible,select:focus-visible,textarea:focus-visible { outline:none; border-color:var(--focus); box-shadow:inset 0 0 0 1px var(--focus); }
.login-shell { min-height:100dvh; padding:calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); display:grid; place-items:center; }
.login-card { width:min(430px,100%); padding:28px; border:1px solid var(--line); border-radius:24px; background:color-mix(in srgb,var(--paper) 96%,transparent); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.login-brand { min-height:44px; display:grid; justify-items:center; gap:10px; text-align:center; }.brand-full-lockup { width:124px; height:auto; display:block; object-fit:contain; }.login-brand small,.kicker { color:var(--rust); font:800 9px/1.2 "Segoe UI Variable","Segoe UI",Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.login-copy { margin:38px 0 24px; }.login-copy h1 { margin:8px 0 0; font:800 clamp(30px,8vw,42px)/1 "Segoe UI Variable","Segoe UI",Arial,sans-serif; letter-spacing:-.045em; }
form { display:grid; gap:15px; } form>label:not(.checkbox-line) { display:grid; gap:7px; font-size:13px; font-weight:700; }
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--canvas); color:var(--ink); }
.checkbox-line { min-height:44px; display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; }.checkbox-line input[type="checkbox"],.checkbox-line input[type="radio"] { flex:0 0 18px; width:18px; min-width:18px; height:18px; min-height:18px; margin:0; padding:0; accent-color:var(--rust); }
button { min-height:46px; padding:0 15px; border:1px solid var(--line); border-radius:11px; background:var(--canvas); color:var(--ink); cursor:pointer; font-weight:750; } button.primary { border-color:transparent; background:linear-gradient(120deg,#0a1d3d,#1459d9); color:#fff; box-shadow:0 8px 22px rgba(20,89,217,.22); }
.form-error,.setup-state { padding:12px 14px; border-radius:11px; line-height:1.5; font-size:13px; }.form-error { border:1px solid #c97f72; background:#f3deda; color:#812f28; }.setup-state { border:1px solid var(--line); background:var(--canvas); color:var(--soft); }
details { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); } summary { min-height:44px; display:flex; align-items:center; color:var(--soft); cursor:pointer; font-size:12px; font-weight:700; }.recovery-form { margin-top:12px; }
.passkey-separator { margin:18px 0 10px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; color:var(--soft); font-size:11px; }.passkey-separator::before,.passkey-separator::after { content:""; height:1px; background:var(--line); }.passkey-button { width:100%; }.passkey-status { min-height:20px; margin:8px 0 0; color:var(--soft); font-size:12px; text-align:center; }
@media (max-width:480px) { .login-card { padding:22px; border-radius:19px; }.login-copy { margin-top:28px; } }
@media (prefers-color-scheme:dark) { .brand-full-lockup { filter:drop-shadow(0 1px 0 rgba(255,255,255,.16)); } }

/* Refuerzo visual de marca Nexo azul-cian. */
.login-card { border-color:color-mix(in srgb,var(--rust) 18%,var(--line)); }
.login-brand { padding-bottom:14px; border-bottom:1px solid var(--line); }
button.primary { background:linear-gradient(120deg,#0a1d3d 0%,#1459d9 100%); }
@media (prefers-color-scheme:dark) { button.primary { background:linear-gradient(120deg,#0a1d3d 0%,#1459d9 100%); } }