/* ══════════════════════════════════════════════════════════════════════
   login.css — estilos de las páginas servidas por server.js (login, 2FA,
   login de Mi Espacio, setup 2FA), antes en bloques <style> inline.
   Migración CSP 2026-07-08. Cada página va scoped por su clase de <body>
   para conservar EXACTAMENTE los valores que tenía (difieren entre sí).
   ══════════════════════════════════════════════════════════════════════ */

/* ── pg-login ─────────────────────────────── */
    body.pg-login {
      display:flex; align-items:center; justify-content:center; min-height:100vh;
      background:
        radial-gradient(circle at 50% -10%, rgba(245,152,0,.10), transparent 55%),
        var(--mrj-cream);
    }
    body.pg-login .login-box {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
      padding:44px 40px; width:100%; max-width:380px; box-shadow:var(--shadow-lg);
      animation:loginIn-pg-login .35s var(--ease);
    }
    @keyframes loginIn-pg-login{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    @media (prefers-reduced-motion:reduce){body.pg-login .login-box{animation:none}}
    body.pg-login .login-logo { text-align:center; margin-bottom:22px; }
    body.pg-login .login-logo img { height:46px; width:auto; }
    body.pg-login .login-sub { text-align:center; font-family:var(--font-heading); font-size:20px; font-weight:800; color:var(--mrj-brown); margin-bottom:32px; }
    body.pg-login .login-enter {
      width:100%; justify-content:center; height:46px; font-size:var(--fs-md);
      box-shadow:var(--shadow-2); transition:transform var(--t-fast),box-shadow var(--t-fast);
    }
    body.pg-login .login-enter:hover { transform:translateY(-1px); box-shadow:var(--shadow-3); }
    body.pg-login .login-aviso-row { display:flex; justify-content:center; margin-top:14px; }
    /* Botón "Avisar" — pequeño y discreto a propósito (Joni: "no pongas nada
       más, solo un botón pequeño al lado de entrar"), fuera del <form> de
       login para no interferir con su submit. */
    body.pg-login .login-aviso-btn {
      font-size:11.5px; color:var(--muted); background:none; border:none;
      cursor:pointer; padding:4px 8px; text-decoration:underline; text-underline-offset:2px;
    }
    body.pg-login .login-aviso-btn:hover { color:var(--mrj-brown); }
    body.pg-login .login-aviso-btn:disabled { cursor:default; text-decoration:none; opacity:.7; }

/* ── pg-2fa ─────────────────────────────── */
    body.pg-2fa { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--mrj-cream); }
    body.pg-2fa .login-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:40px; width:100%; max-width:380px; box-shadow:var(--shadow-lg); }
    body.pg-2fa .login-logo { text-align:center; margin-bottom:20px; }
    body.pg-2fa .login-logo img { height:46px; width:auto; }
    body.pg-2fa .login-sub { text-align:center; font-family:var(--font-heading); font-size:20px; font-weight:800; color:var(--mrj-brown); margin-bottom:8px; }
    body.pg-2fa .login-hint { text-align:center; font-size:13px; color:var(--muted); margin-bottom:28px; }

/* ── pg-me-login ─────────────────────────────── */
    body.pg-me-login { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--mrj-cream); padding:20px; }
    body.pg-me-login .login-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:40px; width:100%; max-width:380px; box-shadow:var(--shadow-lg); }
    body.pg-me-login .login-logo { text-align:center; margin-bottom:20px; }
    body.pg-me-login .login-logo img { height:46px; width:auto; }
    body.pg-me-login .login-sub { text-align:center; font-family:var(--font-heading); font-size:20px; font-weight:800; color:var(--mrj-brown); margin-bottom:8px; }
    body.pg-me-login .login-hint { text-align:center; font-size:13px; color:var(--muted); margin-bottom:28px; }

/* ── pg-2fa-setup ─────────────────────────────── */
    body.pg-2fa-setup { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--mrj-cream); padding:24px; }
    body.pg-2fa-setup .login-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:40px; width:100%; max-width:440px; box-shadow:var(--shadow-lg); }
    body.pg-2fa-setup .login-logo { text-align:center; margin-bottom:20px; }
    body.pg-2fa-setup .login-logo img { height:46px; width:auto; }
    body.pg-2fa-setup .login-sub { text-align:center; font-family:var(--font-heading); font-size:20px; font-weight:800; color:var(--mrj-brown); margin-bottom:8px; }
    body.pg-2fa-setup .login-hint { text-align:center; font-size:13px; color:var(--muted); margin-bottom:24px; line-height:1.5; }
    body.pg-2fa-setup .qr-wrap { text-align:center; margin-bottom:20px; }
    body.pg-2fa-setup .qr-wrap img { width:220px; height:220px; border:1px solid var(--border); border-radius:var(--r-md); padding:12px; background:#fff; }
    body.pg-2fa-setup .manual-key { text-align:center; font-family:monospace; font-size:14px; letter-spacing:.05em; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:10px; margin-bottom:24px; word-break:break-all; }
    body.pg-2fa-setup .backup-codes { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0 20px; }
    body.pg-2fa-setup .backup-codes div { font-family:monospace; font-size:15px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:8px; text-align:center; }

/* ── página 404 (server.js) ─────────────────────────────── */
.pagina-404 { font-family: sans-serif; text-align: center; padding: 60px; color: #3a1f0d; }
.enlace-404 { color: #F59800; }
