/* =====================================================================
   WorthCut — camada de componentes
   Depende de tokens.css (carregar antes). NENHUM hex aqui: se faltar
   uma cor, o certo é criar um token, não escrever a cor no componente.
   Galeria viva de tudo isto: painel/validacao.html
   ===================================================================== */

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

/* Reset de box-sizing. Antes disto o painel aplicava `border-box` caso
   a caso — em seis pontos —, e era exatamente por isso que a mesma
   classe de bug voltava: `<button>` nasce `border-box` no navegador e
   `<a>` nasce `content-box`, então um `min-height: 54px` dava 54 no
   botão e 74 no link, e o `stretch` do flex esticava a linha inteira
   (visto no tablet em 2026-08-02). Com o reset, altura e largura
   passam a significar a mesma coisa em todo elemento, e `width: 100%`
   com padding deixa de vazar do pai.

   A forma com `inherit` é a canônica: um componente que precise de
   `content-box` troca só no próprio nó e os filhos acompanham. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* `hidden` do HTML só vale se ninguém declarar `display` depois: o
   `display: none` dele vem da folha do navegador, então QUALQUER regra
   de autor o vence. Foi assim que os campos de batente ficaram
   visíveis numa máquina CNC — `.wc-campo { display: flex }` bastava
   para anular `caixa.hidden = true` (2026-08-02). Como o JS trata
   `hidden` como "não se aplica" e a coleta descarta o campo, o usuário
   preenchia um valor que sumia calado. Um `!important` aqui é o único
   jeito de o atributo voltar a significar o que promete — e vale para
   todo `hidden` do painel, não só para este. */
[hidden] { display: none !important; }

.wc-folha {
  max-width: var(--wc-largura-folha);
  margin: 0 auto;
  padding: var(--wc-e-5) var(--wc-e-4) var(--wc-e-6);
}
.wc-secao { display: flex; flex-direction: column; gap: var(--wc-e-4); }
.wc-prosa { max-width: var(--wc-largura-leitura); color: var(--wc-tinta-2); }

.wc-titulo, .wc-secao-titulo, .wc-sub {
  margin: 0; line-height: 1.2;
  text-wrap: balance;
  letter-spacing: var(--wc-tracking-titulo);
}
.wc-titulo       { font-size: var(--wc-txt-titulo); font-weight: var(--wc-peso-maximo); }
.wc-secao-titulo { font-size: var(--wc-txt-secao);  font-weight: var(--wc-peso-forte); }
.wc-sub          { font-size: var(--wc-txt-sub);    font-weight: var(--wc-peso-forte); }

/* divisória com ticks nas pontas — o desenho de cota */
.wc-cota { display: flex; align-items: center; margin: var(--wc-e-6) 0 var(--wc-e-4); }
.wc-cota-tick  { width: 1px; height: 9px; background: var(--wc-linha-forte); }
.wc-cota-barra { flex: 1; height: 1px; background: var(--wc-linha); }
.wc-cota .wc-rotulo { padding: 0 var(--wc-e-3); white-space: nowrap; }

/* --------------------------------------------------------- superfícies */

.wc-cartao {
  background: var(--wc-sup);
  border: 1px solid var(--wc-linha);
  border-radius: var(--wc-raio);
  padding: var(--wc-e-4);
  box-shadow: var(--wc-sombra);
}
.wc-cartao-alto { box-shadow: var(--wc-sombra-alta); }
.wc-grade { display: grid; gap: var(--wc-e-3); }
.wc-grade-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.wc-grade-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.wc-rolagem { overflow-x: auto; }

/* -------------------------------------------------------- barra do app */

.wc-barra {
  display: flex; align-items: center; gap: var(--wc-e-4);
  padding: var(--wc-e-2) var(--wc-e-4);
  background: var(--wc-sup);
  border: 1px solid var(--wc-linha);
  border-radius: var(--wc-raio);
  box-shadow: var(--wc-sombra);
}
.wc-barra .wc-logo { height: 24px; }
.wc-barra nav { display: flex; gap: var(--wc-e-4); font-size: var(--wc-txt-menor); }
.wc-barra nav a {
  color: var(--wc-tinta-2); text-decoration: none; padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--wc-transicao), border-color var(--wc-transicao);
}
.wc-barra nav a:hover { color: var(--wc-tinta); }
.wc-barra nav a[aria-current] {
  color: var(--wc-tinta); font-weight: var(--wc-peso-forte);
  border-bottom-color: var(--wc-marca);
}
.wc-barra-fim { margin-left: auto; display: flex; align-items: center; gap: var(--wc-e-3); }

