/*
  Central de Notas — 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-2);z-index:2147483646;
  font:14px/1.2 var(--g-sans);letter-spacing:.02em;
}
#boot-loader.hidden{display:none}

/* ===== Layout =====
   Esqueci senha / redefinir senha: marca solta sobre o fundo (sem caixa ao
   redor do logo) + um card, sem split. Login: layout dividido (ver
   ".garpi-split" abaixo) - pedido do usuário em 2026-09-17, troca do
   formato único que existia antes. */
.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}

/* ===== Split (auth: login, esqueci senha, definir/redefinir senha) =====
   Painel de imagem à esquerda (a imagem já traz logo/marca/texto embutidos -
   ver assets/images/auth/Imagem_login.png, pedido do usuário em 2026-09-17,
   por isso não tem overlay de texto por cima) e card de acesso à direita,
   ocupando a tela inteira (edge-to-edge, sem o padding/centralização de
   .garpi-wrap usado antes - ver .garpi-wrap-split). Mesmo padrão nas 4
   telas de auth. */
.garpi-wrap-split{padding:0;min-height:100vh;align-items:stretch}
.garpi-split{min-height:100vh;display:flex;align-items:stretch;width:100%;align-self:stretch}
.garpi-split-media{
  flex:1 1 50%;
  /* Painel sem mais imagem de fundo (2026-09-22: mockup animado saiu, virou
     só o logo real centralizado - ver .garpi-mock-brand). 3 tentativas de
     fundo escuro/azul não agradaram (preto sólido "muito escuro", degradê
     diagonal "ainda não esta bom", brilho radial azul também não) - o
     usuário apontou a causa: o próprio logo já é azul, então qualquer fundo
     na família azul/escura compete com ele em vez de destacar. Troca pra
     fundo claro pra não competir com o azul do logo. Cinza (--g-surface-2)
     não agradou ("outra cor alem do cinza?") - trocado pro azul bem
     pastel da marca (--g-accent-soft), ainda claro o bastante pra o logo
     contrastar, mas com mais identidade que um neutro cinza puro. */
  background:var(--g-accent-soft);
}
.garpi-split-form{
  flex:1 1 50%;min-width:0;display:flex;align-items:center;justify-content:center;
  padding:20px clamp(16px,3vw,56px);background:var(--g-surface);
}
.garpi-split-form-brand{display:none;text-align:center;margin-bottom:22px}
/* Sem card: o formulário flutua direto no fundo do painel, sem borda/sombra
   (pedido do usuário em 2026-09-17 - achou o card redundante num painel que
   já é branco). .garpi-form-plain só desliga o que .garpi-card daria. */
.garpi-form-plain{width:100%;max-width:440px}

@media (max-width:991px){
  .garpi-split-media{display:none}
  .garpi-split-form{padding-top:40px}
  .garpi-split-form-brand{display:block}
}
.garpi-form{padding:40px 36px}

/* Wordmark de fallback mobile (.garpi-split-form-brand, quando a imagem some
   abaixo de 992px - ver ".garpi-split" acima). As 4 telas de auth usam o
   split agora; .garpi-mast/.garpi-card/.garpi-motto (card único + logo solto
   sem split) saíram de uso e foram removidos em 2026-09-17. */
.garpi-wordmark{font-family:var(--g-display);font-weight:700;font-size:21px;color:var(--g-ink);margin-top:10px}

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

/* ===== Tipografia ===== */
/* Redesign 2026-09-24: rótulo em texto normal (sem mono caixa alta) e
   título maior em Archivo. */
