/* =========================================================================
 * Ajustes de ergonomia sobre o `app.css`.
 *
 * ESTE ARQUIVO NÃO TEM COR NENHUMA. Toda cor vem dos tokens de `tema.css`,
 * e por isso os três estados de tema (claro, escuro escolhido, escuro do
 * sistema) funcionam sem uma linha aqui dentro. A versão anterior repetia
 * cerca de cem hexadecimais com `!important` e só conhecia
 * `[data-theme="dark"]`: quem usava o tema padrão do sistema recebia o escuro
 * do `tema.css` misturado com o claro daqui.
 *
 * O que sobrou é layout: alturas de controle, alinhamento de busca e tabela,
 * o editor de ZPL e o cartão de equipamento.
 * ========================================================================= */

:root {
  --alt-controle: 36px;
}

/* CHECKBOX E RÁDIO NÃO CRESCEM COM O CAMPO. `input` ganha altura de controle
 * mais abaixo; sem esta regra o marcador viraria um quadrado de 36px. */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 16px;
  accent-color: var(--acento);
  cursor: pointer;
  vertical-align: middle;
}

label.caixa, .campo.caixa {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: var(--alt-controle);
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* CONTROLES: uma altura só, para campo e botão alinharem numa linha. */
input:not([type="checkbox"]):not([type="radio"]), select {
  height: var(--alt-controle);
  padding: 0 12px;
  font-size: 13px;
}
select {
  padding-right: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
textarea { padding: 12px; font-size: 13px; }
.botao { min-height: var(--alt-controle); }
.botao.pequeno, td.acoes .botao { min-height: 26px; padding: 0 10px; font-size: 12px; }

/* LINHA DE BUSCA (produtos, vocabulário, rastreio) */
.linha-busca {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.linha-busca input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 340px; min-width: 240px; }
.linha-busca select { flex: 0 1 220px; min-width: 160px; max-width: 240px; }
.linha-busca label.caixa { flex: 0 0 auto; margin-left: auto; }
.linha-busca .sub { flex: 0 0 auto; white-space: nowrap; font-weight: 600; }

/* TABELAS. Linhas se separam por tom (zebra), e o cabeçalho é um plano
 * próprio — não uma moldura. */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th {
  background: var(--superficie3);
  color: var(--texto2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 16px;
}
td { padding: 10px 16px; font-size: 13px; color: var(--texto); }
td .sub { color: var(--texto2); font-size: 12px; }
tbody tr { background: var(--superficie); transition: background-color var(--rapido) var(--curva); }
tbody tr:nth-child(even) { background: var(--superficie2); }
tbody tr:hover { background: var(--acento-fraco); }

/* AVISO EXPANSÍVEL (pontos de controle) */
details.aviso-expansivel {
  margin: 10px 0 16px;
  padding: 8px 14px;
  background: var(--alerta-fundo);
  border-left: 4px solid var(--alerta);
  border-radius: var(--forma-sm);
  font-size: 13px;
  color: var(--alerta);
}
details.aviso-expansivel summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
details.aviso-expansivel .dica-expande { margin-left: auto; font-size: 11.5px; font-weight: 500; opacity: .85; }
details.aviso-expansivel .corpo-aviso {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
  font-size: 12.5px;
  line-height: 1.5;
}

/* CABEÇALHO DE SEÇÃO */
.cabeca-secao .sub { margin-top: 2px; }
.painel > header h2, .painel-secao-titulo h2 {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto2);
}

/* O ZPL NÃO PODE FICAR ENCOLHIDO: é o campo que a pessoa edita. */
textarea.codigo, #zpl {
  box-sizing: border-box;
  width: 100%;
  height: 380px;
  min-height: 320px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
  resize: vertical;
}
.barra-acao-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

/* DICIONÁRIO DE VARIÁVEIS em duas colunas */
.dicionario { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 14px; }
@media (max-width: 800px) { .dicionario { grid-template-columns: 1fr; } }
.grupo-variaveis { display: flex; flex-direction: column; gap: 6px; }
.grupo-variaveis > h3 {
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--borda);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto2);
}
.variavel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--forma-xs);
  background: var(--superficie2);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.variavel:hover { background: var(--acento-fraco); }
.variavel code { font-family: var(--mono); font-weight: 700; color: var(--acento); }
.variavel .sub { font-size: 11px; }

/* CARTÕES DE EQUIPAMENTO */
.equip-cheio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--forma-md);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--elev-1);
}
.equip-cheio > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borda);
}
.equip-cheio .nome {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MOSTRADORES: a cor e o preenchimento do `.tile` vêm do `app.css`. */

/* ESCONDIDO É ESCONDIDO. Uma classe com `display` próprio (`.campo.caixa`,
 * `.tile`, `.selo`…) vence o `[hidden]` do navegador, e o código acha que
 * escondeu o que continua na tela. `:not(#…)` soma a especificidade de um id
 * sem casar com id nenhum, então esta regra ganha de qualquer combinação de
 * classes. Visto em 2026-09-27: o marcador "Imprimir também a etiqueta da
 * caixa" aparecia marcado antes de alguém dizer que era caixa. */
[hidden]:not(#nx-nunca-existe) { display: none !important; }