.wc-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--wc-marca-tint); color: var(--wc-acao);
  display: grid; place-items: center;
  font-size: var(--wc-txt-apoio); font-weight: var(--wc-peso-maximo);
}

/* ------------------------------------------------------------- botões */

.wc-botao {
  font: inherit;
  font-family: var(--wc-fonte);
  font-size: var(--wc-txt-menor);
  font-weight: var(--wc-peso-forte);
  line-height: 1.2;
  display: inline-flex; align-items: center; gap: var(--wc-e-2);
  padding: 9px 16px;
  /* OBRIGATÓRIO, e não é enfeite: `<button>` nasce `border-box` no
     navegador, `<a>` nasce `content-box`. Com um `min-height` por cima
     (a tela do operador usa 54 px), o mesmo valor virava 54 no botão e
     54+18+2 = 74 no link — e como eles dividem uma linha flex, o link
     esticava os botões junto. Foi visto no tablet: três botões de 74 px
     com fonte de 14. */
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--wc-raio-p);
  cursor: pointer;
  transition: filter var(--wc-transicao), background var(--wc-transicao);
}
.wc-botao:hover { filter: brightness(1.06); }
.wc-botao:active { filter: brightness(0.96); }
.wc-botao[disabled], .wc-botao[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; filter: none;
}
.wc-botao-primario   { background: var(--wc-botao-fundo); color: var(--wc-botao-tinta); }
.wc-botao-secundario { background: var(--wc-sup); color: var(--wc-tinta); border-color: var(--wc-linha-forte); }
.wc-botao-fantasma   { background: transparent; color: var(--wc-tinta-2); }
.wc-botao-fantasma:hover { background: var(--wc-sup2); color: var(--wc-tinta); filter: none; }
.wc-botao-perigo     { background: transparent; color: var(--wc-erro); border-color: var(--wc-erro); }
.wc-botao-p { padding: 6px 11px; font-size: var(--wc-txt-apoio); }
.wc-botao-g { padding: 12px 22px; font-size: var(--wc-txt-corpo); }
.wc-botoes { display: flex; flex-wrap: wrap; gap: var(--wc-e-2); align-items: center; }

/* girinho de carregando — a única animação além do pulso */
.wc-girando { width: 14px; height: 14px; flex: none; animation: wc-giro 900ms linear infinite; }
@keyframes wc-giro { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- campos */

.wc-campo { display: flex; flex-direction: column; gap: var(--wc-e-1); }
.wc-campo > label {
  font-size: var(--wc-txt-apoio);
  font-weight: var(--wc-peso-forte);
  color: var(--wc-tinta-2);
}
.wc-campo input, .wc-campo select, .wc-campo textarea {
  font: inherit; font-family: var(--wc-fonte); font-size: 15px;
  color: var(--wc-tinta); background: var(--wc-sup);
  border: 1px solid var(--wc-linha-forte);
  border-radius: var(--wc-raio-p);
  padding: 9px 11px;
  transition: border-color var(--wc-transicao), box-shadow var(--wc-transicao);
}
.wc-campo input::placeholder, .wc-campo textarea::placeholder { color: var(--wc-tinta-3); }
.wc-campo input:focus, .wc-campo select:focus, .wc-campo textarea:focus {
  border-color: var(--wc-marca);
}
.wc-campo .wc-ajuda { font-size: 12.5px; color: var(--wc-tinta-3); }
.wc-medida { font-family: var(--wc-mono); font-variant-numeric: tabular-nums; }

/* estado: valor sobrescrito só neste job — âmbar é sempre "você mudou" */
.wc-campo-sobrescrito input {
  border-color: var(--wc-serie-2);
  box-shadow: inset 3px 0 0 var(--wc-serie-2);
}
.wc-campo-erro input, .wc-campo-erro select {
  border-color: var(--wc-erro);
  box-shadow: inset 3px 0 0 var(--wc-erro);
}
.wc-campo-erro .wc-ajuda { color: var(--wc-erro); }

/* interruptor */
.wc-chave { display: inline-flex; align-items: center; gap: var(--wc-e-2); cursor: pointer; }
.wc-chave input { position: absolute; opacity: 0; width: 0; height: 0; }
.wc-chave-trilho {
  width: 38px; height: 22px; border-radius: 99px; flex: none;
  background: var(--wc-linha-forte); position: relative;
  transition: background var(--wc-transicao);
}
.wc-chave-trilho::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--wc-sup);
  transition: transform var(--wc-transicao);
}
.wc-chave input:checked + .wc-chave-trilho { background: var(--wc-marca); }
.wc-chave input:checked + .wc-chave-trilho::after { transform: translateX(16px); }
.wc-chave input:focus-visible + .wc-chave-trilho {
  outline: 2px solid var(--wc-marca); outline-offset: 2px;
}

