/* 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; }

: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-400:      #ced4da;
  --gray-600:      #6c757d;
  --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: 12px; 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: 10px 20px;
  background: var(--green-btn);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  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: 8px 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  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; }

.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: 9px 12px;
  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: 12px; 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: 6000; 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; }
.confirm-sub { font-size: 12px; color: var(--gray-500, #94a3b8); margin: 8px 0 0; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.confirm-actions button { min-width: 120px; }
/* 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: documento "Ordem de Coleta" voando (sucesso) ──────────── */
.fly-doc { position: fixed; left: -280px; bottom: 14%; z-index: 7000; pointer-events: none; animation: fly-doc-move 1.9s cubic-bezier(.45,.05,.35,1) forwards; }
.fly-doc-paper {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  background: #fff; border-radius: 14px; border: 1px solid var(--gray-200);
  box-shadow: 0 20px 55px rgba(0,0,0,.32);
}
.fly-doc-ico { font-size: 34px; line-height: 1; }
.fly-doc-txt { display: flex; flex-direction: column; line-height: 1.25; }
.fly-doc-txt span { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--gray-600); text-transform: uppercase; }
.fly-doc-txt b { font-size: 16px; color: var(--green-dark); }
@keyframes fly-doc-move {
  0%   { transform: translate(0, 0) rotate(-12deg) scale(.85); opacity: 0; }
  14%  { opacity: 1; }
  52%  { transform: translate(48vw, -42vh) rotate(7deg) scale(1.06); opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate(112vw, -82vh) rotate(18deg) scale(.78); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fly-doc { animation-duration: .6s; }
}

.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: 9px 18px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-600);
  font-size: 14px;
  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: 12px; 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: 10px 14px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  transition: border-color .2s;
}
textarea:focus { outline: none; border-color: var(--green-accent); }

select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 14px;
  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: 12px; 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: 12px; 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: 12px; }
  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: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 13px 16px;
  border-radius: var(--radius); font-size: 14px; 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: 12px; color: var(--gray-700); flex: 1; min-width: 140px; }
.json-exec-user { font-size: 12px; 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: 12px; 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: 12px; 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 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:focus, .wms-field select:focus { outline: none; border-color: var(--green-accent); }
.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; }
.wms-subgrid { padding: 12px 16px 12px 48px; }
.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; }

.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); }
.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: 9px 22px; }

