/*
 * Trabalho Temporário Redbeard — componentes.css
 * Implementação dos componentes do design system do produto. Consome SÓ os tokens de
 * tokens-temporada.css: nenhum hex, nenhuma medida solta aqui. Se faltar um valor, o
 * token é que está faltando.
 *
 * Celular primeiro: tudo fora de media query vale no celular; as media queries só
 * acrescentam no espaço que sobra (min-width).
 * Especificidade: uma classe por componente, modificadores com a mesma classe
 * (.botao.secundario), nada de seletor de elemento competindo com classe.
 */

/* ---------------------------------------------------------------- base */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  line-height: var(--altura-corpo);
  font-weight: var(--peso-corpo);
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--altura-titulo);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--texto-4xl); line-height: var(--altura-apertada); }
h2 { font-size: var(--texto-3xl); }
h3 { font-size: var(--texto-xl); font-weight: var(--peso-titulo-medio); }
h4 { font-size: var(--texto-lg); font-weight: var(--peso-titulo-medio); }

p, li { margin: 0; overflow-wrap: break-word; }
p { max-width: var(--largura-leitura); }
code { overflow-wrap: anywhere; }

a { color: var(--cor-apoio); text-decoration: underline; text-underline-offset: 3px; }

/* foco visível em tudo que recebe foco, com halo para não sumir sobre cor saturada */
:focus-visible {
  outline: var(--foco-largura) solid var(--cor-foco);
  outline-offset: var(--foco-offset);
  border-radius: var(--raio-controle);
}
.sobre-cor :focus-visible,
.botao.primario:focus-visible,
.botao.destrutivo:focus-visible {
  outline-color: var(--cor-foco-halo);
  box-shadow: 0 0 0 calc(var(--foco-largura) + var(--foco-offset) + 1px) var(--cor-foco);
}

/* rótulo mono estrutural (mesma família do DS Redbeard; traço verde, não vermelho) */
.rotulo {
  font-family: var(--fonte-dado);
  font-weight: var(--peso-dado);
  font-size: var(--texto-rotulo);
  letter-spacing: var(--rotulo-tracking);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
}
.rotulo::before {
  content: "";
  width: var(--rotulo-traco-largura);
  height: var(--rotulo-traco-altura);
  background: var(--cor-acao);
  flex: none;
}

/* dado tabular: contagem, valor, data, prazo */
.dado {
  font-family: var(--fonte-dado);
  font-weight: var(--peso-dado);
  font-variant-numeric: tabular-nums;
}

/* selo "pela Redbeard": o único vermelho da interface fora de erro */
.selo-redbeard {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  font-family: var(--fonte-dado);
  font-size: var(--texto-rotulo);
  letter-spacing: var(--rotulo-tracking);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}
.selo-redbeard::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--cor-marca);
  flex: none;
}

/* marcador lima: sempre carregando tinta escura em cima (lima nunca é texto nem linha) */
.marcador {
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
  padding: 0 var(--espaco-2);
  border-radius: var(--raio-controle);
  box-decoration-break: clone;
}

/* ---------------------------------------------------------------- botão */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--botao-altura);
  min-width: var(--alvo-minimo);
  padding: var(--espaco-3) var(--espaco-5);
  border: var(--borda-controle-largura) solid transparent;
  border-radius: var(--raio-controle);
  font-family: inherit;
  font-size: var(--texto-base);
  font-weight: var(--peso-corpo-forte);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracao-normal) var(--easing-padrao),
              border-color var(--duracao-normal) var(--easing-padrao);
}
.botao.grande { min-height: var(--botao-altura-grande); font-size: var(--texto-lg); padding-inline: var(--espaco-6); }
.botao.bloco  { width: 100%; }

.botao.primario { background: var(--cor-acao); color: var(--cor-sobre-acao); }
.botao.primario:hover { background: var(--cor-acao-toque); }

.botao.secundario { background: transparent; color: var(--cor-acao); border-color: var(--cor-acao); }
.botao.secundario:hover { background: var(--cor-acao-fundo); }

.botao.texto { background: transparent; color: var(--cor-acao); padding-inline: var(--espaco-2); }
.botao.texto:hover { text-decoration: underline; text-underline-offset: 3px; }

.botao.destrutivo { background: var(--cor-erro); color: var(--cor-sobre-acao); }
.botao.destrutivo:hover { filter: brightness(.92); }

