:root {
  /* Identidade visual JP2 Auto (Manual da Marca): preto, amarelo #FFCC00 e vermelho #FE3200 (uso pontual). */
  --ink: #000000;
  --ink-2: #1c1c1c;
  --ink-3: #2e2e2e;
  --brand-yellow: #ffcc00;
  --brand-yellow-dark: #e6b800;
  --brand-red: #fe3200;
  --gray-dark: #292827;
  --gray: #4d4d4d;
  --bg: #f4f4f2;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #666666;
  --border: #e1e1dd;
  --danger: #d42a00;
  --danger-bg: #fff0eb;
  --ok: #1e7a45;
  --ok-bg: #e9f5ee;
  --warn-bg: #fff7d1;
  --warn-text: #5c4a00;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.06);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.5 var(--font); color: var(--text); background: var(--bg); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
a { color: var(--ink-3); }
[hidden] { display: none !important; }

.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }

/* ---------- botoes e formularios ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 40px; padding: 0 1rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--ink); }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(255, 204, 0, 0.55); outline-offset: 1px; }
.btn-primary { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--ink); }
.btn-primary:hover { background: #ffd633; border-color: var(--brand-yellow-dark); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }
.btn-small { min-height: 32px; padding: 0 0.7rem; font-size: 0.875rem; }
.btn[disabled] { opacity: 0.6; cursor: wait; }

.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
.field label { font-weight: 600; font-size: 0.9rem; }
.field input, .field select {
  min-height: 42px; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: #fff; color: var(--text); width: 100%;
}
/* Texto longo dentro de um campo: o aviso ao cliente (L47) e revisado aqui antes de sair. */
.field textarea {
  padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: #fff; color: var(--text); width: 100%; resize: vertical; line-height: 1.45;
}
.field .hint { font-size: 0.8rem; color: var(--muted); }
.field .error { font-size: 0.82rem; color: var(--danger); }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; font-weight: 600; }
.check input { width: 18px; height: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.form-grid .full { grid-column: 1 / -1; }

.alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.92rem; }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-ok { background: var(--ok-bg); color: var(--ok); }
.alert-warn { background: var(--warn-bg); color: var(--warn-text); border-left: 4px solid var(--brand-yellow); }

