/* componentes.css: gerado a partir de components: e das seções Components e Shapes do DESIGN.md da RODA.
   Só usa os tokens de tokens.css: nenhuma cor, fonte ou raio literal aqui (as únicas medidas literais são
   as de componente que o DESIGN.md fixa: alturas, bordas, alvos de toque). Sem sombra (R005), cantos
   arredondados (R011). Nomes de classe da versão de 29/09 mantidos e o comportamento delas não mudou:
   uma peça nova plugue nelas sem reinventar. Estados: capítulo confirmado (R009, R011); o resto proposto. */

/* ---------- capítulo: fundo cheio, largura de página; uma cor por bloco ---------- */
.cap { padding-block: var(--spacing-xl); padding-inline: var(--spacing-lg); position: relative; overflow: hidden; }
.cap.c-amarelo  { background-color: var(--color-amarelo);  color: var(--color-preto); }
.cap.c-preto    { background-color: var(--color-preto);    color: var(--color-branco); }
.cap.c-branco   { background-color: var(--color-branco);   color: var(--color-preto); }
.cap.c-verde    { background-color: var(--color-verde);    color: var(--color-preto); }
.cap.c-azul     { background-color: var(--color-azul);     color: var(--color-branco); }
.cap.c-rosa     { background-color: var(--color-rosa);     color: var(--color-preto); }
/* vermelho: só título, rótulo curto ou número (R008; branco sobre vermelho é 4,29:1, não passa em parágrafo) */
.cap.c-vermelho { background-color: var(--color-vermelho); color: var(--color-branco); }

/* ---------- texto ---------- */
.rotulo {
  font-family: var(--font-label-family); font-size: var(--font-label-size); font-weight: var(--font-label-weight);
  line-height: var(--font-label-line-height); letter-spacing: var(--font-label-letter-spacing);
  text-transform: uppercase; display: flex; align-items: center; gap: 14px; margin: 0 0 var(--spacing-sm);
}
.rotulo::after { content: ""; flex: 1; height: 2px; background: currentColor; opacity: .9; }

.titulo-display {
  font-family: var(--font-display-family); font-size: var(--font-display-size); font-weight: var(--font-display-weight);
  line-height: var(--font-display-line-height); letter-spacing: var(--font-display-letter-spacing); margin: 0;
  hyphens: none; text-wrap: balance;
}
.titulo-headline {
  font-family: var(--font-headline-family); font-size: var(--font-headline-size); font-weight: var(--font-headline-weight);
  line-height: var(--font-headline-line-height); letter-spacing: var(--font-headline-letter-spacing); margin: 0;
  hyphens: none; text-wrap: balance;
}
.subtitulo {
  font-family: var(--font-subtitulo-family); font-size: var(--font-subtitulo-size); font-weight: var(--font-subtitulo-weight);
  line-height: var(--font-subtitulo-line-height); letter-spacing: var(--font-subtitulo-letter-spacing); margin: 0;
  hyphens: none; text-wrap: balance;
}
.lead {
  font-family: var(--font-lead-family); font-size: var(--font-lead-size); font-weight: var(--font-lead-weight);
  line-height: var(--font-lead-line-height); max-width: 30em; margin: 0;
}
.corpo {
  font-family: var(--font-body-family); font-size: var(--font-body-size); font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height); max-width: 36em; margin: 0; text-align: left; hyphens: manual;
}
.legenda {
  font-family: var(--font-legenda-family); font-size: var(--font-legenda-size); font-weight: var(--font-legenda-weight);
  line-height: var(--font-legenda-line-height); letter-spacing: var(--font-legenda-letter-spacing);
  text-transform: uppercase; margin: 0; hyphens: none;
}
.numero-grande {
  font-family: var(--font-numero-family); font-size: var(--font-numero-size); font-weight: var(--font-numero-weight);
  line-height: var(--font-numero-line-height); letter-spacing: var(--font-numero-letter-spacing);
}