.botao[disabled], .botao[aria-disabled="true"] {
  background: var(--cor-superficie-alt);
  color: var(--cor-texto-secundario);
  border-color: var(--cor-borda-controle);
  cursor: not-allowed;
}
/* carregando: o giro é informação de estado, sobrevive a movimento reduzido */
.botao[aria-busy="true"]::before {
  content: "";
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--raio-pilula);
  animation: tp-girar 700ms var(--easing-linear) infinite;
  flex: none;
}
@keyframes tp-girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- chip */

.chips { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0; padding: 0; list-style: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--chip-altura);
  padding: var(--espaco-2) var(--espaco-4);
  border: var(--borda-controle-largura) solid var(--cor-borda-controle);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-size: var(--texto-sm);
  cursor: pointer;
  transition: background-color var(--duracao-instantanea) var(--easing-padrao);
}
.chip:hover { background: var(--cor-acao-fundo); }
/* selecionado: cor + borda grossa + marca de seleção. Nunca só a cor. */
.chip[aria-pressed="true"] {
  background: var(--cor-acao-fundo);
  border-color: var(--cor-acao);
  color: var(--cor-acao);
  font-weight: var(--peso-corpo-forte);
}
.chip[aria-pressed="true"]::before { content: "✓"; font-weight: var(--peso-corpo-forte); }

/* chip de estado (leitura, não ação) */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-xs);
  font-weight: var(--peso-corpo-forte);
  background: var(--cor-superficie-alt);
  color: var(--cor-texto-secundario);
}
.estado::before { content: ""; width: 8px; height: 8px; border-radius: var(--raio-pilula); background: currentColor; flex: none; }
.estado.sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.estado.alerta  { background: var(--cor-alerta-fundo);  color: var(--cor-alerta); }
.estado.erro    { background: var(--cor-erro-fundo);    color: var(--cor-erro-texto); }
.estado.info    { background: var(--cor-info-fundo);    color: var(--cor-info); }
.estado.destaque { background: var(--cor-destaque); color: var(--cor-sobre-destaque); }

/* ---------------------------------------------------------------- campo */

.campo { display: grid; gap: var(--espaco-2); margin-bottom: var(--espaco-5); }
.campo > label { font-weight: var(--peso-corpo-forte); font-size: var(--texto-sm); }
.campo .ajuda { font-size: var(--texto-sm); color: var(--cor-texto-secundario); margin: 0; }

.campo input, .campo select, .campo textarea {
  min-height: var(--campo-altura);
  width: 100%;
  padding: var(--espaco-3);
  border: var(--borda-controle-largura) solid var(--cor-borda-controle);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: var(--texto-base);   /* 16px impede o zoom automático do iOS */
}
.campo input::placeholder { color: var(--cor-texto-secundario); }
.campo input:hover, .campo select:hover { border-color: var(--cor-texto); }

/* erro: borda + ícone + texto. A cor é a terceira pista, não a única. */
.campo.com-erro input, .campo.com-erro select { border-color: var(--cor-erro); border-width: 2px; }
.campo .erro {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-corpo-forte);
  color: var(--cor-erro-texto);
  margin: 0;
}
.campo .erro::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: var(--raio-pilula); background: var(--cor-erro); color: var(--cor-superficie); font-size: var(--texto-xs); display: grid; place-items: center; font-family: var(--fonte-dado); }

.campo input[disabled], .campo select[disabled] { background: var(--cor-superficie-alt); color: var(--cor-texto-secundario); cursor: not-allowed; }

/* uma pergunta por tela */
.pergunta { max-width: var(--largura-formulario); display: grid; gap: var(--espaco-4); }
.pergunta h2 { font-size: var(--texto-2xl); }
.pergunta .passo { font-family: var(--fonte-dado); font-size: var(--texto-xs); color: var(--cor-texto-secundario); letter-spacing: var(--rotulo-tracking); text-transform: uppercase; }
.pergunta .acoes { display: flex; flex-direction: column-reverse; gap: var(--espaco-3); margin-top: var(--espaco-2); }

.progresso { height: var(--funil-trilha-altura); border-radius: var(--raio-pilula); background: var(--cor-superficie-alt); overflow: hidden; }
/* o preenchimento é VERDE, não lima: lima sobre trilha clara mede 1,09:1 */
.progresso > i { display: block; height: 100%; background: var(--cor-acao); border-radius: inherit; transition: width var(--duracao-lenta) var(--easing-padrao); }

