/* Componentes base. Só usa tokens de tokens.css. Carregar: tokens.css, base.css, marca.css, tela.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: var(--t-2)/var(--linha) var(--fonte);
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--e-3); }
h1 { font-size: var(--t-5); } h2 { font-size: var(--t-4); } h3 { font-size: var(--t-3); }
p { margin: 0 0 var(--e-3); }
[hidden] { display: none !important; } /* sem isto, display de classe vence o hidden e o elemento "escondido" aparece */

:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio); }

/* layout */
.pagina { max-width: 1100px; margin: 0 auto; padding: var(--e-4); }
.pilha > * + * { margin-top: var(--e-4); }
.linha { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.grade { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* cartão */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); padding: var(--e-4); box-shadow: var(--sombra); }

/* botões: ação principal é uma só por tela */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); padding: 0 var(--e-4); border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  font: 600 var(--t-2)/1 var(--fonte); cursor: pointer;
  transition: background var(--duracao), border-color var(--duracao);
}
.botao:hover { background: var(--superficie-2); }
.botao[disabled], .botao[aria-busy="true"] { opacity: .6; cursor: not-allowed; }
.botao--principal { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.botao--principal:hover { background: var(--marca-forte); }
.botao--perigo { background: var(--superficie); border-color: var(--erro); color: var(--erro); }

/* formulário: todo campo tem <label>; placeholder não é rótulo */
.campo { display: grid; gap: var(--e-1); }
.campo label { font-weight: 600; font-size: var(--t-2); }
.campo .ajuda { color: var(--texto-2); font-size: var(--t-1); }
.campo .erro-campo { color: var(--erro); font-size: var(--t-1); }
input, select, textarea {
  min-height: var(--toque); width: 100%; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto); font: inherit;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--erro); }
input.dinheiro, td.dinheiro, .numero { font-variant-numeric: tabular-nums; text-align: right; }

/* avisos: sempre texto explicando, cor é reforço */
.aviso { border-radius: var(--raio); padding: var(--e-3) var(--e-4); border: 1px solid transparent; }
.aviso--ok { background: var(--ok-suave); color: var(--ok); border-color: currentColor; }
.aviso--alerta { background: var(--alerta-suave); color: var(--alerta); border-color: currentColor; }
.aviso--erro { background: var(--erro-suave); color: var(--erro); border-color: currentColor; }
.aviso--info { background: var(--info-suave); color: var(--info); border-color: currentColor; }

.selo { display: inline-block; padding: 2px var(--e-2); border-radius: 999px; font-size: var(--t-1); font-weight: 600; background: var(--superficie-2); color: var(--texto-2); }

/* tabela: rola dentro do próprio contêiner no celular, nunca a página inteira */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-grande); background: var(--superficie); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
th { font-size: var(--t-1); color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; background: var(--superficie-2); position: sticky; top: 0; }

/* estado vazio e carregando: a tela nunca fica em branco sem explicar */
.vazio { text-align: center; color: var(--texto-2); padding: var(--e-6) var(--e-4); }

@media (max-width: 640px) {
  .pagina { padding: var(--e-3); }
  .linha > .botao { flex: 1 1 auto; }
}