/* ============================================================
   Portal do Contador — Tela de autenticação (login / recuperação).
   Autônomo: NÃO depende do bundle/app.css; escopo prefixado .auth-*.
   ============================================================ */

:root{
  --auth-bg-deep:#0f172a;
  --auth-bg:#1e3a8a;
  --auth-hero-blue-1:#0f172a;
  --auth-hero-blue-2:#1e3a8a;
  --auth-hero-blue-3:#2563eb;
  --auth-pane-bg:#ffffff;
  --auth-pane-border:#e2e8f0;
  --auth-text-dark:#0f172a;
  --auth-text-muted:#475569;
  --auth-text-subtle:#64748b;
  --auth-input-bg:#ffffff;
  --auth-input-border:#cbd5e1;
  --auth-primary:#2563eb;
  --auth-primary-hover:#1d4ed8;
  --auth-primary-light:#60a5fa;
  --auth-primary-soft:#93c5fd;
  --auth-danger:#dc2626;
  --auth-success:#16a34a;
  --auth-warning:#ca8a04;
}

.auth-body *{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;margin:0;padding:0}
.auth-body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--auth-text-dark);
  background:var(--auth-pane-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;            /* tela de auth não rola (desktop) */
}

.auth-shell{
  display:grid;
  grid-template-columns:58% 42%;
  height:100vh;               /* trava na altura da viewport */
}

/* ===================== ESQUERDA / HERO (AZUL) ===================== */
.auth-hero{
  position:relative;
  overflow:hidden;
  padding:48px 56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(96,165,250,.22), transparent 55%),
    linear-gradient(150deg, var(--auth-hero-blue-1) 0%, var(--auth-hero-blue-2) 45%, var(--auth-hero-blue-3) 100%);
  isolation:isolate;
  color:#ffffff;
}
/* variante "lite" (recuperação de senha — menos firula) */
.auth-hero--lite{justify-content:center;gap:26px}

.auth-hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.auth-hero__bg svg{width:100%;height:100%;display:block}
.auth-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(75% 65% at 40% 40%, transparent 40%, rgba(15,23,42,.45) 100%);
}

.auth-brand img{
  max-width:210px;height:auto;display:block;
  background:#ffffff;
  padding:8px 18px;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.auth-hero--lite .auth-brand img{max-width:184px;padding:6px 14px}

.auth-hero__mid{max-width:560px}
.auth-accent-line{
  width:54px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--auth-primary-light),var(--auth-primary-soft));
  margin-bottom:26px;
  box-shadow:0 0 14px rgba(96,165,250,.5);
}
.auth-tagline{
  font-size:clamp(30px,3.4vw,46px);
  font-weight:900;line-height:1.08;letter-spacing:-.5px;color:#ffffff;
}
.auth-tagline--sm{font-size:clamp(24px,2.6vw,34px)}
.auth-tagline .soft{color:var(--auth-primary-soft);font-weight:700}
.auth-lede{
  margin-top:18px;font-size:17px;color:#dbeafe;max-width:440px;line-height:1.55;
}
.auth-lede--sm{font-size:15.5px;max-width:400px}

.auth-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.auth-chip{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.3px;color:#ffffff;
  padding:6px 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(4px);
}

