/* ============ WMS · SM PRO — componentes ============
   Placas, formulários, botões, recados, tabelas, estado e utilitários do sistema de desenho:
   cantos arredondados, fio suave e sombra em camadas. Tokens em style/main.css.
   Vitrine: public/prototipo/ (http://127.0.0.1:3100/prototipo/componentes.html). */

/* ---------- Placas: superfície solta do chão pela sombra, com o título numa faixa ---------- */
.painel-form, .bloco, .cartao {
  min-width: 0; padding: var(--by) var(--bx); background: var(--placa); border: 1px solid var(--fio);
  border-radius: var(--raio-placa); box-shadow: var(--sombra-1), var(--brilho);
}
:is(.painel-form, .bloco) > h2, .bloco-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  margin: calc(var(--by) * -1) calc(var(--bx) * -1) var(--by); padding: 8px var(--bx); border-bottom: 1px solid var(--fio);
}
:is(.painel-form, .bloco) > h2, .bloco-topo h3 { font: 640 14.5px/1.35 var(--fonte); color: var(--forte); }
:is(.painel-form, .bloco) > h2 { justify-content: flex-start; gap: 0; }
.bloco-topo > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.bloco-topo small { font-size: 12.5px; color: var(--apagado); }
.bloco-total { font: 680 15px var(--fonte); letter-spacing: -.01em; }
.bloco-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 550; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.bloco-link:hover { color: var(--forte); }
.bloco-link .icone { transition: transform var(--medio) var(--curva); }
.bloco-link:hover .icone { transform: translateX(3px); }
/* destaque = o passo da vez: contorno âmbar (a cor do que está em andamento) */
.painel-form.destaque { border-color: color-mix(in oklab, var(--ambar) 70%, var(--fio)); box-shadow: var(--sombra-1), 0 0 0 3px color-mix(in oklab, var(--ambar) 14%, transparent); }
.painel-form.destaque > h2 { border-bottom-color: color-mix(in oklab, var(--ambar) 30%, var(--fio)); }
.painel-form > form + .ajuda { margin-top: 10px; }
.lado-a-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
a.cartao, .cartao-link {
  display: block; color: inherit; text-decoration: none;
  transition: border-color var(--rapido) var(--curva), box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva);
}
a.cartao:hover, .cartao-link:hover { border-color: var(--fio-forte); box-shadow: var(--sombra-2), var(--brilho); transform: translateY(-1px); }

/* ---------- Formulários ---------- */
/* Os controles alinham pela base: com rótulo em cima (.campo) ou sem, campo e botão ficam na mesma linha. */
form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0; }
form + form { margin-top: 10px; }
input, select, textarea {
  font: inherit; color: var(--forte); height: var(--alto); padding: 0 12px; min-width: 0;
  background: var(--campo); border: 1px solid var(--fio-forte); border-radius: var(--raio);
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
textarea { height: auto; min-height: 88px; padding: 9px 12px; }
input::placeholder, textarea::placeholder { color: var(--apagado); font-family: var(--fonte); }
input:hover, select:hover, textarea:hover { border-color: var(--apagado); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: var(--foco); }
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
input[type="number"] { width: 104px; }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; padding: 0; flex: none; accent-color: var(--acao); box-shadow: none; }
.busca {
  width: 100%; height: 40px; padding-left: 40px; background: var(--campo) no-repeat 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239b9ba3' stroke-width='1.8' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.check { display: inline-flex; align-items: center; gap: 9px; color: var(--tinta); cursor: pointer; }
form > .check { min-height: var(--alto); }
/* .campo: rótulo em cima, controle embaixo. O texto do rótulo vai num <span>; a ajuda, num <small>. */
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font: var(--rotulo); color: var(--tinta); }
.campo > small { font-size: 12.5px; color: var(--apagado); }
.campo.com-erro :is(input, select, textarea) { border-color: var(--vermelho); }
.campo.com-erro > small { color: color-mix(in oklab, var(--vermelho) 70%, var(--forte)); }
/* Na linha da tabela o rótulo não aparece (a coluna já diz o que é), mas segue valendo para o leitor de tela. */
td .campo { position: relative; }
td .campo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; align-items: end; }

