/*
  components.css - biblioteca de componentes reutilizaveis.
  Fonte: vault 01_SISTEMAS/01_Padroes_Gerais (Padrao_Modal, Padrao_Tabela,
  Padrao_Toggle_OnOff, Padrao_Tabs, Padrao_Formulario, Padrao_Box_Card,
  Padrao_Loading_Estado, Componente_SelectBusca, Padrao_Upload_Arquivo).
  Tokens do tema claro do vault mapeados para os tokens escuros deste
  projeto (ver nota no topo de layout.css).
*/

/* ============================================================ */
/* Botoes                                                        */
/* ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao), transform var(--transicao);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--surface); border-color: var(--text-dim); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn i { font-size: 16px; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled { opacity: .5; }

.btn-perigo {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: 600;
}
.btn-perigo:hover { filter: brightness(1.1); }

.btn-fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
}
.btn-fantasma:hover { background: var(--bg-elev); color: var(--text); }

.btn-sm {
  height: 32px;
  padding: 0 var(--sp-3);
  font-size: 12.5px;
}
.btn-sm i { font-size: 15px; }

/* botao so-icone: quadrado, touch-friendly (>=44px em contexto mobile) */
.btn-icone-quadrado {
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
}

/* ============================================================ */
/* Card / Box                                                     */
/* ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.card-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.card-actions { display: flex; gap: 4px; align-items: center; }

.card-clicavel { cursor: pointer; transition: var(--transicao); text-decoration: none; color: inherit; }
.card-clicavel:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}
.card-grid > .card { height: 100%; }

.card-vazio {
  align-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  gap: var(--sp-2);
}
.card-vazio i { font-size: 48px; color: var(--text-dim); }
.card-vazio-titulo { font-size: 16px; font-weight: 600; margin: var(--sp-2) 0 0; color: var(--text); }
.card-vazio-msg { font-size: 13px; color: var(--text-dim); margin: 0 0 var(--sp-3); }

/* ============================================================ */
/* Fluxo do inventario: passo a passo em serpentina (Padrao_Box_Card) */
/* ============================================================ */
.fluxo-wrap { display: flex; flex-direction: column; }
.fluxo-intro { margin-bottom: var(--sp-5); }
.fluxo-intro p { text-align: left; }

.fluxo-linha {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  position: relative;
}
/* direction:rtl inverte a ordem VISUAL das colunas sem reordenar o DOM;
   os cards voltam pra ltr por dentro pra nao virar o texto. */
.fluxo-linha--reversa { direction: rtl; }
.fluxo-linha--reversa .fluxo-passo { direction: ltr; }

/* linha ligando os numeros da mesma fileira: passa pelo CENTRO do circulo
   (padding do card + metade do badge), atras dele (z-index 0 vs 1). */
.fluxo-linha::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: calc(var(--sp-4) + 20px);
  height: 3px;
  background: var(--accent);
  z-index: 0;
}

.fluxo-vinco { position: relative; height: var(--sp-5); }
.fluxo-vinco::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}
/* ponytail: alinhamento por percentual fixo (coluna 1 ou 4 de 4), nao mede
   px real do card. Se o grid mudar de 4 colunas, recalcular os dois lados. */
.fluxo-vinco--direita::before { right: 12.5%; }
.fluxo-vinco--esquerda::before { left: 12.5%; }

.fluxo-passo {
  position: relative;
  z-index: 1;
  align-items: center;
  text-align: center;
  padding: var(--sp-4);
}