@media (min-width: 600px) {
  .pergunta .acoes { flex-direction: row; justify-content: flex-end; }
}

/* ---------------------------------------------------------------- cartão */

.cartao {
  background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-card);
  padding: var(--espaco-5);
  display: grid;
  gap: var(--espaco-3);
}
.cartao.elevado { box-shadow: var(--sombra-1); }
.cartao > header { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); flex-wrap: wrap; }
.cartao h3 { margin: 0; }

/* ---------------------------------------------------------------- tile de número */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--espaco-3); }
.tile {
  background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-card);
  padding: var(--espaco-4);
}
.tile .n { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--texto-3xl); line-height: var(--altura-apertada); font-variant-numeric: tabular-nums; }
.tile .l { font-size: var(--texto-sm); color: var(--cor-texto-secundario); margin-top: var(--espaco-1); }
.tile .delta { font-family: var(--fonte-dado); font-size: var(--texto-xs); color: var(--cor-texto-secundario); }

/* a contagem de elegíveis: o número é o argumento de venda do produto */
.contagem { display: grid; gap: var(--espaco-2); }
.contagem .n {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--texto-numero);
  line-height: .95;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.contagem .n span { background: var(--cor-destaque); color: var(--cor-sobre-destaque); padding: 0 var(--espaco-2); border-radius: var(--raio-controle); box-decoration-break: clone; }
.contagem .n + p { margin-top: var(--espaco-2); }

/* ---------------------------------------------------------------- funil */

.funil { display: grid; gap: var(--espaco-3); margin: 0; }
.funil > div { display: grid; grid-template-columns: 1fr; gap: var(--espaco-1); }
.funil .cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-3); font-size: var(--texto-sm); }
.funil .cabeca b { font-family: var(--fonte-dado); font-weight: var(--peso-dado); font-variant-numeric: tabular-nums; }
.funil .trilha { height: var(--funil-trilha-altura); border-radius: var(--raio-pilula); background: var(--cor-superficie-alt); overflow: hidden; }
.funil .trilha > i { display: block; height: 100%; background: var(--cor-apoio); border-radius: inherit; }
.funil .trilha > i.ok { background: var(--cor-acao); }
.funil .trilha > i.parado { background: var(--cor-borda-controle); }

@media (min-width: 720px) {
  .funil > div { grid-template-columns: 11rem 1fr; align-items: center; gap: var(--espaco-4); }
  .funil .cabeca { display: block; }
}

/* ---------------------------------------------------------------- filtro */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  align-items: center;
  padding: var(--espaco-3);
  background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-card);
}
.filtros select, .filtros input {
  min-height: var(--alvo-minimo);
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--borda-controle-largura) solid var(--cor-borda-controle);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-size: var(--texto-sm);
}
.filtros .limpar { margin-left: auto; }

/* ---------------------------------------------------------------- tabela */

/* celular: cada linha vira um cartão com rótulo por célula (data-rotulo).
   Nenhuma tabela rola de lado. */
.tabela-caixa { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }
.tabela caption { text-align: left; font-size: var(--texto-sm); color: var(--cor-texto-secundario); margin-bottom: var(--espaco-2); }
.tabela thead { display: none; }
.tabela tbody tr {
  display: grid;
  gap: var(--espaco-1);
  padding: var(--espaco-3);
  background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-card);
  margin-bottom: var(--espaco-2);
}
.tabela td { display: flex; justify-content: space-between; gap: var(--espaco-4); padding: 0; border: 0; }
.tabela td::before {
  content: attr(data-rotulo);
  font-family: var(--fonte-dado);
  font-size: var(--texto-rotulo);
  letter-spacing: var(--rotulo-tracking);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  flex: none;
}
.tabela td.num { font-family: var(--fonte-dado); font-variant-numeric: tabular-nums; }

@media (min-width: 760px) {
  .tabela { background: var(--cor-superficie); border: var(--borda-fina) solid var(--cor-borda); border-radius: var(--raio-card); overflow: hidden; }
  .tabela thead { display: table-header-group; }
  .tabela th {
    text-align: left;
    padding: var(--espaco-3) var(--espaco-4);
    font-family: var(--fonte-dado);
    font-weight: var(--peso-dado);
    font-size: var(--texto-rotulo);
    letter-spacing: var(--rotulo-tracking);
    text-transform: uppercase;
    color: var(--cor-texto-secundario);
    border-bottom: var(--borda-fina) solid var(--cor-borda);
    background: var(--cor-superficie);
  }
  .tabela tbody tr { display: table-row; background: var(--cor-superficie); border: 0; border-radius: 0; margin: 0; }
  .tabela tbody tr + tr td { border-top: var(--borda-fina) solid var(--cor-borda); }
  .tabela td { display: table-cell; min-height: var(--tabela-linha-altura); padding: var(--espaco-3) var(--espaco-4); vertical-align: middle; }
  .tabela td::before { content: none; }
}

