/* ============================================================
   GPTAll — app.css (conta, conversão e páginas institucionais)
   Carrega DEPOIS de tokens.css e base.css. Não redeclare cor,
   tipografia ou espaço aqui — só componente novo, em cima dos
   custom properties de tokens.css e das classes de base.css
   (.panel, .crop-marks, .model-chip, .btn, .field, .auth-msg,
   .t-*, .container*, .stack, .is-hidden, .sr-only, .sweep-in).

   Escopo: cadastro/login/redefinir-senha/painel, trial-enviado/
   obrigado/404, termos/privacidade. T5 (home) e T7 (tutoriais)
   têm os próprios arquivos de componente — não redeclare nada
   que pertença a eles.
   ============================================================ */

@layer reset, base, layout, components, utilities, animations;

/* -------------- Estrutura de página compartilhada -------------- */
@layer layout {
  .gp-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  /* Pula pro conteúdo — invisível até receber foco por teclado. */
  .skip-link {
    position: absolute;
    top: -48px;
    left: var(--space-sm);
    z-index: 10000;
    background: var(--color-signal);
    color: var(--color-void);
    font-family: var(--font-body);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: top var(--duration-fast) var(--ease-sweep);
  }
  .skip-link:focus {
    top: var(--space-sm);
  }
}

/* -------------- Topbar (conta + institucional) ------------------ */
@layer components {
  .gp-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-h);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-graticule-dim);
  }
  .gp-topbar__inner {
    max-width: var(--stage-max);
    margin: 0 auto;
    height: 100%;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  .gp-topbar__logo {
    display: inline-flex;
    align-items: center;
  }
  .gp-topbar__logo img {
    height: 26px;
    width: auto;
    display: block;
  }
  .gp-topbar__action {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--space-sm);
    border: 1px solid var(--color-graticule-dim);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-paper);
    transition: border-color var(--duration-fast) var(--ease-sweep);
  }
  .gp-topbar__action:hover { border-color: var(--color-graticule); }

  .gp-footer {
    border-top: 1px solid var(--color-graticule-dim);
    padding: var(--space-md) 0;
    margin-top: auto;
  }
  .gp-footer__inner {
    max-width: var(--stage-max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-paper-dim);
  }
  .gp-footer__inner a { color: var(--color-signal-deep); }
  .gp-footer__inner a:hover { color: var(--color-signal); }
  .gp-footer__sep { color: var(--color-graticule); }
  /* Aviso de revenda independente — compromisso de marca do PRODUCT.md
     ("obrigatório em rodapé de TODA página"). Até a T12.5 ele existia só na
     home: 1 superfície de 22. Como é a mitigação declarada do risco do nome,
     não é letra miúda — 0.875rem em --color-paper-dim (6,76:1 sobre o void,
     passa AA) e o rótulo em --color-paper. */
  .gp-footer__legal {
    max-width: var(--stage-max);
    margin: var(--space-sm) auto 0;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    font-size: 0.875rem;
    line-height: var(--leading-body);
    color: var(--color-paper-dim);
  }
  .gp-footer__legal strong { color: var(--color-paper); }
}

/* -------------- Formulário: wrapper próprio (não confundir com
   o .field de base.css, que estiliza o <input> em si) ------------ */
@layer components {
  .gp-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-half);
  }
  .gp-field__label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
  }
  .gp-field--password { position: relative; }
  .gp-field--password .field { padding-right: 76px; }
  .field__toggle {
    position: absolute;
    right: var(--space-xs);
    bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-signal-deep);
    padding: 6px 4px;
  }
  /* Alvo de toque de 44px sem mexer no layout: o botão fica absoluto DENTRO
     do campo, então crescer a caixa dele empurraria o rótulo. O ::after é uma
     área de toque invisível centrada no botão — o dedo pega 44px, o olho
     continua vendo o rótulo pequeno. (T12.4: o PRODUCT.md promete 44px e este
     controle media ~24px.) */
  .field__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 44px;
    height: 44px;
  }
  .field__toggle:hover { color: var(--color-signal); }

  /* Erro de validação por campo — imediato e localizado, ao lado do
     .auth-msg (banner de topo, para rede/servidor/sucesso). É a parte
     do "reprojetar, não copiar" do padrão de mensagem: as marcas irmãs
     só têm o banner único; aqui o erro de campo aparece junto do campo
     que falhou, sem esperar o submit rolar a tela até o topo. */
  .gp-field[data-invalid="true"] .field {
    border-color: var(--color-danger);
  }
  .gp-field__error {
    display: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-danger);
  }
  .gp-field[data-invalid="true"] .gp-field__error { display: block; }
}