.auth-hero__foot{display:flex;align-items:center;gap:10px;font-size:13px;color:#bfdbfe}
.auth-pulse{
  width:8px;height:8px;border-radius:50%;background:var(--auth-primary-light);
  box-shadow:0 0 0 0 rgba(96,165,250,.55);animation:auth-beat 2.4s ease-out infinite;
}
@keyframes auth-beat{
  0%{box-shadow:0 0 0 0 rgba(96,165,250,.55)}
  70%{box-shadow:0 0 0 9px rgba(96,165,250,0)}
  100%{box-shadow:0 0 0 0 rgba(96,165,250,0)}
}

/* arcos animados */
.auth-arc{
  fill:none;stroke:var(--auth-primary-light);stroke-width:1.4;stroke-linecap:round;opacity:.65;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:auth-draw 7s ease-in-out infinite;
}
.auth-arc.a2{stroke:var(--auth-primary-soft);opacity:.52;animation-duration:8.5s;animation-delay:1.2s}
.auth-arc.a3{opacity:.42;animation-duration:9.5s;animation-delay:2.4s}
.auth-arc.a4{stroke:var(--auth-primary-soft);opacity:.38;animation-duration:8s;animation-delay:3.1s}
@keyframes auth-draw{
  0%{stroke-dashoffset:var(--len)}
  45%{stroke-dashoffset:0}
  72%{stroke-dashoffset:0;opacity:.6}
  100%{stroke-dashoffset:calc(var(--len) * -1);opacity:.22}
}
.auth-node{
  fill:var(--auth-primary-light);transform-box:fill-box;transform-origin:center;
  animation:auth-nodepulse 3.2s ease-in-out infinite;
}
.auth-node.n2{fill:var(--auth-primary-soft);animation-delay:.8s}
.auth-node.n3{animation-delay:1.6s}
.auth-node.n4{fill:var(--auth-primary-soft);animation-delay:2.2s}
.auth-node-glow{
  fill:var(--auth-primary-light);opacity:.22;transform-box:fill-box;transform-origin:center;
  animation:auth-glow 3.2s ease-in-out infinite;
}
.auth-node-glow.g2{fill:var(--auth-primary-soft);animation-delay:.8s}
.auth-node-glow.g3{animation-delay:1.6s}
.auth-node-glow.g4{fill:var(--auth-primary-soft);animation-delay:2.2s}
@keyframes auth-nodepulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes auth-glow{0%,100%{transform:scale(.7);opacity:.14}50%{transform:scale(1.25);opacity:.35}}

/* ===================== DIREITA / FORMULÁRIO (BRANCA) ===================== */
.auth-pane{
  background:var(--auth-pane-bg);
  border-left:1px solid var(--auth-pane-border);
  display:flex;align-items:center;justify-content:center;padding:48px 40px;
  overflow-y:auto;            /* se o card for + alto que a tela, rola só o painel (não a página) */
}
.auth-card{width:100%;max-width:392px;animation:auth-rise .7s cubic-bezier(.16,.84,.44,1) both}
@keyframes auth-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.auth-title{font-size:27px;font-weight:700;letter-spacing:-.3px;color:var(--auth-text-dark)}
.auth-subtitle{margin-top:8px;color:var(--auth-text-muted);font-size:15px;line-height:1.5}

.auth-form{margin-top:30px}
.auth-field{margin-bottom:18px}
.auth-field label{
  display:block;font-size:13px;font-weight:600;color:#334155;
  margin-bottom:7px;letter-spacing:.2px;
}
.auth-field input{
  width:100%;padding:13px 14px;font-size:15px;font-family:inherit;
  color:var(--auth-text-dark);background:var(--auth-input-bg);border:1px solid var(--auth-input-border);
  border-radius:99px;/* or 9px */ border-radius:9px;outline:none;transition:border-color .18s, box-shadow .18s, background .18s;
}
.auth-field input::placeholder{color:#94a3b8}
.auth-field input:hover{border-color:#94a3b8}
.auth-field input:focus{
  border-color:var(--auth-primary);background:#ffffff;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.auth-error{
  display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--auth-danger);
}
.auth-field input.has-error,
.auth-field input:focus.has-error{
  border-color:var(--auth-danger);box-shadow:0 0 0 3px rgba(220,38,38,.15);
}

.auth-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0 24px;gap:12px}
.auth-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--auth-text-muted);cursor:pointer;user-select:none}
.auth-check input{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:5px;
  border:1px solid #cbd5e1;background:#ffffff;
  display:grid;place-content:center;cursor:pointer;transition:.15s;
}
.auth-check input:hover{border-color:var(--auth-primary)}
.auth-check input:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.auth-check input:checked{background:var(--auth-primary);border-color:var(--auth-primary)}
.auth-check input:checked::after{
  content:"";width:5px;height:9px;border:solid #ffffff;
  border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px);
}

