/* ============================================================
   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: #2e9e50;   /* verde (regra do dono: "em produção = verde") */
  --s-produzido: #2f8fb0;     /* azul/teal (montado, esperando o forno) */
  --s-forno: #d9822b;         /* âmbar/laranja (assando, quente) */
  --s-preparacao: #9c4dcc;    /* violeta (último passo da cozinha, antes de finalizar) */
  --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: 21px; letter-spacing: .12em;
  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); position: relative;
}
/* Botão "Novo pedido" (tela de Pedidos): centralizado na topbar e maior. */
.btn-novo-hero { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 15.5px; font-weight: 700; padding: 12px 32px; border-radius: 12px; }
.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; }

/* Parcelas do crédito, no modal de pagamento. */
.pgm-parc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.pgm-parc[hidden] { display: none; }   /* [hidden] perde p/ display:flex sem isto */
.pgm-parc label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.pgm-parc select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; background: var(--surface); color: var(--ink); }
.pgm-parc-calc { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pgm-parc-calc b { color: var(--primary); font-weight: 750; }
.pg-parc-tag { display: inline-block; padding: 1px 6px; border-radius: 5px; background: var(--primary-soft);
  color: var(--primary); font-size: 11px; font-weight: 800; }
.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: #e6f5ea; }
.badge-produzido { color: var(--s-produzido); background: #e6f2f7; }
.badge-forno { color: var(--s-forno); background: #fbeeda; }
.badge-preparacao { color: var(--s-preparacao); background: #f4e9fb; }
.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; }
/* CORTESIA (brinde/presente): cor PROPRIA, distinta de pago/pendente. Nao e venda quitada nem
   conta em aberto — e uma terceira coisa, e o grid precisa mostrar isso de relance. Violeta,
   longe do verde do pago e do vermelho do pendente. */
.pag-badge.pag-cortesia { background: #f1ecfb; color: #6b46c1; }
.pg-card-cortesia .resumo-rest strong { color: #6b46c1; }
/* checkbox com rotulo na mesma linha (Cortesia no form do pedido) */
.check-inline { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.check-inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: #6b46c1; margin: 0; }

/* 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); } }
/* spinner pequeno DENTRO de um botão (ex.: "Processando pagamento…") */
.btn-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: -2px; margin-right: 7px; }

/* ---------- 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"], .janela-hora input[data-hora] { flex: 0 0 auto; width: 92px; min-width: 92px; text-align: center; }
.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); }
/* Carga da faixa de horário (aviso inline). Neutro quando abaixo da capacidade; vermelho ao lotar. */
.jh-carga { margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.jh-carga.is-cheio { color: #c0392b; }

/* 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-produzido, .badge-fill-produzido { background: var(--s-produzido); }
.badge-dot-forno, .badge-fill-forno { background: var(--s-forno); }
.badge-dot-preparacao, .badge-fill-preparacao { background: var(--s-preparacao); }
.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-dica { font-size: 12.5px; color: var(--muted); margin: 0 0 9px; line-height: 1.4; }
.cmp-dica b { color: var(--ink-2); }
.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; }
/* Largura que comporta o maior rótulo ("Quilograma (kg)") + a seta nativa, sem cortar. */
.cmp-un { width: 142px; min-width: 142px; padding-right: 26px; }
.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); }
/* ===== Grid por parcela (mockup): filtros em faixa + linha única / grupo + parcelas ===== */
.finf-bar2 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; }
.finf-fld { display: flex; flex-direction: column; gap: 4px; }
.finf-fld > label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.finf-fld-busca { flex: 1 1 200px; min-width: 170px; }
.finf-busca-wrap { position: relative; display: flex; align-items: center; }
.finf-busca-wrap input { width: 100%; padding-right: 30px; }
.finf-busca-wrap svg { position: absolute; right: 9px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.finf-per2 { display: flex; align-items: center; gap: 5px; }
.finf-per2 input { width: 120px; }
.finf-sel { min-width: 138px; }
.finf-fld .est-filtros { gap: 5px; flex-wrap: wrap; }
.finf-fld .est-fbtn { padding: 6px 10px; font-size: 12.5px; }
.finf-adv2 { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; }
.finf-adv2 label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.finf-adv2 input { width: 130px; }
/* chips de status coloridos por natureza */
.fchip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; }
.fchip.c-open { color: #b5324f; border-color: #f0c4cf; }
.fchip.c-late { color: #c0304a; border-color: #eab3bd; }
.fchip.c-warn { color: #b9791b; border-color: #ecd39a; }
.fchip.c-ok { color: #2c9c66; border-color: #b6e2ca; }
.fchip.c-part { color: #3b6fb0; border-color: #bcd3ee; }
.fchip.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }

/* LINHA DA FATURA (única ou resumo): fundo branco, texto forte, separação entre títulos */
.fin-parc-tbl tbody tr.fin-fatura > td { background: var(--surface); border-top: 2px solid var(--line); padding: 11px 12px; vertical-align: middle; color: #1F2937; }
.fin-parc-tbl tbody tr.fin-fatura { cursor: pointer; }
.fin-parc-tbl tbody tr.fin-fatura:hover > td { background: var(--surface-2); }
.fin-c-tit { white-space: nowrap; font-weight: 600; }
.fin-grp-chev { display: inline-flex; vertical-align: middle; color: var(--muted); margin-right: 5px; }
.fin-grp-chev svg { width: 13px; height: 13px; transition: transform .16s ease; }
.fin-grp.is-open .fin-grp-chev svg { transform: rotate(90deg); }
.fin-grp-orig { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.fin-grp-pago { min-width: 172px; }
/* linha-resumo de fatura PARCELADA ganha um leve acento à esquerda (marca de "título pai") */
.fin-parc-tbl tbody tr.fin-grp > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
/* botão Baixar discreto, p/ não competir com os valores */
.fin-acoes .btn { padding: 3px 11px; font-size: 12px; font-weight: 600; }
.fin-pago-cap { font-size: 11px; margin-bottom: 2px; }
.fin-pago-line { display: flex; align-items: center; gap: 7px; }
.fin-pago-line .fin-prog { flex: 1; margin: 0; }
.fin-pago-pct { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
/* PARCELAS = linhas da MESMA tabela do título (mesmas colunas → alinhamento perfeito com o grid) */
.fin-parc-tbl tbody tr.fin-parc-row > td { background: var(--surface-2); border-top: 1px solid var(--line); padding: 9px 12px; font-size: 13px; color: #1F2937; }
.fin-parc-tbl tbody tr.fin-parc-row:hover > td { background: var(--surface); }
/* col 1: recuo + fio de vínculo (vertical + tick) marcando que é filha do título acima */
.fin-parc-c1 { padding-left: 44px !important; position: relative; white-space: nowrap; }
.fin-parc-c1::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: #d0d5dd; }
.fin-parc-c1::after { content: ""; position: absolute; left: 22px; top: 50%; width: 12px; height: 2px; background: #d0d5dd; }
.fin-parc-c1 .n-interno { color: #1F2937; font-weight: 600; font-size: 12.5px; }
.fin-ip { color: #667085; font-size: 12px; }        /* indicador i/N, sob a coluna "Parcelas" */
.fin-venc-warn { color: #b9791b; font-weight: 600; }
.fin-parc-row.is-late > td { background: #fdeef0; }
.fin-parc-row.is-late > td:first-child { box-shadow: inset 3px 0 0 #c0304a; }
/* alinhamento de colunas (th + td compartilham as classes) */
.fin-parc-tbl .c-val { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-parc-tbl .c-venc { text-align: center; white-space: nowrap; }
.fin-parc-tbl .c-acoes { text-align: center; }
.fin-venc-late { color: #c0304a; font-weight: 650; }
.fin-acoes { text-align: center; white-space: nowrap; }
.fin-acoes .btn { margin-right: 4px; }
.fin-kebab { font-size: 18px; line-height: 1; color: var(--muted); padding: 2px 8px; border-radius: 7px; background: none; border: 0; cursor: pointer; vertical-align: middle; }
.fin-kebab:hover { background: var(--line); color: var(--ink); }
/* paginação */
.fin-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 4px; flex-wrap: wrap; }
.fin-pp { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.fin-pp select { padding: 4px 8px; }
.fin-pgbtns { display: flex; align-items: center; gap: 6px; }
/* ===== Hierarquia de texto (contraste) — só cor/peso/tamanho, sem mexer na estrutura ===== */
.fin-parc-tbl thead th { color: #475467; font-weight: 600; }
/* destaque PRINCIPAL: fornecedor + valor total */
.fin-parc-tbl tbody tr.fin-fatura > td.t-strong { color: #1F2937; font-weight: 600; }
/* nº interno do título: intermediário, legível (maior e mais escuro) */
.fin-fatura .n-interno { color: #1F2937; font-weight: 650; font-size: 13.5px; }
.fin-grp-chev { color: #667085; }
/* todos os campos neutros na tonalidade do fornecedor (#1F2937); só peso/tamanho variam */
.fin-parc-tbl tbody tr.fin-fatura > td.fin-grp-orig { color: #1F2937; }
.fin-pago-cap, .fin-pago-pct { color: #1F2937; }
.fin-parc-row .n-interno { color: #1F2937; font-weight: 600; font-size: 12.5px; }
/* placeholders / hífens / ausência de info = bem claros */
.fin-parc-tbl .muted, .fin-parc-tbl td .muted { color: #98A2B3; }
@media (prefers-color-scheme: dark) {
  .fin-parc-row.is-late > td:first-child { box-shadow: inset 3px 0 0 #c0304a; }
  .fchip.is-active { background: var(--primary); border-color: var(--primary); }
  .fin-parc-tbl tbody tr.fin-fatura > td { color: #e5e7eb; }
  .fin-parc-tbl tbody tr.fin-fatura > td.t-strong { color: #f5f6f8; }
  .fin-fatura .n-interno { color: #e5e7eb; }
  .fin-parc-tbl tbody tr.fin-fatura > td.fin-grp-orig, .fin-pago-cap, .fin-pago-pct { color: #e5e7eb; }
  .fin-parc-tbl thead th { color: #98a2b3; }
  .fin-parc-tbl .muted, .fin-parc-tbl td .muted { color: #6b7280; }
  .fin-parc-tbl tbody tr.fin-parc-row > td, .fin-parc-c1 .n-interno { color: #e5e7eb; }
  .fin-ip { color: #98a2b3; }
  .fin-parc-c1::before, .fin-parc-c1::after { background: #3a4150; }
  .fin-parc-row.is-late > td { background: rgba(192,48,74,.10); }
  .fin-parc-tbl tbody tr.fin-parc-row:hover > td { background: rgba(255,255,255,.04); }
}
.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-col-r { display: flex; flex-direction: column; gap: 16px; }
/* Card "Próximos vencimentos" (lista compacta clicável) */
.fx-venc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fx-vertodos { background: none; border: 0; color: var(--primary); font-weight: 650; font-size: 12.5px; cursor: pointer; padding: 0; }
.fx-vertodos:hover { text-decoration: underline; }
.fx-venc-row { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.fx-venc-row:hover { background: var(--surface-2); }
.fx-venc-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.fx-venc-ico svg { width: 16px; height: 16px; }
.fx-venc-ico.is-danger { background: #fbe9ee; color: #c0304a; }
.fx-venc-ico.is-warn { background: #fdf0dc; color: #b9791b; }
.fx-venc-ico.is-info { background: #e7f0fb; color: #2f6fb3; }
.fx-venc-tit { font-size: 13.5px; font-weight: 700; }
.fx-venc-tit.is-danger { color: #c0304a; }
.fx-venc-tit.is-warn { color: #b9791b; }
.fx-venc-tit.is-info { color: #2f6fb3; }
.fx-venc-sub { font-size: 12px; color: var(--muted); }
.fx-venc-qtd { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.fx-venc-val { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-venc-val.is-danger { color: #c0304a; }
.fx-venc-val.is-warn { color: #b9791b; }
.fx-venc-val.is-info { color: #2f6fb3; }
.fx-venc-go { color: var(--muted); display: flex; }
.fx-venc-go svg { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) {
  .fx-venc-ico.is-danger { background: rgba(192,48,74,.18); }
  .fx-venc-ico.is-warn { background: rgba(180,130,30,.18); }
  .fx-venc-ico.is-info { background: rgba(31,95,168,.18); }
}
.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; }

/* Projeção semana a semana = tabela com colunas rotuladas + barra por semana */
.fx-proj-head { display: grid; grid-template-columns: 1fr 108px 108px 128px; gap: 12px; padding: 0 0 8px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border-bottom: 1px solid var(--line); }
.fx-proj-head span:not(:first-child) { text-align: right; }
.fx-sem { display: grid; grid-template-columns: 1fr 108px 108px 128px; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); }
.fx-sem:last-of-type { border-bottom: 0; }
.fx-sem-c1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fx-sem-c1 svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.fx-sem-lbl { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.fx-sem-bar { flex: 1; min-width: 24px; height: 8px; display: flex; align-items: center; }
.fx-sem-fill { height: 8px; border-radius: 4px; min-width: 6px; }
.fx-sem-fill.is-out { background: #c0304a; }
.fx-sem-fill.is-in { background: #2c9c66; }
.fx-sem-fill.is-zero { width: 34px; background: var(--line); }
.fx-sem-rec { text-align: right; font-size: 12.5px; color: #2c9c66; font-variant-numeric: tabular-nums; }
.fx-sem-pag { text-align: right; font-size: 12.5px; color: #c0304a; font-variant-numeric: tabular-nums; }
.fx-sem-saldo { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.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;
  display: flex; align-items: center; gap: 9px; }
/* ⚠️ o ícone da faixa (I.info) vinha SEM tamanho e renderizava um círculo GIGANTE ocupando a
   tela inteira. Trava o SVG em 17px. */
.cxs-diverg svg { width: 17px; height: 17px; flex-shrink: 0; }
.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; }
/* Compras: faixa de cor por status (verde=ativa, vermelha=cancelada) + itens no drawer */
.cmp-row td:first-child { border-left: 3px solid transparent; }
.cmp-row.is-ativa td:first-child { border-left-color: #2c9c66; }
.cmp-row.is-cancelada td:first-child { border-left-color: #c0304a; }
.cmp-row.is-cancelada > td { color: var(--muted); }   /* pill mantém a própria cor */
.cmp-dv-itens { margin-top: -8px; display: flex; flex-direction: column; gap: 6px; }
.cmp-dv-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-2); }
.cmp-dv-nome { flex: 1; min-width: 0; font-weight: 650; }
.cmp-dv-meta { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cmp-dv-sub { flex: none; min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
/* 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 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
/* Adicional / remoção / personalização = instrução de cozinha, em CHIP colorido.
   SEM (remoção) grita em vermelho — é o erro que não volta atrás. */
.op-x { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.op-x-add { background: #e4f4ec; color: #17794a; }
.op-x-sem { background: #fdeaea; color: #b93a3a; }
.op-x-obs { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.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; }

/* ===== Tela Estágios de Produção (a fila do chão de fábrica, cadastrável) ===== */
/* O número herda a cor DO ESTÁGIO (inline), então o quadro de Produção e esta tela
   mostram a mesma cor — é a mesma fila vista de dois lugares. */
.pe-num { border: 1px solid transparent; }
.pe-cor { width: 30px; height: 30px; flex-shrink: 0; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; background: none; cursor: pointer; }
.pe-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pe-corpo .pe-nome { flex: none; width: 100%; }
.pe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 8px; }
.est-chave { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px;
  color: var(--muted); background: var(--bg); padding: 1px 6px; border-radius: 5px; }
.est-papel { font-size: 11.5px; font-weight: 700; color: var(--primary);
  background: var(--primary-soft); padding: 1px 7px; border-radius: 20px; }
.est-uso { font-size: 11.5px; color: var(--muted); }
.est-inativo { font-size: 11.5px; font-weight: 700; color: #a1560b; background: #fdf2e2;
  padding: 1px 7px; border-radius: 20px; }
.prod-etapa.is-off { opacity: .55; }
.est-aviso { margin-top: 14px; padding: 16px 18px; }
.est-aviso h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.est-aviso p { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.est-aviso p:last-child { margin-bottom: 0; }
.est-aviso b { color: var(--ink); }

/* ===== Cortes diferentes na MESMA linha do pedido =====
   O cliente pede 3 tortas iguais, 2 inteiras e 1 cortada. Fechado por padrão: a maioria dos
   pedidos tem um corte só, e três selects sempre abertos pesariam sobre o caso comum. */
.it-corte-multi-btn { margin-left: 8px; padding: 1px 8px; border: 1px solid var(--line);
  border-radius: 20px; background: var(--surface); color: var(--primary); cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.it-corte-multi-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
.it-corte-multi-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Aberto, o campo toma a LARGURA INTEIRA do editor: em meia coluna o select cortava o rótulo
   ("16 PEDACO…") e o operador não conseguia conferir o que tinha escolhido. */
.it-corte-wrap.is-multi { grid-column: 1 / -1; }
.it-cortes-uni { display: grid; gap: 8px 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* Rótulo ACIMA do select — lado a lado, a etiqueta roubava a largura de que o texto do corte
   precisa. Assim cabem 2–3 tortas por linha na tela larga e uma por linha no tablet. */
.it-corte-un-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.it-corte-un-l > span { font-size: 10.5px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; }
.it-corte-un-l > select { width: 100%; min-width: 0; }
/* Seletor de cor dentro de um .field: sem isto o input[type=color] herda a largura do campo
   de texto e renderiza como um risco fino (foi o que apareceu no modal "Novo estágio"). */
.field input[type="color"] { width: 56px; height: 38px; padding: 3px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }

/* Tablet/celular: os metadados descem e os botões continuam alcançáveis com o polegar. */
@media (max-width: 620px) {
  .prod-etapa { flex-wrap: wrap; }
  .pe-corpo { flex-basis: 100%; order: 3; }
  .pe-acts { margin-left: auto; }
}
.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; }
/* Cor da linha por STATUS (regra do dono): aguardando = branco, em produção = rosa. Vence a cor de
   urgência; o atraso passa a ser uma TARJA lateral, pra não sumir sob a cor do status. */
/* COR DA LINHA PELO ESTÁGIO — a fila virou cadastro (15/08/2026), então não dá para ter uma
   classe por status: o cliente pode criar "Resfriamento" amanhã. A cor chega em `--pst-cor`
   (inline, vinda do cadastro) e o alfa fica aqui, para o tom continuar discreto no grid. */
.ped-tabela tbody tr.pst-estagio > td {
  background: color-mix(in srgb, var(--pst-cor) 11%, var(--surface));
}
.ped-tabela tbody tr.pst-estagio:hover > td {
  background: color-mix(in srgb, var(--pst-cor) 18%, var(--surface));
}
/* Tarja lateral de URGÊNCIA (fallback p/ status sem cor própria, ex.: finalizado/saiu):
   uma cor só, a do chip "Urgente" (#c0304a). */
.ped-tabela tbody tr.row-atrasado > td:first-child,
.ped-tabela tbody tr.row-urg1 > td:first-child,
.ped-tabela tbody tr.row-urg3 > td:first-child { box-shadow: inset 3px 0 0 #c0304a; }
/* A "fita" segue a COR DO STATUS (regra do dono): linha, badge e fita falam a mesma cor.
   Vem DEPOIS da urgência (mesma especificidade) — então vence nos status que têm cor própria. */
.ped-tabela tbody tr.pst-aguard > td:first-child { box-shadow: inset 3px 0 0 var(--s-aguardando_producao); }
.ped-tabela tbody tr.pst-emprod > td:first-child { box-shadow: inset 3px 0 0 var(--s-em_producao); }
.ped-tabela tbody tr.pst-produzido > td:first-child { box-shadow: inset 3px 0 0 var(--s-produzido); }
.ped-tabela tbody tr.pst-forno > td:first-child { box-shadow: inset 3px 0 0 var(--s-forno); }
.ped-tabela tbody tr.pst-preparacao > td:first-child { box-shadow: inset 3px 0 0 var(--s-preparacao); }

/* ===== Estoque ===== */
.est-page { display: flex; flex-direction: column; gap: 14px; }

/* ---- Resumo de Produção ---- */
.rp-page { max-width: 1080px; }
/* KPIs (4 cards com cor de acento) */
.rp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 2px 0 8px; }
.rp-kpi { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 15px 18px; --acc: var(--muted); --acc-soft: var(--surface-2); }
.rp-kpi-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc); }
.rp-kpi-ico svg { width: 22px; height: 22px; }
.rp-kpi-txt { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.rp-kpi-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.rp-kpi-n { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--acc); font-variant-numeric: tabular-nums; }
.rp-kpi-sub { font-size: 11px; color: var(--muted); }
.rp-kpi.k-itens   { --acc: #7b61c9; --acc-soft: #efeafb; }
.rp-kpi.k-falta   { --acc: #d38b1e; --acc-soft: #fbefd8; }
.rp-kpi.k-ok      { --acc: #2e9e5b; --acc-soft: #e3f5eb; }
.rp-kpi.k-sabores { --acc: #3389ad; --acc-soft: #e3f0f6; }
/* Seções (categoria) — cada uma num card */
.rp-grupo { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 4px 18px 10px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.rp-cat { display: flex; align-items: center; gap: 10px; padding: 13px 0 11px; border-bottom: 1px solid var(--line); }
.rp-cat-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--primary); color: #fff; }
.rp-cat-ico svg { width: 17px; height: 17px; }
.rp-cat-nome { font-size: 15.5px; font-weight: 800; letter-spacing: .01em; }
.rp-cat-tot { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.rp-cat-tot b { color: var(--ink); }
.rp-cat-falta { color: #2e9e5b; font-weight: 700; }
/* Tabela */
.rp-tab { width: 100%; border-collapse: collapse; }
.rp-tab th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 11px 8px 8px; font-weight: 700; }
.rp-tab th.t-c, .rp-tab td.t-c { text-align: center; }
.rp-tab td { padding: 10px 8px; border-top: 1px solid var(--line); font-size: 14px; }
.rp-tab tbody tr:hover { background: var(--surface-2); }
.rp-sabor { font-weight: 600; color: var(--ink); }
.rp-tam { color: var(--ink-2); }
.rp-qtd { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.rp-falta { font-weight: 800; color: #2e9e5b; font-variant-numeric: tabular-nums; }
.rp-ok { color: #2e9e5b; font-weight: 700; }
.rp-feito { font-weight: 700; color: #2f8fb0; font-variant-numeric: tabular-nums; }  /* produzidas (teal) */
.rp-zero { color: var(--muted); }
/* Tamanho colorido (bate o olho): grande/medio/pequeno */
.rp-tag { display: inline-block; padding: 2px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.rp-tag-g { color: #b3402a; background: #fbe7e1; }   /* GRANDE  — vermelho/terracota */
.rp-tag-m { color: #a9761a; background: #fbf0d6; }   /* MEDIO   — âmbar */
.rp-tag-p { color: #2e7d46; background: #e3f3e8; }   /* PEQUENO — verde */
.rp-tag-o { color: var(--ink-2); background: var(--surface-2); }  /* outros (bandeja, kg...) */
/* Faixa de horario — segunda linha de filtro, presa visualmente a de dia. O numero dentro do
   botao e a contagem do DIA INTEIRO daquela faixa: o filtro tambem serve de mapa do dia. */
.rp-hora { margin-top: -4px; }
.rp-hora .prd-dia-lbl { color: var(--muted); }
/* Reusa a `.janela-hora` do form de Pedido — o campo tem de parecer e agir igual nas duas
   telas. Aqui ela e mais compacta porque e filtro, nao cadastro. */
.rp-jh { gap: 7px; }
.rp-jh input[data-hora] { width: 84px; min-width: 84px; }   /* mais estreito que no cadastro */
.rp-jh-limpar { padding: 5px 11px; font-size: 12px; }
/* Linha do resumo clicavel — leva aos pedidos que tem aquele item */
.rp-linha { cursor: pointer; }
.rp-linha:hover .rp-sabor { color: var(--primary); }
.rp-ped-tab td { font-size: 13.5px; }
.rp-ped-tab .rp-ped-corte { color: var(--muted); font-size: 12.5px; }
/* Só aparece quando a lista cruza dias (filtro Atrasados / Próximos 5). */
.rp-ped-dia { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rp-ped-late td { background: #fdf0f2; }          /* pedido com a hora vencida */
.rp-ped-rodape { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); text-align: right; }
/* Total por tamanho — a faixa que responde "quantas grandes/medias/pequenas hoje" */
.rp-tams { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px 16px; margin: 0 0 14px; }
.rp-tams-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-tams-tit { font-size: 14.5px; font-weight: 800; letter-spacing: .01em; }
.rp-tams-sub { font-size: 12px; color: var(--muted); }
.rp-tams-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.rp-tam-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px 12px; background: var(--surface-2); }
.rp-tam-card .rp-tag { margin-bottom: 5px; }
.rp-tam-n { font-size: 30px; font-weight: 800; line-height: 1.05; color: #2e9e5b;
  font-variant-numeric: tabular-nums; }
.rp-tam-lbl { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase;
  letter-spacing: .04em; }
.rp-tam-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.rp-tam-sub b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Tamanho sem nada pendente: o numero vira o visto e o cartao esmaece — some do caminho de
   quem esta procurando o que ainda falta, sem sumir da conta. */
.rp-tam-card.is-pronto { opacity: .62; }
.rp-tam-card.is-pronto .rp-tam-n { font-size: 26px; }
@media (max-width: 560px) { .rp-tams-grade { grid-template-columns: repeat(2, 1fr); }
  .rp-tam-n { font-size: 25px; } }
@media (max-width: 900px) { .rp-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rp-kpi { padding: 12px; gap: 10px; } .rp-kpi-n { font-size: 22px; }
  .rp-tab td, .rp-tab th { padding: 8px 5px; } }
.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); }
/* Botao "Enviar no WhatsApp" (verde do WhatsApp) */
.btn-wpp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-wpp:hover { background: #1eb959; border-color: #1eb959; color: #fff; }
/* Movimentacoes: varios grupos de filtro em linha propria (data, tipo, item). */
.est-controls .est-filtros-mov { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.est-fgrupo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.est-fdatas { gap: 6px; }
.est-fdata { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.est-fdata input[type=date] { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--surface); text-transform: none; letter-spacing: 0; cursor: pointer; }
.est-fdata input[type=date]:hover { border-color: var(--ink-2); }
.est-flimpar { color: #b23046; border-color: #f0c8d0; }
.est-flimpar:hover { background: #fdecef; border-color: #b23046; }
/* 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-vermais { width: 100%; margin-top: 10px; padding: 9px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; color: var(--primary); font-weight: 650; font-size: 13px; cursor: pointer; }
.hist-vermais:hover { background: var(--primary-soft); }
.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); }
/* Uso interno: âmbar — sai do estoque, mas não é produção nem correção de contagem. */
.hist-consumo_interno { background: #fff4e5; color: #b45309; }
.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; }
/* PISCA quando há pedido atrasado (chama a atenção do operador) */
.op-per-atras.tem-atraso { border-color: #c0304a; color: #c0304a; animation: piscaAtraso 1.4s ease-out infinite; }
.op-per-atras.tem-atraso.is-active { color: #fff; }
.op-atras-n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; background: #c0304a; color: #fff; font-size: 11px; font-weight: 800; margin-left: 2px; }
.op-per-atras.is-active .op-atras-n { background: #fff; color: #c0304a; }
@keyframes piscaAtraso { 0% { box-shadow: 0 0 0 0 rgba(192,48,74,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(192,48,74,0); } }
@media (prefers-reduced-motion: reduce) { .op-per-atras.tem-atraso { animation: none; } }
/* Tela de Produção: mesma logica de pisca no filtro "Atrasados" */
.prd-dia-atras.tem-atraso { border-color: #c0304a; color: #c0304a; animation: piscaAtraso 1.4s ease-out infinite; }
.prd-dia-atras.tem-atraso.is-active { color: #fff; }
.prd-atras-n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; background: #c0304a; color: #fff; font-size: 11px; font-weight: 800; margin-left: 4px; }
.prd-dia-atras.is-active .prd-atras-n { background: #fff; color: #c0304a; }
@media (prefers-reduced-motion: reduce) { .prd-dia-atras.tem-atraso { animation: none; } }

/* 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: 420px; 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); }
/* pre-line: a mensagem é escapada (esc) e inserida como TEXTO, então "\n" só vira quebra de
   linha aqui. Sem isso, confirmação de duas ideias (o que vai acontecer / o que isso custa)
   virava um parágrafo corrido que ninguém lê antes de clicar. */
.confirm-msg { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; white-space: pre-line; }
/* Variante com HTML (confirmAction {html:true}): o `pre-line` do texto puro transformaria cada
   quebra do template em linha em branco. Aqui quem espaça são os elementos. */
.confirm-msg.is-html { white-space: normal; text-align: left; }
.confirm-msg.is-html p { margin: 0 0 8px; }
.confirm-msg.is-html p:last-child { margin-bottom: 0; }
.confirm-msg.is-html ul { margin: 6px 0 10px 18px; padding: 0; list-style: disc; }
.confirm-msg.is-html li { margin: 2px 0; }
/* Os botões quebram pelo espaço DO DIÁLOGO, não pelo tamanho da janela. Quando o rótulo carrega
   um valor ("Manter desconto · R$ 300,20") dois deles não cabem lado a lado nos ~370px úteis da
   caixa — e como `.btn` é `white-space: nowrap`, o texto não quebrava: estourava e era cortado
   pela borda (o operador lia "R$ 300,2"). Só existia a regra de 460px, que olha a VIEWPORT e
   portanto nunca disparava num monitor.
   `wrap-reverse` é o que mantém o botão principal EM CIMA quando empilha (ele é o último no DOM),
   igual ao que a regra de celular já fazia com `column-reverse`. */
.confirm-acts { display: flex; flex-wrap: wrap-reverse; gap: 10px; justify-content: center; }
.confirm-acts .btn { flex: 1 1 auto; min-width: 130px; max-width: 100%; justify-content: center;
  /* último recurso: rótulo maior que a largura inteira quebra em 2 linhas em vez de vazar */
  white-space: normal; text-align: center; }
@media (max-width: 460px) {
  .confirm-acts { flex-direction: column-reverse; flex-wrap: nowrap; }
  .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: 2px; }
.pager-num { min-width: 30px; height: 30px; padding: 0 7px; border: none; background: transparent; color: var(--ink-2); border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.pager-num:hover:not(:disabled):not(.is-active) { background: var(--line-2); color: var(--ink); }
.pager-num.is-active { background: var(--primary); color: #fff; font-weight: 700; }
.pager-num:disabled { opacity: .3; cursor: default; }
/* setas ‹ › um tiquinho maiores e destacadas */
.pager-btns .pager-num:first-child, .pager-btns .pager-num:last-child { font-size: 16px; color: var(--muted); }
.pager-btns .pager-num:first-child:hover:not(:disabled), .pager-btns .pager-num:last-child:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); }
.pager-gap { padding: 0 3px; color: var(--muted); font-weight: 700; }

/* 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; }
/* O bloco do usuário virou BOTÃO ("minha conta"). Herda o layout do .side-account para a
   aparência não mudar — o que muda é o cursor e o realce, que avisam que ali se clica.
   O SAIR fica fora deste botão de propósito: sair e trocar senha na mesma área de toque, num
   canto apertado da barra, é convite a engano. */
.side-conta-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 4px; margin: -4px; border: 0; background: transparent; cursor: pointer;
  border-radius: 10px; font: inherit; text-align: left; }
.side-conta-btn:hover { background: rgba(255,255,255,.06); }
.side-conta-btn:hover .side-row-text strong { color: #fff; }
.side-conta-btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
/* Separador do modal "Minha conta": divide o que é identidade (e-mail) do que é segredo
   (senha). São duas decisões diferentes e o traço evita que a pessoa mexa numa achando a outra. */
.mc-sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0 16px; }
.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-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: 18px; letter-spacing: .12em; }
.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; }
/* "As pendências acima não valem mais" — verde, porque é resolução, não mais um problema. */
.nf-pend.nf-superado { background: #eef8f0; border: 1px solid #bfe3c9; color: #1d6b35; }
.nf-pend.nf-superado[hidden] { display: none; }
.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; }
/* Log de rejeição da SEFAZ — fica FIXO no editor (não é um toast que some) */
.nf-rejeicao { border: 1px solid #f0c0c8; background: #fdf2f4; border-radius: 12px; padding: 12px 14px; margin: 2px 0 12px; }
.nf-rej-head { font-weight: 800; color: #c0304a; font-size: 14px; margin-bottom: 5px; }
.nf-rej-motivo { font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.4; word-break: break-word; }
.nf-rej-dica { font-size: 12px; color: var(--muted); margin-top: 7px; }
.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); }

/* ===== "Quitadas sem nota" — a pendência fiscal que ninguém via =====
   O botão carrega o CONTADOR de propósito: pendência fiscal escondida atrás de um clique
   não é vista, e o "emitir NFC-e depois" já falhava exatamente por falta de lugar onde a
   venda reaparecesse. O número tem que estar na cara antes de alguém pensar em clicar. */
.nfm-seg button.nfm-seg-alerta { color: #b23046; }
.nfm-seg button.nfm-seg-alerta b { font-weight: 800; background: #fdecef; color: #b23046;
  border-radius: 999px; padding: 0 6px; margin-left: 3px; font-size: 11.5px; }
.nfm-seg button.nfm-seg-alerta.is-active { background: #b23046; color: #fff; }
.nfm-seg button.nfm-seg-alerta.is-active b { background: rgba(255,255,255,.22); color: #fff; }

.nfm-pend-aviso { background: #fdf2f4; border: 1px solid #f3c9d1; border-radius: 12px;
  padding: 12px 15px; margin-bottom: 12px; font-size: 13.5px; color: var(--ink); }
.nfm-pend-aviso span { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-2); }

.nfm-pend-sit { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
/* Rejeitada e cancelada gritam: não é "esqueceram de emitir", é tentativa que FALHOU. */
.nfm-pend-sit.is-rejeitada, .nfm-pend-sit.is-cancelada { background: #fdecef; color: #b23046; }
.nfm-pend-sit.is-rascunho { background: #fff3e0; color: #9a6a00; }
.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; }
/* 2º documento do mesmo pedido: âmbar, não vermelho — a nota está VÁLIDA (não é rejeição nem
   cancelamento), o que ela pede é atenção da contabilidade. Texto completo no title. */
.nfm-motivo.nfm-dupl { color: #8a5a12; font-weight: 600; }

.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 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; font-size: 13px; }
.nfed-edit-cli { flex: none; border: 1px solid var(--primary); background: var(--surface); color: var(--primary);
  font-weight: 700; font-size: 12.5px; padding: 5px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.nfed-edit-cli:hover { background: var(--primary-soft); }
/* 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; }
/* Linha que fica FORA da conta da nota (o frete). Apagada e recuada de propósito: ela vem
   DEPOIS do total, para ninguém somar de cabeça — já se leu "frete somou" por causa dela. */
.nfed-tl.nfed-fora { border-bottom: none; border-top: 1px dashed var(--line-2); margin-top: 4px;
  color: var(--muted, #6b7280); font-size: 12px; }
.nfed-tl.nfed-fora i { font-style: normal; opacity: .8; }
.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 */
/* Aviso de pedido que JÁ tem nota autorizada. Duas cores porque são duas consequências
   diferentes, e confundir uma com a outra custa dinheiro do Cristian:
     .is-sub  (azul)     = SUBSTITUIÇÃO — o cupom vai ser cancelado, continua um documento só
     .is-dupl (vermelho) = SEGUNDO documento — a venda passa a ter dois, imposto em dobro */
.nf-dupl { margin: 14px 0 2px; padding: 11px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; }
.nf-dupl.is-sub { background: #eef4fd; border: 1px solid #c3d8f5; color: #1c3f6e; }
.nf-dupl.is-dupl { background: #fdeeee; border: 1px solid #f2c4c4; color: #8a2222; }
.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-aguard { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #b5771f; }
.ec-acao .ent-aguard { width: 100%; justify-content: center; padding: 5px 0; }
.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); }
/* Reordenar a rota (setas ↑↓) + badge de rota manual */
.rot-move { flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; }
.rot-mv { width: 26px; height: 19px; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; cursor: pointer; font-size: 9px; color: var(--ink-2); line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; }
.rot-mv:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.rot-mv:disabled { opacity: .3; cursor: default; }
.rot-manual { font-size: 11px; font-weight: 700; color: var(--primary); background: rgba(181,50,79,.12); padding: 2px 9px; border-radius: 999px; white-space: nowrap; margin-left: 4px; }
.rot-dica { font-size: 12px; color: var(--ink-2); margin: -4px 0 12px; }
.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(62px, 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); width: 100%; font-family: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.ent-hora:hover { border-color: var(--ink-2); }
.ent-hora.is-sel { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(181,50,79,.28); }
.ent-hora.is-sel .ent-hora-h { color: var(--primary); }
.ent-faixa-limpar { margin-top: 10px; width: 100%; padding: 8px; border: 1px solid #f0bcc6; background: #fbe4e8; color: var(--danger); border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ent-faixa-limpar:hover { background: #f6d0d8; }
.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}
/* CPF/CNPJ na nota — mora DENTRO do bloco de nota fiscal (é uma escolha sobre a nota, não
   sobre o pagamento) e some quando a escolha é "NFC-e depois". A mensagem embaixo troca de
   cor conforme o estado: cinza enquanto digita, vermelho no inválido, verde no válido —
   o operador precisa saber ANTES de confirmar, porque depois o pagamento já foi lançado. */
.pgm-doc{margin-top:11px; padding-top:11px; border-top:1px dashed #dfe3e9}
.pgm-doc[hidden]{display:none}
.pgm-doc label{display:block; font-size:12.5px; font-weight:700; color:#374151; margin-bottom:5px}
.pgm-doc label .muted{font-weight:500; color:#8b93a1}
.pgm-doc input{width:100%; padding:9px 11px; border:1.5px solid #d7dbe2; border-radius:9px;
  font-family:inherit; font-size:14px; letter-spacing:.02em; background:#fff}
.pgm-doc input:focus{outline:none; border-color:var(--vinho,#7a1330)}
.pgm-doc input::placeholder{letter-spacing:0; font-size:12.5px; color:#a6adb9}
.pgm-doc-msg{display:block; margin-top:5px; min-height:15px; font-size:12px; font-weight:600; color:#6b7280}
.pgm-doc-msg.is-wait{color:#6b7280; font-weight:500}
.pgm-doc-msg.is-err{color:#c0392b}
.pgm-doc-msg.is-ok{color:#0f9d58}

/* ============================================================
   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,
  .ped-tabela tr.row-urg1,
  .ped-tabela tr.row-urg3 { border-left: 3px solid #c0304a; }
  /* a fita segue o status (vence a urgência acima) */
  .ped-tabela tr.pst-aguard { border-left: 3px solid var(--s-aguardando_producao); }
  .ped-tabela tr.pst-emprod { border-left: 3px solid var(--s-em_producao); }
  .ped-tabela tr.pst-produzido { border-left: 3px solid var(--s-produzido); }
  .ped-tabela tr.pst-forno { border-left: 3px solid var(--s-forno); }
  .ped-tabela tr.pst-preparacao { border-left: 3px solid var(--s-preparacao); }

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

/* ===== Relatório de entregas (aba Relatório da tela Entregas) =====
   Uma tabela por motorista, com subtotal no cabeçalho do grupo.
   ⚠️ NÃO é acerto de pagamento: a confeitaria NÃO paga os entregadores (o cliente paga o
   frete direto a eles, que não são funcionários — o dono evita isso p/ não criar vínculo
   empregatício). O relatório responde OPERAÇÃO: cumpriu o horário, deu problema, quanto
   de mercadoria saiu. */
/* ⚠️ 4 indicadores numa tela larga NÃO é o cockpit de Pedidos com outro número.
   Lá são 5 ou 6 cards de ~330px; aqui cada um fica com ~400px. Com o mesmo gap de
   12px a borda de 1px some no branco e os quatro leem como UMA FAIXA só — e o
   conteúdo (ícone + número) ocupa metade do card, deixando o resto vazio.
   Por isso o 4-up tem respiro e conteúdo próprios: mais gap para separar as caixas,
   e ícone/número maiores para o card não virar uma placa vazia. */
.kpi-row.kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kpi-row.kpi-4 .kpi-card { padding: 17px 20px 17px 21px; gap: 15px; }
.kpi-row.kpi-4 .kpi-ico { width: 46px; height: 46px; border-radius: 13px; }
.kpi-row.kpi-4 .kpi-ico svg { width: 23px; height: 23px; }
.kpi-row.kpi-4 .kpi-num { font-size: 26px; }
.kpi-row.kpi-4 .kpi-tit { font-size: 12.5px; margin-top: 4px; }

.rel-grupo { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow); }
.rel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.rel-moto { font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.rel-resumo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.rel-km { font-variant-numeric: tabular-nums; }
/* ⚠️ MERCADORIA (verde, dele) x FRETE (neutro, do motoboy). A confeitaria NAO paga os
   entregadores — o frete é pago pelo CLIENTE, direto a eles, e nunca passa pelo caixa.
   Pintar o frete de verde-dinheiro fazia parecer receita/despesa da loja; ele fica em
   tom neutro de propósito, como informação de acerto entre terceiros. */
.rel-valor { color: #17794a; font-weight: 800; font-variant-numeric: tabular-nums; }
.rel-frete { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.rel-frete-td { color: var(--ink-2); }
/* Atraso: o único número desta tela que pede ação (falar com o motoboy, rever a janela). */
.rel-atraso { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  font-weight: 800; background: #fdecef; color: #b23046; white-space: nowrap; }

.rel-tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rel-tab .rel-end { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Linha ainda não entregue fica esmaecida: ainda não aconteceu, não entra nos totais. */
.rel-tab tr.rel-pendente td { opacity: .72; }

.rel-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px;
  font-weight: 750; white-space: nowrap; }
.rel-tag.rel-entregue { background: #e3f6ec; color: #17794a; }
.rel-tag.rel-saiu_entrega { background: #efe7fc; color: #6b3fc0; }
.rel-tag.rel-finalizado { background: #e6f0e9; color: #2c9c66; }

.rel-vazio { padding: 34px 18px; text-align: center; color: var(--ink-2);
  background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; }

/* A tabela é larga (8 colunas): no tablet/celular ela rola dentro do card em vez de
   espremer as colunas — regra do projeto p/ 820px e 390px. */
@media (max-width: 1080px) {
  /* 2-up: o card já não é largo, então volta ao respiro normal — 18px aqui só comeria
     largura útil no tablet. */
  .kpi-row.kpi-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rel-tab { min-width: 860px; }
  .rel-tab .rel-end { max-width: 220px; }
}

/* ⚠️ Devolve o 4-up ao tamanho de celular. A faixa deslizante de ≤700px mira
   `.kpi-row .kpi-card` (0,2,0) e as regras acima são `.kpi-row.kpi-4 .kpi-card`
   (0,3,0) — SEM isto o 4-up ganharia por especificidade e os cards sairiam maiores
   justamente onde não cabem. */
@media (max-width: 700px) {
  .kpi-row.kpi-4 { gap: 10px; }
  .kpi-row.kpi-4 .kpi-card { padding: 11px 13px; gap: 10px; }
  .kpi-row.kpi-4 .kpi-ico { width: 34px; height: 34px; border-radius: 10px; }
  .kpi-row.kpi-4 .kpi-ico svg { width: 17px; height: 17px; }
  .kpi-row.kpi-4 .kpi-num { font-size: 20px; }
}

/* ===== Ocorrência de entrega (card do kanban + linha do relatório) =====
   Só aparece quando existe. Insucesso usa âmbar/vermelho porque é ele que EXPLICA por
   que o pedido voltou para "Prontas para sair" — sem isso a fila enche sem motivo visível. */
.ec-oc { display: flex; align-items: flex-start; gap: 7px; margin: 7px 0 0; padding: 7px 9px;
  border-radius: 9px; font-size: 12.5px; line-height: 1.35; }
.ec-oc.is-prob { background: #fff4e5; color: #8a5200; border: 1px solid #f4d9b0; }
.ec-oc.is-ok { background: #e9f6ee; color: #1f7a44; border: 1px solid #c9e6d5; }
.ec-oc-ico { flex: none; width: 17px; height: 17px; border-radius: 50%; display: grid;
  place-items: center; font-size: 11px; font-weight: 900; background: rgba(0,0,0,.07); }
.ec-oc-txt { min-width: 0; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.rel-oc { max-width: 250px; }
.rel-ocbadge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; cursor: help; }
.rel-ocbadge.is-prob { background: #fff4e5; color: #8a5200; }
.rel-ocbadge.is-ok { background: #e9f6ee; color: #1f7a44; }

/* ===== Parâmetros gerais (tela de configuração por módulo) ===== */
.par-modulo { margin-bottom: 22px; }
.par-modulo-tit { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-2); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.par-lista { display: flex; flex-direction: column; gap: 12px; }
.par-item { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 17px; box-shadow: var(--shadow); }
.par-info { min-width: 0; }
.par-rotulo { font-weight: 700; font-size: 15px; }
.par-ajuda { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; max-width: 640px; }
.par-controle { flex: none; }

/* segmented (tipo=opcao) */
.par-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 3px; gap: 3px; }
.par-seg-btn { font: inherit; font-size: 13.5px; font-weight: 650; color: var(--ink-2);
  background: none; border: 0; border-radius: 9px; padding: 8px 15px; cursor: pointer; white-space: nowrap; }
.par-seg-btn:hover { color: var(--ink); }
.par-seg-btn.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }

/* switch (tipo=bool) */
.par-switch { width: 46px; height: 27px; border-radius: 999px; border: 0; background: var(--line);
  position: relative; cursor: pointer; transition: background .15s; }
.par-switch.on { background: var(--primary); }
.par-switch-dot { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.par-switch.on .par-switch-dot { left: 22px; }

.par-input { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); min-width: 240px; }
.par-vazio { padding: 34px; text-align: center; color: var(--ink-2); }

@media (max-width: 640px) {
  .par-item { flex-direction: column; align-items: stretch; }
  .par-controle { align-self: flex-start; }
}

/* Formas de pagamento no cadastro de conta bancaria (checkboxes) */
.cb-formas { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0; }
.cb-forma { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cb-forma:hover { border-color: var(--primary); }
.cb-forma input { width: 16px; height: 16px; cursor: pointer; }
/* Maquininhas (POS) no cadastro da conta */
.cb-maq-add { display: flex; gap: 8px; margin-bottom: 9px; }
.cb-maq-add input { flex: 1; }
.cb-maq-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 10px; }
.cb-maq-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 12px;
  border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 13px; }
.cb-maq-chip button { border: none; background: rgba(0,0,0,.09); color: inherit; width: 18px; height: 18px;
  border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.cb-maq-chip button:hover { background: var(--primary); color: #fff; }
.cb-maq-vazio { font-size: 12.5px; color: var(--muted); }

/* Quebra da parcela no modal de baixa: total, deduções, saldo */
.baixa-break { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.baixa-break-l { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; font-size: 14px; }
.baixa-break-l + .baixa-break-l { border-top: 1px solid var(--line); }
.baixa-break-l b { font-variant-numeric: tabular-nums; }
.baixa-break-l.is-ded { color: #9a6a00; }
.baixa-break-l.is-saldo { background: var(--surface-2); font-weight: 700; }
.baixa-break-l.is-saldo b { color: var(--primary); }

/* Número interno EMPRESA.FILIAL.SEQUENCIAL nas listas (pedidos, contas a pagar/receber) */
.n-interno { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px;
  letter-spacing: .02em; color: var(--ink-3, #9aa0aa); font-variant-numeric: tabular-nums; }

/* ===== Cargos — catálogo de funções (usado no cadastro de FUNCIONÁRIO) =====
   ⚠️ O funcionário guarda o NOME do cargo, não um vínculo. Por isso "inativar" aqui é
   seguro (não mexe na ficha de ninguém) e por isso o aviso do topo existe: sem ele o
   operador supõe que inativar apaga o cargo de quem já o tem. */
.cg-aviso { background: #eef4ff; border: 1px solid #cfe0fb; border-radius: 12px;
  padding: 11px 15px; margin-bottom: 14px; font-size: 13px; color: var(--ink); }

.cg-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cg-bar input[type="search"] { min-width: 220px; }
.cg-bar select { min-width: 190px; }
.cg-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2);
  white-space: nowrap; cursor: pointer; }

/* Cargo inativo continua legível de propósito: ele existe para explicar fichas antigas.
   Esmaecer sem sumir é o meio-termo — some da escolha, não some da leitura. */
.cg-tab tr.cg-off td { opacity: .55; }
.cg-uso { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700;
  color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }

.cg-setor { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.cg-setor.s-producao { background: #fdecef; color: #b23046; }
.cg-setor.s-comercial { background: #e7f6ee; color: #17794a; }
.cg-setor.s-entrega { background: #f0ebfb; color: #6b3fc0; }
.cg-setor.s-administrativo { background: #eef4ff; color: #2a5db0; }
.cg-setor.s-apoio { background: #fff3e0; color: #9a6a00; }
/* Ações lado a lado: sem o flex os dois botões empilham (a célula é estreita e o .nfm-ib
   quebra linha), e a linha da tabela dobra de altura sem motivo. */
.cg-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* ===== Caixa aberto de dia anterior (virada de turno pendente) =====
   O turno virou o dia sem fechar: a gaveta de ontem nunca foi conferida. Grita em vermelho
   porque e integridade de dinheiro — nao "torta atrasada", mas quem responde pelo caixa. */
.cxp-card.cxp-venc { border-color: #e7aab5; box-shadow: 0 0 0 1px #e7aab5, var(--shadow); }
.cxp-alerta { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  font-weight: 600; line-height: 1.4; background: var(--red-soft, #fbe7eb); color: #b23046; }
@media (prefers-color-scheme: dark) { .cxp-alerta { background: #331920; color: #f0879a; } }

/* ===== Grupos & Permissões ===== */
.gr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.gr-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease; }
.gr-card:hover { border-color: #e0c4cc; box-shadow: 0 8px 22px rgba(143,34,58,.08); }
.gr-card.gr-off { opacity: .62; }
.gr-card.gr-sys { border-color: #e2b8c2; background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface) 46%); }
.gr-top { display: flex; align-items: flex-start; gap: 12px; padding: 16px 17px 12px; }
.gr-ava { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); }
.gr-ava svg { width: 21px; height: 21px; }
.gr-card.gr-sys .gr-ava { background: var(--primary); color: #fff; }
.gr-id { flex: 1; min-width: 0; }
.gr-nome { font-weight: 750; font-size: 15.5px; letter-spacing: -.01em; display: flex; align-items: center;
  gap: 7px; flex-wrap: wrap; line-height: 1.2; }
.gr-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.gr-tag-sys { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 7px; }
.gr-tag-off { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.gr-acoes { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.gr-ib { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2); transition: all .12s; }
.gr-ib svg { width: 15px; height: 15px; }
.gr-ib:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.gr-ib-danger:hover { border-color: #d0304a; color: #d0304a; background: #fdecef; }
.gr-foot { margin-top: auto; padding: 12px 17px 15px; border-top: 1px solid var(--line-2); }
.gr-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.gr-chip { font-size: 11.5px; font-weight: 650; padding: 3px 10px; border-radius: 999px;
  background: #e9f6ef; color: #17794a; }
.gr-chip-all { background: var(--primary-soft); color: var(--primary-dark, #8f223a); }
.gr-chip-none { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.gr-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; }
.gr-count { font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gr-users { font-size: 11.5px; color: var(--muted); }
.gr-users-0 { opacity: .7; }

/* --- editor: cartões-toggle por seção --- */
.gm-form { display: flex; flex-direction: column; gap: 4px; }
.gm-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.gm-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.gm-contador { font-size: 12.5px; font-weight: 700; color: var(--primary); background: var(--primary-soft);
  padding: 3px 12px; border-radius: 999px; }
.gm-secs { display: flex; flex-direction: column; gap: 14px; }
.gm-sec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.gm-sec-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.gm-all { border: 0; background: none; color: var(--primary); font-size: 12px; font-weight: 650; cursor: pointer;
  font-family: inherit; padding: 2px 4px; border-radius: 6px; }
.gm-all:hover { text-decoration: underline; }
.gm-all.is-on { color: var(--muted); }
/* Cartoes mais largos: agora cada um lista as TELAS que o modulo libera, e 155px cortava a
   lista em duas palavras por linha. */
.gm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 9px; }
.gm-card { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--line);
  border-radius: 11px; cursor: pointer; background: var(--surface); transition: all .13s ease; user-select: none; }
.gm-card:hover { border-color: #e0c4cc; }
.gm-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.gm-check { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; border: 1.5px solid var(--line);
  display: grid; place-items: center; color: #fff; transition: all .13s ease; }
.gm-check svg { width: 14px; height: 14px; opacity: 0; transition: opacity .1s; }
.gm-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gm-nome { font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
/* As telas que o modulo destrava. Quem monta o grupo precisa VER o que esta liberando —
   "Pedidos, agenda e producao" tambem abre o Resumo, o Freezer e a Aprovacao. */
.gm-telas { font-size: 11px; line-height: 1.4; color: var(--muted); }
.gm-card.is-on .gm-telas { color: var(--ink-2); }
.gm-card.is-on { border-color: var(--primary); background: var(--primary-soft); }
.gm-card.is-on .gm-check { background: var(--primary); border-color: var(--primary); }
.gm-card.is-on .gm-check svg { opacity: 1; }
.gm-card.is-on .gm-nome { color: var(--ink); }
.gm-nota { margin-top: 14px; }

/* Quem abriu o caixa — responsabilidade do turno (grupos & permissões) */
.cxp-quem { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.cxp-quem b { color: var(--ink); }
/* Detalhe da sessão de caixa: quem abriu / fechou (responsabilidade do turno) */
.cxs-quem { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.cxs-quem b { color: var(--ink); }
.cxs-sep { margin: 0 7px; color: var(--muted); }
.cxp-link { color: var(--primary); cursor: pointer; font-weight: 600; }
.cxp-link:hover { text-decoration: underline; }

/* ===== Histórico do caixa (trilha de turnos: quem abriu/fechou, divergências) ===== */
.cxh-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 11px 15px; box-shadow: var(--shadow); }
.cxh-per { display: flex; align-items: center; gap: 8px; }
.cxh-per input[type="date"] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); color: var(--ink); font-family: inherit; font-size: 13px; }
.cxh-sel { padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2);
  color: var(--ink); font-family: inherit; font-size: 13px; min-width: 190px; }
.cxh-quick { display: flex; gap: 7px; margin-left: auto; }

.cxh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cxh-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; }
.cxh-kpi-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2); }
.cxh-kpi-ic svg { width: 19px; height: 19px; }
.cxh-kpi-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cxh-kpi-b span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.cxh-kpi-b strong { font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.cxh-kpi.is-neg .cxh-kpi-b strong { color: #b3273f; } .cxh-kpi.is-neg .cxh-kpi-ic { background: #fdeef0; color: #b3273f; }
.cxh-kpi.is-pos .cxh-kpi-b strong { color: #1f7a4d; } .cxh-kpi.is-pos .cxh-kpi-ic { background: #eaf7ef; color: #1f7a4d; }
.cxh-kpi.is-warn .cxh-kpi-b strong { color: #b06f00; } .cxh-kpi.is-warn .cxh-kpi-ic { background: #fdf0dc; color: #b06f00; }
.cxh-kpi.is-hero { border-color: #e2b8c2; background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface) 55%); }
.cxh-kpi.is-hero .cxh-kpi-ic { background: var(--primary); color: #fff; }

/* tabela */
.cxh-tbl th.num, .cxh-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cxh-tbl td { vertical-align: middle; }
.cxh-strong { font-weight: 700; color: var(--ink); }
.cxh-row { cursor: pointer; }
.cxh-row:hover td { background: var(--primary-soft); }
.cxh-when b { display: block; font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cxh-pessoa { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.cxh-ava2 { width: 19px; height: 19px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark);
  display: grid; place-items: center; font-size: 10px; font-weight: 800; flex-shrink: 0; }
.cxh-naoreg { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 3px; display: inline-block; }
.cxh-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cxh-okc { background: #eaf7ef; color: #1f7a4d; }
.cxh-faltac { background: #fdeef0; color: #b3273f; }
.cxh-sobrac { background: #eef4ff; color: #255ca8; }
.cxh-open { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

/* ===== Filtros da lista de títulos (Contas a pagar/receber) ===== */
.finf-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; box-shadow: var(--shadow); }
.finf-busca { flex: 1 1 240px; min-width: 200px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface-2); color: var(--ink); font-family: inherit; font-size: 13px; }
.finf-sel { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2);
  color: var(--ink); font-family: inherit; font-size: 13px; }
.finf-per, .finf-adv label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.finf-per input[type="date"], .finf-adv input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink); font-family: inherit; font-size: 12.5px; }
.finf-adv input[type="number"] { width: 92px; }
.finf-limpar { border: 0; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; font-family: inherit; padding: 4px 6px; }
.finf-limpar:hover { color: var(--primary); text-decoration: underline; }
.btn.is-on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.finf-adv { flex-basis: 100%; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 11px; }
.finf-conta { font-size: 12.5px; color: var(--muted); margin-bottom: 9px; }
.finf-conta b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ============================================================
   Fechamento do dia (Entregas) — recebimentos por forma de pagamento
   ============================================================ */
.fec-kpis{display:grid;grid-template-columns:1.05fr 1.95fr;gap:14px;margin:4px 0 14px}
@media(max-width:820px){.fec-kpis{grid-template-columns:1fr}}
.fec-kbig{background:var(--surface,#fff);border:1px solid var(--border,#e6e8ec);border-radius:14px;
  padding:16px 18px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.fec-kbig .fec-lab{color:var(--muted,#6b7280);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.fec-kbig .fec-val{font-size:29px;font-weight:750;letter-spacing:-.5px;margin-top:2px}
.fec-kbig .fec-val.green{color:#0f9d58}
.fec-kbig .fec-foot{margin-top:8px;display:flex;gap:16px;color:var(--muted,#6b7280);font-size:12.5px;flex-wrap:wrap}
.fec-kbig .fec-foot b{color:var(--text,#1e2430)} .fec-kbig .fec-foot .amber{color:#b7791f}
.fec-methods{background:var(--surface,#fff);border:1px solid var(--border,#e6e8ec);border-radius:14px;
  padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.fec-mchip{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted,#6b7280);
  border:1px solid var(--border,#e6e8ec);border-radius:10px;padding:9px 12px;font-variant-numeric:tabular-nums}
.fec-mchip b{color:var(--text,#1e2430);font-size:15px}
.fec-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.f-pix{background:#00b894}.f-cred{background:#6c5ce7}.f-deb{background:#0984e3}.f-din{background:#12a150}.f-bol{background:#e67e22}.f-tr{background:#0aa}.f-out{background:#888}

.fec-periodo{font-weight:700;color:#8a1030;margin:0 0 12px;font-size:14px;display:flex;align-items:center;gap:7px}
.fec-periodo svg{width:16px;height:16px;flex:none}
.fec-nowrap{white-space:nowrap}
.fec-tipo{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.fec-tipo.is-ent{background:#e7f0ff;color:#1a56c4}
.fec-tipo.is-ret{background:#eef1f4;color:#556}
.fec-sel{height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 28px 0 11px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.fec-sel:focus{outline:none;border-color:var(--primary)}
.fec-orig{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.fec-orig.is-online{background:#e7f6ec;color:#1e7b34}
.fec-orig.is-sist{background:#eef1f4;color:#556}
.fec-conf{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin:0 0 14px;padding:13px 16px;
  border:1px dashed #d9a3b4;border-radius:14px;background:#fbeef1}
.fec-conf .fec-ct{font-weight:700;display:flex;align-items:center;gap:8px;color:#8a1030}
.fec-conf .fec-ct svg{width:16px;height:16px;flex:none}
.fec-ci{display:flex;flex-direction:column}
.fec-ci .fec-cl{color:var(--muted,#6b7280);font-size:12px;display:inline-flex;align-items:center;gap:4px}
.fec-ci .fec-cl svg{width:13px;height:13px;flex:none}
.fec-ci .fec-cv{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.fec-ci .fec-cn{color:#0f9d58;font-size:11.5px;font-weight:600}
.fec-ci .fec-cn.warn{color:#b7791f}

.fec-tblwrap{background:var(--surface,#fff);border:1px solid var(--border,#e6e8ec);border-radius:14px;
  overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.fec-scroll{overflow-x:auto}
.fec-tbl{border-collapse:collapse;width:100%;min-width:860px}
.fec-tbl th{background:#f6f2f4;text-align:left;padding:11px 12px;font-size:11.5px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted,#6b7280);border-bottom:1px solid var(--border,#e6e8ec);white-space:nowrap}
.fec-tbl th.num,.fec-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fec-tbl td{padding:10px 12px;border-bottom:1px solid var(--border,#eef0f2);vertical-align:middle}
.fec-tbl tbody tr:hover{background:#fbf7f9}
.fec-cli{font-weight:600}
.fec-zap{color:var(--muted,#6b7280);font-size:12px}
/* Campo de observação editável na linha do fechamento (vai junto no Excel exportado). */
.fec-obs-td{min-width:130px}
.fec-obs{width:100%;min-width:110px;border:1px solid var(--border,#e6e8ec);border-radius:8px;padding:5px 8px;
  font:inherit;font-size:12.5px;color:var(--ink,#222);background:var(--surface,#fff)}
.fec-obs:focus{outline:none;border-color:var(--primary,#8a1030);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#8a1030) 16%,transparent)}
.fec-obs::placeholder{color:var(--muted,#9aa0a8);opacity:.75}
.fec-sub{color:var(--text,#1e2430);font-size:13px}
.fec-mut{color:#aab0b8}
.fec-v{font-weight:600}
.fec-tot{font-weight:700}
.fec-tbl tfoot td{padding:12px;font-weight:750;border-top:2px solid #e0b3c1;font-variant-numeric:tabular-nums}
.fec-tbl tfoot .fec-tlab{text-transform:uppercase;letter-spacing:.4px;font-size:12px;color:var(--muted,#6b7280)}
.fec-tbl tfoot .fec-gtot{color:#a81a3f;font-size:16px}
/* Dois totais separados: RECEBIDO (verde) e A RECEBER (âmbar) — nunca somados num só número */
.fec-tbl tfoot .fec-t-receb{color:#0f9d58;font-size:16px}
.fec-tbl tfoot .fec-t-areceber{color:#b7791f;font-size:16px}
.fec-tbl tfoot tr.fec-tr2 td{border-top:0;padding-top:2px;padding-bottom:11px}
/* DESCONTO concedido na quitação (% no dinheiro): não é dinheiro que entrou nem falta de caixa —
   é concessão. Cor própria (violeta), distinta do verde do recebido e do âmbar do a receber,
   para ninguém confundir com dinheiro faltando. */
.fec-desc{color:#7c5cbf;font-weight:600}
.fec-tbl tfoot tr.fec-tr3 td{border-top:0;padding-top:2px;padding-bottom:11px}
.fec-tbl tfoot tr.fec-tr3 .fec-desc{font-size:15px}
/* Linhas EM ABERTO de dias anteriores (carry-over): tom âmbar do "a receber" + faixa à esquerda */
.fec-tbl tbody tr.fec-ant{background:#fffdf7}
.fec-tbl tbody tr.fec-ant:hover{background:#fdf7ec}
.fec-tbl tbody tr.fec-ant>td:first-child{box-shadow:inset 3px 0 0 #d9a441}
.fec-ant-tag{margin-top:2px;font-size:11px;font-weight:700;color:#b7791f}
.fec-tbl tbody tr.fec-ant-div>td{background:#fdf3e0;color:#8a5a12;font-weight:700;font-size:12px;
  letter-spacing:.3px;border-top:1px solid #f0d9ad;border-bottom:1px solid #f0d9ad;padding:8px 12px}
.fec-tbl tbody tr.fec-ant-div svg{width:14px;height:14px;flex:none;vertical-align:-2px;margin-right:4px}
.fec-tbl tbody tr.fec-ant-div b{color:#8a1030}
/* Linhas RECEBIDO de outros dias (pago aqui, entregue noutro dia): tom verde do "recebido" */
.fec-tbl tbody tr.fec-receb-ant{background:#f6fbf7}
.fec-tbl tbody tr.fec-receb-ant:hover{background:#eef8f0}
.fec-tbl tbody tr.fec-receb-ant>td:first-child{box-shadow:inset 3px 0 0 #3fae6a}
.fec-receb-tag{margin-top:2px;font-size:11px;font-weight:700;color:#0f9d58}
.fec-tbl tbody tr.fec-receb-div>td{background:#e8f6ee;color:#0d6b3f;font-weight:700;font-size:12px;
  letter-spacing:.3px;border-top:1px solid #bfe6cd;border-bottom:1px solid #bfe6cd;padding:8px 12px}
.fec-tbl tbody tr.fec-receb-div svg{width:14px;height:14px;flex:none;vertical-align:-2px;margin-right:4px}
.fec-tbl tbody tr.fec-receb-div b{color:#0d6b3f}
.fec-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.fec-chip.pg{background:#e6f5ec;color:#0f9d58}
.fec-chip.pc{background:#eef2fe;color:#2563eb}
.fec-chip.ar{background:#fdf3e0;color:#b7791f}

.fec-sec2{margin-top:22px}
.fec-sec2 h3{font-size:14px;margin:0 0 3px;display:flex;align-items:center;gap:9px}
.fec-badge{background:#fdf3e0;color:#b7791f;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
.fec-subh{color:var(--muted,#6b7280);font-size:12.5px;margin-bottom:10px}
.fec-amgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.fec-amc{background:var(--surface,#fff);border:1px solid var(--border,#e6e8ec);border-left:3px solid #e0a53a;
  border-radius:11px;padding:11px 13px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.fec-amc .fec-an{font-weight:600}
.fec-amc .fec-az{color:var(--muted,#6b7280);font-size:12px}
.fec-amc .fec-ad{margin-top:6px;color:var(--muted,#6b7280);font-size:12.5px;display:flex;justify-content:space-between;gap:8px}
.fec-amc .fec-ad b{color:var(--text,#1e2430)}

/* Estoque Tier 2 #4 — entrada por embalagem + card de preços/cotação */
.est-emb-toggle{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;
  background:#fbf7f9;border:1px solid var(--border,#e6e8ec);border-radius:9px;padding:8px 11px;cursor:pointer}
.est-emb-toggle input{width:16px;height:16px}
.est-preco-card{border:1px solid var(--border,#e6e8ec);border-radius:12px;padding:12px 14px;margin:0 0 12px;background:#fbfbfc}
.est-preco-top{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.est-preco-lab{color:var(--muted,#6b7280);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.est-preco-val{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;display:flex;align-items:center;gap:8px}
.est-preco-sub{color:var(--muted,#6b7280);font-size:12px;margin-top:2px}
.est-preco-g{color:var(--muted,#6b7280);font-size:11.5px;font-variant-numeric:tabular-nums;margin-top:1px}
.est-reajuste{margin-top:9px;font-size:12px;font-weight:650;color:#b3273f;background:#fdeef0;border:1px solid #f2c4cd;border-radius:9px;padding:7px 11px}
@media (prefers-color-scheme: dark){.est-reajuste{background:rgba(192,48,74,.13);border-color:rgba(192,48,74,.35);color:#f0687f}}
.est-var{font-size:12px;font-weight:700;padding:1px 7px;border-radius:999px}
.est-var.up{background:#fdecec;color:#c0392b}
.est-var.down{background:#e6f5ec;color:#0f9d58}
.est-cot{margin-top:11px;border-top:1px dashed var(--border,#e6e8ec);padding-top:9px}
.est-cot-h{color:var(--muted,#6b7280);font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-bottom:6px}
.est-cot-row{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;border-radius:7px;font-size:13px}
.est-cot-row b{font-variant-numeric:tabular-nums}
.est-cot-row.best{background:#e6f5ec}
.est-cot-row.best b{color:#0f9d58}

/* Lookup: botão "+ Cadastrar novo" (rodapé do overlay de busca) */
.lookup-criar{margin-top:8px;width:100%;padding:9px 12px;border:1px dashed var(--accent,#a81a3f);
  background:transparent;color:var(--accent,#a81a3f);border-radius:9px;font-weight:600;font-size:13px;cursor:pointer}
.lookup-criar:hover{background:#fbeef1}

/* Cadastro inline de fornecedor — abas */
.nf-forn-card{max-width:560px;width:min(560px,94vw)}
/* Impede scroll horizontal: os campos podem encolher dentro da grade (sem min-width intrínseco
   do input empurrando a largura) e o corpo do modal não rola de lado. */
.nf-forn-card .fin-ovl-body{overflow-x:hidden}
.nf-forn-card .field{min-width:0}
.nf-forn-card .field input,.nf-forn-card .field select{width:100%;min-width:0;box-sizing:border-box}
.nf-forn-card .field.full{grid-column:1/-1}
.nf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border,#e6e8ec);margin-bottom:12px}
.nf-tab{background:none;border:0;padding:8px 14px;font-size:13px;font-weight:600;color:var(--muted,#6b7280);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.nf-tab.is-active{color:var(--accent,#a81a3f);border-bottom-color:var(--accent,#a81a3f)}
.nf-pane .field{margin-bottom:2px}

/* ===== Produção = quadro por estação, torta por torta (tablets fixos por posto) ===== */
.prd-dia{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.prd-dia-lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:2px}
.prd-dia-btn{padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font-weight:600;font-size:13.5px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.prd-dia-btn:hover{background:var(--surface-2)}
.prd-dia-btn.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.prd-dia-input{padding:6px 11px;border:1px solid var(--line);border-radius:999px;font-size:13px;
  color:var(--ink-2);background:var(--surface);cursor:pointer;font-family:inherit}
.prd-dia-input.is-active{border-color:var(--primary);color:var(--primary);font-weight:700}
.prd-dia-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.prd-dia-atras{color:#c0304a;border-color:color-mix(in srgb,#c0304a 32%,var(--line));font-weight:700}
.prd-dia-atras:hover{background:#fdf2f4}
.prd-dia-atras.is-active{background:#c0304a;border-color:#c0304a;color:#fff}
.prd-estacoes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.prd-est{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:12px 18px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink-2);font-weight:600;font-size:15px;
  cursor:pointer;box-shadow:var(--shadow);
  transition:transform .12s,border-color .15s,box-shadow .15s,color .15s,background .15s}
.prd-est:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--est-cor) 45%,var(--line))}
.prd-est-dot{width:10px;height:10px;border-radius:50%;background:var(--est-cor);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--est-cor) 20%,transparent)}
.prd-est.is-active{border-color:var(--est-cor);color:var(--ink);
  background:color-mix(in srgb,var(--est-cor) 9%,var(--surface));
  box-shadow:0 5px 16px color-mix(in srgb,var(--est-cor) 22%,transparent)}
.prd-est-n{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;
  padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--est-cor) 15%,var(--surface-2));
  color:var(--ink);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.prd-est.is-active .prd-est-n{background:var(--est-cor);color:#fff}
.prd-est-late{width:9px;height:9px;border-radius:50%;background:#c0304a;box-shadow:0 0 0 3px rgba(192,48,74,.18)}

.prd-board{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.prd-card{position:relative;border:1px solid var(--line);border-radius:16px;padding:16px 18px 15px;
  background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;
  overflow:hidden;transition:transform .13s,box-shadow .13s}
.prd-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--cor,#7c8494)}
.prd-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
/* Pedido DIVIDIDO entre estações (parte das tortas está em outra tela): card laranja + selo X/Y */
.prd-card.is-split{border-color:#e08a2b;background-image:linear-gradient(rgba(224,138,43,.09),rgba(224,138,43,.09))}
.prd-card.is-split::before{background:#e08a2b}
.prd-split-badge{display:inline-block;font-size:13.5px;font-weight:800;color:#fff;background:#e08a2b;border-radius:8px;padding:2px 9px;letter-spacing:.02em;vertical-align:middle}
/* Atraso NÃO recolore a fita/borda (senão dois estágios diferentes ficam iguais): o
   sinal de atrasado é só o HORÁRIO em vermelho + o rótulo "ATRASADO". A fita segue o estágio. */
.prd-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prd-hora{display:inline-flex;align-items:center;gap:7px;font-size:27px;font-weight:800;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.prd-hora svg{width:19px;height:19px;color:#c0304a}
.prd-card.is-late .prd-hora{color:#c0304a}
.prd-card-sub{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:11.5px;color:var(--muted);
  font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.prd-tipo{font-weight:800}
.prd-tipo.is-ent{color:#7a4fd6}.prd-tipo.is-ret{color:#2f8fb0}
.prd-late{color:#c0304a;font-weight:800}
.prd-cli{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:15px;font-weight:700;color:var(--ink)}
.prd-fone{font-size:12.5px;font-weight:600;color:var(--muted)}
.prd-ped{display:inline-flex;align-items:baseline;gap:7px;padding:5px 13px;border-radius:10px;
  background:var(--line-2);color:var(--ink);border:1px solid var(--line);font-size:17px;font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.prd-ped small{font-size:10px;font-weight:700;letter-spacing:.09em;opacity:.6}
.prd-torta{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line-2);padding-top:11px}
.prd-torta>b{font-size:17px;line-height:1.22;color:var(--ink);letter-spacing:-.01em}
.prd-qtd{display:inline-flex;align-items:center;margin-right:6px;padding:2px 8px;border-radius:8px;
  background:var(--primary);color:#fff;font-size:13px;font-weight:800;vertical-align:2px}
.prd-item-corte{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:5px 11px 5px 6px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);
  font-size:13.5px;font-weight:700;color:var(--ink-2)}
/* A FAIXA DO CORTE É O BOTÃO de trocar (o cliente liga e muda com a torta na bancada).
   Alvo grande de propósito: é um tablet de cozinha, operado de pé e com as mãos ocupadas —
   um botãozinho ao lado do valor seria difícil de acertar e lia como enxerto. A tesoura é o
   vocabulário da própria casa (a mesma do chip de corte no detalhe do pedido). */
.prd-corte-troca{font:inherit;cursor:pointer;min-height:40px;padding-right:8px;
  align-self:stretch;justify-content:space-between;text-align:left;
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line));
  background:color-mix(in srgb,var(--primary) 4%,var(--surface-2));
  transition:background .14s,border-color .14s,transform .06s}
.prd-corte-troca .prd-corte-v{color:var(--ink);line-height:1.2;flex:1;min-width:0}
.prd-corte-troca .prd-corte-ico{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:8px;color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,transparent)}
.prd-corte-troca .prd-corte-ico svg{width:15px;height:15px}
.prd-corte-troca:hover{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.prd-corte-troca:active{transform:scale(.98)}
.prd-corte-troca:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Sem corte escolhido ainda: o valor fica em itálico apagado — é pendência, não informação. */
.prd-corte-troca[data-atual=""] .prd-corte-v{font-style:italic;font-weight:600;color:var(--muted)}
.prd-item-extra{display:flex;flex-wrap:wrap;gap:5px}
/* ADICIONAL e OBSERVAÇÃO no card da Produção — mesma hierarquia da comanda de produção
   (pedido do Cristian: quem trabalha lê os dois no mesmo dia; ordem diferente entre tela e
   papel obriga o olho a reaprender). Eram chips de 11px, do tamanho de etiqueta; são o que
   faz ESTA torta ser diferente da padrão, e errar não volta atrás — igual ao corte. */
.prd-add{display:flex;flex-wrap:wrap;gap:6px}
.prd-add-l{font-size:14.5px;font-weight:800;line-height:1.35;letter-spacing:-.005em;
  padding:5px 11px;border-radius:10px;background:#e4f4ec;color:#17794a;
  border:1px solid color-mix(in srgb,#17794a 22%,transparent)}
.prd-add-l.prd-add-sem{background:#fdeaea;color:#b93a3a;
  border-color:color-mix(in srgb,#b93a3a 22%,transparent)}
/* Observação: barra à esquerda em vez de moldura, para não competir com o adicional —
   mesma distinção usada na comanda impressa. */
.prd-obs{font-size:14.5px;font-weight:700;line-height:1.4;color:var(--ink);
  border-left:4px solid var(--ink-3,#6e7885);padding:2px 0 2px 9px;margin-left:2px}
.prd-uni-st{display:flex}
.prd-avancar{margin-top:6px;width:100%;padding:14px;border:none;border-radius:13px;
  background:var(--cor,#7c8494);color:#fff;font-size:16px;font-weight:800;cursor:pointer;letter-spacing:.01em;
  box-shadow:0 4px 12px color-mix(in srgb,var(--cor,#7c8494) 32%,transparent);
  transition:transform .1s,box-shadow .12s,filter .12s}
.prd-avancar:hover{filter:brightness(1.05);box-shadow:0 7px 20px color-mix(in srgb,var(--cor,#7c8494) 40%,transparent)}
.prd-avancar:active{transform:translateY(1px)}
.prd-avancar:disabled{opacity:.55;cursor:default;box-shadow:none}
.prd-pronto{margin-top:6px;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;
  border-radius:13px;font-weight:800;font-size:14.5px;color:var(--s-finalizado);
  background:color-mix(in srgb,var(--s-finalizado) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--s-finalizado) 26%,var(--line))}
@media (max-width:520px){.prd-board{grid-template-columns:1fr;gap:12px}.prd-hora{font-size:24px}}

/* Card = PEDIDO; horário no cabeçalho (menor, pois cada unidade tem seu próprio status). */
.prd-hora-min{display:inline-flex;align-items:center;gap:6px;font-size:20px;font-weight:800;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.prd-hora-min svg{width:16px;height:16px;color:#c0304a}
.prd-card.is-late .prd-hora-min{color:#c0304a}
/* Linhas de UNIDADE dentro do card do pedido (2x = 2 linhas). Faixa esquerda = cor do estágio. */
.prd-unidades{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line-2);padding-top:11px}
/* ⚠️ `flex-wrap` é o que impede a colisão: o botão de avançar tem `white-space:nowrap` e não
   encolhe, então em cartão estreito ele roubava a largura e ESPREMIA a faixa do corte — o
   rótulo quebrava em 4 linhas ("16 / PEDACOS / DE / 9X7CM") e ficava sob a sombra do botão.
   Com a quebra, quando não cabe lado a lado o botão desce para a própria linha e o corte
   recupera a largura inteira do cartão. */
.prd-uni{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;padding:10px 11px 10px 12px;
  border-radius:12px;border:1px solid var(--line);background:var(--surface);
  box-shadow:inset 4px 0 0 var(--cor,#7c8494)}
/* base de 200px: abaixo disso o corte não cabe em uma linha e a informação vira sopa de letras */
.prd-uni-info{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:6px}
.prd-uni-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.prd-uni-top>b{font-size:15px;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.prd-uni-n{display:inline-flex;align-items:center;padding:2px 8px;border-radius:8px;background:var(--ink);
  color:#fff;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
/* Área de ações da linha: avançar (ou "Pronto") em cima, "‹ Voltar" embaixo. */
/* ⚠️ O GAP AQUI E SEGURANCA DE OPERACAO, NAO ESTETICA — nao reduzir.
   Os dois botoes fazem coisas OPOSTAS: "Ir para <estagio>" e o gesto que se repete o dia
   inteiro; "‹ Voltar" e o desfazer. Com 6px entre eles (como era), o operador de tablet
   errava o alvo e a torta andava para o lado errado — reportado pelo dono em 27/08/2026,
   acontecendo na producao.
   22px e a folga que separa dois alvos de toque na pratica; encostar de novo em 6px traz o
   problema de volta. O custo e ~16px a mais de altura por cartao, que e barato perto de
   mandar uma torta para a estacao errada. */
.prd-uni-acoes{display:flex;flex-direction:column;gap:22px;align-self:center;flex:0 0 auto;
  align-items:stretch;margin-left:auto}   /* sozinho na linha, continua à direita */
.prd-av-uni{margin:0;width:auto;flex:none;padding:10px 15px;font-size:13.5px;white-space:nowrap;border-radius:11px}
.prd-pronto-uni{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 13px;
  border-radius:11px;font-weight:800;font-size:13px;color:var(--s-finalizado);
  background:color-mix(in srgb,var(--s-finalizado) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--s-finalizado) 26%,var(--line))}
.prd-voltar{border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:7px 12px;
  border-radius:10px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.prd-voltar:hover{color:var(--ink);border-color:var(--muted)}
.prd-voltar:active{transform:translateY(1px)}
.prd-voltar:disabled{opacity:.55;cursor:default}
@media (max-width:520px){
  .prd-uni{flex-direction:column;align-items:stretch;gap:8px}
  .prd-uni-acoes{align-self:stretch}.prd-av-uni{width:100%}
}

/* ---------- Aprovação de pedidos (cardápio online) ---------- */
.apv-page{padding:2px 0 20px}
.apv-tabs{display:flex;gap:8px;margin:0 0 16px}
.apv-tab{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:99px;padding:7px 16px;font-size:13.5px;font-weight:700;cursor:pointer}
.apv-tab.is-active{background:var(--primary);color:#fff;border-color:var(--primary)}
.apv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px;align-items:start}
.apv-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px}
.apv-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apv-chip{font-size:11px;font-weight:800;padding:2px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.03em}
.apv-pend{background:#fff4dc;color:#9a6300}.apv-apr{background:#e7f6ec;color:#1e7b34}.apv-rec{background:#fbe7ea;color:#b23a48}
.apv-when{margin-left:auto;font-size:11.5px;color:var(--muted)}
.apv-cli{font-weight:800;font-size:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.apv-fone{font-weight:600;font-size:13px;color:var(--muted)}
.apv-lin{font-size:13.5px;color:var(--ink-2)}
.apv-end{color:var(--ink-2);font-size:13.5px}
.apv-end svg{width:14px;height:14px;vertical-align:-2px;margin-right:2px;flex:none}
/* Bloco explicito ENTREGA/RETIRADA + quando */
.apv-modo{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;border:1px solid}
.apv-modo-entrega{background:#eef4ff;border-color:#d5e3fb}
.apv-modo-retirada{background:#eefaf1;border-color:#cfeeda}
.apv-modo-ico{flex:none;display:inline-flex}
.apv-modo-ico svg{width:24px;height:24px}
.apv-modo-entrega .apv-modo-ico{color:#1a56c4}
.apv-modo-retirada .apv-modo-ico{color:#1e7b34}
.apv-modo-txt{min-width:0}
.apv-modo-tit{font-weight:800;font-size:15px;letter-spacing:.03em;line-height:1.1}
.apv-modo-entrega .apv-modo-tit{color:#1a56c4}
.apv-modo-retirada .apv-modo-tit{color:#1e7b34}
.apv-modo-quando{font-size:13.5px;color:var(--ink-2);font-weight:600;margin-top:2px}
.apv-modo-quando svg{width:14px;height:14px;vertical-align:-2px;margin-right:3px}
.apv-itens{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;display:flex;flex-direction:column;gap:7px;margin:2px 0}
.apv-it{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.apv-it-nome{font-size:13.5px}.apv-it-nome b{color:var(--primary)}
.apv-it-tag{display:inline-block;font-size:11px;color:var(--muted);background:var(--surface-2,#f6eef0);border-radius:6px;padding:1px 6px;margin-left:4px}
.apv-it-val{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;font-size:13.5px}
.apv-obs{font-size:13px;color:var(--ink-2);background:var(--surface-2,#f6eef0);border-radius:8px;padding:7px 10px}
.apv-total{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.apv-total b{font-size:18px;color:var(--primary);font-variant-numeric:tabular-nums}
.apv-acoes{display:flex;gap:9px;margin-top:4px}
.apv-acoes .btn{flex:1;height:42px;justify-content:center}
.apv-foot-info{font-size:12.5px;color:var(--muted);font-weight:600}
/* Aprovacao — filtros */
.apv-filtros{display:flex;gap:9px;margin:0 0 14px;flex-wrap:wrap}
.apv-f-busca{flex:1;min-width:220px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0 13px;font:inherit;font-size:14px}
.apv-f-busca:focus,.apv-f-sel:focus{outline:none;border-color:var(--primary)}
.apv-f-sel{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0 30px 0 12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.apv-vazio{padding:34px 16px;text-align:center;color:var(--muted);border:1px solid var(--line);border-radius:14px;background:var(--surface)}
/* Aprovacao — formato LISTA (tabela) */
.apv-list-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.apv-list{width:100%;border-collapse:collapse;min-width:780px;font-size:13.5px}
.apv-list thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg)}
.apv-list td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.apv-l-row{cursor:pointer;transition:background .12s}
.apv-l-row:hover{background:var(--primary-soft)}
.apv-l-row:last-child td{border-bottom:0}
.apv-l-num{font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}
.apv-l-rec{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.apv-l-recd{display:block;font-size:11px;color:var(--muted);font-weight:500}
.apv-l-nome{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.apv-l-nome b{font-weight:800;font-size:14px}
.apv-l-fone{font-size:12px;color:var(--muted)}
.apv-badge-cad{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#1e7b34;background:#e7f6ec;border-radius:99px;padding:2px 8px;white-space:nowrap}
.apv-badge-novo{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#9a6300;background:#fff4dc;border-radius:99px;padding:2px 8px;white-space:nowrap}
.apv-l-tipo{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;padding:4px 10px;border-radius:99px;white-space:nowrap}
.apv-l-tipo svg{width:15px;height:15px}
.apv-l-entrega{background:#eef4ff;color:#1a56c4}
.apv-l-retirada{background:#eefaf1;color:#1e7b34}
.apv-l-quando{white-space:nowrap;color:var(--ink-2)}
.apv-l-hora{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.apv-l-itens{color:var(--ink-2);max-width:300px}
.apv-l-qtd{font-weight:800;color:var(--primary)}
.apv-l-mais{font-size:11px;color:var(--muted);background:var(--surface-2,#f6eef0);border-radius:6px;padding:1px 6px}
.apv-l-sem{color:#c0304a;font-weight:600}
.apv-l-add{color:#1e7b34;font-weight:600}
.pod-it-sem{color:#c0304a;font-weight:600;font-size:12.5px;margin-top:1px}
.apv-l-obs{font-size:10px;color:#9a6300;background:#fff4dc;border-radius:5px;padding:1px 5px;text-transform:uppercase;letter-spacing:.03em;font-weight:800}
td.apv-l-tot{text-align:right;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums;white-space:nowrap}
th.apv-l-tot{text-align:right}
.apv-l-acoes{white-space:nowrap;text-align:right}
.apv-l-acoes .btn{margin-left:6px}
.apv-l-info{font-size:12px;color:var(--muted);font-weight:700}
.apv-l-ped{font-weight:800;color:#1e7b34;font-variant-numeric:tabular-nums;white-space:nowrap}
.apv-l-ped-vazio{color:var(--muted)}
/* badge de pendentes na sidebar */
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#e0324f;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
#app.collapsed .nav-badge{position:absolute;top:6px;right:8px;margin:0}

/* ---------- Modal de detalhe do pedido online (aprovação) ---------- */
.pod{display:flex;flex-direction:column;gap:11px}
.pod-cli{display:flex;flex-direction:column;gap:1px}
.pod-nome{font-weight:800;font-size:18px}
.pod-zap{font-size:13.5px;color:var(--muted);font-weight:600}
.pod .apv-modo{margin-top:2px}
.pod-sec{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-top:4px}
.pod-itens{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.pod-it{display:flex;gap:10px;align-items:baseline}
.pod-it-q{font-weight:800;color:var(--primary);flex:none;font-variant-numeric:tabular-nums}
.pod-it-main{flex:1;min-width:0}
.pod-it-nome{font-size:14px;font-weight:600;line-height:1.25}
.pod-it-sub{font-size:12px;color:var(--muted);margin-top:1px}
.pod-it-val{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pod-obs{font-size:13.5px;background:var(--surface-2,#f6eef0);border-radius:10px;padding:9px 11px}
.pod-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--line);padding-top:11px;margin-top:2px;font-size:15px}
.pod-total b{font-size:21px;color:var(--primary);font-variant-numeric:tabular-nums}
.pod-meta{font-size:12px;color:var(--muted)}
.apv-clic{cursor:pointer}

/* ============ FREEZER (estoque de tortas prontas) ============ */
.frz-page{padding:4px 2px 96px}
.frz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.frz-abas{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.frz-top-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.frz-aba{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-weight:700;font-size:14px;cursor:pointer;transition:all .12s}
.frz-aba:hover{border-color:var(--line-2)}
.frz-aba.on{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 3px 10px rgba(155,40,70,.22)}
.frz-cont{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--line-2);color:var(--ink-2);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.frz-aba.on .frz-cont{background:rgba(255,255,255,.28);color:#fff}
.frz-emprod{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#c07a1e;text-decoration:none;padding:7px 12px;border-radius:999px;background:#fdf3e3}
.frz-emprod:hover{background:#fae7cc}
.frz-alarme{display:flex;align-items:center;gap:8px;background:#fdf3e3;border:1px solid #f0c674;color:#8a5a00;border-radius:12px;padding:11px 16px;margin-bottom:16px;font-size:13.5px}
.frz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}

.frz-card{position:relative;display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:15px 16px 13px;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s;overflow:hidden}
.frz-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.09);border-color:var(--line-2)}
.frz-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#4a90d9}
.frz-congelada.frz-card::before{background:#33b7c7}
.frz-card.is-venc::before{background:#e8961e}
.frz-card.is-venc{border-color:#f0cf9a}
.frz-check{position:absolute;top:13px;right:13px;width:25px;height:25px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:all .13s}
.frz-check svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:all .13s}
.frz-card.is-sel{border-color:var(--primary);box-shadow:0 0 0 3px rgba(155,40,70,.16)}
.frz-card.is-sel .frz-check{background:var(--primary);border-color:var(--primary)}
.frz-card.is-sel .frz-check svg{opacity:1;transform:scale(1)}
.frz-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-right:32px;padding-left:6px}
.frz-sabor{font-weight:800;font-size:15.5px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.frz-tam{font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--ink-2);background:var(--line-2);border-radius:7px;padding:2px 9px;white-space:nowrap}
.frz-corte{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-weight:600;padding-left:6px}
.frz-corte svg{width:13px;height:13px;color:var(--muted);flex-shrink:0}
/* LOG: quando a torta caiu no freezer (data + hora). Linha discreta, o momento em b. */
.frz-desde{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600;padding-left:6px}
.frz-desde b{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.frz-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px;padding-left:6px}
.frz-dias{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:3px 11px;white-space:nowrap}
.frz-dias.venc{color:#a5641a;background:#fdf0dc}
.frz-acoes{display:flex;align-items:center;gap:4px}
.frz-congelar{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:5px 11px;cursor:pointer;transition:all .12s}
.frz-congelar:hover{background:#eaf4fb;border-color:#bcdcf3;color:#1668b0}
.frz-descartar{display:inline-flex;border:none;background:transparent;color:var(--muted);cursor:pointer;padding:5px;border-radius:8px;transition:all .12s}
.frz-descartar svg{width:16px;height:16px}
.frz-descartar:hover{color:#c0392b;background:#fbeaea}

.frz-barra{position:sticky;bottom:0;display:none;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1.5px solid var(--primary);border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:12px 18px;margin:18px 2px 0}
.frz-barra.on{display:flex}
.frz-barra span b{color:var(--primary)}

/* selo de ESTOQUE no quadro de Produção */
.prd-estoque-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;color:#1668b0;background:#e3f0fb;border:1px solid #b9d8f2;border-radius:6px;padding:1px 7px}
.prd-uni.is-estoque{background:linear-gradient(0deg,rgba(30,120,200,.05),rgba(30,120,200,.05))}
.prd-card.is-estoque-card{border-top:3px solid #2b8fd6}
/* Cabecalho do card de ESTOQUE: pill AZUL-CLARO (nao o preto do .prd-ped normal) — combina com
   a borda azul do topo e o selo azul de cada torta. Sem o fundo escuro var(--ink). */
.prd-ped-estoque{background:#e3f0fb;color:#1668b0;border:1px solid #b9d8f2}
.prd-ped-estoque small{opacity:.75}

/* ══ Importar nota de compra (NF-e de entrada) ══════════════════════════════
   Duas telas: de onde vem a nota, e a conferência item a item. A conferência é
   o coração — a nota fala a língua do fornecedor e o estoque fala a nossa.   */

/* ---- 1. de onde vem ---- */
.imp-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; line-height: 1.5; }
.imp-fonte { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
@media (max-width: 760px) { .imp-fonte { grid-template-columns: 1fr; } }

.imp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 168px; padding: 20px; cursor: pointer; text-align: center;
  border: 2px dashed var(--line-2); border-radius: var(--radius);
  background: var(--surface-2); transition: border-color .15s, background .15s;
}
.imp-drop:hover, .imp-drop.is-over { border-color: var(--primary); background: var(--primary-soft); }
.imp-drop.is-lendo { opacity: .55; pointer-events: none; }
.imp-drop b { font-size: 14px; }
.imp-drop .muted { font-size: 12.5px; }
.imp-drop-ico svg { width: 30px; height: 30px; color: var(--muted); }

.imp-ou { position: relative; text-align: center; color: var(--muted); font-size: 12px; }
.imp-ou span { background: var(--surface); padding: 3px 8px; position: relative; z-index: 1; }
@media (min-width: 761px) {
  .imp-ou::before { content: ""; position: absolute; left: 50%; top: -60px; bottom: -60px;
                    width: 1px; background: var(--line); }
}

.imp-chave label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.imp-chave-linha { display: flex; gap: 8px; }
.imp-chave-linha input { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.imp-chave-cont { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.imp-chave-cont.is-ok { color: var(--s-finalizado); font-weight: 600; }
.imp-erro {
  margin-top: 16px; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--s-cancelado); background: rgba(192,69,91,.08);
  font-size: 13px; line-height: 1.5;
}

/* ---- 2. conferência ---- */
.imp-nota {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 16px; background: var(--surface-2); margin-bottom: 14px;
}
.imp-nota-emit { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.imp-nota-emit b { font-size: 15px; }
.imp-nota-emit .muted { font-size: 12px; }
.imp-nota-dados { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 7px; font-size: 13px; }
.imp-nota-dados i { font-style: normal; color: var(--muted); font-size: 11px;
                    text-transform: uppercase; letter-spacing: .05em; margin-right: 5px; }
.imp-nota-chave { margin-top: 8px; font-family: ui-monospace, Consolas, monospace;
                  font-size: 11px; color: var(--muted); word-break: break-all; }

.imp-alerta {
  border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5; border: 1px solid;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.imp-alerta.is-erro    { border-color: var(--s-cancelado); background: rgba(192,69,91,.08); }
.imp-alerta.is-atencao { border-color: var(--s-forno);     background: rgba(217,130,43,.09); }
.imp-alerta .btn { margin-left: auto; }

.imp-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.imp-prog-barra { flex: 1; height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.imp-prog-barra span { display: block; height: 100%; background: var(--s-finalizado);
                       transition: width .25s ease; }
.imp-prog-txt { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.imp-tabela td { vertical-align: middle; }
.imp-tabela tr.is-pend td { background: rgba(217,130,43,.05); }
.imp-prod { font-weight: 600; font-size: 13px; }
.imp-cod  { font-size: 11px; color: var(--muted); font-family: ui-monospace, Consolas, monospace;
            margin-top: 2px; }
.imp-qtd, .imp-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.imp-seta { color: var(--muted); text-align: center; width: 26px; }
.imp-destino { font-weight: 600; font-size: 13px; color: var(--s-finalizado); }
.imp-conv { font-size: 12px; color: var(--muted); margin-top: 2px;
            font-variant-numeric: tabular-nums; }
.imp-falta { font-size: 12.5px; color: var(--s-forno); font-weight: 600; }

.imp-pgto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px;
            padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .imp-pgto { grid-template-columns: 1fr 1fr; } }

/* ---- a conversão ---- */
.imp-conv-box {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; background: var(--surface-2); margin-bottom: 16px;
}
.imp-conv-box > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.imp-conv-box b { font-size: 13.5px; overflow-wrap: anywhere; }
.imp-conv-box span { font-size: 12px; }
.imp-conv-box .muted { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.imp-conv-seta { font-size: 20px; color: var(--muted); }
/* Custo ATUAL do insumo de destino, na conferência da nota. Um vínculo errado quase
   sempre aparece aqui antes de aparecer no estoque: preço muito diferente do da nota
   é sinal de que o item apontado não é o mesmo produto. */
.imp-custo-hoje { font-size: 11px; color: var(--muted); margin-top: 2px; }
.imp-custo-hoje.is-novo { color: var(--s-forno); }
/* Fila de notas (várias chaves de uma vez) e o CFOP convertido na conferência. */
.imp-fila { display: flex; flex-direction: column; gap: 8px; }
.imp-fila-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-sm);
  background: var(--surface); padding: 11px 14px; transition: border-color .12s, background .12s;
}
.imp-fila-item:hover { background: var(--surface-2); }
.imp-fila-item.is-ok    { border-left-color: var(--s-finalizado); }
.imp-fila-item.is-pend  { border-left-color: var(--s-forno); }
.imp-fila-item.is-feita { border-left-color: var(--line-2); opacity: .62; }
.imp-fila-emit b { display: block; font-size: 13.5px; }
.imp-fila-emit .muted { font-size: 11.5px; }
.imp-fila-val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.imp-fila-est { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.imp-fila-item.is-ok .imp-fila-est   { color: var(--s-finalizado); font-weight: 600; }
.imp-fila-item.is-pend .imp-fila-est { color: var(--s-forno); font-weight: 600; }
.imp-cfop { color: var(--s-finalizado); font-weight: 600; }
#imp-chave-input { width: 100%; font-family: ui-monospace, Consolas, monospace;
                   font-size: 12.5px; line-height: 1.7; resize: vertical; }
.imp-chave .imp-chave-linha { justify-content: space-between; align-items: center; margin-top: 7px; }

/* ══ A ponte Compras ⇄ Contas a pagar ═══════════════════════════════════════
   São dois registros do MESMO fato: o que entrou no estoque e o que se deve
   por isso. Cada lado mostra o outro e leva até ele.                        */

/* lado da CONTA: o que foi comprado */
.dv-ponte {
  border: 1px solid var(--line); border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm); padding: 11px 14px; margin: 12px 0;
  background: var(--surface-2);
}
.dv-ponte-top { display: flex; align-items: center; justify-content: space-between;
                gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dv-ponte-tag { font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.dv-ponte-tag svg { width: 15px; height: 15px; }
.dv-ponte-top .muted { font-size: 12px; display: block; margin-top: 2px; }
.dv-ponte-itens { display: flex; flex-direction: column; gap: 3px; }
.dv-ponte-item { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.dv-ponte-item .muted { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-ponte-chave { margin-top: 8px; font-family: ui-monospace, Consolas, monospace;
                  font-size: 10.5px; color: var(--muted); word-break: break-all; }

/* lado da COMPRA: como está o pagamento */
.cmp-pg { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.cmp-pg-top { display: flex; align-items: center; justify-content: space-between;
              gap: 12px; flex-wrap: wrap; }
.cmp-pg-num { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cmp-pg-alerta { font-size: 11.5px; font-weight: 600; color: var(--s-cancelado); }
.cmp-pg-barra { height: 6px; border-radius: 99px; background: var(--line-2);
                overflow: hidden; margin: 10px 0 6px; }
.cmp-pg-barra span { display: block; height: 100%; background: var(--s-finalizado);
                     transition: width .25s ease; }
.cmp-pg-num-txt { font-size: 12.5px; color: var(--muted); }
.cmp-pg-num-txt b { color: var(--ink); }
.cmp-pg-parcelas { margin-top: 11px; display: flex; flex-direction: column; gap: 5px; }
.cmp-pg-parc {
  display: grid; grid-template-columns: 34px 1fr 92px 92px auto; gap: 10px;
  align-items: center; font-size: 12.5px; padding: 6px 8px;
  border-radius: 7px; background: var(--surface-2);
}
.cmp-pg-parc.vencido { background: rgba(192,69,91,.08); }
.cmp-pg-parc.pago    { opacity: .62; }
.cmp-pg-p-n { font-weight: 600; }
.cmp-pg-p-v, .cmp-pg-p-d { font-variant-numeric: tabular-nums; }
.cmp-pg-p-d { color: var(--muted); }
@media (max-width: 620px) {
  .cmp-pg-parc { grid-template-columns: 30px 1fr auto; }
  .cmp-pg-p-d, .cmp-pg-p-s { display: none; }
}
/* A cobrança que veio na NF-e: mostrada, não perguntada. */
.imp-cobr { border: 1px solid var(--line); border-left: 3px solid var(--s-finalizado);
            border-radius: var(--radius-sm); padding: 11px 14px; margin-top: 14px;
            background: var(--surface-2); }
.imp-cobr-top { display: flex; align-items: center; justify-content: space-between;
                gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.imp-cobr-top b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.imp-cobr-top b svg { width: 15px; height: 15px; }
.imp-cobr-parcelas { display: flex; flex-wrap: wrap; gap: 7px; }
.imp-cobr-p { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px;
              background: var(--surface); border: 1px solid var(--line);
              border-radius: 99px; padding: 4px 11px; }
.imp-cobr-p-n { font-weight: 700; color: var(--primary); }
.imp-cobr-p-d, .imp-cobr-p-v { font-variant-numeric: tabular-nums; }
.imp-cobr-p-v { font-weight: 600; }
.imp-cobr .help { margin: 8px 0 0; }
/* Aviso de desvio de preço na conferência da nota. Fica na LINHA do item, não no topo:
   o operador precisa vê-lo olhando o produto, não como um alerta genérico da nota. */
.imp-desvio {
  margin-top: 5px; font-size: 11.5px; line-height: 1.45;
  color: var(--s-forno); background: rgba(217,130,43,.10);
  border-left: 2px solid var(--s-forno); border-radius: 0 5px 5px 0;
  padding: 5px 8px; max-width: 380px;
}
.imp-desvio::before { content: "⚠ "; font-weight: 700; }

/* ---- Travas visiveis no form de titulo (conta recebida / fatura de pedido) ----
   O backend recusa a alteracao; aqui a TELA diz antes, em vez de deixar o operador preencher e
   tomar erro campo a campo. Documento liquidado corrige-se por ESTORNO, nao por edicao. */
.cmp-lock-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff8e6; border: 1px solid #f0d79a; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 14px;
}
.cmp-lock-ico { font-size: 16px; line-height: 1.3; flex: none; }
.cmp-lock-aviso b { display: block; font-size: 13.5px; color: #7a5300; margin-bottom: 2px; }
.cmp-lock-aviso p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #8a6414; }
/* campo travado: cinza e sem cursor de edicao — tem que LER como bloqueado, nao como quebrado */
.is-locked, .is-locked:disabled {
  background: #f2f3f5 !important; color: #8b9098 !important;
  cursor: not-allowed !important; opacity: 1;
}
button.is-locked { pointer-events: none; }
/* secao inteira travada (parcelas, rateio) */
.cmp-locked { opacity: .55; pointer-events: none; position: relative; }
.cmp-locked::after {
  content: "🔒"; position: absolute; top: 10px; right: 12px; font-size: 13px; opacity: .7;
}

/* Campo de dinheiro DENTRO DE FORMULARIO acompanha a largura da coluna. O `width:112px` da
   classe base deixa ~80px para o numero (o "R$" come o resto) e cortava valores de 4 digitos:
   "2.522,00" aparecia como "2522,0". Em TABELA (partidas contabeis, itens de compra, lista de
   parcelas) o 112px continua valendo — la o fixo e o que mantem a coluna compacta. */
.cmp-grid .field .cmp-money { width: 100%; }
/* alinhado a ESQUERDA, colado no 'R$': com o campo largo, o numero a direita ficava
   desgarrado do prefixo. Em TABELA segue a direita — la os numeros se alinham em coluna. */
.cmp-grid .field .cmp-money input { text-align: left; font-variant-numeric: tabular-nums; }


/* ---- Estoque · Produção de recheio (lotes de insumo preparado) ---- */
.lt-tabela .lt-num { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.lt-tabela td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
/* A coluna "Usou" e a unica que pode quebrar em varias linhas: o resto da tabela e nowrap. */
.lt-tabela td:nth-child(5) { white-space: normal; }
.lt-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.lt-chip {
  display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 1px 8px;
  border-radius: 999px; background: var(--line-2); color: var(--muted); white-space: nowrap;
}
/* Lote cancelado continua legivel (e trilha de auditoria), so recua visualmente. */
.lt-cancelado td { opacity: .5; }
.lt-cancelado:hover td { opacity: .8; }
.est-vazio { padding: 28px 22px; max-width: 620px; }
.est-vazio p { margin: 0 0 6px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.est-vazio p strong { color: var(--ink); }

/* contador dentro do chip de filtro do Estoque atual */
.est-fbtn-n {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 17px;
  background: rgba(20,24,40,.07); color: var(--muted);
}
.est-fbtn.is-active .est-fbtn-n { background: rgba(255,255,255,.22); color: inherit; }


/* ---- Produção · Histórico do pedido ---------------------------------------------------
   Lido num tablet, muitas vezes em pé e de relance: o QUANDO fica numa coluna própria à
   esquerda (o olho desce por ela) e cada evento tem uma cor de tipo na guia lateral. */
.prd-hist-btn{
  display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:7px 12px;
  border:1px solid var(--line-2);border-radius:9px;background:transparent;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--muted);
  /* alvo de toque: o operador clica com a mão ocupada, então não pode ser um link fino */
  min-height:36px;
}
.prd-hist-btn:hover{background:var(--line-2);color:var(--ink)}

.hist-topo{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 0 14px;
  border-bottom:1px solid var(--line-2);margin-bottom:14px;
}
.hist-topo b{display:block;font-size:14px;color:var(--ink)}
.hist-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}

.hist-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hist-item{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:9px 0 9px 0}
.hist-item + .hist-item{border-top:1px solid var(--line-2)}
.hist-quando{
  font-size:11px;color:var(--muted);line-height:1.35;text-align:right;
  font-variant-numeric:tabular-nums;padding-top:2px;
}
.hist-quando b{display:block;font-size:13px;color:var(--ink)}
/* a guia colorida é o que diferencia os tipos de relance */
.hist-corpo{border-left:3px solid var(--ev);padding-left:11px;min-width:0}
.hist-tit{font-size:13.5px;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.hist-tag{
  display:inline-block;margin-right:7px;padding:1px 7px;border-radius:999px;
  background:color-mix(in srgb, var(--ev) 14%, transparent);color:var(--ev);
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  vertical-align:1px;
}
.hist-det{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;overflow-wrap:anywhere}
.hist-quem{font-size:11.5px;color:var(--muted);margin-top:3px;font-style:italic}
.hist-rodape{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}

@media (max-width:600px){
  .hist-topo{grid-template-columns:1fr 1fr}
  .hist-item{grid-template-columns:52px 1fr;gap:9px}
}


/* ---- Pedido · desconto em % ou R$ -----------------------------------------------------
   O número e a unidade andam juntos: o operador digita e escolhe sem tirar a mão do campo. */
.desc-linha{display:flex;gap:8px;align-items:stretch}
.desc-linha #f-desc{flex:1;min-width:0}
.desc-un{display:inline-flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;flex:none}
.desc-un-b{
  border:0;background:transparent;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  color:var(--muted);padding:0 14px;min-width:46px;
  /* alvo de toque: a tela de pedido é usada no tablet */
  min-height:38px;
}
.desc-un-b + .desc-un-b{border-left:1px solid var(--line-2)}
.desc-un-b:hover{background:var(--line-2);color:var(--ink)}
.desc-un-b.is-on{background:var(--primary);color:#fff}
.desc-un-b.is-on:hover{background:var(--primary-dark)}
/* o aviso de "passou do total" reaproveita o mesmo help, só troca de cor */
#f-desc-help.is-erro{color:#b91c1c;font-weight:600}


/* ---- Estoque · finalidade do uso interno ----------------------------------------------
   Equipe (despesa da casa) e Dono (retirada de sócio) são coisas diferentes — a cor separa
   as duas de relance no extrato, sem obrigar a ler a linha. */
.mov-fin{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700}
.mov-fin-equipe{background:#eef4ff;color:#3d6ad6}
.mov-fin-dono{background:#fdeaea;color:#b23b3b}
.mov-fin-outro{background:var(--line-2);color:var(--muted)}


/* ---- Pedido · "tem no freezer, usar?" -------------------------------------------------
   Fica DENTRO da linha do item, onde a decisão acontece — um aviso no topo da tela seria
   lido depois de o operador já ter escolhido. */
.it-frz{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  font-size:13px;line-height:1.45;border:1px solid transparent;
}
.it-frz-ico{font-size:16px;flex:none;line-height:1}
.it-frz span{min-width:0}
.it-frz .btn{margin-left:auto;flex:none}
/* tem e cobre a linha: azul-gelo, com ação */
.it-frz-ok{background:#eef6ff;border-color:#cfe4fb;color:#1f4b7a}
/* tem, mas menos que o pedido: só informa, sem botão */
.it-frz-info{background:var(--line-2);color:var(--muted)}
/* já marcado para sair do freezer */
.it-frz-on{background:#e7f6ee;border-color:#bfe6d2;color:#1f6b47}
/* a marca CAIU sozinha (quantidade passou do estoque): âmbar — é uma mudança que o operador
   não pediu, então não pode ter a mesma cor do aviso informativo que ele nunca leu. */
.it-frz-aviso{background:#fdf3e7;border-color:#f2ddc0;color:#a04a06}
@media (max-width:600px){
  .it-frz{flex-wrap:wrap}
  .it-frz .btn{margin-left:0;width:100%}
}

/* Granel no freezer: peso, não peça. Fica numa faixa PRÓPRIA acima das abas de contagem —
   misturar "2,96 kg" com "3 tortas" na mesma lista somaria coisas que não se somam. */
.frz-granel { margin: 10px 0 4px; }
.frz-granel-tit { font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--txt-2, #667); margin-bottom: 6px; }
.frz-granel-lin { display: flex; flex-wrap: wrap; gap: 8px; }
.frz-granel-item { display: flex; align-items: baseline; gap: 10px;
  padding: 8px 14px; border: 1px solid var(--bd, #dde); border-radius: 10px;
  background: var(--card, #fff); }
.frz-granel-item b { font-size: 13px; }
.frz-granel-item span { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.frz-granel-item.vazio { opacity: .55; }
.frz-granel-item.vazio span { font-weight: 500; }

/* Pagamento estornado: fica na lista (a trilha importa) mas não parece dinheiro. */
.pg-item.is-estornado { opacity: .6; }
.pg-item.is-estornado s { color: var(--txt-2, #778); }
.pg-tag-estorno { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--danger-bg, #fdeaea); color: var(--danger, #b42318); }