/**
 * EnemLab — Auth Pages CSS (cadastro)
 * Tema claro — brand azul #4257b2
 */

/* ── TOKENS ────────────────────────────────────────────────────────── */
:root {
  --brand:       #4257b2;
  --brand-dark:  #3346a0;
  --brand-light: #eef0fb;
  --accent:      #ffcd1f;
  --success:     #23b26d;
  --success-bg:  rgba(35,178,109,.12);
  --danger:      #e65c41;
  --danger-bg:   rgba(230,92,65,.12);
  --bg:          #f6f7fb;
  --surface:     #ffffff;
  --border:      #e1e4f0;
  --text:        #1a1d3b;
  --text-2:      #4a5270;
  --text-3:      #8b92b0;
  --radius:      12px;
  --radius-lg:   18px;
  --pill:        999px;
  --ff:          'Inter',sans-serif;
  --ff-title:    'Nunito',sans-serif;
  --tr:          .22s ease;
}

/* ── BASE ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body {
  font-family:var(--ff); background:var(--bg); color:var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }

/* ── FUNDO ANIMADO ─────────────────────────────────────────────────── */
.auth-bg {
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.auth-bg::before {
  content:''; position:absolute;
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(66,87,178,.1) 0%, transparent 70%);
  top:-250px; right:-200px;
  animation:auth-blob 16s ease-in-out infinite;
}
.auth-bg::after {
  content:''; position:absolute;
  width:550px; height:550px; border-radius:50%;
  background:radial-gradient(circle, rgba(35,178,109,.07) 0%, transparent 70%);
  bottom:-200px; left:-100px;
  animation:auth-blob 20s ease-in-out infinite reverse;
}
.auth-bg-grid {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(66,87,178,.04) 1px, transparent 1px);
  background-size:32px 32px;
}

/* ── LAYOUT ────────────────────────────────────────────────────────── */
.auth-wrap {
  position:relative; z-index:10; flex:1;
  display:grid; grid-template-columns:1fr 1fr; min-height:100vh;
}

/* ── PAINEL ESQUERDO (BRAND) ───────────────────────────────────────── */
.auth-brand {
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:60px 48px; text-align:center;
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, #1a1d3b 0%, #2d3580 100%);
}
.auth-brand::after {
  content:''; position:absolute; top:10%; right:0; bottom:10%;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.12) 40%, rgba(255,255,255,.12) 60%, transparent);
}