/* ---------------------------------------------------------------- aviso */

.aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  border-radius: var(--raio-card);
  border-left: 4px solid var(--cor-info);
  background: var(--cor-info-fundo);
  color: var(--cor-texto);
}
.aviso .icone { font-family: var(--fonte-dado); font-weight: var(--peso-dado); width: 24px; height: 24px; border-radius: var(--raio-pilula); display: grid; place-items: center; background: var(--cor-info); color: var(--cor-superficie); flex: none; }
/* O título do aviso NÃO é cabeçalho por decreto: ele acompanha a hierarquia da tela.
   Dentro de uma seção com h2, um h4 pula nível e o leitor de tela acusa (medido com
   accesslint em 02/10/2026). Sem cabeçalho pai adequado, use <p class="titulo">. */
.aviso .titulo { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo-medio); font-size: var(--texto-base); line-height: var(--altura-titulo); margin: 0 0 var(--espaco-1); }
.aviso h3, .aviso h4 { font-size: var(--texto-base); margin-bottom: var(--espaco-1); }
.aviso p { font-size: var(--texto-sm); }
.aviso .acoes { margin-top: var(--espaco-3); display: flex; flex-wrap: wrap; gap: var(--espaco-2); }

.aviso.sucesso { border-left-color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.aviso.sucesso .icone { background: var(--cor-sucesso); }
.aviso.alerta { border-left-color: var(--cor-alerta); background: var(--cor-alerta-fundo); }
.aviso.alerta .icone { background: var(--cor-alerta); }
.aviso.erro { border-left-color: var(--cor-erro); background: var(--cor-erro-fundo); }
.aviso.erro .icone { background: var(--cor-erro); }

/* ---------------------------------------------------------------- estados de tela */

.estado-tela {
  display: grid;
  gap: var(--espaco-4);
  justify-items: start;
  padding: var(--espaco-8) var(--espaco-5);
  background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-card);
  max-width: var(--largura-leitura);
}
.estado-tela h3 { font-size: var(--texto-xl); }
.estado-tela p { color: var(--cor-texto-secundario); }
.estado-tela .acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); }

/* carregando: esqueleto com a forma do conteúdo que vem, não um giro no vazio */
.esqueleto { display: grid; gap: var(--espaco-3); }
.esqueleto > i {
  display: block;
  height: 14px;
  border-radius: var(--raio-controle);
  background: var(--cor-superficie-alt);
  position: relative;
  overflow: hidden;
}
.esqueleto > i.titulo { height: 26px; width: 60%; }
.esqueleto > i.curto { width: 40%; }
@media (prefers-reduced-motion: no-preference) {
  .esqueleto > i::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--cor-superficie), transparent);
    animation: tp-varrer 1.2s var(--easing-linear) infinite;
  }
}
@keyframes tp-varrer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------------------------------------------------------------- utilidades de layout */

.pagina { max-width: var(--largura-conteudo); margin: 0 auto; padding-inline: var(--gutter); }
.pilha { display: grid; gap: var(--espaco-4); }
.pilha-larga { display: grid; gap: var(--espaco-8); }
/* item de grade nunca força a largura da trilha: sem isto, uma palavra longa
   (um e-mail, um nome de token) empurra a página inteira e nasce rolagem lateral */
.pilha > *, .pilha-larga > * { min-width: 0; }
.linha { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }
/* ---------------------------------------------------------------- hidden que esconde

   O navegador esconde [hidden] com `display: none` na folha DELE, e qualquer `display`
   declarado por classe nossa ganha dessa regra — folha de autor vence folha de navegador,
   mesmo com a especificidade igual. Resultado medido no D3.2: um <section class="pergunta"
   hidden> continuava na tela, e as 19 telas do cadastro apareciam de uma vez. Não dava
   erro de acessibilidade nem rolagem horizontal, então só a medição de quantos controles
   a página tem (1.862 onde cabiam 130) revelou. Daqui em diante hidden esconde. */
[hidden] { display: none !important; }

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