/* ---------- Botões ----------
   Sem classe = primário, um por contexto: cheio, na cor de maior contraste.
   .secundario = preenchimento suave; .discreto = só texto; .perigo = vermelho suave.
   Tamanhos: .pequeno e .grande. .carregando troca o conteúdo pelo giro. */
button, .botao, .botao-icone {
  font: 580 13.5px/1 var(--fonte); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--alto); padding: 0 16px; border: 1px solid transparent; border-radius: var(--raio);
  cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none;
  color: var(--sobre-acao); background: var(--acao); box-shadow: var(--sombra-1);
  transition: background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva), color var(--rapido) var(--curva),
    box-shadow var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
button:hover, .botao:hover { background: color-mix(in oklab, var(--acao) 86%, var(--chao)); }
button:active, .botao:active { background: color-mix(in oklab, var(--acao) 76%, var(--chao)); transform: scale(.98); }
button.secundario, .botao.secundario, button.discreto, .botao.discreto, button.perigo, .botao.perigo, .botao-icone, td button:not([class]) {
  color: var(--forte); background: var(--botao); border-color: var(--fio); box-shadow: none;
}
button.secundario:hover, .botao.secundario:hover, .botao-icone:hover { background: var(--botao-passar); border-color: var(--fio-forte); }
button.secundario:active, .botao.secundario:active, .botao-icone:active { background: var(--escolhido); }
button.discreto, .botao.discreto { padding: 0 12px; border-color: transparent; background: transparent; color: var(--tinta); }
button.discreto:hover, .botao.discreto:hover { background: var(--passar); color: var(--forte); }
button.perigo, .botao.perigo { color: color-mix(in oklab, var(--vermelho) 72%, var(--forte)); background: color-mix(in oklab, var(--vermelho) 12%, transparent); border-color: transparent; }
button.perigo:hover, .botao.perigo:hover { background: color-mix(in oklab, var(--vermelho) 20%, transparent); }
button.largo, .botao.largo { width: 100%; height: 40px; }
button.pequeno, .botao.pequeno { height: var(--alto-p); padding: 0 12px; font-size: 13px; border-radius: 8px; }
button.grande, .botao.grande { height: var(--alto-g); padding: 0 22px; font-size: 14.5px; border-radius: 12px; }
.botao-icone { width: var(--alto); padding: 0; }
.carregando { position: relative; color: transparent !important; pointer-events: none; }
.carregando::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--giro, var(--sobre-acao)); border-right-color: transparent; animation: giro 700ms linear infinite;
}
:is(.secundario, .discreto, .botao-icone).carregando { --giro: var(--forte); }
@keyframes giro { to { transform: rotate(1turn); } }

/* Segmentado: trilho arredondado; filhos são <button> ou <a>; o escolhido (.ativo, aria-current ou aria-pressed) sobe numa ficha. */
.segmentos { display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; background: var(--campo); border: 1px solid var(--fio); border-radius: calc(var(--raio) + 3px); }
.segmentos > * {
  flex: none; display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 34px; padding: 0 13px;
  font: 560 13px/1 var(--fonte); border: 0; border-radius: var(--raio); background: transparent; box-shadow: none;
  color: var(--tinta); text-decoration: none; cursor: pointer;
}
.segmentos > *:is(:hover, :active) { background: var(--passar); color: var(--forte); transform: none; }
.segmentos > .ativo, .segmentos > [aria-current="page"], .segmentos > [aria-pressed="true"],
.segmentos > .ativo:hover, .segmentos > [aria-current="page"]:hover, .segmentos > [aria-pressed="true"]:hover {
  background: var(--botao-passar); color: var(--forte); box-shadow: var(--sombra-1), var(--brilho);
}
:root[data-tema="claro"] .segmentos { background: var(--botao); border-color: transparent; }
:root[data-tema="claro"] .segmentos > :is(.ativo, [aria-current="page"], [aria-pressed="true"]) { background: var(--placa); }

