/* DeoVita Sistema de Estoque */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fundo: #f3f6f4;
  --superficie: #ffffff;
  --tinta: #1f2b25;
  --tinta-2: #4f5f56;
  --tinta-3: #77867d;
  --linha: #dbe4df;
  --linha-forte: #c2cec7;
  --pinho: #0f3b2c;
  --pinho-2: #17503c;
  --pinho-claro: #9fd4b6;
  --verde: #13693f;
  --verde-escuro: #0e5131;
  --verde-claro: #e6f3eb;
  --ambar: #b7791f;
  --ambar-claro: #fbf1df;
  --vermelho: #b91c1c;
  --vermelho-claro: #fbe9e9;
  --azul: #0284c7;
  --azul-claro: #e2f2fb;
  --cinza: #94a3b8;
  --cinza-claro: #eef1f4;
  --foco: #2563eb;
  --raio: 8px;
  --raio-p: 6px;
  --fonte: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 15px/1.5 var(--fonte);
  font-variant-numeric: tabular-nums;
}
a { color: var(--verde); text-underline-offset: 2px; }
a:hover { color: var(--verde-escuro); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.012em; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0 0 10px; }
small { font-size: 13px; }
code { font-size: 13px; background: var(--cinza-claro); padding: 1px 5px; border-radius: 4px; }
.pular { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
.pular:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Estrutura ---------- */

.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  background: var(--pinho);
  color: #dfeee6;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 18px 12px 14px;
}
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 2px 8px 18px; }
.marca:hover { color: #fff; }
.marca-simbolo { display: inline-flex; flex-direction: column; gap: 4px; width: 26px; }
.marca-simbolo i { display: block; height: 5px; border-radius: 3px; background: #fff; }
.marca-simbolo i:first-child { width: 64%; }
.marca-simbolo i:last-child { width: 100%; background: var(--pinho-claro); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-texto b { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.marca-texto span { font-size: 13px; color: var(--pinho-claro); }
.menu-grupo { margin-bottom: 14px; }
.menu-titulo { display: block; font-size: 12.5px; color: #8fb8a3; padding: 0 10px 4px; }
.lateral nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #e7f2ec;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: var(--raio-p);
  font-size: 14.5px;
}
.lateral nav a:hover { background: var(--pinho-2); color: #fff; }
.lateral nav a.ativo { background: #fff; color: var(--pinho); font-weight: 700; }
.lateral nav a em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.lateral nav a.ativo em { background: var(--verde-claro); color: var(--verde-escuro); }
.usuario { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; gap: 1px; }
.usuario-nome { font-weight: 700; color: #fff; }
.usuario-perfil { font-size: 13px; color: #9cc3af; }
.usuario-links { display: flex; gap: 14px; margin-top: 6px; }
.usuario-links a { color: #dfeee6; font-size: 13.5px; }

.principal { min-width: 0; display: flex; flex-direction: column; }
main { padding: 26px 32px 40px; max-width: 1360px; width: 100%; }
main:focus { outline: none; }
.rodape { margin-top: auto; padding: 14px 32px 22px; color: var(--tinta-3); font-size: 13px; }
.topo-movel { display: none; }

.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.subtitulo { color: var(--tinta-2); margin: 6px 0 0; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Avisos ---------- */

.aviso { padding: 11px 14px; border-radius: var(--raio-p); margin-bottom: 16px; border: 1px solid; }
.aviso ul { margin: 0; padding-left: 18px; }
.aviso-ok { background: var(--verde-claro); border-color: #b9dcc7; color: #134a2f; }
.aviso-erro { background: var(--vermelho-claro); border-color: #efc3c3; color: #7a1414; }
.aviso-info { background: var(--azul-claro); border-color: #bcdcef; color: #0b4a6e; }
.aviso-atencao { background: var(--ambar-claro); border-color: #ecd3a4; color: #6b4410; }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
  padding: 9px 15px;
  border-radius: var(--raio-p);
  border: 1px solid var(--verde);
  background: var(--verde);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.btn-sec { background: var(--superficie); color: var(--verde-escuro); border-color: var(--linha-forte); }
.btn-sec:hover { background: var(--verde-claro); color: var(--verde-escuro); border-color: #a9cdb8; }
.btn-perigo { background: var(--superficie); color: var(--vermelho); border-color: #e3b4b4; }
.btn-perigo:hover { background: var(--vermelho-claro); color: #8f1515; border-color: #d99a9a; }
.btn-grande { padding: 12px 18px; font-size: 15.5px; width: 100%; }
.btn-pequeno { padding: 5px 10px; font-size: 13.5px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--verde); font: inherit; text-decoration: underline; cursor: pointer; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Formulários ---------- */

.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.campo > span { font-size: 13.5px; font-weight: 700; color: var(--tinta-2); }
.campo > span em { font-style: normal; font-weight: 400; color: var(--tinta-3); }
input, select, textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  padding: 8px 10px;
  min-height: 39px;
  width: 100%;
}
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--verde); outline: 2px solid rgba(19, 105, 63, 0.18); outline-offset: 0; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--verde); }
input[readonly] { background: var(--cinza-claro); }
.ajuda { font-size: 13px; color: var(--tinta-3); margin-top: -8px; margin-bottom: 14px; }
.opcao { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 16px; cursor: pointer; }
.opcao input { margin-top: 4px; }
.grade-2, .grade-3, .grade-4 { display: grid; gap: 0 16px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-rodape { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 6px; }
.form-estreito { max-width: 760px; }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { font-weight: 700; font-size: 16px; padding: 0; margin-bottom: 10px; }

/* ---------- Blocos ---------- */

.bloco > h2 { margin-bottom: 10px; }
.bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 20px; min-width: 0; }
.bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.bloco-topo a { font-size: 14px; }
.nota { color: var(--tinta-2); font-size: 14px; }
.vazio { padding: 22px 18px; border: 1px dashed var(--linha-forte); border-radius: var(--raio); background: #fbfcfb; }
.vazio strong { display: block; font-size: 16px; margin-bottom: 4px; }
.vazio p { color: var(--tinta-2); max-width: 64ch; }
.grade-painel { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; }
.grade-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.coluna { display: flex; flex-direction: column; min-width: 0; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linha); }
.lista-simples li:first-child { border-top: 0; padding-top: 2px; }
.sub { display: block; color: var(--tinta-3); font-size: 13px; }

/* ---------- Painel ---------- */

.primeiros-passos ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; }
.primeiros-passos li { display: flex; gap: 10px; align-items: flex-start; }
.primeiros-passos li a { font-weight: 700; }
.passo-marca { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 800; background: var(--pinho); color: #fff; }
.primeiros-passos li.feito .passo-marca { background: var(--verde-claro); color: var(--verde-escuro); }
.primeiros-passos li.feito a { color: var(--tinta-2); }

.painel-situacao {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 20px;
}
.ps-barra h2 { margin-bottom: 14px; }
.barra-situacoes { display: block; width: 100%; height: 22px; }
.legenda-situacoes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px; }
.legenda-situacoes a { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--tinta); text-decoration: none; }
.legenda-situacoes a:hover .ls-nome { text-decoration: underline; }
.legenda-situacoes i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legenda-situacoes b { margin-left: auto; font-weight: 700; }
.ps-numeros { margin: 0; display: grid; gap: 14px; border-left: 1px solid var(--linha); padding-left: 20px; align-content: center; }
.ps-numeros div { display: flex; flex-direction: column; }
.ps-numeros dt { font-size: 14px; color: var(--tinta-2); font-weight: 700; }
.ps-numeros dd { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.ps-numeros small { color: var(--tinta-2); }
.numeros-linha { margin: 0 0 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numeros-linha div { padding: 2px 16px; border-left: 1px solid var(--linha); }
.numeros-linha div:first-child { padding-left: 0; border-left: 0; }
.numeros-linha dt { font-size: 13.5px; color: var(--tinta-2); }
.numeros-linha dd { margin: 0; font-size: 21px; font-weight: 750; }

/* ---------- Gráficos ---------- */

.grafico { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-caixa { position: relative; overflow-x: auto; }
.grafico-colunas { min-width: 520px; max-width: 820px; }
.grafico-barras { min-width: 460px; max-width: 640px; }
.grade-grafico { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; align-items: start; }
.numeros-coluna { margin: 0; display: grid; gap: 0; }
.numeros-coluna div { padding: 10px 0; border-top: 1px solid var(--linha); }
.numeros-coluna div:first-child { border-top: 0; padding-top: 0; }
.numeros-coluna dt { font-size: 13.5px; color: var(--tinta-2); }
.numeros-coluna dd { margin: 0; font-size: 22px; font-weight: 750; }
.g-grade { stroke: #e7ece9; stroke-width: 1; }
.g-base { stroke: var(--linha-forte); }
.g-eixo { font-size: 12px; fill: var(--tinta-3); }
.g-rotulo { font-size: 13px; fill: var(--tinta-2); }
.g-valor { font-size: 12.5px; fill: var(--tinta); font-weight: 700; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; font-size: 13.5px; color: var(--tinta-2); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- Tabelas ---------- */

.tabela-rolagem { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 13px; font-weight: 700; color: var(--tinta-2); padding: 9px 10px; border-bottom: 1px solid var(--linha-forte); white-space: nowrap; background: var(--superficie); }
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover td { background: #f7faf8; }
.tabela tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--linha-forte); }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela .centro { text-align: center; }
.tabela-compacta td, .tabela-compacta th { padding: 7px 8px; }
.tabela td a { font-weight: 600; text-decoration: none; }
.tabela td a:hover { text-decoration: underline; }
.tabela .col-regua { width: 150px; min-width: 120px; }
.tabela-fixa thead th { position: sticky; top: 0; z-index: 2; }
.linha-inativa td { color: var(--tinta-3); }
.linha-estornada td { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.25); }
.qtd-mais { color: #15703f; font-weight: 700; }
.qtd-menos { color: #a33b14; font-weight: 700; }
.contagem { color: var(--tinta-3); font-size: 13.5px; margin: 10px 0 0; }

/* ---------- Selos ---------- */

.sit, .tipo, .stp, .val, .abc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.5;
}
.sit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sit-ok { background: #e5f3ea; color: #15703f; }
.sit-acima { background: var(--azul-claro); color: #07689c; }
.sit-repor { background: var(--ambar-claro); color: #8a5a12; }
.sit-zerado { background: var(--vermelho-claro); color: #9b1818; }
.sit-sem_minmax { background: var(--cinza-claro); color: #5a6878; }
.sit-inativo { background: var(--cinza-claro); color: #8792a0; font-weight: 600; }
.tipo-entrada { background: #e5f0fb; color: #1d5fae; }
.tipo-saida { background: #fdece3; color: #a33b14; }
.tipo-devolucao { background: #e5f3ea; color: #15703f; }
.tipo-perda { background: var(--vermelho-claro); color: #9b1818; }
.tipo-ajuste_mais, .tipo-ajuste_menos { background: #ece9fb; color: #4b3cb0; }
.tipo-saldo_inicial { background: var(--cinza-claro); color: #3f4c5a; }
.tipo-estorno { background: #f1f1f1; color: #555; }
.stp-rascunho { background: var(--cinza-claro); color: #4a5866; }
.stp-aberto { background: var(--ambar-claro); color: #8a5a12; }
.stp-parcial { background: var(--azul-claro); color: #07689c; }
.stp-recebido { background: #e5f3ea; color: #15703f; }
.stp-cancelado { background: #f1f1f1; color: #777; }
.val-vencido { background: var(--vermelho-claro); color: #9b1818; }
.val-ate30 { background: #fdece3; color: #a33b14; }
.val-alerta { background: var(--ambar-claro); color: #8a5a12; }
.val-ok, .val-sem_data { background: var(--cinza-claro); color: #4a5866; }
.abc { min-width: 26px; justify-content: center; padding: 2px 6px; }
.abc-a { background: var(--pinho); color: #fff; }
.abc-b { background: #cfe5d8; color: var(--pinho); }
.abc-c { background: var(--cinza-claro); color: #5a6878; }

/* ---------- Régua de nível do estoque ---------- */

.regua { display: block; width: 100%; padding: 5px 0; }
.regua-trilho { position: relative; display: block; height: 10px; border-radius: 5px; background: #edf1ee; }
.regua-faixa { position: absolute; top: 0; bottom: 0; background: #d3e9dc; border-radius: 2px; }
.regua-nivel { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 0 3px 3px 0; min-width: 0; }
.nivel-ok { background: #15803d; }
.nivel-acima { background: var(--azul); }
.nivel-repor { background: var(--ambar); }
.nivel-zerado { background: var(--vermelho); }
.nivel-sem_minmax { background: #8a98ab; }
.nivel-inativo { background: var(--cinza); }
.regua-extra {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: repeating-linear-gradient(135deg, rgba(19, 105, 63, 0.55) 0 3px, rgba(19, 105, 63, 0.12) 3px 6px);
  border-radius: 0 3px 3px 0;
}
.regua-marca { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--tinta-2); border-radius: 1px; }
.regua-marca-max { background: var(--pinho); }
.regua-grande .regua-trilho { height: 18px; border-radius: 6px; }
.regua-grande .regua-nivel, .regua-grande .regua-extra { top: 3px; bottom: 3px; }
.regua-grande .regua-marca { top: -5px; bottom: -5px; }
.regua-legenda { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--tinta-2); margin-top: 6px; }
.regua-legenda i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ---------- Filtros, abas e paginação ---------- */

.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.filtros .campo { margin-bottom: 0; }
.filtros .campo-busca { flex: 1 1 260px; }
.filtros select, .filtros input { min-width: 130px; }
.filtros input[type="checkbox"], .filtros input[type="radio"] { min-width: 0; }
.filtros .opcao { margin: 0; align-self: center; }
.abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linha-forte); margin-bottom: 18px; }
.abas a { padding: 9px 14px; text-decoration: none; color: var(--tinta-2); border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; }
.abas a:hover { color: var(--tinta); }
.abas a.ativo { color: var(--pinho); border-bottom-color: var(--verde); }
.paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.paginacao a, .paginacao .atual { padding: 5px 11px; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); text-decoration: none; font-size: 14px; background: var(--superficie); }
.paginacao .atual { background: var(--pinho); border-color: var(--pinho); color: #fff; font-weight: 700; }
.paginacao .contagem { margin: 0 8px; }

/* ---------- Lançamento ---------- */

.tipos-lanc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tipos-lanc label { position: relative; cursor: pointer; }
.tipos-lanc input { position: absolute; opacity: 0; pointer-events: none; }
.tipos-lanc span { display: inline-block; padding: 8px 14px; border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--superficie); font-weight: 700; font-size: 14px; color: var(--tinta-2); }
.tipos-lanc input:checked + span { background: var(--pinho); border-color: var(--pinho); color: #fff; }
.tipos-lanc input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.desc-tipo { color: var(--tinta-2); margin: -8px 0 16px; font-size: 14px; }
.tabela-linhas td { vertical-align: top; padding: 8px 6px; }
.tabela-linhas th { padding: 8px 6px; }
.tabela-linhas input, .tabela-linhas select { min-height: 37px; padding: 7px 8px; }
.tabela-linhas .c-item { min-width: 280px; width: 34%; }
.tabela-linhas .c-qtd { width: 110px; }
.tabela-linhas .c-custo { width: 120px; }
.tabela-linhas .c-lote { width: 130px; }
.tabela-linhas .c-val { width: 150px; }
.tabela-linhas .c-acao { width: 44px; }
.info-item { display: block; font-size: 12.5px; color: var(--tinta-3); margin-top: 4px; min-height: 18px; }
.info-item b { color: var(--tinta-2); }
.remover-linha { border: 1px solid var(--linha-forte); background: var(--superficie); border-radius: var(--raio-p); width: 37px; height: 37px; cursor: pointer; color: var(--tinta-2); font-size: 18px; line-height: 1; }
.remover-linha:hover { background: var(--vermelho-claro); color: var(--vermelho); border-color: #e3b4b4; }
form[data-tipo] .so-lote, form[data-tipo] .so-custo, form[data-tipo] .so-lote-saida { display: none; }
form[data-com-lote="1"] .so-lote { display: table-cell; }
form[data-com-custo="1"] .so-custo { display: table-cell; }
form[data-saida="1"] .so-lote-saida { display: table-cell; }
form[data-tipo] .campo.so-setor, form[data-tipo] .campo.so-fornecedor { display: none; }
form[data-tipo="SAIDA"] .campo.so-setor, form[data-tipo="DEVOLUCAO"] .campo.so-setor, form[data-tipo="PERDA"] .campo.so-setor { display: flex; }
form[data-tipo="ENTRADA"] .campo.so-fornecedor { display: flex; }

/* Busca de item */
.ac { position: relative; }
.ac-lista {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  box-shadow: 0 8px 24px rgba(15, 59, 44, 0.12);
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  min-width: 340px;
}
.ac-lista li { padding: 7px 9px; border-radius: 5px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.ac-lista li small { color: var(--tinta-3); white-space: nowrap; }
.ac-lista li[aria-selected="true"], .ac-lista li:hover { background: var(--verde-claro); }
.ac-lista .ac-vazio { color: var(--tinta-3); cursor: default; }

/* Ressuprimento: linha que abre o grupo de cada fornecedor */
.tabela .linha-grupo td { background: #eef4f0; border-top: 1px solid var(--linha-forte); border-bottom: 1px solid var(--linha-forte); padding-top: 9px; padding-bottom: 9px; }
.tabela tbody .linha-grupo:hover td { background: #eef4f0; }
.linha-grupo b { color: var(--pinho); }

/* Mínimo e máximo em lista */
.c-mm { width: 110px; }
.c-mm input { max-width: 100px; text-align: right; }

/* Inventário */
.c-contagem { width: 130px; }
.c-contagem input { max-width: 120px; text-align: right; }
.estado { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.estado.ok { color: #15703f; font-weight: 700; }
.estado.ok::before { content: "✓ "; }
.estado.erro { color: var(--vermelho); font-weight: 700; white-space: normal; }

/* Relatórios */
.atalhos-periodo { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-self: center; padding-bottom: 9px; font-size: 14px; }
.so-impressao { display: none; }
.bloco-alerta { border-color: #ecd3a4; background: #fffaf0; }

/* Listas editáveis (setores e categorias) */
.linha-nova { display: flex; gap: 10px; align-items: flex-end; margin: 12px 0 14px; }
.linha-nova .campo { flex: 1; margin-bottom: 0; }
.lista-edicao { list-style: none; margin: 0; padding: 0; }
.lista-edicao li { border-top: 1px solid var(--linha); padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lista-edicao form { display: flex; align-items: center; gap: 8px; width: 100%; }
.lista-edicao input[name="nome"] { flex: 1; min-width: 0; min-height: 35px; padding: 6px 9px; }
.lista-edicao li.inativo input[name="nome"] { color: var(--tinta-3); }
.marcador { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--tinta-2); white-space: nowrap; cursor: pointer; }
.usos { font-size: 13px; color: var(--tinta-3); white-space: nowrap; min-width: 64px; text-align: right; }

/* Usuários, cópia de segurança e configurações */
.perfis { margin: 16px 0 0; display: grid; gap: 8px; font-size: 14px; }
.perfis div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.perfis dt { font-weight: 700; }
.perfis dd { margin: 0; color: var(--tinta-2); }
.passos { margin: 10px 0 0; padding-left: 22px; }
.passos li { padding: 3px 0; }
.campo-legenda { font-size: 13.5px; font-weight: 700; color: var(--tinta-2); margin: 6px 0 8px; }
.nowrap { white-space: nowrap; }

/* ---------- Ficha do produto ---------- */

.ficha-topo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.dados div { min-width: 0; }
.dados dt { font-size: 13px; color: var(--tinta-3); font-weight: 700; }
.dados dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.dados-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dados .dados-largo { grid-column: 1 / -1; }
.barra-pedidos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0 24px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.nivel-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; }
.nivel-numeros div { padding: 0 12px; border-left: 1px solid var(--linha); }
.nivel-numeros div:first-child { padding-left: 0; border-left: 0; }
.nivel-numeros dt { font-size: 13px; color: var(--tinta-2); }
.nivel-numeros dd { margin: 0; font-size: 22px; font-weight: 800; }
.ultimos { margin-top: 18px; border-top: 1px solid var(--linha); padding-top: 4px; font-size: 14px; }
.ultimos li:first-child { border-top: 0; padding-top: 9px; }
.ultimos li > span:first-child { color: var(--tinta-2); font-weight: 700; }
.destaque-numero { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

/* ---------- Página de entrada ---------- */

.porta { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--pinho); }
.porta-caixa { width: 100%; max-width: 440px; background: var(--superficie); border-radius: 12px; padding: 30px 30px 24px; }
.porta-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.porta-marca .marca-simbolo i { background: var(--pinho); }
.porta-marca .marca-simbolo i:last-child { background: #3f9a6a; }
.porta-marca .marca-texto b { color: var(--pinho); }
.porta-marca .marca-texto span { color: var(--verde); }
.porta h1 { font-size: 24px; margin-bottom: 6px; }
.porta-texto { color: var(--tinta-2); margin-bottom: 18px; }
.porta-nota { color: var(--tinta-3); font-size: 13.5px; margin: 14px 0 0; }

/* ---------- Impressão ---------- */

.impressao { background: #e9eeeb; }
.barra-impressao { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 20px; background: var(--pinho); color: #dfeee6; font-size: 14px; }
.folha { background: #fff; max-width: 940px; margin: 20px auto; padding: 34px 40px; border-radius: 4px; }
.folha-topo { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--pinho); padding-bottom: 12px; margin-bottom: 18px; }
.folha-topo div { display: flex; flex-direction: column; }
.folha-empresa { font-size: 18px; }
.folha-topo span { color: var(--tinta-2); font-size: 13px; }
.folha-sistema { text-align: right; }
.folha h1 { font-size: 22px; margin-bottom: 4px; }
.folha h2 { font-size: 16px; margin: 20px 0 8px; }
.folha .tabela { font-size: 13px; }
.folha .tabela th, .folha .tabela td { padding: 6px 7px; }
.assinaturas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 56px; }
.assinaturas div { border-top: 1px solid var(--tinta); padding-top: 6px; font-size: 13px; color: var(--tinta-2); text-align: center; }
.caixa-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; border: 1px solid var(--linha-forte); border-radius: 6px; padding: 12px 14px; margin: 12px 0 16px; font-size: 13.5px; }
.caixa-dados b { color: var(--tinta-2); font-weight: 700; }
.celula-contagem { width: 110px; border-bottom: 1px solid var(--tinta-3) !important; }

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; font-size: 12px; }
  .nao-imprimir, .lateral, .topo-movel, .rodape, .acoes, .filtros, .paginacao, .abas { display: none !important; }
  .app { display: block; }
  main { padding: 0; max-width: none; }
  .folha { margin: 0; padding: 0; max-width: none; }
  .bloco { border: 0; padding: 0; }
  .tabela tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .so-impressao { display: block; }
  .tabela-rolagem, .grafico-caixa { overflow: visible; }
  .grade-painel, .grade-2col { display: block; }
  input, select { border: 0; padding: 0; min-height: 0; }
}

/* ---------- Telas menores ---------- */

@media (max-width: 1100px) {
  .grade-painel, .painel-situacao, .ficha-topo, .grade-grafico { grid-template-columns: minmax(0, 1fr); }
  .primeiros-passos ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros-coluna { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .numeros-coluna div:nth-child(2) { border-top: 0; padding-top: 0; }
  .ps-numeros { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha); padding-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; z-index: 40; left: 0; top: 0; width: 270px; transform: translateX(-100%); transition: transform 0.2s ease; }
  .lateral.aberto { transform: none; box-shadow: 0 0 0 100vmax rgba(10, 30, 22, 0.45); }
  .topo-movel { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--pinho); color: #fff; font-weight: 700; position: sticky; top: 0; z-index: 20; }
  .botao-menu { font: inherit; font-weight: 700; color: var(--pinho); background: #fff; border: 0; border-radius: var(--raio-p); padding: 6px 12px; cursor: pointer; }
  main { padding: 18px 16px 30px; }
  .rodape { padding: 12px 16px 20px; }
  .grade-2col, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); }
  .numeros-linha, .nivel-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .dados-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2, .span-3 { grid-column: 1 / -1; }
  .numeros-linha div:nth-child(3), .nivel-numeros div:nth-child(3) { padding-left: 0; border-left: 0; }
  .legenda-situacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folha { padding: 20px 16px; margin: 0; }
}
@media (max-width: 560px) {
  h1 { font-size: 23px; }
  .grade-2, .dados, .dados-4 { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: 1 / -1; }
  .ps-numeros { grid-template-columns: minmax(0, 1fr); }
  .primeiros-passos ol { grid-template-columns: minmax(0, 1fr); }
  .ps-numeros dd { font-size: 26px; }
  .cabecalho .acoes { width: 100%; }
  .cabecalho .acoes .btn { flex: 1 1 auto; }
  .tabela .col-regua { display: none; }
  .assinaturas, .caixa-dados { grid-template-columns: minmax(0, 1fr); }
  .perfis div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .linha-nova { flex-wrap: wrap; }
  .lista-edicao form { flex-wrap: wrap; }
  .lista-edicao input[name="nome"] { flex: 1 1 100%; }
}
/* Linhas de lançamento e de recebimento viram fichas empilhadas no celular */
@media (max-width: 700px) {
  .tabela-linhas thead { display: none; }
  .tabela-linhas, .tabela-linhas tbody { display: block; width: 100%; }
  .tabela-linhas tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--linha-forte); }
  .tabela-linhas tbody tr:first-child { padding-top: 4px; }
  .tabela-linhas tbody td { display: block; padding: 0; border: 0; text-align: left; }
  .tabela-linhas tbody td[class] { width: auto; min-width: 0; }
  .tabela-linhas tbody tr:hover td { background: none; }
  .tabela-linhas td.c-item, .tabela-linhas td.c-obs { grid-column: 1 / -1; }
  .tabela-linhas td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 12.5px; font-weight: 700; color: var(--tinta-2); margin-bottom: 4px; }
  .tabela-linhas td.c-acao { grid-column: 1 / -1; justify-self: end; }
  .tabela-linhas td.c-acao .remover-linha { width: auto; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .tabela-linhas td.c-acao .remover-linha::after { content: " Remover linha"; }
  .ac-lista { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}