/* ------------------------------------------------- pílulas de estado */

.wc-pilula {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--wc-txt-apoio); font-weight: var(--wc-peso-medio);
  padding: 4px 10px 4px 8px;
  border-radius: var(--wc-raio-pilula);
  border: 1px solid var(--wc-linha-forte);
  color: var(--wc-tinta-2); background: var(--wc-sup2);
  white-space: nowrap;
}
.wc-pilula-ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.wc-pilula-andamento {
  color: var(--wc-andamento); border-color: var(--wc-andamento);
  background: var(--wc-marca-tint);
}
.wc-pilula-andamento .wc-pilula-ponto { animation: wc-pulso var(--wc-pulso); }
.wc-pilula-ok       { color: var(--wc-ok); border-color: var(--wc-ok); background: transparent; }
.wc-pilula-feito    { color: var(--wc-botao-tinta); background: var(--wc-ok); border-color: var(--wc-ok); }
.wc-pilula-falhou   { color: var(--wc-erro); border-color: var(--wc-erro); background: transparent; }
.wc-pilula-apagada  { opacity: .6; }
@keyframes wc-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* chip de material — identidade por cor de série, sempre com rótulo */
.wc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--wc-tinta-2);
}
.wc-chip::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px; flex: none;
  background: var(--cor-chip, var(--wc-serie-1));
}

/* --------------------------------------------------- banner e achado */

.wc-banner {
  display: flex; gap: var(--wc-e-3); align-items: flex-start;
  padding: var(--wc-e-3) var(--wc-e-4);
  border: 1px solid var(--wc-linha);
  border-left: 3px solid var(--wc-marca);
  border-radius: var(--wc-raio-p);
  background: var(--wc-marca-tint);
}
.wc-banner svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--wc-marca); }
.wc-banner-corpo { display: flex; flex-direction: column; gap: 3px; }
.wc-banner-titulo { font-weight: var(--wc-peso-forte); font-size: var(--wc-txt-menor); }
.wc-banner-texto  { font-size: var(--wc-txt-menor); color: var(--wc-tinta-2); }
.wc-banner-fim { margin-left: auto; display: flex; gap: var(--wc-e-2); align-items: center; }

.wc-banner-erro  { border-left-color: var(--wc-erro);  background: var(--wc-erro-tint); }
.wc-banner-erro svg { color: var(--wc-erro); }
.wc-banner-aviso { border-left-color: var(--wc-aviso); background: var(--wc-aviso-tint); }
.wc-banner-aviso svg { color: var(--wc-aviso); }
.wc-banner-ok    { border-left-color: var(--wc-ok); background: var(--wc-sup2); }
.wc-banner-ok svg { color: var(--wc-ok); }

/* Achado do /v1/diagnostico: é um banner (use .wc-banner + a severidade)
   com estes três filhos — campo apontado, mensagem e código. */
.wc-achado-alvo { font-family: var(--wc-mono); font-size: 12.5px; color: var(--wc-tinta-2); }
.wc-achado-msg  { font-size: var(--wc-txt-menor); color: var(--wc-tinta); }
.wc-achado-cod  { font-family: var(--wc-mono); font-size: 11px; color: var(--wc-tinta-3); }

