/* ==========================================================================================
   FOLHA — base.css
   Tokens, reset, tipografia, botões, campos, foco e utilitários. Fundação de todas as páginas.
   Conceito visual "Tinta e Papel" (FOL-W §2): documento de dinheiro conferido, não dashboard.
   Linhas finas em vez de sombra; números em monoespaçada tabular; hierarquia por escala.
   ========================================================================================== */

/* ------------------------------------------------------------------------------- 1. tokens */

:root {
  color-scheme: light dark;

  /* paleta clara — tinta escura em papel quente (§2.3) */
  --papel: #fbfaf7;
  --papel-2: #f2f0ea;
  --carta: #ffffff;
  --tinta: #15202e;
  --tinta-2: #4a5866;
  --linha: #dfdcd3;
  --azul: #0f3d6e;
  --azul-forte: #0f3d6e; /* fundo de botão primário */
  --azul-sobre: #ffffff; /* texto sobre o azul */
  --azul-tenue: #e8eff7;
  /* O desenho previa #A9741A supondo 4,9:1. Medido nos pares REAIS deu 3,87:1 sobre --papel e
     3,54:1 sobre --papel-2 (sobrancelha, numerais dos blocos, rótulo da memória) — reprovado
     para texto normal. Escurecido até passar nos três fundos claros: 5,04:1 sobre --papel,
     4,62:1 sobre --papel-2 e 5,26:1 sobre --carta. Ajusta-se o token, nunca a regra (§2.3). */
  --ambar: #91621a;
  --verde: #1b6b4f;
  --vermelho: #a32b22;
  --vermelho-tenue: #fbeceb;

  /* espaçamento, base 4 (§2.5) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;
  --e10: 128px;

  /* forma */
  --raio-campo: 4px;
  --raio-carta: 10px;
  --raio-chip: 999px;

  /* elevação: quase imperceptível de propósito, e NUNCA no tema escuro */
  --sombra-1: 0 1px 2px rgba(21, 32, 46, 0.04);
  --sombra-2: 0 6px 24px -12px rgba(21, 32, 46, 0.16);

  /* tipografia (§2.4) — sem webfont: zero requisição de terceiro, zero flash, zero licença */
  --fonte-texto: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  --fonte-numero: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SF Mono', 'Roboto Mono', Menlo,
    Consolas, monospace;

  --largura: 1152px;
  --medida: 68ch;
}

/* O tema escuro chega por DOIS caminhos que precisam vencer nos dois sentidos:
   o sinal do sistema (prefers-color-scheme) e a escolha manual (data-tema). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --papel: #0e1620;
    --papel-2: #141e2a;
    --carta: #16212e;
    --tinta: #e9edf2;
    --tinta-2: #9daab8;
    --linha: #26323f;
    --azul: #7fb2e8;
    --azul-forte: #4e93da;
    --azul-sobre: #0b1219;
    --azul-tenue: #17293d;
    --ambar: #d8a94a;
    --verde: #56c79b;
    --vermelho: #f08a80;
    --vermelho-tenue: #2a1a1a;
    --sombra-1: none;
    --sombra-2: none;
  }
}

:root[data-tema='escuro'] {
  color-scheme: dark;
  --papel: #0e1620;
  --papel-2: #141e2a;
  --carta: #16212e;
  --tinta: #e9edf2;
  --tinta-2: #9daab8;
  --linha: #26323f;
  --azul: #7fb2e8;
  --azul-forte: #4e93da;
  --azul-sobre: #0b1219;
  --azul-tenue: #17293d;
  --ambar: #d8a94a;
  --verde: #56c79b;
  --vermelho: #f08a80;
  --vermelho-tenue: #2a1a1a;
  --sombra-1: none;
  --sombra-2: none;
}

:root[data-tema='claro'] {
  color-scheme: light;
}

/* -------------------------------------------------------------------------------- 2. reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A âncora não pode parar embaixo do cabeçalho fixo. */
  scroll-padding-top: 88px;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nada pode causar rolagem horizontal (§11.3) — isto é a rede de segurança, não a solução. */
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* `[hidden]` TEM que vencer: `.btn` e `.chip` declaram `display:inline-flex`, e a regra do
   navegador para [hidden] é `display:none` sem !important — ou seja, perde para a classe.
   Sem isto, um CTA marcado como oculto continua na tela (e foi exatamente o que aconteceu). */