.fluxo-passo-num {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fluxo-passo i { font-size: 22px; color: var(--accent); }
.fluxo-passo-titulo { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin: 0; }
.fluxo-passo-desc { font-size: var(--fs-xs); color: var(--text-dim); margin: 0; }

/* passo ja concluido no evento selecionado (variante "sucesso" do Padrao_Box_Card) */
.fluxo-passo--feito {
  border: 3px solid var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}
.fluxo-passo--feito .fluxo-passo-num { background: var(--success); }

/* ============================================================ */
/* Painel de senha temporaria (exibida uma unica vez)             */
/* ============================================================ */
.card-senha {
  border: 2px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  margin-bottom: var(--sp-5);
}
.card-senha .card-title { display: flex; align-items: center; gap: var(--sp-2); }
.senha-aviso { text-align: left; margin: 0; }
.senha-linha { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.senha-rotulo {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  min-width: 52px;
}
.senha-valor {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--fs-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  user-select: all;
  word-break: break-all;
}
/* usado pelo fallback de copiar sem HTTPS */
.fora-da-tela { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

.fluxo-evento-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.fluxo-evento-bar .campo { min-width: 260px; }
.fluxo-evento-atual { display: flex; align-items: center; gap: var(--sp-2); }

@media (max-width: 880px) {
  .fluxo-linha { grid-template-columns: 1fr; direction: ltr; }
  .fluxo-linha::before { display: none; }
  .fluxo-vinco { display: none; }
}

/* ============================================================ */
/* Formulario: campo / input / textarea / select-busca            */
/* ============================================================ */
.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Label: 13px/600, SEM uppercase (Sistema_de_Estilos.md:57,65) */
.campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.input, .textarea {
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;           /* piso do iOS: abaixo disso ele da zoom ao focar */
  width: 100%;
  transition: border-color var(--transicao);
}
.textarea { height: auto; min-height: 96px; padding: var(--sp-3); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); }
.input:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; }

/* ZOOM AUTOMATICO NO iOS: o Safari aplica zoom ao focar QUALQUER campo com
   fonte menor que 16px, e nao volta sozinho. A regra vale para todo controle
   de formulario, nao so para .input: a busca do SelectBusca (.sb-search) tinha
   13.5px e era o que dava zoom ao abrir qualquer lista.
   Corrigir pelo tamanho da fonte, e nao com maximum-scale=1 no viewport, porque
   aquilo desliga tambem o zoom por pinca, que quem enxerga mal precisa. */
input, select, textarea, .sb-search { font-size: max(16px, 1rem); }

@media (max-width: 720px) {
  .input, .sb-display { min-height: 44px; } /* alvo de toque WCAG; alinha com .btn 44px */
  .selectbusca, .select-busca { min-width: 0; max-width: 100%; } /* nao estoura modal 96vw */
}

/* Linha de formulario / barra: label em cima, controles na mesma altura */
.form-bar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.form-bar .campo { flex-shrink: 0; min-width: 200px; }
.form-bar .campo.flex { flex: 1; }
@media (max-width: 720px) {
  .form-bar .campo { flex: 1 1 100%; min-width: 0; }
}

/* SelectBusca: substitui <select> nativo (Componente_SelectBusca.md, Sem_Select_Nativo.md).
   Aceita tanto .selectbusca (nome canonico do vault) quanto .select-busca (alias). */
.selectbusca, .select-busca {
  position: relative;
  min-width: 200px;
}
.selectbusca .sb-display, .select-busca .sb-display {
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-size: 14px;
  gap: var(--sp-2);
}
.selectbusca.open .sb-display, .select-busca.open .sb-display { border-color: var(--accent); }
.selectbusca .sb-display .sb-label, .select-busca .sb-display .sb-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selectbusca .sb-display .sb-label.placeholder, .select-busca .sb-display .sb-label.placeholder { color: var(--text-dim); }
.selectbusca .sb-display i, .select-busca .sb-display i {
  color: var(--text-dim);
  font-size: 14px;
  transition: transform var(--transicao);
  flex-shrink: 0;
}
.selectbusca.open .sb-display i, .select-busca.open .sb-display i { transform: rotate(180deg); }

/* position: fixed e o default do SelectBusca no DataEvo
   (Padrao_Modal_Popup_Centrado.md:112). Com 'absolute' o painel ficava preso
   dentro do .modal/.modal-body (overflow-y:auto) e era recortado. Coordenadas
   (top/left/width/max-height) sao calculadas em selectbusca.js: posicionar(). */
.selectbusca .sb-panel, .select-busca .sb-panel {
  position: fixed;
  z-index: 300; /* acima do .modal-overlay (200) */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 60vh; /* so fallback; o JS sobrescreve com o espaco real */
  overflow-y: auto;
  display: none;
}
.selectbusca.open .sb-panel, .select-busca.open .sb-panel { display: block; }

.selectbusca .sb-search, .select-busca .sb-search {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-3);
  background: var(--bg-elev);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;           /* abaixo disso o iOS da zoom ao focar */
  position: sticky;
  top: 0;
}
.selectbusca .sb-search:focus, .select-busca .sb-search:focus { outline: none; }