/* -------------- Estado de carregamento do botão ------------------ */
@layer animations {
  /* "Trava/varre": três pontos em varredura curta, transform/opacity
     só, ease-out — a mesma gramática de motion do restante da marca. */
  .btn[aria-busy="true"] {
    opacity: 0.86;
    pointer-events: none;
    position: relative;
  }
  .btn[aria-busy="true"]::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--space-xs);
    border-radius: 50%;
    background: currentColor;
    animation: gp-busy-pulse 900ms var(--ease-sweep) infinite;
    vertical-align: middle;
  }
  @keyframes gp-busy-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn[aria-busy="true"]::after { animation: none; opacity: 0.7; }
  }
}

/* -------------- Cartão de autenticação (cadastro/login/senha) ---- */
@layer components {
  .gp-auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--space-xl), 8vw, var(--space-2xl)) clamp(1.25rem, 4vw, 2rem);
  }
  .gp-auth-card {
    width: 100%;
    max-width: 440px;
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
  }
  .gp-auth-card__head { margin-bottom: var(--space-md); }
  .gp-auth-card__eyebrow {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-signal-deep);
  }
  .gp-auth-card__title { margin: 0 0 var(--space-half); }
  .gp-auth-card__subtitle { margin: 0; }
  .gp-auth-form > * + * { margin-top: var(--space-sm); }
  .gp-auth-card__foot {
    margin-top: var(--space-md);
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-paper-dim);
  }
  .gp-auth-card__foot a { color: var(--color-signal-deep); font-weight: 600; }
  .gp-auth-card__foot a:hover { color: var(--color-signal); }
  .gp-auth-card__foot + .gp-auth-card__foot { margin-top: var(--space-xs); }

  .cf-turnstile { display: flex; justify-content: center; }
}

/* -------------- Painel (área logada) ------------------------------ */
@layer components {
  .gp-dash-main {
    flex: 1;
    max-width: var(--stage-max);
    width: 100%;
    margin: 0 auto;
    padding: clamp(var(--space-lg), 6vw, var(--space-xl)) clamp(1.25rem, 4vw, 3rem) var(--space-2xl);
  }
  .dash-loading {
    font-family: var(--font-mono);
    font-size: var(--text-code);
    color: var(--color-paper-dim);
    padding: var(--space-2xl) 0;
    text-align: center;
  }
  .dash-welcome { margin-bottom: var(--space-lg); }
  .dash-welcome__title { margin: 0 0 var(--space-half); }
  .dash-welcome__sub {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-paper-dim);
  }
  .dash-welcome__sub strong { color: var(--color-paper); }

  .dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  .dash-card {
    padding: var(--space-md);
  }
  .dash-card--wide { grid-column: 1 / -1; }
  .dash-card__label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    margin: 0 0 var(--space-xs);
  }
  .dash-card__value {
    font-family: var(--font-body);
    font-size: var(--text-title);
    font-weight: 600;
    margin: 0;
  }
  .dash-card__hint {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-paper-dim);
    margin: var(--space-xs) 0 0;
    line-height: var(--leading-body);
  }

  .token-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    background: var(--color-void);
    border: 1px solid var(--color-graticule-dim);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
  }
  .token-box__value {
    font-family: var(--font-mono);
    font-size: var(--text-code);
    color: var(--color-paper);
    word-break: break-all;
  }
  .token-box__actions { display: flex; gap: var(--space-xs); flex: 0 0 auto; }
  .token-btn {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper);
    border: 1px solid var(--color-graticule-dim);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    /* 44px: compromisso de alvo de toque do PRODUCT.md. Era 32px — a
       auditoria T12.4 achou 5 controles abaixo do piso, e justo os que
       mais importam (copiar a chave de API e o nome do modelo). */
    min-height: 44px;
    transition: border-color var(--duration-fast) var(--ease-sweep), background var(--duration-fast) var(--ease-sweep);
  }
  .token-btn:hover { border-color: var(--color-graticule); background: var(--color-panel-hover); }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-graticule-dim);
    color: var(--color-paper-dim);
  }
  .status-badge--active { color: var(--color-signal-deep); border-color: var(--color-signal-deep); }
  .status-badge--pending { color: var(--color-paper-dim); border-color: var(--color-graticule-dim); }
  .status-badge--expired,
  .status-badge--canceled { color: var(--color-danger); border-color: var(--color-danger); }

  .dash-models__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: var(--space-xs) 0 0;
  }

  .dash-upsell {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  .dash-upsell__title { margin: 0 0 var(--space-half); }
  .dash-upsell__sub {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-body);
    color: var(--color-paper-dim);
    max-width: 65ch;
  }

  .dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

  .dash-card--account { padding: var(--space-md); }
}