/* ----------------------------------------------------- tiles e dados */

.wc-tile {
  background: var(--wc-sup); border: 1px solid var(--wc-linha);
  border-radius: var(--wc-raio); padding: var(--wc-e-4);
  box-shadow: var(--wc-sombra);
  display: flex; flex-direction: column; gap: var(--wc-e-2);
}
.wc-tile-valor {
  font-family: var(--wc-mono); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 600; line-height: 1;
  letter-spacing: var(--wc-tracking-titulo);
}
.wc-tile-un   { font-size: var(--wc-txt-apoio); color: var(--wc-tinta-3); margin-left: 4px; }
.wc-tile-apoio { font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2); }

/* barra de rateio: os dois bolsos separados pelo KERF */
.wc-rateio {
  display: flex; gap: var(--wc-kerf); height: 8px;
  border-radius: 4px; overflow: hidden; background: var(--wc-sup2);
}
.wc-rateio > i { display: block; height: 100%; }

/* gráfico de barras — vão de 2px, ponta arredondada, extremo destacado */
.wc-grafico { position: relative; }
.wc-barras { display: flex; align-items: flex-end; gap: var(--wc-kerf); height: 120px; }
.wc-barras button {
  flex: 1; display: flex; align-items: flex-end; height: 100%;
  background: none; border: 0; padding: 0; cursor: default;
}
.wc-barras button > i {
  display: block; width: 100%; min-height: 2px;
  background: var(--wc-serie-1); border-radius: 4px 4px 0 0;
}
.wc-barras button.vazio > i { background: var(--wc-linha); }
.wc-barras button.hoje  > i { background: var(--wc-marca); }
.wc-barras button:hover > i, .wc-barras button:focus-visible > i { filter: brightness(1.14); }
.wc-dica {
  position: absolute; pointer-events: none; opacity: 0; z-index: 5;
  transform: translate(-50%, -8px);
  background: var(--wc-tinta); color: var(--wc-sup);
  font-family: var(--wc-mono); font-size: 12px;
  padding: 6px 9px; border-radius: 6px; white-space: nowrap;
  transition: opacity var(--wc-transicao);
}
.wc-dica.on { opacity: 1; }

/* tabela */
.wc-tabela { width: 100%; border-collapse: collapse; font-size: var(--wc-txt-menor); }
.wc-tabela th {
  text-align: left; padding: 0 var(--wc-e-3) var(--wc-e-2);
  font-family: var(--wc-mono); font-size: var(--wc-txt-micro);
  font-weight: var(--wc-peso-forte); letter-spacing: var(--wc-tracking-micro);
  text-transform: uppercase; color: var(--wc-tinta-3);
}
.wc-tabela td { padding: var(--wc-e-3); border-top: 1px solid var(--wc-linha); }
.wc-tabela tbody tr:hover { background: var(--wc-sup2); }
.wc-tabela .id { font-family: var(--wc-mono); font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2); }
.wc-tabela .n  { font-family: var(--wc-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* --------------------------------------------------- plano de corte */

.wc-plano {
  background: var(--wc-sup); border: 1px solid var(--wc-linha);
  border-radius: var(--wc-raio); padding: var(--wc-e-4);
  box-shadow: var(--wc-sombra-alta);
}
.wc-plano svg { width: 100%; height: auto; display: block; }
.wc-plano-topo {
  display: flex; align-items: baseline; gap: var(--wc-e-3);
  flex-wrap: wrap; margin-bottom: var(--wc-e-3);
}
.wc-legenda {
  display: flex; flex-wrap: wrap; gap: var(--wc-e-4);
  margin-top: var(--wc-e-3); padding-top: var(--wc-e-3);
  border-top: 1px solid var(--wc-linha);
}
.wc-legenda > span { display: flex; align-items: center; gap: var(--wc-e-2);
                     font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2); }
.wc-legenda i { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid; flex: none; }

/* ------------------------------------------------- vazio e carregando */

.wc-vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--wc-e-3);
  padding: var(--wc-e-6) var(--wc-e-4); text-align: center;
  border: 1px dashed var(--wc-linha-forte); border-radius: var(--wc-raio);
  background: var(--wc-sup2);
}
.wc-vazio svg { width: 40px; height: 40px; color: var(--wc-tinta-3); }
.wc-vazio p { max-width: 46ch; color: var(--wc-tinta-2); font-size: var(--wc-txt-menor); margin: 0; }