/* ---------- botões: um primário por tela ---------- */
.botao-acao, .botao-secundario, .botao-sobre-escuro {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs);
  min-height: 52px; padding: 14px var(--spacing-x24);
  font-family: var(--font-label-family); font-size: var(--font-label-size); font-weight: var(--font-label-weight);
  letter-spacing: var(--font-label-letter-spacing); line-height: 1; text-transform: uppercase; text-decoration: none;
  border: var(--border-padrao) solid transparent; border-radius: var(--rounded-full); cursor: pointer;
  transition: background-color var(--motion-rapido) var(--ease-padrao), color var(--motion-rapido) var(--ease-padrao);
}
.botao-acao { background-color: var(--color-azul); color: var(--color-branco); border-color: var(--color-azul); }
.botao-acao:hover { background-color: var(--color-preto); border-color: var(--color-preto); }
.botao-secundario { background-color: transparent; color: currentColor; border-color: currentColor; }
.botao-secundario:hover { background-color: var(--color-preto); color: var(--color-branco); border-color: var(--color-preto); }
.botao-sobre-escuro { background-color: var(--color-amarelo); color: var(--color-preto); border-color: var(--color-amarelo); }
.botao-sobre-escuro:hover { background-color: var(--color-branco); border-color: var(--color-branco); }
.botao-acao:focus-visible, .botao-secundario:focus-visible, .botao-sobre-escuro:focus-visible {
  outline: var(--foco-largura) solid currentColor; outline-offset: var(--foco-afastamento);
}
.botao-acao:active, .botao-secundario:active, .botao-sobre-escuro:active { transform: scale(.98); }
.botao-acao:disabled, .botao-secundario:disabled, .botao-sobre-escuro:disabled, [aria-disabled="true"].botao-acao {
  background-color: transparent; color: currentColor; border: var(--border-fina) dashed currentColor; cursor: not-allowed; transform: none;
}
@media (max-width: 639px) { .botao-acao, .botao-secundario, .botao-sobre-escuro { min-height: 48px; } }

/* compatibilidade com 29/09: <button> e .botao ficam em raio total */
.botao, button { border-radius: var(--rounded-full); }

/* ---------- link ---------- */
.link { color: currentColor; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.link:hover { background-color: var(--color-amarelo); color: var(--color-preto); text-decoration: none; }
.c-amarelo .link:hover { background-color: var(--color-preto); color: var(--color-amarelo); }
.link:focus-visible { outline: var(--foco-largura) solid currentColor; outline-offset: var(--foco-afastamento); border-radius: 2px; }

/* ---------- tag, seletor de classe, marcador ---------- */
.tag {
  display: inline-flex; align-items: center; min-height: var(--spacing-md); padding: 6px var(--spacing-sm);
  background-color: var(--color-preto); color: var(--color-branco);
  border: var(--border-fina) solid var(--color-preto); border-radius: var(--rounded-full);
  font-family: var(--font-legenda-family); font-size: var(--font-legenda-size); font-weight: var(--font-legenda-weight);
  letter-spacing: .12em; line-height: 1; text-transform: uppercase;
}
.tag-amarela { background-color: var(--color-amarelo); color: var(--color-preto); border-color: var(--color-preto); }
.tag-vazada  { background-color: transparent; color: currentColor; border-color: currentColor; }
.seletor-classe {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  background-color: var(--color-branco); color: var(--color-preto); border: var(--border-padrao) solid var(--color-preto);
  border-radius: var(--rounded-full); font-family: var(--font-subtitulo-family); font-weight: 700; font-size: 30px; line-height: 1;
}
.seletor-classe[aria-pressed="true"] { background-color: var(--color-preto); color: var(--color-branco); }
.marcador-circular { width: var(--spacing-x24); height: var(--spacing-x24); border-radius: var(--rounded-full); background-color: var(--color-vermelho); }

/* ---------- cartão: borda sólida, nunca sombra ---------- */
.cartao {
  background-color: var(--color-branco); color: var(--color-preto);
  border: var(--border-fina) solid currentColor; border-radius: var(--rounded-md); padding: var(--spacing-md);
}
.cartao-amarelo { background-color: var(--color-amarelo); }
a.cartao:hover, .cartao[tabindex]:hover { border-width: var(--border-forte); padding: calc(var(--spacing-md) - 2px); }
a.cartao:focus-visible, .cartao[tabindex]:focus-visible { outline: var(--foco-largura) solid currentColor; outline-offset: var(--foco-afastamento); }
.foto, figure img { border-radius: var(--rounded-md); }

/* ---------- etiqueta de lote 60 x 100 mm (709 x 1181 px a 300 dpi) ---------- */
.etiqueta-lote {
  position: relative; width: 709px; height: 1181px; overflow: hidden;
  background-color: var(--color-branco); color: var(--color-preto);
  border: var(--border-impressa) solid currentColor; border-radius: 48px;
}
.etiqueta-lote .topo { position: relative; height: 330px; background-color: var(--color-amarelo); border-bottom: var(--border-impressa) solid currentColor; }
.etiqueta-lote .furo { position: absolute; left: 50%; top: 34px; width: 64px; height: 64px; margin-left: -32px;
  border-radius: var(--rounded-full); border: var(--border-impressa) solid currentColor; background-color: var(--color-branco); }
.etiqueta-lote dl { margin: 0; padding: 0 56px; }
.etiqueta-lote dl > div { display: grid; grid-template-columns: 200px 1fr; padding: 15px 0; align-items: baseline;
  border-bottom: var(--border-padrao) dashed currentColor; }
.etiqueta-lote dt { font-family: var(--font-legenda-family); font-weight: 700; font-size: 21px; letter-spacing: .08em; text-transform: uppercase; }
.etiqueta-lote dd { margin: 0; font-size: 28px; line-height: 1.2; }

/* ---------- tabela ---------- */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; border: var(--border-fina) solid var(--color-preto);
  border-radius: var(--rounded-md); overflow: hidden; background-color: var(--color-branco); color: var(--color-preto); }
