/*
  Garpi — telas de autenticação (login, esqueci senha, redefinir senha).
  Usa os tokens de assets/css/garpi-tokens.css — não redefinir cor/raio aqui.
*/
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--g-page);
  font-family:var(--g-sans);
  color:var(--g-ink);
}

/* ===== Loader + revelar só após carregar tudo ===== */
body.booting .garpi-wrap{visibility:hidden;opacity:0}
body.page-ready .garpi-wrap{visibility:visible;opacity:1;transition:opacity .2s ease}
#boot-loader{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--g-page);color:var(--g-ink-soft);z-index:2147483646;
  font:14px/1.2 var(--g-sans);letter-spacing:.02em;
}
#boot-loader.hidden{display:none}

/* ===== Layout =====
   Um único formato em todas as telas de autenticação: marca solta sobre o
   fundo (sem caixa/badge ao redor do logo) + um card. Nada de painel escuro
   dividido — isso é o "template de login SaaS" que estávamos tentando evitar. */
.garpi-wrap{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px clamp(16px,3vw,56px) 32px;
}
.garpi-stack{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center}
.garpi-card{
  width:100%;background:var(--g-surface);border:1px solid var(--g-line);
  border-radius:14px;box-shadow:var(--g-shadow);overflow:hidden;
}
.garpi-form{padding:40px 36px}

/* Marca: logo solto (sem fundo/caixa) + assinatura tipográfica */
.garpi-mast{text-align:center;margin-bottom:16px}
.garpi-mast-logo{width:56px;height:56px;object-fit:contain;display:block;margin:0 auto}
.garpi-mast.is-full .garpi-mast-logo{width:100px;height:100px}
.garpi-wordmark{font-family:var(--g-display);font-weight:700;font-size:21px;color:var(--g-ink);margin-top:10px}
.garpi-motto{
  margin-top:7px;font-family:var(--g-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g-ink-soft);
}

@media (max-width:576px){
  .garpi-wrap{padding:clamp(16px,4vw,28px)}
  .garpi-card{border-radius:16px}
  .garpi-form{padding:28px 22px}
}

/* ===== Tipografia ===== */
.garpi-eyebrow{
  font-family:var(--g-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g-ink-soft);font-weight:500;margin:0 0 14px;
}
.garpi-form h1{
  font-family:var(--g-display);font-weight:700;font-size:24px;margin:0 0 26px;color:var(--g-ink);
}

/* ===== Formulário ===== */
.garpi-field{margin-bottom:16px}
.garpi-field label{display:block;font-size:12.5px;font-weight:600;color:var(--g-ink-2);margin-bottom:6px}
.garpi-field input{
  width:100%;font-family:var(--g-sans);font-size:13.5px;padding:8px 12px;
  border-radius:var(--g-radius-md);border:1px solid var(--g-line-strong);
  background:var(--g-surface);color:var(--g-ink);
}
.garpi-field input:focus{outline:none;border-color:var(--g-ink-2);box-shadow:0 0 0 3px rgba(32,28,20,.08)}
.garpi-field input::placeholder{color:var(--g-ink-soft)}
.garpi-hint{font-size:12px;color:var(--g-ink-soft);margin-top:6px}

.garpi-btn{
  width:100%;font-family:var(--g-sans);font-weight:600;font-size:13.5px;
  border-radius:var(--g-radius-md);padding:9px 18px;border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s ease,background .12s ease;
}
.garpi-btn:active{transform:translateY(1px)}
.garpi-btn-primary{background:var(--g-accent);color:var(--g-accent-ink)}
.garpi-btn-primary:hover{background:var(--g-accent-hover)}
.garpi-btn-secondary{background:var(--g-surface-2);border-color:var(--g-line-strong);color:var(--g-ink)}
.garpi-btn-secondary:hover{background:var(--g-line)}
.garpi-btn:disabled{opacity:.6;cursor:default}

.garpi-links{margin-top:18px;font-size:13px;text-align:center}
.garpi-links a{color:var(--g-ink-2);text-decoration:none}
.garpi-links a:hover{color:var(--g-ink);text-decoration:underline}

.garpi-divider{border:0;border-top:1px solid var(--g-line);margin:22px 0}

/* ===== Alertas de estado (link expirado/usado/inválido) ===== */
.garpi-alert{
  border-radius:var(--g-radius-md);padding:13px 16px;font-size:13.5px;line-height:1.55;margin-bottom:18px;
}
.garpi-alert a{color:inherit;font-weight:600;text-decoration:underline}
.garpi-alert.is-warning{background:var(--g-accent-soft);color:#5A4308}
.garpi-alert.is-danger{background:var(--g-danger-soft);color:var(--g-danger)}
.garpi-alert.is-info{background:var(--g-surface-2);color:var(--g-ink-2)}

/* ===== Toasts ===== */
#toast-region{position:fixed;top:16px;right:16px;z-index:2147483647;display:flex;flex-direction:column;gap:8px}
.toast{
  min-width:280px;max-width:360px;padding:12px 14px;border-radius:var(--g-radius-md);
  box-shadow:var(--g-shadow);background:var(--g-surface);color:var(--g-ink);
  border-left:3px solid;display:flex;gap:10px;opacity:0;transform:translateY(-8px);
  transition:opacity .2s,transform .2s;font-size:13px;font-family:var(--g-sans);
}
.toast.show{opacity:1;transform:translateY(0)}
.toast-error{border-left-color:var(--g-danger)}
.toast-success{border-left-color:var(--g-good)}
.toast .msg{flex:1}

/* ===== Mata overlays legados ===== */
.modal-backdrop,.loader-bg,.theme-loader,#overlay{display:none!important}

@media (prefers-reduced-motion: reduce){ *{transition:none!important} }