/* -------------- Guias (referral.js monta em runtime) -------------- */
@layer components {
  .admin-tabs {
    display: flex;
    gap: var(--space-md);
    border-bottom: 1px solid var(--color-graticule-dim);
    margin-bottom: var(--space-md);
  }
  .admin-tab {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    padding: var(--space-xs) 2px var(--space-sm);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .admin-tab:hover { color: var(--color-paper); }
  .admin-tab.is-active {
    color: var(--color-paper);
    border-bottom-color: var(--color-signal-deep);
  }
  .admin-panel.is-hidden { display: none; }

  .referral-bloco + .referral-bloco { margin-top: var(--space-md); }

  .referral-linkbox { align-items: stretch; }
  .referral-link__input {
    flex: 1 1 220px;
    min-width: 0;
    background: transparent;
    border: 0;
    font-family: var(--font-mono);
    font-size: var(--text-code);
    color: var(--color-paper);
  }
  /* Foco NUNCA suprimido. Este seletor era `.referral-link__input:focus {
     outline: none }` sem nenhuma substituição visual — e, por especificidade
     (0,2,0 contra 0,1,0), ele derrubava também o `:focus-visible` global,
     deixando quem navega por teclado sem qualquer indicação ao chegar no
     campo que exibe o link de indicação. O `:not(:focus-visible)` preserva a
     intenção original (não desenhar anel quando o usuário clica no campo só
     para selecionar o texto) e devolve o anel para o teclado. Achado T12.4. */
  .referral-link__input:focus:not(:focus-visible) { outline: none; }
  .referral-codigo {
    margin: var(--space-xs) 0 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-paper-dim);
  }

  .referral-saldos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-sm);
    margin: 0;
  }
  .referral-saldo {
    padding: var(--space-xs) 0 0;
    border-top: 1px solid var(--color-graticule-dim);
  }
  .referral-saldo__rotulo {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    margin: 0 0 var(--space-half);
  }
  .referral-saldo__valor {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-paper);
    margin: 0;
  }
  .referral-saldo__dica {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-paper-dim);
    margin-top: 2px;
  }
  .referral-aviso {
    margin: var(--space-sm) 0 0;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--color-danger) 12%, var(--color-panel));
    font-family: var(--font-body);
    font-size: 0.875rem;
  }

  .referral-saque-bloco { margin-top: var(--space-sm); }
  .referral-saque { margin: 0 0 var(--space-xs); font-family: var(--font-body); }

  /* Reset local do wrapper .field que referral.js emite para o
     formulário de saque — .field em base.css estiliza o <input>
     diretamente; aqui .field é usado como DIV envolvendo label+select,
     então neutralizamos a caixa nesse escopo e ganhamos o mesmo visual
     de rótulo+controle do resto do site via .field__input. */
  .referral-saque-form {
    margin-top: var(--space-sm);
  }
  .referral-saque-form .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-half);
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
    margin-bottom: var(--space-sm);
  }
  .referral-saque-form .field__input {
    display: block;
    width: 100%;
    background: var(--color-void);
    border: 1px solid var(--color-graticule-dim);
    border-radius: var(--radius-sm);
    color: var(--color-paper);
    font-family: var(--font-body);
    font-size: var(--text-body);
    padding: 12px 14px;
    min-height: 44px;
  }
  .referral-saque-form .field__input:focus {
    outline: none;
    border-color: var(--color-signal);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-signal) 25%, transparent);
  }
  .field__label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
  }

  .referral-erro,
  .referral-status {
    margin-top: var(--space-xs);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-danger);
  }

  .referral-tablewrap { overflow-x: auto; }
  .referral-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.9375rem;
  }
  .referral-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    padding: 0 var(--space-xs) var(--space-xs);
    border-bottom: 1px solid var(--color-graticule-dim);
  }
  .referral-row td {
    padding: var(--space-xs);
    border-bottom: 1px solid var(--color-graticule-dim);
  }
  .referral-cell--num { text-align: right; font-family: var(--font-mono); }
  .referral-status {
    display: inline-flex;
    margin: 0 0 0 var(--space-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-graticule-dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-paper-dim);
  }
  /* "Comprou" é o estado de sucesso do programa — amarelo-sinal profundo
     e rótulo textual, nunca semáforo verde (regra explícita do DESIGN.md). */
  .referral-status--comprou { color: var(--color-signal-deep); border-color: var(--color-signal-deep); }
  .referral-status--cadastrou { color: var(--color-paper-dim); }
  .referral-prazo {
    display: block;
    margin-top: 2px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-paper-dim);
  }
  .referral-empty {
    color: var(--color-paper-dim);
    font-family: var(--font-body);
    padding: var(--space-sm) 0;
  }
  .referral-lista__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
}