.selectbusca .sb-opt, .select-busca .sb-opt {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: 16px;
  min-height: 48px;          /* alvo de toque confortavel, nao so o minimo WCAG */
  display: flex;
  align-items: center;
  color: var(--text);
}
.selectbusca .sb-opt:hover, .select-busca .sb-opt:hover,
.selectbusca .sb-opt.destacado, .select-busca .sb-opt.destacado {
  background: var(--accent-soft);
  color: var(--accent);
}
.selectbusca .sb-opt.selecionado, .select-busca .sb-opt.selecionado { font-weight: 600; }
.selectbusca .sb-vazio, .select-busca .sb-vazio {
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
}

/* ============================================================ */
/* Toggle on/off (Padrao_Toggle_OnOff.md) - nunca checkbox cru    */
/* ============================================================ */
.toggle {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}
.toggle input { display: none; }
.toggle .toggle-trilho {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transicao);
}
.toggle .toggle-trilho::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transicao);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.toggle input:checked + .toggle-trilho { background: var(--success); }
.toggle input:checked + .toggle-trilho::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle-trilho { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle input:disabled + .toggle-trilho { opacity: .5; cursor: not-allowed; }

/* variante compacta 36x20 para linha de tabela densa */
.toggle.toggle-sm { width: 36px; height: 20px; }
.toggle.toggle-sm .toggle-trilho::after { width: 16px; height: 16px; }
.toggle.toggle-sm input:checked + .toggle-trilho::after { transform: translateX(16px); }

/* ============================================================ */
/* Tabs (Padrao_Tabs.md) - botao + sublinhado, nunca pilula       */
/* ============================================================ */
.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.tab {
  padding: 10px var(--sp-4);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.tab:hover { color: var(--text); }
.tab.ativo { color: var(--accent); border-bottom-color: var(--accent); }

.tab-pane { display: none; }
.tab-pane.ativo { display: block; }

/* ============================================================ */
/* Badge                                                          */
/* ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--bg-elev);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.badge-accent  { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border-color: transparent; }
.badge-danger  { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); border-color: transparent; }
.badge-warning { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); border-color: transparent; }

/* ============================================================ */
/* Tabela (Padrao_Tabela.md)                                      */
/* ============================================================ */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 600px; /* forca scroll-x no mobile em vez de espremer colunas */
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-elev);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-elev); }

/* coluna Acoes: fixa a direita (sticky), sem data-col-key, nunca filtra/ordena */
.table th.col-acoes,
.table td.col-acoes {
  position: sticky;
  right: 0;
  z-index: 4;
  background: var(--surface);
  text-align: right;
  white-space: nowrap;
}
.table thead th.col-acoes { z-index: 6; background: var(--bg-elev); }
.table tbody tr:hover td.col-acoes { background: var(--bg-elev); }

/* coluna fixa a esquerda (rotulo/checkbox que precisa continuar visivel ao rolar horizontal) */
.table th.col-fixa-esq,
.table td.col-fixa-esq {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
}
.table thead th.col-fixa-esq { z-index: 6; background: var(--bg-elev); }
.table tbody tr:hover td.col-fixa-esq { background: var(--bg-elev); }

/* slots de acao por linha: alinhados, gap fixo, nunca somem (ficam esmaecidos) */
.celula-acoes {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}
.celula-acoes .acao-form { display: inline-flex; margin: 0; }

.btn-icone {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  transition: background var(--transicao), color var(--transicao);
  text-decoration: none;
}
.btn-icone:hover { background: var(--bg); color: var(--text); }
.btn-icone.perigo:hover { color: var(--danger); }

/* slot indisponivel: span (nunca button disabled, corta tooltip), mesmo icone, esmaecido */
.btn-icone.desabilitado { opacity: .30; cursor: not-allowed; }
.btn-icone.desabilitado:hover { background: transparent; color: var(--text-dim); }

