/* ==========================================================================
   Classical Press — Fulfillment Hub
   Folha de estilos principal
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis & Tema Classical Press
   -------------------------------------------------------------------------- */
:root {
  --ink:        #152b3b;
  --muted:      #6f7d88;
  --line:       #d9dfe4;
  --bg:         #172c4d;
  --green:      #234269;
  --green2:     #172c4d;
  --soft:       #e5edf3;
  --red:        #a63b3b;
  --redsoft:    #fff0f0;
  --amber:      #9b6b2f;
  --ambersoft:  #f8eedc;
  --gold:       #c9a063;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .42; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
header {
  height: 82px;
  background: var(--green2);
  border-bottom: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 5px 18px rgba(6, 27, 45, .2);
}

.brand { display: flex; align-items: center; gap: 18px; }
.brand-logo { height: 52px; width: auto; object-fit: contain; display: block; filter: brightness(0) invert(1); }
.brand-divider { width: 1px; height: 38px; background: rgba(255, 255, 255, .22); }

.brand div  { display: grid; }
.brand strong {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
}
.brand small {
  font-size: 9px;
  color: rgba(255, 255, 255, .66);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.header-actions { display: flex; gap: 8px; align-items: center; }

.connection {
  font-size: 10px;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: 8px;
}
.connection::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  margin-right: 7px;
  box-shadow: 0 0 0 4px rgba(201, 160, 99, .14);
}

.header-actions #btnImprimirLoteTopo { display: none; }

/* --------------------------------------------------------------------------
   4. Botões globais
   -------------------------------------------------------------------------- */
.ghost {
  border: 1px solid var(--line);
  background: #fff;
  color: #48544d;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ghost:hover { background: #f7f9f8; }

.header-actions .ghost {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.header-actions .ghost:hover { background: rgba(255, 255, 255, .14); }

.primary {
  border: 0;
  background: var(--green);
  color: #fff;
  border-radius: 6px;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.primary:hover { background: var(--green2); }

.admin-action {
  border: 1px solid #c97b1a;
  background: #fff8ee;
  color: #8a5100;
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.admin-action:hover:not(:disabled) { background: #ffefd4; border-color: #a3630f; }
.admin-action:disabled { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   5. Layout principal
   -------------------------------------------------------------------------- */
main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 22px 48px;
}

/* --------------------------------------------------------------------------
   6. Tabs de navegação
   -------------------------------------------------------------------------- */
.workspace-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding: 5px;
  background: #e5e9ec;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.workspace-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.workspace-tab:hover { background: rgba(255, 255, 255, .6); color: var(--green); }
.workspace-tab.active {
  background: #fff;
  color: var(--green);
  box-shadow: 0 2px 10px rgba(6, 27, 45, .09);
}

.tab-step {
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
  color: var(--green);
  letter-spacing: -.04em;
}
.tab-label { font-weight: 850; }
.tab-count {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--soft);
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  color: var(--green);
}
.workspace-tab.active .tab-count { background: var(--green); color: #fff; }

/* Visibilidade por aba ativa */
[data-tab-section]                               { display: none; }
body.tab-conferencia [data-tab-section="conferencia"],
body.tab-etiquetas   [data-tab-section="etiquetas"],
body.tab-pedidos     [data-tab-section="pedidos"],
body.tab-devolucoes  [data-tab-section="devolucoes"] { display: block; }

/* Aba DEVOLUÇÕES — fundo azul fixo, texto branco, fonte destacada */
.workspace-tab--devolucoes {
  background: var(--green);
  color: #fff !important;
}
.workspace-tab--devolucoes:hover {
  background: var(--green2);
  color: #fff !important;
}
.workspace-tab--devolucoes.active {
  background: var(--green2);
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(6, 27, 45, .18);
}
.tab-label-devolucoes {
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tab-icon-devolucoes {
  font-size: 17px;
  line-height: 1;
}
.fiscal-head--devolucoes {
  background: linear-gradient(90deg, var(--green2) 0%, #2a3d5c 100%);
  border-bottom-color: var(--gold);
}

/* --------------------------------------------------------------------------
   7. Search Card
   -------------------------------------------------------------------------- */
.search-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 7px 24px rgba(21, 51, 55, .06);
}

.search-card label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 750;
  margin-bottom: 8px;
}

.search-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 9px;
}
.search-row.refresh-only { display: flex; }
.search-row.refresh-only .primary {
  width: 100%;
  min-height: 54px;
  font-size: 15px;
  font-weight: 800;
  padding: 15px 24px;
}

.field {
  width: 100%;
  border: 1px solid #c8d2cc;
  background: #fbfcfb;
  border-radius: 6px;
  padding: 12px 13px;
  outline: none;
}
.field:focus {
  background: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(23, 63, 68, .12);
}

.hint { margin: 9px 0 0; font-size: 10px; color: var(--muted); }

/* --------------------------------------------------------------------------
   8. Estado vazio
   -------------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: 90px 20px;
  color: rgba(255, 255, 255, .55);
}
.empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .7);
  display: grid;
  place-items: center;
  font-size: 30px;
}
.empty h2 {
  font-size: 18px;
  color: rgba(255, 255, 255, .9);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 7px;
}
.empty p { font-size: 12px; margin: 0; }

/* --------------------------------------------------------------------------
   9. Cabeçalho do pedido
   -------------------------------------------------------------------------- */
.order { margin-top: 24px; }

.order-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
.eyebrow { font-size: 9px; color: var(--gold); font-weight: 800; letter-spacing: .14em; }
.order-head h1 {
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -.035em;
  margin: 4px 0 2px;
  color: #fff;
}
.order-head p { font-size: 11px; color: rgba(255, 255, 255, .6); margin: 0; }

.badge {
  font-size: 9px;
  font-weight: 750;
  padding: 8px 11px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--ambersoft);
  color: var(--amber);
}
.badge.done { background: var(--soft); color: var(--green); }

/* --------------------------------------------------------------------------
   10. Metadados do pedido
   -------------------------------------------------------------------------- */
.meta {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr .8fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-top: 20px;
}
.meta > div {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  display: grid;
  gap: 3px;
}
.meta > div:last-child { border: 0; }
.meta span { font-size: 9px; color: var(--amber); text-transform: uppercase; letter-spacing: .08em; }
.meta strong { font-size: 12px; }
.meta small { font-size: 10px; color: var(--muted); }

/* --------------------------------------------------------------------------
   11. Scanner
   -------------------------------------------------------------------------- */
.scanner {
  margin-top: 16px;
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 9px;
  padding: 17px;
  display: grid;
  grid-template-columns: auto .9fr 1.3fr;
  gap: 13px;
  align-items: center;
  box-shadow: 0 6px 24px rgba(6, 27, 45, .08);
}

.scan-icon {
  width: 44px;
  height: 44px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
}
.scan-copy { display: grid; }
.scan-copy strong { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.scan-copy small { font-size: 10px; color: var(--muted); margin-top: 4px; }
.scan-form { display: flex; gap: 8px; }
.scan-form button { min-width: 100px; }

/* --------------------------------------------------------------------------
   12. Progresso
   -------------------------------------------------------------------------- */
.progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin: 22px 0 8px;
}
.progress-head span { color: var(--muted); }
.bar { height: 6px; background: #dce4df; border-radius: 99px; overflow: hidden; }
.bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  border-radius: 99px;
  transition: width .2s;
}

/* --------------------------------------------------------------------------
   13. Lista de itens
   -------------------------------------------------------------------------- */
.items {
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}

.thead, .item {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) minmax(135px, .7fr) 130px 70px;
  gap: 14px;
  align-items: center;
}
.thead {
  padding: 10px 16px;
  background: var(--green);
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 750;
}

.item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.item:last-child { border: 0; }
.item.checked { background: #f3f8f5; }

.product { display: flex; align-items: center; gap: 11px; min-width: 0; }
.book {
  width: 36px;
  height: 43px;
  border-radius: 4px;
  background: var(--ambersoft);
  border-left: 3px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--amber);
}
.product div { display: grid; min-width: 0; }
.product strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product small { font-size: 9px; color: var(--muted); margin-top: 4px; }
.item code { font-size: 10px; color: #47534c; }

.qty { display: flex; align-items: center; gap: 5px; }
.qty b {
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #edf1ee;
  border-radius: 5px;
  font-size: 12px;
}
.checked .qty b { background: var(--soft); color: var(--green); }
.qty span { font-size: 11px; color: var(--muted); }
.qty i { font-style: normal; color: var(--green); font-weight: 900; }

.undo {
  border: 0;
  background: transparent;
  color: #77837c;
  font-size: 9px;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14. Área de conclusão
   -------------------------------------------------------------------------- */
.finish {
  margin-top: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 15px 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.finish > div:first-child { display: grid; }
.finish strong { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.finish small { font-size: 10px; color: var(--muted); margin-top: 3px; }
.finish .primary { height: 42px; }
.finish-actions { display: flex !important; gap: 8px; align-items: center; }

/* --------------------------------------------------------------------------
   15. Batch strip (lote de DANFEs)
   -------------------------------------------------------------------------- */
.batch-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
  padding: 14px 17px;
  background: var(--green2);
  color: #fff;
  border-radius: 9px;
  border-bottom: 3px solid var(--gold);
}
.batch-strip div { display: grid; gap: 3px; }
.batch-strip strong { font-size: 12px; }
.batch-strip small { font-size: 9px; color: rgba(255, 255, 255, .68); }
.batch-strip .ghost { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; }

/* --------------------------------------------------------------------------
   16. Toast de notificação
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  padding: 13px 16px;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 750;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
  animation: toast-in .18s ease-out;
  z-index: 30;
}
.toast.ok    { background: var(--green2); }
.toast.error { background: var(--red); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(7px); }
}

/* --------------------------------------------------------------------------
   17. Modais
   -------------------------------------------------------------------------- */
dialog {
  border: 0;
  border-top: 4px solid var(--gold);
  border-radius: 10px;
  padding: 0;
  width: min(610px, calc(100vw - 28px));
  box-shadow: 0 20px 70px rgba(0, 0, 0, .25);
}
dialog::backdrop { background: rgba(6, 27, 45, .65); }

.modal-head {
  padding: 19px 21px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.close { border: 0; background: transparent; font-size: 21px; color: var(--muted); }

.modal-body { padding: 20px; display: grid; gap: 15px; }
.modal-body label {
  display: grid;
  gap: 6px;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.modal-body label small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.modal-body textarea { min-height: 100px; resize: vertical; }

.modal-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-actions .primary { height: 38px; }

/* --------------------------------------------------------------------------
   18. Fila de conferência (Queue Panel)
   -------------------------------------------------------------------------- */
.queue-panel {
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 7px 24px rgba(21, 51, 55, .05);
}

.queue-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  background: #f8fafb;
  border-bottom: 1px solid var(--line);
}
.queue-head div { display: grid; gap: 2px; }
.queue-head strong { font-size: 12px; }
.queue-head small { font-size: 9px; color: var(--muted); }

.queue-list { display: grid; grid-template-columns: repeat(3, 1fr); }

.queue-card {
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 13px 15px;
  text-align: left;
  display: grid;
  gap: 5px;
  color: var(--ink);
}
.queue-card:last-child { border-right: 0; }
.queue-card:hover, .queue-card.active { background: #f4f7f9; }
.queue-card.active { box-shadow: inset 0 3px var(--gold); }

.queue-card span  { font-size: 9px; color: var(--muted); }
.queue-card strong { font-size: 12px; }
.queue-card em {
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--amber);
}
.queue-card.done   em { color: #18764a; }
.queue-card.fiscal em { color: #1e385b; }

/* --------------------------------------------------------------------------
   19. Painel fiscal (Invoices / DANFEs)
   -------------------------------------------------------------------------- */
.fiscal-panel {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 7px 24px rgba(21, 51, 55, .05);
}

.fiscal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--green2);
  color: #fff;
  border-bottom: 3px solid var(--gold);
}
.fiscal-head > div:first-child { display: grid; gap: 3px; }
.fiscal-head strong { font-size: 13px; }
.fiscal-head small { font-size: 9px; color: rgba(255, 255, 255, .68); }

.fiscal-actions { display: flex; gap: 8px; }
.fiscal-actions .ghost {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.fiscal-body { padding: 15px; }

.fiscal-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fiscal-tools label { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 750; }
.fiscal-summary { font-size: 10px; color: var(--muted); }

/* Linhas de invoice / nota */
.invoice-list { display: grid; gap: 8px; }

.invoice-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fbfcfd;
}
.invoice-row:hover { border-color: #aab7c1; }
.invoice-row input { width: 17px; height: 17px; accent-color: var(--green); }

.invoice-main { display: grid; gap: 3px; }
.invoice-main strong { font-size: 11px; }
.invoice-main small { font-size: 9px; color: var(--muted); }
.invoice-value  { font-size: 11px; font-weight: 800; }
.invoice-status {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #18764a;
  background: #e9f5ee;
  padding: 5px 7px;
  border-radius: 4px;
}
.invoice-status--impressa {
  color: #5a6a7a;
  background: #e8ecf0;
}
.invoice-row--impressa {
  background: #f4f6f8;
  border-color: #c8d0d8;
  opacity: .82;
}

.fiscal-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 11px; }

/* Invoices pendentes (aguardando documento fiscal) */
.pending-invoice-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}
.pending-invoice-row:hover { border-color: #aab7c1; }

.pending-invoice-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  background: var(--green);
  color: #fff;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pending-invoice-action:hover { background: var(--green2); }
.pending-invoice-status {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--ambersoft);
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   20. Painel de pedidos para impressão
   -------------------------------------------------------------------------- */
.orders-panel { margin-top: 0; }
.order-print-list { display: grid; gap: 8px; }

.order-print-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}
.order-print-row:hover { border-color: #aab7c1; }
.order-print-row input { width: 17px; height: 17px; accent-color: var(--green); }
.order-print-row--impresso {
  background: #f4f6f8;
  border-color: #c8d0d8;
  opacity: .82;
}

.order-print-status {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #18764a;
  background: #e9f5ee;
  padding: 5px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.order-print-status--impresso {
  color: #5a6a7a;
  background: #e8ecf0;
}

.order-print-main { display: grid; gap: 3px; }
.order-print-main strong { font-size: 14px; font-weight: 700; color: #0d1f2e; }
.order-print-main small  { font-size: 10px; color: var(--muted); }
.order-print-units, .order-print-total { font-size: 10px; font-weight: 800; white-space: nowrap; }
.order-print-empty { padding: 40px; text-align: center; color: rgba(255, 255, 255, .55); font-size: 11px; }

/* --------------------------------------------------------------------------
   21. Status DANFE (cabeçalho)
   -------------------------------------------------------------------------- */
.danfe-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: rgba(255, 255, 255, .72);
  margin-right: 4px;
}
.danfe-status i { width: 7px; height: 7px; border-radius: 50%; background: #8795a0; }
.danfe-status.ready i { background: #d5ad70; box-shadow: 0 0 0 4px rgba(213, 173, 112, .14); }

/* --------------------------------------------------------------------------
   22. Drop de XML
   -------------------------------------------------------------------------- */
.xml-drop {
  border: 1px dashed #aebbc5;
  background: #f7f9fa;
  border-radius: 8px;
  padding: 18px;
  display: grid;
  gap: 8px;
}
.xml-drop strong { font-size: 12px; }
.xml-drop small  { font-size: 10px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   23. DANFE simplificado — template de impressão térmica 4 × 6 pol.
   -------------------------------------------------------------------------- */
#danfePrint {
  display: none;
  width: 4in;
  height: 6in;
  padding: .08in;
  background: #fff;
  color: #101820;
  font-family: Arial, sans-serif;
  font-size: 7pt;
}

.df-shell {
  width: 100%;
  height: 100%;
  border: 1px solid #1b252c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.df-head {
  height: 12mm;
  min-height: 12mm;
  padding: 1.1mm 1.8mm;
  background: #f1f3f4;
  border-bottom: 1px solid #1b252c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2mm;
  overflow: hidden;
}
.df-logo {
  width: 35mm;
  height: 12mm;
  max-width: 35mm;
  max-height: 12mm;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 35mm;
}
.df-heading    { text-align: right; }
.df-title      { font-size: 10pt; font-weight: 900; letter-spacing: -.25px; }
.df-subtitle   { font-size: 4.8pt; font-weight: 700; color: #47525a; margin-top: .3mm; letter-spacing: .15px; }

.df-barcode    { padding: .7mm 1.6mm .5mm; border-bottom: 1px solid #1b252c; }
.df-barcode svg { display: block; width: 100%; height: 10mm; }
.df-key {
  text-align: center;
  font-family: monospace;
  font-size: 6.3pt;
  font-weight: 700;
  letter-spacing: .08px;
  margin-top: .2mm;
}

.df-grid2  { display: grid; grid-template-columns: 1fr 1fr; }
.df-grid3  { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.df-cell   { padding: .75mm 1.2mm; border-bottom: 1px solid #1b252c; }
.df-br     { border-right: 1px solid #1b252c; }
.df-label  { display: block; font-size: 4.8pt; font-weight: 800; letter-spacing: .2px; color: #45515a; margin-bottom: .15mm; }
.df-big    { font-size: 8.3pt; font-weight: 900; }
.df-section {
  font-size: 5pt;
  font-weight: 900;
  letter-spacing: .55px;
  background: #edf0f2;
  padding: .55mm 1.2mm;
  border-bottom: 1px solid #1b252c;
}
.df-address  { line-height: 1.14; }
.df-clip     { white-space: normal; overflow-wrap: anywhere; }
.df-additional { font-size: 4.2pt; line-height: 1.05; padding: .45mm 1.2mm; }

.df-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 10mm;
  padding: 1.3mm 1.5mm;
  background: #fff;
  color: #101820;
  border-top: 2px solid #101820;
  border-bottom: 1px solid #101820;
  margin-top: auto;
  flex: 0 0 auto;
}
.df-total .df-label { color: #101820; margin: 0; font-weight: 900; }
.df-total strong    { font-size: 13pt; color: #000; font-weight: 900; }
.df-footer          { text-align: center; font-size: 4.8pt; padding: .6mm; color: #46515a; flex: 0 0 auto; }

/* Impressão em lote */
#batchPrint    { display: none; }
#ordersPrint   { display: none; }

/* --------------------------------------------------------------------------
   24. DANFE A4 — Modelo 55 (gerado dinamicamente via JS)
   -------------------------------------------------------------------------- */
#danfePrintA4  { display: none; }
#batchPrintA4  { display: none; }

.danfe-page-a4 {
  page: danfe-a4;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  break-after: page;
  page-break-after: always;
}
.danfe-page-a4:last-child { break-after: auto; page-break-after: auto; }

/* Shell principal */
.da4-shell {
  width: 100%;
  border: 1px solid #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
  color: #000;
  box-sizing: border-box;
  table-layout: fixed;
}

/* ---- Cabeçalho (3 colunas: emitente | título | NF número) ---- */
.da4-header {
  display: flex;
  border-bottom: 1px solid #000;
}
.da4-emit-bloco {
  flex: 1;
  padding: 2.5mm 3mm;
  border-right: 1px solid #000;
}
.da4-logo { height: 13mm; width: auto; display: block; margin-bottom: 1.5mm; object-fit: contain; }
.da4-emit-nome { font-size: 8.5pt; font-weight: 700; margin-bottom: 1mm; }
.da4-emit-info { font-size: 6.5pt; line-height: 1.35; color: #222; }

.da4-titulo-bloco {
  width: 52mm;
  padding: 2.5mm 3mm;
  text-align: center;
  border-right: 1px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2mm;
}
.da4-titulo-txt { font-size: 17pt; font-weight: 900; letter-spacing: -1px; }
.da4-titulo-sub { font-size: 6pt; line-height: 1.35; }
.da4-titulo-mod { font-size: 6pt; color: #444; }
.da4-tpnf { display: flex; align-items: center; gap: 1.5mm; margin-top: 1mm; font-size: 6pt; }
.da4-tpnf-num {
  width: 5.5mm; height: 5.5mm;
  border: 1px solid #000;
  border-radius: 1mm;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 7.5pt; font-weight: 700;
}
.da4-tpnf-on { background: #000; color: #fff; }

.da4-nf-bloco {
  width: 62mm;
  padding: 2.5mm 3mm;
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
}
.da4-nf-serie-data {
  display: flex;
  gap: 3mm;
}
/* Zona de silêncio obrigatória ao redor do código de barras (MOC Anexo II) */
.da4-barcode-wrap {
  margin-top: 2mm;
  padding: 2mm 0;   /* margens de silêncio vertical */
  background: #fff;
}

/* ---- Células genéricas ---- */
.da4-campo { display: flex; flex-direction: column; }
.da4-campo-label {
  font-size: 5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #555;
  margin-bottom: .4mm;
  display: block;
}
.da4-campo-big { font-size: 10.5pt; font-weight: 900; }
.da4-campo-r { text-align: right; }
.da4-campo-total { font-size: 9pt; font-weight: 900; }

/* ---- Chave de acesso ---- */
.da4-chave-bloco {
  border-bottom: 1px solid #000;
  padding: 1.5mm 3mm;
  text-align: center;
}
.da4-chave-num { font-family: monospace; font-size: 7pt; font-weight: 700; letter-spacing: .8px; margin: .8mm 0; }
/* Código de barras Code 128 — dimensões conforme MOC Anexo II */
.da4-barcode-svg { display: block; width: 100%; height: 17mm; }
.da4-consulta { font-size: 5pt; color: #555; margin-top: 1mm; }

/* ---- Labels de seção ---- */
.da4-section-label {
  background: #e8e8e8;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: .8mm 3mm;
  font-size: 5.5pt;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ---- Linhas de campos ---- */
.da4-row-grid {
  display: flex;
  border-bottom: 1px solid #000;
}
.da4-cell {
  padding: 1mm 3mm 1.5mm;
  min-width: 0;
}
.da4-grow { flex: 1; }
.da4-br   { border-right: 1px solid #000; }

/* ---- Tabela de itens ---- */
.da4-table-wrap { overflow: hidden; border-bottom: 1px solid #000; }
.da4-itens-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 6.5pt;
}
.da4-itens-table th {
  background: #f0f0f0;
  border-bottom: 1px solid #000;
  border-right: 1px solid #ccc;
  padding: .8mm 1.5mm;
  text-align: left;
  font-size: 5pt;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.da4-itens-table th:last-child { border-right: none; }
.da4-itens-table td {
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: .8mm 1.5mm;
  vertical-align: top;
}
.da4-itens-table td:last-child { border-right: none; }
.da4-itens-table tr:last-child td { border-bottom: none; }
.da4-td-desc { min-width: 50mm; }
.da4-td-r { text-align: right; white-space: nowrap; }

/* ---- Informações adicionais ---- */
.da4-adicional {
  padding: 1.5mm 3mm;
  font-size: 6.5pt;
  line-height: 1.4;
  min-height: 10mm;
}

.danfe-page {
  page: label;
  width: 4in;
  height: 6in;
  padding: .08in;
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
  break-after: page;
  page-break-after: always;
  break-inside: avoid;
  page-break-inside: avoid;
}
.danfe-page:last-child { break-after: auto; page-break-after: auto; }
.danfe-page .df-shell  { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   24. Folha de pedido para impressão A4
   -------------------------------------------------------------------------- */
.order-sheet {
  page: order-sheet;
  width: auto;
  min-height: 0;
  padding: 0;
  background: #fff;
  color: #111;
  font-family: Arial, sans-serif;
  break-after: page;
  page-break-after: always;
  break-inside: avoid;
  page-break-inside: avoid;
}
.order-sheet:last-child { break-after: auto; page-break-after: auto; }

.op-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12mm;
  padding-bottom: 6mm;
  border-bottom: 2px solid #1e385b;
}
.op-brand { display: flex; align-items: center; }
.op-logo  { height: 18mm; width: auto; object-fit: contain; object-position: left center; }
.op-doc-title {
  text-align: center;
  font-size: 8.5pt;
  font-weight: 700;
  color: #56636c;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 2.5mm 0 4mm;
  border-bottom: 1px solid #c8d0d8;
  margin-bottom: 4mm;
}
.op-number { text-align: right; }
.op-number span   { display: block; font-size: 8pt; font-weight: 700; color: #65727a; text-transform: uppercase; }
.op-number strong { display: block; font-size: 22pt; color: #1e385b; }

.op-meta { display: block; margin-top: 6mm; }
.op-box  { border: 1px solid #aeb8bf; border-radius: 2mm; padding: 4mm; min-height: 0; }
.op-box h3 { margin: 0 0 2mm; font-size: 8pt; color: #6b747b; text-transform: uppercase; letter-spacing: .5px; }
.op-box strong { font-size: 14pt; font-weight: 800; }
.op-box p { margin: 1.5mm 0 0; font-size: 9pt; line-height: 1.35; }

.op-table { width: 100%; border-collapse: collapse; margin-top: 6mm; font-size: 8.5pt; }
.op-table th {
  background: #1e385b;
  color: #fff;
  text-align: left;
  padding: 2.5mm 2mm;
  text-transform: uppercase;
  font-size: 7.5pt;
}
.op-table td { border: 1px solid #c4ccd1; padding: 2.7mm 2mm; vertical-align: top; }
.op-table .op-num    { text-align: right; white-space: nowrap; }
.op-table .op-center { text-align: center; }

.op-summary {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: end;
  gap: 10mm;
  margin-top: 5mm;
  padding: 4mm;
  background: #eef2f4;
  border-left: 4px solid #c9a063;
}
.op-summary div      { display: grid; gap: 1mm; text-align: right; }
.op-summary span     { font-size: 7.5pt; text-transform: uppercase; color: #66727a; }
.op-summary strong   { font-size: 11pt; }
.op-summary .op-discount strong { color: #18764a; }

.op-check {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6mm;
  margin-top: 12mm;
}
.op-sign { border-top: 1px solid #8b969d; padding-top: 2mm; font-size: 8pt; text-align: center; color: #59666e; }

/* Código de barras no cabeçalho (topo direito) */
.op-bc {
  display: block;
  margin-top: 3mm;
  max-width: 52mm;
  height: auto;
}

/* QR code na parte inferior (rodapé esquerdo) — distante do barcode */
.op-qr-section {
  margin-top: 6mm;
  display: flex;
  justify-content: flex-start;
}
.op-qr-inner {
  display: flex;
  align-items: center;
  gap: 4mm;
  border: 1px dashed #aeb8bf;
  border-radius: 2mm;
  padding: 3mm 4mm;
}
.op-qr-box img,
.op-qr-box canvas {
  display: block;
  width: 24mm;
  height: 24mm;
}
.op-qr-label {
  display: flex;
  flex-direction: column;
  gap: 1mm;
}
.op-qr-label strong {
  font-size: 8pt;
  color: #1e385b;
}
.op-qr-label span {
  font-size: 7.5pt;
  color: #56636c;
}

/* --------------------------------------------------------------------------
   25. Utilitários
   -------------------------------------------------------------------------- */
.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   26. Responsividade
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .queue-list { grid-template-columns: 1fr; }
  .queue-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .queue-card:last-child { border-bottom: 0; }
  .danfe-status { display: none; }
  .fiscal-head, .fiscal-tools { align-items: stretch; flex-direction: column; }
  .invoice-row { grid-template-columns: auto 1fr; }
  .invoice-value, .invoice-status { grid-column: 2; }
  .fiscal-actions { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  header { padding: 0 14px; }
  .connection { display: none; }
  main { padding: 20px 13px; }
  .search-row { grid-template-columns: 1fr auto; }
  .search-row .ghost { grid-column: 1 / -1; }
  .meta { grid-template-columns: 1fr; }
  .meta > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .scanner { grid-template-columns: auto 1fr; }
  .scan-form { grid-column: 1 / -1; }
  .thead { display: none; }
  .item { grid-template-columns: 1fr auto; }
  .item code { grid-column: 1; }
  .qty { grid-column: 2; grid-row: 1; }
  .finish { align-items: stretch; flex-direction: column; }
}

@media (max-width: 520px) {
  .workspace-tabs { flex-direction: column; }
  .workspace-tab { justify-content: flex-start; }
  .header-actions #btnImprimirLoteTopo { display: none; }
}

@media (max-width: 480px) {
  .brand small { display: none; }
  .brand-divider { display: none; }
  .brand-logo { height: 44px; width: auto; }
  .header-actions > .ghost:first-of-type { display: none; }
  .search-row { grid-template-columns: 1fr; }
  .search-row > * { min-height: 43px; }
  .scanner { grid-template-columns: 1fr; }
  .scan-icon { display: none; }
  .scan-form { flex-direction: column; }
  .scan-form button { height: 42px; }
  .order-head { align-items: center; }
  .item { padding: 13px 12px; }
  .book { display: none; }
}

/* --------------------------------------------------------------------------
   27. Regras de impressão
   -------------------------------------------------------------------------- */

/* @page deve ficar no nível raiz — dentro de @media print é ignorado
   pela maioria dos navegadores (Chrome, Edge, Firefox). */
@page           { size: 4in 6in; margin: 0; }
@page label     { size: 4in 6in; margin: 0; }
@page order-sheet { size: A4 portrait; margin: 10mm 12mm; }
@page danfe-a4    { size: A4 portrait; margin: 10mm 12mm; }

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body.print-single,
  body.print-batch { width: 4in !important; }

  /* Oculta tudo por padrão — cada modo de impressão reativa só o que precisa */
  body.print-single *,
  body.print-batch * { visibility: hidden !important; }

  /* Impressão de DANFE individual */
  body.print-single #danfePrint,
  body.print-single #danfePrint * { visibility: visible !important; }
  body.print-single #danfePrint {
    display: block !important;
    position: fixed;
    left: 0; top: 0;
    width: 4in; height: 6in;
    padding: .08in;
    margin: 0;
    box-sizing: border-box;
  }

  /* Impressão de lote de DANFEs */
  body.print-batch #batchPrint,
  body.print-batch #batchPrint * { visibility: visible !important; }

  /* Oculta completamente todos os elementos fora do lote */
  body.print-batch > header,
  body.print-batch > main,
  body.print-batch > dialog,
  body.print-batch > #toast,
  body.print-batch > #danfePrint,
  body.print-batch > #ordersPrint { display: none !important; }

  body.print-batch #batchPrint {
    display: block !important;
    position: static !important;
    width: 4in !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.print-batch #batchPrint .danfe-page {
    position: relative !important;
    width: 4in !important;
    height: 6in !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    break-after: page !important;
    page-break-after: always !important;
  }
  body.print-batch #batchPrint .danfe-page:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
  }

/* Impressão de pedidos A4 */
  body.print-orders > header,
  body.print-orders > main,
  body.print-orders > dialog,
  body.print-orders > #toast,
  body.print-orders > #danfePrint,
  body.print-orders > #batchPrint { display: none !important; }

  body.print-orders #ordersPrint,
  body.print-orders #ordersPrint * { visibility: visible !important; }
  body.print-orders #ordersPrint {
    display: block !important;
    position: static;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Impressão de lote de DANFEs A4 */
  body.print-batch-a4 > header,
  body.print-batch-a4 > main,
  body.print-batch-a4 > dialog,
  body.print-batch-a4 > #toast,
  body.print-batch-a4 > #danfePrint,
  body.print-batch-a4 > #danfePrintA4,
  body.print-batch-a4 > #batchPrint,
  body.print-batch-a4 > #ordersPrint { display: none !important; }

  body.print-batch-a4 #batchPrintA4 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body.print-batch-a4 .danfe-page-a4 {
    width: 100% !important;
    box-sizing: border-box !important;
    break-after: page !important;
    page-break-after: always !important;
    break-inside: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body.print-batch-a4 .danfe-page-a4:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
  }
  body.print-batch-a4 .da4-shell {
    width: 100% !important;
    font-size: 7pt !important;
  }
  body.print-batch-a4 .da4-itens-table {
    font-size: 6pt !important;
  }
  body.print-batch-a4 .da4-titulo-txt {
    font-size: 14pt !important;
  }
}

/* --------------------------------------------------------------------------
   28. Página de login
   -------------------------------------------------------------------------- */

/* Fundo escuro quando o body tem .login-page */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--green2);
}

.login-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* Card central */
.login-card {
  background: #fff;
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  width: 100%;
  max-width: 430px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
  overflow: hidden;
}

/* Cabeçalho da marca */
.login-brand {
  background: var(--green2);
  padding: 32px 32px 28px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.login-logo {
  width: 180px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.login-brand h1 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 5px;
  letter-spacing: -.01em;
}
.login-brand p {
  font-size: 10px;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  letter-spacing: .11em;
  margin: 0;
}

/* Formulário */
.login-form {
  padding: 28px 32px 32px;
  display: grid;
  gap: 14px;
}
.login-form label {
  display: block;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 5px;
}

/* Wrapper do campo de senha com botão toggle */
.login-field-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.login-field-wrap .field { flex: 1; padding-right: 80px; }

.btn-toggle-senha {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0 13px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-left: 1px solid var(--line);
  border-radius: 0 6px 6px 0;
}
.btn-toggle-senha:hover { color: var(--green); background: var(--soft); }

/* Mensagem de erro */
.login-error {
  background: var(--redsoft);
  border: 1px solid #f5c0c0;
  border-radius: 7px;
  padding: 10px 13px;
  font-size: 11px;
  color: var(--red);
  font-weight: 650;
}

/* Botão de submit */
.login-submit {
  height: 48px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  margin-top: 4px;
  width: 100%;
}

/* Rodapé do card */
.login-footer {
  padding: 12px 32px 16px;
  text-align: center;
  font-size: 9px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0;
}

/* --------------------------------------------------------------------------
   29. Botão de logout (header do app)
   -------------------------------------------------------------------------- */
.btn-logout {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .7);
}
.btn-logout:hover {
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

/* --------------------------------------------------------------------------
   30. Divisor de seções no modal de configurações
   -------------------------------------------------------------------------- */
.config-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.config-section-divider::before,
.config-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Responsividade para tela de login */
@media (max-width: 480px) {
  .login-brand  { padding: 24px 20px 20px; }
  .login-form   { padding: 22px 20px 26px; }
  .login-footer { padding: 10px 20px 14px; }
  .login-logo   { width: 130px; }
}