/* -------------- Páginas institucionais (termos/privacidade) -------- */
@layer components {
  .gp-prose {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: clamp(var(--space-xl), 7vw, var(--space-2xl)) clamp(1.25rem, 4vw, 2rem) var(--space-2xl);
  }
  .gp-prose__updated {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    margin: 0 0 var(--space-lg);
  }
  .gp-prose h1 { margin: 0 0 var(--space-md); }
  .gp-prose h2 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    margin: var(--space-lg) 0 var(--space-xs);
  }
  .gp-prose p { margin: 0 0 var(--space-sm); max-width: 75ch; }
  .gp-prose ul { margin: 0 0 var(--space-sm) var(--space-md); padding: 0; }
  .gp-prose li { margin-bottom: var(--space-half); }
  .gp-prose a { color: var(--color-signal-deep); text-decoration: underline; }
  .gp-prose a:hover { color: var(--color-signal); }
  .gp-prose strong { color: var(--color-paper); }
}

/* -------------- Estado vazio (404 / trial-enviado / obrigado) ------ */
@layer components {
  .gp-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(var(--space-xl), 8vw, var(--space-2xl)) clamp(1.25rem, 4vw, 2rem);
  }
  .gp-empty__inner { max-width: 520px; }
  .gp-empty__eyebrow {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--color-signal-deep);
  }
  .gp-empty__title { margin: 0 0 var(--space-sm); }
  .gp-empty__body {
    margin: 0 0 var(--space-lg);
    color: var(--color-paper-dim);
  }
  .gp-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
  }
}

/* -------------- Raio por papel de superfície (ver home.css) -------------- */
@layer components {
  .gp-auth-card,
  .gp-dash-card,
  .gp-panel,
  .gp-empty { border-radius: var(--radius-lg); }
  .gp-field input,
  .gp-field select,
  .token-btn { border-radius: var(--radius-md); }
}