[hidden] {
  display: none !important;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Foco SEMPRE visível, nos dois temas, jamais removido (§11.1). */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------- 3. tipografia */

.display {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.022em; /* o aperto é o que dá o ar editorial */
}

.h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.h3 {
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.corpo-g {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--tinta-2);
}

.sobrancelha {
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar);
}

.legenda {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

.num {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
}

.medida {
  max-width: var(--medida);
}

.tinta-2 {
  color: var(--tinta-2);
}

/* ---------------------------------------------------------------------------- 4. estrutura */

.container {
  width: min(var(--largura), 100% - 2 * var(--e5));
  margin-inline: auto;
}

.secao {
  padding-block: var(--e7);
}

.faixa-2 {
  background: var(--papel-2);
}

@media (min-width: 768px) {
  .secao {
    padding-block: var(--e9);
  }
}

/* A régua: assinatura gráfica da marca (§2.1). Não é uma linha morta — é a borda marcada de um
   livro-caixa. Feita com gradiente repetido, sem imagem e sem elemento extra. */
.regua {
  height: 9px;
  border-top: 1px solid var(--linha);
  background-image: repeating-linear-gradient(
    to right,
    var(--linha) 0,
    var(--linha) 1px,
    transparent 1px,
    transparent 12px
  );
  background-size: 100% 5px;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--azul-forte);
  color: var(--azul-sobre);
  padding: var(--e3) var(--e5);
  border-radius: 0 0 var(--raio-campo) 0;
  font-weight: 600;
}

.pular:focus {
  left: 0;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------------------- 5. a marca */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  color: var(--tinta);
  text-decoration: none;
}

.marca::after {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--ambar);
  border-radius: 1px;
}

/* ------------------------------------------------------------------------------ 6. botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px; /* alvo de toque (§11.1) */
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--raio-campo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}

.btn-primario {
  background: var(--azul-forte);
  color: var(--azul-sobre);
  border-color: var(--azul-forte);
}

.btn-primario:hover {
  background: color-mix(in srgb, var(--azul-forte) 88%, var(--tinta));
  border-color: color-mix(in srgb, var(--azul-forte) 88%, var(--tinta));
}

.btn-fantasma {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linha);
}

.btn-fantasma:hover {
  border-color: var(--tinta-2);
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
}

.btn-invertido {
  background: var(--papel);
  color: var(--azul-forte);
  border-color: var(--papel);
}

.btn-invertido:hover {
  background: color-mix(in srgb, var(--papel) 90%, #000);
}

.btn-bloco {
  width: 100%;
}

/* Botão pequeno. Nasceu no `landing.css` e foi promovido para cá na FOL-7: `app.html` já usava
   `btn-peq` na barra do topo sem carregar o `landing.css`, então o botão saía em tamanho cheio.
   Mora aqui porque toda tela de operação tem ação secundária dentro de tabela e de painel. */
.btn-peq {
  min-height: 38px;
  padding: var(--e2) var(--e4);
  font-size: 0.9375rem;
}

/* Ação destrutiva ou irreversível (cancelar remessa, desativar usuário). Cor sozinha não
   basta — quem usa é sempre um diálogo que escreve a consequência antes de perguntar. */
.btn-perigo {
  background: var(--vermelho);
  color: #fff;
  border-color: var(--vermelho);
}

.btn-perigo:hover {
  background: color-mix(in srgb, var(--vermelho) 86%, #000);
  border-color: color-mix(in srgb, var(--vermelho) 86%, #000);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Link que age como texto de apoio, não como botão. */
.link-texto {
  background: none;
  border: 0;
  padding: 0;
  color: var(--azul);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* -------------------------------------------------------------------------------- 7. chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-chip);
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--tinta-2);
  background: var(--carta);
  white-space: nowrap;
}

.chip-azul {
  background: var(--azul-tenue);
  border-color: transparent;
  color: var(--azul);
}

/* -------------------------------------------------------------------------------- 8. campos */

.campo {
  margin-bottom: var(--e5);
}

.campo > label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: var(--e2);
}

.entrada {
  width: 100%;
  min-height: 46px;
  padding: var(--e3) var(--e4);
  background: var(--carta);
  color: var(--tinta);
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
  transition: border-color 150ms, box-shadow 150ms;
}

.entrada::placeholder {
  color: color-mix(in srgb, var(--tinta-2) 70%, transparent);
}

.entrada:hover {
  border-color: var(--tinta-2);
}

.entrada:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
  border-color: var(--azul);
}

