@font-face { font-family: Archivo; src: url('../expo/assets/fonts/archivo-var-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../expo/assets/fonts/jetbrainsmono-var-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root { --paper:#fcfaf4; --ink:#15120b; --ink-60:rgba(21,18,11,.60); --ink-20:rgba(21,18,11,.20); --ink-10:rgba(21,18,11,.10); --amber:#fccf55; --orange:#faaa21; --cream:#ffefae; --peri:#ccccff; --sans:Archivo,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; }
* { box-sizing:border-box; }
body.auth-shell { min-height:100vh; margin:0; padding:32px 20px; display:grid; place-items:center; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.5; position:relative; }
.auth-grid { position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(var(--ink-10) 1px,transparent 1px),linear-gradient(90deg,var(--ink-10) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 78%); }
.auth-halo { position:fixed; top:-240px; right:-170px; width:min(66vw,760px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 46% 56%,var(--cream),rgba(255,239,174,.38) 29%,rgba(204,204,255,.28) 50%,transparent 70%); filter:blur(7px); pointer-events:none; }
.card { width:min(100%,480px); position:relative; z-index:1; padding:clamp(28px,5vw,46px); background:rgba(255,255,255,.86); border:1px solid var(--ink-10); border-radius:24px; box-shadow:0 2px 4px rgba(21,18,11,.05),0 32px 70px rgba(21,18,11,.12); backdrop-filter:blur(16px); }
.auth-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:20px; font-weight:680; letter-spacing:-.04em; text-decoration:none; }
.brand-mark { width:27px; height:27px; display:inline-flex; align-items:center; justify-content:center; gap:3px; border-radius:50%; background:var(--ink); }
.brand-mark i { display:block; width:3px; height:11px; border-radius:9px; background:var(--amber); transform:rotate(25deg); }
.brand-mark i:nth-child(2) { height:16px; background:var(--orange); }.brand-mark i:nth-child(3) { height:8px; background:var(--cream); }
.auth-state { display:inline-flex; align-items:center; gap:7px; color:var(--ink-60); font:500 9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.auth-state i { width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(250,170,33,.18); }.auth-rule { height:1px; margin:24px 0 28px; background:linear-gradient(90deg,var(--orange),var(--ink-10) 40%,transparent); }
h1 { margin:0; font-size:clamp(2rem,7vw,2.8rem); line-height:.96; letter-spacing:-.06em; font-weight:650; font-variation-settings:'wdth' 84; }.muted,small { color:var(--ink-60); }.muted { margin:12px 0 0; font-size:1rem; }
form { display:grid; gap:17px; margin-top:30px; }label { display:grid; gap:8px; color:var(--ink); font-size:13px; font-weight:620; letter-spacing:-.01em; }
input { width:100%; min-height:48px; padding:11px 13px; color:var(--ink); background:rgba(252,250,244,.78); border:1px solid var(--ink-20); border-radius:10px; font:450 15px var(--sans); transition:border-color .2s,box-shadow .2s,background .2s; }input:focus { outline:0; border-color:var(--orange); background:#fff; box-shadow:0 0 0 4px rgba(250,170,33,.16); }input::placeholder { color:rgba(21,18,11,.38); }
.password-wrap { display:flex; }.password-wrap input { border-radius:10px 0 0 10px; }.icon-button { width:49px; color:var(--ink-60); background:rgba(252,250,244,.78); border:1px solid var(--ink-20); border-left:0; border-radius:0 10px 10px 0; cursor:pointer; transition:color .2s,background .2s; }.icon-button:hover { color:var(--ink); background:var(--cream); }
.primary { min-height:50px; padding:0 22px; border:0; border-radius:99px; color:var(--ink); background:var(--amber); box-shadow:0 2px 3px rgba(21,18,11,.12),0 10px 24px rgba(250,170,33,.22); cursor:pointer; font:620 14px var(--sans); transition:transform .2s,box-shadow .2s,background .2s; }.primary:hover { background:var(--orange); box-shadow:0 12px 28px rgba(250,170,33,.3); transform:translateY(-2px); }.primary:active { transform:scale(.98); }
.check { display:flex; align-items:center; gap:9px; color:var(--ink-60); font-weight:450; }.check input { width:16px; min-height:16px; margin:0; accent-color:var(--orange); }.alert { margin:20px 0 0; padding:13px 15px; border-radius:10px; font-size:14px; }.alert ul { margin:0; padding-left:18px; }.error { color:#7c250f; border:1px solid rgba(250,170,33,.45); background:rgba(250,170,33,.13); }.success { color:#3d4b17; border:1px solid rgba(116,143,45,.32); background:rgba(201,222,134,.30); }
.strength { height:5px; overflow:hidden; border-radius:99px; background:var(--ink-10); margin-top:-5px; }.strength div { width:0; height:100%; background:var(--orange); transition:width .2s,background .2s; }.requirements { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; margin:-6px 0 0; padding:0; color:var(--ink-60); font-size:11px; list-style:none; }.requirements li::before { content:'— '; color:var(--orange); }.requirements .ok { color:#4d6415; }.requirements .ok::before { content:'✓ '; }
a { color:var(--ink); text-decoration:underline; text-decoration-color:rgba(250,170,33,.8); text-underline-offset:4px; }a:hover { color:#805204; }p { margin:18px 0 0; }.captcha-error { margin:0; color:#a52d17; font:12px var(--mono); }.cf-turnstile { min-height:65px; }
@media (max-width:500px) { body.auth-shell { padding:16px; align-items:start; }.card { margin-top:20px; padding:25px 21px; border-radius:18px; }.auth-state { display:none; }.requirements { grid-template-columns:1fr; } }

/* Selector de idioma de la cabecera del acceso */
.idioma-sel { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--ink-10); border-radius:9px; background:rgba(252,250,244,.78); }
.idioma-sel a { padding:5px 8px; border-radius:6px; color:var(--ink-60); font:500 10px/1 var(--mono); letter-spacing:.1em; text-decoration:none; transition:color .2s,background .2s; }
.idioma-sel a:hover { color:var(--ink); }
.idioma-sel a.activo { background:var(--amber); color:var(--ink); }
.idioma-sel a:focus-visible { outline:2px solid var(--orange); outline-offset:1px; }
@media (max-width:420px) { .auth-state { display:none; } }