:root { color-scheme: dark; --bg:#070c17; --panel:#0e1729; --linea:#22304f; --texto:#e8edf7; --suave:#93a6c9; --acento:#5eead4; --ok:#4ade80; --error:#fb7185; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--texto); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; display:flex; justify-content:center; align-items:center; padding:32px 16px; position:relative; overflow-x:hidden; }
.fondo { position:fixed; inset:0; z-index:0; background:radial-gradient(60% 50% at 50% 0%, rgba(94,234,212,.13), transparent 70%), radial-gradient(40% 40% at 90% 100%, rgba(99,102,241,.12), transparent 70%); }
.fondo::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent); }
main { position:relative; z-index:1; width:100%; max-width:560px; }
.puerta, .panel { background:linear-gradient(180deg,rgba(20,31,55,.92),rgba(11,18,33,.94)); border:1px solid var(--linea); border-radius:20px; padding:36px 32px; box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); text-align:center; }
.panel { text-align:left; max-width:680px; margin:0 auto; }
.puerta { transition:opacity .4s, transform .4s; }
.puerta.abierta { opacity:0; transform:scale(.97); }
.panel.entra { animation:entra .5s ease both; }
@keyframes entra { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.escudo { width:120px; height:120px; margin:0 auto 14px; display:grid; place-items:center; color:var(--acento); border-radius:50%; background:radial-gradient(circle,rgba(94,234,212,.16),transparent 68%); position:relative; }
.escudo::before, .escudo::after { content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(94,234,212,.35); animation:pulso 3.2s ease-out infinite; }
.escudo::after { animation-delay:1.6s; }
@keyframes pulso { from { transform:scale(.7); opacity:.9; } to { transform:scale(1.25); opacity:0; } }
.etiqueta { margin:0; font:600 .74rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.22em; color:var(--acento); }
.etiqueta.ok { color:var(--ok); display:flex; align-items:center; gap:8px; }
.punto { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }
h1 { margin:10px 0 6px; font-size:1.75rem; letter-spacing:-.01em; }
.sub { margin:0 auto 24px; color:var(--suave); max-width:44ch; }
.panel .sub { margin-left:0; }
.campo { display:flex; align-items:center; gap:10px; background:#0a1222; border:1px solid var(--linea); border-radius:12px; padding:0 14px; color:var(--suave); transition:border-color .2s, box-shadow .2s; }
.campo:focus-within { border-color:var(--acento); box-shadow:0 0 0 3px rgba(94,234,212,.18); color:var(--acento); }
.campo input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--texto); font:inherit; font-size:1.05rem; letter-spacing:.14em; padding:14px 0; }
.campo input::placeholder { letter-spacing:0; color:#5c6f93; }
#entrar { width:100%; margin-top:12px; padding:13px 18px; border:0; border-radius:12px; background:var(--acento); color:#04211e; font:700 1rem system-ui,sans-serif; cursor:pointer; transition:filter .15s, transform .05s; }
#entrar:hover:not(:disabled) { filter:brightness(1.08); }
#entrar:active:not(:disabled) { transform:translateY(1px); }
#entrar:disabled { opacity:.6; cursor:progress; }
button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.mensaje { min-height:1.4em; margin:10px 0 0; color:var(--error); font-size:.92rem; }
.sacude { animation:sacude .35s; }
@keyframes sacude { 20%,60% { transform:translateX(-7px); } 40%,80% { transform:translateX(7px); } }
.sellos { list-style:none; margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--linea); display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; color:var(--suave); font-size:.8rem; }
.sellos li::before { content:"✓"; color:var(--ok); margin-right:6px; }
.tarjeta { background:#0a1222; border:1px solid var(--linea); border-radius:14px; padding:20px 22px; margin-bottom:16px; }
.tarjeta h2 { margin:0 0 4px; font-size:1.15rem; }
.tarjeta p { margin:6px 0; color:var(--suave); }
.tarjeta.pendiente { opacity:.6; border-style:dashed; }
.descargar { margin:12px 0 4px; padding:11px 20px; border:0; border-radius:10px; background:var(--acento); color:#04211e; font:700 .98rem system-ui,sans-serif; cursor:pointer; }
.descargar:disabled { opacity:.6; cursor:progress; }
.barra { display:block; width:100%; height:8px; margin:8px 0 2px; accent-color:var(--acento); }
.estado { min-height:1.3em; font-size:.88rem; }
.sha { font-size:.8rem; }
ol { margin:10px 0 0; padding-left:20px; color:var(--suave); }
li { margin:4px 0; }
code { background:#060b16; border:1px solid var(--linea); border-radius:6px; padding:1px 6px; font-size:.82em; white-space:nowrap; }
.sha code { white-space:normal; word-break:break-all; }
.salir { background:transparent; border:1px solid var(--linea); color:var(--suave); border-radius:10px; padding:8px 16px; cursor:pointer; font:inherit; font-size:.88rem; }
.salir:hover { color:var(--texto); border-color:var(--suave); }
.pie { text-align:center; margin:18px 0 0; font-size:.78rem; color:#5c6f93; }
.solo-lectores { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
@media (max-width:520px) { .puerta, .panel { padding:28px 20px; } h1 { font-size:1.5rem; } }
.volver { display:flex; justify-content:space-between; align-items:center; margin:0 auto 16px; max-width:680px; font-size:.9rem; }
.volver a { display:inline-flex; align-items:center; gap:6px; color:var(--suave); text-decoration:none; padding:6px 10px; border-radius:8px; }
.volver a:hover, .volver a:focus-visible { color:var(--texto); background:rgba(255,255,255,.06); outline:none; }
.pie a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.pie a:hover { color:var(--texto); }
.volver .menu { display:flex; flex-wrap:wrap; gap:2px; justify-content:flex-end; }
@media (max-width:520px) { .volver { flex-direction:column; align-items:flex-start; gap:4px; } .volver .menu { justify-content:flex-start; } }