/* Paleta y tipografías tomadas verbatim del artefacto de Roxana, para que el login
     no se sienta una pieza distinta de la aplicación. */
  :root{
    --paper:#F3F1E7; --ink:#232A1F; --ink-60:rgba(35,42,31,0.62); --ink-40:rgba(35,42,31,0.4);
    --green-900:#242F1D; --green-700:#3C4E32; --clay:#B5592E; --clay-600:#9A4A25;
    --line:rgba(35,42,31,0.16); --line-strong:rgba(35,42,31,0.32); --white:#FBFAF5;
    --radius:14px; --shadow:0 1px 2px rgba(35,42,31,.06), 0 8px 24px -12px rgba(35,42,31,.18);
    --font-display:'Fraunces',serif; --font-body:'Inter',-apple-system,sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.5;
       -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
       background-image:radial-gradient(circle at 1px 1px, rgba(35,42,31,.05) 1px, transparent 0);background-size:22px 22px}
  .card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--white);
       border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 32px}
  .logo{display:block;width:180px;height:auto;margin:0 0 22px}
  .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
       color:var(--clay-600);font-weight:500;margin:0 0 10px}
  h1{font-family:var(--font-display);font-weight:600;color:var(--green-900);font-size:30px;margin:0 0 6px;letter-spacing:-.01em}
  p.lead{margin:0 0 24px;color:var(--ink-60);font-size:15px}
  label{display:block;font-size:13px;font-weight:600;margin:0 0 7px}
  input{width:100%;font-family:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--line-strong);
       border-radius:10px;background:var(--paper);color:var(--ink)}
  input:focus{outline:2.5px solid var(--clay);outline-offset:2px;border-color:transparent}
  input#code{font-family:var(--font-mono);font-size:26px;letter-spacing:.3em;text-align:center;padding:14px}
  .btn{appearance:none;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);width:100%;
       font-family:var(--font-body);font-weight:600;font-size:14.5px;padding:13px 22px;border-radius:999px;
       cursor:pointer;margin-top:16px;transition:transform .15s ease,box-shadow .15s ease}
  .btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow)}
  .btn:disabled{opacity:.5;cursor:default}
  .btn.link{background:none;border:none;color:var(--ink-60);font-size:13px;font-weight:500;
       text-decoration:underline;margin-top:14px;padding:6px}
  .msg{margin-top:16px;font-size:13.5px;padding:11px 13px;border-radius:9px;display:none}
  .msg.error{display:block;background:#F1DDD0;color:var(--clay-600);border:1px solid #E3C4B2}
  .msg.ok{display:block;background:#DEE5D4;color:var(--green-700);border:1px solid #C8D4BA}
  .pie{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-40)}
  [hidden]{display:none!important}