/* 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: 12px; 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: 12px; 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: 330px; 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; 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: 12px; color: var(--gray-600); line-height: 1.45; }
.oc-help-pop li b { color: var(--gray-800); }

/* Resetar layout */
.oc-reset { font-size: 12px; 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: 12px; 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: 12px; 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: 12px; 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; }
.oc-toggle { display: inline-flex; border: 1px solid var(--gray-400); border-radius: 8px; overflow: hidden; }
.oc-toggle button { border: none; background: var(--white); color: var(--gray-600); padding: 8px 16px; font-size: 13px; cursor: pointer; }
.oc-toggle button.active { background: var(--green-dark); color: #fff; }

/* 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 input { border: 1px solid var(--gray-400); border-radius: 8px; padding: 7px 11px; font-size: 13px; width: min(260px, 100%); max-width: 38vw; }
.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; }
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; }
.oc-cb-th, .oc-cb { width: 34px; text-align: center; }
.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: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.oc-rotas-l { font-size: 11px; color: var(--gray-600); font-weight: 600; }
.oc-rotas { display: flex; gap: 6px; flex-wrap: wrap; }
.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: 12px; }
.oc-prod-head { display: grid; grid-template-columns: 1fr 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(3) { text-align: right; }
.oc-prod-list { flex: 1; overflow-y: auto; max-height: 38dvh; }
.oc-prod { display: grid; grid-template-columns: 1fr 44px 64px; gap: 6px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--gray-100); }
.oc-prod-un { font-size: 12px; 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: 12px; font-size: 14px; }
.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: 12px; 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%; }
}

/* ── 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; }
/* Tipo de data: verde no lugar do #003644 */
.oc-toggle button.active { background: #2e9e5b; }

/* ── 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; }
/* coluna "Unid." centralizada com o cabeçalho */
.oc-prod-head span:nth-child(2) { 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; }
.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; }
table.ocup-ruas { width: 100%; border-collapse: collapse; font-size: 13px; }
.ocup-ruas th { position: sticky; top: 0; z-index: 1; background: #003644; color: #fff; font-size: 11px; font-weight: 600; text-align: left; padding: 9px 12px; white-space: nowrap; }
.ocup-ruas th:nth-child(2), .ocup-ruas th:nth-child(3), .ocup-ruas th:nth-child(4) { text-align: right; }
.ocup-ruas td { padding: 8px 12px; border-bottom: 1px solid var(--gray-100); }
.ocup-ruas tbody tr:hover td { background: var(--gray-50); }
.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; }
.ocup-ruas-empty { padding: 34px; text-align: center; color: var(--gray-600); font-size: 13px; }

/* ── Ocupação: cabeçalho do grid de ruas com cara de "coluna" ───── */
.ocup-ruas thead tr { box-shadow: inset 0 -2px 0 #003644; }
.ocup-ruas th {
  background: #eef3f5; color: #003644; font-weight: 700; letter-spacing: .2px;
  border-bottom: none; border-right: 1px solid rgba(0,54,68,.12);
}
.ocup-ruas th:last-child { border-right: none; }
.ocup-ruas th:hover { background: #e3edf0; }

/* ── 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; }
.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; }
.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: 9px 12px; 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); }
.ss-panel { position: fixed; z-index: 5000; 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: 12px; 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: 4000; 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: 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(960px, 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); }
@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: 11px 18px 11px 22px; background: linear-gradient(160deg, #14192E 0%, #1F2A44 60%, #2C2F6B 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); }

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

.cm-dep { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 14px 18px 6px; }
.cm-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 200px; }
.cm-dep label { font-size: 12px; 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: 9px 12px; 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); }

/* 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: 14px; padding: 10px 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: baseline; justify-content: space-between; gap: 8px; padding: 9px 13px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-size: 12px; font-weight: 700; color: var(--green-dark); text-transform: uppercase; letter-spacing: .5px; }
.cm-block-sub { font-size: 11px; font-weight: 600; color: var(--gray-600); text-transform: none; letter-spacing: 0; }
.cm-grid-wrap { overflow: auto; flex: 1; }

.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 12px; border-bottom: 1.5px solid var(--gray-200); }
.cm-grid td { padding: 8px 12px; 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; }
.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; }
.cm-hint { color: #2fa4a9; cursor: help; font-size: 11px; margin-left: 2px; }
.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; }

.cm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 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; }

/* ── Coleta modal: obrigatoriedade em evidência ──── */
.cm-dep select.cm-req-field { border-color: #d18f20 !important; background: #fffcf0 !important; }
.cm-dep select.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 ─────────────────── */
.cm-alloc-col { overflow: hidden; min-width: 0; }
/* 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; }
.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: 12px; 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: 12px; 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); color: var(--gray-400); cursor: not-allowed; border-color: var(--gray-200); }
.cm-cin-qty.over { border-color: #c0473b !important; background: #fff8f7 !important; }

/* ── 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 { 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: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 9px 18px; 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; }

/* 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: 12px; color: var(--gray-600); }

/* ações do Gerenciar / Picking */
.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: 12px; color: var(--gray-600); margin-right: auto; }
/* select de categoria por linha (Picking) */
.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); }
.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: 12px; 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, 280px) 6px 1fr; gap: 14px; }
.wiz-rail { display: flex; flex-direction: column; gap: 14px; 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: 22px 24px; }
.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: 7px 13px; border-radius: 999px; font-size: 13px; }
.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: 10px; font-weight: 600; font-size: 14px; padding: 11px 22px; 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: 10px; font-weight: 700; font-size: 14px; padding: 12px 26px; 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 13.5px var(--fbody); padding: 9px 20px; 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: 12px; font-weight: 600; color: var(--gray-600); margin-bottom: 7px; }
.wzfield label .req { color: #c0473b; margin-left: 2px; }
.wzfield .ctl { position: relative; }
.wzfield input, .wzfield select { width: 100%; font: 14px var(--fbody); padding: 11px 13px; border: 1px solid var(--gray-300); border-radius: 10px; background: var(--white); color: var(--gray-800); }
.wzfield select { appearance: none; cursor: pointer; padding-right: 36px; }
.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: 13px; 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: 10px; overflow: hidden; background: var(--white); }
.stepper-num input { border: 0; text-align: center; width: 70px; padding: 10px 4px; background: transparent; font: 14px var(--fbody); }
.stepper-num input:focus { outline: none; }
.stepper-num button { border: 0; width: 32px; background: var(--gray-100); color: var(--gray-600); font-size: 16px; 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: 10px; font: 700 13.5px var(--fbody); padding: 0 20px; height: 42px; 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: 10px 12px; }
.rb-table tbody td { padding: 10px 12px; border-top: 1px solid var(--gray-100); font-size: 13.5px; color: var(--gray-800); }
.rb-table tbody tr { transition: background .12s; animation: rowIn .2s var(--ease) both; }
.rb-table tbody tr:hover { background: rgba(47,164,169,.05); }
.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; }
.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; gap: 16px; }
.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: 12px; 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; }
.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: 12px; 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: 12px; 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; }
  .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); }