.wc-esqueleto {
  border-radius: var(--wc-raio-p);
  background: linear-gradient(90deg, var(--wc-sup2) 0%, var(--wc-linha) 50%, var(--wc-sup2) 100%);
  background-size: 200% 100%;
  animation: wc-brilho 1.4s ease-in-out infinite;
}
@keyframes wc-brilho { to { background-position: -200% 0; } }

/* ------------------------------------------------------ abas, diálogo */

.wc-abas { display: flex; gap: var(--wc-e-4); border-bottom: 1px solid var(--wc-linha); }
.wc-abas button {
  font: inherit; font-family: var(--wc-fonte); font-size: var(--wc-txt-menor);
  background: none; border: 0; cursor: pointer;
  color: var(--wc-tinta-2); padding: var(--wc-e-2) 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.wc-abas button[aria-selected="true"] {
  color: var(--wc-tinta); font-weight: var(--wc-peso-forte);
  border-bottom-color: var(--wc-marca);
}

.wc-dialogo {
  background: var(--wc-sup); border: 1px solid var(--wc-linha-forte);
  border-radius: var(--wc-raio); box-shadow: var(--wc-sombra-alta);
  padding: var(--wc-e-5); max-width: 460px;
  display: flex; flex-direction: column; gap: var(--wc-e-3);
}
.wc-dialogo-acoes { display: flex; gap: var(--wc-e-2); justify-content: flex-end; margin-top: var(--wc-e-2); }

.wc-toast {
  display: flex; align-items: center; gap: var(--wc-e-3);
  background: var(--wc-tinta); color: var(--wc-sup);
  border-radius: var(--wc-raio-p); padding: var(--wc-e-3) var(--wc-e-4);
  box-shadow: var(--wc-sombra-alta); font-size: var(--wc-txt-menor);
  max-width: 420px;
}
.wc-toast svg { width: 18px; height: 18px; flex: none; }
.wc-toast .wc-toast-acao {
  margin-left: auto; color: inherit; background: none; border: 0;
  font: inherit; font-weight: var(--wc-peso-forte); cursor: pointer;
  text-decoration: underline; padding: 0;
}

/* ------------------------------------------------- ponteiro grosso */
/* Dedo (e dedo com luva) em qualquer tela do painel, não só na de
   execução. Medido no tablet: os botões das listas ficavam em 30 px e
   os de ação em 37 — acima do mínimo de 24 px do WCAG, abaixo dos 44
   de boa prática. O teste é o PONTEIRO, não a largura: tablet grande
   é largo E é toque.
   Só o piso muda; quem já é maior (a tela do operador usa 54, e 64 no
   quiosque) fica como está. */
@media (pointer: coarse) {
  /* O compacto também vai a 44: ele é o "Apagar" ao lado do "Editar"
     nas listas, e alvo pequeno em ação destrutiva é toque errado. */
  .wc-botao, .wc-botao-p { min-height: 44px; }
  .wc-botao-p { padding: 8px 13px; }

  /* Campo por SELETOR DE ELEMENTO, não por `.wc-campo`: as linhas de
     peça do novo plano montam `input`/`select` soltos, fora daquele
     invólucro, e ficavam em 38 e 35 px — justamente os campos mais
     usados do painel. Caixa e rádio ficam de fora: no interruptor eles
     são escondidos de propósito (0×0) e quem recebe o toque é o
     trilho. */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { min-height: 44px; }

  summary { min-height: 44px; display: flex; align-items: center; }
  .wc-abas button { min-height: 44px; }
  /* A ação do toast é um link de texto (22 px). Cresce o ALVO sem
     inchar o desenho: a altura vai a 44 e a margem negativa devolve o
     espaço, então o toast não muda de tamanho. */
  .wc-toast-acao { min-height: 44px; padding-inline: 10px; margin-block: -11px; }

  /* linhas de tabela com ação: mais respiro, senão o alvo cresce e
     encosta no vizinho */
  .wc-tabela td, .wc-tabela th { padding-block: 10px; }
}