/* ============================================================
   Verseun · login y registro (estilo beebep)
   ============================================================ */
:root{
  --cream:#FBF9F4; --bg:#F2EEE6; --olive:#E0E4D3; --olive-soft:#ECEFE2;
  --line:#E2E5D4; --line-warm:#E8E3D8; --ink:#141312; --ink-soft:#3A3833;
  --muted:#8A8A85; --accent:#FFC83D; --green:#5FA463; --red:#D6584E; --blue:#6E94C4;
  --font:"Segoe UI",Tahoma,system-ui,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font); color:var(--ink-soft);
  background:radial-gradient(900px 600px at 50% -10%, #f7f3ea, transparent),
             linear-gradient(160deg,#efeadf,#e7e2d6);
  display:grid; place-items:center; min-height:100vh; padding:24px;
  -webkit-font-smoothing:antialiased;
}
.auth{ width:min(400px,100%); background:var(--cream); border:1px solid var(--line-warm);
  border-radius:32px; box-shadow:0 16px 50px rgba(40,38,30,.16); overflow:hidden; }
.auth .head{ padding:30px 32px 0; text-align:center; }
.auth-logo{ max-width:180px; max-height:64px; margin:0 auto; display:block; }
.auth .brand{ display:inline-flex; align-items:center; gap:8px; font-size:26px; font-weight:800; color:var(--ink); }
.auth .brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); margin-top:8px; }
.auth .sub{ color:var(--muted); font-size:13px; margin:6px 0 0; }
.auth form{ padding:22px 32px 30px; }
.auth label{ display:block; font-size:13px; font-weight:600; margin:14px 0 6px; color:var(--ink-soft); }
.auth input{ width:100%; padding:12px 15px; border:1px solid var(--line); border-radius:14px;
  background:#fff; font-size:14px; color:var(--ink-soft); }
.auth input:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(110,148,196,.18); }
.auth .btn{ width:100%; margin-top:20px; background:var(--ink); color:var(--cream);
  padding:12px; border:0; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; }
.auth .btn:hover{ filter:brightness(1.15); }
.auth .alt{ text-align:center; margin-top:16px; font-size:13px; color:var(--muted); }
.auth .alt a{ color:var(--blue); font-weight:600; text-decoration:none; }
.auth .alert{ background:#fbe9e7; color:#a33; border:1px solid #f3cfca;
  padding:10px 13px; border-radius:13px; font-size:13px; margin-bottom:6px; }
.auth .flash{ background:var(--olive-soft); color:var(--ink-soft); border:1px solid var(--line);
  padding:10px 13px; border-radius:13px; font-size:13px; margin-bottom:6px; }
.auth .captcha{ display:flex; align-items:center; gap:10px; }
.auth .captcha .q{ background:var(--olive); padding:11px 14px; border-radius:13px; font-weight:700;
  color:var(--ink); font-size:15px; white-space:nowrap; }
.auth .captcha input{ width:90px; }
.hp{ position:absolute; left:-9999px; opacity:0; }   /* honeypot */

.auth .remember{ display:flex; align-items:center; gap:8px; margin-top:14px;
  font-size:13px; color:var(--ink-soft); font-weight:500; cursor:pointer; }
.auth .remember input{ width:auto; margin:0; cursor:pointer; }

/* campo de usuario con sufijo @verseun.com */
.userfield{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:13px;
  background:#fff; overflow:hidden; }
.userfield input{ border:0 !important; border-radius:0 !important; flex:1; box-shadow:none !important; }
.userfield .userdomain{ display:flex; align-items:center; padding:0 14px; background:var(--olive-soft);
  color:var(--ink-soft); font-weight:600; font-size:13.5px; white-space:nowrap; border-left:1px solid var(--line); }
.userfield:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(110,148,196,.18); }

/* ---------- canvas de animación de fondo del login ---------- */
#loginAnim{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
body .auth{ position:relative; z-index:2; }
/* si hay imagen de fondo Y animación, la animación va sobre la capa oscura */
body.has-bg #loginAnim{ z-index:1; }