.auth-brand-logo {
  margin-bottom:32px;
  animation:auth-scaleIn .7s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.auth-brand-logo img {
  height:180px; width:auto;
  filter:drop-shadow(0 6px 32px rgba(255,205,31,.4));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
}
.auth-brand-logo:hover img {
  transform:scale(1.06) rotate(-1deg);
  filter:drop-shadow(0 8px 40px rgba(255,205,31,.55));
}

.auth-brand-tagline {
  font-family:var(--ff-title); font-weight:900; font-size:1.8rem;
  color:#fff; line-height:1.2; margin-bottom:12px; letter-spacing:-.025em;
  animation:auth-fadeUp .6s ease .3s both;
}
.auth-brand-tagline span { color:var(--accent); }

.auth-brand-desc {
  font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.7;
  max-width:290px; margin:0 auto 32px;
  animation:auth-fadeUp .6s ease .45s both;
}

.auth-brand-feats { display:flex; flex-direction:column; gap:10px; max-width:280px; width:100%; }
.auth-brand-feat {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:11px 14px; text-align:left;
  transition:background var(--tr), border-color var(--tr), transform var(--tr);
  animation:auth-fadeLeft .55s ease both;
}
.auth-brand-feat:nth-child(1){animation-delay:.5s}
.auth-brand-feat:nth-child(2){animation-delay:.62s}
.auth-brand-feat:nth-child(3){animation-delay:.74s}
.auth-brand-feat:nth-child(4){animation-delay:.86s}
.auth-brand-feat:hover {
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22); transform:translateX(4px);
}
.auth-brand-feat-ico { font-size:1.2rem; flex-shrink:0; }
.auth-brand-feat-txt { font-size:.8rem; color:rgba(255,255,255,.75); line-height:1.4; }
.auth-brand-feat-txt strong { color:#fff; font-weight:700; display:block; margin-bottom:1px; }

/* ── PAINEL DIREITO (FORM) ─────────────────────────────────────────── */
.auth-form-panel {
  background:#fff;
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:60px 52px; overflow-y:auto;
  animation:auth-fadeRight .6s cubic-bezier(.22,.61,.36,1) .05s both;
}
.auth-form-inner { width:100%; max-width:400px; }

/* Mobile logo */
.auth-mobile-logo {
  display:none; justify-content:center; margin-bottom:28px;
}
.auth-mobile-logo img { height:120px; width:auto; }

/* ── TÍTULOS ───────────────────────────────────────────────────────── */
.auth-title {
  font-family:var(--ff-title); font-weight:900; font-size:1.7rem;
  color:var(--text); letter-spacing:-.025em; margin-bottom:6px;
  animation:auth-fadeUp .5s ease .15s both;
}
.auth-sub {
  font-size:.87rem; color:var(--text-2); line-height:1.6; margin-bottom:28px;
  animation:auth-fadeUp .5s ease .25s both;
}
.auth-sub a { color:var(--brand); font-weight:600; }
.auth-sub a:hover { text-decoration:underline; }

/* ── ALERTAS ───────────────────────────────────────────────────────── */
.auth-alert {
  border-radius:var(--radius); padding:12px 16px;
  font-size:.83rem; line-height:1.55; margin-bottom:20px;
}
.auth-alert--error   { background:var(--danger-bg); border:1px solid rgba(230,92,65,.3); color:#c0392b; }
.auth-alert--success { background:var(--success-bg); border:1px solid rgba(35,178,109,.3); color:#166640; }
.auth-alert a { color:inherit; font-weight:700; }

/* ── FORM ──────────────────────────────────────────────────────────── */
.auth-group { margin-bottom:18px; }
.auth-label {
  display:block; font-size:.75rem; font-weight:700; color:var(--text-2);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em;
}
.auth-input-wrap { position:relative; }
.auth-input-ico {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--text-3); pointer-events:none;
  transition:color var(--tr);
}
.auth-input-wrap:focus-within .auth-input-ico { color:var(--brand); }
.auth-input {
  width:100%; background:var(--bg);
  border:1.5px solid var(--border); border-radius:var(--radius);
  padding:13px 14px 13px 42px;
  font-size:1rem; font-family:var(--ff); color:var(--text);
  outline:none;
  transition:border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.auth-input:focus {
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(66,87,178,.18);
  background:#fff;
}
.auth-input::placeholder { color:var(--text-3); }
.auth-input.is-error { border-color:var(--danger); }
.auth-input.is-error:focus { box-shadow:0 0 0 3px rgba(230,92,65,.18); }
.auth-field-error { display:block; font-size:.77rem; color:var(--danger); margin-top:5px; }

/* Toggle olhinho */
.auth-eye-btn {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:4px;
  color:var(--text-3); display:flex; align-items:center; transition:color var(--tr);
}
.auth-eye-btn:hover { color:var(--brand); }

/* ── BOTÕES ────────────────────────────────────────────────────────── */
.auth-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 20px; border-radius:var(--pill);
  font-family:var(--ff); font-weight:800; font-size:1rem;
  border:none; cursor:pointer; line-height:1; position:relative; overflow:hidden;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease;
}
.auth-btn:hover { transform:translateY(-2px); }
.auth-btn:active { transform:scale(.98); }
.auth-btn--primary {
  background:var(--brand);
  color:#fff; box-shadow:0 4px 20px rgba(66,87,178,.4);
}
.auth-btn--primary:hover { background:var(--brand-dark); box-shadow:0 8px 30px rgba(66,87,178,.55); }
.auth-btn--ghost {
  background:transparent; color:var(--text-2);
  border:1.5px solid var(--border); font-weight:600; font-size:.88rem; margin-top:10px;
}
.auth-btn--ghost:hover { border-color:var(--brand); color:var(--brand); }
/* Loading state */
.auth-btn.loading { pointer-events:none; opacity:.8; }
.auth-btn.loading .auth-btn-label { visibility:hidden; }
.auth-btn.loading::before {
  content:''; position:absolute;
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff;
  animation:auth-spin .7s linear infinite;
}

/* ── LINKS ─────────────────────────────────────────────────────────── */
.auth-links { margin-top:20px; text-align:center; font-size:.85rem; color:var(--text-3); }
.auth-links a { color:var(--brand); font-weight:600; }
.auth-links a:hover { text-decoration:underline; }
.auth-divider { height:1px; background:var(--border); margin:20px 0; }
.auth-toggle { display:block; text-align:center; font-size:.82rem; color:var(--text-3); cursor:pointer; margin-top:16px; transition:color var(--tr); }
.auth-toggle:hover { color:var(--brand); }

/* ── KEYFRAMES ─────────────────────────────────────────────────────── */
@keyframes auth-fadeUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes auth-fadeLeft  { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} }
@keyframes auth-fadeRight { from{opacity:0;transform:translateX(28px)} to{opacity:1;transform:none} }
@keyframes auth-scaleIn   { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
@keyframes auth-spin      { to{transform:rotate(360deg)} }
@keyframes auth-blob      { 0%,100%{transform:translate(0,0)} 33%{transform:translate(20px,-28px)} 66%{transform:translate(-18px,20px)} }

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media(max-width:860px){
  .auth-wrap { grid-template-columns:1fr; }
  .auth-brand { display:none; }
  .auth-form-panel { border-left:none; padding:40px 24px; }
  .auth-mobile-logo { display:flex; }
}
@media(max-width:460px){
  .auth-form-panel { padding:32px 16px; }
}