:root{--bg:#f5f6f3;--surface:#fff;--fg:#1c2421;--muted:#5d6a64;--line:#d9dfdb;--accent:#1f6b57;--on:#fff;--bad:#a23a2b}
@media (prefers-color-scheme:dark){:root{--bg:#141a18;--surface:#1c2421;--fg:#e7ece9;--muted:#9aa8a1;--line:#2f3a36;--accent:#6cc3a6;--on:#10201b;--bad:#ef8a7a}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;padding:16px}
.caja{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:14px}
.marca{margin:0;font-weight:700;letter-spacing:.12em;color:var(--accent);font-size:.85rem}
h1{margin:0;font-size:1.6rem}
.aviso,.ayuda{margin:0;color:var(--muted);font-size:.9rem}
form{display:grid;gap:12px}
label{display:grid;gap:4px;font-size:.85rem;color:var(--muted)}
input{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
button{font:600 1rem system-ui,sans-serif;border-radius:8px;padding:11px 14px;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--on)}
button.sec{background:transparent;color:var(--accent)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hola{margin:0;font-size:1.2rem;font-weight:600}
.estado{margin:0;min-height:1.4em;font-size:.9rem;color:var(--muted)}
.estado.error{color:var(--bad)}
[hidden]{display:none!important}