:root{--primary:#0a1f44;--accent:#f59e0b;--ink:#0c1424;--muted:#53627a;--line:#c9d6ee;--font-d:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--font-b:'Instrument Sans','Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-b);color:var(--ink);background:#f6f8fc;-webkit-font-smoothing:antialiased}
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(320px,44%) 1fr}
.auth-side{background:#0d2a63;color:#fff;padding:2.2rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;isolation:isolate}
.auth-side::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px}
.auth-brand{display:flex;gap:.8rem;align-items:center;color:#fff;text-decoration:none;font:700 1.15rem var(--font-d);letter-spacing:-.01em;max-width:30ch}
.mark{width:48px;height:48px;border-radius:10px 10px 24px 24px;background:var(--primary);color:var(--accent);display:grid;place-items:center;font:800 1.15rem var(--font-d);box-shadow:inset 0 0 0 2px var(--accent);flex:none}
.auth-copy h1{font:700 clamp(2rem,4vw,3rem)/1.05 var(--font-d);letter-spacing:-.03em;margin:0 0 .6rem}
.auth-copy p{color:#c4d3f0;max-width:38ch;font-size:1.05rem;line-height:1.6;margin:0}
.auth-side small{color:#97abd6}
.auth-main{display:grid;place-items:center;padding:2rem}
.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem;box-shadow:0 30px 60px -40px rgba(10,31,68,.5)}
.auth-card h2{font:700 1.7rem var(--font-d);color:var(--primary);margin:0 0 .3rem;letter-spacing:-.02em}
.sub{color:var(--muted);margin:0 0 1.4rem;font-size:.97rem;line-height:1.5}
label{display:block;font-weight:600;font-size:.9rem;margin:1rem 0 .3rem}
input{width:100%;font:inherit;padding:.75rem .9rem;border:1.5px solid #b8c6e2;border-radius:10px;background:#fff;color:var(--ink)}
input:focus{outline:0;border-color:#1d4ed8;box-shadow:0 0 0 4px rgba(29,78,216,.15)}
.pw{position:relative}.pw input{padding-right:3rem}
.pw-t{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);cursor:pointer;padding:.5rem}
.btn{width:100%;margin-top:1.4rem;background:var(--primary);color:#fff;border:0;border-radius:10px;padding:.9rem;font:600 1rem var(--font-b);cursor:pointer;transition:background .15s}
.btn:hover{background:#12306a}
.links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0;font-size:.9rem}
.links a{color:#1d4ed8;text-decoration:none}.links a:hover{text-decoration:underline}
.msg{padding:.7rem .9rem;border-radius:10px;font-size:.92rem;font-weight:500;margin-bottom:1rem}
.msg-ok{background:#dcfce7;color:#14532d}.msg-err{background:#fee2e2;color:#7f1d1d}.msg-info{background:#dbeafe;color:#1e3a8a}
.demo{margin-top:1.2rem;border-top:1px dashed var(--line);padding-top:1rem;font-size:.85rem;color:var(--muted)}
.demo summary{cursor:pointer;font-weight:600;color:var(--primary)}.demo ul{padding-left:1.1rem;margin:.4rem 0 0}.demo code{background:#eef2fb;padding:.1rem .4rem;border-radius:5px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:820px){.auth{grid-template-columns:1fr}.auth-side{padding:1.4rem;gap:1.2rem}.auth-copy p,.auth-side small{display:none}.auth-copy h1{font-size:1.8rem;margin:0}}
summary{min-height:40px;display:flex;align-items:center;cursor:pointer}
small{font-size:max(.83em,12px)}
.legal-login{font-size:.8rem;line-height:1.5;opacity:.8;margin:1rem 0 0}
@media (max-width:640px){.auth-side small a{display:inline-block;min-height:44px;line-height:44px}.legal-login a{display:inline-block;padding:.45rem 0}}

.links a{display:inline-block;padding:.65rem .3rem}

/* Siglas de 3 o 4 letras en el logo provisional */
.mark[data-n="3"],.brand-mark[data-n="3"]{font-size:.8em}.mark[data-n="4"],.brand-mark[data-n="4"]{font-size:.62em;letter-spacing:-.03em}