.tabela th { background-color: var(--color-preto); color: var(--color-branco); text-align: left; padding: var(--spacing-sm);
  font-family: var(--font-label-family); font-size: var(--font-label-size); font-weight: var(--font-label-weight);
  letter-spacing: var(--font-label-letter-spacing); text-transform: uppercase; }
.tabela td { padding: var(--spacing-sm); border-top: var(--border-fina) solid var(--color-preto); font-size: 17px; line-height: 1.4; }
.tabela td.num, .tabela th.num { text-align: right; }
.tabela tbody tr:hover td { background-color: var(--color-amarelo); }
.tabela tfoot td { background-color: var(--color-amarelo); font-family: var(--font-subtitulo-family); font-weight: 700; font-size: 24px; }
@media (max-width: 639px) {
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela tr, .tabela td { display: block; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-family: var(--font-legenda-family); font-weight: 700;
    font-size: var(--font-legenda-size); letter-spacing: var(--font-legenda-letter-spacing); text-transform: uppercase; }
}

/* ---------- formulário ---------- */
.campo-rotulo { display: block; margin-bottom: var(--spacing-xs); font-family: var(--font-label-family); font-size: var(--font-label-size);
  font-weight: var(--font-label-weight); letter-spacing: var(--font-label-letter-spacing); text-transform: uppercase; }
.campo { display: block; width: 100%; min-height: 52px; padding: var(--spacing-sm);
  background-color: var(--color-branco); color: var(--color-preto); border: var(--border-padrao) solid var(--color-preto);
  border-radius: var(--rounded-md); font-family: var(--font-body-family); font-size: 18px; line-height: 1.3; }
.campo:hover { border-width: var(--border-forte); padding: calc(var(--spacing-sm) - 1px); }
.campo:focus-visible { outline: var(--foco-largura) solid var(--color-preto); outline-offset: var(--foco-afastamento); }
.campo[aria-invalid="true"] { border-color: var(--color-vermelho); }
.campo:disabled { border-style: dashed; }
.mensagem { display: flex; gap: var(--spacing-xs); padding: var(--spacing-sm); background-color: var(--color-branco); color: var(--color-preto);
  border: var(--border-padrao) solid var(--color-preto); border-radius: var(--rounded-md); font-size: 17px; line-height: 1.4; }
.mensagem.erro { border-color: var(--color-vermelho); }
.mensagem.sucesso { border-color: var(--color-verde); }
.mensagem.aviso { border-color: var(--color-amarelo); }

/* ---------- navegação e rodapé ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-height: 72px;
  padding-inline: var(--grade-web-margem); background-color: var(--color-amarelo); color: var(--color-preto); }
.nav.escura { background-color: var(--color-preto); color: var(--color-branco); }
.nav a { color: currentColor; text-decoration: none; font-family: var(--font-label-family); font-size: var(--font-label-size);
  font-weight: var(--font-label-weight); letter-spacing: var(--font-label-letter-spacing); text-transform: uppercase; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.nav a:focus-visible { outline: var(--foco-largura) solid currentColor; outline-offset: var(--foco-afastamento); }
@media (max-width: 639px) { .nav { min-height: 64px; } }
.rodape { background-color: var(--color-preto); color: var(--color-branco); padding: var(--spacing-xl) var(--grade-web-margem); }

/* ---------- grafismo e letreiro (SVG com currentColor) ---------- */
.grafismo, .letreiro { display: block; color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .grafismo.gira { animation: roda-gira var(--motion-giro) linear infinite; }
}
@keyframes roda-gira { to { transform: rotate(360deg); } }