/* ============================================================
   Doce Encanto - Design System (light, profissional)
   ============================================================ */
:root {
  --primary: #b5324f;
  --primary-dark: #8f223a;
  --primary-soft: #fbe9ee;
  --ink: #1f2430;
  --ink-2: #48505f;
  --muted: #8a93a4;
  --line: #e7e9ef;
  --line-2: #eef0f5;
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --shadow: 0 1px 2px rgba(20, 24, 40, .04), 0 8px 24px rgba(20, 24, 40, .06);
  --shadow-lg: 0 12px 40px rgba(20, 24, 40, .18);
  --radius: 14px;
  --radius-sm: 10px;

  /* status */
  --s-aguardando_producao: #7c8494;
  --s-em_producao: #d98a2b;
  --s-finalizado: #2ca06a;
  --s-saiu_entrega: #7a4fd6;
  --s-entregue: #3a9b57;
  --s-cancelado: #c0455b;

  --ok: #2ca06a;
  --warn: #d98a2b;
  --danger: #c0455b;

  /* dourado da marca (sidebar) */
  --gold: #cBa96a;
  --gold-soft: #e6d4a3;

  /* Densidade do sistema: o app renderiza a --app-zoom (90%). Altura de tela cheia
     precisa ser 100vh/zoom p/ preencher a tela DEPOIS do zoom encolher (senao sobra
     faixa branca embaixo no login e telas curtas). */
  --app-zoom: 0.9;
  --h-full: calc(100vh / var(--app-zoom));
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  /* Densidade padrao do sistema = "zoom 90% do navegador" (pedido do dono): escala
     tudo (px, fontes, icones) igual ao zoom nativo, cabe mais e respira melhor.
     So afeta o app (o cardapio/entregador tem CSS proprio). Valor em --app-zoom. */
  zoom: var(--app-zoom);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------- Layout ---------- */
#app { display: grid; grid-template-columns: 256px 1fr; min-height: var(--h-full); }

.sidebar {
  background: #131017;
  background: linear-gradient(180deg, #191520 0%, #100d14 100%);
  color: #e9e6ee;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: var(--h-full);
  border-right: 1px solid rgba(255,255,255,.05);
  /* acima do conteúdo (o flyout de "Cadastros" recolhido tem que cobrir a página);
     fica abaixo de modais/overlays/toasts (z-index 40+). */
  z-index: 20;
}
/* Marca: selo circular dourado + título serifado dourado (centralizado) */
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 18px 16px; }
.brand-badge {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold);
  border: 1.5px solid var(--gold);
  background: radial-gradient(circle at 50% 35%, rgba(201,169,106,.14), rgba(201,169,106,.02));
  box-shadow: 0 0 0 4px rgba(201,169,106,.06), inset 0 0 14px rgba(201,169,106,.08);
}
.brand-badge svg { width: 27px; height: 27px; display: block; }
.brand-title { font-family: Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: .01em; color: var(--gold-soft); margin-top: 4px; }
.brand-sub { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a8194; }

/* Busca global do menu (pula pra qualquer tela) */
.nav-search { position: relative; padding: 2px 12px 8px; }
.ns-field { position: relative; }
.ns-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #8a8194; pointer-events: none; }
.ns-ico svg { width: 15px; height: 15px; display: block; }
.nav-search input {
  width: 100%; padding: 10px 46px 10px 34px; font-size: 13px; font-family: inherit;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; color: #e9e6ee; outline: none; transition: border .15s, box-shadow .15s, background .15s;
}
.nav-search input::placeholder { color: #8a8194; }
.nav-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,106,.18); background: rgba(255,255,255,.08); }
.ns-kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-size: 10px; font-weight: 600; letter-spacing: .03em; color: #9a92a6;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 2px 6px; }
.nav-search-results { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% - 4px); z-index: 150;
  background: #201a26; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 6px; box-shadow: 0 14px 44px rgba(0,0,0,.5); max-height: 320px; overflow-y: auto; }
.nav-search-results.open { display: block; }
.nav-search-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: transparent;
  color: #c7c1d0; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-family: inherit; }