.garpi-eyebrow{
  font-family:var(--g-sans);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--g-ink-soft);font-weight:500;margin:0 0 8px;
}
.garpi-form h1{
  font-family:var(--g-display);font-weight:700;font-stretch:92%;font-size:32px;letter-spacing:-.01em;margin:0 0 24px;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-visible{outline:none;border-color:var(--g-ink-2);box-shadow:0 0 0 3px rgba(24,35,53,.08)}
.garpi-field input::placeholder{color:var(--g-ink-soft)}
/* Hint em ink-2 em vez de ink-soft: ink-soft (#7C879A) sobre branco fica em
   ~3.6:1, abaixo do mínimo de 4.5:1 para texto normal (WCAG AA). A hierarquia
   com o label continua clara pelo peso/tamanho, não só pela cor. */
.garpi-hint{font-size:12px;color:var(--g-ink-2);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:focus-visible{outline:2px solid var(--g-accent-hover);outline-offset:2px}
.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-links a:focus-visible{outline:2px solid var(--g-accent-hover);outline-offset:2px;border-radius:2px}

.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} }
/* ===== Painel ilustrado + formulário das telas de acesso (redesign
   2026-09-24) - compartilhado por login, esqueci senha, cadastrar senha e
   redefinir senha (includes/auth_panel.php). Veio do pages/login.css. ===== */
    /* Painel esquerdo (redesign 2026-09-24): logo no topo, frase do que o
       sistema faz, duas notas ilustrativas (sem dado real) + carimbo, e o
       fluxo Recebe/Aprova/Lança no rodapé. Fundo azul pastel mantido
       (auth-garpi.css, escolha do usuário em 2026-09-22). */
    .garpi-split-media{display:flex;flex-direction:column;justify-content:space-between;gap:32px;
      padding:48px clamp(32px,4.5vw,72px);color:var(--g-ink);overflow:hidden}
    .lg-logo{width:200px;height:auto;display:block}
    .lg-hero{display:flex;flex-direction:column;gap:36px}
    .lg-headline{font-family:var(--g-display);font-weight:750;font-stretch:90%;font-size:clamp(34px,3.6vw,52px);line-height:1.03;
      letter-spacing:-.02em;margin:0;max-width:560px;color:var(--g-ink)}
    .lg-stack{position:relative;height:280px;max-width:600px}
    .lg-note{position:absolute;width:340px;background:var(--g-surface);border:1px solid var(--g-line);border-radius:12px;padding:18px 20px;
      display:flex;flex-direction:column;gap:11px}
    .lg-note > i{display:block;height:9px;border-radius:3px;background:var(--g-surface-2)}
    .lg-note.is-back{left:0;top:34px;transform:rotate(-3deg)}
    .lg-note.is-front{left:170px;top:0;transform:rotate(2deg);box-shadow:0 18px 36px -24px rgba(15,27,53,.4)}
    .lg-note-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--g-mono);font-size:12px;color:var(--g-ink-soft)}
    .lg-note-foot{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px dashed var(--g-line-strong);font-size:12px;color:var(--g-ink-soft)}
    .lg-note-foot i{display:block;height:9px;border-radius:3px;background:var(--g-surface-2)}
    .lg-stamp{font-family:var(--g-sans);font-size:11.5px;font-weight:600;padding:1px 9px;border:1.5px solid var(--g-ink-soft);border-radius:999px;color:var(--g-ink-2)}
    .lg-stamp.is-accent{border-color:var(--g-accent);color:var(--g-accent)}
    .lg-seal{position:absolute;left:440px;top:140px;width:116px;height:116px;border-radius:50%;border:3px solid var(--g-good);color:var(--g-good);
      display:flex;align-items:center;justify-content:center;transform:rotate(-10deg);background:rgba(228,235,250,.85)}
    .lg-seal span{width:94px;height:94px;border-radius:50%;border:1.5px dashed currentColor;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
    .lg-seal small{font-family:var(--g-mono);font-size:11px;font-weight:500;letter-spacing:.08em}
    .lg-seal small + small{font-size:9.5px}
    .lg-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--g-ink-2)}
    .lg-flow li{display:flex;flex-direction:column;gap:4px;padding:0 18px;border-left:1px solid var(--g-line-strong)}
    .lg-flow li:first-child{padding-left:0;border-left:0}
    .lg-flow b{color:var(--g-ink);font-weight:600;font-size:14px}
    @media (max-width:1280px){ .lg-seal{left:380px} .lg-note.is-front{left:130px} }
    @media (max-height:760px){ .lg-stack{display:none} }

    /* Formulário */
    .lg-title,.garpi-form h1.lg-title{font-family:var(--g-display);font-weight:700;font-stretch:92%;font-size:34px;letter-spacing:-.01em;margin:0 0 6px;color:var(--g-ink)}
    .lg-sub{font-size:15px;color:var(--g-ink-2);margin:0 0 28px}
    .lg-label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
    .lg-label-row label{margin:0!important}
    .lg-label-row a{font-size:13px;font-weight:600;color:var(--g-accent);text-decoration:none}
    .lg-label-row a:hover{color:var(--g-accent-hover);text-decoration:underline}
    .garpi-form-plain .garpi-field label{font-size:13.5px;color:var(--g-ink)}
    .garpi-form-plain .garpi-field input{height:46px;font-size:15px;padding:0 14px}
    .garpi-form-plain .garpi-btn{height:48px;font-size:15px}
    /* ===== Tela estreita / celular (revisão 2026-09-24) =====
       O .garpi-split-media acima (display:flex) venceria o display:none do
       topo deste arquivo por vir depois - sem isto o painel ilustrado
       continuava aparecendo e espremia o formulário numa coluna estreita. */
    @media (max-width:1280px) and (min-width:992px){
      .lg-stack{height:240px}
      .lg-note{width:280px}
      .lg-note.is-front{left:110px}
      .lg-seal{left:300px;top:120px;width:100px;height:100px}
      .lg-seal span{width:80px;height:80px}
      .lg-flow{grid-template-columns:1fr;gap:10px}
      .lg-flow li{flex-direction:row;gap:8px;padding:0;border-left:0}
    }
    @media (max-width:991.98px){
      .garpi-split-media{display:none}
      .garpi-split-form{align-items:flex-start;padding:28px 20px 40px}
      .garpi-split-form-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;margin:0 0 28px;width:100%}
      .garpi-form.garpi-form-plain{padding:0}
      .lg-logo-mobile{width:150px;height:auto;display:block}
      .lg-mobile-tag{font-size:15px;line-height:1.45;margin:0;color:var(--g-ink-2);max-width:30ch}
      .lg-title,.garpi-form h1.lg-title{font-size:28px}
      .lg-sub{margin-bottom:22px}
      .garpi-stack{max-width:440px;margin:0 auto}
    }
    @media (min-width:992px){ .lg-logo-mobile,.lg-mobile-tag{display:none} }
    @media (max-width:991.98px){
      /* auth-garpi.css põe padding de 16px no .garpi-wrap abaixo de 576px
         (pensado pro layout antigo de card) - no split isso deixava uma
         moldura cinza em volta do formulário. */
      body{background:var(--g-surface)}
      .garpi-wrap.garpi-wrap-split{padding:0}
      .garpi-split,.garpi-split-form{min-height:100vh}
      .lg-logo-mobile{width:132px}
    }
    @media (max-width:575.98px){
      .garpi-split,.garpi-split-form{min-height:auto}
      .garpi-split-form{padding-bottom:24px}
    }
    @media (max-width:991.98px){
      .garpi-wrap.garpi-wrap-split{justify-content:flex-start}
    }
    @media (max-width:575.98px){
      .garpi-wrap.garpi-wrap-split{min-height:auto}
      .garpi-split-form{padding-top:24px}
    }