/* ---------- Recados: fundo suave na cor do estado; a palavra na frente diz qual é ---------- */
.erro, .ok, .cuidado, .informe {
  --c: var(--azul); display: flex; align-items: baseline; gap: 10px; margin: 12px 0; padding: 11px 14px;
  color: var(--forte); border-radius: var(--raio);
  background: color-mix(in oklab, var(--c) 10%, var(--placa)); border: 1px solid color-mix(in oklab, var(--c) 32%, transparent);
}
.erro { --c: var(--vermelho); } .ok { --c: var(--verde); } .cuidado { --c: var(--ambar); } .informe { --c: var(--azul); }
/* A palavra leva a cor do estado misturada à tinta forte: a cor crua não dá contraste no tema claro. */
.erro::before, .ok::before, .cuidado::before, .informe::before { flex: none; font: 680 13px var(--fonte); color: color-mix(in oklab, var(--c) 70%, var(--forte)); }
.erro::before { content: "Erro"; } .ok::before { content: "Feito"; } .cuidado::before { content: "Atenção"; } .informe::before { content: "Aviso"; }

/* ---------- Tabelas ---------- */
.tabela { overflow: auto; max-height: calc(100vh - 150px); background: var(--placa); border: 1px solid var(--fio); border-radius: var(--raio-placa); box-shadow: var(--sombra-1), var(--brilho); }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 10px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--fio); }
th {
  position: sticky; top: 0; z-index: 1; white-space: nowrap; font: var(--rotulo); color: var(--apagado);
  background: color-mix(in oklab, var(--placa) 60%, var(--chao));
}
tbody tr { transition: background-color var(--rapido) var(--curva); }
tbody tr:hover td { background: var(--passar); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
td.num { color: var(--forte); font-weight: 520; }
/* Código (endereço, SKU) sai em mono: é dado que se confere letra a letra. */
td.cod { font-family: var(--mono); font-size: 12.5px; color: var(--forte); }
td a { color: var(--forte); font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
td:first-child a { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
td:first-child, td:nth-child(2) { white-space: nowrap; }
td form { flex-wrap: nowrap; justify-content: flex-end; }
td form input { height: var(--alto-p); width: 132px; flex: none; border-radius: 8px; }
td form input[type="number"] { width: 76px; }
/* Dentro da linha o botão é suave e fica cheio ao passar: o primário cheio em repouso fica para a placa. */
td button { height: var(--alto-p); padding: 0 12px; font-size: 13px; border-radius: 8px; }
td button:not([class]):hover { color: var(--sobre-acao); background: var(--acao); border-color: var(--acao); }
/* Lista sem nada: uma linha só, dizendo o que fazer. */
tr.vazio td, tbody tr.vazio:hover td { padding: 30px 16px; text-align: center; white-space: normal; color: var(--apagado); background: none; }
tr.alerta td { background: color-mix(in oklab, var(--ambar) 8%, transparent); }
tr.feito td, tr.feito td.num, tr.feito strong { color: var(--apagado); }

/* ---------- Estado: pílula com o ponto na cor e a situação escrita ---------- */
.status {
  --c: var(--apagado); display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 10px 0 8px; white-space: nowrap;
  border-radius: var(--raio-pilula); font: 580 12px/1 var(--fonte);
  color: color-mix(in oklab, var(--c) 72%, var(--forte)); background: color-mix(in oklab, var(--c) 14%, transparent);
}
.status::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c); }
.status.separando, .status.pendente, .status.ajuste { --c: var(--ambar); }
.status.conferido, .status.separado, .status.separada { --c: var(--azul); }
.status.armazenado, .status.expedido, .status.expedida, .status.finalizado, .status.resolvido, .status.ativo { --c: var(--verde); }
.status.erro, .status.falha, .status.divergente, .status.cancelado { --c: var(--vermelho); }

/* Tom de estado: define --c para .sinal, .status e linhas de atenção. */
.tom-alerta { --c: var(--vermelho); } .tom-aviso { --c: var(--ambar); }
.tom-info { --c: var(--azul); } .tom-ok { --c: var(--verde); }
.sinal { position: relative; display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c, var(--apagado)); }

/* ---------- Barra de progresso ---------- */
.trilho, .progresso { display: block; height: 6px; background: var(--fio); border-radius: var(--raio-pilula); overflow: hidden; }
.trilho .barra, .progresso > span { display: block; height: 100%; background: var(--c, var(--forte)); border-radius: inherit; transform-origin: left; transition: width 520ms var(--curva); }

/* ---------- Utilitários de arranjo ---------- */
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.linha.entre { justify-content: space-between; }
.pilha { display: grid; gap: 16px; align-content: start; }
.dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; margin: 0; }
.dados dt { font: var(--rotulo); line-height: 1.75; color: var(--apagado); }
.dados dd { margin: 0; color: var(--forte); overflow-wrap: anywhere; }