/* 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: 42px; padding: 0 18px; 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: 9px 12px; font-size: 13.5px; }
.wiz .stepper-num { border-color: var(--gray-400); }
.wiz .stepper-num input { padding: 9px 4px; font-size: 13.5px; }
.wiz .stepper-num button { width: 30px; }

/* 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: 40px; }
.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 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; }

/* finalização: grid também rola */
.wiz .preview-list .rb-table { max-height: 40dvh; }

/* ── 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: campos compactos, alinhados em uma só linha */
.wiz .rb-gen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.wiz .rb-gen .wzfield { width: 128px; flex: 0 0 auto; min-width: 0; }
.wiz .rb-gen .wzfield:first-child { width: 150px; }
.wiz .rb-gen .wzfield input, .wiz .rb-gen .stepper-num { width: 100%; }
.wiz .rb-gen .stepper-num input { min-width: 0; }
.wiz .rb-gen .btn-add { align-self: flex-end; }

/* ═══════════════════════════════════════════════════════════════
   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: 14px; overflow: hidden; padding: 14px 18px 14px; }

/* 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: 26px; color: #003644; margin: 6px 0 0; letter-spacing: -.01em; line-height: 1.1; }
.hub-desc { margin: 6px 0 0; font-size: 14px; color: var(--gray-600); max-width: 560px; line-height: 1.5; }

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

/* 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 2; }
.hub-wide { grid-column: span 6; grid-row: span 1; }
.hub-sm   { grid-column: span 3; grid-row: span 1; }

/* Light cards (Gerenciar, Picking, Auditoria) */
.hub-light { background: #fff; border: 1px solid var(--gray-200) !important; padding: 24px; 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: 52px; height: 52px; border-radius: 14px; 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: 26px; height: 26px; }
.hub-ct { margin-top: auto; }
.hub-light h3 { font-family: 'Saira', sans-serif; font-weight: 800; font-size: 19px; color: #003644; margin: 18px 0 0; letter-spacing: -.01em; }
/* hub-sm (Picking + Auditoria): layout horizontal — ícone à esq., texto à dir. */
.hub-sm.hub-light { flex-direction: row; align-items: center; gap: 16px; }
.hub-sm .hub-tile { flex-shrink: 0; width: 48px; height: 48px; }
.hub-sm .hub-ct { margin-top: 0; flex: 1; min-width: 0; }
.hub-sm.hub-light h3 { margin-top: 0; font-size: 17px; }
.hub-light p { margin: 7px 0 0; font-size: 13px; color: var(--gray-600); line-height: 1.5; }
.hub-go { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #064A5B; }
.hub-go svg { width: 16px; height: 16px; 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: 18px; align-items: center; height: 100%; }
.hub-wide-body { display: flex; flex-direction: column; }

/* Featured dark card (Criar Endereços) */
.hub-feat { background: linear-gradient(135deg, #00222C 0%, #003644 46%, #0C5E72 100%); color: #fff; padding: 20px 24px 22px; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: 0 24px 50px rgba(0,34,44,.34); min-height: 220px; }
.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: 11px; 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: 6px 12px; border-radius: 999px; position: relative; z-index: 1; }
.hub-badge svg { width: 13px; height: 13px; }

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

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

/* Chips de dimensões */
.hub-dims { display: flex; gap: 8px; margin-top: auto; position: relative; z-index: 1; flex-wrap: wrap; }
.hub-dims span { font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace; padding: 6px 12px; 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: 14px; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: #fff; color: #003644; font-family: 'Saira', sans-serif; font-weight: 700; font-size: 15px; padding: 13px 26px; 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); }
.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) {
  .hub-bento { grid-template-rows: auto auto auto; min-height: unset; }
  .hub-feat   { grid-column: span 12; grid-row: auto; min-height: 300px; }
  .hub-wide   { 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: 12px; 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; }
.filtros-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: nowrap; }
.filiais-field-wrap { display: flex; flex-direction: column; gap: 4px; flex: 0 0 240px; }
.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: 6px 9px; border: 1.5px solid var(--gray-200); border-radius: 8px; background: #fff; min-height: 36px; max-height: 62px; overflow-y: auto; align-items: flex-start; align-content: flex-start; cursor: default; }
.etq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--tl-100); color: var(--tl-dd); font-size: 11.5px; font-weight: 600; font-family: var(--fmono); }
.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 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; }
.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: 11px; background: var(--tl-dd); color: #fff; border: none; border-radius: 10px; font-size: 14px; 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: 12px; 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 .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: 12px; 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: 12px; 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-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; 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; }
.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: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 12px; 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 ────────────────────────────────────── */
.reimp-body { display: flex; flex-direction: column; height: 100%; gap: 10px; }
.reimp-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; flex-shrink: 0; padding: 12px 16px; background: var(--gray-050); border: 1px solid var(--gray-200); border-radius: 10px; }
.reimp-field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.reimp-label { font-size: 11px; font-weight: 700; color: var(--tl-dd); letter-spacing: .02em; text-transform: uppercase; margin-bottom: 2px; }
.reimp-sel-info, .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: 12px; 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: var(--grad-navy); 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: 12px; border-radius: 5px; min-width: 0; }
.etq-input-date { width: 130px; 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: 12px; display: block; }
.etq-loading-sm { padding: 12px; text-align: center; color: var(--gray-500); font-size: 12px; }
.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: 12px; 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: 12px; 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: 12px; line-height: 1.3; }
.etq-mprod-qtd { font-size: 12px; 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: 12px; 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: 12px; display: flex; align-items: center; gap: 6px; }
.etq-mvol-qtd { font-weight: 700; color: #0a4d5e; font-size: 12px; 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: 12px; }
.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: 12px; 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,
.wiz.wiz-maximized .reimp-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 .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: 12px; }
.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; }
.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; }
  .reimp-field { 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;
  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: 14px; color: var(--cm-fg);
}

/* 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: 8px; }
.cm-ovl.is-max .cm-modal { width: 100%; height: calc(100vh - 16px); max-height: calc(100vh - 16px); border-radius: 8px; }
.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: 12px; font-weight: 700; color: #003644; white-space: nowrap; }
.cm-pqb { font-family: "JetBrains Mono", monospace; font-size: 12px; 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: 12px; 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: 12px; }
.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: 13.5px; font-weight: 600; padding: 9px 16px;
  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: 12px; color: #9A9A9A; line-height: 1.5;
}

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