.entrada[readonly] {
  background: var(--papel-2);
}

.entrada[aria-invalid='true'] {
  border-color: var(--vermelho);
}

.auxilio {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

.erro-campo {
  display: none;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--vermelho);
}

.erro-campo:not(:empty) {
  display: block;
}

/* Senha: o botão de revelar mora DENTRO do campo, com 44x44 de alvo (padrão permanente da casa).
   O botão divide a MESMA CÉLULA do input, em vez de flutuar ancorado no rodapé do bloco.
   Por quê: com `position:absolute; bottom:1px` ele era ancorado no bloco INTEIRO — bastava
   aparecer um texto de auxílio ou uma mensagem de erro embaixo para o bloco crescer e o olhinho
   descer junto, descolado do campo, exatamente no momento em que a pessoa mais precisa dele
   (errou a senha e quer conferir o que digitou). Com grid, cresça o que crescer embaixo, o
   botão continua sobre o campo. */
.campo-senha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* TODO filho na coluna 1, explicitamente. Sem isto, o auto-placement do grid vê a célula
   (linha 2, coluna 1) já ocupada pelo input, INVENTA uma segunda coluna e joga o olhinho para
   fora do campo — colado na borda direita, do lado de fora. Foi o que aconteceu. */
.campo-senha > * {
  grid-column: 1;
}

.campo-senha > label {
  grid-row: 1;
}

.campo-senha > .entrada {
  grid-row: 2;
  padding-right: 52px;
}

.campo-senha > .auxilio {
  grid-row: 3;
}

.campo-senha > .erro-campo {
  grid-row: 4;
}

.olho {
  grid-row: 2;
  justify-self: end;
  align-self: center;
  margin-right: 1px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: var(--raio-campo);
  color: var(--tinta-2);
}

.olho:hover {
  color: var(--tinta);
}

/* ------------------------------------------------------------------------------ 9. alertas */

.alerta {
  display: none;
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e5);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--tinta-2);
  border-radius: var(--raio-campo);
  background: var(--carta);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.alerta.visivel {
  display: block;
}

.alerta strong {
  display: block;
  margin-bottom: 2px;
}

.alerta-erro {
  border-left-color: var(--vermelho);
  background: var(--vermelho-tenue);
  color: var(--tinta);
}

.alerta-aviso {
  border-left-color: var(--ambar);
}

.alerta-neutro {
  border-left-color: var(--azul);
  background: var(--azul-tenue);
}

.alerta .ref {
  display: block;
  margin-top: var(--e2);
  font-family: var(--fonte-numero);
  font-size: 0.75rem;
  color: var(--tinta-2);
  word-break: break-all;
}

/* ---------------------------------------------------------------------------- 10. details */

.dobra {
  border-top: 1px solid var(--linha);
  padding-top: var(--e4);
}

.dobra > summary {
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--azul);
  list-style: none;
  padding: var(--e2) 0;
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.dobra > summary::-webkit-details-marker {
  display: none;
}

.dobra > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 150ms;
  flex: none;
}

.dobra[open] > summary::before {
  transform: rotate(90deg);
}