/* ---------- Etiquetas (papel: sempre claro) ---------- */
.etiquetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.etiqueta {
  display: grid; gap: 6px; justify-items: center; padding: 16px; text-align: center; break-inside: avoid;
  background: #fff; color: #111; border: 1px solid var(--fio-forte); border-radius: var(--raio);
}
.etiqueta strong { font-family: var(--mono); font-size: 14px; color: #111; }
.etiqueta svg { max-width: 100%; height: auto; }
.etiqueta small { color: #555; }

/* ---------- Coletor / celular: formulários empilham, alvos de toque de 44px ---------- */
@media (max-width: 719px) {
  .lado-a-lado, .grade-campos { grid-template-columns: 1fr; }
  form { align-items: stretch; }
  input, select, textarea { flex: 1 1 100%; height: 48px; font-size: 16px; border-radius: 12px; }
  input[type="number"] { width: auto; }
  .campo { flex: 1 1 100%; }
  input[type="checkbox"], input[type="radio"] { flex: none; width: 22px; height: 22px; }
  .check { min-height: 44px; }
  button, .botao, button.pequeno, .botao.pequeno { flex: 1 1 auto; height: 48px; font-size: 15px; border-radius: 12px; }
  button.largo, .botao.largo, button.grande, .botao.grande { height: 52px; }
  .botao-icone { flex: none; width: 44px; height: 44px; }
  .busca { height: 48px; }
  .segmentos { display: flex; overflow-x: auto; scrollbar-width: none; } .segmentos > * { flex: 1 0 auto; height: 40px; font-size: 14px; }
  .tabela { max-height: none; }
  th, td { padding: 10px 12px; }
  td form { flex-wrap: wrap; justify-content: flex-start; min-width: 220px; }
  td form input, td form input[type="number"] { flex: 1 1 96px; width: auto; height: 44px; }
  td button { height: 44px; }
  .dados { grid-template-columns: 1fr; gap: 0; } .dados dd { margin-bottom: 10px; }

  /* Fichas: no celular, cada linha da tabela vira uma ficha, para ninguém rolar para o lado atrás do botão.
     A célula com data-rotulo mostra o nome da coluna em cima do valor (meia ficha; um quarto se for número);
     a que não tem (código, descrição, ação) ocupa a largura toda. Uso: <div class="tabela fichas">. */
  .tabela.fichas { overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .fichas table, .fichas tbody, .fichas td { display: block; }
  .fichas thead { display: none; }
  .fichas tr {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; padding: 14px;
    background: var(--placa); border: 1px solid var(--fio); border-radius: var(--raio-placa); box-shadow: var(--sombra-1), var(--brilho);
  }
  .fichas tr + tr { margin-top: 10px; }
  .fichas td, .fichas tbody tr:hover td, .fichas tr.alerta td { min-width: 0; padding: 0; border: 0; white-space: normal; text-align: left; background: none; }
  .fichas td:not([data-rotulo]) { grid-column: 1 / -1; }
  .fichas td[data-rotulo] { grid-column: span 2; }
  .fichas td.num[data-rotulo] { grid-column: span 1; }
  .fichas td:empty { display: none; }
  .fichas td[data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: 1px; font: var(--rotulo); color: var(--apagado); }
  .fichas td.num { font-size: 17px; font-weight: 600; }
  .fichas td.cod { font-size: 14px; }
  .fichas tr.alerta { border-color: color-mix(in oklab, var(--ambar) 60%, var(--fio)); background: color-mix(in oklab, var(--ambar) 7%, var(--placa)); }
  .fichas tr.feito { box-shadow: none; }
  .fichas tr.vazio { display: block; box-shadow: none; border-style: dashed; }
  .fichas tr.vazio td { padding: 16px 4px; text-align: center; }
  /* A ficha inteira abre o item: o link da primeira célula se estende por cima dela. */
  .fichas td:first-child a { font-size: 15px; font-weight: 650; }
  .fichas td:first-child a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .fichas td form { position: relative; z-index: 1; min-width: 0; padding-top: 12px; border-top: 1px solid var(--fio); align-items: flex-end; }
  .fichas td .campo { flex: 1 1 130px; }
  .fichas td .campo > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .fichas td form button { flex: 1 1 100%; height: 48px; font-size: 15px; }
}