/* filtro por coluna estilo Excel */
.table th .th-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.table th .th-filtro-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  opacity: 0;
  transition: opacity var(--transicao), color var(--transicao);
}
.table th:hover .th-filtro-btn,
.table th.filtro-ativo .th-filtro-btn { opacity: 1; }
.table th.filtro-ativo .th-filtro-btn { color: var(--accent); }
.table th .th-filtro-input {
  display: none;
  margin-top: 6px;
  height: 34px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 8px;
  font-size: 16px;           /* piso do iOS: abaixo disso da zoom ao focar */
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.table th.filtro-aberto .th-filtro-input { display: block; }

/* toolbar da tabela: menu de 3 pontos (ordenar / colunas / exportar) */
.table-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-2); position: relative; }
.table-menu-wrapper { position: relative; }
.table-menu-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  cursor: pointer;
  color: var(--text-dim);
}
.table-menu-btn:hover { border-color: var(--accent); color: var(--accent); }
.table-menu {
  position: absolute; top: 100%; right: 0;
  margin-top: 6px; min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: none;
  z-index: 50;
}
.table-menu.aberto { display: block; }
.table-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--sp-4);
  font-size: 13px; cursor: pointer;
  color: var(--text);
}
.table-menu-item:hover { background: var(--bg-elev); color: var(--accent); }
.table-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

.table-empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-dim); }

/* ============================================================ */
/* Modal (Padrao_Modal.md) - vw/vh, nunca px. Substitui alert/    */
/* confirm/prompt nativos (Sem_Popup_Nativo.md).                  */
/* ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-overlay.aberto { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  overflow-y: auto;
  box-shadow: var(--shadow);
  animation: modalSobe .2s ease;
  display: flex;
  flex-direction: column;
}

/* tamanhos oficiais Fibonacci (34/55/89vw desktop) */
.modal.modal-sm { width: 34vw; max-height: 42vh; }
.modal.modal-md { width: 55vw; max-height: 70vh; }
.modal.modal-lg { width: 89vw; max-height: 90vh; }

@media (max-width: 1280px) {
  .modal.modal-md { width: 68vw; }
}
@media (max-width: 880px) {
  .modal.modal-sm,
  .modal.modal-md,
  .modal.modal-lg { width: 96vw; max-height: 92vh; }
}

/* fallback se vier sem tamanho declarado */
.modal:not(.modal-sm):not(.modal-md):not(.modal-lg) { width: 55vw; max-height: 70vh; }
@media (max-width: 1280px) {
  .modal:not(.modal-sm):not(.modal-md):not(.modal-lg) { width: 68vw; }
}
@media (max-width: 880px) {
  .modal:not(.modal-sm):not(.modal-md):not(.modal-lg) { width: 96vw; max-height: 92vh; }
}

@keyframes modalSobe {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.modal-header h3 { font-size: 17px; margin: 0; }

.modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--text-dim);
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); background: var(--bg-elev); }

.modal-body { padding: var(--sp-5); overflow-y: auto; }