.dobra > summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dobra-corpo {
  padding: var(--e2) 0 var(--e3);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tinta-2);
}

.dobra-corpo p + p {
  margin-top: var(--e3);
}

/* -------------------------------------------------------- 11. cartão de memória de cálculo */
/* A peça de identidade da marca (§2.1 e §4.2): a arte é o PRODUTO, com números de um gabarito
   real. Serve à landing e ao login. As linhas longas rolam DENTRO do cartão, jamais empurrando
   a página (§11.3). */

.memoria {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio-carta);
  box-shadow: var(--sombra-2);
  overflow: hidden;
  max-width: 100%;
}

/* Item de grade tem `min-width: auto` por padrão, ou seja: NÃO encolhe abaixo do conteúdo.
   Como as linhas da memória de cálculo são monoespaçadas e `nowrap`, elas empurravam a coluna
   inteira além da viewport e a página ganhava rolagem horizontal a 375 px — o `overflow-x:auto`
   do corpo do cartão nem chegava a ser consultado. `min-width: 0` devolve o direito de encolher,
   e aí sim o cartão rola dentro de si mesmo, como manda o §11.3. */
.passo {
  min-width: 0;
}

.passo > * {
  min-width: 0;
}

.memoria-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--linha);
  background: var(--papel-2);
}

.memoria-topo .rot {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
}

.memoria-topo .comp {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--tinta-2);
}

.memoria-rubrica {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--e5) var(--e3);
  font-weight: 600;
}

.memoria-rubrica .cod {
  font-family: var(--fonte-numero);
  color: var(--ambar);
  margin-right: 6px;
}

.memoria-rubrica .qtd {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--tinta-2);
  white-space: nowrap;
}

.memoria-corpo {
  padding: 0 var(--e5) var(--e4);
  overflow-x: auto;
}

.passo {
  border-top: 1px solid var(--linha);
  padding-top: var(--e3);
  margin-top: var(--e3);
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--e3);
}

.passo .n {
  font-family: var(--fonte-numero);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ambar);
  line-height: 1.5;
}

.passo .t {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 5px;
}

.linhas {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-size: 0.78125rem;
  line-height: 1.75;
  color: var(--tinta-2);
}

.linhas > div {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
}

/* A cifra é o que o leitor veio ver: ela nunca quebra nem é cortada. Quem cede é o rótulo.
   Antes, `nowrap` na linha inteira empurrava os valores para fora do cartão no celular e o
   número aparecia cortado ao meio — justamente o oposto do que a página promete. */
.linhas > div > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.linhas .v {
  white-space: nowrap;
  flex: none;
}

.linhas .v {
  color: var(--tinta);
}

.linhas .soma {
  border-top: 1px solid var(--linha);
  padding-top: 3px;
  margin-top: 3px;
  font-weight: 700;
  color: var(--tinta);
}

.memoria-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--linha);
  background: color-mix(in srgb, var(--verde) 8%, var(--carta));
}

.memoria-total .rot {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tinta-2);
  min-width: 0;
}

.memoria-total .val {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--verde);
  white-space: nowrap; /* "R$" e o valor não se separam em duas linhas */
  flex: none;
}

/* No celular o cabeçalho do cartão empilha em vez de espremer duas colunas. */
@media (max-width: 460px) {
  .memoria-topo,
  .memoria-total {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e1);
  }
}

.memoria-fund {
  padding: var(--e3) var(--e5) var(--e4);
  border-top: 1px solid var(--linha);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--tinta-2);
}

.memoria-fund b {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  font-weight: 700;
  margin-bottom: 2px;
}

/* Variante compacta usada na coluna direita do login. */
.memoria-mini .memoria-topo,
.memoria-mini .memoria-rubrica,
.memoria-mini .memoria-corpo,
.memoria-mini .memoria-total,
.memoria-mini .memoria-fund {
  padding-left: var(--e4);
  padding-right: var(--e4);
}

.memoria-mini .linhas {
  font-size: 0.75rem;
}