.auth-link{font-size:14px;color:var(--auth-primary);text-decoration:none;font-weight:600;transition:color .15s}
.auth-link:hover{color:var(--auth-primary-hover);text-decoration:underline}
.auth-link:focus-visible{outline:2px solid var(--auth-primary);outline-offset:3px;border-radius:4px}

.auth-btn{
  width:100%;padding:14px;font-size:15px;font-weight:700;letter-spacing:.6px;font-family:inherit;
  color:#ffffff;border:none;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;
  background:linear-gradient(180deg,var(--auth-primary),var(--auth-primary-hover));
  box-shadow:0 6px 18px rgba(37,99,235,.28);
  transition:transform .12s, box-shadow .18s, filter .18s;
}
.auth-btn:hover{filter:brightness(1.06);box-shadow:0 8px 24px rgba(37,99,235,.4)}
.auth-btn:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(37,99,235,.3)}
.auth-btn:focus-visible{outline:2px solid var(--auth-primary);outline-offset:2px}
.auth-btn[disabled]{opacity:.85;cursor:progress;filter:none}

/* estado "carregando" do botao (Alpine: liga no submit, segue ate navegar) */
[x-cloak]{display:none!important}
.auth-btn-load{display:inline-flex;align-items:center;gap:9px;color:#ffffff}
.auth-spinner{
  width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  border:2.5px solid rgba(255,255,255,.3);border-top-color:#ffffff;
  animation:auth-spin .6s linear infinite;
}
@keyframes auth-spin{to{transform:rotate(360deg)}}

.auth-foot{
  margin-top:26px;text-align:center;font-size:12.5px;color:var(--auth-text-subtle);
  border-top:1px solid var(--auth-pane-border);padding-top:18px;
}
.auth-foot strong{color:var(--auth-text-dark);font-weight:600}

/* alertas / mensagens de sessão */
.auth-alert{
  border-radius:9px;padding:12px 14px;font-size:14px;line-height:1.45;margin-bottom:18px;
  border:1px solid transparent;
}
.auth-alert a{font-weight:700;text-decoration:underline}
.auth-alert--green{color:#15803d;background:#f0fdf4;border-color:#bbf7d0}
.auth-alert--yellow{color:#a16207;background:#fefce8;border-color:#fef08a}
.auth-alert--red{color:#b91c1c;background:#fef2f2;border-color:#fecaca}
.auth-alert--red a,.auth-alert--green a,.auth-alert--yellow a{color:inherit}

/* ===================== RESPONSIVO ===================== */
@media (max-width:920px){
  .auth-body{overflow:auto}                       /* mobile empilhado: a página pode rolar */
  .auth-shell{grid-template-columns:1fr;height:auto;min-height:100vh}
  .auth-pane{overflow-y:visible}
  .auth-hero{padding:30px 26px 34px;min-height:auto;gap:22px;justify-content:flex-start}
  .auth-hero__foot{display:none}
  .auth-hero__mid .auth-lede{display:none}
  .auth-tagline{font-size:26px}
  .auth-brand img{width:172px}
  .auth-chips{margin-top:18px}
  .auth-pane{border-left:none;border-top:1px solid var(--auth-pane-border);padding:40px 22px 48px}
}
@media (max-width:480px){
  .auth-hero{padding:26px 20px}
  .auth-chip{font-size:11px;padding:5px 10px}
  .auth-row{flex-wrap:wrap}
}

@media (prefers-reduced-motion: reduce){
  .auth-arc{stroke-dashoffset:0;animation:none;opacity:.4}
  .auth-node,.auth-node-glow,.auth-pulse,.auth-card{animation:none}
  .auth-node-glow{opacity:.18}
  .auth-spinner{display:none}                 /* sem rotacao: fica so o texto "Entrando…" */
}