/* ---------- login ---------- */
.auth-page {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: var(--ink);
}
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: 14px; padding: 2rem; box-shadow: var(--shadow); border-top: 4px solid var(--brand-yellow); }
.auth-card .brand { margin-bottom: 1.5rem; }
.auth-card .brand img { width: 72px; height: auto; }
.auth-card .btn { width: 100%; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em; }
.brand img { width: 44px; height: auto; }
.brand { gap: 0.75rem; }
.brand-sub { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding-left: 0.75rem; border-left: 2px solid var(--brand-yellow); line-height: 1.2; }
.sidebar .brand-sub, .topbar .brand-sub { color: #ededed; }
.auth-card .brand-sub { color: var(--gray); }

/* ---------- layout principal ---------- */
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--ink); color: #ededed; display: flex; flex-direction: column; padding: 1.25rem 0.75rem; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { padding: 0.25rem 0.5rem 1.5rem; color: #fff; }
.sidebar .brand img { width: 58px; }
.nav { display: flex; flex-direction: column; gap: 0.2rem; }
.nav a { color: #cfcfcf; text-decoration: none; padding: 0.6rem 0.75rem; border-radius: 8px; font-weight: 600; }
.nav a:hover { background: var(--ink-2); color: #fff; }
.nav a.active { background: var(--ink-2); color: var(--brand-yellow); box-shadow: inset 3px 0 0 var(--brand-yellow); }
/* Contador de pedidos esperando o vendedor (L09): é o único aviso do sistema, então precisa
   ser visto de longe, no menu, sem a pessoa abrir a tela. */
.nav a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.nav-count { background: var(--brand-yellow); color: #1a1a1a; border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.78rem; font-weight: 800; line-height: 1.5; }
.nav .soon { font-size: 0.7rem; background: var(--ink-2); color: #9a9a9a; padding: 0.05rem 0.4rem; border-radius: 99px; margin-left: 0.35rem; font-weight: 600; }
.sidebar-foot { margin-top: auto; padding: 0.75rem 0.5rem 0; border-top: 1px solid var(--ink-2); font-size: 0.85rem; }
.sidebar-foot .who { color: #fff; font-weight: 700; }
.sidebar-foot .role { color: var(--brand-yellow); margin-bottom: 0.6rem; }
.sidebar-foot .btn { width: 100%; background: transparent; color: #ededed; border-color: var(--ink-3); }
.sidebar-foot .btn:hover { border-color: var(--brand-yellow); color: var(--brand-yellow); }

.topbar { display: none; }
.menu-overlay { display: none; }
.main { padding: 2rem; max-width: 1200px; width: 100%; }
.page-head { border-bottom: 2px solid var(--brand-red); padding-bottom: 0.9rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head p { margin: 0; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.module-card h3 { font-size: 1rem; }
.module-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 99px; background: #efefec; color: var(--muted); margin-bottom: 0.5rem; }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-off { background: #efefec; color: #7a7a7a; }
.tag-warn { background: var(--warn-bg); color: var(--warn-text); }

.toolbar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar input[type='search'] { min-height: 40px; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; min-width: 240px; flex: 1; max-width: 360px; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: #fafaf8; }
tr:last-child td { border-bottom: 0; }
td .sub { display: block; color: var(--muted); font-size: 0.82rem; }
td.actions { text-align: right; white-space: nowrap; }
.empty { padding: 2rem; text-align: center; color: var(--muted); }
code.small { font-size: 0.8rem; color: var(--muted); }

/* ---------- janela (dialog) ---------- */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 2rem)); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog-head { padding: 1.1rem 1.25rem 0; border-top: 4px solid var(--brand-yellow); border-radius: 14px 14px 0 0; }
.dialog-body { padding: 1rem 1.25rem; }
.dialog-foot { padding: 0 1.25rem 1.25rem; display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.secret { font: 700 1.35rem/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: 0.05em; background: #fffbe6; border: 1px dashed var(--ink); border-radius: 8px; padding: 0.8rem; text-align: center; margin: 0.75rem 0; user-select: all; }

/* ---------- avisos ---------- */
.toasts { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 50; }
/*
 * Mensagem comprida nao pode vazar da tela nem sumir antes de ser lida.
 *
 * O erro do Google veio com um endereco inteiro dentro ("Enable it by visiting https://...").
 * Sem quebra, a palavra unica empurrou a caixa para fora da tela e o texto ficou cortado na
 * direita -- justamente o pedaco que dizia o que fazer.
 */
.toast {
  background: var(--ink); color: #fff; border-left: 4px solid var(--brand-yellow);
  padding: 0.7rem 1rem; border-radius: 8px; box-shadow: var(--shadow); max-width: 360px;
  overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto;
}
.toast-error { cursor: pointer; }
.toast-error { background: var(--ink); border-left-color: var(--brand-red); }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 40; transform: translateX(-100%); transition: transform 0.2s; }
  .layout.menu-open .sidebar { transform: none; }
  .layout.menu-open .menu-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 35; }
  .topbar { display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: #fff; padding: 0.6rem 1rem; position: sticky; top: 0; z-index: 30; border-bottom: 3px solid var(--brand-yellow); }
  .topbar .btn { background: transparent; color: #fff; border-color: var(--ink-3); }
  .topbar .brand img { width: 38px; }
  .main { padding: 1rem; }
  .toasts { left: 1rem; right: 1rem; bottom: auto; top: 4.5rem; }
  .toast { max-width: none; }
  .form-grid { grid-template-columns: 1fr; }
  th.hide-sm, td.hide-sm { display: none; }
  .toolbar input[type='search'] { min-width: 0; max-width: none; }
}

/* ---------- utilitarios ---------- */
.mb-lg { margin-bottom: 1.25rem; }
.mt { margin-top: 1rem; }
.mt-sm { margin-top: 0.75rem; }
.w-full { width: 100%; }
.muted { margin: 0; color: var(--muted); }
.hint { font-size: 0.85rem; color: var(--muted); }
.form-grid > .alert, .form-grid > .check, .form-grid > .hint { grid-column: 1 / -1; }

/* ---------- carteira, clientes e integracao ---------- */
.toolbar select { min-height: 40px; padding: 0 0.6rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; max-width: 260px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.stat { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.85rem 1rem; font: inherit; color: var(--text); cursor: pointer; }
.stat:hover { border-color: var(--ink); }
.stat.selected { border-color: var(--brand-yellow); box-shadow: inset 0 -3px 0 var(--brand-yellow), var(--shadow); }
.stat .num { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.stat .label { display: block; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.tag-danger { background: var(--danger-bg); color: var(--danger); }
.tag-info { background: #eceff3; color: #33414f; }
.tag-ink { background: var(--ink); color: var(--brand-yellow); }
.tags { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
.tags .tag { margin-bottom: 0; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; color: var(--muted); font-size: 0.9rem; }
.pager .btns { display: flex; gap: 0.5rem; }
.cell-link { color: var(--text); font-weight: 700; text-decoration: none; }
.cell-link:hover { text-decoration: underline; text-decoration-color: var(--brand-yellow); text-decoration-thickness: 2px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.92rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.big-number { font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
.text-danger { color: var(--danger); }
.text-ok { color: var(--ok); }
.section-title { margin: 1.5rem 0 0.6rem; }
.back { display: inline-block; margin-bottom: 0.75rem; color: var(--muted); text-decoration: none; font-weight: 600; }
.back:hover { color: var(--text); }
.progress { height: 8px; background: #ecece8; border-radius: 99px; overflow: hidden; margin: 0.5rem 0; }
.progress > span { display: block; height: 100%; width: 35%; background: var(--brand-yellow); border-radius: 99px; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.inline-select { min-height: 34px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; }
.inline-number { min-height: 34px; width: 5rem; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; }
pre.code { background: #f7f7f5; border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; font-size: 0.78rem; max-height: 60vh; overflow: auto; white-space: pre-wrap; }
td.num, th.num { text-align: right; }
/*
 * O NÚMERO NÃO QUEBRA. O RESTO DA COLUNA, SIM (L62).
 *
 * O `nowrap` daqui valia para a coluna inteira, e ele só precisa valer para o NÚMERO: "1.234"
 * partido em "1." e "234" é ilegível, mas um cabeçalho de três palavras numa linha só é só uma
 * coluna larga à toa.
 *
 * Era o que estava acontecendo na tabela do mês a mês: "Pedido até entrega" ocupava 191px e
 * "Prontos no prazo" 182px — por causa do TÍTULO, não do número. Somadas, as colunas passavam
 * 166px da largura do cartão num monitor de 1440, e a última nascia FORA DA VISTA. Indicador que
 * precisa de rolagem lateral para ser lido é indicador que ninguém lê.
 *
 * Quem avisou foi o teste de navegador, ainda na L61, medindo a sobra em pixels. Ele avisou e eu
 * não rodei — os testes de navegador não entram no build da imagem, só os de unidade.
 */
td.num { white-space: nowrap; }
th.num, td.num .sub { white-space: normal; }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar select { max-width: none; flex: 1; }
}
a.module-card { display: block; font-weight: 400; }
a.module-card h3 { font-weight: 700; }

/* ---------- funil de prospeccao ---------- */
.stat[disabled] { cursor: default; opacity: 1; }
.stat[disabled]:hover { border-color: var(--border); }
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
.tab { font: inherit; font-weight: 700; color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 0.55rem 0.9rem; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.selected { color: var(--text); border-bottom-color: var(--brand-yellow); }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; align-items: start; }
.board-col { background: #ecece8; border-radius: var(--radius); padding: 0.6rem; min-height: 120px; }
.board-col > header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray); padding: 0.1rem 0.25rem 0.55rem; }
.board-col > header .count { background: var(--ink); color: var(--brand-yellow); border-radius: 99px; padding: 0 0.5rem; font-size: 0.75rem; }
.board-empty { color: var(--muted); font-size: 0.85rem; padding: 0.5rem 0.25rem; }
.lead-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.75rem; margin-bottom: 0.55rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); display: grid; gap: 0.25rem; }
.lead-card .sub { color: var(--muted); font-size: 0.8rem; }
.lead-card .sub.strong { color: var(--text); font-weight: 600; }
.lead-card .tags .tag { margin: 0; }
.lead-card-title { font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; }
.lead-next { font-size: 0.85rem; border-left: 3px solid var(--brand-yellow); padding-left: 0.45rem; overflow-wrap: anywhere; }
.stage-picker { display: none; }
.stepper { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.25rem; padding: 0; margin: 0 0 1.25rem; }
.stepper li { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; font-size: 0.75rem; color: var(--muted); position: relative; }
.stepper li::before { content: ''; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px; background: var(--border); z-index: 0; }
.stepper li:first-child::before { display: none; }
.stepper .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #ecece8; color: var(--muted); border: 2px solid var(--border); position: relative; z-index: 1; }
.stepper li.done .dot, .stepper li.visited .dot { background: var(--ink); color: #fff; border-color: var(--ink); }
.stepper li.done::before, .stepper li.current::before { background: var(--ink); }
.stepper li.current .dot { background: var(--brand-yellow); color: var(--ink); border-color: var(--ink); }
.stepper li.current { color: var(--text); font-weight: 800; }
.next-action { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.actions-inline { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.link-results { margin-top: 0.75rem; display: grid; gap: 0.5rem; max-height: 50vh; overflow-y: auto; }
.link-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.7rem; }
.link-row .sub { display: block; color: var(--muted); font-size: 0.8rem; }
.link-row .tag { margin: 0; white-space: nowrap; }
.sub-grid { margin: 0; }
td.nowrap { white-space: nowrap; }
@media (max-width: 860px) {
  .stage-picker { display: block; width: 100%; min-height: 42px; margin-bottom: 0.75rem; padding: 0 0.6rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; }
  .board { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .board-col { display: none; }
  .board-col.current { display: block; }
  .stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.75rem; }
  .stepper li::before { display: none; }
  .link-row { flex-wrap: wrap; }
  td.nowrap { white-space: normal; }
}
/* Itens de grade nao crescem alem da tela por causa de conteudo com rolagem propria (abas, quadro, tabelas). */
.layout > div, .main { min-width: 0; }

/* ---------- atendimentos ---------- */
.next-box { display: grid; gap: 0.15rem; border-left: 4px solid var(--brand-yellow); background: #fffbe6; border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.75rem; overflow-wrap: anywhere; }
.next-box.late { border-left-color: var(--danger); background: var(--danger-bg); }
.next-box .sub { color: var(--muted); font-size: 0.82rem; }
td .sub.strong { color: var(--text); font-weight: 600; }
.offer-list { display: grid; gap: 0.4rem; margin-bottom: 0.5rem; }
.offer-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.6rem; }
.offer-row.month { background: #fffbe6; }
.offer-name { flex: 1; min-width: 180px; display: flex; gap: 0.45rem; align-items: flex-start; font-weight: 600; overflow-wrap: anywhere; }
.offer-name input { margin-top: 0.25rem; width: 18px; height: 18px; accent-color: var(--ink); }
.offer-name .sub { display: block; color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.offer-name .tag { margin: 0; }
.offer-results { display: grid; gap: 0.3rem; margin-top: 0.4rem; }
.offer-pick { text-align: left; font: inherit; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.6rem; cursor: pointer; }
.offer-pick:hover { border-color: var(--ink); }
.offer-pick[disabled] { opacity: 0.5; cursor: not-allowed; }
.field input[type='search'] { min-height: 40px; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; width: 100%; }
.month-card { border-top: 4px solid var(--brand-yellow); }
.month-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
.month-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.month-product { display: grid; gap: 0.1rem; background: #fafaf8; border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; overflow-wrap: anywhere; }
.month-product .sub { color: var(--muted); font-size: 0.82rem; }
div.stat { cursor: default; }
div.stat:hover { border-color: var(--border); }
td .tags .tag { white-space: normal; max-width: 100%; }
@media (max-width: 860px) { td .tags .tag { font-size: 0.7rem; } }

/* ---------- metas ---------- */
dialog.dialog-wide { width: min(1180px, calc(100vw - 2rem)); }
.goal-group { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 1rem 0 0.5rem; }
.goal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.goal-card { display: grid; gap: 0.25rem; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.85rem 1rem; cursor: pointer; }
.goal-card:hover { border-color: var(--ink); }
.goal-card.static { cursor: default; }
.goal-card.static:hover { border-color: var(--border); }
.goal-label { font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.goal-label .sub { display: block; font-weight: 400; font-size: 0.78rem; }
.goal-actual { font-size: 1.5rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.goal-target { font-size: 0.85rem; color: var(--muted); }
.goal-bar { height: 8px; background: #ecece8; border-radius: 99px; overflow: hidden; margin-top: 0.2rem; }
.goal-bar > span { display: block; height: 100%; background: var(--brand-yellow); border-radius: 99px; }
.goal-bar.goal-ok > span { background: var(--ok); }
.sub.goal-ok { color: var(--ok); font-weight: 700; }
.goal-table td .sub, .plan-table td .sub, .plan-table th .sub { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 400; }
.goal-table td .sub.goal-ok, .plan-table td .sub.goal-ok { color: var(--ok); font-weight: 700; }
.linklike { font: inherit; font-weight: 700; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--brand-yellow); text-decoration-thickness: 2px; }
.plan-table thead th:first-child { position: sticky; left: 0; z-index: 2; background: #fafaf8; }
.plan-table th[scope='row'] { white-space: nowrap; background: #fafaf8; position: sticky; left: 0; z-index: 1; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--text); }
.plan-table td, .plan-table th { padding: 0.5rem 0.55rem; }
.plan-table td.future { color: #9a9a94; }
.plan-table .now { background: #fffbe6; }
.plan-table tr.fat-diff th, .plan-table tr.fat-diff td { background: #fafaf8; font-size: 0.85rem; }
.goal-input { width: 7.2rem; min-height: 34px; padding: 0 0.4rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; text-align: right; }
.super-card { border-top: 4px solid var(--brand-yellow); }
.field input[type='text'] { min-height: 40px; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; width: 100%; }
@media (max-width: 860px) {
  .goal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goal-actual { font-size: 1.2rem; }
  .goal-input { width: 6rem; }
}
.goal-input-wrap { position: relative; display: inline-flex; align-items: center; }
.goal-input-wrap .goal-input { width: 8.6rem; }
.goal-input-wrap.has-prefix .goal-input { padding-left: 2rem; }
.goal-input-wrap.has-suffix .goal-input { padding-right: 1.5rem; width: 6rem; }
.goal-affix { position: absolute; font-size: 0.8rem; color: var(--muted); pointer-events: none; }
.goal-affix.pre { left: 0.5rem; }
.goal-affix.suf { right: 0.5rem; }
.field .goal-input-wrap { display: flex; }
.field .goal-input-wrap .goal-input { width: 100%; min-height: 40px; }
@media (max-width: 860px) { .goal-input-wrap .goal-input { width: 7.4rem; } }
.stat .stat-pct { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--text); font-weight: 600; }
.stat .stat-trend { display: block; font-size: 0.78rem; font-weight: 700; margin-top: 0.1rem; }
.stat .trend-good { color: var(--ok); }
.stat .trend-bad { color: var(--danger); }
.stat .trend-flat { color: var(--muted); font-weight: 600; }
.stats .stat { display: flex; flex-direction: column; justify-content: flex-start; }
/* Bloco que a pessoa abre quando quer: o diagnostico das contas a receber (L48). */
details > summary { cursor: pointer; font-weight: 600; }
.compare-card summary { cursor: pointer; font-weight: 700; }
.compare-card[open] summary { margin-bottom: 0.75rem; }
.compare-card tr.below-goal th, .compare-card tr.below-goal td { background: #fffaf7; }
.compare-card tr.below-goal td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.inline-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--muted); }
/* ---------- cobertura ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.chip { font: inherit; font-size: 0.85rem; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 0.35rem 0.8rem; cursor: pointer; color: var(--text); }
.chip:hover { border-color: var(--ink); }
.chip.selected { border-color: var(--brand-yellow); background: #fffbe6; font-weight: 700; }
/* ---------- cliente do dia ---------- */
.daily-card { border-top: 4px solid var(--brand-yellow); margin-bottom: 1.25rem; }
.daily-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.daily-name { display: block; font-size: 1.25rem; font-weight: 800; margin-top: 0.35rem; }
.daily-facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0.75rem 0; }
.daily-facts strong { display: block; font-size: 1.05rem; }
.daily-facts .sub { color: var(--muted); font-size: 0.8rem; }

/* Classificação em lote na Carteira: coluna estreita só com a caixinha. */
th.pick, td.pick { width: 2.5rem; padding-right: 0; text-align: center; }
th.pick input, td.pick input { width: 1.1rem; height: 1.1rem; margin: 0; cursor: pointer; }

/* Seletor de departamento no menu: só aparece para quem usa mais de um módulo. */
.modules { display: flex; flex-direction: column; gap: 2px; padding: 0 0.75rem 0.75rem; }
.module {
  text-align: left; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer;
  background: transparent; color: #9aa0a6; border: 0; border-radius: 7px; padding: 0.45rem 0.6rem;
}
.module:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.module.selected { color: #16181a; background: var(--brand-yellow); }
/* Contador vermelho: SÓ quando algum pedido passou do prazo de resposta. Vermelho em tudo
   vira a cor normal da tela e para de chamar atenção, que é o único trabalho dele. */
.nav-count-late { background: var(--danger); color: #fff; }
/* Lista de documentos da caixa, na expedição (L10): nota e boleto, um por linha, com o botão
   de abrir do lado — o ADM não deve ter que rolar a tela atrás do arquivo. */
.doc-line { padding: 0.5rem 0; border-bottom: 1px solid var(--border); gap: 1rem; }
.doc-line:last-child { border-bottom: 0; }
/* Separador dentro de um card, para uma ação que não pertence ao grupo de cima (L12). */
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 1rem 0 0.75rem; }

/* Fluxo da logística: as etapas em linha, com o número de pedidos em cada uma. */
.flow { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; margin-bottom: 1.25rem; }
.flow-step {
  flex: 1 1 6.2rem; min-width: 6.2rem; text-align: left; font: inherit; cursor: pointer; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.6rem 0.7rem;
}
.flow-step:hover { border-color: var(--ink); }
.flow-step.selected { border-top-color: var(--brand-yellow); box-shadow: inset 0 -3px 0 var(--brand-yellow), var(--shadow); }
.flow-step .n { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.flow-step .label { display: block; font-size: 0.74rem; color: var(--muted); font-weight: 600; line-height: 1.25; }
.flow-step.empty .n { color: var(--muted); }

/* Campos que somem conforme o perfil escolhido (ex.: perfil Logística). */
.hidden { display: none !important; }
/* Quantos passaram do prazo da etapa (L75). Fica EMBAIXO do rótulo e em letra pequena: o número
   grande continua sendo quantos tem, que é a pergunta de quem passa os olhos. E só existe quando é
   maior que zero -- "0 fora do prazo" em onze caixinhas é decoração, e decoração é o que faz a
   equipe parar de enxergar o vermelho no dia em que ele importa. */
.flow-late {
  display: inline-block; margin-top: 0.3rem; padding: 0.1rem 0.35rem; border-radius: 6px;
  font-size: 0.7rem; font-weight: 700; line-height: 1.3; cursor: pointer;
  color: var(--danger); background: var(--danger-bg); border: 1px solid transparent;
}
.flow-late:hover { border-color: var(--danger); }
/* Filtro ligado: a etiqueta fica sólida, para a pessoa saber por que a lista encolheu. */
.flow-late.on { background: var(--danger); color: #fff; }

/*
 * A posição já abastecida nesta semana (L80).
 *
 * Ela CONTINUA na lista, só mais apagada. Sumir seria pior: a lista é um roteiro de caminhada, e
 * uma linha que some muda a ordem das paradas no meio do percurso de quem está andando com ela na
 * mão. Apagada, a pessoa passa o olho e segue.
 */
.linha-feita { opacity: 0.55; }
.linha-feita strong { font-weight: 500; }

.flow-step.canceled { border-top-color: var(--danger); }
.flow-step.canceled .n { color: var(--danger); }
.card-warn { border-left: 4px solid var(--brand-yellow); background: var(--warn-bg); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* Volumes do pedido: um bloco por caixa, peso e medidas. */
.volumes { display: grid; gap: 0.6rem; }
.volume { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.7rem; background: #fafaf8; }
.volume strong { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.4rem; }
.volume-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.4rem; }
.volume-fields input { min-height: 38px; padding: 0 0.6rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; width: 100%; }
.volume-field { display: flex; flex-direction: column; gap: 0.15rem; }
.volume-field span { font-size: 0.72rem; color: var(--muted); font-weight: 600; }

/* Documentos que vao para o cliente: uma gaveta por tipo (L57). */
/* Saida crua do diagnostico do Bling: texto longo que precisa caber e quebrar. */
pre.small { white-space: pre-wrap; word-break: break-word; max-height: 24rem; overflow: auto; background: #fafaf8; border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; font-size: 0.78rem; }

.file-list { margin: 0.2rem 0; padding-left: 1.1rem; }
.file-list li { font-size: 0.9rem; }

/* Comentarios do pedido: o recado de uma etapa para a outra, visivel a todos. */
.comments { display: grid; gap: 0.5rem; margin-top: 0.4rem; max-height: 16rem; overflow-y: auto; }
.comment { border-left: 3px solid var(--brand-yellow); background: #fafaf8; border-radius: 0 8px 8px 0; padding: 0.45rem 0.6rem; }
.comment p { margin: 0; }
.comment .sub { display: block; margin-top: 0.15rem; }

/* Escolha da cotacao pelo vendedor: uma linha clicavel por transportadora. */
.picks { display: grid; gap: 0.4rem; }
.picks .pick { display: flex; align-items: flex-start; gap: 0.5rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; cursor: pointer; font-weight: 400; margin: 0; }
.picks .pick:has(input:checked) { border-color: var(--brand-yellow); background: var(--warn-bg); }
.picks .pick input { margin-top: 0.2rem; width: 18px; height: 18px; flex: none; }

/* Campo de comentario: o texto ocupa a linha, o botao fica do lado. */
.comment-form { display: flex; gap: 0.5rem; align-items: center; }
.comment-form input { flex: 1; min-width: 0; min-height: 40px; padding: 0 0.7rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; }

/* Coletas e entregas: mercadoria pronta parada passando do prazo de sair. */
.late { color: var(--danger); font-weight: 700; }
.card-late { border-left: 4px solid var(--danger); background: var(--danger-bg); }
/* Linha que espera uma ação de quem está olhando (L09): em "Meus pedidos", o que está
   parado na aprovação do cliente tem que saltar da tabela. */
tr.row-warn > td { background: var(--warn-bg, #fff8e1); }

/* Garantia parada além do prazo: a linha inteira chama atenção. */
tr.row-late td { background: var(--danger-bg); }

/* Garantia do cliente dentro da ficha do pedido. */
.warranties { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.warranty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.7rem; background: var(--surface); }
.warranty.skipped { opacity: 0.65; }
.warranty strong { margin-right: 0.4rem; }
.warranty .sub { display: block; }

/* O que voltar para a prateleira num cancelamento (L29). Lista dentro da linha da tarefa, com
   célula apertada: é uma lista de conferência para andar o corredor, não uma tabela de leitura. */
.table-inner { margin-top: 0.4rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.86rem; }
.table-inner th, .table-inner td { padding: 0.35rem 0.5rem; }
.table-inner th { background: transparent; }

/* ---- Inventário e acuracidade de estoque (L14) ---- */

/* Acuracidade boa. O vermelho de .late já existe e marca a ruim; sem um verde, "bom" e
   "mediano" ficavam com a mesma cara e o supervisor não via progresso. */
.ok { color: var(--ok); font-weight: 700; }

/* Busca de produto no lançamento da contagem: cada linha traz o saldo da foto e o campo do
   contado lado a lado, para lançar sem tirar a mão do teclado. */
.search-results { display: grid; gap: 0.4rem; margin-top: 0.75rem; }
.search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.7rem; background: var(--surface); }
.search-row > div:first-child { flex: 1; min-width: 200px; }
.search-row input[type='number'] { width: 110px; min-height: 40px; padding: 0 0.6rem;
  border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.search-input { width: 100%; max-width: 420px; min-height: 40px; padding: 0 0.75rem;
  border: 1px solid var(--border); border-radius: 8px; font: inherit; }

/* Linha da contagem cega já respondida: some do caminho sem desaparecer. */
.search-row.row-done { background: var(--ok-bg); border-color: var(--ok); }

/* Passo a passo de configuração (tela de backup). */
.passos { margin: 0.75rem 0 1rem; padding-left: 1.25rem; color: var(--text); line-height: 1.7; }
.passos code { background: var(--ok-bg); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.9em; }

/* ---------- gráficos (L20) ---------- */
/* O desenho encolhe junto com a tela: no celular ele não some nem vira rolagem lateral. */
/* No celular o desenho não encolhe: encolhendo, a régua e os meses ficam com 4px e ninguém lê.
   Ele rola dentro do cartão, como as tabelas largas já fazem — a PÁGINA continua sem rolagem
   lateral, que é a regra. */
.chart-wrap { position: relative; overflow-x: auto; }
.chart { width: 100%; min-width: 560px; height: auto; display: block; overflow: visible; }
/* Régua e nomes dos meses: cinza, pequenos, sempre atrás do dado. */
.chart-axis { fill: var(--muted); font-size: 11px; }
/* O número só aparece no último mês; texto nunca veste a cor da série. */
.chart-value { fill: var(--text); font-size: 12px; font-weight: 600; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.chart-tip {
  position: absolute; top: 0; left: 0; pointer-events: none;
  background: var(--text); color: #fff; font-size: 0.8rem; padding: 0.3rem 0.55rem; border-radius: 6px;
}

/* ---------- folha de impressão da conferência (L22) ---------- */
/* Por que a folha é impressa a partir desta página, e não numa janela nova: o CSP do sistema
   proíbe estilo embutido (style-src 'self'), então uma janela about:blank com <style> sai sem
   formatação nenhuma — sem as molduras para escrever, que são o motivo da folha existir. */
.print-sheet { display: none; background: #fff; }
.print-sheet h1 { font-size: 16pt; margin: 0 0 2mm; }
.print-sheet h2 { font-size: 12pt; margin: 9mm 0 1mm; }
.print-sheet .sub { color: #555; font-size: 10pt; margin: 0 0 7mm; }
.print-sheet table { width: 100%; border-collapse: collapse; margin-bottom: 2mm; }
.print-sheet th,
.print-sheet td { border-bottom: 1px solid #ddd; padding: 2mm; text-align: left; vertical-align: middle; }
.print-sheet th { border-bottom: 1.5px solid #111; font-size: 9.5pt; text-transform: uppercase; letter-spacing: 0.4px; }
/* As duas últimas colunas são sempre as de escrever — contadas do fim, porque na tabela de
   sobras a primeira célula ocupa duas e a contagem pela frente erraria a largura. */
.print-sheet th:nth-last-child(-n + 2),
.print-sheet td:nth-last-child(-n + 2) { width: 26mm; }
/* Onde o conferente escreve. Sem a moldura a folha sai sem lugar para anotar, e a pessoa
   rabisca na margem — ou não anota. */
.print-sheet .caixa { border: 1px solid #999; border-radius: 1mm; height: 9mm; }
.print-sheet .aviso { font-size: 10pt; color: #555; margin: 2mm 0 0; }

/* visibility em vez de display: a folha fica DENTRO da página (dentro do cartão, do main, do
   app), e `display:none` no pai esconderia a filha junto. Escondendo por visibilidade e
   reexibindo só a folha, a profundidade dela na árvore deixa de importar. */
@media print {
  body.printing * { visibility: hidden; }
  body.printing .print-sheet,
  body.printing .print-sheet * { visibility: visible; }
  body.printing .print-sheet { display: block; position: absolute; left: 0; top: 0; width: 100%; color: #111; }
  @page { margin: 12mm; }
}

/* Mudanças do pedido de compra na conferência (L33): lista curta, sem marcador de bolinha —
   cada linha é um fato, não um item de leitura corrida. */
.mudancas { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.mudancas li { border-left: 3px solid var(--border); padding-left: 0.6rem; font-size: 0.92rem; }
.mudancas .sub { display: block; color: var(--muted); font-size: 0.82rem; }

/* Segunda linha dentro de um aviso: a instrução do que fazer fica embaixo, não grudada no texto.
   Sem isto, ".sub" dentro de .alert vira inline e o aviso sai como "...aqui.Clique em..." (L35). */
.alert .sub { display: block; margin-top: 0.35rem; opacity: 0.9; }

/* Totais da remessa (L38): peso real, cubagem e peso cubado numa linha só, acima da tabela de
   volumes. Quebra em várias linhas no celular em vez de encolher a fonte — número de frete tem
   que ser legível em pé, no galpão. */
.totais { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; font-size: 0.92rem; }
.totais .hint { flex-basis: 100%; margin: 0.1rem 0 0; }

/* ---------- folha de separação (L39) ----------
   Lida de pé, no galpão: no celular com uma mão, ou impressa em papel. Endereço grande e primeiro,
   quantidade em destaque com a unidade escrita, e uma caixinha para marcar à mão. */
.folha-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.folha-head h1 { margin: 0; font-size: 1.4rem; }
.folha-head p { margin: 0.15rem 0 0; color: var(--muted); }
.folha-resumo { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-weight: 700; }
.folha-tabela { width: 100%; border-collapse: collapse; }
.folha-tabela th { text-align: left; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 0.3rem 0.5rem; }
.folha-tabela td { border-top: 1px solid var(--border); padding: 0.6rem 0.5rem; vertical-align: top; }
.folha-tabela .marca { font-size: 1.4rem; line-height: 1; width: 1.8rem; color: var(--muted); }
.folha-tabela .endereco { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.folha-tabela .quanto { font-size: 1.05rem; white-space: nowrap; }
.folha-tabela .area { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.folha-tabela .sub { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.folha-tabela .sem-endereco { color: var(--muted); font-weight: 400; font-size: 0.95rem; }
/* Produto que se pega em duas paradas: a marca precisa saltar, porque o risco é justamente o
   separador achar que o item acabou na primeira. */
.folha-tabela .parte { display: block; margin-top: 0.25rem; font-size: 0.8rem; font-weight: 700; color: var(--warn-text, #7a5b00); }
.folha-rodape { margin-top: 1rem; color: var(--muted); font-size: 0.82rem; }

@media (max-width: 640px) {
  /* No celular a coluna "Área" sai: "caixas fechadas" já diz que é o pulmão, e a tela estreita
     é melhor gasta com o endereço. O resto é divisão fixa de largura: sem isso a coluna do
     produto empurra a tabela para fora da tela e a folha nasce com rolagem lateral — justo na
     tela que vai ser lida com uma mão só, andando. */
  .folha-tabela .area, .folha-tabela th:last-child { display: none; }
  .folha-tabela { table-layout: fixed; }
  .folha-tabela .endereco { font-size: 1.1rem; white-space: normal; }
  .folha-tabela .quanto { white-space: normal; }
  .folha-tabela td, .folha-tabela th { overflow-wrap: anywhere; padding: 0.5rem 0.3rem; }
  .folha-tabela .marca { width: 1.4rem; }
}

@media print {
  /* Fora o que não é a folha: menu, botões e avisos de tela. Tinta é dinheiro. */
  .sidebar, .topbar, .nao-imprime, .alert { display: none !important; }
  /* MENOS A CAIXA DA GARANTIA (16/10/2026).
     Esta linha acima estava apagando o aviso da garantia junto com o resto, porque ele é um
     `.alert`. Resultado: o bloco aparecia na tela e sumia no papel -- e o papel é onde o separador
     lê. Pego pelo Vicente usando, com a caixa da OS 612 parada há 12 dias e a folha sem uma linha
     sobre ela; o recurso inteiro existia e não chegava em quem precisava dele.
     No papel ela vira moldura preta e não fundo amarelo: o navegador não imprime fundo por padrão,
     então fundo colorido é um destaque que só funciona na tela. */
  .alert.garantia-folha {
    display: block !important;
    background: none; color: #111; border: 2px solid #111; border-radius: 6px; padding: 0.6rem 0.8rem;
  }
  /* A coluna do menu sai do grid e o conteúdo usa a folha inteira. Sem isto o papel sai com a
     tabela espremida num terço da largura e o nome do produto quebrado em cinco linhas. */
  .layout { display: block; }
  .main { max-width: none; padding: 0; }
  .folha-tabela td { padding: 0.45rem 0.4rem; }
  .folha-tabela .endereco { font-size: 1.15rem; }
  .folha-tabela tr { break-inside: avoid; }
  .folha-head h1 { font-size: 1.2rem; }
}

/* Faixa de versão nova (L40): fixa no rodapé, não no topo — no topo ela empurraria o conteúdo e
   cobriria o título da tela em que a pessoa está trabalhando. Não é alerta: é um aviso que pode
   esperar o fim do que ela está fazendo. */
.faixa-versao {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 60;
  display: flex; align-items: center; gap: 0.75rem; max-width: calc(100% - 2rem);
  padding: 0.6rem 1rem; border-radius: 10px; font-size: 0.9rem;
  background: var(--ink); color: #fff; box-shadow: var(--shadow);
}
.faixa-versao .btn { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--ink); }

/* ---------- etiquetas dos volumes (L43) ----------
   Tamanho real de uma etiqueta Zebra de 10 × 15 cm, uma por página na impressão. Na tela elas
   aparecem empilhadas com borda, para a pessoa conferir antes de gastar etiqueta. */
.etiqueta {
  width: 100mm; height: 150mm; box-sizing: border-box; padding: 6mm;
  display: flex; flex-direction: column; background: #fff; color: #000;
  border: 1px solid var(--border); margin: 0 auto 1rem; overflow: hidden;
}
.etiqueta-controle { display: flex; align-items: baseline; gap: 3mm; line-height: 1.05; white-space: nowrap; }
.etiqueta-controle span { font-size: 6mm; font-weight: 700; }
/* O número de controle e o da nota têm o MESMO tamanho (L62), decidido pelo Vicente olhando a
   etiqueta impressa: "estou achando grande esse número". A 15mm ele competia com o 1/3 e fazia o
   NF parecer rodapé; a 11mm os dois números da identificação se leem como um par, e quem lê de
   longe continua lendo o 1/3, que é o maior da etiqueta por uma boa margem.
   De quebra, 6 dígitos passam a caber: a 15mm eles seriam cortados em silêncio, porque a linha é
   `nowrap` dentro de uma etiqueta com `overflow: hidden`. */
.etiqueta-controle strong { font-size: 11mm; font-weight: 800; letter-spacing: -0.02em; }
/* A nota fiscal e o destino entraram na L62, quando a etiqueta passou a ser impressa também na
   expedição — ali os dois já existem.
   O tamanho foi corrigido no mesmo dia, olhando a etiqueta impressa: a 7mm o "NF 71236" tinha
   cara de rodapé, e ele não é rodapé — é o número que a transportadora confere. Subiu para 11mm,
   que é grande o bastante para ser lido junto com o controle e pequeno o bastante para não
   disputar com ele: o 93436 continua sendo o maior da parte de cima, e o 1/3 o maior da etiqueta. */
.etiqueta-nota { font-size: 11mm; font-weight: 800; margin-top: 1mm; letter-spacing: -0.01em; line-height: 1.1; }
/* No máximo duas linhas, e o que passar disso é cortado com reticências. "RODONAVES TRANSP E
   ENCOMENDAS" já ocupa duas; um nome ainda maior não pode empurrar o código de barras para fora
   da etiqueta — e empurrava, porque a etiqueta tem altura fixa e `overflow: hidden`. */
.etiqueta-destino {
  font-size: 6mm; font-weight: 800; text-transform: uppercase; margin-bottom: 2mm; line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* A contagem fica no MEIO da etiqueta e é o maior elemento dela: é o que se lê de longe, com a
   caixa na prateleira. O controle diz de qual pedido é; este diz se o lote está completo. */
.etiqueta-volume {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2mm;
}
/* 34mm, e não 30: quando a nota e o destino entraram (L62), o 1/3 perdeu o ar em volta e deixou
   de dominar a etiqueta. O Vicente escolheu este desenho entre três, em 13/10/2026 — o que mais
   se parece com a etiqueta que a casa já usava. O 1/3 é o que se lê de longe, com a caixa na
   prateleira, e tem que continuar sendo o maior elemento da etiqueta. */
.etiqueta-volume strong { font-size: 34mm; font-weight: 800; line-height: 1; }
/* "12/12" tem cinco caracteres e a 34mm seria cortado pela borda da etiqueta. Encolhe só o
   necessário: pedido de 3 volumes continua com o número gigante. */
.etiqueta-volume strong.volume-contagem-m { font-size: 28mm; }
.etiqueta-volume strong.volume-contagem-g { font-size: 23mm; }
.etiqueta-volume span { font-size: 6mm; font-weight: 600; }
/* O cliente embaixo: é assim no modelo que a JP2Auto já usa, e é onde o olho procura. */
/* Mesma regra do destino: o nome do cliente é o que o olho procura, mas três linhas dele comeriam
   o código de barras. Duas linhas — e a letra encolhe em vez de o nome ser cortado (L68).
   Desde que a etiqueta passou a levar a RAZÃO SOCIAL e não a fantasia, o nome ficou muito mais
   comprido, e nome cortado derruba o motivo da mudança: a transportadora casa a etiqueta com a
   nota, e meia razão social não casa com nada. */
.etiqueta-cliente {
  font-size: 6.5mm; font-weight: 800; font-style: italic; line-height: 1.15;
}
.etiqueta-cliente-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Faixas pela quantidade de caracteres, iguais às da contagem de volumes: encolhe só o necessário,
   para o cliente de nome curto continuar com o nome grande. */
.etiqueta-cliente-nome.cliente-nome-m { font-size: 5.2mm; }
.etiqueta-cliente-nome.cliente-nome-g { font-size: 4.2mm; }
.etiqueta-cliente span { display: block; font-size: 5mm; font-weight: 600; font-style: normal; margin-top: 1mm; }
.etiqueta-barras { margin-top: 3mm; }
.etiqueta-barras svg { width: 100%; height: 18mm; }

/* O código de barras na folha de separação, junto do resumo. */
.folha-barras { margin-top: 0.5rem; text-align: right; }
.folha-barras svg { width: 52mm; height: 14mm; }
.folha-barras span { display: block; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); }

@media print {
  /* Uma etiqueta por página, no tamanho exato da etiqueta física. */
  .etiquetas .etiqueta { border: none; margin: 0; break-after: page; }
  .etiquetas .etiqueta:last-child { break-after: auto; }
}

/* ---------- o painel do time, para a televisão da logística (L72) ----------

   O leitor desta tela está DE PÉ, a cinco metros, de passagem. Isso é o que decide o tamanho de
   tudo aqui: o número é para ser lido do outro lado da área, e a frase embaixo é para quem chegar
   perto. A classe `painel-tv` some com o menu e cresce tudo de novo -- ela vive no elemento da
   página, e não no body, de propósito: quando a pessoa navega para outra tela o elemento morre e o
   menu volta sozinho, sem nenhum código de limpeza para alguém esquecer de escrever. */
/* O topo é um bloco CENTRADO (L111, 10/11/2026): mês pequeno em cima, objetivo
   grande embaixo. O horário e o botão ficam presos no canto -- se entrassem no
   fluxo, empurrariam o centro para a esquerda e o alinhamento pareceria erro. */
.painel-head { position: relative; text-align: center; padding-block: 0.5rem 0; margin-bottom: 2rem; }
.painel-head-acoes { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 0.75rem; }
.painel-mes {
  margin: 0 0 0.75rem; font-size: 0.9rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em;
}

/* Abaixo de ~720px os botões do canto encostariam na frase: aí eles voltam
   para o fluxo, em cima de tudo, e o bloco continua centrado. */
@media (max-width: 720px) {
  .painel-head { padding-top: 0; }
  .painel-head-acoes { position: static; justify-content: center; margin-bottom: 1rem; }
}

.painel-quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.painel-quadro {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.painel-titulo { font-size: 0.95rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.painel-num { font-size: 3.4rem; font-weight: 800; line-height: 1.05; }
.painel-abaixo { font-size: 1rem; font-weight: 600; }
.painel-rodape { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }
/* Vermelho só no quadro que está fora da referência. Vermelho em tudo não é aviso, é decoração. */
.painel-ruim { border-color: var(--danger); background: var(--danger-bg); }
.painel-ruim .painel-num { color: var(--danger); }

.painel-ensaio { color: var(--warn-text); background: var(--warn-bg); border-radius: var(--radius); padding: 0.6rem 0.9rem; font-weight: 600; }

/* O OBJETIVO É O TÍTULO DA TELA (L111, 10/11/2026).

   Primeira versão: ele entrou embaixo do mês, à esquerda, com peso parecido --
   e o olho lia como subtítulo do mês. "Ela precisa ser inspiradora", disse o
   Vicente, e ele estava certo pelo motivo certo: numa televisão vista de dez
   metros o mês é o detalhe (dá para chegar perto e conferir) e o objetivo é o
   assunto. Agora ele é o h1.

   Sem cartão e sem cor de alerta de propósito: não é aviso nem indicador. O que
   faz uma linha de texto virar declaração é o ESPAÇO em volta dela -- por isso a
   margem embaixo é generosa, e não é desperdício de tela. */
.painel-objetivo {
  margin: 0;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 24ch;
  margin-inline: auto;
}
.painel-prazo-linha { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.painel-prazo-linha input { width: 7rem; }
.painel-prazo-linha label { font-weight: 600; }

/* Modo televisão: o menu sai, o número cresce, e o que é letra miúda some. Quem está a cinco
   metros não vai ler a tabela dos meses anteriores nem o campo de configuração. */
.layout:has(.painel-tv) .sidebar,
.layout:has(.painel-tv) .topbar,
.layout:has(.painel-tv) .menu-overlay { display: none; }
/* A COLUNA DO MENU TEM QUE SUMIR JUNTO. Esconder só a barra deixa a coluna de 240px vazia no
   lugar, e o conteúdo escorrega para dentro dela: a primeira versão desta tela ficou com os três
   quadros empilhados numa tira estreita no canto esquerdo da televisão. */
.layout:has(.painel-tv) { grid-template-columns: 1fr; }
.layout:has(.painel-tv) .main { padding: 2rem 2.5rem; max-width: none; }
/* Na televisão a tela é preenchida de cima a baixo: com os quadros do tamanho normal sobrava
   metade da parede em branco, e o número — que é a única coisa que se lê a cinco metros — ficava
   do tamanho de um número de relatório. */
/* A TELEVISÃO NÃO ROLA (L111, 10/11/2026).

   Foto do Vicente da televisão da logística: o objetivo tinha sumido e o topo do
   primeiro quadro estava cortado -- a página era mais alta que a tela e alguém
   teria que rolar. Numa parede ninguém rola, então o que não cabe simplesmente
   não existe. E some de cima, que é justamente onde está o que mais importa.

   A causa era corpo de letra em REM: os tamanhos foram escolhidos num navegador
   de 900px de altura, e a televisão da área tem 768. Em rem, tela menor não
   encolhe nada -- ela só corta.

   Agora o modo televisão tem a ALTURA DA TELA, sem rolagem, e cada corpo de
   letra é uma fração dessa altura com piso e teto. Televisão de 768, de 1080 ou
   de 4K: o painel se ajusta a cada uma em vez de supor uma. */
.painel-tv {
  height: calc(100dvh - 4rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.painel-tv .painel-quadros { flex: 1; align-items: stretch; min-height: 0; margin-bottom: 0; }
.painel-tv .painel-quadro { justify-content: center; padding: clamp(1rem, 2.5vh, 2rem); min-height: 0; overflow: hidden; }
/* Na televisão a frase é lida ANTES dos números, da outra ponta do galpão. O mês
   continua pequeno de propósito: quem precisa dele chega perto. */
.painel-tv .painel-objetivo { font-size: clamp(1.9rem, min(4.6vw, 7vh), 5rem); }
.painel-tv .painel-mes { font-size: clamp(0.8rem, 1.6vh, 1.15rem); margin-bottom: clamp(0.4rem, 1.2vh, 1rem); }
.painel-tv .painel-head { margin-bottom: clamp(0.75rem, 3vh, 2.5rem); }
.painel-tv .painel-num { font-size: clamp(3rem, min(17vh, 11vw), 10rem); }
.painel-tv .painel-titulo { font-size: clamp(0.9rem, 2.3vh, 1.6rem); }
.painel-tv .painel-abaixo { font-size: clamp(0.95rem, 2.6vh, 1.8rem); }
.painel-tv .painel-rodape { font-size: clamp(0.75rem, 1.8vh, 1.25rem); margin-top: clamp(0.3rem, 1vh, 0.6rem); }
.painel-tv .painel-ensaio { font-size: clamp(0.8rem, 1.7vh, 1.2rem); margin-top: clamp(0.5rem, 1.5vh, 1rem); }

/* O FUNDO EM TELA CHEIA (L111). Em tela cheia o elemento <html> deixa de herdar o
   fundo do <body>, e o painel aparece sobre o que estiver atrás -- na foto do
   Vicente dava para ver o papel de parede do computador através da tela. */
html:fullscreen,
html:fullscreen body { background: var(--bg); }
.painel-tv .painel-historico,
.painel-tv .painel-config,
.painel-tv .painel-head-acoes { display: none; }

/* ---------------------------------------------------------------------------
   Aba Regiões, em Cobertura (L97, 22/10/2026).

   Os cartões das lojas são BOTÕES: clicar troca a loja da tabela de baixo. Por
   isso levam reset de botão -- sem ele o navegador põe borda e fundo próprios e
   o cartão deixa de parecer cartão.

   A barra de três cores e o gráfico de doze meses recebem largura e altura pelo
   CSSOM (el.style.width), nunca por atributo style: a política de segurança da
   página bloqueia estilo embutido.
   --------------------------------------------------------------------------- */
.regioes-cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 1.25rem; }
.regiao-card { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.regiao-card.sel { border-color: var(--brand-yellow); box-shadow: inset 3px 0 0 var(--brand-yellow); }
.regiao-card h3 { margin: 0; font-size: 1.05rem; }
.regiao-card .tag { width: fit-content; }

.regiao-nums { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.regiao-nums div { min-width: 0; }
.regiao-nums b { display: block; font-size: 1.3rem; line-height: 1.1; }
.regiao-nums span { font-size: 0.72rem; opacity: 0.7; }

.regiao-barra { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--line); }
.regiao-barra i { display: block; }
.b-a { background: var(--ok); }
.b-i { background: var(--brand-yellow); }
.b-p { background: var(--danger); }
/* Nunca compraram: a quarta faixa. Sem ela a legenda não soma o número da carteira. */
.b-s { background: color-mix(in srgb, currentColor 22%, transparent); }
.pt { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: baseline; }
.regiao-legenda { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.72rem; opacity: 0.8; }
.regiao-legenda em { font-style: normal; font-weight: 600; }

.regiao-graf { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
/* Cinza visível no cartão não selecionado: pintar com a cor da borda sumia no branco. */
.regiao-graf i { flex: 1; min-height: 1px; background: color-mix(in srgb, currentColor 32%, transparent); border-radius: 2px 2px 0 0; }
.regiao-card.sel .regiao-graf i { background: var(--brand-yellow); }

/* ---------------------------------------------------------------------------
   COMO ESTÁ INDO, na Fila do atendimento (L100, 27/10/2026).

   As barras recebem altura pelo CSSOM (el.style.height), nunca por atributo
   style: a política de segurança da página bloqueia estilo embutido.

   O dia de hoje fica amarelo e os anteriores cinza. Sem isso a barra de hoje
   se perde no meio das outras -- e é a única que ainda dá para mudar.
   --------------------------------------------------------------------------- */
.fila-graf { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin: 0.5rem 0 0.25rem; }
.fila-graf i { flex: 1; min-height: 2px; background: color-mix(in srgb, currentColor 28%, transparent); border-radius: 2px 2px 0 0; }
.fila-graf i.hoje { background: var(--brand-yellow); }
.fila-graf i.vazio { background: color-mix(in srgb, currentColor 10%, transparent); }
.fila-datas { display: flex; justify-content: space-between; font-size: 0.7rem; opacity: 0.7; }

/* O número clicável: é ele que transforma a tela de relatório em próxima ligação. */
.link-num { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dotted currentColor; }
.link-num:hover { color: var(--brand-yellow); }

/* A linha de resto ("Outras cidades"): está na tabela para a soma fechar, não para ser trabalhada. */
.linha-resto td { background: color-mix(in srgb, currentColor 5%, transparent); font-style: italic; }

/* ---------------------------------------------------------------------------
   Planejamento do ano por cidade (L97, 22/10/2026).

   A pirâmide recalcula ao vivo enquanto se digita. Isso não é enfeite: sem o
   total subindo na hora, a pessoa preenche onze campos, salva, descobre que
   passou da conta e recomeça -- e odeia a tela na segunda vez que abre.
   --------------------------------------------------------------------------- */
.piramide { font-variant-numeric: tabular-nums; }
.piramide-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 0.5rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.piramide-topo b { font-size: 1.6rem; }
.piramide-linha { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; padding-left: 0.9rem; }
.piramide-linha.aberta { font-weight: 600; }
.piramide-linha.neto { padding-left: 2rem; font-size: 0.85rem; opacity: 0.75; }

.campo-mes { width: 7rem; text-align: right; }
/* Mês corrigido à mão: fica marcado para ninguém esquecer que ali houve decisão. */
.linha-corrigida td { background: var(--warn-bg); }
.linha-soma td { font-weight: 700; background: color-mix(in srgb, var(--brand-yellow) 14%, transparent); }
/* Cidade ainda não planejada: vale zero na meta, e a linha diz isso em vez de esconder. */
.linha-pendente td:first-child { border-left: 3px solid var(--brand-yellow); }
/* Cabeçalho em dois andares da tabela de cidades: CARTEIRA | MÊS | ANO. */
thead tr.grupo th { border-bottom: 0; padding-bottom: 0.1rem; font-size: 0.68rem; letter-spacing: 0.1em; opacity: 0.6; }
thead tr.grupo th.sep, thead tr:last-child th.sep, tbody td.sep { border-left: 1px solid var(--line); }

/* ---------------------------------------------------------------------------
   Filtros e cabeçalho grudados no topo (L98, 22/10/2026).

   `--topo` é a altura medida da barra de filtros, posta pelo grudarNoTopo() do
   dom.js. Valor fixo aqui esconderia a primeira linha de clientes toda vez que
   a barra quebrasse em duas linhas.

   Só a partir de 900px: `.table-wrap` tem overflow para rolar na horizontal, e
   overflow cria um contexto de rolagem que mata o sticky. Em telas estreitas a
   rolagem lateral vale mais que o cabeçalho grudado.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .toolbar.gruda-filtros { position: sticky; top: 0; z-index: 6; background: var(--bg); padding-block: 0.6rem; margin-bottom: 0.4rem; }
  .table-wrap.gruda-cabecalho { overflow: visible; }
  .table-wrap.gruda-cabecalho thead th {
    position: sticky; top: var(--topo, 48px); z-index: 4; background: var(--surface);
    box-shadow: inset 0 -1px 0 var(--border);
  }
}

/* CATÁLOGO DE FALHAS DO SUPORTE (L100).
   Mesma linguagem visual dos cartões de região: o cartão é um botão que escolhe o que a tabela
   de baixo mostra. Repetir o padrão vale mais que inventar outro — quem já usa o CRM não
   precisa aprender duas gramáticas para a mesma ideia. */
.catalogo-familias { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.25rem; }
.catalogo-familia { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.catalogo-familia.sel { border-color: var(--brand-yellow); box-shadow: inset 3px 0 0 var(--brand-yellow); }
.catalogo-familia h3 { margin: 0; font-size: 1rem; }
.catalogo-familia p { margin: 0; }
.catalogo-familia .tag { width: fit-content; }
.catalogo-num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.catalogo-num span { font-size: 0.75rem; font-weight: 400; opacity: 0.7; }

.col-ordem { width: 1%; white-space: nowrap; }
.catalogo-ordem { display: flex; align-items: center; gap: 0.25rem; }
.catalogo-ordem span { min-width: 1.4rem; opacity: 0.7; }
.col-acoes { white-space: nowrap; text-align: right; }
.col-acoes .btn + .btn { margin-left: 0.35rem; }
/* Modo sem roteiro escrito: o botão chama atenção porque é trabalho que falta, não erro. */
.btn-warn { border-color: var(--brand-yellow); }

.catalogo-passos { display: flex; flex-direction: column; gap: 0.85rem; margin: 0.75rem 0; }
.catalogo-passo { border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.catalogo-passo-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.campo { display: flex; flex-direction: column; gap: 0.25rem; }
.campo > span { font-size: 0.8rem; font-weight: 600; opacity: 0.85; }

/* DIGISAC (L100). A tela é um microscópio: o JSON inteiro aparece como veio, porque campo
   bonitinho esconde justamente o que ainda não se sabe que existe. */
.digisac-endereco { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.5rem 0; }
.digisac-url { background: var(--line); padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.85rem; word-break: break-all; flex: 1; min-width: 0; }
.digisac-acoes { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.digisac-tipos { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.digisac-json { background: var(--line); padding: 0.75rem; border-radius: 6px; font-size: 0.8rem; max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* PRODUTOS E FAMÍLIAS (L100). */
.lista-simples { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.lista-simples li { margin-bottom: 0.25rem; font-size: 0.9rem; }
.ml { margin-left: 0.5rem; }

/* CONTATOS DO WHATSAPP (L100). */
.contato-busca { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; max-height: 40vh; overflow-y: auto; }
.contato-busca .btn { text-align: left; justify-content: flex-start; }
.small { font-size: 0.78rem; }

/* QUALIDADE DO ATENDIMENTO (L100). */
.qualidade-cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 0.5rem; }
.qualidade-card { display: flex; flex-direction: column; gap: 0.2rem; }
.qualidade-card h3 { margin: 0; font-size: 0.95rem; }
.qualidade-card p { margin: 0; }
.qualidade-card .catalogo-num span { font-size: 0.75rem; font-weight: 400; opacity: 0.7; }

/* A distribuição das notas. Largura por classe porque o CSP do app proíbe atributo style. */
.csat-barras { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.3rem; }
.csat-linha { display: flex; align-items: center; gap: 0.4rem; }
.csat-nota { width: 0.8rem; font-size: 0.8rem; font-weight: 600; opacity: 0.7; }
.csat-barra { flex: 1; height: 0.5rem; background: rgba(0, 0, 0, 0.07); border-radius: 999px; overflow: hidden; }
.csat-cheio { display: block; height: 100%; border-radius: 999px; }
.csat-5, .csat-4 { background: #2e9e5b; }
.csat-3 { background: #c9a227; }
.csat-2, .csat-1 { background: #d7442f; }
.csat-w0 { width: 0; }
.csat-w10 { width: 10%; }
.csat-w20 { width: 20%; }
.csat-w30 { width: 30%; }
.csat-w40 { width: 40%; }
.csat-w50 { width: 50%; }
.csat-w60 { width: 60%; }
.csat-w70 { width: 70%; }
.csat-w80 { width: 80%; }
.csat-w90 { width: 90%; }
.csat-w100 { width: 100%; }