.modal-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* variante CONFIRM (destrutiva/aviso) */
.modal.modal-confirm { text-align: center; }
.modal.modal-confirm .modal-body { padding: 32px 28px 12px; }
.modal.modal-confirm .modal-body h3 { font-size: 18px; margin-bottom: 8px; }
.modal.modal-confirm .modal-body p { color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.modal.modal-confirm .modal-footer { justify-content: center; }

.confirm-icone {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.confirm-icone i { font-size: 36px; }
.confirm-icone.confirm-perigo { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.confirm-icone.confirm-aviso  { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.confirm-icone.confirm-info   { background: var(--accent-soft); color: var(--accent); }

/* ============================================================ */
/* Loading (Padrao_Loading_Estado.md)                             */
/* ============================================================ */
.loading-inline {
  padding: 80px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.spinner-circle {
  width: 44px;
  height: 44px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rotate .8s linear infinite;
}
.loading-inline .loading-text { font-size: 14px; font-weight: 600; color: var(--text); }
.loading-sub { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.loading-overlay.aberto { display: flex; }
.loading-spinner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 44px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: modalSobe .2s ease;
}
.loading-spinner .loading-text { font-size: 14px; font-weight: 600; color: var(--text); }

@keyframes spinner-rotate { to { transform: rotate(360deg); } }

.spinner-icone { display: inline-block; animation: spinner-rotate .8s linear infinite; }

/* ============================================================ */
/* Toast (substitui alert nativo - Sem_Popup_Nativo.md)           */
/* ============================================================ */
.toast-container {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--text);
  animation: modalSobe .2s ease;
}
.toast i.toast-icone { font-size: 18px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.toast-success { border-left-color: var(--success); }
.toast-success i.toast-icone { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error i.toast-icone { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning i.toast-icone { color: var(--warning); }
.toast .toast-msg { flex: 1; line-height: 1.4; }
.toast .toast-fechar {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 16px; flex-shrink: 0; padding: 0;
}
.toast .toast-fechar:hover { color: var(--text); }

@media (max-width: 480px) {
  .toast-container { left: var(--sp-3); right: var(--sp-3); max-width: none; }
}

/* ============================================================ */
/* Dropzone (Padrao_Upload_Arquivo.md) - drag+clique              */
/* ============================================================ */
.dropzone {
  display: block;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  color: var(--text-dim);
  cursor: pointer;
  transition: .15s;
  user-select: none;
}
.dropzone:hover,
.dropzone.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-style: solid;
}
.dropzone.loaded {
  border-style: solid;
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}
.dropzone i { font-size: 36px; display: block; margin-bottom: 6px; }
.dropzone .dropzone-arquivo { color: var(--success); font-weight: 600; margin-top: 6px; display: block; font-size: 12.5px; }

.dropzone-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.dropzone-acao {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.dropzone-msg { font-size: 12.5px; color: var(--text-dim); }
.dropzone-msg.sucesso { color: var(--success); }
.dropzone-msg.erro { color: var(--danger); }

/* ============================================================ */
/* Icones Phosphor: tamanho/cor via classe (Icones_Phosphor.md)   */
/* ============================================================ */
.icon { font-size: 1.1rem; line-height: 1; display: inline-flex; vertical-align: middle; }
.icon-sm { font-size: .9rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.75rem; }
.icon-xl { font-size: 2.5rem; }
.icon-accent  { color: var(--accent); }
.icon-success { color: var(--success); }
.icon-danger  { color: var(--danger); }
.icon-muted   { color: var(--text-dim); }

/* ============================================================ */
/* Utilitarios de espacamento/layout - decisao nova de espaco/    */
/* largura entra aqui, nunca hardcoded na tela (Sistema_de_       */
/* Estilos.md:14,166: nada de style inline, tudo via classe).     */
/* ============================================================ */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mr-2 { margin-right: 6px; }

.min-w-0 { min-width: 0; }
.max-w-sm { max-width: 360px; }
.max-w-md { max-width: 420px; }
.max-w-lg { max-width: 480px; }

.col-36  { width: 36px; }
.col-70  { width: 70px; }
.col-80  { width: 80px; }
.col-90  { width: 90px; }
.col-100 { width: 100px; }
.chk-lg  { width: 18px; height: 18px; }

.campo-110 { min-width: 110px; }
.campo-120 { min-width: 120px; }
.campo-130 { min-width: 130px; }
.campo-140 { min-width: 140px; }

.text-center { text-align: center; }
.oculto { display: none; }

.subtitulo { color: var(--text-dim); font-size: 13px; margin: 0; }
.texto-dim-sm { color: var(--text-dim); font-size: 12px; }
.texto-danger { color: var(--danger); }

.badges-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.linha-form { display: contents; }
.btn-grande { height: 52px; font-size: 16px; }

/* ============================================================ */
/* Resumo de produto (topo das telas de contagem/recontagem)      */
/* ============================================================ */
.produto-resumo .badge { margin-bottom: 6px; }
.produto-resumo .produto-codigo { font-weight: 700; font-size: 16px; }
.produto-resumo .produto-desc { color: var(--text-dim); font-size: 14px; }
.produto-resumo .produto-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }

/* ============================================================ */
/* Lista de secao (membros/escopo de equipe)                      */
/* ============================================================ */
.lista-secao-titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.lista-linha { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.lista-linha:last-child { border-bottom: none; }

/* ============================================================ */
/* Lista de itens navegaveis (pendentes de contagem/recontagem)   */
/* ============================================================ */
.lista-links { display: flex; flex-direction: column; gap: 8px; }
.item-link { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); text-decoration: none; min-height: 44px; }
.item-link.concluido { opacity: .6; }
.item-link .item-cod { font-weight: 600; color: var(--text); }
.item-link .item-desc { font-weight: 400; color: var(--text-dim); }
.item-link .item-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.item-link .item-seta { color: var(--text-dim); flex-shrink: 0; }
.item-link .item-seta.ok { color: var(--success); }

/* ============================================================ */
/* Badge de notificacao (sino da sidebar)                         */
/* ============================================================ */
.badge-notif-wrap { position: relative; }
.badge-notif {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-notif.oculto { display: none; }

/* ============================================================ */
/* Calculadora de contagem (contagem/item.html, auditorias/item.html) */
/* ============================================================ */
.calc-wrap { max-width: 420px; margin: 0 auto; }
.calc-visor {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); text-align: right; margin-bottom: var(--sp-3);
}
.calc-total-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.calc-total {
  font-family: var(--font-titulo); font-size: 30px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; text-align: right;
}
.calc-dica { font-size: var(--fs-xs); color: var(--text-dim); }
/* campos de codigo (local, SKU): monoespacado e maiusculo, formato de etiqueta */
.input-codigo {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.campo-ajuda { font-size: var(--fs-xs); color: var(--text-dim); }
/* rotulo religado ao SelectBusca por JS: sinaliza que e clicavel */
.label-selectbusca { cursor: pointer; }

/* ============================================================ */
/* Campos grandes: telas de trabalho em campo (contagem/auditoria) */
/* ------------------------------------------------------------ */
/* Quem opera isso pode ter 65 anos, estar de pe num deposito, com */
/* pouca luz e sem oculos de leitura. Aqui o campo pesa mais que a */
/* elegancia: alvo grande, fonte grande, borda que se enxerga.     */
/* ============================================================ */
.campos-grandes .campo { gap: var(--sp-2); }

.campos-grandes .campo > label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);          /* nao usa o cinza fraco: precisa de contraste */
}

.campos-grandes .input,
.campos-grandes .sb-display {
  height: 64px;
  min-height: 64px;
  font-size: 22px;
  border-width: 2px;
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0 var(--sp-4);
}

.campos-grandes .input:focus,
.campos-grandes .selectbusca.open .sb-display {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);   /* halo: mostra onde esta o foco */
}

.campos-grandes .input-codigo { font-size: 24px; letter-spacing: .06em; }
.campos-grandes .input-qtd { height: 76px; font-size: 34px; }
.campos-grandes .campo-ajuda { font-size: 14px; }
.campos-grandes .campo-ajuda code { font-size: 15px; }
.campos-grandes .sb-label { font-size: 22px; }
.campos-grandes .btn-grande { height: 64px; font-size: 20px; }
.campos-grandes .btn-icone-quadrado { width: 64px; height: 64px; }
.campos-grandes .btn-icone-quadrado i { font-size: 28px; }

/* numeracao do passo dentro do rotulo ("1. Codigo do local") */
.passo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

/* campo + botao lado a lado (SKU + camera) */
.campo-com-botao { display: flex; gap: var(--sp-2); align-items: stretch; }
.campo-com-botao .input { flex: 1; min-width: 0; }

/* ============================================================ */
/* Calculadora: so o icone na tela, o teclado abre em modal       */
/* ============================================================ */
/* Ao lado do campo de quantidade. Fica na cor da marca porque e  */
/* opcional: quem ja sabe o numero digita e nunca abre o teclado. */
/* ============================================================ */
/* Checklist de selecao (Padrao_Selecao_em_Lote.md)               */
/* ------------------------------------------------------------ */
/* Aqui a selecao E o campo do formulario, e a acao e o botao de  */
/* salvar: por isso nao usa a faixa escura de acoes em lote, que  */
/* a nota reserva para tabela de registros.                       */
/* ============================================================ */

/* Checkbox proprio, nunca o do sistema operacional: o nativo muda de cara
   entre Windows, Mac e Linux e nao aceita cor nem raio. */
.chk {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  position: relative;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.chk:hover { border-color: var(--accent); }
.chk:checked { background: var(--accent); border-color: var(--accent); }
/* o "check" e uma borda em L girada 45 graus: acompanha cor e tamanho sem
   imagem, sem fonte de icone e sem SVG embutido */
.chk:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 1px;
  width: 6px; height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* TERCEIRO estado: parte marcada. Sem ele, "alguns" tem cara de "nenhum" e a
   pessoa clica duas vezes, desmarcando o que ja tinha escolhido. */
.chk:indeterminate { background: var(--accent); border-color: var(--accent); }
.chk:indeterminate::after {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 12px; height: 2px;
  background: #fff;
  border: 0;
  transform: none;
}
.chk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.checklist-topo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.checklist-busca { max-width: 220px; }
.checklist-conta { font-size: var(--fs-xs); color: var(--text-dim); margin-left: auto; }

/* Grupo recolhido (A, B, C...): so o cabecalho aparece ate alguem abrir. */
.checklist-grupo {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
  background: var(--surface);
}
.checklist-grupo.oculto { display: none; }
.checklist-grupo.tem-marcado { border-color: var(--accent); }

.checklist-grupo > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  cursor: pointer;
  list-style: none;              /* esconde o triangulo padrao do <details> */
  min-height: 48px;
  box-sizing: border-box;
}
.checklist-grupo > summary::-webkit-details-marker { display: none; }
.checklist-grupo > summary:hover { background: var(--bg-elev); }
.checklist-grupo-nome {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-lg);
}
.checklist-grupo-conta { font-size: var(--fs-xs); color: var(--text-dim); }
.checklist-seta { margin-left: auto; color: var(--text-dim); transition: transform var(--transicao); }
.checklist-grupo[open] > summary .checklist-seta { transform: rotate(180deg); }
.checklist-grupo[open] > summary { border-bottom: 1px solid var(--border); }

.checklist-itens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-1);
  max-height: 300px;
  overflow-y: auto;
  padding: var(--sp-2);
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 44px;              /* alvo de toque */
}
.checklist-item:hover { background: var(--bg-elev); }
.checklist-item.oculto { display: none; }
.checklist-cod { font-weight: 600; }
.checklist-desc {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checklist-avancado {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  padding: var(--sp-2) 0;
}

/* Encerrar contagem: acao de fim de trabalho, nao e a acao primaria da tela
   (a primaria e registrar item). Verde de conclusao, nao laranja de marca. */
.btn-encerrar {
  border-color: var(--success);
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  font-weight: 700;
}
.btn-encerrar:hover { background: var(--success); color: #fff; border-color: var(--success); }

.encerrada-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border: 2px solid var(--success);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}
.encerrada-aviso > i { font-size: 26px; color: var(--success); flex-shrink: 0; }
.encerrada-aviso p { margin: 2px 0 0; }

.btn-calc {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.btn-calc:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
#modalCalculadora .modal-header h3 { display: flex; align-items: center; gap: var(--sp-2); }
#modalCalculadora .modal-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.campo-ajuda code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--text);
}
/* quantidade esperada: so aparece no modo validacao */
.qtd-esperada {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-sm);
}
/* campo da quantidade total: maior que input comum, e o dado principal da tela */
.input-qtd {
  height: 56px;
  font-family: var(--font-titulo);
  font-size: 26px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.calc-entrada { font-size: 15px; color: var(--accent); min-height: 20px; font-variant-numeric: tabular-nums; }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: var(--sp-4); }
.calc-btn {
  height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 20px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.calc-btn:active { background: var(--bg-elev); }
.calc-btn.acao { background: var(--bg-elev); color: var(--text-dim); font-size: 15px; }
.calc-btn.soma { background: var(--accent-soft); color: var(--accent); grid-row: span 2; }
.calc-grid .calc-btn[data-dig="0"] { grid-column: span 2; }

/* ============================================================ */
/* Clamp mobile pequeno: utilitarios de largura fixa nao estouram */
/* ============================================================ */
@media (max-width: 480px) {
  .max-w-sm, .max-w-md, .max-w-lg,
  .col-36, .col-70, .col-80, .col-90, .col-100,
  .campo-110, .campo-120, .campo-130, .campo-140 { max-width: 100%; min-width: 0; }
}