.nav-search-item:hover, .nav-search-item.is-active { background: var(--primary); color: #fff; }
.nav-search-item .nsi-grp { margin-left: auto; font-size: 11px; opacity: .6; }
.nav-search-empty { padding: 10px; color: #8a8194; font-size: 13px; }
#app.collapsed .nav-search { display: none; }

/* flex:1 ocupa o espaço entre a busca e o rodapé; overflow-y+min-height:0 fazem o
   MENU rolar sozinho quando muitos grupos estão abertos (senão a lista some pra baixo
   da tela e algumas telas ficam inalcançáveis). Marca/busca/rodapé ficam fixos. */
.nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; min-height: 0; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
.nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px; color: #c7c1d0;
  font-size: 14px; font-weight: 500; transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: linear-gradient(180deg, #9a2740 0%, #82203a 100%); color: #fff; box-shadow: 0 8px 20px rgba(140,30,55,.4); }
.nav-ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: .85; }
.nav-item:hover .nav-ico, .nav-item.active .nav-ico { opacity: 1; }
.nav-ico svg { width: 19px; height: 19px; display: block; }
.nav-sep { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #6f6779; margin: 14px 12px 6px; }

/* Grupo expansivel (Cadastros) */
.nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.nav-group-head {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 10px; border: none; background: transparent;
  color: #c7c1d0; font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; text-align: left; transition: background .15s, color .15s;
}
.nav-group-head:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-group-head .nav-caret { margin-left: auto; display: inline-flex; opacity: .6; transition: transform .18s; }
.nav-group-head .nav-caret svg { width: 15px; height: 15px; display: block; }
.nav-group:not(.open) .nav-group-head .nav-caret { transform: rotate(-90deg); }
.nav-group-body { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; margin-top: 2px; border-left: 1px solid rgba(255,255,255,.08); margin-left: 20px; }
.nav-group:not(.open) .nav-group-body { display: none; }

/* Sidebar recolhida (Ctrl+B): só o ícone "Cadastros"; filhos num flyout ao passar o mouse */
#app.collapsed .sidebar { overflow: visible; }
#app.collapsed .nav-caret { display: none; }
#app.collapsed .nav-group { position: relative; }
#app.collapsed .nav-group-head { justify-content: center; padding: 11px 0; }
#app.collapsed .nav-group-body { display: none; }
#app.collapsed .nav-group:hover .nav-group-body {
  display: flex; position: absolute; left: 100%; top: 0;
  min-width: 190px; padding: 8px; margin: 0; gap: 2px; border-left: none;
  background: #201a26; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,.5); z-index: 200;
}
#app.collapsed .nav-group:hover .nav-group-body .nav-item { justify-content: flex-start; padding: 9px 12px; gap: 11px; }
#app.collapsed .nav-group:hover .nav-group-body .nav-label { display: inline; }
.nav-highlight:not(.active) { color: #fff; }

/* Rodapé: status de conexão */
.sidebar-foot { padding: 8px 12px 12px; border-top: 1px solid rgba(255,255,255,.06); }
.side-status { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 2px; font-size: 11px; color: #8f879b; }
.conn { display: inline-flex; align-items: center; gap: 6px; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.conn.ok i { background: var(--ok); }
.conn.off i { background: var(--danger); }

/* ---------- Sidebar recolhivel ---------- */
#app { transition: grid-template-columns .22s ease; }
#app.collapsed { grid-template-columns: 76px 1fr; }
.sidebar { overflow: hidden; }
.nav-item { white-space: nowrap; }
.nav-label { transition: opacity .15s; }
#app.collapsed .brand-title,
#app.collapsed .brand-sub,
#app.collapsed .nav-label,
#app.collapsed .nav-sep,
#app.collapsed .side-status { display: none; }
#app.collapsed .brand { justify-content: center; padding: 18px 8px 12px; }
#app.collapsed .brand-badge { width: 44px; height: 44px; }
#app.collapsed .brand-badge svg { width: 21px; height: 21px; }
#app.collapsed .nav { padding: 10px 14px; }
#app.collapsed .nav-item { justify-content: center; padding: 11px 0; gap: 0; }
.menu-toggle svg { width: 20px; height: 20px; display: block; }
#app.collapsed .menu-toggle svg { transform: scaleX(-1); }

/* ---------- Main ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 22px 30px 18px; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.menu-toggle { color: var(--ink-2); border: 1px solid var(--line); background: var(--surface); }
.menu-toggle:hover { background: var(--line-2); color: var(--ink); }
.topbar h1 { font-size: 22px; }
.topbar p { margin: 3px 0 0; font-size: 13px; }
.topbar p .crumb-sep { color: #c9ccd6; }
.topbar p strong { color: var(--ink-2); font-weight: 600; }
.topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.view { padding: 24px 30px 60px; }

/* ===== Workspace de guias internas (browser-style) ===== */
.ws-tabbar { flex: none; display: flex; align-items: flex-end; gap: 3px; padding: 7px 14px 0;
  background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.ws-tabbar::-webkit-scrollbar { height: 6px; }
.ws-tabbar::-webkit-scrollbar-thumb { background: #d6d9e2; border-radius: 999px; }
.ws-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px 9px 15px; border-radius: 10px 10px 0 0;
  background: transparent; border: 1px solid transparent; border-bottom: 0; cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink-2); max-width: 230px; position: relative; top: 1px; }
.ws-tab:hover { background: rgba(20, 24, 40, .04); }
.ws-tab.is-active { background: var(--surface); border-color: var(--line); color: var(--primary); }
.ws-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--surface); }
.ws-tab-lbl { overflow: hidden; text-overflow: ellipsis; }
.ws-tab-x { flex: none; width: 19px; height: 19px; border-radius: 6px; border: 0; background: none; color: var(--muted);
  font-size: 11px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ws-tab-x:hover { background: rgba(20, 24, 40, .1); color: var(--ink); }
.ws-tab-refresh { flex: none; margin: 0 4px 4px 8px; align-self: center; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.ws-tab-refresh:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 720px) { .ws-tab-refresh span { display: none; } .ws-tab { max-width: 150px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 9px 15px; border-radius: 10px; font-size: 13.5px; font-weight: 550;
  transition: all .15s; font-family: inherit; white-space: nowrap;
}
/* Ícone SVG inline em botão: tamanho fixo (senão renderiza gigante e estica o botão). */
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { border-color: #d3d7e0; box-shadow: var(--shadow); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-ghost { background: transparent; border-color: transparent; }
/* Contornado NA COR: ação importante que ainda não é a principal (ex.: "Registrar
   pagamento" ao lado de "Quitar"). Fica entre o neutro e o preenchido — dois botões
   cheios lado a lado disputariam o olho e nenhum venceria. */
.btn-outline { color: var(--primary); border-color: var(--primary); background: var(--surface); font-weight: 650; }
.btn-outline:hover { background: var(--primary-soft); }
.btn-outline svg { width: 16px; height: 16px; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-danger { color: var(--danger); border-color: #f0d3d8; }
.btn-danger:hover { background: #fdf2f4; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.icon-btn { border: none; background: transparent; cursor: pointer; font-size: 16px; color: var(--muted); padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: var(--line-2); color: var(--ink); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.stat {
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.stat .stat-top { display: flex; justify-content: space-between; align-items: center; }
.stat .stat-label { font-size: 12.5px; color: var(--muted); font-weight: 550; }
.stat .stat-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--primary-soft); }
.stat .stat-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.stat .stat-foot { font-size: 12px; color: var(--muted); }
.stat.accent { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; border: none; }
.stat.accent .stat-label, .stat.accent .stat-foot { color: rgba(255,255,255,.85); }
.stat.accent .stat-ico { background: rgba(255,255,255,.18); }
.stat.danger .stat-value { color: var(--danger); }
.stat.danger .stat-ico { background: #fdeef0; }

/* ---------- Filters bar ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.field .req { color: var(--primary); }
input, select, textarea {
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); outline: none; transition: border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
textarea { resize: vertical; min-height: 64px; }
input[disabled], select[disabled] { background: var(--surface-2); color: var(--muted); }
.field-grow { flex: 1; min-width: 160px; }

/* ---------- Tables ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
.row-click { cursor: pointer; }
.t-strong { font-weight: 600; }
.t-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-right { text-align: right; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-aguardando_producao { color: var(--s-aguardando_producao); background: #f2f3f6; }
.badge-em_producao { color: var(--s-em_producao); background: #fdf3e6; }
.badge-finalizado { color: var(--s-finalizado); background: #e8f6ef; }
.badge-saiu_entrega { color: var(--s-saiu_entrega); background: #f1ecfb; }
.badge-entregue { color: var(--s-entregue); background: #e8f6ec; }
.badge-cancelado { color: var(--s-cancelado); background: #fbeef0; }
.badge-atrasado { color: #fff; background: var(--danger); }
.badge-atrasado::before { background: #fff; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; background: var(--line-2); color: var(--ink-2); }

/* Status de PAGAMENTO (derivado do financeiro): pago / parcial / pendente. */
.pag-cel { margin-top: 4px; }
.pag-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; cursor: help; }
.pag-badge.pag-pago { background: #e8f6ee; color: #1d8a4f; }
.pag-badge.pag-parcial { background: #fff4e2; color: #a86800; }
.pag-badge.pag-pendente { background: #fdecef; color: #c0455b; }

/* Bloco de pagamento no resumo do pedido (registrar/quitar/saldo). */
.pg-card { margin-top: 14px; }
.pg-verde { color: #1d8a4f; font-weight: 700; }
.pg-status { margin: 10px 0 4px; }
.pg-lista { display: flex; flex-direction: column; margin: 8px 0 12px; }
.pg-item { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); }
.pg-item:last-child { border-bottom: none; }
.pg-vazio { font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.pg-btns { display: flex; gap: 8px; }
.pg-btns .btn { flex: 1; }
.pg-item-dir { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pg-ico { width: 24px; height: 24px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.pg-ico svg { width: 14px; height: 14px; }
.pg-ico:hover { background: var(--line-2); color: var(--ink); }
.pg-ico.pg-ico-del:hover { background: #fdecef; color: var(--danger); }

.pill { display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; font-size:12px; background: var(--primary-soft); color: var(--primary-dark); font-weight:600; }

/* ---------- Empty / loading ---------- */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty .em-ico { font-size: 34px; opacity: .6; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Drawer ---------- */
/* Os overlays começam ABAIXO da barra de guias (--ws-bar-h) — assim dá pra trocar de
   guia com o drawer/modal aberto (a barra fica livre e clicável). */
.overlay { position: fixed; inset: var(--ws-bar-h, 0) 0 0 0; background: rgba(20,20,30,.42); backdrop-filter: blur(2px); z-index: 40; display: flex; justify-content: flex-end; }
.overlay.hidden { display: none; }
.drawer { width: min(680px, 100%); background: var(--bg); height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: slidein .22s ease; }
.drawer.wide { width: min(920px, 100%); }
@keyframes slidein { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: var(--surface); border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 17px; }
.drawer-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.drawer-foot { padding: 14px 22px; background: var(--surface); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; align-items: center; }

/* ---------- Modal centralizado ---------- */
.modal-overlay {
  position: fixed; inset: var(--ws-bar-h, 0) 0 0 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(20, 20, 30, .5); backdrop-filter: blur(3px);
  animation: fadein .18s ease;
}
.modal-overlay.hidden { display: none; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 620px; max-height: 90vh;
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: pop .22s cubic-bezier(.2, .9, .3, 1.2);
}
.modal.sm { max-width: 460px; }
.modal.lg { max-width: 940px; }
.modal.xl { max-width: 1160px; }
@keyframes pop { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.modal-head h2 { font-size: 17px; }
.modal-body { padding: 22px 24px; overflow-y: auto; }
.modal-foot {
  padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface-2);
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.modal-foot .spacer { flex: 1; }

/* ---------- Form layout ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .col-2 { grid-column: span 2; }
.form-grid .col-3 { grid-column: span 3; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.section-title:first-child { margin-top: 0; }
.help { font-size: 12px; color: var(--muted); }
.help svg { width: 14px; height: 14px; vertical-align: -2px; flex: none; }
.err-text { color: var(--danger); font-size: 12.5px; }

/* ---------- Order items ---------- */
.item-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.item-card .item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.item-card .item-head .idx { font-weight: 700; color: var(--primary); font-size: 13px; }
.totals-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.totals-box .line { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.totals-box .line.grand { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 16px; font-weight: 700; }
.totals-box .line.rest { color: var(--primary-dark); font-weight: 650; }

/* ---------- Precificacao ---------- */
.price-box { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 12px; align-items: start; }
.price-cell {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; justify-content: flex-start;
}
.price-cell .price-label { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.price-cell .price-val { font-size: 20px; font-variant-numeric: tabular-nums; }
.price-cell input { font-size: 18px; font-weight: 600; padding: 6px 10px; }
.price-accent { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border: none; }
.price-accent .price-label { color: rgba(255,255,255,.85); }
.price-accent .price-val { color: #fff; }
@media (max-width: 640px) { .price-box { grid-template-columns: 1fr; } }

/* ---------- Agenda (kanban) ---------- */
/* ===== Agenda de Produção: painel operacional do fluxo ===== */
.ag-page { display: flex; flex-direction: column; gap: 14px; }
.ag-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--shadow); }
.ag-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ag-cresce { flex: 1; min-width: 220px; }
.ag-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* O lookup do produto tem largura própria: como botão, ele encolheria até o texto
   e a barra de filtros dançaria a cada produto escolhido. */
.ag-prod { min-width: 210px; }
.ag-prod .lookup-btn { height: 34px; padding: 0 10px; border-radius: 9px; font-size: 13px; }
.ag-prod .lookup-btn .lookup-caret svg { width: 15px; height: 15px; }
.ag-prod .lookup-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-campo select, .ag-datas input, .ag-busca input { height: 34px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); padding: 0 9px; }
.ag-datas { display: inline-flex; align-items: center; gap: 6px; }
.ag-datas i { color: var(--muted); font-style: normal; }
.ag-busca { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.ag-busca:focus-within { border-color: var(--primary); }
.ag-busca svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.ag-busca input { border: 0; height: auto; padding: 0; flex: 1; min-width: 0; outline: none; }
.ag-acoes { display: flex; gap: 7px; margin-left: auto; }
.ag-acoes .est-fbtn { height: 34px; display: inline-flex; align-items: center; gap: 6px; }
.ag-atras svg { width: 14px; height: 14px; }
/* "Só atrasados" ligado fica VERMELHO, não da cor neutra dos outros filtros: é o
   único filtro que existe para achar problema, e precisa parecer um alerta ligado. */
.ag-atras.is-active { background: #c0304a; border-color: #c0304a; color: #fff; }

.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.kcol { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 330px); }
.kcol-head { padding: 11px 13px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-2);
  border-radius: 14px 14px 0 0; z-index: 1; }
.kcol-tit { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); }
.kcol-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kcol-head .kcount { background: var(--line); color: var(--ink-2); border-radius: 999px; font-size: 12px; padding: 1px 9px; font-weight: 700; }
/* A coluna avisa que tem atrasado dentro dela, sem precisar rolar até achar. */
.kcol-head .kcount-attn { background: #fdecef; color: #c0304a; }
.kcol-body { padding: 11px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; }
.kcol-vazio { padding: 18px 12px; text-align: center; }
.kcol-vazio p { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; }

.pcard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: 11px; padding: 11px 12px; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s; }
.pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pcard.atrasado { border-left-color: #c0304a; background: #fdf7f8; }
.pcard .pc-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pcard .pc-num { font-weight: 800; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
/* O horário é o que decide a fila do dia: fica logo abaixo do número, não no rodapé. */
.pcard .pc-quando { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-top: 3px; }
.pcard .pc-quando.is-entrega { color: var(--primary-dark); }
.pcard .pc-cli { font-size: 13px; font-weight: 650; color: var(--ink); margin-top: 6px; }
.pcard .pc-fone { font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pcard .pc-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--line); }
.pc-item-top { font-size: 12.5px; font-weight: 650; color: var(--ink); line-height: 1.35; }
.pc-q { color: var(--primary); font-weight: 800; }
/* .pc-var e NAO .pc-tam: .pc-tam ja e do card de precificacao por tamanho da tela
   de Produtos (ver .pc-tam-grid abaixo). O nome colidia e minha regra vazava cor
   branca no card de preco, deixando o texto invisivel. */
.pc-var { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; background: var(--ink); color: #fff;
  border-radius: 5px; padding: 1px 5px; vertical-align: 1px; white-space: nowrap; }
/* Corte errado não volta atrás: ganha faixa própria também aqui, como na Produção. */
.pc-corte { font-size: 11px; font-weight: 700; color: var(--primary-dark); background: var(--primary-soft);
  border-radius: 6px; padding: 2px 6px; display: inline-block; margin-top: 3px; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pc-tag { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.pc-add { background: #e9edff; color: #3a52c4; }
.pc-sem { background: #fdeaea; color: #b93a3a; }
.pc-obs { background: #fff3e0; color: #a86800; }
.pcard .pc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.pcard .pc-foot .tag { display: inline-flex; align-items: center; gap: 4px; }
.pcard .pc-foot .tag svg { width: 13px; height: 13px; }
.pc-valor { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px;
  font-weight: 750; color: var(--ink); line-height: 1.25; }
.pc-valor i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); }

/* ---------- Timeline (historico) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 20px; border-left: 2px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.timeline .tl-when { font-size: 12px; color: var(--muted); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: slidein .2s ease; max-width: 360px; }
.toast.ok { background: #1d7a4d; }
.toast.err { background: #b23046; }

/* ---------- Catalogo por categoria (Produtos) ---------- */
.cat-section { margin-bottom: 22px; }
.cat-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 8px; }
.cat-head h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.cat-head .muted { font-size: 12px; }
.tag-soft { background: var(--primary-soft); color: var(--primary-dark); }
.code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; color: var(--ink-2); }

/* Tela de cadastro/edicao de produto — estilo "sistema fiscal" (secoes em banda) */
.form-page { width: 100%; padding-bottom: 8px; }
.form-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.fh-badge { width: 42px; height: 42px; }
/* Seta de voltar no topo do formulário (no lugar do ícone) */
.topbar-back { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.topbar-back:hover { background: var(--surface-2); border-color: #d3d7e0; }
.topbar-back:active { box-shadow: inset 0 2px 5px rgba(20,24,40,.08); }
.topbar-back svg { width: 19px; height: 19px; display: block; }
.form-head h2 { font-size: 19px; font-weight: 750; letter-spacing: -.01em; margin: 0; }

/* Icones estilo "app iOS": squircle com gradiente e glifo branco */
.app-ico { display: inline-grid; place-items: center; color: #fff; border-radius: 28%; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.12), 0 1px 2px rgba(20,24,40,.2); }
.app-ico svg { width: 60%; height: 60%; display: block; }
.ai-wine { background: linear-gradient(145deg, #e35a7d, #b5324f); }
.ai-blue { background: linear-gradient(145deg, #5b9bff, #2160e6); }
.ai-green { background: linear-gradient(145deg, #4bd982, #1ba757); }
.ai-orange { background: linear-gradient(145deg, #ffb64f, #f5822a); }
.ai-purple { background: linear-gradient(145deg, #b07dff, #7a3fe0); }
.ai-teal { background: linear-gradient(145deg, #48ddd4, #12a8a0); }
.crumbs { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.crumbs strong { color: var(--ink-2); font-weight: 600; }
.crumbs span { color: #c9ccd6; }

.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 14px; overflow: hidden; }
.fcard-head { margin: -20px -22px 20px; padding: 11px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; user-select: none; }
.fcard-head h3 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin: 0; }
.fcard-head p { margin: 0; font-size: 12px; color: var(--muted); }
/* Minimizador do card */
.fcard-collapse { margin-left: auto; align-self: center; border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-grid; place-items: center; transition: transform .18s ease, background .15s; }
.fcard-collapse svg { width: 18px; height: 18px; display: block; }
.fcard-collapse:hover { background: rgba(20,24,40,.06); color: var(--ink); }
.fcard.collapsed .fcard-collapse { transform: rotate(-90deg); }
.fcard.collapsed { padding-bottom: 0; }
.fcard.collapsed .fcard-head { margin-bottom: 0; border-bottom: none; }
.fcard.collapsed > :not(.fcard-head) { display: none; }
.fh-ico { width: 21px; height: 21px; }

.fgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 20px; }
.fgrid .full { grid-column: 1 / -1; }
.fgrid .col-2 { grid-column: span 2; }
#preco-secao { margin-top: 18px; }
.preco-info-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; }
.preco-info-badge strong { color: var(--primary-dark); }
.fcard input, .fcard select, .fcard textarea { padding: 10px 12px; border-radius: 9px; }
.lbl-hint { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* Barra de acoes no fim do formulario (rola junto, nao fica fixa). */
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 8px; padding: 14px 2px 4px; border-top: 1px solid var(--line); }
.btn-lg { padding: 10px 22px; font-weight: 600; }

@media (max-width: 860px) { .fgrid { grid-template-columns: 1fr; } }

/* Variante COMPACTA de formulário: cards mais densos, cabe mais na tela. */
.form-compact .fcard { padding: 11px 15px; margin-bottom: 9px; }
.form-compact .fcard-head { margin: -11px -15px 11px; padding: 7px 15px; }
.form-compact .fcard-head h3 { font-size: 11.5px; }
.form-compact .fcard-head p { font-size: 11px; }
.form-compact .fh-ico { width: 18px; height: 18px; }
.form-compact .fgrid { gap: 9px 16px; }
.form-compact .field { gap: 3px; }
.form-compact .field label { font-size: 10.5px; }
.form-compact .fcard input, .form-compact .fcard select, .form-compact .fcard textarea { padding: 7px 10px; border-radius: 8px; }
.form-compact .fcard textarea { min-height: 44px; }
.form-compact .item-card { padding: 10px 12px; margin-bottom: 8px; }
.form-compact .item-card .row-between { margin-bottom: 6px !important; }
.form-compact .totals-box { margin-top: 10px !important; }
.form-compact .form-actions { margin-top: 4px; padding-top: 11px; }
/* compacto: elementos do cadastro de produto */
.form-compact .prod-precos-row { gap: 10px; margin-bottom: 9px; }
.form-compact .md-list, .form-compact .md-edit { padding: 12px; }
.form-compact .md-tabela-wrap { max-height: 210px; }
.form-compact .md-search input { height: 34px; }
.form-compact .md-edit-title { margin-bottom: 10px; }
.form-compact .md-edit-acts { margin-top: 12px; }
.form-compact .itens-tabela thead th { padding: 7px 10px; }
.form-compact .itens-tabela tbody td { padding: 6px 10px; }
.form-compact textarea { min-height: 40px; }
.form-compact .price-box { padding: 12px 14px; gap: 12px; }
.form-compact .price-val { font-size: 16px; }

/* extra-compacto só no cadastro de produto (cabe mais na tela) */
.prod-page .fcard { padding: 10px 14px; margin-bottom: 8px; }
.prod-page .fcard-head { margin: -10px -14px 10px; padding: 6px 14px; }
.prod-page .fgrid { gap: 8px 14px; }
.prod-page textarea { min-height: 34px; height: 34px; }
.prod-page .help { margin-top: 4px; margin-bottom: 4px; }
.prod-page .md-tabela-wrap { max-height: 190px; }
.prod-page .form-actions { margin-top: 2px; }

/* Ficha por tamanho: quantidades por tamanho no painel de edição + tabela */
.fe-tam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin-top: 10px; }
.fe-tam-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fe-tam-lbl { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.fe-tam-cell input { width: 100%; box-sizing: border-box; }
.ficha-tabela th, .ficha-tabela td { text-align: left; }
.ficha-tabela td:not(:first-child):not(:last-child), .ficha-tabela th:not(:first-child):not(:last-child) { white-space: nowrap; }

/* ===== Layout do form de PEDIDO: 2 colunas + resumo lateral + barra de ação ===== */
.ped-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.ped-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ped-main > .fcard { margin-bottom: 0; }

/* Cabeçalho de seção limpo: ícone quadrado + título/subtítulo empilhados (sem número) */
.ped-page .fcard-head { align-items: center; gap: 11px; text-transform: none; }
.ped-page .fh-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.ped-page .fh-ico svg { width: 17px; height: 17px; display: block; }
.ped-page .fh-txt { line-height: 1.2; }
.ped-page .fh-txt h3 { font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.ped-page .fh-txt p { font-size: 11.5px; color: var(--muted); margin: 1px 0 0; }
.fcard-itens .fcard-head .add-item-btn-sm { margin-left: auto; }

/* Janela de horário: data + "das" hora "às" hora (fim opcional) */
.janela-hora { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.janela-hora input[type="date"] { flex: 1 1 150px; min-width: 130px; }
.janela-hora input[type="time"] { flex: 0 0 auto; width: auto; min-width: 96px; }
.jh-sep { font-size: 12.5px; color: var(--muted); }
.jh-opt { font-size: 11px; color: var(--muted); font-style: italic; }
/* Na entrega a janela vira obrigatória — o campo precisa parecer obrigatório. */
.jh-opt.is-req { color: var(--primary); font-style: normal; font-weight: 600; }
.janela-hora input.is-req-campo { border-color: var(--primary); }

/* Viewport-first: menos padding e barra de ação fixa no rodapé */
.view:has(.ped-fit) { padding-top: 18px; padding-bottom: 14px; }

/* Resumo lateral (sticky) */
.ped-resumo { position: sticky; top: 8px; }
.resumo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 16px 16px; }
.resumo-top { text-align: center; padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 12px; }
.resumo-ico { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.resumo-ico svg { width: 22px; height: 22px; }
.resumo-top h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.resumo-top p { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); }
.resumo-lines { display: flex; flex-direction: column; gap: 10px; }
.resumo-line { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.resumo-line strong { color: var(--ink); font-weight: 700; }
.resumo-rest { margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: var(--primary-soft);
  display: flex; justify-content: space-between; align-items: center; }
.resumo-rest span { font-weight: 700; color: var(--primary-dark); font-size: 13px; }
.resumo-rest strong { font-size: 18px; font-weight: 800; color: var(--primary); }
.resumo-quick { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 9px; }

/* Barra de ação: fixa no rodapé da viewport */
.ped-actions-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px;
  padding: 11px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.ped-fit .ped-actions-bar { position: sticky; bottom: 10px; z-index: 6; }
.ped-actions-hint { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ped-actions-hint svg { width: 15px; height: 15px; flex-shrink: 0; }
.ped-actions-btns { display: flex; gap: 12px; align-items: center; }

/* Notebook / telas < 1400: cards um embaixo do outro; o resumo vira uma barra horizontal. */
@media (max-width: 1400px) {
  .ped-layout { grid-template-columns: 1fr; }
  .ped-resumo { position: static; }
  .resumo-card { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 30px; padding: 14px 20px; }
  .resumo-top { display: flex; align-items: center; gap: 12px; text-align: left; border: none; padding: 0; margin: 0; }
  .resumo-top .resumo-ico { margin: 0; width: 42px; height: 42px; }
  .resumo-top h3 { font-size: 14px; }
  .resumo-top p { display: none; }
  .resumo-lines { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; gap: 10px 28px; }
  .resumo-line { flex-direction: column; align-items: flex-start; gap: 1px; }
  .resumo-line > span:first-child { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
  .resumo-line > span:last-child, .resumo-line strong { font-size: 14px; font-weight: 700; color: var(--ink); }
  .resumo-rest { margin: 0; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 16px; }
  .resumo-rest > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
  .ped-resumo .resumo-quick { margin: 0; padding: 0; border-top: none; flex-direction: row; gap: 10px 24px; }
}
/* Telas estreitas: o master-detail dos itens empilha (tabela em cima, editor embaixo). */
@media (max-width: 900px) {
  .itens-md { grid-template-columns: 1fr; }
  .item-editor { border-left: none; border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .ped-actions-bar { flex-direction: column; align-items: stretch; }
  .ped-actions-btns { justify-content: flex-end; }
}

/* ===== Itens do pedido: master-detail num CARD ÚNICO (lista | divisória | editor) ===== */
.itens-md { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); align-items: stretch; }
.itens-md-list { min-width: 0; display: flex; flex-direction: column; }
.add-item-btn-sm { color: var(--primary); border-color: var(--line); background: var(--surface); font-weight: 600; }
.add-item-btn-sm:hover { border-color: var(--primary); background: var(--primary-soft); }

.itens-tabela-wrap { overflow: auto; max-height: 236px; }
.itens-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.itens-tabela thead th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 600; padding: 8px 11px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; }
.itens-tabela tbody td { padding: 8px 11px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.itens-tabela tbody td:not(:nth-child(2)) { white-space: nowrap; } /* só o Produto pode quebrar linha */
.itens-tabela tbody tr:last-child td { border-bottom: none; }
.it-tr { cursor: pointer; transition: background .12s; }
.it-tr:hover { background: var(--surface-2); }
.it-tr.is-selected { background: var(--primary-soft); }
.it-tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); } /* barra vermelha da linha selecionada */
.it-tr-sel { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.it-radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; }
.it-tr.is-selected .it-radio { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 0 42%, transparent 46%); }
.it-tr-acts { width: 1%; text-align: right; }
.it-tr-acts button { border: none; background: transparent; cursor: pointer; padding: 4px 5px; border-radius: 6px; color: var(--muted); }
.it-tr-acts button:hover { background: rgba(20,24,40,.06); color: var(--primary); }
.it-tr-acts svg { width: 15px; height: 15px; display: block; }
/* rodapé da lista: contagem + total */
.itens-md-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto;
  padding: 9px 12px; border-top: 1px solid var(--line); background: var(--surface-2); }
.itens-count { font-size: 11.5px; color: var(--muted); margin: 0; }
.itens-total-lbl { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.itens-total-lbl strong { color: var(--primary); font-weight: 800; margin-left: 6px; font-size: 13.5px; }

/* editor: divisória à esquerda, sem card próprio */
.item-editor { border: none; border-left: 1px solid var(--line); border-radius: 0; padding: 13px 15px; background: var(--surface); }
.item-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.item-editor-head .ieh-title { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.item-editor-pill { font-size: 10.5px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.item-editor .ped-item { display: none; margin: 0; border: none; box-shadow: none; padding: 0; background: transparent; }
.item-editor .ped-item.is-editing { display: block; }
/* editor numa coluna estreita → grid de 2 colunas.
   minmax(0,1fr) + min-width:0 deixam os campos ENCOLHEREM (senão um select com texto
   longo força a coluna e estoura o card, que tem overflow:hidden). */
.itens-md-edit .fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px 12px; }
.itens-md-edit .fgrid .col-2, .itens-md-edit .fgrid .full { grid-column: 1 / -1; }
.itens-md-edit .field { min-width: 0; }
.itens-md-edit input, .itens-md-edit select, .itens-md-edit textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.itens-md-edit .rem-chips { min-width: 0; }
/* Subtotal do item = caixa full-width no RODAPÉ do editor (como no mockup) */
.itens-md-edit .it-sub-box { order: 99; grid-column: 1 / -1; margin-top: 2px; padding: 10px 14px; }
.itens-md-edit .it-sub-box .it-sub { font-size: 18px; }

.it-sub-box { background: var(--primary-soft); border-radius: 10px; padding: 6px 12px; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.it-sub-box .it-sub-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-dark); font-weight: 700; }
.it-sub-box .it-sub { font-size: 16px; font-weight: 800; color: var(--primary); }

.it-adic-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-2); }
.it-adic-total strong { color: var(--ink); font-weight: 700; }

/* Chips "sem X" (retirar ingredientes) no item do pedido */
.rem-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rem-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; transition: all .12s; }
.rem-chip:hover { border-color: #e0879a; color: #b23046; }
.rem-chip.is-on { background: #fdecef; border-color: #d98aa0; color: #b23046; text-decoration: line-through; }

/* ===== Cockpit da lista de Pedidos ===== */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
/* A Agenda tem 6 indicadores; sem isto o sexto cai sozinho numa segunda linha. */
.kpi-row.kpi-6 { grid-template-columns: repeat(6, 1fr); }
.kpi-card { position: relative; display: flex; align-items: center; gap: 13px; padding: 14px 16px 14px 17px;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,24,40,.09); }
.kpi-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; }
.kpi-ico svg { width: 21px; height: 21px; }
.kpi-num { font-size: 23px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-tit { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 3px; }
.kpi-sub { font-size: 11px; color: var(--muted); }
.kpi-wine { border-left-color: var(--primary); }
.kpi-wine .kpi-ico { background: var(--primary-soft); color: var(--primary); }
.kpi-amber { border-left-color: #d98a00; }
.kpi-amber .kpi-ico { background: #fff3e0; color: #c77800; }
.kpi-violet { border-left-color: #7c4dcc; }
.kpi-violet .kpi-ico { background: #f0ebfb; color: #7c4dcc; }
.kpi-red { border-left-color: #c0304a; }
.kpi-red .kpi-ico { background: #fdecef; color: #c0304a; }
.kpi-green { border-left-color: #2c9c66; }
.kpi-green .kpi-ico { background: #e7f6ee; color: #2c9c66; }
/* Estado de atenção: há pedidos atrasados — o cartão puxa o olhar */
.kpi-attn { background: #fdf2f4; border-color: #f3c9d1; border-left-color: #c0304a; }
.kpi-attn .kpi-num { color: #c0304a; }
.kpi-attn .kpi-ico { background: #f8d3da; }
/* Card "Precisam repor" clicável: filtra o grid pelos itens abaixo do mínimo */
.kpi-card.kpi-click { cursor: pointer; }
.kpi-card.kpi-red.is-on { outline: 2px solid #c0304a; outline-offset: 1px; box-shadow: 0 8px 20px rgba(192,48,74,.18); }

/* Precificação sugerida: matéria-prima → +impostos → preço sugerido, por tamanho */
.price-cell.price-grow { flex: 1 1 auto; min-width: 0; }
.price-hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.price-hint b { color: var(--ink-2); }
.pc-tam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.pc-tam { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--bg); }
.pc-tam-nome { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); margin-bottom: 5px; }
.pc-tam-faixa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink-2); padding: 1px 0; }
.pc-tam-faixa b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-tam-preco { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line); }
.pc-tam-preco span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.pc-tam-preco b { font-size: 18px; font-weight: 800; color: var(--primary); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ===================== DASHBOARD GERAL (central operacional) ===================== */
.dash { display: flex; flex-direction: column; gap: 16px; }
.dash-updated { font-size: 12.5px; color: var(--muted); }
.dash-updated strong { color: var(--ink-2); }

/* período (topbar) */
.dash-periodo { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.dp-btn { border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2);
  padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.dp-btn:hover { color: var(--primary); }
.dp-btn.is-active { background: var(--primary); color: #fff; }
.btn-icon { padding: 7px 9px; }
#dash-refresh.is-spinning svg { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #dash-refresh.is-spinning svg { animation: none; } }

/* KPIs (6-up) */
.dash-kpis { grid-template-columns: repeat(6, 1fr); }
.dash-kpis .kpi-body { min-width: 0; }
@media (max-width: 1280px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }

/* grid 2/1 */
.dash-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1040px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* card padrão do dashboard */
.dash-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.dash-card-head { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.dash-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.dash-card-body { padding: 14px 16px; }
.card-count { font-size: 11px; font-weight: 800; background: var(--primary-soft); color: var(--primary); padding: 1px 8px; border-radius: 999px; }
.card-count-red { background: #fdecef; color: #c0304a; }
.card-hint { font-size: 11px; font-weight: 400; color: var(--muted); }
.dash-empty { padding: 18px 4px; text-align: center; color: var(--muted); font-size: 13.5px; }
.dash-ok { padding: 14px 4px; color: #2c7a52; font-size: 13.5px; font-weight: 600; }

/* Próximo pedido (destaque) */
.prox-card { background: linear-gradient(180deg, var(--primary-soft), var(--card) 70%); border: 1px solid var(--gold-line, var(--line));
  border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.prox-card.is-late { background: linear-gradient(180deg, #fdf2f4, var(--card) 70%); border-color: #f3c9d1; }
.prox-head { display: flex; align-items: baseline; justify-content: space-between; }
.prox-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); }
.prox-hora { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.prox-num { font-size: 16px; font-weight: 700; color: var(--ink); }
.prox-info { font-size: 13px; color: var(--ink-2); margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.prox-tempo { font-size: 13px; font-weight: 700; color: var(--primary); margin-top: 4px; }
.prox-tempo.neg { color: #c0304a; }
.prox-btn { align-self: flex-start; margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; }
.prox-btn svg { width: 15px; height: 15px; }

/* Linha do tempo */
.tl-list { display: flex; flex-direction: column; }
.tl-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.tl-row:last-child { border-bottom: none; }
.tl-row:hover { background: var(--surface); }
.tl-hora { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-top { display: flex; align-items: baseline; gap: 7px; }
.tl-num { font-size: 12px; font-weight: 700; color: var(--muted); }
.tl-cli { font-size: 14px; font-weight: 600; color: var(--ink); }
.tl-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.tl-meta { display: flex; align-items: center; gap: 8px; }

/* Atenção necessária */
.al-list { display: flex; flex-direction: column; gap: 8px; }
.al-row { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; gap: 11px; align-items: center; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; }
.al-row:hover { border-color: var(--muted); }
.al-critico { border-left-color: #c0304a; }
.al-aviso { border-left-color: #d98a00; }
.al-info { border-left-color: #3a52c4; }
.al-dot { width: 9px; height: 9px; border-radius: 50%; }
.al-critico .al-dot { background: #c0304a; }
.al-aviso .al-dot { background: #d98a00; }
.al-info .al-dot { background: #3a52c4; }
.al-row .al-info { display: flex; flex-direction: column; min-width: 0; }
.al-tit { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.al-desc { font-size: 12px; color: var(--muted); }
.al-qtd { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.al-go { color: var(--muted); display: flex; } .al-go svg { width: 15px; height: 15px; }

/* Distribuição por status */
.st-list { display: flex; flex-direction: column; gap: 9px; }
.st-row { display: grid; grid-template-columns: 12px 118px 1fr 28px; gap: 9px; align-items: center; background: none; border: none; padding: 2px; cursor: pointer; font: inherit; text-align: left; }
.st-row:hover .st-lbl { color: var(--primary); }
.st-dot { width: 9px; height: 9px; border-radius: 50%; }
.st-lbl { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.st-fill { display: block; height: 100%; border-radius: 999px; }
.st-val { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.badge-dot-aguardando_producao, .badge-fill-aguardando_producao { background: var(--s-aguardando_producao); }
.badge-dot-em_producao, .badge-fill-em_producao { background: var(--s-em_producao); }
.badge-dot-finalizado, .badge-fill-finalizado { background: var(--s-finalizado); }
.badge-dot-saiu_entrega, .badge-fill-saiu_entrega { background: var(--s-saiu_entrega); }
.badge-dot-entregue, .badge-fill-entregue { background: var(--s-entregue); }

/* Produção por categoria */
.cat-list { display: flex; flex-direction: column; gap: 12px; }
.cat-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cat-nome { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cat-val { font-size: 11.5px; color: var(--muted); }
.cat-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.cat-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* Produção em lote */
.lote-list { display: flex; flex-direction: column; }
.lote-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.lote-row:last-child { border-bottom: none; }
.lote-desc { font-size: 13.5px; color: var(--ink); }
.lote-cat { font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.lote-qtd { font-size: 15px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }

/* Estoque crítico */
.est-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.est-resumo > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.est-resumo .er-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.est-resumo strong { font-size: 15px; color: var(--ink); }
.ec-list { display: flex; flex-direction: column; }
.ec-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; font: inherit; text-align: left; }
.ec-row:last-child { border-bottom: none; }
.ec-row:hover .ec-nome { color: var(--primary); }
.ec-nome { font-size: 13.5px; color: var(--ink); }
.ec-saldo { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ec-saldo.neg { color: #c0304a; }
.ec-min { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 5px; }

/* Qualidade das fichas */
.qf-gauge { display: flex; align-items: center; gap: 14px; }
.qf-bar { flex: 1; height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.qf-bar > span { display: block; height: 100%; border-radius: 999px; }
.qf-ok .qf-bar > span { background: #2c9c66; } .qf-warn .qf-bar > span { background: #d98a00; } .qf-bad .qf-bar > span { background: #c0304a; }
.qf-pct { font-size: 20px; font-weight: 800; color: var(--ink); display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.qf-pct span { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.qf-nums { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 12.5px; }
.qf-nums .qf-ok { color: #2c7a52; } .qf-nums .qf-warn { color: #b06a00; } .qf-nums .qf-bad { color: #c0304a; }
.qf-extra { font-size: 12px; color: var(--muted); margin-top: 8px; }
.qf-aviso { font-size: 12px; color: var(--ink-2); margin: 10px 0 0; padding: 9px 11px; background: #fff8ec; border: 1px solid #f0e0bd; border-radius: 9px; }

/* Skeleton loading */
.skel { background: linear-gradient(90deg, var(--surface) 25%, var(--card-2) 37%, var(--surface) 63%); background-size: 400% 100%;
  border-radius: 12px; animation: shimmer 1.3s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Pedido: seletor múltiplo de produtos (adicionar vários de uma vez) */
.itens-add-btns { display: flex; gap: 8px; flex-shrink: 0; }
.lk-multi { display: flex; align-items: center; gap: 12px; }
.lk-multi .lk-info { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.lk-check { width: 19px; height: 19px; border: 1.6px solid var(--muted); border-radius: 5px; flex-shrink: 0; position: relative; transition: all .12s ease; }
.lk-multi.is-sel { background: var(--primary-soft); }
.lk-multi.is-sel .lk-check { background: var(--primary); border-color: var(--primary); }
.lk-multi.is-sel .lk-check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Produção: Ordens de Produção (OP) */
.op-count { font-size: 11px; opacity: .7; margin-left: 2px; }
/* OP: card da TV da cozinha.
   Esta tela nao e consultada de perto, com o mouse na mao: fica numa TV e e lida
   a metros de distancia, de relance, com as maos ocupadas. Por isso HORA, SABOR e
   CORTE tem corpo grande e o resto (numero da OP, cliente) e rodape pequeno. */
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 4px; }

/* ---- Financeiro: pills de status + itens da compra ---- */
.fin-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap; }
.fin-pill-open { color: #b5324f; background: #fbe9ee; }
.fin-pill-late { color: #fff; background: #c0304a; }
.fin-pill-ok { color: #2c9c66; background: #e8f6ef; }
.fin-pill-off { color: #8a93a4; background: #f1f3f7; }
.fin-pill-part { color: #b9791b; background: #fdf0dc; }
/* ---- Modal "Nova compra" (seções: dados / parcelamento / itens+resumo) ---- */
/* Conteúdo um pouco menor p/ o modal caber inteiro na tela, sem rolagem. */
.cmp-zoom { zoom: 0.9; }
.cmp-zoom .field { margin: 0; }
.cmp-zoom .field label { margin-bottom: 4px; }
.cmp-modal-sub { margin: -2px 0 16px; color: var(--muted); font-size: 13.5px; }
.cmp-form { display: flex; flex-direction: column; gap: 18px; }
.cmp-sec-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 12px; }
.cmp-sec-ico { width: 28px; height: 28px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.cmp-sec-ico svg { width: 16px; height: 16px; }
.cmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.cmp-grid .cmp-col2 { grid-column: span 2; }
.cmp-grid .field { margin: 0; }

.cmp-parc { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; align-items: start; }
.cmp-parc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.cmp-prev-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; padding: 15px 16px; }
.cmp-prev-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 12px; }
.cmp-prev-head svg { width: 16px; height: 16px; color: #2c9c66; }
.cmp-prev-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-prev-item { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; font-size: 12.5px; }
.cmp-prev-n { color: var(--primary); font-weight: 800; }
.cmp-prev-d { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmp-prev-v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-prev-empty { color: var(--muted); font-size: 12.5px; }
.cmp-hint { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.cmp-hint svg { width: 15px; height: 15px; flex: none; }

.cmp-itens-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.cmp-tbl-wrap { border: 1px solid var(--line); border-radius: 13px; overflow-x: auto; }
.cmp-tbl { width: 100%; border-collapse: collapse; }
.cmp-tbl thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 11px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cmp-tbl tbody td { padding: 9px 12px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.cmp-tbl tbody tr:first-child td { border-top: none; }
.cmp-c-item { min-width: 210px; }
.cmp-c-item { display: flex; align-items: center; gap: 8px; }
.cmp-grip { color: #cfd3dd; cursor: grab; font-size: 13px; user-select: none; }
.cmp-item-pick { flex: 1; text-align: left; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 4px 2px; min-width: 0; }
.cmp-item-pick:hover .cmp-item-nome:not(.is-placeholder) { color: var(--primary); }
.cmp-item-nome { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-item-nome.is-placeholder { color: var(--muted); font-weight: 500; }
.cmp-item-sub { font-size: 12px; color: var(--muted); }
.cmp-tbl input, .cmp-tbl select { height: 38px; }
.cmp-qtd { width: 78px; text-align: right; }
.cmp-un { width: 88px; }
.cmp-money { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; height: 38px; width: 112px; }
.cmp-money span { padding: 0 9px; height: 100%; display: flex; align-items: center; color: var(--muted); font-size: 13px; background: var(--surface-2); border-right: 1px solid var(--line); }
.cmp-money input { border: 0; height: 100%; width: 100%; text-align: right; padding: 0 9px; }
.cmp-money input:focus { outline: none; box-shadow: none; }
.cmp-tbl td.cmp-sub { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-del { border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; padding: 5px; border-radius: 7px; }
.cmp-del svg { width: 17px; height: 17px; }
.cmp-del:hover { color: var(--danger); background: #fbeef0; }
.cmp-add { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px dashed #e6bcc8; background: var(--primary-soft); color: var(--primary-dark); border-radius: 10px; padding: 10px 15px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.cmp-add:hover { background: #f7dbe3; }
.cmp-add svg { width: 15px; height: 15px; }

.cmp-resumo { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.cmp-resumo-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 15px; }
.cmp-resumo-head svg { width: 17px; height: 17px; color: var(--primary); }
.cmp-resumo-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--ink-2); padding: 8px 0; }
.cmp-resumo-row b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-resumo-tot { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }
.cmp-resumo-tot span { display: block; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.cmp-resumo-tot strong { display: block; font-size: 27px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; }

/* Overlay do lookup (empilha por cima do modal da compra) */
.fin-ovl { position: fixed; inset: 0; z-index: 4000; background: rgba(20,24,40,.5); display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px; }
.fin-ovl-card { background: var(--surface); border-radius: 16px; width: 100%; max-width: 560px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: 82vh; overflow: hidden; }
.fin-ovl-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; border-bottom: 1px solid var(--line); }
.fin-ovl-head h3 { font-size: 17px; font-weight: 650; }
.fin-ovl-x { border: 0; background: none; font-size: 17px; color: var(--muted); cursor: pointer; line-height: 1; }
.fin-ovl-x:hover { color: var(--ink); }
.fin-ovl-body { padding: 18px 22px; overflow-y: auto; }

@media (max-width: 820px) {
  .cmp-grid, .cmp-parc, .cmp-parc-fields, .cmp-itens-wrap { grid-template-columns: 1fr; }
  .cmp-grid .cmp-col2 { grid-column: auto; }
}

/* ---- Contabilidade: plano de contas, centros, lançamentos ---- */
.ct-tbl td { vertical-align: middle; }
.ct-tbl tr.ct-sint td { background: var(--surface-2); }
.ct-cod { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; margin-right: 6px; }
.ct-nat { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center;
  border-radius: 6px; font-weight: 800; font-size: 12px; }
.ct-nat-devedora { color: #b5324f; background: #fbe9ee; }
.ct-nat-credora { color: #2c9c66; background: #e8f6ef; }
.lc-tbl .lc-c-conta { min-width: 240px; }
.lc-conta-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; }
.lc-conta-pick:hover { border-color: #d3d7e0; }
.lc-conta-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.lc-conta-nome.is-placeholder { color: var(--muted); }
.lc-conta-pick .lookup-caret { color: var(--muted); flex: none; display: inline-flex; }
.lc-conta-pick .lookup-caret svg { width: 15px; height: 15px; }
.lc-dc { width: 110px; }
.lc-bal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding: 13px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; color: var(--ink-2); }
.lc-bal b { font-variant-numeric: tabular-nums; color: var(--ink); margin-left: 5px; }
.lc-bal-dif { margin-left: auto; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.lc-bal-dif.ok { color: #2c9c66; background: #e8f6ef; }
.lc-bal-dif.off { color: #c0304a; background: #fbeef0; }

/* DRE — demonstração de resultado (a estrela dos relatórios) */
.dre-wrap { max-width: 780px; }
.dre-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px 4px; }
.dre-sec { padding: 0 18px; }
.dre-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; }
.dre-tit { font-size: 14px; color: var(--ink-2); }
.dre-nums { display: inline-flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.dre-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.dre-pct { font-size: 12px; color: var(--muted); min-width: 50px; text-align: right; font-variant-numeric: tabular-nums; }
.dre-negativa .dre-val { color: #c0304a; }
.dre-positiva .dre-val { color: #2c9c66; }
.dre-subtotal .dre-row { border-top: 1px solid var(--line); }
.dre-subtotal .dre-tit, .dre-subtotal .dre-val { font-weight: 750; color: var(--ink); font-size: 15px; }
.dre-resultado .dre-row { border-top: 2px solid var(--ink); padding: 14px 0 8px; }
.dre-resultado .dre-tit { font-size: 15px; font-weight: 800; color: var(--ink); }
.dre-resultado .dre-val { font-size: 21px; font-weight: 800; }
.dre-resultado.is-lucro .dre-val { color: #2c9c66; }
.dre-resultado.is-prejuizo .dre-val { color: #c0304a; }
.dre-detalhes { padding: 0 0 10px 2px; display: flex; flex-direction: column; gap: 3px; }
.dre-linha { display: flex; gap: 10px; font-size: 12.5px; color: var(--muted); }
.dre-l-cod { font-variant-numeric: tabular-nums; min-width: 60px; }
.dre-l-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dre-l-val { font-variant-numeric: tabular-nums; }
.bal-tbl td { font-variant-numeric: tabular-nums; }
/* Razão — resumo */
.rz-resumo { display: flex; gap: 26px; flex-wrap: wrap; padding: 13px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; }
.rz-resumo > div { display: flex; flex-direction: column; gap: 2px; }
.rz-r-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rz-resumo b { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Relatórios contábeis — controles do filtro */
.rel-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.rel-check input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.rel-hint { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Livro Diário */
.dia-tbl td { font-variant-numeric: tabular-nums; }
.dia-tbl tr.dia-head td { background: var(--surface-2); font-weight: 650; color: var(--ink-2); font-size: 12.5px; }
.dia-tbl tr.dia-tot td { border-top: 2px solid var(--line); font-weight: 750; background: var(--surface-2); }

/* EBITDA — heros + cascata */
.eb-heros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.eb-hero { display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.eb-hero.is-ebitda { border-left: 4px solid #16a34a; }
.eb-h-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.eb-h-val { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.eb-hero.is-ebitda .eb-h-val { color: #159a5c; }
.eb-h-sub { font-size: 12.5px; color: var(--ink-2); }
.eb-hero.is-ebitda .eb-h-sub { color: #159a5c; font-weight: 600; }
.eb-tbl td { font-variant-numeric: tabular-nums; }
.eb-tbl td:last-child { text-align: right; width: 180px; }
.eb-row.is-sub td { background: var(--surface-2); font-weight: 700; }
.eb-row.is-ebitda td { background: #e7f7ee; font-weight: 800; color: #127a49; }
.eb-row.is-ll td { background: var(--primary-soft); font-weight: 800; color: var(--primary); }
@media (prefers-color-scheme: dark) {
  .eb-row.is-ebitda td { background: rgba(22,163,74,.16); color: #4ade80; }
}

/* ==== Financeiro 2.0: contas a pagar/receber com parcelas ==== */
.fin-tbl tbody tr.fin-trow { cursor: pointer; }
.fin-tbl tbody tr.fin-trow:hover { background: var(--surface-2); }
.fin-tbl tbody tr.fin-trow.is-open { background: var(--primary-soft); }
.fin-chev { color: var(--muted); }
.fin-chev svg { width: 16px; height: 16px; transition: transform .16s ease; }
.fin-trow.is-open .fin-chev svg { transform: rotate(180deg); color: var(--primary); }
.fin-sub { font-size: 11.5px; margin-top: 2px; }
.fin-prog { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 4px; }
.fin-prog-bar { height: 100%; background: linear-gradient(90deg, #2c9c66, #35b177); border-radius: 999px; }
.fin-pago-txt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fin-detrow > td { background: var(--surface-2); padding: 0 !important; }
.fin-parc { padding: 6px 14px 14px 14px; }
.fin-parc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-parc-tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; }
.fin-parc-tbl td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: middle;
  font-variant-numeric: tabular-nums; }
.fin-p-n { font-weight: 700; color: var(--ink-2); }

/* Baixa (pagar/receber) */
.baixa-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 16px; }
.baixa-desc { font-weight: 650; font-size: 15px; }
.baixa-saldo { text-align: right; }
.baixa-saldo span { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.baixa-saldo b { font-size: 20px; color: var(--primary); font-variant-numeric: tabular-nums; }
.fin-adv-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; background: none; border: 0;
  color: var(--primary); font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 0; }
.fin-adv-toggle svg { width: 15px; height: 15px; }
.baixa-liq { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 16px;
  border-radius: 12px; background: var(--ink); color: #fff; }
.baixa-liq span { font-size: 13px; opacity: .82; }
.baixa-liq b { font-size: 19px; font-variant-numeric: tabular-nums; }

/* Preview de parcelas no "novo título" */
.fin-prev { margin-top: 2px; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.fin-prev-head { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.fin-prev-head svg { width: 15px; height: 15px; color: var(--primary); }
.fin-prev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.fin-prev-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-variant-numeric: tabular-nums; }
.fin-prev-item span:first-child { color: var(--primary); font-weight: 700; }
.fin-prev-item b { margin-left: auto; }

/* Bancos / caixa — consolidado */
.fin-cons { display: flex; align-items: center; gap: 18px; padding: 16px 20px; margin-bottom: 18px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.fin-cons-ico { flex: none; width: 52px; height: 52px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; }
.fin-cons-ico svg { width: 26px; height: 26px; }
.fin-cons-body { flex: none; min-width: 210px; }
.fin-cons-body .muted { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.fin-cons-val { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; display: block; color: #2c9c66; line-height: 1.15; }
.fin-cons-val.is-neg { color: #c0304a; }
.fin-cons-sub { font-size: 12.5px; margin-top: 2px; }
.fin-cons-break { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-left: 1px solid var(--line); padding-left: 18px; align-self: stretch; }
.fin-cons-mini { display: flex; flex-direction: column; gap: 1px; padding: 7px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; min-width: 140px; }
.fin-cons-mini .mini-l { font-size: 11px; color: var(--muted); }
.fin-cons-mini .mini-v { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; color: #2c9c66; }
.fin-cons-mini .mini-v.is-neg { color: #c0304a; }

/* Bancos / caixa — cards */
.fin-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.fin-bcard { display: flex; flex-direction: column; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer; transition: box-shadow .14s, transform .14s; }
.fin-bcard:hover { box-shadow: 0 6px 18px rgba(20,20,40,.09); transform: translateY(-1px); }
.fin-bcard.is-off { opacity: .55; }
.fin-bhead { display: flex; align-items: flex-start; gap: 12px; }
.fin-bavatar { flex: none; width: 50px; height: 50px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.fin-bavatar.is-caixa { background: #2c9c66; }
.fin-bavatar svg { width: 23px; height: 23px; }
.fin-bhead-id { flex: 1; min-width: 0; }
.fin-btop { display: flex; align-items: center; gap: 8px; }
.fin-bnome { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-boff { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 100px; background: var(--surface-2); color: var(--muted); flex: none; }
.fin-bbanco { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-bsaldo { flex: none; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.fin-bsaldo .muted { font-size: 11px; }
.fin-bsaldo strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2c9c66; white-space: nowrap; }
.fin-bsaldo strong.is-neg { color: #c0304a; }
.fin-bconta { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--ink-2); }
.fin-bpills { display: flex; flex-wrap: wrap; gap: 5px; }
.fin-bpill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.fin-bpill.is-pix { background: #fdf1d6; color: #9a6a12; }
.fin-bpill.is-warn { background: #fde3e3; color: #b3273f; }
.fin-bacts { display: flex; gap: 6px; margin-top: 3px; padding-top: 11px; border-top: 1px solid var(--line); }
.fin-bacts .btn { flex: 1; justify-content: center; }
.is-neg { color: #c0304a; }

/* Extrato (drawer) */
.ext-drawer { display: flex; flex-direction: column; gap: 14px; }
.ext-sub { font-size: 13px; color: var(--ink-2); font-family: var(--mono, ui-monospace, monospace); }
.ext-per { margin: 0; }
.ext-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 13px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.ext-resumo > div { display: flex; flex-direction: column; gap: 2px; }
.ext-resumo .muted { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.ext-resumo b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ext-resumo b.is-neg { color: #c0304a; }
.ext-lista { display: flex; flex-direction: column; }
.ext-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ext-row.is-estornado { opacity: .5; text-decoration: line-through; }
.ext-data { width: 78px; flex: none; color: var(--muted); font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.ext-hist { flex: 1; min-width: 0; }
.ext-hist > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-meta { color: var(--muted); font-size: 11px; }
.ext-valor { width: 110px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.ext-saldo { width: 96px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.ext-acao { width: 30px; flex: none; text-align: right; }
.ext-estornar { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 6px; display: inline-flex; }
.ext-estornar:hover { color: #c0304a; background: var(--surface-2); }
.ext-estornar svg { width: 16px; height: 16px; }

/* Caixa (dinheiro em espécie) */
.fin-cons.caixa-cons { background: #eaf7ef; border-color: #cfe9d9; }
.fin-cons .caixa-cons-ico { background: #2c9c66; }
@media (prefers-color-scheme: dark) { .fin-cons.caixa-cons { background: rgba(44,156,102,.12); border-color: rgba(44,156,102,.3); } }
:root[data-theme="dark"] .fin-cons.caixa-cons { background: rgba(44,156,102,.12); border-color: rgba(44,156,102,.3); }
.caixa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.caixa-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); }
.caixa-head { display: flex; align-items: center; gap: 14px; }
.caixa-ico { flex: none; width: 50px; height: 50px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: #2c9c66; color: #fff; }
.caixa-ico svg { width: 25px; height: 25px; }
.caixa-id { flex: 1; min-width: 0; }
.caixa-nome { font-weight: 700; font-size: 16px; }
.caixa-id .muted { font-size: 12.5px; }
.caixa-saldo { flex: none; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.caixa-saldo .muted { font-size: 11px; }
.caixa-saldo strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2c9c66; white-space: nowrap; }
.caixa-saldo.is-neg strong { color: #c0304a; }
.caixa-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.caixa-acts .btn { flex: 1; min-width: 96px; justify-content: center; }
.caixa-acts .caixa-in { color: #2c9c66; }
.caixa-acts .caixa-out { color: #c0304a; }

/* Fluxo de caixa */
.fx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .fx-kpis { grid-template-columns: repeat(2, 1fr); } }
.fx-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.fx-k-lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.fx-k-val { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-k-val.is-pos { color: #2c9c66; }
.fx-k-val.is-neg { color: #c0304a; }
.fx-k-val.is-strong { color: var(--primary); }
.fx-k-sub { font-size: 11.5px; color: var(--muted); }

.fx-alertas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.fx-alerta { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); flex: 1; min-width: 220px; }
.fx-alerta svg { width: 22px; height: 22px; flex: none; }
.fx-alerta.is-danger { border-color: #f2c4cd; background: #fdeef0; color: #b3273f; }
.fx-alerta.is-warn { border-color: #f0dcb0; background: #fdf6e8; color: #9a6a12; }
.fx-alerta.is-info { border-color: #cfe0f2; background: #eef4fb; color: #1f5fa8; }
.fx-alerta.is-ok { border-color: #cfe9d9; background: #eaf7ef; color: #1f7a4d; }
.fx-a-tit { font-size: 13px; font-weight: 650; }
.fx-a-val { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-a-val .muted { font-weight: 500; font-size: 12px; }
@media (prefers-color-scheme: dark) {
  .fx-alerta.is-danger { background: rgba(192,48,74,.13); border-color: rgba(192,48,74,.35); color: #f0687f; }
  .fx-alerta.is-warn { background: rgba(154,106,18,.15); border-color: rgba(180,130,30,.35); color: #e0b158; }
  .fx-alerta.is-info { background: rgba(31,95,168,.15); border-color: rgba(31,95,168,.35); color: #7fb0e6; }
  .fx-alerta.is-ok { background: rgba(31,122,77,.15); border-color: rgba(31,122,77,.35); color: #4ecb8b; }
}

.fx-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .fx-cols { grid-template-columns: 1fr; } }
.fx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); }
.fx-sec-tit { font-size: 14px; font-weight: 720; margin-bottom: 14px; }

.fx-sem { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fx-sem:last-of-type { border-bottom: 0; }
.fx-sem-lbl { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fx-sem-bars { display: flex; gap: 2px; height: 12px; align-items: center; }
.fx-bar-in { height: 12px; background: #2c9c66; border-radius: 3px; min-width: 0; }
.fx-bar-out { height: 12px; background: #c0304a; border-radius: 3px; min-width: 0; }
.fx-sem-mov { display: flex; flex-direction: column; align-items: flex-end; font-size: 11.5px; font-variant-numeric: tabular-nums; line-height: 1.35; }
.fx-sem-saldo { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; min-width: 92px; color: #2c9c66; }
.fx-sem-saldo.is-neg { color: #c0304a; }
.fx-sem.is-neg { background: #fdeef0; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
@media (prefers-color-scheme: dark) { .fx-sem.is-neg { background: rgba(192,48,74,.12); } }

.fx-pr-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fx-pr-row:last-of-type { border-bottom: 0; }
.fx-pr-lbl { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.fx-pr-b { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; margin-bottom: 5px; }
.fx-pr-t { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.fx-pr-track { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.fx-pr-fill { height: 14px; border-radius: 7px; min-width: 2px; transition: width .3s; }
.fx-pr-fill.is-prev { background: #94a3b8; }
.fx-pr-fill.is-posb { background: #2c9c66; }
.fx-pr-fill.is-negb { background: #c0304a; }
.fx-pr-b b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Conciliação bancária */
.cc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cc-conta { font-size: 17px; font-weight: 750; }
.cc-conta .muted { font-weight: 500; font-size: 13px; }
.cc-per { margin: 0; }
.cc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 900px) { .cc-kpis { grid-template-columns: repeat(2, 1fr); } }
.cc-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 13px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.cc-k-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.cc-kpi strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cc-kpi.is-ok strong { color: #2c9c66; }
.cc-kpi.is-bad strong { color: #c0304a; }
.cc-dica { margin: 0 0 14px; }

.cc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .cc-cols { grid-template-columns: 1fr; } }
.cc-col { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.cc-col-head { padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.cc-badge { font-size: 11.5px; font-weight: 700; background: var(--ink); color: var(--surface); border-radius: 100px; padding: 1px 8px; }
.cc-list { max-height: 62vh; overflow-y: auto; }
.cc-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.cc-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; transition: background .1s; }
.cc-row:last-child { border-bottom: 0; }
.cc-row:hover { background: var(--surface-2); }
.cc-row.is-sel { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.cc-row.cc-sis.is-match { background: #e7f7ee; box-shadow: inset 3px 0 0 #2c9c66; }
.cc-row.cc-sis.is-match:hover { background: #d8f0e2; }
@media (prefers-color-scheme: dark) { .cc-row.cc-sis.is-match { background: rgba(44,156,102,.16); } }
.cc-row.is-conc { opacity: .5; cursor: default; }
.cc-data { width: 74px; flex: none; color: var(--muted); font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.cc-hist { flex: 1; min-width: 0; }
.cc-hist > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-meta { color: var(--muted); font-size: 11px; }
.cc-valor { width: 104px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.cc-acts { width: 52px; flex: none; display: flex; gap: 3px; justify-content: flex-end; }
.cc-mini { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-flex; }
.cc-mini:hover { color: var(--primary); background: var(--surface-2); }
.cc-mini svg { width: 16px; height: 16px; }

/* Conciliação — escolher conta (entrada pelo menu) */
.cc-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 6px; }
.cc-pick { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; box-shadow: var(--shadow); cursor: pointer; font: inherit; color: inherit; transition: box-shadow .14s, transform .14s; }
.cc-pick:hover { box-shadow: 0 6px 18px rgba(20,20,40,.09); transform: translateY(-1px); }
.cc-pick-av { flex: none; width: 46px; height: 46px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--surface); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.cc-pick-av svg { width: 22px; height: 22px; }
.cc-pick-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cc-pick-nome { font-weight: 700; font-size: 15px; }
.cc-pick-id .muted { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-pick-go { flex: none; color: var(--muted); }
.cc-pick-go svg { width: 20px; height: 20px; }

/* Relatório gerencial (CMV / ABC / giro) */
.rg-sec { margin-bottom: 26px; }
.rg-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.rg-sec-h h3 { font-size: 17px; font-weight: 750; margin: 0; }
.rg-sec-h h4 { font-size: 14px; font-weight: 700; margin: 0; }
.rg-sec-h .muted { font-size: 12.5px; }
.rg-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .rg-kpis { grid-template-columns: 1fr; } }
.rg-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.rg-k-lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.rg-kpi strong { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rg-kpi strong.is-strong { color: var(--primary); }
.rg-kpi strong.is-neg { color: #c0304a; }
.rg-k-sub { font-size: 11.5px; color: var(--muted); }

.rg-abc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 760px) { .rg-abc-cards { grid-template-columns: 1fr; } }
.rg-abc-card { border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; background: var(--surface); border-left-width: 4px; }
.rg-abc-a { border-left-color: #c0304a; }
.rg-abc-b { border-left-color: #d99a2b; }
.rg-abc-c { border-left-color: #2c9c66; }
.rg-abc-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rg-abc-v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.rg-abc-m { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.rg-abc-d { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

.rg-tbl td { font-variant-numeric: tabular-nums; }
.rg-un { font-size: 11px; }
.rg-cls { display: inline-flex; width: 18px; height: 18px; border-radius: 5px; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; margin-right: 4px; }
.rg-cls-A { background: #c0304a; }
.rg-cls-B { background: #d99a2b; }
.rg-cls-C { background: #2c9c66; }
.rg-acum { display: inline-flex; align-items: center; gap: 7px; min-width: 120px; justify-content: flex-end; }
.rg-acum-bar { height: 6px; border-radius: 3px; background: var(--primary); opacity: .55; max-width: 70px; }
.rg-acum span { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.rg-parados { margin-top: 4px; }

/* Caixa — turno (lista de caixas + sessão) */
.cxp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.cxp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); }
.cxp-head { display: flex; align-items: center; gap: 12px; }
.cxp-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: #2c9c66; color: #fff; }
.cxp-ico svg { width: 24px; height: 24px; }
.cxp-id { flex: 1; min-width: 0; }
.cxp-nome { font-weight: 700; font-size: 16px; }
.cxp-id .muted { font-size: 12px; }
.cxp-badge { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 100px; }
.cxp-badge.is-open { background: rgba(44,156,102,.15); color: #1f7a4d; }
.cxp-badge.is-closed { background: var(--surface-2); color: var(--muted); }
.cxp-saldo { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.cxp-saldo .muted { font-size: 12px; }
.cxp-saldo strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2c9c66; }
.cxp-saldo strong.is-neg { color: #c0304a; }
.cxp-acts .btn { width: 100%; justify-content: center; }

.cxs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cxs-nome { font-size: 18px; font-weight: 750; display: flex; align-items: center; gap: 9px; }
.cxs-head .muted { font-size: 12.5px; }
.cxs-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.cxs-acoes .cxs-in { color: #2c9c66; }
.cxs-acoes .cxs-out { color: #c0304a; }
.cxs-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 760px) { .cxs-kpis { grid-template-columns: repeat(2, 1fr); } }
.cxs-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 13px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.cxs-kpi span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.cxs-kpi strong { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cxs-kpi strong.is-pos { color: #2c9c66; }
.cxs-kpi strong.is-neg { color: #c0304a; }
.cxs-kpi strong.is-strong { color: var(--primary); }
.cxs-diverg { padding: 11px 15px; border-radius: 11px; margin-bottom: 14px; font-size: 13.5px; }
.cxs-diverg.is-falta { background: #fdeef0; color: #b3273f; }
.cxs-diverg.is-sobra { background: #eaf7ef; color: #1f7a4d; }
@media (prefers-color-scheme: dark) { .cxs-diverg.is-falta { background: rgba(192,48,74,.14); } .cxs-diverg.is-sobra { background: rgba(44,156,102,.15); } }

.cxm-tbl td { font-variant-numeric: tabular-nums; }
.cxm-cat { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.cxm-cat.cxm-recebimento { background: rgba(44,156,102,.14); color: #1f7a4d; }
.cxm-cat.cxm-pagamento, .cxm-cat.cxm-despesa { background: #fde3e3; color: #b3273f; }
.cxm-cat.cxm-sangria { background: #fdf1d6; color: #9a6a12; }
.cxm-cat.cxm-suprimento { background: var(--primary-soft); color: var(--primary); }
.cxm-cat.cxm-divergencia { background: var(--surface-2); color: var(--muted); }
tr.is-estornado td { opacity: .5; text-decoration: line-through; }

/* segmentado do modal (avulso × título) */
.cxseg { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.cxseg-b { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); background: none; border: 0; border-radius: 7px; padding: 6px 14px; cursor: pointer; }
.cxseg-b.is-active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.cxseg-b:disabled { opacity: .5; cursor: not-allowed; }

.cxf-esperado { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 15px; background: var(--surface-2); border-radius: 11px; }
.cxf-esperado strong { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cxf-diverg { font-size: 13.5px; font-weight: 600; min-height: 20px; }
.cxf-diverg .cxf-ok { color: #1f7a4d; }
.cxf-diverg .cxf-falta { color: #c0304a; }
.cxf-diverg .cxf-sobra { color: #9a6a12; }
.fin-in { color: #2c9c66; font-weight: 650; display: inline-flex; align-items: center; gap: 3px; }
.fin-out { color: #c0304a; font-weight: 650; display: inline-flex; align-items: center; gap: 3px; }
.fin-in svg, .fin-out svg { width: 14px; height: 14px; }
tr.is-estornado td { opacity: .5; text-decoration: line-through; }

/* Rateio contábil (modal de título) */
.rt-actions { margin-left: auto; display: inline-flex; gap: 8px; }
.rt-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.rt-btn:hover { border-color: var(--primary); color: var(--primary); }
.rt-btn svg { width: 14px; height: 14px; }
.rt-tbl th { font-size: 11px; }
.rt-tbl .lc-conta-pick { padding: 7px 10px; font-size: 13px; }
.rt-pct-cell { width: 120px; }
.rt-pct-wrap { max-width: 110px; margin-left: auto; }
.rt-pct-wrap input { text-align: right; }
.rt-pct-wrap span { order: 2; padding-left: 2px; }
.rt-val { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rt-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.rt-soma { font-size: 13px; color: var(--muted); white-space: nowrap; }
.rt-soma b { font-variant-numeric: tabular-nums; color: var(--ink); }

/* Parcelas editáveis (modal de título) */
.fin-pe-head, .fin-pe-row { display: grid; grid-template-columns: 70px minmax(140px, 220px) minmax(150px, 240px); gap: 12px; align-items: center; }
.fin-pe-head { padding: 0 2px 6px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fin-pe-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 2px; }
.fin-pe-row { padding: 2px; }
.fin-pe-n { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.fin-pe-val, .fin-pe-venc { width: 100%; }

/* Seta "abrir" na linha do título + drawer de visualização */
.fin-go { color: var(--muted); text-align: right; }
.fin-go svg { width: 16px; height: 16px; }
.fin-trow:hover .fin-go { color: var(--primary); }
.dv { display: flex; flex-direction: column; gap: 18px; }
.dv-head { display: flex; flex-direction: column; gap: 6px; }
.dv-origem { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-2);
  background: var(--line-2); border-radius: 999px; padding: 3px 11px; }
.dv-desc { font-size: 18px; font-weight: 650; color: var(--ink); }
.dv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dv-lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.dv-val { font-size: 15px; font-weight: 600; color: var(--ink); }
.dv-total { font-size: 20px; color: var(--primary); font-variant-numeric: tabular-nums; }
.dv-sec-lbl { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em; }
.dv-sec-lbl svg { width: 15px; height: 15px; color: var(--primary); }
.dv-rt { margin-top: -8px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.dv-rt-line { font-variant-numeric: tabular-nums; }
.dv-cc { color: var(--muted); font-size: 12.5px; }
.dv-parcelas { margin-top: -8px; display: flex; flex-direction: column; gap: 8px; }
.dv-parc { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-2); }
.dv-parc.is-late { border-color: #f3c6cf; background: #fdf1f3; }
.dv-parc-n { flex: none; width: 34px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dv-parc-info { flex: 1; min-width: 0; }
.dv-parc-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.dv-parc-acoes { display: flex; gap: 6px; }
.dv-ctrl { margin-left: auto; display: flex; gap: 10px; }
/* Botões de controle coloridos (contorno + hover preenchido) */
.btn-ctrl { display: inline-flex; align-items: center; gap: 6px; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 16px; font-size: 14px;
  font-weight: 650; color: var(--ink-2); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.btn-ctrl svg { width: 16px; height: 16px; }
.btn-ctrl.is-plain:hover { background: var(--surface-2); border-color: #d3d7e0; color: var(--ink); }
.btn-ctrl.is-edit { color: #2563eb; border-color: #bcd0fb; }
.btn-ctrl.is-edit:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn-ctrl.is-warn { color: #c07a12; border-color: #f0d3a6; }
.btn-ctrl.is-warn:hover { background: #d98a2b; border-color: #d98a2b; color: #fff; }
.btn-ctrl.is-danger { color: var(--danger); border-color: #f0c0c9; }
.btn-ctrl.is-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Tipo tag + obrigatório (categorias) */
.fin-tt { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.fin-tt-despesa { color: #c0304a; background: #fbeef0; }
.fin-tt-receita { color: #2c9c66; background: #e8f6ef; }
.fin-tt-ambos { color: #6b6f9b; background: #eeeffb; }
.fin-req-tag { font-size: 10.5px; font-weight: 700; color: var(--warn); background: #fdf0dc; padding: 1px 6px; border-radius: 6px; }

/* ---- Ticket de PEDIDO (agrupamento das OPs) ----
   Regra do dono: OPs do mesmo pedido vêm juntas, não soltas. Layout de comanda de cozinha
   (KDS): uma "espinha" à esquerda com hora/cliente/estado (cor da borda = estado, pra ler
   de longe na TV) e, ao lado, as tortas daquele pedido em ladrilhos. Sem moldura dentro de
   moldura: o ticket é o cartão, os ladrilhos são leves. */
/* Quadro de tickets: eles fluem lado a lado e ocupam só a largura que precisam (um
   pedido de 1 torta não vira uma barra vazia de ponta a ponta). Ticket maior (mais
   tortas) ocupa mais espaço e, se passar da largura, os ladrilhos quebram dentro dele. */
.opg-board { display: flex; flex-direction: column; gap: 14px; padding: 4px; }
.opg { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; width: 100%; }
.opg-side { flex: none; width: 186px; padding: 13px 14px; display: flex; flex-direction: column; gap: 3px;
  background: var(--surface-2); border-left: 5px solid var(--muted); }
.opg-wait   { }  /* espinha âmbar (aguardando) */
.opg-wait   .opg-side { border-left-color: #e0a53a; }
.opg-prod   .opg-side { border-left-color: #3a52c4; }
.opg-done   .opg-side { border-left-color: #2c9c66; }
.opg-cancel .opg-side { border-left-color: #9aa2b1; }
.opg-late   .opg-side { border-left-color: #c0304a; background: #fdf2f4; }
.opg-hora { font-size: 23px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.opg-hora svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 5px; }
.opg-late .opg-hora { color: #c0304a; }
.opg-cli { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin-top: 4px;
  line-height: 1.2; overflow-wrap: anywhere; }
.opg-fone { font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.opg-sub { font-size: 11.5px; color: var(--muted); margin-top: 6px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 6px; }
.opg-tipo { font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px; }
.opg-tipo.is-ent { color: var(--primary); background: var(--primary-soft); }
.opg-tipo.is-ret { color: var(--ink-2); background: #eceef3; }
.opg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; margin-top: 11px; flex-wrap: wrap; }
.opg-ped { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.opg-count { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.opg-criado { font-size: 11px; color: var(--muted); margin-top: 6px; }
.opg-sub-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.opg-alerta { margin-top: 9px; align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  color: #fff; background: #c0304a; border-radius: 6px; padding: 3px 9px; }
@keyframes opg-blink-anim { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }
.opg-blink { animation: opg-blink-anim 1.1s ease-in-out infinite; box-shadow: 0 0 0 rgba(192,48,74,.5); }
@media (prefers-reduced-motion: reduce) { .opg-blink { animation: none; } }

.opg-verops { margin-top: 11px; width: 100%; font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 8px; cursor: pointer; transition: background .12s, border-color .12s; }
.opg-verops:hover { background: var(--primary-soft); border-color: #f0cdd6; color: var(--primary-dark); }

/* Ladrilhos das tortas: leves e COMPACTOS (o ticket é a moldura; o detalhe grande fica no
   modal "Visualizar OPs do pedido"). */
.opg-cards { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 10px; padding: 12px; }
.opg-cards .op-card { flex: 0 1 202px; background: #fff; border: 1px solid var(--line); box-shadow: none;
  border-radius: 11px; padding: 10px 12px; gap: 6px; }
.opg-cards .op-card:hover { box-shadow: 0 6px 16px rgba(20,24,40,.08); }
.opg-cards .op-card.is-done { opacity: .62; }
.opg-cards .op-card.is-done:hover { opacity: 1; }
.opg-cards .op-card.is-late { border-color: #f3c9d1; background: #fdf2f4; border-left: 3px solid #c0304a; }
.opg-cards .op-sabor { font-size: 13.5px; }
.opg-cards .op-tam { font-size: 10px; padding: 1px 5px; }
.opg-cards .op-corte { font-size: 12px; padding: 5px 8px; border-radius: 8px; }
.opg-cards .op-corte-l { font-size: 9px; }
.opg-cards .op-card-foot { font-size: 11px; }
.opg-cards .op-prog-lbl { font-size: 10px; }
.opg-alerta.is-done { color: #2c9c66; background: #e8f6ef; }

/* ===== Produção em TABELA (OPs por pedido) ===== */
.opg-tbl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opg-cols { --opg-grid: 112px minmax(140px, 1.6fr) 62px minmax(115px, 1.2fr) minmax(100px, 1.1fr) 122px 112px 34px; }
.opg-thead, .opg-row { display: grid; grid-template-columns: 112px minmax(140px, 1.6fr) 62px minmax(115px, 1.2fr) minmax(100px, 1.1fr) 122px 112px 34px;
  align-items: center; gap: 10px; padding: 10px 16px; }
.opg-thead { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line); background: var(--surface-2); }
.opg-row { border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .1s; }
.opg-row:last-child { border-bottom: 0; }
.opg-row:hover { background: var(--surface-2); }
.opg-row.is-late { background: #fdf2f4; }
.opg-row.is-late:hover { background: #fbe9ee; }
.opg-row.is-done { opacity: .68; }
.opg-row.is-done:hover { opacity: 1; }
.opg-row.is-cancel { opacity: .5; }
.opg-row.is-cancel .opg-c-prod b { text-decoration: line-through; }
.opg-c-prod { font-size: 13.5px; line-height: 1.25; }
.opg-c-prod b { font-weight: 750; }
.opg-c-prod .op-tam { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: var(--ink); color: #fff; letter-spacing: .03em; }
.opg-c-prod .op-qtd { font-weight: 800; color: var(--primary); margin-right: 4px; }
.opg-c-corte .op-corte-l { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--primary);
  background: var(--primary-soft); padding: 3px 8px; border-radius: 6px; }
.opg-c-desc { font-size: 13px; color: var(--ink-2); line-height: 1.25; min-width: 0; }
.opg-c-desc b { color: var(--ink); font-weight: 650; }
.opg-c-extra { font-size: 11px; color: var(--muted); margin-top: 2px; }
.opg-prog-txt { font-size: 11.5px; color: var(--ink-2); margin-bottom: 4px; white-space: nowrap; }
.opg-prog-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.opg-prog-bar i { display: block; height: 100%; border-radius: 999px; }
.opg-prog-bar.pg-amber i { background: #e0a53a; }
.opg-prog-bar.pg-blue i { background: #3a52c4; }
.opg-prog-bar.pg-green i { background: #2c9c66; }
.opg-prog-bar.pg-red i { background: #c0304a; }
.opg-prog-bar.pg-gray i { background: #b6bcc8; }
/* Início / Fim da produção. tabular-nums porque são horários empilhados: sem isso o "1"
   é mais estreito que o "8" e a coluna de minutos fica serrilhada de linha em linha. */
.opg-c-quando { font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }
.opg-q-ini { font-size: 13px; font-weight: 700; color: var(--ink); }
.opg-q-fim { font-size: 11.5px; color: var(--muted); }
.opg-q-fim.is-ok { color: #2c9c66; font-weight: 650; }
.opg-q-vazio { font-style: italic; }
.opg-c-op { font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.opg-c-menu { text-align: center; }
.opg-menu-dot { font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 6px; }
.opg-row:hover .opg-menu-dot { color: var(--primary); }
@media (max-width: 1080px) {
  .opg-thead { display: none; }
  .opg-row { grid-template-columns: 100px 1fr 110px; grid-auto-flow: row; row-gap: 4px; }
  .opg-c-corte, .opg-c-desc, .opg-c-menu { display: none; }
}

/* Barra de período */
.op-periodo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px;
  padding: 11px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.op-per-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.op-per-range { display: inline-flex; align-items: center; gap: 8px; transition: opacity .12s; }
.op-per-range.is-off { opacity: .4; pointer-events: none; }
.op-per-range input { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--ink); }
.op-per-dash { color: var(--muted); }
.op-per-btns { display: inline-flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.op-per-btn { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: all .12s; }
.op-per-btn:hover { border-color: #d3d7e0; }
.op-per-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.op-per-btn.is-danger { color: var(--danger); }
.op-per-btn.is-danger.is-active { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Abas A produzir / Produzidas (segmented) */
.op-abas { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.op-aba { font: inherit; font-size: 14px; font-weight: 650; color: var(--ink-2); background: none; border: 0;
  border-radius: 9px; padding: 8px 20px; cursor: pointer; transition: color .12s; }
.op-aba:hover { color: var(--ink); }
.op-aba.is-active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
/* Abas internas da Contabilidade (6 vistas): mais tabs, então padding menor e rolagem no aperto. */
.ct-abas { display: flex; max-width: 100%; overflow-x: auto; }
.ct-abas .op-aba { padding: 8px 15px; white-space: nowrap; }
.op-horizonte { justify-content: flex-start; }
.op-prod-info { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; font-size: 14px; color: var(--ink-2); }
.op-prod-info svg { width: 18px; height: 18px; color: #2c9c66; }
.op-prod-info b { font-size: 18px; color: var(--ink); }

/* Paginação */
.op-pag { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 16px 4px 6px; flex-wrap: wrap; }
.op-pag-n, .op-pag-arrow { font: inherit; font-size: 13.5px; font-weight: 700; min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 9px; color: var(--ink-2); cursor: pointer; }
.op-pag-n:hover, .op-pag-arrow:hover { border-color: #d3d7e0; }
.op-pag-n.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.op-pag-arrow:disabled { opacity: .4; cursor: default; }
.op-pag-info { margin-left: 12px; font-size: 12.5px; color: var(--muted); }
/* Sem a hora grande, a linha do topo do ladrilho guarda só a tag de status/etapa. */
.op-card-tagrow { justify-content: flex-end; min-height: 20px; }

/* Modal "Visualizar OPs do pedido": cartões no formato completo (com hora), maiores. */
.opm-sub { font-size: 13px; color: var(--muted); margin: 0 4px 12px; }
.opm-grid { padding: 0; }

@media (max-width: 720px) {
  .opg { flex-direction: column; }
  .opg-side { width: auto; border-left: none; border-top: 5px solid var(--muted); }
  .opg-wait .opg-side { border-top-color: #e0a53a; }
  .opg-prod .opg-side { border-top-color: #3a52c4; }
  .opg-done .opg-side { border-top-color: #2c9c66; }
  .opg-late .opg-side { border-top-color: #c0304a; }
  .opg-cancel .opg-side { border-top-color: #9aa2b1; }
}
.op-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; box-shadow: var(--shadow); cursor: pointer; display: flex; flex-direction: column; gap: 9px; font: inherit; }
.op-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,24,40,.09); }
.op-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.op-num { font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.op-card-cat { font-size: 13px; color: var(--ink-2); }

/* flex-start, nao center: a tag de etapa pode ter duas linhas ("aguarda PREPARO DO
   RECHEIO") e com `center` ela empurrava a HORA para baixo — a hora deixava de
   alinhar entre os cards da mesma linha, que e justo o que a TV usa p/ varrer. */
.op-hora-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
/* A hora e a primeira pergunta da cozinha ("o que sai agora?") — entao e o maior
   numero do card e usa tabular-nums p/ as horas alinharem entre os cards. */
.op-hora { font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.op-dia { font-size: 12px; color: var(--muted); margin-top: -4px; }
.op-tipo { font-weight: 800; color: var(--primary); }
.op-late { font-weight: 800; color: #c0392b; }

.op-sabor { font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.op-qtd { color: var(--primary); margin-right: 4px; }
/* Tamanho junto do sabor: e o mesmo dado ("que torta e essa?"), so que a linha
   inteira em corpo 19 empurraria o corte para fora do card. */
.op-tam { font-size: 11px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
/* O corte nao volta atras: torta cortada errado ja era. Por isso ele tem faixa
   propria e rotulo, em vez de virar mais uma etiqueta no meio das outras. */
.op-corte { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: var(--primary-soft); border: 1px solid #f2d3dc;
  border-radius: 10px; padding: 7px 10px; }
.op-corte-l { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--primary);
  background: #fff; border-radius: 5px; padding: 2px 5px; flex: none; }

.op-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.op-tag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #f1f3f7; color: var(--ink-2); }
.op-tag-add { background: #e9edff; color: #3a52c4; }
.op-tag-sem { background: #fdeaea; color: #b93a3a; }
.op-obs { font-size: 12.5px; color: var(--ink-2); }

/* Atrasada: faixa vermelha na lateral + fundo rosado. E o unico card que grita —
   se tudo gritasse, nada gritaria. */
.op-card.is-late { border-color: #f3c9d1; border-left: 3px solid #c0304a; background: #fdf2f4; }
.op-card.is-late .op-hora { color: #c0304a; }
.op-hora svg { width: 15px; height: 15px; flex: none; margin-right: 5px; vertical-align: -2px; }
/* Produzida sai da frente: continua na tela p/ conferencia, mas nao disputa
   atencao com o que ainda falta fazer. */
.op-card.is-done { opacity: .55; }
.op-card.is-done:hover { opacity: 1; }

/* Barra de etapas: duas metades da MESMA barra, partidas pelo rotulo no meio.
   margin-top:auto cola ela + o rodape no fundo do card; sem isso cada card
   termina na altura do proprio texto e os rodapes ficam escalonados dentro da
   mesma linha da grade — de longe, na TV, isso le como bagunca. */
.op-prog { display: flex; align-items: center; gap: 9px; margin-top: auto; }
.op-prog-seg { flex: 1; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; min-width: 0; }
.op-prog-seg > i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s ease; }
.op-prog-lbl { font-size: 11px; color: var(--muted); white-space: nowrap; flex: none; }
.pg-amber .op-prog-seg > i { background: #d98a00; }
.pg-blue  .op-prog-seg > i { background: #3a52c4; }
.pg-red   .op-prog-seg > i { background: #c0304a; }
.pg-green .op-prog-seg > i { background: #2c9c66; }
.pg-gray  .op-prog-seg > i { background: #9aa2b1; }
.op-card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
/* Nome e numero empilhados e alinhados a direita: lado a lado nao cabem no card
   junto do numero da OP, e o numero quebraria no meio. */
.op-cli { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; text-align: right; }
.op-cli-fone { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.badge-op { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
/* Nome de etapa e bem mais longo que "Aguardando" ("SEPARACAO DE INGREDIENTES").
   Deixa quebrar em vez de estourar o card, e limita a largura p/ nunca espremer
   a hora, que e quem manda na linha. */
.op-etapa-tag { white-space: normal; text-align: right; line-height: 1.3; max-width: 60%; }
/* Parada entre etapas: nao e trabalho acontecendo, entao nao usa a cor de
   "andando" — seria dizer que tem gente na torta quando nao tem. */
.st-espera { background: #f1f3f7; color: #6a7385; }
.st-aguardando { background: #fff3e0; color: #b06a00; }
.st-andamento { background: #e9edff; color: #3a52c4; }
.st-concluida { background: #e7f6ee; color: #2c7a52; }
.st-cancelada { background: #eee9ea; color: #8a7a80; }

/* OP: drawer de detalhe */
.op-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.op-head-sub { font-size: 13px; color: var(--ink-2); }
.op-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 14px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; }
.op-meta > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.op-meta-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.op-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 8px; }
.op-etapas { display: flex; flex-direction: column; gap: 8px; }
.op-etapa { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.op-etapa.et-doing { border-color: #b9c4f5; background: #f5f7ff; }
.op-etapa.et-done { border-color: #bfe6cf; background: #f2fbf6; }
.op-et-num { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px;
  background: var(--line); color: var(--ink-2); font-weight: 800; font-size: 12px; }
.et-doing .op-et-num { background: #3a52c4; color: #fff; }
.et-done .op-et-num { background: #2c7a52; color: #fff; }
.op-et-info { flex: 1; min-width: 0; }
.op-et-nome { font-size: 14px; font-weight: 600; color: var(--ink); }
.op-et-quando { margin-top: 5px; }
/* Início · Fim · Duração em campos rotulados. `flex-wrap` porque no tablet/celular os três
   não cabem lado a lado — quebram em linha, cada um levando o próprio título junto (é o
   ganho de rotular: o campo continua legível sozinho, fora da fila). */
.op-et-campos { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.op-et-campo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.op-et-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); line-height: 1.4; }
/* tabular-nums: são horários empilhados em coluna — sem isso os minutos desalinham. */
.op-et-val { font-size: 12.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.op-et-campo.is-dur .op-et-val { color: #2c7a52; }
.op-et-campo.is-doing .op-et-val { color: #3a52c4; }
.op-et-obs { font-weight: 500; font-style: italic; color: var(--muted); }
/* Veredito do SLA. A COR fica no veredito, não na meta: "60 min" é só o alvo, quem
   precisa saltar aos olhos é "já passou 12 min". */
.op-et-sla { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .01em; }
.op-et-sla.sla-ok { background: #e3f3ea; color: #1f6b45; }
.op-et-sla.sla-estourou { background: #fdeaee; color: #b02a44; }

/* Meta por etapa na tela de Estágios de Produção. */
.pe-sla { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.pe-sla-in { width: 74px; text-align: right; padding: 7px 8px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--ink); }
.pe-sla-in:focus { outline: none; border-color: var(--primary); }
.pe-sla-un { font-size: 11px; font-weight: 700; color: var(--muted); }
.op-et-acts { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.btn-ok { background: #2c7a52; color: #fff; border-color: #2c7a52; }
.btn-ok:hover { background: #256b47; }
.btn.btn-danger, .btn-ghost.btn-danger { color: #c0304a; }

/* Estágios de produção por categoria */
.prod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.prod-title { font-size: 16px; margin: 0; }
.prod-flow { list-style: none; margin: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.prod-etapa { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); }
.pe-num { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.pe-nome { flex: 1; border: 1px solid transparent; background: transparent; font-size: 14.5px; color: var(--ink);
  padding: 6px 8px; border-radius: 8px; }
.pe-nome:hover { background: var(--bg); }
.pe-nome:focus { border-color: var(--primary); background: var(--surface); outline: none; }
.pe-acts { display: flex; gap: 3px; flex-shrink: 0; }
.icon-act-danger:hover { color: #c0304a; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); }
.prod-vazio { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 14px; }

/* Pedido finalizado: itens travados (só leitura) */
.itens-lock-aviso { margin-left: auto; font-size: 12px; font-weight: 600; color: #c0304a;
  background: #fdecef; border: 1px solid #f3c9d1; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.itens-locked .item-editor { opacity: .55; pointer-events: none; }
.itens-locked .it-tr-del { display: none; }

/* Sub-rótulo de linha no form (ex.: "Preço por tamanho", "Consumo por tamanho") */
.adic-linha-lbl { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); margin: 4px 0 2px; }
/* Campo numérico com unidade fixa à direita (ex.: "60  g") */
.input-suf { position: relative; }
.input-suf > input { width: 100%; padding-right: 34px; }
.input-suf > .suf-un { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px; font-weight: 600; pointer-events: none; }

/* "Como ler esta tela" — painel explicativo recolhível nas telas de Estoque */
.est-ajuda { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.est-ajuda > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); user-select: none; }
.est-ajuda > summary::-webkit-details-marker { display: none; }
.est-ajuda > summary svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.est-ajuda > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s ease; }
.est-ajuda[open] > summary::after { transform: rotate(180deg); }
.est-ajuda[open] > summary { border-bottom: 1px solid var(--line); }
.est-ajuda ul { margin: 0; padding: 12px 16px 14px 30px; display: grid; gap: 7px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.est-ajuda li::marker { color: var(--primary); }
.est-ajuda strong { color: var(--ink); font-weight: 700; }

.cockpit-main { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 14px; align-items: start; }
.cockpit-left { min-width: 0; }
.cockpit-side { display: flex; flex-direction: column; gap: 14px; }

/* Card unico do grid: barra de abas de status no topo + tabela embaixo (como no mockup) */
.grid-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-top: 12px; }
.grid-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.st-tab { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; color: var(--ink-2);
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.st-tab:hover { background: rgba(20,24,40,.05); }
.st-tab.is-active { background: var(--primary); color: #fff; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.st-count { font-size: 11px; background: rgba(20,24,40,.08); border-radius: 999px; padding: 1px 7px; font-weight: 700; }
.st-tab.is-active .st-count { background: rgba(255,255,255,.25); }
/* pager dentro do card */
.grid-card .pager { padding: 10px 14px; border-top: 1px solid var(--line-2); margin: 0; }

.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; }
.side-tit { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); }
.side-tit svg { width: 15px; height: 15px; color: var(--primary); }
.side-sub { font-size: 11px; color: var(--muted); margin: 2px 0 10px; }
.venc-item { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); cursor: pointer; }
.venc-item:first-child { border-top: none; }
.venc-item:hover { background: var(--surface-2); }
/* Data em cima, janela embaixo: a lista cruza vários dias, então só a hora não
   diz nada — "09h–10h" de quando? */
.venc-hora { display: flex; flex-direction: column; gap: 1px; min-width: 54px; flex-shrink: 0; white-space: nowrap; }
.venc-dia { font-size: 11px; font-weight: 600; color: var(--muted); }
.venc-jan { font-weight: 700; font-size: 13px; color: var(--primary); }
.venc-nome { font-weight: 600; font-size: 13px; }
/* O número é a identidade do cliente — vem logo abaixo do nome, sem competir com ele. */
.venc-fone { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.venc-meta { font-size: 11px; color: var(--muted); margin: 1px 0 4px; }
.venc-badges { display: flex; flex-wrap: wrap; gap: 5px; }

.resumo-quick { display: flex; flex-direction: column; margin-top: 10px; }
.resumo-lin { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); padding: 9px 0; border-top: 1px solid var(--line-2); }
.resumo-lin:first-child { border-top: none; }
.resumo-lin strong { color: var(--primary); font-weight: 800; }

.prio { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.prio-urgente { background: #fdecef; color: #c0304a; }
.prio-alta { background: #fff3e0; color: #c77800; }
.prio-media { background: #eef4ff; color: #3d6ad6; }
.prio-baixa { background: var(--line-2); color: var(--muted); }

.tipo-badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 8px; white-space: nowrap; }
.tipo-entrega { background: #f0ebfb; color: #7c4dcc; }
.tipo-retirada { background: #e7f6ee; color: #2c9c66; }

.acoes-cel { white-space: nowrap; }
.icon-act { border: none; background: transparent; cursor: pointer; padding: 5px; border-radius: 7px; color: var(--muted); }
.icon-act:hover { background: rgba(20,24,40,.06); color: var(--primary); }
.icon-act svg { width: 16px; height: 16px; display: block; }

/* Tabela do cockpit: como no mockup — TUDO alinhado a esquerda, o titulo direto sobre o valor
   (mesmo padding em th e td), colunas distribuidas na largura cheia. */
.ped-tabela th, .ped-tabela td { padding: 10px 8px; vertical-align: middle; text-align: left; white-space: nowrap; }
.ped-tabela .cli-fone { font-size: 11.5px; white-space: nowrap; }
.ped-tabela .cel-hora { font-size: 11.5px; color: var(--muted); }

/* Ação rápida (próximo status) = botão com o rótulo, FIXO na coluna Ações (à esquerda do menu ⋮).
   Inline (não flutua, não sobrepõe nada). A tabela ocupa a largura toda, então cabe. */
.ped-tabela td.acoes-cel, .ped-tabela th:last-child { text-align: left; }
.quick-act { display: inline-flex; align-items: center; vertical-align: middle; white-space: nowrap;
  margin-right: 6px; border: 1px solid var(--primary); border-radius: 999px; cursor: pointer;
  background: var(--primary); color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 13px;
  transition: background .15s; }
.quick-act:hover { background: var(--primary-dark); }
.quick-act:disabled { opacity: .5; cursor: default; }

/* linha inteira clicável abre o pedido (substitui o antigo ícone de olho) */
.ped-tabela tbody tr[data-open] { cursor: pointer; }

/* Destaque da linha pela proximidade do prazo */
.ped-tabela tbody tr.row-atrasado td { background: #fdf2f4; }
.ped-tabela tbody tr.row-urg1 td { background: #fff3e7; }
.ped-tabela tbody tr.row-urg3 td { background: #fffbe6; }
.ped-tabela tbody tr:hover td { background: var(--surface-2); }
.ped-tabela tbody tr.row-atrasado:hover td { background: #fbe7eb; }
.ped-tabela tbody tr.row-urg1:hover td { background: #ffecd7; }
.ped-tabela tbody tr.row-urg3:hover td { background: #fcf6d7; }

/* ===== Estoque ===== */
.est-page { display: flex; flex-direction: column; gap: 14px; }
.est-kpis { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.est-tabs { display: flex; gap: 6px; }
.est-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.est-tab svg { width: 15px; height: 15px; }
.est-tab:hover { border-color: var(--primary); color: var(--primary); }
.est-tab.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.est-count { background: var(--primary-soft); color: var(--primary-dark); padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.est-tab.is-active .est-count { background: rgba(255,255,255,.25); color: #fff; }
.est-tabela th, .est-tabela td { padding: 11px 12px; }
.est-acoes { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.est-acoes .btn svg { width: 13px; height: 13px; }
.est-tabela tbody tr.row-repor td { background: #fdf2f4; }
.est-tabela tbody tr.row-repor:hover td { background: #fbe7eb; }
.est-comprar { color: var(--primary); }
.est-aviso { font-size: 11px; color: #c77800; margin-top: 2px; }
.est-compras-head { padding: 10px 14px; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.est-tabela tfoot td { padding: 11px 12px; border-top: 1px solid var(--line); }
.est-vazio { padding: 40px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.est-vazio svg { width: 34px; height: 34px; color: var(--line); }
.est-vazio p { margin: 0; font-weight: 600; color: var(--ink-2); }
.est-vazio span { font-size: 12.5px; }
.est-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.est-search { flex: 0 1 320px; max-width: 320px; }
.est-controls .est-filtros { margin-left: auto; }
.est-filtros { display: flex; gap: 6px; }
.est-fbtn { padding: 6px 13px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.est-fbtn:hover { border-color: var(--ink-2); }
.est-fbtn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Bolinha da cor do status: liga o chip ao card sem precisar ler o rotulo. */
.chip-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* Seletor do dia (topo da Producao) — a cozinha trabalha um dia por vez. */
.op-dia-pick { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; height: 34px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-2); }
.op-dia-pick:focus-within { border-color: var(--primary); }
.op-dia-pick svg { width: 16px; height: 16px; flex: none; }
.op-dia-pick input { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink); padding: 0; outline: none; }
.est-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.est-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; }
.est-tag-ins { background: var(--primary-soft); color: var(--primary-dark); }
.est-tag-prod { background: #eaf2ff; color: #3d6ad6; }
.mov-ped { color: var(--primary); cursor: pointer; font-weight: 600; }
.mov-ped:hover { text-decoration: underline; }
.est-movs .mov-data { font-size: 11.5px; white-space: nowrap; }

/* Histórico (kardex) no modal */
.hist-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.hist-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 9px; font-size: 12.5px; }
.hist-tipo { font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); }
.hist-entrada { background: #e7f6ee; color: #2c9c66; }
.hist-ajuste { background: #eef4ff; color: #3d6ad6; }
.hist-baixa_producao { background: #fff3e0; color: #c77800; }
.hist-estorno { background: var(--primary-soft); color: var(--primary-dark); }
.hist-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.hist-delta.pos { color: #2c9c66; }
.hist-delta.neg { color: #c0304a; }
.hist-saldo { color: var(--muted); }
.hist-data { color: var(--muted); font-size: 11px; margin-left: auto; }
.hist-obs { width: 100%; color: var(--ink-2); font-size: 11.5px; }

/* Linha de período dedicada da lista de Pedidos (de–até + presets) — igual Agenda */
.op-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.op-per-datas { display: inline-flex; align-items: center; gap: 8px; }
.op-per-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.op-per-datas input[type="date"] { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); outline: none; }
.op-per-datas input[type="date"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(181,50,79,.15); }
.op-per-datas input[type="date"]:disabled { opacity: .5; cursor: not-allowed; }
.op-per-datas i { color: var(--muted); font-style: normal; }
.op-per-btns { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.op-per-atras.is-active { background: #c0304a; border-color: #c0304a; color: #fff; }

/* Barra de filtros operacionais acima do grid */
.op-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.op-search { position: relative; flex: 1 1 220px; min-width: 180px; }
.op-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.op-search input { width: 100%; padding: 9px 12px 9px 36px; font-family: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); outline: none; transition: border .15s, box-shadow .15s; }
.op-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(181,50,79,.15); }
.op-sel { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 9px 32px 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 11px center; }
.op-sel:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(181,50,79,.15); }

/* Próximos vencimentos: scroll interno + destaque de atrasado + botão agenda */
.venc-list { max-height: 358px; overflow-y: auto; }
.venc-item.is-atrasado { background: #fdf2f4; border-radius: 8px; }
.venc-item.is-atrasado .venc-jan { color: var(--danger); }
.venc-item.is-atrasado .venc-dia { color: var(--danger); opacity: .75; }
.btn-agenda { margin-top: 12px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 9px; border-radius: 10px; cursor: pointer; transition: all .15s; }
.btn-agenda:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.btn-agenda svg { width: 15px; height: 15px; }

/* Em telas menores (ex.: notebook 1366/1280), a sidebar desce e a tabela ocupa a largura toda —
   assim as 8 colunas + a coluna Ações sempre cabem, sem cortar os ícones. */
@media (max-width: 1520px) {
  .cockpit-main { grid-template-columns: 1fr; }
  .cockpit-side { flex-direction: row; align-items: flex-start; }
  .cockpit-side > .side-card { flex: 1; }
}
@media (max-width: 1080px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } .cockpit-side { flex-direction: column; } }

.input-warn { border-color: #e0879a !important; background: #fdf1f3; }
.input-warn:focus { box-shadow: 0 0 0 3px rgba(178,48,70,.15) !important; }

/* Popup de confirmação estilizado (substitui window.confirm) */
.confirm-overlay { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 20px;
  background: rgba(20,24,40,.45); opacity: 0; transition: opacity .15s; }
.confirm-overlay.show { opacity: 1; }
.confirm-box { background: var(--surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(20,24,40,.35);
  width: 100%; max-width: 390px; padding: 26px 24px; text-align: center;
  transform: translateY(10px) scale(.97); transition: transform .16s ease; }
.confirm-overlay.show .confirm-box { transform: none; }
.confirm-ico { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); }
.confirm-ico.danger { background: #fdecef; color: #b23046; }
.confirm-ico svg { width: 26px; height: 26px; }
.confirm-title { margin: 0 0 7px; font-size: 17px; font-weight: 700; color: var(--ink); }
.confirm-msg { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.confirm-acts { display: flex; gap: 10px; justify-content: center; }
.confirm-acts .btn { min-width: 130px; justify-content: center; }
@media (max-width: 460px) { .confirm-acts { flex-direction: column-reverse; } .confirm-acts .btn { width: 100%; } }

.resumo-extra { margin-top: 14px; }
.resumo-sub-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--ink); }

/* ===== Tela de Cortes (master-detail) ===== */
.cortes-page { width: 100%; max-width: 1180px; }
.cortes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cortes-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.cortes-head .fh-ico { width: 22px; height: 22px; }
.cortes-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.stat-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.stat-card-ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); }
.stat-card-ico svg { width: 22px; height: 22px; }
.stat-card-num { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.stat-card-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* UM card só, com lista e edição lado a lado (separados por um divisor) */
.cortes-panel { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.cortes-panel-list { min-width: 0; padding: 16px; }
.cortes-panel-edit { min-width: 0; padding: 18px 20px; border-left: 1px solid var(--line); background: var(--surface-2); }
/* evita estouro dos campos no painel estreito */
.cortes-edit-body .field { min-width: 0; }
.cortes-edit-body input, .cortes-edit-body select { width: 100%; box-sizing: border-box; min-width: 0; }
.cortes-list-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cortes-tabs { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 10px; flex-wrap: wrap; }
.corte-tab { border: none; background: transparent; cursor: pointer; padding: 7px 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); font-family: inherit; }
.corte-tab:hover { color: var(--ink); }
.corte-tab.is-active { background: var(--primary); color: #fff; box-shadow: 0 3px 8px rgba(181,50,79,.3); }
.cortes-tabela-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: auto; max-height: 420px; }

.cortes-edit-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--primary); }
.cortes-edit-sub { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.5; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cortes-edit-acts { display: flex; gap: 10px; margin-top: 18px; }
.cortes-edit-acts .btn { flex: 1; justify-content: center; gap: 6px; }
.cortes-edit-acts .btn svg { width: 15px; height: 15px; }
.btn-danger-soft { background: #fff5f6; border-color: #f0c2cb; color: #b23046; }
.btn-danger-soft:hover { background: #fdecef; border-color: #e0879a; }

@media (max-width: 940px) {
  .cortes-stats { grid-template-columns: 1fr; }
  .cortes-panel { grid-template-columns: 1fr; }
  .cortes-panel-edit { border-left: none; border-top: 1px solid var(--line); }
}

/* ===== Produto: Preços + Adicionais lado a lado ===== */
.prod-precos-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.prod-precos-card { flex: 1.6; min-width: 0; margin-bottom: 0 !important; }
.prod-adic-card { flex: 1; min-width: 0; margin-bottom: 0 !important; }
@media (max-width: 900px) { .prod-precos-row { flex-direction: column; } .prod-precos-card, .prod-adic-card { width: 100%; flex: none; } }

/* ===== Painel master-detail genérico (usado na Ficha técnica) ===== */
.md-panel { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items: stretch;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.md-list { min-width: 0; padding: 14px; }
.md-edit { min-width: 0; padding: 16px 18px; border-left: 1px solid var(--line); background: var(--surface-2); }
.md-list-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.md-search { position: relative; flex: 1; }
.md-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.md-search input { width: 100%; box-sizing: border-box; padding-left: 36px !important; height: 38px; border-radius: 9px; }
.md-tabela-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 300px; }
.md-edit-title { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--primary); }
.md-edit-acts { display: flex; gap: 10px; margin-top: 16px; }
.md-edit-acts .btn { flex: 1; justify-content: center; gap: 6px; }
.md-edit-acts .btn svg { width: 15px; height: 15px; }
.md-edit .field { min-width: 0; }
.md-edit input, .md-edit select { width: 100%; box-sizing: border-box; min-width: 0; }
.fe-un-chip { flex-shrink: 0; min-width: 40px; text-align: center; padding: 7px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; }
@media (max-width: 820px) { .md-panel { grid-template-columns: 1fr; } .md-edit { border-left: none; border-top: 1px solid var(--line); } }

/* Menu de opcoes (dropdown por linha) */
.btn-menu { min-width: 96px; }
.menu-pop { position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.menu-item:hover { background: var(--line-2); }
.menu-item.danger { color: #b23046; }
.menu-item.danger:hover { background: #fdecef; }

/* Paginacao */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pager .muted { font-size: 12px; }
.pager-btns { display: flex; align-items: center; gap: 4px; }
.pager-num { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 8px; cursor: pointer; font-size: 13px; }
.pager-num:hover:not(:disabled):not(.is-active) { background: var(--line-2); color: var(--ink); }
.pager-num.is-active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pager-num:disabled { opacity: .4; cursor: default; }
.pager-gap { padding: 0 4px; color: var(--muted); }

/* Adicionais (formulario de produto) */
/* Adicionais selecionados (chips) no form de produto */
.adic-sel-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.adic-sel { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.adic-sel-nome { font-weight: 600; font-size: 13px; }
.adic-sel-precos { font-size: 11.5px; }
.adic-sel-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; line-height: 1; }
.adic-sel-x:hover { background: #fdecef; color: #b23046; }

/* Botão que abre um lookup (parece um select) */
.lookup-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--ink); transition: border .15s, box-shadow .15s; }
.lookup-btn:hover { border-color: #d3d7e0; }
.lookup-btn:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.lookup-btn .is-placeholder { color: var(--muted); }
.lookup-btn .lookup-caret { color: var(--muted); display: inline-flex; flex-shrink: 0; }
.lookup-btn .lookup-caret svg { width: 15px; height: 15px; display: block; }

/* Lookup (mini-grid dentro do modal) */
.lookup-search { position: relative; margin-bottom: 14px; }
.lookup-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.lookup-search input { width: 100%; box-sizing: border-box; padding-left: 42px; height: 46px; border-radius: 12px; font-size: 14px; }

.lookup-list { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; padding: 4px; margin: 0 -4px; }
.lookup-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--surface); cursor: pointer; text-align: left; font-family: inherit; color: var(--ink);
  transition: border-color .15s, background .15s, box-shadow .15s, transform .08s; }
.lookup-row:hover { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 6px 18px rgba(181,50,79,.10); }
.lookup-row:active { transform: scale(.995); }
.lookup-row:has(.lk-chk:checked) { border-color: var(--primary); background: var(--primary-soft); }

.lk-ava { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; text-transform: uppercase;
  font-weight: 700; font-size: 16px; color: #fff; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 4px 10px rgba(181,50,79,.28); }
.lk-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.lk-nome { font-weight: 600; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.lk-meta { font-size: 12px; color: var(--muted); }
.lk-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.lk-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); white-space: nowrap; }
.lk-pill.is-adic { background: #fff4e6; color: #b5651d; }

.lookup-row .lk-chk { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lk-check { width: 24px; height: 24px; flex-shrink: 0; margin-left: 4px; border-radius: 8px; border: 1.5px solid var(--line);
  display: grid; place-items: center; background: var(--surface); transition: background .15s, border-color .15s; }
.lk-check svg { width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity .15s; }
.lookup-row:has(.lk-chk:checked) .lk-check { background: var(--primary); border-color: var(--primary); }
.lookup-row:has(.lk-chk:checked) .lk-check svg { opacity: 1; }

.lk-go { margin-left: 4px; flex-shrink: 0; color: var(--muted); display: inline-flex; }
.lk-go svg { width: 18px; height: 18px; }
.lookup-row:hover .lk-go { color: var(--primary); }

/* Busca sem resultado: convida a cadastrar ali mesmo, sem sair do pedido. */
.lookup-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 16px; text-align: center;
  border: 1.5px dashed var(--line); border-radius: 14px; background: var(--surface-2);
}
.lookup-vazio p { margin: 0; font-size: 13.5px; color: var(--muted); }
.lookup-vazio #lkc-termo { color: var(--ink-2); font-weight: 600; }

/* Corte é obrigatório na torta salgada e não dá para desfazer depois de cortada:
   enquanto não escolher, o campo grita — e o item aparece marcado na lista. */
.it-corte-warn { display: none; color: var(--primary); font-weight: 600; margin-top: 3px; }
.it-corte-wrap.corte-alerta .it-corte-warn { display: block; }
.it-corte-wrap.corte-alerta select {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 0 0 3px rgba(181,50,79,.12);
}
.tag-corte {
  display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; background: var(--primary); color: #fff; white-space: nowrap;
}
.it-tr.sem-corte { background: var(--primary-soft); }

/* Endereços do cliente: lista dentro do form (casa, trabalho, casa da mãe...) */
.end-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.end-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.end-item.is-principal { border-color: var(--primary); background: var(--primary-soft); }
.end-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.end-apelido { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.end-linha { font-size: 13px; color: var(--ink-2); }
.end-acoes { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 720px) {
  .end-item { flex-direction: column; align-items: stretch; }
  .end-acoes { justify-content: flex-end; }
}

/* Pill do apelido dentro do seletor de endereço do pedido. */
.lk-pill { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--primary); color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.lookup-row.is-sel { border-color: var(--primary); background: var(--primary-soft); }

/* Número já tem dono: mostra quem e oferece usar aquele cadastro. */
.nc-existe {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; margin-bottom: 14px; border-radius: 12px;
  background: var(--primary-soft); border: 1.5px solid var(--primary);
}
.nc-existe-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nc-existe-txt strong { font-size: 14px; color: var(--primary-dark); }
.nc-existe-txt span { font-size: 12px; color: var(--ink-2); }
.nc-existe .btn { flex-shrink: 0; }

/* Busca reversa de CEP (rua -> CEP) nos forms de endereço */
.cep-busca { align-items: flex-start; }
.cep-busca .btn-sm { align-self: flex-start; }
.cep-lista { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; width: 100%; }
.cep-lista:empty { display: none; margin: 0; }
.cep-hint { font-size: 12px; color: var(--muted); margin-bottom: 1px; }
.cep-opt { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
  padding: 7px 11px; cursor: pointer; font: inherit; }
.cep-opt:hover { border-color: var(--primary); background: var(--primary-soft); }
.cep-opt-cep { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cep-opt-end { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Autocomplete de Cidade (restrito à lista de municípios GO+DF) */
.cid-drop { position: absolute; z-index: 60; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg);
  max-height: 240px; overflow-y: auto; padding: 4px; }
.cid-drop.hidden { display: none; }
.cid-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%;
  text-align: left; border: none; background: none; border-radius: 7px; padding: 7px 10px; cursor: pointer; font: inherit; }
.cid-opt:hover { background: var(--primary-soft); }
.cid-opt b { font-weight: 600; color: var(--ink); font-size: 13px; }
.cid-opt span { font-size: 11.5px; color: var(--muted); font-weight: 700; }

/* Campo somente-leitura (ex.: endereço de entrega = espelho do cadastro do cliente) */
input.input-ro { background: var(--surface-2); cursor: default; color: var(--ink); }
input.input-ro:focus { border-color: var(--line); box-shadow: none; }

/* ---------- Misc ---------- */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.stack { display: flex; flex-direction: column; gap: 4px; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt { margin-top: 18px; }
.money { font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2,1fr); } }
/* ---------- Tablet e celular: o menu vira GAVETA ----------
   Antes a sidebar virava uma TIRA HORIZONTAL no topo (flex-direction:row + overflow-x).
   Aquilo funcionava quando o menu era uma lista simples; hoje ele tem GRUPOS que abrem
   na vertical (Pedidos, Estoque, Fiscal, Financeiro, Contabilidade) — e grupo não cabe
   numa tira. Agora ela sai da esquerda por cima do conteúdo, mantendo a navegação
   igualzinha à do desktop. Abre pelo botão ☰ da topbar. */
@media (max-width: 900px) {
  #app, #app.collapsed { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%; width: min(280px, 84vw);
    z-index: 45; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 6px 0 32px rgba(0,0,0,.45); overflow-y: auto;
  }
  #app.nav-aberto .sidebar { transform: none; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(18,13,22,.55); z-index: 44;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  #app.nav-aberto .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* O "recolhido" do desktop (76px, só ícones) NÃO vale aqui: na gaveta há espaço de
     sobra e o flyout de hover não existe no toque. Anula o que a classe .collapsed faz. */
  #app.collapsed .sidebar { width: min(280px, 84vw); overflow-y: auto; }
  #app.collapsed .brand-title, #app.collapsed .brand-sub,
  #app.collapsed .nav-label, #app.collapsed .nav-search,
  #app.collapsed .side-row-text, #app.collapsed .side-logout { display: revert; }
  #app.collapsed .nav-caret { display: inline-flex; }
  #app.collapsed .nav-group-head { justify-content: flex-start; padding: 11px 12px; }
  #app.collapsed .nav-group-body { display: block; }
  #app.collapsed .side-account { justify-content: flex-start; padding: 8px 10px; }

  .form-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }

  /* Tabela larga rola DENTRO da própria caixa — a página nunca rola de lado.
     ⚠️ Sem o min-width isto NÃO funciona: `table { width:100% }` faz a tabela ENCOLHER
     para caber, e aí as colunas da direita (status, valor, ações) são espremidas até
     sumirem — o dado fica inalcançável, que é pior que rolar. O min-width força a
     tabela a ser mais larga que a tela, e é o .table-scroll que rola. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll > table { min-width: 700px; }
}
/* Ícone do botão: painel (desktop, "recolher") x hambúrguer (toque, "abrir menu"). */
.menu-toggle .ico-hamburguer { display: none; }
@media (max-width: 900px) {
  .menu-toggle .ico-painel { display: none; }
  .menu-toggle .ico-hamburguer { display: block; }
  /* Alvo de toque confortável (o dedo não acerta 28px). */
  .menu-toggle { min-width: 42px; min-height: 42px; }
}
/* No desktop a gaveta não existe. */
@media (min-width: 901px) { .nav-backdrop { display: none; } }

/* ============================================================
   Autenticação: conta na sidebar, tela de login, usuários
   ============================================================ */
/* Conta no rodapé da sidebar */
.side-account { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.side-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--gold-soft); background: rgba(201,169,106,.14); border: 1px solid rgba(201,169,106,.3); }
.side-row-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.side-row-text strong { font-size: 12.5px; font-weight: 600; color: #eae7f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-row-text span { font-size: 11px; color: #8a8194; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-logout { flex-shrink: 0; border: none; background: transparent; color: #8a8194; cursor: pointer; padding: 6px; border-radius: 8px; display: inline-grid; place-items: center; }
.side-logout:hover { background: rgba(255,255,255,.08); color: #fff; }
.side-logout svg { width: 17px; height: 17px; display: block; }
#app.collapsed .side-account { justify-content: center; padding: 8px 0; }
#app.collapsed .side-row-text, #app.collapsed .side-logout { display: none; }

/* ===== Tela de Login (split-screen editorial) ===== */
#app.auth-mode { display: block; min-height: var(--h-full); }
.login-wrap { display: grid; grid-template-columns: 1.08fr 1fr; min-height: var(--h-full); }

/* --- Painel hero (esquerda) --- */
.login-brand {
  position: relative; overflow: hidden; color: #efeaf0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(38px, 5vw, 60px);
  background:
    radial-gradient(120% 80% at 12% 8%, rgba(181,50,79,.28), transparent 55%),
    radial-gradient(90% 70% at 92% 96%, rgba(201,169,106,.14), transparent 52%),
    linear-gradient(155deg, #241a22 0%, #17121a 45%, #0e0b11 100%);
}
.login-brand::before {  /* grade sutil */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 100% at 30% 20%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 30% 20%, #000 30%, transparent 78%);
}
.login-brand > * { position: relative; z-index: 1; }
.lb-top { display: flex; align-items: center; gap: 13px; }
.lb-logo { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, var(--primary), var(--primary-dark)); box-shadow: 0 8px 22px rgba(181,50,79,.4); }
.lb-logo svg { width: 26px; height: 26px; }
.lb-brand-name { font-weight: 750; font-size: 16px; letter-spacing: .01em; }
.lb-brand-sub { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a99fb0; margin-top: 1px; }
.lb-hero { max-width: 520px; }
.lb-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: #cdbfd0; margin-bottom: 22px; }
.lb-eye-line { width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--gold)); }
.lb-headline { font-size: clamp(38px, 5.2vw, 62px); font-weight: 820; line-height: 1.03; letter-spacing: -.02em; margin: 0; color: #fbf8fb; text-wrap: balance; }
.lb-accent { background: linear-gradient(92deg, #e97ea0 0%, #d8a24b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lb-desc { margin: 24px 0 0; max-width: 440px; font-size: 15.5px; line-height: 1.62; color: #b9b0c1; }
.lb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.lb-stat { padding: 16px 16px 15px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(2px); }
.lb-stat-v { font-weight: 750; font-size: 17px; color: #fbf8fb; letter-spacing: -.01em; }
.lb-stat-l { font-size: 11.5px; color: #a99fb0; margin-top: 4px; line-height: 1.35; }
.lb-foot { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #9a90a3; letter-spacing: .01em; }
.lb-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ecb8b; box-shadow: 0 0 0 4px rgba(78,203,139,.16); }

/* --- Form (direita) --- */
.login-formside { display: grid; place-items: center; padding: 40px; background: var(--bg); }
.login-card { width: 100%; max-width: 392px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 38px 34px; }
.login-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--primary); }
.login-card h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 12px 0 0; }
.login-sub { margin: 6px 0 24px; font-size: 13.5px; color: var(--muted); }
.login-field { display: block; margin-bottom: 15px; }
.login-field > span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.login-input { position: relative; display: flex; align-items: center; }
.login-input > svg { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.login-input input { width: 100%; padding: 12px 40px; font-family: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); outline: none; transition: border .15s, box-shadow .15s; }
.login-input input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.login-eye { position: absolute; right: 8px; border: none; background: transparent; cursor: pointer; font-size: 15px; padding: 6px; opacity: .55; }
.login-eye:hover { opacity: 1; }
.login-err { background: #fdecef; color: #b0263f; border: 1px solid #f0c6d0; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }
.login-btn { width: 100%; padding: 14px; border: none; border-radius: 12px; background: linear-gradient(180deg, #b5324f, #8f223a); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(140,30,55,.32); transition: filter .15s, transform .12s; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.login-btn svg { width: 18px; height: 18px; transition: transform .15s; }
.login-btn:hover { filter: brightness(1.07); }
.login-btn:hover svg { transform: translateX(3px); }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: .7; cursor: default; }
.login-btn:disabled svg { display: none; }
.login-foot { text-align: center; margin-top: 22px; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
@media (max-width: 860px) { .login-wrap { grid-template-columns: 1fr; } .login-brand { display: none; } .login-card { box-shadow: none; border: 0; } }

/* ===== Página Usuários ===== */
.us-cell { display: flex; align-items: center; gap: 11px; }
.us-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-soft); }
.us-you { font-size: 10.5px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; }
.perfil-badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.perfil-admin { background: #f0ebfb; color: #7c4dcc; }
.perfil-operador { background: var(--line-2); color: var(--ink-2); }
.modal.modal-md { max-width: 480px; }

/* ============================================================
   Tabela de Frete (faixas com expandir-para-editar + simulador)
   ============================================================ */
.frete-page { display: flex; flex-direction: column; gap: 14px; }
.frete-card { padding: 0; overflow: hidden; }
.frete-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.frete-head-tit { display: flex; align-items: center; gap: 12px; }
.frete-head-tit h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.frete-head-tit p { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.frete-chips { display: flex; gap: 26px; flex: 1; justify-content: center; flex-wrap: wrap; }
.frete-chip { display: flex; align-items: center; gap: 10px; }
.frete-chip-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.frete-chip-ico svg { width: 15px; height: 15px; }
.frete-chip strong { font-size: 13.5px; font-weight: 700; color: var(--ink); display: block; line-height: 1.15; }
.frete-chip span { font-size: 11px; color: var(--muted); }
.frete-add { flex-shrink: 0; }

/* Altura limitada + scroll: a tabela real do dono tem 30 faixas (1 por km) e
   ficaria enorme. Cabecalho fixo (sticky) para o scroll continuar legivel. */
.frete-tabela-wrap { overflow-x: auto; overflow-y: auto; max-height: 340px; border: 1px solid var(--line-2); border-radius: 10px; }
.frete-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.frete-tabela thead th { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.frete-tabela tbody td { padding: 12px 16px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.frete-tabela .fr-num { width: 44px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fr-int { font-weight: 600; color: var(--ink); }
.fr-r { font-variant-numeric: tabular-nums; }
.fr-tipo-badge { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.fr-tipo-fixo { color: #7c4dcc; }
.frete-tabela .fr-acoes-h, .fr-acoes { text-align: right; white-space: nowrap; }
.fr-acoes .icon-act { color: var(--muted); }
.fr-acoes .fr-toggle svg { transition: transform .18s; }
.fr-tr.is-open .fr-toggle svg { transform: rotate(180deg); }
.fr-acoes .fr-del:hover { color: var(--danger); background: #fdecef; }
.fr-tr.is-open td { background: var(--primary-soft); border-top-color: transparent; }
.fr-tr.is-open td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

.fr-edit-tr td { padding: 0; border-top: none; background: var(--surface-2); }
.fr-editform { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 16px; align-items: end;
  padding: 16px 18px; margin: 4px 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.fr-editform .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fr-editform .field label { font-size: 10.5px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.fr-editform input, .fr-editform select { width: 100%; padding: 9px 11px; font-family: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); outline: none; box-sizing: border-box; }
.fr-editform input:focus, .fr-editform select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fr-editform-acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }

/* Simulador */
.frete-sim-card { padding: 16px 20px; }
.frete-sim { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.frete-sim-head { display: flex; align-items: center; gap: 12px; }
.frete-sim-head h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.frete-sim-head p { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.frete-sim-fields { display: flex; gap: 16px; flex: 1; min-width: 280px; }
.frete-sim-fields .field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.frete-sim-fields label { font-size: 11px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.frete-sim-fields input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 14px; background: var(--surface); color: var(--ink); outline: none; box-sizing: border-box; }
.frete-sim-fields input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.frete-sim-fields input:disabled { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; -webkit-text-fill-color: var(--primary-dark); }
.frete-sim-art { flex-shrink: 0; width: 240px; }
.frete-sim-art svg { width: 100%; height: auto; display: block; }

.frete-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 2px;
  padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }

@media (max-width: 1000px) {
  .frete-chips { justify-content: flex-start; flex-basis: 100%; order: 3; }
  .fr-editform { grid-template-columns: repeat(3, 1fr); }
  .frete-sim-art { display: none; }
}
@media (max-width: 640px) { .fr-editform { grid-template-columns: 1fr 1fr; } }

/* ===== Empresa (emitente): dados fiscais ===== */
/* Usa o .fcard da tela de Produtos — mesma linguagem, um componente só. */
/* Sem max-width: o .fcard ocupa a largura inteira, igual à tela de Produtos.
   Limitar aqui deixava metade da tela vazia à direita e a Empresa parecia outro
   sistema. */
.emp-page .fcard > .help { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.emp-page .fcard-head { cursor: default; }
/* Homologação é o estado SEGURO, mas silencioso: sem este aviso alguém emite a
   semana inteira achando que valeu, e não valeu nada. */
.emp-aviso { margin-bottom: 14px; background: #fff8e8; border: 1px solid #f0dca8; border-left: 3px solid #d98a00;
  border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: #6b5518; line-height: 1.5; }
.emp-aviso b { color: #4d3d10; }
.emp-req-nota { margin: -4px 0 12px; }
/* Campo que faltou: a borda diz ONDE, o toast diz O QUÊ. Só o toast obriga o
   operador a caçar o campo numa tela com 20 deles. */
.field.is-faltando input, .field.is-faltando select { border-color: #c0304a; background: #fdf7f8; }
.field.is-faltando label { color: #c0304a; }

/* Logomarca da empresa */
.emp-logo { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
/* Xadrez: o logo costuma ter fundo transparente. Num card branco não dá para saber
   se o fundo é transparente ou branco — e isso muda como ele sai impresso. */
.emp-logo-box { height: 140px; border: 1px solid var(--line); border-radius: 12px; display: grid;
  place-items: center; padding: 12px; overflow: hidden;
  background-color: #fff;
  background-image: linear-gradient(45deg, #eef0f4 25%, transparent 25%), linear-gradient(-45deg, #eef0f4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef0f4 75%), linear-gradient(-45deg, transparent 75%, #eef0f4 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
.emp-logo-box img { max-width: 100%; max-height: 116px; object-fit: contain; }
.emp-logo-vazio { font-size: 12.5px; color: var(--muted); }
.emp-logo-acoes { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.emp-logo-acoes .help { margin: 0; max-width: 60ch; }
.emp-logo-btns { display: flex; gap: 8px; align-items: center; }
/* O input fica invisível mas ACESSÍVEL: display:none tiraria ele do foco do teclado
   e o label pararia de funcionar para quem navega por Tab. */
.emp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.emp-logo-btns label { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.emp-logo-btns label svg { width: 16px; height: 16px; }
/* Foco pelo teclado: sem isto, quem chega no input por Tab não vê nada — o input
   está escondido e o label não é focável. */
.emp-file:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 780px) { .emp-logo { grid-template-columns: 1fr; } }

/* Certificado digital */
.emp-cert-status { border-radius: 10px; padding: 10px 13px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.emp-cert-status.is-ok { background: #edf9f2; border: 1px solid #bfe6d1; color: #1f6844; }
.emp-cert-status.is-vencendo { background: #fff8e8; border: 1px solid #f0dca8; color: #6b5518; }
.emp-cert-status.is-vencido { background: #fdf2f4; border: 1px solid #f3c9d1; color: #8f223a; }
.emp-cert-status.is-vazio { background: var(--surface-2); border: 1px dashed var(--line); color: var(--muted); }
.emp-cert-val { opacity: .9; }
.emp-cert-nome { font-size: 12.5px; color: var(--muted); }
.emp-cert-acoes { display: flex; gap: 8px; margin-top: 14px; }
.emp-page .fcard .emp-cert-form { margin-bottom: 0; }

/* Categoria: par de campos lado a lado (CST PIS/COFINS) */
.fpair { display: flex; gap: 8px; }
.fpair input { min-width: 0; }
.help-inline { font-weight: 400; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ===== Módulo fiscal: pré-visualização da nota ===== */
.nf-modelo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.nf-amb { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: #fff3e0; color: #a86800; text-transform: uppercase; letter-spacing: .04em; }
.nf-amb.is-prod { background: #e7f6ee; color: #1f6844; }
.nf-pends { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.nf-pend { font-size: 12.5px; padding: 8px 11px; border-radius: 9px; line-height: 1.4; }
.nf-pend.nf-bloqueia { background: #fdf2f4; border: 1px solid #f3c9d1; color: #8f223a; }
.nf-pend.nf-aviso { background: #fff8e8; border: 1px solid #f0dca8; color: #6b5518; }
.nf-ok { font-size: 12.5px; padding: 8px 11px; border-radius: 9px; margin-bottom: 14px;
  background: #edf9f2; border: 1px solid #bfe6d1; color: #1f6844; }
.nf-motor { font-size: 12.5px; padding: 8px 11px; border-radius: 9px; margin-bottom: 14px; line-height: 1.4;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.nf-motor.is-real { background: #f3eef7; border-color: #d9c7e6; color: #5a3d76; }
.nf-sugerido { font-size: 12.5px; padding: 8px 11px; border-radius: 9px; margin-bottom: 12px; line-height: 1.4;
  background: #eef6ff; border: 1px solid #c5ddf5; color: #23557f; }

/* ============ Gerenciamento de notas fiscais ============ */
.nfm { display: flex; flex-direction: column; gap: 16px; }

/* Faixa de segurança: o estado do ambiente é a informação mais importante da tela. */
.nfm-amb { display: flex; align-items: flex-start; gap: 14px; padding: 15px 18px; border-radius: var(--radius);
  border: 1px solid; position: relative; overflow: hidden; }
.nfm-amb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.nfm-amb-homolog { background: #fdf6ea; border-color: #f0dcae; color: #6f5312; }
.nfm-amb-homolog::before { background: var(--warn); }
.nfm-amb-prod { background: #eef8f1; border-color: #bfe3c9; color: #1c6a43; }
.nfm-amb-prod::before { background: var(--ok); }
.nfm-amb-ico { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: #fff; box-shadow: var(--shadow); }
.nfm-amb-ico svg { width: 21px; height: 21px; }
.nfm-amb-homolog .nfm-amb-ico { color: var(--warn); }
.nfm-amb-prod .nfm-amb-ico { color: var(--ok); }
.nfm-amb-txt { display: flex; flex-direction: column; gap: 4px; padding-top: 1px; }
.nfm-amb-head { display: flex; align-items: center; gap: 9px; }
.nfm-amb-title { font-weight: 700; font-size: 14.5px; letter-spacing: .01em; }
.nfm-amb-tag { font-weight: 800; font-size: 10px; letter-spacing: .09em; padding: 3px 9px; border-radius: 999px;
  background: var(--warn); color: #fff; text-transform: uppercase; }
.nfm-amb-prod .nfm-amb-tag { background: var(--ok); }
.nfm-amb p { margin: 0; font-size: 12.5px; line-height: 1.5; opacity: .9; }

/* Contadores — deliberadamente discretos: a tabela é o herói, não os números. */
.nfm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.nfm-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px 18px; display: flex; flex-direction: column; gap: 9px; }
.nfm-kpi-top { display: flex; align-items: center; gap: 8px; }
.nfm-kpi-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); flex: none; }
.nfm-kpi-t { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.nfm-kpi-v { font-size: 27px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.nfm-kpi.k-all .nfm-kpi-dot { background: var(--primary); }
.nfm-kpi.k-ok  .nfm-kpi-dot { background: var(--ok); }
.nfm-kpi.k-err .nfm-kpi-dot { background: var(--danger); }
.nfm-kpi.k-mut .nfm-kpi-dot { background: var(--muted); }

/* Card único: toolbar + tabela, coesos. */
.nfm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; }
.nfm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.nfm-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.nfm-seg button { border: 0; background: transparent; padding: 7px 13px; border-radius: 8px; font-size: 12.5px;
  font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; }
.nfm-seg button:hover { color: var(--ink); }
.nfm-seg button.is-active { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(143, 34, 58, .28); }
.nfm-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.nfm-search { position: relative; display: flex; }
.nfm-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.nfm-search input, .nfm-sel { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit;
  font-size: 13px; background: var(--surface); color: var(--ink); }
.nfm-search input { padding-left: 34px; min-width: 240px; }
.nfm-sel { cursor: pointer; }
.nfm-search input:focus, .nfm-sel:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.nfm-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.nfm-tab thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); white-space: nowrap; }
.nfm-tab tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.nfm-tab tbody tr:last-child td { border-bottom: 0; }
.nfm-tab tbody tr { transition: background .12s; }
.nfm-tab tbody tr:hover { background: var(--surface-2); }
/* Assinatura: espinha de status na 1ª célula — varre-se a coluna e acha a rejeitada. */
.nfm-tab tbody td:first-child { position: relative; }
.nfm-tab tbody td:first-child::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--muted); }
.nfm-row-ok  td:first-child::before { background: var(--ok); }
.nfm-row-err td:first-child::before { background: var(--danger); }

.nfm-nota { display: flex; align-items: center; gap: 10px; }
.nfm-modelo { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px;
  border-radius: 6px; background: var(--primary-soft); color: var(--primary-dark); }
.nfm-nota-txt { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.nfm-nota-fisc { font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.nfm-nota-nao { font-weight: 600; color: var(--muted); }
.nfm-serie { font-weight: 400; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.nfm-interno { font-size: 11px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: .05em;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 1.5px 7px; line-height: 1.35; }
.nfm-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.nfm-data { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.nfm-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 11px 4px 9px;
  border-radius: 999px; white-space: nowrap; }
.nfm-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.nfm-pill.p-ok  { background: #e8f6ee; color: #1d8a4f; }
.nfm-pill.p-err { background: #fdecef; color: #c0455b; }
.nfm-pill.p-mut { background: #eef0f5; color: #6b7383; }
/* Motivo da rejeição/cancelamento — mostrado direto na linha (até 2 linhas, resto no hover). */
.nfm-motivo { margin-top: 5px; max-width: 300px; font-size: 11px; line-height: 1.35; color: #9a3b4e;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: help; }

.nfm-acoes { display: flex; gap: 6px; justify-content: flex-end; }
.nfm-ib { width: 33px; height: 33px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: color .13s, border-color .13s, box-shadow .13s; }
.nfm-ib svg { width: 16px; height: 16px; }
.nfm-ib:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow); }
.nfm-ib.ib-danger:hover { border-color: var(--danger); color: var(--danger); }
.nfm-ib:disabled { opacity: .45; cursor: default; box-shadow: none; border-color: var(--line); color: var(--ink-2); }

.nfm-cc-hist { margin: 6px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.nfm-cc-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.nfm-cc-item > div { margin-top: 3px; color: var(--ink-2); }

/* Ficha fiscal da nota (detalhe) */
.nfd-aviso { font-size: 12.5px; padding: 8px 11px; border-radius: 9px; margin-bottom: 14px; line-height: 1.4;
  background: #fff6e6; border: 1px solid #f0d59a; color: #7a5a12; }
.nfd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-bottom: 4px; }
.nfd-c { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.nfd-r { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.nfd-v { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nfd-sec { margin: 16px 0 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.nfd-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; font-size: 13px; }
.nfd-box .muted { font-size: 12px; margin-top: 2px; }
.nfd-itens { width: 100%; border-collapse: collapse; font-size: 12px; }
.nfd-itens th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 7px 8px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); white-space: nowrap; }
.nfd-itens td { padding: 8px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.nfd-tot { display: flex; gap: 18px; justify-content: flex-end; align-items: baseline; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.nfd-tot b { font-size: 15px; color: var(--ink); }

/* Editor da nota (a partir do pedido) — 2 colunas: form + totais */
.nfed-cols { display: flex; gap: 16px; align-items: flex-start; }
.nfed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* Cadeado dos dados fiscais (travado por padrão; botão libera a edição avançada) */
.nfed-lockbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); }
.nfed-lockbar .nfed-lock-txt { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.nfed-lockbar .est-fbtn { flex: none; }
.nfed-lockbar.is-on { background: #fff4e5; border-color: #f3d9ad; }
.nfed-lockbar.is-on .nfed-lock-txt { color: #9a5a12; font-weight: 600; }
/* Campo fiscal travado: parece leitura, sem cara de "desligado" */
.nfed-main input:disabled, .nfed-main select:disabled, .nfed-main textarea:disabled {
  background: var(--surface-2); color: var(--ink); opacity: 1; cursor: default; }
.nfed-tot { width: 250px; flex: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; position: sticky; top: 0; }
.nfed-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.nfed-h { margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.nfed-h .muted { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11.5px; }
.nfed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nfed-grid .field.col-2 { grid-column: span 2; }
.nfed-ro-box { padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; font-size: 13px; }
/* Pagador (destinatário ≠ cliente) no editor da nota */
.pag-toggle { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; font-weight: 500; }
.pag-toggle input { width: 15px; height: 15px; accent-color: var(--primary); }
.pag-box { display: none; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); }
.pag-box.is-open { display: grid; }
.pag-box .field.col-2 { grid-column: span 2; }
.pag-help { grid-column: 1 / -1; margin: 0; }
.nfed-itens { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nfed-itens th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 7px 6px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.nfed-itens td { padding: 5px 6px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.nfed-desc { font-weight: 500; min-width: 150px; }
.nfed-in { width: 100%; min-width: 48px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--surface); }
.nfed-in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.nfed-cst { white-space: nowrap; }
.nfed-in2 { width: 34px; min-width: 34px; display: inline-block; }
.nfed-cst span { margin: 0 3px; color: var(--muted); }
.nfed-ro { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nfed-tl { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.nfed-tl.nfed-big { border-bottom: none; padding-top: 10px; font-size: 14px; }
.nfed-tl.nfed-big b { font-size: 18px; color: var(--primary-dark); }
.nfed-apx { margin-top: 12px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 780px) { .nfed-cols { flex-direction: column; } .nfed-tot { width: 100%; position: static; } .nfed-grid { grid-template-columns: 1fr; } .nfed-grid .field.col-2 { grid-column: span 1; } }

@media (prefers-reduced-motion: no-preference) {
  .nfm-amb, .nfm-kpi, .nfm-card { animation: nfm-rise .34s ease both; }
  .nfm-kpi:nth-child(1) { animation-delay: .03s; }
  .nfm-kpi:nth-child(2) { animation-delay: .06s; }
  .nfm-kpi:nth-child(3) { animation-delay: .09s; }
  .nfm-kpi:nth-child(4) { animation-delay: .12s; }
  .nfm-card { animation-delay: .12s; }
}
@keyframes nfm-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .nfm-kpis { grid-template-columns: repeat(2, 1fr); }
  .nfm-toolbar { flex-direction: column; align-items: stretch; }
  .nfm-search input { min-width: 0; width: 100%; }
}
.nf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.nf-bloco { background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; font-size: 13px; }
.nf-bloco h4 { margin: 0 0 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.nf-bloco .muted { font-size: 12px; }
.nf-h { margin: 14px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.nf-itens th, .nf-itens td { font-size: 12.5px; }
.nf-itens .t-c { text-align: center; } .nf-itens .t-r { text-align: right; }
.nf-totais { display: flex; gap: 16px; justify-content: flex-end; align-items: baseline; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.nf-totais b { font-size: 15px; color: var(--ink); }

/* Módulo fiscal: notas emitidas dentro do modal */
.nf-emitidas { margin: 16px 0 4px; max-height: 220px; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 6px; }
.nf-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; padding: 7px 0; border-top: 1px solid var(--line); }
.nf-linha:first-of-type { border-top: none; }
.nf-linha .muted { margin-left: auto; }
.nf-linha .nf-cancelar { margin-left: 0; }
.nf-linha-motivo { flex-basis: 100%; font-size: 11.5px; line-height: 1.35; color: #9a3b4e; }

/* Painel de Entregas */
.ent-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.ent-data { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.ent-data input { font: inherit; font-weight: 600; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.ent-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.ent-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--ink-2); }
.ent-kpi b { color: var(--ink); font-size: 15px; }
.ent-kpi.is-alerta { background: #fff4e5; border-color: #f3d9ad; color: #9a5a12; }
.ent-kpi.is-alerta b { color: #9a5a12; }

/* Filtro por status (segmented) */
.ent-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.ent-seg button { border: none; background: none; padding: 7px 15px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.ent-seg button:hover { color: var(--ink); }
.ent-seg button.is-active { background: var(--primary); color: #fff; }
.ent-seg-n { display: inline-block; margin-left: 7px; font-weight: 700; opacity: .6; }
.ent-seg button.is-active .ent-seg-n { opacity: .85; }

.ent-alerta { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 8px; background: #fff4e5; border: 1px solid #f3d9ad; color: #9a5a12; font-size: 12.5px; font-weight: 600; }
.ent-moto-ro { font-size: 13px; color: var(--ink-2); }
.ent-lock { font-size: 11px; opacity: .6; }
.ent-done { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.ent-roteiro-btn { margin-top: 4px; padding: 0; border: none; background: none; color: var(--primary); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ent-roteiro-btn:hover { text-decoration: underline; }

/* Roteiro do motorista (modal) */
.rot-total { font-size: 13.5px; color: var(--ink-2); margin-bottom: 12px; }
.rot-aviso { margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; background: #fff4e5; border: 1px solid #f3d9ad; color: #9a5a12; font-size: 12.5px; }
.rot-lista { display: flex; flex-direction: column; }
.rot-parada { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-2); }
.rot-parada:first-child { border-top: none; }
.rot-seq { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rot-info { flex: 1; font-size: 13px; }
.rot-info > b { font-size: 13.5px; }
.rot-end { color: var(--ink-2); font-size: 12.5px; margin-top: 1px; }
.rot-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.rot-pin { flex-shrink: 0; border: none; background: none; font-size: 16px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.rot-pin:hover { background: var(--line-2); }
.rot-pend { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.rot-pend h4 { margin: 0 0 8px; font-size: 13px; color: #9a5a12; }
.rot-pend-item { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.rot-pend-item:first-of-type { border-top: none; }

/* Mapa de confirmação de pino (Leaflet) */
.rot-map-ajuda { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; line-height: 1.45; }
.rot-map { height: 380px; width: 100%; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; z-index: 0; }
.rot-map-info { margin-top: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rot-pin-icon { background: none; border: none; }
.rot-pin-icon span { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(20,24,40,.35), 0 2px 6px rgba(20,24,40,.4); }

.ent-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .ent-grid { grid-template-columns: 1fr; } }
.ent-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.ent-lado { display: flex; flex-direction: column; gap: 18px; }
.ent-h { margin-bottom: 12px; }
.ent-h h3 { font-size: 15px; margin: 0; color: var(--ink); }
.ent-h p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

.ent-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ent-tab th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ent-tab td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.ent-tab .t-r { text-align: right; }
.ent-tab .muted { font-size: 12px; }
.ent-janela { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ent-end { max-width: 260px; font-size: 12px; color: var(--ink-2); }
.ent-falta { background: #fff8f0; }
.ent-falta td { border-bottom-color: #f3e2c9; }
/* Campo Motorista = botão-lookup (mesmo padrão de produto/cliente): abre modal de busca */
.ent-moto-btn { max-width: 220px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.ent-moto-btn .ent-moto-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-moto-btn .lookup-caret svg { width: 15px; height: 15px; }
.ent-falta .ent-moto-btn { border-color: #e0a850; }
.lk-nome-sem { color: var(--muted); font-style: italic; }
.ent-tag { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: #9a5a12; text-transform: uppercase; letter-spacing: .03em; }
.ent-acao { white-space: nowrap; text-align: right; }
.ent-acoes { display: flex; gap: 7px; justify-content: flex-end; }
.ent-saiu { white-space: nowrap; }

.ent-moto { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.ent-moto:first-of-type { border-top: none; }
.ent-moto-info { flex: 1; font-size: 13px; }
.ent-moto-info .muted { font-size: 11.5px; }
.ent-badge { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ent-badge.is-livre { background: var(--line-2); color: var(--muted); }
.ent-badge.is-ocupado { background: #e8f4ee; color: var(--ok); }
.ent-moto-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ent-moto-frete { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ent-moto-frete b { color: var(--ink); font-weight: 700; }
.ent-ped-cel { display: flex; align-items: center; gap: 6px; }
.ent-hist-btn { flex: none; display: inline-flex; padding: 2px; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; }
.ent-hist-btn svg { width: 15px; height: 15px; }
.ent-hist-btn:hover { color: var(--primary); background: var(--primary-soft); }
/* Linha do tempo (modal de histórico da entrega) */
.tl { display: flex; flex-direction: column; margin-top: 6px; }
.tl-item { display: flex; gap: 11px; padding: 9px 4px; position: relative; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 32px; bottom: -1px; width: 2px; background: var(--line-2); }
.tl-ico { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 50%; font-size: 14px; z-index: 1; }
.tl-corpo { flex: 1; padding-top: 2px; }
.tl .tl-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tl .tl-top b { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.tl .tl-hora { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-por { font-size: 12px; color: var(--muted); margin-top: 1px; }
.tl-forte .tl-ico { background: var(--primary-soft); }
.tl-forte .tl-top b { color: var(--ink); font-weight: 800; }
.ent-vazio { font-size: 13px; color: var(--muted); line-height: 1.5; }

.ent-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.ent-hora { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); }
.ent-hora-h { font-size: 12px; font-weight: 700; color: var(--ink); }
.ent-hora-n { font-size: 11px; color: var(--muted); }
.ent-livre { background: var(--surface-2); }
.ent-ocupado { background: #fff4e5; border-color: #f3d9ad; }
.ent-ocupado .ent-hora-n { color: #9a5a12; }
.ent-sobrecarregado { background: #fbe4e8; border-color: #f0bcc6; }
.ent-sobrecarregado .ent-hora-h, .ent-sobrecarregado .ent-hora-n { color: var(--danger); }
.ent-nota { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Kanban de Entregas: um card por pedido, com o motorista e a ação embutidos.
   Reusa .kanban/.kcol/.kcol-body da Agenda; o card é próprio (tem ações). */
.ent-kanban { grid-auto-columns: minmax(272px, 1fr); }
.ecard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.ecard.is-late { border-left-color: #c0304a; background: #fdf7f8; }
.ec-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ec-num { font-weight: 800; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ec-top-r { display: flex; align-items: center; gap: 6px; }
.ec-quando { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.ec-cli { font-size: 13px; font-weight: 650; color: var(--ink); }
.ec-fone { font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: -3px; }
.ec-end { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.ec-valores { display: flex; align-items: baseline; gap: 10px; }
.ec-total { font-size: 13px; font-weight: 800; color: var(--ink); }
.ec-frete { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ec-moto { margin-top: 2px; }
.ec-moto .ent-moto-btn { max-width: 100%; width: 100%; }
.ec-moto .ent-moto-ro { display: inline-block; padding: 4px 0; }
.ec-acao { margin-top: 2px; }
.ec-acao > .btn { width: 100%; justify-content: center; }
.ec-acao .ent-acoes { gap: 6px; }
.ec-acao .ent-acoes .ent-entregue-btn { flex: 1; justify-content: center; }
.ec-acao .ent-done { width: 100%; justify-content: center; padding: 5px 0; }

/* Escolha da nota na quitação: emitir NFC-e agora ou depois.
   Só aparece quando o pagamento QUITA o pedido — ver abrirFormPagamento em pedidos.js. */
.pgm-nf{margin-top:14px; padding:13px 14px; background:#f7f8fa; border:1px solid #e4e7ec; border-radius:12px}
.pgm-nf-lab{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; margin-bottom:8px}
.pgm-nf-seg{display:flex; gap:8px}
.pgm-nf-seg button{flex:1; padding:10px 12px; border-radius:9px; border:1.5px solid #d7dbe2; background:#fff;
  font-family:inherit; font-size:13.5px; font-weight:700; color:#4b5563; cursor:pointer; transition:.15s}
.pgm-nf-seg button:hover{border-color:#b9c0cb}
.pgm-nf-seg button.on{border-color:var(--vinho,#7a1330); background:var(--vinho,#7a1330); color:#fff}
.pgm-nf-help{margin:9px 0 0; font-size:12.5px; color:#6b7280; line-height:1.45}

/* ============================================================
   TELA DE PEDIDOS NO CELULAR (≤700px)
   Duas mudanças de forma, não de conteúdo:
   1) KPIs viram uma FAIXA DESLIZANTE. Empilhados eles comiam ~500px — o operador abria
      "Pedidos" e precisava rolar meia tela para ver um pedido. E com 5 cards numa grade
      de 2 colunas sobrava sempre um órfão na última linha.
   2) A TABELA vira CARTÃO. 8 colunas não cabem em 390px; rolar de lado funcionava, mas
      ler um pedido exigia ir e voltar. Cada <tr> vira um cartão com a informação na
      ordem em que se lê: quem → quando → quanto → em que pé está.
      ⚠️ Feito SÓ com CSS: as <td> são reposicionadas por grid-area, então os handlers do
      JS (abrir o pedido, menu ⋮, ação rápida) continuam valendo sem tocar em nada lá.
   ============================================================ */
@media (max-width: 700px) {
  /* ---- 1. KPIs em faixa deslizante ---- */
  .kpi-row {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kpi-row::-webkit-scrollbar { display: none; }
  .kpi-row .kpi-card {
    flex: 0 0 auto; min-width: 152px; padding: 11px 13px; gap: 10px;
    scroll-snap-align: start;
  }
  .kpi-card:hover { transform: none; }          /* hover não existe no toque */
  .kpi-ico { width: 34px; height: 34px; border-radius: 10px; }
  .kpi-ico svg { width: 17px; height: 17px; }
  .kpi-num { font-size: 20px; }
  .kpi-sub { display: none; }                    /* a 2ª linha vira ruído nesse tamanho */

  /* ---- 2. Tabela de pedidos vira cartão ---- */
  .ped-tabela { min-width: 0 !important; }       /* anula o min-width das tabelas largas */
  .ped-tabela thead { display: none; }
  .ped-tabela, .ped-tabela tbody { display: block; }
  .ped-tabela tr {
    display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center;
    grid-template-areas:
      "num   tipo"
      "cli   cli"
      "data  valor"
      "stat  prio"
      "acoes acoes";
    padding: 13px 14px; margin: 0 0 10px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); box-shadow: var(--shadow);
  }
  .ped-tabela tbody tr:hover { background: var(--surface); }
  .ped-tabela td { display: block; border: none !important; padding: 0 !important; }
  .ped-tabela td:nth-child(1) { grid-area: num; }
  .ped-tabela td:nth-child(2) { grid-area: cli; }
  .ped-tabela td:nth-child(3) { grid-area: tipo; justify-self: end; }
  .ped-tabela td:nth-child(4) { grid-area: data; display: flex; gap: 7px; align-items: baseline; }
  .ped-tabela td:nth-child(5) { grid-area: stat; }
  .ped-tabela td:nth-child(6) { grid-area: prio; justify-self: end; }
  .ped-tabela td:nth-child(7) { grid-area: valor; justify-self: end; text-align: right; }
  .ped-tabela td:nth-child(8) { grid-area: acoes; }

  .ped-tabela td:nth-child(1) .code { font-size: 12.5px; color: var(--muted); }
  .ped-tabela td:nth-child(2) .t-strong { font-size: 16px; line-height: 1.2; }
  .ped-tabela td:nth-child(4) .cel-hora { color: var(--muted); }
  .ped-tabela td:nth-child(6) .muted { display: none; }   /* some com o "—" da prioridade */
  .ped-tabela td:nth-child(7) { font-size: 16px; }
  .ped-tabela .pag-cel { margin-top: 2px; }
  /* Ações ganham uma faixa própria no rodapé do cartão (o dedo precisa de alvo). */
  .ped-tabela td.acoes-cel {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    margin-top: 8px; padding-top: 10px !important; border-top: 1px solid var(--line-2) !important;
  }
  .ped-tabela td.acoes-cel:empty { display: none; }
  .ped-tabela .quick-act { padding: 8px 14px; font-size: 13.5px; }
  .ped-tabela .icon-act { min-width: 36px; min-height: 36px; }

  /* Urgência: no cartão o sinal vira uma BARRA na borda esquerda (fundo colorido em
     cartão fica pesado e briga com os badges). */
  .ped-tabela tr.row-atrasado { border-left: 3px solid #c0304a; }
  .ped-tabela tr.row-urg1 { border-left: 3px solid #e08a2b; }
  .ped-tabela tr.row-urg3 { border-left: 3px solid #e8c07a; }

  /* Filtros: dois por linha em vez de um, para não virar uma coluna de selects. */
  .op-filtros .op-sel { flex: 1 1 46%; min-width: 0; }
  .op-filtros .op-search { flex: 1 1 100%; }
}

/* Cartão de pedido: o ⋮ só ganha faixa própria quando há ação rápida ao lado dele.
   Sem ação rápida ele herda o espaço da PRIORIDADE — e isso é seguro porque os dois
   somem juntos: `proximaAcao` e `prioridadePed` devolvem null exatamente para
   entregue/cancelado. Antes o ⋮ sozinho ocupava 42px dos 187px do cartão (22%), com
   uma linha divisória anunciando uma prateleira vazia.
   (Navegador sem `:has()` cai no layout de 5 linhas — funciona, só fica mais alto.) */
@media (max-width: 700px) {
  .ped-tabela tr:not(:has(.quick-act)) {
    grid-template-areas:
      "num   tipo"
      "cli   cli"
      "data  valor"
      "stat  acoes";
  }
  .ped-tabela tr:not(:has(.quick-act)) td:nth-child(6) { display: none; }
  .ped-tabela tr:not(:has(.quick-act)) td.acoes-cel {
    margin-top: 0; padding-top: 0 !important; border-top: none !important;
  }
}

/* Urgência no cartão: a cor sai das CÉLULAS e vai para o cartão inteiro.
   No desktop o fundo é pintado em cada <td> (`tr.row-urg1 td`), o que na tabela dá uma
   faixa contínua. No cartão as <td> viram blocos soltos numa grade — o mesmo CSS
   desenhava retângulos coloridos picotados, com buracos entre eles. Aqui o <tr> (o
   cartão) carrega o tom e as células ficam transparentes. */
@media (max-width: 700px) {
  .ped-tabela tbody tr.row-atrasado td,
  .ped-tabela tbody tr.row-urg1 td,
  .ped-tabela tbody tr.row-urg3 td,
  .ped-tabela tbody tr:hover td { background: transparent !important; }
  .ped-tabela tbody tr.row-atrasado { background: #fdf2f4; border-color: #f3c9d1; }
  .ped-tabela tbody tr.row-urg1 { background: #fff8f0; border-color: #f5ddc0; }
  .ped-tabela tbody tr.row-urg3 { background: #fffdf2; border-color: #f0e6c0; }
}

/* Indicador "ao vivo" da tela de Produção (TV da cozinha). O ponto pulsa para dizer que
   a tela está viva — tela congelada mostrando "Fila vazia!" é indistinguível de uma
   funcionando, e a cozinha passaria o dia achando que não tem nada para produzir. */
.op-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.op-vivo b { color: var(--ink); font-weight: 700; }
.op-vivo-dot { width: 8px; height: 8px; border-radius: 50%; background: #2c9c66;
  box-shadow: 0 0 0 0 rgba(44,156,102,.55); animation: op-pulso 2s infinite; }
@keyframes op-pulso {
  70% { box-shadow: 0 0 0 7px rgba(44,156,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(44,156,102,0); }
}
@media (prefers-reduced-motion: reduce) { .op-vivo-dot { animation: none; } }

/* Selo "ao vivo": o horário absoluto fica discreto ao lado do tempo relativo (quem olha
   de longe lê "há 2 min"; quem quiser conferir tem a hora). `is-velho` acende em âmbar
   quando passaram 2 ciclos sem sucesso — sinal de que a TV parou de receber. */
.op-vivo-h { color: var(--muted); font-size: 11.5px; }
.op-vivo.is-velho { border-color: #f0d9a0; background: #fff8e6; color: #7a5b12; }
.op-vivo.is-velho .op-vivo-dot { background: #e08a2b; animation: none; }
.op-vivo.is-velho .op-vivo-h { color: #9a7a2a; }

/* ============================================================
   PARTICIPANTES — o cadastro único (cliente/fornecedor/motorista/funcionário)
   As TAGS de papel são o coração da tela: é onde se vê, de relance, que um mesmo
   cadastro é cliente E fornecedor. Cada papel tem sua cor, sempre a mesma, para
   virar reconhecimento e não leitura.
   ============================================================ */
.pt-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pt-tag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; letter-spacing: .01em; }
.pt-cliente     { background: var(--primary-soft); color: var(--primary-dark); }
.pt-fornecedor  { background: #e8eefb; color: #2c4d9c; }
.pt-motorista   { background: #efe8fb; color: #6b3fc4; }
.pt-funcionario { background: #e3f3e8; color: #1f7a44; }

/* Seletor de papéis no formulário: alvo grande, estado óbvio. */
.pt-papeis { display: flex; flex-wrap: wrap; gap: 10px; }
.pt-papel { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 16px; border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--surface); font-size: 14px; font-weight: 650; color: var(--ink-2);
  transition: .15s; user-select: none; }
.pt-papel:hover { border-color: var(--primary); }
.pt-papel input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.pt-papel:has(input:checked) { border-color: var(--primary); background: var(--primary-soft);
  color: var(--primary-dark); }

/* Endereços dentro do cadastro */
.pt-end { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 8px;
  background: var(--surface); }
.pt-end.is-princ { border-color: var(--primary); background: var(--primary-soft); }
.pt-end-txt b { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.pt-end-txt .muted { font-size: 13px; margin-top: 2px; line-height: 1.35; }
.pt-end-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.pt-end-novo { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* Linha da tabela é clicável (abre o cadastro) — o cursor precisa dizer isso. */
.pt-tabela tbody tr { cursor: pointer; }

@media (max-width: 700px) {
  .pt-end { flex-direction: column; }
  .pt-end-acoes { width: 100%; }
  .pt-papel { flex: 1 1 45%; justify-content: center; }
}

/* Participantes no celular: a tabela vira CARTÃO (mesma técnica de .ped-tabela).
   6 colunas não cabem em 390px; rolar de lado esconderia justamente as TAGS DE PAPEL,
   que são o que essa tela existe para mostrar. As <td> são reposicionadas por
   grid-area, então o clique na linha e o menu ⋮ continuam funcionando. */
@media (max-width: 700px) {
  .pt-tabela { min-width: 0 !important; }
  .pt-tabela thead { display: none; }
  .pt-tabela, .pt-tabela tbody { display: block; }
  .pt-tabela tr {
    display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center;
    grid-template-areas:
      "nome    status"
      "papeis  papeis"
      "contato contato"
      "local   acoes";
    padding: 13px 14px; margin: 0 0 10px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); box-shadow: var(--shadow);
  }
  .pt-tabela td { display: block; border: none !important; padding: 0 !important; }
  .pt-tabela td:nth-child(1) { grid-area: nome; }
  .pt-tabela td:nth-child(2) { grid-area: papeis; }
  .pt-tabela td:nth-child(3) { grid-area: contato; }
  .pt-tabela td:nth-child(4) { grid-area: local; color: var(--ink-2); font-size: 13.5px; }
  .pt-tabela td:nth-child(5) { grid-area: status; justify-self: end; }
  .pt-tabela td:nth-child(6) { grid-area: acoes; justify-self: end; }
  .pt-tabela td:nth-child(1) .t-strong { font-size: 16px; line-height: 1.2; }
  .pt-tabela .icon-act { min-width: 36px; min-height: 36px; }
}

/* Ícone do papel: mesmo desenho na TAG da lista e no checkbox do formulário — o papel
   passa a ser reconhecido pela forma, não só pela cor (ajuda quem confunde cor e ajuda
   de longe, no tablet). */
.pt-papel-ico { display: inline-flex; }
.pt-papel svg { width: 18px; height: 18px; display: block; }
.pt-tag { display: inline-flex; align-items: center; gap: 5px; }
.pt-tag svg { width: 13px; height: 13px; flex: none; }

/* CONTA CORRENTE do participante. O saldo é dito em PALAVRAS, não só em número:
   "saldo -500,00" não significa nada para quem está no balcão; "você deve R$ 500,00
   a ele" significa. A cor reforça a direção (a receber x a pagar). */
.cc-saldo { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-radius: 13px; border: 1px solid var(--line); margin-bottom: 12px; }
.cc-saldo .cc-lbl { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; opacity: .75; }
.cc-saldo b { font-size: 25px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cc-txt { font-size: 14px; font-weight: 700; text-align: right; }
.cc-ele_me_deve { background: #e8eefb; border-color: #c3d3f2; color: #2c4d9c; }
.cc-eu_devo    { background: #fdf2f4; border-color: #f3c9d1; color: #a11b2e; }
.cc-quitado    { background: var(--surface-2); color: var(--ink-2); }

.cc-tabela { width: 100%; font-size: 13.5px; }
.cc-tabela th, .cc-tabela td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); }
.cc-tabela th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left; }
.cc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-acao { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line); }
@media (max-width: 700px) { .cc-saldo { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cc-txt { text-align: left; } .cc-tabela { min-width: 520px; } }

/* Endereço em edição: destaca a linha que está sendo alterada e o formulário que a
   está editando — sem isso o operador altera os campos sem saber a qual endereço
   eles pertencem (a mesma caixa serve para adicionar e para editar). */
.pt-end.is-editando { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pt-end-novo.is-editando { background: var(--primary-soft); border-radius: 12px; padding: 12px 13px; }
.pt-ed-aviso { margin: 0 0 10px; color: var(--primary-dark); }