/* UpWMS — Design System */
/* Fontes do Assistente de Endereços (escopo .wiz) */
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,600;0,700;0,800;0,900;1,800;1,900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[readonly], textarea[readonly] { background: #87CEEB !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BARRA DE ROLAGEM — PADRÃO DO SISTEMA
   ──────────────────────────────────────────────────────────────────────────
   Vale para TODA rotina: grids, páginas de detalhe, corpos de modal, listas de
   combo, painéis laterais. A barra do sistema operacional tem 15px de
   cinza-azulado — sobre as molduras claras do WMS ela pesa mais que o conteúdo,
   e na horizontal (grids de dezessete colunas) rouba altura de tabela e encosta
   na última linha.
   Aqui ela fica em petrol translúcido, mais fina, com o polegar recuado por uma
   borda transparente mais background-clip: padding-box — é o que dá o ar de
   trilho e mantém o polegar longe das bordas do grid. Três intensidades para o
   polegar responder ao mouse: repouso, hover e arraste. As setas nas pontas
   rolam uma linha por clique e marcam onde a barra começa e termina, o que ajuda
   no grid largo, em que o polegar horizontal é curto e se perde no trilho.

   DUAS TELAS FICAM DE FORA, pelo :not de cada seletor: Ocupação de Armazém
   (.ocup e o modal dela) e Gestão FEFO (.gfefo-root, .fefo-ov, .fefo-modal). As
   duas são de fundo escuro e já têm barra própria em ciano; petrol sobre #001a22
   desapareceria. Elemento excluído não casa com regra nenhuma daqui e mantém a
   barra do sistema, que é o que essas telas têm hoje fora das listas que elas
   mesmas estilizam.
   A LISTA DE EXCLUSÃO SE REPETE em cada regra porque seletor não aceita
   variável, e a repetição não é opcional: basta UMA regra de
   ::-webkit-scrollbar-* alcançar o elemento para o Chrome trocar a barra do
   sistema pela desenhada. Deixar de fora o hover do polegar, por exemplo, daria
   às telas escuras uma barra meio-desenhada, pior que a do sistema.

   scrollbar-color e scrollbar-width NÃO entram, de propósito: a partir do Chrome
   121, declarar as propriedades padrão DESLIGA os pseudo-elementos
   ::-webkit-scrollbar-*, e perderíamos o recuo do polegar, as setas e os estados
   de interação. Em navegador que só entende o padrão a barra segue a do sistema:
   nada quebra, apenas não fica estilizada.

   Roladores miúdos embutidos (.oc-rotas com 4px, .cm-allocs-scroll com 3px) e o
   balão escuro dos indicadores (.por-card-tip) desligam as setas na própria
   regra deles, mais adiante: seta de 15px não cabe num trilho de 4px, e a seta
   petrol não aparece sobre fundo escuro.
   ══════════════════════════════════════════════════════════════════════════ */
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-track {
  background: rgba(0,54,68,.05);
  border-radius: 8px;
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-thumb {
  background: rgba(0,54,68,.26);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-thumb:hover {
  background: rgba(0,54,68,.42);
  background-clip: padding-box;
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-thumb:active {
  background: rgba(0,54,68,.58);
  background-clip: padding-box;
}
/* Quadrado onde as duas barras se encontram: sem isto o navegador pinta um cinza
   chapado no canto, o único pedaço que denunciaria a barra do sistema. */
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Setas nas pontas ──────────────────────────────────────────────────────
   Estilizar ::-webkit-scrollbar não traz as setas de volta sozinho: o botão
   nasce sem display, e é o `display: block` com medida explícita que o
   materializa. O par :start:decrement / :end:increment é o que garante UMA seta
   em cada ponta — sem ele o Chrome desenha os dois botões juntos em cada
   extremidade (quatro no total, duas apontando para o mesmo lado).
   O desenho vem por background-image: pseudo-elemento de barra de rolagem não
   aceita `content`, então não há como reaproveitar o SVG dos ícones das telas.
   viewBox de 12 e não de 24: o chevron do sistema ocupa metade do quadro (x de 6
   a 18) e num botão de 9px sairia com 4px de largura, quase invisível. Com o
   quadro recortado no glifo ele preenche o botão. */
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button {
  display: none;
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:vertical:start:decrement,
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
  height: 15px;
  background-color: rgba(0,54,68,.05);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:horizontal:start:decrement,
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:horizontal:end:increment {
  display: block;
  width: 15px;
  background-color: rgba(0,54,68,.05);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234f6b76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8L6 4.5 9.5 8'/%3E%3C/svg%3E");
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234f6b76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234f6b76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5L4.5 6 8 9.5'/%3E%3C/svg%3E");
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234f6b76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5L8 6l-3.5 3.5'/%3E%3C/svg%3E");
}
/* Hover e clique: o fundo do botão escurece. A seta em si não muda de cor —
   trocar a imagem no hover pediria as quatro de novo, em petrol cheio, e o ganho
   não paga a duplicação. */
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:hover {
  background-color: rgba(0,54,68,.13);
}
*:not(.ocup, .ocup *, .ocup-modal, .ocup-modal *, .gfefo-root, .gfefo-root *, .fefo-ov, .fefo-ov *, .fefo-modal, .fefo-modal *)::-webkit-scrollbar-button:active {
  background-color: rgba(0,54,68,.2);
}

:root {
  /* Paleta UpWMS — teal #003644 (substitui o verde herdado) */
  --green-dark:    #003644;
  --green-mid:     #0a4d5e;
  --green-accent:  #2c8aa0;
  --green-btn:     #003644;
  --green-btn-h:   #0a4d5e;
  --white:         #ffffff;
  --gray-50:       #f8f9fa;
  --gray-100:      #f1f3f4;
  --gray-200:      #e9ecef;
  --gray-300:      #dee2e6;
  --gray-400:      #ced4da;
  --gray-500:      #adb5bd;
  --gray-600:      #6c757d;
  --gray-650:      #5a6268;
  --gray-700:      #495057;
  --gray-800:      #343a40;
  --blue:          #0d6efd;
  --yellow:        #ffc107;
  --red:           #dc3545;
  --orange:        #fd7e14;

  --sidebar-w: 240px;
  --topbar-h:  0px;
  --radius:    8px;
  --shadow:    0 2px 8px rgba(0,0,0,.08);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--gray-800);
  background: var(--gray-100);
  min-height: 100vh;
}

/* ── LOGIN ─────────────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #003644 0%, #00232c 100%);
}

.login-card {
  background: var(--white);
  border-radius: 16px;
  padding: 48px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

@media (max-width: 480px) {
  .login-card { padding: 24px 16px; }
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  justify-content: center;
}

.logo-mark {
  width: 48px;
  height: 48px;
  background: var(--green-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-mark svg { width: 24px; height: 24px; fill: var(--white); }
.logo-mark img { width: 30px; height: 30px; object-fit: contain; }

.logo-text { line-height: 1.1; }
.logo-text .name  { font-size: 20px; font-weight: 700; color: var(--green-dark); }
.logo-text .sub   { font-size: 11px; font-weight: 600; color: var(--gray-600); letter-spacing: 2px; text-transform: none; }

.login-title { font-size: 22px; font-weight: 600; color: var(--gray-800); margin-bottom: 24px; text-align: center; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px;font-weight: 600; color: var(--gray-600); margin-bottom: 6px; text-transform: none; letter-spacing: .5px; }
.field-hint { font-size: 10px; font-weight: 400; color: var(--gray-400); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.field-hint code { background: var(--gray-100); border-radius: 3px; padding: 0 3px; font-size: 10px; color: var(--green-dark); }
.field input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 14px;
  transition: border-color .2s;
  background: var(--white);
}
.field input:focus { outline: none; border-color: var(--green-accent); }

/* ── Custom Select ──────────────────────────────────────────────── */
.cs-wrap { position: relative; width: 100%; }
.cs-trigger {
  width: 100%; padding: 10px 32px 10px 14px; border: 1.5px solid var(--gray-400);
  border-radius: var(--radius); font-size: 14px; background: var(--white);
  cursor: pointer; user-select: none; color: var(--gray-800);
  position: relative; box-sizing: border-box;
}
.cs-trigger::after {
  content: '▾'; position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); color: var(--gray-500); pointer-events: none;
}
.cs-wrap.open .cs-trigger { border-color: var(--green-accent); }
.cs-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white); border: 1.5px solid var(--gray-300);
  border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.12);
  max-height: 240px; overflow-y: auto; z-index: 9999; display: none;
}
.cs-wrap.open .cs-dropdown { display: block; }
.cs-group {
  padding: 6px 12px 4px; font-size: 10px; font-weight: 700;
  color: var(--gray-400); text-transform: none; letter-spacing: .8px;
  background: var(--gray-50); border-bottom: 1px solid var(--gray-100);
}
.cs-item {
  padding: 9px 14px; font-size: 13px; color: var(--gray-800);
  cursor: pointer; transition: background .1s;
}
.cs-item:hover    { background: var(--gray-100); }
.cs-item.selected { background: #e1edf0; color: var(--green-dark); font-weight: 600; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--green-btn);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.btn-primary:hover  { background: var(--green-btn-h); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-full { width: 100%; }

.login-error {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.login-error.show { display: block; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #00485a 0%, #00232c 100%);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .2s;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-logo .logo-mark {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-logo .logo-mark svg { width: 20px; height: 20px; fill: var(--white); }
.sidebar-logo .logo-mark img { width: 26px; height: 26px; object-fit: contain; }

.sidebar-logo .logo-text .name { font-size: 15px; font-weight: 700; color: var(--white); letter-spacing: -.2px; }
.sidebar-logo .logo-text .sub  { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: 3px; text-transform: none; margin-top: 1px; }

.sidebar-home-btn {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; cursor: pointer;
  flex: 1; min-width: 0; padding: 0; text-align: left;
  transition: opacity .15s;
}
.sidebar-home-btn:hover { opacity: .75; }

.sidebar-nav { flex: 1; padding: 14px 10px; }

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  letter-spacing: 1.2px;
  text-transform: none;
  padding: 8px 10px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-radius: 8px;
  margin-bottom: 2px;
}
.nav-item:hover  { background: rgba(255,255,255,.1); color: var(--white); }
.nav-item.active {
  background: rgba(255,255,255,.95);
  color: var(--green-dark);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.nav-item .nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.nav-item:hover  .nav-icon { opacity: 1; }
.nav-item.active .nav-icon { opacity: 1; color: var(--green-dark); }

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: var(--white);
  border-radius: 10px;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item.active .nav-badge { background: var(--red); }
.nav-badge.hidden { display: none; }

/* ── SIDEBAR NAV GROUPS ──────────────────────────────────────────── */
.nav-group { margin-bottom: 2px; }

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,.65);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  border-radius: 6px;
  transition: color .18s, background .18s;
  margin-bottom: 1px;
}
.nav-group-header:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); }
.nav-group-header .nav-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: .65; }
.nav-group-chevron {
  width: 13px; height: 13px;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform .22s ease;
  opacity: .5;
}
.nav-group.expanded > .nav-group-header .nav-group-chevron { transform: rotate(90deg); }
.nav-group.expanded > .nav-group-header { color: rgba(255,255,255,.7); }

.nav-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.nav-group.expanded > .nav-group-items { max-height: 220px; }

.nav-item.nav-sub { padding-left: 24px; font-size: 12.5px; }

.sidebar-user {
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
}

.user-info { flex: 1; overflow: hidden; }
.user-info .user-name { font-size: 13px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info .user-role { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 1px; }

.sidebar-version {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  padding: 6px 0 10px;
  letter-spacing: .02em;
}
.sidebar.collapsed .sidebar-version { display: none; }

.btn-logout {
  background: rgba(255,255,255,.08);
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.5);
  padding: 7px;
  border-radius: 7px;
  transition: all .18s;
  display: flex;
  align-items: center;
}
.btn-logout:hover { background: rgba(255,255,255,.15); color: var(--white); }
.btn-logout svg { width: 16px; height: 16px; display: block; }

/* ── MAIN CONTENT ─────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}

.page { display: none; padding: 28px 32px; }
.page.active { display: block; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-800);
}

.page-actions { display: flex; gap: 10px; align-items: center; }

/* ── CARDS (dashboard) ─────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-card.yellow .stat-icon { background: #fff8e1; color: #c77c00; }
.stat-card.green  .stat-icon { background: #e1edf0; color: var(--green-btn); }
.stat-card.red    .stat-icon { background: #fce8e6; color: var(--red); }
.stat-card.blue   .stat-icon { background: #e8f0fe; color: var(--blue); }
.stat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.stat-card .label { font-size: 11px; font-weight: 600; color: var(--gray-600); text-transform: none; letter-spacing: .5px; }
.stat-card .value { font-size: 22px; font-weight: 700; color: var(--gray-800); line-height: 1.1; }
.stat-card .sub   { font-size: 11px; color: var(--gray-600); }

.stat-card.green .value { color: var(--green-btn); }
.stat-card.red   .value { color: var(--red); }
.stat-card.blue  .value { color: var(--blue); }
.stat-card.yellow .value { color: #c77c00; }
.stat-card.clickable { cursor: pointer; transition: box-shadow .15s, transform .1s; }
.stat-card.clickable:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-1px); }

/* ── DASHBOARD CHARTS ─────────────────────────────────────────── */
#page-dashboard { display:none; flex-direction:column; height:100%; padding:20px 28px 16px; box-sizing:border-box; overflow-y:auto; }
#page-dashboard.active { display:flex; }
.dash-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .06em;
  color: var(--gray-500);
  margin-bottom: 10px;
}
#geralPcGrid      { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#geralCarteiraGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media(max-width:1100px) {
  #geralPcGrid       { grid-template-columns: repeat(3, 1fr); }
  #geralCarteiraGrid { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:700px) {
  #geralPcGrid, #geralCarteiraGrid { grid-template-columns: repeat(2, 1fr); }
}
.dash-charts { display:grid; grid-template-columns:1fr 2fr 1.2fr; gap:14px; margin-top:12px; flex:1; min-height:180px; }
@media(max-width:1100px){ .dash-charts { grid-template-columns:1fr 2fr; } }
@media(max-width:900px){ .dash-charts { grid-template-columns:1fr; } }

/* ── ATIVIDADE RECENTE ────────────────────────────────────────── */
.ativ-feed { display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; }
.ativ-empty { font-size:12px; color:var(--gray-600); text-align:center; padding:24px 0; }
.ativ-item { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--gray-200); flex-shrink:0; }
.ativ-item:last-child { border-bottom:none; }
.ativ-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ativ-dot.aprovado  { background:var(--green-btn); }
.ativ-dot.reprovado { background:var(--red); }
.ativ-dot.concluido { background:var(--green-dark); }
.ativ-dot.pendente  { background:var(--gray-400); }
.ativ-info { flex:1; min-width:0; }
.ativ-nome   { font-size:12px; font-weight:600; color:var(--gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ativ-status { font-size:11px; color:var(--gray-600); margin-top:1px; }
.ativ-tempo  { font-size:11px; color:var(--gray-400); flex-shrink:0; }
.chart-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.chart-card-title { font-size:12px; font-weight:600; color:var(--gray-600); text-transform: none; letter-spacing:.5px; margin-bottom:8px; flex-shrink:0; }
.chart-wrap { position:relative; flex:1; min-height:0; }

/* ── PC TABS ──────────────────────────────────────────────────── */
.pc-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.pc-tab  { background:var(--white); border:1.5px solid var(--gray-300); padding:5px 16px; border-radius:20px; font-size:13px; font-weight:600; color:var(--gray-600); cursor:pointer; transition:all .15s; }
.pc-tab:hover { background:var(--gray-100); color:var(--gray-800); border-color:var(--gray-400); }
.pc-tab[data-sit="pendentes"].active  { border-color:var(--yellow); background:#fff8e1; color:#856404; }
.pc-tab[data-sit="aprovados"].active  { border-color:var(--green-btn); background:#e1edf0; color:#003644; }
.pc-tab[data-sit="reprovados"].active { border-color:var(--red); background:#fce8e6; color:#c62828; }

/* ── FILTER CHIPS ─────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: var(--white);
  transition: all .15s;
}
.chip:hover { opacity: .85; }
.chip.active { opacity: 1; }

.chip.pendente  { border-color: var(--yellow); color: #856404; }
.chip.analisando { border-color: var(--blue);  color: var(--blue); }
.chip.aprovado  { border-color: var(--green-btn); color: var(--green-btn); }
.chip.reprovado { border-color: var(--red);    color: var(--red); }
.chip.erro      { border-color: var(--gray-600); color: var(--gray-600); }
.chip.todos     { border-color: var(--gray-400); color: var(--gray-600); }

.chip.active.pendente   { background: #fff8e1; }
.chip.active.analisando { background: #e8f0fe; }
.chip.active.aprovado   { background: #e1edf0; }
.chip.active.reprovado  { background: #fce8e6; }
.chip.active.erro       { background: var(--gray-100); }
.chip.active.todos      { background: var(--gray-100); }

/* ── SEARCH BAR ─────────────────────────────────────────────── */
.search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 360px;
}

.search-input-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--gray-600);
  pointer-events: none;
}

.search-input-wrap input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--gray-800);
  background: var(--white);
  transition: border-color .2s;
}
.search-input-wrap input:focus { outline: none; border-color: var(--green-accent); }

.select-filter {
  padding: 7px 10px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--gray-800);
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-refresh {
  background: var(--white);
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--gray-600);
  transition: all .15s;
}
.btn-refresh:hover { border-color: var(--green-btn); color: var(--green-btn); }
.btn-refresh svg { width: 16px; height: 16px; }

/* ── TABLE ─────────────────────────────────────────────────── */
.table-wrap {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
  overflow-y: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: var(--gray-50);
  padding: 10px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: none;
  letter-spacing: .5px;
  white-space: nowrap;
  border-bottom: 1px solid var(--gray-200);
}

thead th .sort-icon { margin-left: 4px; opacity: .4; }

tbody tr { border-bottom: 1px solid var(--gray-200); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--gray-50); }

tbody td { padding: 8px 16px; vertical-align: middle; }

.td-name { font-weight: 600; color: var(--gray-800); }
.td-doc  { font-size: 13px;color: var(--gray-600); font-family: monospace; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-pendente   { background: #f8f9fa; color: #6c757d; }
.status-pendente::before   { background: #6c757d; }
.status-analisando { background: #e8f0fe; color: #0d6efd; }
.status-analisando::before { background: #0d6efd; }
.status-aprovado   { background: #e1edf0; color: #003644; }
.status-aprovado::before   { background: #003644; }
.status-reprovado  { background: #fce8e6; color: #c62828; }
.status-reprovado::before  { background: #dc3545; }
.status-erro       { background: #fff3e0; color: #e65100; }
.status-erro::before       { background: #fd7e14; }

.td-actions { display: flex; gap: 6px; align-items: center; }

.btn-icon {
  border: none;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.btn-icon svg { width: 15px; height: 15px; }

.btn-icon.view   { background: #e1edf0; color: var(--green-btn); }
.btn-icon.view:hover   { background: var(--green-btn); color: var(--white); }
.btn-icon.quick  { background: #e8f0fe; color: var(--blue); }
.btn-icon.quick:hover  { background: var(--blue); color: var(--white); }
.btn-icon.edit   { background: var(--gray-100); color: var(--gray-600); }
.btn-icon.edit:hover   { background: var(--gray-200); color: var(--gray-800); }
.btn-icon.eye    { background: #ede9fe; color: #7c3aed; }
.btn-icon.eye:hover    { background: #7c3aed; color: var(--white); }
.btn-icon.delete { background: #fce8e6; color: var(--red); }
.btn-icon.delete:hover { background: var(--red); color: var(--white); }
.btn-icon.toggle      { background: #e1edf0; color: var(--green-btn); }
.btn-icon.toggle:hover { background: var(--green-btn); color: var(--white); }
.btn-icon.toggle.off  { background: var(--gray-100); color: var(--gray-400); }
.btn-icon.toggle.off:hover { background: var(--green-btn); color: var(--white); }

tr.row-inactive td { opacity: .45; }
tr.row-inactive code { text-decoration: line-through; }

.td-em { color: var(--gray-400); }

/* ── PAGINATION ─────────────────────────────────────────────── */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}

.pagination-info { font-size: 13px; color: var(--gray-600); }

.pagination-btns { display: flex; gap: 6px; align-items: center; }

.btn-page {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gray-400);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  transition: all .15s;
  padding: 0 8px;
}
.btn-page:hover    { border-color: var(--green-btn); color: var(--green-btn); }
.btn-page.active   { background: var(--green-btn); border-color: var(--green-btn); color: var(--white); }
.btn-page:disabled { opacity: .4; cursor: not-allowed; }
.btn-page svg { width: 14px; height: 14px; }

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

/* ── Diálogo de aviso/confirmação amigável ───────────────────────────── */
.confirm-overlay { z-index: 20000; background: rgba(2, 14, 18, .5); backdrop-filter: blur(2px); }
.confirm-card {
  width: 100%; max-width: 380px; background: var(--white); border-radius: 16px;
  padding: 26px 26px 20px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  transform: translateY(14px) scale(.97); opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .22s;
}
.modal-overlay.open .confirm-card { transform: none; opacity: 1; }
.confirm-icon {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1;
  background: #fff4e0; box-shadow: 0 0 0 8px rgba(245,158,11,.10);
  animation: confirm-pop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes confirm-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm-title { font-size: 17px; font-weight: 700; color: var(--gray-800); margin-bottom: 8px; }
.confirm-msg {
  font-size: 14px; line-height: 1.5; color: var(--gray-600); margin: 0; overflow-wrap: break-word; word-break: break-word;
  max-height: 42vh; overflow-y: auto; padding-right: 4px;
}
.confirm-sub { font-size: 13px;color: var(--gray-500, #94a3b8); margin: 8px 0 0; }
/* Linhas de lista dentro de confirm-msg (ex.: produtos/pedidos sem cadastro WMS).
   .confirm-msg é centralizado por padrão (pensado p/ aviso curto de 1 linha); uma
   lista de itens de descrição longa nesse alinhamento vira zigue-zague ilegível
   quando quebra linha. .cm-row força bloco + esquerda só nesses itens, sem mexer
   no alinhamento padrão usado pelas demais mensagens (curtas) do sistema. */
.cm-row { display: block; text-align: left; padding: 6px 0; border-bottom: 1px solid var(--gray-200); color: var(--gray-650); }
.cm-row:last-child { border-bottom: none; }
.cm-row-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--gray-650); }
/* Avisos "Pedidos em uso" / "Endereços em uso" (htmlListaEmUso, biblio-wms.js): um cartão por
   item, alinhado à esquerda como .cm-row. Tons petrol e ícone de pessoa, como o hint "em uso"
   do grid — é uma situação passageira do WMS, não erro. O item já em ordem aberta (só O.R.)
   troca a borda por âmbar: esse não será liberado pela inatividade de ninguém. */
.cm-uso-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; text-align: left; }
/* O diálogo padrão (380px) aperta os cartões e quebra quase toda linha: com a lista, alarga. */
.confirm-card:has(.cm-uso-lista) { max-width: 460px; }
.cm-uso-item {
  padding: 10px 12px 11px;
  background: linear-gradient(180deg, #f6fafb 0%, #fff 100%);
  border: 1px solid #d3e4e8; border-left: 3px solid #0a4d5e; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,54,68,.06);
}
.cm-uso-item.is-ordem { border-left-color: #b45309; }
.cm-uso-topo { display: flex; align-items: baseline; gap: 8px; }
.cm-uso-tag { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5b7f88; }
.cm-uso-num {
  font: 800 15px var(--fdisp, 'Saira', 'Segoe UI', sans-serif); line-height: 1.2;
  color: #003644; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.cm-uso-desc { margin-top: 3px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--gray-800); }
/* Linhas "quem" e "prazo": ícone em coluna fixa e texto na outra, para o ícone nunca quebrar
   sozinho e o selo "desde" seguir alinhado ao texto quando não couber na mesma linha. */
.cm-uso-quem, .cm-uso-prazo { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; align-items: start; }
.cm-uso-quem {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed #d3e4e8;
  font-size: 12px; line-height: 1.45; color: var(--gray-650);
}
.cm-uso-prazo { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: #5b7f88; }
.cm-uso-quem svg, .cm-uso-prazo svg { width: 14px; height: 14px; margin-top: 2px; color: #0a4d5e; }
.cm-uso-item.is-ordem .cm-uso-quem svg { color: #b45309; }
.cm-uso-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.cm-uso-quem b, .cm-uso-prazo b { font-weight: 800; color: #003644; }
.cm-uso-desde {
  padding: 1px 8px; border-radius: 999px; background: #e8f2f4;
  font-size: 11px; font-weight: 600; color: #0a4d5e; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.confirm-actions button { min-width: 120px; }
/* Botão de negação (Não / Cancelar / Voltar): contorno vermelho no hover e no foco por
   teclado, igual aos Cancelar/Fechar das demais telas (.cm-cancel, .porr-btn-cancel).
   Quando o botão da esquerda é uma alternativa e não uma negação, confirmModal recebe
   cancelNeutro:true e a classe não é aplicada. */
.confirm-actions .confirm-btn-neg { transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.confirm-actions .confirm-btn-neg:hover,
.confirm-actions .confirm-btn-neg:focus-visible { background: rgba(192,71,59,.07); color: #c0473b; border-color: rgba(192,71,59,.4); box-shadow: 0 0 0 2.5px rgba(192,71,59,.12); outline: none; }
/* cores por tipo */
.confirm-card[data-type="warning"] .confirm-icon { background: #fff4e0; box-shadow: 0 0 0 8px rgba(245,158,11,.10); }
.confirm-card[data-type="danger"]  .confirm-icon { background: #ffe9e6; box-shadow: 0 0 0 8px rgba(192,71,59,.10); }
.confirm-card[data-type="error"]   .confirm-icon { background: #ffe9e6; box-shadow: 0 0 0 8px rgba(192,71,59,.12); }
.confirm-card[data-type="info"]    .confirm-icon { background: #e3f3f4; box-shadow: 0 0 0 8px rgba(47,164,169,.12); }
.confirm-card[data-type="success"] .confirm-icon { background: #e4f6ea; box-shadow: 0 0 0 8px rgba(46,158,94,.12); }

/* ── Animação de sucesso: a ordem de serviço voando pela tela ─────────────
   UMA estrutura para as três ordens (Coleta, Reposição e Inventário). Antes
   eram três blocos independentes, e a Coleta era a única de cartão branco, com
   número menor, partida mais baixa e sem halo, brilho, sparkle ou resumo.
   Padronizado aqui: cartão petrol, bottom 18%, número 18px, os três efeitos e
   a linha de resumo valem para as três rotinas.
   O que continua próprio de cada uma: a DURAÇÃO do voo (decisão explícita de
   não mexer), o arco do percurso, o ícone e o texto.
   O `left` acomoda fora da tela o cartão mais largo — com a linha de resumo,
   os antigos -280px e -320px deixariam a Coleta e a Reposição aparecendo
   parcialmente no primeiro quadro. */
.fly-ord {
  position: fixed; left: -360px; bottom: 18%;
  z-index: 21000; pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: cubic-bezier(.3,.5,.3,1);
  animation-fill-mode: forwards;
}
.fly-ord--oc { animation-name: fly-ord-move-oc; animation-duration: 1.9s;
  animation-timing-function: cubic-bezier(.45,.05,.35,1); }
.fly-ord--or { animation-name: fly-ord-move-or; animation-duration: 1.9s;
  animation-timing-function: cubic-bezier(.38,.04,.22,1); }
.fly-ord--oi { animation-name: fly-ord-move-oi; animation-duration: 2.8s; }
.fly-ord-glow {
  position: absolute; inset: -34px -46px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47,164,169,.55), transparent 72%);
  filter: blur(8px); opacity: .7; will-change: opacity;
  animation: fly-ord-glow 1.1s ease-in-out infinite alternate;
}
.fly-ord-paper {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; padding: 15px 24px;
  background: linear-gradient(135deg, #0a4d5e 0%, #003644 55%, #00232c 100%);
  border-radius: 16px; border: 1px solid rgba(103,232,249,.35);
  box-shadow: 0 22px 60px rgba(0,54,68,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.fly-ord-paper::after {   /* brilho deslizante (transform p/ ser acelerado na GPU) */
  content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(0) skewX(-18deg); will-change: transform;
  animation: fly-ord-shine 1.4s ease-in-out .3s 1 forwards;
}
.fly-ord-ico { position: relative; font-size: 34px; line-height: 1; filter: drop-shadow(0 0 10px rgba(103,232,249,.6)); }
/* A Reposição mostra origem e destino (três glifos): reduzido para o conjunto
   não ficar mais largo que o texto ao lado. */
.fly-ord-ico--multi { display: flex; align-items: center; gap: 5px; font-size: 26px; }
.fly-ord-arrow { font-size: 15px; color: rgba(255,255,255,.55); }
.fly-ord-spark { position: absolute; top: -6px; right: -11px; font-size: 15px; animation: fly-ord-spark 1s ease-in-out infinite; }
.fly-ord-txt { display: flex; flex-direction: column; line-height: 1.25; }
.fly-ord-txt span { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: rgba(125,211,216,.9); text-transform: uppercase; }
.fly-ord-txt b { font-size: 18px; color: #eafcff; text-shadow: 0 0 10px rgba(103,232,249,.4); }
.fly-ord-txt i { font-size: 11px; font-style: normal; color: rgba(230,252,255,.72); margin-top: 1px; }
/* Arcos contínuos (sem reversões de escala) — voo da esquerda p/ a direita.
   Cada rotina mantém o percurso que já tinha. */
@keyframes fly-ord-move-oc {
  0%   { transform: translate3d(0, 0, 0)           rotate(-12deg) scale(.85); opacity: 0; }
  14%  { opacity: 1; }
  52%  { transform: translate3d(48vw, -42vh, 0)    rotate(  7deg) scale(1.06); opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate3d(112vw, -82vh, 0)   rotate( 18deg) scale(.78); opacity: 0; }
}
@keyframes fly-ord-move-or {
  0%   { transform: translate3d(0, 0, 0)           rotate(-10deg) scale(.84); opacity: 0; }
  13%  { opacity: 1; }
  52%  { transform: translate3d(50vw, -38vh, 0)    rotate(  5deg) scale(1.07); opacity: 1; }
  87%  { opacity: 1; }
  100% { transform: translate3d(114vw, -78vh, 0)   rotate( 14deg) scale(.79); opacity: 0; }
}
@keyframes fly-ord-move-oi {
  0%   { transform: translate3d(0, 0, 0)           rotate( -9deg) scale(.85); opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translate3d(56vw, -36vh, 0)    rotate(  4deg) scale(1.04); opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translate3d(124vw, -86vh, 0)   rotate( 14deg) scale(.72); opacity: 0; }
}
@keyframes fly-ord-glow  { from { opacity: .45; } to { opacity: .9; } }
@keyframes fly-ord-shine { 0% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(360%) skewX(-18deg); } }
@keyframes fly-ord-spark { 0%,100% { transform: scale(.85) rotate(-8deg); opacity: .7; } 50% { transform: scale(1.15) rotate(8deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* Encurtar o voo aqui é acessibilidade, e não a duração própria de cada
     rotina: quem pediu menos movimento recebe o mesmo corte nas três. */
  .fly-ord--oc, .fly-ord--or, .fly-ord--oi { animation-duration: .6s; }
  .fly-ord-glow, .fly-ord-paper::after, .fly-ord-spark { animation: none; }
}

.modal {
  background: var(--white);
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(16px);
  transition: transform .2s;
}
.modal-overlay.open .modal { transform: translateY(0); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--gray-200);
}

.modal-title { font-size: 16px; font-weight: 700; color: var(--gray-800); }

.btn-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-600);
  padding: 4px;
  border-radius: 4px;
  transition: color .15s;
}
.btn-close:hover { color: var(--gray-800); }
.btn-close svg { width: 20px; height: 20px; display: block; }

.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btn-secondary {
  padding: 8px 18px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.btn-secondary:hover { border-color: var(--gray-600); color: var(--gray-800); }

/* Anexos */
.anexo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.anexo-item:last-child { border-bottom: none; }
.anexo-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.anexo-tipo { font-size: 13px;font-weight: 600; color: var(--green-btn); }
.anexo-nome { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anexo-meta { font-size: 11px; color: var(--text-secondary); }
.anexo-actions { display: flex; gap: 4px; flex-shrink: 0; }

textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 72px;
  transition: border-color .2s;
}
textarea:focus { outline: none; border-color: var(--green-accent); }

select {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--white);
}

/* ── QUICK STATUS DROPDOWN ─────────────────────────────────────── */
.quick-status-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
}
.quick-status-overlay.open { display: block; }

.quick-status-menu {
  position: fixed;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: 6px;
  z-index: 401;
  min-width: 160px;
  display: none;
}
.quick-status-menu.open { display: block; }

.status-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .1s;
}
.status-opt:hover { background: var(--gray-100); }
.status-opt::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-opt.pendente::before   { background: #6c757d; }
.status-opt.analisando::before { background: #0d6efd; }
.status-opt.aprovado::before   { background: #003644; }
.status-opt.reprovado::before  { background: #dc3545; }
.status-opt.erro::before       { background: #fd7e14; }

/* ── TOAST ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--gray-800);
  color: var(--white);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow);
  animation: slideIn .2s ease;
}
.toast.success { background: var(--green-btn); }
.toast.error   { background: var(--red); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── LOADING ─────────────────────────────────────────────────── */
.loading-row td {
  text-align: center;
  padding: 40px;
  color: var(--gray-600);
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--green-btn);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

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

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Notebook / small desktop (≤1440px) */
@media (max-width: 1440px) {
  :root { --sidebar-w: 210px; }
  .page { padding: 20px 24px; }
  #page-dashboard { padding: 20px 24px; }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
  .stat-card .value { font-size: 22px; }
}

/* Notebook apertado (≤1280px) */
@media (max-width: 1280px) {
  :root { --sidebar-w: 196px; }
  .page { padding: 18px 20px; }
  #page-dashboard { padding: 18px 20px; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 0; }
  .stat-card { padding: 14px; gap: 10px; }
  .stat-icon { width: 40px; height: 40px; }
  .fluxo-builder { grid-template-columns: 1fr; }
  .fluxo-legend { position: static; }
  .sidebar-logo .logo-text .name { font-size: 13px; }
  .nav-item { font-size: 13px;padding: 8px 10px; }
}

/* Tela pequena / tablet paisagem (≤1024px) */
@media (max-width: 1024px) {
  :root { --sidebar-w: 180px; }
  .page { padding: 16px; }
  #page-dashboard { padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-charts { grid-template-columns: 1fr; }
  .page-title { font-size: 17px; }
  .page-actions .btn { font-size: 13px;padding: 6px 10px; }
}

/* ── HAMBURGER ───────────────────────────────────────────────── */
.hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: var(--green-dark);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: .2s;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
}
.sidebar-overlay.open { display: block; }

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s;
    z-index: 101;
    width: 260px !important;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-collapse-btn { display: none; }

  .main-content {
    margin-left: 0 !important;
    padding-top: 0;
  }

  .page, #page-dashboard { padding: 56px 12px 16px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 12px; gap: 8px; }
  .stat-icon { width: 36px; height: 36px; }
  .stat-card .value { font-size: 18px; }
  .stat-card .label { font-size: 11px; }

  /* Page header */
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-header .page-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .page-title { font-size: 16px; }

  /* Tables */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  .td-name { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Filters */
  .pc-filters, .reanalise-filters { flex-direction: column; gap: 8px; }
  .pc-filters > *, .reanalise-filters > * { width: 100% !important; }
  .select-filter, .cs-wrap { width: 100%; }

  /* Modals */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    border-radius: 16px 16px 0 0;
    max-height: 92dvh;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto;
  }
  .modal-wide, .modal-sm, .modal-resultado { max-width: 100% !important; width: 100% !important; }
  .modal-body { max-height: 60dvh; overflow-y: auto; }

  /* Config cards */
  .config-card-hdr { flex-direction: column; align-items: flex-start; gap: 10px; }
  .config-job-row { flex-wrap: wrap; gap: 8px; }
  .config-job-row input[type="number"] { width: 70px; }
  .custosConfigWrap { flex-wrap: wrap; }

  /* Dashboard charts */
  .dash-charts { grid-template-columns: 1fr; }

  /* PC tabs / job tabs */
  .pc-tabs, .job-tabs-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .pc-tab { white-space: nowrap; flex-shrink: 0; }

  /* Fluxo legend */
  .fluxo-builder { grid-template-columns: 1fr; }
  .fluxo-legend { position: static; max-height: none; }

  /* Bulk bar */
  .bulk-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .bulk-bar-actions { flex-wrap: wrap; gap: 6px; }

  /* Botões */
  .btn-primary, .btn-secondary, .btn-outline { padding: 8px 14px; font-size: 13px; }
}

/* Tablet retrato (≤600px) */
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-stats-row { grid-template-columns: 1fr 1fr; }
}

/* Celular pequeno (≤480px) */
@media (max-width: 480px) {
  .page, #page-dashboard { padding: 56px 8px 12px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-card .value { font-size: 16px; }
  .modal-body { max-height: 55dvh; }
  .page-header .page-actions .btn-primary { width: 100%; justify-content: center; }
  table { font-size: 13px;}
  th, td { padding: 8px 6px; }
}

@media (max-width: 768px) {
  .page-actions { flex-wrap: wrap; }
  .oc-head { flex-wrap: wrap; }

  /* Touch targets mínimos (44x44px) */
  .btn-icon { padding: 10px; min-width: 44px; min-height: 44px; }
  .wms-close { width: 44px; height: 44px; }
  .btn-page { min-width: 40px; height: 40px; }
}

/* ── PRÉ-CADASTROS ─────────────────────────────────────────────── */
.modal-wide { max-width: 700px; }
.modal-sm   { max-width: 400px; }

@media (max-width: 768px) {
  .modal { width: calc(100vw - 32px); max-width: 100%; }
  .modal-wide { max-width: calc(100vw - 32px); }
  .modal-sm { max-width: calc(100vw - 32px); }
}
@media (max-width: 480px) {
  .modal-body { padding: 16px; }
  .modal-header { padding: 16px; }
}

.btn-danger {
  background: var(--red);
  color: var(--white);
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-danger:hover { background: #b02a37; }

.modal-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 20px;
}

.tab-btn {
  padding: 8px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover  { color: var(--gray-800); }
.tab-btn.active { color: var(--green-btn); border-bottom-color: var(--green-btn); }

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

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 16px;
}

.pc-info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--gray-600);
}
.pc-info-bar:empty { display: none; }

.badge-sync {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.sync-ok   { background: #e1edf0; color: #003644; }
.sync-pend { background: #fff3e0; color: #e65100; }

/* ── FLUXO DE CRÉDITO ─────────────────────────────────────────── */
.fluxo-builder {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
  align-items: start;
}

.fluxo-steps { display: flex; flex-direction: column; align-items: center; }

.loading-flow { padding: 40px; color: var(--gray-600); }

.flow-empty {
  padding: 48px 32px;
  text-align: center;
  color: var(--gray-600);
  background: var(--white);
  border-radius: var(--radius);
  border: 2px dashed var(--gray-200);
  width: 100%;
  line-height: 1.8;
}

.flow-start {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--green-btn);
  color: var(--white);
  padding: 9px 22px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}

.flow-connector {
  color: var(--gray-400);
  font-size: 18px;
  line-height: 1;
  padding: 4px 0;
}

.flow-step {
  width: 100%;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  transition: opacity .2s;
}

.flow-step.step-inactive { opacity: .55; }

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-icon-wrap.tipo-externo    { background: #e8f0fe; color: var(--blue); }
.step-icon-wrap.tipo-interno    { background: #e1edf0; color: var(--green-btn); }
.step-icon-wrap.tipo-erp              { background: #fff3e0; color: var(--orange); }
.step-icon-wrap.tipo-erp_atribuicao   { background: #fff3e0; color: var(--orange); }

.step-info { flex: 1; min-width: 0; }
.step-name { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.step-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }

.tipo-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}
.tipo-chip.tipo-externo    { background: #e8f0fe; color: var(--blue); }
.tipo-chip.tipo-interno    { background: #e1edf0; color: #003644; }
.tipo-chip.tipo-erp              { background: #fff3e0; color: var(--orange); }
.tipo-chip.tipo-erp_atribuicao   { background: #fff3e0; color: var(--orange); }
.tipo-chip.tipo-skip       { background: var(--gray-100); color: var(--gray-600); }

.step-subtipo-lbl { font-size: 13px;color: var(--gray-600); }
.pf-dot { font-size: 11px; color: var(--blue); font-weight: 600; }
.pj-dot { font-size: 11px; color: var(--green-btn); font-weight: 600; }

.step-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-step-ctrl {
  border: none;
  background: var(--gray-100);
  color: var(--gray-600);
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.btn-step-ctrl:hover:not(:disabled) { background: var(--gray-200); color: var(--gray-800); }
.btn-step-ctrl:disabled { opacity: .3; cursor: not-allowed; }
.btn-step-ctrl.edit:hover:not(:disabled) { background: #e8f0fe; color: var(--blue); }
.btn-step-ctrl.delete:hover { background: #fce8e6; color: var(--red); }

/* CSS toggle switch */
.toggle-wrap  { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; flex-shrink: 0; }
.toggle-input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; inset: 0; background: var(--gray-400); border-radius: 10px; transition: .2s; }
.toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .2s; }
.toggle-input:checked + .toggle-slider { background: var(--green-btn); }
.toggle-input:checked + .toggle-slider::before { transform: translateX(16px); }

.step-actions-bar {
  display: flex;
  gap: 20px;
  padding: 8px 16px 10px 64px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  font-size: 12px;
}
.step-action { color: var(--gray-600); }
.step-action.sucesso { color: #003644; }
.step-action.falha   { color: var(--red); }
.step-action strong  { font-weight: 600; }

/* Legend */
.fluxo-legend {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  font-size: 12px;
  position: sticky;
  top: 20px;
}
.legend-title   { font-size: 13px; font-weight: 700; color: var(--gray-800); margin-bottom: 12px; }
.legend-section { font-size: 10px; font-weight: 700; color: var(--gray-600); letter-spacing: .8px; text-transform: none; margin-bottom: 8px; }
.legend-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.leg-ic { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.leg-ic.continuar { background: #e8f0fe; color: var(--blue); }
.leg-ic.aprovar   { background: #e1edf0; color: #003644; }
.leg-ic.reprovar  { background: #fce8e6; color: var(--red); }
.leg-lbl  { font-weight: 600; color: var(--gray-800); flex: 1; }
.leg-desc { color: var(--gray-600); }
.leg-tipo-lbl { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .3px; margin-bottom: 5px; }
.leg-tipo-lbl.externo    { background: #e8f0fe; color: var(--blue); }
.leg-tipo-lbl.interno    { background: #e1edf0; color: #003644; }
.leg-tipo-lbl.hub        { background: #f0f4ff; color: #4338ca; }
.leg-tipo-lbl.atribuicao { background: #fff7ed; color: #c2410c; }
.leg-tipo-item { color: var(--gray-600); padding: 2px 0 2px 8px; font-size: 13px;display: flex; justify-content: space-between; }
.leg-price { color: var(--gray-400); font-size: 11px; font-weight: 500; padding-right: 4px; }
.leg-num { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#e8eaf6; color:#4338ca; font-size:10px; font-weight:700; margin-right:6px; flex-shrink:0; }

/* Field hint */
.field-hint { color: #64748b; font-size: 11px; margin-top: 5px; line-height: 1.5; display: block; }

/* Tour */
.tour-box {
  position: fixed;
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06);
  pointer-events: all;
  z-index: 9999;
  transition: top .25s, left .25s;
}
.tour-progress  { font-size: 11px; color: #94a3b8; font-weight: 600; letter-spacing: .4px; text-transform: none; }
.tour-title     { font-size: 15px; font-weight: 700; color: #1e293b; margin: 6px 0 10px; }
.tour-desc      { font-size: 13px; color: #475569; line-height: 1.65; margin: 0; white-space: pre-line; }
.tour-close-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 16px; padding: 0 2px; line-height: 1; }
.tour-close-btn:hover { color: #475569; }

/* "Como funciona?" button */
.btn-tour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--green-btn);
  background: transparent;
  color: var(--green-btn);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-tour:hover { background: var(--green-btn); color: #fff; }

/* Result modal */
.result-loading { padding: 24px; text-align: center; color: var(--gray-600); }
.result-error   { padding: 16px; background: #fce8e6; color: var(--red); border-radius: var(--radius); }
.result-banner-ok  { padding: 14px 18px; background: #e1edf0; color: #003644; border-radius: var(--radius); font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.result-banner-nok { padding: 14px 18px; background: #fce8e6; color: var(--red); border-radius: var(--radius); font-size: 16px; font-weight: 700; margin-bottom: 16px; }

.result-steps { display: flex; flex-direction: column; gap: 8px; }
.result-step { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); background: var(--gray-50); border: 1px solid var(--gray-200); }
.result-step.ok   { border-color: #c3e6cb; background: #f0faf3; }
.result-step.fail { border-color: #f5c6cb; background: #fff5f5; }
.result-step.skipped { opacity: .6; }
.rs-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px;font-weight: 700; flex-shrink: 0; background: var(--gray-200); color: var(--gray-600); }
.result-step.ok   .rs-icon { background: #c3e6cb; color: #003644; }
.result-step.fail .rs-icon { background: #f5c6cb; color: var(--red); }
.rs-info { flex: 1; min-width: 0; }
.rs-nome { display: block; font-size: 13px; font-weight: 600; color: var(--gray-800); }
.rs-msg  { display: block; font-size: 13px;color: var(--gray-600); }
.rs-trace { margin-top: 8px; padding: 8px 10px; background: var(--gray-50); border-radius: 6px; border: 1px solid var(--gray-200); font-size: 11px; }
.rs-trace-url { color: var(--gray-500); margin-bottom: 6px; word-break: break-all; }
.rs-trace-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.rs-trace-icon { font-size: 10px; font-weight: 700; width: 12px; flex-shrink: 0; }
.rs-trace-row.ok   .rs-trace-icon { color: #003644; }
.rs-trace-row.fail .rs-trace-icon { color: var(--red); }
.rs-trace-campo { font-weight: 600; color: var(--gray-700); min-width: 80px; }
.rs-trace-val { color: var(--gray-600); }
.rs-trace-resp { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--gray-200); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rs-trace-kv { color: var(--gray-600); white-space: nowrap; }

/* Vincular button */
.btn-vincular {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--green-btn);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.btn-vincular:hover { background: var(--green-btn-h); }

.btn-motivo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fce8e6;
  color: var(--red);
  border: 1.5px solid #f5c6cb;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
}
.btn-vincular.hidden { display: none; }

.btn-icon.btn-lock { color: var(--gray-400); }
.btn-icon.btn-lock:hover { background: var(--gray-100); color: var(--gray-600); }
.badge-integrado {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  background: #e1edf0; color: var(--green-dark);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid #a5d6a7;
}

/* Vincular/Reprovar decision modal */
.vincular-opcoes { display: flex; flex-direction: column; gap: 10px; }
.btn-opcao-aprovar, .btn-opcao-reprovar {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  border-radius: var(--radius); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
  text-align: left;
}
.btn-opcao-aprovar, .btn-opcao-reprovar {
  background: var(--white); border: 2px solid var(--gray-300); color: var(--gray-700);
}
.btn-opcao-aprovar:hover { background: #f0f6f8; border-color: var(--green-btn); color: var(--green-dark); }
.btn-opcao-aprovar.selected { background: #cfe2e8; border-color: var(--green-btn); color: var(--green-dark); }
.btn-opcao-reprovar:hover { background: #fff5f5; border-color: var(--red); color: var(--red); }
.btn-opcao-reprovar.selected { background: #fcdede; border-color: var(--red); color: var(--red); }

/* ── CONFIGURAÇÕES ────────────────────────────────────────── */
.config-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.config-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
}

.config-card-hdr-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.config-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.config-card-icon svg { width: 18px; height: 18px; }
.config-card-icon.icon-blue   { background: #e8f0fe; color: var(--blue); }
.config-card-icon.icon-green  { background: #e1edf0; color: var(--green-btn); }
.config-card-icon.icon-orange { background: #fff3e0; color: var(--orange); }
.config-card-icon.icon-gray   { background: var(--gray-100); color: var(--gray-600); }

.config-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 2px;
}

.config-card-desc {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.4;
}

/* table inside config card — card provides the shadow */
.config-card > .table-wrap {
  box-shadow: none;
  border-radius: 0;
}

/* padded area for non-table content */
.config-card-body {
  padding: 16px 20px;
}

/* job widget */
.config-job-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.config-job-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

.config-job-row input[type="number"] {
  width: 80px;
  padding: 7px 10px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--white);
}

.config-job-status {
  font-size: 12px;
  color: var(--gray-600);
  padding: 5px 10px;
  background: var(--gray-50);
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}

.config-job-status-bar {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  line-height: 1.5;
}

.job-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.job-ativo-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  background: #e1edf0;
  color: #003644;
  border: 1px solid #c3e6cb;
}

.job-ativo-badge.desabilitado {
  background: var(--gray-100);
  color: var(--gray-500);
  border-color: var(--gray-200);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

.td-loading {
  text-align: center;
  color: var(--gray-600);
  padding: 24px !important;
}

/* ── INTEGRATION ENGINE BADGES ────────────────────────────── */
.api-badge {
  display: block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.api-fill    { background: #e1edf0; color: #2e7d32; border: 1px solid #c8e6c9; }
.api-match   { background: #e1edf0; color: #2e7d32; border: 1px solid #c8e6c9; }
.api-diff    { background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; }
.api-valid   { background: #e1edf0; color: #2e7d32; border: 1px solid #c8e6c9; }
.api-invalid { background: #fce4ec; color: #c62828; border: 1px solid #f48fb1; }

/* ── BULK COLUMN HIDE ─────────────────────────────────────── */
#pcTable.hide-cb th:first-child,
#pcTable.hide-cb td:first-child { display: none; }
#pcTable.hide-actions th:last-child,
#pcTable.hide-actions td:last-child { display: none; }

/* ── BULK ACTION BAR ──────────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #e8f0fe;
  border: 1px solid #c5d3f0;
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  color: var(--gray-600);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-outline:hover { background: var(--gray-100); border-color: var(--gray-400); }

/* ── LOTE RESULT MODAL ────────────────────────────────────── */
.lote-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lote-stat {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}
.lote-stat.lote-ok   { background: #e1edf0; color: #003644; }
.lote-stat.lote-nok  { background: #fce8e6; color: var(--red); }
.lote-stat.lote-skip { background: var(--gray-100); color: var(--gray-600); }
.lote-stat.lote-err  { background: #fff3e0; color: #c77c00; }

.lote-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.lote-row  {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}
.lote-row.ok      { border-color: #c3e6cb; background: #f0faf3; }
.lote-row.fail    { border-color: #f5c6cb; background: #fff5f5; }
.lote-row.skipped { opacity: .65; }

/* ── BUSCAR CLIENTE (REANÁLISE) ───────────────────────────── */
.buscar-cliente-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.buscar-cliente-item {
  padding: 10px 14px; border-radius: var(--radius); border: 1.5px solid var(--gray-200);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.buscar-cliente-item:hover { background: #e1edf0; border-color: var(--green-btn); }
.buscar-cliente-nome { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.buscar-cliente-doc  { font-size: 11px; color: var(--gray-600); margin-top: 2px; }

/* ── AVALIAR CARTEIRA — viewport-fit grid ───────────────────────── */
#page-reanalise.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#page-reanalise .page-header,
#page-reanalise #reanaliseBulkBar {
  flex-shrink: 0;
}

#page-reanalise .search-bar {
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-bottom: 12px;
  gap: 8px;
}

#page-reanalise .search-input-wrap {
  min-width: 140px;
  max-width: 220px;
}

#reanaliseAtivo  { width: 100px; }
#reanaliseTipo   { width: 126px; }
#reanaliseRisco  { width: 158px; }

#page-reanalise .table-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#page-reanalise .table-body-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

#page-reanalise .pagination-bar {
  flex-shrink: 0;
}

/* ── Sidebar colapsível ──────────────────────────────────────────────────── */
.sidebar-collapse-btn {
  display: none;
  margin-left: auto;
  background: rgba(255,255,255,.1);
  border: none;
  border-radius: 6px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  padding: 5px 6px;
  align-items: center;
  flex-shrink: 0;
  transition: background .15s;
}
.sidebar.collapsed .sidebar-collapse-btn { display: flex; }
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.sidebar-collapse-btn svg { width: 15px; height: 15px; transition: transform .25s; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

body.sidebar-collapsed { --sidebar-w: 56px; }

.sidebar.collapsed { overflow: hidden; transition: width .2s; }
.sidebar.collapsed .logo-text            { display: none; }
.sidebar.collapsed .nav-label            { display: none; }
.sidebar.collapsed .nav-section-label   { display: none; }
.sidebar.collapsed .user-info            { display: none; }
.sidebar.collapsed .nav-group-chevron   { display: none; }
.sidebar.collapsed .nav-group-items     { display: none; }
.sidebar.collapsed .nav-group-header > span { display: none; }
.sidebar.collapsed .nav-badge           { display: none; }
.sidebar.collapsed .nav-item  { justify-content: center; padding: 9px 0; }
.sidebar.collapsed .nav-item .nav-icon  { opacity: .8; }
.sidebar.collapsed .nav-item:hover .nav-icon { opacity: 1; }
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 14px 0; }
.sidebar.collapsed .sidebar-collapse-btn { margin-left: 0; }
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 10px 0; }

/* ── Job tabs ────────────────────────────────────────────────────────────── */
.job-tabs-bar {
  display: inline-flex;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 24px;
}
.job-tabs-bar .pc-tab {
  border: none;
  border-radius: 7px;
  padding: 7px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.job-tabs-bar .pc-tab:hover:not(.active) {
  background: rgba(0,0,0,.05);
  color: var(--gray-800);
}
.job-tabs-bar .pc-tab.active {
  background: var(--green-dark);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* ── JSON Histórico de Análises ─────────────────────────────────────────── */
.json-exec-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.json-exec-item[open] { border-color: var(--gray-300); }
.json-exec-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--gray-50);
  user-select: none;
  list-style: none;
  flex-wrap: wrap;
}
.json-exec-summary::-webkit-details-marker { display: none; }
.json-exec-summary:hover { background: var(--gray-100); }
.json-exec-dt   { font-size: 13px;color: var(--gray-700); flex: 1; min-width: 140px; }
.json-exec-user { font-size: 13px;color: var(--gray-500); }
.json-exec-body {
  position: relative;
  background: #1e1e1e;
  padding: 10px 12px 12px;
}
.json-pre {
  margin: 0;
  font-family: 'Consolas', 'Fira Mono', monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: #d4d4d4;
  white-space: pre;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}
.btn-copy-json {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255,255,255,.12);
  color: #ccc;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  cursor: pointer;
  z-index: 1;
}
.btn-copy-json:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ── MENU DINAMICO (PRC_ERP_CONS_MENU_ROTINAS) ───────────────────── */
#sidebarNav { padding: 10px 8px; }
#sidebarNav .menu-empty,
#sidebarNav .menu-loading { color: rgba(255,255,255,.5); font-size: 13px;padding: 14px 12px; }

.mnode { margin-bottom: 1px; }
.mnode > .mtoggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 6px;
  padding: 8px 10px; color: rgba(255,255,255,.78);
  font-weight: 600; font-size: 13px; line-height: 1.2;
  transition: background .15s, color .15s;
}
.mnode > .mtoggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.mnode > .mtoggle .chev {
  width: 12px; height: 12px; margin-left: auto; flex-shrink: 0;
  opacity: .55; transition: transform .2s ease;
}
.mnode.expanded > .mtoggle .chev { transform: rotate(90deg); }
.mchildren { display: none; }
.mnode.expanded > .mchildren { display: block; }

/* nivel 0 = MODULO */
.mnode-l0 > .mtoggle { color: rgba(255,255,255,.9); font-weight: 700; font-size: 13px; }
/* nivel 1 = SUB_MODULO */
.mnode-l1 > .mtoggle { padding-left: 20px; font-size: 12.5px; color: rgba(255,255,255,.66); }
/* nivel 2 = MENU */
.mnode-l2 > .mtoggle {
  padding-left: 30px; font-size: 10px; font-weight: 700;
  letter-spacing: .8px; text-transform: none; color: rgba(255,255,255,.42);
}
/* folha = ROTINA */
.mleaf {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 6px;
  padding: 7px 10px 7px 40px; margin-bottom: 1px;
  color: rgba(255,255,255,.7); font-size: 12.5px; font-weight: 500;
  transition: background .15s, color .15s;
}
.mleaf:hover { background: rgba(255,255,255,.1); color: #fff; }
.mleaf.active {
  background: rgba(255,255,255,.95); color: var(--green-dark);
  font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.sidebar.collapsed #sidebarNav { display: none; }

/* ── Pesquisa de rotinas no menu ───────────────────────────────── */
.menu-search {
  margin: 0 8px 6px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
  padding: 6px 9px;
  transition: background .15s, border-color .15s;
}
.menu-search:focus-within {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.32);
}
.menu-search svg { width: 13px; height: 13px; flex-shrink: 0; color: rgba(255,255,255,.45); }
.menu-search input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: #fff; font-size: 12.5px; font-family: inherit;
}
.menu-search input::placeholder { color: rgba(255,255,255,.38); }
.menu-search-clr {
  display: none; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.45); padding: 0; line-height: 1; font-size: 13px;
}
.menu-search-clr:hover { color: rgba(255,255,255,.9); }
.menu-search.has-value .menu-search-clr { display: block; }
.sidebar.collapsed .menu-search { display: none; }

/* ── CONTEUDO: boas-vindas / placeholder de rotina ──────────────── */
.welcome-box { text-align: center; padding: 80px 24px; color: var(--gray-600); }
.welcome-box h1 { font-size: 22px; color: var(--green-dark); margin-bottom: 8px; }
.rotina-placeholder { padding: 28px 32px; }
.rotina-placeholder .breadcrumb { font-size: 13px;color: var(--gray-600); margin-bottom: 6px; }
.rotina-placeholder h1 { font-size: 22px; color: var(--green-dark); margin-bottom: 14px; }
.rotina-placeholder .ph-card {
  border: 1px dashed var(--gray-400); border-radius: var(--radius);
  background: var(--gray-50); padding: 28px; color: var(--gray-600);
}
.rotina-placeholder .ph-card code { background: var(--gray-100); padding: 1px 6px; border-radius: 4px; }

/* ── BOTAO MENU MOBILE ──────────────────────────────────────────── */
.mobile-menu-btn {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 90;
  width: 40px; height: 40px; border: none; border-radius: 8px;
  background: var(--green-dark); color: #fff; cursor: pointer;
  align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.mobile-menu-btn svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  .mobile-menu-btn { display: flex; }
  .main-content { margin-left: 0; }
}

/* ── TELA: Ordem de Coleta Picking ──────────────────────────────── */
.wms-screen { padding: 22px 26px; }
.wms-screen .screen-title { font-size: 18px; font-weight: 700; color: var(--green-dark); margin-bottom: 16px; }

.wms-card {
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--white); box-shadow: var(--shadow); margin-bottom: 16px;
}
.wms-card > .wms-card-title {
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: .6px;
  color: var(--gray-600); padding: 10px 14px; border-bottom: 1px solid var(--gray-200);
}
.wms-card > .wms-card-body { padding: 14px; }

.wms-filtros { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.wms-field { display: flex; flex-direction: column; gap: 4px; }
.wms-field > label { font-size: 11px; font-weight: 600; color: var(--gray-600); }
.wms-field input[type="date"],
.wms-field input[type="number"],
.wms-field input[type="text"],
.wms-field select {
  border: 1px solid var(--gray-400); border-radius: 6px; padding: 7px 9px;
  font-size: 13px; color: var(--gray-800); background: var(--white); min-width: 150px;
}
.wms-field input[type="number"],
.wms-field input[type="text"] { min-width: 0; width: 100%; box-sizing: border-box; }
.wms-field select { box-sizing: border-box; width: 100%; -webkit-appearance: none; appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23636363' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.wms-field input:focus, .wms-field select:focus { outline: none; border-color: var(--green-accent); }
.wms-field .ss-control { padding: 7px 9px; border-width: 1px; border-radius: 6px; line-height: 1.2; }
.wms-radio { display: flex; gap: 14px; align-items: center; }
.wms-radio label { display: flex; gap: 5px; align-items: center; font-size: 13px; cursor: pointer; }
.wms-grow { flex: 1; min-width: 220px; }

/* multiselect simples (lotes / cidades) */
.ms { position: relative; }
.ms-trigger {
  border: 1px solid var(--gray-400); border-radius: 6px; padding: 7px 9px;
  font-size: 13px; background: var(--white); cursor: pointer; min-height: 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
}
.ms-trigger .ms-caret { opacity: .5; }
.ms-panel {
  display: none; position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0;
  overflow: hidden; background: var(--white);
  border: 1px solid var(--gray-300, #dee2e6); border-radius: 6px; box-shadow: var(--shadow);
}
.ms.open .ms-panel { display: block; }
.ms-search { padding: 7px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.ms-input { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1.5px solid var(--gray-300); border-radius: 6px; font-size: 13px; color: var(--gray-800); }
.ms-input:focus { outline: none; border-color: #2fa4a9; box-shadow: 0 0 0 3px rgba(47,164,169,.12); }
.ms-list { max-height: 220px; overflow-y: auto; }
.ms-empty { padding: 12px 10px; text-align: center; color: var(--gray-600); font-size: 12.5px; }
.ms-opt { display: flex; gap: 8px; align-items: center; padding: 7px 10px; font-size: 13px; cursor: pointer; }
.ms-opt:hover { background: var(--gray-50); }
.ms-opt input { accent-color: var(--green-dark); }

/* grids */
.wms-grid-wrap { overflow: auto; max-height: 240px; border-radius: 6px; }
table.wms-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.wms-grid th {
  position: sticky; top: 0; background: var(--gray-50); color: var(--gray-600);
  font-size: 11px; text-transform: none; letter-spacing: .4px; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--gray-200); white-space: nowrap;
}
table.wms-grid td { padding: 7px 10px; border-bottom: 1px solid var(--gray-100); }
table.wms-grid tbody tr { cursor: pointer; }
table.wms-grid tbody tr:hover { background: var(--gray-50); }
table.wms-grid tbody tr.selected { background: #e1edf0; }
.wms-grid-empty { padding: 22px; text-align: center; color: var(--gray-600); font-size: 13px; }

/* setas mover entre grids */
.wms-setas { display: flex; justify-content: center; gap: 8px; margin: 12px 0; }
.wms-seta {
  width: 42px; height: 34px; border: 1px solid var(--gray-400); border-radius: 8px;
  background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s; color: var(--green-dark);
}
.wms-seta:hover { background: var(--gray-50); border-color: var(--green-dark); transform: translateY(-1px); }
.wms-seta svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.wms-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ── Grid de Pedidos: expansor e sub-grid de produtos ───────────── */
table.wms-grid th.wms-exp-th { width: 34px; }
td.wms-exp-cell { width: 34px; text-align: center; }
.wms-exp {
  width: 22px; height: 22px; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green-dark); border-radius: 5px; transition: background .15s, transform .2s;
}
.wms-exp:hover { background: var(--gray-100); }
.wms-exp svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wms-exp.open { transform: rotate(90deg); }

tr.wms-detail > td { background: var(--gray-50); padding: 0; }
/* rola na horizontal quando as colunas não cabem (evita esmagar a descrição).
   A largura é fixada por JS na área visível do grid — sem isso o <td> cresceria
   e o scroll cairia no grid principal em vez de ficar no próprio sub-grid. */
.wms-subgrid { padding: 12px 16px 12px 48px; overflow-x: auto; box-sizing: border-box; }
.wms-subgrid > .wms-subtable { min-width: 900px; }
.wms-subgrid-msg { color: var(--gray-600); font-size: 12.5px; font-style: italic; }

/* ── Filtro recolhível + grids com tamanhos distintos + sub-tabela ── */
.wms-card > .wms-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wms-collapse-btn {
  border: none; background: none; cursor: pointer; color: var(--gray-600);
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px;
}
.wms-collapse-btn:hover { background: var(--gray-100); color: var(--green-dark); }
.wms-collapse-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .2s; }
.wms-card.collapsed .wms-collapse-btn svg { transform: rotate(0deg); }
.wms-card.collapsed > .wms-card-body { display: none; }

/* ── Dica de recolhimento: o chevron acena ───────────────────────────────
 * Parado, o ">" no canto do título lê como enfeite e o painel parece fixo.
 * Um aceno curto — dois toques e uma pausa longa — mostra que ali existe um
 * gesto sem virar pisca-pisca. O movimento vai no BOTÃO, nunca no <svg>: o
 * svg carrega o rotate que indica aberto/fechado, e animar transform ali
 * atropelaria o estado.
 *
 * A dica é de APRENDIZADO, não decoração: assim que o usuário recolhe ou
 * expande um painel pela primeira vez o app marca isso (localStorage) e põe
 * .wms-dica-recolher-off no body — a animação não volta em nenhuma tela.
 * O realce do hover, esse fica para sempre: é ele que confirma o alvo na
 * hora do clique. Quem pediu menos movimento no sistema operacional
 * (prefers-reduced-motion) não vê o aceno em momento nenhum. */
@keyframes wms-chev-dica-y {   /* painel aberto: chevron aponta p/ baixo */
  0%, 56%, 100% { transform: translateY(0);   box-shadow: 0 0 0 0 transparent; }
  63%           { transform: translateY(3px); box-shadow: 0 0 0 5px rgba(0,54,68,.10);
                  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 22%, transparent); }
  70%           { transform: translateY(0);   box-shadow: 0 0 0 0 transparent; }
  77%           { transform: translateY(3px); }
  84%           { transform: translateY(0); }
}
@keyframes wms-chev-dica-x {   /* painel recolhido: chevron aponta p/ direita */
  0%, 56%, 100% { transform: translateX(0);   box-shadow: 0 0 0 0 transparent; }
  63%           { transform: translateX(3px); box-shadow: 0 0 0 5px rgba(0,54,68,.10);
                  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 22%, transparent); }
  70%           { transform: translateX(0);   box-shadow: 0 0 0 0 transparent; }
  77%           { transform: translateX(3px); }
  84%           { transform: translateX(0); }
}
.wms-collapse-btn { transition: transform .16s, background .2s, color .2s, box-shadow .2s; }
body:not(.wms-dica-recolher-off) .wms-card:not(.collapsed) > .wms-card-title > .wms-collapse-btn {
  animation: wms-chev-dica-y 3.6s ease-out 1.2s infinite;
}
body:not(.wms-dica-recolher-off) .wms-card.collapsed > .wms-card-title > .wms-collapse-btn {
  animation: wms-chev-dica-x 3.6s ease-out 1.2s infinite;
}
/* Mouse em cima: o aceno para (já cumpriu o papel) e o alvo cresce um pouco.
   Vale mesmo depois de a dica ser aprendida. */
.wms-card > .wms-card-title:hover > .wms-collapse-btn,
.wms-collapse-btn:hover {
  animation: none !important;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(0,54,68,.10);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
}
/* A faixa inteira é o alvo do clique nas telas que têm o chevron — o cursor
   precisa dizer isso antes do clique, não depois. */
.wms-card > .wms-card-title:has(.wms-collapse-btn) { cursor: pointer; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .wms-card > .wms-card-title > .wms-collapse-btn { animation: none !important; }
}

.wms-grid-wrap.wms-grid-sm { max-height: 190px; }
.wms-grid-wrap.wms-grid-lg { max-height: 390px; }

.wms-subtable { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; overflow: hidden; }
.wms-subtable th { text-align: left; background: var(--gray-100); color: var(--gray-600); font-size: 11px; padding: 6px 10px; border-bottom: 1px solid var(--gray-200); }
.wms-subtable td { padding: 6px 10px; border-bottom: 1px solid var(--gray-100); }
/* campo sem valor cadastrado: '----' centralizado na célula */
.wms-nv { display: block; text-align: center; }
/* Item de endereço vazio na O.I. (COD_PROD = 0): descrição substituída por um
   rótulo neutro, em vez do nome de um produto que não existe. */
.oi-desc-vazio { font-style: italic; color: var(--gray-500); }
/* Selo "Lote N" — distingue, para o gestor, lotes de validades diferentes no mesmo
   produto+endereço ("Contagem por Validade"). O operador no coletor nunca vê a
   validade (contagem cega); aqui ela vem no title e, quando existe, no próprio texto. */
.oi-lote-badge { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700;
  color: #003644; background: rgba(0,54,68,.10); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
/* Selo "Encontrado na contagem" — item que não estava previsto (ORIGEM_ITEM = 'C'): validade
   nova de produto previsto ou produto registrado pela Inicialização do coletor. */
.oi-origem-badge { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700;
  color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; padding: 0 8px; border-radius: 999px; white-space: nowrap; }
/* Endereço com o selo do lote, e a rua, numa linha só: o selo já é nowrap, mas a célula
   quebrava entre ele e o endereço quando o endereço era mais comprido (DM.R.10...). */
.oi-op-subtable td.oi-td-nowrap { white-space: nowrap; }
/* Ordem de Reposição — o espaço para "A repor" (9ª) sai do PADDING das colunas
   de conteúdo curto: Unid. (4ª), Sec.Unid. (5ª) e as três de quantidade (6ª a
   8ª), onde o número é bem mais estreito que a célula. Fonte e quebra de linha
   ficam iguais às demais colunas — só a folga lateral diminui. */
#orHead th:nth-child(4),  #orBody td:nth-child(4),
#orHead th:nth-child(5),  #orBody td:nth-child(5),
#orHead th:nth-child(6),  #orBody td:nth-child(6),
#orHead th:nth-child(7),  #orBody td:nth-child(7),
#orHead th:nth-child(8),  #orBody td:nth-child(8) { padding-left: 5px; padding-right: 5px; }
#orHead th:nth-child(9), #orBody td:nth-child(9) { white-space: nowrap; }
/* descrição longa: no máximo 3 linhas, com reticências no excesso */
.wms-clamp3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; }
.wms-subtable tr:last-child td { border-bottom: none; }

/* ── Cor nos títulos dos cards (filtros + grids) ────────────────── */
.wms-card > .wms-card-title {
  background: var(--green-dark);
  color: #fff;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.wms-collapse-btn { color: rgba(255,255,255,.85); }
.wms-collapse-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ── Seleção de linha mais visível + dica das setas ─────────────── */
table.wms-grid tbody tr.wms-row.selected > td { background: #cfe2e8; font-weight: 600; }
table.wms-grid tbody tr.wms-row.selected > td.wms-exp-cell { box-shadow: inset 3px 0 0 var(--green-dark); }
.wms-setas-hint { text-align: center; font-size: 11px; color: var(--gray-600); margin-top: 6px; }

/* ── Ordem de Coleta: ajustes de filtro + help ──────────────────── */
/* título "Filtros" sem coloração (só os grids ficam coloridos) */
#ocpFiltroCard > .wms-card-title {
  background: transparent; color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200); border-radius: 0;
}
#ocpFiltroCard .wms-collapse-btn { color: var(--gray-600); }
#ocpFiltroCard .wms-collapse-btn:hover { background: var(--gray-100); color: var(--green-dark); }

/* campos de data menores */
.wms-field input[type="date"] { min-width: 0; width: 128px; }

/* botão Pesquisar menor, alinhado ao rodapé da linha de filtros */
.wms-btn-pesq { width: auto; padding: 7px 18px; }

/* cabeçalho da tela (título + help) */
.wms-screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.wms-screen-head .screen-title { margin-bottom: 0; }

/* help que cresce ao passar o mouse */
.wms-help { position: relative; outline: none; }
.wms-help-tag {
  display: inline-flex; align-items: center; gap: 6px; cursor: help;
  background: var(--green-dark); color: #fff; border-radius: 999px;
  padding: 6px 12px; font-size: 13px;font-weight: 600; white-space: nowrap;
  transition: filter .15s;
}
.wms-help:hover .wms-help-tag, .wms-help:focus-within .wms-help-tag { filter: brightness(1.15); }
.wms-help-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 380px;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--gray-800);
  max-height: 0; opacity: 0; overflow: hidden; padding: 0 16px;
  transition: max-height .3s ease, opacity .25s ease, padding .3s ease;
}
.wms-help:hover .wms-help-pop, .wms-help:focus-within .wms-help-pop { max-height: 460px; opacity: 1; padding: 14px 16px; }
.wms-help-pop strong { display: block; color: var(--green-dark); font-size: 13px; margin-bottom: 8px; }
.wms-help-pop ol { margin: 0; padding-left: 18px; }
.wms-help-pop li { font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; }

/* título dos Filtros clicável (recolhe/expande o painel) */
#ocpFiltroCard > .wms-card-title { cursor: pointer; user-select: none; }

/* ── Cabeçalhos ordenáveis (grids e sub-grids) ──────────────────── */
.wms-grid th.wms-th-sort, .wms-subtable th.wms-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.wms-grid th.wms-th-sort:hover, .wms-subtable th.wms-th-sort:hover { color: var(--green-dark); }
.wms-grid th.wms-th-sort.sorted, .wms-subtable th.wms-th-sort.sorted { color: var(--green-dark); }
.th-ind { font-size: 10px; letter-spacing: -1px; }

/* indicador de ordenável: ⇅ neutro (esmaecido) -> ▲/▼ destacado quando ativa */
.th-ind { opacity: .4; }
.wms-th-sort:hover .th-ind { opacity: .8; }
.wms-th-sort.sorted .th-ind { opacity: 1; }

/* indicador de ordenação maior e mais legível */
.th-ind { font-size: 13px; letter-spacing: 0; margin-left: 4px; opacity: .55; }
.wms-th-sort:hover .th-ind { opacity: .9; }
.wms-th-sort.sorted .th-ind { opacity: 1; font-size: 13px; }

/* botão fechar (X) no canto superior esquerdo da tela */
.wms-head-left { display: flex; align-items: center; gap: 12px; }
.wms-close {
  width: 30px; height: 30px; border: none; border-radius: 7px; cursor: pointer;
  background: var(--gray-100); color: var(--gray-600); font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, box-shadow .2s;
}
.wms-close:hover { background: #c0473b; color: #fff; box-shadow: 0 0 0 3px rgba(192,71,59,.18); }

/* ── Tela de boas-vindas (tema WMS) ─────────────────────────────── */
.welcome {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100%; padding: 48px 24px; text-align: center;
  background:
    radial-gradient(1200px 400px at 50% -100px, rgba(0,54,68,.06), transparent 70%);
}
.welcome-logo {
  width: 96px; height: 96px; border-radius: 24px; margin: 0 auto 20px;
  background: linear-gradient(135deg, #003644 0%, #0a4d5e 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(0,54,68,.28);
}
.welcome-logo svg { width: 48px; height: 48px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.welcome h1 { font-size: 30px; color: var(--green-dark); letter-spacing: -.5px; }
.welcome-sub { font-size: 15px; font-weight: 600; color: var(--green-mid); margin-top: 4px; }
.welcome-hint { font-size: 13px; color: var(--gray-600); margin-top: 14px; }

.welcome-cards { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 38px; max-width: 780px; }
.welcome-card {
  width: 175px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px;
  padding: 22px 16px; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.welcome-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,54,68,.14); border-color: var(--green-accent); }
.welcome-card .wc-icon {
  width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 12px;
  background: #e1edf0; color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
}
.welcome-card .wc-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.welcome-card .wc-title { font-weight: 700; color: var(--green-dark); font-size: 14px; }
.welcome-card .wc-desc { font-size: 11.5px; color: var(--gray-600); margin-top: 4px; line-height: 1.4; }

/* welcome-card como botão clicável (abre o menu correspondente) */
.welcome-card { cursor: pointer; font-family: inherit; color: inherit; text-align: center; }
.welcome-card:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 2px; }

/* ===================================================================
   Ordem de Coleta Picking — layout "resumo da separação"
   =================================================================== */
.oc { padding: 18px 22px; background: #d8e8ed; }

/* cabeçalho */
.oc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: -18px -22px 14px; padding: 14px 22px; background: linear-gradient(135deg, #003644 0%, #00232c 100%); box-shadow: 0 2px 10px rgba(0,54,68,.35); }
.oc-head-left { display: flex; align-items: center; gap: 12px; }
.oc-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* "Como usar" — popover que expande ao passar o mouse (ou foco) */
.oc-help { position: relative; }
.oc-help-btn { display: inline-block; font-size: 13px;font-weight: 600; color: #2fa4a9; cursor: help; padding: 6px 11px; border: 1px solid rgba(47,164,169,.35); border-radius: 8px; background: rgba(47,164,169,.08); white-space: nowrap; transition: all .15s; }
.oc-help:hover .oc-help-btn, .oc-help:focus-within .oc-help-btn { background: #2fa4a9; color: #fff; }
.oc-help-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 16px 38px rgba(0,0,0,.18); padding: 14px 16px; z-index: 80; max-height: min(72vh, 540px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; }
.oc-help:hover .oc-help-pop, .oc-help:focus-within .oc-help-pop { opacity: 1; visibility: visible; transform: none; }
.oc-help-pop strong { display: block; font-size: 13px; color: var(--green-dark); margin-bottom: 8px; }
.oc-help-pop ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.oc-help-pop li { font-size: 13px;color: var(--gray-600); line-height: 1.45; }
.oc-help-pop li b { color: var(--gray-800); }
/* Introdução (contexto) e sub-notas por passo no popover "Como usar" */
.oc-help-pop p { margin: 0 0 9px; font-size: 12px; color: var(--gray-500); line-height: 1.45; }
.oc-help-pop li small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gray-500); line-height: 1.4; }

/* Resetar layout */
.oc-reset { font-size: 13px;font-weight: 600; color: var(--gray-600); background: var(--white); border: 1px solid var(--gray-300); border-radius: 8px; padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: all .15s; }
.oc-reset:hover { border-color: #2fa4a9; color: var(--green-dark); }
.oc-crumb { font-size: 13px;color: var(--gray-600); }
.oc-crumb span { opacity: .5; margin: 0 4px; }
.oc-title { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--green-dark); }
.oc-sub { font-size: 13px;font-weight: 500; color: var(--gray-600); margin-left: 8px; }
/* oc-head petrol — adapta texto e botões ao fundo escuro */
.oc-head .oc-crumb { color: rgba(255,255,255,.6); }
.oc-head .oc-crumb span { opacity: 1; color: rgba(255,255,255,.35); }
.oc-head .oc-title { color: #fff; }
.oc-head .oc-sub { color: rgba(255,255,255,.65); }
.oc-head .wms-close { background: rgba(255,255,255,.12); color: #fff; }
.oc-head .wms-close:hover { background: rgba(192,71,59,.75); color: #fff; box-shadow: 0 0 0 3px rgba(192,71,59,.25); }
.oc-head .oc-help-btn { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.oc-head .oc-help:hover .oc-help-btn, .oc-head .oc-help:focus-within .oc-help-btn { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); }
.oc-head .oc-reset { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85); }
.oc-head .oc-reset:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff; }
.oc-head .oc-fs-max { color: rgba(255,255,255,.75); }
.oc-head .oc-fs-max:hover { background: rgba(255,255,255,.15); color: #fff; }
.oc-density { font-size: 11px; color: var(--gray-600); display: inline-flex; align-items: center; gap: 6px; }
.oc-density button { border: 1px solid var(--gray-400); background: var(--white); color: var(--gray-600); border-radius: 7px; padding: 5px 10px; font-size: 13px;cursor: pointer; }
.oc-density button.active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

/* filtros */
.oc-filtros > .wms-card-title { background: transparent; color: var(--gray-600); border-bottom: 1px solid var(--gray-200); border-radius: 0; cursor: pointer; user-select: none; }
.oc-funnel svg { width: 14px; height: 14px; fill: var(--green-dark); stroke: none; vertical-align: middle; }
/* Toggle segmentado — usado no filtro "Tipo de data" (Ordem de Coleta) e no
   "Tipo de inventário" (.oi-toggle, Nova O.I.). Mesmas regras nos dois. */
.oc-toggle, .oi-toggle { display: inline-flex; border: 1.5px solid #004a60; border-radius: 8px; overflow: hidden; background: var(--white); }
.oc-toggle button, .oi-toggle button { border: none; background: var(--white); color: var(--gray-600); padding: 8px 16px; font-size: 13px; cursor: pointer; transition: background .15s; }
.oc-toggle button:hover:not(.active), .oi-toggle button:hover:not(.active) { background: #f0f9ff; }
.oc-toggle button.active, .oi-toggle button.active { background: linear-gradient(120deg, #003644 0%, #006682 45%, #004a60 100%); background-size: 200% 100%; color: #fff; animation: oc-active-shimmer 3s ease-in-out infinite; }
@keyframes oc-active-shimmer { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }

/* Toggle "Ordenar por" — Ordem de Reposição.
   Inativo: tint bem leve na cor da opção (vermelho/verde) + borda própria.
   Ativo: cor cheia animada (shimmer + pulso) — vermelho (Qtd.Mín) ou verde (Qtd.Máx). */
.or-toggle { display: inline-flex; border-radius: 8px; }
.or-toggle button { position: relative; border: 1.5px solid; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.or-toggle button + button { margin-left: -1.5px; }        /* colapsa a borda compartilhada */
.or-toggle button.active { z-index: 1; }                    /* borda da ativa por cima */
.or-toggle button:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.or-toggle button:last-child  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* inativo — coloração bem leve por opção */
.or-toggle button[data-v="min"] { background: #fdf2f1; color: #b3453a; border-color: #eecac4; }
.or-toggle button[data-v="max"] { background: #eff9f2; color: #1c7a3f; border-color: #cbe8d3; }
.or-toggle button[data-v="min"]:hover:not(.active) { background: #fbe6e2; }
.or-toggle button[data-v="max"]:hover:not(.active) { background: #e2f4e8; }

/* ativo — cor cheia animada */
.or-toggle button.active {
  color: #fff;
  background-size: 200% 100%;
  animation: or-shimmer 3s ease-in-out infinite, or-pulse 1.6s ease-in-out infinite;
}
.or-toggle button[data-v="min"].active {
  border-color: #8a2a20;
  background-image: linear-gradient(120deg, #8a2a20 0%, #e05a4c 45%, #c0473b 100%);
}
.or-toggle button[data-v="max"].active {
  border-color: #0f6b34;
  background-image: linear-gradient(120deg, #0f6b34 0%, #22c55e 45%, #16a34a 100%);
}
@keyframes or-shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes or-pulse   { 0%,100% { box-shadow: inset 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: inset 0 0 14px rgba(255,255,255,.42); } }
@media (prefers-reduced-motion: reduce) {
  .or-toggle button.active { animation: none; }
}

/* corpo: grid à esquerda + resumo à direita */
.oc-body { display: flex; gap: 16px; align-items: flex-start; }
.oc-left { flex: 1; min-width: 0; padding: 0; overflow: hidden; }
.oc-left-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); }
.oc-left-title { font-weight: 700; color: var(--gray-800); }
.oc-count { font-size: 11px; color: var(--green-dark); background: #e1edf0; border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.oc-search { flex: 1; min-width: 0; }
.oc-search input { border: 1px solid var(--gray-400); border-radius: 8px; padding: 7px 11px; font-size: 13px; width: 100%; }
.oc-search input:focus { outline: none; border-color: var(--green-accent); }

.oc-grid-wrap { max-height: 60dvh; overflow: auto; }
table.oc-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.oc-grid th { position: sticky; top: 0; z-index: 1; background: var(--gray-50); color: var(--gray-600); font-size: 11px; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.oc-grid th.wms-th-sort { cursor: pointer; user-select: none; }
.oc-grid th.wms-th-sort:hover { color: #003644; }
.oc-grid th[data-order]::after { content: ' ↑↓'; opacity: .5; font-size: 13px;}
.oc-grid th.oc-sort-asc::after { content: ' ↑'; opacity: 1; font-size: 13px;color: #003644; }
.oc-grid th.oc-sort-desc::after { content: ' ↓'; opacity: 1; font-size: 13px;color: #003644; }
table.oc-grid td { padding: 8px 10px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.oc-row { cursor: pointer; }
.oc-row:hover td { background: var(--gray-50); }
.oc-row.sel td { background: #eef6f8; }
/* Linha-espaçadora da virtualização (ordem-reposicao): representa o bloco de
   endereços fora da janela renderizada — sem hover, sem clique, sem borda. */
.oc-grid tbody tr.oc-spacer { pointer-events: none; }
.oc-cb-th, .oc-cb { width: 34px; text-align: center; }
.oc-cb input[type=checkbox], .oc-cb-th input[type=checkbox] { accent-color: #003644; }
/* Pedido em alteração no ERP (Criação de O.C.): checkbox desabilitado desenhado como
   caixa âmbar com o cadeado dentro (o cinza nativo do disabled quase some no grid),
   no mesmo tamanho e margem do checkbox nativo para a coluna continuar alinhada. A
   célula inteira é a área do hint (.poc-tip--bloq): o input desabilitado não dispara
   eventos de mouse em todo navegador, e pointer-events:none entrega o hover à célula. */
.oc-row.is-bloq { cursor: default; }
.oc-cb.is-bloq { cursor: not-allowed; }
.oc-cb-bloq { position: relative; display: inline-flex; vertical-align: middle; margin: 3px 3px 3px 4px; }
.oc-cb-bloq input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; margin: 0;
  border: 1.5px solid #e2b583; border-radius: 3px;
  background: #fff7ed;
  pointer-events: none;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.oc-cb-bloq-ico {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #b45309; pointer-events: none;
}
.oc-cb-bloq-ico svg { width: 8px; height: 8px; }
.oc-cb.is-bloq:hover .oc-cb-bloq input[type=checkbox] {
  border-color: #b45309; background-color: #ffedd5;
  box-shadow: 0 0 0 3px rgba(180,83,9,.16);
}
/* Variante "em uso": pedido reservado em outra seleção de O.C. Não é bloqueio do ERP, é uma
   situação passageira do próprio WMS: tons petrol e ícone de pessoa no lugar do cadeado. */
/* Com conferência já gravada (CodeBar/ERP): prancheta violeta — a coleta conferiria de novo */
.oc-cb.is-bloq.is-conf .oc-cb-bloq input[type=checkbox] { border-color: #c4b5fd; background-color: #f5f3ff; }
.oc-cb.is-bloq.is-conf .oc-cb-bloq-ico { color: #6d28d9; }
.oc-cb.is-bloq.is-conf:hover .oc-cb-bloq input[type=checkbox] {
  border-color: #6d28d9; background-color: #ede9fe;
  box-shadow: 0 0 0 3px rgba(109,40,217,.16);
}
.oc-cb.is-bloq.is-uso .oc-cb-bloq input[type=checkbox] { border-color: #9cc3cc; background-color: #eef6f8; }
.oc-cb.is-bloq.is-uso .oc-cb-bloq-ico { color: #0a4d5e; }
.oc-cb.is-bloq.is-uso:hover .oc-cb-bloq input[type=checkbox] {
  border-color: #0a4d5e; background-color: #dcecf0;
  box-shadow: 0 0 0 3px rgba(10,77,94,.16);
}
/* Variante "sinalizado para inventário": par endereço + produto com falta declarada na coleta
   da O.C., até uma O.I. ser efetivada nele. Exige ação, então fica no âmbar, com a prancheta
   no lugar do cadeado. Vale para a Criação de O.R. (.oc-cb) e para a coluna Vincular dos
   modais de vínculo da O.C. e da O.R. (.cm-vinc). */
.oc-cb.is-bloq.is-sinal .oc-cb-bloq input[type=checkbox],
.cm-vinc.is-sinal .oc-cb-bloq input[type=checkbox] { border-color: #f0b44c; background-color: #fffbeb; }
.oc-cb.is-bloq.is-sinal .oc-cb-bloq-ico,
.cm-vinc.is-sinal .oc-cb-bloq-ico { color: #b45309; }
.oc-cb.is-bloq.is-sinal:hover .oc-cb-bloq input[type=checkbox],
.cm-vinc.is-sinal:hover .oc-cb-bloq input[type=checkbox] {
  border-color: #b45309; background-color: #fef3c7;
  box-shadow: 0 0 0 3px rgba(217,119,6,.18);
}
.oc-exp-th, .oc-exp { width: 30px; text-align: center; }
.oc-exp .wms-exp { color: var(--green-dark); }
.oc-strong { font-weight: 600; color: var(--gray-800); }
.oc-mut { font-size: 11px; color: var(--gray-600); margin-top: 1px; }
.oc-itens { text-align: right; }
.oc-detail-cell { display: none; }
tr.oc-detail > td { background: var(--gray-50); padding: 0; }

/* badges de status */
.oc-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.oc-badge.st-late   { background: #fdeaea; color: #c0392b; }
.oc-badge.st-today  { background: #e1edf0; color: var(--green-dark); }
.oc-badge.st-soon   { background: #fff3e0; color: #a76a00; }
.oc-badge.st-future { background: #eef1f4; color: #5b6b73; }
.oc-badge.st-none   { background: var(--gray-100); color: var(--gray-600); }

/* painel direito (Ordem de Coleta) */
.oc-right { width: var(--oc-right-w, 330px); flex-shrink: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; position: sticky; top: 12px; display: flex; flex-direction: column; }
/* divisor arrastável entre os painéis (padrão reutilizável) */
.split-resizer { flex: 0 0 6px; align-self: stretch; cursor: col-resize; position: relative; border-radius: 3px; touch-action: none; }
.split-resizer::before { content: ''; position: absolute; inset: 0 2px; border-radius: 3px; background: var(--gray-200); transition: background .15s; }
.split-resizer:hover::before, .split-resizer.dragging::before { background: #2fa4a9; }
.oc-right-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--gray-200); padding-bottom: 10px; }
.oc-right-title { font-size: 15px; font-weight: 700; color: var(--green-dark); }
.oc-right-sub { font-size: 11px; color: var(--gray-600); }
.oc-stats { display: flex; gap: 10px; margin: 14px 0; }
.oc-stat { flex: 1; text-align: center; background: var(--gray-50); border-radius: 10px; padding: 10px 4px; }
.oc-stat-v { font-size: 22px; font-weight: 800; color: var(--green-dark); line-height: 1; }
.oc-stat-l { font-size: 10px; color: var(--gray-600); text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.oc-rotas-wrap { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.oc-rotas-l { font-size: 11px; color: var(--gray-600); font-weight: 600; flex-shrink: 0; padding-top: 3px; }
.oc-rotas { display: flex; gap: 6px; flex-wrap: wrap; max-height: 62px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
.oc-rotas::-webkit-scrollbar { width: 4px; }
.oc-rotas::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
/* Sem as setas do padrão do sistema: a barra aqui tem 4px, e um botão de 15px
   ocuparia mais que o trilho inteiro. Vale para todo rolador miúdo embutido. */
.oc-rotas::-webkit-scrollbar-button { display: none; }
.oc-rota { background: var(--green-dark); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.oc-empty { color: var(--gray-400); font-size: 13px;}
.oc-prod-head { display: grid; grid-template-columns: 1fr 44px 44px 64px; gap: 6px; font-size: 10px; color: var(--gray-600); text-transform: uppercase; letter-spacing: .4px; padding: 6px 2px; border-bottom: 1px solid var(--gray-200); }
.oc-prod-head span:nth-child(4) { text-align: right; }
.oc-prod-list { flex: 1; overflow-y: auto; max-height: 38dvh; }
.oc-prod { display: grid; grid-template-columns: 1fr 44px 44px 64px; gap: 6px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--gray-100); }
.oc-prod-un { font-size: 13px;color: var(--gray-600); }
.oc-prod-qt { font-size: 14px; font-weight: 700; color: var(--green-dark); text-align: right; }
.oc-empty-box { padding: 26px 10px; text-align: center; color: var(--gray-600); font-size: 12.5px; }
.oc-gerar { margin-top: 14px; width: 100%; padding: 9px; font-size: 13px; }
.oc-gerar:disabled { opacity: .5; cursor: not-allowed; }
.oc-limpar { margin-top: 8px; width: 100%; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--gray-600); font-size: 13px;cursor: pointer; padding: 6px; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.oc-limpar:hover { background: rgba(192,71,59,.07); color: #c0473b; border-color: rgba(192,71,59,.3); box-shadow: 0 0 0 2px rgba(192,71,59,.1); }

/* densidade compacta */
.oc.compact table.oc-grid td { padding: 4px 10px; }
.oc.compact .oc-mut { display: none; }
.oc.compact table.oc-grid th { padding: 6px 10px; }

/* responsivo */
@media (max-width: 1100px) {
  .oc-body { flex-direction: column; }
  .oc-right { width: 100%; position: static; }
  .split-resizer { display: none; }   /* empilhado: sem divisor horizontal */
}
@media (max-width: 768px) {
  .oc-right { width: 100% !important; max-width: 100%; }
}

/* ── OC: filtros em linha única ── */
.oc-filtros .wms-filtros { flex-wrap: nowrap; gap: 8px; }
.oc-filtros .wms-grow    { min-width: 130px; }
.oc-filtros input[type="date"] { width: 118px; }

.oc-filtros .ms-trigger  { min-height: 0; }
.oc-filtros .ms-text     { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-filtros .ms-panel    { left: 0; right: auto; min-width: 100%; width: max-content; max-width: 340px; }
.oc-filtros .ms-opt      { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-filtros .cm-chips-box { min-height: 0; padding-top: 4px; padding-bottom: 4px; }

/* ── Ajustes OC: grid menor, título do filtro junto ao funil, toggle verde ── */
.oc-grid-wrap { max-height: 46dvh; }
.oc-prod-list { max-height: 32dvh; }
/* "Filtros de pesquisa" logo ao lado do funil (sem space-between) */
.oc-filtros > .wms-card-title { justify-content: flex-start; gap: 8px; }

/* ── OC: sem scroll de tela; grid e painel alinhados (topo + altura) ── */
.oc { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.oc-head, .oc-filtros { flex: none; }
.oc-body { flex: 1; min-height: 0; align-items: stretch; }
.oc-left { display: flex; flex-direction: column; min-height: 0; }
.oc-grid-wrap { flex: 1; min-height: 0; max-height: none; }
.oc-right { position: static; min-height: 0; }
.oc-prod-list { flex: 1; min-height: 0; max-height: none; }
/* colunas "Unid." e "Sec.Unid." centralizadas com o cabeçalho */
.oc-prod-head span:nth-child(2),
.oc-prod-head span:nth-child(3) { text-align: center; }
.oc-prod-un { text-align: center; }

/* ── OC: coluna Entrega + maximizar Ordem de Coleta ─────────────── */
.oc-col-entrega { min-width: 120px; white-space: nowrap; }

.oc-right-head { align-items: center; }
.oc-max { border: none; background: none; cursor: pointer; color: var(--gray-600); width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, color .15s; }
.oc-max:hover { background: var(--gray-100); color: var(--green-dark); }
.oc-fs-max { border: none; background: none; cursor: pointer; color: var(--gray-500); width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, color .15s; }
.oc-fs-max:hover { background: var(--gray-100); color: var(--green-dark); }
.oc.oc-fs-maximized { position: fixed; inset: 0; z-index: 500; padding: 18px 22px; background: #d8e8ed; }

/* maximizado (painel direito): esconde o grid de pedidos; painel ocupa toda a largura */
.oc.oc-maximized .oc-left { display: none; }
.oc.oc-maximized .oc-right { width: 100%; }
.oc.oc-maximized .split-resizer { display: none; }
.oc.oc-maximized .oc-prod-head { display: none; }

/* grid detalhado (itens + dados do pedido) no modo maximizado */
.oc-det-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.oc-det-grid th { position: sticky; top: 0; background: var(--gray-50); color: var(--gray-600); font-size: 11px; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.oc-det-grid td { padding: 7px 10px; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.oc-det-qt { text-align: right; font-weight: 700; color: var(--green-dark); }

/* ── OC maximizado: produtos agregados expansíveis ──────────────── */
.oc-det-grid .oc-exp-th, .oc-det-grid td.oc-exp { width: 32px; text-align: center; }
.oc-det-grid td.oc-exp .wms-exp { color: var(--green-dark); }
.oc-det-grid tr.ocm-row { cursor: default; }
.oc-det-grid tr.ocm-row:hover td { background: var(--gray-50); }
.oc-det-grid tr.ocm-detail > td { background: var(--gray-50); padding: 8px 12px 10px 42px; }
.oc-det-grid tr.ocm-detail .wms-subtable { background: var(--white); }

/* ── OC: alinhar bottom do grid de pedidos com o painel + Qtd. à direita ── */
.oc-left { margin: 0; }
.oc-det-grid th.oc-det-qt, .wms-subtable th.oc-det-qt { text-align: right; }

/* ===================================================================
   Ocupação de Armazém — Armazém › Visão Detalhada › Por Armazém
   (TfrmWMSOcupacaoArmazem)
   =================================================================== */
.ocup { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #eef1f3; }
/* Os três painéis são iframes: até o srcdoc ser parseado o navegador pinta a
   tela do iframe em branco. O fundo petrol no próprio elemento (e o
   color-scheme claro, que impede o branco/preto padrão do about:blank) faz o
   painel já nascer na cor final — sem o "piscar" na abertura da tela. */
.ocup-hud, .ocup-side, .ocup-deps { background: #003644; color-scheme: light; }
.ocup-hud  { width: 100%; height: 92px; flex: none; border: none; display: block; }
.ocup-body { flex: 1; min-height: 0; display: flex; }
.ocup-side { width: 158px; flex: none; border: none; height: 100%; display: block; }
.ocup-deps { width: 135px; flex: none; border: none; height: 100%; display: block; }
.ocup-center { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }

.ocup-ruas-wrap { flex: 1; min-height: 0; overflow: auto; border: 1.5px solid #e2e8f0; border-radius: 8px; display: flex; flex-direction: column; }
table.ocup-ruas { width: 100%; border-collapse: collapse; flex: none; }
.ocup-ruas th { position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg,#eef6f7,#e4eff1); color: #0a4d5e; font-size: 11.5px; line-height: 14px; font-weight: 700; text-align: left; padding: 7px 10px; border-bottom: 1.5px solid #c8dce0; border-right: 1.7px solid #cddde2; white-space: nowrap; cursor: pointer; user-select: none; }
.ocup-ruas th:last-child { border-right: none; cursor: default; }
.ocup-ruas th:hover { background: linear-gradient(180deg,#dff0f2,#d0e5e9); color: #003644; }
.ocup-ruas th.ep-sort-asc:hover,
.ocup-ruas th.ep-sort-desc:hover { background: linear-gradient(180deg,#dff0f2,#d0e5e9); color: #003644; }
.ocup-filter-row th { top: 28px; background: #edf3f5; border-top: none; border-bottom: 1px solid #c8dce0; cursor: default; }
.ocup-filter-row th:hover { background: #edf3f5; color: #0a4d5e; }
.ocup-col-filter { width: 100%; height: 22px; border: 1px solid #c8d9e0; border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: inherit; background: #fff; outline: none; box-sizing: border-box; cursor: text; }
.ocup-col-filter:focus { border-color: #2fa4a9; }
.ocup-ruas td { padding: 6px 10px; border-bottom: 1.7px solid #e2eaec; border-right: 1.7px solid #cddde2; font-size: 12.5px; white-space: nowrap; }
.ocup-ruas td:last-child { border-right: none; }
.ocup-ruas tbody tr:hover td { background: #f0f9ff; }
.ocup-rua { font-weight: 600; color: var(--gray-800); }
.ocup-n { text-align: right; }
.ocup-pct { width: 210px; }
.ocup-bar { position: relative; height: 18px; background: rgba(0,0,0,.08); border-radius: 15px; overflow: hidden; min-width: 150px; }
.ocup-bar-fill { height: 100%; border-radius: 15px; transition: width .5s ease-in-out; }
.ocup-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #1a2a30; }
.ocup-acoes { white-space: nowrap; text-align: center; width: 110px; }
.ocup-acoes button { border: none; background: var(--gray-100); cursor: pointer; border-radius: 6px; padding: 4px 8px; margin: 0 2px; font-size: 13px; transition: background .15s; }
.ocup-acoes button:hover { background: #cfe2e8; }
/* Estado vazio da lista de ruas — mesma composição do estado vazio da Gestão
   FEFO (.fefo-empty), recolorida para o fundo claro do grid. */
.ocup-ruas-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ocup-ruas-empty[hidden] { display: none; }
.ocup-empty-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin: auto; max-width: 440px; padding: 30px 34px 32px; text-align: center;
  background: linear-gradient(165deg, #f5fbfc, #e8f3f6); border: 1px solid #cfe3e9;
  border-radius: 16px; box-shadow: 0 8px 26px rgba(0,54,68,.09), inset 0 1px 0 rgba(255,255,255,.7); }
.ocup-empty-ic { width: 66px; height: 66px; margin-bottom: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #2fa4a9; border-radius: 20px; background: radial-gradient(circle at 30% 25%, rgba(47,164,169,.18), rgba(47,164,169,.05) 70%);
  border: 1px solid rgba(47,164,169,.32); box-shadow: 0 0 0 6px rgba(47,164,169,.05), 0 6px 16px rgba(0,54,68,.08);
  animation: ocup-empty-glow 3.2s ease-in-out infinite; }
.ocup-empty-ic svg { width: 30px; height: 30px; }
.ocup-empty-txt { color: #0a4d5e; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: .1px; max-width: 34ch; }
.ocup-empty-hint { color: #6b8d99; font-size: 12px; line-height: 1.45; margin-top: 6px; max-width: 40ch; }
@keyframes ocup-empty-glow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(47,164,169,.05), 0 6px 16px rgba(0,54,68,.08); border-color: rgba(47,164,169,.32); }
  50%      { box-shadow: 0 0 0 11px rgba(47,164,169,.02), 0 6px 20px rgba(0,54,68,.1); border-color: rgba(47,164,169,.55); }
}
/* Sem depósito (ou depósito sem ruas): o grid some e a área fica escura, com o
   mesmo card do estado vazio da Gestão FEFO. Com filtro sem resultado o grid
   permanece — senão não haveria como limpar o filtro, que vive no cabeçalho. */
/* sem borda nem raio no estado vazio: o raio deixaria o branco do .ocup-center
   vazar nos cantos — e o :has pinta o que sobrar da área do centro */
.ocup-center:has(> .ocup-ruas-wrap.is-empty) { background: #001a22; }
.ocup-ruas-wrap.is-empty { background: #001a22; border: none; border-radius: 0; }
.ocup-ruas-wrap.is-empty > table.ocup-ruas { display: none; }
.ocup-ruas-wrap.is-empty .ocup-empty-card { background: linear-gradient(165deg, rgba(0,54,68,.55), rgba(0,26,34,.35));
  border-color: rgba(103,232,249,.16); box-shadow: 0 14px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04); }
.ocup-ruas-wrap.is-empty .ocup-empty-ic { color: #7fe3ea; border-color: rgba(103,232,249,.28);
  background: radial-gradient(circle at 30% 25%, rgba(103,232,249,.22), rgba(47,164,169,.08) 70%);
  animation-name: fefo-empty-glow; }
.ocup-ruas-wrap.is-empty .ocup-empty-txt  { color: #dff1f6; }
.ocup-ruas-wrap.is-empty .ocup-empty-hint { color: #6f97a4; }

/* ── Ocupação: modal (Visão 3D / FEFO) ──────────────────────────── */
.ocup-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.ocup-modal[hidden] { display: none; }
.ocup-modal-box { width: 94vw; height: 90vh; background: #003644; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; transition: width .2s, height .2s, border-radius .2s; }
.ocup-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #002731; color: #fff; font-weight: 600; font-size: 14px; }
.ocup-modal-head button { border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; width: 30px; height: 30px; border-radius: 7px; font-size: 15px; }
.ocup-modal-head button:hover { background: var(--red); }
.ocup-modal-box iframe { flex: 1; width: 100%; border: none; display: block; }

/* ── Ocupação modal: corpo, máscara animada, maximizar ──────────── */
.ocup-modal-actions { display: flex; gap: 6px; }
.ocup-modal-head button:hover { background: rgba(255,255,255,.22); }
#ocupModalClose:hover { background: var(--red); }
.ocup-modal-body { position: relative; flex: 1; min-height: 0; }
.ocup-modal-body iframe { width: 100%; height: 100%; border: none; display: block; background: #06121a; color-scheme: light; }
.ocup-modal-box.maximized { width: 100vw; height: 100vh; border-radius: 0; }

.ocup-mask { position: absolute; inset: 0; z-index: 5; background: #06121a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.ocup-mask[hidden] { display: none; }
.ocup-mask-txt { color: #9fdfe6; font-size: 13px; letter-spacing: .5px; }
.ocup-spinner { width: 52px; height: 52px; border-radius: 50%; border: 5px solid rgba(47,164,169,.25); border-top-color: #2fa4a9; animation: ocup-spin .8s linear infinite; box-shadow: 0 0 18px rgba(47,164,169,.4); }
@keyframes ocup-spin { to { transform: rotate(360deg); } }

/* ── Combo pesquisável (substitui <select> nativa em todas as telas) ──── */
.ss-wrap { position: relative; display: block; }
.ss-native { display: none !important; }
.ss-control { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1.5px solid var(--gray-400); border-radius: 8px; background: var(--white); color: var(--gray-800); font-size: 13px; font-family: inherit; line-height: 1.3; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.ss-control:hover { border-color: #9aa4ad; }
.ss-wrap.open .ss-control { border-color: #2fa4a9; box-shadow: 0 0 0 3px rgba(47,164,169,.15); }
.ss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-label.ss-placeholder { color: #94a3b8; }
.ss-arrow { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--gray-600); stroke-width: 2; transition: transform .18s ease; }
.ss-wrap.open .ss-arrow { transform: rotate(180deg); }
/* z-index 9800, e não 5000: o painel é anexado ao <body> (position:fixed, para não
   ser cortado por container com overflow), então ele NÃO herda a camada do modal em
   que o combo está. Com 5000 ele abria ATRÁS de qualquer overlay de modal do sistema
   (9200 a 9600) — o combo parecia vazio, porque as opções ficavam sob o véu. Fica
   abaixo de .confirm-overlay (20000), que precisa cobrir tudo, inclusive isto. */
.ss-panel { position: fixed; z-index: 9800; background: var(--white); border: 1.5px solid var(--gray-300); border-radius: 8px; box-shadow: 0 14px 34px rgba(0,0,0,.2); overflow: hidden; animation: ss-pop .14s ease; }
@keyframes ss-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ss-search { padding: 8px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.ss-input { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1.5px solid var(--gray-300); border-radius: 6px; font-size: 13px; color: var(--gray-800); }
.ss-input:focus { outline: none; border-color: #2fa4a9; box-shadow: 0 0 0 3px rgba(47,164,169,.12); }
.ss-list { max-height: 240px; overflow-y: auto; }
.ss-opt { padding: 9px 12px; font-size: 13px; color: var(--gray-800); cursor: pointer; }
.ss-opt:hover, .ss-opt.active { background: var(--gray-100); }
.ss-opt.sel { background: rgba(47,164,169,.12); color: var(--green-dark); font-weight: 600; }
.ss-opt.disabled { color: var(--gray-400); cursor: default; }
.ss-noopt { padding: 14px 12px; text-align: center; color: var(--gray-600); font-size: 12.5px; }

/* ── Banner de erro global (🚨) ──────────────────────────────────────── */
.app-error-banner {
  position: fixed; top: 16px; left: 50%; transform: translate(-50%, -140%);
  z-index: 6500; display: flex; align-items: center; gap: 10px;
  max-width: min(680px, calc(100vw - 32px)); padding: 12px 14px;
  background: linear-gradient(135deg, #fff1f0, #ffe2df); border: 1px solid #f3b6af;
  border-left: 4px solid #c0473b; border-radius: 10px; color: #8a2a20;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 12px 34px rgba(192,71,59,.28); opacity: 0;
  transition: transform .26s cubic-bezier(.2,.8,.3,1), opacity .26s;
}
.app-error-banner.show { transform: translate(-50%, 0); opacity: 1; }
.app-error-banner .aeb-ico { font-size: 15px; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(192,71,59,.5)); animation: cm-err-pulse 1.4s ease-in-out infinite; }
.app-error-banner .aeb-txt { flex: 1; }
.app-error-banner .aeb-close { flex-shrink: 0; background: rgba(192,71,59,.12); border: none; color: #8a2a20; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 13px;line-height: 1; }
.app-error-banner .aeb-close:hover { background: rgba(192,71,59,.22); }

/* ── Máscara de carregamento reutilizável (modais/rotinas) ───────────── */
.load-mask { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(248, 250, 251, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease; cursor: progress; pointer-events: none; }
.load-mask.show { opacity: 1; pointer-events: auto; }
/* variante global: cobre toda a viewport, acima de qualquer modal */
.app-load-mask { position: fixed; z-index: 19000; background: rgba(248, 250, 251, .45); }
.load-mask-box { display: flex; flex-direction: column; align-items: center; gap: 13px; transform: translateY(4px); transition: transform .25s ease; }
.load-mask.show .load-mask-box { transform: none; }
.load-mask-txt { font-size: 12.5px; font-weight: 600; color: var(--green-dark); letter-spacing: .3px; opacity: .85; animation: lm-breathe 1.6s ease-in-out infinite; }
.load-spinner { width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(from 90deg, rgba(47,164,169,0) 0%, rgba(47,164,169,.35) 35%, #2fa4a9 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); animation: lm-spin .85s linear infinite; filter: drop-shadow(0 0 6px rgba(47,164,169,.25)); }
@keyframes lm-spin { to { transform: rotate(360deg); } }
@keyframes lm-breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ── Modal: FEFO — Detalhamento por Validade ─────────────────────────── */
.fefo-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(2,14,18,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: cm-fade .15s ease; }
.fefo-ov .fefo-modal { width: 94vw; height: 90vh; background: #00232c; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; transition: width .2s, height .2s, border-radius .2s; }
.fefo-ov.is-max { padding: 4px; }
.fefo-ov.is-max .fefo-modal { width: 100%; height: calc(100vh - 8px); border-radius: 6px; }
/* FEFO embutido em tela (Gestão FEFO) — reaproveita todo o CSS de .fefo-ov
   desligando só o comportamento de overlay. A raiz da tela usa
   class="fefo-ov fefo-inline"; ver window.criarFefoView em oc-fefo-modal.js. */
.fefo-ov.fefo-inline { position: static; inset: auto; z-index: auto; padding: 0; background: none; backdrop-filter: none; animation: none; align-items: stretch; justify-content: flex-start; flex: 1; min-height: 0; }
.fefo-ov .fefo-cab { background-color: #002a36; display: flex; gap: 10px; padding: 10px; box-sizing: border-box; flex-shrink: 0; }
.fefo-ov .fefo-card { flex: 1; background: rgba(0,42,54,.85); border-radius: 6px; padding: 10px; border: 1px solid rgba(103,232,249,.15); color: #e0e0e0; }
.fefo-ov .fefo-stat-label { font-size: 10px; color: #7aacba; }
.fefo-ov .fefo-stat-value { font-size: 16px; font-weight: 600; color: #fff; margin-top: 4px; }
/* colunas: Produto EAN DUN Lote Qtd Unid. Sec.Unid. Fator Unid.Conversão PE.Qtd PE.Unid Fabricação Validade Endereço */
.fefo-ov .fefo-app { --grid-cols: minmax(160px,2.733fr) minmax(90px,0.9fr) minmax(90px,1.2fr) minmax(95px,1.253fr) minmax(95px,1.253fr) minmax(100px,1fr) minmax(65px,0.9fr) minmax(60px,0.6fr) minmax(90px,0.9fr) minmax(65px,0.8fr) minmax(95px,0.95fr) minmax(70px,0.8fr) minmax(75px,0.8fr) minmax(120px,1.61fr); background-color: #001a22; color: #333; padding: 6px; position: relative; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(103,232,249,.4) rgba(255,255,255,.06); }
/* .fefo-app fica fora da regra global de scrollbar (linha ~48): o FEFO é escuro e
   usa a mesma barra ciano do .product-list, não a petrol clara do resto do sistema. */
.fefo-ov .fefo-app::-webkit-scrollbar { width: 8px; }
.fefo-ov .fefo-app::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 4px; }
.fefo-ov .fefo-app::-webkit-scrollbar-thumb { background: rgba(103,232,249,.4); border-radius: 4px; }
.fefo-ov .fefo-app::-webkit-scrollbar-thumb:hover { background: rgba(103,232,249,.65); }
/* Sem as setas do padrão do sistema: 8px de barra não comportam o botão de 15px. */
.fefo-ov .fefo-app::-webkit-scrollbar-button { display: none; }
.fefo-ov .fefo-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fefo-ov .fefo-container { display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 1; }
.fefo-ov .date-group { backdrop-filter: blur(5px); border-radius: 4px; overflow: hidden; transition: all .3s ease; }
.fefo-ov .no-data-msg { text-align: center; color: #fff; margin-top: 50px; font-size: 18px; font-weight: 500; z-index: 1; position: relative; }
/* FEFO — estado vazio (nenhum depósito selecionado ainda) */
.fefo-ov .fefo-container:has(> .fefo-empty) { min-height: 100%; justify-content: center; align-items: center; }
.fefo-ov .fefo-empty { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; margin: auto; max-width: 440px; padding: 30px 34px 32px; text-align: center;
  background: linear-gradient(165deg, rgba(0,54,68,.94), rgba(0,26,34,.9)); border: 1px solid rgba(103,232,249,.16);
  backdrop-filter: blur(6px); border-radius: 16px; box-shadow: 0 14px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04); }
.fefo-ov .fefo-empty-ic { width: 66px; height: 66px; margin-bottom: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 20px; background: radial-gradient(circle at 30% 25%, rgba(103,232,249,.22), rgba(47,164,169,.08) 70%);
  border: 1px solid rgba(103,232,249,.28); box-shadow: 0 0 0 6px rgba(103,232,249,.05), 0 6px 16px rgba(0,0,0,.3);
  animation: fefo-empty-glow 3.2s ease-in-out infinite; }
.fefo-ov .fefo-empty-ic svg { width: 30px; height: 30px; opacity: .92; }
.fefo-ov .fefo-empty-txt { color: #dff1f6; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: .1px; max-width: 34ch; }
.fefo-ov .fefo-empty-hint { color: #6f97a4; font-size: 12px; line-height: 1.45; margin-top: 6px; max-width: 40ch; }
@keyframes fefo-empty-glow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(103,232,249,.05), 0 6px 16px rgba(0,0,0,.3); border-color: rgba(103,232,249,.28); }
  50%      { box-shadow: 0 0 0 11px rgba(103,232,249,.02), 0 6px 20px rgba(0,0,0,.34); border-color: rgba(103,232,249,.5); }
}
/* Cor de criticidade agora vem de faixas parametrizadas por produto (N cores
   possíveis, não mais um enum fixo de 4) — cada .date-group/.product-row recebe
   as custom properties --cor-* inline (ver estiloCorFefo em oc-fefo-modal.js) e
   estas regras só consomem essas variáveis, genericamente. */
.fefo-ov .date-group.fefo-cor { background: var(--cor-bg); border: 1px solid var(--cor-border); box-shadow: 0 0 10px var(--cor-shadow); }
.fefo-ov .date-group.fefo-cor .date-header { background: var(--cor-header-bg); color: var(--cor-text); }
.fefo-ov .date-group.fefo-cor .dias-restantes { color: var(--cor-text); font-weight: bold; }
/* Corpo da tabela (linhas de produto) dentro do card translúcido: cor fixa e
   neutra, igual ao mesmo ajuste que a aba Produtos já faz em .fefo-prod-group
   — o dado da linha não deve mudar de cor por faixa, só o cabeçalho do grupo. */
.fefo-ov .date-group.fefo-cor .product-row { color: #c8dfe8; }
.fefo-ov .date-group.fefo-cor .col-header  { color: #9fd6e3; background: rgba(0,0,0,.18); border-bottom: 2px solid rgba(255,255,255,.12); }
.fefo-ov .date-header { font-weight: 700; font-size: 14px; padding: 6px 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,.05); }
.fefo-ov .date-header:hover { filter: brightness(.95); }
.fefo-ov .header-actions { display: flex; align-items: center; gap: 12px; }
.fefo-ov .btn-excel { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:#f4f4f4; color:#1d1d1d; border:1px solid #d6d6d6; border-radius:8px; padding:1.3px 14px; font-size:12px; font-weight:600; cursor:pointer; transition:all .18s ease; box-shadow:0 4px 10px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.8); }
.fefo-ov .btn-excel:hover { background:#fff; transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.9); }
.fefo-ov .btn-excel:active { transform:scale(.98); }
.fefo-ov .btn-excel svg { width:20px; height:20px; flex-shrink:0; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
/* .product-list é o VIEWPORT que rola (fica em 100% do card, senão ele mesmo
   estoura o card, que tem overflow:hidden — sem scroll nenhum aparece).
   .product-list-inner é quem mede o conteúdo (width:max-content): todas as
   .product-row (cabeçalho e dados) são filhas dela e ficam em width:100% DELA,
   não de si mesmas — se cada linha medisse a própria largura individualmente,
   o cabeçalho ("Produto") e uma linha com nome de produto bem mais longo
   chegavam a totais diferentes, e a mesma coluna (mesmo --grid-cols) resolvia
   pixels diferentes em cada uma — cabeçalho e dado saíam desalinhados. */
.fefo-ov .product-list { display: none; background: transparent; overflow-x: auto; width: 100%; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(103,232,249,.4) rgba(255,255,255,.06); }
.fefo-ov .product-list::-webkit-scrollbar { height: 8px; }
.fefo-ov .product-list::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 4px; margin: 0 6px; }
.fefo-ov .product-list::-webkit-scrollbar-thumb { background: rgba(103,232,249,.4); border-radius: 4px; }
.fefo-ov .product-list::-webkit-scrollbar-thumb:hover { background: rgba(103,232,249,.65); }
.fefo-ov .product-list-inner { width: max-content; min-width: 100%; box-sizing: border-box; padding-right: 6px; }
.fefo-ov .product-row { display: grid; grid-template-columns: var(--grid-cols); gap: 2px; padding: 3px 6px; border-bottom: 1px solid rgba(0,0,0,.05); font-size: 13px; align-items: center; width: 100%; box-sizing: border-box; }
.fefo-ov .product-row > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fefo-ov .product-row > div:not(:last-child) { border-right: 1px solid rgba(0,0,0,.3); }
.fefo-ov .product-row:last-child { border-bottom: none; }
.fefo-ov .product-row:hover { background: rgba(0,0,0,.04); }
/* campo sem valor cadastrado: '----' centralizado na célula */
.fefo-ov .fefo-nv { display: block; text-align: center; }
.fefo-ov .col-header { font-weight: bold; color: #333; background: rgba(0,0,0,.04); border-bottom: 2px solid rgba(0,0,0,.1); font-size: 13px; }
.fefo-ov .icon-expand::after { content: '+'; font-size: 16px; font-weight: bold; }
.fefo-ov .expanded .icon-expand::after { content: '-'; }
/* FEFO — radiogroup "Tipo de visualização" */
.fefo-tipo-wrap { display:flex; align-items:center; flex-wrap:wrap; gap:14px; row-gap:8px; padding:7px 14px; background:rgba(0,42,54,.8); border-bottom:1px solid rgba(103,232,249,.1); flex-shrink:0; }
.fefo-tipo-label { font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#7aacba; white-space:nowrap; }
.fefo-tipo-pills { display:flex; gap:3px; background:rgba(0,0,0,.4); border-radius:8px; padding:3px; border:1px solid rgba(103,232,249,.14); }
.fefo-tipo-pill { display:flex; align-items:center; gap:5px; padding:4px 14px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; color:#7aacba; transition:all .2s ease; user-select:none; border:1px solid transparent; }
.fefo-tipo-pill:hover { color:#9fd6e3; }
.fefo-tipo-pill:has(input:checked) { background:rgba(103,232,249,.14); color:#67e8f9; border-color:rgba(103,232,249,.32); box-shadow:0 0 8px rgba(103,232,249,.15); }
.fefo-tipo-pill svg { flex-shrink:0; transition:stroke .2s; }
.fefo-tipo-pill input { display:none; }
/* FEFO — view "Produtos": 13 colunas (sem a coluna Produto) */
.fefo-ov.fefo-view-prod .fefo-app { --grid-cols: minmax(100px,0.9fr) minmax(90px,1.2fr) minmax(90px,1.2fr) minmax(95px,1.165fr) minmax(95px,1.165fr) minmax(100px,1fr) minmax(65px,0.9fr) minmax(60px,0.6fr) minmax(90px,0.9fr) minmax(65px,0.8fr) minmax(95px,0.95fr) minmax(70px,0.8fr) minmax(75px,0.8fr) minmax(120px,1.22fr); }
/* Coluna de criticidade (aba Produtos) — número exato ao lado da cor da linha */
.fefo-ov .fefo-crit-cell { font-weight: 700; }
.fefo-ov .prod-group-name { font-size:13px; font-weight:700; }
/* FEFO — card master produto (header petrol) */
.fefo-ov .fefo-prod-group { background:rgba(0,30,40,.35); border:1px solid rgba(103,232,249,.12); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.fefo-ov .fefo-prod-group > .date-header { background:linear-gradient(135deg,#00536b 0%,#003644 100%); color:#e0f7f7; border-bottom:1px solid rgba(103,232,249,.2); }
.fefo-ov .fefo-prod-group > .date-header:hover { filter:brightness(1.12); }
.fefo-ov .fefo-prod-group .prod-group-name { color:#e0f7f7; }
.fefo-ov .fefo-prod-group .icon-expand::after { color:#67e8f9; }
.fefo-ov .fefo-prod-reg { font-size:11px; font-weight:600; color:#9fd6e3; }
/* FEFO — texto das linhas no contexto dark (fefo-prod-group) */
.fefo-ov .fefo-prod-group .product-row { color:#c8dfe8; }
.fefo-ov .fefo-prod-group .col-header  { color:#9fd6e3; background:rgba(0,54,68,.55); border-bottom:2px solid rgba(103,232,249,.15); }
/* Botão "i" — abre o popover de faixas do produto. Só lê dados já em memória
   (faixasPorProduto), nenhuma chamada de rede — ver oc-fefo-modal.js. */
.fefo-ov .fefo-hdr-name-wrap { display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; }
.fefo-ov .fefo-prod-cell { display:flex; align-items:center; gap:5px; overflow:hidden; }
.fefo-ov .fefo-prod-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fefo-ov .fefo-info-btn { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:currentColor; opacity:.75; cursor:pointer; transition:opacity .15s ease,background .15s ease; }
.fefo-ov .fefo-info-btn svg { width:12px; height:12px; }
.fefo-ov .fefo-info-btn:hover { opacity:1; background:rgba(103,232,249,.28); }
/* Popover de faixas — fixed no body (escapa do overflow:hidden dos cards) */
.fefo-faixas-pop { position:fixed; z-index:10000; min-width:200px; max-width:260px;
  background:linear-gradient(165deg,#00404f,#001b22); border:1px solid rgba(103,232,249,.25);
  border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.4); padding:12px 14px; font-size:12.5px; color:#dff1f6; }
.fefo-faixas-pop .fefo-pop-title-main { font-weight:700; font-size:13px; margin-bottom:8px; color:#fff; }
.fefo-faixas-pop .fefo-pop-sec { margin-bottom:8px; }
.fefo-faixas-pop .fefo-pop-sec-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#7aacba; margin-bottom:4px; }
.fefo-faixas-pop .fefo-pop-row { display:flex; align-items:center; gap:6px; padding:2px 0; }
.fefo-faixas-pop .fefo-pop-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.fefo-faixas-pop .fefo-pop-vazio { color:#6f97a4; font-style:italic; }
.fefo-faixas-pop .fefo-pop-hint { font-size:10.5px; color:#6f97a4; line-height:1.4; margin-top:4px; border-top:1px solid rgba(103,232,249,.12); padding-top:6px; }
/* FEFO — linhas de detalhe coloridas por validade (view Produtos) */
.fefo-ov .product-row.fefo-cor:not(.col-header) { background: var(--cor-row-bg); box-shadow: inset 3px 0 0 var(--cor-accent); }
/* FEFO — legenda de cores */
/* Segunda linha da faixa: flex-basis:100% força a quebra, então "Vencimento em"
   e a legenda ficam sempre numa linha própria, ancoradas à esquerda. */
.fefo-bar-row2 { flex-basis:100%; display:flex; align-items:center; gap:14px; }
.fefo-cor-modo { display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* Modo Produtos: a busca estica até o limite disponível da faixa. */
.fefo-ov.fefo-view-prod .fefo-filtro-prod { flex:1 1 280px; min-width:0; }
.fefo-ov.fefo-view-prod .fefo-search-wrap { flex:1; max-width:none; }
.fefo-legend { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.fefo-leg-item { display:flex; align-items:center; gap:5px; font-size:10.5px; color:#9fd6e3; white-space:nowrap; }
/* cor do ponto vem inline (style="background:...") — paleta dinâmica, ver PALETA em wms-fefo-faixas.js */
.fefo-leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.fefo-leg-emoji { font-size:11px; line-height:1; flex-shrink:0; }
/* FEFO — filtros inline (mesma linha do tipo de visualização) */
.fefo-tipo-sep { width:1px; height:22px; background:rgba(103,232,249,.2); flex-shrink:0; }
.fefo-filtro-venc, .fefo-filtro-prod { display:flex; align-items:center; gap:8px; }
.fefo-filtro-venc[hidden], .fefo-filtro-prod[hidden] { display:none; }
.fefo-date-range { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.fefo-date-range label { display:flex; align-items:center; gap:6px; font-size:11px; color:#9fd6e3; white-space:nowrap; }
.fefo-dr-lbl { display:inline-block; width:24px; flex-shrink:0; }
.fefo-date-range input[type="date"] { box-sizing:border-box; width:150px; color-scheme:dark; background:rgba(0,0,0,.35); border:1px solid rgba(103,232,249,.22); border-radius:5px; color:#e0f7f7; font-size:11px; padding:6px 8px; outline:none; cursor:pointer; }
.fefo-date-range input[type="date"]:focus { border-color:rgba(103,232,249,.5); }
.fefo-date-range input[type="date"]::-webkit-datetime-edit { color:transparent; }
.fefo-date-range input[type="date"].has-value::-webkit-datetime-edit,
.fefo-date-range input[type="date"]:focus::-webkit-datetime-edit { color:#e0f7f7; }
/* período inválido: filtro ao vivo avisa na própria faixa (ver atualizarAvisoVenc) */
.fefo-date-range input[type="date"].is-invalido { border-color:rgba(248,113,113,.8); }
.fefo-filtro-aviso { max-width:220px; font-size:11px; font-weight:600; line-height:1.35; color:#fca5a5; }
.fefo-filtro-aviso[hidden] { display:none; }
.fefo-filtro-clear { background:transparent; border:1px solid rgba(103,232,249,.18); border-radius:5px; color:#7aacba; font-size:11px; padding:5px 10px; cursor:pointer; transition:all .18s; white-space:nowrap; }
.fefo-filtro-clear:hover { background:rgba(231,76,60,.12); border-color:rgba(231,76,60,.35); color:#e0816d; }
.fefo-filtro-count { font-size:11px; color:#4a8fa0; white-space:nowrap; }
.fefo-search-wrap { display:flex; align-items:center; gap:8px; min-width:280px; max-width:420px; background:rgba(0,0,0,.3); border:1px solid rgba(103,232,249,.2); border-radius:6px; padding:5px 10px; transition:border-color .18s; }
.fefo-search-wrap:focus-within { border-color:rgba(103,232,249,.5); }
.fefo-search-wrap > svg { color:#7aacba; flex-shrink:0; }
.fefo-search-input { background:transparent; border:none; outline:none; color:#e0f7f7; font-size:12px; flex:1; min-width:0; }
.fefo-search-input::placeholder { color:#4a7a88; font-style:italic; }

/* ── Modal: Vincular Endereços de Coleta ─────────────────────────────── */
.coleta-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(2, 14, 18, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: cm-fade .15s ease; }
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
.coleta-modal { width: min(1100px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--white); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.4); overflow: hidden; animation: cm-pop .18s cubic-bezier(.2,.8,.3,1); transition: width .2s, height .2s, max-width .2s, max-height .2s, border-radius .2s; }
@keyframes cm-pop { from { transform: translateY(10px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.cm-head { position: relative; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 18px 8px 22px; background: linear-gradient(160deg, #001f2d 0%, #003644 55%, #00465a 100%); color: #fff; }
.cm-head::after { content: ""; position: absolute; right: 80px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(44,138,160,0.28), transparent 70%); pointer-events: none; }
.cm-title { font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.cm-head-btns { display: flex; align-items: center; gap: 6px; }
.cm-close, .cm-max { width: 30px; height: 30px; border: none; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 15px; cursor: pointer; transition: background .2s, box-shadow .2s; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cm-max:hover { background: rgba(255,255,255,.25); }
.cm-close:hover { background: rgba(192,71,59,.75); box-shadow: 0 0 0 3px rgba(192,71,59,.25); }

/* ── EP modal (cm-ovl): largura maior + height explícita para animar suavemente ── */
/* height = 100vh - 56px (28px × 2 de padding do overlay) para que a height do card
   case exatamente com a área disponível; assim padding (.2s) e height (.2s) animam
   em sincronia ao maximizar, sem snap visível. */
.cm-ovl .coleta-modal { width: min(1175px, 95vw); height: calc(100vh - 56px); }

/* ── Modal maximizado ─────────────────────────────────────────────── */
.coleta-overlay.is-max { padding: 4px; }
.coleta-modal.is-max { width: 100%; height: calc(100vh - 8px); max-height: calc(100vh - 8px); border-radius: 6px; }
.coleta-modal.is-max .cm-grids { flex: 1; min-height: 0; }

/* ── Modal de tela WMS (VDE/VDP) aberto sobre a tela de Ocupação ─────── */
.coleta-overlay.ov-tela { z-index: 1100; }
.coleta-overlay.ov-tela .coleta-modal { width: min(1360px, 96vw); height: 90vh; max-height: calc(100vh - 32px); }
.coleta-overlay.ov-tela.is-max .coleta-modal { width: 100%; height: calc(100vh - 8px); max-height: calc(100vh - 8px); border-radius: 6px; }
.ov-tela-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.ov-tela-body .wiz { flex: 1; min-height: 0; }

.cm-dep { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 8px 18px 5px; }
.cm-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 200px; }
.cm-dep label { font-size: 11px;font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .5px; }
.cm-req { color: #c0473b; font-weight: 700; }
.cm-dep select { width: 100%; padding: 7px 10px; border: 1.5px solid var(--gray-400); border-radius: 8px; font-size: 13px; color: var(--gray-800); background: var(--white); cursor: pointer; }
.cm-warn { color: #c0473b; font-weight: 600; display: inline-block; animation: cm-warn-pulse 1.6s ease-in-out infinite; }
@keyframes cm-warn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cm-dep select:focus { outline: none; border-color: #2fa4a9; box-shadow: 0 0 0 3px rgba(47,164,169,.15); }

/* chips combos (Depósito / Coletor) */
.cm-chips-box { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 10px; border: 1.5px solid var(--gray-400); border-radius: 8px; background: var(--white); min-height: 32px; box-sizing: border-box; align-items: center; cursor: pointer; transition: border-color .15s; line-height: 1.2; }
.cm-chips-box:hover { border-color: #2fa4a9; }
.cm-chips-placeholder { font-size: 13px; color: var(--gray-500); pointer-events: none; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 999px; background: #dbeef3; color: #1e4a5a; font-size: 12.5px; font-weight: 600; user-select: none; white-space: nowrap; line-height: 1.2; min-width: 0; max-width: 200px; flex-shrink: 0; }
.cm-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cm-chip-x { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: rgba(0,54,68,.15); font-size: 10px; cursor: pointer; flex-shrink: 0; }
.cm-chip-x:hover { background: rgba(0,54,68,.3); color: #fff; }
/* dropdown fixo no body */
.cm-dd { background: var(--white); border: 1px solid var(--gray-300); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); overflow: hidden; max-height: 280px; display: flex; flex-direction: column; }
.cm-dd-search { padding: 6px 8px; border-bottom: 1px solid var(--gray-100); flex-shrink: 0; }
.cm-dd-input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--gray-300); border-radius: 6px; padding: 5px 8px; font-size: 12.5px; outline: none; font-family: inherit; }
.cm-dd-input:focus { border-color: #2fa4a9; }
.cm-dd-list { overflow-y: auto; padding: 4px 0; }
.cm-dd-opt { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 12px; color: #1e293b; cursor: pointer; transition: background .1s; user-select: none; }
.cm-dd-opt input[type="checkbox"] { width: 14px; height: 14px; accent-color: #003644; flex-shrink: 0; pointer-events: none; }
.cm-dd-empty { padding: 12px; text-align: center; color: var(--gray-500); font-size: 12px; }

/* erro tratado — banner dentro do modal */
.cm-error { display: flex; align-items: center; gap: 10px; margin: 8px 18px 0; padding: 11px 14px; border-radius: 10px; background: linear-gradient(135deg, #fff1f0, #ffe2df); border: 1px solid #f3b6af; border-left: 4px solid #c0473b; color: #8a2a20; font-size: 13px; line-height: 1.4; box-shadow: 0 4px 14px rgba(192,71,59,.15); animation: cm-err-in .18s ease; }
.cm-error[hidden] { display: none; }
.cm-error-ico { font-size: 14px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(192,71,59,.6)); animation: cm-err-pulse 1.4s ease-in-out infinite; }
.cm-error-txt { font-weight: 600; }
@keyframes cm-err-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes cm-err-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.cm-empty-err { color: #8a2a20; font-weight: 600; }
.cm-empty-err .cm-error-ico { display: inline-block; margin-right: 4px; }

.cm-grids { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; padding: 6px 18px; overflow: auto; }
.cm-block { display: flex; flex-direction: column; min-height: 150px; border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; }
.cm-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 13px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-size: 13px;font-weight: 700; color: var(--green-dark); text-transform: uppercase; letter-spacing: .5px; }

/* Recolher grade de Produtos (topo, recolhe para cima) / Endereços (base, recolhe
   para baixo). Só um fica recolhido por vez — a outra linha vira 1fr e ocupa o
   espaço livre. Os dois abertos (padrão) mantêm 1fr/1fr, definido acima. */
.cm-grids.prod-collapsed { grid-template-rows: auto 1fr; }
.cm-grids.end-collapsed { grid-template-rows: 1fr auto; }
.cm-block.is-collapsed { min-height: 0; }
.cm-block.is-collapsed .cm-grid-wrap { display: none; }
.cm-block-toggle { flex-shrink: 0; align-self: center; width: 22px; height: 22px; border: 1px solid var(--gray-300); border-radius: 6px; background: var(--white); color: var(--gray-600); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: 8px; transition: all .15s; }
.cm-block-toggle:hover { border-color: #2fa4a9; color: #2fa4a9; background: rgba(47,164,169,.07); }

/* Resumo do produto selecionado no header do bloco Produtos, só visível quando o
   bloco está recolhido (grid some, e o essencial precisa caber na própria faixa). */
.cm-block-summary { display: none; }
.cm-block.is-collapsed .cm-block-summary { display: flex; align-items: center; align-self: center; gap: 10px; flex: 1; min-width: 0; overflow: hidden; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cm-block.is-collapsed .cm-block-summary::before { content: '|'; color: var(--gray-300); font-weight: 400; }
.cm-sum-cod { flex-shrink: 0; font-weight: 800; color: var(--gray-800); font-size: 13px; }
.cm-sum-desc { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-700); font-size: 13px; }
.cm-sum-qtd { flex-shrink: 0; color: var(--gray-600); font-size: 13px; }
.cm-sum-qtd b { color: var(--green-dark); }
.cm-sum-allocs { flex-shrink: 0; display: flex; align-items: center; gap: 4px; max-width: 320px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
.cm-sum-allocs::-webkit-scrollbar { height: 3px; }
.cm-sum-allocs::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
.cm-block-sub { font-size: 11px; font-weight: 600; color: var(--gray-600); text-transform: none; letter-spacing: 0; }
/* Fundo opaco no rolador, e não transparente sobre o branco do modal (na tela, o
   mesmo branco): em monitor de escala 100% o Chrome só rola pela placa de vídeo um
   rolador de fundo opaco. Transparente, ele preserva o antialiasing do texto
   repintando o grid inteiro a cada quadro de rolagem, e a rolagem travava mesmo com
   poucas linhas. */
.cm-grid-wrap { overflow: auto; flex: 1; background: var(--white); }

.cm-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.cm-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--white); text-align: left; font-size: 11px; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 1.5px solid var(--gray-200); }
.cm-grid td { padding: 7px 10px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); vertical-align: middle; }
.cm-grid .cm-qt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-grid thead th.cm-qt { text-align: right; }
.cm-strong { font-weight: 600; color: var(--gray-800); }
.cm-empty { padding: 22px 12px; text-align: center; color: var(--gray-600); font-size: 13px; }

/* grid de produtos */
.cm-prow { cursor: pointer; transition: background .12s; }
.cm-prow:hover { background: var(--gray-50); }
.cm-prow.sel { background: rgba(47,164,169,.12); box-shadow: inset 3px 0 0 #2fa4a9; }
.cm-prow.done .cm-strong::after { content: ""; }
.cm-bar { margin-top: 5px; height: 5px; border-radius: 3px; background: var(--gray-200); overflow: hidden; }
.cm-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2fa4a9, #1c7b80); transition: width .2s ease; }
.cm-prow.done .cm-bar span { background: linear-gradient(90deg, #2e9e5e, #1f7a47); }
.cm-alloc { font-weight: 600; color: var(--green-dark); }
.cm-alloc.partial { color: #b8860b; }
.cm-alloc.ok { color: #2e9e5e; }
.cm-pend { color: var(--gray-400); font-style: italic; }

/* grid de endereços */
.cm-erow { cursor: pointer; }
/* linha de espaçamento da virtualização (createVirtualGrid) — nunca interativa */
.cm-grid tbody tr.cm-spacer { pointer-events: none; }
/* Grid de produtos com as colunas travadas pela medição da lista inteira
   (travarColunasProd): a largura de cada coluna vem do style do th, em porcentagem
   da tabela, medida com borda e padding incluídos. */
.cm-grid.cm-grid-fix { table-layout: fixed; }
.cm-grid.cm-grid-fix thead th { box-sizing: border-box; }
.cm-erow.used { background: rgba(47,164,169,.08); }
.cm-erow.insuf { cursor: not-allowed; opacity: .55; }
.cm-mut { font-size: 11px; color: #c0473b; margin-top: 2px; }
.cm-vinc { text-align: center; width: 70px; }
/* coluna "Operador" do grid de endereços — atribuição por item (opcional) */
.cm-grid .cm-oper { text-align: center; width: 140px; }
.cm-grid thead th.cm-oper { text-align: center; }
.cm-oper-btn { max-width: 100%; transition: filter .12s, border-color .12s; }
.cm-oper-btn:hover { filter: brightness(1.08); border-color: #2fa4a9; }
.cm-hint { color: #2fa4a9; cursor: help; font-size: 11px; margin-left: 2px; }

/* "i" ao lado do caption de seleção automática (modais de Coleta e Reposição).
   O container do caption tem pointer-events:none para não roubar clique do grid,
   então o ícone precisa reativar o seu. Cor alinhada ao gradiente da label de IA. */
.cm-ai-info { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; border: 1px solid rgba(79,70,229,.45); color: #4f46e5; background: rgba(79,70,229,.07); font-size: 10px; font-weight: 700; font-style: normal; cursor: pointer; vertical-align: middle; transition: background .12s, color .12s; }
.cm-ai-info:hover, .cm-ai-info:focus-visible { background: #4f46e5; color: #fff; border-color: #4f46e5; outline: none; }

/* Popover de informação ancorado (window.abrirPopoverInfo, em app.js). Fica no body
   com position:fixed: dentro do modal, o backdrop-filter do overlay e o overflow dos
   grids o recortariam. */
.info-pop { position: fixed; z-index: 10200; max-height: min(76vh, 620px); overflow-y: auto; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 16px 38px rgba(0,0,0,.2); text-transform: none; letter-spacing: normal; font-weight: 400; }
.info-pop-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; background: var(--white); border-radius: 10px 10px 0 0; }
.info-pop-head h4 { margin: 0; flex: 1; font-size: 13px; font-weight: 800; color: var(--green-dark); text-transform: none; letter-spacing: 0; }
.info-pop-x { flex-shrink: 0; width: 22px; height: 22px; border: none; background: var(--gray-100); color: var(--gray-600); border-radius: 6px; font-size: 13px; line-height: 1; cursor: pointer; }
.info-pop-x:hover { background: var(--gray-200); }
.info-pop-body { padding: 12px 15px 15px; }
.info-pop-body p { margin: 0 0 10px; font-size: 12.5px; color: var(--gray-600); line-height: 1.5; }
.info-pop-body h5 { margin: 14px 0 6px; font-size: 11px; font-weight: 800; color: var(--green-dark); text-transform: uppercase; letter-spacing: .06em; }
.info-pop-body ol, .info-pop-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.info-pop-body li { font-size: 12.5px; color: var(--gray-600); line-height: 1.45; }
.info-pop-body li b { color: var(--gray-800); }
.info-pop-body li small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--gray-500); line-height: 1.4; }
.cm-radio { display: inline-flex; cursor: pointer; }
.cm-radio input { width: 17px; height: 17px; accent-color: #2fa4a9; cursor: pointer; }
.cm-erow.insuf .cm-radio, .cm-erow.insuf .cm-radio input { cursor: not-allowed; }
/* Endereço sinalizado para inventário nos modais de vínculo (O.C.: grid de endereços; O.R.:
   grid de pulmões). O saldo dele no sistema não é o real: a linha fica na lista, na posição
   da ordenação, esmaecida e com barra âmbar, a etiqueta do motivo junto ao endereço e a caixa
   de bloqueio na coluna Vincular. Esmaece pela cor do texto, e não por opacidade, para a
   etiqueta e a caixa (alvos do balão .poc-tip--bloq.is-sinal) continuarem nítidas. */
.cm-erow.is-sinal { cursor: default; }
.cm-erow.is-sinal > td { background: #fffbf2; color: var(--gray-500); }
.cm-erow.is-sinal > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.cm-erow.is-sinal .cm-strong { color: var(--gray-500); }
.cm-erow.is-sinal .cm-mut { color: var(--gray-400); }
.cm-sinal-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  padding: 1px 7px; border-radius: 999px; border: 1px solid #fde68a; background: #fffbeb;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #92400e; white-space: nowrap; cursor: help;
}
.cm-sinal-tag svg { flex: none; width: 10px; height: 10px; color: #b45309; }
.cm-vinc.is-bloq { cursor: not-allowed; }
.cm-vinc .oc-cb-bloq input[type=checkbox] { width: 15px; height: 15px; }
.cm-vinc .oc-cb-bloq-ico svg { width: 9px; height: 9px; }

.cm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 18px; border-top: 1px solid var(--gray-200); background: var(--gray-50); }
.cm-foot-info { font-size: 13px; color: var(--gray-600); }
.cm-foot-info b { color: var(--green-dark); }
.cm-foot-actions { display: flex; gap: 10px; }
.cm-cancel { padding: 9px 16px; border: 1.5px solid var(--gray-400); border-radius: 8px; background: var(--white); color: var(--gray-800); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.cm-cancel:hover { background: rgba(192,71,59,.07); color: #c0473b; border-color: rgba(192,71,59,.4); box-shadow: 0 0 0 2.5px rgba(192,71,59,.12); }
.cm-ok { padding: 9px 18px; }
.cm-ok:disabled { opacity: .5; cursor: not-allowed; }

/* ── Coleta modal: linhas expansíveis de pedidos ─── */
.cm-prod-cell { display: flex; align-items: center; gap: 8px; }
.cm-expand-btn { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--gray-300); border-radius: 4px; background: var(--white); color: var(--gray-500); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: all .15s; }
.cm-expand-btn:hover { border-color: #2fa4a9; color: #2fa4a9; background: rgba(47,164,169,.07); }
.cm-expand-btn.open { background: rgba(47,164,169,.10); border-color: #2fa4a9; color: #2fa4a9; }
.cm-expand-btn svg { transition: transform .2s cubic-bezier(.22,1,.36,1); }
.cm-expand-btn.open svg { transform: rotate(90deg); }
.cm-expand-ph { display: inline-block; width: 20px; flex-shrink: 0; }
.cm-prow-detail td { background: #f4fafa; padding: 0; border-bottom: 1px solid var(--gray-100); }
.cm-detail-row { display: flex; align-items: center; padding: 7px 12px 7px 40px; gap: 0; }
.cm-dr-ped { flex: 0 0 90px; margin-right: 16px; }
.cm-dr-num { font-weight: 700; color: var(--gray-800); font-size: 13px; }
.cm-dr-div { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.cm-dr-cliente { flex: 1 1 0; font-size: 13px; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 16px; min-width: 0; }
.cm-dr-cidade { flex: 0 0 130px; font-size: 13px; color: var(--gray-600); margin-right: 16px; }
.cm-dr-entrega { flex: 0 0 80px; font-size: 13px; color: var(--gray-600); margin-right: 16px; }
.cm-dr-qty { flex: 0 0 70px; font-weight: 700; color: var(--gray-800); text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }

/* Categoria do endereço no grid de coleta. A O.C. passou a listar picking e pulmão
   juntos, e sem o rótulo o usuário não tem como saber de onde a mercadoria sai. */
.cm-cat-pill { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid; vertical-align: middle; white-space: nowrap; }
.cm-cat-pill.is-pick { color: #0f6b34; background: #eff9f2; border-color: #cbe8d3; }
.cm-cat-pill.is-pulm { color: #8a5a12; background: #fffbeb; border-color: #fde68a; }

/* Endereço indicado pela seleção automática: barra em gradiente na borda da linha.
   Marcação ambiente, sem rótulo — não disputa espaço com o endereço nem se repete
   como texto em dezenas de linhas. Vai no ::before da primeira célula, e não como
   fundo da linha, para não brigar com o realce de .used / .over, que sinalizam outra
   coisa (o que está vinculado agora). */
.cm-erow.is-ia > td:first-child { position: relative; }
.cm-erow.is-ia > td:first-child::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #f472b6, #a855f7, #4f46e5, #06b6d4);
}
/* Gradiente animado da IA (checkbox do endereço sugerido e botão de alocações
   automáticas). Mesmo efeito do cm-ai-shimmer — o gradiente com 3 vezes a largura
   da caixa, indo e voltando em 3s —, mas deslizado por transform num ::before, que
   o compositor anima sem repintar. O cm-ai-shimmer anima background-position, que
   repinta o elemento a cada quadro: em dezenas de linhas do grid isso ocupava a
   página o tempo todo e travava a rolagem. Os filhos ficam acima do gradiente. */
.cm-ia-grad { position: relative; overflow: hidden; }
.cm-ia-grad::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 300%; background: linear-gradient(270deg,#f472b6,#a855f7,#4f46e5,#06b6d4,#f472b6); animation: cm-ai-slide 3s ease infinite; pointer-events: none; }
.cm-ia-grad > * { position: relative; }
@keyframes cm-ai-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-66.6667%); } }
/* checkbox: marcado traz o visto branco; desmarcado (.is-off) é um anel com miolo branco */
.cm-ia-chk { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 3px; }
.cm-ia-chk.is-off { padding: 1.5px; box-sizing: border-box; }
.cm-ia-chk.is-off > span { display: block; width: 100%; height: 100%; border-radius: 1.5px; background: #fff; }
/* A alternativa de pulmão continua rotulada: cor sozinha não diria que aquele
   endereço atende a quantidade exata mas contraria a regra do picking. */
.cm-ia-pill { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; vertical-align: middle; white-space: nowrap; border: 1px solid #c7bdf5; background: #f5f3ff; color: #5b21b6; }
.cm-ia-pill.is-alt { border-color: #fde68a; background: #fffbeb; color: #8a5a12; }

/* Atalho do rodapé para o painel de pulmão (só existe quando há pulmão em jogo). */
.cm-pulm-link { margin-left: 8px; font-family: inherit; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid #fde68a; background: #fffbeb; color: #8a5a12; cursor: pointer; }
.cm-pulm-link:hover { background: #fef3c7; border-color: #fcd34d; }

/* Finalidade da O.C. — mesmo componente do "Tipo de data" da tela de pesquisa
   (.oc-toggle). O campo não estica junto dos combos: o toggle tem largura própria,
   e deixá-lo em flex:1 abriria um vão entre os dois botões e o Depósito. */
.cm-field-fin { flex: 0 0 auto; min-width: 0; }
.cm-fin-toggle { height: 32px; }
.cm-fin-toggle button { height: 100%; padding: 0 16px; font-weight: 600; }
/* Quebra O.C. por Pedido: rótulo mais longo que o toggle (Sim|Não) — sem isso o
   toggle herda o align-items:stretch da coluna (.cm-field) e vira tão largo quanto
   o rótulo, com "Não" esticado por espaço morto em vez de ficar do tamanho de "Sim". */
.cm-field-quebra { align-items: center; }

/* ── Coleta modal: obrigatoriedade em evidência ──── */
.cm-dep select.cm-req-field, .cm-chips-box.cm-req-field { border-color: #d18f20 !important; background: #fffcf0 !important; }
.cm-dep select.cm-req-urgent, .cm-chips-box.cm-req-urgent { border-color: #c0473b !important; background: #fff8f7 !important; animation: cm-req-pulse 1.8s ease-in-out infinite; }
@keyframes cm-req-pulse { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px rgba(192,71,59,.18); } }
.cm-warn-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; background: #fff1f0; color: #c0473b; border: 1px solid #f3b6af; border-radius: 6px; padding: 2px 8px; animation: cm-warn-pulse 1.6s ease-in-out infinite; }

/* ── Coleta modal: responsividade mobile ────────────────────────────── */
@media (max-width: 768px) {
  .cm-dep { flex-direction: column; }
  .cm-field { width: 100%; }
  .coleta-overlay { padding: 8px; }
  .coleta-modal { max-height: 95dvh; overflow-y: auto; }
}

/* ── Coleta modal: múltiplos endereços por produto ─────────────────── */
/* Teto de largura: com muitos vínculos as pílulas empurrariam a coluna e
   espremeriam as demais. Passando do teto, as pílulas rolam dentro da célula
   (.cm-allocs-scroll) em vez de alargar o grid. */
.cm-alloc-col { overflow: hidden; min-width: 0; width: 240px; max-width: 240px; }
/* wrapper: status fixo + faixa de pílulas com scroll horizontal */
.cm-allocs-wrap { display: flex; align-items: center; gap: 6px; overflow: hidden; min-width: 0; }
.cm-allocs-scroll { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
.cm-allocs-scroll::-webkit-scrollbar { height: 3px; }
.cm-allocs-scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
/* Mesmo motivo do .oc-rotas: 3px de barra não comportam a seta do padrão. */
.cm-allocs-scroll::-webkit-scrollbar-button { display: none; }
.cm-alloc-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 4px; padding: 2px 7px; font-size: 13px;color: var(--gray-700); white-space: nowrap; flex-shrink: 0; }
.cm-alloc-pill b { color: var(--gray-900); font-variant-numeric: tabular-nums; }
.cm-allocs-wrap.ok   .cm-alloc-pill { background: rgba(46,158,94,.10); border-color: rgba(46,158,94,.30); color: #1f7a47; }
.cm-allocs-wrap.ok   .cm-alloc-pill b { color: #1f7a47; }
.cm-allocs-wrap.partial .cm-alloc-pill { background: rgba(184,134,11,.08); border-color: rgba(184,134,11,.25); color: #8a6200; }
.cm-allocs-wrap.over .cm-alloc-pill { background: rgba(192,71,59,.08); border-color: rgba(192,71,59,.25); color: #8a2a20; }
.cm-alloc-ok   { color: #2e9e5e; font-weight: 700; margin-left: 3px; }
.cm-alloc-over { color: #c0473b; font-weight: 700; margin-left: 3px; }
.cm-saldo-small { font-size: 11px; font-weight: 600; color: #b8860b; margin-left: 4px; }

/* indicador "faltam / alocado" no sub-header do Grid 2 */
.cm-saldo { font-size: 13px;font-weight: 700; color: #b8860b; }
.cm-saldo.zero { color: #2e9e5e; }
.cm-saldo.over { color: #c0473b; }

/* linha de endereço com excesso de alocação */
.cm-erow.over { background: rgba(192,71,59,.04); }
.cm-erow.over .cm-strong { color: #c0473b; }

/* campo de quantidade a alocar */
.cm-cinqtd { width: 120px; }
.cm-cin-qty { width: 100px; padding: 5px 8px; border: 1.5px solid var(--gray-300); border-radius: 6px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--gray-800); background: var(--white); }
.cm-cin-qty:focus { outline: none; border-color: #2fa4a9; box-shadow: 0 0 0 2.5px rgba(47,164,169,.15); }
.cm-cin-qty:disabled { background: var(--gray-50) !important; color: var(--gray-400); cursor: not-allowed; border-color: var(--gray-200); }
.cm-cin-qty.over { border-color: #c0473b !important; background: #fff8f7 !important; }
.cm-erow.used .cm-cin-qty:not(:disabled) { background: #b8d9f5; border-color: #4aaad8; }
.cm-sugestao-tag { display: block; margin-top: 5px; font-size: 9.5px; font-weight: 700; color: #2fa4a9; letter-spacing: .02em; line-height: 1.3; text-align: center; white-space: normal; }

/* ── Grid de endereços da O.C. (8 colunas, sem scroll horizontal) ─────
   table-layout: fixed + larguras em % = a tabela nunca ultrapassa a largura
   do modal (960px), então o .cm-grid-wrap não gera barra horizontal e as
   colunas crescem proporcionalmente quando o modal é maximizado.
   Larguras calibradas para que TODO cabeçalho caiba em uma única linha —
   "Qtd. Empenhada" é o mais largo (texto + ⓘ) e por isso leva a maior fatia.
   O line-height 1.15 fica como rede de segurança caso alguma fonte de
   fallback estoure e obrigue a quebra. */
.cm-grid.cm-grid-end { table-layout: fixed; }
.cm-grid.cm-grid-end thead th,
.cm-grid.cm-grid-end tbody td { padding: 8px 9px; }
.cm-grid.cm-grid-end thead th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
/* Endereço é a coluna mais larga porque empilha depósito e rua como sub-linhas
   (não existe coluna Rua neste grid). */
.cm-grid.cm-grid-end .ce-end  { width: 23%; }
/* colunas numéricas com padding menor: cada 2px devolvido ao texto é o que
   mantém "QUANTIDADE", "QTD. EMPENHADA" e "QTD. A ALOCAR" em uma linha */
.cm-grid.cm-grid-end .ce-qtd  { width: 11%; padding-left: 7px; padding-right: 7px; }
.cm-grid.cm-grid-end .ce-emp  { width: 16%; padding-left: 7px; padding-right: 7px; }
.cm-grid.cm-grid-end .ce-aloc { width: 13%; padding-left: 7px; padding-right: 7px; }
.cm-grid.cm-grid-end .ce-un   { width: 6%;  }
.cm-grid.cm-grid-end .ce-sun  { width: 9%;  }
.cm-grid.cm-grid-end .ce-oper { width: 13%; }
.cm-grid.cm-grid-end .ce-vinc { width: 9%;  }
/* endereço quebra em vez de vazar da célula (table-layout: fixed corta) */
.cm-grid.cm-grid-end tbody .ce-end { white-space: normal; overflow-wrap: anywhere; }
.cm-grid.cm-grid-end tbody .ce-un,
.cm-grid.cm-grid-end tbody .ce-sun { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* o input acompanha a coluna (a largura fixa de 100px estouraria em telas menores) */
.cm-grid.cm-grid-end .cm-cin-qty { width: 100%; min-width: 0; box-sizing: border-box; }
/* telas estreitas: volta ao layout automático e deixa o wrap rolar */
@media (max-width: 900px) {
  .cm-grid.cm-grid-end { table-layout: auto; min-width: 820px; }
}

/* ── Assistente de Endereços (wizard) ────────────────────────────────── */
.wiz { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 18px 22px; background: #d8e8ed; }
.wiz-head { position: relative; z-index: 30; display: flex; align-items: center; gap: 12px; flex: none; margin: -18px -22px 14px; padding: 14px 22px; background: linear-gradient(135deg, #003644 0%, #00232c 100%); box-shadow: 0 2px 10px rgba(0,54,68,.35); }
.wiz-max { flex-shrink: 0; width: 28px; height: 28px; border: none; background: none; cursor: pointer; color: var(--gray-500); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, color .15s; }
.wiz-max:hover { background: var(--gray-100); color: var(--green-dark); }
.wiz-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wiz.wiz-maximized { position: fixed; inset: 0; z-index: 500; background: #d8e8ed; padding: 18px 22px; }

/* ── Regra global: componentes aproveitam espaço extra quando maximizado ── */
/* Assistente de Endereços (wiz) */
.wiz.wiz-maximized .wiz-panel-solo { display: flex; flex-direction: column; overflow: hidden; }
.wiz.wiz-maximized .panel { flex: 1; min-height: 0; overflow: hidden; }
.wiz.wiz-maximized .panel-body { display: flex; flex-direction: column; overflow: hidden; }
.wiz.wiz-maximized .wiz-tree-wrap { flex: 1; min-height: 0; max-height: none; }
.wiz.wiz-maximized .rb-table { flex: 1; min-height: 0; overflow-y: auto; }
.wiz.wiz-maximized .rb-bar .wzfield { flex: 1; min-width: 0; }
/* Ordem de Coleta (tela cheia) */
.oc.oc-fs-maximized { display: flex; flex-direction: column; }
.oc.oc-fs-maximized .oc-body { flex: 1; min-height: 0; }
.oc.oc-fs-maximized .oc-left { display: flex; flex-direction: column; min-height: 0; }
.oc.oc-fs-maximized .oc-grid-wrap { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.oc.oc-fs-maximized .oc-right { overflow-y: auto; }
/* Modal de coleta */
.coleta-overlay.is-max .coleta-modal { display: flex; flex-direction: column; }
.coleta-overlay.is-max .cm-grids { flex: 1; min-height: 0; }
.coleta-overlay.is-max .cm-grid-wrap { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
/* Ocupação do Armazém: sem padding no container (conteúdo edge-to-edge com iframes) */
.ocup-wiz { padding: 0; }
.ocup-wiz .wiz-head { margin: 0; }
.ocup-wiz.wiz-maximized { padding: 0; }
/* Ocupação do Armazém — maximizado (root é .wiz, usa .wiz.wiz-maximized do padrão global) */
.wiz.wiz-maximized .ocup-body { flex: 1; min-height: 0; }
.wiz.wiz-maximized .ocup-center { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wiz.wiz-maximized .ocup-ruas-wrap { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.wiz-crumb { font-size: 13px;color: var(--gray-600); }
.wiz-crumb span { color: var(--gray-400); margin: 0 4px; }
.wiz-title { font-family: 'Saira', sans-serif; font-size: 23px; font-weight: 800; color: var(--green-dark); letter-spacing: -.01em; }
.wiz-sub { font-size: 13px;font-weight: 500; color: var(--gray-600); margin-left: 8px; }
/* wiz-head petrol — adapta texto e botões ao fundo escuro */
.wiz-head .wiz-crumb { color: rgba(255,255,255,.6); }
.wiz-head .wiz-crumb span { color: rgba(255,255,255,.35); }
.wiz-head .wiz-title { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.wiz-head .wiz-title::after { display: none; }
.wiz-head .wiz-sub { color: rgba(255,255,255,.65); }
.wiz-head .wms-close { background: rgba(255,255,255,.12); color: #fff; }
.wiz-head .wms-close:hover { background: rgba(192,71,59,.75); color: #fff; box-shadow: 0 0 0 3px rgba(192,71,59,.25); }
.wiz-head .wiz-max { color: rgba(255,255,255,.75); }
.wiz-head .wiz-max:hover { background: rgba(255,255,255,.15); color: #fff; }
.wiz-head .oc-help-btn { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.wiz-head .oc-help:hover .oc-help-btn, .wiz-head .oc-help:focus-within .oc-help-btn { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); }
.wiz-body { flex: 1; min-height: 0; display: flex; gap: 16px; }
.wiz-steps { flex: 0 0 210px; display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); align-self: flex-start; }
.wiz-step { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; font-size: 13px; color: var(--gray-600); font-weight: 600; }
.wiz-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--gray-200); color: var(--gray-600); display: flex; align-items: center; justify-content: center; font-size: 13px;flex-shrink: 0; }
.wiz-step.active { background: rgba(47,164,169,.12); color: var(--green-dark); }
.wiz-step.active .wiz-step-n { background: #2fa4a9; color: #fff; }
.wiz-step.done { color: #2e9e5e; }
.wiz-step.done .wiz-step-n { background: #2e9e5e; color: #fff; }
.wiz-main { flex: 1; min-height: 0; display: flex; }
.wiz-panel { flex: 1; min-height: 0; overflow: auto; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.wiz-pnl-title { font-size: 15px; font-weight: 700; color: var(--green-dark); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-200); }
.wiz-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.wiz-radios { display: flex; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.wiz-radio { font-size: 13px; color: var(--gray-800); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.wiz-radio input { accent-color: #2fa4a9; }
.wiz-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wiz-bar .wms-field { min-width: 120px; }
.wiz-bar input { padding: 8px 10px; border: 1.5px solid var(--gray-400); border-radius: 8px; font-size: 13px; box-sizing: border-box; }
.wiz-bar input:focus { outline: none; border-color: #2fa4a9; box-shadow: 0 0 0 3px rgba(47,164,169,.15); }
.wiz-add { white-space: nowrap; }
.wiz-hint { font-size: 13px;color: var(--gray-600); margin-bottom: 10px; }
.wiz-grid-wrap { max-height: 44dvh; }
.wiz-ctr { text-align: center; width: 46px; }
.wiz-resumo { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; color: var(--gray-600); }
.wiz-resumo b { color: var(--green-dark); }
.wiz-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--gray-200); }
.wiz-info { font-size: 13px; color: var(--gray-600); }
.wiz-info b { color: var(--green-dark); }
.wiz-foot-actions { display: flex; gap: 10px; }
@media (max-width: 900px) {
  .wiz-body { flex-direction: column; }
  .wiz-steps { flex: none; flex-direction: row; overflow-x: auto; }
  .wiz-step span:last-child { white-space: nowrap; }
}

/* ── Wizard: animações + cor (polish) ───────────────────────────────── */
@keyframes wiz-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wiz-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes wiz-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,164,169,0); } 50% { box-shadow: 0 0 0 4px rgba(47,164,169,.18); } }

/* título com acento */
.wiz-title::after { content: ''; display: block; width: 48px; height: 3px; margin-top: 6px; border-radius: 3px; background: linear-gradient(90deg, #2fa4a9, #0a4d5e); }
.wiz-head .wiz-title::after { background: rgba(255,255,255,.35); }

/* sidebar de etapas em teal escuro com conector */
.wiz-steps { position: relative; background: linear-gradient(180deg, #04323d, #003644); border-color: #00232c; }
.wiz-step { color: #9fdfe6; transition: background .2s ease, color .2s ease; position: relative; }
.wiz-step:hover { background: rgba(255,255,255,.06); }
.wiz-step-n { background: rgba(255,255,255,.12); color: #cfeff2; transition: all .25s ease; }
.wiz-step.active { background: rgba(47,164,169,.22); color: #fff; animation: wiz-glow 2.2s ease-in-out infinite; }
.wiz-step.active .wiz-step-n { background: #2fa4a9; color: #06121a; box-shadow: 0 0 10px rgba(47,164,169,.7); transform: scale(1.06); }
.wiz-step.done { color: #7fe0b0; }
.wiz-step.done .wiz-step-n { background: #2e9e5e; color: #fff; animation: wiz-pop .3s ease; }

/* painel com entrada animada e título destacado */
.wiz-panel { background: linear-gradient(180deg, #ffffff, #fbfdfe); }
.wiz-panel > * { animation: wiz-fade-up .32s ease both; }
.wiz-pnl-title { background: linear-gradient(90deg, rgba(47,164,169,.10), transparent); border-left: 3px solid #2fa4a9; padding-left: 10px; border-bottom-color: rgba(47,164,169,.25); animation-delay: .02s; }
.wiz-bar, .wiz-form, .wiz-radios { animation-delay: .06s; }
.wiz-grid-wrap, .wiz-resumo { animation-delay: .1s; }

/* botão "+ Adicionar" com gradiente teal */
.wiz-add { background: linear-gradient(135deg, #2fa4a9, #0a4d5e); border: none; color: #fff; box-shadow: 0 4px 12px rgba(47,164,169,.3); transition: transform .15s ease, box-shadow .15s ease; }
.wiz-add:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(47,164,169,.42); }
.wiz-add:active { transform: translateY(0); }

/* "Finalizar" em verde (ação de conclusão) */
.wiz-finalizar { background: linear-gradient(135deg, #2e9e5e, #1f7a47) !important; border-color: #1f7a47 !important; }
.wiz-finalizar:hover { box-shadow: 0 8px 20px rgba(46,158,94,.4); transform: translateY(-1px); }

/* grids do wizard: cabeçalho colorido, hover e seleção */
.wiz-panel table.wms-grid thead th { background: linear-gradient(180deg, #eef6f7, #e4eff1); color: #0a4d5e; }
.wiz-panel table.wms-grid tbody tr { transition: background .12s ease; }
.wiz-panel table.wms-grid tbody tr:hover { background: #f3fafb; }
.wiz-panel table.wms-grid tbody tr.selected { background: rgba(47,164,169,.12); box-shadow: inset 3px 0 0 #2fa4a9; }
.wiz-panel table.wms-grid input[type="checkbox"] { accent-color: #2fa4a9; width: 15px; height: 15px; cursor: pointer; }

/* chips do resumo na finalização */
.wiz-resumo span { background: rgba(47,164,169,.10); border: 1px solid rgba(47,164,169,.25); padding: 6px 12px; border-radius: 999px; }

/* radios de tipo de endereçamento como "pílulas" */
.wiz-radio { background: var(--gray-50); border: 1.5px solid var(--gray-200); padding: 8px 14px; border-radius: 999px; transition: all .15s ease; }
.wiz-radio:hover { border-color: #2fa4a9; }
.wiz-radio:has(input:checked) { background: rgba(47,164,169,.12); border-color: #2fa4a9; color: var(--green-dark); font-weight: 600; }

/* dica em destaque suave */
.wiz-hint { background: rgba(47,164,169,.07); border-left: 3px solid #2fa4a9; padding: 8px 12px; border-radius: 0 8px 8px 0; }

/* barra de direcionamento (modos) */
.wiz-modes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; flex: none; }
.wiz-mode { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--gray-200); border-radius: 999px; background: var(--white); color: var(--gray-600); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s cubic-bezier(.22,1,.36,1); font-family: inherit; }
.wiz-mode svg { width: 15px; height: 15px; flex-shrink: 0; }
.wiz-mode:hover:not(.breve) { color: #064A5B; border-color: #0C5E72; transform: translateY(-1px); }
.wiz-mode.active { background: linear-gradient(135deg, #003644, #2E8B7E); border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(0,54,68,.30); }
.wiz-mode.breve { opacity: .6; cursor: not-allowed; }
.wiz-soon { font-size: 10px; font-weight: 700; color: #b8860b; background: #fff4e0; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }

/* ── Barra de modos O.I.: FAIXA (toolbar branca) com abas + ação ───────────
   Superfície branca própria que ancora tudo (nada flutua no fundo): à esquerda
   as abas de navegação com sublinhado teal deslizante; à direita a ação
   contextual da tela (botão "Motivos", só na Aprovação). */
/* Barra de navegação dos painéis (O.I., O.C. e O.R.): NÃO é um painel colorido —
   é uma faixa que ancora as abas (seletor segmentado, à esquerda) e a ação
   contextual (direita, quando houver — só a O.I. usa CTA).
   Consumidores: painel-oi.js, painel-oc.js e painel-or.js. */
.oi-modebar {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px; flex: none; padding: 8px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #eef6f9 100%);
  border: 1px solid #dbe9ec; border-radius: 14px;
  box-shadow: 0 2px 4px rgba(16,44,52,.04), 0 10px 22px -16px rgba(0,54,68,.26);
  animation: oiBarIn .7s cubic-bezier(.22,1,.36,1) both;
}
/* Brilho de varredura APENAS na borda: um facho petrol/teal corre pela moldura
   do painel claro (a máscara isola o anel de 1.5px da borda). Roda uma vez na
   entrada — o painel em si não é pintado. */
.oi-modebar::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(0,54,68,.55) 46%,
    rgba(47,164,169,.95) 50%,
    rgba(0,54,68,.55) 54%,
    transparent 62%);
  background-size: 220% 100%; background-position: 170% 0; opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: oiBarScan 4.5s cubic-bezier(.4,0,.2,1) .25s 1 both;
}
@keyframes oiBarIn { from { opacity: 0; transform: translateY(-12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes oiBarScan { 0% { opacity: 0; background-position: 170% 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; background-position: -70% 0; } }
@media (prefers-reduced-motion: reduce) {
  .oi-modebar { animation: none; }
  .oi-modebar::before { animation: none; opacity: 0; }
  .oi-tab-ink { transition: none; }
}

/* Entrada em cascata dos blocos ao trocar de aba/modo na O.I.
   --oi-dx (deslize horizontal direcional) e animation-delay vêm do JS por bloco. */
@keyframes oi-view-in {
  from { opacity: 0; transform: translate(var(--oi-dx, 0px), 16px) scale(.99); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
.oi-anim { animation: oi-view-in .5s cubic-bezier(.22, 1, .36, 1) both; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .oi-anim { animation: none !important; } }

/* Seletor segmentado no painel claro: abas em tom escuro; a pílula petrol
   (.oi-tab-ink) desliza atrás da aba ativa — left/width vêm do JS (syncModes). */
.oi-tabs { position: relative; display: flex; align-items: stretch; gap: 4px; padding: 4px; border-radius: 12px; background: none; }
.oi-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; appearance: none; border: 0; background: none; font-family: inherit; cursor: pointer; padding: 6px 14px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--gray-600); letter-spacing: .01em; white-space: nowrap; border-radius: 9px; transition: color .22s ease; }
.oi-tab svg { width: 15px; height: 15px; opacity: .72; transition: opacity .18s, transform .18s, color .18s; }
.oi-tab:hover:not(:disabled):not(.active) { color: #0C5E72; }
.oi-tab:hover:not(:disabled) svg { opacity: 1; }
.oi-tab.active { color: #fff; font-weight: 700; }
.oi-tab.active svg { opacity: 1; color: #fff; transform: scale(1.04); }
.oi-tab:disabled { color: #7a9198; cursor: not-allowed; }
.oi-tab:disabled svg { opacity: .5; }
.oi-tab:focus-visible { outline: 2px solid #2fa4a9; outline-offset: 2px; border-radius: 9px; }
.oi-tab-ink { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; height: auto; border-radius: 9px; background: linear-gradient(135deg, #0a4d5e 0%, #00232c 100%); box-shadow: 0 4px 12px -2px rgba(0,54,68,.45), inset 0 1px 0 rgba(255,255,255,.12); opacity: 0; z-index: 0; pointer-events: none; transition: left .34s cubic-bezier(.34,1.35,.44,1), width .34s cubic-bezier(.34,1.35,.44,1), opacity .22s; }

/* Botão primário — idêntico ao .por-btn-buscar (petrol sólido) */
.oi-tab-cta { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border: none; border-radius: 8px; background: linear-gradient(135deg, #0a4d5e, #00232c); color: #fff; font: 700 13px var(--fbody); letter-spacing: .01em; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 14px rgba(0,54,68,.28); transition: opacity .14s, transform .14s cubic-bezier(.22,1,.36,1), box-shadow .18s; flex: none; }
.oi-tab-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,54,68,.32); opacity: .96; }
.oi-tab-cta:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,54,68,.26); }
.oi-tab-cta:focus-visible { outline: 2px solid #2fa4a9; outline-offset: 2px; }
.oi-tab-cta.active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 4px 14px rgba(0,54,68,.26); }
.oi-tab-cta svg { width: 15px; height: 15px; flex: none; }
.oi-tab-cta--ghost { position: relative; overflow: hidden; background: #fff; color: #003644; box-shadow: inset 0 0 0 1.5px var(--gray-300); }
.oi-tab-cta--ghost:hover { background: var(--gray-50); box-shadow: inset 0 0 0 1.5px #0a4d5e; opacity: 1; }
.oi-tab-cta--ghost svg { color: #0a4d5e; }
/* Reflexo/varredura: roda ao ficar visível (a cada entrada na Aprovação) para
   sinalizar a existência do botão. Reinicia sozinho porque o display none->flex
   recria a animação. */
.oi-tab-cta--ghost > * { position: relative; z-index: 1; }
.oi-tab-cta--ghost::after {
  content: ""; position: absolute; top: 0; left: 0; width: 55%; height: 100%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(47,164,169,.28) 45%, rgba(255,255,255,.65) 52%, rgba(47,164,169,.28) 60%, transparent 100%);
  transform: translateX(-220%) skewX(-18deg);
  animation: oiMotivosShine 3s ease-in-out 3;
}
@keyframes oiMotivosShine {
  0%, 30% { transform: translateX(-220%) skewX(-18deg); }
  65%     { transform: translateX(300%)  skewX(-18deg); }
  100%    { transform: translateX(300%)  skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .oi-tab-cta--ghost::after { animation: none; display: none; }
}

/* conteúdo dos modos ocupa o restante */
.wiz-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wiz-content .wiz-body { flex: 1; min-height: 0; }
.wiz-panel-solo { flex: 1; min-height: 0; overflow: auto; }

/* home (direcionamentos) */
.wiz-home { animation: wiz-fade-up .3s ease both; }
.wiz-home-msg { font-size: 14px; color: var(--gray-600); margin-bottom: 18px; }
.wiz-home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.wiz-home-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow); cursor: pointer; text-align: left; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.wiz-home-card:hover:not(.breve) { transform: translateY(-3px); border-color: #2fa4a9; box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.wiz-home-card.breve { opacity: .55; cursor: not-allowed; }
.whc-ico { font-size: 30px; }
.whc-t { font-size: 15px; font-weight: 700; color: var(--green-dark); }
.whc-d { font-size: 13px;color: var(--gray-600); }

/* ações do Gerenciar / Classificação */
.wiz-acoes { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--gray-200); }
.wiz-acoes-lbl { font-size: 13px;color: var(--gray-600); margin-right: auto; }
/* selects de categoria e de estrutura física por linha (Classificação) */
.wiz-cat-sel { padding: 5px 8px; border: 1.5px solid var(--gray-300); border-radius: 7px; font-size: 12.5px; color: var(--gray-800); background: var(--white); cursor: pointer; }
.wiz-cat-sel:focus { outline: none; border-color: #2fa4a9; box-shadow: 0 0 0 3px rgba(47,164,169,.15); }
.cl-est-sel { min-width: 150px; }
/* Linha com categoria e/ou estrutura pendente de gravação — classe própria da
   Classificação: no Gerenciar, .wiz-changed já significa "endereço ocupado". */
.rb-table tbody tr.cl-changed { background: #fff8e6; }
.rb-table tbody tr.cl-changed:hover { background: #fff3d4; }
.rb-table tbody tr.cl-changed.sel { background: rgba(47,164,169,.16); }
/* Rodapé da Classificação: ações em lote de categoria e de estrutura física, separadas
   por um divisor — são dois grupos de ação distintos sobre a mesma seleção. */
.cl-foot { flex-wrap: wrap; row-gap: 8px; }
.cl-foot-div { width: 1px; height: 22px; background: var(--gray-300); flex: none; }
.cl-est-lote { height: 32px; min-width: 170px; padding: 0 10px; border: 1.5px solid var(--gray-400); border-radius: 8px; background: var(--white); color: var(--gray-800); font: 13px var(--fbody); cursor: pointer; }
.cl-est-lote:focus { outline: none; border-color: var(--tl); box-shadow: 0 0 0 3px rgba(47,164,169,.14); }
.wiz-panel-solo table.wms-grid tbody tr.wiz-changed { background: #fff8e6; }
.wiz-panel-solo table.wms-grid tbody tr.wiz-changed.selected { background: rgba(47,164,169,.12); }

/* árvore de auditoria */
.wiz-tree-wrap { border: 1px solid #a8cdd6; border-radius: 10px; padding: 12px 16px; max-height: 52dvh; overflow: auto; background: linear-gradient(160deg, #deedf2 0%, #eaf4f7 100%); box-shadow: inset 0 1px 5px rgba(0,54,68,.07); }
.wiz-tree, .wiz-tchildren { list-style: none; margin: 0; padding: 0; }
.wiz-tchildren { margin-left: 22px; padding-left: 14px; position: relative; }
.wiz-tchildren::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 14px; border-left: 1.5px solid rgba(0,84,102,.28); }
.wiz-tchildren > .wiz-tnode { position: relative; }
.wiz-tchildren > .wiz-tnode::before { content: ''; position: absolute; left: -14px; top: 16px; width: 14px; border-top: 1.5px solid rgba(0,84,102,.28); }
.wiz-trow { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 7px; font-size: 13px; color: var(--gray-800); transition: background .12s; }
.wiz-trow.has-kids { cursor: pointer; }
.wiz-tree > .wiz-tnode > .wiz-trow.has-kids { background: rgba(0,84,102,.08); border: 1px solid rgba(0,84,102,.12); margin-bottom: 3px; }
.wiz-trow:hover { background: rgba(0,84,102,.13) !important; border-color: rgba(0,84,102,.2) !important; }
.wiz-ttog { width: 16px; color: #2fa4a9; font-size: 13px;transition: transform .18s ease; flex-shrink: 0; text-align: center; line-height: 1; }
.wiz-tnode.collapsed > .wiz-trow .wiz-ttog { transform: rotate(-90deg); }
.wiz-tnode.collapsed > .wiz-tchildren { display: none; }
.wiz-ticon { width: 13px; height: 13px; flex-shrink: 0; flex-basis: 13px; }
[data-depth="0"] > .wiz-trow .wiz-ticon { color: #004f62; opacity: 1; }
[data-depth="1"] > .wiz-trow .wiz-ticon { color: #1a7a8a; opacity: .95; }
[data-depth="2"] > .wiz-trow .wiz-ticon { color: #2fa4a9; opacity: .9; }
[data-depth="3"] > .wiz-trow .wiz-ticon { color: #4bbec7; opacity: .9; }
[data-depth="4"] > .wiz-trow .wiz-ticon, .wiz-ticon-leaf { color: #6ea8b5; opacity: .85; }
.wiz-tlabel { white-space: nowrap; }
.wiz-trow.has-kids .wiz-tlabel { font-weight: 600; color: #004f62; }
.wiz-trow:not(.has-kids) .wiz-tlabel { color: #2c5c6e; font-size: 12.5px; }
.wiz-panel-solo table.wms-grid thead th { background: linear-gradient(180deg, #eef6f7, #e4eff1); color: #0a4d5e; }
.wiz-panel-solo table.wms-grid tbody tr:hover { background: #f3fafb; }
.wiz-panel-solo table.wms-grid tbody tr.selected { background: rgba(47,164,169,.12); box-shadow: inset 3px 0 0 #2fa4a9; }
.wiz-panel-solo .wms-grid input[type="checkbox"] { accent-color: #2fa4a9; width: 15px; height: 15px; cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════════
   Assistente de Endereços — DESIGN PADRÃO (do exemplo, recolorido #003644)
   ════════════════════════════════════════════════════════════════════════ */
.wiz {
  --tl: #2fa4a9; --tl-d: #1c7b80; --tl-dd: #003644; --tl-l: #7fd4d9;
  --tl-100: rgba(47,164,169,.12); --tl-18: rgba(47,164,169,.18);
  --nv: #003644; --nv2: #00232c;
  --grad-teal: linear-gradient(135deg, #003644 0%, #14708a 55%, #2fa4a9 100%);
  --grad-navy: linear-gradient(160deg, #003644 0%, #00232c 100%);
  --sh-brand: 0 14px 32px rgba(47,164,169,.28);
  --fdisp: "Saira", "Segoe UI", system-ui, sans-serif;
  --fbody: "Inter", "Segoe UI", system-ui, sans-serif;
  --fmono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  font-family: var(--fbody);
}
.wiz-title { font-family: var(--fdisp); font-weight: 800; }

/* abas (modos) como pílulas */
.wiz-modes { gap: 8px; }
.wiz-mode { font-family: var(--fbody); }
.wiz-mode.active { background: var(--grad-teal); border-color: transparent; color: #fff; box-shadow: var(--sh-brand); }

/* ── layout Criar: rail + painel ─────────────────────────────────────── */
.wiz-cri { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--asst-rail-w, 260px) 6px 1fr; gap: 10px; }
.wiz-rail { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.rail-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow); padding: 10px; }

/* stepper vertical */
.steps { position: relative; padding: 6px; list-style: none; }
.steps .track { position: absolute; left: 28px; top: 34px; bottom: 34px; width: 2px; background: var(--gray-200); border-radius: 2px; }
.steps .track-fill { position: absolute; left: 28px; top: 34px; width: 2px; background: var(--grad-teal); border-radius: 2px; transition: height .32s var(--ease); }
.step { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px; cursor: pointer; transition: background .2s var(--ease); }
.step:hover { background: rgba(47,164,169,.06); }
.step .dot { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--white); color: var(--gray-500); border: 2px solid var(--gray-300); transition: all .2s var(--ease); }
.step .dot svg { width: 15px; height: 15px; }
.step .lbl { display: flex; flex-direction: column; line-height: 1.25; }
.step .lbl b { font-size: 13.5px; font-weight: 600; color: var(--gray-800); }
.step .lbl small { font-size: 11px; color: var(--gray-500); }
.step.done .dot { background: var(--tl-dd); border-color: var(--tl-dd); color: #fff; }
.step.current { background: rgba(47,164,169,.08); }
.step.current .dot { border-color: var(--tl); background: var(--tl-100); color: var(--tl-d); box-shadow: 0 0 0 4px rgba(47,164,169,.16); }
.step.current .lbl b { color: var(--tl-dd); }
.step.locked { opacity: .5; cursor: not-allowed; }

/* painel de prévia ao vivo */
.live { position: relative; overflow: hidden; background: var(--grad-navy); color: #fff; border-radius: 14px; padding: 16px; box-shadow: var(--shadow-sm); }
.live::after { content: ''; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(47,164,169,.35), transparent 70%); pointer-events: none; }
.live .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-l); }
.live .mask { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; min-height: 26px; position: relative; z-index: 1; }
.live .seg { font-family: var(--fmono); font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 7px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); color: var(--tl-l); animation: segIn .32s var(--ease) both; }
.live .seg.empty { color: rgba(255,255,255,.35); border-style: dashed; background: transparent; }
.live .total { font-family: var(--fdisp); font-weight: 900; font-size: 38px; line-height: 1; letter-spacing: -.02em; background: linear-gradient(135deg, #7fd4d9, #2fa4a9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.live .total-lbl { font-size: 11px; color: rgba(255,255,255,.6); }
.live .breakdown { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; font-size: 10.5px; color: rgba(255,255,255,.55); }
.live .breakdown b { color: #fff; font-weight: 700; }
.live .breakdown .x { opacity: .5; }

/* painel do passo */
.panel { display: flex; flex-direction: column; min-height: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--gray-200); flex: none; }
.panel-head .hicon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--tl-100); color: var(--tl-d); flex-shrink: 0; }
.panel-head .hicon svg { width: 18px; height: 18px; }
.panel-head .ht { line-height: 1.2; }
.panel-head .ht h2 { font-family: var(--fdisp); font-weight: 800; font-size: 16px; color: var(--tl-dd); margin: 0; }
.panel-head .ht p { margin: 2px 0 0; font-size: 11.5px; color: var(--gray-600); }
.panel-head .step-tag { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-d); background: var(--tl-100); padding: 4px 10px; border-radius: 999px; }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.step-view { animation: stepIn .32s var(--ease) both; }
.step-view.back { animation-name: stepInBack; }
.panel-foot { display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-top: 1px solid var(--gray-200); flex: none; }
.foot-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--tl-100); color: var(--tl-dd); font-weight: 700; padding: 5px 11px; border-radius: 999px; font-size: 12px; }
.foot-pill .n { font-family: var(--fdisp); font-weight: 900; }
.btn-ghost { background: transparent; border: 1px solid var(--gray-300); color: var(--gray-600); border-radius: 8px; font-weight: 600; font-size: 13px; padding: 8px 18px; cursor: pointer; transition: all .12s; }
.btn-ghost:hover { border-color: var(--tl); color: var(--tl-d); }
.btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.btn-next { background: var(--tl-dd); color: #fff; border: 0; border-radius: 8px; font-weight: 700; font-size: 13px; padding: 8px 20px; cursor: pointer; box-shadow: var(--sh-brand); transition: all .12s; }
.btn-next:hover:not(:disabled) { background: var(--tl-d); transform: translateY(-1px); }
.btn-next:disabled { background: var(--gray-300); color: var(--gray-500); box-shadow: none; cursor: not-allowed; }

/* passo 1 — segmented toggle + form */
.seg-toggle { display: inline-flex; position: relative; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px; padding: 4px; margin-bottom: 22px; }
.seg-toggle button { position: relative; z-index: 1; border: 0; background: transparent; font: 600 13px var(--fbody); padding: 6px 16px; border-radius: 999px; color: var(--gray-600); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: color .2s; }
.seg-toggle button.active { color: var(--tl-dd); }
.seg-toggle .thumb { position: absolute; top: 4px; bottom: 4px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-sm); transition: all .2s var(--ease); z-index: 0; }
.seg-toggle .rad { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
.seg-toggle button.active .rad::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tl); }
.wzform { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 18px; }
.wzfield { display: flex; flex-direction: column; }
.wzfield label { font-size: 11.5px;font-weight: 600; color: var(--gray-600); margin-bottom: 5px; }
.wzfield label .req { color: #c0473b; margin-left: 2px; }
.wzfield .ctl { position: relative; }
.wzfield input, .wzfield select { width: 100%; font: 13px var(--fbody); padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--white); color: var(--gray-800); }
.wzfield select { appearance: none; cursor: pointer; padding-right: 30px; }
.wzfield input:focus, .wzfield select:focus { outline: none; border-color: var(--tl); box-shadow: 0 0 0 3px rgba(47,164,169,.14); }
.wzfield .unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px;color: var(--gray-500); pointer-events: none; }
.form-hint { margin-top: 20px; display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 10px; background: var(--tl-100); border: 1px solid rgba(47,164,169,.25); font-size: 12.5px; color: var(--gray-700); line-height: 1.5; }

/* RangeBuilder (passos 2–5) */
.rb-bar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--gray-200); }
.rb-bar .wzfield { min-width: 120px; }
.stepper-num { display: flex; align-items: stretch; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; background: var(--white); }
.stepper-num input { border: 0; text-align: center; width: 62px; padding: 7px 4px; background: transparent; font: 13px var(--fbody); }
.stepper-num input:focus { outline: none; }
.stepper-num button { border: 0; width: 28px; background: var(--gray-100); color: var(--gray-600); font-size: 14px; cursor: pointer; display: grid; place-items: center; transition: all .12s; }
.stepper-num button:hover { background: var(--tl-100); color: var(--tl-d); }
.btn-add { background: var(--tl-dd); color: #fff; border: 0; border-radius: 8px; font: 700 13px var(--fbody); padding: 0 16px; height: 32px; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); transition: all .12s; }
.btn-add:hover { background: var(--tl-d); transform: translateY(-1px); }
.rb-toolbar { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; min-height: 32px; }
.rb-toolbar .cnt { font-size: 12.5px; color: var(--gray-600); }
.rb-toolbar .cnt b { color: var(--tl-dd); font-weight: 700; }
.btn-del2 { margin-left: auto; background: transparent; border: 1px solid var(--gray-200); color: var(--gray-600); border-radius: 10px; font: 600 12.5px var(--fbody); padding: 8px 14px; cursor: pointer; transition: all .12s; }
.btn-del2:hover:not(:disabled) { color: #c0473b; border-color: #c0473b; }
.btn-del2:disabled { opacity: .4; cursor: not-allowed; }
.btn-excel { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; background: transparent; border: 1px solid #1a7a3a; color: #1a7a3a; border-radius: 10px; font: 600 12.5px var(--fbody); padding: 8px 14px; cursor: pointer; transition: all .14s; }
.btn-excel svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-excel:hover:not(:disabled) { background: #1a7a3a; color: #fff; box-shadow: 0 3px 10px rgba(26,122,58,.25); }
.btn-excel:disabled { opacity: .4; cursor: not-allowed; }
.rb-table { border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.rb-table table { width: 100%; border-collapse: collapse; }
.rb-table thead th { background: var(--gray-50); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-500); font-weight: 700; text-align: left; padding: 8px 10px; }
.rb-table tbody td { padding: 7px 10px; border-top: 1px solid var(--gray-100); font-size: 13px; color: var(--gray-800); }
/* content-visibility: navegadores que suportam (Chrome/Edge recentes) pulam
   layout/paint das linhas fora da área visível — com listas de milhares de
   registros (ex.: Assistente de Endereços) é isso que evita o travamento da
   rolagem. contain-intrinsic-size estima a altura da linha (~33px, ver escala
   de densidade) para não haver salto de layout enquanto ela não é medida.
   Em navegadores sem suporte, a regra é ignorada e o grid renderiza normalmente. */
.rb-table tbody tr { transition: background .12s; animation: rowIn .2s var(--ease) both; content-visibility: auto; contain-intrinsic-size: auto 33px; }
.rb-table tbody tr:hover { background: rgba(47,164,169,.05); }
/* Linha-espaçadora da virtualização (Assistente de Endereços): representa o bloco de
   registros fora da janela renderizada — sem hover, sem animação de entrada, sem borda. */
.rb-table tbody tr.rb-spacer { pointer-events: none; animation: none; transition: none; }
.rb-table tbody tr.rb-spacer:hover { background: transparent; }
/* Grid virtualizado (Assistente de Endereços, etapas Ruas/Colunas/Andares/Aptos.):
   toda rolagem recria as linhas da janela visível, então a entrada com fade
   (rowIn) replicava a cada redesenho e piscava. Aqui a linha nunca é "nova" de
   verdade — é a mesma posição sendo redesenhada — por isso a animação some. */
.rb-table.rb-virtual tbody tr { animation: none; }
.rb-table tbody tr.sel { background: rgba(47,164,169,.10); }
.rb-table .code { font-family: var(--fmono); font-weight: 600; color: var(--tl-dd); }
.rb-table .pre { color: var(--gray-600); }
.rb-ctr { width: 46px; text-align: center; }

/* ── Gerenciar Endereços: linha expansível com os produtos do endereço ──────
   Só endereço com MAIS DE UM produto expande; com um só a linha segue como
   sempre foi. O espaçador ocupa a mesma largura nas linhas que não abrem, para
   a coluna do endereço começar sempre no mesmo ponto. */
.ge-exp-col { width: 34px; text-align: center; }
.rb-table tbody td.ge-exp-col { padding: 4px 0; }
.ge-exp {
  width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tl-dd); border-radius: 5px; transition: background .15s, transform .2s;
}
.wiz .ge-exp svg { width: 13px; height: 13px; }
.ge-exp:hover { background: var(--gray-200); }
.ge-exp.is-open { transform: rotate(90deg); }
.ge-exp-ph { display: inline-block; width: 22px; height: 22px; }
.rb-table tbody tr.ge-row-multi { cursor: pointer; }
/* a linha-filha não é selecionável, então não acompanha o hover da lista */
.rb-table tbody tr.ge-det:hover { background: transparent; }
.rb-table tbody tr.ge-det > td { padding: 0; border-top: none; background: var(--gray-50); }
.ge-det-in { padding: 8px 12px 10px 46px; }
.ge-subtable {
  width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden;
}
.ge-subtable th {
  background: var(--gray-100); color: var(--gray-600); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 6px 10px;
}
.ge-subtable td { padding: 6px 10px; border-top: 1px solid var(--gray-200); color: var(--gray-800); }
.ge-subtable tbody tr:first-child td { border-top: none; }
.ge-subtable th.num, .ge-subtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ge-subtable .ge-sub-desc { color: var(--gray-600); }
.ge-sub-na { color: var(--gray-400); }
.rb-empty { padding: 40px 20px; text-align: center; color: var(--gray-500); }
.rb-empty .ring { width: 58px; height: 58px; border-radius: 50%; background: var(--tl-100); color: var(--tl-d); display: grid; place-items: center; margin: 0 auto 12px; }
.rb-empty b { display: block; font-size: 14px; color: var(--gray-600); margin-bottom: 4px; }
.rb-empty p { font-size: 12.5px; max-width: 320px; margin: 0 auto; line-height: 1.5; }

/* checkbox custom */
.cbx { position: relative; display: inline-flex; cursor: pointer; vertical-align: middle; }
.cbx input { position: absolute; opacity: 0; width: 18px; height: 18px; cursor: pointer; margin: 0; }
.cbx .box { width: 18px; height: 18px; border: 2px solid var(--gray-300); border-radius: 5px; background: var(--white); transition: all .12s; }
/* wizard: checkboxes com borda petrol para melhor contraste no fundo tintado */
.wiz .cbx .box { border: 1.5px solid #003644; background: #ddeef4; }
.wiz .cbx:hover .box { border-color: #003644; background: #c8e3ec; }
.cbx input:checked + .box { background: var(--tl); border-color: var(--tl); }
.cbx input:checked + .box::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cbx input:indeterminate + .box { background: var(--tl); border-color: var(--tl); }
.cbx input:indeterminate + .box::after { content: ''; position: absolute; left: 3px; top: 7px; width: 10px; height: 2px; background: #fff; }
.rb-rm { background: transparent; border: 0; color: var(--gray-500); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; display: inline-grid; place-items: center; }
.rb-rm:hover { background: #fce9e9; color: #c0473b; }

/* finalização */
.fin-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; }
.bignum { grid-column: span 2; position: relative; overflow: hidden; background: var(--grad-navy); color: #fff; border-radius: 14px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; }
.bignum::after { content: ''; position: absolute; right: -30px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(47,164,169,.28), transparent 70%); }
.bignum .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-l); }
.bignum .big { font-family: var(--fdisp); font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -.02em; margin-top: 6px; }
.bignum .big .u { font-size: 20px; color: rgba(255,255,255,.6); margin-left: 8px; }
.bignum .formula { text-align: right; font-size: 12.5px; color: rgba(255,255,255,.7); line-height: 1.7; position: relative; z-index: 1; }
.bignum .formula b { color: #fff; font-family: var(--fmono); }
.sum-card { border: 1px solid var(--gray-200); border-radius: 14px; padding: 16px 18px; background: var(--gray-50); }
.sum-card .sh { display: flex; align-items: center; gap: 8px; font-size: 13px;font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 12px; }
.sum-card .sh svg { width: 16px; height: 16px; color: var(--tl); }
.sum-rows { display: flex; flex-direction: column; gap: 9px; }
.sum-rows .r { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.sum-rows .r .k { color: var(--gray-600); }
.sum-rows .r .v { font-weight: 600; color: var(--tl-dd); }
.sum-rows .r .v.mono { font-family: var(--fmono); }
.preview-list { grid-column: span 2; display: flex; flex-direction: column; min-height: 0; }
.preview-list .ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.preview-list .ph b { font-size: 13px; color: var(--tl-dd); }
.preview-list .ph span { font-size: 13px;color: var(--gray-500); }
.chips-flow { display: flex; flex-wrap: wrap; gap: 7px; max-height: 140px; overflow: hidden; position: relative; }
.chips-flow.fade::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(to top, var(--white), transparent); pointer-events: none; }
.chips-flow .ac { font-family: var(--fmono); font-size: 13px;padding: 6px 11px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-600); animation: segIn .2s var(--ease) both; }
.chips-flow .ac .h { color: var(--tl-d); font-weight: 700; }

/* tela de sucesso */
.done-overlay { position: absolute; inset: 0; background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; z-index: 5; border-radius: 14px; animation: fadeIn .32s var(--ease) both; }
.done-overlay .ck { width: 96px; height: 96px; border-radius: 50%; background: var(--tl-100); display: grid; place-items: center; color: var(--tl-d); position: relative; }
.done-overlay .ck::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--tl-l); animation: ckRing .7s var(--ease) both; }
.done-overlay .ck svg { width: 46px; height: 46px; animation: ckPop .5s var(--ease) .12s both; }
.done-overlay h2 { font-family: var(--fdisp); font-weight: 800; font-size: 28px; color: var(--tl-dd); }
.done-overlay p { font-size: 14px; color: var(--gray-600); max-width: 400px; }
.done-overlay .acts { display: flex; gap: 12px; margin-top: 8px; }

@keyframes stepIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes stepInBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes segIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ckRing { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ckPop { from { transform: scale(0); } to { transform: scale(1); } }

@media (max-width: 1180px) {
  .wiz-cri { grid-template-columns: 1fr; }
  .wiz-cri .split-resizer { display: none; }
  .wiz-rail { flex-direction: row; }
  .rail-card { flex: 1; }
  .live { width: 280px; flex-shrink: 0; }
  .wzform { grid-template-columns: repeat(2, 1fr); }
  .fin-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(0, 1fr); }
  .bignum, .preview-list { grid-column: auto; }
}
@media (max-width: 768px) {
  .wiz-cri { grid-template-columns: 1fr; flex-direction: column; }
  .split-resizer { display: none; }
  .wiz-rail { width: 100% !important; min-width: unset !important; max-width: 100% !important; }
}
@media (max-width: 480px) {
  .wzfield { max-width: 100% !important; width: 100%; flex: 1 1 100%; }
  .wzform { grid-template-columns: 1fr; }
  .rb-bar { flex-wrap: wrap; }
  .wiz .rb-gen .wzfield { width: 100%; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .step-view, .step-view.back, .live .seg, .rb-table tbody tr, .chips-flow .ac,
  .done-overlay, .done-overlay .ck::before, .done-overlay .ck svg, .steps .track-fill {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ── Assistente: ajustes de ícones/escala (SVGs inline sem width/height) ── */
.wiz svg { width: 16px; height: 16px; flex-shrink: 0; }
.wiz .step .dot svg { width: 15px; height: 15px; }
.wiz .panel-head .hicon svg { width: 22px; height: 22px; }
.wiz .rb-empty .ring svg { width: 26px; height: 26px; }
.wiz .done-overlay .ck svg { width: 46px; height: 46px; }
.wiz .btn-add svg, .wiz .btn-next svg { width: 17px; height: 17px; }
.wiz .btn-del2 svg, .wiz .foot-pill svg, .wiz .form-hint svg, .wiz .sum-card .sh svg { width: 16px; height: 16px; }
.wiz .rb-rm svg { width: 15px; height: 15px; }
/* botões com ícone alinhado ao texto */
.wiz .btn-add, .wiz .btn-next, .wiz .btn-del2, .wiz .foot-pill { display: inline-flex; align-items: center; gap: 8px; }
.wiz .btn-add { justify-content: center; }
.wiz .rb-rm { display: inline-grid; place-items: center; }
.wiz .form-hint { align-items: center; }

/* abas (modos) — pílulas mais sóbrias */
.wiz-modes { gap: 8px; margin-bottom: 14px; }
.wiz-mode { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.wiz-mode.active { background: var(--grad-teal); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(47,164,169,.28); }

/* Linhas read-only (existentes no banco) na tabela de expansão */
.wiz .ex-ro { background: var(--gray-50); }
.wiz .ex-ro td { color: var(--gray-500); font-style: italic; }
.wiz .ex-ro td .code, .wiz .ex-ro td .pre { color: var(--gray-400); }
.wiz .ex-lock-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--gray-400); }
.wiz .ex-ro-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* Linha de andar novo (intermediário — aguardando apto) */
.wiz .ex-new { background: #f4fdf6; }
.wiz .ex-new td { color: var(--gray-700); font-style: normal; }
.wiz .ex-new td .code, .wiz .ex-new td .pre { color: var(--gray-800); }
.wiz .ex-new .ex-lock-ico { color: #2e9e50; }
.wiz .ex-new-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1a6632; background: #dff3e3; border: 1px solid #a8ddb4; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* Faixa "Já existentes" nos painéis de expansão */
.wiz .ex-existentes { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.wiz .ex-ex-label { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; padding-top: 3px; flex-shrink: 0; }
.wiz .ex-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wiz .ex-chip { font-size: 13px;font-weight: 600; color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-300); border-radius: 6px; padding: 3px 9px; font-family: var(--fmono, monospace); }
.wiz .ex-chip-more { font-size: 11.5px; font-weight: 600; color: var(--gray-500); background: transparent; border: 1px dashed var(--gray-300); border-radius: 6px; padding: 3px 9px; }

/* Seletor de colunas (andares multi-coluna) */
.wiz .ex-col-sel-bar { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; margin-bottom: 12px; }
.wiz .ex-col-all-lbl { display: flex; align-items: center; gap: 6px; font-size: 13px;font-weight: 700; color: var(--gray-600); cursor: pointer; user-select: none; }
.wiz .ex-col-all-lbl svg { width: 14px; height: 14px; color: var(--gray-400); }
.wiz .ex-col-all-lbl input[type=checkbox] { accent-color: var(--petrol-600,#005f73); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.wiz .ex-col-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 2px; }
.wiz .ex-col-chip-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;font-weight: 600; color: var(--gray-700); font-family: var(--fmono,monospace); background: var(--white); border: 1px solid var(--gray-300); border-radius: 6px; padding: 3px 9px; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.wiz .ex-col-chip-lbl:hover { border-color: var(--petrol-400,#0a9396); background: var(--petrol-50,#e9f5f6); }
.wiz .ex-col-chip-lbl input[type=checkbox] { width: 12px; height: 12px; accent-color: var(--petrol-600,#005f73); cursor: pointer; flex-shrink: 0; }
.wiz .ex-col-chip-lbl:has(input:not(:checked)) { color: var(--gray-400); background: var(--gray-50); border-color: var(--gray-200); }

/* barra de geração: não deixar os campos sumirem; quebra elegante */
.wiz .rb-bar { row-gap: 14px; }
.wiz .rb-bar .wzfield { min-width: 130px; flex: 0 1 auto; }
.wiz .stepper-num { min-width: 116px; }
.wiz .stepper-num input { width: 100%; min-width: 48px; }
.wiz .btn-add { height: 32px; padding: 0 16px; align-self: flex-end; }

/* prévia ao vivo: o "0" do total não pode estourar */
.wiz .live .total { font-size: 34px; }

/* ── Assistente: revisão de layout (bordas visíveis, compactação, foco no grid) ── */
/* inputs/steppers com borda nítida */
.wiz .wzfield input, .wiz .wzfield select { border-color: var(--gray-400); padding: 7px 10px; font-size: 13px; }
.wiz .stepper-num { border-color: var(--gray-400); }
.wiz .stepper-num input { padding: 7px 4px; font-size: 13px; }
.wiz .stepper-num button { width: 28px; }

/* barra de geração compacta (uma linha) → mais espaço para o grid */
.wiz .rb-bar { gap: 12px; padding-bottom: 14px; align-items: flex-end; }
.wiz .rb-bar .wzfield { min-width: 110px; }
.wiz .rb-bar .wzfield label { margin-bottom: 5px; font-size: 11.5px; }
.wiz .btn-add { height: 32px; }
.wiz .rb-toolbar { margin: 12px 0 6px; }

/* grid em foco: ocupa o espaço e rola internamente */
.wiz .panel-body { display: flex; flex-direction: column; }
.wiz .step-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.wiz .rb-table { flex: 1; min-height: 120px; overflow: auto; }
.wiz .rb-table table { min-width: 100%; width: auto; }
.wiz .rb-table thead th { position: sticky; top: 0; z-index: 1; }

/* rail: sem scroll — conteúdo deve caber na altura disponível */
.wiz .wiz-rail { overflow: hidden; }
.wiz .rail-card, .wiz .live { flex: 0 0 auto; }
.wiz .steps .step { padding: 6px 10px; }
.wiz .live { padding: 13px 14px; }
.wiz .live .mask { margin: 9px 0 9px; }
.wiz .live .total { font-size: 30px; }
.wiz .live .breakdown { margin-top: 8px; }

/* ── Assistente: bordas nítidas + barra de geração compacta (uma linha) ── */
/* bordas visíveis em todos os campos do assistente */
.wiz .wzfield input, .wiz .wzfield select, .wiz .stepper-num { border: 1.5px solid var(--gray-400); }
.wiz .wzfield input:focus { border-color: var(--tl); box-shadow: 0 0 0 3px rgba(47,164,169,.14); }
.wiz .stepper-num input { border: 0; }
.wiz .stepper-num button { border-left: 1.5px solid var(--gray-400); border-right: 1.5px solid var(--gray-400); }
.wiz .stepper-num button:first-child { border-left: 0; }
.wiz .stepper-num button:last-child { border-right: 0; }

/* ── Barra de geração: TUDO EM UMA LINHA ────────────────────────────────────
   A etapa Aptos. é a mais cheia da barra: dois steppers, o botão Adicionar, o
   combo de estrutura, o Aplicar estrutura e o Vinc. Produto. No painel do
   assistente sobram cerca de 786px em janela de 1365px, e com as medidas
   anteriores (campos de 128/150px, vãos de 14px e o combo esticando) a soma
   passava de 880px: a barra quebrava em duas linhas.
   As medidas abaixo foram calculadas para caber: campos de 106px (o stepper
   precisa de 100px para os dois botões e o número), vãos de 10px e combo de
   190px. Com o Vinc. Produto só de ícone, a etapa Aptos. fecha em cerca de
   700px e sobra folga.
   nowrap para nunca quebrar. Abaixo de 1180px de janela o wrap volta: aí o
   espaço realmente não existe, e wrap é melhor que estourar a moldura. */
.wiz .rb-gen { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 10px; }
@media (max-width: 1180px) { .wiz .rb-gen { flex-wrap: wrap; row-gap: 10px; } }
.wiz .rb-gen .wzfield { width: 106px; flex: 0 0 auto; min-width: 0; }
.wiz .rb-gen .wzfield:first-child { width: 112px; }
.wiz .rb-gen .wzfield input, .wiz .rb-gen .stepper-num { width: 100%; }
.wiz .rb-gen .stepper-num { min-width: 100px; }
.wiz .rb-gen .stepper-num input { min-width: 0; }
.wiz .rb-gen .btn-add { align-self: flex-end; }
/* Vinc. Produto só com o ícone: é o único rótulo que dava para dispensar sem
   perder clareza — o do combo e o do Aplicar estrutura explicam a operação
   principal da etapa, e este abre um modal que se apresenta no próprio título.
   O que ele fazia como texto (140px) agora vive no title e no aria-label. */
.wiz .rb-gen .btn-vp--icon { padding: 0; width: 34px; justify-content: center; gap: 0; }
/* ── Estrutura física + "Aplicar estrutura": um par indivisível ─────────────
   Os dois formam uma única operação — escolher a estrutura no combo não faz
   nada, quem age é o botão. Soltos na barra, o flex-wrap separava um do outro
   conforme a largura da janela: o combo terminava uma linha e o botão começava a
   seguinte, como se fossem controles independentes.
   O grupo é UM item de flex, com nowrap por dentro: a linha quebra antes dele,
   nunca no meio. flex-shrink 0 pelo mesmo motivo — encolher levaria o botão a
   sobrepor o combo. */
.wiz .rb-gen .rb-estgrp {
  display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 10px; flex: 0 0 auto;
}
/* 190px de combo em vez do flex:1.4 que estava na marcação: crescendo, ele
   engolia toda a folga da linha e empurrava os dois botões para baixo. A medida
   mostra as descrições de estrutura mais comuns, e o que passar é cortado com
   reticências pelo .ss-label do combo pesquisável.
   É o ÚNICO item da barra que encolhe (flex-shrink 1, piso de 130px): com a
   linha travada em nowrap, alguém precisa ceder quando a janela aperta, e ceder
   largura de combo é menos grave que cortar rótulo de botão.
   Vem depois da regra do :first-child porque, dentro do grupo, o campo é o
   primeiro filho e herdaria a medida do primeiro campo da barra. */
.wiz .rb-gen .rb-estgrp .wzfield { width: 190px; flex: 0 1 190px; min-width: 130px; }
/* ── Expandir Endereços: o combo aproveita a folga ──────────────────────────
   Esta barra tem um botão menos que a do assistente de criação (não há
   Vinc. Produto), então sobra espaço em branco à direita depois do "Aplicar
   estrutura". Aqui o grupo cresce e quem recebe a folga é o campo — o botão não
   tem flex-grow, então mantém a medida do rótulo.
   O teto de 340px existe porque em monitor largo a folga passa de 500px, e um
   combo de meia tela para escolher um nome de estrutura seria desproporcional:
   passando disso, o branco volta a sobrar, o que é o certo.
   Escopo em #exPanel de propósito: na barra da criação a linha fecha com 16px de
   folga, e deixar o combo crescer lá jogaria os botões para a segunda linha. */
#exPanel .rb-gen .rb-estgrp { flex: 1 1 auto; }
#exPanel .rb-gen .rb-estgrp .wzfield { flex: 1 1 190px; width: auto; max-width: 340px; }

/* ── Wizard (criar): compactação geral — menos respiro, mais espaço para o grid ── */
.wiz-cri .panel-body { padding: 12px 16px; }
.wiz-cri .rail-card { padding: 8px; }
/* etapa 1 */
.wiz-cri .seg-toggle { margin-bottom: 14px; }
.wiz-cri .wzform { gap: 12px 14px; }
.wiz-cri .wzfield label { margin-bottom: 5px; }
.wiz-cri .form-hint { margin-top: 12px; padding: 10px 12px; }
/* etapas 2–5 (RangeBuilder) */
.wiz-cri .rb-bar { padding-bottom: 10px; }
.wiz-cri .rb-toolbar { margin: 8px 0 4px; min-height: 28px; }
.wiz-cri .rb-table thead th { padding: 7px 10px; }
.wiz-cri .rb-table tbody td { padding: 7px 10px; }
.wiz-cri .rb-empty { padding: 26px 20px; }
/* etapa 6 (finalização) */
.wiz-cri .fin-grid { gap: 12px; }
.wiz-cri .bignum { padding: 16px 20px; }
.wiz-cri .bignum .big { font-size: 44px; }
.wiz-cri .sum-card { padding: 12px 14px; }
.wiz-cri .sum-card .sh { margin-bottom: 8px; }
.wiz-cri .sum-rows { gap: 7px; }
.wiz-cri .preview-list .ph { margin-bottom: 6px; }

/* ── Dica compacta (tooltip) — ícone inline na barra de geração ── */
.tip-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 32px; align-self: flex-end; flex: 0 0 auto; color: var(--tl-d); cursor: help; outline: none; }
.tip-info svg { width: 17px; height: 17px; }
.tip-info:hover, .tip-info:focus { color: var(--tl-dd); }
.tip-info:focus-visible { border-radius: 8px; box-shadow: 0 0 0 3px rgba(47,164,169,.25); }
.tip-info .tip-pop { position: absolute; top: calc(100% + 8px); left: 50%; width: 300px; transform: translateX(-50%) translateY(-4px); background: #00232c; color: #eaf4f6; font-size: 12px; font-weight: 500; line-height: 1.55; padding: 10px 13px; border-radius: 9px; box-shadow: 0 10px 26px rgba(0,35,44,.38); opacity: 0; visibility: hidden; transition: opacity .16s var(--ease), transform .16s var(--ease); pointer-events: none; z-index: 60; }
.tip-info .tip-pop b { color: #7fd4d9; font-weight: 700; }
.tip-info .tip-pop::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #00232c; }
.tip-info:hover .tip-pop, .tip-info:focus .tip-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ── Seleção rápida (combos por nível na toolbar dos grids) ── */
.rb-toolbar { flex-wrap: wrap; }
.qs-group { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.qs-group + .btn-del2 { margin-left: 0; }
.qs-cap { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--gray-500); white-space: nowrap; }
.qs-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1.5px solid var(--gray-400); border-radius: 9px; padding: 5px 10px; font: 600 12px var(--fbody); color: var(--gray-600); cursor: pointer; white-space: nowrap; transition: all .12s; }
.qs-btn:hover { border-color: var(--tl); color: var(--tl-d); }
.qs-btn.on { border-color: var(--tl); background: var(--tl-100); color: var(--tl-dd); }
.qs-btn svg { width: 13px; height: 13px; opacity: .7; flex-shrink: 0; }
.qs-btn .vl { font-weight: 700; }
.qs-dd { position: fixed; z-index: 200; min-width: 170px; max-height: 300px; overflow-y: auto; background: var(--white); border: 1px solid var(--gray-300); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,35,44,.18); padding: 6px; }
.qs-dd .qs-it { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 7px; font-size: 12.5px; color: var(--gray-700); cursor: pointer; user-select: none; }
.qs-dd .qs-it:hover { background: var(--tl-100); }
.qs-dd .qs-it input { width: 14px; height: 14px; accent-color: #003644; flex-shrink: 0; cursor: pointer; margin: 0; }
.qs-dd .qs-all { border-bottom: 1px solid var(--gray-200); border-radius: 7px 7px 0 0; font-weight: 700; margin-bottom: 3px; }
.qs-dd .code { font-family: var(--fmono); font-weight: 600; color: var(--tl-dd); }
.qs-dd .qs-parity { display: flex; gap: 6px; padding: 0 2px 6px; margin-bottom: 3px; border-bottom: 1px solid var(--gray-200); }
.qs-dd .qs-par { flex: 1; font: 600 11.5px var(--fbody); color: var(--gray-600); background: var(--white); border: 1.5px solid var(--gray-300); border-radius: 7px; padding: 5px 0; cursor: pointer; transition: all .12s; }
.qs-dd .qs-par:hover { border-color: var(--tl); color: var(--tl-d); background: var(--tl-100); }

/* ═══════════════════════════════════════════════════════════════
   Hub de Ações — Assistente de Endereços (paleta petróleo #003644)
   ═══════════════════════════════════════════════════════════════ */

/* Container */
.wiz-hub { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 12px 18px; }

/* Intro */
.hub-intro { flex-shrink: 0; animation: hubRise .5s cubic-bezier(.22,1,.36,1) both; }
.hub-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #0C5E72; }
.hub-title { font-family: 'Saira', sans-serif; font-weight: 800; font-size: 21px; color: #003644; margin: 4px 0 0; letter-spacing: -.01em; line-height: 1.15; }
.hub-desc { margin: 4px 0 0; font-size: 13px; color: var(--gray-600); max-width: 560px; line-height: 1.4; }

/* Bento grid */
.hub-bento { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; }

/* Cards base */
.hub-card { position: relative; overflow: hidden; border-radius: 14px; display: flex; flex-direction: column; cursor: pointer; text-align: left; font-family: inherit; border: none; padding: 0; background: transparent; will-change: transform; transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s cubic-bezier(.22,1,.36,1); animation: hubCardIn .56s cubic-bezier(.22,1,.36,1) both; }
.hub-card:nth-child(1) { animation-delay: .04s; }
.hub-card:nth-child(2) { animation-delay: .12s; }
.hub-card:nth-child(3) { animation-delay: .20s; }
.hub-card:nth-child(4) { animation-delay: .28s; }
.hub-card:hover { transform: translateY(-4px); }
.hub-card:active { transform: translateY(-1px); }
.hub-card:focus-visible { outline: 2px solid #0C5E72; outline-offset: 3px; }

/* Grid positions */
.hub-feat { grid-column: span 6; grid-row: span 3; }
.hub-wide { grid-column: span 6; grid-row: span 1; }
.hub-sm   { grid-column: span 3; grid-row: span 1; }
/* Ancorado do lado direito (colunas 7–12, sob Gerenciar/Expandir/Classificação/Auditoria) —
   não estica até a coluna 1 (embaixo do card escuro "Criar Endereços"). Em telas ≤1160px,
   a regra de .hub-wide abaixo assume (span 12), igual ao restante dos cards largos. */
.hub-wide.hub-wide-right { grid-column: 7 / span 6; }

/* Light cards (Gerenciar, Classificação, Auditoria) */
.hub-light { background: #fff; border: 1px solid var(--gray-200) !important; padding: 16px; box-shadow: 0 1px 2px rgba(10,20,40,.06); }
.hub-light:hover { box-shadow: 0 6px 18px rgba(10,20,40,.10); border-color: #0C5E72 !important; }
.hub-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: #EAF5F3; color: #064A5B; transition: all .26s cubic-bezier(.22,1,.36,1); }
.hub-light:hover .hub-tile { background: linear-gradient(135deg, #003644, #2E8B7E); color: #fff; transform: scale(1.04) rotate(-3deg); box-shadow: 0 10px 22px rgba(0,54,68,.22); }
.hub-tile svg { width: 22px; height: 22px; }
.hub-ct { margin-top: auto; min-height: 0; }
.hub-light h3 { font-family: 'Saira', sans-serif; font-weight: 800; font-size: 16px; color: #003644; margin: 10px 0 0; letter-spacing: -.01em; }
/* hub-sm (Classificação + Auditoria): layout horizontal — ícone à esq., texto à dir. */
.hub-sm.hub-light { flex-direction: row; align-items: center; gap: 12px; }
.hub-sm .hub-tile { flex-shrink: 0; width: 40px; height: 40px; }
.hub-sm .hub-ct { margin-top: 0; flex: 1; min-width: 0; }
.hub-sm.hub-light h3 { margin-top: 0; font-size: 14.5px; }
.hub-light p { margin: 3px 0 0; font-size: 12px; color: var(--gray-600); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hub-go { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #064A5B; }
.hub-go svg { width: 14px; height: 14px; transition: transform .26s cubic-bezier(.22,1,.36,1); }
.hub-card:hover .hub-go svg { transform: translateX(4px); }

/* Wide card (Gerenciar) — tile à esquerda, texto ao lado */
.hub-wide-row { display: flex; gap: 16px; align-items: center; height: 100%; }
.hub-wide-body { display: flex; flex-direction: column; min-height: 0; }

/* Featured dark card (Criar Endereços) */
.hub-feat { background: linear-gradient(135deg, #00222C 0%, #003644 46%, #0C5E72 100%); color: #fff; padding: 14px 18px 16px; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: 0 24px 50px rgba(0,34,44,.34); min-height: 0; }
.hub-feat:hover { box-shadow: 0 30px 64px rgba(0,34,44,.42); }

/* Orbs decorativos */
.hub-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.hub-orb-a { width: 340px; height: 340px; right: -120px; top: -120px; background: radial-gradient(circle, rgba(126,214,165,.34), transparent 68%); animation: hubDrift 13s ease-in-out infinite alternate; }
.hub-orb-b { width: 240px; height: 240px; left: -90px; bottom: -110px; background: radial-gradient(circle, rgba(46,139,126,.34), transparent 70%); animation: hubDrift 17s ease-in-out infinite alternate-reverse; }

/* Badge "Ação principal" */
.hub-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7ED6A5; background: rgba(126,214,165,.12); border: 1px solid rgba(126,214,165,.28); padding: 5px 11px; border-radius: 999px; position: relative; z-index: 1; flex-shrink: 0; }
.hub-badge svg { width: 13px; height: 13px; }

/* Tile do card destaque */
.hub-ftile { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); color: #fff; margin-top: 8px; position: relative; z-index: 1; transition: all .26s cubic-bezier(.22,1,.36,1); flex-shrink: 0; }
.hub-feat:hover .hub-ftile { background: rgba(126,214,165,.22); transform: scale(1.05) rotate(-3deg); }
.hub-ftile svg { width: 24px; height: 24px; }

/* Título e descrição do card destaque */
.hub-feat-title { font-family: 'Saira', sans-serif; font-weight: 900; font-size: 24px; color: #fff; margin: 8px 0 0; letter-spacing: -.02em; position: relative; z-index: 1; line-height: 1.1; flex-shrink: 0; }
.hub-feat-desc { margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.4; max-width: 380px; position: relative; z-index: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex-shrink: 0; }

/* Chips de dimensões */
.hub-dims { display: flex; gap: 6px; margin-top: auto; position: relative; z-index: 1; flex-wrap: wrap; min-height: 0; }
.hub-dims span { font-size: 12px;font-weight: 600; font-family: 'JetBrains Mono', monospace; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; }

/* CTA "Iniciar criação" */
.hub-cta { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: #fff; color: #003644; font-family: 'Saira', sans-serif; font-weight: 700; font-size: 13.5px; padding: 9px 20px; border-radius: 10px; position: relative; z-index: 1; box-shadow: 0 12px 28px rgba(0,0,0,.22); transition: all .2s cubic-bezier(.22,1,.36,1); flex-shrink: 0; }
.hub-cta svg { width: 18px; height: 18px; transition: transform .2s cubic-bezier(.22,1,.36,1); }
.hub-feat:hover .hub-cta { background: #7ED6A5; }
.hub-feat:hover .hub-cta svg { transform: translateX(5px); }

/* Animações */
@keyframes hubCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hubRise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hubDrift  { from { transform: translate(0,0) scale(1); } to { transform: translate(-26px,22px) scale(1.12); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hub-card, .wiz-hub .hub-intro, .hub-orb-a, .hub-orb-b { animation: none !important; }
  .hub-card:hover { transform: none; }
}

/* Responsive ≤ 1160px */
@media (max-width: 1160px) {
  .wiz-hub    { overflow-y: auto; }
  .hub-bento  { flex: none; grid-template-rows: auto auto auto; min-height: unset; }
  .hub-feat   { grid-column: span 12; grid-row: auto; min-height: 260px; }
  .hub-wide, .hub-wide.hub-wide-right { grid-column: span 12; }
  .hub-sm     { grid-column: span 6; }
  /* hub-sm em telas menores volta ao layout vertical */
  .hub-sm.hub-light { flex-direction: column; }
  .hub-sm .hub-ct { margin-top: 14px; flex: none; }
  .hub-sm.hub-light h3 { margin-top: 0; }
}
.wiz .rb-gen .wzfield label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══════════════════════════════════════════════════════════════
   Assistente de Etiquetas UP
   ═══════════════════════════════════════════════════════════════ */

/* ── Passo Início ─────────────────────────────────────────── */
.inicio-body { display: flex; flex-direction: column; gap: 22px; }
.inicio-hero { display: flex; align-items: center; gap: 16px; }
.inicio-hero-ico { width: 56px; height: 56px; border-radius: 15px; background: var(--grad-navy); display: grid; place-items: center; flex-shrink: 0; }
.inicio-hero-ico svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 1.75; }
.inicio-hero-text h2 { font-family: var(--fdisp); font-size: 22px; font-weight: 800; color: var(--tl-dd); margin: 0 0 5px; }
.inicio-hero-text p { font-size: 13px; color: var(--gray-600); max-width: 540px; margin: 0; line-height: 1.55; }
.op-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tl-d); margin-bottom: 10px; }
.op-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 620px; }
.op-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 2px solid var(--gray-200); border-radius: 12px; cursor: pointer; transition: all .18s; background: #fff; }
.op-card:hover { border-color: rgba(47,164,169,.55); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(47,164,169,.12); }
.op-card.sel { border-color: var(--tl); background: rgba(47,164,169,.04); box-shadow: 0 0 0 3px rgba(47,164,169,.14); }
.op-card-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--gray-100); color: var(--gray-500); transition: all .18s; flex-shrink: 0; }
.op-card.sel .op-card-icon { background: var(--tl-100); color: var(--tl-d); }
.op-card-body { flex: 1; min-width: 0; }
.op-card-title { font-size: 14.5px; font-weight: 700; color: var(--gray-800); margin-bottom: 4px; }
.op-card.sel .op-card-title { color: var(--tl-dd); }
.op-card-desc { font-size: 13px;color: var(--gray-600); line-height: 1.45; }
.op-card-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gray-300); flex-shrink: 0; display: grid; place-items: center; transition: all .18s; margin-top: 2px; }
.op-card.sel .op-card-radio { border-color: var(--tl); background: var(--tl); }
.op-card.sel .op-card-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.start-hint { display: flex; align-items: center; gap: 10px; padding: 11px 15px; max-width: 620px; background: rgba(47,164,169,.11); border: 1px solid rgba(47,164,169,.38); border-radius: 10px; font-size: 12.5px; color: var(--tl-dd); }
.start-hint svg { color: var(--tl-d); flex-shrink: 0; width: 16px; height: 16px; }

/* ── Início — layout dois colunas ─────────────────────────── */
.inicio-layout { display: grid; grid-template-columns: minmax(0, 680px) 1fr; gap: 12px; padding: 16px 20px; align-items: stretch; flex: 1; min-height: 0; }
.inicio-left { min-width: 0; }
.inicio-flow-panel { background: var(--grad-navy); border-radius: 14px; padding: 18px 18px; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); animation: iflPanelIn .32s var(--ease) both; display: flex; flex-direction: column; }
.inicio-flow-panel::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(47,164,169,.35), transparent 70%); pointer-events: none; }
.inicio-flow-panel::before { content: ''; position: absolute; left: -30px; bottom: -30px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(47,164,169,.18), transparent 70%); pointer-events: none; }
.ifl-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-l); }
.ifl-op-name { font-family: var(--fdisp); font-size: 17px; font-weight: 800; color: #fff; margin: 4px 0 10px; }
.ifl-steps { display: flex; flex-direction: column; }
.ifl-step { display: flex; align-items: stretch; gap: 11px; border-radius: 8px; padding: 3px 6px 0; margin: 0 -6px; transition: background .18s var(--ease); animation: iflItemIn .28s var(--ease) both; }
.ifl-step:nth-child(1) { animation-delay: .07s; }
.ifl-step:nth-child(2) { animation-delay: .14s; }
.ifl-step:nth-child(3) { animation-delay: .21s; }
.ifl-step:hover { background: rgba(255,255,255,.07); }
.ifl-step-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 3px; }
.ifl-num { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); color: var(--tl-l); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; transition: all .2s var(--ease); }
.ifl-step:hover .ifl-num { border-color: var(--tl-l); background: rgba(127,212,217,.14); box-shadow: 0 0 0 3px rgba(127,212,217,.12); }
.ifl-connector { width: 1px; flex: 1; background: rgba(255,255,255,.14); margin: 3px 0; }
.ifl-step-body { padding-bottom: 10px; min-width: 0; }
.ifl-step:last-child .ifl-step-body { padding-bottom: 4px; }
.ifl-step-label { font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.ifl-step-sub { font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 2px; line-height: 1.4; }
.ifl-tip { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: rgba(94,207,174,.1); border: 1px solid rgba(94,207,174,.22); border-radius: 9px; margin-top: auto; padding-top: 10px; cursor: default; transition: background .2s var(--ease), border-color .2s var(--ease); animation: iflItemIn .28s var(--ease) .27s both; }
.ifl-tip:hover { background: rgba(94,207,174,.18); border-color: rgba(94,207,174,.42); }
.ifl-tip-ico { flex-shrink: 0; margin-top: 1px; color: #5ecfae; transition: transform .3s var(--ease); }
.ifl-tip:hover .ifl-tip-ico { transform: rotate(20deg) scale(1.2); }
.ifl-tip-ico svg { width: 13px; height: 13px; display: block; }
.ifl-tip-txt { font-size: 11px; color: rgba(255,255,255,.72); line-height: 1.55; }
@keyframes iflPanelIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes iflItemIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Passo Busca ──────────────────────────────────────────── */
.busca-body { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.op-seg { display: inline-flex; background: var(--gray-100); border-radius: 999px; padding: 3px; gap: 2px; }
.op-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gray-600); background: transparent; transition: all .18s; font-family: inherit; }
.op-seg-btn.active { background: #fff; color: var(--tl-dd); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.op-seg-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.filtros-card { background: var(--gray-050); border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 14px; }
.filtros-card-hd { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tl-d); margin-bottom: 8px; }
.filtros-card--collapsed .filtros-card-hd { margin-bottom: 0; }
.filtros-card--collapsed .filtros-row,
.filtros-card--collapsed .btn-consult-wide { display: none; }
.filtros-toggle-ico { font-size: 9px; color: var(--gray-400); }
.filtros-card-hd svg { width: 13px; height: 13px; }
/* Labels alinhados no topo: os controles são ancorados pela borda superior, e não
   pela inferior — assim a caixa de chips das filiais pode crescer sem empurrar
   os labels vizinhos para fora do alinhamento. */
.filtros-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
/* Todo controle da linha de filtros usa a altura da escala do sistema (32px):
   sem isso o input de data (shadow DOM do Chrome) fica mais alto que os demais. */
.filtros-row .etq-input { height: 32px; padding-top: 0; padding-bottom: 0; }
.filtros-row .oc-toggle { height: 32px; }
.filtros-row .oc-toggle button { height: 100%; padding: 0 13px; }
.filtros-row .etq-btn-ico { width: 32px; height: 32px; }
.filiais-field-wrap { display: flex; flex-direction: column; gap: 4px; flex: 0 0 220px; }
.etq-periodo-group { flex: 0 0 auto; min-width: 0; }
.etq-forn-group { flex: 1; min-width: 0; }
.filiais-chips-box { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 9px; border: 1.5px solid #cbd5e1; border-radius: 8px; background: #fff; min-height: 32px; max-height: 58px; overflow-y: auto; align-items: flex-start; align-content: flex-start; cursor: default; line-height: 1.2; }
.etq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 999px; background: #dbeef3; color: #1e4a5a; font-size: 11.5px; font-weight: 600; }
.etq-chip-x { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(0,54,68,.15); cursor: pointer; flex-shrink: 0; }
.etq-chip-x:hover { background: rgba(0,54,68,.3); color: #fff; }
.etq-chip-x svg { width: 9px; height: 9px; }
.chip-add { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border: 1.5px dashed var(--tl-d); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--tl-d); cursor: pointer; background: none; white-space: nowrap; }
.periodo-ctrl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.periodo-dates { display: flex; align-items: center; gap: 5px; }
/* Toggle "Tipo de data" (Entrada | Conf.) — mesmo componente do filtro da Ordem
   de Coleta (.oc-toggle); a altura de 32px vem da regra de .filtros-row. */
.etq-tipodata-group { flex: 0 0 auto; }
.etq-toggle-data button { font-weight: 600; }
.etq-date-lbl { font-size: 11.5px; color: var(--gray-500); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.periodo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.forn-row { display: grid; grid-template-columns: 76px 1fr 32px; gap: 5px; align-items: center; }
.btn-consult-wide { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px; background: var(--tl-dd); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; margin-top: 10px; font-family: inherit; }
.btn-consult-wide:hover:not(:disabled) { background: #005566; transform: translateY(-1px); }
.btn-consult-wide:disabled { opacity: .6; cursor: not-allowed; }
.lanc-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.lanc-wrap-hd { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.lanc-wrap-title { font-size: 13px; font-weight: 700; color: var(--tl-dd); }
.lanc-cnt { font-size: 13px;color: var(--gray-500); }
.dtable-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; }
.dtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dtable th { padding: 8px 10px; background: linear-gradient(180deg,#eef6f7,#e4eff1); color: #0a4d5e; font-weight: 700; font-size: 11.5px; text-align: left; white-space: nowrap; border-bottom: 1.5px solid #c8dce0; position: sticky; top: 0; z-index: 1; }
.dtable td { padding: 7px 10px; border-bottom: 1px solid #f0f4f5; vertical-align: middle; color: #343a40; }
.dtable .chk-col { width: 34px; padding: 7px 8px; }
.dtable .chk-lanc { accent-color: #003644; width: 15px; height: 15px; cursor: pointer; }
.dtable .mono { font-family: var(--fmono); font-size: 11.5px; }
.dtable .razao { color: var(--tl-dd); font-weight: 600; }
.d-row { cursor: pointer; }
.d-row:hover td { background: rgba(47,164,169,.05) !important; }
.d-sel td { background: rgba(47,164,169,.10) !important; box-shadow: inset 3px 0 0 var(--tl); }
.pager { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 13px;color: var(--gray-600); }
.pager button { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--gray-200); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px;color: var(--gray-600); transition: all .12s; }
.pager button:hover:not(:disabled) { border-color: var(--tl); color: var(--tl-d); }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ── Passo Geração ────────────────────────────────────────── */
.gen-body { display: flex; flex-direction: column; height: 100%; gap: 10px; }
.gen-bar { flex-shrink: 0; background: var(--grad-navy); border-radius: 10px; padding: 10px 16px; display: flex; align-items: center; }
.gb-main { display: flex; align-items: center; flex: 1; flex-wrap: wrap; }
.gb-item { display: flex; flex-direction: column; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.15); }
.gb-item:first-child { padding-left: 0; }
.gb-item:last-child { border-right: none; }
.gb-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(127,212,217,.85); margin-bottom: 2px; }
.gb-val { font-size: 13.5px; font-weight: 700; color: #fff; }
.gb-val.mono { font-family: var(--fmono); font-size: 12.5px; }
.gen-section { flex-shrink: 0; }
.gen-section.grow { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.gen-section.grow .gt-wrap { flex: 1; min-height: 0; }
.gen-section-lbl { font-size: 11.5px; font-weight: 700; color: var(--tl-d); margin-bottom: 5px; letter-spacing: .02em; }
.gt-wrap { overflow: auto; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; }
.gt { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.gt th { padding: 7px 10px; background: linear-gradient(180deg,#eef6f7,#e4eff1); color: #0a4d5e; font-weight: 700; font-size: 11.5px; line-height: 14px; border-bottom: 1.5px solid #c8dce0; position: sticky; top: 0; z-index: 1; white-space: nowrap; text-align: left; }
.gt td { padding: 6px 10px; border-bottom: 1.7px solid #e2eaec; vertical-align: middle; color: #343a40; }
.gt-row { cursor: pointer; }
.gt-row:hover td { background: rgba(47,164,169,.05) !important; }
.gt-row.gt-active td { background: rgba(47,164,169,.07) !important; }
.stat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.stat.ok { background: #e0f4ea; color: #1a6e3a; }
.stat.warn { background: #fbe5c9; color: #b5790a; }
.stat svg { width: 11px; height: 11px; }
.unit-pill { display: inline-block; padding: 2px 7px; border-radius: 5px; background: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: 600; }
/* campo sem valor cadastrado: '----' centralizado na célula */
.ep-nv { display: block; text-align: center; }
/* descrição do produto: no máximo 2 linhas, com reticências no excesso */
.gt-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
/* Ampliar — Produtos + Editar + Etiquetas em overlay de tela cheia.
   As seções são MOVIDAS para dentro do .ep-zoom-body (não recriadas), por isso as
   regras abaixo precisam vencer os style inline de #secProds/#secEtqs/#etqsBody. */
.ep-lbl-row { display: flex; align-items: center; gap: 10px; }
.ep-lbl-row .ep-zoom-btn { margin-left: auto; }
.ep-zoom-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid var(--gray-300); border-radius: 6px; background: #fff; color: var(--tl-dd); font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .15s; }
.ep-zoom-btn svg { width: 13px; height: 13px; }
.ep-zoom-btn:hover { border-color: var(--tl-d); background: var(--tl-100); }
.ep-zoom-ovl .cm-modal { width: min(1700px, 97vw); height: 94vh; }
.ep-zoom-body { --ep-split: 55%; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; overflow: hidden; }
.ep-zoom-body > #secProds { flex: 0 0 var(--ep-split); min-height: 120px; display: flex; flex-direction: column; overflow: hidden; }
.ep-zoom-body > #secEtqs  { flex: 1 1 auto; min-height: 120px; overflow: hidden; }
.ep-zoom-body > #editarBar { flex: none; }
.ep-zoom-body .gt-wrap { flex: 1; min-height: 0; max-height: none !important; }
.ep-zoom-grip { flex: none; height: 8px; border-radius: 999px; background: var(--gray-200); cursor: row-resize; transition: background .15s; }
.ep-zoom-grip:hover { background: var(--tl-d, #2fa4a9); }
.editar-bar { display: flex; align-items: center; gap: 16px; padding: 9px 14px; flex-shrink: 0; flex-wrap: wrap; background: var(--tl-100); border: 1px solid rgba(47,164,169,.25); border-radius: 8px; }
.btn-editar { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 1.5px solid var(--tl-d); border-radius: 8px; background: #fff; color: var(--tl-dd); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; font-family: inherit; box-shadow: 0 1px 4px rgba(0,54,68,.08); }
.btn-editar:hover { background: var(--tl-18); border-color: var(--tl); box-shadow: 0 2px 8px rgba(0,54,68,.12); }
.editar-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.eld-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gray-600); }
.eld-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.etq-acum-lbl { font-size: 13px;font-weight: 700; color: var(--tl-d); margin-bottom: 5px; }
.etq-cod { font-family: var(--fmono); font-size: 11px; color: #0a4d5e; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.gen-actions { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; border-top: 1px solid var(--gray-200); flex-shrink: 0; flex-wrap: wrap; }
.act-legend { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--grad-navy); border-radius: 8px; font-size: 11px; color: rgba(255,255,255,.65); flex-wrap: wrap; margin-top: 2px; flex-shrink: 0; }
.act-legend b { color: rgba(255,255,255,.9); }

/* ── Sub-tabelas de geração ───────────────────────────────── */
.etq-sub-row { background: #f7fbfc !important; cursor: default; }
.etq-sub-row:hover { background: #f7fbfc !important; }
.etq-sub-row td { padding: 0 !important; border-bottom: 2px solid #c8dce0 !important; }
.etq-sub-label { font-size: 13px;font-weight: 700; color: var(--tl-dd); padding: 8px 12px 4px; letter-spacing: .02em; border-bottom: 1px solid var(--gray-200); margin-bottom: 4px; }
.etq-etq-label { font-size: 13px;font-weight: 700; color: var(--tl-dd); padding: 8px 12px 4px; border-top: 1.5px dashed #c8dce0; margin-top: 6px; }
.etq-table-vols, .etq-table-etqs { width: 100%; border-collapse: collapse; font-size: 13px;margin: 0; }
.etq-table-vols th, .etq-table-etqs th { padding: 6px 10px; background: #f0f6f8; color: #0a4d5e; font-weight: 700; font-size: 11px; border-bottom: 1px solid #c8dce0; }
.etq-table-vols td, .etq-table-etqs td { padding: 5px 10px; border-bottom: 1px solid #ebf2f4; vertical-align: middle; }
.etq-chevron { width: 24px; height: 24px; border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--gray-500); transition: all .15s; padding: 0; flex-shrink: 0; }
.etq-chevron svg { width: 14px; height: 14px; }
.etq-chevron:hover { background: #e4eff1; color: var(--tl-dd); }
.etq-chevron.open { color: var(--tl-d); }
.etq-btn-add { margin-top: 4px; padding: 5px 12px; font-size: 13px;font-weight: 600; border: 1.5px dashed var(--tl); border-radius: 6px; background: rgba(47,164,169,.06); color: var(--tl-dd); cursor: pointer; transition: all .15s; width: 100%; text-align: left; display: block; font-family: inherit; }
.etq-btn-add:hover { background: rgba(47,164,169,.14); border-style: solid; }

/* ── Passo Reimpressão ────────────────────────────────────── */
/* Layout do passo 4 reutiliza .gen-section, .filtros-row, .etq-field-group,
   .etq-label, .gt-wrap (dtable), .gen-actions — mesmas classes do passo 3.    */
.etq-sel-info { font-size: 13px; color: var(--tl-dd); font-weight: 600; }
.reimp-status-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.reimp-status-pill.imp { background: #e0f4ea; color: #1a6e3a; }
.reimp-status-pill.pend { background: #fbe5c9; color: #b5790a; }

/* ── Passo Fim ────────────────────────────────────────────── */
.fim-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; flex: 1; min-height: 0; }
.fim-ring { width: 60px; height: 60px; border-radius: 50%; background: var(--tl-100); display: grid; place-items: center; flex-shrink: 0; }
.fim-ring svg { width: 28px; height: 28px; stroke: var(--tl-dd); stroke-width: 2.5; }
.fim-title { font-family: var(--fdisp); font-size: 20px; font-weight: 800; color: var(--tl-dd); margin: 0; }
.fim-desc { font-size: 13.5px; color: var(--gray-600); max-width: 440px; line-height: 1.5; margin: 0; }
.fim-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fim-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; background: var(--gray-050); border: 1px solid var(--gray-200); border-radius: 12px; min-width: 90px; }
.fim-stat-n { font-family: var(--fdisp); font-size: 22px; font-weight: 900; color: var(--tl-dd); }
.fim-stat-lbl { font-size: 10px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; }
.fim-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ── Live Panel (extensões sobre o .live do DS) ───────────── */
.live .live-op-name { font-family: var(--fdisp); font-size: 17px; font-weight: 800; color: #fff; margin: 6px 0 8px; }
.live .live-marcos { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.live .live-marco { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(255,255,255,.7); }
.live .live-marco svg { width: 12px; height: 12px; color: var(--tl-l); flex-shrink: 0; }
.live .live-doc-chips { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.live .live-chip { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); border-radius: 8px; padding: 5px 9px; }
.live .live-chip .mono { font-family: var(--fmono); font-size: 11px; color: var(--tl-l); flex-shrink: 0; }
.live .live-chip .txt { color: rgba(255,255,255,.8); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live .live-hint { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 10px; line-height: 1.6; }
.live .live-etq-preview { background: rgba(255,255,255,.96); border-radius: 8px; padding: 10px 12px; margin-top: 10px; color: #343a40; }
.live .live-etq-preview .ep-prod { font-weight: 700; color: var(--tl-dd); font-size: 13px;margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live .live-etq-preview .ep-cod { font-family: var(--fmono); font-size: 10px; color: var(--gray-500); margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live .live-etq-preview .ep-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 3px; }
.live .live-etq-preview .ep-tag { font-size: 10px; font-weight: 600; color: var(--gray-600); }
.live .live-etq-preview .ep-val { font-family: var(--fmono); font-size: 10px; color: var(--tl-dd); }
.live .live-barcode { height: 26px; background: repeating-linear-gradient(90deg,#003644 0,#003644 2px,transparent 2px,transparent 4px); border-radius: 2px; margin-top: 6px; opacity: .75; }

/* ── Inputs / botões compartilhados ──────────────────────── */
.etq-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: linear-gradient(160deg, #003644 0%, #00232c 100%); color: #fff; padding: 10px 22px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 9999; white-space: nowrap; }
.etq-input { padding: 7px 10px; border: 1.5px solid var(--gray-200); border-radius: 7px; font-size: 13px; font-family: inherit; background: #fff; transition: border-color .15s, box-shadow .15s; width: 100%; box-sizing: border-box; }
.etq-input:focus { outline: none; border-color: var(--tl); box-shadow: 0 0 0 3px rgba(47,164,169,.14); }
.etq-input-sm { padding: 4px 7px; font-size: 13px;border-radius: 5px; min-width: 0; }
.etq-input-date { width: 120px; flex-shrink: 0; padding: 7px 8px; }
.etq-input-num { width: 80px; }
.etq-input-cod { width: 70px; flex-shrink: 0; }
.etq-input-nome { flex: 1; background: var(--gray-050); }
.etq-btn-ico { width: 30px; height: 30px; border: 1.5px solid var(--gray-200); border-radius: 7px; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; color: var(--gray-500); }
.etq-btn-ico svg { width: 14px; height: 14px; }
.etq-btn-ico:hover { border-color: var(--tl); color: var(--tl-dd); }
.etq-btn-ico.etq-btn-clr:hover { border-color: #dc3545; color: #dc3545; }
.etq-chk-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #343a40; cursor: pointer; font-weight: 500; }
.etq-chk-label input { accent-color: var(--tl-dd); cursor: pointer; }
.etq-lookup-row { display: flex; gap: 5px; align-items: center; }
.etq-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.etq-date-field { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--gray-500); font-weight: 500; }
.etq-label { font-size: 11px; font-weight: 700; color: var(--tl-dd); letter-spacing: .02em; text-transform: uppercase; margin-bottom: 3px; display: block; }
.etq-field-group { display: flex; flex-direction: column; gap: 3px; }
.etq-empty { padding: 28px 20px; text-align: center; color: var(--gray-500); font-size: 13px; }
.etq-empty-sm { padding: 8px 10px; color: var(--gray-500); font-size: 13px;display: block; }
.etq-loading-sm { padding: 12px; text-align: center; color: var(--gray-500); font-size: 13px;}
.etq-btn-clr-txt { color: #dc3545 !important; }
.etq-btn-clr-txt:hover { color: #c82333 !important; text-decoration: underline; }

/* ── Modal Composição ─────────────────────────────────────── */
.etq-modal-ovl { position: fixed; inset: 0; background: rgba(0,20,24,.62); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px); }
.etq-modal { background: #fff; border-radius: 14px; box-shadow: 0 12px 56px rgba(0,0,0,.32); display: flex; flex-direction: column; width: min(1100px,100%); min-width: 760px; height: min(88vh,900px); overflow: hidden; }
.etq-modal-hd { padding: 14px 18px; background: linear-gradient(135deg, #003644 0%, #00232c 100%); color: #fff; display: flex; align-items: center; gap: 10px; flex-shrink: 0; box-shadow: 0 2px 10px rgba(0,54,68,.35); }
.etq-modal-hd svg { flex-shrink: 0; opacity: .9; }
.etq-modal-hd-title { font-size: 16px; font-weight: 700; line-height: 1.2; flex: 1; }
.etq-modal-hd-sub { font-size: 13px;opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; font-weight: 500; }
.etq-modal-hd .wms-close { width: 30px; height: 30px; background: rgba(255,255,255,.12); border: none; color: #fff; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, box-shadow .15s; padding: 0; }
.etq-modal-hd .wms-close:hover { background: rgba(192,71,59,.75); box-shadow: 0 0 0 3px rgba(192,71,59,.25); }
.etq-modal-bd { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 280px 1fr; overflow: hidden; }
.etq-modal-col { display: flex; flex-direction: column; border-right: 2px solid var(--gray-200); min-height: 0; overflow: hidden; }
.etq-modal-col:last-child { border-right: none; }
.etq-modal-col-hd { padding: 8px 14px; background: #eef6f7; border-bottom: 1px solid #c8dce0; font-size: 11px; font-weight: 700; color: var(--tl-dd); text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; display: flex; align-items: center; gap: 7px; }
.etq-modal-col-hd svg { width: 13px; height: 13px; opacity: .7; flex-shrink: 0; }
.etq-modal-col-hd-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etq-modal-col-bd { flex: 1; overflow-y: auto; min-height: 0; }
.etq-modal-ft { flex-shrink: 0; padding: 11px 16px; border-top: 1px solid var(--gray-200); background: var(--gray-50); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.etq-modal-ft-sep { width: 1px; height: 22px; background: var(--gray-200); margin: 0 4px; flex-shrink: 0; }

/* Coluna de produtos */
.etq-mprod-row { padding: 9px 12px; font-size: 13px;cursor: pointer; display: flex; align-items: flex-start; gap: 9px; border-bottom: 1px solid #f0f4f5; transition: background .12s, border-left-color .12s; border-left: 3px solid transparent; }
.etq-mprod-row:hover { background: #f3fafb; }
.etq-mprod-row.sel { background: rgba(47,164,169,.09); border-left-color: var(--tl); }
.etq-mprod-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.etq-mprod-dot.ok { background: #2e9e5e; }
.etq-mprod-dot.pend { background: #f59e0b; }
.etq-mprod-dot.over { background: #dc3545; }
.etq-mprod-nome { font-weight: 600; color: #003644; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px;line-height: 1.3; }
.etq-mprod-qtd { font-size: 13px;font-weight: 700; color: #0a4d5e; margin-top: 2px; letter-spacing: -.01em; }
.etq-mprod-unid { font-size: 10.5px; font-weight: 500; color: var(--gray-600); margin-left: 3px; }
.etq-qtd-bar { height: 4px; border-radius: 2px; background: #dde8ea; margin-top: 5px; overflow: hidden; }
.etq-qtd-bar-fill { height: 100%; border-radius: 2px; transition: width .3s ease; }

/* Coluna de volumes */
.etq-mvol-row { padding: 9px 12px; font-size: 13px;cursor: pointer; border-bottom: 1px solid #f0f4f5; transition: background .12s; border-left: 3px solid transparent; }
.etq-mvol-row:hover:not(.used) { background: #f3fafb; border-left-color: rgba(47,164,169,.4); }
.etq-mvol-row.sel { background: rgba(47,164,169,.09); border-left-color: var(--tl); }
.etq-mvol-row.used { opacity: .55; cursor: default; }
.etq-mvol-id { font-weight: 700; color: #003644; font-size: 13px;display: flex; align-items: center; gap: 6px; }
.etq-mvol-qtd { font-weight: 700; color: #0a4d5e; font-size: 13px;margin-left: auto; white-space: nowrap; }
.etq-mvol-meta { margin-top: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.etq-mvol-meta-item { font-size: 10.5px; color: var(--gray-600); line-height: 1.4; }
.etq-mvol-meta-item b { font-weight: 600; color: #444; }
.etq-mvol-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1a7a47; background: rgba(46,158,94,.12); border: 1px solid rgba(46,158,94,.25); padding: 2px 7px; border-radius: 999px; }
.etq-mvol-badge svg { width: 10px; height: 10px; }

/* Cabeçalho do painel de etiquetas (mEtqHd) */
.etq-col-hd-etq { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.etq-col-hd-etq-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.etq-acum-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.etq-acum-pill.ok   { background: rgba(46,158,94,.15);  color: #1a7a47; border: 1px solid rgba(46,158,94,.3); }
.etq-acum-pill.pend { background: rgba(245,158,11,.13); color: #92620a; border: 1px solid rgba(245,158,11,.3); }
.etq-acum-pill.over { background: rgba(220,53,69,.12);  color: #a5192a; border: 1px solid rgba(220,53,69,.3); }

/* Tabela de etiquetas */
.etq-metq-tbl { width: 100%; border-collapse: collapse; font-size: 13px;}
.etq-metq-tbl th { padding: 7px 8px; background: #eef6f7; color: #0a4d5e; font-weight: 700; font-size: 10.5px; border-bottom: 1px solid #c8dce0; white-space: nowrap; position: sticky; top: 0; z-index: 1; letter-spacing: .04em; text-transform: uppercase; }
.etq-metq-tbl td { padding: 4px 5px; border-bottom: 1px solid #f0f4f5; vertical-align: middle; }
.etq-metq-tbl tr:hover td { background: #f8fcfc; }
.etq-metq-tbl .etq-input { padding: 4px 7px; font-size: 13px;border-radius: 5px; }
.etq-metq-tbl td.etq-td-edit { background: rgba(253,240,198,.4); }
.etq-metq-tbl td.etq-td-edit .etq-input:focus { background: #fff; }
.etq-metq-tbl td.etq-td-seq { text-align: center; font-size: 11px; font-weight: 700; color: var(--gray-600); padding: 4px 6px; white-space: nowrap; }
.etq-metq-tbl td.etq-td-del { text-align: center; padding: 3px 5px; }

/* ── Maximizado: componentes crescem ─────────────────────── */
.wiz.wiz-maximized .dtable-wrap { max-height: none; }
.wiz.wiz-maximized .gt-wrap { max-height: none; }
.wiz.wiz-maximized .lanc-wrap,
.wiz.wiz-maximized .busca-body,
.wiz.wiz-maximized .gen-body { flex: 1; min-height: 0; }
.wiz.wiz-maximized .inicio-layout { flex: 1; min-height: 0; }

/* ── Stepper + live panel no topo (etiquetas) ─────────── */
.etq-steps-top { flex-shrink: 0; display: flex; align-items: stretch; background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 8px; overflow: hidden; }
/* quando dentro do .panel, vira faixa integrada sem card próprio */
.panel > .etq-steps-top { box-shadow: none; border: none; border-bottom: 1px solid var(--gray-200); border-radius: 0; margin-bottom: 0; background: transparent; }
.panel > .etq-steps-top .live { border-left: 1px solid var(--gray-200); border-radius: 0; }
.etq-steps-top .steps { flex: 1; display: flex; flex-direction: row; align-items: flex-start; padding: 0 4px; }
.etq-steps-top .etq-step-left { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-right: 1px solid var(--gray-200); flex-shrink: 0; }
.etq-steps-top .etq-step-right { display: flex; align-items: center; padding: 6px 14px; border-left: 1px solid var(--gray-200); flex-shrink: 0; }
.etq-steps-top .etq-step-left .hicon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--tl-100); color: var(--tl-d); flex-shrink: 0; }
.etq-steps-top .etq-step-left .hicon svg { width: 18px; height: 18px; }
.etq-steps-top .etq-step-left .ht { line-height: 1.2; }
.etq-steps-top .etq-step-left .ht h2 { font-family: var(--fdisp); font-weight: 800; font-size: 16px; color: var(--tl-dd); margin: 0; }
.etq-steps-top .etq-step-left .ht p { margin: 2px 0 0; font-size: 11.5px; color: var(--gray-600); }
.etq-steps-top .etq-step-right .step-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-d); background: var(--tl-100); padding: 4px 10px; border-radius: 999px; }
.etq-steps-top .steps .track,
.etq-steps-top .steps .track-fill { display: none; }
.etq-steps-top .step { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 5px 4px; position: relative; }
.etq-steps-top .step .dot { position: relative; z-index: 1; width: 26px; height: 26px; font-size: 13px;}
.etq-steps-top .step .dot svg { width: 13px; height: 13px; }
.etq-steps-top .step::before { content: ''; position: absolute; top: 18px; left: calc(50% + 13px); width: calc(100% - 26px); height: 2px; background: var(--gray-200); z-index: 0; }
.etq-steps-top .step:last-child::before { display: none; }

/* ─── Modal EP — Grid headers: glassmorphism petrol claro ───────────────── */
.coleta-modal .gt th {
  background: linear-gradient(180deg,#eef6f7,#e4eff1);
  color: #0a4d5e;
  font-weight: 700;
  font-size: 11.5px;
  border-bottom: 1.5px solid #c8dce0;
  position: sticky; top: 0; z-index: 2;
}
.coleta-modal .gt th:not(:empty):hover {
  background: linear-gradient(180deg,#dff0f2,#d0e5e9);
  color: #003644;
}
/* filter row */
.coleta-modal .gt thead > tr:nth-child(2) > th {
  top: 28px;
  background: #f8fbfc !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid #c8dde6;
  box-shadow: none;
}
/* filter inputs */
.ep-col-filter {
  width: 100%; box-sizing: border-box;
  font-size: 11px; font-family: inherit;
  padding: 3px 6px; border-radius: 4px;
  border: 1px solid #c5d9df;
  background: #fff;
  color: #1a2e35; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ep-col-filter::placeholder { color: #8aadb8; font-style: italic; }
.ep-col-filter:focus {
  border-color: #2fa4a9;
  box-shadow: 0 0 0 2px rgba(47,164,169,.15);
}
/* resize + sort + overflow */
.coleta-modal .gt td,
.coleta-modal .gt thead > tr:first-child > th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* separadores de linha e coluna reforçados */
.coleta-modal .gt td {
  border-bottom: 1.7px solid #e2eaec;
  border-right: 1.7px solid #cddde2;
}
.coleta-modal .gt td:last-child { border-right: none; }
.coleta-modal .gt thead > tr:first-child > th {
  border-right: 1.7px solid #9bbbc4;
}
.coleta-modal .gt thead > tr:first-child > th:last-child { border-right: none; }
/* coluna de seleção: sem ellipsis */
.coleta-modal .gt td:first-child,
.coleta-modal .gt thead > tr:first-child > th:first-child {
  text-overflow: clip;
  overflow: visible;
}
[data-ep-sort-etq], [data-ep-sort-end], [data-gl-sort] { cursor: pointer; user-select: none; }
.ep-sort-icon {
  margin-left: 3px;
  font-style: normal;
  opacity: .38;
  font-size: 9px;
  vertical-align: middle;
  pointer-events: none;
}
.ep-sort-asc .ep-sort-icon,
.ep-sort-desc .ep-sort-icon { opacity: 1; }
.ep-col-resize-handle {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 4;
  background: transparent;
  transition: background .15s;
}
.ep-col-resize-handle:hover,
.ep-col-resize-handle.ep-resizing { background: rgba(47,164,169,.4); }
.etq-steps-top .step.done::before { background: var(--tl-dd); }
.etq-steps-top .step .lbl b { font-size: 11px; white-space: nowrap; }
.etq-steps-top .step .lbl small { display: none; }

/* live panel compacto ao lado do stepper */
.etq-steps-top .live { flex: 0 0 220px; border-radius: 0; padding: 5px 12px; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; }
.etq-steps-top .live::after { display: none; }
.etq-steps-top .live .eyebrow { font-size: 9px; }
.etq-steps-top .live .total { font-size: 22px; line-height: 1; }
.etq-steps-top .live .total-lbl { font-size: 10px; }
.etq-steps-top .live .breakdown { margin-top: 2px; }
.etq-steps-top .live .live-etq-preview,
.etq-steps-top .live .live-barcode { display: none; }
.etq-steps-top .live .live-marcos { margin-top: 3px; gap: 2px; }
.etq-steps-top .live .live-marco { font-size: 10.5px; }
.etq-steps-top .live .live-doc-chips { margin-top: 3px; gap: 3px; }
.etq-steps-top .live .live-chip { padding: 3px 7px; }
.etq-steps-top .live .live-chip .txt { font-size: 11px; }
.etq-steps-top .live .live-hint { font-size: 11px; margin-top: 3px; line-height: 1.4; }

/* grade: painel ocupa largura e altura totais */
.etq-wiz-cri { grid-template-columns: 1fr !important; grid-template-rows: 1fr; }

@media (max-width: 1180px) {
  .etq-steps-top .live { flex-basis: 200px; }
  .filtros-row { flex-wrap: wrap; }
  .filiais-field-wrap, .etq-periodo-group, .etq-forn-group { flex: 1 1 100%; }
}
@media (max-width: 900px) {
  .op-cards { grid-template-columns: 1fr; }
  .filtros-row { flex-wrap: wrap; }
  .filiais-field-wrap, .etq-periodo-group, .etq-forn-group { flex: 1 1 100%; }
}
@media (max-width: 768px) {
  .etq-steps-top .live { display: none; }
  .inicio-layout { grid-template-columns: 1fr; padding: 16px; }
  .inicio-flow-panel { display: none; }
}
@media (max-width: 480px) {
  .periodo-row { grid-template-columns: 1fr; }
  .forn-row { grid-template-columns: 1fr 32px; }
  .periodo-ctrl-row { flex-wrap: wrap; }
  .etq-field-group { min-width: 100%; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .op-card, .op-seg-btn, .d-row, .gt-row { transition: none !important; animation: none !important; }
}

/* ── Breakpoints para telas muito pequenas ─────────────── */
@media (max-width: 375px) {
  .login-card { padding: 20px 12px; }
  .modal { width: calc(100vw - 16px); }
  .modal-body { padding: 12px; }
  .page-actions { gap: 6px; }
  .oc-head { gap: 8px; }
}

@media (max-width: 320px) {
  html { font-size: 13px; }
  .login-card { padding: 16px 10px; }
  .modal { width: 100vw; border-radius: 0; }
}

/* ===== Modal Composição de Etiquetas (cm-*) ===== */
/* Tokens do UpSoftware Design System para este modal */
.cm-ovl, .cm-ovl * { --up-blue-900: #14192E; --up-blue-800: #1F2A44; --up-blue-700: #2C2F6B; --up-navy: #0B2545; }
.cm-ovl, .cm-ovl * { --up-gray-050: #FAFAFA; --up-gray-100: #F5F5F5; --up-gray-200: #EBEBEB; --up-gray-300: #DCDCDC; --up-gray-400: #C8C8C8; --up-gray-500: #9A9A9A; --up-gray-700: #4A4A4A; --up-gray-900: #1A1A1A; }
.cm-ovl, .cm-ovl * { --cm-border: #EBEBEB; --cm-border-strong: #DCDCDC; --cm-fg: #1A1A1A; --cm-fg-muted: #4A4A4A; --cm-fg-subtle: #9A9A9A; --cm-surface: #FFFFFF; --cm-warning: #D9A400; --cm-danger: #D14343; }
.cm-ovl, .cm-ovl * { --cm-gradient-navy: linear-gradient(160deg, #14192E 0%, #1F2A44 60%, #2C2F6B 100%); --cm-gradient-petrol: linear-gradient(135deg, #003644 0%, #0a4d5e 55%, #2c8aa0 100%); }
.cm-ovl, .cm-ovl * { --cm-shadow-xl: 0 24px 60px rgba(10,20,40,.20); --cm-shadow-sm: 0 2px 6px rgba(10,20,40,.08); --cm-shadow-md: 0 6px 20px rgba(10,20,40,.12); }
.cm-ovl, .cm-ovl * { --cm-radius-lg: 14px; --cm-radius-md: 10px; --cm-radius-sm: 6px; --cm-dur-fast: 120ms; --cm-ease-out: cubic-bezier(0.22,1,0.36,1); }

/* Overlay */
.cm-ovl {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center; padding: 28px;
  transition: padding .2s;
  background:
    radial-gradient(700px 420px at 80% 115%, rgba(0,54,68,0.18), transparent 60%),
    rgba(11,18,38,0.62);
}

/* Shell */
.cm-modal {
  width: min(1160px, 100%); height: min(660px, 100%);
  background: var(--cm-surface); border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-xl); overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px; color: var(--cm-fg);
  transition: width .2s, height .2s, max-width .2s, max-height .2s, border-radius .2s;
}

/* Header — definido globalmente em .cm-head acima */
.cm-plate {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16);
  position: relative; z-index: 1;
}
.cm-plate svg { width: 18px; height: 18px; color: #5ab5cc; }
.cm-htitle { position: relative; z-index: 1; line-height: 1.15; }
.cm-htitle b { font-family: "Saira", system-ui, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: .005em; display: block; color: #fff; }
.cm-htitle span { font-size: 11px; color: #5ab5cc; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.cm-hspace { flex: 1; }
.cm-lanc { position: relative; z-index: 1; text-align: right; font-size: 13px; color: rgba(255,255,255,0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.cm-lanc b { color: #fff; font-weight: 700; }
.cm-lanc-n { font-family: "JetBrains Mono", monospace; }
.cm-x {
  position: relative; z-index: 1; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85);
  display: grid; place-items: center; cursor: pointer;
  transition: all var(--cm-dur-fast); flex-shrink: 0;
}
.cm-x svg { width: 15px; height: 15px; }
.cm-x:hover { background: rgba(209,67,67,0.9); border-color: transparent; color: #fff; }
/* Maximizado */
.cm-ovl.is-max { padding: 4px; }
.cm-ovl.is-max .cm-modal { width: 100%; height: calc(100vh - 8px); max-height: calc(100vh - 8px); border-radius: 6px; }
.cm-ovl.is-max .cm-body { flex: 1; min-height: 0; }

/* Body — 3 painéis */
.cm-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 220px 268px 1fr;
  overflow: hidden;
}
.cm-pane {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--cm-border);
}
.cm-pane:last-child { border-right: none; }
.cm-pane-head {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px; border-bottom: 1.5px solid rgba(0,54,68,0.14);
  background: linear-gradient(to right, rgba(0,54,68,0.06), rgba(0,54,68,0.02)); flex-shrink: 0;
}
.cm-pane-head .cm-pic { display: flex; align-items: center; color: #1a7a8a; flex-shrink: 0; }
.cm-pane-head .cm-pic svg { width: 15px; height: 15px; }
.cm-pt {
  font-size: 10.5px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: #003644;
}
.cm-count {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  color: #fff; background: #003644;
  padding: 2px 8px; border-radius: 999px;
}
.cm-pane-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}

/* Painel Composição */
.cm-comp { min-height: 0; flex: 1; display: flex; flex-direction: column; border-right: none; }
.cm-comp-head {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 18px; border-bottom: 1.5px solid rgba(0,54,68,0.14);
  background: linear-gradient(to right, rgba(0,54,68,0.06), rgba(0,54,68,0.02)); flex-shrink: 0;
}
.cm-ct {
  font-size: 13px; font-weight: 700; color: #14192E;
  min-width: 0; display: flex; align-items: center; gap: 8px; flex: 1;
}
.cm-ct-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-ct-seq { color: #003644; font-family: "JetBrains Mono", monospace; margin-right: 4px; }
.cm-balance {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--cm-border); background: var(--cm-surface);
  color: var(--cm-fg-muted); transition: all var(--cm-dur-fast);
}
.cm-balance .cm-bn { font-family: "JetBrains Mono", monospace; }
.cm-bal-dot { width: 8px; height: 8px; border-radius: 50%; background: #D9A400; flex-shrink: 0; }
/* pendente (default) — âmbar preenchido, mesma intensidade visual do ok */
.cm-balance { border-color: transparent !important; background: #FEF3C7; color: #92400E; }
.cm-balance .cm-bal-dot { background: #D9A400; }
.cm-balance.ok { background: #CFF0D9; color: #1F5F5B; }
.cm-balance.ok .cm-bal-dot { background: #2E8B7E; }
.cm-balance.over { background: #FCEBEB; color: #D14343; }
.cm-balance.over .cm-bal-dot { background: #D14343; }
.cm-comp-scroll { flex: 1; min-height: 0; overflow: auto; }
.cm-comp-scroll .cm-tbl { min-width: max-content; }
.cm-comp-scroll .cm-tbl .cm-col-cod:last-child,
.cm-comp-scroll .cm-tbl td:last-child,
.cm-comp-scroll .cm-tbl th:last-child { padding-right: 16px; }

/* Painel 1 — Cards de Produto */
.cm-prod {
  position: relative; text-align: left; width: 100%;
  border: 1px solid var(--cm-border); border-radius: var(--cm-radius-md);
  background: var(--cm-surface); padding: 13px 14px 14px 16px;
  transition: all var(--cm-dur-fast) var(--cm-ease-out); overflow: hidden;
  cursor: pointer;
}
.cm-prod::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background var(--cm-dur-fast);
}
.cm-prod:hover { border-color: #2c8aa0; }
.cm-prod.sel { border-color: #2c8aa0; background: #e1edf0; }
.cm-prod.sel::before { background: var(--cm-gradient-petrol); }
.cm-prod-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cm-prod-dot { width: 9px; height: 9px; border-radius: 50%; background: #DCDCDC; flex-shrink: 0; }
.cm-prod.sel .cm-prod-dot { background: #003644; box-shadow: 0 0 0 4px rgba(0,54,68,0.16); }
.cm-prod-name { font-size: 13px; font-weight: 700; color: #14192E; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-prod-bar { height: 6px; border-radius: 999px; background: #EBEBEB; overflow: hidden; margin-bottom: 7px; }
.cm-prod-fill { display: block; height: 100%; border-radius: 999px; background: var(--cm-gradient-petrol); transition: width 320ms ease-out; }
.cm-prod-qty { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.cm-pq-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cm-pq-label { font-family: "Inter", system-ui, sans-serif; font-size: 10px; color: #9A9A9A; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.cm-pqa { font-family: "JetBrains Mono", monospace; font-size: 13px;font-weight: 700; color: #003644; white-space: nowrap; }
.cm-pqb { font-family: "JetBrains Mono", monospace; font-size: 13px;font-weight: 700; color: #6c757d; white-space: nowrap; }
.cm-pqu { font-family: "Inter", system-ui, sans-serif; font-size: 10px; color: #9A9A9A; font-weight: 600; letter-spacing: .04em; }
.cm-prod-done { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; font-size: 10.5px; font-weight: 700; color: #003644; }
.cm-prod-done svg { width: 12px; height: 12px; }
.cm-prod-toggle { display: block; margin-top: 7px; font-size: 10px; font-weight: 600; color: #2fa4a9; letter-spacing: .04em; text-align: center; cursor: pointer; }
.cm-prod-toggle:hover { color: #003644; }
.cm-prod-details { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cm-border); display: flex; flex-direction: column; gap: 3px; }
.cm-pd-row { display: flex; justify-content: space-between; gap: 6px; }
.cm-pd-k { font-size: 10px; color: #9A9A9A; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.cm-pd-v { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #003644; font-weight: 600; text-align: right; }

/* Painel 2 — Cards de Volume */
.cm-vol {
  position: relative; text-align: left; width: 100%;
  border: 1px solid var(--cm-border); border-radius: var(--cm-radius-md);
  background: var(--cm-surface); padding: 12px 14px; cursor: pointer;
  transition: all var(--cm-dur-fast) var(--cm-ease-out);
}
.cm-vol:hover:not(.cm-vol-used) { border-color: #2c8aa0; box-shadow: var(--cm-shadow-sm); transform: translateY(-1px); }
.cm-vol.active { border-color: #2c8aa0; box-shadow: 0 0 0 3px rgba(0,54,68,0.14); }
.cm-vol.cm-vol-used { opacity: .55; cursor: default; }
.cm-vol-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; white-space: nowrap; }
.cm-vol-no { font-family: "Saira", system-ui, sans-serif; font-weight: 700; font-size: 16px; color: #14192E; letter-spacing: .01em; }
.cm-vol-qty { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 15px; color: #003644; }
.cm-vol-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 11px; }
.cm-vm { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cm-vmk { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #9A9A9A; font-weight: 700; }
.cm-vmv { font-size: 13px;color: #4A4A4A; font-family: "JetBrains Mono", monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-vbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #003644; background: #e1edf0; padding: 4px 9px; border-radius: 999px; }
.cm-vbadge svg { width: 11px; height: 11px; }
.cm-vbadge.cm-vbadge-un { color: #9A9A9A; background: #F5F5F5; }
.cm-vol-copy {
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid #DCDCDC; background: #fff;
  color: #003644; display: grid; place-items: center;
  cursor: pointer; transition: all 120ms; position: relative;
}
.cm-vol-copy svg { width: 13px; height: 13px; pointer-events: none; }
.cm-vol-copy:hover { background: #e1edf0; border-color: #2c8aa0; color: #003644; }
.cm-vol-copy:active { transform: scale(.93); }

/* Tabela de Composição */
.cm-tbl {
  width: max-content; min-width: 100%;
  table-layout: auto;
  border-collapse: separate; border-spacing: 0; font-size: 12.5px;
}
.cm-tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg,#eef6f7,#e4eff1);
  text-align: left; font-size: 11.5px;
  color: #0a4d5e; font-weight: 700;
  padding: 7px 10px; border-bottom: 1.5px solid #c8dce0;
  white-space: nowrap;
}
.cm-th-idx, .cm-td-idx { width: 1px; white-space: nowrap; padding: 0 6px !important; text-align: center; }
.cm-th-act { width: 46px; }
.cm-col-cod { white-space: nowrap; }
.cm-cod-etq {
  font-size: 12.5px; color: #6A6A6A; display: block; white-space: nowrap;
}
.cm-tbl tbody td {
  padding: 2px 8px; border-bottom: 1px solid #F5F5F5; vertical-align: middle; color: #343a40;
}
.cm-tbl tbody tr { transition: background var(--cm-dur-fast); }
.cm-tbl tbody tr:hover td { background: #FAFAFA; }
.cm-tbl tbody tr.cm-linked td { background: rgba(0,54,68,0.08); }
.cm-tbl tbody tr.cm-linked:hover td { background: rgba(0,54,68,0.12); }
.cm-seq { font-family: "JetBrains Mono", monospace; font-weight: 700; color: #003644; font-size: 13px;}
.cm-col-lote { width: 140px; min-width: 140px; }
.cm-col-qty { width: 130px; min-width: 130px; }
.cm-col-date { width: 137px; min-width: 137px; }
.cm-cin {
  width: 100%; font-size: 13px; font-family: inherit; color: #1A1A1A; padding: 3px 8px;
  border: 1px solid #DCDCDC; border-radius: var(--cm-radius-sm);
  background: #EAF6FB;
  transition: border-color var(--cm-dur-fast), box-shadow var(--cm-dur-fast);
}
.cm-cin:focus { outline: none; border-color: #0a4d5e; box-shadow: 0 0 0 3px rgba(0,54,68,0.14); }
.cm-cin-mono { font-family: inherit; }
.cm-cin-qty { text-align: right; font-weight: 600; min-width: 56px; }
.cm-cin-date { color: #4A4A4A; padding: 2px 6px; }
.cm-th-act, .cm-td-act { width: 32px; min-width: 32px; padding: 0 !important; text-align: center; }
.cm-rm {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid transparent; background: transparent;
  color: #9A9A9A; display: grid; place-items: center;
  cursor: pointer; transition: all var(--cm-dur-fast); margin: 0 auto;
}
.cm-rm svg { width: 15px; height: 15px; }
.cm-rm:hover { background: #FCEBEB; color: #D14343; }

/* Empty state */
.cm-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; text-align: center; color: #9A9A9A; padding: 40px;
}
.cm-empty-ring {
  width: 54px; height: 54px; border-radius: 50%;
  background: #e1edf0; color: #003644;
  display: grid; place-items: center;
}
.cm-empty-ring svg { width: 22px; height: 22px; }
.cm-empty b { font-size: 14px; color: #4A4A4A; }
.cm-empty p { margin: 0; font-size: 12.5px; max-width: 280px; line-height: 1.5; }

/* Footer */
.cm-foot {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-top: 1px solid var(--cm-border);
  background: #FAFAFA;
}
.cm-spacer { flex: 1; }
.cm-vr { width: 1px; height: 22px; background: var(--cm-border); flex-shrink: 0; }
.cm-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; padding: 7px 14px;
  border-radius: var(--cm-radius-md); border: 1px solid #DCDCDC;
  background: var(--cm-surface); color: #4A4A4A;
  transition: all var(--cm-dur-fast); white-space: nowrap; cursor: pointer;
  font-family: "Inter", system-ui, sans-serif;
}
.cm-btn:disabled { opacity: .5; cursor: not-allowed; }
.cm-btn svg { flex-shrink: 0; width: 15px; height: 15px; }
.cm-btn:not(:disabled):hover { border-color: #2c8aa0; color: #003644; }
.cm-btn-add { border-style: dashed; color: #003644; border-color: #DCDCDC; }
.cm-btn-add:not(:disabled):hover { background: #e1edf0 !important; border-color: #2c8aa0 !important; border-style: dashed !important; }
.cm-btn-ghost { border-color: transparent; background: transparent; }
.cm-btn-ghost:not(:disabled):hover { background: #F5F5F5 !important; color: #1A1A1A !important; border-color: transparent !important; }
.cm-btn-danger { border-color: transparent; background: transparent; color: #D14343 !important; }
.cm-btn-danger:not(:disabled):hover { background: #FCEBEB !important; border-color: transparent !important; }
.cm-btn-danger:disabled { color: #C8C8C8 !important; }
.cm-btn-primary {
  background: #003644; border-color: #003644; color: #fff !important;
  box-shadow: var(--cm-shadow-sm); padding: 10px 22px; font-weight: 700;
}
.cm-btn-primary:not(:disabled):hover {
  background: #0a4d5e !important; border-color: #0a4d5e !important;
  transform: translateY(-1px); box-shadow: var(--cm-shadow-md) !important;
  color: #fff !important;
}
.cm-btn-primary:active { transform: translateY(0); }

/* Estados de carregamento/vazio dentro dos painéis */
.cm-empty-sm, .cm-loading-sm {
  padding: 20px 12px; text-align: center; font-size: 13px;color: #9A9A9A; line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .cm-prod .cm-prod-fill { transition: none !important; }
  .cm-vol { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Botão Vincular Produto — passo Aptos. (Assistente de Endereços)
═══════════════════════════════════════════════════════════════ */
.btn-vp {
  background: var(--white); border: 1.5px solid var(--tl); color: var(--tl-dd);
  border-radius: 8px; font: 700 13px var(--fbody); padding: 0 14px; height: 32px;
  cursor: pointer; white-space: nowrap; transition: all .12s;
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-end;
}
.btn-vp:hover:not(:disabled) { background: var(--tl-100); }
.btn-vp:disabled { opacity: .45; cursor: not-allowed; }
.btn-vp svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Estrutura física no passo Aptos. — coluna do grid + retorno da aplicação em lote */
.rb-bar .rb-note { align-self: flex-end; padding-bottom: 8px; font: 600 12px var(--fbody); color: var(--tl-dd); }
/* Nota de confirmação em lote FORA da faixa (ver rbBlock no JS da tela): linha
   própria entre a faixa e a barra de contagem. Vazia, não ocupa altura nenhuma —
   é o :empty que impede a linha de reservar espaço no repouso. */
.wiz .rb-note { display: block; margin: 8px 0 0; font: 600 12px var(--fbody); color: var(--tl-dd); }
.wiz .rb-note:empty { display: none; }
/* Uma linha só, sem quebrar — texto sem limite podia deixar a linha do grid mais
   alta que as demais (2+ linhas), o que descombina a altura fixa que a virtualização
   do Assistente de Endereços assume para todas as linhas. Texto completo no title. */
.est-nome, .est-falta { display: inline-block; max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; }
.est-nome { font-size: 13px; color: var(--gray-700); }
.est-falta { font: 700 12px var(--fbody); color: #c0473b; }

/* ═══════════════════════════════════════════════════════════════
   Modal — Vincular Produto a Endereços Picking (ae-modal-vinc-prod.js)
═══════════════════════════════════════════════════════════════ */
.vp-overlay {
  position: fixed; inset: 0; background: rgba(2,14,18,.55); backdrop-filter: blur(3px); z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 24px; animation: cm-fade .15s ease;
  /* espelho das variáveis do .wiz — necessário pois o modal vive fora desse escopo */
  --tl: #2fa4a9; --tl-d: #1c7b80; --tl-dd: #003644;
  --tl-100: rgba(47,164,169,.12);
  --gray-50: #f8f9fa; --gray-100: #f1f3f4; --gray-200: #e9ecef;
  --gray-300: #dee2e6; --gray-400: #ced4da; --gray-500: #adb5bd;
  --gray-600: #6c757d; --gray-700: #495057; --gray-800: #343a40;
  --white: #ffffff;
  --fbody: "Inter", "Segoe UI", system-ui, sans-serif;
  --sh-brand: 0 14px 32px rgba(47,164,169,.28);
}
/* Altura fixa (e não só max-height): o layout é um split de duas colunas, e sem uma
   altura de trabalho a lista da esquerda e o painel da direita ficariam com alturas
   diferentes conforme o conteúdo. O piso continua sendo a viewport. */
.vp-modal { background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.4); width: min(1080px,100%); height: min(720px, calc(100vh - 48px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; animation: cm-pop .18s cubic-bezier(.2,.8,.3,1); transition: width .2s, height .2s, max-width .2s, max-height .2s, border-radius .2s; }
.vp-overlay.is-max { padding: 4px; }
.vp-overlay.is-max .vp-modal { width: 100%; height: calc(100vh - 8px); max-height: calc(100vh - 8px); border-radius: 6px; }
/* Maximizado: a lista ganha respiro e os cartões de produto crescem junto */
.vp-overlay.is-max .vp-split { grid-template-columns: 440px 1fr; }
/* checkboxes: borda e preenchimento petrol (#003644), igual ao assistente-etiquetas */
.vp-modal .cbx .box { border: 1.5px solid #003644; background: #ddeef4; }
.vp-modal .cbx:hover .box { border-color: #003644; background: #c8e3ec; }
.vp-modal .cbx input:checked + .box { background: #003644; border-color: #003644; }
.vp-modal .cbx input:indeterminate + .box { background: #003644; border-color: #003644; }
/* ── Split mestre e detalhe ───────────────────────────────────────
   Esquerda: a lista de endereços, compacta, com contagem e situação.
   Direita: os produtos do endereço em foco, um cartão por produto.
   Não há linha expansível: o endereço multiproduto se edita no painel. */
.vp-split { display: grid; grid-template-columns: 380px 1fr; flex: 1; min-height: 0; }
.vp-pane-l { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--gray-200); }
.vp-pane-r { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fbfcfc; }

/* barra da lista: contagem + filtros de rua, coluna e andar */
.vp-ltbar { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 8px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.vp-ltbar-row { display: flex; align-items: flex-end; gap: 8px; }
.vp-cnt { flex: 1; min-width: 0; font-size: 12.5px; color: var(--gray-600); padding-bottom: 8px; }
.vp-cnt b { color: var(--tl-dd); }
.vp-inh-hint { font-size: 10.5px; color: var(--gray-500); font-style: italic; line-height: 1.2; text-align: right; }
.vp-rca { display: flex; align-items: flex-end; gap: 6px; }
.vp-rca-f { display: flex; flex-direction: column; gap: 3px; }
.vp-rca-f label { font-size: 10px; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.vp-rca-inp { width: 58px; padding: 7px 8px; border: 1px solid var(--gray-600); border-radius: 7px; font-size: 13px; font-family: inherit; background: #fff; color: var(--gray-700); outline: none; transition: border-color .12s; -moz-appearance: textfield; }
.vp-rca-inp::-webkit-outer-spin-button, .vp-rca-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vp-rca-inp:focus { border-color: var(--tl); }

/* filtro de texto do endereço — mesma escala dos campos do sistema (13px / altura 32px).
   A lupa e o botão de limpar ficam sobrepostos ao campo, então o texto reserva o espaço
   dos dois nas laterais para não passar por baixo deles. */
.vp-busca { position: relative; display: flex; align-items: center; }
.vp-busca-ico { position: absolute; left: 9px; display: flex; align-items: center; color: var(--gray-500); pointer-events: none; }
.vp-busca-inp { flex: 1; min-width: 0; height: 32px; padding: 0 92px 0 30px; border: 1px solid var(--gray-600); border-radius: 7px; font-size: 13px; font-family: inherit; background: #fff; color: var(--gray-700); outline: none; transition: border-color .12s; }
.vp-busca-inp::placeholder { color: var(--gray-500); }
.vp-busca-inp:focus { border-color: var(--tl); }
.vp-busca-x { position: absolute; right: 66px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--gray-200); color: var(--gray-700); font-size: 11px; line-height: 1; cursor: pointer; padding: 0; transition: background .12s; }
.vp-busca-x:hover { background: var(--gray-300); }
.vp-busca-cnt { position: absolute; right: 10px; font-size: 11px; font-weight: 600; color: var(--gray-500); white-space: nowrap; pointer-events: none; }

/* lista de endereços */
/* A coluna da direita foi de 124px para 168px ao ganhar a pílula de categoria: a de vínculo
   carrega a contagem junto com o estado das faixas ("2 de 3 sem faixa") e precisa da linha
   inteira. O endereço fica com o restante e trunca com reticências quando não couber. */
.vp-lhead, .vp-lrow { display: grid; grid-template-columns: 36px 1fr 168px; align-items: center; }
.vp-lhead { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.vp-lhead > div { padding: 8px 12px; font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
.vp-llist { flex: 1; min-height: 0; overflow-y: auto; }
/* Linha-espaçadora da virtualização (ae-modal-vinc-prod): representa o bloco de
   endereços fora da janela renderizada — sem hover, sem clique, sem borda. */
.vp-spacer { pointer-events: none; }
.vp-lrow { border-bottom: 1px solid var(--gray-100); cursor: pointer; }
.vp-lrow > div { padding: 9px 12px; min-width: 0; }
.vp-ctr { padding: 8px 0 !important; display: flex; align-items: center; justify-content: center; }
.vp-rgt { text-align: right; }
.vp-lrow:hover:not(.vp-foco):not(.vp-sel) { background: var(--gray-50); }
.vp-lrow.vp-sel { background: var(--tl-100); }
.vp-lrow.vp-foco { background: #e3f1f2; }
.vp-lrow.vp-foco > div:first-child { box-shadow: inset 3px 0 0 var(--tl); }
.vp-lsub { display: block; margin-top: 1px; font-size: 11px; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-lvazio { padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--gray-600); line-height: 1.5; }

/* pílula de situação do endereço */
.vp-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; max-width: 100%; min-width: 0; }
.vp-pill-txt { overflow: hidden; text-overflow: ellipsis; }
/* A pílula de vínculo carrega uma frase ("2 de 3 sem faixa"), não um rótulo de uma palavra.
   Em caixa alta com espaçamento ela não cabe na coluna e era cortada no meio. Caixa normal
   encurta o texto em torno de um quarto e ainda ganha legibilidade: frase se lê melhor assim.
   As pílulas de rótulo (categoria) seguem em caixa alta. */
.vp-pill-frase { text-transform: none; letter-spacing: 0; font-size: 10.5px; gap: 0; }
/* Sem o ponto: são mais 11px de texto, e numa frase ele não acrescenta nada — o estado já
   está escrito e a cor de fundo o reforça. */
.vp-pill-frase .vp-dot { display: none; }
.vp-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.vp-pill-ok { background: #d1fae5; color: #047857; }
.vp-pill-pend { background: #fef3c7; color: #92400e; }
.vp-pill-none { background: var(--gray-100); color: var(--gray-500); }
.vp-pill-pulmao { background: #e8f0f4; color: #4a7a8a; }
/* vínculo: o endereço tem produto parametrizado. Azul para não se confundir com o verde de
   faixa completa nem com o petrol acinzentado da categoria Pulmão. */
.vp-pill-vinc { background: #dbeafe; color: #1d4ed8; }
.vp-pill-pick { background: #ede9fe; color: #6d28d9; }
/* Categoria (Picking/Pulmão) é atributo fixo do endereço e não muda com a edição: entra na
   versão compacta, sem o ponto, para as três pílulas caberem em duas linhas. */
.vp-pill-cat { font-size: 9.5px; padding: 3px 7px; gap: 0; }
.vp-pill-cat .vp-dot { display: none; }
/* As pílulas da coluna Situação fluem da direita para a esquerda e quebram em duas linhas.
   Não muda a altura da linha: a coluna do endereço já ocupa duas linhas de texto, e as
   pílulas cabem nesse mesmo espaço. */
.vp-lrow .vp-rgt { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: flex-end; gap: 3px; }
.vp-addr { font-weight: 700; color: var(--tl-dd); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Painel do endereço em foco ───────────────────────────────── */
.vp-rhead { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--gray-200); background: #f0f9f9; flex-shrink: 0; }
.vp-rtitle { font-family: var(--fdisp, "Saira", "Segoe UI", sans-serif); font-size: 15px; font-weight: 700; color: var(--tl-dd); line-height: 1.2; }
.vp-rspace { flex: 1; }
.vp-rbody { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; }
.vp-rlbl { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }
.vp-plist { display: flex; flex-direction: column; gap: 8px; }

/* um cartão por produto: identidade à esquerda, a faixa daquele par à direita */
.vp-pcard { display: grid; grid-template-columns: 1fr 124px 124px 32px; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 9px 12px; }
.vp-pcard.vp-pc-miss { border-color: #fde68a; background: #fffbeb; }
.vp-pc-id { min-width: 0; }
.vp-pcod { font-weight: 700; color: var(--green-mid, #0a4d5e); font-size: 13px; }
.vp-pun { color: var(--gray-500); font-size: 11px; }
.vp-pnome { display: block; margin-top: 1px; font-size: 12.5px; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-fld label { display: block; font-size: 10px; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.vp-qtd-inp { width: 100%; padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 12.5px; font-family: var(--fbody); text-align: right; }
.vp-qtd-inp:disabled { background: var(--gray-50); color: var(--gray-300); cursor: not-allowed; }
.vp-qtd-inp:focus { outline: none; border-color: var(--tl); box-shadow: 0 0 0 2px rgba(47,164,169,.15); }
.vp-qtd-inp.vp-qtd-missing { border-color: #e53e3e; background: #fef2f2; }
.vp-qtd-na { display: block; text-align: center; color: var(--gray-400); font-size: 13px; padding-top: 14px; }
.vp-del-prod { width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--gray-400); font-size: 13px; line-height: 1; cursor: pointer; }
.vp-del-prod:hover { border-color: #e53e3e; background: #fef2f2; color: #e53e3e; }
.vp-rvazio { border: 1px dashed #cfe0e6; border-radius: 10px; padding: 22px; text-align: center; color: var(--gray-600); font-size: 12.5px; line-height: 1.5; background: var(--white); }
.vp-rvazio b { display: block; color: var(--tl-dd); font-size: 13px; margin-bottom: 3px; }
/* Bloco de escolha do produto: fica no rodapé do painel direito, fora da área que
   re-renderiza. Assim trocar o endereço em foco não apaga o produto já escolhido —
   ele alimenta tanto "Acrescentar aqui" quanto "Vincular aos selecionados". */
.vp-radd { border-top: 1px solid var(--gray-200); padding: 12px 18px 14px; flex-shrink: 0; background: var(--gray-50); }
.vp-prod-row { display: flex; gap: 8px; align-items: center; }
.vp-inp-cod { width: 100px; border: 1px solid var(--gray-600); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: var(--fbody); }
.vp-inp-cod:focus { outline: none; border-color: var(--tl); box-shadow: 0 0 0 3px rgba(47,164,169,.15); }
.vp-inp-nome { flex: 1; border: 1px solid var(--gray-200); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: var(--fbody); background: var(--white); color: var(--gray-700); }
.vp-btn-ico { background: transparent; border: 1px solid var(--gray-600); border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--gray-700); transition: all .12s; font-size: 12px; flex-shrink: 0; }
.vp-btn-ico:hover { border-color: #e53e3e; color: #e53e3e; }
.vp-btn-lupa { border-color: var(--gray-600); color: var(--gray-700); }
.vp-btn-lupa:hover { border-color: #003644; color: #003644; background: rgba(0,54,68,.06); }
.vp-btn-save { background: #003644; color: #fff; border: none; padding: 0 16px; height: 32px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s; white-space: nowrap; }
.vp-btn-save:hover { background: #001f2d; }
.vp-btn-aqui { background: var(--tl-dd); color: #fff; border: none; padding: 0 14px; height: 32px; border-radius: 8px; font: 600 13px var(--fbody); cursor: pointer; transition: background .12s; white-space: nowrap; flex-shrink: 0; }
.vp-btn-aqui:hover:not(:disabled) { background: var(--tl-d); }
.vp-btn-aqui:disabled { opacity: .45; cursor: not-allowed; }
.vp-prod-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vp-prod-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px 3px 9px; background: var(--white); border: 1px solid var(--gray-300); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--tl-dd); }
.vp-prod-chip .cod { font-family: var(--fmono, monospace); font-size: 10.5px; color: var(--gray-600); flex-shrink: 0; }
.vp-prod-chip .nome { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-prod-chip-x { border: none; background: none; cursor: pointer; color: var(--tl-dd); opacity: .55; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; padding: 0; flex-shrink: 0; font-size: 10px; }
.vp-prod-chip-x:hover { opacity: 1; background: rgba(0,54,68,.12); }
.vp-prod-hint { font-size: 11px; color: var(--gray-600); margin-top: 6px; line-height: 1.45; }
.vp-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--gray-200); flex-shrink: 0; }
.vp-btn { border-radius: 8px; font: 600 13px var(--fbody); padding: 7px 16px; cursor: pointer; transition: all .12s; border: 0; }
.vp-btn:disabled { opacity: .45; cursor: not-allowed; }
.vp-btn-prim { background: var(--tl-dd); color: #fff; box-shadow: 0 2px 8px rgba(0,54,68,.3); }
.vp-btn-prim:hover:not(:disabled) { background: var(--tl-d); transform: translateY(-1px); }
.vp-btn-ghost { background: transparent; border: 1px solid var(--gray-300); color: var(--gray-600); }
.vp-btn-ghost:hover:not(:disabled) { border-color: #e53e3e; color: #e53e3e; }
.vp-btn-danger { background: transparent; border: 1px solid var(--gray-300); color: var(--gray-600); font-size: 12.5px; }
.vp-btn-danger:hover:not(:disabled) { border-color: #e53e3e; color: #e53e3e; }
.vp-feedback { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; }
.vp-fb-ok { background: #d1fae5; color: #065f46; }

/* ═══════════════════════════════════════════════════════════════
   PAINEL GERENCIAL DE REPOSIÇÃO  (por-*)
   ═══════════════════════════════════════════════════════════════ */

/* Shell geral */
.por-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(16,44,52,.04), 0 12px 26px -18px rgba(0,54,68,.32);
}
.por-det-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(16,44,52,.04), 0 12px 26px -18px rgba(0,54,68,.32);
}

/* ── Barra de filtros ────────────────────────────────────────── */
.por-filters {
  padding: 12px 12px 0;
  flex-shrink: 0;
}
.por-filters .wms-card { margin-bottom: 0; }
.por-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.por-field { display: flex; flex-direction: column; gap: 4px; }
/* --gray-600 e não --gray-500: sobre branco o #adb5bd dá 2,07:1 e reprova em
   qualquer critério de contraste, num rótulo de 11px que o usuário precisa ler
   para saber o que está filtrando. O #6c757d dá 4,69:1 e passa AA. Só cor muda,
   sem métrica: não há risco de refluxo nas linhas de filtro. */
.por-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.por-req { color: #c0392b; font-size: 13px; }
/* chevron de recolher/expandir no título do card de filtros */
.por-filters .wms-collapse-btn { margin-left: auto; color: var(--gray-600); }
.por-filters .wms-collapse-btn:hover { background: var(--gray-100); color: #003644; }
.por-field input,
.por-field select {
  border: 1.5px solid var(--gray-400);
  border-radius: 8px;
  height: 34px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: var(--gray-800);
  background: var(--white);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
/* todos os campos flexionam proporcionalmente: a linha preenche a
   largura total e os vãos entre componentes ficam uniformes (gap) */
.por-field--dep  { flex: 3 1 150px; }
.por-field--date { flex: 0 0 110px; }
.por-field--num  { flex: 1 0 92px;  }
.por-field--stat { flex: 1 0 130px; }
/* PISO EXPLÍCITO NOS CAMPOS DE COMBO — sem ele a medida do campo muda a cada
   seleção. O app.js converte todo <select> num combo pesquisável (.ss-wrap com
   um botão .ss-control que mostra o texto da opção), e o mínimo automático de um
   flex item é o min-content do que ele contém: com o texto da opção escolhida ali
   dentro, esse mínimo cresce quando o usuário escolhe um depósito de nome longo,
   a linha se redistribui e os campos vizinhos mudam de tamanho junto.
   Qualquer min-width declarado desliga esse mínimo automático, e a medida passa a
   vir só do flex. Os valores ficam abaixo da base (150px e 130px) para não alterar
   o layout: eles só entram em cena quando a linha aperta, e é aí que evitam o
   campo colapsar. O texto que não couber é cortado pelo .ss-label, que já tem
   text-overflow: ellipsis.
   Vale para os quatro painéis (O.C., O.R., O.I. e Gerencial). Campos de data e
   número não precisam: input nativo tem medida própria, independente do valor. */
.por-field--dep  { min-width: 120px; }
.por-field--stat { min-width: 110px; }
.por-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  cursor: pointer;
}
/* .oc-filtros trava input[type=date] em 118px; aqui o campo deve
   preencher o contêiner flex como os demais, senão sobra vão interno */
.por-filters input[type="date"] { width: 100%; }
.por-field input:focus,
.por-field select:focus {
  outline: none;
  border-color: #003644;
  box-shadow: 0 0 0 3px rgba(0,54,68,.12);
}
.por-field--btn { justify-content: flex-end; }
/* ── Filtros do painel da O.I.: UMA linha, sem folga em branco ───────────────
   Os .por-field--* são compartilhados com os painéis da O.C. e da O.R., onde os
   campos dividem a linha por flex-grow — aqui cada um tem medida própria, porque
   com grow a largura de um campo passa a depender de quantos vizinhos a linha tem.
   Só o Depósito é elástico: ele absorve toda a folga, então a linha termina na
   borda do cartão em qualquer largura de janela, sem buraco em branco. Nenhum
   campo muda de medida ao trocar a opção selecionada.
   min-width: 0 é o que impede a opção mais longa do combo (nome de depósito) de
   esticar o campo além da medida — sem ele o mínimo automático do flex item é o
   min-content, e o combo mudava de largura conforme a seleção.
   O Depósito é o campo que cede largura: o período leva as duas datas MAIS o
   segmentado Criação/Efetivação ao lado delas (~400px), e o que resta da linha vai
   para ele. Por isso o piso é baixo (110px) — é o que evita a quebra de linha nas
   janelas menores; em tela larga ele cresce e mostra o nome do depósito inteiro.
   A BASE do Depósito é 140px, não `auto`: com base automática o tamanho hipotético
   do campo é o da opção mais longa do combo (nome de depósito, ~330px), e a linha
   quebrava por causa dele mesmo tendo espaço de sobra depois de distribuída. */
/* Vãos menores que os 12px dos outros painéis: esta linha é a mais cheia do
   sistema, e cada pixel economizado aqui vira largura do Depósito, que é quem
   recebe a folga. 8px ainda separa visualmente um campo do rótulo do vizinho. */
.oi-filtros .por-filter-row { gap: 8px; }
.oi-filtros .por-field { flex: 0 0 auto; min-width: 0; }
.oi-filtros .por-field--dep  { flex: 1 1 100px; min-width: 100px; }
.oi-filtros .por-field--stat { width: 142px; }
.oi-filtros .por-field--num  { width: 62px;  }
/* Período e Tipo de data sem medida fixa: o conteúdo (datas e os dois botões) tem
   texto fixo, então a largura já é estável — e travar um número aqui deixaria vão
   sobrando dentro do campo se a fonte medir diferente. */
.oi-filtros .por-field--per    { width: auto; }
.oi-filtros .por-field--toggle { width: auto; }
/* "Tipo" tem só três opções curtas (Todos/Geral/Avulso) e não precisa da medida
   do Status, cujo rótulo mais longo é "Aguardando Aprovação". Vem depois da regra
   do --stat de propósito: o campo carrega as duas classes e a última vence. */
.oi-filtros .por-field--tipo { width: 92px; }
.oi-filtros .por-field select,
.oi-filtros .por-field input { width: 100%; }
/* Texto da opção maior que o campo: corta em vez de alargar o combo. */
.oi-filtros .por-field select { text-overflow: ellipsis; }

/* Período: as duas datas num campo só, à direita do "Tipo de data" — primeiro se
   diz qual data, depois o intervalo dela. O segmentado fica na régua de 34px dos
   campos, como o "Tipo de data" da Ordem de Coleta Picking. */
.oi-filtros .oi-per-inputs { display: flex; align-items: center; gap: 5px; }
/* 119px é o mínimo em que o campo nativo mostra "dd/mm/aaaa" inteiro junto do
   ícone de calendário; abaixo disso o texto vem cortado. Os 124px dão uma folga
   pequena entre o texto e o ícone — o que sai daqui vem da largura do Depósito. */
.oi-filtros .oi-per-inputs input[type="date"] { width: 124px; }
.oi-filtros .oi-per-sep { font-size: 11px; color: var(--gray-600); }
.oi-filtros .por-field .oi-toggle { height: 34px; }
.oi-filtros .por-field .oi-toggle button {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  font-family: inherit;   /* alinha com os campos da linha */
  font-size: 12px;
  font-weight: 600;
}
/* "Mais filtros" — recolhe a linha de endereço (rua/coluna/andar). Mesmo padrão do
   Painel Gerencial da O.I.: chevron que gira, contador dos filtros ativos e a linha
   abrindo abaixo. As classes são próprias porque a CSS daquela tela é injetada por
   ela mesma, e reusá-la criaria dependência de uma tela na outra. */
.oi-frow-2 { display: none; margin-top: 12px; }
.oi-filtros.oi-adv .oi-frow-2 { display: flex; }
.oi-advbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  align-self: flex-end;   /* alinha com os campos, não com os rótulos */
  height: 34px;
  padding: 0 9px;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
  cursor: pointer;
}
.oi-advbtn:hover { border-color: #0a4d5e; color: #003644; }
.oi-advbtn:focus-visible { outline: 2px solid #2fa4a9; outline-offset: 2px; }
.oi-advbtn svg { width: 12px; height: 12px; transition: transform .18s; }
.oi-filtros.oi-adv .oi-advbtn { border-color: #0a4d5e; color: #003644; background: #eef7f8; }
.oi-filtros.oi-adv .oi-advbtn svg { transform: rotate(90deg); }
/* Buscar um pouco menor só nesta tela: a linha é a mais cheia dos painéis e cada
   pixel devolvido aqui vira largura do Depósito. Escopado em .oi-filtros porque o
   .por-btn-buscar é o mesmo dos painéis da O.C. e da O.R., que têm linha mais folgada. */
.oi-filtros .por-btn-buscar { gap: 6px; padding: 0 12px; font-size: 12.5px; }
.oi-filtros .por-btn-buscar svg { width: 14px; height: 14px; }

.oi-advbtn b {
  display: inline-grid;
  place-items: center;
  min-width: 14px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #003644;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.por-field .ss-control {
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 34px;
  font-size: 13px;
}
.por-btn-buscar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 18px;
  background: linear-gradient(135deg,#003644,#00232c);
  color: #fff;
  border: none;
  border-radius: 8px;
  font: 600 13px var(--fbody);
  cursor: pointer;
  transition: opacity .12s, transform .12s;
  white-space: nowrap;
}
.por-btn-buscar:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.por-btn-buscar svg  { width: 15px; height: 15px; }
.por-btn-buscar:disabled { opacity: .6; cursor: default; }
/* Buscando: só o ícone gira. Trocar o rótulo por "Buscando..." alarga o botão e
   reflui a linha de filtros — o efeito de tremida a cada pesquisa. */
.por-btn-buscar.is-loading svg { animation: porSpin .8s linear infinite; transform-origin: 50% 50%; }
.por-spin { display: inline-flex; animation: porSpin .8s linear infinite; }
.por-spin svg { width: 15px; height: 15px; }
@keyframes porSpin { to { transform: rotate(360deg); } }

/* ── Grid wrapper ────────────────────────────────────────────── */
.por-grid-wrap {
  flex: 1;
  overflow: auto;
  padding: 16px 20px;
}
.por-grid-wrap--sec {
  flex: none;
  overflow: auto;
  /* piso de 340px; em monitores altos a grid cresce e aproveita a tela */
  max-height: max(340px, 44vh);
  padding: 0;
}

/* As barras de rolagem destes contêineres (página de detalhes e grids) seguem o
   PADRÃO DO SISTEMA, definido no topo deste arquivo. Nada de próprio aqui. */
.por-count {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 14px;
}
.por-count-lbl { line-height: 1.7; }
/* resumo por status (chips clicáveis que filtram a lista) */
.por-sum { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.por-sum-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
  font: 600 11.5px var(--fbody);
  color: var(--gray-600);
}
.por-sum-chip:hover { border-color: rgba(0,54,68,.4); }
.por-sum-chip.active {
  border-color: #003644;
  background: #eef7f8;
  box-shadow: 0 0 0 2px rgba(0,54,68,.12);
}
.por-sum-chip .por-badge { padding: 2px 7px; font-size: 10px; }
.por-sum-chip strong { color: #003644; }
/* Estado vazio compacto das seções de detalhe (itens/operadores) */
.por-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 24px;
}
.por-empty__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0,54,68,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1c7b80;
  margin-bottom: 3px;
}
.por-empty__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.por-empty__title {
  font-size: 14px;
  font-weight: 700;
  color: #003644;
  line-height: 1.2;
}
.por-empty__sub {
  font-size: 12.5px;
  color: var(--gray-500);
  text-align: center;
  max-width: 360px;
  line-height: 1.55;
}
.por-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 24px;
}
.por-empty-state__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0,54,68,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1c7b80;
  margin-bottom: 4px;
}
.por-empty-state__icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}
.por-empty-state__title {
  font-size: 15px;
  font-weight: 700;
  color: #003644;
  line-height: 1.2;
}
.por-empty-state__sub {
  font-size: 13px;
  color: var(--gray-600);
  text-align: center;
  max-width: 360px;
  line-height: 1.55;
}
.por-loading {
  text-align: center;
  padding: 60px 24px;
  color: var(--gray-500);
  font-size: 14px;
}

/* ── Skeleton (carregamento dos detalhes) ────────────────────── */
.por-skel {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 45%, var(--gray-200) 65%);
  background-size: 200% 100%;
  animation: porShimmer 1.3s linear infinite;
  border-radius: 6px;
  flex-shrink: 0;
}
@keyframes porShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.por-skel-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--gray-200);
}
.por-skel-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
}

/* ── Tabela ──────────────────────────────────────────────────── */
/* border-collapse: separate + cantos nas células: overflow:hidden
   prenderia o position:sticky do thead dentro da tabela */
.por-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--white);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.por-table thead th:first-child { border-top-left-radius: 10px; }
.por-table thead th:last-child  { border-top-right-radius: 10px; }
.por-table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.por-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 10px; }
.por-section .por-table th,
.por-section .por-table td { border-radius: 0; }
.por-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f0f9f9;
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--green-mid);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  border-bottom: 1px solid var(--gray-200);
}
.por-table th.wms-th-sort { cursor: pointer; user-select: none; }
.por-table th.wms-th-sort:hover { color: #003644; background: #e2f2f3; }
.por-table th.wms-th-sort.sorted { color: #003644; }
/* indicador de ordenação em SVG (herda as opacidades globais de .th-ind) */
.por-table .th-ind { display: inline-flex; margin-left: 5px; vertical-align: middle; }
.por-table .th-ind svg { width: 11px; height: 11px; }
.por-table th.por-th-num { text-align: right; }
.por-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
  vertical-align: middle;
}
.por-table td.por-td-num { text-align: right; white-space: nowrap; }
/* Grids "Itens da Ordem" (Coleta e Reposição): com as colunas de conversão são
   17 colunas. O espaço sai do respiro lateral das células e do indicador de
   ordenação — fonte e altura de linha ficam intactas. */
/* COMBINADOR DE FILHO EM TODO ESTE BLOCO (> thead > tr > th / > tbody > tr > td).
   Estes grids são master-detail: a sub-tabela da linha-filha vive DENTRO do tbody,
   e com seletor de descendência (`.por-table th`) as medidas do grid-pai caíam
   também nas colunas dela. A primeira coluna da sub-tabela, que é a de ação,
   herdava os 34px do chevron — inclusive o max-width — e os três botões
   transbordavam por cima da coluna Endereço. */
#pocGridItens > .por-table > thead > tr > th, #porGridItens > .por-table > thead > tr > th,
#pocGridItens > .por-table > tbody > tr.por-row > td, #porGridItens > .por-table > tbody > tr.por-row > td { padding-left: 7px; padding-right: 7px; }
#pocGridItens > .por-table > thead .th-ind, #porGridItens > .por-table > thead .th-ind { margin-left: 3px; }
/* Descrição do produto é a célula mais larga do grid e a que mais sobra:
   com o clamp de 2 linhas, 320px viram folga em branco na maioria dos itens.
   A largura vai na CÉLULA, não só no texto: sem isso a coluna encolhe abaixo do
   conteúdo e a descrição invade a coluna seguinte. */
#pocGridItens .por-desc, #porGridItens .por-desc { max-width: 200px; }
#pocGridItens > .por-table > tbody > tr > td.por-td-prod,
#porGridItens > .por-table > tbody > tr > td.por-td-prod { width: 214px; min-width: 214px; max-width: 214px; overflow: hidden; }
#pocGridItens .por-cod, #porGridItens .por-cod,
#pocGridItens .por-ean, #porGridItens .por-ean { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Larguras das três congeladas (ver bloco de colunas fixas mais abaixo). A 1ª é o
   chevron do master-detail nos dois painéis: a coluna de ação desceu para a
   linha-filha, onde mora o item a que ela se aplica. */
/* .por-row nas células do corpo, e não `tr > td`: a linha-filha tem um td só, com
   colspan, que também é o primeiro da sua linha — os 34px do chevron caindo nele
   esmagavam a sub-tabela inteira. */
#pocGridItens > .por-table > thead > tr > th:nth-child(1), #porGridItens > .por-table > thead > tr > th:nth-child(1),
#pocGridItens > .por-table > tbody > tr.por-row > td:nth-child(1), #porGridItens > .por-table > tbody > tr.por-row > td:nth-child(1) { width: 34px; min-width: 34px; max-width: 34px; }
#pocGridItens > .por-table > thead > tr > th:nth-child(2), #porGridItens > .por-table > thead > tr > th:nth-child(2),
#pocGridItens > .por-table > tbody > tr.por-row > td:nth-child(2), #porGridItens > .por-table > tbody > tr.por-row > td:nth-child(2) { width: 142px; min-width: 142px; max-width: 142px; }
#pocGridItens > .por-table > thead > tr > th:nth-child(3), #porGridItens > .por-table > thead > tr > th:nth-child(3),
#pocGridItens > .por-table > tbody > tr.por-row > td:nth-child(3), #porGridItens > .por-table > tbody > tr.por-row > td:nth-child(3) { width: 112px; min-width: 112px; max-width: 112px; }
.por-table tr:last-child td { border-bottom: none; }
.por-table tbody tr:nth-child(even) td { background: var(--gray-50); }
.por-table .por-row  { cursor: pointer; }
.por-table .por-row td { transition: background .12s; }
.por-table .por-row:hover td { background: #e9f5f5; }
.por-table .por-row:focus-visible { outline: 2px solid #003644; outline-offset: -2px; }
.por-table .por-row:focus-visible td { background: #e9f5f5; }
/* Registro posicionado (recNo) — cursor no grid; barra teal à esquerda + fundo suave */
.por-table .por-row.is-current td { background: #e3f1f2; }
.por-table .por-row.is-current:hover td { background: #d9ecec; }
.por-table .por-row.is-current td:first-child { box-shadow: inset 3px 0 0 #2fa4a9; }
/* coluna de affordance: chevron indicando que a linha abre os detalhes */
.por-th-go { width: 1%; }
.por-td-go { width: 1%; text-align: right; color: var(--gray-400); padding-right: 14px; }
.por-td-go svg { width: 15px; height: 15px; vertical-align: middle; transition: transform .12s, color .12s; }
.por-row:hover .por-td-go { color: #003644; }
.por-row:hover .por-td-go svg { transform: translateX(2px); }
.por-table tbody tr td.por-td-diverg {
  background: rgba(220,38,38,.10);
  color: #991b1b;
  font-weight: 600;
}
/* Coletado a menos explicado por falta no endereço (Painel de Coleta): âmbar discreto,
   e não o vermelho de divergência — a diferença tem destino (complemento e corte). */
.por-table tbody tr td.por-td-falta {
  background: rgba(245,158,11,.09);
  color: #92400e;
  font-weight: 600;
}
/* Linha de item cancelado — tom vermelho suave + filete na borda esquerda */
.por-table tbody tr.por-row--canc td { background: rgba(220,38,38,.06); }
.por-table tbody tr.por-row--canc:nth-child(even) td { background: rgba(220,38,38,.09); }
.por-table tbody tr.por-row--canc td:first-child { box-shadow: inset 3px 0 0 rgba(220,38,38,.45); }

/* células especiais */
.por-id { font-weight: 700; color: #003644; white-space: nowrap; }
/* célula Produto: ancora no topo p/ estabilizar a altura das linhas com/sem EAN */
.por-table td.por-td-prod { vertical-align: top; }
.por-cod  { display: block; font-weight: 700; color: #003644; font-size: 12px; }
.por-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--gray-700);
}
/* Célula Observação (aba Aprovados, O.I.): texto clampado + botão pra ler o
   memo inteiro — ver .oi-obs-view em painel-oi.js. */
.oi-obs-cell { display: flex; align-items: flex-start; gap: 6px; }
.oi-obs-cell .por-desc { flex: 1; min-width: 0; }
/* Variante no card de aprovação: campo de uma linha, editável direto, com
   botão de maximizar ao lado que abre o memo amplo — ver oi-modal-observacao.js. */
.oi-obs-cell input { flex: 1; min-width: 0; }
.apObsCell { align-items: center; }
.oi-obs-view {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-300); border-radius: 4px; background: var(--white);
  color: var(--gray-500); cursor: pointer; transition: all .15s;
}
.oi-obs-view svg { width: 13px; height: 13px; }
.oi-obs-view:hover { border-color: #2fa4a9; color: #2fa4a9; background: rgba(47,164,169,.07); }

/* Motivo de cancelamento — compartilhado pelos painéis de O.C./O.I./O.R.
   (ver oi-modal-observacao.js, window.abrirModalObservacao).
   .oi-item-motivo: linha compacta sob o badge de status de um item cancelado.
   .oi-flow-motivo: motivo "master" quando o serviço inteiro foi cancelado. */
.oi-item-motivo { display: flex; align-items: center; gap: 4px; margin-top: 4px; max-width: 240px; }
.oi-item-motivo .lbl { font-size: 11px; font-weight: 700; color: var(--gray-600); flex-shrink: 0; }
.oi-item-motivo .txt { flex: 1; min-width: 0; font-size: 11px; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-flow-motivo { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.oi-flow-motivo .lbl { font-size: 12px; font-weight: 700; color: var(--gray-600); flex-shrink: 0; }
.oi-flow-motivo .txt { font-size: 12px; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.por-ean  {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--gray-100);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  font-size: 11px; color: var(--gray-600);
  line-height: 1.4; white-space: nowrap;
}
.por-ean-lbl {
  font-family: inherit; font-weight: 700; font-size: 9px;
  letter-spacing: .06em; color: var(--gray-500);
  text-transform: uppercase;
}
.por-end  { white-space: nowrap; font-size: 12px; }
.por-end-id { display: block; font-size: 11px; color: var(--gray-500); }
.por-operador { font-weight: 600; color: #003644; }

/* ── Badge de status ─────────────────────────────────────────── */
.por-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.por-badge--info    { background: rgba(47,164,169,.13); color: #003644; }
.por-badge--warn    { background: #fef3c7; color: #92400e; }
.por-badge--ok      { background: #d1fae5; color: #065f46; }
.por-badge--danger  { background: #fee2e2; color: #991b1b; }
.por-badge--sec     { background: var(--gray-100); color: var(--gray-600); }
/* Falta no endereço e complemento (Painel de Coleta; "Conferido parcial" no modal de
   pedidos). Mesma pílula .por-badge, com ícone e contorno: a Falta divide o âmbar com o
   status Andamento e precisa se distinguir dele num relance. O complemento fica no petrol,
   porque é a ordem se resolvendo, não algo que peça ação. São alvos de balão (WMSHint):
   cursor de ajuda e foco visível. A altura é a mesma da pílula de status (o contorno de
   1px sai do padding). */
.por-badge--falta, .por-badge--compl {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border: 1px solid; cursor: help;
}
.por-badge--falta { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.por-badge--compl { background: #eef6f8; border-color: rgba(0,54,68,.24); color: #0a4d5e; }
.por-badge--falta svg, .por-badge--compl svg { flex: none; width: 11px; height: 11px; }
.por-badge--falta svg { color: #b45309; }
.por-badge--falta:focus-visible, .por-badge--compl:focus-visible { outline: 2px solid #003644; outline-offset: 1px; }
/* Endereço que fechou com falta (linha do endereço no Painel de Coleta): progresso e status Concluído em
   âmbar, porque o operador encontrou menos do que o item pedia. Verde com 100% num endereço sem coleta
   dizia o contrário. Marca de corte: vermelho claro, no formato das marcas Falta e Complemento (contorno e
   ícone), absorvido ou não; o balão dela diz quanto de cada. */
.por-bar-wrap.por-bar--falta .por-bar-fill { background: linear-gradient(90deg, #d97706, #fbbf24); }
.por-badge--ok-falta { background: #fef3c7; color: #92400e; }
.por-badge--corte {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border: 1px solid #fca5a5; cursor: help;
  background: #fef2f2; color: #991b1b;
}
.por-badge--corte svg { flex: none; width: 11px; height: 11px; color: #dc2626; }
/* Status com as marcas ao lado. Na coluna estreita (status congelado da linha do produto)
   a marca desce para baixo do status; a variante --linha (aba Ordens) não quebra. */
.poc-st-marcas { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.poc-st-marcas--linha { flex-wrap: nowrap; }
/* "N resets" (aba Detalhes dos Painéis de Coleta e Reposição): quantas vezes o item já foi resetado na
   ordem. É histórico, não pede ação: o ciano do reset da aba Resets e cancelamentos (.pes-root .is-reset),
   com o mesmo contorno e a mesma altura das outras marcas. */
.por-badge--reset {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border: 1px solid #a5f3fc;
  background: #ecfeff; color: #0e7490; cursor: help;
}
.por-badge--reset svg { flex: none; width: 11px; height: 11px; }
.por-badge--reset:focus-visible { outline: 2px solid #003644; outline-offset: 1px; }

/* ── Barra de progresso ──────────────────────────────────────── */
.por-bar-wrap {
  height: 6px;
  background: var(--gray-200);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.por-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #14708a, #2fa4a9);
  border-radius: 999px;
  transition: width .3s ease;
}
.por-pct-lbl {
  font-size: 11px;
  color: var(--gray-600);
  white-space: nowrap;
}
/* barra + percentual lado a lado nas células de progresso */
.por-prog {
  display: flex;
  align-items: center;
  gap: 8px;
}
.por-prog .por-bar-wrap { flex: 1; min-width: 70px; }
.por-prog .por-pct-lbl  { min-width: 44px; text-align: right; }
/* cor da barra conforme status: andamento âmbar, concluída verde, cancelada vermelha */
.por-bar-wrap.por-bar--warn   .por-bar-fill { background: linear-gradient(90deg, #d97706, #fbbf24); }
.por-bar-wrap.por-bar--ok     .por-bar-fill { background: linear-gradient(90deg, #059669, #34d399); }
.por-bar-wrap.por-bar--danger .por-bar-fill { background: linear-gradient(90deg, #dc2626, #f87171); }

/* ── Ranking de operadores (barra comparativa) ───────────────── */
.por-rank {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.por-rank-track {
  display: flex;
  align-items: center;
  gap: 6px;
}
.por-rank-bar { width: 110px; height: 5px; }
.por-rank-pct {
  font-size: 10.5px;
  color: var(--gray-500);
  white-space: nowrap;
  min-width: 38px;
  text-align: right;
}
.por-rank--top > span { font-weight: 700; color: #003644; }
.por-rank--top .por-rank-pct { color: #003644; font-weight: 600; }
.por-rank--top .por-bar-fill { background: linear-gradient(90deg, #0b5e74, #2fa4a9); }

/* ── Parte na Ordem (grid Desempenho por Operador, O.C. e O.R.) ──
   Cada linha desenha a ORDEM INTEIRA como régua: o trecho forte é a parte do
   operador, o listrado claro é o que os demais já concluíram e o trilho vazio é o
   que falta. As fatias ficam na posição em que cada operador entrou na ordem (a
   ordem da proc, não a do grid), então, lidas de cima para baixo, encaixam uma
   depois da outra, e a ponta do listrado é o andamento da ordem em todas as linhas. */
.por-part { display: flex; align-items: center; gap: 10px; }
.por-part-track {
  position: relative; flex: 1; min-width: 130px; height: 10px;
  border-radius: 999px; overflow: hidden;
  background: var(--gray-100);
  box-shadow: inset 0 0 0 1px rgba(0,54,68,.10), inset 0 1px 2px rgba(0,54,68,.08);
}
/* o que a ordem já tem concluído, somando todos os operadores */
.por-part-feito {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: repeating-linear-gradient(135deg,
    rgba(47,164,169,.30) 0 3px, rgba(47,164,169,.14) 3px 6px);
  transition: width .3s ease;
}
/* a parte deste operador: pílula petrol com respiro branco nas pontas, que a
   descola das fatias vizinhas no listrado */
.por-part-eu {
  position: absolute; top: 1px; bottom: 1px; min-width: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b5e74 0%, #1f8f99 60%, #2fa4a9 100%);
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,54,68,.30);
  transition: left .3s ease, width .3s ease;
}
.por-part-pct {
  min-width: 56px; text-align: right; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: #0a4d5e;
  font-variant-numeric: tabular-nums;
}
/* maior parte da ordem: mesmo destaque do maior volume no ranking ao lado */
.por-part.is-top .por-part-pct { color: #003644; font-weight: 800; }
.por-part.is-top .por-part-eu  { background: linear-gradient(90deg, #003644 0%, #0b5e74 55%, #2fa4a9 100%); }
/* linha sob o mouse: o listrado acende para a leitura cruzada com as vizinhas */
.por-table--ops tbody tr:hover .por-part-feito {
  background: repeating-linear-gradient(135deg,
    rgba(47,164,169,.40) 0 3px, rgba(47,164,169,.20) 3px 6px);
}

/* "i" no cabeçalho de grid: explica a coluna sem roubar o clique de ordenação
   (o JS da tela barra o clique no "i" na fase de captura, antes do th) */
.por-th-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin: -2px 0 0 6px; vertical-align: middle;
  border-radius: 50%; border: 1px solid rgba(0,54,68,.26);
  background: #fff; color: #0a4d5e; cursor: help;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.por-th-info svg { width: 9px; height: 9px; }
/* "i" ao lado do título de uma seção (h2 de 16px): um pouco maior que o do cabeçalho de grid */
.por-th-info.por-sec-info { width: 18px; height: 18px; margin: -3px 0 0 8px; }
.por-th-info.por-sec-info svg { width: 11px; height: 11px; }
.por-th-info:hover, .por-th-info:focus-visible, .por-th-info.is-open {
  background: #0a4d5e; color: #fff; border-color: #0a4d5e; outline: none;
  box-shadow: 0 0 0 3px rgba(47,164,169,.22);
}

/* ── Detalhes: cabeçalho ─────────────────────────────────────── */
.por-det-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #d5e9ed 0%, #eef7f8 55%, #f6fbfc 100%);
  border: 1px solid rgba(0,54,68,.22);
  box-shadow: inset 4px 0 0 #003644;
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* bloco de identidade: voltar + título + status */
.por-det-id {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* bloco de metadados: textos temporais + botão atualizar */
.por-det-meta {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.por-det-meta-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  line-height: 1.3;
}
.por-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border: 1px solid rgba(0,54,68,.25);
  border-radius: 8px;
  padding: 5px 12px;
  font: 600 12px var(--fbody);
  color: var(--gray-700);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.por-btn-back:hover  { border-color: #003644; color: #003644; }
.por-btn-back svg    { width: 14px; height: 14px; }
.por-det-titulo      { font-size: 15px; font-weight: 800; font-family: var(--fdisp, 'Saira', 'Segoe UI', sans-serif); color: #003644; }

/* ── Detalhes: informativos (criada em / atualizado às) ──────── */
.por-det-info,
.por-det-upd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.por-det-info { font-size: 12px;   color: #567880; }
.por-det-upd  { font-size: 11.5px; color: #6a8a92; }
.por-det-info strong,
.por-det-upd strong { font-weight: 700; color: #2e535c; }
.por-det-upd strong { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* ícone à esquerda de cada informativo — discreto, mesmo tom teal */
.por-det-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6f9aa3;
  flex-shrink: 0;
}
.por-det-info .por-det-ic svg { width: 13px; height: 13px; }
.por-det-upd  .por-det-ic svg { width: 12px; height: 12px; }

/* linha combinada: "Atualizado às …" | "Atualização automática …" */
.por-det-upd-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.por-det-sep {
  color: rgba(0,54,68,.22);
  font-weight: 400;
  user-select: none;
}

/* ── Label discreto de atualização automática ───────────────── */
.por-det-auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #7b9aa1;
  white-space: nowrap;
  cursor: default;
}
.por-det-auto-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fa4a9;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(47,164,169,.45);
  animation: por-auto-pulse 2.4s ease-out infinite;
}
@keyframes por-auto-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,164,169,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(47,164,169,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,164,169,0); }
}
@media (prefers-reduced-motion: reduce) {
  .por-det-auto-dot { animation: none; }
}

/* ── Botão atualizar — ícone elegante com giro no hover ──────── */
.por-btn-upd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid rgba(0,54,68,.20);
  background: linear-gradient(135deg, #ffffff 0%, #eaf4f5 100%);
  color: #0a4d5e;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,54,68,.12);
  transition: transform .15s ease, box-shadow .2s ease,
              background .2s ease, color .2s ease, border-color .2s ease;
}
.por-btn-upd svg {
  width: 15px;
  height: 15px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.por-btn-upd:hover {
  background: linear-gradient(135deg, #0a4d5e 0%, #003644 100%);
  color: #fff;
  border-color: #003644;
  box-shadow: 0 5px 14px rgba(0,54,68,.30);
  transform: translateY(-1px);
}
.por-btn-upd:hover svg { transform: rotate(-180deg); }
.por-btn-upd:active { transform: translateY(0) scale(.93); }
.por-btn-upd:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }

/* ── Cards de estatísticas ───────────────────────────────────── */
.por-cards {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  flex-shrink: 0;
  overflow-x: auto;
}
.por-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px 18px;
  min-width: 160px;
  flex: 1 1 160px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.por-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tl-100, rgba(47,164,169,.12));
  color: var(--tl-d, #1c7b80);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.por-card-icon svg { width: 18px; height: 18px; }
/* min-width:0 — sem isso o item flex não encolhe abaixo do conteúdo e um valor
   longo (nome de operador, por exemplo) vaza para fora da borda do card. */
.por-card-body { min-width: 0; flex: 1; }
/* KPIs do painel da O.I.: ícones duotone um pouco maiores para não parecerem pequenos */
#oiPainel .por-card-icon svg { width: 20px; height: 20px; }
.por-card-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.2;
}
.por-card-val {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--fdisp, 'Saira', 'Segoe UI', sans-serif);
  color: #003644;
  line-height: 1.2;
  margin-top: 2px;
}
/* Card cujo valor é TEXTO (nome de operador) e não número: a fonte display de 20px
   foi dimensionada para números curtos e estoura com um apelido. Reduz, corta com
   reticências e mantém o valor inteiro no title. */
.por-card-val--txt {
  font-size: 15px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.por-card-bar { margin-top: 6px; }
/* Dentro do card a barra acompanha a largura disponível. O min-width de 100px que
   havia aqui somava com ícone, gap e padding e estourava a borda no card estreito
   (a regra base tem flex-shrink:0, então ela não cedia). */
.por-card-bar .por-bar-wrap { height: 5px; width: 100%; min-width: 0; max-width: 100%; }
/* "i" explicativo no canto do card + tooltip flutuante (anexado ao body) */
/* Mesmo destaque do "i" do Mapa de calor (.oi-info-btn): botão circulado petrol */
.por-card-info {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(0,54,68,.25); background: #fff; color: #0a4d5e;
  cursor: help; transition: all .15s;
}
.por-card-info svg { width: 13px; height: 13px; }
.por-card-info:hover, .por-card-info:focus-visible { background: #0a4d5e; color: #fff; border-color: #0a4d5e; outline: none; }
.por-card-tip {
  position: fixed; z-index: 9000; width: 300px; max-width: 88vw;
  padding: 12px 13px; background: #00232c; color: #eafcff;
  letter-spacing: 0; text-transform: none;
  display: flex; flex-direction: column; gap: 9px;
  border-radius: 10px; border: 1px solid rgba(103,232,249,.16);
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease;
  pointer-events: auto;   /* permite rolar o conteúdo quando .is-scroll */
}
.por-card-tip.show { opacity: 1; transform: none; }
/* Fixado por clique no "i": fica aberto até clicar fora ou pressionar Escape */
.por-card-tip.is-pinned { border-color: rgba(103,232,249,.42); box-shadow: 0 14px 34px rgba(0,0,0,.44); }
.por-card-tip.is-pinned::after {
  content: 'Clique fora ou pressione Escape para fechar';
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(230,252,255,.45); border-top: 1px solid rgba(255,255,255,.09); padding-top: 7px;
}
/* Não cabe nem acima nem abaixo do botão: rola dentro do próprio tooltip */
.por-card-tip.is-scroll {
  overflow-y: auto; overscroll-behavior: contain; cursor: default;
  scrollbar-width: thin; scrollbar-color: rgba(103,232,249,.45) transparent;
}
.por-card-tip.is-scroll::-webkit-scrollbar { width: 8px; }
.por-card-tip.is-scroll::-webkit-scrollbar-track { background: transparent; }
.por-card-tip.is-scroll::-webkit-scrollbar-thumb { background: rgba(103,232,249,.35); border-radius: 4px; }
.por-card-tip.is-scroll::-webkit-scrollbar-thumb:hover { background: rgba(103,232,249,.55); }
/* Sem as setas do padrão do sistema: este balão é escuro e a seta petrol
   desapareceria nele — a barra ciano de 8px se resolve só com o polegar. */
.por-card-tip.is-scroll::-webkit-scrollbar-button { display: none; }
/* Seções do tooltip: explicação (humana), fórmula (mono) e exemplo/nota */
.cardtip-desc { font-size: 11.5px; font-weight: 500; line-height: 1.5; color: #eafcff; }
.cardtip-box  { border-radius: 8px; padding: 7px 9px; }
.cardtip-box--formula { background: rgba(103,232,249,.10); border: 1px solid rgba(103,232,249,.20); }
.cardtip-box--ex      { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
/* "No App do coletor" (i da seção Pedidos retirados): índigo da retirada */
.cardtip-box--app     { background: rgba(165,180,252,.11); border: 1px solid rgba(165,180,252,.26); }
.cardtip-box--app .cardtip-tag { color: #a5b4fc; }
/* Balão com mais texto (ex.: Pedidos retirados): mais largo, para não virar uma coluna alta */
.por-card-tip.por-card-tip--largo { width: 400px; }
.cardtip-tag { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 4px; }
.cardtip-box--formula .cardtip-tag { color: #7dd3d8; }
.cardtip-box--ex .cardtip-tag { color: rgba(230,252,255,.55); }
.cardtip-box code { display: block; font-family: ui-monospace, 'Cascadia Code', 'Consolas', 'Courier New', monospace; font-size: 11.5px; line-height: 1.5; color: #eafcff; white-space: normal; }
.cardtip-txt { font-size: 11px; line-height: 1.45; color: rgba(230,252,255,.9); }
.cardtip-note { font-size: 10.5px; line-height: 1.45; font-style: italic; color: rgba(230,252,255,.62); }
/* Título do balão quando o "i" mora num cabeçalho de grid: lá o rótulo está em caixa
   alta e espremido, e o título devolve o nome da coluna por extenso. */
.cardtip-title {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.09);
  font-size: 12.5px; font-weight: 800; line-height: 1.2; color: #fff;
}
.cardtip-title::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #7dd3d8; box-shadow: 0 0 0 3px rgba(125,211,216,.18);
}
.por-th-tip { width: 320px; }
/* tons por métrica */
.por-card--petrol .por-card-icon { background: rgba(0,54,68,.10); color: #003644; }
.por-card--amber  .por-card-icon { background: #fef3c7; color: #b45309; }
.por-card--green  .por-card-icon { background: #d1fae5; color: #047857; }
.por-card--violet .por-card-icon { background: #ede9fe; color: #6d28d9; }
/* vermelho forte — o pior caso da escala (ex.: "nunca contados" no Painel
   Gerencial da O.I.), o mesmo tom do topo da escala de severidade do FEFO */
.por-card--red    .por-card-icon { background: #fee2e2; color: #b01810; }
/* Card Faltas (Painel de Coleta). Com falta: borda e fundo âmbar, porque pede atenção
   (âmbar só no que exige ação). Sem falta: neutro, com "Nenhuma" em cinza. */
.por-card--falta { border-color: #fcd34d; background: linear-gradient(135deg, #fffbeb 0%, #fff 72%); }
.por-card--falta .por-card-icon { background: #fef3c7; color: #b45309; }
.por-card--falta .por-card-val  { color: #92400e; }
.por-card--neutro .por-card-icon { background: var(--gray-100); color: var(--gray-400); }
.por-card--neutro .por-card-val  { color: var(--gray-400); }
/* Linha de apoio sob o valor do card ("2 complementos · 1 com corte"). Uma linha só quando
   cabe; no card estreito as partes descem uma embaixo da outra, sem o ponto, em vez de a
   segunda sumir nas reticências. A medida é a do próprio corpo do card (container query),
   porque a largura do card depende de quantos dividem a faixa, e não da janela. */
.por-card-sub {
  container: porcardsub / inline-size;
  margin-top: 3px; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--gray-600);
}
.por-card-sub-in { display: flex; flex-wrap: wrap; column-gap: 5px; }
.por-card-sub-in > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@container porcardsub (max-width: 165px) {
  .por-card-sub-in { flex-direction: column; }
  .por-card-sub-sep { display: none; }
}
.por-card--falta .por-card-sub { color: #92400e; }
/* Faixa de cards dos detalhes do Painel de Coleta: com o card Faltas são sete, que no tamanho
   normal pedem ~1232px de área (160px de mínimo cada). A faixa NÃO quebra em duas linhas
   (decisão do Edher): abaixo disso os cards se compactam em dois degraus, como a faixa do
   Painel Gerencial da O.I. A medida é a dos detalhes (pocdet, container de #pocDetRoot), e
   não a da janela, porque a sidebar e o maximizar mudam a área útil.
   1º degrau: menos respiro e ícone menor (sete cabem a partir de ~1060px);
   2º degrau: sem ícone, o valor fica com a largura toda do card (a partir de ~920px). */
@container pocdet (max-width: 1231px) {
  #pocDetRoot .por-cards { gap: 8px; padding-left: 16px; padding-right: 16px; }
  #pocDetRoot .por-cards > .por-card { min-width: 140px; flex-basis: 140px; padding: 12px; gap: 9px; }
  #pocDetRoot .por-cards .por-card-icon { width: 30px; height: 30px; border-radius: 9px; }
  #pocDetRoot .por-cards .por-card-icon svg { width: 16px; height: 16px; }
}
@container pocdet (max-width: 1059px) {
  #pocDetRoot .por-cards > .por-card { min-width: 120px; flex-basis: 120px; }
  #pocDetRoot .por-cards .por-card-icon { display: none; }
}

/* ── Variante compacta da faixa de indicadores ────────────────
   Para telas em que o GRID é o conteúdo principal e a faixa de KPIs é apoio:
   o card cai de ~69px para ~58px e a faixa de ~81px para ~58px, devolvendo
   altura à tabela sem criar um componente paralelo. A classe é opt-in no
   .por-cards — nenhuma tela muda de aparência por herança.
   Consumidor: Painel Gerencial da O.I. (cobertura-inventario.js). */
.por-cards--slim .por-card { padding: 9px 12px; gap: 10px; }
.por-cards--slim .por-card-icon { width: 30px; height: 30px; border-radius: 9px; }
.por-cards--slim .por-card-icon svg { width: 16px; height: 16px; }
.por-cards--slim .por-card-val { font-size: 19px; }
.por-cards--slim .por-card-info { width: 19px; height: 19px; top: 6px; right: 6px; }
.por-cards--slim .por-card-info svg { width: 11px; height: 11px; }

/* ── Seções de detalhe ───────────────────────────────────────── */
.por-section {
  flex-shrink: 0;
  background: var(--white);
  margin: 0 20px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.por-section .panel-head {
  border-bottom: 1px solid var(--gray-200);
}
.por-section .por-table {
  border-radius: 0;
  box-shadow: none;
}

/* maximizado: grids crescem */
.wiz-maximized .por-grid-wrap      { flex: 1; }
.wiz-maximized .por-grid-wrap--sec { flex: none; max-height: 60vh; }
.wiz-maximized .por-cards          { flex-wrap: nowrap; }

/* ── Seção maximizada: na frente, ocupando a tela (lib/secao-max.js) ──
   Itens da Ordem dos Painéis de Coleta e Reposição e Itens do inventário da O.I. A seção
   continua no lugar do DOM, com position:fixed: o marcador .por-sec-ph segura a altura dela na
   página, o fundo escurece o resto e a página por trás não rola. A cadeia de flex leva o espaço
   até o grid, que perde o teto de altura. z-index abaixo dos modais (.modal-overlay 500,
   .porr-ovl 1200) e dos balões (.poc-tip). */
.por-sec-max {
  flex: none; width: 26px; height: 26px; margin-left: 4px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid rgba(0,54,68,.22); border-radius: 7px; color: #0a4d5e;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
/* Sem ações em lote ao lado (O.I. finalizada ou cancelada): o botão vai sozinho para a direita */
.panel-head > .ht + .por-sec-max { margin-left: auto; }
.por-sec-max:hover { background: #eef7f8; border-color: #2fa4a9; color: #003644; box-shadow: 0 2px 8px rgba(0,54,68,.10); }
.por-sec-max:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }
.por-sec-max[aria-pressed="true"] { background: linear-gradient(135deg, #00465a, #003644); border-color: #003644; color: #fff; }
.por-sec-max[aria-pressed="true"]:hover { box-shadow: 0 0 0 3px rgba(0,54,68,.20); }
.por-sec-ph { flex-shrink: 0; margin: 0 20px 16px; }
.por-sec-backdrop {
  position: fixed; inset: 0; z-index: 440;
  background:
    radial-gradient(900px 520px at 50% 110%, rgba(0,54,68,.22), transparent 60%),
    rgba(11,18,38,.58);
  backdrop-filter: blur(2px);
}
.por-section.is-sec-max {
  position: fixed; inset: 14px; z-index: 450; margin: 0;
  display: flex; flex-direction: column;
  border-color: rgba(0,54,68,.18); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.12);
}
.por-section.is-sec-max > .por-grid-wrap--sec { flex: 1; min-height: 0; max-height: none; }
.por-det-shell.has-sec-max { overflow: hidden; }

/* ── Coluna de ação (Operador/Resetar/Cancelar) no grid de itens ──────
   3 botões de 30px + 2 gaps de 6px + 12px de padding em cada lado = 126px;
   128px deixa a folga. Vale para os dois painéis (Coleta e Reposição).
   min-width junto do width porque no algoritmo de tabela o width é SUGESTÃO: com a
   tabela apertada (é o caso da sub-tabela do master-detail, que tem onze colunas)
   a coluna era reduzida a bem menos que os 128px e os botões vazavam por cima da
   coluna Endereço. min-width é piso rígido e resolve nos dois lugares. */
.por-th-acao { width: 128px; min-width: 128px; white-space: nowrap; }
.por-td-acao { width: 128px; min-width: 128px; white-space: nowrap; }

/* ── Detalhes: colunas fixas na rolagem horizontal ────────
   Itens: congela chevron + Progresso + Status. O deslocamento (left) de cada uma é
   aplicado em runtime por alinharColunasFixas() (painel-oc.js / painel-or.js):
   fixá-lo aqui exigiria adivinhar a largura renderizada, e a diferença aparece
   como faixa em branco (left maior que a coluna) ou sobreposição (left menor).
   Operadores: congela Operador. Escopo por ID p/ não afetar a lista.
   Mesmos seletores atendem Reposição (por*) e Coleta (poc*): os dois grids são
   master-detail, com a linha-pai no produto.

   ESCOPO .por-row nas fixas: a linha-filha tem um td com colspan; sem o escopo ele
   entraria na regra, sairia do lugar ao rolar na horizontal e levaria a sub-tabela
   inteira com ele. Mesmo motivo do #oiGridItens, abaixo.
   ZEBRA POR CLASSE (.is-even), e não por :nth-child: com linhas-filhas inseridas no
   meio da lista o índice do DOM conta essas linhas, e o listrado embaralhava a cada
   expansão. O :not(.is-even) em vez de nth-child(even) evita empate de
   especificidade com a regra da classe, que dependeria da ordem do arquivo. */
#porGridItens .por-table tbody tr.por-row td:nth-child(-n+3),
#pocGridItens .por-table tbody tr.por-row td:nth-child(-n+3) {
  position: sticky;
  z-index: 1;
  background: var(--white);
}
#porGridItens .por-table tbody tr.por-row td:nth-child(3),
#pocGridItens .por-table tbody tr.por-row td:nth-child(3) { box-shadow: 6px 0 6px -4px rgba(0,54,68,.14); }
/* Itens — cabeçalho (mantém o fundo teal do thead; só ancora + z-index).
   Combinador de filho pelo mesmo motivo das larguras: sem ele o cabeçalho da
   sub-tabela também grudava, e com z-index 3 passava por cima do do grid. */
#porGridItens > .por-table > thead > tr > th:nth-child(-n+3),
#pocGridItens > .por-table > thead > tr > th:nth-child(-n+3) { position: sticky; z-index: 3; }
/* Itens — zebra, hover e linha cancelada */
#porGridItens .por-table tbody tr.por-row:not(.is-even) td,
#pocGridItens .por-table tbody tr.por-row:not(.is-even) td { background: var(--white); }
#porGridItens .por-table tbody tr.por-row.is-even td,
#porGridItens .por-table tbody tr.por-row.is-even td:nth-child(-n+3),
#pocGridItens .por-table tbody tr.por-row.is-even td,
#pocGridItens .por-table tbody tr.por-row.is-even td:nth-child(-n+3) { background: var(--gray-50); }
#porGridItens .por-table tbody tr.por-row:hover td:nth-child(-n+3),
#pocGridItens .por-table tbody tr.por-row:hover td:nth-child(-n+3) { background: #e9f5f5; }
/* Linha cancelada ímpar: o seletor leva .por-row para empatar com a zebra branca
   (:not(.is-even) conta como classe) e vencer por vir depois. Sem isso só as três colunas
   fixas ficavam vermelhas, e a ordem toda cancelada alternava linha vermelha e branca. */
#porGridItens .por-table tbody tr.por-row.por-row--canc td,
#porGridItens .por-table tbody tr.por-row--canc td:nth-child(-n+3),
#pocGridItens .por-table tbody tr.por-row.por-row--canc td,
#pocGridItens .por-table tbody tr.por-row--canc td:nth-child(-n+3) { background: #fdf2f2; }
#porGridItens .por-table tbody tr.por-row--canc.is-even td,
#porGridItens .por-table tbody tr.por-row--canc.is-even td:nth-child(-n+3),
#pocGridItens .por-table tbody tr.por-row--canc.is-even td,
#pocGridItens .por-table tbody tr.por-row--canc.is-even td:nth-child(-n+3) { background: #fcebeb; }
/* Divergência na linha do produto (Painéis de Reposição e de Coleta): a zebra acima, com o
   id do grid, vencia o fundo da .por-td-diverg genérica, e a célula ficava só com o texto
   vermelho. Mesma especificidade da zebra e declarada depois dela, por isso vence. */
#porGridItens .por-table tbody tr.por-row td.por-td-diverg,
#pocGridItens .por-table tbody tr.por-row td.por-td-diverg { background: rgba(220,38,38,.10); }

/* Itens do inventário — congela chevron + Status. O grid agrupa por produto e a
   linha-filha (endereços) tem um td com colspan, por isso o escopo é .por-row:
   sem ele o td do colspan entraria na regra e sairia do lugar ao rolar.
   O left é aplicado em runtime por alinharColunasFixas() (painel-oi.js). */
#oiGridItens .por-table thead th:nth-child(-n+2) { position: sticky; z-index: 3; }
#oiGridItens .por-table tbody tr.por-row td:nth-child(-n+2) {
  position: sticky;
  z-index: 1;
  background: var(--white);
}
#oiGridItens .por-table thead th:nth-child(2),
#oiGridItens .por-table tbody tr.por-row td:nth-child(2) { min-width: 112px; }
#oiGridItens .por-table tbody tr.por-row td:nth-child(2) { box-shadow: 6px 0 6px -4px rgba(0,54,68,.14); }
#oiGridItens .por-table tbody tr.por-row:nth-child(even) td:nth-child(-n+2) { background: var(--gray-50); }
#oiGridItens .por-table tbody tr.por-row:hover td:nth-child(-n+2) { background: #e9f5f5; }

/* Operadores — congela a coluna Operador */
#porGridOps .por-table tbody td:first-child,
#pocGridOps .por-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--white);
  box-shadow: 6px 0 6px -4px rgba(0,54,68,.14);
}
#porGridOps .por-table thead th:first-child,
#pocGridOps .por-table thead th:first-child { position: sticky; left: 0; z-index: 3; }
#porGridOps .por-table tbody tr:nth-child(even) td:first-child,
#pocGridOps .por-table tbody tr:nth-child(even) td:first-child { background: var(--gray-50); }
.por-acao-stack {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
/* Os botões não encolhem. Item de flex tem min-width:auto, que resolve para o
   tamanho do conteúdo (o svg de 14px): sob aperto os três murchavam para menos da
   metade e a fila deixava de casar com a largura reservada para a coluna. */
.por-acao-stack > * { flex: 0 0 auto; }
/* botões compactos só com ícone (tooltip descreve a ação) */
.por-btn-reset--icon {
  width: 30px;
  padding: 0;
  justify-content: center;
}
.por-btn-reset--icon svg { width: 14px; height: 14px; }
/* Resetar — âmbar dourado */
.por-btn-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  background: var(--white);
  border: 1px solid rgba(217,164,0,.55);
  border-radius: 7px;
  color: #a16207;
  font: 700 11.5px var(--fbody);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.por-btn-reset:hover:not(:disabled) {
  background: linear-gradient(135deg, #d9a400, #b45309);
  border-color: #b45309;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(217,164,0,.22);
}
.por-btn-reset:disabled { opacity: .5; cursor: not-allowed; }
.por-btn-reset svg { width: 13px; height: 13px; }
/* Cancelar — vermelho do sistema */
.por-btn-reset--canc {
  border-color: rgba(192,71,59,.5);
  color: #c0473b;
}
.por-btn-reset--canc:hover:not(:disabled) {
  background: linear-gradient(135deg, #c0473b, #a13328);
  border-color: #a13328;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(192,71,59,.2);
}

/* ── Modal de Reset de Item da O.R. ──────────────────────────── */
.porr-ovl {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: 28px;
  background:
    radial-gradient(700px 420px at 80% 115%, rgba(0,54,68,0.18), transparent 60%),
    rgba(11,18,38,0.62);
}
.porr-card {
  width: min(480px, 100%);
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(10,20,40,.20);
}
.porr-head {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 20px;
  background: linear-gradient(160deg, #001f2d 0%, #003644 55%, #00465a 100%);
  color: #fff;
}
.porr-head::after {
  content: ""; position: absolute; right: 60px; top: -90px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(44,138,160,0.28), transparent 70%);
  pointer-events: none;
}
.porr-head-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.12); flex-shrink: 0;
}
.porr-title { font-size: 16px; font-weight: 700; letter-spacing: .3px; line-height: 1.2; }
.porr-close {
  margin-left: auto;
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 15px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, box-shadow .2s;
}
.porr-close:hover { background: rgba(192,71,59,.75); box-shadow: 0 0 0 3px rgba(192,71,59,.25); }
.porr-body { padding: 16px 20px; }
.porr-intro { margin: 0 0 12px; font-size: 13px; color: var(--gray-600); line-height: 1.5; }
.porr-info {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.porr-info-row { display: flex; gap: 10px; font-size: 12.5px; }
.porr-info-lbl {
  flex-shrink: 0; width: 62px;
  font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-500); line-height: 1.6;
}
.porr-info-val { color: var(--gray-800); font-weight: 600; }
.porr-info-val small { color: var(--gray-500); font-weight: 500; }
.porr-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--gray-700); margin-bottom: 5px; }
.porr-req { color: #c0392b; }
.porr-motivo {
  width: 100%; resize: none;
  border: 1.5px solid var(--gray-400); border-radius: 8px;
  padding: 8px 10px; font: 500 13px var(--fbody);
  color: var(--gray-800);
  background: var(--white);
  transition: border-color .12s, box-shadow .12s;
}
.porr-motivo::placeholder {
  color: var(--gray-500);
  font-style: italic;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .015em;
  opacity: 1;
}
.porr-motivo:focus::placeholder { color: var(--gray-400); }
.porr-motivo:focus { outline: none; border-color: #2c8aa0; box-shadow: 0 0 0 3px rgba(44,138,160,.15); }
.porr-motivo.porr-invalid {
  border-color: #c0473b;
  box-shadow: 0 0 0 3px rgba(192,71,59,.18);
  animation: porr-pulse 1.1s ease-in-out infinite;
}
@keyframes porr-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(192,71,59,.10); }
  50%      { box-shadow: 0 0 0 4px rgba(192,71,59,.30); }
}
.porr-count { text-align: right; font-size: 11px; color: var(--gray-500); margin-top: 3px; }

/* ── Modal em lote (seleção múltipla de itens) ─────────────────── */
.porr-card--lote {
  width: min(600px, 100%);
  transition: width .2s, height .2s, max-width .2s, max-height .2s, border-radius .2s;
}
/* botões do header (maximizar + fechar) */
.porr-head-btns { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.porr-head-btns .porr-close { margin-left: 0; }
.porr-max {
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, box-shadow .2s;
}
.porr-max:hover { background: rgba(255,255,255,.22); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
/* maximizado: card ocupa a tela e a lista cresce para aproveitar o espaço */
.porr-ovl.is-max { padding: 8px; }
.porr-ovl.is-max .porr-card--lote {
  width: 100%; max-width: none;
  height: calc(100vh - 16px); max-height: calc(100vh - 16px);
  border-radius: 8px;
}
.porr-ovl.is-max .porr-card--lote .porr-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.porr-ovl.is-max .porr-card--lote .porr-list { flex: 1; min-height: 0; max-height: none; }
.porr-list-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.porr-ck-all {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--gray-700); cursor: pointer;
}
.porr-ck-all input { width: 15px; height: 15px; accent-color: #2c8aa0; cursor: pointer; }
.porr-list-count { font-size: 12px; color: var(--gray-600); }
.porr-list-count strong { color: #003644; }
.porr-list {
  max-height: 260px; overflow-y: auto;
  border: 1.5px solid var(--gray-400); border-radius: 10px;
  margin-bottom: 14px;
}
.porr-ck-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
}
.porr-ck-row:last-child { border-bottom: none; }
.porr-ck-row:hover { background: var(--gray-50); }
.porr-ck { width: 15px; height: 15px; accent-color: #2c8aa0; flex-shrink: 0; cursor: pointer; }
.porr-ck-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.porr-ck-prod { font-size: 12.5px; font-weight: 600; color: var(--gray-800); }
.porr-ck-end { font-size: 11px; color: var(--gray-500); }
.porr-ck-end small { color: var(--gray-400); }
/* Cancelamento em lote: opção de estornar e cancelar os itens já concluídos (O.C. e O.R.).
   Desligada (padrão) é neutra; ligada fica âmbar, porque o que foi coletado ou reposto volta
   ao endereço. Seletor composto para vencer a margem do .porr-bloco, declarado mais abaixo. */
.porr-bloco.porr-estorno { margin: 0 0 12px; transition: background .15s, border-color .15s; }
.porr-bloco.porr-estorno.is-on { background: #fffbeb; border-color: #f59e0b; }
.porr-list-grupo {
  padding: 6px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gray-600); background: var(--gray-50);
  border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-100);
}
.porr-list-grupo:first-child { border-top: none; }
.porr-list-grupo[hidden] { display: none; }
.porr-list-vazio { padding: 10px 12px; font-size: 12px; color: var(--gray-500); }

/* ── Botões de ação em lote no cabeçalho do grid de itens ──────── */
.por-head-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.por-head-actions-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray-600);
  white-space: nowrap;
  margin-right: 2px;
}
.porr-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 13px 20px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.porr-btn-cancel {
  padding: 9px 16px;
  border: 1.5px solid var(--gray-400); border-radius: 8px;
  background: var(--white); color: var(--gray-800);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.porr-btn-cancel:hover {
  background: rgba(192,71,59,.07); color: #c0473b;
  border-color: rgba(192,71,59,.4);
  box-shadow: 0 0 0 2.5px rgba(192,71,59,.12);
}
.porr-btn-ok {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border: none; border-radius: 8px;
  background: linear-gradient(135deg, #d9a400, #b45309); /* reset: âmbar dourado */
  color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity .12s, transform .12s, box-shadow .12s;
  white-space: nowrap;
}
.porr-btn-ok:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(217,164,0,.35); }
.porr-btn-ok svg { width: 15px; height: 15px; }
.porr-btn-ok--canc { background: linear-gradient(135deg, #b13c31, #c0473b); } /* cancelamento: vermelho */
.porr-btn-ok--canc:hover { box-shadow: 0 4px 12px rgba(192,71,59,.35); }

/* ── Modal de Observação (memo amplo) — herda o chassi .porr-*, ver
   oi-modal-observacao.js. Botão principal em teal (padrão de confirmação do
   sistema), não no âmbar do reset. ────────────────────────────────────── */
.porr-card--obs { width: min(560px, 100%); transition: width .2s, height .2s, max-width .2s, max-height .2s, border-radius .2s; }
.porr-motivo--obs { min-height: 220px; resize: vertical; }

/* ── Modal de saída da impressão de etiquetas (onde imprimir) — herda o chassi .porr-*,
   ver etq-modal-saida-impressao.js. Painel pequeno com duas opções em cartão; o clique no
   cartão já decide, por isso o rodapé só tem Cancelar. ─────────────────────────────── */
.porr-card--saida { width: min(460px, 100%); }
.porr-card--saida .porr-head-ico svg { width: 16px; height: 16px; }
.sai-intro { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--gray-600); }
.sai-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sai-op {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 14px 16px; text-align: center; font: inherit; color: inherit; cursor: pointer;
  background: linear-gradient(168deg, #ffffff 0%, #f7fbfc 100%);
  border: 1.5px solid #d3e3e8; border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.sai-op:hover,
.sai-op:focus-visible {
  outline: none; border-color: #2c8aa0; background: linear-gradient(168deg, #f7fcfd 0%, #eaf5f7 100%);
  box-shadow: 0 0 0 3px rgba(44,138,160,.14), 0 12px 24px -16px rgba(0,54,68,.5);
  transform: translateY(-1px);
}
.sai-op:active { transform: translateY(0); }
.sai-op-ic {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #0a4d5e 0%, #00232c 100%); color: #a7e9f0;
  box-shadow: 0 6px 14px -6px rgba(0,54,68,.55);
}
.sai-op-ic svg { width: 22px; height: 22px; }
.sai-op-tit { font-size: 14px; font-weight: 800; line-height: 1.2; color: #003644; }
.sai-op-sub { font-size: 11.5px; line-height: 1.4; color: var(--gray-600); }
/* Selo preso na borda superior do cartão, centralizado: não disputa espaço com o ícone */
.sai-op-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(135deg, #0a4d5e 0%, #003644 100%); color: #fff;
  border: 2px solid #fff; box-shadow: 0 3px 8px -3px rgba(0,54,68,.5);
}
@media (max-width: 480px) { .sai-opcoes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sai-op, .sai-op:hover, .sai-op:focus-visible { transition: none; transform: none; } }

/* ── Modal de seleção das etiquetas a imprimir (quais saem) — herda o chassi .porr-* e a lista
   com marcação do lote (.porr-list, .porr-ck-*), ver etq-modal-selecao-impressao.js. A lista é a
   parte que encolhe: em tela baixa ou com zoom, o rodapé com as ações segue à vista. ─────────── */
.porr-card--etqsel {
  width: min(620px, 100%);
  max-height: calc(100vh - 56px);
  transition: width .2s, height .2s, max-width .2s, max-height .2s, border-radius .2s;
}
.porr-card--etqsel .porr-head,
.porr-card--etqsel .porr-foot { flex: none; }
.porr-card--etqsel .porr-head-ico svg { width: 16px; height: 16px; }
.porr-card--etqsel .porr-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.porr-card--etqsel .porr-intro { margin-bottom: 10px; }
.porr-card--etqsel .porr-list { flex: 0 1 auto; min-height: 120px; max-height: 320px; margin-bottom: 0; }
.esl-aviso {
  display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px; padding: 8px 10px;
  border: 1px solid #fde68a; border-radius: 8px; background: #fffbeb;
  font-size: 12px; line-height: 1.4; color: #92400e;
}
.esl-aviso svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.esl-row { align-items: flex-start; }
.esl-row .porr-ck { margin-top: 2px; }
.esl-row:has(.porr-ck:checked) { background: #f3fafb; }
.esl-row:has(.porr-ck:checked):hover { background: #e9f5f7; }
.esl-main { flex: 1; }
/* --fmono só existe dentro de .wiz, e o modal é filho do body: família declarada aqui */
.esl-cod { font: 500 10.5px 'Consolas', 'Fira Mono', ui-monospace, monospace; letter-spacing: .02em; color: var(--gray-500); word-break: break-all; }
.esl-tag {
  flex: none; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700;
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
}
.esl-foot { flex-wrap: wrap; align-items: center; }
.esl-btn-todas {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7.5px 16px; border: 1.5px solid #9cc3cc; border-radius: 8px;
  background: #fff; color: #003644; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.esl-btn-todas:hover { background: #f0f7f9; border-color: #003644; box-shadow: 0 0 0 2.5px rgba(0,54,68,.10); }
.esl-btn-todas svg { width: 15px; height: 15px; }
.porr-btn-ok--etq { background: linear-gradient(135deg, #0a4d5e 0%, #003644 100%); }
.porr-btn-ok--etq:hover { box-shadow: 0 4px 12px rgba(0,54,68,.35); }
.esl-n {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 800; line-height: 1.4;
}
.esl-btn-todas .esl-n { background: #e0f2f1; color: #0a4d5e; }
.porr-btn-ok--etq .esl-n { background: rgba(255,255,255,.2); color: #fff; }
/* maximizado: card ocupa a tela e a lista cresce para aproveitar o espaço */
.porr-ovl.is-max .porr-card--etqsel {
  width: 100%; max-width: none;
  height: calc(100vh - 16px); max-height: calc(100vh - 16px);
  border-radius: 8px;
}
.porr-ovl.is-max .porr-card--etqsel .porr-list { flex: 1 1 auto; max-height: none; }
@media (max-width: 520px) { .esl-foot > button { flex: 1 1 auto; justify-content: center; } }
.porr-btn-ok--obs { background: linear-gradient(135deg, #00465a, #003644); }
.porr-btn-ok--obs:hover { box-shadow: 0 4px 12px rgba(0,54,68,.35); }
/* maximizado: card ocupa a tela e o memo cresce para aproveitar o espaço */
.porr-ovl.is-max .porr-card--obs {
  width: 100%; max-width: none;
  height: calc(100vh - 16px); max-height: calc(100vh - 16px);
  border-radius: 8px;
}
.porr-ovl.is-max .porr-card--obs .porr-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.porr-ovl.is-max .porr-card--obs .porr-motivo--obs { flex: 1; min-height: 0; max-height: none; resize: none; }

/* ── Painel de Coleta: pedidos da O.C. ───────────────────────────────────────
   Mesma regra do App (PRC_WMS_MYUPAPP_OC_PESQ): um único pedido mostra o pedido e
   o cliente; mais de um, a quantidade, que abre o modal oc-modal-pedidos.js. Coluna
   "Pedido" da lista, selo no cabeçalho dos detalhes e o próprio modal. */

/* Coluna Pedido da lista. O pedido único e o "N pedidos" são o MESMO controle (abrem o
   mesmo modal) e reagem igual ao mouse: viram a mesma pílula teal, que sobe um pouco,
   e a seta desliza. Só o repouso muda: o pedido único é texto, para não engrossar o
   grid; a quantidade já nasce pílula, porque não tem cliente a mostrar. */
.poc-ped-abrir {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; min-width: 0;
  border: 1px solid transparent; border-radius: 999px;
  white-space: nowrap; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
}
.poc-ped-abrir:hover {
  border-color: #2fa4a9;
  background: linear-gradient(135deg, #d9eff1 0%, #eef8f9 100%);
  box-shadow: 0 3px 10px rgba(0,54,68,.14);
  transform: translateY(-1px);
}
.poc-ped-abrir:active { transform: none; box-shadow: 0 1px 2px rgba(0,54,68,.10); }
.poc-ped-abrir:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }
.poc-ped-go { flex: none; display: inline-flex; color: #2fa4a9; transition: opacity .15s, transform .15s; }
.poc-ped-abrir .poc-ped-go svg { width: 11px; height: 11px; }
/* Pedido único: texto em repouso. A margem negativa compensa o respiro da pílula e
   mantém o número alinhado ao cabeçalho; a seta só se insinua ao passar pela linha. */
.poc-ped {
  max-width: 300px; margin: 0 -9px; padding: 0 8px;
  background: transparent; font: inherit; color: inherit;
}
.poc-ped .poc-ped-go { opacity: 0; transform: translateX(-3px); }
.por-row:hover .poc-ped .poc-ped-go { opacity: .5; transform: none; }
.poc-ped-abrir:hover .poc-ped-go,
.por-row:hover .poc-ped-abrir:hover .poc-ped-go { opacity: 1; transform: translateX(2px); }
.poc-ped-num { flex: none; font-weight: 700; color: #003644; font-variant-numeric: tabular-nums; }
.poc-ped-cli {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--gray-600);
}
.poc-ped-cli::before {
  content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 7px 2px 0;
  border-radius: 50%; background: #9fc3ca; vertical-align: middle;
}
.poc-ped-cli em { font-style: italic; color: var(--gray-400); }
.poc-ped-none { color: #94a3b8; }
/* Coluna Itens da lista do Painel de Coleta: os cancelados à parte, fora do total, discretos */
.poc-canc-sufixo { color: #94a3b8; font-size: 11.5px; white-space: nowrap; }
/* Quantidade por unidade dos painéis de Coleta e Reposição (lib/painel-ranking.js):
   "15,000 KG · 25 UN · 3 CX", sem conversão. Número forte e unidade discreta; com mais
   de 3 unidades, as 3 primeiras e um "+N" que abre o balão com a lista inteira. */
/* Numa linha só: quebrar deixava o separador "·" sozinho no fim da linha. O limite de
   largura é o próprio "+N" (no máximo 3 unidades à mostra). */
.por-unidades {
  display: inline-flex; align-items: baseline; justify-content: flex-end;
  flex-wrap: nowrap; gap: 0 6px; white-space: nowrap;
}
.por-unidades.tem-mais { cursor: help; border-radius: 6px; }
.por-unidades.tem-mais:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }
.por-un { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.por-un b { font-weight: 700; color: var(--gray-800); font-variant-numeric: tabular-nums; }
.por-un i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--gray-500); }
.por-un-sep { color: #b6cdd3; font-weight: 700; }
.por-un-mais {
  align-self: center; display: inline-flex; align-items: center; height: 17px; padding: 0 6px;
  border-radius: 999px; background: rgba(0,54,68,.08); color: #0a4d5e;
  font-size: 10.5px; font-weight: 800; transition: background .15s, color .15s;
}
.por-unidades.tem-mais:hover .por-un-mais { background: #0a4d5e; color: #fff; }

/* Coluna Depósito das listas dos painéis de O.C., O.R. e O.I. (lib/painel-deposito.js):
   "COD - NOME" em texto simples, no estilo das demais células. A largura se adapta como
   "Data" e "Atribuído a": com folga, uma linha (teto de 220px no nome, para não empurrar
   as outras colunas para fora do campo de visão); com a tela apertada, quebra — mas com
   piso de 130px e no máximo duas linhas, senão a tabela espremia a coluna até a maior
   palavra e a linha do grid crescia. */
/* O piso fica também no TEXTO: com o "+X" ao lado, só o piso da célula deixava o nome
   espremido a ponto de separar o "001 -" do nome. */
.por-dep-cel { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.por-dep {
  min-width: 110px; max-width: 220px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* Mais de um depósito: o primeiro e a pílula "+X". Só a pílula reage ao mouse (e ao
   foco do teclado) e abre o balão com a lista completa. Repouso na família das pílulas
   claras do painel (.poc-ped-pill); no hover vira petrol, sobe 1px e ganha sombra, como
   o "+N" da quantidade por unidade. */
.por-dep-mais {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 28px; padding: 0 7px; border-radius: 999px;
  border: 1px solid rgba(0,54,68,.20);
  background: linear-gradient(135deg, #e8f4f5 0%, #f6fbfc 100%);
  box-shadow: 0 1px 2px rgba(0,54,68,.06);
  color: #0a4d5e; font: 800 11px var(--fbody); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; cursor: help;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.por-dep-mais:hover, .por-dep-mais:focus-visible {
  outline: none; border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #003644 0%, #0c5e72 100%);
  box-shadow: 0 3px 10px rgba(0,54,68,.28);
  transform: translateY(-1px);
}
.por-dep-mais:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2fa4a9; }
/* Balão do "+X": código em ciano à esquerda, nome alinhado à esquerda. Seletor duplo
   (.poc-tip-rows.poc-tip-rows--dep) porque a regra genérica .poc-tip-rows vem depois
   neste arquivo e, com a mesma especificidade, alinharia o nome à direita. */
.poc-tip-rows.poc-tip-rows--dep { grid-template-columns: auto 1fr; gap: 5px 12px; }
.poc-tip-rows.poc-tip-rows--dep span { font-weight: 800; color: #7dd3d8; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.poc-tip-rows.poc-tip-rows--dep b { text-align: left; font-weight: 600; }
.poc-tip-rows.poc-tip-rows--dep b.is-vazio { font-weight: 500; font-style: italic; color: rgba(230,252,255,.6); }
.por-dep-none { color: #94a3b8; }

/* Ranking do grid Desempenho por Operador (lib/painel-ranking.js): posição, barra e
   porcentagem do peso movimentado na ordem. A célula é o alvo do balão com as contas do
   operador; o 1º lugar fica em petrol. Mesma família visual da pílula de pedido. */
.por-table td.por-td-rank { white-space: nowrap; }
.por-rkp {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 3px 9px 3px 3px; border: 1px solid transparent; border-radius: 999px;
  cursor: help; transition: background .15s, border-color .15s, box-shadow .15s;
}
.por-rkp:hover, .por-rkp:focus-visible {
  outline: none; background: #fff; border-color: rgba(47,164,169,.55);
  box-shadow: 0 2px 8px rgba(0,54,68,.12);
}
.por-rkp-pos {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-600);
  font: 800 11.5px var(--fbody); font-variant-numeric: tabular-nums;
}
.por-rkp.is-top .por-rkp-pos {
  background: linear-gradient(135deg, #003644, #0c5e72); color: #fff;
  box-shadow: 0 2px 6px rgba(0,54,68,.28);
}
.por-rkp-bar { flex: none; width: 96px; height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.por-rkp-bar > span { display: block; height: 100%; border-radius: inherit; background: #8fcdd0; transition: width .3s ease; }
.por-rkp.is-top .por-rkp-bar > span { background: linear-gradient(90deg, #0b5e74, #2fa4a9); }
.por-rkp-pct { min-width: 56px; text-align: right; font-size: 12px; font-weight: 600; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.por-rkp.is-top .por-rkp-pct { font-weight: 800; color: #003644; }
/* Produto fora de KG sem peso bruto: o peso do operador está incompleto e pede cadastro */
.por-rkp-aviso { display: block; margin: 2px 0 0 44px; font-size: 10.5px; font-weight: 600; color: #b45309; }

/* Selo da régua do ranking, no cabeçalho da seção Desempenho por Operador. Também é um
   "i": abre a explicação completa da coluna Ranking (mesmo balão do cabeçalho). */
.por-rank-base {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 9px 0 4px; border-radius: 999px;
  border: 1px solid rgba(0,54,68,.20);
  background: linear-gradient(135deg, #e8f4f5 0%, #f6fbfc 100%);
  color: #0a4d5e; font: 600 12px var(--fbody); white-space: nowrap; cursor: help;
  transition: border-color .15s, box-shadow .15s;
}
.por-rank-base:hover, .por-rank-base:focus-visible, .por-rank-base.is-open {
  outline: none; border-color: #2fa4a9; box-shadow: 0 3px 10px rgba(0,54,68,.14);
}
.por-rank-base-ic {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #003644, #0c5e72); color: #fff;
}
.por-rank-base-ic svg { width: 12px; height: 12px; }
.por-rank-base-i {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,54,68,.30); color: #0a4d5e;
}
.por-rank-base-i svg { width: 10px; height: 10px; }
/* Ordem sem peso: régua por itens concluídos, em tom neutro (informação, não alerta) */
.por-rank-base.is-itens { border-color: rgba(51,65,85,.22); background: linear-gradient(135deg, #eef1f5 0%, #f8fafc 100%); color: #334155; }
.por-rank-base.is-itens .por-rank-base-ic { background: linear-gradient(135deg, #475569, #64748b); }
.por-rank-base.is-itens .por-rank-base-i { border-color: rgba(51,65,85,.30); color: #334155; }
/* "N pedidos": já é pílula em repouso; o hover é o de .poc-ped-abrir */
.poc-ped-pill {
  padding: 0 8px 0 7px;
  border-color: rgba(0,54,68,.20);
  background: linear-gradient(135deg, #e8f4f5 0%, #f6fbfc 100%);
  color: #0a4d5e; font: 600 12px var(--fbody);
  box-shadow: 0 1px 2px rgba(0,54,68,.06);
}
.poc-ped-pill b { font-weight: 800; color: #003644; font-variant-numeric: tabular-nums; }
.poc-ped-pill > svg { flex: none; width: 13px; height: 13px; }
.poc-ped-pill .poc-ped-go { opacity: .55; }

/* Hint dos controles de pedido (coluna da lista e selo dos detalhes). O title nativo
   não aceita estilo: este balão é da família do tooltip dos cards (.por-card-tip),
   compacto, com seta apontando para o controle. Anexado ao body (position:fixed) para
   não ser cortado pelo overflow do grid; pointer-events:none para nunca roubar o clique. */
.poc-tip {
  position: fixed; z-index: 9000; min-width: 210px; max-width: 320px;
  padding: 10px 13px 9px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(160deg, #00232c 0%, #003644 100%);
  color: #eafcff;
  border: 1px solid rgba(103,232,249,.18); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.18);
  pointer-events: none;
  opacity: 0; transform: translateY(4px) scale(.98);
  transform-origin: var(--poc-tip-x, 50%) 100%;
  transition: opacity .14s ease, transform .14s ease;
}
.poc-tip.is-below { transform: translateY(-4px) scale(.98); transform-origin: var(--poc-tip-x, 50%) 0; }
.poc-tip.show { opacity: 1; transform: none; }
/* Seta: losango girado, com a cor da borda do balão no lado que fica de fora */
.poc-tip::after {
  content: ""; position: absolute; left: var(--poc-tip-x, 50%); bottom: -6px;
  width: 10px; height: 10px; margin-left: -5px;
  background: #003644;
  border-right: 1px solid rgba(103,232,249,.18); border-bottom: 1px solid rgba(103,232,249,.18);
  transform: rotate(45deg);
}
.poc-tip.is-below::after {
  top: -6px; bottom: auto; background: #00232c;
  border: 0; border-left: 1px solid rgba(103,232,249,.18); border-top: 1px solid rgba(103,232,249,.18);
}
.poc-tip-head { display: flex; align-items: baseline; gap: 8px; }
.poc-tip-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #7dd3d8; }
.poc-tip-num {
  font: 800 15px var(--fdisp, 'Saira', 'Segoe UI', sans-serif); line-height: 1.2;
  color: #fff; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.poc-tip-cli { font-size: 12px; font-weight: 600; line-height: 1.4; color: #eafcff; }
.poc-tip-cli--muted { font-weight: 500; color: rgba(230,252,255,.72); }
.poc-tip-acao {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.10);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: rgba(230,252,255,.62);
}
.poc-tip-acao svg { flex: none; width: 12px; height: 12px; color: #67e8f9; }
/* Variante para pedido em alteração no ERP (checkbox desabilitado na Criação de O.C.):
   o mesmo balão, com rótulo e ícones em âmbar — é bloqueio, não convite ao clique —
   e uma linha de motivo entre o cliente e a ação. */
.poc-tip--bloq { max-width: 300px; }
.poc-tip--bloq .poc-tip-tag { display: inline-flex; align-items: center; gap: 5px; color: #fcd34d; }
.poc-tip--bloq .poc-tip-tag svg { flex: none; width: 11px; height: 11px; }
.poc-tip-motivo { margin-top: 3px; font-size: 11.5px; font-weight: 500; line-height: 1.45; color: rgba(230,252,255,.88); }
.poc-tip--bloq .poc-tip-acao { align-items: flex-start; line-height: 1.4; }
.poc-tip--bloq .poc-tip-acao svg { margin-top: 1px; color: #fcd34d; }
.poc-tip-motivo b, .poc-tip-prazo b { font-weight: 800; color: #fff; }
/* "Em uso" (reservado em outra seleção): rótulo e ícones em ciano, como o hint de pedido do
   Painel de O.C., e o prazo da liberação automática em destaque. */
/* "Com conferência" (pedido já conferido no CodeBar/ERP): violeta, e o que já foi conferido de cada
   item numa lista com barra */
.poc-tip--bloq.is-conf { max-width: 360px; border-color: rgba(196,181,253,.36); }
.poc-tip--bloq.is-conf::after { border-color: rgba(196,181,253,.36); }
.poc-tip--bloq.is-conf .poc-tip-tag { color: #c4b5fd; }
.poc-tip--bloq.is-conf .poc-tip-acao svg { color: #c4b5fd; }
.poc-tip-conf {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: rgba(196,181,253,.08); border: 1px solid rgba(196,181,253,.20);
}
.poc-tip-conf-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; }
.poc-tip-conf-prod { min-width: 0; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.35; color: rgba(230,252,255,.88); }
.poc-tip-conf-prod b { color: #fff; font-weight: 800; }
.poc-tip-conf-qtd { font-size: 11px; font-weight: 700; color: #ddd6fe; white-space: nowrap; font-variant-numeric: tabular-nums; }
.poc-tip-conf-bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.poc-tip-conf-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
.poc-tip-conf-mais { font-size: 10.5px; font-style: italic; color: rgba(230,252,255,.6); }
.poc-tip--bloq.is-uso .poc-tip-tag { color: #7dd3d8; }
.poc-tip--bloq.is-uso .poc-tip-acao svg { color: #67e8f9; }
.poc-tip-prazo {
  margin-top: 6px; padding: 6px 9px; border-radius: 8px;
  background: rgba(103,232,249,.10); border: 1px solid rgba(103,232,249,.20);
  font-size: 11.5px; font-weight: 500; line-height: 1.45; color: #eafcff;
}
/* "Sinalizado para inventário" (Criação de O.R. e modais de vínculo da O.C. e da O.R.): âmbar
   do bloqueio, com a borda e a seta no mesmo tom; o cabeçalho quebra entre o rótulo e o
   endereço, cada um inteiro na sua linha; e a observação livre do operador do coletor fica
   numa citação própria, entre o motivo e a ação. */
.poc-tip--bloq.is-sinal { max-width: 320px; border-color: rgba(252,211,77,.34); }
.poc-tip--bloq.is-sinal::after { border-color: rgba(252,211,77,.34); }
.poc-tip--bloq.is-sinal .poc-tip-head { flex-wrap: wrap; row-gap: 2px; }
.poc-tip--bloq.is-sinal .poc-tip-tag,
.poc-tip--bloq.is-sinal .poc-tip-num { white-space: nowrap; }
.poc-tip-obs {
  margin-top: 5px; padding: 5px 9px; border-radius: 0 7px 7px 0;
  border-left: 2px solid rgba(252,211,77,.6); background: rgba(252,211,77,.08);
  font-size: 11.5px; font-style: italic; line-height: 1.45; color: rgba(230,252,255,.85);
  overflow-wrap: anywhere; white-space: pre-line;
}
/* Variante do ranking dos operadores (e do "+N" da quantidade por unidade): o número em
   destaque, as contas que o produzem numa grade de duas colunas e a regra no rodapé,
   para o usuário conferir de onde a porcentagem da célula saiu. */
.poc-tip--rank { min-width: 250px; max-width: 300px; gap: 4px; }
.poc-tip-de { font-size: 11px; font-weight: 600; color: rgba(230,252,255,.58); }
.poc-tip-big { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; }
.poc-tip-big b {
  font: 800 22px var(--fdisp, 'Saira', 'Segoe UI', sans-serif); line-height: 1.1;
  color: #a5f3fc; font-variant-numeric: tabular-nums;
}
.poc-tip-big span { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: rgba(230,252,255,.75); }
.poc-tip-rows {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px;
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  font-size: 11.5px; line-height: 1.35;
}
.poc-tip-rows span { color: rgba(230,252,255,.72); }
.poc-tip-rows b { color: #fff; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.poc-tip-alerta {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px; padding: 6px 9px; border-radius: 8px;
  background: rgba(252,211,77,.10); border: 1px solid rgba(252,211,77,.28);
  font-size: 11px; font-weight: 600; line-height: 1.4; color: #fde68a;
}
.poc-tip-alerta svg { flex: none; width: 13px; height: 13px; margin-top: 1px; color: #fcd34d; }
.poc-tip--rank .poc-tip-acao { align-items: flex-start; line-height: 1.45; }
.poc-tip--rank .poc-tip-acao svg { margin-top: 1px; }
/* Falta no endereço e complemento (Painel de Coleta). A falta no âmbar do balão de
   sinalização (borda, seta, rótulo e ícones), porque pede atenção; o complemento no ciano
   padrão. O cabeçalho quebra entre o rótulo e o endereço, cada um inteiro na sua linha. Os
   endereços onde o restante foi buscado ficam numa grade de três colunas: endereço,
   quantidade e a situação do item lá. */
.poc-tip--falta, .poc-tip--compl { min-width: 250px; max-width: 340px; }
.poc-tip--falta { border-color: rgba(252,211,77,.34); }
.poc-tip--falta::after { border-color: rgba(252,211,77,.34); }
.poc-tip--falta .poc-tip-head, .poc-tip--compl .poc-tip-head { flex-wrap: wrap; row-gap: 2px; }
.poc-tip--falta .poc-tip-tag, .poc-tip--compl .poc-tip-tag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.poc-tip--falta .poc-tip-tag { color: #fcd34d; }
.poc-tip--falta .poc-tip-tag svg, .poc-tip--compl .poc-tip-tag svg { flex: none; width: 11px; height: 11px; }
.poc-tip--falta .poc-tip-num, .poc-tip--compl .poc-tip-num { overflow-wrap: anywhere; }
.poc-tip--falta .poc-tip-acao, .poc-tip--compl .poc-tip-acao { align-items: flex-start; line-height: 1.4; }
.poc-tip--falta .poc-tip-acao svg, .poc-tip--compl .poc-tip-acao svg { margin-top: 1px; }
.poc-tip--falta .poc-tip-acao svg { color: #fcd34d; }
.poc-tip--falta .poc-tip-acao.is-fim svg { color: #6ee7b7; }
.poc-tip-sec { margin-top: 6px; font-size: 11px; font-weight: 700; color: rgba(230,252,255,.72); }
.poc-tip-vazio { margin-top: 2px; font-style: italic; color: rgba(230,252,255,.62); }
/* Balão da marca "N resets" (item e linha-pai): os resets mais recentes numa caixa, cada um com a data e
   a hora, quem fez (à direita) e o motivo embaixo; o restante vira uma contagem no fim da caixa. */
.poc-tip--reset { min-width: 250px; max-width: 340px; }
.poc-tip--reset .poc-tip-head { flex-wrap: wrap; row-gap: 2px; }
.poc-tip--reset .poc-tip-tag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.poc-tip--reset .poc-tip-tag svg, .poc-tip--reset .poc-tip-acao svg { flex: none; width: 11px; height: 11px; }
.poc-tip--reset .poc-tip-num { overflow-wrap: anywhere; }
.poc-tip--reset .poc-tip-acao { align-items: flex-start; line-height: 1.4; }
.poc-tip--reset .poc-tip-acao svg { margin-top: 1px; }
.poc-tip-resets {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 5px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  font-size: 11.5px; line-height: 1.35;
}
.poc-tip-resets .rs { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px; }
.poc-tip-resets .rs + .rs { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.poc-tip-resets .dt { font-weight: 700; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.poc-tip-resets .us { text-align: right; color: rgba(230,252,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poc-tip-resets .mt { grid-column: 1 / -1; font-style: italic; color: rgba(230,252,255,.72); overflow-wrap: anywhere; }
.poc-tip-resets .mais { font-size: 11px; color: rgba(230,252,255,.6); }
.poc-tip-dest {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 5px 10px;
  margin-top: 3px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  font-size: 11.5px; line-height: 1.3;
}
.poc-tip-dest .end { font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.poc-tip-dest .qtd { text-align: right; white-space: nowrap; color: rgba(230,252,255,.85); font-variant-numeric: tabular-nums; }
.poc-tip-st {
  justify-self: start; padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.poc-tip-st.is-pend { background: rgba(255,255,255,.10);  color: rgba(230,252,255,.8); }
.poc-tip-st.is-and  { background: rgba(252,211,77,.16);   color: #fde68a; }
.poc-tip-st.is-ok   { background: rgba(52,211,153,.16);   color: #6ee7b7; }
.poc-tip-st.is-canc { background: rgba(248,113,113,.16);  color: #fca5a5; }

/* Selo de pedido no cabeçalho dos detalhes, ao lado do status. O cabeçalho continua
   numa linha só: quem cede espaço é o bloco de identidade (o cliente do selo encolhe
   com reticências); os metadados e o botão de atualizar, à direita, ficam inteiros.
   Só quando nem assim cabe (área dos detalhes estreita, medida por container query,
   e não pela janela, porque a sidebar muda a largura útil) o cabeçalho volta a quebrar. */
#pocDetRoot { container: pocdet / inline-size; }
.por-det-header:has(.poc-ped-chip) { flex-wrap: nowrap; }
.por-det-header:has(.poc-ped-chip) .por-det-meta { flex: none; }
.por-det-id:has(.poc-ped-chip) { flex: 1 1 auto; min-width: 0; }
.por-det-id:has(.poc-ped-chip) > :not(.poc-ped-chip) { flex: none; }
@container pocdet (max-width: 900px) {
  .por-det-header:has(.poc-ped-chip) { flex-wrap: wrap; }
}
.poc-ped-chip {
  display: inline-flex; align-items: center; gap: 7px; overflow: hidden;
  height: 30px; max-width: 460px; min-width: 0; padding: 0 10px 0 4px;
  border: 1px solid rgba(0,54,68,.22); border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: #2e535c; font: 500 12.5px var(--fbody); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,54,68,.08);
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
/* Mesmo hover dos controles de pedido da lista (.poc-ped-abrir): a família reage igual */
.poc-ped-chip:hover {
  border-color: #2fa4a9;
  background: linear-gradient(135deg, #d9eff1 0%, #eef8f9 100%);
  box-shadow: 0 3px 10px rgba(0,54,68,.14);
  transform: translateY(-1px);
}
.poc-ped-chip:active { transform: none; box-shadow: 0 1px 2px rgba(0,54,68,.10); }
.poc-ped-chip:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }
.poc-ped-chip-ic {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #003644, #0c5e72); color: #fff;
  box-shadow: 0 2px 6px rgba(0,54,68,.25);
}
.poc-ped-chip-ic svg { width: 12px; height: 12px; }
.poc-ped-chip-lbl { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #567880; }
.poc-ped-chip strong { flex: none; font-weight: 800; color: #003644; font-variant-numeric: tabular-nums; }
.poc-ped-chip-sep { flex: none; width: 1px; height: 14px; background: rgba(0,54,68,.18); }
.poc-ped-chip-cli { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #2e535c; }
.poc-ped-chip-cli--acao { color: #1c7b80; }
.poc-ped-chip-go { flex: none; display: inline-flex; color: #2fa4a9; transition: transform .15s; }
.poc-ped-chip-go svg { width: 12px; height: 12px; }
.poc-ped-chip:hover .poc-ped-chip-go { transform: translateX(2px); }

/* Modal "Pedidos da O.C." — chassi .porr-*. Altura do conteúdo com teto na tela:
   poucos pedidos deixam o modal pequeno; muitos, só a lista rola e o rodapé fica. */
.porr-card--peds {
  width: min(900px, 100%);
  max-height: calc(100vh - 56px);
  transition: width .2s, height .2s, max-width .2s, max-height .2s, border-radius .2s;
}
.porr-card--peds .porr-head,
.porr-card--peds .porr-foot { flex: none; }
.pocp-head-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pocp-head-sub { font-size: 11.5px; font-weight: 500; line-height: 1.2; letter-spacing: .02em; color: rgba(255,255,255,.72); }
.pocp-body {
  flex: 0 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 20px 16px;
  background: linear-gradient(180deg, #f4f9fa 0%, #fff 120px);
}
/* KPIs do topo: mesmos tons dos cards do painel */
.pocp-stats { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pocp-stats[hidden] { display: none; }
.pocp-stat {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 12px; border-radius: 10px;
  background: #fff; border: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pocp-stat-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pocp-stat-ic svg { width: 16px; height: 16px; }
.pocp-stat-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pocp-stat-txt b {
  font: 800 18px var(--fdisp, 'Saira', 'Segoe UI', sans-serif); line-height: 1.2;
  color: #003644; font-variant-numeric: tabular-nums;
}
.pocp-stat-txt span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pocp-stat--petrol .pocp-stat-ic { background: rgba(0,54,68,.10);  color: #003644; }
.pocp-stat--teal   .pocp-stat-ic { background: rgba(47,164,169,.14); color: #1c7b80; }
.pocp-stat--amber  .pocp-stat-ic { background: #fef3c7; color: #b45309; }
.pocp-stat--violet .pocp-stat-ic { background: #ede9fe; color: #6d28d9; }
/* Busca + expandir/recolher */
.pocp-tools { flex: none; display: flex; align-items: center; gap: 10px; }
.pocp-sbar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 8px 0 12px;
  background: #fff; border: 1.5px solid var(--gray-300); border-radius: 8px;
  cursor: text; transition: border-color .15s, box-shadow .15s;
}
.pocp-sbar:focus-within { border-color: #2fa4a9; box-shadow: 0 0 0 3px rgba(47,164,169,.14); }
.pocp-sbar > svg { flex: none; width: 15px; height: 15px; color: var(--gray-500); transition: color .15s; }
.pocp-sbar:focus-within > svg { color: #1c7b80; }
.pocp-sbar input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0; outline: none; background: transparent;
  font: 500 13px var(--fbody); color: var(--gray-800);
}
.pocp-sbar input::placeholder { color: var(--gray-400); font-weight: 400; }
.pocp-sbar input:disabled { cursor: progress; }
.pocp-sbar-clear {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: 6px; background: var(--gray-200); color: var(--gray-600);
  font-size: 11px; line-height: 1; cursor: pointer;
}
.pocp-sbar-clear:hover { background: var(--gray-300); color: var(--gray-800); }
.pocp-sbar-clear[hidden] { display: none; }
.pocp-count { flex: none; font-size: 12px; font-weight: 600; color: var(--gray-600); white-space: nowrap; }
.pocp-count:empty { display: none; }
.pocp-btn-exp {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 1.5px solid rgba(0,54,68,.22); border-radius: 8px;
  background: #fff; color: #0a4d5e;
  font: 600 13px var(--fbody); white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.pocp-btn-exp svg { width: 15px; height: 15px; }
.pocp-btn-exp:hover:not(:disabled) {
  background: #eef7f8; border-color: #2fa4a9; color: #003644;
  box-shadow: 0 2px 8px rgba(0,54,68,.10);
}
.pocp-btn-exp:disabled { opacity: .5; cursor: not-allowed; }
.pocp-btn-exp[hidden] { display: none; }
/* Lista de pedidos: só ela rola; o cabeçalho da tabela gruda no topo dela */
.pocp-list {
  flex: 0 1 auto; min-height: 0; overflow: auto;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.pocp-skel { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.pocp-skel .por-skel { height: 38px; border-radius: 8px; }
.pocp-empty { padding: 40px 24px; }
.pocp-list .pocp-table { box-shadow: none; border-radius: 0; }
.pocp-table td { padding: 8px 12px; }
.pocp-table td.por-td-exp { padding-left: 6px; padding-right: 0; }
.pocp-ped-num { display: block; font-weight: 800; color: #003644; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pocp-sub-txt { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; color: var(--gray-500); white-space: nowrap; }
.pocp-dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--gray-400); }
/* Sem rolagem horizontal: Pedido, Entrega, Itens e Ações ficam na largura do conteúdo
   (width:1% = encolher até o mínimo) e o Cliente leva o resto, quebrando a linha em vez
   de empurrar a tabela para fora do modal. */
.pocp-table td.pocp-td-ped, .pocp-table td.pocp-td-dt,
.pocp-row > td.por-td-num, .pocp-table td.pocp-td-acoes { width: 1%; }
.pocp-cli-nome { display: block; overflow-wrap: anywhere; font-weight: 600; color: var(--gray-800); }
.pocp-td-cli .pocp-sub-txt { flex-wrap: wrap; white-space: normal; }
.pocp-td-dt { white-space: nowrap; }
.pocp-dt { font-weight: 600; color: var(--gray-800); font-variant-numeric: tabular-nums; }
.pocp-itens {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  background: rgba(0,54,68,.07); color: #0a4d5e;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  transition: background .15s, color .15s;
}
.pocp-nv { color: var(--gray-400); font-style: italic; font-weight: 500; }
/* Pedido aberto: o mesmo destaque do registro posicionado nos grids do painel */
.pocp-table .por-row.is-open td { background: #e3f1f2; }
.pocp-table .por-row.is-open:hover td { background: #d9ecec; }
.pocp-table .por-row.is-open td:first-child { box-shadow: inset 3px 0 0 #2fa4a9; }
.pocp-table .por-row.is-open .pocp-itens { background: #003644; color: #fff; }
/* Itens do pedido (linha-filha) */
.pocp-sub { padding: 8px 14px 12px 44px; }
.pocp-sub.is-new { animation: pocpAbre .18s ease; }
@keyframes pocpAbre { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.pocp-it-n { width: 52px; color: var(--gray-500); font-weight: 600; }
.pocp-it-prod .por-sub-cod { margin-right: 8px; font-variant-numeric: tabular-nums; }
.pocp-it-desc { color: var(--gray-700); }
.pocp-it-qtd { width: 130px; font-weight: 700; color: #003644; }
/* Corte na coleta (O.C. de Carregamento): a marca "Conferido parcial" ao lado do número
   do pedido, e a coluna Conferida dos itens, em âmbar no item conferido abaixo do pedido. */
.pocp-ped-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pocp-it-conf { width: 120px; font-weight: 600; color: var(--gray-700); }
.pocp-subtable td.pocp-it-conf.is-corte { background: rgba(245,158,11,.10); color: #92400e; font-weight: 700; }
/* Item que casou com a busca */
.pocp-subtable tr.is-hit td { background: #e6f6f3; }
.pocp-subtable tr.is-hit td:first-child { box-shadow: inset 3px 0 0 #2fa4a9; }
.pocp-foot-nota { margin-right: auto; align-self: center; font-size: 11.5px; color: var(--gray-500); }
/* Exportar para Excel ao lado do Fechar: a nota já empurra os botões para a direita
   (o margin-left:auto do .btn-excel global o soltaria no meio do rodapé), e a fonte
   casa com a do Fechar. */
.porr-card--peds .porr-foot .btn-excel { margin-left: 0; font-size: 13px; }
/* maximizado: card ocupa a tela e a lista cresce para aproveitar o espaço */
.porr-ovl.is-max .porr-card--peds {
  width: 100%; max-width: none;
  height: calc(100vh - 16px); max-height: calc(100vh - 16px);
  border-radius: 8px;
}
.porr-ovl.is-max .porr-card--peds .pocp-body,
.porr-ovl.is-max .porr-card--peds .pocp-list { flex: 1; }
@media (max-width: 760px) {
  .pocp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pocp-tools { flex-wrap: wrap; }
  .pocp-sbar { flex-basis: 100%; }
  .pocp-foot-nota { display: none; }
}
@media (max-height: 720px) {
  .pocp-stat { padding: 6px 10px; }
  .pocp-stat-ic { width: 26px; height: 26px; }
  .pocp-stat-txt b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pocp-sub.is-new { animation: none; }
  .poc-ped-abrir, .poc-ped-go, .poc-ped-chip, .poc-tip,
  .por-rkp, .por-rkp-bar > span, .por-rank-base, .por-un-mais { transition: none; }
  .poc-ped-abrir:hover, .poc-ped-chip:hover { transform: none; }
}

/* ── Painéis de Coleta e Reposição: intervenção de operador nos itens ──
   Botão da coluna Ação e modais oc-modal-coletor.js / or-modal-repositor.js.
   A largura da coluna e o offset da célula fixa moram na regra base acima. */

/* Operador — petrol do sistema (ação não destrutiva, ao lado de reset/cancelar) */
.por-btn-reset--oper {
  border-color: rgba(0,54,68,.45);
  color: #003644;
}
.por-btn-reset--oper:hover:not(:disabled) {
  background: linear-gradient(135deg, #00465a, #003644);
  border-color: #003644;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(0,54,68,.18);
}

/* ── Modal de Operador do Item (O.C. e O.R.) ─────────────────────
   Reaproveita todo o chassi .porr-* do modal de reset/cancelamento; abaixo só o
   que é exclusivo: combo de operador, bloco da reserva (só a O.C. tem reserva),
   filtros de seleção do lote e etiquetas das linhas. */
.porr-sel {
  width: 100%;
  border: 1.5px solid var(--gray-400); border-radius: 8px;
  padding: 8px 10px;
  font: 600 13px var(--fbody);
  color: var(--gray-800);
  background: var(--white);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.porr-sel:focus { outline: none; border-color: #2c8aa0; box-shadow: 0 0 0 3px rgba(44,138,160,.15); }
.porr-bloco {
  margin-top: 14px; padding: 11px 13px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200); border-radius: 10px;
}
.porr-ck-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--gray-800); cursor: pointer;
}
.porr-ck-line input { width: 15px; height: 15px; accent-color: #2c8aa0; cursor: pointer; }
.porr-ck-line.is-off { color: var(--gray-500); cursor: not-allowed; }
.porr-ck-line.is-off input { cursor: not-allowed; }
.porr-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--gray-600); line-height: 1.5; }
.porr-hint strong { color: #003644; }
/* filtros de seleção do lote (operador atribuído, rua, reserva) */
.porr-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.porr-filtro { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; }
.porr-filtro label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-500);
}
.porr-filtro select {
  border: 1px solid var(--gray-300); border-radius: 7px;
  padding: 6px 8px; font: 600 12px var(--fbody);
  color: var(--gray-800); background: var(--white); cursor: pointer;
}
.porr-filtro select:focus { outline: none; border-color: #2c8aa0; box-shadow: 0 0 0 2px rgba(44,138,160,.15); }
/* etiquetas da linha: atribuído, reserva, zona e motivo do bloqueio */
.porr-ck-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.porr-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(0,54,68,.08); color: #003644;
}
.porr-tag--res  { background: #fef3c7; color: #92400e; }
.porr-tag--zona { background: var(--gray-100); color: var(--gray-600); }
.porr-tag--off  { background: rgba(192,71,59,.12); color: #a13328; }
.porr-ck-row--off { opacity: .55; cursor: not-allowed; }
.porr-ck-row--off:hover { background: transparent; }
/* .porr-ck-row é display:flex — sem esta regra o atributo hidden (que só vale pela
   folha do navegador) não esconderia a linha filtrada. */
.porr-ck-row[hidden] { display: none; }
/* Confirmar — petrol, acompanha o botão da coluna Ação */
.porr-btn-ok--oper { background: linear-gradient(135deg, #00465a, #003644); }
.porr-btn-ok--oper:hover { box-shadow: 0 4px 12px rgba(0,54,68,.35); }

/* ── O.I.: uma linha por CONTAGEM (oi-modal-executor.js) ──────────
   Na O.I. a unidade é a leitura, não o item: cada contagem do endereço tem o seu
   operador designado, então o modal é uma lista de combos, um por contagem. */
.porr-leit-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 4px;
}
.porr-leit-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200); border-radius: 10px;
}
.porr-leit-row.is-done { background: #f0f9f9; border-color: rgba(47,164,169,.28); }
.porr-leit-badge {
  flex-shrink: 0; margin-top: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0,54,68,.10); color: #003644;
}
.porr-leit-badge.is-extra { background: #e0e7ff; color: #4338ca; }
.porr-leit-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.porr-leit-sel { font-size: 12.5px; padding: 6px 9px; }
.porr-leit-sel.porr-invalid {
  border-color: #c0473b;
  box-shadow: 0 0 0 3px rgba(192,71,59,.18);
  animation: porr-pulse 1.1s ease-in-out infinite;
}
.porr-leit-lock { font-size: 12.5px; color: var(--gray-800); }
.porr-leit-lock b { color: #003644; }
.porr-leit-sub { font-size: 11px; color: var(--gray-500); }
.porr-leit-res {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: #fef3c7; color: #92400e;
}

.vp-fb-warn { background: #fef3c7; color: #92400e; }

/* =====================================================================
   Rotina de Inventário (O.I.) — painel-oi.js
   Reutiliza .por-* (cards, tabela, badges, barras, filtros, seções).
   Abaixo só o que é exclusivo do inventário.
   ===================================================================== */

/* Badges de status/tipo próprios (usam a base .por-badge) */
.por-badge--petrol  { background: rgba(0,54,68,.10);  color: #003644; }
.por-badge--violet  { background: #ede9fe;            color: #6d28d9; }
.por-badge--slate   { background: #e2e8f0;            color: #334155; }
/* Azul do status "Aprovado" (3). Antes ele repetia o verde do "Finalizado" (4) e
   os dois pills ficavam indistinguíveis — sendo que as consequências são opostas:
   Aprovado ainda entra em ST_RESET_CANC e pode ser desfeito, Finalizado já aplicou
   o ajuste ao estoque. O matiz (224°) é o meio da única faixa livre entre o violeta
   da aprovação (263°) e o verde do desfecho (163°): o indigo (245°) já é a
   recontagem e o teal (192°) já é o status "Aberto". Contraste 5.49:1. */
.por-badge--blue    { background: #dbeafe;            color: #1d4ed8; }

/* Pílula de tipo (Geral / Avulso) na lista */
.oi-tipo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
  border: 1px solid transparent;
}
.oi-tipo--g { background: rgba(0,54,68,.08);  color: #003644; border-color: rgba(0,54,68,.16); }
.oi-tipo--a { background: #fff7ed;            color: #b45309; border-color: #fed7aa; }
.oi-tipo svg { width: 12px; height: 12px; }

/* Grid da aba Inventários: a Descrição tem piso de largura (numa tela de 1366px com o menu
   aberto, a Progresso fica como a última coluna à vista; Itens em diante, na rolagem) e quebra
   em no máximo 2 linhas, com reticências e o texto inteiro no title. */
.oi-lista td.oi-td-desc { min-width: 295px; }
.oi-lista-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}

/* Acuracidade em célula — ponto colorido + valor */
.oi-acc { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.oi-acc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.oi-acc--hi  .oi-acc-dot { background: #059669; }
.oi-acc--mid .oi-acc-dot { background: #d97706; }
.oi-acc--lo  .oi-acc-dot { background: #dc2626; }
.oi-acc--hi  { color: #065f46; }
.oi-acc--mid { color: #92400e; }
.oi-acc--lo  { color: #991b1b; }

/* Valor monetário (KPI financeiro) */

/* Timeline do workflow (no painel da O.I.) — card branco, casa com KPIs/seções */
.oi-flow {
  display: flex; align-items: center; gap: 0;
  margin: 16px 20px 0;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow-x: auto; flex-shrink: 0;
}
.oi-flow-step { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.oi-flow-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gray-100); color: var(--gray-500);
  border: 2px solid var(--gray-200); flex-shrink: 0; transition: all .2s;
}
.oi-flow-dot svg { width: 15px; height: 15px; }
.oi-flow-txt { line-height: 1.15; }
.oi-flow-txt b { display: block; font-size: 12px; font-weight: 700; color: var(--gray-600); }
.oi-flow-txt span { font-size: 10.5px; color: var(--gray-500); }
.oi-flow-line { width: 34px; height: 2px; background: var(--gray-200); margin: 0 8px; flex: 1 1 20px; min-width: 16px; }
.oi-flow-step.done .oi-flow-dot    { background: #d1fae5; border-color: #34d399; color: #047857; }
.oi-flow-step.done .oi-flow-txt b  { color: #047857; }
.oi-flow-step.current .oi-flow-dot { background: var(--tl-100); border-color: var(--tl); color: var(--tl-d); box-shadow: 0 0 0 4px rgba(47,164,169,.16); }
.oi-flow-step.current .oi-flow-txt b { color: var(--tl-dd); }
.oi-flow-step.canc .oi-flow-dot    { background: #fee2e2; border-color: #f87171; color: #b91c1b; }
/* Card inteiro tingido quando é o card único de cancelamento geral (ver
   oi-flow--canc em painel-oi.js) — mesma paleta do dot acima. */
.oi-flow--canc { background: #fef2f2; border-color: #fecaca; }
.oi-flow-line.done { background: #34d399; }

/* Mapa de calor de divergências por rua */
.oi-heat-wrap { padding: 4px 20px 18px; }
.oi-heat-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.oi-heat-cell {
  position: relative; min-width: 74px; flex: 0 0 auto;
  border-radius: 10px; padding: 10px 12px; cursor: default;
  border: 1px solid var(--gray-200); background: var(--gray-50);
  transition: transform .12s;
}
.oi-heat-cell:hover { transform: translateY(-2px); }
.oi-heat-rua { font-size: 11px; font-weight: 700; color: #334155; letter-spacing: .02em; }
.oi-heat-val { font-size: 18px; font-weight: 800; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.oi-heat-sub { font-size: 9.5px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
.oi-heat-cell.h0 { background: #f0fdf4; border-color: #bbf7d0; }
.oi-heat-cell.h0 .oi-heat-val { color: #047857; }
.oi-heat-cell.h1 { background: #fef9c3; border-color: #fde68a; }
.oi-heat-cell.h1 .oi-heat-val { color: #a16207; }
.oi-heat-cell.h2 { background: #ffedd5; border-color: #fdba74; }
.oi-heat-cell.h2 .oi-heat-val { color: #c2410c; }
.oi-heat-cell.h3 { background: #fee2e2; border-color: #fca5a5; }
.oi-heat-cell.h3 .oi-heat-val { color: #b91c1c; }
.oi-heat-cell.h4 { background: #fecaca; border-color: #f87171; box-shadow: inset 0 0 0 1px rgba(220,38,38,.25); }
.oi-heat-cell.h4 .oi-heat-val { color: #991b1b; }
.oi-heat-legend { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 11px; color: var(--gray-600); flex-wrap: wrap; }
.oi-heat-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.oi-heat-legend .sw { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }

/* Stepper da criação (Nova O.I.) */
.oi-new { display: flex; flex-direction: column; gap: 0; padding: 0; height: 100%; }
.oi-steps { display: flex; justify-content: center; padding: 16px 22px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.oi-steps-inner { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 820px; }
.oi-step { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.oi-step-num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: var(--gray-100); color: var(--gray-500);
  border: 2px solid var(--gray-200); transition: all .2s;
}
.oi-step-lbl { font-size: 12.5px; font-weight: 700; color: var(--gray-500); }
.oi-step.done .oi-step-num    { background: var(--tl-dd); border-color: var(--tl-dd); color: #fff; }
.oi-step.current .oi-step-num { border-color: var(--tl); background: var(--tl-100); color: var(--tl-d); box-shadow: 0 0 0 4px rgba(47,164,169,.16); }
.oi-step.current .oi-step-lbl,
.oi-step.done .oi-step-lbl    { color: var(--tl-dd); }
.oi-step-conn { height: 2px; background: var(--gray-200); margin: 0 14px; flex: 1 1 24px; min-width: 20px; max-width: 150px; }
.oi-step-conn.done { background: var(--tl-dd); }

.oi-new-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; }
.oi-new-inner { max-width: 820px; margin: 0 auto; }
/* Rodapé fixo da Nova O.I. — painel flutuante alinhado às colunas, sempre visível ao rolar */
.oi-new-foot {
  display: flex; justify-content: center; flex-shrink: 0;
  padding: 12px 0 16px; background: #d8e8ed;
}
.oi-new-foot-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: none;
  padding: 11px 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
  border: 1px solid var(--gray-200); border-radius: 14px;
  box-shadow: 0 8px 22px -10px rgba(0,54,68,.28);
}

/* Bloco de campo com controle customizado (cards de tipo, prévia) */
.oi-fld-block { margin-top: 22px; }
.oi-fld-block > label,
.oi-prev-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--gray-700); margin-bottom: 10px; }
.oi-fld-block > label .req { color: #dc2626; }

/* Stepper numérico (leituras por item) */
.oi-stepper { display: inline-flex; align-items: stretch; width: max-content; background: #fff; border: 1px solid var(--gray-300); border-radius: 9px; overflow: hidden; }
.oi-step-btn {
  border: 0; background: var(--gray-50); color: #003644; width: 30px; font-size: 16px; font-weight: 700;
  cursor: pointer; display: grid; place-items: center; line-height: 1; transition: background .12s;
}
.oi-step-btn:hover { background: rgba(0,54,68,.10); }
.oi-step-btn:active { background: rgba(0,54,68,.16); }
.oi-stepper input {
  width: 56px; border: 0; border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200);
  text-align: center; font-size: 13.5px; font-weight: 800; color: #003644; background: #fff; -moz-appearance: textfield;
}
.oi-stepper input:focus { outline: none; }
/* Stepper travado (sem operador habilitado): cinza de desabilitado, não o sky blue
   de campo somente-leitura — aqui o campo não é consultável, está indisponível. */
.oi-stepper.is-disabled { background: var(--gray-100); border-color: var(--gray-200); opacity: .65; }
.oi-stepper.is-disabled input { background: var(--gray-100); color: var(--gray-500); cursor: not-allowed; }
.oi-stepper.is-disabled .oi-step-btn { color: var(--gray-400); cursor: not-allowed; }
.oi-stepper.is-disabled .oi-step-btn:hover { background: var(--gray-50); }
.oi-stepper input::-webkit-outer-spin-button,
.oi-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Designação de operador por leitura */
.oi-desig { margin-top: 4px; }
/* Teto de largura: o combo mostra só um apelido — esticado na linha toda do
   formulário ele virava uma faixa vazia de ~550px. */
.oi-desig-list { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.oi-desig-row { display: flex; align-items: center; gap: 12px; }
.oi-desig-num {
  flex: 0 0 92px; font-size: 12px; font-weight: 800; color: #003644;
  background: rgba(0,54,68,.07); border-radius: 8px; padding: 8px 10px; text-align: center;
}
.oi-desig-row select { flex: 1; min-width: 0; }
.oi-desig-row select option:disabled { color: var(--gray-400); }
/* Combo de operador enhanced (.ss-wrap) ocupa a linha como o <select> nativo,
   ficando igual ao combo de Depósito (mesma cor/config + busca interna). */
.oi-desig-row .ss-wrap { flex: 1; min-width: 0; }

/* Modal — manutenção de motivos de divergência (O.I.) */
.oimt-ovl { position: fixed; inset: 0; z-index: 1000; background: rgba(0,20,26,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.oimt-card { width: min(560px, 100%); max-height: min(80vh, 640px); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.oimt-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: linear-gradient(135deg, #003644 0%, #00232c 100%); color: #fff; }
.oimt-head-ico { display: grid; place-items: center; width: 30px; height: 30px; }
.oimt-head-ico svg { width: 18px; height: 18px; }
.oimt-title { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.2; }
.oimt-close { border: 0; background: rgba(255,255,255,.14); color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; }
.oimt-close:hover { background: rgba(255,255,255,.26); }
.oimt-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.oimt-add { display: flex; gap: 10px; }
.oimt-add input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 13px; }
.oimt-add input:focus { outline: none; border-color: #0a4d5e; box-shadow: 0 0 0 3px rgba(10,77,94,.15); }
.oimt-btn-add { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 0; background: linear-gradient(135deg,#0a4d5e,#003644); color: #fff; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.oimt-btn-add svg { width: 15px; height: 15px; }
.oimt-btn-add:hover { filter: brightness(1.08); }
.oimt-list { display: flex; flex-direction: column; gap: 8px; }
.oimt-empty { padding: 18px; text-align: center; color: var(--gray-500); font-size: 13px; }
.oimt-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; }
.oimt-row.inativo { background: var(--gray-50); }
.oimt-row.inativo .oimt-desc { color: var(--gray-500); text-decoration: line-through; }
.oimt-desc { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #003644; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oimt-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }
.oimt-badge.on  { background: rgba(4,120,87,.12); color: #047857; }
.oimt-badge.off { background: var(--gray-200); color: var(--gray-600); }
.oimt-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.oimt-act { border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.oimt-act svg { width: 14px; height: 14px; }
.oimt-act:hover { background: var(--gray-50); }
.oimt-act.danger { color: #b91c1c; border-color: #fecaca; }
.oimt-act.danger:hover { background: #fef2f2; }
.oimt-act.ok { color: #047857; border-color: #bbf7d0; }
.oimt-act.ok:hover { background: #f0fdf4; }
.oimt-edit-inp { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid #0a4d5e; border-radius: 8px; font-size: 13px; box-shadow: 0 0 0 3px rgba(10,77,94,.12); }
.oimt-edit-inp:focus { outline: none; }
.oimt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--gray-200); background: var(--gray-50); }
.oimt-hint { font-size: 11.5px; color: var(--gray-500); }
.oimt-btn-close { border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700); padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.oimt-btn-close:hover { background: var(--gray-100); }

/* ── Modal de recontagem da O.I. (oi-modal-recontagem.js) ─────────────────── */
.oirc-ovl { position: fixed; inset: 0; z-index: 1000; background: rgba(0,20,26,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.oirc-card { width: min(560px, 100%); max-height: min(86vh, 720px); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.oirc-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: linear-gradient(135deg, #003644 0%, #00232c 100%); color: #fff; }
.oirc-head-ico { display: grid; place-items: center; width: 30px; height: 30px; }
.oirc-head-ico svg { width: 18px; height: 18px; }
.oirc-title { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.2; }
.oirc-close { border: 0; background: rgba(255,255,255,.14); color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; }
.oirc-close:hover { background: rgba(255,255,255,.26); }
.oirc-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.oirc-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--gray-50); }
.oirc-item-cod { font-size: 12px; font-weight: 800; color: #fff; background: #0a4d5e; padding: 2px 8px; border-radius: 6px; }
.oirc-item-desc { flex: 1; min-width: 120px; font-size: 13px; font-weight: 700; color: #003644; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oirc-item-end { font-size: 12px; font-weight: 600; color: var(--gray-600); }
.oirc-sec { border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; }
.oirc-sec h6 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.oirc-empty { font-size: 12.5px; color: var(--gray-500); padding: 6px 0; }
.oirc-read { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--gray-200); }
.oirc-read:last-of-type { border-bottom: 0; }
.oirc-read.is-pend { opacity: .7; }
.oirc-read-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); flex-shrink: 0; }
.oirc-read-badge.is-extra { background: #e0e7ff; color: #4338ca; }
.oirc-read-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; flex-shrink: 0; }
.oirc-read-op { flex: 1; min-width: 0; font-size: 12.5px; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oirc-read-qtd { font-size: 14px; font-weight: 800; color: #003644; font-variant-numeric: tabular-nums; }
.oirc-read.is-pend .oirc-read-qtd { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
.oirc-sys { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--gray-200); }
.oirc-sys .k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--gray-600); }
.oirc-sys .k svg { width: 14px; height: 14px; }
.oirc-sys .v { font-size: 14px; font-weight: 800; color: #6d28d9; font-variant-numeric: tabular-nums; }
.oirc-fld { display: flex; flex-direction: column; gap: 5px; }
.oirc-fld label { font-size: 12px; font-weight: 700; color: var(--gray-600); }
.oirc-fld label .req { color: #b91c1c; }
.oirc-fld select { padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 13px; background: #fff; }
.oirc-fld select:focus { outline: none; border-color: #0a4d5e; box-shadow: 0 0 0 3px rgba(10,77,94,.15); }
.oirc-hint { font-size: 11.5px; color: var(--gray-500); }
.oirc-warn { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 9px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px; line-height: 1.45; }
.oirc-warn svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.oirc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--gray-200); background: var(--gray-50); }
.oirc-foot-hint { font-size: 11.5px; color: var(--gray-500); max-width: 240px; line-height: 1.35; }
.oirc-foot-acts { display: flex; align-items: center; gap: 10px; }
.oirc-btn-cancel { border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700); padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.oirc-btn-cancel:hover { background: var(--gray-100); }
.oirc-btn-ok { display: inline-flex; align-items: center; gap: 7px; border: 0; background: linear-gradient(135deg,#0a4d5e,#003644); color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.oirc-btn-ok svg { width: 15px; height: 15px; }
.oirc-btn-ok:hover { filter: brightness(1.08); }
.oirc-btn-ok:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* Grid de campos do formulário */
.oi-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
/* Nova O.I.: Filial + Depósito lado a lado (valores curtos, meia linha basta) */
.oi-form-grid.oi-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Avulso: Rua (só número) estreita; o Fabricante fica com o resto da linha */
.oi-form-grid.oi-grid-rua { grid-template-columns: 130px minmax(0, 1fr); gap: 14px; }
@media (max-width: 560px) {
  .oi-form-grid.oi-grid-2,
  .oi-form-grid.oi-grid-rua { grid-template-columns: 1fr; }
}
.oi-fld { display: flex; flex-direction: column; gap: 5px; }
.oi-fld.col-2 { grid-column: span 2; }
.oi-fld label { font-size: 12px; font-weight: 700; color: var(--gray-700); }
.oi-fld label .req { color: #dc2626; }
.oi-fld input, .oi-fld select, .oi-fld textarea {
  border: 1.5px solid var(--gray-300); border-radius: 8px; padding: 7px 10px;
  font-size: 13px; font-family: inherit; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.oi-fld input:focus, .oi-fld select:focus, .oi-fld textarea:focus {
  outline: none; border-color: var(--tl); box-shadow: 0 0 0 3px rgba(47,164,169,.14);
}
.oi-fld .hint { font-size: 11px; color: var(--gray-500); }
/* Toggle dentro de um campo: mantém a largura natural (não estica na coluna) */
.oi-fld > .oi-toggle { align-self: flex-start; }
/* Controle + explicação na mesma linha (Tipo de inventário, Leituras por item):
   a dica fica ao lado do controle que ela explica, e não numa linha a mais. */
.oi-tipo-row, .oi-max-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oi-tipo-row > .oi-toggle, .oi-max-row > .oi-stepper { flex: none; }
.oi-tipo-row > .hint, .oi-max-row > .hint { flex: 1 1 220px; min-width: 0; font-size: 11.5px; line-height: 1.35; }
/* Rótulo com contador à direita (Descrição do inventário) */
.oi-lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.oi-count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--gray-500); }
/* Checkbox de opção solta no formulário (ex.: "Incluir endereços sem estoque") —
   mesmo papel do .cob-chk do Painel Gerencial da O.I., escala própria desta tela. */
.oi-chk { display: inline-flex; align-items: center; gap: 7px; height: 32px; font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer; user-select: none; }
.oi-chk input { width: 15px; height: 15px; accent-color: #003644; cursor: pointer; }
.oi-chk-row { display: flex; flex-wrap: wrap; gap: 0 24px; }

/* Resumo da geração */
.oi-resumo { max-width: 100%; }
.oi-resumo-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--gray-200); font-size: 13.5px; }
.oi-resumo-row .k { color: var(--gray-600); }
.oi-resumo-row .v { font-weight: 700; color: #003644; text-align: right; }

/* Nova O.I. — lembrete "contagem cega" no pé do resumo (informativo, discreto) */
.oi-blind-note {
  display: flex; align-items: flex-start; gap: 8px; padding-top: 10px;
  border-top: 1px solid var(--gray-100); color: var(--gray-600);
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
}
/* ícone no topo: com a contagem por validade o texto ocupa várias linhas */
.oi-blind-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: #0a4d5e; }

/* Nova O.I. — aviso bloqueante: sem operador habilitado não há como contar */
.oi-desig-warn {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px; border-radius: 10px;
  background: rgba(185,28,28,.07); border: 1px solid rgba(185,28,28,.35); color: #991b1b;
  font-size: 12px; font-weight: 600; line-height: 1.45; margin-top: 4px;
}
.oi-desig-warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.oi-btn-confirm {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tl-dd); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px;
  font-size: 14px; font-weight: 800; line-height: 1.2; cursor: pointer; transition: all .12s;
}
.oi-btn-confirm:hover:not(:disabled) { background: var(--tl-d); transform: translateY(-1px); }
.oi-btn-confirm svg { width: 16px; height: 16px; }
/* Desabilitado precisa PARECER desabilitado: sem esta regra o botão seguia
   colorido, com cursor de mão e o hover subindo — lido como clicável, e o clique
   (bloqueado pelo próprio disabled) passava por botão quebrado. */
.oi-btn-confirm:disabled {
  background: var(--gray-300); color: var(--gray-500);
  box-shadow: none; transform: none; cursor: not-allowed;
}
.oi-btn-skip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--gray-300); border-radius: 8px; padding: 7px 16px;
  font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--gray-600); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.oi-btn-skip svg { width: 16px; height: 16px; }
/* Ação de descartar/cancelar: detalhe vermelho no hover, igual às demais telas (.porr-btn-cancel) */
.oi-btn-skip:hover:not(:disabled) {
  background: rgba(192,71,59,.07); color: #c0473b;
  border-color: rgba(192,71,59,.4);
  box-shadow: 0 0 0 2.5px rgba(192,71,59,.12);
}
.oi-btn-skip:disabled {
  opacity: .45; box-shadow: none; cursor: not-allowed;
  background: #fff; color: var(--gray-600); border-color: var(--gray-300);
}

/* Nova O.I. — tela única (formulário + resumo ao vivo) */
.oi-new1 { display: flex; flex-direction: column; height: 100%; }
/* Conteúdo rente às bordas (alinhado à barra .oi-modebar, que fica em recuo 0).
   margin-right negativo "sangra" a barra de rolagem para dentro do padding do
   .wiz, mantendo o grid rente nos DOIS lados (o padding-right compensa a sangria). */
/* O recuo vertical fica no .oi-new1-grid (e não aqui) para o `top` do resumo
   fixo (sticky) contar a partir da borda da área rolável, sem somar padding. */
.oi-new1-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 22px 0 0; margin-right: -22px; }
/* Formulário + resumo com divisor arrastável (mesmo padrão do .oc-body da
   Ordem de Coleta): o resumo tem largura própria em --oi-side-w e o formulário
   ocupa o resto. As margens do divisor recompõem o gap visual de 20px.
   align-items:flex-start: cada card tem a altura do próprio conteúdo — o resumo
   não estica até a altura do formulário (o divisor estica por conta própria). */
.oi-new1-grid { display: flex; align-items: flex-start; max-width: none; margin: 0; padding: 22px 0; }
.oi-new1-main { flex: 1; min-width: 0; }
.oi-new1-grid > .split-resizer { margin: 0 7px; }
@media (max-width: 900px) {
  /* empilhado, o eixo cruzado é a largura: os cards voltam a ocupar a linha toda */
  .oi-new1-grid { flex-direction: column; align-items: stretch; gap: 20px; }
  .oi-new1-grid > .split-resizer { display: none; }
}

.oi-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden;
  animation: wiz-fade-up .32s ease both;
}
.oi-new1-side.oi-card { animation-delay: .07s; }
.oi-card-head {
  position: relative;
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--gray-200);
  background: linear-gradient(135deg, #f4fafb 0%, #e9f5f6 100%);
}
/* Faixa de cor sutil na base do header, revelada suavemente */
.oi-card-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--tl-l) 0%, var(--tl) 45%, transparent 100%);
  transform-origin: left; animation: oi-head-line .5s ease .12s both;
}
.oi-card-ic {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(0,54,68,.08); color: #003644; flex-shrink: 0;
  animation: oi-ic-pop .4s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes oi-head-line { from { width: 0; opacity: 0; } to { width: 100%; opacity: .6; } }
@keyframes oi-ic-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.oi-card-ic svg { width: 18px; height: 18px; }
.oi-card-ht h3 { margin: 0; font-size: 15px; font-weight: 800; color: #003644; line-height: 1.2; }
.oi-card-ht p { margin: 2px 0 0; font-size: 11.5px; color: var(--gray-500); }
.oi-card-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
/* Form da Nova O.I. em três seções numeradas (O que contar / Como contar /
   Identificação): o vão entre seções vem da própria seção (filete + recuo),
   e dentro dela os campos ficam a 12px um do outro. */
.oi-new1-main .oi-card-body { gap: 0; }
.oi-sec { display: flex; flex-direction: column; gap: 12px; }
.oi-sec + .oi-sec { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gray-200); }
.oi-sec-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.oi-sec-n {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #003644; color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
}
.oi-sec-h h4 {
  margin: 0; font-size: 12px; font-weight: 800; line-height: 1.2; color: #003644;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.oi-sec-sub { min-width: 0; font-size: 11.5px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bloco do avulso: nasce logo abaixo de Filial/Depósito quando o tipo é Avulso.
   Borda esquerda = estado da regra "ao menos um critério" (âmbar pendente, verde
   pronto), no mesmo mapa de cores dos cartões de decisão da O.I. */
.oi-avulso {
  display: flex; flex-direction: column; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--gray-200); border-left: 3px solid var(--gray-300);
  border-radius: 10px; background: var(--gray-50); transition: border-color .2s;
}
.oi-avulso.is-pend { border-left-color: #f59e0b; }
.oi-avulso.is-ok   { border-left-color: #10b981; }
.oi-avulso-regra { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.oi-avulso-regra svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.oi-avulso.is-pend .oi-avulso-regra { color: #92400e; }
.oi-avulso.is-ok   .oi-avulso-regra { color: #047857; }

/* Resumo (aside): largura própria, arrastável pelo divisor, e FIXO na área
   rolável — o formulário rola por baixo e os números seguem à vista enquanto
   se edita. top = recuo do .oi-new1-grid, então ele não "pula" ao grudar. */
.oi-new1-side {
  width: var(--oi-side-w, 380px); flex: 0 0 auto; display: flex; flex-direction: column;
  position: sticky; top: 22px;
  /* teto = altura visível da área rolável (medida em JS, --oi-side-max): o card
     tem a altura do conteúdo e, se passar disso, só o corpo rola por dentro */
  max-height: var(--oi-side-max, none);
}
.oi-new1-side > .oi-card-head { flex: none; }
.oi-new1-side > .oi-card-body { gap: 12px; flex: 0 1 auto; min-height: 0; overflow-y: auto; }
/* Recarga da prévia: o conteúdo fica no lugar e só este ícone indica a espera.
   Aparece com atraso (resposta rápida nem chega a mostrá-lo) e some na hora —
   é só opacidade, o layout do painel não se mexe. */
.oi-prev-sync {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; color: var(--tl-d, #0c5e72);
  opacity: 0; transition: opacity .15s ease 0s; pointer-events: none;
}
.oi-prev-sync svg { width: 16px; height: 16px; }
.oi-new1-side.is-updating .oi-prev-sync { opacity: 1; transition-delay: .25s; }
.oi-new1-side.is-updating .oi-prev-sync svg { animation: oi-prev-spin .9s linear infinite; }
@keyframes oi-prev-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .oi-new1-side.is-updating .oi-prev-sync svg { animation: none; } }
@media (max-width: 900px) { .oi-new1-side { width: auto; position: static; max-height: none; } }

/* Prévia do escopo (aside) — grade 2×2 de números compactos (a explicação de
   cada um fica no title), a frase do escopo e os chips dos filtros. */
.oi-prev { display: flex; flex-direction: column; gap: 10px; }
.oi-prev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.oi-prev-stat {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--gray-200); border-radius: 10px; background: var(--gray-50); cursor: help;
}
.oi-prev-stat .top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.oi-prev-stat .ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.oi-prev-stat .ic svg { width: 14px; height: 14px; }
.oi-prev-stat .top b {
  min-width: 0; font-size: 10.5px; font-weight: 700; line-height: 1.2; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oi-prev-stat .bot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.oi-prev-stat .val { font-size: 20px; font-weight: 800; font-family: var(--fdisp, 'Saira', sans-serif); color: #003644; line-height: 1.1; }
.oi-prev-stat small { font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--gray-500); white-space: nowrap; }
.oi-prev-stat.t-petrol .ic { background: rgba(0,54,68,.10); color: #003644; }
.oi-prev-stat.t-amber  .ic { background: #fef3c7; color: #b45309; }
.oi-prev-stat.t-green  .ic { background: #d1fae5; color: #047857; }
.oi-prev-stat.t-teal   .ic { background: rgba(47,164,169,.16); color: #0c5e72; }
.oi-sum-chips-wrap { display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; }
.oi-sum-chips-l { flex-shrink: 0; padding-top: 4px; font-size: 11px; font-weight: 600; color: var(--gray-600); }
.oi-sum-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.oi-sum-chip {
  padding: 3px 9px; border-radius: 999px; font-size: 11px; line-height: 1.5;
  background: rgba(47,164,169,.14); color: #0a4d5e;
}
.oi-sum-chip b { font-weight: 700; color: var(--gray-600); }
.oi-prev-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 26px 18px; border: 1px dashed var(--gray-300); border-radius: 10px;
  font-size: 12px; color: var(--gray-500);
}
.oi-prev-empty svg { width: 22px; height: 22px; color: var(--gray-400); }
/* Escopo barrado por regra de negócio (@PVALIDACAO das procs) — aviso, não erro */
.oi-prev-empty.oi-prev-warn {
  border-color: #fcd34d; border-style: solid; background: #fffbeb;
  color: #92400e; font-weight: 600; line-height: 1.45;
}
.oi-prev-empty.oi-prev-warn svg { color: #b45309; }

/* Nota contextual do escopo (aside) */
.oi-prev-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 2px;
  padding: 10px 12px; border-radius: 9px; background: #eef7f8;
  color: #0a4d5e; font-size: 11.5px; line-height: 1.4;
}
.oi-prev-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

/* Filtro de produtos (multi) — mesmo padrão de assistente-inicializacao-etiquetas */
.oi-lbl-opt { font-weight: 500; color: var(--gray-500); }
.oi-prod-pick { display: flex; gap: 6px; align-items: center; }
.oi-prod-cod { width: 92px; flex-shrink: 0; text-align: center; font-family: var(--fmono, monospace); }
.oi-prod-btn {
  width: 42px; height: 38px; flex-shrink: 0; border: 1.5px solid var(--gray-300); border-radius: 9px;
  background: #fff; color: var(--gray-500); display: grid; place-items: center; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.oi-prod-btn:hover { border-color: var(--tl); color: var(--tl-d); }
.oi-prod-btn svg { width: 17px; height: 17px; }
.oi-prod-nome { flex: 1; min-width: 0; background: #fff; color: var(--gray-500); }

/* Listagem dos produtos adicionados ao filtro */
.oi-prodlist-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; margin-bottom: 6px; font-size: 12px; color: var(--gray-600);
}
.oi-prodlist-head b { color: #003644; }
.oi-prodlist-clear {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #f3b6af; background: #fff1f0; color: #c0473b;
  cursor: pointer; padding: 5px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.oi-prodlist-clear svg { width: 14px; height: 14px; }
.oi-prodlist-clear:hover { background: #ffe1dd; border-color: #e79a92; box-shadow: 0 0 0 3px rgba(192,71,59,.15); transform: translateY(-1px); }
.oi-prodlist {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden;
  /* até 5 linhas visíveis; a partir daí rola verticalmente */
  max-height: 185px; overflow-y: auto;
}
.oi-prodlist li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--gray-100); background: #fff;
}
.oi-prodlist li:last-child { border-bottom: none; }
.oi-prodlist li:nth-child(even) { background: var(--gray-50); }
.oi-prodlist .cod {
  font-family: var(--fmono, monospace); font-size: 11.5px; font-weight: 700;
  color: #0a4d5e; flex-shrink: 0; min-width: 48px;
}
.oi-prodlist .desc {
  flex: 1; min-width: 0; font-size: 13px; color: var(--gray-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oi-prodlist .rm {
  flex-shrink: 0; border: none; background: none; cursor: pointer; padding: 4px;
  color: var(--gray-400); border-radius: 7px; display: grid; place-items: center;
  transition: color .12s, background .12s;
}
.oi-prodlist .rm:hover { color: #c0392b; background: rgba(192,71,59,.10); }
.oi-prodlist .rm svg { width: 16px; height: 16px; }

/* Aprovação dos itens */
/* Corpo da Aprovação (rolagem + rodapé), abaixo do cartão de cabeçalho .oi-appr-top.
   Respiro igual nos quatro lados: 14px, o vão que a .wiz já deixa abaixo do cabeçalho
   petrol. A .wiz dá 22px nas laterais e 18px na base; as margens negativas (-8px nas
   laterais, -4px na base) descontam a diferença só nesta sub-tela — o padding da .wiz
   é global e o cabeçalho petrol depende dele. */
.oi-appr { display: flex; flex-direction: column; min-height: 0; flex: 1 1 0; margin: 0 -8px -4px; }

/* ── Cabeçalho da Aprovação ──────────────────────────────────────────────
   Identidade (voltar, título, O.I.) e abas Pendente/Aprovados num cartão só, com
   o acabamento dos cards da O.I. (.oi-card): branco, raio 12px e sombra leve. A
   faixa de cima repete o gradiente claro do .oi-card-head e segue a espessura do
   panel-head (padding 10px, ícone 34px, título 16px). Laterais a 14px da borda,
   como o topo (ver .oi-appr): mesmas bordas do rodapé e da lista (.oi-appr-scroll). */
.oi-appr-top {
  flex: none; margin: 0 -8px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,54,68,.05), 0 8px 20px -14px rgba(0,54,68,.35);
  overflow: hidden;
}
.oi-appr-hero {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 16px; border-bottom: 1px solid var(--gray-200);
  background: linear-gradient(135deg, #f4fafb 0%, #e9f5f6 100%);
}
/* filete teal na base da faixa, o mesmo do .oi-card-head */
.oi-appr-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; opacity: .6;
  background: linear-gradient(90deg, var(--tl-l) 0%, var(--tl) 45%, transparent 100%);
}
.oi-appr-back {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 32px; padding: 0 12px 0 8px; border-radius: 8px;
  border: 1px solid rgba(0,54,68,.18); background: #fff;
  font: 600 13px var(--fbody); color: #0a4d5e; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.oi-appr-back svg { width: 15px; height: 15px; transition: transform .15s; }
.oi-appr-back:hover { border-color: #003644; color: #003644; box-shadow: 0 0 0 3px rgba(0,54,68,.08); }
.oi-appr-back:hover svg { transform: translateX(-2px); }
.oi-appr-back:focus-visible { outline: none; border-color: var(--tl); box-shadow: 0 0 0 3px rgba(47,164,169,.2); }
.oi-appr-hero-sep { flex: none; width: 1px; height: 28px; background: rgba(0,54,68,.14); }
.oi-appr-hero-ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(0,54,68,.08); color: #003644;
}
.oi-appr-hero-ic svg { width: 18px; height: 18px; }
.oi-appr-hero-tx { flex: 1; min-width: 0; }
.oi-appr-hero-tx h2 { margin: 0; font-family: var(--fdisp); font-size: 16px; font-weight: 800; line-height: 1.2; color: #003644; }
.oi-appr-hero-tx p { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 2px 0 0; font-size: 11.5px; line-height: 1.3; color: var(--gray-500); }
.oi-appr-hero-tx p b { flex: none; font-weight: 700; color: #0a4d5e; }
.oi-appr-hero-tx p .dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--gray-400); }
.oi-appr-hero-tx p .desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-600); }
.oi-appr-hero-tags { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* "Por validade": mesma geometria da pílula de tipo (.oi-tipo), em teal */
.oi-appr-hero-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(47,164,169,.12); color: #0c5e72; border: 1px solid rgba(47,164,169,.28);
}
.oi-appr-hero-tag svg { width: 12px; height: 12px; }
@media (max-width: 700px) { .oi-appr-hero { flex-wrap: wrap; } .oi-appr-hero-tags { margin-left: 0; } }

/* Abas no pé do cartão. Altura mínima de quando a busca está na linha: sem ela (aba
   vazia) a linha encolhia e a tela pulava ao trocar de aba. */
.oi-appr-tabs { display: flex; align-items: stretch; gap: 22px; min-height: 44px; padding: 0 16px; background: #fff; flex-shrink: 0; }
.oi-appr-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent;
  font-size: 13px; font-weight: 700; color: var(--gray-500); padding: 0 4px;
  cursor: pointer; font-family: inherit; transition: color .15s;
}
/* sublinhado da aba ativa: barra de pontas arredondadas que cresce do centro */
.oi-appr-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: #003644;
  transform: scaleX(0); transition: transform .2s ease;
}
.oi-appr-tab:hover { color: #003644; }
.oi-appr-tab.active { color: #003644; }
.oi-appr-tab.active::after { transform: scaleX(1); }
.oi-appr-tab:focus-visible { outline: none; color: #003644; }
.oi-appr-tab:focus-visible::after { transform: scaleX(1); background: var(--tl); }
.oi-appr-tab-count {
  min-width: 22px; padding: 2px 7px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums;
  background: var(--gray-100); color: var(--gray-600); transition: background .15s, color .15s;
}
.oi-appr-tab:hover:not(.active) .oi-appr-tab-count { background: rgba(0,54,68,.08); color: #003644; }
.oi-appr-tab.active .oi-appr-tab-count { background: #003644; color: #fff; }
/* Busca na linha das abas: ali sobrava espaço, e a área de rolagem fica para os itens. */
.oi-appr-tabs-busca { margin-left: auto; align-self: center; width: min(360px, 45%); padding: 6px 0; }
.oi-appr-ok-wrap { overflow-x: auto; }
.oi-appr-sbar {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px;
  background: var(--gray-50); border: 1.5px solid var(--gray-300); border-radius: 8px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.oi-appr-sbar:focus-within { background: #fff; border-color: var(--tl); box-shadow: 0 0 0 3px rgba(47,164,169,.14); }
.oi-appr-sbar svg { width: 16px; height: 16px; color: var(--gray-500); flex-shrink: 0; }
.oi-appr-sbar:focus-within svg { color: var(--tl); }
.oi-appr-sbar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 13px; font-family: inherit; color: var(--gray-800); }
.oi-appr-sbar input::placeholder { color: var(--gray-400); }
.oi-appr-sbar-clear {
  display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border: 0; border-radius: 6px;
  background: var(--gray-200); color: var(--gray-500); cursor: pointer; font-size: 15px; line-height: 1; font-family: inherit;
}
.oi-appr-sbar-clear:hover { background: var(--gray-300); color: var(--gray-700); }
.oi-appr-selall { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--gray-700); cursor: pointer; flex-shrink: 0; }
.oi-appr-selall input, .apSel { width: 15px; height: 15px; accent-color: #003644; cursor: pointer; flex-shrink: 0; }
.oi-appr-sel-count { font-size: 13px; font-weight: 700; color: #003644; flex-shrink: 0; }
/* Sem padding no topo: o cabeçalho do cartão gruda (sticky, top 0) na borda da área de
   rolagem, e um padding ali deixaria uma fresta por onde o conteúdo passaria por cima.
   O respiro de cima vem da margem do primeiro filho. */
/* Laterais rentes ao cartão de cabeçalho e ao rodapé. A barra de rolagem (11px)
   "sangra" para o respiro lateral de 14px (ver .oi-appr): margin-right -14px leva a
   caixa até a borda da tela, e gutter reservado de 11px + padding-right 3px devolvem
   a borda direita do conteúdo ao mesmo lugar, com ou sem barra (scrollbar-gutter:
   stable). Os 2px da esquerda só existem para a sombra dos cartões não ser cortada
   pelo overflow. */
.oi-appr-scroll {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
  padding: 0 3px 18px 2px; margin: 0 -14px 0 -2px;
  display: flex; flex-direction: column; gap: 14px;
}
.oi-appr-scroll > :first-child { margin-top: 14px; }

/* Faixas recolhíveis do topo da aba Pendente ("Itens que conferem", "Em recontagem"):
   uma linha com a ação principal; a lista abre por baixo. overflow: clip (e não hidden)
   mantém o cabeçalho da tabela grudando no topo da área de rolagem. */
.oi-appr-strip {
  flex: none; background: #fff; border: 1px solid var(--gray-200); border-left: 4px solid var(--strip-c);
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: clip;
}
.oi-appr-strip--ok  { --strip-c: #10b981; --strip-bg: #d1fae5; --strip-fg: #047857; }
.oi-appr-strip--rec { --strip-c: #818cf8; --strip-bg: #e0e7ff; --strip-fg: #4338ca; }
.oi-appr-strip-head { display: flex; align-items: center; gap: 12px; padding: 6px 14px; }
.oi-appr-strip-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--strip-bg); color: var(--strip-fg); flex: none; }
.oi-appr-strip-ic svg { width: 16px; height: 16px; }
.oi-appr-strip-ic.oi-appr-ic--div { background: #fef3c7; color: #b45309; }
.oi-appr-strip-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.oi-appr-strip-tx b { font-size: 14px; font-weight: 800; color: #003644; }
.oi-appr-strip-tx span { font-size: 11.5px; color: var(--gray-600); }
.oi-appr-strip-tgl {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; flex: none;
  border: 1.5px solid var(--gray-300); border-radius: 8px; background: #fff; color: #003644;
  font: 700 13px var(--fbody); cursor: pointer; transition: border-color .15s, background .15s;
}
.oi-appr-strip-tgl:hover { border-color: #0a4d5e; background: var(--gray-50); }
.oi-appr-strip-tgl svg { width: 14px; height: 14px; transition: transform .2s; }
.oi-appr-strip.is-open .oi-appr-strip-tgl svg { transform: rotate(90deg); }
.oi-appr-strip-body { display: none; border-top: 1px solid var(--gray-200); }
.oi-appr-strip.is-open .oi-appr-strip-body { display: block; }
.oi-appr-strip-body .por-table { border-radius: 0; box-shadow: none; }
.oi-appr-strip-body .por-table th,
.oi-appr-strip-body .por-table td { border-radius: 0; }

/* Divergências: um painel só, com o cabeçalho na faixa branca do topo (como as faixas de
   conferem/recontagem) e os cartões num fundo levemente tingido. Solto no fundo da tela,
   o cabeçalho parecia peça à parte; numa caixa branca (como era antes), cartão branco
   sobre caixa branca não se separava. Sem overflow: o cabeçalho dos cartões é sticky. */
.oi-appr-divsec {
  flex: none; display: flex; flex-direction: column;
  background: #eaf3f5; border: 1px solid #c5dbe1; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.oi-appr-divhead {
  display: flex; align-items: center; gap: 12px; padding: 7px 14px;
  background: #fff; border-bottom: 1px solid #c5dbe1; border-radius: 13px 13px 0 0;
}
.oi-appr-divsec > .oi-appr-bulkbar { margin: 12px 12px 0; }
.oi-appr-divsec > .oi-appr-list { padding: 12px; }
.oi-appr-divhead-tx { flex: 1; min-width: 0; line-height: 1.2; }
.oi-appr-divhead-tx h2 { font-family: var(--fdisp); font-size: 16px; font-weight: 800; line-height: 1.2; color: #003644; margin: 0; }
.oi-appr-divhead-tx p { margin: 2px 0 0; font-size: 11.5px; color: var(--gray-600); }
.oi-appr-divhead .oi-appr-selall { height: 32px; padding: 0 4px; }
/* Barra de lote: só existe com divergência marcada ("Selecionar todas" fica na linha do
   título), então sem seleção o primeiro cartão começa logo abaixo do cabeçalho. */
.oi-appr-bulkbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 42px; padding: 5px 14px;
  background: #fff; border: 1px solid var(--gray-200); border-left: 4px solid #0a4d5e; border-radius: 10px;
}
.oi-appr-bulkbar:not(.has-sel) { display: none; }
.oi-appr-bulk-acts { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oi-appr-bulk-acts #oiApprSelBtn { margin-left: auto; }
/* Botão secundário da aprovação (ação que prepara, não conclui): contorno, sem ícone de check */
.oi-btn-sec {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; white-space: nowrap;
  border: 1.5px solid var(--gray-300); border-radius: 8px; background: #fff; color: #003644;
  font: 700 13px var(--fbody); cursor: pointer; transition: border-color .15s, background .15s;
}
.oi-btn-sec:hover { border-color: #0a4d5e; background: var(--gray-50); }

/* Estado de sucesso — todos os itens pendentes já foram aprovados (mesma paleta
   verde da legenda "Sem divergência" do mapa de calor, para consistência). */
.oi-appr-done {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  max-width: 420px; padding: 36px 30px;
  background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 16px;
}
.oi-appr-done__icon {
  width: 60px; height: 60px; border-radius: 50%; background: #d1fae5; color: #047857;
  display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.oi-appr-done__icon svg { width: 28px; height: 28px; stroke: currentColor; }
.oi-appr-done__title { font-size: 16px; font-weight: 800; color: #065f46; line-height: 1.2; }
.oi-appr-done__sub { font-size: 13px; color: #15803d; line-height: 1.6; }
.oi-appr-done__sub b { color: #065f46; }

.oi-appr-sec-count { margin-left: 6px; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); vertical-align: middle; }
.oi-appr-bulk { padding: 7px 14px; font-size: 12.5px; }
.oi-appr-bulk-mot { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Motivo em lote com medida fixa: o combo pesquisável (.ss-wrap) entra aqui como item
   de uma linha flex, e sem medida a largura dele é o texto da opção — nomes de motivo
   variam muito, e o combo empurrava o botão "Aplicar aos selecionados" a cada escolha.
   O que passar de 220px é cortado pelo .ss-label. */
.oi-appr-bulk-mot .ss-wrap { flex: 0 0 220px; width: 220px; }
/* Cadastro de motivos: CTA discreto no fim do cabeçalho das divergências, fora do fluxo
   de aprovação. Encolhe para a escala de 32px dos demais botões da tela. */
.oi-appr-mot-cad { height: 32px; padding: 0 12px; gap: 6px; font-size: 13px; }
.oi-appr-mot-cad svg { width: 14px; height: 14px; }
/* Sem a varredura do CTA fantasma: ela existia para anunciar o botão à distância, na
   barra de abas, e reiniciava no display none->flex de syncModes. Aqui o botão nasce a
   cada re-render da aprovação, então o efeito voltaria a piscar depois de cada aprovação,
   filtro ou vínculo em lote. Ao lado do próprio combo ele já se explica. */
.oi-appr-mot-cad::after { content: none; animation: none; }
.oi-appr-list { display: flex; flex-direction: column; gap: 16px; }
/* Cartão da divergência. A borda esquerda diz o estado: âmbar pendente, verde pronto para
   aprovar. Dentro do cartão, âmbar só no que exige ação (campo obrigatório vazio, o texto
   do que falta e o registro a escolher); a divergência e os valores que diferem são
   informação e ficam em tom neutro/petrol.
   overflow: clip (e não hidden) para o cabeçalho poder grudar. */
.oi-appr-card {
  border: 1px solid var(--gray-300); border-left: 4px solid #f59e0b; border-radius: 12px; background: #fff;
  overflow: clip; box-shadow: 0 1px 4px rgba(0,54,68,.08); transition: border-color .2s;
}
.oi-appr-card.is-ready { border-left-color: #10b981; }
/* Cabeçalho grudado no topo da área de rolagem enquanto o cartão está à vista: com o
   cartão mais alto que a tela, rolar até o Aprovar não tira mais o produto de vista. */
.oi-appr-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: #f4f8f9; border-bottom: 1px solid var(--gray-200);
}
.oi-appr-head .cod { font-size: 15px; font-weight: 800; color: #003644; }
.oi-appr-head .desc { font-size: 13px; color: var(--gray-600); flex: 1; min-width: 0; }
.oi-appr-head .end { font-size: 12.5px; color: #0a4d5e; font-weight: 700; }
.oi-appr-pos {
  flex: none; margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--gray-600); white-space: nowrap;
  background: #fff; border: 1px solid var(--gray-200); padding: 1px 8px; border-radius: 999px;
}
.oi-appr-card.is-done, #oiApprConfTable tr.is-done { opacity: .45; transition: opacity .25s; }
.oi-appr-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; }
.oi-appr-counts { padding: 14px 16px; border-right: 1px solid var(--gray-200); }
.oi-appr-counts h5,
.oi-appr-form h5 {
  display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gray-500); margin: 0 0 8px;
}
/* Concordância entre as contagens, ao lado do título "Contagens" */
.oi-cons-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 8px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-600);
}
.oi-cons-tag.is-dif { background: rgba(0,54,68,.10); color: #003644; }
.oi-read-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--gray-200); }
.oi-read-row:last-child { border-bottom: 0; }
.oi-read-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); flex-shrink: 0; }
.oi-read-op { flex: 1; font-size: 12.5px; color: var(--gray-700); }
.oi-read-op b { color: #003644; }
/* Leitura zerada automaticamente (item encontrado na contagem que o contador não registrou) */
.oi-read-op--auto { color: var(--gray-500); font-style: italic; }
.oi-read-qtd { font-size: 15px; font-weight: 800; color: #003644; font-variant-numeric: tabular-nums; }
/* Contagem que ficou de fora da maioria: esmaecida, para o valor da maioria (o sugerido)
   ser o que se destaca na coluna */
.oi-read-row.is-fora .oi-read-qtd { color: var(--gray-400); }
.oi-read-qtd small, .oi-read-sys small { font-size: 11px; font-weight: 700; color: var(--gray-500); margin-left: 2px; }
.oi-read-sys { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--gray-200); }
.oi-read-sys .k { font-size: 12px; font-weight: 700; color: var(--gray-600); }
.oi-read-sys .v { font-size: 15px; font-weight: 800; color: var(--gray-700); font-variant-numeric: tabular-nums; }
/* Divergência prevista logo abaixo do saldo do sistema: a conta inteira num lugar só.
   Neutra, com o número em destaque (é informação, não pendência); verde só quando a
   quantidade final confere com o sistema. */
.oi-read-res {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 10px;
  border-radius: 8px; background: #f4f8f9; border: 1px solid var(--gray-200);
}
.oi-read-res .k { font-size: 12px; font-weight: 700; color: var(--gray-600); }
.oi-read-res .v { font-size: 16px; font-weight: 800; color: #003644; font-variant-numeric: tabular-nums; text-align: right; }
.oi-read-res.is-zero { background: #f0fdf4; border-color: #bbf7d0; }
.oi-read-res.is-zero .k, .oi-read-res.is-zero .v { color: #047857; }
/* Registros da Inicialização do item encontrado na contagem — faixa inteira abaixo do corpo
   do cartão. Diferentes entre os contadores, viram opções (rádio) e a escolha é obrigatória.
   Neutra por padrão; âmbar enquanto a escolha está pendente (.is-req-pend) e verde suave
   depois que o registro foi escolhido (.is-ok), ambos ligados pela tela conforme o
   preenchimento. */
.oi-appr-vinc { padding: 12px 16px 14px; border-top: 1px solid var(--gray-200); background: #f8fafb; transition: background .2s; }
.oi-appr-vinc h5 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin: 0 0 4px; }
.oi-vinc-sub { margin: 0 0 8px; font-size: 12px; color: var(--gray-600); }
.oi-appr-vinc.is-diverge .oi-vinc-sub { font-weight: 700; }
.oi-appr-vinc.is-req-pend { background: #fffbeb; }
.oi-appr-vinc.is-req-pend .oi-vinc-sub { color: #b45309; }
.oi-appr-vinc.is-ok { background: #f0fdf4; border-top-color: #bbf7d0; }
.oi-appr-vinc.is-ok .oi-vinc-sub { color: #047857; }
.oi-appr-vinc.is-ok .oi-vinc-row.is-escolha:has(.apVinc:checked) { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.16); }
.oi-appr-vinc.is-ok .oi-vinc-row .apVinc { accent-color: #047857; }
.oi-vinc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 7px 10px;
  border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; font-size: 12.5px; }
.oi-vinc-row + .oi-vinc-row { margin-top: 6px; }
.oi-vinc-row.is-escolha { cursor: pointer; }
.oi-vinc-row.is-escolha:hover { border-color: var(--gray-400); }
.oi-vinc-row.is-escolha:has(.apVinc:checked) { border-color: #0a4d5e; box-shadow: 0 0 0 2px rgba(10,77,94,.14); }
.oi-vinc-row .apVinc { margin: 0; flex-shrink: 0; accent-color: #003644; }
.oi-vinc-op { color: var(--gray-700); }
.oi-vinc-op b { color: #003644; }
.oi-vinc-dados { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; color: #003644; font-weight: 600; }
.oi-vinc-dados i { font-style: normal; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); margin-right: 5px; }
/* Valor em que os registros dos contadores diferem: grifo na cor do bloco — âmbar
   enquanto a escolha está pendente, verde depois que o registro foi escolhido. */
.oi-vinc-dados .is-dif { background: #fde68a; color: #78350f; font-weight: 800; border-radius: 4px; padding: 0 5px; transition: background .2s, color .2s; }
.oi-vinc-dados .is-dif i { color: #92400e; }
.oi-appr-vinc.is-ok .oi-vinc-dados .is-dif { background: #bbf7d0; color: #065f46; }
.oi-appr-vinc.is-ok .oi-vinc-dados .is-dif i { color: #047857; }
/* Escolha do registro pendente: as opções ganham o destaque de campo obrigatório */
.oi-appr-vinc.is-req-pend .oi-vinc-row.is-escolha { border-color: #d18f20; background: #fffcf0; }
.oi-vinc-vazio { font-size: 12.5px; color: #b45309; font-weight: 600; }
/* Aceite do endereço para o item encontrado: sem cadastro WMS (bloqueia) ou etiqueta sem endereço (aviso) */
.oi-aceite { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 8px 12px;
  border-radius: 8px; font-size: 12.5px; line-height: 1.4; }
.oi-aceite > span { flex: 1; min-width: 0; }
.oi-aceite--bloq  { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.oi-aceite--aviso { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; }
.oi-aceite .oi-tab-cta { flex: none; }
.oi-appr-form { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.oi-appr-form h5 { margin-bottom: -2px; }
/* De onde veio a Qtd. final pré-preenchida */
.oi-appr-sug { margin: -4px 0 0; font-size: 11px; color: var(--gray-500); }
/* Campo obrigatório ainda vazio no cartão (destaque âmbar do padrão de obrigatórios) */
.oi-fld.is-req-pend input,
.oi-fld.is-req-pend .ss-control { border-color: #d18f20; background: #fffcf0; }
.oi-appr-actions { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
/* min-width:0 pelo mesmo motivo do .por-field--dep: o campo "Motivo" desta linha
   carrega flex:1 no HTML e leva dentro o combo pesquisável, cujo texto é a opção
   escolhida. Sem o piso declarado, o mínimo automático do flex item acompanha esse
   texto e o campo cresce a cada seleção, comprimindo "Qtd. final" ao lado. */
.oi-appr-actions .oi-fld { flex: 0 0 130px; min-width: 0; }
.oi-appr-actions .oi-fld .ss-wrap { width: 100%; }
/* Rodapé do cartão: as ações vêm depois de tudo que precisa ser preenchido, com o que
   ainda falta dito ao lado do Aprovar. */
.oi-appr-cfoot {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-top: 1px solid var(--gray-200); background: #fafcfc;
}
.oi-appr-status { margin-left: auto; font-size: 12px; font-weight: 700; color: #b45309; text-align: right; }
.oi-appr-card.is-ready .oi-appr-status { color: #047857; }
.oi-btn-approve {
  display: inline-flex; align-items: center; gap: 7px; background: var(--tl-dd); color: #fff;
  border: 0; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.oi-btn-approve:hover { background: var(--tl-d); }
.oi-btn-approve svg { width: 15px; height: 15px; }

/* ── Recontagem (leitura de desempate) — marcas e ação na aprovação ───────── */
.oi-btn-recont {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #4338ca;
  border: 1px solid #c7d2fe; border-radius: 8px; padding: 7px 14px; font-size: 13px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.oi-btn-recont:hover { background: #eef2ff; border-color: #a5b4fc; }
.oi-btn-recont svg { width: 15px; height: 15px; }
.oi-read-badge.is-extra { background: #e0e7ff; color: #4338ca; }
.oi-read-tag,
.oi-recont-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: #eef2ff; color: #4338ca;
  border: 1px solid #c7d2fe; flex-shrink: 0; white-space: nowrap;
}
.oi-recont-pill {
  display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; font-weight: 800; font-variant-numeric: tabular-nums;
}
.oi-appr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--gray-200); background: var(--gray-50); flex-shrink: 0; }
.oi-appr-foot-actions { display: flex; align-items: center; gap: 10px; }
/* Rodapé da Aprovação: contadores (cada um leva à sua parte da tela) e progresso da
   efetivação por extenso. Modificador próprio porque o Painel Gerencial reusa .oi-appr-foot. */
.oi-appr-foot--prog { padding-top: 9px; padding-bottom: 9px; }
.oi-appr-foot--prog .oi-appr-foot-actions { flex: none; }
.oi-appr-foot--prog .oi-btn-efetivar { white-space: nowrap; }
.oi-appr-prog { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.oi-appr-prog-cnts { display: flex; align-items: center; flex-wrap: wrap; row-gap: 2px; font-size: 13px; color: var(--gray-600); }
.oi-appr-cnt { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.oi-appr-cnt:hover:not(:disabled) { text-decoration: underline; }
.oi-appr-cnt:disabled { cursor: default; }
.oi-appr-cnt + .oi-appr-cnt::before { content: '·'; display: inline-block; margin: 0 8px; color: var(--gray-400); }
.oi-appr-cnt strong { font-weight: 800; }
.oi-appr-cnt.is-div  strong { color: #b45309; }
.oi-appr-cnt.is-conf strong { color: #047857; }
.oi-appr-cnt.is-rec  strong { color: #4338ca; }
.oi-appr-cnt.is-ok   strong { color: #003644; }
.oi-appr-prog-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.oi-appr-prog-bar { flex: none; width: 160px; height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.oi-appr-prog-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0a4d5e, #2fa4a9); transition: width .3s; }
.oi-appr-prog-txt { min-width: 0; font-size: 12px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-appr-prog-txt b { color: #003644; }
.oi-appr-prog-txt.is-ok { color: #047857; font-weight: 700; }
.oi-tipo-estoque-lbl { font-size: 12.5px; font-weight: 700; color: var(--gray-600); white-space: nowrap; }
/* O <select> vira .ss-native (escondido) assim que o combo pesquisável global
   (app.js) o aprimora — quem aparece de fato é o .ss-wrap/.ss-control gerado
   por ele. A largura tem que ir no wrapper, não no select. */
.oi-appr-foot-actions .ss-wrap { width: 110px; height: 34px; flex: 0 0 auto; }
.oi-appr-foot-actions .ss-wrap .ss-control { height: 100%; border-radius: 9px; }
.oi-btn-efetivar {
  display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #0a4d5e, #003644);
  color: #fff; border: 0; border-radius: 9px; padding: 8px 18px; font-size: 13px; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,54,68,.25); transition: all .12s;
}
.oi-btn-efetivar:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,54,68,.3); }
.oi-btn-efetivar:disabled { opacity: .5; cursor: default; }
.oi-btn-efetivar svg { width: 17px; height: 17px; }

/* Cabeçalho do painel: identidade à esquerda e o bloco de informações + atualizar ancorado à
   direita, na mesma linha (no .por-det-header comum a descrição longa jogava o bloco inteiro para
   baixo). A descrição do inventário tem linha própria e aparece inteira sempre que couber; só uma
   descrição perto do limite (80) numa tela estreita cede espaço: width 0 tira ela da medida mínima
   do bloco, o flex-grow devolve o espaço que sobrar e o max-width para no tamanho do texto; o que não
   couber vira reticências, com o texto inteiro no title. O bloco só desce de linha quando nem sem a
   descrição ele cabe ao lado da identidade (tela estreita). */
.oi-det-header > .por-det-id { flex: none; }
.oi-det-header > .por-det-meta { flex: 1 1 auto; justify-content: flex-end; }
.oi-det-header .por-det-meta > :not(.por-det-meta-txt) { flex: none; }
.oi-det-header .por-det-meta-txt { flex: 1 1 auto; }
.oi-det-header .oi-det-desc-row { align-self: stretch; justify-content: flex-end; }
.oi-det-desc {
  flex: 1 1 auto; width: 0; max-width: max-content;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: #2e535c;
}

/* "Aprovar itens" no cabeçalho de Itens do inventário, colado ao Maximizar. Altura e fonte dos
   vizinhos do .panel-head (26px, 11.5px); petrol cheio por ser a ação principal da seção, sem se
   confundir com o Resetar âmbar das ações em lote, das quais um filete o separa. */
.oi-btn-aprovar {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 12px;
  background: linear-gradient(135deg, #0a4d5e, #003644); border: 1px solid #003644; border-radius: 7px;
  color: #fff; font: 700 11.5px var(--fbody); white-space: nowrap; cursor: pointer;
  transition: box-shadow .12s;
}
.oi-btn-aprovar svg { width: 13px; height: 13px; }
.oi-btn-aprovar:hover:not(:disabled) { box-shadow: 0 0 0 3px rgba(0,54,68,.18); }
.oi-btn-aprovar:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }
.oi-btn-aprovar:disabled { opacity: .45; cursor: not-allowed; }
/* Sem ações em lote (O.I. finalizada ou cancelada): o par Aprovar + Maximizar vai para a direita */
.panel-head > .ht + .oi-btn-aprovar { margin-left: auto; }
.por-head-actions:has(+ .oi-btn-aprovar) { padding-right: 12px; border-right: 1px solid var(--gray-200); }
/* mesmo espaçamento (8px) dos botões das ações em lote */
.oi-btn-aprovar + .por-sec-max { margin-left: -4px; }

/* Faixa "Etiquetas UP geradas" do painel da O.I. finalizada (logo abaixo do cabeçalho). Acento
   âmbar enquanto houver etiqueta nunca impressa (o palete ainda está sem etiqueta física), teal
   quando todas já saíram. Mesma moldura dos cards do painel: raio 12, borda gray-200, sombra leve.
   O botão segue a escala de densidade (altura fixa 32px, 13px): o destaque vem da cor e do lugar. */
.oi-etq-banner {
  position: relative; display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  margin: 16px 20px 0; padding: 14px 18px 14px 22px;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden;
}
.oi-etq-banner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.oi-etq-banner--pend { background: linear-gradient(90deg, #fffbeb 0%, #ffffff 60%); border-color: #fde68a; }
.oi-etq-banner--pend::before { background: #f59e0b; }
.oi-etq-banner--ok { background: linear-gradient(90deg, #f0f9fa 0%, #ffffff 60%); }
.oi-etq-banner--ok::before { background: #2fa4a9; }
.oi-etq-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.oi-etq-ic svg { width: 20px; height: 20px; }
.oi-etq-banner--pend .oi-etq-ic { background: #fef3c7; color: #b45309; }
.oi-etq-banner--ok .oi-etq-ic { background: #e0f2f1; color: #0a4d5e; }
.oi-etq-txt { flex: 1; min-width: 0; }
.oi-etq-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14.5px; font-weight: 800; line-height: 1.2; color: #003644; }
.oi-etq-sub { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--gray-600); }
.oi-etq-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.oi-etq-pill svg { width: 11px; height: 11px; }
.oi-etq-pill--pend { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.oi-etq-pill--ok   { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.oi-etq-aviso { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12px; line-height: 1.35; color: #92400e; }
.oi-etq-aviso svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.oi-etq-btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px;
  border-radius: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.oi-etq-btn svg { width: 16px; height: 16px; }
.oi-etq-btn--pri { color: #fff; border: none; background: linear-gradient(135deg, #0a4d5e 0%, #003644 100%);
  box-shadow: 0 4px 12px -4px rgba(0,54,68,.55); }
.oi-etq-btn--pri:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(0,54,68,.6); }
.oi-etq-btn--sec { color: #003644; background: #fff; border: 1.5px solid #9cc3cc; }
.oi-etq-btn--sec:hover:not(:disabled) { background: #f0f7f9; border-color: #003644; }
.oi-etq-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
@media (max-width: 760px) {
  .oi-etq-banner { flex-wrap: wrap; }
  .oi-etq-btn { width: 100%; justify-content: center; }
}

/* Maximização — as sub-telas crescem no espaço extra */
.wiz.wiz-maximized .oi-appr,
.wiz.wiz-maximized .oi-new { flex: 1; min-height: 0; }
.wiz.wiz-maximized .oi-appr-scroll,
.wiz.wiz-maximized .oi-new-body { max-height: none; }

/* ── MASTER-DETAIL DOS GRIDS DOS PAINÉIS ────────────────────────────────────
   Linha-pai com o resumo e linha-filha expansível com a granularidade real:
   leituras por operador e endereços por produto no painel da O.I., endereços por
   produto no painel da Coleta. Os nomes .oi-* nasceram no primeiro uso (grid de
   operadores da O.I.) e continuam válidos como apelido; os .por-* são o nome do
   sistema compartilhado dos painéis e é o que telas novas devem usar. Uma
   definição só para os dois: mudar o desenho aqui muda em todos os grids. */
.por-th-exp, .por-td-exp { width: 30px; text-align: center; }
.oi-exp-btn, .por-exp-btn {
  width: 22px; height: 22px; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #0a4d5e; border-radius: 5px; transition: background .15s, transform .2s;
}
.oi-exp-btn svg, .por-exp-btn svg { width: 13px; height: 13px; }
.oi-exp-btn:hover, .por-exp-btn:hover { background: var(--gray-100); }
.oi-exp-btn.open, .por-exp-btn.open { transform: rotate(90deg); }
/* por-detrow, e não por-det: nos painéis o prefixo .por-det-* já é a família do
   painel de detalhes (.por-det-shell, .por-det-header). Aqui é a LINHA-filha. */
tr.oi-op-det > td, tr.por-detrow > td { background: var(--gray-50); padding: 0; }
.oi-op-sub, .por-sub { padding: 10px 14px 12px 46px; }
.oi-op-sub h6, .por-sub h6 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin: 0 0 8px; }
.oi-op-subtable, .por-subtable { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.oi-op-subtable th, .por-subtable th { background: var(--gray-100); color: var(--gray-600); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 7px 10px; }
/* O cabeçalho da sub-tabela NÃO gruda: a regra genérica .por-table th tem
   position:sticky com top:0 e alcança estas células por descendência (a
   sub-tabela vive dentro do tbody do grid). Dois cabeçalhos grudados no mesmo
   topo disputam a mesma faixa, e o da sub-tabela, sendo posterior no DOM, passava
   por cima do cabeçalho do grid. */
.por-subtable th { position: static; z-index: auto; }
.oi-op-subtable th.num, .oi-op-subtable td.num,
.por-subtable th.num, .por-subtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.oi-op-subtable td, .por-subtable td { padding: 7px 10px; border-top: 1px solid var(--gray-200); }
.oi-op-sub-cod, .por-sub-cod { font-weight: 700; color: #0a4d5e; }
.oi-op-sub-desc, .por-sub-desc { color: var(--gray-600); }
.oi-op-sub-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; }
/* Item cancelado na linha-filha: o mesmo rosa da linha cancelada do grid-pai
   (.por-row--canc), para o estado não trocar de cor ao abrir a linha. */
.por-subtable tr.por-subrow--canc td { background: #fdf2f2; }
/* Progresso dentro da linha-filha: a barra vem da mesma peça do grid-pai, só
   mais estreita — a coluna divide espaço com dez outras na sub-tabela. */
.por-subtable .por-prog { min-width: 118px; }
/* Divergência de coleta: o destaque da célula existe em .por-table e precisa
   valer na linha-filha também, senão o mesmo dado aparece marcado no produto e
   sem marca nenhuma no endereço que o causou. */
.por-subtable td.por-td-diverg { background: rgba(220,38,38,.10); color: #991b1b; font-weight: 600; }
/* E o âmbar da coleta a menos explicada por falta, pelo mesmo motivo (ver .por-td-falta). */
.por-subtable td.por-td-falta { background: rgba(245,158,11,.09); color: #92400e; font-weight: 600; }
/* Status da linha-filha com as marcas Falta e Complemento ao lado: o motivo de
   cancelamento, quando há, continua embaixo. */
.por-subtable .poc-st-marcas { flex-wrap: nowrap; }

/* Coluna "Quantidade apurada" dos endereços: valor + de onde ele saiu */
.oi-cnt-td { line-height: 1.3; white-space: nowrap; }
.oi-cnt-nota, .por-cnt-nota { display: block; font-size: 10.5px; font-weight: 500; color: var(--gray-500); }
.oi-cnt-sem { font-weight: 700; color: #b45309; }
.oi-cnt-nulo { color: var(--gray-400); font-size: 11px; font-style: italic; }
/* Valor de divergência: previsto (itálico, peso menor) vs efetivado (negrito) */
.oi-dv { font-weight: 700; }
.oi-dv--prev { font-weight: 600; font-style: italic; opacity: .82; cursor: help; }
/* Marcas do que o número representa, ao lado da divergência do produto */
.oi-tag-prev, .oi-tag-efet, .oi-tag-canc {
  margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  cursor: help; white-space: nowrap;
}
.oi-tag-prev { background: #fef3c7; color: #b45309; }
.oi-tag-efet { background: #d1fae5; color: #047857; }
.oi-tag-canc { background: var(--gray-200); color: var(--gray-600); }
/* Marca embaixo do número (grid Itens do inventário): a coluna fica com a largura do
   número, e não do número mais a marca lado a lado. Alinhada à direita, como o número. */
.oi-tag-sob { display: block; width: fit-content; margin: 3px 0 0 auto; }
/* Unidade padrão ao lado da divergência do produto ("+250,000 KG"): exatamente a fonte do
   número (tamanho, peso, itálico da previsão e cor) — lê-se como uma coisa só. */
.oi-dv-unid { font: inherit; letter-spacing: inherit; }
/* Itens do inventário: descrição do produto em até 2 linhas de 260px (o title traz o nome
   inteiro). Com os 320px padrão da .por-desc, a coluna Produto sozinha empurrava a
   divergência para fora da área visível. */
#oiGridItens > .por-table > tbody > tr.por-row .por-desc { max-width: 260px; }
/* Aviso no título da sub-tabela de endereços */
.oi-sub-aviso, .por-sub-aviso {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: #fef3c7; color: #b45309; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
}
.oi-sub-aviso--ok, .por-sub-aviso--ok { background: #d1fae5; color: #047857; }
/* Faixa de aviso acima do grid de itens (números previstos, não efetivados) */
.oi-est-banner {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px;
  padding: 10px 13px; border: 1px solid #fde68a; border-radius: 10px;
  background: #fffbeb; color: #92400e; font-size: 12px; line-height: 1.45;
}
.oi-est-banner svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

/* Popover "i" explicativo (mapa de calor) */
.por-section.oi-heat-section { overflow: visible; }  /* libera o popover, que sairia da seção */
.oi-info { position: relative; margin-left: auto; display: inline-flex; align-self: center; }
.oi-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,54,68,.25);
  background: #fff; color: #0a4d5e; cursor: help; transition: all .15s;
}
.oi-info-btn svg { width: 14px; height: 14px; }
.oi-info:hover .oi-info-btn, .oi-info:focus-within .oi-info-btn { background: #0a4d5e; color: #fff; border-color: #0a4d5e; }
.oi-info-pop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 370px; max-width: 88vw;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.20); padding: 14px 16px; z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.oi-info:hover .oi-info-pop, .oi-info:focus-within .oi-info-pop { opacity: 1; visibility: visible; transform: none; }
.oi-info-pop h4 { font-size: 13.5px; color: #003644; margin: 0 0 8px; }
.oi-info-pop p { font-size: 12.5px; color: var(--gray-700); line-height: 1.5; margin: 0 0 8px; }
.oi-info-pop b { color: #003644; }
.oi-info-legend { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.oi-info-legend .row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-700); }
.oi-info-legend .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); flex-shrink: 0; }
.oi-info-pop .ex {
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; color: var(--gray-700); line-height: 1.5; margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ESTADO VAZIO — CARTÃO PADRÃO DE TODA TELA COM GRID
   ──────────────────────────────────────────────────────────────────────────
   Uma única definição para a mensagem que aparece no lugar da lista: "nenhum
   registro", "aguardando pesquisa", "carregando" e "falha na consulta". Antes
   cada rotina tinha a sua (texto cinza chapado em .wms-grid-empty, círculo teal
   em .rb-empty, pastilha de 52px em .por-empty-state, quatro variações de
   svg mais b mais p nas telas de cadastro), e a mesma situação aparecia de seis
   jeitos diferentes conforme a tela em que o usuário estava.

   O desenho é o dos estados vazios da Ocupação de Armazém e da Gestão FEFO, com
   o petrol nos acentos e não no fundo: cartão claro com leve tintura de petrol,
   pastilha do ícone em degradê petrol cheio, título no #003644. O petrol chapado
   no fundo do cartão foi testado e pesou — a moldura dos grids é quase branca, e
   uma chapa escura no meio dela competia com o header, que é a peça petrol
   legítima da tela.

   PREFIXO body: as telas injetam o próprio CSS em style criado em runtime,
   portanto DEPOIS deste arquivo. Sem o prefixo, o .dep-empty{padding:44px 20px}
   da tela venceria por ordem de cascata, mesmo com especificidade igual. O body
   acrescenta um elemento à conta e resolve isso sem precisar de important.

   NÃO ENTRAM AQUI, de propósito:
   - listas suspensas e dropdowns (.cm-dd-empty, .ms-empty, .sd-empty,
     .menu-empty): o cartão não cabe num painel de 200px de altura;
   - avisos inline (.etq-empty-sm, .cm-empty-sm, .oirc-empty, .cob-subempty) e a
     prévia de escopo da O.I. (.oi-prev-empty), que são texto ao lado de um campo
     ou dentro de uma linha, e não a mensagem que substitui a lista;
   - .cp-tg-empty, .cf-empty-row e .cp-empty-row, que estilizam o próprio td em
     vez de um bloco dentro dele: não há elemento para virar cartão sem mexer no
     HTML dessas telas;
   - .ocup-empty-card, .fefo-empty e .no-data-msg, que já são este cartão na
     versão para fundo escuro.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --empty-bg:        linear-gradient(168deg,#f7fcfd 0%,#e9f2f5 100%);
  --empty-bd:        #c9dfe6;
  --empty-sh:        0 12px 28px -18px rgba(0,54,68,.35), 0 1px 2px rgba(0,54,68,.05), inset 0 1px 0 #fff;
  --empty-pill:      linear-gradient(145deg,#0a4d5e 0%,#00232c 100%);
  --empty-pill-ico:  #a7e9f0;
  --empty-title:     #003644;
  --empty-sub:       #4f6b76;
  /* variante de falha: pastilha e texto em vermelho, cartão levemente quente */
  --empty-err-bg:    linear-gradient(168deg,#fdf8f7 0%,#f6ebe8 100%);
  --empty-err-bd:    #e6cdc8;
  --empty-err-pill:  linear-gradient(145deg,#b01810 0%,#7d120c 100%);
  --empty-err-txt:   #8a2a20;
}
/* ── O GRID NÃO FICA ATRÁS DA MENSAGEM ────────────────────────────────────
   A maioria das rotinas renderiza o cartão dentro de um td com colspan, dentro
   da própria tabela. Com isso o CABEÇALHO continuava em cena acima dele: uma
   fileira de colunas tituladas sobre uma lista que não existe, e o cartão
   parecendo flutuar sobre o grid. Enquanto o corpo da tabela for só a mensagem,
   o cabeçalho sai; ele volta sozinho quando houver linhas, sem nenhum JS.
   O :not(.is-loading) preserva o cabeçalho ENQUANTO CARREGA: ali a mensagem é
   uma linha discreta, não um cartão, e esconder o cabeçalho para devolvê-lo meio
   segundo depois seria só um salto no layout.
   O combinador de FILHO em `> tbody > tr > td >` é o que impede a regra de
   alcançar o cabeçalho do grid-pai quando o cartão estiver dentro de uma
   sub-tabela do master-detail: lá o td do colspan tem uma div no meio.
   A célula também perde borda e fundo: são as últimas listras do grid que
   apareciam em volta do cartão. */
table:has(> tbody > tr > td > :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty,
  .wms-grid-empty, .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty,
  .pw-empty, .le-empty, .ld-empty, .ef-empty,
  .dep-empty, .ie-etq-empty):not(.is-loading)) > thead { display: none; }
/* MENSAGEM CENTRADA NA MOLDURA, e não colada no topo dela: sem altura a tabela
   mede o próprio conteúdo, o cartão fica no alto e sobra embaixo um vão do
   tamanho do grid. Com o corpo reduzido à mensagem a tabela passa a ocupar a
   moldura inteira, a única linha cresce com ela e o vertical-align da célula
   centra o cartão. Onde a moldura não tem altura definida o height:100% resolve
   como auto e nada muda: o cartão continua onde estava, sem quebrar o layout. */
table:has(> tbody > tr > td > :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty,
  .wms-grid-empty, .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty,
  .pw-empty, .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)) { height: 100%; }
/* FORA DE TABELA — parte das rotinas troca o conteúdo do contêiner inteiro pelo
   cartão (.dtable-wrap do assistente de etiquetas, .oc-prod-list da O.C., corpo
   de modal). Esses contêineres são bloco com altura definida (flex:1), e em
   layout de bloco a margem automática vertical do cartão vale zero: ele ficava
   no topo com um vão embaixo. Virando flex, o mesmo margin:auto centra nos dois
   eixos — e continua sendo margin:auto, não align-items, para que cartão mais
   alto que a área não tenha o topo cortado.
   :only-child é a guarda: a regra só age quando o cartão é TODO o conteúdo do
   contêiner, nunca quando ele divide espaço com outra coisa. Os elementos de
   tabela ficam de fora porque display:flex num td desmontaria as colunas — lá
   quem centra é o vertical-align da regra acima. */
:not(td):not(th):not(tr):not(tbody):not(thead):not(tfoot):not(table):has(> :is(.por-empty-state,
  .por-empty, .rb-empty, .cm-empty, .wms-grid-empty, .oc-empty-box, .etq-empty,
  .oimt-empty, .pm-empty, .za-empty, .pw-empty, .le-empty, .ld-empty, .ef-empty,
  .dep-empty, .ie-etq-empty):only-child) { display: flex; }

/* [colspan] no seletor não é decoração: ele acrescenta um ponto de
   especificidade, e sem isso a zebra e a borda do grid (que são regras de duas
   classes) venceriam este reset. Todo cartão de estado vazio vive num td que
   atravessa o grid inteiro, então a condição não exclui nenhum caso real. */
body tr > td[colspan]:has(> :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty,
  .wms-grid-empty, .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty,
  .pw-empty, .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)) {
  border: none; background: none; padding: 0;
  height: 100%; vertical-align: middle;
}

/* ── O cartão ─────────────────────────────────────────────────────────────
   Padding lateral em clamp: o mesmo cartão cai em painel de detalhe estreito e
   em grid de tela cheia, e 32px fixos comeriam a linha de texto no estreito.

   O CARTÃO NÃO APARECE DE IMEDIATO (animation com delay e fill both). Quase toda
   tela já nasce com a mensagem no HTML — "Carregando…", "Defina os filtros" — e
   ela é substituída pelo grid assim que os dados chegam. Numa consulta rápida o
   cartão vivia 200 ms: tempo de aparecer e sair, o que se lê como piscada, ainda
   mais com o halo pulsando na pastilha. Com 320 ms de espera o elemento fica em
   opacity:0 (é o fill "backwards" que segura isso) e, se a resposta chegar antes,
   ele é removido do DOM sem nunca ter sido visto. Demorando mais que isso, aí sim
   o cartão entra — e entra em fade, como algo que a tela decidiu mostrar.
   Só opacidade, sem deslocamento: nada a corrigir em prefers-reduced-motion. */
@keyframes wmsEmptyIn { from { opacity: 0; } to { opacity: 1; } }
body .por-empty-state,
body .por-empty,
body .rb-empty,
body .cm-empty,
body .wms-grid-empty,
body .oc-empty-box,
body .etq-empty,
body .oimt-empty,
body .pm-empty,
body .za-empty,
body .pw-empty,
body .le-empty,
body .ld-empty,
body .ef-empty,
body .dep-empty,
body .ie-etq-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; margin: auto; max-width: 440px; text-align: center;
  padding: 26px clamp(16px,6%,32px) 28px;
  background: var(--empty-bg);
  border: 1px solid var(--empty-bd);
  border-radius: 16px;
  box-shadow: var(--empty-sh);
  font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--empty-sub);
  animation: wmsEmptyIn .16s ease-out .32s both;
}
/* ── Pastilha do ícone: bloco próprio (.ring / __icon) ──────────────────────
   As quatro últimas famílias (grid, resumo da O.C., etiquetas e motivos) nasceram
   como texto solto e passaram a montar o cartão completo; a .ring entrou nelas
   para que a pastilha valha em todas, sem cada tela inventar a sua. */
body .por-empty-state__icon,
body .por-empty__icon,
body .rb-empty > .ring,
body .cm-empty-ring,
body .wms-grid-empty > .ring,
body .oc-empty-box > .ring,
body .etq-empty > .ring,
body .oimt-empty > .ring,
body .ie-etq-empty > .ring {
  width: 60px; height: 60px; display: grid; place-items: center; margin: 0 0 14px;
  border-radius: 18px; background: var(--empty-pill);
  border: 1px solid rgba(0,54,68,.2); color: var(--empty-pill-ico);
  animation: wmsEmptyGlow 3.2s ease-in-out infinite;
}
/* Descendente, e não filho direto: no estado "consultando" o ícone vem embrulhado
   no .por-spin, que é quem gira. Com > svg o spinner cairia para os 15px da regra
   do .por-spin dentro de uma pastilha de 60px. */
body .por-empty-state__icon svg,
body .por-empty__icon svg,
body .wiz .rb-empty .ring svg,
body .rb-empty .ring svg,
body .cm-empty-ring svg,
body .wms-grid-empty .ring svg,
body .oc-empty-box .ring svg,
body .etq-empty .ring svg,
body .oimt-empty .ring svg,
body .ie-etq-empty .ring svg { width: 27px; height: 27px; stroke: currentColor; }
/* O .ie-etq-empty ENTRA NAS LISTAS SEM PREFIXO DE TELA, como todas as outras
   famílias — e isso é condição para as réguas por container query funcionarem
   nele. Ele já esteve aqui como `body .ie-wiz .ie-etq-empty`, para vencer o CSS
   que a tela da inicialização de etiquetas escrevia para o próprio cartão, e
   essa classe a mais custava as quatro réguas: os seletores delas usam :is(),
   que vale UMA classe, então (0,2,1) do prefixo derrubava (0,1,1) da régua. O
   cartão travava em ~192px dentro de um painel que naquela etapa fica com ~150px
   (divide a altura com filtros e parâmetros), e a rolagem que as réguas existem
   para evitar aparecia justamente ali. O CSS local da tela foi removido; regra
   nova para este cartão vai nas listas daqui, sem prefixo. */
/* ── Pastilha do ícone: telas em que o svg é filho direto do bloco ─────────
   Sem .ring para receber o degradê, a pastilha nasce do próprio svg: padding em
   content-box fecha os mesmos 60px (27 mais 16,5 de cada lado). Os ícones dessas
   telas são stroke="currentColor", então basta a cor. */
body .pm-empty > svg,
body .za-empty > svg,
body .pw-empty > svg,
body .le-empty > svg,
body .ld-empty > svg,
body .ef-empty > svg,
body .dep-empty > svg {
  width: 27px; height: 27px; box-sizing: content-box; padding: 16.5px;
  margin: 0 0 14px; opacity: 1;
  border-radius: 18px; background: var(--empty-pill);
  border: 1px solid rgba(0,54,68,.2); color: var(--empty-pill-ico);
  animation: wmsEmptyGlow 3.2s ease-in-out infinite;
}
/* Halo em petrol. Keyframe próprio porque os das telas escuras (fefo-empty-glow,
   ocup-empty-glow) reescrevem o box-shadow inteiro e trariam o teal de volta. */
@keyframes wmsEmptyGlow {
  0%, 100% { box-shadow: 0 0 0 6px  rgba(0,54,68,.06), 0 8px 18px -6px rgba(0,54,68,.38); }
  50%      { box-shadow: 0 0 0 11px rgba(0,54,68,.03), 0 10px 22px -6px rgba(0,54,68,.45); }
}
/* ── Título ──────────────────────────────────────────────────────────────
   Filho DIRETO (> b): b dentro do parágrafo da dica é destaque de texto, e não
   título — sem o filho direto ele herdaria 15px e quebraria a frase. */
body .por-empty-state__title,
body .por-empty__title,
body .rb-empty > b,
body .cm-empty > b,
body .pm-empty > b,
body .za-empty > b,
body .pw-empty > b,
body .le-empty > b,
body .ld-empty > b,
body .ef-empty > b,
body .dep-empty > b,
body .wms-grid-empty > b,
body .oc-empty-box > b,
body .etq-empty > b,
body .oimt-empty > b,
body .ie-etq-empty > b {
  display: block; margin: 0; max-width: 34ch;
  font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: .1px;
  color: var(--empty-title);
}
/* ── Dica ────────────────────────────────────────────────────────────────── */
body .por-empty-state__sub,
body .por-empty__sub,
body .rb-empty > p,
body .cm-empty > p,
body .pm-empty > p,
body .za-empty > p,
body .pw-empty > p,
body .le-empty > p,
body .ld-empty > p,
body .ef-empty > p,
body .dep-empty > p,
body .wms-grid-empty > p,
body .oc-empty-box > p,
body .etq-empty > p,
body .oimt-empty > p,
body .ie-etq-empty > p {
  margin: 6px 0 0; max-width: 44ch;
  font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--empty-sub);
}
/* Nome de filtro e nome de botão citados na dica: no petrol do título eles se
   destacam do texto corrido sem introduzir outra cor. */
body .por-empty-state__sub b,   body .por-empty-state__sub strong,
body .por-empty__sub b,         body .por-empty__sub strong,
body .rb-empty > p b,           body .rb-empty > p strong,
body .cm-empty > p b,           body .cm-empty > p strong,
body .ie-etq-empty > p b,
body .ie-etq-empty > p strong { color: var(--empty-title); font-weight: 700; }
/* ── Variante de FALHA ───────────────────────────────────────────────────
   Falha com a mesma cor de "tudo certo" se lê como resultado da consulta. O halo
   pulsante sai: alerta não pisca junto com o resto da tela.
   Vale para QUALQUER um dos cartões acima: basta a tela acrescentar .is-erro ao
   bloco da mensagem de falha. O :is mantém a especificidade em uma classe, então
   body :is(...).is-erro vence a regra do cartão sem repetir a lista inteira. */
body :is(.por-empty-state,.por-empty,.rb-empty,.cm-empty,.wms-grid-empty,.oc-empty-box,
         .etq-empty,.oimt-empty,.pm-empty,.za-empty,.pw-empty,.le-empty,.ld-empty,
         .ef-empty,.dep-empty,.ie-etq-empty).is-erro,
body .cm-empty.cm-empty-err {
  background: var(--empty-err-bg); border-color: var(--empty-err-bd); color: var(--empty-err-txt);
}
/* Pastilha vermelha: vale para qualquer família e para os três nomes que o
   contêiner do ícone pode ter (.ring, .cm-empty-ring e o __icon do BEM). */
body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
  .oc-empty-box, .etq-empty, .oimt-empty, .ie-etq-empty).is-erro
  > :is(.ring, .cm-empty-ring, .por-empty-state__icon, .por-empty__icon) {
  background: var(--empty-err-pill); border-color: rgba(125,18,12,.25); color: #ffe1dc;
  box-shadow: 0 0 0 6px rgba(176,24,16,.06), 0 8px 18px -6px rgba(125,18,12,.35);
  animation: none;
}
body :is(.pm-empty,.za-empty,.pw-empty,.le-empty,.ld-empty,.ef-empty,.dep-empty).is-erro > svg {
  background: var(--empty-err-pill); border-color: rgba(125,18,12,.25); color: #ffe1dc;
  box-shadow: 0 0 0 6px rgba(176,24,16,.06), 0 8px 18px -6px rgba(125,18,12,.35);
  animation: none;
}
body :is(.por-empty-state,.por-empty,.rb-empty,.cm-empty,.pm-empty,.za-empty,.pw-empty,
         .le-empty,.ld-empty,.ef-empty,.dep-empty,.ie-etq-empty).is-erro
  :is(.por-empty-state__title,.por-empty__title,b,strong) { color: var(--empty-err-txt); }

/* ── O CARTÃO SE ADEQUA À ALTURA DO GRID ────────────────────────────────────
   Regra: a mensagem nunca gera rolagem no grid e nunca aparece cortada. A altura
   disponível varia demais para uma medida só — um grid de tela cheia tem 600px, e
   o painel de uma etapa de assistente às vezes fica com 140px, porque divide a
   altura com filtros e parâmetros. Então o cartão tem quatro réguas, e quem
   escolhe é o CONTÊINER, por container query: nada de cada tela adivinhar a sua.

   As alturas que cada régua produz (dica de duas a três linhas):
     base            ~180px    grid de tela cheia
     ate 300px       ~130px    grids de seção e modais
     ate 190px       ~112px    painéis que dividem a altura da etapa
     ate 140px       ~76px     sem pastilha, só título e dica

   OS CONTÊINERES declaram container-type:size porque todos têm altura definida
   (flex:1 dentro de um pai em coluna). Ficam de fora, de propósito:
     .oimt-list e .wiz-tree-wrap — altura vem do conteúdo, e nesses o
       container-type:size zera a altura do elemento;
     .por-grid-wrap--sec — a variante troca flex:1 por flex:none e passa a ser
       medida pelo conteúdo, por isso o :not() no seletor.
   Contêiner sem size container declarado simplesmente não casa com as queries e
   fica na régua base, que é o comportamento seguro. */
.por-grid-wrap:not(.por-grid-wrap--sec),
.cob-scroll,
.dtable-wrap,
.pm-tbl-wrap,
.rb-table,
.oc-prod-list,
.ie-etq-scroll,
.cm-grid-wrap,
/* Telas de cadastro: mesma moldura de grid em seis rotinas, com nome próprio em
   cada uma (o CSS delas vive no JS da tela). Todas são flex:1 com min-height:0,
   portanto altura definida. */
.dep-tbl-wrap,
.ef-tbl-wrap,
.pw-tbl-wrap,
.za-tbl-wrap,
.le-tbl-wrap,
.ld-tbl-wrap { container-type: size; }

/* ── Régua média (contêiner de até 300px) ───────────────────────────────── */
@container (max-height: 300px) {
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty) {
    padding: 13px clamp(14px,5%,24px) 15px;
  }
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)
    > :is(.ring, .cm-empty-ring, .por-empty-state__icon, .por-empty__icon) {
    width: 40px; height: 40px; border-radius: 12px; margin-bottom: 8px;
    box-shadow: none; animation: none;
  }
  /* Nas telas de cadastro a pastilha é o próprio svg, com padding em content-box:
     20 de glifo mais 10 de cada lado fecham os mesmos 40px. */
  body :is(.pm-empty, .za-empty, .pw-empty, .le-empty, .ld-empty, .ef-empty,
    .dep-empty) > svg {
    width: 20px; height: 20px; padding: 10px; margin-bottom: 8px;
    box-shadow: none; animation: none;
  }
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)
    > :is(.ring, .cm-empty-ring, .por-empty-state__icon, .por-empty__icon) svg {
    width: 20px; height: 20px;
  }
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)
    > :is(b, .por-empty-state__title, .por-empty__title) { font-size: 14px; }
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)
    > :is(p, .por-empty-state__sub, .por-empty__sub) {
    margin-top: 3px; font-size: 11.5px; line-height: 1.45; max-width: 52ch;
  }
}

/* ── Régua compacta (contêiner de até 190px): a pastilha sai ────────────────
   Aqui a pastilha deixa de caber com folga: 32px de pastilha mais os respiros
   somavam um cartão de até 135px num espaço de 150px, e bastava a dica ganhar
   uma linha para a barra de rolagem aparecer. Sem ela o cartão fecha em 78 a
   95px, e sobra espaço de verdade. Num painel desse tamanho o ícone é o que
   menos informa: título e dica dizem o que aconteceu e o que fazer. */
@container (max-height: 190px) {
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty) {
    padding: 11px 16px 12px; border-radius: 12px;
  }
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)
    > :is(svg, .ring, .cm-empty-ring, .por-empty-state__icon, .por-empty__icon) {
    display: none;
  }
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)
    > :is(b, .por-empty-state__title, .por-empty__title) { font-size: 13.5px; }
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)
    > :is(p, .por-empty-state__sub, .por-empty__sub) { max-width: 60ch; }
}

/* ── Régua mínima (contêiner de até 140px): tudo numa linha corrida ─────────
   Em 90 a 140px nem título e dica empilhados cabem com folga. O cartão deixa de
   ser flex e volta a ser bloco: título e dica passam a ser texto corrido no mesmo
   parágrafo, como uma frase. Fecha em 60 a 70px — o mínimo que a mensagem pode
   ocupar sem perder nem uma palavra.
   `display: block` no cartão é o que permite o `display: inline` nos filhos: em
   contêiner flex, filho inline é blocado e continuaria empilhando. */
@container (max-height: 140px) {
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty) {
    display: block; padding: 8px 12px 9px; border-radius: 10px;
    line-height: 1.45;
  }
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)
    > :is(b, .por-empty-state__title, .por-empty__title) {
    display: inline; font-size: 12.5px; max-width: none;
  }
  body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
    .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
    .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty)
    > :is(p, .por-empty-state__sub, .por-empty__sub) {
    display: inline; margin: 0 0 0 .4em; max-width: none; font-size: 12px;
  }
}

/* ── CARREGANDO NÃO É O CARTÃO ────────────────────────────────────────────
   O cartão responde "não há dados": é uma conclusão, e por isso tem moldura,
   pastilha e instrução do que fazer. Carregar é transitório — vesti-lo de cartão
   fazia a moldura inteira nascer e morrer em cada abertura de tela.
   Com .is-loading a moldura sai e sobra uma linha discreta e centrada, com um
   anel girando. O anel é desenhado aqui, em ::before, e o ícone que a tela
   escreveu é escondido: cada rotina pôs um diferente na marcação (lupa, caixa,
   seta) e nenhum deles indica atividade. Assim o carregamento tem uma cara só no
   sistema inteiro, sem depender do que cada tela escolheu.
   A dica também sai: ninguém precisa de instrução do que fazer enquanto espera.
   O atraso de 320 ms segue herdado do cartão de propósito — é ele que impede a
   piscada quando a consulta responde rápido.
   Este bloco fica no FIM da seção porque as regras do cartão (moldura, pastilha,
   título) têm a mesma especificidade: quem vem depois vence. */
body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
  .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
  .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty).is-loading {
  flex-direction: row; gap: 9px; max-width: none; padding: 20px 16px;
  background: none; border: none; border-radius: 0; box-shadow: none;
  font-size: 12.5px; font-weight: 600; color: var(--gray-500);
}
/* O anel vai escopado na lista de cartões, e não num `.is-loading` solto: essa
   classe já é usada no botão Buscar dos painéis (.por-btn-buscar.is-loading, que
   gira o próprio ícone), e sem o escopo o botão ganharia um segundo anel dentro. */
body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
  .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
  .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty).is-loading::before {
  content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--gray-300); border-top-color: #1c7b80;
  animation: porSpin .7s linear infinite;
}
body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
  .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
  .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty).is-loading
  > :is(svg, .ring, .por-empty-state__icon, .por-empty__icon,
        .por-empty-state__sub, .por-empty__sub, p) { display: none; }
body :is(.por-empty-state, .por-empty, .rb-empty, .cm-empty, .wms-grid-empty,
  .oc-empty-box, .etq-empty, .oimt-empty, .pm-empty, .za-empty, .pw-empty,
  .le-empty, .ld-empty, .ef-empty, .dep-empty, .ie-etq-empty).is-loading
  > :is(b, .por-empty-state__title, .por-empty__title) {
  display: inline; margin: 0; max-width: none;
  font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════════════════════════════
   RETIRADA DE PEDIDO DA O.C. (Painel de Execução O.C.)
   Cor própria da retirada para alteração: índigo, o "aguardando" — distinta do âmbar da
   falta (algo que pede ação) e do vermelho do cancelamento/definitiva (destrutivo).
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── Modal "Retirar pedido da O.C." (chassi .porr-*) ── */
.porr-card--retirar { width: min(640px, 100%); }
.porp-ped { margin-bottom: 14px; }
.porp-opcional { font-weight: 500; color: var(--gray-500); }
.porp-opcs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 6px 0 14px;
}
.porp-opc {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px 12px; text-align: left;
  border: 1.5px solid var(--gray-300); border-radius: 12px;
  background: #fff; color: var(--gray-800); font-family: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
}
.porp-opc:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,54,68,.10); }
.porp-opc:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }
.porp-opc-head { display: flex; align-items: center; gap: 10px; padding-right: 22px; }
.porp-opc-ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.porp-opc-ic svg { width: 17px; height: 17px; }
.porp-opc-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.2; }
.porp-opc-tt b { font-size: 14px; font-weight: 800; }
.porp-opc-tt small { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
.porp-opc-lista { margin: 0; padding-left: 17px; font-size: 12px; line-height: 1.45; color: var(--gray-600); }
.porp-opc-lista li { margin: 2px 0; }
.porp-opc-marca {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gray-300); background: #fff; color: transparent;
  transition: all .15s;
}
.porp-opc-marca svg { width: 11px; height: 11px; }
.porp-opc.is-alt .porp-opc-ic { background: #eef2ff; color: #4338ca; }
.porp-opc.is-def .porp-opc-ic { background: #fef2f2; color: #b91c1c; }
.porp-opc.is-alt:hover { border-color: #a5b4fc; }
.porp-opc.is-def:hover { border-color: #fca5a5; }
.porp-opc.is-alt.is-sel { border-color: #4f46e5; background: linear-gradient(180deg, #f5f7ff 0%, #fff 70%); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.porp-opc.is-def.is-sel { border-color: #c0473b; background: linear-gradient(180deg, #fff6f5 0%, #fff 70%); box-shadow: 0 0 0 3px rgba(192,71,59,.14); }
.porp-opc.is-alt.is-sel .porp-opc-marca { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.porp-opc.is-def.is-sel .porp-opc-marca { background: #c0473b; border-color: #c0473b; color: #fff; }
.porp-lista-def { margin: 0 0 14px; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--gray-700); }
/* "Retirar pedido" (antes de escolher como o pedido sai) e "Retirar para alteração": contorno âmbar,
   como o Retirar da lista de pedidos (a borda de 1,5px sai do padding para manter a altura dos demais
   botões do rodapé). "Retirar em definitivo" segue vermelho (.porr-btn-ok--canc). */
.porr-btn-ok--ret {
  background: #fff; border: 1.5px solid #d97706; color: #b45309;
  padding: 7.5px 16.5px;
}
.porr-btn-ok--ret:hover:not(:disabled) { background: linear-gradient(135deg, #d9a400, #b45309); border-color: #b45309; color: #fff; }
.porr-btn-ok.porr-btn-ok--ret:disabled { opacity: .7; }
.porr-btn-ok:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Pedidos retirados: ações em lote (aba Fora para alteração) ── */
.poc-ret-lote {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 7px 10px; border-radius: 10px;
  background: var(--gray-50); border: 1px dashed var(--gray-200);
}
.poc-ret-lote .por-head-actions-lbl { margin-right: 2px; }
.poc-ret-lote .por-btn-reset svg { width: 13px; height: 13px; }

/* ── Modal de pedidos fora em lote (oc-modal-retirada-lote.js) ── */
.porr-card--retlote {
  width: min(860px, 100%); max-height: calc(100vh - 56px);
  transition: width .2s, height .2s, max-width .2s, max-height .2s, border-radius .2s;
}
/* hidden precisa vencer o display das classes (.porr-ovl é grid; cabeçalho da lista, nota e
   botões são flex): o lote sai da frente enquanto o modal de vínculo está aberto e troca de fase */
.porr-ovl[hidden], .porr-card--retlote [hidden] { display: none !important; }
.porr-card--retlote .porr-head, .porr-card--retlote .porr-foot { flex: none; }
.porr-card--retlote .porr-foot { align-items: center; }
.porr-card--retlote .pocp-foot-nota { margin-right: auto; }
.porr-ovl.is-max .porr-card--retlote { width: 100%; max-width: none; height: calc(100vh - 16px); max-height: calc(100vh - 16px); border-radius: 8px; }
.porl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; display: flex; flex-direction: column; }
.porl-body > * { flex: none; }
.porl-list {
  max-height: 360px; overflow-y: auto; overscroll-behavior-y: contain;
  border: 1.5px solid var(--gray-300, #cbd5e1); border-radius: 10px; margin-bottom: 12px;
}
.porr-ovl.is-max .porl-list { max-height: none; flex: 1 1 auto; }
.porl-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--gray-100);
  transition: background .12s;
}
.porl-row:last-child { border-bottom: none; }
.porl-row:hover { background: var(--gray-50); }
.porl-row:has(.porl-ck:checked) { background: #f5fafb; }
.porl-row.is-off { cursor: not-allowed; }
.porl-row.is-off .porl-main { opacity: .62; }
.porl-row.is-off:hover { background: transparent; }
.porl-row .porl-ck { margin-top: 2px; }
.porl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.porl-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.porl-ped { flex: none; font-size: 12.5px; color: var(--gray-600); }
.porl-ped b { font: 800 14.5px var(--fdisp, 'Saira', 'Segoe UI', sans-serif); color: #003644; }
.porl-cli { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--gray-700); }
.porl-ev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--gray-500); }
.porl-bloq { display: inline-flex; align-items: center; gap: 4px; color: #4338ca; font-weight: 600; }
.porl-bloq svg { width: 12px; height: 12px; }
.porl-corpo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.porl-muds { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.porl-muds .porv-mud { height: 18px; padding: 0 7px; font-size: 9.5px; }
.porl-efs { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-left: 4px; }
.porl-ef { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.porl-ef-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.porl-ef.is-est { color: #b45309; }
.porl-ef.is-sai { color: #4338ca; }
.porl-ef.is-lib { color: #0f766e; }
.porl-ef.is-bus { color: #003644; }
.porl-ef.is-nada { color: var(--gray-500); font-weight: 500; }
.porl-vinc {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 4px;
  padding: 1px 8px; border-radius: 999px; background: rgba(0,54,68,.07); color: #003644;
  font-size: 10.5px; font-weight: 700;
}
.porl-vinc svg { width: 11px; height: 11px; }
.porl-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.porl-tag.is-alt    { background: #eef2ff; color: #3730a3; }
.porl-tag.is-pronto { background: #ecfdf5; color: #047857; }
.porl-tag.is-bloq   { background: #fef2f2; color: #b91c1c; }
.porl-motivo-nao { font-size: 11.5px; color: #991b1b; }
.porl-carregando { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-style: italic; color: var(--gray-500); }
.porl-spin {
  display: inline-block; width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid rgba(0,54,68,.16); border-top-color: #003644; animation: spin .7s linear infinite;
}
.porl-ver {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(0,54,68,.25); background: #fff; color: #0a4d5e;
  font: 700 11.5px var(--fbody); transition: background .12s, color .12s;
}
.porl-ver svg { width: 13px; height: 13px; }
.porl-ver:hover { background: #0a4d5e; color: #fff; }
/* Notas da seleção: uma faixa por assunto (estorno em âmbar: exige ação física; vínculo em petrol) */
.porl-nota { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 12px; }
.porl-nota-it {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 11px; border-radius: 9px;
  background: rgba(0,54,68,.05); border: 1px solid rgba(0,54,68,.14); color: #0a4d5e; font-size: 12px; line-height: 1.45;
}
.porl-nota-it svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.porl-nota-it.is-est { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
/* Resultado com estorno (execução) e a lista somada do fim do lote */
.porl-est-chip {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e;
  font-size: 10.5px; font-weight: 700;
}
.porl-est-chip svg { width: 11px; height: 11px; flex: none; }
.porl-estornos-fim .ret-estornos { margin: 0 0 12px; }
.porl-estornos-fim .ret-est-lista { max-height: 260px; }
.porr-ovl.is-max .porl-estornos-fim .ret-est-lista { max-height: none; }
/* Execução: progresso no topo e o andamento/resultado de cada pedido */
.porl-prog { margin: 0 0 12px; }
.porl-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 12.5px; color: var(--gray-600); }
.porl-prog-top b { font-size: 13px; color: #003644; }
.porl-prog-bar { height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.porl-prog-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2fa4a9, #003644); transition: width .3s ease; }
.porl-row--exec { cursor: default; align-items: center; }
.porl-row--exec:hover { background: transparent; }
.porl-st-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--gray-100); color: var(--gray-500);
}
.porl-st-ic svg { width: 13px; height: 13px; }
.porl-st-txt { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); }
.porl-res-msg { font-size: 11.5px; line-height: 1.4; color: var(--gray-600); }
.porl-row--exec.is-run    { background: #f5fafb; }
.porl-row--exec.is-run .porl-st-ic { background: rgba(0,54,68,.08); color: #003644; }
.porl-row--exec.is-run .porl-st-txt { color: #003644; }
.porl-row--exec.is-ok .porl-st-ic { background: #d1fae5; color: #047857; }
.porl-row--exec.is-ok .porl-st-txt { color: #047857; }
.porl-row--exec.is-barrado { background: #fffbeb; }
.porl-row--exec.is-barrado .porl-st-ic { background: #fef3c7; color: #b45309; }
.porl-row--exec.is-barrado .porl-st-txt, .porl-row--exec.is-barrado .porl-res-msg { color: #92400e; }
.porl-row--exec.is-erro { background: #fef2f2; }
.porl-row--exec.is-erro .porl-st-ic { background: #fee2e2; color: #b91c1c; }
.porl-row--exec.is-erro .porl-st-txt, .porl-row--exec.is-erro .porl-res-msg { color: #991b1b; }
.porl-row--exec.is-pulado .porl-st-ic { background: var(--gray-100); color: var(--gray-500); }
.porl-btn-parar { border-color: rgba(192,71,59,.45); color: #a13328; }
.porl-btn-parar:disabled { opacity: .7; cursor: default; }
/* Estornos da retirada definitiva e da volta (OCRetirada.estornosHtml): dentro do diálogo de
   confirmação, da mensagem final e do fim do lote. Âmbar: a mercadoria precisa ser levada de volta
   a cada endereço. Cada linha: endereço (para onde ir), produto e quantidade. */
.confirm-card:has(.ret-estornos) { max-width: 500px; }
.ret-estornos {
  display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 10px 12px 11px;
  text-align: left; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fcd34d; border-left: 3px solid #d97706;
}
.ret-est-tt { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; line-height: 1.2; color: #92400e; }
.ret-est-tt svg { width: 16px; height: 16px; flex: none; }
.ret-est-txt { font-size: 12px; line-height: 1.45; color: #78350f; }
.ret-est-lista {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content;
  list-style: none; margin: 2px 0 0; padding: 0; max-height: 200px; overflow-y: auto; overscroll-behavior-y: contain;
  background: #fff; border: 1px solid #fde68a; border-radius: 8px;
}
.ret-est-lista li {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 10px;
  padding: 6px 10px; border-bottom: 1px solid #fef3c7;
}
.ret-est-lista li:last-child { border-bottom: none; }
.ret-est-end {
  grid-column: 1; grid-row: 1; justify-self: start; padding: 2px 7px; border-radius: 6px; white-space: nowrap;
  background: rgba(0,54,68,.07); color: #003644; font-size: 11.5px; font-weight: 800;
}
.ret-est-prod { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--gray-700); }
.ret-est-prod b { color: #003644; font-weight: 800; margin-right: 2px; }
.ret-est-qtd { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; font-size: 12.5px; font-weight: 800; color: #b45309; }

/* Modal de vínculo aberto pela volta em lote: em qual vínculo do lote o usuário está */
.cm-retorno-prog {
  flex: none; align-self: center; margin-left: auto; padding: 3px 10px; border-radius: 999px;
  background: #003644; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* ── Modal "Volta do pedido" ── */
.porr-card--retorno {
  width: min(1080px, 100%); max-height: calc(100vh - 56px);
  transition: width .2s, height .2s, max-width .2s, max-height .2s, border-radius .2s;
}
.porr-card--retorno .porr-head, .porr-card--retorno .porr-foot { flex: none; }
.porr-card--retorno .porr-foot { align-items: center; }
.porr-card--retorno .pocp-foot-nota { margin-right: auto; }
.porv-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, #f6f7fd 0%, #fff 120px);
}
/* Saída do pedido: cartão com ícone, data/usuário e o motivo numa linha própria */
.porv-saida {
  flex: none; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: #fff; border: 1px solid #e0e7ff; box-shadow: 0 1px 2px rgba(49,46,129,.05);
  font-size: 12.5px; color: var(--gray-700); line-height: 1.5;
}
.porv-saida-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; background: #eef2ff; color: #4338ca;
}
.porv-saida-ic svg { width: 16px; height: 16px; }
.porv-saida-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.porv-saida b { color: #312e81; }
.porv-motivo { display: flex; align-items: baseline; gap: 8px; color: var(--gray-700); overflow-wrap: anywhere; }
.porv-motivo .lbl { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400, #94a3b8); }
.porv-bloq {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
}
.porv-bloq-ic { flex: none; display: inline-flex; color: #dc2626; margin-top: 1px; }
.porv-bloq-ic svg { width: 17px; height: 17px; }
.porv-sec { flex: none; border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; background: #fff; }
.porv-sec-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
}
.porv-sec-head b { font-size: 12.5px; font-weight: 800; color: #003644; }
.porv-sec-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.porv-sec-tt small { font-size: 11px; font-weight: 500; color: var(--gray-500); }
.porv-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.porv-grid { max-height: 260px; overflow: auto; }
.porr-ovl.is-max .porr-card--retorno { width: 100%; max-width: none; height: calc(100vh - 16px); max-height: calc(100vh - 16px); border-radius: 8px; }
.porr-ovl.is-max .porv-grid { max-height: none; }
.porv-table { width: 100%; border-collapse: collapse; }
.porv-table th { position: sticky; top: 0; z-index: 1; background: #fff; }
.porv-table td.num, .porv-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.porv-table tr.is-igual td { color: var(--gray-500); }
/* Item que mudou: grifado em âmbar — fundo da linha, filete à esquerda e marca-texto na quantidade */
.porv-table tr.is-mudou td { background: #fffbeb; }
.porv-table tr.is-mudou td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.porv-table tr.is-mudou .porv-desc { color: #78350f; font-weight: 600; }
.porv-grifo {
  padding: 1px 5px; border-radius: 4px; color: #78350f; font-weight: 800;
  background: linear-gradient(180deg, transparent 12%, #fde68a 12%, #fde68a 90%, transparent 90%);
}
/* Item cancelado no pedido: a linha toda riscada em vermelho (o rosa da linha cancelada do painel,
   .por-subrow--canc). Não é coletado nem buscado; a pílula "Cancelado" fica sem risco para ser lida. */
.porv-table tr.is-canc td { background: #fdf2f2; color: #b91c1c; }
.porv-table tr.is-canc td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.porv-table tr.is-canc td,
.porv-table tr.is-canc .por-sub-cod,
.porv-table tr.is-canc .porv-desc,
.porv-table tr.is-canc .unit-pill { text-decoration: line-through; text-decoration-color: #dc2626; text-decoration-thickness: 1.5px; }
.porv-table tr.is-canc .por-sub-cod, .porv-table tr.is-canc .porv-desc { color: #b91c1c; }
.porv-table tr.is-canc .unit-pill { background: #fee2e2; color: #b91c1c; }
.porv-table tr.is-canc .porv-mud { text-decoration: none; }
.porv-prod { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* O efeito do produto por extenso, embaixo do nome */
.porv-frase { margin-top: 3px; max-width: 360px; font-size: 11.5px; line-height: 1.4; color: var(--gray-600); white-space: normal; }
/* Célula com quantidade: fundo suave na cor da coluna (o ponto e o "i" do cabeçalho usam a mesma cor) */
.porv-table--efeito td.tem { font-weight: 700; }
.porv-table--efeito td.is-lib.tem { background: rgba(15,118,110,.07); color: #0f766e; }
.porv-table--efeito td.is-sai.tem { background: rgba(67,56,202,.07);  color: #4338ca; }
.porv-table--efeito td.is-est.tem { background: rgba(180,83,9,.08);   color: #b45309; }
.porv-table--efeito td.is-bus.tem { background: rgba(0,54,68,.06);    color: #003644; }
.porv-table--efeito td.tem b { color: inherit; }
.porv-table--efeito td { vertical-align: top; }
/* Títulos das colunas numéricas numa linha só (ponto + texto + "i"): o modal é largo o bastante
   para a tabela caber sem quebrar nem rolar para o lado */
.porv-table--efeito th.num { white-space: nowrap; }
.porv-th-nw { white-space: nowrap; }
.porv-th-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
/* "i" de cada coluna (balão .por-card-tip, o mesmo dos "i" do painel), na cor da coluna */
.porv-th-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin: -2px 0 0 6px; vertical-align: middle;
  border-radius: 50%; border: 1px solid currentColor; background: #fff; cursor: help;
  opacity: .75; transition: opacity .12s, background .12s, color .12s, box-shadow .12s;
}
.porv-th-info svg { width: 9px; height: 9px; }
.porv-th-info:hover, .porv-th-info:focus-visible, .porv-th-info.is-open {
  opacity: 1; outline: none; background: currentColor; box-shadow: 0 0 0 3px rgba(0,54,68,.12);
}
.porv-th-info:hover svg, .porv-th-info:focus-visible svg, .porv-th-info.is-open svg { color: #fff; }
.porv-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 330px; }
.porv-zero { color: var(--gray-300); }
.porv-vazio, .porv-nada { padding: 12px; font-size: 12.5px; color: var(--gray-500); text-align: center; }
.porv-novo-oc {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: #ede9fe; color: #6d28d9;
}
/* Produto que estava no pedido da O.C. sem endereço nenhum: a volta busca tudo o que o pedido pede dele */
.porv-novo-oc--sem { background: #ffedd5; color: #c2410c; }
.porv-table--efeito th.is-lib { color: #0f766e; }
.porv-table--efeito th.is-sai { color: #4338ca; }
.porv-table--efeito th.is-est { color: #b45309; }
.porv-table--efeito th.is-bus { color: #003644; }
.porv-table--efeito td small { color: var(--gray-500); font-weight: 600; }
/* "A buscar" que inclui parte bloqueada de endereço com falta: nota âmbar logo abaixo do número */
.porv-bus-falta {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; line-height: 1.25;
  color: #b45309; white-space: normal; cursor: help;
}
/* Pílulas de mudança do item (modal da volta e cartão da seção) */
.porv-mud {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent;
}
.porv-mud.is-igual { background: var(--gray-100); color: var(--gray-500); }
.porv-mud.is-aum   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.porv-mud.is-dim   { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.porv-mud.is-novo  { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.porv-mud.is-rem   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.porv-mud.is-canc  { background: #dc2626; color: #fff;    border-color: #dc2626; }

/* ── Modal "Pedidos da O.C.": ações e marca do pedido fora ── */
.pocp-stats:has(.pocp-stat--fora) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pocp-stat--fora .pocp-stat-ic { background: #eef2ff; color: #4338ca; }
.pocp-th-acoes { text-align: right; padding-right: 14px !important; }
.pocp-td-acoes { text-align: right; white-space: nowrap; padding-right: 12px !important; }
/* Botões empilhados e da mesma largura: lado a lado, Retornar + Definitiva passavam da
   largura do modal. Maximizado há espaço, e voltam a ficar lado a lado. */
.pocp-acoes { display: inline-flex; flex-direction: column; align-items: stretch; gap: 5px; }
.porr-ovl.is-max .pocp-acoes { flex-direction: row; gap: 6px; }
.pocp-acao {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 7px;
  font: 700 11.5px var(--fbody); white-space: nowrap; cursor: pointer;
  background: #fff; border: 1px solid; transition: all .12s;
}
.pocp-acao svg { width: 13px; height: 13px; flex: none; }
/* Todos com a largura do maior rótulo: os rótulos fantasmas (altura zero) reservam o espaço
   de "Retornar" e "Definitiva", e Retirar sozinho fica do tamanho da dupla em qualquer fonte */
.pocp-acao span { display: inline-flex; flex-direction: column; align-items: center; }
.pocp-acao span::before { content: 'Retornar'; }
.pocp-acao span::after  { content: 'Definitiva'; }
.pocp-acao span::before, .pocp-acao span::after { height: 0; overflow: hidden; visibility: hidden; }
.pocp-acao:disabled { opacity: .45; cursor: not-allowed; }
.pocp-acao:focus-visible { outline: 2px solid #003644; outline-offset: 1px; }
/* Retirar: contorno âmbar (ação que tira o pedido da coleta); preenche no hover */
.pocp-acao.is-retirar { border-color: #d97706; color: #b45309; }
.pocp-acao.is-retirar:hover:not(:disabled) { background: linear-gradient(135deg, #d9a400, #b45309); border-color: #b45309; color: #fff; box-shadow: 0 0 0 3px rgba(217,164,0,.24); }
.pocp-acao.is-volta { background: linear-gradient(135deg, #00465a, #003644); border-color: #003644; color: #fff; }
.pocp-acao.is-volta:hover:not(:disabled) { box-shadow: 0 0 0 3px rgba(0,54,68,.20); }
.pocp-acao.is-def { border-color: rgba(192,71,59,.5); color: #b13c31; }
.pocp-acao.is-def:hover:not(:disabled) { background: linear-gradient(135deg, #b13c31, #c0473b); border-color: #b13c31; color: #fff; box-shadow: 0 0 0 3px rgba(192,71,59,.22); }
.pocp-badge-fora {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px;
  background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3;
}
.pocp-badge-fora svg { width: 11px; height: 11px; flex: none; color: #4f46e5; }
.pocp-row.is-fora > td { background: linear-gradient(90deg, rgba(238,242,255,.85), rgba(238,242,255,.25)); }

/* ── Painel: pílula "Bloqueado" (endereço e produto), balão e marca do cabeçalho ── */
.por-badge--bloq {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border: 1px solid #c7d2fe;
  background: #eef2ff; color: #3730a3; cursor: help;
}
.por-badge--bloq svg { flex: none; width: 11px; height: 11px; color: #4f46e5; }
.por-badge--bloq:focus-visible { outline: 2px solid #003644; outline-offset: 1px; }
/* Pílula com balão (N fora, Bloqueado): realça ao passar o mouse, como um alvo de dica */
.por-badge--bloq[tabindex] { transition: background .12s, border-color .12s, box-shadow .12s; }
.por-badge--bloq[tabindex]:hover { background: #e0e7ff; border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.poc-tip--bloq-ret { min-width: 240px; max-width: 330px; border-color: rgba(165,180,252,.40); }
.poc-tip--bloq-ret::after { border-color: rgba(165,180,252,.40); }
.poc-tip--bloq-ret .poc-tip-tag { display: inline-flex; align-items: center; gap: 5px; color: #a5b4fc; white-space: nowrap; }
.poc-tip--bloq-ret .poc-tip-tag svg, .poc-tip--bloq-ret .poc-tip-acao svg { width: 11px; height: 11px; flex: none; color: #a5b4fc; }
.poc-tip--bloq-ret .poc-tip-acao { align-items: flex-start; line-height: 1.4; }
.poc-tip--bloq-ret .poc-tip-acao svg { margin-top: 1px; }
.poc-tip--bloq-ret .poc-tip-head { flex-wrap: wrap; row-gap: 2px; }
.poc-tip--bloq-ret .poc-tip-num { white-space: nowrap; }
/* "Só finaliza depois que voltar": a consequência, em faixa índigo própria entre o motivo e a ação */
.poc-tip-fim {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px; padding: 6px 9px; border-radius: 8px;
  background: rgba(165,180,252,.12); border: 1px solid rgba(165,180,252,.28);
  font-size: 11.5px; font-weight: 600; line-height: 1.45; color: #e0e7ff;
}
.poc-tip-fim svg { flex: none; width: 12px; height: 12px; margin-top: 2px; color: #a5b4fc; }
.poc-fora-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3;
  font: 600 12.5px var(--fbody); cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(67,56,202,.10);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.poc-fora-chip svg { width: 13px; height: 13px; color: #4f46e5; }
.poc-fora-chip b { font-weight: 800; }
.poc-fora-chip:hover { border-color: #818cf8; box-shadow: 0 3px 10px rgba(67,56,202,.18); transform: translateY(-1px); }
.poc-fora-chip:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }

/* ── Painel: seção "Pedidos retirados" ── */
#pocSecRetiradas .panel-head { flex-wrap: wrap; row-gap: 8px; }
.poc-ret-lista { display: grid; gap: 10px; padding: 12px 16px 16px; }
/* Teto de 2 pedidos: o max-height é medido em painel-oc.js (aplicarTetoRetiradas), porque os
   cartões têm altura própria; do 3º pedido em diante a lista rola por dentro */
.poc-ret-lista.is-teto { overflow-y: auto; }
.poc-ret {
  position: relative; padding: 10px 14px 10px 16px;
  border: 1px solid var(--gray-200); border-left: 4px solid var(--gray-300); border-radius: 10px;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .15s, border-color .15s;
}
.poc-ret:hover { box-shadow: 0 4px 14px rgba(0,54,68,.08); }
/* O cartão inteiro expande/recolhe (menos os itens abertos, que mantêm o cursor normal) */
.poc-ret { cursor: pointer; }
.poc-ret .poc-ret-det { cursor: default; }
.poc-ret:hover .poc-ret-exp:not(.open) { color: #003644; background: rgba(0,54,68,.06); }
.poc-ret.is-alt    { border-left-color: #6366f1; }
.poc-ret.is-pronto { border-left-color: #10b981; }
.poc-ret.is-bloq   { border-left-color: #ef4444; }
.poc-ret-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.poc-ret-exp { flex: none; }
.poc-ret-id { display: flex; align-items: baseline; gap: 10px; flex: 1 1 220px; min-width: 0; }
.poc-ret-ped { flex: none; font-size: 13px; color: var(--gray-600); }
.poc-ret-ped b { font: 800 15px var(--fdisp, 'Saira', 'Segoe UI', sans-serif); color: #003644; letter-spacing: .01em; }
.poc-ret-cli { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
.poc-ret-tag {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
/* O que aconteceu com o pedido (saída x ERP agora): rótulo + uma etiqueta por tipo de mudança, nas
   cores da coluna Mudança. Âmbar quando mudou (a volta vai mexer na O.C.); cinza quando nada mudou. */
.poc-ret-mudou {
  flex: none; display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
  min-height: 26px; padding: 2px 4px 2px 9px; border-radius: 999px; border: 1px solid;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.poc-ret-mudou-lbl { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; }
.poc-ret-mudou svg { flex: none; width: 12px; height: 12px; }
.poc-ret-mudou .porv-mud { height: 18px; padding: 0 7px; font-size: 9.5px; }
.poc-ret-mudou.is-fora  { background: #fffbeb; border-color: #fcd34d; color: #92400e; cursor: help; }
.poc-ret-mudou.is-fora svg { color: #b45309; }
.poc-ret-mudou.is-igual { padding-right: 10px; background: var(--gray-50, #f8fafc); border-color: var(--gray-200); color: var(--gray-500); font-weight: 600; }
.poc-ret-mudou.is-igual svg { color: #10b981; }
.poc-ret-mudou[tabindex]:hover { box-shadow: 0 0 0 3px rgba(217,164,0,.16); }
.poc-ret-mudou:focus-visible { outline: 2px solid #003644; outline-offset: 1px; }
/* Balão do item a item */
.poc-tip--ret-mud { min-width: 280px; max-width: 360px; border-color: rgba(252,211,77,.34); }
.poc-tip--ret-mud::after { border-color: rgba(252,211,77,.34); }
.poc-tip--ret-mud .poc-tip-head { flex-wrap: wrap; row-gap: 2px; }
.poc-tip--ret-mud .poc-tip-tag { display: inline-flex; align-items: center; gap: 5px; color: #fcd34d; white-space: nowrap; }
.poc-tip--ret-mud .poc-tip-tag svg { flex: none; width: 11px; height: 11px; }
.poc-tip--ret-mud .poc-tip-acao { align-items: flex-start; line-height: 1.4; }
.poc-tip-muds { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.poc-tip-mud { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: start; gap: 8px; }
.poc-tip-mud .porv-mud { height: 17px; padding: 0 6px; font-size: 9px; justify-self: start; }
.poc-tip-mud .txt { min-width: 0; font-size: 11.5px; line-height: 1.35; color: #eafcff; overflow-wrap: anywhere; }
.poc-tip-mud .txt b { font-weight: 800; color: #fff; }
.poc-tip-mud .txt small { display: block; font-size: 10.5px; color: rgba(230,252,255,.65); }
.poc-tip-mais { margin-top: 3px; font-size: 10.5px; font-style: italic; color: rgba(230,252,255,.6); }
.poc-ret-tag.is-alt    { background: #eef2ff; color: #3730a3; }
.poc-ret-tag.is-pronto { background: #ecfdf5; color: #047857; }
.poc-ret-tag.is-bloq   { background: #fef2f2; color: #b91c1c; }
.poc-ret-pulso { width: 7px; height: 7px; border-radius: 50%; background: #6366f1; box-shadow: 0 0 0 0 rgba(99,102,241,.6); animation: poc-ret-pulso 1.6s ease-out infinite; }
@keyframes poc-ret-pulso { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(99,102,241,0); } }
.poc-ret-acoes { flex: none; display: inline-flex; gap: 6px; margin-left: auto; }
.poc-ret-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid;
  font: 700 12.5px var(--fbody); white-space: nowrap; cursor: pointer; transition: all .12s;
}
.poc-ret-btn svg { width: 14px; height: 14px; flex: none; }
.poc-ret-btn:disabled { opacity: .45; cursor: not-allowed; }
.poc-ret-btn:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }
.poc-ret-btn.is-volta { background: linear-gradient(135deg, #00465a, #003644); border-color: #003644; color: #fff; }
.poc-ret-btn.is-volta:hover:not(:disabled) { box-shadow: 0 0 0 3px rgba(0,54,68,.20); transform: translateY(-1px); }
.poc-ret-btn.is-def { background: #fff; border-color: rgba(192,71,59,.5); color: #b13c31; }
.poc-ret-btn.is-def:hover:not(:disabled) { background: linear-gradient(135deg, #b13c31, #c0473b); border-color: #b13c31; color: #fff; box-shadow: 0 0 0 3px rgba(192,71,59,.22); }
.poc-ret-evs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0 34px; font-size: 12px; color: var(--gray-600); }
.poc-ret-ev { display: inline-flex; align-items: center; gap: 6px; }
.poc-ret-ev svg { width: 13px; height: 13px; flex: none; color: var(--gray-400); }
.poc-ret-ev b { color: var(--gray-800); font-weight: 700; }
.poc-ret-ev.is-bloq { color: #3730a3; }
.poc-ret-ev.is-bloq svg { color: #4f46e5; }
.poc-ret-aviso {
  display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0 34px;
  padding: 7px 10px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca;
  font-size: 12px; font-weight: 600; color: #991b1b;
}
.poc-ret-aviso svg { width: 13px; height: 13px; flex: none; margin-top: 1px; color: #dc2626; }
.poc-ret-motivo { display: flex; gap: 8px; margin: 6px 0 0 34px; font-size: 12px; line-height: 1.45; }
.poc-ret-motivo .lbl { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); padding-top: 1px; }
.poc-ret-motivo .txt { color: var(--gray-700); overflow-wrap: anywhere; }
.poc-ret-det { margin: 10px 0 2px 34px; padding-top: 10px; border-top: 1px dashed var(--gray-200); animation: poc-ret-abre .18s ease-out; }
@keyframes poc-ret-abre { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.poc-ret-sub-tt {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500);
}
.poc-ret-sub-tt svg { width: 12px; height: 12px; color: #4f46e5; }
.poc-ret-table { width: 100%; border-collapse: collapse; }
.poc-ret-table td.num, .poc-ret-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.poc-ret-table tr.is-igual td { color: var(--gray-500); }
.poc-ret-table td small { color: var(--gray-500); font-weight: 600; }
.poc-ret-prod { display: flex; align-items: center; gap: 6px; min-width: 0; }
.poc-ret-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; }
.poc-ret-zero { color: var(--gray-300); }
.poc-ret-vazio { padding: 10px; text-align: center; color: var(--gray-500); }
.poc-ret-end { font-weight: 700; color: #003644; }
.poc-ret-bloqs { margin-top: 12px; }

/* Tela estreita: os cartões de escolha empilham; as ações dos cartões da seção vão para a linha de baixo */
@media (max-width: 640px) {
  .porp-opcs { grid-template-columns: 1fr; }
  .poc-ret-acoes { margin-left: 34px; width: 100%; }
  .poc-ret-evs, .poc-ret-motivo, .poc-ret-aviso, .poc-ret-det { margin-left: 0; }
}
/* Faixa da volta do pedido no modal de vínculo (openColetaModal em modo retorno) */
.cm-retorno-info {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 18px 0; padding: 9px 12px; border-radius: 10px;
  background: linear-gradient(90deg, #eef2ff, #f5f7ff); border: 1px solid #c7d2fe;
  color: #312e81; font-size: 12.5px; line-height: 1.5;
}
.cm-retorno-ico { flex: none; display: inline-flex; margin-top: 1px; color: #4f46e5; }
.cm-retorno-txt b { font-weight: 800; }
/* ══ Painel de Coleta: aba "Resets e cancelamentos" (lib/painel-oc-estornos.js) ═══════════════════════
   Na língua da aba Detalhes: cabeçalho .por-det-header, indicadores .por-card e a linha do tempo numa
   .por-section. Cada linha é uma operação, em colunas: hora | trilho com o tipo | o que foi feito | o
   que voltou ao estoque (coluna fixa, para comparar as operações de olho) | seta. A cor do tipo fica só
   na pílula, no ponto do trilho e no efeito; verde só no que voltou ao estoque; o resto, petrol e cinza. */
.pes-root { container: pesroot / inline-size; padding-bottom: 20px; }
.pes-root .is-reset { --tipo: #0e7490; --tipo-bg: #ecfeff; --tipo-bd: #a5f3fc; }
.pes-root .is-canc  { --tipo: #b91c1c; --tipo-bg: #fef2f2; --tipo-bd: #fecaca; }
.pes-root .is-ped   { --tipo: #6d28d9; --tipo-bg: #f5f3ff; --tipo-bd: #ddd6fe; }
.pes-root .is-compl { --tipo: #b45309; --tipo-bg: #fffbeb; --tipo-bd: #fde68a; }

/* Cabeçalho */
.pes-header .por-det-id { flex-wrap: wrap; row-gap: 6px; }
.pes-head-sub { font-size: 12.5px; color: var(--gray-600); }

/* Indicadores: os .por-card da aba Detalhes, numa linha só, compactando por container query */
.pes-kpis { flex-wrap: nowrap; }
/* Largura pelo tamanho do valor: os de contagem são curtos, os de quantidade por unidade são longos */
.pes-kpi { flex: .85 1 0; min-width: 0; }
.pes-kpi.is-ped { flex-grow: 1.15; }
.pes-kpi.is-estoque, .pes-kpi.is-conf { flex-grow: 1.35; }
.pes-kpi .por-card-info ~ .por-card-body { padding-right: 16px; }
.pes-kpi .por-card-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pes-kpi.is-reset   .por-card-icon { background: #ecfeff; color: #0e7490; }
.pes-kpi.is-canc    .por-card-icon { background: #fef2f2; color: #b91c1c; }
.pes-kpi.is-ped     .por-card-icon { background: #f5f3ff; color: #6d28d9; }
.pes-kpi.is-estoque .por-card-icon { background: #ecfdf5; color: #047857; }
.pes-kpi.is-conf    .por-card-icon { background: #eef2ff; color: #4338ca; }
.pes-kpi .por-card-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pes-kpi .por-card-val small { margin-left: 5px; font: 700 12px var(--fbody); letter-spacing: 0; color: var(--gray-500); }
.pes-kpi .por-card-val i { margin: 0 5px; font-style: normal; color: var(--gray-300); }
.pes-kpi.is-estoque .por-card-val { color: #047857; }
.pes-kpi.is-multi .por-card-val { font-size: 16px; }
.pes-kpi-zero { color: var(--gray-400); }
.pes-kpi-sub { margin-top: 2px; font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container pesroot (max-width: 1240px) {
  .pes-kpis { gap: 10px; }
  .pes-kpi { padding: 12px 14px; gap: 10px; }
  .pes-kpi .por-card-icon { width: 32px; height: 32px; border-radius: 9px; }
  .pes-kpi .por-card-icon svg { width: 16px; height: 16px; }
  .pes-kpi .por-card-val { font-size: 18px; }
  .pes-kpi.is-multi .por-card-val { font-size: 14.5px; }
}
/* Sem ícone, e a sobra vai para os dois cartões de quantidade por unidade, os únicos de valor longo */
@container pesroot (max-width: 1060px) {
  .pes-kpi .por-card-icon { display: none; }
  .pes-kpi { flex-grow: .9; }
  .pes-kpi.is-ped { flex-grow: 1; }
  .pes-kpi.is-estoque, .pes-kpi.is-conf { flex-grow: 1.5; }
  .pes-kpi.is-multi .por-card-val { font-size: 14px; }
}
@container pesroot (max-width: 900px) {
  .pes-kpis { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .pes-kpi { padding: 10px 12px; }
  .pes-kpi .por-card-val { font-size: 16px; }
  .pes-kpi.is-multi .por-card-val { font-size: 13px; }
}

/* Seção da linha do tempo. overflow: clip, e não o hidden da .por-section: hidden faria da seção um
   contêiner de rolagem, e a barra de filtros deixaria de grudar no topo ao rolar a aba. */
.pes-sec { overflow: clip; }
.pes-sec .hicon { background: rgba(0,54,68,.10); color: #003644; }
/* Os blocos têm margem só embaixo e contam com a faixa de indicadores acima deles. Sem indicadores (unidades
   separadas sem operação de pedido), o primeiro encostava no cabeçalho. O último não soma a margem ao
   padding do painel: a moldura em volta fica com os mesmos 20px nos três lados. */
.pes-root > .por-det-header + :is(.por-section, .pop-sep) { margin-top: 16px; }
.pes-root > .por-section:last-child { margin-bottom: 0; }

/* Barra de filtros: gruda no topo enquanto a lista rola, na largura toda da seção */
.pes-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 10px 16px; background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gray-200);
}
.pes-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--gray-100); }
.pes-seg-b {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--gray-600); font: 600 13px var(--fbody); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.pes-seg-b:hover:not(.is-on) { background: #fff; color: #003644; }
.pes-seg-b.is-on { background: #003644; color: #fff; box-shadow: 0 2px 6px -2px rgba(0,54,68,.5); }
.pes-seg-n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; background: rgba(0,54,68,.08); color: inherit; }
.pes-seg-b.is-on .pes-seg-n { background: rgba(255,255,255,.2); }
.pes-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer; user-select: none; white-space: nowrap; }
.pes-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.pes-toggle-sw { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--gray-300); transition: background .18s; }
.pes-toggle-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.pes-toggle input:checked + .pes-toggle-sw { background: #047857; }
.pes-toggle input:checked + .pes-toggle-sw::after { transform: translateX(14px); }
.pes-toggle input:focus-visible + .pes-toggle-sw { box-shadow: 0 0 0 3px rgba(4,120,87,.25); }
/* Busca e "Abrir todos" quebram juntos para a 2ª linha, nunca o botão sozinho */
.pes-bar-fim { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.pes-busca {
  flex: 1 1 auto; min-width: 160px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  border: 1px solid var(--gray-300); border-radius: 8px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.pes-busca:focus-within { border-color: #2fa4a9; box-shadow: 0 0 0 3px rgba(47,164,169,.15); }
.pes-busca svg { flex: none; width: 15px; height: 15px; color: var(--gray-400); }
.pes-busca input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: 13px var(--fbody); color: var(--gray-800); }
.pes-bar-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--gray-300); background: #fff; color: #0a4d5e; font: 600 13px var(--fbody); white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.pes-bar-btn svg { width: 15px; height: 15px; }
.pes-bar-btn:hover:not(:disabled) { background: #0a4d5e; border-color: #0a4d5e; color: #fff; }
.pes-bar-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Dias */
.pes-dia-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 16px 8px; background: #f6fafb; border-bottom: 1px solid var(--gray-200);
}
.pes-dia + .pes-dia .pes-dia-head { border-top: 1px solid var(--gray-200); }
.pes-dia-tt { font: 800 14px/1.2 var(--fdisp, 'Saira', 'Segoe UI', sans-serif); color: #003644; }
.pes-dia-sub { font-size: 12px; color: var(--gray-500); }
.pes-dia-n { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--gray-500); }

/* Operação: colunas trilho (28) | conteúdo | estoque (210) | seta (30), vão de 12; a hora fica na linha
   do título. O trilho (linha vertical que liga os pontos do dia) passa no centro da 1ª coluna: 16 + 14. */
.pes-ops { margin: 0; padding: 0; list-style: none; }
.pes-op { position: relative; border-bottom: 1px solid var(--gray-100); }
.pes-op:last-child { border-bottom: 0; }
.pes-op::before { content: ''; position: absolute; left: 29px; top: 0; bottom: 0; width: 2px; background: #d6e3e7; }
.pes-op:first-child::before { top: 28px; }
.pes-op:last-child::before { bottom: auto; height: 28px; }
.pes-op:only-child::before { display: none; }
/* Filete na cor do tipo na borda esquerda de toda operação, aberta ou fechada. Recuado 6px em cima e
   embaixo: as linhas se encostam, e sem o recuo duas operações seguidas do mesmo tipo virariam uma
   barra só. */
.pes-op::after { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tipo); }
.pes-op-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 210px 30px; column-gap: 12px; align-items: start;
  padding: 14px 16px; cursor: pointer; outline: none; transition: background .15s;
}
.pes-op-row:hover, .pes-op.is-open > .pes-op-row { background: #f6fafb; }
.pes-op-row:focus-visible { box-shadow: inset 0 0 0 2px rgba(47,164,169,.55); }
.pes-op-quando { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-size: 12px; font-weight: 800; color: var(--gray-700); font-variant-numeric: tabular-nums; }
.pes-op-quando svg { flex: none; width: 12px; height: 12px; color: var(--gray-400); }
.pes-op-trilho { display: flex; justify-content: center; }
.pes-op-dot {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tipo-bg); border: 1.5px solid var(--tipo-bd); color: var(--tipo); box-shadow: 0 0 0 3px #fff;
  transition: background .15s, color .15s, border-color .15s;
}
.pes-op-dot svg { width: 14px; height: 14px; }
.pes-op-row:hover .pes-op-dot, .pes-op.is-open .pes-op-dot { box-shadow: 0 0 0 3px #f6fafb; }
.pes-op.is-open .pes-op-dot { background: var(--tipo); border-color: var(--tipo); color: #fff; }
.pes-op-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pes-op-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pes-op-tag {
  flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--tipo-bg); color: var(--tipo); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.pes-op-tt { margin: 0; min-width: 0; font: 800 15px/1.3 var(--fdisp, 'Saira', 'Segoe UI', sans-serif); color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pes-op-user { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--gray-600); }
.pes-op-user svg { flex: none; width: 12px; height: 12px; color: var(--gray-400); }
.pes-op-cli { font-size: 12px; font-weight: 600; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pes-op-motivo {
  margin: 2px 0 0; padding-left: 9px; border-left: 2px solid var(--gray-300);
  font-size: 12.5px; line-height: 1.45; font-style: italic; color: var(--gray-600);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pes-op-prods { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 2px; font-size: 12.5px; color: var(--gray-600); }
.pes-op-prods-l { display: flex; min-width: 0; overflow: hidden; }
.pes-op-prods-l > span { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pes-op-prods-l > span + span::before { content: '·'; margin: 0 7px; color: var(--gray-400); }
.pes-op-prods b { margin-right: 2px; font-weight: 800; color: #003644; }
.pes-op-prods-mais { flex: none; font-weight: 700; color: var(--gray-500); white-space: nowrap; }
.pes-op-prods .pes-end { flex: none; }
.pes-op-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pes-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pes-chip svg { flex: none; width: 12px; height: 12px; }
.pes-chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pes-chip.is-conf svg { color: #4338ca; }
.pes-chip.is-falta svg, .pes-chip.is-compl svg { color: #b45309; }
.pes-chip.is-semtrilha { border-style: dashed; border-color: var(--gray-300); color: var(--gray-600); cursor: help; outline: none; }
.pes-chip.is-semtrilha svg { color: var(--gray-400); }
.pes-chip.is-semtrilha:hover, .pes-chip.is-semtrilha:focus-visible { border-color: #0a4d5e; color: #0a4d5e; }
/* Coluna do que voltou ao estoque */
.pes-op-res { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 3px; text-align: right; }
.pes-op-res-rot { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); }
.pes-op-res-rot svg { width: 12px; height: 12px; }
.pes-op-res.is-estoque .pes-op-res-rot { color: #047857; }
.pes-op-res-val { max-width: 100%; font: 800 16px/1.3 var(--fdisp, 'Saira', 'Segoe UI', sans-serif); color: #047857; font-variant-numeric: tabular-nums; }
.pes-op-res-val i { margin: 0 4px; font-style: normal; color: #86c9ad; }
.pes-op-res-nada { font: 700 15px/1.3 var(--fdisp, 'Saira', 'Segoe UI', sans-serif); color: var(--gray-400); }
.pes-op-res-sub { font-size: 11.5px; color: var(--gray-500); }
.pes-op-chev {
  width: 30px; height: 30px; margin-top: 1px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--gray-200); background: #fff; color: var(--gray-500);
  transition: transform .2s, background .15s, color .15s, border-color .15s;
}
.pes-op-chev svg { width: 15px; height: 15px; }
.pes-op-row:hover .pes-op-chev { border-color: #0a4d5e; color: #0a4d5e; }
.pes-op.is-open .pes-op-chev { transform: rotate(180deg); background: #003644; border-color: #003644; color: #fff; }
/* Itens da operação: alinhados com a coluna do conteúdo (16 + 28 + 12), à direita do trilho */
.pes-op-body { display: none; flex-direction: column; gap: 10px; margin: 0 16px 0 56px; padding: 2px 0 16px; }
.pes-op.is-open .pes-op-body { display: flex; animation: pesAbre .2s ease; }
@keyframes pesAbre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Tela estreita: o estoque desce para baixo do conteúdo, e os itens usam a largura toda */
@container pesroot (max-width: 900px) {
  .pes-op-row { grid-template-columns: 28px minmax(0, 1fr) 30px; }
  .pes-op-res { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 6px; padding-top: 0; text-align: left; }
  .pes-op-chev { grid-column: 3; grid-row: 1; }
}

/* Item da operação */
.pes-it { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 1px 2px rgba(16,44,52,.04); }
.pes-it.is-filho { background: #fffdf7; border-color: #fde68a; }
.pes-it-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.pes-it-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: #fffbeb; color: #b45309; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pes-it-tag svg { width: 11px; height: 11px; }
.pes-it-prod { min-width: 0; font-size: 13px; font-weight: 600; color: var(--gray-700); }
.pes-it-prod b { margin-right: 3px; font-weight: 800; color: #003644; }
.pes-it-hora { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.pes-it-hora svg { width: 12px; height: 12px; }
.pes-end { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(0,54,68,.07); color: #003644; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.pes-end svg { width: 11px; height: 11px; }
/* O.R. (lib/painel-or-estornos.js): o caminho da reposição, pulmão e depois picking, com o rótulo de cada um */
.pes-rota { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pes-rota-seta { display: inline-flex; color: var(--gray-400); }
.pes-rota-seta svg { width: 13px; height: 13px; }
.pes-end-rot { font-style: normal; font-weight: 600; color: var(--gray-500); margin-right: 2px; }
.pes-end.is-pick { background: rgba(14,116,144,.09); color: #0e5f73; }
/* Etiqueta que a reposição parcial criou no picking e o estorno excluiu: sempre à vista, embaixo da do pulmão */
.pes-tab .pes-mini.pes-extra { display: block; white-space: normal; overflow-wrap: anywhere; color: var(--gray-600); }

/* Antes | o que a operação fez | agora: uma faixa só, em três partes */
.pes-flow {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--gray-200); border-radius: 9px; overflow: hidden; background: var(--gray-50);
}
.pes-flow-st { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 8px 12px 9px; }
.pes-flow-st.is-efeito { background: var(--tipo-bg); border-left: 1px solid var(--tipo-bd); border-right: 1px solid var(--tipo-bd); }
.pes-flow-rot { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }
.pes-flow-st.is-efeito .pes-flow-rot { color: var(--tipo); }
.pes-flow-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; line-height: 1.45; color: var(--gray-700); }
.pes-flow-v b { font-weight: 800; color: var(--gray-800); }
.pes-flow-st.is-efeito .pes-flow-v { flex-direction: column; align-items: flex-start; gap: 1px; }
.pes-flow-st.is-efeito .pes-flow-v > b { color: var(--tipo); }
.pes-flow-txt { font-size: 12px; color: var(--gray-600); }
.pes-flow-muted { font-size: 12px; font-style: italic; color: var(--gray-500); }
@container pesroot (max-width: 820px) {
  .pes-flow { grid-template-columns: minmax(0, 1fr); }
  .pes-flow-st.is-efeito { border: 0; border-top: 1px solid var(--tipo-bd); border-bottom: 1px solid var(--tipo-bd); }
}
.pes-st { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pes-st.is-pend { background: var(--gray-100); color: var(--gray-600); }
.pes-st.is-and  { background: #e0f2fe; color: #0369a1; }
.pes-st.is-ok   { background: #dcfce7; color: #15803d; }
.pes-st.is-canc { background: #fee2e2; color: #b91c1c; }
.pes-st.is-fora { background: #e2e8f0; color: #334155; }

/* Blocos do estorno: título leve e a tabela numa moldura só */
.pes-blk { display: flex; flex-direction: column; gap: 6px; }
.pes-blk-h { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; font-weight: 800; color: var(--gray-700); }
.pes-blk-h > svg { flex: none; width: 14px; height: 14px; }
.pes-blk-h b { font-size: 13px; font-variant-numeric: tabular-nums; }
.pes-blk-h em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--gray-500); }
.pes-blk.is-estoque .pes-blk-h { color: #047857; }
.pes-blk.is-conf .pes-blk-h { color: #4338ca; }
.pes-blk.is-falta .pes-blk-h { color: #b45309; }
.pes-blk.is-vazio { flex-direction: row; align-items: center; gap: 7px; padding: 7px 10px; font-size: 12px; color: var(--gray-500); background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: 8px; }
.pes-blk.is-vazio svg { flex: none; width: 14px; height: 14px; color: var(--gray-400); }
.pes-blk-nota { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--gray-500); }
.pes-tab-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: 8px; }
.pes-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.pes-tab th {
  padding: 8px 10px; text-align: left; white-space: nowrap; background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500);
}
.pes-tab td { padding: 7px 10px; white-space: nowrap; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.pes-tab tbody tr:last-child td { border-bottom: 0; }
.pes-tab tbody tr:hover td { background: #f8fbfc; }
.pes-tab .pes-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Qtd. atual: o saldo da etiqueta agora, em petrol, para não se confundir com a estornada (verde do bloco) */
.pes-tab .pes-atual { color: #0a4d5e; font-weight: 600; }
/* Etiqueta e cliente ficam com a sobra da largura; as outras colunas, só o que precisam. O código da
   etiqueta nunca quebra de linha nem é cortado (só abaixo de ~1100px de tela a tabela rola de lado). */
.pes-tab .pes-etq { width: 100%; white-space: nowrap; font: 11.5px/1.35 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--gray-600); }
/* Tela estreita: Lote e Fabricação deixam de ser colunas e descem, miúdos, para baixo do código, e os
   cabeçalhos das quantidades podem ir a duas linhas. Com as sete colunas e o código numa linha só, a
   tabela não cabe numa tela de 1366px. */
.pes-tab .pes-mini, .pes-tab .pes-th-rec { display: none; }
.pes-tab .pes-mini { margin-top: 2px; font: 600 11px/1.3 var(--fbody); letter-spacing: 0; color: var(--gray-500); white-space: nowrap; }
@container pesroot (max-width: 1120px) {
  .pes-tab .pes-col-rec { display: none; }
  .pes-tab .pes-mini { display: block; }
  .pes-tab .pes-th-rec { display: inline; }
  .pes-tab th.pes-num { white-space: normal; }
  .pes-tab th, .pes-tab td { padding-left: 8px; padding-right: 8px; }
}
.pes-tab .pes-cli { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pes-tab .pes-lote { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.pes-sit { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; outline: none; }
.pes-sit.is-reat  { background: #dcfce7; color: #15803d; cursor: help; }
.pes-sit.is-saldo { background: #e0f2fe; color: #0369a1; cursor: help; }
.pes-sit.is-nd    { background: var(--gray-100); color: var(--gray-500); }
.pes-falta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pes-falta-v { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; }
.pes-falta-v span { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.pes-falta-v b { font-size: 14px; font-weight: 800; color: var(--gray-800); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pes-falta-v.is-corte b { color: #b91c1c; }
@container pesroot (max-width: 820px) { .pes-falta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Complementos da falta que saíram com a origem */
.pes-filhos { display: flex; flex-direction: column; gap: 8px; margin-left: 4px; padding: 2px 0 0 14px; border-left: 2px dashed #fcd34d; }
.pes-filhos-tt { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #b45309; }
.pes-filhos-tt svg { width: 13px; height: 13px; }

/* Vazio, indisponível e esqueleto. Sem operação, o cartão padrão de estado vazio vai direto no painel, sem
   a seção "Linha do tempo" em volta (era cartão dentro de cartão, branco sobre quase branco), e ocupa o
   espaço abaixo do cabeçalho: o margin:auto do cartão o centra ali. O vazio dos filtros (.is-filtro)
   continua dentro da linha do tempo. */
.pes-vazio { padding: 22px 20px 26px; }
.pes-root > .pes-vazio { flex: 1 0 auto; padding: 24px 20px 4px; }
.pes-vazio.is-filtro { padding: 18px 16px 20px; }
.pes-sk { border-radius: 12px; background: linear-gradient(90deg, #e9f0f2 25%, #f5f9fa 50%, #e9f0f2 75%); background-size: 200% 100%; animation: pesSk 1.2s linear infinite; }
.pes-sk-head { flex-shrink: 0; height: 58px; border-radius: 14px 14px 0 0; }
.pes-sk-kpis { display: flex; gap: 12px; padding: 16px 20px; flex-shrink: 0; }
.pes-sk-kpi { flex: 1 1 0; height: 72px; }
.pes-sk-sec { flex-shrink: 0; height: 380px; margin: 0 20px; }
@keyframes pesSk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.poc-tip--pes { max-width: 330px; }

/* ══ Painel de Coleta: aba "Operações de pedidos" (lib/painel-oc-operacoes.js) ═════════════════════════
   O mesmo layout da aba de resets (.pes-*). Tipo da operação: saída para alteração (violeta), volta (ciano)
   e definitiva (vermelho). Efeitos: corte absorvido (âmbar), passagem entre caixas (azul) e separado
   (ardósia); verde continua só no que voltou ao estoque. */
.pes-root .is-saida { --tipo: #6d28d9; --tipo-bg: #f5f3ff; --tipo-bd: #ddd6fe; }
.pes-root .is-volta { --tipo: #0e7490; --tipo-bg: #ecfeff; --tipo-bd: #a5f3fc; }
.pes-root .is-def   { --tipo: #b91c1c; --tipo-bg: #fef2f2; --tipo-bd: #fecaca; }
.pop-kpi.is-corte, .pop-kpi.is-passa, .pop-kpi.is-sep { flex-grow: 1.3; }
.pop-kpi.is-corte .por-card-icon { background: #fffbeb; color: #b45309; }
.pop-kpi.is-passa .por-card-icon { background: #f0f9ff; color: #0369a1; }
.pop-kpi.is-sep   .por-card-icon { background: #f1f5f9; color: #475569; }
.pop-kpi.is-corte .por-card-val { color: #b45309; }
.pop-kpi.is-passa .por-card-val { color: #0369a1; }
.pop-kpi.is-sep   .por-card-val { color: #334155; }
.pop-chip.is-corte svg { color: #b45309; }
.pop-chip.is-passa svg { color: #0369a1; }
.pop-chip.is-sep svg   { color: #475569; }
.pop-blk.is-ped   .pes-blk-h { color: #003644; }
.pop-blk.is-corte .pes-blk-h { color: #b45309; }
.pop-blk.is-passa .pes-blk-h { color: #0369a1; }
.pop-blk.is-sep   .pes-blk-h { color: #475569; }
.pop-prod { display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.pop-prod b { margin-right: 3px; font-weight: 800; color: #003644; }
.pop-cli { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--gray-500); }
.pop-seta { width: 1%; padding-left: 0; padding-right: 0; color: var(--gray-400); }
.pop-seta svg { width: 14px; height: 14px; vertical-align: middle; }
.pop-falta small, .pop-quando small { display: block; font-size: 11px; color: var(--gray-500); }
.pop-muted { color: var(--gray-500); font-style: italic; }
.pop-sit { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pop-sit.is-sep { background: #f1f5f9; color: #334155; }
.pop-sit.is-dev { background: #ecfdf5; color: #047857; }
/* Unidades separadas agora: no topo, acima da linha do tempo, até terem destino */
.pop-sep {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; margin: 0 20px 16px; padding: 12px 14px 14px;
  background: #f8fafc; border: 1px solid #cbd5e1; border-left: 3px solid #475569; border-radius: 12px;
}
.pop-sep-head { display: flex; align-items: flex-start; gap: 10px; }
.pop-sep-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #e2e8f0; color: #334155; }
.pop-sep-ico svg { width: 17px; height: 17px; }
.pop-sep-tt h3 { margin: 0; font: 800 14px/1.25 var(--fdisp, 'Saira', 'Segoe UI', sans-serif); color: #1e293b; }
.pop-sep-tt p { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--gray-600); }
.pop-sep .pes-tab-wrap { background: #fff; }

/* Seção Pedidos retirados dos Detalhes: unidades separadas aguardando a volta de um pedido (Carregamento) */
.poc-ret-sep {
  display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 9px 12px;
  background: #f8fafc; border: 1px solid #cbd5e1; border-left: 3px solid #475569; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--gray-700);
}
.poc-ret-sep-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #e2e8f0; color: #334155; }
.poc-ret-sep-ico svg { width: 15px; height: 15px; }
.poc-ret-sep-txt { flex: 1; min-width: 0; }
.poc-ret-sep-txt b { color: #1e293b; }
.poc-ret-sep-ver {
  flex: none; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid #94a3b8; background: #fff;
  color: #334155; font: 600 13px var(--fbody); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.poc-ret-sep-ver:hover { background: #334155; border-color: #334155; color: #fff; }

/* Caixas dos pedidos nas mensagens da retirada e da volta (OCRetirada.movimentosHtml): passagem entre caixas e
   unidades separadas. Azul: a mercadoria muda de caixa, sem voltar à prateleira. O corte absorvido é uma nota
   neutra: nada a fazer na prateleira. */
.confirm-card:has(.ret-movs) { max-width: 520px; }
.ret-movs {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 10px 12px 11px;
  text-align: left; border-radius: 10px;
  background: #f0f9ff; border: 1px solid #bae6fd; border-left: 3px solid #0369a1;
}
.ret-mov-tt { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; line-height: 1.2; color: #075985; }
.ret-mov-tt svg { width: 16px; height: 16px; flex: none; }
.ret-mov-txt { font-size: 12px; line-height: 1.45; color: #0c4a6e; }
.ret-mov-lista {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  list-style: none; margin: 2px 0 0; padding: 0; max-height: 220px; overflow-y: auto; overscroll-behavior-y: contain;
  background: #fff; border: 1px solid #bae6fd; border-radius: 8px;
}
.ret-mov-lista li {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 10px; row-gap: 1px;
  padding: 6px 10px; border-bottom: 1px solid #e0f2fe;
}
.ret-mov-lista li:last-child { border-bottom: none; }
.ret-mov-lista .ret-est-qtd { grid-column: 1; grid-row: 1 / span 2; justify-self: start; color: #0369a1; }
.ret-mov-lista .ret-est-prod { grid-column: 2; grid-row: 1; }
.ret-mov-acao { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--gray-600); }
.ret-mov-acao b { color: #003644; }
.porl-estornos-fim .ret-movs { margin: 0 0 12px; }
.ret-corte {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 12px;
  text-align: left; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--gray-200);
  font-size: 12px; line-height: 1.45; color: var(--gray-700);
}
.ret-corte svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #0a4d5e; }

/* ── Pedido faturado na retirada e na volta (Painel de Execução O.C.) ───────────────────────────────
   Faturado sai só para alteração (cartão Definitiva desabilitado) e volta como faturado; a diferença a
   mais fica sem endereço na O.C., marcada no topo de Itens da Ordem com o botão de vincular o endereço. */
.porp-opc:disabled { opacity: .45; cursor: not-allowed; }
.porp-opc:disabled:hover { transform: none; box-shadow: none; border-color: var(--gray-200); }
.porp-fat-nota { margin-top: 8px; color: #92400e; }
.porv-fat {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a; color: #78350f;
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
}
.porv-fat-ic { flex: none; display: inline-flex; color: #d97706; margin-top: 1px; }
.porv-fat-ic svg { width: 17px; height: 17px; }
.porv-table--efeito th.is-sem { color: #c2410c; }
.porv-table--efeito td.is-sem.tem { background: rgba(194,65,12,.08); color: #c2410c; }
/* Item sem endereço: âmbar, filete à esquerda; a linha não expande */
#pocGridItens .por-table tbody tr.por-row.poc-pend-row td,
#pocGridItens .por-table tbody tr.por-row.poc-pend-row td:nth-child(-n+3) { background: #fffbeb; }
#pocGridItens .por-table tbody tr.por-row.poc-pend-row:hover td,
#pocGridItens .por-table tbody tr.por-row.poc-pend-row:hover td:nth-child(-n+3) { background: #fef3c7; }
#pocGridItens .por-table tbody tr.poc-pend-row td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.por-table .por-row.poc-pend-row { cursor: default; }
/* A coluna Status é estreita (112px): a marca quebra em duas linhas em vez de invadir Produto */
.poc-pend-badge { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; white-space: normal; text-align: center; line-height: 1.2; cursor: help; }
.poc-pend-aviso { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: #92400e; white-space: normal; cursor: help; }
.poc-pend-aviso svg { width: 12px; height: 12px; flex: none; margin-top: 2px; color: #d97706; }
.poc-pend-vinc {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; margin-top: 6px; padding: 0 12px; border-radius: 8px;
  border: 1px solid #003644; background: linear-gradient(135deg, #00465a, #003644); color: #fff;
  font: 700 12.5px var(--fbody); white-space: nowrap; cursor: pointer; transition: box-shadow .12s, transform .12s;
}
.poc-pend-vinc svg { width: 14px; height: 14px; flex: none; }
.poc-pend-vinc:hover:not(:disabled) { box-shadow: 0 0 0 3px rgba(0,54,68,.20); transform: translateY(-1px); }
.poc-pend-vinc:disabled { opacity: .45; cursor: not-allowed; }
.poc-pend-vinc:focus-visible { outline: 2px solid #003644; outline-offset: 2px; }
.poc-pend-cont { color: #b45309; font-weight: 700; }