/* ═══════════════════════════════════════════════════════════════════
   W18k Office — camada global

   Vale para todos os modulos: chrome, nav, container, cabecalho de pagina,
   painel, tabela, chip, botao. Modulo nenhum reescreve nada daqui.
   CSS especifico de modulo vive em /css/<modulo>-office.css.
   ══════════════════════════════════════════════════════════════════ */

html { color-scheme: light only; background: var(--page); }

* { box-sizing: border-box; }

/* ARMADILHA CONHECIDA (regra 34): qualquer `display:` numa classe VENCE o
   atributo `hidden` e o elemento continua na tela — foi assim que a
   .st-subtabs do Settings apareceu escondida e o formulario de cliente
   ficou embaixo da lista. Fechado aqui para o sistema inteiro, em vez de
   remendar folha por folha. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* TIPOGRAFIA DO SISTEMA (Paulo 07/09/2026): SF Pro Text no corpo,
     13px, peso 400 (enfase = 600), NUMEROS TABULARES ligados aqui e
     nunca desligados em tabela, KPI, preco, peso, data ou campo.
     Revoga o "tudo em 700" de 17/08: a escala nova tem dois pesos,
     400 no corpo e 600 no que e titulo, rotulo ou enfase. */
  font-family: var(--font-text);
  font-size: var(--body-size);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
b, strong, th { font-weight: 600; }
table, td, th, input, select, textarea, button { font-variant-numeric: tabular-nums; }

/* ── chrome ──────────────────────────────────────────────────────── */

/* A cor da barra pode ser trocada pelo usuario (Settings > Overview >
   Appearance). --chrome-ink e calculado la: barra clara -> fonte preta. */
.chrome {
  background: var(--chrome);
  color: var(--chrome-ink, #FFFFFF);
  /* O MENU PRINCIPAL NAO DESCE COM A TELA (Paulo 31/08/2026) — caiu a
     ultima ancora: NADA no sistema acompanha a rolagem. O sticky de
     28/08 vinha do work order; a instrucao ao vivo dele vence. A sombra
     fica: e o divisor do topo, nao efeito de flutuacao. */
  box-shadow: 0 2px 8px rgba(28, 27, 24, .18);
}

.chrome-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.chrome-inner-low {
  padding-top: 0;
  padding-bottom: 0;
}

.chrome-user { display: flex; align-items: center; gap: 10px; }

.chrome-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.24);
  display: grid; place-items: center;
  font-size: var(--sub-size); font-weight: 600;
  color: var(--chrome-ink, #FFFFFF);
  -webkit-text-fill-color: var(--chrome-ink, #FFFFFF);
}

.chrome-user-name { font-size: var(--body-size); font-weight: 600; }

/* sair: seta ao lado do nome do usuario (Paulo 14/08/2026). Fica no
   chrome dourado, entao e contorno branco translucido. */
.chrome-logout {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.14);
  color: var(--chrome-ink, #FFFFFF);
  -webkit-text-fill-color: var(--chrome-ink, #FFFFFF);
  cursor: pointer;
  padding: 0;
}
.chrome-logout:hover { background: rgba(255,255,255,.28); }

/* perfil do usuario (Paulo 31/08/2026): o BONEQUINHO ao lado do nome —
   mesmo desenho redondo do sair — abre o painel com as edicoes simples
   do proprio usuario (o antigo Settings > Overview): um salesperson nao
   tem acesso ao Settings, mas cor, idioma e senha sao dele. */
.chrome { position: relative; }

.chrome-profile {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.14);
  color: var(--chrome-ink, #FFFFFF);
  -webkit-text-fill-color: var(--chrome-ink, #FFFFFF);
  cursor: pointer;
  padding: 0;
}
.chrome-profile:hover { background: rgba(255,255,255,.28); }

/* ASK HP (19/09/2026): o botao no chrome — mesma familia do sair e do
   bonequinho (translucido sobre a cor do usuario), largura pelo rotulo */
.chrome-hp {
  appearance: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.14);
  color: var(--chrome-ink, #FFFFFF); -webkit-text-fill-color: var(--chrome-ink, #FFFFFF);
  font: 600 var(--sub-size) / 1 var(--font-text); letter-spacing: .02em; cursor: pointer;
}
.chrome-hp:hover { background: rgba(255,255,255,.28); }
/* a letra do office da sessao (B / M, 19/10/2026): redondo, na cor da casa */
.chrome-loc { width: 30px; padding: 0; justify-content: center; cursor: default; }
/* o IA da SophIA no botao do topo em dourado (Paulo 13/10/2026: "IA de Sophia deve ser
   dourado") — o dourado de TEXTO da casa; o --gold cheio some sobre o papel */
.chrome-hp .chrome-ia { color: var(--gold-deep); -webkit-text-fill-color: var(--gold-deep); }

/* O TOPO QUE CABE (Paulo 13/10/2026: "Em todas as telas. Coloca WC e SH se quiser ou
   tira o nome Paulo Dumont. Faz caber" + "Tudo pra melhorar o celular melhora no
   computador tambem"): os selos ficam curtos em TODA largura — "WhatsApp" e "System" (Paulo 14/10/2026: "Whatsapp ao inves de WC e
   System ao inves de SH"); o estado e a cor do ponto e o title diz tudo. A fileira do
   usuario nunca quebra. */
/* o nome volta no computador (Paulo 14/10/2026: "No computador deixa o nome do user. No
   cel nao precisa"): de 901px para cima aparece; abaixo o avatar basta (entre 701 e
   819px o nome empurrava os logos para uma 2a linha) */
@media (max-width: 900px) { .chrome-user-name { display: none; } }
/* fora do topo (tela sem chrome) o selo segue por extenso */
.chip-short { display: none; }
.chrome-user .chip-long { display: none; }
.chrome-user .chip-short { display: inline; }
/* o painel: por cima da tela (como a caixa de impressao e o What is this),
   encostado a direita, altura da janela; nunca mexe no chrome nem na pagina */
.hp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(440px, 100vw);
  display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -12px 0 36px rgba(0, 0, 0, .12);
}
.hp-drawer[hidden] { display: none; }
/* OS PAINEIS FLUTUAM (Paulo 01/10/2026: "uma caixa dentro da tela, onde as mensagens
   vao ser passadas e devolvidas... que ele possa mover e trabalhar com a pagina"):
   no computador o painel e uma caixa menor no canto, arrastavel pelo cabecalho
   (shared/float-panel.js) e redimensionavel pelo canto; a pagina atras continua
   clicavel e o painel fica aberto enquanto a pessoa navega. No celular, tela inteira. */
@media (min-width: 701px) {
  .hp-drawer {
    top: auto; right: 24px; bottom: 24px;
    width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100vh - 100px));
    min-width: 320px; min-height: 320px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden; resize: both;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
  }
  .hp-drawer .hp-head { cursor: move; user-select: none; touch-action: none; }
  .hp-drawer.is-dragging { box-shadow: 0 24px 60px rgba(0, 0, 0, .26); }
}
.hp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.hp-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hp-mark { font: 800 var(--t2-size) / 1 var(--font-display); color: var(--gold-deep, var(--gold)); -webkit-text-fill-color: var(--gold-deep, var(--gold)); letter-spacing: .04em; }
.hp-sub { font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hp-mark-sophia { letter-spacing: 0; }
.hp-acts { display: flex; align-items: center; gap: 8px; flex: none; } /* 19/09: o botao New chat nao quebra em duas linhas — quem cede e o subtitulo */
.hp-acts .btn { white-space: nowrap; }
.hp-x { appearance: none; width: var(--ctl-h); height: var(--ctl-h); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); -webkit-text-fill-color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.hp-ctx { padding: 8px 16px; font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); background: var(--gold-faint); border-bottom: 1px solid var(--line); }
.hp-msgs { flex: 1 1 auto; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
/* a fila do departamento no painel do AI Assist (26/09/2026): as pastilhas
   do componente global .attn-*, quebrando linha; titulo pequeno em cima */
.hp-queue { padding: 10px 16px 12px; border-bottom: 1px solid var(--line); }
.hp-queue[hidden] { display: none; }
.hp-queue-t { font-size: var(--sub-size); font-weight: 600; color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); margin-bottom: 8px; }
.hp-queue .attn-grid { gap: 6px; }
.hp-msg { max-width: 92%; }
.hp-msg.is-user { align-self: flex-end; }
.hp-msg-text { white-space: pre-wrap; font-size: var(--body-size); line-height: 19px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); -webkit-text-fill-color: var(--ink); }
.hp-msg.is-user .hp-msg-text { background: var(--gold-soft); border-color: var(--gold); }
.hp-thinking { color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.hp-msg-file { margin-top: 6px; }
.hp-msg-meta { margin-top: 4px; font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
/* as pecas citadas na resposta, com foto e link (Paulo 19/09/2026: "coloca fotos nas respostas, de joias, e links") */
.hp-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.hp-piece { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); -webkit-text-fill-color: var(--ink); text-decoration: none; }
.hp-piece:hover { border-color: var(--gold); background: var(--gold-faint); }
.hp-piece-img { grid-row: 1 / span 3; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--surface-alt); }
.hp-piece-nophoto { display: flex; align-items: center; justify-content: center; font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); text-align: center; }
.hp-piece-sku { font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.hp-piece-name { font-size: var(--sub-size); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-piece-msrp { font-size: var(--sub-size); font-variant-numeric: tabular-nums; color: var(--gold-deep, var(--gold)); -webkit-text-fill-color: var(--gold-deep, var(--gold)); }
.hp-ask { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.hp-ask .hp-q { flex: 1 1 auto; width: auto; height: auto; min-height: calc(var(--ctl-h) * 1.6); resize: none; line-height: 19px; }
.hp-ask .btn { flex: none; }

/* tela de saida (o botao de logout cumpre o contrato: POST /api/logout
   e esta tela; no ERP o Sign in leva ao login real) */
.logout-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg, #F7F3EA);
}

/* Trust this device (25/09/2026, login no servidor): a caixinha da lei 11.200 */
.login-trust { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: var(--body-size); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); cursor: pointer; }
.login-2fa-send { display: flex; gap: 8px; margin-bottom: 6px; }
.login-2fa-to { min-height: 18px; margin: 0 0 10px; font-size: var(--sub-size, 12px); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.login-privacy { color: var(--gold-deep); -webkit-text-fill-color: var(--gold-deep); font-weight: 600; }
.login-trust input { margin: 0; }
/* aviso curto sob o botao, como no ERP */
.login-note {
  margin-top: 14px;
  text-align: center;
  font-size: var(--body-size);
  font-weight: 600;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}
.logout-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 34px 44px;
  text-align: center;
  box-shadow: 0 14px 38px rgba(28, 27, 24, .12);
}
.logout-title {
  font-size: var(--t2-size); font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  margin-bottom: 16px;
}

/* o perfil e PAGINA PROPRIA (Paulo 31/08/2026: "nao quero popup — uma
   pagina, pra nao ficar apertado"): cabecalho no padrao dos modulos
   (crumb + titulo 30/800 + Back/Save na linha do titulo, repetidos
   embaixo) e os 4 boxes em grade folgada */
/* titulo NA MESMA POSICAO dos titulos de modulo (Paulo 31/08/2026:
   "My profile deve estar alinhado com Customers e os outros titulos
   principais — faz dessa posicao uma regra"): a secao ja da o respiro
   do container, o cabecalho nao soma padding proprio */
/* 07/09: o cabecalho do perfil e o componente global .page-head
   (T2 — pagina interna); .pp-phead/.pp-h1/.pp-crumb morreram */
.page-head .pp-actions { margin-top: 0; }

/* quadrados ALINHADOS (mesma altura por fileira — o stretch do grid) e
   COMPACTOS (Paulo 31/08: "alinha os quadrados e deixa ocupando menos
   espaco"): o conteudo foi rebalanceado para as fileiras fecharem
   juntas — senha numa fileira de 3 campos, preferencias numa fileira */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* caixas da MESMA FILEIRA fecham iguais (stretch natural do grid);
     a fileira NAO estica alem do conteudo (Paulo 01/09: "em Stock
     location e Password tem muito espaco sobrando embaixo — tira" —
     revoga o grid-auto-rows: 1fr que igualava TODAS as fileiras na
     mais alta e deixava a 2a com sobra) */
  gap: 12px;
}

/* fileira de campos dentro do cartao (senha, preferencias) */
.pp-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.pp-row .field { max-width: none; }
/* fileira com o botao no fim (Update password na MESMA linha):
   ALINHADO pela base dos campos (a regra generica do cartao poe botao
   no comeco e vencia por ordem — daqui a especificidade decide) e em
   NAVY, a cor de acao secundaria forte do sistema (azul so como fundo
   de botao com fonte branca — o Save dourado segue a unica primaria) */
.pp-row-btn { grid-template-columns: 1fr 1fr 1fr auto; }
.pp-card .pp-row-btn .btn {
  align-self: end;
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  font-weight: 600;
}
.pp-page .pp-card { background: #FFFFFF; padding: 10px 14px 12px; gap: 4px; }
.pp-actions-foot { margin-top: 18px; }

/* overview do usuario: cartao de largura inteira com a atividade */
.pp-wide {
  background: #FFFFFF;
  padding: 12px 14px 14px;
  margin-top: 12px;
}
.pp-actbar { display: flex; gap: 10px; margin: 6px 0 10px; }
.pp-actbar .field { margin-bottom: 0; }
.pp-actbar #pp-actq { flex: 1; }
.pp-actbar #pp-actsel { width: 170px; }

.pp-card {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* titulo de cartao no padrao da casa (15/800, como st-card-t e
   sv-ptitle) — o uppercase mirrado saiu (Paulo 31/08: o design) */
.pp-t {
  font-size: var(--t3-size);
  font-weight: 600;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  margin-bottom: 2px;
}
.pp-t + .pp-t, .pp-card .pp-t:not(:first-child) { margin-top: 12px; }

/* identidade: avatar grande + nome forte + e-mail e role embaixo */
.pp-id { display: flex; align-items: center; gap: 12px; margin: 2px 0; }
/* Change photo NO MEIO da fileira (Paulo 01/09: "alinhar na vertical
   — está um pouquinho pra cima"): o align-self: flex-start generico
   do .pp-card .btn vencia por especificidade e subia o botao 8px */
.pp-card .pp-id .btn { align-self: center; }
/* OS BOTOES DAS DUAS CAIXAS DE CIMA NA MESMA LINHA (Paulo 04/10/2026: "botoes devem ser alinhados nas
   duas caixas acima"): o Change photo do Profile desce para a base da fileira, a mesma linha do My default
   e dos selects do Preferences ao lado (os dois cartoes fecham na mesma altura) */
.pp-page .pp-card .pp-id .btn { align-self: flex-end; }
/* o campozinho do CODE na linha do nome (Paulo 01/09, 2 ditadas: "um
   campozinho menor... ele ocupa so tres letras"): 64px justos para as
   3 letras, travado; especificidade dobrada p/ vencer o margin-top do
   .pp-fix generico */
.pp-card .pp-id .field.pp-code {
  width: 64px;
  flex: none;
  text-align: center;
  font-weight: 600;
  margin-top: 0;
  padding-left: 8px;
  padding-right: 8px;
}
/* o nome NUNCA quebra linha na fileira do Profile (mesma ditada) */
.pp-name { white-space: nowrap; }
.pp-grow { flex: 1; }
.pp-id .btn { align-self: center; }
.pp-avatar {
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  display: grid; place-items: center;
  font-size: var(--body-size); font-weight: 600;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  flex: none;
}
.pp-name { font-size: var(--t3-size); font-weight: 600; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.pp-sub { font-size: var(--body-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); margin-top: 2px; }

/* campos e botoes na LARGURA NATURAL — nada esticado de ponta a ponta */
.pp-card .field { max-width: 340px; }
.pp-card .btn { align-self: flex-start; }
.pp-card .field-label { margin-top: 4px; }

/* campo travado do painel = mesmo dourado de campo fixo do sistema —
   e ELE que diz "sem acesso", nunca um subtitulo explicando (regra
   31/08); reforcado contra o fundo do .field generico. OCUPA A
   FILEIRA INTEIRA do cartao, como as fileiras de campos dos cartoes
   vizinhos (Paulo 31/08: a caixa do Stock location alinhada como a do
   Password — campo solto parado no meio do cartao e defeito) */
.pp-fix, .pp-card .field.pp-fix { background: var(--gold-soft); }
/* caixas lado a lado = campos ALINHADOS entre elas (regra 31/08): o
   gap do cartao somava 4px no campo solto e ele descia em relacao aos
   campos da fileira do vizinho — compensado aqui */
.pp-card .field.pp-fix { max-width: none; width: 100%; margin-top: -4px; }
#section-profile .pp-card #pp-stock { max-width: none; width: 100%; }

.pp-chromepick { display: flex; align-items: center; gap: 10px; }
/* o My default na base, na mesma linha dos selects e do Change photo (04/10/2026) */
.pp-page .pp-card .pp-chromepick .btn { align-self: flex-end; }
.pp-chromepick input[type="color"] { width: 46px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; }

/* Save do painel (a unica primaria; fechar sem salvar descarta) */
.pp-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

/* PAGINA INICIAL de login ALINHADA COM A DO ERP (print do ERP antigo,
   31/08): faixa dourada com os logos a direita, cartao branco com o
   titulo W18k Office, labels caixa alta, botao dourado inteiro,
   aviso curto e o rodape W18k Office com a regua em cima */
.login-band {
  background: var(--chrome, #D3BA8A);
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  padding: 0 42px;
  flex: none;
}
.login-band img { display: block; height: 26px; width: auto; }
.login-band .login-band-miami { height: 40px; }

.login-mid { flex: 1; display: grid; place-items: center; padding: 48px 16px; }

.login-card { text-align: left; width: 480px; max-width: calc(100vw - 32px); padding: 30px 40px 26px; }
.login-title { font-size: var(--t2-size); font-family: var(--font-display); font-weight: 600; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.login-sub { font-size: var(--body-size); font-weight: 600; color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); margin: 2px 0 16px; }
.login-card .field-label {
  display: block;
  margin: 12px 0 6px;
  font-size: var(--t4-size);
  font-weight: 600;
  letter-spacing: 0;
}
.login-card .field { width: 100%; }
.login-card .btn { width: 100%; margin-top: 18px; }
.login-card .login-trycode { margin: 6px 0 8px; }
.login-card .login-back { margin-top: 8px; }
/* quem e o aparelho confiado, na entrada depois do Sign out (lei 11.200-A) */
.login-card .login-who { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 2px; font-size: var(--body-size); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
.login-card .login-who b { font-weight: 600; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.login-pwwrap { position: relative; }
.login-pwwrap .field { padding-right: 40px; }
.login-card .login-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.login-card .login-eye.is-on { color: var(--gold); -webkit-text-fill-color: var(--gold); }

.login-foot {
  border-top: 1px solid var(--line);
  padding: 18px;
  text-align: center;
  font-size: var(--body-size);
  font-weight: 600;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}

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

.chrome-logos { display: flex; align-items: center; gap: 36px; margin-left: auto; }

/* Logos oficiais em PNG com fundo recortado. Alturas diferentes de proposito:
   o W18k e uma linha, o 18k Miami e um bloco de tres niveis — igualar a altura
   deixa o Miami visualmente maior. Estes valores equilibram opticamente. */
.chrome-logo { width: auto; display: block; }
.chrome-logo-w18k  { height: 24px; }
.chrome-logo-miami { height: 34px; }
.chrome-logo:not([src]) { display: none; }

.chrome-date {
  font-size: var(--sub-size);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.20);
  white-space: nowrap;
  /* Decisao Paulo · 07/2026 (w18k-dashboard-pass §1b): a pilula da data
     sai do topo; a data mora no cabecalho do Dashboard. O bloco do
     chrome no index.html continua identico — so esta linha esconde.
     Para reverter, apagar o display abaixo. */
  display: none;
}

/* ── nav ─────────────────────────────────────────────────────────── */

/* UMA LINHA SO (Paulo 16/09/2026: "espreme todas as abas em uma linha
   so, nao quero duas linhas"): o trilho NUNCA quebra. Cada item cede e
   cresce (flex 1 1 auto) para o conjunto ocupar exatamente a largura do
   container — em tela larga sobra respiro, em tela estreita as folgas
   encolhem ate 6px de cada lado. Abaixo de 860px vale a regra de
   rolagem horizontal do fim desta folha. */
.nav { display: flex; flex-wrap: nowrap; gap: 0; flex: 1 1 auto; min-width: 0; }
/* abaixo de ~1180px os 18 rotulos nao cabem nem com a folga minima: o
   trilho ROLA dentro dele mesmo (UX Lab 5 — a pagina nunca ganha
   rolagem horizontal), e continua uma linha so */
@media (max-width: 1180px) { .nav { overflow-x: auto; } }

.nav-link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  padding: 12px 6px;
  font-size: var(--body-size);
  font-weight: 600;
  color: var(--chrome-ink, #FFFFFF);
  -webkit-text-fill-color: var(--chrome-ink, #FFFFFF);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.nav-link:hover { background: rgba(255,255,255,.12); }
/* a aba sendo arrastada (04/10/2026: cada pessoa poe as abas na ordem dela) */
.nav-link.is-dragging { opacity: .4; }

.nav-link.is-active {
  border-bottom-color: currentColor;
  background: rgba(255,255,255,.16);
}

/* ── O TOPO DE PAPEL (Paulo 07/10/2026) ───────────────────────────
   "Fazer os menus top dos user nas cores deles so que o que fizemos nos
   cards do instagram." O topo veste o TOM CLARO da cor do usuario (a conta
   mora em shared/chrome-paper.js e chega aqui em --chrome) com o papel
   aprovado nos cards em 06/10/2026: luz suave do canto de cima a esquerda
   e grao fino sobre a mesma cor — sem moldura, sem degrade entre cores. Na
   claridade dos cards: ele viu tambem um degrau mais escuro e ficou com
   este ("vamos com o mais claro mesmo"). A
   fonte e a tinta do sistema (--chrome-ink) e os logos vestem a tinta
   ("logo deve ser da cor da fonte sempre"). A cor CHEIA do usuario
   (--chrome-user) fica so na identidade: o avatar e o fio da aba ativa.
   O bloco do chrome no index.html continua identico; isto e so cor. As
   peles do UX Lab ([data-lab]) nao vestem papel. */
html[data-chrome="paper"]:not([data-lab]) .chrome {
  background-color: var(--chrome);
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 22% 12%, rgba(255,255,255,.60), rgba(255,255,255,0) 62%),
    linear-gradient(155deg, rgba(28,27,24,0) 50%, rgba(28,27,24,.09) 100%);
  background-blend-mode: multiply, normal, normal;
}
/* a identidade: o avatar na cor cheia do usuario, com a fonte que a cor pede */
html[data-chrome="paper"]:not([data-lab]) .chrome-avatar {
  background: var(--chrome-user);
  color: var(--chrome-user-ink);
  -webkit-text-fill-color: var(--chrome-user-ink);
}
/* as pilulas e os redondos: sobre papel claro o contorno e a tinta, nao o branco */
html[data-chrome="paper"]:not([data-lab]) .chrome-logout,
html[data-chrome="paper"]:not([data-lab]) .chrome-profile,
html[data-chrome="paper"]:not([data-lab]) .chrome-hp {
  border-color: rgba(28,27,24,.26);
  background: rgba(255,255,255,.42);
}
html[data-chrome="paper"]:not([data-lab]) .chrome-logout:hover,
html[data-chrome="paper"]:not([data-lab]) .chrome-profile:hover,
html[data-chrome="paper"]:not([data-lab]) .chrome-hp:hover { background: rgba(255,255,255,.72); }
html[data-chrome="paper"]:not([data-lab]) .nav-link:hover { background: rgba(255,255,255,.36); }
html[data-chrome="paper"]:not([data-lab]) .nav-link.is-active {
  border-bottom-color: var(--chrome-user);
  background: rgba(255,255,255,.52);
}
/* os logos oficiais na cor da fonte: o arquivo NAO muda (assets/LEIA.md) —
   a arte branca sai de cena e o proprio PNG recorta a tinta */
html[data-chrome="paper"]:not([data-lab]) .chrome-logo[src] {
  object-fit: none;
  object-position: -99999px 0;
  background-color: var(--chrome-ink);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
html[data-chrome="paper"]:not([data-lab]) .chrome-logo-w18k[src] {
  -webkit-mask-image: url('/assets/logo-w18k.png');
  mask-image: url('/assets/logo-w18k.png');
}
html[data-chrome="paper"]:not([data-lab]) .chrome-logo-miami[src] {
  -webkit-mask-image: url('/assets/logo-miami.png');
  mask-image: url('/assets/logo-miami.png');
}

/* ── container e cabecalho de pagina ─────────────────────────────── */

.container {
  max-width: var(--container);
  margin: 0 auto;
  /* bloco do titulo a 20px da barra superior e 24px da borda do
     conteudo (Paulo 07/09/2026) — o container e quem da a medida */
  padding: var(--title-offset-y) var(--title-offset-x) 24px;
}

.boot { color: var(--ink-soft); font-size: var(--body-size); }

/* ══ CABECALHO DE PAGINA — COMPONENTE UNICO (Paulo 07/09/2026) ═══════
   Toda tela usa este bloco, e nada fica acima dele alem da barra
   superior. Medidas FIXAS para o titulo nao se mover ao trocar de
   tela: comeca 20px abaixo do chrome e 24px da borda (padding do
   container), linha do titulo de 32px, sublinha de 18px SEMPRE abaixo
   (breadcrumb, data, meta — mesmo quando e so o breadcrumb). Avatar,
   preco, chips e botoes de acao ficam a DIREITA e nunca empurram o
   titulo. Contrato de marcacao:
     .page-head
       .title-block
         h1.page-title.module   → T1 26/600 Display (Dashboard, Products…)
         h1.page-title.page     → T2 20/600 Display (detalhe, New, Edit)
           (chip de status/tipo entra DENTRO do h1, na linha de 32px)
         .page-crumb  → NA LINHA DO TITULO, a direita dele (verde)
         .subtitle    → .page-meta (ink-2), S 12/400
       .page-actions            → Back, Save, avatar… na linha do titulo
   Revoga: titulo 30/800 e
   interna 22/800 (31/08 e 01/09), slots y=127/189 (02/09). NAO revoga o
   crumb na linha do titulo: em 07/09 eu o mandei para a sublinha por
   conta propria e o Paulo desfez em 08/09 ("os breadcrumbs devem vir
   depois dos titulos e nao abaixo, eu tinha ditado isso como uma
   regra") — a lei de 14/08 e 02/09 continua valendo. Modulo NAO
   redeclara nada daqui — .x-titlerow/.x-hcount proprios morreram. */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  min-height: calc(var(--title-block-height) + var(--sub-block-height));
}
/* O CRUMB NA LINHA DO TITULO (Paulo 14/08, 02/09 e 08/09: "os
   breadcrumbs devem vir depois dos titulos e nao abaixo"). Grade de
   duas linhas: titulo + crumb em cima, sublinha embaixo. A altura do
   bloco nao muda — o .page-head tem min-height de titulo+sublinha,
   entao os slots do ritmo do topo ficam onde estao. */
.title-block {
  display: grid;
  row-gap: 0;
  column-gap: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  flex: 1 1 auto;
  min-width: 0;
}
.title-block > .page-title { grid-area: 1 / 1; }
.title-block > .page-crumb {
  grid-area: 1 / 2;
  margin-left: 14px;
  height: var(--title-block-height);
  line-height: var(--title-block-height);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title-block > .subtitle { grid-area: 2 / 1 / 2 / -1; }
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t1-size);
  font-weight: 600;
  letter-spacing: var(--display-tracking);
  height: var(--title-block-height);
  line-height: var(--title-block-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.page-title.page { font-size: var(--t2-size); }
/* CHIP dentro do titulo: centrado na linha de 32px, com o corpo do
   chip — nunca o do titulo. O alvo e a classe .title-chip (a
   convencao do sistema), nunca "todo span": o titulo destas paginas
   E feito de spans (o SKU e o nome do produto, o nome do cliente, o
   titulo do certificado) e a regra antiga jogava todos eles para 13px
   dentro de um h1 de 20 — metade do titulo de modulo, que foi o que o
   Paulo viu em 08/09. */
.page-title > .title-chip, .page-title > a, .page-title > small {
  vertical-align: middle;
  margin-left: 8px;
  font-family: var(--font-text);
  font-size: var(--body-size);
  letter-spacing: 0;
  line-height: normal;
}
/* o span de TEXTO do titulo e o titulo: mesmo corpo, mesma familia */
.page-title > span:not(.title-chip) { vertical-align: baseline; }
/* REDE DE SEGURANCA (Paulo 15/09/2026: "o botao onde esta Received esta
   deformado; verificar outros botoes pelo site afora"): todo SELO de
   status dentro do titulo (classe *-tag / *pill / *badge / *chip) que
   esqueceu o .title-chip ainda mede o corpo do selo — a linha de 32 px
   do h1 nao estica a pilula. So selos; o texto do titulo nao entra. */
.page-title > [class*="-tag"]:not(.title-chip), .page-title > [class*="pill"]:not(.title-chip),
.page-title > [class*="badge"]:not(.title-chip), .page-title > [class*="chip"]:not(.title-chip) {
  vertical-align: middle;
  line-height: normal;
  font-family: var(--font-text);
}
/* o CODIGO no titulo (SKU, certificado) acompanha o titulo e mantem
   o alinhamento de digito (a familia unica e lei desde 08/09) */
.page-title > .code {
  font-family: var(--font-num, var(--font-text));
  font-variant-numeric: tabular-nums;
  font-size: inherit;
  /* peso do TITULO, nao o do codigo de tabela: em "Invoice IV6091"
     o numero e titulo, e o SKU do produto e a mesma coisa (Paulo
     08/09: "quando mostra o produto com seus skus quero com o mesmo
     tamanho de invoices e receipts") */
  font-weight: inherit;
  margin-left: 0;
}
.subtitle {
  display: flex;
  align-items: center;
  height: var(--sub-block-height);
  line-height: var(--sub-block-height);
  font-family: var(--font-text);
  font-size: var(--sub-size);
  font-weight: 400;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}
.subtitle > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.subtitle > :empty { display: none; }
.subtitle > :not([hidden]):not(:empty) ~ :not([hidden]):not(:empty)::before {
  content: '\00B7';
  margin: 0 8px;
  color: var(--ink-3);
  -webkit-text-fill-color: var(--ink-3);
}
.page-meta { color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
/* breadcrumb em VERDE ESCURO (Paulo 14/08/2026), sempre na SUBLINHA */
.page-crumb { font-size: var(--sub-size); color: var(--green); -webkit-text-fill-color: var(--green); }
/* breadcrumbs sao hyperlinks de volta em todas as operacoes (Paulo 08/2026) */
.page-crumb a { color: inherit; -webkit-text-fill-color: inherit; text-decoration: none; cursor: pointer; }
.page-crumb a:hover { text-decoration: underline; }
.page-crumb span { color: inherit; -webkit-text-fill-color: inherit; }

/* ═══ BACK E SAVE SEMPRE A DIREITA (Paulo 31/08/2026, cobrado de novo
   em 08/09: "ai esta a esquerda embaixo") ══════════════════════════
   O par de cima herdava a direita do space-between do cabecalho; o de
   BAIXO ficava solto num container em bloco e encostava na esquerda.
   Toda fileira de acao — de topo ou de rodape, do modulo que for —
   alinha a direita por esta regra; modulo nao resolve isso sozinho. */
:is(.page-actions, .cu-actions-foot, .ins-footrow, .shw-footrow,
  .pp-actions-foot, .fi-fx-foot, .pc-actions-foot) {
  display: flex;
  justify-content: flex-end;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  /* centrada na linha do titulo (o botao de 40px sangra 4px para
     cada lado da linha de 32) e nunca empurra o bloco do titulo */
  height: var(--title-block-height);
}

/* REGRA DO SISTEMA (Paulo 30/08/2026): toda pagina de DENTRO — detalhe,
   edicao, criacao — tem "< Back" no ALTO A DIREITA, alem do Back da
   fileira de baixo. Em cima e a saida rapida (o usuario nao precisa
   rolar ate o fim); embaixo e o par do botao que grava. Sempre o mesmo
   rotulo e o mesmo lugar: primeiro item do .page-actions. */
.page-back { white-space: nowrap; }

/* ══ ESCALA — classes de nivel (w18k-typography.css) ════════════════
   T3 caixa/secao · T4 rotulo caixa alta · V valor em destaque · C codigo.
   T1/T2 vivem no .page-title; B e o body; S e a .subtitle. */
.section-title { font-family: var(--font-text); font-weight: 600; font-size: var(--t3-size); }
.label {
  font-family: var(--font-text); font-weight: 600; font-size: var(--t4-size);
  letter-spacing: 0;
}
.value {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--value-size); letter-spacing: var(--display-tracking);
  font-variant-numeric: tabular-nums;
}
.code, .sku, .order-id, .certificate {
  font-family: var(--font-mono); font-size: var(--code-size); font-weight: 400;
}

/* ── barra de pesquisa abaixo do cabecalho ───────────────────────────
   Padrao do modulo Products (.pr-search), promovido a global por valer
   tambem para Dashboard e Customers. */

.search-bar {
  display: flex;
  align-items: center;
  background: var(--search-bg);            /* branca sobre a pagina dourada */
  border: 2px solid rgba(184, 150, 74, .55);
  border-radius: var(--radius);
  padding: 0 14px;
  margin-bottom: 12px;
  /* mesma altura do botao de acao (--ctl-h): e o que faz o "+ New" ao
     lado dela alinhar sozinho, sem truque (Paulo 30/08/2026) */
  height: var(--ctl-h);
}

/* REGRA DO SISTEMA (Paulo · 08/2026): TODA barra de busca, em TODO
   modulo, usa fundo --gold-faint com borda dourada .32 — sem excecao.
   Novas telas: usar .search-bar; classe propria de modulo (.pr-search,
   .sa-search, .st-search, lookups de fluxo) espelha estas cores. */

/* linha da busca: a barra divide a linha com o botao de acao do modulo,
   entao ela nunca vai ate o final */
.search-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}
.search-row .search-bar { flex: 1; margin-bottom: 0; }
/* A LINHA DE BUSCA NUNCA QUEBRA (Paulo 11/09/2026, lei para todo o
   sistema: "quando tiver que botar um botao onde tiver uma barra, esses
   botoes fazem a barra encolher — nao quebra a linha nunca"). A busca e
   o unico elemento elastico da linha; botoes, labels-botao e links
   ficam do tamanho do texto e nao vao para a linha de baixo. */
.search-row { flex-wrap: nowrap; }
.search-row .search-bar { flex: 1 1 160px; min-width: 160px; }
.search-row > button, .search-row > label, .search-row > a, .search-row > .btn { flex: none; white-space: nowrap; }
/* o `height: auto` que existia aqui era o truque para o botao esticar ate
   a altura da busca. Com a altura unica de --ctl-h (30/08/2026) o botao ja
   nasce do tamanho certo, e o truque virou defeito: em linha que nao
   estica (o cabecalho das abas do Settings) o botao murchava para 19px
   — foi o "+ New vendor" fininho que o Paulo viu. */

/* lupa a DIREITA da barra: botao que abre a pagina de detalhes do
   primeiro resultado (Paulo 08/2026). Fundo PRETO para ficar visivel
   como botao (Paulo 08/2026); icone vira branco por CSS. */
.search-go {
  appearance: none;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-left: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
}
.search-go:hover { background: #000000; border-color: #000000; }
.search-go svg { stroke: #FFFFFF; }

.search-bar input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  /* a altura vem da barra (--ctl-h); o campo so preenche */
  height: 100%;
  padding: 0;
  font: inherit;
  font-size: var(--body-size);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

/* ── botoes ──────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  border: 1px solid var(--line);
  font: inherit;
  font-size: var(--body-size);
  font-weight: 600;
  height: var(--ctl-h);
  padding: 0 16px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}


/* DEFEITO CORRIGIDO (29/08/2026): botao PREENCHIDO clareava no hover.
   .btn:hover (classe + pseudo-classe) vencia .btn-gold/.btn-primary (uma
   classe so) e pintava o fundo de --surface-alt mantendo a fonte BRANCA
   da variante — o rotulo sumia, branco sobre branco, em todo botao cheio
   do sistema (Save changes, Create product, Next da captura...). O
   preenchido agora escurece um tom, tecnica que ja existia em
   .rv-actions .btn:hover. Nenhuma cor nova entra. O navy ja tinha o
   proprio hover mais abaixo; faltava o dourado. */
.btn-gold:hover { background: var(--gold-action); filter: brightness(.94); }

.btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}

.btn-primary:hover { background: #0C1F58; }
/* PRETO DA CASA (Paulo 15/09/2026, na fileira do documento: "botao email
   pode ser azul, print preto — coloca isso nas regras"): a variante
   global .btn-ink (o nome ja estava reservado no bloco-lei 11.85; o
   Sales tinha a sua sa-btn-ink) — fundo --ink, fonte branca 600 */
.btn-ink {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  font-weight: 600;
}
.btn-ink:hover { background: var(--ink); filter: brightness(1.25); }

/* REGRA (Paulo 08/2026): botao de acao preenchido tem fonte BRANCA em NEGRITO */
.btn-gold {
  background: var(--gold-action);
  border-color: var(--gold-action);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  font-weight: 600;
}

/* ── painel ──────────────────────────────────────────────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .05);
  overflow: hidden;
}

.panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t3-size);
  font-weight: 600;
}

.panel-body { padding: 16px; }

/* ── chips de filtro ─────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: #FFFFFF;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  font: inherit;
  font-size: var(--body-size);
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.chip.is-on {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold-deep);
  -webkit-text-fill-color: var(--gold-deep);
  font-weight: 600;
}

/* ── tabela ──────────────────────────────────────────────────────────
   PADRAO DO SISTEMA (Paulo · 08/2026): toda tabela — Dashboard,
   Customers, Products, Sales, Settings — usa estas medidas. Modulos
   com classe propria (.cu-table, .sa-table, .db-table) espelham os
   MESMOS numeros; mudou aqui, muda la.
     th: 11px · 700 · uppercase · .08em · ink-3 · pad 10x12 · fundo branco
     td: 13.5px · pad 12 · linha line-soft · hover gold-faint          */

.table { width: 100%; border-collapse: collapse; font-size: var(--body-size); }

.table th {
  text-align: left;
  font-size: var(--t4-size);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 12px;
  border-bottom: 0; /* a regua e a sombra do bloco global (12/09) */
  background: var(--surface);
  white-space: nowrap;
}

.table td {
  font-size: var(--body-size);
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--gold-faint); }

.table tfoot td {
  background: var(--line-soft);
  font-weight: 600;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

/* codigo em fonte de maquina, no MESMO tamanho do texto ao redor (Paulo
   30/08/2026: "as letras estao com tamanhos diferentes? poe as fontes
   iguais dos outros menus") — o tamanho fixo de 12.5 fazia o codigo
   destoar dentro das tabelas de 13.5. Sales ja fazia certo (mono 13.5)
   e virou a regra: a familia muda, o corpo NUNCA. */
/* .mono = SO a familia (herda o corpo): dinheiro e quantidade ainda
   usam .mono em varios modulos e ficam no corpo 13. Codigo de verdade
   (SKU, numero de documento, certificado) e o nivel C: classe .code
   (mono 11) — migracao das celulas de codigo PENDENTE (07/09). */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { text-align: right; font-variant-numeric: tabular-nums; }
.warn { color: var(--red); -webkit-text-fill-color: var(--red); }
.money-in { color: var(--green); -webkit-text-fill-color: var(--green); font-weight: 600; }

/* ── estados ─────────────────────────────────────────────────────── */

.state {
  padding: 40px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--body-size);
}

/* ── secoes lazy ─────────────────────────────────────────────────── */

.section { display: none; }
.section.is-active { display: block; }
/* A SECAO QUE AINDA INICIALIZA NAO SE MOSTRA (Paulo 02/10/2026: "ele vai
   para outra pagina, eu fico enxergando essa pagina por um segundo e ele
   volta para onde deveria ir"): o router liga a secao antes de o modulo
   carregar os dados (a secao precisa estar no DOM para o modulo medir), e
   nesse segundo a sub-view padrao — a LISTA — aparecia antes da ficha pedida.
   visibility (nao display) esconde sem tirar a medida; a classe sai quando
   o route() do modulo termina. */
.section.is-booting { visibility: hidden; }

/* ── conta de treinamento ────────────────────────────────────────── */
/* Etiqueta global (Paulo 15/08/2026): acompanha o nome da conta de
   treinamento em todo modulo onde ela aparece — lista de Customers, busca
   de empresa do Sales, cartao do cliente no documento. Ambar, que e a cor
   de ATENCAO: nao e erro (vermelho) nem dinheiro (verde); e um aviso de que
   nada ali e real. Documento dessa conta nao baixa estoque, nao entra em
   numero nenhum e e apagado no fim do dia — regra de servidor. */
.tag-training {
  display: inline-block;
  margin: -2px 0 -2px 8px; /* 12/09: a etiqueta nao estica a linha de 44px (5.12) */
  padding: 2px 8px;
  line-height: 19px;
  border-radius: var(--radius-pill);
  background: var(--amber-soft);
  color: var(--amber);
  -webkit-text-fill-color: var(--amber);
  font-size: var(--sub-size);
  font-weight: 600;
  letter-spacing: .08em;
  vertical-align: middle;
}

/* ── porta de entrada da loja (secao Store) ──────────────────────── */
/* titulo de grupo dentro do painel: Client store, Landing pages */
.so-grouptitle {
  font-size: var(--t3-size);
  font-weight: 600;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  margin-bottom: 12px;
}
.so-grouptitle:not(:first-child) {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
/* A loja vive fora do SPA; a secao lista as telas reais. Cartao no padrao
   dos demais: raio 12, borda que doura no hover. */
.so-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* fileira de caixas (lei 11.26) */
  gap: var(--card-gap);
}
@media (max-width: 900px) { .so-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .so-links { grid-template-columns: 1fr; } }

.so-link {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.so-link:hover { border-color: var(--gold); background: var(--gold-faint); }
.so-link b { display: block; font-size: var(--body-size); font-weight: 600; }
.so-link span {
  display: block;
  margin-top: 4px;
  font-size: var(--code-size);
  color: var(--ink-3);
  -webkit-text-fill-color: var(--ink-3);
  font-family: var(--font-mono);
}

@media (max-width: 860px) {
  .chrome-inner { flex-wrap: wrap; padding: 10px 16px; }
  .container { padding: 16px; }
  .nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .page-actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Formulario — primitivos compartilhados

   Usados por mais de um modulo (Products, Settings), entao vivem aqui na
   camada global, nao em CSS de modulo. Nomes neutros; modulo nenhum
   redefine estes.
   ══════════════════════════════════════════════════════════════════ */

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: var(--card-gap);
}

.form-card-title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t3-size);
  font-weight: 600;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 22px;
}
/* UMA LINHA SO (Paulo 08/09/2026, no card Identification): a grade
   fixa de 3 colunas quebrava o quarto campo para uma fileira nova.
   A variante acomoda quantos campos o cartao tiver, dividindo a
   largura por igual, e so quebra quando o campo ficaria menor que
   190px. Serve a qualquer cartao com poucos campos. */
.form-grid.one-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.form-wide { grid-column: 1 / -1; }
.form-half { grid-column: span 2; }
/* O CHECK NA LINHA DA INFORMACAO (lei 8.6, Paulo 11/09/2026): a celula
   do flag alinha pela base da fileira e o check fecha na altura do
   controle — na regua dos campos vizinhos, nunca numa fileira so dele */
/* alinha pelo TOPO + a altura do rotulo (15.2 + 6): pela base a celula
   desceria junto com um vizinho que tem hint embaixo (Discount) */
.form-grid .form-flagcell { align-self: start; margin-top: 21.2px; }
.form-grid .form-flagcell .flag { min-width: 0; height: var(--ctl-h); padding-top: 0; padding-bottom: 0; box-sizing: border-box; }

@media (max-width: 1100px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-half { grid-column: span 2; }
}
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-half, .form-wide { grid-column: span 1; }
}

.field-label {
  display: block;
  margin: 0 0 6px;
  font-size: var(--sub-size);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
}

/* REGRA DO SISTEMA: todo campo de preenchimento e pesquisa e dourado leve,
   como as barras de busca (.search-bar). Campo readonly fica branco. */
/* ═══ REGRA (Paulo 01/09/2026, por voz: "os campos editaveis ou que
   se pode digitar no sistema devem ser SEMPRE fundo BRANCO e com
   bordas pretas igual nos filtros — fazer disso uma regra"): TODO
   campo digitavel = branco + borda reforcada 2px var(--ink-3), o
   mesmo desenho dos selects de filtro. READONLY/disabled recua para a
   borda fina (--line) — a moldura forte passa a DIZER "aqui se
   digita"; campo fixo de documento segue gold-soft (regra propria). */
.field {
  width: 100%;
  appearance: none;
  border: 2px solid var(--ink-3);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  font: inherit;
  font-size: var(--body-size);
  /* ALTURA UNICA do campo de formulario (Paulo 01/09/2026: "as barras
     estao todas com alturas diferentes" + "as caixas precisam ser
     mais finas — faz disso um padrao do sistema"): input e select
     cravados na REGUA DO SISTEMA --ctl-h (40px, a mesma dos botoes e
     filtros); so textarea cresce */
  height: var(--ctl-h);
  padding: 0 14px;
  outline: none;
}
textarea.field {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
}
/* nao-editavel = DOURADO LEVE (Paulo 03/09 cobrando a regra: "lembra
   qual cor usamos quando o campo nao e editavel?" — gold-soft, a do
   code travado no My profile), com a borda recuada fina */
.field[readonly], .field:disabled {
  background: var(--gold-soft);
  border: 1px solid var(--line);
}

/* ═══ REGRA (Paulo 16/08/2026): TODA caixa de SELECAO do sistema e
   BRANCA com a BORDA REFORCADA, para facil visualizacao. GENERALIZADA
   em 01/09/2026 ("em Products os filtros tem molduras grossas — esse
   layout deve ser o padrao do sistema; aplicar em Customers e em
   todos os outros campos de filtro"): a moldura 2px var(--ink-3) vale
   para TODO select de filtro de lista, em qualquer modulo; modulo
   novo que criar select de filtro entra aqui. ═══ */
select.field,
.pr-fsel,
.sv-fsel,
.cu-fsel,
.sa-fsel,
.in-fsel {
  background-color: #FFFFFF;
  border: 2px solid var(--ink-3);
}

/* inputs de filtro TAMBEM (Paulo 01/09: "os campos que se pode
   digitar... igual nos filtros") — as versoes com id vencem a regua
   1px local dos modulos */
#section-products select.pr-fsel, #section-products input.pr-fsel,
#section-services select.sv-fsel, #section-services input.sv-fsel,
#section-customers select.cu-fsel, #section-customers input.cu-fsel,
#section-sales select.sa-fsel, #section-sales input.sa-fsel,
#section-sales input.sa-fnum, #section-sales input.sa-finp,
#section-inventory select.in-fsel, #section-inventory input.in-fsel,
#section-inventory input.in-finp {
  background-color: #FFFFFF;
  border: 2px solid var(--ink-3);
}

/* o estado "filtro aplicado" mantem a borda dourada, fundo segue branco */
#section-products select.pr-fsel.is-set,
#section-services select.sv-fsel.is-set,
#section-customers select.cu-fsel.is-set,
#section-sales select.sa-fsel.is-set,
#section-inventory select.in-fsel.is-set {
  background-color: #FFFFFF;
  border-color: var(--gold);
}
.field:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

select.field {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235A5A5A' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.field-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* CAMPO TRAVADO = FUNDO DOURADO LEVE (Paulo 03/09 cobrando a regra:
   "lembra qual cor usamos quando queremos mostrar que o campo nao e
   editavel?" — gold-soft, a mesma do code travado no My profile e do
   campo fixo de documento; o cinza surface-alt era desvio) */
.field-locked {
  background: var(--gold-soft);
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
  cursor: default;
}
.field-locked:focus { border-color: var(--line); box-shadow: none; }

.field-unit { position: relative; }
.field-unit .field {
  padding-right: 52px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.field-unit-tag {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--code-size);
  font-weight: 600;
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
  pointer-events: none;
}

.flags { display: flex; flex-wrap: wrap; gap: 10px; }
.flag {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* NA REGUA DO SISTEMA (Paulo 15/09/2026, na ficha do Services: o
     Rework media 43 px ao lado de campos de 32 — "botao deformado"):
     a caixa da flag tem a MESMA altura de campo e botao (--ctl-h), em
     todo formulario; so o recuo lateral fica */
  box-sizing: border-box;
  height: var(--ctl-h);
  padding: 0 18px 0 14px;
  background: var(--surface);
  font-size: var(--body-size);
  font-weight: 600;
  cursor: pointer;
}
.flag input { width: 17px; height: 17px; accent-color: var(--gold-deep); margin: 0; cursor: pointer; }
/* FLAG DERIVADA = TRAVADA, no gold-soft do campo travado (lei 04/09):
   o valor vem de outro cadastro e NAO se digita aqui. */
.flag.flag-locked { background: var(--gold-soft); border-color: var(--line); cursor: default; }
.flag.flag-locked input { cursor: default; }
.flag:has(input:checked) {
  background: var(--gold-soft);
  border-color: var(--gold-deep);
  color: var(--gold-deep);
  -webkit-text-fill-color: var(--gold-deep);
}

.field-error {
  display: none;
  margin-top: 8px;
  font-size: var(--body-size);
  font-weight: 600;
  color: var(--red);
  -webkit-text-fill-color: var(--red);
}
.field-error.is-on { display: block; }
/* o campo em erro, em toda tela (08/10/2026, shared/save.js): a borda da casa fica vermelha */
.field.is-invalid, input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--red); }

.field-hint {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--code-size);
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
}

/* hint de PROSA (frase inteira, nao formula nem codigo) sai na fonte do
   texto — a mono e para "cost × 1.43" e "next SKU", nunca para
   explicacao escrita (print do Paulo 30/08: o aviso do grupo da tag
   saia em fonte de maquina) */
.field-hint-text { font-family: inherit; font-variant-numeric: normal; }

/* rodape de FORMULARIO no FLUXO, a direita — a barra fixa flutuante
   morreu (Paulo 01/09/2026: "nao quero essa barra flutuante embaixo
   em NADA no sistema — deixa como Back/Save como em todo o resto");
   sticky/fixed de acao e defeito (lei do sticky zero, 31/08) */
.form-actions {
  margin-top: 18px;
}
.form-actions-inner {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════
   BLOCO DE RELATORIO (.rv-*) — COMPONENTE GLOBAL

   O sistema tem aba "Reports" embaixo de varios modulos (Finances,
   Procurement, ...) alem do modulo Reports proprio, e todas mostram a
   MESMA coisa. Por ser compartilhado por mais de um modulo, mora aqui
   e nao no CSS de um modulo — regra do contrato (Paulo 14/08/2026).

   Marcacao: ui/shared/report-view.js.
   ══════════════════════════════════════════════════════════════════ */

/* baloes de selecao a esquerda e acoes a direita, MESMA linha
   (Paulo 14/08/2026). Nome .rv-head — .rv-bar NAO pode ser reusado,
   ja e a barra do grafico. */
.rv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 14px;
  margin-bottom: 14px;
}

/* .rv-actions (Print report / Download PDF / Email em verde) MORREU em
   13/09/2026: eram botoes inertes (11.35) e cor fora do botao da casa;
   Print e Download CSV agora vivem no resultado (.rv-ractions, .btn). */

.rv-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* FILTROS FORA DO CARTAO, NUMA LINHA (13/09/2026; leis 6.4/6.7): a
   fileira branca com padding morreu — datas com FROM/TO fixos dentro
   (6.3) e o escopo, campos do mesmo tamanho (12/09), sem botao (quem
   roda e o cartao, 11.97) */
.rv-filters {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 14px;
}
/* Petra 23/09/2026 (queixas 8 e 9): a fileira ganhou Scope com titulo,
   Channel, Product type, Customer e o Clear. TODAS as caixas medem o mesmo
   que as datas (11.87 "campos do mesmo tamanho") e CEDEM antes de estourar
   (flex 0 1 200 + min-width 0; seis caixas + Clear cabem em 1560 nos 200 e
   em 1280 a fileira NAO quebra — a .rv-filters e nowrap e as seis caixas
   cedem por igual: MEDIDO em 23/09/2026, 182px cada, uma linha so; o
   min-width 0 e o que deixa a caixa ceder abaixo do piso da 11.242). O seletor
   `#app-root .rv-filters > .ft-col.rv-fcol` (1,3,0) vence o
   `> .ft-col { flex: 1 1 0 }` do bloco da 11.242 (1,2,0) — sem isso a
   coluna esticava e as caixas ficavam de tamanhos diferentes. A regra
   antiga `.rv-filters .rv-scope` morreu: o Scope vive numa .rv-fcol. */
.rv-filters > .rv-dwrap, #app-root .rv-filters > .ft-col.rv-fcol { flex: 0 1 200px; max-width: 200px; min-width: 0; }
.rv-dwrap .field { width: 100%; }
.rv-fcol > .field { width: 100%; height: var(--ctl-h); }
.rv-filters .rv-clear { flex: none; }

.rv-cards {
  display: grid;
  /* O TITULO NUNCA QUEBRA (Paulo 12/09/2026: "os textos das caixas nao
     devem quebrar"): a coluna minima cabe o nome mais longo do cadastro
     ("Look vs Individual Sell-through") numa linha, e todas as caixas da
     fileira medem o mesmo */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* fileira de caixas (lei 11.26): mesmo vao nos dois eixos */
  gap: var(--card-gap);
  margin-bottom: var(--card-gap);
}

.rv-card { padding: 16px; }

.rv-card-t {
  white-space: nowrap;
  margin-bottom: 12px;
  font-size: var(--t3-size);
  font-weight: 600;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.rv-card-p {
  margin: 3px 0 12px;
  font-size: var(--sub-size);
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}

.rv-card-btn { width: 100%; }

/* RESULTADO (13/09/2026): nasce so depois do Run; sem moldura propria —
   os blocos (tiles, grafico, tabela) sao as caixas; o titulo do
   relatorio com o periodo fica FORA (11.82) e Print / Download CSV agem
   sobre o que esta na tela (11.33) */
.rv-result { margin-top: var(--card-gap); }
.rv-rhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.rv-rtitle { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.rv-rname { font-size: var(--t3-size); font-weight: 600; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.rv-rperiod { font-size: var(--sub-size); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
.rv-ractions { display: flex; gap: 10px; flex: none; }
.rv-note { margin: 0 0 10px; font-size: var(--body-size); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
.rv-tablecard { padding: 0; }
.rv-tablewrap { overflow-x: auto; }
.rv-tablecard .tbl-foot { margin: 10px 12px 12px; }
.rv-chart { margin-bottom: var(--card-gap); background: var(--surface); }
/* Print: so o resultado vai para o papel */
@media print {
  body.rv-print-mode .chrome, body.rv-print-mode .page-head, body.rv-print-mode .rv-head,
  body.rv-print-mode .rv-filters, body.rv-print-mode .rv-cards, body.rv-print-mode .rv-ractions,
  body.rv-print-mode nav, body.rv-print-mode .attn-panel { display: none !important; }
  body.rv-print-mode .rv-result { margin: 0; }
}

.rv-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-gap);
  margin-bottom: var(--card-gap);
}

.rv-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.rv-tile-k {
  font-size: var(--t4-size);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}

.rv-tile-v {
  margin-top: 4px;
  font-size: var(--value-size); font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.rv-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-height: 190px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
}

.rv-cbar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* barra do grafico. NOME PROPRIO (.rv-cbar) para nunca colidir com
   uma fileira .rv-bar — a colisao ja quebrou a tela uma vez. */
.rv-cbar {
  width: 60%;
  max-width: 90px;
  background: var(--gold);
  border-radius: 6px 6px 0 0;
}

.rv-cbar-v {
  font-size: var(--body-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.rv-cbar-k {
  font-weight: 600; /* 11.77: rotulo em 600 (12/09) */
  font-size: var(--sub-size);
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}

@media (max-width: 1100px) {
  .rv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════
   BREADCRUMB NA MESMA LINHA DO TITULO (Paulo 14/08/2026; reafirmado
   02/09/2026: "o breadcrumb nao pode ficar em outra posicao que nao
   seja ao lado direito [do nome]" — crumb ACIMA do titulo e defeito,
   era o caso do New customer; a cor e SEMPRE o verde escolhido, o
   --green de 14/08)

   Regra do sistema: o breadcrumb vive na linha do titulo, a direita
   do nome. Uma linha em vez de duas — o titulo sobe e sobra espaco
   para o conteudo. Referencia visual: Products ("New Product" +
   crumb ao lado).

   Vale para todo modulo sem tocar na marcacao: qualquer container que
   tenha .page-crumb como filho direto vira linha, e o crumb vai por
   ultimo. Crumb de classe propria (cu-crumb, sa-crumb...) GANHA a
   classe page-crumb junto — crumb fora do padrao e defeito ao
   converter.
   ══════════════════════════════════════════════════════════════════ */

*:has(> .page-crumb):not(.title-block) {
  display: flex;
  align-items: baseline;   /* crumb na mesma base do titulo */
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

/* (07/09) o crumb do relatorio vive na .subtitle do cabecalho global */

/* Titulo do modulo SEMPRE a esquerda e breadcrumb a direita, na mesma
   linha (Paulo 14/08/2026). Quando o titulo mora num bloco proprio
   (titlerow com contagem), esse bloco vai para a esquerda e o crumb
   continua empurrado para a direita pelo margin-left:auto. */
*:has(> .page-crumb):not(.title-block) > *:not(.page-crumb) { order: 0; }

/* ══════════════════════════════════════════════════════════════════
   NEEDS ATTENTION (.attn-*) — COMPONENTE GLOBAL

   A fila operacional aparece em Sales, Customers e Products, e estava
   com grafia e tamanho diferentes em cada um (Paulo 14/08/2026). Metrica
   canonica = a do Sales: titulo 15/700 preto sem caixa alta, cartao raio
   12 com numero 24/800. Por ser compartilhado, mora aqui.
   ══════════════════════════════════════════════════════════════════ */

/* respiro do painel, IGUAL nos quatro modulos (Paulo 15/08/2026: "as
   caixas needs attention nao estao uniformes"). Estava repetido em cada
   folha de modulo com valores diferentes; agora e daqui. */
/* MEDIDA NOVA (Paulo 16/08/2026, substitui a de 14/08): "cada um com um
   layout diferente, faça o layout deles uniforme e na mesma posição, com
   um layout que seja visível mas ocupe MENOS espaço, tipo Resale
   certificate missing : 143 — o número logo na frente".
   Cartao virou PASTILHA de uma linha so: rotulo, dois pontos e o numero
   logo em seguida. Nada de bloco de 220x73. Vale para Sales, Customers,
   Products, Services e modulo novo — a marcacao continua a mesma
   (.attn-n antes de .attn-l), a ordem visual sai do `order`. */
/* REGRA (Paulo 23/08/2026, endurecida 24/08: "faz igual a altura e
   largura deles, faz disso uma regra"): "Needs attention e os botoes na
   MESMA LINHA para economizar espaco; a altura de todos a mesma; fontes
   do mesmo tamanho; a largura ocupa a tela toda." A faixa continua com
   largura total, padding unico e pastilha de altura UNICA, com
   !important para NENHUM painel de modulo esticar por cima (o sa-panel
   do Sales vencia por especificidade). */
/* CABER SEMPRE (Paulo 03/09/2026, regra do sistema: "ajusta a largura
   do needs attention para caber e faz disso uma regra para todo o
   sistema na caixa do needs attention" — no print, a fileira rolava e
   cortava o ultimo cartao): a caixa ACOMODA todas as pastilhas —
   quando nao cabem numa linha, QUEBRAM para a linha de baixo; nada de
   scroll horizontal nem cartao cortado. REVOGA o "nunca quebra linha /
   overflow-x" de 24/08; a altura minima segue 60px e cresce por
   fileira inteira. */
/* ORDEM E PERMANENCIA (Paulo 02/09/2026, regra do sistema): em todo
   modulo com Needs attention a ordem e busca > Needs attention > ABAS
   — a faixa mora ACIMA do trilho, fora de qualquer aba, e "as abas
   estiverem aberta o needs attention ainda continua la". Vale para
   Sales, Customers, Products, Services, Certificates, Finances e
   Inventory (os dois ultimos ganharam faixa em 02/09). A faixa so
   some junto com busca e abas, dentro de um registro ou numa tela
   focada de acao. Cartao clicado leva para a aba onde a fila mora. */
.attn-panel {
  /* caber sempre (03/09): minimo de 60, cresce por fileira de
     pastilhas — height fixo era o que cortava/rolava */
  min-height: 60px !important;
  height: auto !important;
  padding: 12px 16px !important;
  width: 100% !important;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.attn-title {
  font-size: var(--t3-size);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.attn-grid {
  display: flex;
  /* quebra em vez de rolar (03/09) — 8px entre pastilhas nos dois
     eixos; o overflow-x de 24/08 morreu com a regra do caber */
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.attn-card {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 0;
  /* altura UNICA da pastilha (regra de 23/08) — desde 12/09/2026 e a
     MESMA dos botoes e campos (Paulo: "as pastilhas do Needs attention
     tambem na mesma altura dos botoes"): o token --ctl-h */
  height: var(--ctl-h);
  text-align: left;
  /* PASTILHA COM COR (Paulo 12/09/2026: "coloca cor nas pastilhas do
     Needs attention também", fechando a lei 11.85 — nada branco): o
     dourado leve da casa, moldura dourada; a HOT continua vermelha leve */
  /* Paulo 13/09/2026 ("o tom dos dourados no dashboard no fundo esta
     muito forte, diminuir um pouco so"): a pastilha em massa (My day
     tem 14 de uma vez) baixa meio tom — fundo --gold-mist, moldura no
     dourado leve. Botao secundario segue no --gold-soft. */
  background: var(--gold-mist);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius-pill);
  padding: 0 14px;
  font: inherit;
  cursor: pointer;
}

.attn-l {
  order: 1;
  margin: 0;
  font-size: var(--body-size);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}
.attn-l::after { content: ":"; }

.attn-n {
  order: 2;
  font-size: var(--body-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

/* ── SophIA — o WORDMARK (spec-sophia.md §9, Paulo 13/09/2026): Soph em
   dourado, IA em maiúsculo e preto, uma palavra, sem ícone. Tokens da
   casa; vale em Settings, Conversations, contact log e onde mais o nome
   aparecer. Para o cliente é texto puro "— Sophia". ── */
.sophia        { font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.sophia .s     { color: var(--gold); -webkit-text-fill-color: var(--gold); }
.sophia .ia    { color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* quebra por loja dentro da pastilha (spec-foto §7, 13/09/2026): depois
   do numero, em ink-2, mesma fonte — "No images: 8  Miami 3 · Boston 2" */
.attn-sub {
  order: 3;
  margin-left: 4px;
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}

/* cartao que pede acao: fundo de alerta e numero em vermelho */
.attn-card.hot { background: var(--red-soft); border-color: var(--red-light); }
.attn-card.hot .attn-n { color: var(--red); -webkit-text-fill-color: var(--red); }
.attn-card:hover { background: var(--gold-light); border-color: var(--gold); }
.attn-card.hot:hover { background: var(--red-light); }
.attn-card.hot:hover .attn-n, .attn-card.hot:hover .attn-l, .attn-card.hot:hover .attn-sub { color: #fff; -webkit-text-fill-color: #fff; }

/* ── Curva ABC — COMPONENTE GLOBAL (Paulo 16/08/2026) ────────────────
   Estava escrita duas vezes, com metrica diferente em cada modulo
   (.cu-ov-abcrow 28/110px, .pr-ov-abcrow 28/130px, titulo 700 x 800) —
   por isso os dois Overview pareciam telas de sistemas diferentes.
   Metrica unica, como ja foi feito com .attn-* no item 60:
     linha 14px de respiro, classe em pastilha dourada, contagem em
     ink-2, barra de 10px e participacao em preto tabular a direita.
   Mudou aqui, muda em Customers, Products e no modulo novo.        */

.ov-t {
  font-size: var(--t3-size);
  font-weight: 600;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  margin-bottom: 14px;
}

.abc-row {
  display: grid;
  grid-template-columns: 30px minmax(104px, auto) 1fr 62px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--body-size);
}
.abc-row:last-child { border-bottom: 0; padding-bottom: 4px; }

.abc-class {
  width: 30px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  color: var(--gold-deep);
  -webkit-text-fill-color: var(--gold-deep);
  font-size: var(--body-size);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.abc-count {
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.abc-bar {
  height: 10px;
  background: var(--line-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.abc-bar i {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: var(--radius-pill);
}

.abc-share {
  text-align: right;
  font-size: var(--body-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

/* Membros das classes A e B, dentro da curva (Paulo 16/08/2026:
   "mostrar os items de A e B no overview") — linha recuada sob a
   classe; quando a classe e grande, o domain agrupa por categoria. */
.abc-members {
  margin: 2px 0 6px 46px;
  border-left: 2px solid var(--gold-soft);
  padding-left: 16px;
}
.abc-m {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 52px;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--body-size);
}
.abc-m:last-of-type { border-bottom: 0; }
.abc-mname { font-weight: 600; min-width: 0; }
.abc-mname a { color: inherit; -webkit-text-fill-color: inherit; }
.abc-msub {
  display: block;
  font-weight: 400;
  font-size: var(--sub-size);
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.abc-mtotal { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.abc-mshare {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}
.abc-mnote {
  padding: 7px 0 2px;
  font-size: var(--sub-size);
  color: var(--ink-3);
  -webkit-text-fill-color: var(--ink-3);
}

/* ── REGRA (Paulo 16/08/2026): TODO Overview de modulo segue a anatomia
   do Overview do SALES — painel branco raio 16 COM RESPIRO (o .panel
   global nao tem padding; era por isso que Customers e Products ficavam
   com titulo e tabela colados na borda, "horrivel"), titulo .ov-t
   DENTRO do painel, tabela padrao dentro. Overview novo usa .ov-panel,
   sem excecao. ─────────────────────────────────────────────────────── */
.ov-panel {
  padding: 20px 22px 24px;
  margin-top: 14px;
  overflow: visible;
}
.ov-panel .ov-t { margin-bottom: 12px; }
.ov-panel > div[style*="overflow-x"] { margin: 0 -4px; }

/* ── IMPRESSAO: LETTER, NUNCA A4 (Paulo 16/08/2026) ──────────────────
   "o padrao americano de impressao e letter — faz isso para todos os
   documentos impressos no nosso sistema". Vale para TODA pagina do
   Office que va para o print do navegador (invoice, receipt, return,
   relatorios): a folha e Letter 8.5x11in. Documento novo nao redefine
   @page. */
@page { size: letter; margin: 0.5in; }

/* ═══ REGRAS DO UX LAB — aprovadas TODAS pelo Paulo em 19/08/2026 ═══
   As 9 propostas do lab/ux-lab.html viraram lei do sistema. Camada
   global aqui; o comportamento compartilhado vive em shared/ux-guards.js.
   Regra 9 (cores) nao gera CSS: e disciplina — nenhuma cor nova, cada
   cor mantem UM significado. */

/* Lab 5 — tabela grande: zebra leve + cabecalho preso. O papel de
   impressao (fi-doc-table) fica FORA: e documento. */
.table tbody tr:nth-child(even),
.cu-table tbody tr:nth-child(even),
.fi-table tbody tr:nth-child(even),
.in-table tbody tr:nth-child(even),
.db-table tbody tr:nth-child(even),
.sv-table tbody tr:nth-child(even),
.sa-panel > table tbody tr:nth-child(even) {
  background: var(--gold-faint);
}
/* ═══════════════════════════════════════════════════════════════════
   CABECALHO DE TABELA NUNCA ACOMPANHA A ROLAGEM (Paulo 31/08/2026:
   "o header da tabela esta flutuante... nao esta correto").

   Era a ultima excecao do "nada desce alem do topo" (28/08) e o Paulo
   a revogou ao ve-la flutuando de verdade na lista de Users. A regra 5
   do UX Lab fica so com a zebra e o CONTRASTE do cabecalho; depois o
   chrome tambem caiu (ver .chrome) — sticky ZERO no sistema. O
   mecanismo --thead-top/fixStickyHeads
   que compensava caixas com overflow morreu junto — sem sticky, nao ha
   o que compensar. */
.table thead th,
.cu-table thead th,
.fi-table thead th,
.in-table thead th,
.db-table thead th,
.sv-table thead th,
.sa-panel > table thead th,
.sa-rt-table thead th {   /* Returns por EPC (11/09): a tabela mora num wrapper que rola */
  background: var(--surface);
  /* O CABECALHO INTEIRO vem DAQUI (Paulo 31/08/2026, cobrado 2x: "a
     mesma altura da tabela Products... faca disso uma regra"):
     tipografia, tinta, medidas e regua num bloco so — modulo nenhum
     redeclara nada de th de lista (a folha do modulo vence por
     especificidade e muda a cara, foi o Customers). */
  font-size: var(--t4-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  text-align: left;
  padding: 10px 12px;
  /* DESTAQUE do cabecalho (Paulo 30/08/2026): tinta um degrau mais
     escura (ink-3 -> ink-2). Nenhuma cor nova. */
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
  /* LINHA PRETA sob o cabecalho em TODA tabela (Paulo 31/08/2026: "em
     Services o topo da tabela esta certinho, tem uma linha preta
     embaixo — coloca essa linha em todas; achei bom para definir o
     cabecalho") — a regua era cinza (--line); virou tinta. Sombra, e
     nao border, para nao mexer na altura unica de 35,4px. */
  /* 12/09/2026 (Paulo: "a faixa preta abaixo dos titulos de todas as
     tabelas tem que ter a linha da mesma grossura, nao tao grossa"):
     1px, UMA grossura em toda tabela — e o th nao leva border-bottom
     (o .table th somava 1px de --line por baixo da regua) */
  box-shadow: 0 1px 0 var(--ink);
  /* ALTURA UNICA DO CABECALHO (Paulo 31/08/2026: "os cabecalhos das
     tabelas estao cada um com alturas diferentes em todo o sistema —
     padroniza-los e fazer disso uma regra"): 11px/700 caixa alta com
     line-height 15 e padding 10x12 = MESMA altura em toda tabela. O
     line-height explicito mata a variacao por familia de fonte (o
     db-table usava a fonte numerica e saia 2px mais baixo); o antigo
     padding-bottom de 8px que "compensava" a regua morreu — era ele
     que deixava .table mais baixa que as tabelas de modulo. Modulo
     NAO redeclara padding de th (a folha do modulo vence por
     especificidade e quebra a altura — foi o caso do Services em 14px). */
  line-height: 15px;
}

/* colunas numericas seguem a direita — o text-align:left do bloco acima
   vence o .num solto por especificidade, entao a excecao e declarada
   na MESMA forca (num do padrao, r do Sales, cu-right do Customers) */
.table thead th.num, .cu-table thead th.num, .fi-table thead th.num,
.in-table thead th.num, .db-table thead th.num, .sv-table thead th.num,
.sa-panel > table thead th.num,
.table thead th.r, .sa-panel > table thead th.r, .sa-rt-table thead th.r,
.cu-table thead th.cu-right {
  text-align: right;
}

/* ALTURA UNICA DA CELULA (Paulo 31/08/2026: "os campos das tabelas tem
   que ter uma altura padrao — que nao aperte um nem deixe o outro
   muito solto — e faca disso uma regra"): corpo 13.5 (lei da fonte
   unica) + line-height 19px + padding 12px = ~43px por linha, igual em
   toda lista do sistema. vertical-align middle centra chips e codigo.
   Modulo NAO redeclara padding/line-height de td de lista (a folha do
   modulo vence por especificidade e quebra a altura — mesmo achado do
   cabecalho). Papel de impressao (fi-doc/sa-doc) fica FORA: e documento. */
.table tbody td,
.cu-table tbody td,
.fi-table tbody td,
.in-table tbody td,
.db-table tbody td,
.sv-table tbody td,
.sa-panel > table tbody td,
.sa-rt-table tbody td {
  padding: 12px;
  line-height: 19px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTAGEM E PAGINACAO EMBAIXO DA TABELA (Paulo 30/08/2026: "essa
   parte devia estar no bottom da tabela, organiza isso direito — em
   todas as tabelas").

   O "Showing 1–20 of 305", o "Per page" e o Previous/Next moram DEPOIS
   da tabela: e no fim da lista que o operador esta quando decide virar
   a pagina. Em cima eles empurravam a primeira linha para baixo e
   ficavam longe de onde a decisao acontece.

   FILTRO continua em cima — filtro decide o que a lista mostra, e a
   decisao vem antes de ler (por isso o select Portal dos Public leads
   nao desceu junto).

   Cada modulo tem sua classe de faixa (.cu-meta-row, .pr-meta,
   .st-meta, .sa-meta-row, .cu-listbar); a variante -foot/-listbar-foot
   so troca a margem de baixo por margem de cima. (A .fi-inv-meta das
   invoices morreu em 31/08: a lista usa o rodape unico .tbl-foot.)
   ══════════════════════════════════════════════════════════════════ */
.cu-meta-foot,
.pr-meta-foot,
.st-meta-foot,
.sa-meta-foot,
.cu-listbar-foot {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 0 !important;
  border-top: 1px solid var(--line);
}

/* Lab 6 — status por cor E forma: verde continua pill; atencao branda
   (gold-soft) vira canto 4px; vermelho vira reto com barra a esquerda */
.fi-tag-late, .sv-prog, .fd-pending, .sv-pending, .st-pill-off {
  border-radius: 4px;
}
.so-cb-void, .sv-nophoto {
  border-radius: 0;
  border-left: 3px solid var(--red);
}

/* Lab 1 — confirmacao destrutiva NO LUGAR (dois toques) */
.ux-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-soft, #FBEAEA);
  border: 1px solid var(--red);
  border-radius: 9px;
  padding: 4px 10px;
  font-size: var(--body-size);
  font-weight: 600;
  color: var(--red);
  -webkit-text-fill-color: var(--red);
  white-space: nowrap;
}
.ux-confirm .ux-yes {
  appearance: none; border: 1px solid var(--red); background: var(--red);
  color: #fff; -webkit-text-fill-color: #fff;
  border-radius: 7px; padding: 3px 10px; font: inherit; font-size: var(--sub-size);
  font-weight: 600; cursor: pointer;
}
.ux-confirm .ux-keep {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); -webkit-text-fill-color: var(--ink);
  border-radius: 7px; padding: 3px 10px; font: inherit; font-size: var(--sub-size);
  font-weight: 600; cursor: pointer;
}
/* confirmacao de gesto que constroi (Send, Approve, Publish): dourado, nunca vermelho */
.ux-confirm.ux-confirm-go {
  background: var(--gold-soft); border-color: var(--gold);
  color: var(--ink); -webkit-text-fill-color: var(--ink);
}
.ux-confirm.ux-confirm-go .ux-yes {
  background: var(--gold-action); border-color: var(--gold-action);
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
}
/* na celula de acoes a confirmacao cabe na coluna (11.242, 29/09/2026):
   a dica da tecla sai (Enter/Esc seguem valendo) e o respiro aperta */
td .ux-confirm { gap: 6px; padding: 4px 8px; }
td .ux-confirm .ux-kbd { display: none; }

/* ── previa do Import das listas (shared/list-io.js — Paulo 01/09:
   export/import dos dados FILTRADOS): a conta do que muda ANTES de
   gravar, no lugar, com Apply/Cancel — nunca um modal de medo ── */
.io-previa {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--body-size);
}
.io-previa-acts { margin-left: auto; display: flex; gap: 8px; }
.io-previa-erro {
  color: var(--red);
  -webkit-text-fill-color: var(--red);
  font-weight: 600;
}

/* Lab 4 — confirmacao discreta com Undo */
.ux-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: var(--body-size);
  font-weight: 600;
  z-index: 300;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* envio que deu certo (WhatsApp, e-mail, PDF, impressao): fundo verde do sistema, fonte branca */
.ux-toast.is-ok { background: var(--green); }
.ux-toast button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--body-size); font-weight: 600;
  color: var(--gold); -webkit-text-fill-color: var(--gold);
}

/* A PERGUNTA DO NAO-SALVO (Paulo 02/10/2026, lei 11.383): a mesma pilula,
   com dois gestos — o Save da tela (ouro) e Leave without saving (branco) —,
   que fica ate ser respondida; o texto quebra em duas linhas se precisar */
/* a pilula de sempre nasce em left:50% + transform e por isso so pode medir METADE
   da janela (o encolher-para-caber ve so o que sobra a direita do 50%): a pergunta
   se centra por margem, com a largura do conteudo, ate 980px ou a janela menos 16 */
.ux-toast.ux-ask { left: 16px; right: 16px; transform: none; width: fit-content; margin: 0 auto; max-width: 980px; flex-wrap: wrap; justify-content: center; text-align: center; }
.ux-toast.ux-ask .ux-ask-leave { color: #fff; -webkit-text-fill-color: #fff; opacity: .85; }
.ux-toast.ux-ask .ux-ask-leave:hover { opacity: 1; }

/* Lab 8 — teclas visiveis nos botoes de confirmacao */
.ux-kbd {
  display: inline-block;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  padding: 0 6px;
  font: var(--code-size) var(--font-mono);
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
  margin-left: 6px;
}

/* Lab 7 — campo de dinheiro: $ fixo, digitos tabulares a direita */
.ux-money { position: relative; }
.ux-money .ux-money-pre {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  -webkit-text-fill-color: var(--ink-3);
  font-weight: 600;
  pointer-events: none;
}
.ux-money input {
  padding-left: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Lab 1 — o Delete fica SEPARADO por um respiro das outras acoes */
.cu-rowacts .cu-link-danger,
.pr-rowacts .pr-actdanger,
.fi-actions .fi-act-danger,
.sa-dellink,
.sv-actions .sv-btn-del,
.ct-footacts .ct-actdanger { margin-left: 18px; }

/* ══ RODAPE DE TABELA UNICO (Paulo 31/08/2026: "isso deve ficar no
   rodape das tabelas, faca disso uma regra") — par do
   shared/table-foot.js. Um so desenho para o sistema inteiro:
   contador a esquerda, Per page 25/50/100 + Previous/Next a direita;
   lista de ate 25 itens nao desenha o rodape. Botoes de paginacao
   ficam FORA da lei dos 40px (excecao ja escrita na lei do botao). ══ */
.tbl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-size: var(--body-size);
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}
.tbl-foot-ctl { display: inline-flex; align-items: center; gap: 8px; }
.tbl-foot-perwrap { display: inline-flex; align-items: center; gap: 6px; }
.tbl-foot-per {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.tbl-foot-prev,
.tbl-foot-next,
.tbl-foot-last,
.tbl-foot-page {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.tbl-foot-page { padding: 0 9px; min-width: 28px; }
/* pagina atual: marcada com o dourado suave que ja existe (regra 9:
   nenhuma cor nova no sistema) */
.tbl-foot-page.is-on {
  background: var(--gold-soft);
  border-color: var(--gold);
  font-weight: 600;
  cursor: default;
}
.tbl-foot-prev:disabled,
.tbl-foot-next:disabled,
.tbl-foot-last:disabled { opacity: .45; cursor: default; }


/* ═══════════════════════════════════════════════════════════════════
   ABAS EM PASTA DE ARQUIVO — filing cabinet (Paulo 02/09/2026: "faz a
   opcao B em todas as abas" + "as fontes dessas abas sempre no mesmo
   tamanho — faz disso uma regra")

   O trilho de abas e COMPONENTE GLOBAL a partir daqui: aba inativa =
   orelha no dourado-quase-branco com moldura fina; a ATIVA e BRANCA
   com contorno dourado de 2px e se EMENDA na regua dourada do trilho
   (o recorte da pasta). FONTE UNICA de aba: 14px/700 em todo o
   sistema. Vale para TODOS os trilhos (Sales, Customers, Products,
   Factory Direct, Services, Finances, Inventory, Procurement, Web,
   Insights, Support, Help, Settings e a Product page).

   ESPECIFICIDADE DE PROPOSITO: o :is() carrega um argumento composto
   (.st-subtabs.st-toptabs) que eleva o seletor inteiro acima de
   QUALQUER regra de aba dos modulos (inclusive o "seletor dobrado" do
   Settings) — o CSS de aba que sobrou nas folhas de modulo esta MORTO
   e sai na proxima passada de cada folha; modulo NAO estiliza aba
   nunca mais. Sales usa .on (nao .is-on) — os dois entram. ── */

:is(#section-finances, #section-customers, #section-inventory,
    #section-insights, #section-factorydirect, #section-store,
    #section-services, #section-procurement, #section-support,
    #section-help, #section-settings, #section-sales, #section-products,
    #section-leads, #section-communications)
  :is(div, nav):is(.st-subtabs.st-toptabs, .fi-tabs, .cu-tabs, .in-tabs, .ld-tabs, .cm-tabs,
    .ins-tabs, .fd-tabs, .so-tabs, .sv-tabs, .pc-tabs, .su-tabs,
    .he-tabs, .st-subtabs, .sa-subtabs, .pr-modtabs, .pd-tabs,
    .fi-subtabs, .da-tabs, .cm-subtabs) {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  /* UMA LINHA, SEMPRE, e a linha INTEIRA (Paulo 16/09/2026: "as abas
     devem ocupar sempre uma linha, isso e regra, mas devem ocupar o
     espaco todo da linha"). O trilho NAO quebra e cada orelha cresce
     na proporcao do seu rotulo ate as abas preencherem a largura —
     sem sobra branca a direita, sem setas, sem corte (31/08). */
  flex-wrap: nowrap;
  overflow: visible;
  margin: 10px 0 16px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--gold);
}

:is(#section-finances, #section-customers, #section-inventory,
    #section-insights, #section-factorydirect, #section-store,
    #section-services, #section-procurement, #section-support,
    #section-help, #section-settings, #section-sales, #section-products,
    #section-leads, #section-communications)
  :is(div, nav):is(.st-subtabs.st-toptabs, .fi-tabs, .cu-tabs, .in-tabs, .ld-tabs, .cm-tabs,
    .ins-tabs, .fd-tabs, .so-tabs, .sv-tabs, .pc-tabs, .su-tabs,
    .he-tabs, .st-subtabs, .sa-subtabs, .pr-modtabs, .pd-tabs,
    .fi-subtabs, .da-tabs, .cm-subtabs)
  > :is(button, a) {
  appearance: none;
  background: var(--gold-faint);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  margin: 0;
  padding: 8px 16px;
  font: inherit;
  /* FONTE UNICA DE ABA (Paulo 02/09): 14px/700 no sistema inteiro */
  font-size: var(--body-size);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* a orelha cresce com o trilho (regra de 16/09): a largura sobrando
     e dividida na proporcao dos rotulos; min-width 0 deixa o trilho
     apertar antes de estourar a linha */
  flex: 1 1 auto;
  min-width: 0;
}

:is(#section-finances, #section-customers, #section-inventory,
    #section-insights, #section-factorydirect, #section-store,
    #section-services, #section-procurement, #section-support,
    #section-help, #section-settings, #section-sales, #section-products,
    #section-leads, #section-communications)
  :is(div, nav):is(.st-subtabs.st-toptabs, .fi-tabs, .cu-tabs, .in-tabs, .ld-tabs, .cm-tabs,
    .ins-tabs, .fd-tabs, .so-tabs, .sv-tabs, .pc-tabs, .su-tabs,
    .he-tabs, .st-subtabs, .sa-subtabs, .pr-modtabs, .pd-tabs,
    .fi-subtabs, .da-tabs, .cm-subtabs)
  > :is(button, a):hover:not(.is-on):not(.on) {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  background: var(--gold-soft);
}

:is(#section-finances, #section-customers, #section-inventory,
    #section-insights, #section-factorydirect, #section-store,
    #section-services, #section-procurement, #section-support,
    #section-help, #section-settings, #section-sales, #section-products,
    #section-leads, #section-communications)
  :is(div, nav):is(.st-subtabs.st-toptabs, .fi-tabs, .cu-tabs, .in-tabs, .ld-tabs, .cm-tabs,
    .ins-tabs, .fd-tabs, .so-tabs, .sv-tabs, .pc-tabs, .su-tabs,
    .he-tabs, .st-subtabs, .sa-subtabs, .pr-modtabs, .pd-tabs,
    .fi-subtabs, .da-tabs, .cm-subtabs)
  > :is(button, a):is(.is-on, .on) {
  background: var(--surface);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  border: 2px solid var(--gold);
  /* a EMENDA da pasta: a aba ativa cobre a regua dourada com o fundo
     branco — o recorte do filing cabinet */
  border-bottom: 2px solid var(--surface);
  margin-bottom: -2px;
  padding: 7px 15px;
  position: relative;
  z-index: 1;
}

/* ═══ RITMO DO TOPO DE MODULO (Paulo 02/09/2026, regra do sistema) ═══
   "Cada um esta com um espacamento diferente entre titulo, pra barra,
   pro de cima, pro embaixo... desagradavel de ficar vendo subindo e
   descendo toda vez que clica numa tela diferente. Faz disso uma
   regra, checa o sistema todo."
   SLOTS FIXOS, os mesmos em todo modulo:
   1. TITULO 30/800 na mesma linha (ja era lei) — linha de 44px;
   2. o bloco seguinte (a BUSCA com os botoes — ou o TRILHO DE ABAS,
      quando o modulo nao tem busca) comeca 18px sob a linha do titulo
      — SEMPRE na mesma altura de tela;
   3. a busca respira 12px ate o proximo bloco;
   4. a faixa Needs attention ocupa o slot dela (60px + 14px, do
      componente .attn-*);
   5. o trilho de abas vem em seguida.
   MODULO NAO INVENTA RESPIRO PROPRIO nesses vaos (o margin de 24px do
   Customers e o de 22px do sa-panel do Sales na faixa morreram aqui).
   Os pins abaixo alinham os trilhos dos modulos SEM busca ao slot 2 —
   escritos no MESMO desenho de seletor do componente de abas (e
   DEPOIS dele na folha) para vencer o empate de especificidade. */
:is(#section-factorydirect, #section-procurement, #section-store,
    #section-help, #section-settings)
  :is(div, nav):is(.fd-tabs, .pc-tabs, .so-tabs, .he-tabs,
    .st-subtabs.st-toptabs) {
  margin-top: 18px;
}
/* O SUPPORT SAIU DESTE PIN em 18/09: ele TEM busca, e o pin e para quem
   NAO tem — o trilho de quem tem busca segue o respiro de 12px do slot
   3, nao os 18px do slot 2. Com o pin e a busca corrigida o trilho caia
   6px abaixo dos vizinhos. */
#section-support .su-tabs { margin-top: 12px; }

/* a linha do titulo tem 44px em todo modulo — o Factory Direct fechava
   em 40 e o trilho dele subia 4px em relacao aos vizinhos */

/* Reports: o corpo comeca no slot 2, como a busca dos outros modulos */

/* ── DATA COM ROTULO FIXO DENTRO DO CAMPO — componente GLOBAL
   (revisao 06/09; promove o desenho .fi-dwrap/.fi-dpref do Finances,
   lei de 02/09: "o nome vai DENTRO do proprio campo"; ja vestem
   sv-wl-due, pc-po-promised e as datas do Marketing do Insights) ── */
.ux-dwrap { position: relative; display: block; }
.ux-dwrap .ux-dinp {
  padding-left: 62px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ux-dwrap .ux-dinp-wide { padding-left: 92px; }
.ux-dpref {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--code-size);
  font-weight: 600;
  letter-spacing: .05em;
  font-family: var(--font-mono);
  color: var(--gold-deep);
  -webkit-text-fill-color: var(--gold-deep);
  pointer-events: none;
}

/* ── DOIS TRILHOS NO INSIGHTS (Paulo 08/09/2026: "as abas como os
   departamentos e sub abas com as abas atuais") ──────────────────
   O de CIMA e a pasta cheia — o departamento manda. O de BAIXO recua
   um degrau (regua fina no lugar da dourada, orelha menor) para dizer
   que e subordinado, do mesmo jeito que o Settings separa os dois
   niveis dele. Os dois continuam vestindo a pasta de arquivo. ── */
#section-insights .ins-tabs.ins-deps { margin: 10px 0 0; }
#section-insights .ins-tabs:not(.ins-deps) {
  margin-top: 0;
  border-bottom-color: var(--line);
}
#section-insights .ins-tabs:not(.ins-deps) > :is(button, a) {
  padding: 6px 13px;
  font-size: var(--sub-size);
}
#section-insights .ins-tabs:not(.ins-deps) > :is(button, a):is(.is-on, .on) {
  border-width: 1px;
  border-color: var(--gold);
  border-bottom-color: var(--surface);
}

/* ── FILTRO E BOTAO NA MESMA LINHA — o filtro e que espreme (Paulo
   08/09/2026: "quando existe um filtro, os botoes de acoes ficam na
   mesma linha desse filtro; se precisar espreme o filtro para que o
   botao fique na mesma linha — isso e regra") ─────────────────────
   A lei de 03/09 ja dizia "filtros e botoes numa linha so", mas so o
   .shw-tools tinha sido acertado: as fileiras dos modulos seguiam com
   flex-wrap:wrap e, na primeira tela estreita, o botao caia para a
   linha de baixo. Agora a fileira NAO quebra: quem cede largura e o
   CAMPO (min-width 0 deixa o controle encolher de verdade — sem isso
   input e select travam no tamanho intrinseco e a fileira estoura); o
   BOTAO nunca encolhe.
   ARGUMENTO COMPOSTO no :is() para vencer o "#section-x .xx-filters"
   das folhas de modulo, o mesmo mecanismo do trilho de abas.
   FICA DE FORA o .fi-filters do Finances: la a classe e usada tambem
   como GRADE DE FORMULARIO (New Vendor, Cash register, Day close) e
   apertar campo de formulario nao e o que ele pediu. ── */
:is(#section-customers, #section-products, #section-services,
    #section-certificates, #section-inventory, #section-procurement,
    #section-sales, #section-support, #section-store, #section-reports,
    #section-insights, #section-leads, #section-communications)
  :is(div, form, section):is(.cu-filters, .ld-filters, .cm-filters, .pr-filters, .sv-filters,
    .ct-filters, .in-filters, .pc-filters, .sa-filters, .su-filters,
    .so-cb-filters, .rv-filters, .ins-filters, .da-filters, .shw-tools) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

:is(#section-customers, #section-products, #section-services,
    #section-certificates, #section-inventory, #section-procurement,
    #section-sales, #section-support, #section-store, #section-reports,
    #section-insights, #section-leads, #section-communications)
  :is(div, form, section):is(.cu-filters, .ld-filters, .cm-filters, .pr-filters, .sv-filters,
    .ct-filters, .in-filters, .pc-filters, .sa-filters, .su-filters,
    .so-cb-filters, .rv-filters, .ins-filters, .shw-tools)
  > * {
  min-width: 0;
}

/* o BOTAO nao cede largura — quem cede e o campo */
:is(#section-customers, #section-products, #section-services,
    #section-certificates, #section-inventory, #section-procurement,
    #section-sales, #section-support, #section-store, #section-reports,
    #section-insights, #section-leads, #section-communications)
  :is(div, form, section):is(.cu-filters, .ld-filters, .cm-filters, .pr-filters, .sv-filters,
    .ct-filters, .in-filters, .pc-filters, .sa-filters, .su-filters,
    .so-cb-filters, .rv-filters, .ins-filters, .shw-tools)
  > :is(button, .btn, a.btn, .cu-btn, .pc-fbtn, .cu-fbtn, .in-filter-actions) {
  flex: none;
}

/* ARMADILHA FECHADA NA HORA (medida no Procurement): campo com a classe
   .field vale `width: 100%` — solto como filho DIRETO da fileira, o
   flex-basis vira a largura do container inteiro e um unico select come
   a linha toda, esmagando a busca em 32px. Dentro da fileira de filtro o
   controle tem largura PROPRIA e cede quando aperta. */
:is(#section-customers, #section-products, #section-services,
    #section-certificates, #section-inventory, #section-procurement,
    #section-sales, #section-support, #section-store, #section-reports,
    #section-insights, #section-leads, #section-communications)
  :is(div, form, section):is(.cu-filters, .ld-filters, .cm-filters, .pr-filters, .sv-filters,
    .ct-filters, .in-filters, .pc-filters, .sa-filters, .su-filters,
    .so-cb-filters, .rv-filters, .ins-filters, .shw-tools)
  > :is(input, select, textarea) {
  width: auto;
  flex: 0 1 auto;
}

/* ── ETIQUETA BENCH — dado de bancada, nunca confundido com o real
   (Paulo 08/09/2026: "semeia os dados de bancada marcados como
   ficticios") ────────────────────────────────────────────────────
   Toda linha semeada carrega demo:true no registro e esta etiqueta na
   tela. E deliberadamente NEUTRA e pequena: nao pode competir com o
   status da linha (que e cor E forma), mas tem de estar sempre la —
   no dia em que o custo de pessoal de verdade for lancado, o Paulo ve
   na hora qual linha e qual.
   Componente GLOBAL porque a mesma semente aparece em dois modulos: a
   ficha do cliente (Contact log e Scheduled) e o Insights. ── */
.bench-tag {
  display: inline-block;
  vertical-align: middle;
  /* fecha o box em <=19px para nao esticar a linha (lei 5.12) */
  margin: -3px 0 -3px 8px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-alt);
  font-size: var(--t4-size);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
  -webkit-text-fill-color: var(--ink-3);
  white-space: nowrap;
}

/* ── WHATSAPP = BOTAO VERDE, EM TODO LUGAR (Paulo 08/09/2026: "toda
   vez que tiver uma acao whatsapp deve ter os botoes verde para
   identificar melhor") ───────────────────────────────────────────
   E por onde a casa fala com o cliente (quase 100% da comunicacao de
   texto), e estava como link discreto no meio dos outros links.
   EMENDA CONSCIENTE A LEI 5.5 ("acao de linha e LINK; botao com
   moldura em linha de tabela e defeito"): o Paulo abriu excecao
   NOMEADA para o WhatsApp. As demais acoes de linha continuam links.
   COMPACTO de proposito: margem vertical negativa fecha o box em
   <=19px e a linha de 44px nao estica (a mecanica da lei 5.12).
   Verde = dinheiro/canal confirmado, a cor que ja existe — nenhuma
   cor nova entra (UX Lab 9). ── */
.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  /* 12/09 (lei 11.80): o WhatsApp e botao de acao como os outros —
     altura unica --ctl-h, corpo 13/600, moldura da casa; na celula
     compensa a folga (-10px) e a linha fica na regua de 44px */
  margin: 0;
  height: var(--ctl-h);
  padding: 0 14px;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font: inherit;
  font-size: var(--body-size);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* Birthdays today: a saudacao que ja saiu pela linha do office vira a pilula preta Sent (06/10/2026) */
.wa-btn.is-sent, #section-dashboard .db-wa.is-sent { background: var(--ink); border-color: var(--ink); cursor: default; }
.wa-btn + .ins-rowlink,
.wa-btn + a,
.wa-btn + button { margin-left: 8px; }
td .wa-btn { margin-top: -6px; margin-bottom: -6px; }
/* hover NUNCA apaga o rotulo (o defeito do botao dourado, 29/08) */
.wa-btn:hover {
  background: var(--green-2, var(--green));
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-decoration: none;
}

/* ── O PORQUE DA RECOMENDACAO, sob a acao (08/09) ─────────────────
   Toda "next best action" cita o dado que a gerou: recomendacao sem
   motivo o usuario tem razao em ignorar. A linha secundaria e o degrau
   S da escala (12px) e tinta recuada — a ACAO e que lidera. ── */
.cu-nbawhy,
.ins-nbawhy {
  display: block;
  font-size: var(--sub-size);
  font-weight: 400;
  line-height: 16px;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}

/* ── SELECT DE FILTRO: O COMPONENTE INTEIRO, NAO SO A MOLDURA
   (Paulo 08/09/2026, olhando o Insights ao lado do Products: "os
   filtros nao seguem o layout") ──────────────────────────────────
   A lei de 01/09 ja dizia "modulo novo que criar select de filtro
   entra aqui", mas o que estava aqui era so a MOLDURA — o peso da
   fonte, o respiro, a largura minima e o estado APLICADO viviam
   copiados dentro de cada folha de modulo. Resultado: o filtro novo
   do Insights nasceu com a borda certa e o resto errado (400 em vez
   de 600, sem o dourado do aplicado).
   Agora o componente e completo e tem NOME PROPRIO: `.fsel`. Filtro
   novo usa `class="field fsel"` e ja nasce inteiro.
   Os `.xx-fsel` dos modulos continuam valendo — a lista acima cuida
   deles; esta regra e para quem nasce daqui em diante. ── */
select.fsel,
#section-insights select.ins-fsel {
  min-width: 130px;
  height: var(--ctl-h);
  padding: 0 34px 0 13px;
  font-weight: 600;
  cursor: pointer;
}
/* FILTRO APLICADO = BORDA DOURADA (lei de 01/09). Sem isso a tela nao
   diz que esta filtrada e o usuario le uma lista curta achando que e
   a lista inteira — o defeito mais caro de um filtro. */
select.fsel.is-set,
#section-insights select.ins-fsel.is-set {
  background-color: #FFFFFF;
  border-color: var(--gold);
}
select.fsel:focus,
#section-insights select.ins-fsel:focus { border-color: var(--gold); }


/* ── A LOJA DE ORIGEM E O CANAL SAO PILULAS DE COR (Paulo 09/09/2026:
   "miami stock location, quando aparecer nas tabelas parece em azul,
   aquele da galina, e boston marlborough location em ouro, e travel
   quando for feita uma venda em preto, a pilula na tabela"; 11/09:
   "escolhe as cores pros canais — online, office, app — e coloca essas
   cores definidas la no cadastro; no stock location tambem a opcao de
   mudar de cor, como fizemos no user") ─────────────────────────────
   Numa lista de 25 vendas a coluna de texto puro obriga a LER as 25
   para achar as de Miami; a cor deixa a origem contavel de relance —
   e a origem e o que decide conta FedEx, imposto e comissao (regra
   11.7). A COR VEM DO CADASTRO: shared/loc-pill.js le Stock locations
   e Channels e poe cada cor numa variavel da raiz (--pill-loc-<id>,
   --pill-ch-<code> + a tinta legivel); a pilula aponta para a
   variavel via --pc/--pi com o PADRAO ditado como fallback. Padroes:
   Miami azul --blue-miami, Boston Marlborough ouro --gold com a tinta
   por cima, Travel preto --ink; Office grafite --ink-2; Online amarelo
   #FFD814 e App laranja #FF9900 da Amazon (ditadas pelo Paulo em
   05/10/2026, tinta escura pelo contraste).
   Componente GLOBAL — a coluna nasce igual em qualquer modulo. */
.locpill,
.chanpill {
  display: inline-block;
  font-size: var(--sub-size);
  font-weight: 600;
  letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
  /* sem cor ditada (loja nova, canal desconhecido): a pilula neutra */
  background: var(--pc, var(--gold-soft));
  color: var(--pi, var(--gold-deep));
  -webkit-text-fill-color: var(--pi, var(--gold-deep));
}
/* a pilula NAO estica a linha (lei 5.12): fecha o box na regua da
   celula pela margem negativa + middle */
td .locpill,
td .chanpill { vertical-align: middle; margin-top: -3px; margin-bottom: -3px; }
/* A BOLINHA DA CASA (Paulo 23/10/2026): M de Miami, B de Boston — a cor da pilula, circulo de 24 */
.locdot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: var(--sub-size); font-weight: 700;
  background: var(--pc, var(--gold-soft));
  color: var(--pi, var(--gold-deep));
  -webkit-text-fill-color: var(--pi, var(--gold-deep));
}
/* O VENDEDOR COMO O AVATAR (Paulo 23/10/2026): as iniciais na cor do avatar dele, circulo de 28 */
.spdot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: var(--sub-size); font-weight: 700;
  background: var(--pc, var(--gold-soft));
  color: var(--pi, var(--gold-deep));
  -webkit-text-fill-color: var(--pi, var(--gold-deep));
}
td .locdot { vertical-align: middle; margin-top: -4px; margin-bottom: -4px; }
td .spdot { vertical-align: middle; margin-top: -6px; margin-bottom: -6px; }

/* ═══ CALENDARIO DE MES DESENHADO (shared/month-picker.js) — Paulo
   11/09/2026, no New Service: "eu quero um calendario, mesmo o desenho
   de um calendario". Banda dourada com ‹ Mes AAAA › (a mesma da folha
   do Dashboard), fileira S M T W T F S em T4, grade 7 x 6 com o dia de
   hoje contornado e o escolhido preenchido em dourado. Um so desenho
   para todo campo de data que quiser o calendario a vista. ═══ */
.mp {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #FFFFFF;
  user-select: none;
}
.mp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ctl-h);
  padding: 0 6px;
  background: var(--gold);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.mp-title {
  font-size: var(--body-size);
  font-weight: 600;
  letter-spacing: .02em;
}
.mp-nav {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  -webkit-text-fill-color: inherit;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  opacity: .85;
}
.mp-nav:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.mp-wd, .mp-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mp-wd span {
  text-align: center;
  padding: 8px 0 4px;
  font-size: var(--t4-size);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}
.mp-grid { padding: 2px 4px 6px; gap: 2px; }
.mp-day {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  height: 36px;
  border-radius: 8px;
  font: inherit;
  font-size: var(--body-size);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  cursor: pointer;
}
.mp-day:hover { background: var(--gold-soft); }
.mp-day.is-out { color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.mp-day.is-today { border-color: var(--gold); font-weight: 600; }
.mp-day.is-sel, .mp-day.is-sel:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  font-weight: 600;
}

/* ═══ BOTÃO DE AÇÃO, NUNCA HYPERLINK DE AÇÃO (Paulo 12/09/2026: "o
   sistema deve ter botões de ação e nunca hyperlinks de ação, varre
   todo o sistema") — lei 11.80, REESCRITA no 137 (13/09): a lista de
   19 classes de linha morreu; todo verbo de ação leva a classe global
   `btn` (cor, moldura e altura no bloco único mais abaixo). Aqui fica só
   o que é DA CÉLULA: respiro lateral menor, o vizinho a 8px, a linha
   continua na régua de 44px (5.12) pela margem vertical negativa, e a
   célula de ações nunca quebra. ═══ */
td .btn { padding: 0 12px !important; margin-left: 8px; white-space: nowrap; vertical-align: middle; line-height: 1; }
td .btn:first-child { margin-left: 0; }
td:has(> .btn) { white-space: nowrap; }

/* ═══ TÍTULO DE TABELA FORA DA TABELA (Paulo 12/09/2026) — lei 11.82.
   O passe global do app.js levanta o título do cartão cuja única
   carga é uma tabela; aqui o título vira a linha acima do painel e o
   painel cola a tabela no topo (faixa do cabeçalho nivelada com a
   moldura, como no Settings). O título mantém a classe de origem —
   a fonte é a T3 de sempre. ═══ */
.tbl-block { display: flex; flex-direction: column; min-width: 0; }
.tbl-block > .is-tabletop { flex: 1 1 auto; }
.tbl-title-out { margin: 0 0 10px !important; padding: 0 !important; }
/* O TITULO DA CAIXA COM CONTAGEM, EM TODO O OFFICE (Paulo 13/10/2026, print do Dashboard no
   iPhone: "Melhora esses cabecalhos de tabelas" + "E no computador tb" + "Corrige em todo o
   site no celular e no computador"): o titulo na 1a linha (com os botoes dele, quando tem, na
   ponta direita) e EMBAIXO a contagem/o estado, encostado a esquerda — nunca flutuando na
   ponta direita longe do titulo nem espremido contra a data. Vale para a contagem de cada
   modulo (Dashboard, Finances, Inventory, Sales) e o departamento do My day; o !important
   vence as regras antigas de cada modulo (float e margem), que ficam sem efeito aqui. */
.tbl-title-out:has(> :is(.db-head-count, .db-myday-dept, .fi-head-count, .in-head-count, .in-status-chip, .sa-hcount)) {
  display: flex !important; flex-wrap: wrap !important; align-items: center; column-gap: 8px; row-gap: 4px;
  height: auto !important; overflow: visible !important; white-space: normal !important;
}
.tbl-title-out > :is(.db-head-count, .db-myday-dept, .fi-head-count, .in-head-count, .sa-hcount) {
  float: none !important; order: 9; flex: 1 1 100% !important; min-width: 0; margin: 0 !important; line-height: 1.35;
}
.tbl-title-out > .in-status-chip { float: none !important; order: 9; margin: 0 !important; }
.tbl-title-out > :is(.db-head-count, .db-myday-dept, .fi-head-count, .in-head-count, .sa-hcount):empty { display: none; }
/* caixas LADO A LADO (Currency Desk: .fi-grid3/.fi-grid2) medem a mesma regua (11.289): ali a
   contagem fica na linha do titulo, colada nele, e corta com reticencias */
:is(.fi-grid3, .fi-grid2) .tbl-title-out:has(> .fi-head-count) { flex-wrap: nowrap !important; white-space: nowrap !important; height: var(--ctl-h) !important; overflow: hidden !important; }
:is(.fi-grid3, .fi-grid2) .tbl-title-out > .fi-head-count { order: 0; flex: 0 1 auto !important; overflow: hidden; text-overflow: ellipsis; }
.is-tabletop { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; overflow: hidden; }
.is-tabletop > [class*="body"] { padding: 0 !important; }
.is-tabletop > div[style*="overflow-x"], .is-tabletop [class*="-tw"] { margin: 0 !important; }
.is-tabletop .tbl-foot { margin: 10px 12px 12px; }
/* lista no papel de tabela (data-tt-list): as fileiras nao tem celula, entao
   o corpo guarda a folga lateral do cartao — so a de cima vai embora */
.is-tabletop[data-tt-list] > [class*="body"] { padding: 0 18px 4px !important; }

/* ═══ TÍTULO DE CAIXA FORA DA CAIXA, CARGA QUALQUER (lei 11.234) — o
   irmão do is-tabletop para o cartão que carrega gráfico, campos ou
   pares rótulo/valor: o título vira a linha acima e o cartão MANTÉM a
   folga de dentro (tirar o padding aqui esmagaria o gráfico contra a
   moldura); só as margens verticais passam ao bloco. ═══ */
.tbl-block > .is-boxtop { flex: 1 1 auto; }
.is-boxtop { margin-top: 0 !important; margin-bottom: 0 !important; }
/* O BLOCO SOME COM O CARTAO (Paulo 02/10/2026, no Dashboard visto como a Camilla: "email brief e new
   senders so aparecem no admin, nao nos salesperson ou services"). O passe levanta o titulo para FORA do
   cartao; quando o dominio esconde o cartao (`hidden`), o titulo levantado ficava a vista sozinho — E-mail
   brief, New senders e Support tickets apareciam como linha solta para quem nao os tem. O bloco inteiro
   segue o cartao: cartao hidden, bloco hidden. */
.tbl-block:has(> .is-tabletop[hidden]), .tbl-block:has(> .is-boxtop[hidden]) { display: none !important; }

/* ═══ CAIXAS LADO A LADO NIVELADAS (lei 11.289, Paulo 24/09/2026) — o
   bloco (título + cartão) é a célula da fileira e ESTICA até o pé do
   vizinho; o cartão dentro dele preenche o bloco. Cartão sem título ao
   lado de um bloco ganha, pelo passe do app.js, um título em branco da
   mesma classe do vizinho (invisível, sem leitura): as molduras começam
   na mesma linha e terminam na mesma linha. ═══ */
:is(.tbl-block, .cu-block, .st-block, .cm-block) { align-self: stretch; }
.tbl-title-blank { visibility: hidden; }

/* ═══ UM BOTÃO PARA O SISTEMA (137, 13/09/2026 — leis 11.85/11.86 sem lista)
   Antes este bloco enumerava 40 classes de módulo com 25 :not() para
   vestir o botão secundário e o destrutivo. Agora TODO botão de ação
   leva a classe global `btn` (+ `btn-danger`, `btn-gold`, `btn-green`,
   `btn-navy`, `wa-btn`); a classe de módulo que sobrou (sa-btn-ghost,
   pc-act, st-act…) é só GANCHO de JS e de layout — nunca fonte de cor
   nem de altura. Secundário = dourado leve; destrutivo = vermelho leve;
   os coloridos (gold-action, navy, verde, WhatsApp) seguem como são.
   Nenhuma cor nova entra (UX Lab 9). Botão desabilitado = meio-tom.
   Ficam fora, por não serem botão de ação: segmentados, chips de
   filtro, dias do calendário, paginação, ×/lupa de micro-controle,
   pastilhas do Needs attention. ═══ */
/* :not() so das VARIANTES GLOBAIS (o dourado cheio, o navy, o WhatsApp, o destrutivo) — nao de classe de modulo */
/* !important de proposito: e LEI (11.85/11.86) e a folha de modulo tem
   especificidade de id — sem isso qualquer #section-x .classe pintava
   o botao de branco de novo. Os coloridos de modulo (-gold/-green/-navy/
   -ink/-doc/-new/-red/-edit/-mto/approve) ficam de fora pelo NOME EXATO; botao
   pintado pela COR DO MODULO (os atalhos do Dashboard, lei de 14/08) leva
   a classe btn-color e tambem fica de fora. */
.btn:not(.btn-gold):not(.btn-primary):not(.wa-btn):not(.btn-danger):not(.btn-green):not(.btn-navy):not(.btn-ink):not(.btn-new):not(.cu-btn-gold):not(.cu-btn-navy):not(.cu-btn-green):not(.sa-btn-green):not(.sa-btn-ink):not(.sa-btn-doc):not(.sa-btn-new):not(.in-btn-green):not(.in-btn-gold):not(.in-btn-red):not(.fi-btn-green):not(.fi-btn-edit):not(.fi-btn-del):not(.ct-btn-green):not(.sv-btn-mto):not(.db-approve):not(.sa-new-ret):not(.btn-color) {
  background: var(--gold-soft) !important;
  border: 1px solid var(--gold) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  height: var(--ctl-h) !important;
  font-weight: 600 !important;
  font-size: var(--body-size) !important;
  border-radius: var(--radius) !important;
}
/* a excecao nomeada: o + New Return e o secundario (era .sa-btn-new.sa-new-ret na lista) */
.btn.sa-new-ret { background: var(--gold-soft) !important; border: 1px solid var(--gold) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; height: var(--ctl-h) !important; }
.btn:not(.btn-gold):not(.btn-primary):not(.wa-btn):not(.btn-danger):not(.btn-green):not(.btn-navy):not(.btn-ink):not(.btn-new):not(.cu-btn-gold):not(.cu-btn-navy):not(.cu-btn-green):not(.sa-btn-green):not(.sa-btn-ink):not(.sa-btn-doc):not(.sa-btn-new):not(.in-btn-green):not(.in-btn-gold):not(.in-btn-red):not(.fi-btn-green):not(.fi-btn-edit):not(.fi-btn-del):not(.ct-btn-green):not(.sv-btn-mto):not(.db-approve):not(.btn-color):hover, .btn.sa-new-ret:hover { background: var(--gold-light) !important; border-color: var(--gold) !important; }
.btn.btn-danger {
  background: var(--red-soft) !important;
  border: 1px solid var(--red-light) !important;
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  height: var(--ctl-h) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
}
.btn.btn-danger:hover { background: var(--red-light) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
.btn:disabled { opacity: .5; cursor: default; }
/* campo dentro de célula de tabela mede o token e compensa a folga da
   célula (12+12) — a linha continua em 44px também na tabela-formulário
   (revoga a exceção "mede pelo campo" da 5.12, 12/09) */
body :is(#section-customers td :is(.cu-inp-s, .cu-sel-s), td > .field:not(textarea), td > select.field, td > input.field) {
  height: var(--ctl-h) !important;
  margin-top: -6px; margin-bottom: -6px;
  padding-top: 0 !important; padding-bottom: 0 !important;
  box-sizing: border-box;
}
/* botão dentro da célula compensa a folga pela conta do TOKEN (linha 44
   seja o controle 40, 36 ou 32) — vale para todo .btn, sem lista */
td .btn { height: var(--ctl-h); margin-top: calc((19px - var(--ctl-h)) / 2); margin-bottom: calc((19px - var(--ctl-h)) / 2); }
/* pills de status dentro da célula não esticam a linha (5.12, varredura 12/09) */
td :is(.db-lang, .pc-need, .pc-po-late, .pc-po-open, .pc-po-done, .sv-tag, .ct-tag, .in-low) { vertical-align: middle; margin-top: -4px; margin-bottom: -4px; line-height: 19px; }
/* checkbox solto na célula: o navegador dá 3px de margem em cima e
   embaixo e senta na baseline — sobe a linha para 49 (varredura 12/09) */
td > input[type="checkbox"] { margin: 0; vertical-align: middle; }

/* ── QR MODAL (13/09/2026): o QR abre GRANDE no meio da tela — o usuario
   trabalha no PC e fotografa com o celular ── */
.qr-modal{ position:fixed; inset:0; z-index:400; background:rgba(23,24,26,.55); display:flex; align-items:center; justify-content:center; padding:20px }
.qr-modalbox{ width:360px; max-width:100%; background:#fff; border-radius:16px; padding:24px 24px 20px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.25) }
.qr-modalqr{ width:260px; height:260px; padding:8px; box-sizing:border-box; border:1px solid #ECE7DB; border-radius:10px; background:#fff }
.qr-modalqr svg{ width:100%; height:100% }
.qr-modalbox b{ font-size:16px; margin-top:6px }
.qr-modalbox span{ font-size:12.5px; line-height:1.5; color:#5F615E; -webkit-text-fill-color:#5F615E }
.qr-modalcount{ font-size:13px; font-weight:600; color:#8A7444; -webkit-text-fill-color:#8A7444 }
.qr-modalbox small{ font-size:10.5px; color:#8B8D89; -webkit-text-fill-color:#8B8D89; word-break:break-all }
.qr-modalbox .btn, .qr-modalbox .st-btn{ margin-top:8px }

/* ── PHOTO DROP (13/09/2026, regra 11.96): a caixa do QR que abre a camera
   do celular — nasce aberta, centralizada abaixo das fotos ── */
/* CAIXA MENOR, NO PE DA TELA (Paulo 15/09/2026: "o campo do QR code para
   captura deve ficar embaixo, na ultima parte da tela, para ocupar menos
   espaco; a caixa e o QR podem ser menores") — QR de 200 para 120 px */
.pdrop-row{ display:flex; justify-content:center; margin-top:14px }
.pdrop{ width:100%; max-width:520px; display:flex; gap:14px; align-items:center; border:1px solid #ECE7DB; border-radius:10px; padding:10px 12px; background:#FBF8F1 }
.pdrop-qr{ flex:0 0 120px; width:120px; height:120px; padding:6px; box-sizing:border-box; border:1px solid #ECE7DB; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center }
.pdrop-qr svg{ width:100%; height:100% }
.pdrop-tx{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.pdrop-tx b{ font-size:13px }
.pdrop-tx span{ font-size:12px; color:#5F615E; -webkit-text-fill-color:#5F615E; line-height:1.45 }
.pdrop-count{ font-size:12px; font-weight:600; color:#8A7444; -webkit-text-fill-color:#8A7444; min-height:14px }
.pdrop-tx small{ font-size:10px; color:#8B8D89; -webkit-text-fill-color:#8B8D89; word-break:break-all }

/* ── AS QUATRO SAIDAS DO DOCUMENTO (lei 11.127, 15/09/2026) ─────────
   Fileira global de shared/doc-actions.js: Send Email · WhatsApp ·
   Print · Save PDF (+ View ↗), centrada EMBAIXO do papel (11.126).
   Modulo nenhum desenha a sua — so posiciona a .doc-bar. Na impressao
   a fileira some (e acao da tela, nao do papel). */
.doc-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.doc-bar .doc-btn { margin: 0; }
@media print { .doc-bar { display: none !important; } }
/* saida sem destino no lote (carta em massa): fica na fileira, apagada */
.doc-bar .is-off { opacity: .45; pointer-events: none; }

/* ═══ A CAIXA DE IMPRESSAO DA CASA (15/09/2026, Paulo: "cada maquina pode
   ter as suas impressoras; deve abrir uma caixa e o usuario ve as
   impressoras do Windows daquela maquina e escolhe — serve para todos,
   incluindo as labels da FedEx"). Componente global (shared/print.js):
   ancorada no botao Print, lista as impressoras da estacao, a do canal
   pre-marcada, Print (primaria) e Cancel; Esc e clique fora cancelam. ═══ */
.ux-printbox {
  position: absolute; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel, 16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .12); padding: 14px 16px 12px;
}
.ux-printbox-t { font-size: var(--t3-size, 13px); font-weight: 600; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.ux-printbox-s { font-size: var(--small-size, 12px); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); margin: 2px 0 10px; }
.ux-printbox-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.ux-printbox-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line-soft); font-size: var(--body-size, 13px); color: var(--ink); -webkit-text-fill-color: var(--ink); }
.ux-printbox-row:last-child { border-bottom: 0; }
.ux-printbox-row:hover { background: var(--gold-faint); }
.ux-printbox-row input { margin: 0; accent-color: var(--gold-deep); flex: none; }
.ux-printbox-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-printbox-row em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.ux-printbox-sep { padding: 6px 12px 4px; font-size: 10px; font-weight: 600; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); background: var(--gold-faint); border-top: 1px solid var(--line-soft); }
.ux-printbox-empty { margin: 0; font-size: var(--body-size, 13px); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.ux-printbox-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* a caixa do SEND EMAIL (shared/doc-actions.js, lei 11.140, 16/09/2026):
   o molde da caixa do Print com To · Subject · Message — rotulo 600 a
   esquerda (11.77), campo da casa (branco, 2px) na altura do token; a
   mensagem e a unica coisa mais alta que o token */
.ux-mailbox-f { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; margin-top: 8px; }
.ux-mailbox-l { font-size: var(--body-size, 13px); font-weight: 600; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.ux-mailbox-f .field { width: 100%; min-width: 0; }
.ux-mailbox-f .ux-mailbox-ta { height: auto; min-height: 150px; line-height: 19px; padding: 8px 10px; resize: vertical; align-self: start; }
.ux-mailbox-f:has(.ux-mailbox-ta) { align-items: start; }
.ux-mailbox-f:has(.ux-mailbox-ta) .ux-mailbox-l { line-height: var(--ctl-h); }
.ux-mailbox-err { margin-top: 8px; font-size: var(--small-size, 12px); color: var(--red); -webkit-text-fill-color: var(--red); }
/* A LINGUA DO DESTINATARIO (20/09/2026, lei 11.207): o par de botoes na
   linha do rotulo troca a lingua do que vai sair (traduzindo o que esta
   escrito), e o bloco de baixo mostra o MESMO texto na NOSSA lingua —
   leitura, nunca campo: quem edita e a caixa de cima. */
.ux-mailbox-msg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ux-mailbox-langs { display: flex; align-items: center; gap: 4px; }
.ux-mailbox-langl { font-size: var(--small-size, 12px); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); margin-right: 2px; }

/* ── O CARTAO WHATSAPP DA FICHA (shared/wa-card.js) ────────────────
   Componente de TRES modulos (cliente, lead e — desde 20/09/2026, lei
   11.207 — fornecedor): a folha saiu de customers-office.css e virou
   global, como manda a regra do componente compartilhado. Modulo nao
   estiliza o cartao. */
.wa-consentrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.wa-consent { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-consentacts { display: flex; gap: 8px; flex: none; }
.wa-cst { display: inline-block; padding: 2px 9px; line-height: 19px; font-size: var(--sub-size); font-weight: 600; white-space: nowrap; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-alt); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
.wa-cst-in { border-radius: 999px; background: var(--green-soft); border-color: var(--green); color: var(--green); -webkit-text-fill-color: var(--green); }
.wa-cst-out { border-radius: 0; border-left: 3px solid var(--red); background: var(--red-soft); color: var(--red); -webkit-text-fill-color: var(--red); }
.wa-cst-none { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); -webkit-text-fill-color: var(--ink); }
.wa-cst-sub { font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.wa-msgs { width: 100%; }
.wa-nowrap { white-space: nowrap; }
.wa-msgs td.wa-text { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-mst { display: inline-block; vertical-align: middle; margin: -4px 0; padding: 2px 9px; line-height: 19px; font-size: var(--sub-size); font-weight: 600; white-space: nowrap; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-alt); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
.wa-mst-sent, .wa-mst-delivered, .wa-mst-read { border-radius: 999px; background: var(--green-soft); border-color: var(--green); color: var(--green); -webkit-text-fill-color: var(--green); }
.wa-mst-received { background: var(--gold-faint); border-color: var(--gold); color: var(--ink); -webkit-text-fill-color: var(--ink); }
.wa-mst-held { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); -webkit-text-fill-color: var(--ink); }
.wa-mst-failed, .wa-mst-blocked, .wa-mst-not_sent { border-radius: 0; border-left: 3px solid var(--red); background: var(--red-soft); color: var(--red); -webkit-text-fill-color: var(--red); }
.wa-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* a leitura na nossa lingua entra SOB a mensagem; o original fica (11.207) */
.wa-trbtn { flex: none; }
.wa-msgs td.wa-text:has(.wa-trline) { white-space: normal; }
.wa-trline { margin-top: 2px; font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); white-space: normal; }
.ux-mailbox-lang {
  height: 22px; padding: 0 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: #FFFFFF;
  font: inherit; font-size: var(--small-size, 12px); font-weight: 600;
  color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); cursor: pointer;
}
.ux-mailbox-lang.is-on { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); -webkit-text-fill-color: var(--ink); }
.ux-mailbox-lang:disabled { opacity: .6; cursor: default; }
.ux-mailbox-tr { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--gold-faint); padding: 8px 10px; }
.ux-mailbox-trh { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--small-size, 12px); font-weight: 600; color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); margin-bottom: 4px; }
.ux-mailbox-trb { font-size: var(--body-size, 13px); line-height: 19px; white-space: pre-wrap; color: var(--ink); -webkit-text-fill-color: var(--ink); }
@media print { .ux-printbox { display: none !important; } }
/* a seta do View e glifo de outra fonte: solta no texto ela alteava a
   linha e o rotulo descia (Paulo 15/09/2026: "em View a palavra View esta
   desalinhada"); em caixa propria sem altura de linha, o rotulo fica na
   regua dos vizinhos */
.doc-bar .doc-arrow { display: inline-block; line-height: 0; margin-left: 5px; font-size: 12px; }

/* ── SEND VIA WHATSAPP de uma selecao (shared/wa-send.js, Bloco 6, 16/09/2026)
   Caixa inline sob a fileira de acoes: cliente com sugestao (teto 3),
   nota e Send — campos e botoes na altura do token. Global porque mora no
   quickview do Products e, quando a outra frente ligar, nas abas Similar
   Items / Complete the Set. ── */
.wa-send { border: 1px solid var(--line); border-radius: 12px; background: var(--gold-faint); padding: 12px 14px; margin-top: 10px; }
.wa-send-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; min-width: 0; }
.wa-send-t { font-weight: 600; white-space: nowrap; }
.wa-send-sub { font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-send-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.wa-send-cust { position: relative; }
.wa-send-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); overflow: hidden; }
.wa-send-opt { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: #fff; font: inherit; cursor: pointer; }
.wa-send-opt:hover { background: var(--gold-soft); }
.wa-send-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.wa-send-out { margin-right: auto; font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }

/* ── TÍTULO EM CIMA DE TODA CAIXA, NADA ESCRITO DENTRO (lei 11.209, Paulo
   20/09/2026; revoga a 6.1 de 02/09) — o passe titlesAboveBoxes do app.js
   veste toda fileira de filtros: rótulo 12/600 em cima, caixa vazia embaixo,
   fileira alinhada pelo pé (campo e botão na mesma régua, 11.85). A caixa
   SOLTA vira coluna com a largura de conteúdo que tinha (width auto, flex
   0 1 auto — o mesmo que a fileira dava à filha direta); a caixa com
   invólucro próprio (.fi-filter, .ux-dwrap) recebe o rótulo por dentro e
   o invólucro segue com as regras de largura do módulo. ── */
.ft-row { align-items: flex-end !important; }
.ft-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.ft-row > .ft-col-bare { flex: 0 1 auto; }
.ft-row > .ft-col-bare > .field, .ft-row > .ft-col-bare > input, .ft-row > .ft-col-bare > select { width: auto; flex: none; }
.ft-host > .ft-col > .field, .ft-host > .ft-col > .ux-dwrap, .ft-host > .ft-col > .fi-dwrap, .ft-host > .ft-col > .ld-dwrap { width: 100%; }
.ft-lbl { font-size: var(--sub-size); font-weight: 600; line-height: 15px; color: var(--ink); -webkit-text-fill-color: var(--ink); white-space: nowrap; }
/* o PREFIXO FIXO que fica dentro (LD#, IV#... — 6.2) ancora pelo PE quando o
   rotulo mora no mesmo involucro: a 50% do bloco ele caia entre o rotulo e o
   campo (Paulo 20/09/2026: "LD# no meio do campo branco") */
/* o #app-root e para VENCER a regra do modulo (#section-x .ld-dpref { top: 50% }) — id contra id, mais classes ganha */
#app-root .ft-host > .ft-col > .ld-dpref, #app-root .ft-host > .ft-col > .fi-dpref, #app-root .ft-host > .ft-col > .ux-dpref { top: auto; bottom: calc(var(--ctl-h) / 2); transform: translateY(50%); }
.ft-host > .ft-col { position: relative; }
.ft-hidden { display: none !important; }
.ft-noprefix.ux-dinp, .ft-noprefix.fi-dinp, .ft-noprefix.ld-dinp, .ft-noprefix.ux-dinp-wide, .ft-noprefix.fi-dinp-wide { padding-left: 11px !important; }
/* ── CAIXA DE FILTRO NAO ENCOLHE COM A LISTA (Paulo 21/09/2026, print do
   Catalog Builder com Category/Subcategory em 60px sob New arrivals: "os
   filtros estao muito curtos... errado, corrigir e varrer o sistema").
   Um select de filtro sem largura declarada mede o CONTEUDO: com a lista
   derivada vazia (fonte sem categorias, grupo sem opcoes) a caixa vira so
   a seta. A largura de caixa de filtro e da CAIXA, nunca da lista — o
   minimo da casa e o mesmo 150px que cu/sa/sv/in-fsel ja declaram. Modulo
   que divide a fileira por igual (Products, Catalog Builder) vence pela
   coluna; quem quiser menos declara o proprio min-width. ── */
#app-root :is([class*="-filters"], .shw-tools) select { min-width: 150px; }

/* ═══ TODA BARRA QUE NAO CABE ROLA — nunca trunca (Paulo 21/09/2026, iPad
   na mesma rede: "quero as barras rolando pq no ipad estao todas
   truncadas"). Lei 11.243. As duas BARRAS do sistema, a mesma cura da
   tabela larga (UX Lab 5: a PAGINA nunca rola na horizontal); a fileira
   de filtros tem lei propria (11.242: o campo cede ate o piso e so entao
   a fileira quebra a linha):
   1. MENU PRINCIPAL (.nav) — abaixo de 1180px ja rolava, mas os itens
      seguiam encolhendo (min-width 0) e o texto sobrepunha em vez de
      o trilho rolar; agora o item nao cede (flex-shrink 0) e o trilho
      desliza sob o dedo, sem barra aparente.
   2. TRILHO DE ABAS — a orelha nunca fica menor que o rotulo
      (min-width max-content): cabendo, cresce ate encher a linha
      (regra de 16/09 intacta); nao cabendo, o trilho ROLA. A regua
      dourada deixa de ser border (fora da caixa rolavel, seria cortada
      pela aba ativa) e vira o fundo dos 2px de padding-bottom — a
      EMENDA da pasta (aba ativa com margem -2px cobrindo a regua)
      continua exata. --rail-line troca a cor no trilho de baixo do
      Insights.
   ═══ */
@media (max-width: 1180px) {
  .nav { scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-link { flex-shrink: 0; }
}

:is(#section-finances, #section-customers, #section-inventory,
    #section-insights, #section-factorydirect, #section-store,
    #section-services, #section-procurement, #section-support,
    #section-help, #section-settings, #section-sales, #section-products,
    #section-leads, #section-communications)
  :is(div, nav):is(.st-subtabs.st-toptabs, .fi-tabs, .cu-tabs, .in-tabs, .ld-tabs, .cm-tabs,
    .ins-tabs, .fd-tabs, .so-tabs, .sv-tabs, .pc-tabs, .su-tabs,
    .he-tabs, .st-subtabs, .sa-subtabs, .pr-modtabs, .pd-tabs,
    .fi-subtabs, .da-tabs, .cm-subtabs) {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-bottom: 0;
  padding-bottom: 2px;
  background: linear-gradient(var(--rail-line, var(--gold)), var(--rail-line, var(--gold))) left bottom / 100% 2px no-repeat;
}
:is(#section-finances, #section-customers, #section-inventory,
    #section-insights, #section-factorydirect, #section-store,
    #section-services, #section-procurement, #section-support,
    #section-help, #section-settings, #section-sales, #section-products,
    #section-leads, #section-communications)
  :is(div, nav):is(.st-subtabs.st-toptabs, .fi-tabs, .cu-tabs, .in-tabs, .ld-tabs, .cm-tabs,
    .ins-tabs, .fd-tabs, .so-tabs, .sv-tabs, .pc-tabs, .su-tabs,
    .he-tabs, .st-subtabs, .sa-subtabs, .pr-modtabs, .pd-tabs,
    .fi-subtabs, .da-tabs, .cm-subtabs)::-webkit-scrollbar { display: none; }
:is(#section-finances, #section-customers, #section-inventory,
    #section-insights, #section-factorydirect, #section-store,
    #section-services, #section-procurement, #section-support,
    #section-help, #section-settings, #section-sales, #section-products,
    #section-leads, #section-communications)
  :is(div, nav):is(.st-subtabs.st-toptabs, .fi-tabs, .cu-tabs, .in-tabs, .ld-tabs, .cm-tabs,
    .ins-tabs, .fd-tabs, .so-tabs, .sv-tabs, .pc-tabs, .su-tabs,
    .he-tabs, .st-subtabs, .sa-subtabs, .pr-modtabs, .pd-tabs,
    .fi-subtabs, .da-tabs, .cm-subtabs)
  > :is(button, a) { min-width: max-content; }
#section-insights .ins-tabs:not(.ins-deps) { --rail-line: var(--line); }


/* ═══ NUNCA PRA FORA (lei 11.242, Paulo 21/09/2026: "nao deixa botao pra fora
   nunca, isso e regra"). Fileira de filtros: quando a fileira nao cabe, o
   CAMPO CEDE ate um piso (a caixa do select nunca vira so a seta — o piso
   de 11.225 desce de 150 para 96 e o de texto para 80) e, se ainda assim nao
   couber, a fileira QUEBRA A LINHA — o Filter e o Clear ficam a vista, na
   ultima linha, nunca atras de um rolo nem fora do cartao. Barra que rola
   fica para o iPad (abaixo de 1180, onde o dedo rola). */
@media (min-width: 1180px) {
  #app-root :is([class*="-filters"], .shw-tools) { flex-wrap: wrap; row-gap: 10px; overflow-x: visible; }
  #app-root :is([class*="-filters"], .shw-tools) > .ft-col { flex: 1 1 0; min-width: 96px; }
  #app-root :is([class*="-filters"], .shw-tools) > .ft-col-bare { flex: 0 1 auto; min-width: 0; }
  #app-root :is([class*="-filters"], .shw-tools) select { min-width: 96px; }
  #app-root :is([class*="-filters"], .shw-tools) input.field { min-width: 80px; }
  /* a .rv-filters (Reports e Finances > Reports) e NOWRAP por lei propria (6.4, 23/09/2026:
     "as seis caixas cedem por igual, uma linha so"): o bloco acima a apanhava por ser
     [class*="-filters"] e a fileira QUEBRAVA — o auditor acusou em 01/10/2026 */
  #app-root .rv-filters { flex-wrap: nowrap; }
}

/* ═══ BOTÃO DE FLUXO — UM TAMANHO SÓ NO SISTEMA, METADE DO JOURNEY DO LEADS
   (Paulo 22/09/2026: "faz uma regra: os botões de fluxo em todo o sistema devem
   ser do mesmo tamanho, metade do que aparece no fluxo do Leads; faz os fluxos
   com botões do mesmo tamanho"; lei 11.272, Adendo 261, pacote 324).
   Todo degrau de fluxo — o trilho da venda (.sa-stagestep), a escada do lead
   (.cu-stagestep) e o Journey do lead/cliente (.cu-jstep) — mede o MESMO:
   140px de largura (metade dos ~285 do Journey que enchia a linha em cinco),
   a altura do controle (--ctl-h), o corpo de 13, texto centrado, pílula.
   O Journey deixa de esticar em grade: fileira de pílulas iguais. Módulo
   nenhum redefine largura ou altura de degrau de fluxo. ═══ */
#app-root .sa-stagestep[class][class], #app-root .cu-stagestep[class][class], #app-root .cu-jstep[class][class] {
  box-sizing: border-box; width: 140px; min-width: 140px; max-width: 140px; height: var(--ctl-h); line-height: calc(var(--ctl-h) - 2px);
  padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--body-size); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
#app-root .cu-jsteps[class][class] { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; }
#app-root .cu-jstep[class][class] .cu-jl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a saída (Expired · Lost · Discarded…) mantém a forma reta com a barra à esquerda (UX Lab 6) */
#app-root .sa-stagestep.is-off[class][class], #app-root .cu-stagestep.is-off[class][class] { border-radius: 0; }

/* ═══ O DEGRAU DE FLUXO É O DO JOURNEY DO LEADS — NÚMERO NO CÍRCULO E AS
   MESMAS CORES (Paulo 22/09/2026: "faz as caixas do sale do mesmo jeito das
   caixas do journey leads, com números" + "e as mesmas cores, faz disso uma
   regra"; emenda à lei 11.272, pacote 324). O Journey é a REFERÊNCIA: o que
   ele veste, todo fluxo veste — pílula de 140 × --ctl-h, número em círculo de
   22px com a tinta do próprio degrau, rótulo ao lado, e as três cores:
   por fazer = branco com régua fina e tinta secundária; vencido = ouro claro
   com moldura dourada e tinta do corpo; atual = OURO CHEIO com tinta do corpo
   (nunca branco) e peso 600. ═══ */
#app-root .sa-stagestep[class][class], #app-root .cu-stagestep[class][class], #app-root .cu-jstep[class][class] {
  gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); font-weight: 400;
}
#app-root .sa-stagestep.is-done[class][class], #app-root .cu-stagestep.is-done[class][class], #app-root .cu-jstep.is-done[class][class] {
  border-color: var(--gold); background: var(--gold-faint); color: var(--ink); -webkit-text-fill-color: var(--ink);
}
#app-root .sa-stagestep.is-now[class][class], #app-root .cu-stagestep.is-now[class][class], #app-root .cu-jstep.is-now[class][class] {
  background: var(--gold); border-color: var(--gold); color: var(--ink); -webkit-text-fill-color: var(--ink); font-weight: 600;
}
#app-root .sa-stagen, #app-root .cu-jn {
  display: inline-flex; width: 22px; height: 22px; flex: none; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid currentColor; font-variant-numeric: tabular-nums; font-size: 12px;
}
#app-root .sa-stagel, #app-root .cu-jstep .cu-jl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A PILULA DO JOURNEY DO LEAD ANDA (Paulo 01/10/2026: "deixa clicar nos botoes para adiantar ou back no
   processo"): o degrau clicavel mostra a mao e a moldura dourada no hover; a fase ABERTA pelo clique (Account,
   quando o trilho ainda nao chegou nela) leva a moldura dourada de 2px — cor nenhuma nasce. O Sales Flow
   continua so mostrando (11.279-J): o data-jstep so existe no Journey do lead. */
#app-root .cu-jstep.is-click[class][class] { cursor: pointer; }
#app-root .cu-jstep.is-click[class][class]:hover, #app-root .cu-jstep.is-click[class][class]:focus-visible { border-color: var(--gold); outline: none; }
#app-root .cu-jstep.is-open[class][class] { border: 2px solid var(--gold); line-height: calc(var(--ctl-h) - 4px); }

/* ═══ OS AJUDANTES DO OPERADOR (lei 11.285, Adendo 286, pacote 349 —
   Paulo 23/09/2026: "hover over e ve a foto do produto sem mexer, acoes
   que facilitam para o operador" → "gostei do meu original mesmo com
   esses ajudantes, pode colocar no sistema"). Comportamento em
   shared/operator-helpers.js (um script, sem chamada — como o
   photo-lightbox). NADA AQUI MUDA O LAYOUT: sao camadas que flutuam por
   cima da tela (position: fixed) e somem. Cores: SO as da casa — cartao
   na superficie com a moldura da casa, botao secundario dourado leve
   (11.85), toast preto (4.6). ═══ */
.op-peek {
  position: fixed; z-index: 90; width: 300px; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease;
  background: var(--surface); color: var(--ink); -webkit-text-fill-color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18); overflow: hidden;
}
.op-peek.is-on { opacity: 1; transform: none; }
.op-peek.is-pinned { pointer-events: auto; width: 440px; }
.op-peek.is-customer { width: 340px; }
.op-peek-img { display: block; width: 100%; height: 210px; object-fit: cover; background: var(--surface-alt); }
.op-peek.is-pinned .op-peek-img { height: 340px; object-fit: contain; }
.op-peek-noimg { height: 120px; display: grid; place-items: center; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); font-size: var(--sub-size); background: var(--surface-alt); }
.op-peek-body { padding: 12px 14px 14px; }
.op-peek-name { font-weight: 600; font-size: var(--t3-size); line-height: 19px; margin-bottom: 3px; }
.op-peek-sub { color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); font-size: var(--sub-size); margin-bottom: 10px; }
.op-peek-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.op-peek-k { font-size: var(--t4-size); font-weight: 600; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); margin-bottom: 2px; }
.op-peek-v { font-size: var(--body-size); font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-peek-v.is-zero { color: var(--red); -webkit-text-fill-color: var(--red); }
.op-peek-pill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green); -webkit-text-fill-color: var(--green); font-size: var(--t4-size); letter-spacing: var(--label-tracking); text-transform: uppercase; }
.op-peek-pill.is-off { background: var(--red-soft); color: var(--red); -webkit-text-fill-color: var(--red); }
.op-peek-x {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: var(--radius-pill); border: 0;
  background: rgba(0, 0, 0, .55); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: 16px; line-height: 1; cursor: pointer; display: none;
}
.op-peek.is-pinned .op-peek-x { display: grid; place-items: center; }

.op-rowacts {
  position: fixed; z-index: 80; display: none; gap: 4px; padding: 4px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}
.op-rowacts.is-on { display: flex; }
.op-rowacts button {
  appearance: none; height: 26px; padding: 0 10px; border-radius: var(--radius); cursor: pointer; white-space: nowrap;
  background: var(--gold-soft); border: 1px solid var(--gold); color: var(--ink); -webkit-text-fill-color: var(--ink);
  font: 600 var(--sub-size) / 1 var(--font-text);
}
.op-rowacts button:hover { background: var(--gold-light); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }

.op-palette {
  position: fixed; inset: 0; z-index: 95; display: none; align-items: flex-start; justify-content: center;
  padding-top: 12vh; background: rgba(23, 24, 26, .35);
}
.op-palette.is-on { display: flex; }
.op-palette-box {
  width: min(620px, 92vw); background: var(--surface); color: var(--ink); -webkit-text-fill-color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); overflow: hidden;
}
.op-palette-in {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--ink); -webkit-text-fill-color: var(--ink); font: 500 16px / 1 var(--font-text); padding: 16px 18px; outline: none;
}
.op-palette-list { max-height: 50vh; overflow: auto; padding: 6px; }
.op-palette-it { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius); cursor: pointer; font-size: var(--body-size); }
.op-palette-it.is-sel, .op-palette-it:hover { background: var(--gold-soft); }
.op-palette-k { font-size: var(--t4-size); font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-tracking); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); width: 68px; flex: none; }
.op-palette-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-palette-sw { flex: none; font-size: var(--t4-size); font-weight: 600; letter-spacing: var(--label-tracking); text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--line-soft); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.op-palette-sw.is-on { background: var(--green-soft); color: var(--green); -webkit-text-fill-color: var(--green); }
.op-palette-empty { padding: 18px; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); font-size: var(--body-size); }

.op-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 10px); z-index: 97; background: var(--ink); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
  padding: 10px 16px; border-radius: var(--radius-pill); font: 500 var(--sub-size) / 1 var(--font-text); opacity: 0; transition: .15s; pointer-events: none;
}
.op-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── A BARRA DE PROGRESSO NO PE E O CLIQUE QUE NAO SE REPETE (Paulo 29/09/2026) ──
   shared/busy-bar.js: pedido nascido de um clique que passa de 0,7 s acende a
   barra; o botao que disparou fica ocupado ate a resposta. Acima do rodape e
   das pilulas (z-index), sem pegar clique (pointer-events: none). */
.busy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; display: flex; flex-direction: column-reverse; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s; }
.busy-bar.is-on { opacity: 1; transform: none; }
.busy-bar-track { position: relative; height: 4px; overflow: hidden; background: var(--gold-soft); }
.busy-bar-run { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--gold); animation: busy-bar-run 1.2s ease-in-out infinite; }
.busy-bar-text { width: max-content; max-width: calc(100% - 32px); margin: 0 auto 12px; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--ink); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font: 500 var(--sub-size) / 1.3 var(--font-text); text-align: center; }
.busy-bar.is-warn .busy-bar-run { animation: none; left: 0; width: 100%; background: var(--red); }
.w18k-busy { cursor: progress !important; opacity: .6; }
/* o Save esperando o deploy (Paulo 06/10/2026): "Wait" no MESMO bloquinho do "Saved" (.ux-toast) e a tela travada */
.busy-bar.is-wait .busy-bar-text { margin-bottom: 22px; padding: 11px 18px; border-radius: 10px; font-size: var(--body-size); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.busy-lock { position: fixed; inset: 0; z-index: 98; background: transparent; cursor: wait; }
@keyframes busy-bar-run { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .busy-bar-run { animation-duration: 3s; } }

/* ── O CODIGO DE BARRAS DO DOCUMENTO + O QR NO PE (25/09/2026) ──────
   shared/barcode.js > docBarcodeHtml: no lugar onde o QR morava (a
   direita da caixa do cliente); o QR desce para perto do rodape,
   centralizado. Mesmo desenho em todo papel (sa-doc, fi-doc, pc-doc). */
.doc-bc { flex: none; display: flex; align-items: center; justify-content: flex-end; }
.doc-bc svg { display: block; height: 40px; width: auto; max-width: 180px; }   /* 58 -> 40 (Paulo 25/09: "pode fazer os barcodes menor") */
.doc-qrfoot { display: flex; justify-content: center; margin: 18px 0 6px; break-inside: avoid; page-break-inside: avoid; }
.doc-qrfoot svg { width: 72px; height: 72px; display: block; }

/* ═══ O OFFICE NO CELULAR (Paulo 27/09/2026, print do Settings no iPhone:
   "ajusta pra o celular tambem o site w18k.office, varre tudo e ajusta pra
   ficar facil de usar"). So abaixo de 700px; o computador nao muda.
   O conteudo e o MESMO do computador (Adendo 363) — aqui so muda a
   DISPOSICAO: o topo em duas linhas, a busca e os botoes quebrando linha
   (excecao declarada a lei de 11/09 "a linha de busca nunca quebra", que e
   da mesa), a fileira de filtros com duas caixas por linha e o Filter/Clear
   inteiros, a faixa Needs attention empilhada, tabela larga rolando DENTRO
   da propria caixa (a pagina nunca rola para o lado — UX Lab 5) e campo com
   16px, senao o iPhone da zoom ao tocar. ═══ */
@media (max-width: 700px) {
  /* topo em UMA linha (Paulo 13/10/2026, print do iPhone: "tira nome user e
     coloca avatar, WhatsApp, System health, bonequinho e exit em uma linha so"):
     avatar · WhatsApp · System a esquerda, perfil e sair a direita (nome e selos
     curtos: bloco TOPO QUE CABE). Os dois assistentes na 2a linha. */
  .chrome-inner { padding: 10px 16px; gap: 10px; }
  .chrome-inner-low { padding-top: 0; padding-bottom: 0; }
  .chrome-user { flex-wrap: wrap; width: 100%; row-gap: 8px; column-gap: 8px; }
  .chrome-user > :is(#walink-bar, #syshealth-bar) { margin-left: 0 !important; }
  .chrome-profile { order: 1; margin-left: auto; }
  .chrome-logout { order: 2; }
  .chrome-user::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .chrome-hp { order: 4; flex: 1 1 0; min-width: 0; justify-content: center; height: 32px; padding: 0 8px; white-space: nowrap; }
  .chrome-hp[hidden] { display: none; }
  /* a 320-360px as palavras inteiras (WhatsApp, System) so cabem com o selo e o
     vao mais justos (o padding do selo vem do script, por isso o !important) */
  @media (max-width: 360px) {
    .chrome-user { column-gap: 6px; }
    .chrome-user > :is(#walink-bar, #syshealth-bar) { padding-left: 7px !important; padding-right: 7px !important; }
  }
  /* no celular o topo e so o que se usa (Paulo 27/09/2026: "nao importo de ser
     diferente do computador, nao precisa aparecer logo no top menu") */
  .chrome-logos { display: none; }

  /* titulo */
  #app-root .page-title.module, #app-root h1.page-title { font-size: 24px; }

  /* busca e botoes: a busca na linha inteira, os botoes quebram embaixo */
  #app-root .search-row[class] { flex-wrap: wrap; row-gap: 8px; }
  #app-root .search-row[class] > .search-bar,
  #app-root .search-row[class] > [class*="search"]:not(button):not(.btn) { flex: 1 1 100%; min-width: 0; width: 100%; }
  #app-root .search-row[class] > :is(button, a, label, .btn) { flex: 1 1 auto; justify-content: center; }
  #app-root .search-row[class] > span:not([class*="search"]):not([hidden]) { flex: 1 1 auto; max-width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  #app-root .search-row[class] > span:not([class*="search"]) > :is(button, a, .btn) { flex: 1 1 auto; justify-content: center; }
  #app-root .search-row[class] > span:not([class*="search"]) span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; white-space: normal; }

  /* Needs attention: o titulo em cima, as pastilhas embaixo, nada cortado */
  #app-root .attn-panel[class] { flex-direction: column; align-items: stretch; gap: 10px; }
  #app-root .attn-grid { gap: 8px; }
  #app-root .attn-card[class] { max-width: 100%; flex: 1 1 auto; justify-content: space-between; }
  #app-root .attn-l { overflow: hidden; text-overflow: ellipsis; }

  /* fileira de filtros: duas caixas por linha; Filter e Clear inteiros */
  #app-root :is([class*="-filters"], [class*="-tools"])[class][class] { flex-wrap: wrap; row-gap: 10px; column-gap: 10px; overflow-x: visible; }
  #app-root :is([class*="-filters"], [class*="-tools"])[class][class] > * { flex: 1 1 calc(50% - 10px); min-width: 0; max-width: 100%; }
  #app-root :is([class*="-filters"], [class*="-tools"])[class][class] > :is(button, .btn, [class*="-actions"]) { flex: 1 1 auto; }
  #app-root :is([class*="-filters"], [class*="-tools"])[class][class] :is(select, input, .field):not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; max-width: 100%; flex: 1 1 auto; }
  #app-root :is([class*="-filters"], [class*="-tools"])[class][class] :is(.ft-col, .ft-host, label) { min-width: 0; max-width: 100%; }
  #app-root :is([class*="-filters"], [class*="-tools"]) .ft-lbl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app-root :is([class*="-filters"], [class*="-tools"])[class] > [class*="-actions"][class] { flex: 1 1 100%; margin-left: 0; }
  #app-root [class*="-filter-actions"] { display: flex; flex-wrap: wrap; gap: 10px; }
  /* a caixa Description do Products (regra propria de largura na mesa) vai na linha inteira */
  #app-root .pr-filters[class][class] > .ft-col-bare:has(> .pr-fdesc) { flex: 1 1 100%; }
  #app-root .pr-filters[class][class] .pr-fdesc { min-width: 0; }
  /* campo de data tem largura minima propria no celular: vai na linha inteira */
  #app-root :is([class*="-filters"], [class*="-tools"])[class][class] > :has(input[type="date"]) { flex-basis: 100%; }
  #app-root :is([class*="-filters"], [class*="-tools"]) input[type="date"] { min-width: 0; }
  /* o cartao Today do Dashboard no celular: a folha do calendario a esquerda e,
     ao lado, SO o numero com o que ele e (Paulo 30/09/2026: "se nao couber poe so
     os numeros no calendario com o que e, so no celular"); a frase e o Next ficam
     para a mesa, e cada linha continua levando ao modulo dono */
  #app-root .db-kpi.db-today { flex-direction: row; align-items: stretch; gap: 14px; }
  #app-root .db-kpi.db-today > * { min-width: 0; max-width: 100%; }
  #app-root .db-kpi.db-today .db-cal { flex: 0 0 132px; width: 132px; }
  #app-root .db-kpi.db-today .db-agenda { justify-content: center; }
  #app-root .db-kpi.db-today .db-agrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; min-height: 44px; }
  #app-root .db-kpi.db-today .db-agmod { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app-root .db-kpi.db-today .db-agn { font-size: var(--t2-size); line-height: 1; }
  #app-root .db-kpi.db-today :is(.db-agt, .db-agenda-next) { display: none; }
  /* os titulos das caixas do Dashboard moram em dashboard-office.css (iguais na mesa e no celular) */
  #app-root [class*="-filter-actions"] > * { flex: 1 1 auto; }

  /* acoes da pagina e do cartao quebram linha em vez de sair da tela */
  #app-root :is(.page-actions, [class*="-actions"], [class*="-tools"], [class*="-toolbar"], .tbl-foot, .tbl-foot-ctl) { flex-wrap: wrap; row-gap: 8px; }
  #app-root .tbl-foot { justify-content: flex-start; gap: 8px; }
  #app-root .page-actions { height: auto !important; min-height: var(--ctl-h); }
  #app-root .page-head { height: auto !important; }
  /* rotulo comprido quebra em duas linhas: fora da tabela o botao cresce para caber */
  #app-root :not(td) > .btn { height: auto; min-height: var(--ctl-h); padding-top: 5px; padding-bottom: 5px; line-height: 1.2; }

  /* tabela larga rola dentro da caixa dela: o pai direto de toda tabela vira
     caixa de rolagem ja na carga (se esperasse o JS, o celular abria a pagina
     afastada pela tabela larga e nao voltava) */
  /* sem max-width: a caixa da tabela estica ate a moldura do cartao por margem
     negativa (a tabela cola na borda); limitar a largura deixava a faixa branca */
  #app-root :has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* a largura fixa das colunas e da mesa (11.241): no celular a tabela mede o
     conteudo e rola, nunca espreme coluna em cima de coluna */
  #app-root table:not(.no-mob)[class], #app-root table:not(.no-mob) { table-layout: auto !important; width: auto !important; min-width: 100% !important; }
  /* a linha fica na regua de 44: celula numa linha so; quem nao cabe rola a tabela.
     A linha de estado vazio (colspan) continua quebrando */
  #app-root table:not(.no-mob) :is(th, td):not([colspan]) { white-space: nowrap; }
  #app-root table:not(.no-mob) td:not([colspan]) > :is(div, span) { white-space: nowrap; }
  #app-root table:not(.no-mob) td :is([class*="-actions"], [class*="-acts"], [class*="-act"]) { flex-wrap: nowrap; }

  /* grades de campos e de cartoes: uma coluna */
  #app-root :is([class*="-grid-4"], [class*="-grid-3"], [class*="-grid-2"], .fi-fx-grid-4, .pc-grid) { grid-template-columns: 1fr !important; }

  /* seletor de opcoes (segmented): rola dentro dele, como o trilho de abas */
  #app-root :is([class$="-seg"], [class*="-seg "]) { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #app-root :is([class$="-seg"], [class*="-seg "]) > * { flex-shrink: 0; }

  /* fileira de numeros (KPIs): duas colunas que encolhem; numero grande quebra */
  #app-root [class*="-kpis"]:not([class*="-kpis-"]),
  #app-root [class*="-kpis-"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #app-root [class*="-kpi"] { min-width: 0; }
  #app-root [class*="-kpi-value"] { overflow-wrap: anywhere; }
  /* o Dashboard nao e fileira de numeros: calendario e ouro sao dois cartoes
     inteiros, um embaixo do outro (Paulo 30/09/2026: "pessimo no celular") */
  #app-root .db-kpis[class] { grid-template-columns: 1fr !important; }
  #app-root .db-kpis > * { height: auto; }

  /* campo com 16px: o iPhone nao da zoom ao tocar */
  #app-root :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
  .container { padding: 16px; }
}

/* A LUPA PRETA ENCOSTA NO FIM DA BARRA (Paulo 27/09/2026: "a barra negra no
   search nao esta exatamente no final como deveria ser"): a barra tinha 14px
   de respiro a direita e a lupa parava 16px antes da moldura. Com a lupa
   dentro, o respiro direito some e ela cobre a moldura da ponta, em todo
   modulo e em toda largura. */
#app-root :is(.search-bar, .st-search, [class*="search"]):has(> .search-go) { padding-right: 0 !important; }
#app-root :is(.search-bar, .st-search, [class*="search"]) > .search-go { margin-right: -2px; border-radius: 0 var(--radius) var(--radius) 0; }

/* RODAPE DO OFFICE (Paulo 27/09/2026: "faz os rodapes com o all rights
   reserved e na dashboard o botao la embaixo back to top"): a linha do
   direito autoral em toda tela, na medida do container, com a regua do
   rodape do login; o Back to top (botao da casa) so no Dashboard. */
.app-foot {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--title-offset-x) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.app-foot-line {
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  text-align: center;
  font-size: var(--body-size);
  font-weight: 600;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}
.app-foot-top { display: none; }
body:has(#section-dashboard.is-active) .app-foot-top { display: inline-flex; }
body:has(> .logout-page) .app-foot { display: none; }
/* O RODAPE FICA NO PE DA TELA (Paulo 27/09/2026: "corrige no cel e na versao
   computador tb"): em pagina curta ele subia para o meio da tela, colado no
   fim do conteudo. O corpo vira coluna da altura da janela e o conteudo
   empurra o rodape para baixo; pagina longa segue igual. */
body:has(> #app-foot) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:has(> #app-foot) > #app-root { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
body:has(> #app-foot) > #app-foot { flex: none; width: 100%; box-sizing: border-box; }
/* ═══ 18K MIAMI REWARDS (27/09/2026, Adendo 366): o bloco compartilhado
   (shared/rewards-block.js) — Customers › ficha do consumer e Sales ›
   Payment. Titulo FORA da caixa (11.234), cartao da casa, campos na regua
   do token, nenhuma cor nova: status verde = pilula, pendente = canto,
   o resto na tinta. ═══ */
.rw-block { margin: 0 0 18px; min-width: 0; }
.rw-block-t { margin: 0 0 10px; font-size: var(--t3-size); font-weight: 600; letter-spacing: -.01em; }
.rw-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.rw-card:has(> .rw-tw) { padding: 0; overflow: hidden; }
.rw-tw { overflow-x: auto; }
.rw-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.rw-row + .rw-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.rw-f { display: flex; flex-direction: column; min-width: 140px; flex: 1 1 140px; }
.rw-f-wide { flex: 2 1 260px; }
.rw-f-btn { flex: 0 0 auto; min-width: 0; }
.rw-flags { align-items: center; }
.rw-flags .rw-f { flex: 0 0 auto; min-width: 0; }
.rw-grow { flex: 1 1 auto; }
.rw-ro { display: flex; align-items: center; background: var(--gold-soft); border: 1px solid var(--line); height: var(--ctl-h); overflow: hidden; white-space: nowrap; }
.rw-num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.rw-cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.rw-inline { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rw-inline .rw-ro { flex: 1 1 auto; min-width: 0; }
.rw-picks { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; }
.rw-picks:empty { display: none; }
.rw-err { color: var(--red); -webkit-text-fill-color: var(--red); font-size: 12px; margin-top: 4px; }
.rw-st { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 17px; padding: 0 8px; border-radius: 4px; vertical-align: middle; margin: -1px 0; color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); background: var(--surface-alt); }
.rw-st-available { border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green); -webkit-text-fill-color: var(--green); }
.rw-st-pending { background: var(--gold-soft); }

/* VIEW AS (28/09/2026): a faixa do admin vendo como outra pessoa — no fluxo da pagina (sticky
   zero), tinta da casa, o Back no token */
.viewas-bar { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px; background: var(--ink); color: #fff; -webkit-text-fill-color: #fff; font-size: var(--body-size, 13px); }
.viewas-bar b { font-weight: 600; }
.viewas-bar .btn { height: var(--ctl-h); margin: 0; }

/* DATA TORTA (29/09/2026, shared/date-guard.js): o campo fica com a moldura vermelha e o motivo embaixo */
input.dg-bad, input.dg-bad:focus { border-color: var(--red) !important; }

/* LOGIN-CABE-3009 (Paulo 30/09/2026: "essa tela entre inteira, sem nenhum tipo de rolagem... diminui um pouco a caixa do sign-in" + "faz isso com todas as telas de login de todos os sites, vira regra"):
   a tela de entrada do Office cabe inteira na janela; cartao mais compacto, nada escondido */
.logout-page { min-height: 100dvh; }
.login-mid { padding: 20px 16px; }
.login-card { width: 440px; padding: 22px 32px 18px; }
.login-sub { margin-bottom: 10px; }
.login-card .btn { margin-top: 12px; }
.login-card .pwl-or { margin: 12px 0 8px; }
.login-card .pwl-btn { padding: 9px 16px; margin-top: 8px; }
.login-note { margin-top: 10px; }
.login-foot { padding: 12px; }
@media (max-height: 700px) {
  .login-band { height: 52px; }
  .login-band .login-band-miami { height: 32px; }
  .login-mid { padding: 10px 16px; }
  .login-card { padding: 18px 28px 14px; }
  .login-card .pwl-btn { padding: 8px 16px; margin-top: 6px; }
  .login-note { margin-top: 8px; }
  .login-foot { padding: 9px; }
}

/* ═══ MESSAGES TO SEND (30/09/2026, Paulo: "as mensagens... sejam lidas antes pelo
   vendedor... na tela onde ela esta trabalhando, nao em uma outra tela"): a caixa
   unica (shared/message-inbox.js) que vive no Dashboard, na ficha do cliente e do
   lead, no Auto campaigns e no Broadcast. Titulo fora (11.234), cartao da casa,
   texto editavel, Send · Discard no token. Cores da casa; status por cor e forma. ═══ */
#app-root .mi-block { margin: 0 0 18px; }
#app-root .mi-title { margin: 0 0 10px; font-size: var(--t3-size); font-weight: 600; color: var(--ink); -webkit-text-fill-color: var(--ink); display: flex; align-items: center; gap: 8px; }
/* o titulo da caixa com o Discard all a direita (04/10/2026) */
#app-root .mi-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
#app-root .mi-titlerow .mi-title { margin: 0; }
#app-root .mi-count { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--gold); color: var(--ink); -webkit-text-fill-color: var(--ink); font-size: var(--small-size); font-weight: 600; }
#app-root .mi-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel, 16px); padding: 0; }
#app-root .mi-card > .state { margin: 14px 16px; }
#app-root .mi-item { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
#app-root .mi-item:last-child { border-bottom: 0; }
#app-root .mi-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
#app-root .mi-who { font-weight: 600; min-width: 0; }
#app-root .mi-who .mi-sub { font-weight: 400; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
#app-root .mi-link { color: var(--green); -webkit-text-fill-color: var(--green); text-decoration: none; }
#app-root .mi-link:hover { text-decoration: underline; }
#app-root .mi-meta { flex: 1 1 auto; min-width: 0; font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-root .mi-st { display: inline-block; height: 19px; line-height: 17px; padding: 0 8px; font-size: var(--small-size); font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink); -webkit-text-fill-color: var(--ink); border-radius: 4px; }
#app-root .mi-st-pending { background: var(--gold-soft); border-color: var(--gold); }
#app-root .mi-st-held { background: var(--gold-faint); border-color: var(--gold); }
#app-root .mi-st-failed, #app-root .mi-st-blocked { border-radius: 0; border-left: 3px solid var(--red); background: var(--red-soft); }
#app-root .mi-incoming { padding: 8px 12px; margin: 0 0 8px; border-left: 3px solid var(--gold); background: var(--gold-faint); font-size: var(--body-size); line-height: 1.45; white-space: pre-wrap; }
/* O QUE A ATIVIDADE DO CLIENTE DIZ (30/09/2026, auto-sense): pecas vistas, carrinho, ultima mensagem — ao lado do texto, em leitura */
#app-root .mi-sense { margin: 0 0 8px; font-size: var(--sub-size); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); line-height: 1.45; }
#app-root .mi-text { width: 100%; height: auto; min-height: 84px; resize: vertical; padding: 8px 10px; margin: 0; }
#app-root .mi-err { margin: 6px 0 0; font-size: var(--sub-size); color: var(--red); -webkit-text-fill-color: var(--red); }
#app-root .mi-acts { display: flex; justify-content: flex-end; gap: 8px; margin: 10px 0 0; }
#app-root .mi-acts:empty { display: none; }

/* ══ A BUSCA DE REGISTROS (Paulo 01/10/2026: "menos IA e mais vendedor"): o
   complemento miudo da linha da paleta (codigo, telefone, cidade) e a LISTA
   DE RESULTADOS da busca do Dashboard, que reusa a linha da paleta Ctrl+K
   (.op-palette-it) num cartao sob a barra — um desenho so para o mesmo
   motor (findRecords do operator-helpers). ═══════════════════════════════ */
.op-palette-sub { color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.op-findlist {
  margin: 12px 0 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08); max-height: 50vh; overflow: auto;
}
.op-findlist[hidden] { display: none; }

/* A LUZ DE SAUDE SAIU DO TOPO (Paulo 08/10/2026: "System health faz o que a bolinha faz entao pode
   tirar ela"): o selo System health (shared/sys-health-chip.js) e o unico sinal de saude */

/* ═══ DINHEIRO POSITIVO EM PRETO, NEGATIVO EM VERMELHO (Paulo 01/10/2026: "no
   sistema da W18k numeros positivos em preto e negativos em vermelho" + "os
   valores de dinheiro que devem ser vermelhos apenas"; lei 11.341). O numero
   positivo e TINTA DO CORPO — verde e cor de ESTADO confirmado (pilula,
   botao, ponto), nunca de numero; vermelho numa palavra (late, blocked,
   Rush) continua sendo alerta (UX Lab 6); percentual, dias e razao com sinal
   ficam na tinta do corpo. SO O DINHEIRO NEGATIVO (-$) vai em vermelho. Quem
   acha o negativo e o passe signColorPass
   do core/app.js (motor shared/sign-color.js) e envolve o trecho neste
   span; modulo nenhum pinta numero de verde nem desenha o vermelho do
   negativo por conta — as classes de modulo que faziam isso (.ins-pos,
   .money-in, .cu-cr) foram niveladas a esta regra. ═══ */
.num-neg { color: var(--red); -webkit-text-fill-color: var(--red); }
.money-in { color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════
   SUPPORT — O BOTAO DO TOPO (Paulo 01/10/2026: "o user vai abrir o mic ou
   escrever o que acontece na tela e tirar fotos ou mandar arquivo"). O
   painel veste a casca do Ask HP (.hp-drawer/.hp-head/.hp-ctx); aqui so o
   corpo: campo do relato com o Dictate na linha do rotulo, os dois botoes
   de foto/arquivo, a lista dos anexos e o Send no pe. Nenhuma cor nova.
   ══════════════════════════════════════════════════════════════════ */
.sup-body { flex: 1 1 auto; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
/* A CAIXA FLUTUANTE DO WHATSAPP (shared/wa-compose.js, Paulo 02/10/2026): a mesma
   casca .hp-drawer do Support — flutua, arrasta, lembra a posicao; aqui so o
   miolo: a mensagem, a nota do que vai sair, as fotos e Cancel · Send no pe */
.wa-compose .wac-mark { color: var(--green); -webkit-text-fill-color: var(--green); letter-spacing: 0; }
/* quem envia (19/10/2026): nome · numero de quem esta logado, na cor do user (inline; sem cor = ouro); vermelha = numero desligado ou sem numero */
/* (vale tambem no painel de mensagem do lead, .is-wa) */
.wac-from[hidden] { display: none; }
.wac-from { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: var(--sub-size); font-weight: 600; white-space: nowrap; }
.wac-from.is-light { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.wac-from.is-off { background: var(--red) !important; }
.wac-body { flex: 1 1 auto; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.wac-body .field-label { margin: 0; }
/* o campo Customer dentro da caixa (pick, 18/10/2026): em cima da mensagem; sugestao Contact · Company em duas colunas (11.374) */
.wac-pick { flex: none; padding: 14px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.wac-pick .field-label { margin: 0; }
.wac-cust { position: relative; }
.wac-cust .field { width: 100%; }
.wac-opt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; white-space: nowrap; }
.wac-text { width: 100%; min-height: 96px; resize: vertical; font: inherit; }
.wac-note { margin: 0; font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
/* A CONVERSA NA CAIXA (13/10/2026): as mensagens ja trocadas com o numero, em cima da nova — a casa a direita
   (branco), o cliente a esquerda (gold-soft), o estado do pedido no meio; nenhuma cor nova */
.wac-thread { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow: auto; padding: 2px 0; flex: none; }
.wac-msg { max-width: 88%; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: var(--sub-size); }
.wac-msg.is-out { align-self: flex-end; }
.wac-msg.is-in { align-self: flex-start; background: var(--gold-soft); }
.wac-msg.is-state { align-self: center; max-width: 100%; background: transparent; border: 0; padding: 2px 0; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.wac-when { display: block; margin-bottom: 2px; font-size: var(--t4-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.wac-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.wac-link { color: var(--ink); -webkit-text-fill-color: var(--ink); text-decoration: underline; }
.wac-error { color: var(--red); -webkit-text-fill-color: var(--red); }
.wac-pcs { display: flex; flex-wrap: wrap; gap: 8px; }
.wac-pc { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; }
.wac-pc img, .wac-np { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #FFFFFF; }
.wac-np { display: inline-flex; align-items: center; justify-content: center; font-size: var(--t4-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.wac-acts { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); flex: none; }
.wac-acts .db-wa, .wac-acts .wac-send { margin: 0; height: var(--ctl-h); line-height: calc(var(--ctl-h) - 2px); padding: 0 14px; }
.wac-send[disabled] { opacity: .55; cursor: not-allowed; }
/* o Preview do New broadcast mora na mesma caixa (lei 11.386, 03/10/2026): o
   corpo vive no body, fora do #section-communications — as bolhas daqui */
.bc-preview .cu-bcprev { margin: 0 0 14px; }
.bc-preview .cu-bcprev .wac-pcs { margin: 6px 0; }
.bc-preview .cu-bcprev-h { display: flex; align-items: baseline; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.bc-preview .cu-bcprev-h .cu-bccompany { font-weight: 400; font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bc-preview .cu-bcprev-b { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--gold-faint); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0; font-size: var(--body-size); line-height: 1.45; }
.sup-lblrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sup-lblrow .field-label { margin: 0; }
.sup-text { width: 100%; height: auto; min-height: 150px; resize: vertical; line-height: 19px; }
.sup-mic.is-on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-deep); -webkit-text-fill-color: var(--gold-deep); }
.sup-voice { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--sub-size); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
.sup-voice[hidden] { display: none; }
.sup-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }   /* 01/10/2026: Take a photo / Choose a file centrados */
.sup-drop { display: flex; justify-content: center; }
.sup-drop:empty { display: none; }
.sup-row .btn { flex: none; }
.sup-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sup-files[hidden] { display: none; }
.sup-file { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sup-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--surface-alt); flex: none; }
.sup-thumb-doc { display: flex; align-items: center; justify-content: center; font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.sup-fname { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--sub-size); }
.sup-x { appearance: none; width: 26px; height: 26px; flex: none; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); -webkit-text-fill-color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; }
.sup-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
/* a caixa Support tickets do Dashboard (so o developer): o relato corta com reticencias
   dentro da celula (max-width em td e ignorado, 11.129) */
.db-tk-text { display: block; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-tk-acts { white-space: nowrap; }
.db-tk-acts .btn + .btn { margin-left: 6px; }

/* ═══ O EDITOR DO OFFICE (Paulo 01/10/2026: "quero mudar a interface do back
   office tambem, escrever ou descrever os campos das tabelas" + "talvez mude cor e
   fonte ou tamanhos"). Barra sob o chrome (no fluxo, sticky zero), caixinha do
   elemento, gaveta do Theme. So cores da casa; azul nunca; nada escrito sob campo.
   Comportamento em shared/office-editor.js. ═══════════════════════════════════ */
.oe-bar { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: inset 0 -2px 0 var(--gold); }
.oe-bar-inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oe-bar-title { font: 600 var(--t3-size) / 1.2 var(--font-text); color: var(--ink); -webkit-text-fill-color: var(--ink); margin-right: 6px; }
.oe-state { font-size: var(--sub-size); color: var(--gold-deep); -webkit-text-fill-color: var(--gold-deep); font-weight: 600; }
.oe-hint { font-size: var(--sub-size); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.oe-grow { flex: 1 1 auto; }
.oe-versions { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px 12px; }
.oe-versions[hidden] { display: none; }
.oe-versions .table td.r, .oe-versions .table th:last-child { text-align: right; }
/* em edicao, o que se pode clicar ganha contorno ao passar o mouse; o escolhido fica marcado */
.oe-editing #app-root :is(th, label, .tbl-title-out, h2, h3, .page-title, button.btn, a.btn, [class$="-tab"], .st-subtabs button), .oe-editing .nav .nav-link { cursor: pointer; }
.oe-editing #app-root :is(th, label, .tbl-title-out, h2, h3, .page-title, button.btn, a.btn, [class$="-tab"], .st-subtabs button):hover, .oe-editing .nav .nav-link:hover { outline: 2px dashed var(--gold); outline-offset: 2px; }
.oe-selected { outline: 2px solid var(--gold) !important; outline-offset: 2px; }
.oe-pop { position: absolute; z-index: 1200; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: 0 14px 40px rgba(0, 0, 0, .14); padding: 12px 14px 14px; color: var(--ink); -webkit-text-fill-color: var(--ink); font-size: var(--body-size); }
.oe-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-weight: 600; }
.oe-pop-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-f { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.oe-f > span { font-size: var(--sub-size); font-weight: 600; color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
.oe-f .field { width: 100%; }
.oe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.oe-row { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.oe-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--body-size); }
.oe-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.oe-sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.oe-sw.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold); }
.oe-sw-none { background: repeating-linear-gradient(45deg, var(--surface) 0 4px, var(--line) 4px 8px); }
.oe-pop-acts { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.oe-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; z-index: 1190; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -14px 0 40px rgba(0, 0, 0, .10); overflow: auto; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.oe-drawer-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.oe-drawer-head h2 { margin: 0; font: 600 var(--t3-size) / 1.2 var(--font-text); }
.oe-drawer-body { padding: 10px 16px 24px; }
.oe-drawer-t { margin: 14px 0 8px; font: 600 var(--sub-size) / 1.2 var(--font-text); text-transform: uppercase; letter-spacing: .06em; color: var(--gold-deep); -webkit-text-fill-color: var(--gold-deep); }
.oe-tokens .oe-f { margin-bottom: 12px; }
.oe-hex { margin-top: 6px; }
@media (max-width: 700px) { .oe-drawer { width: 100%; } .oe-pop { width: calc(100vw - 24px); left: 12px !important; } }

/* ═══ MES E DIA, SEM ANO (shared/monthday-picker.js) — Paulo 02/10/2026, na
   ficha do cliente: "a data completa com aquele sinal do calendario do lado
   para escolher o mes e o dia so... a caixinha com o dia e o mes, abre,
   calendario, fecha. Sem o ano". Um campo da casa (.field) com o icone
   DENTRO, a direita; o pop-up e o desenho do month-picker (.mp) sem a
   fileira dos dias da semana. Componente global: modulo nenhum o veste. ═══ */
.mdp { position: relative; display: block; width: 100%; }
.mdp .mdp-inp { padding-right: 40px; font-variant-numeric: tabular-nums; }
.mdp-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gold-deep);
  -webkit-text-fill-color: var(--gold-deep);
  cursor: pointer;
  padding: 0;
}
.mdp-btn:hover, .mdp.is-open .mdp-btn { background: var(--gold-soft); }
.mdp-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  width: 266px;
  box-shadow: 0 8px 24px rgba(23, 24, 26, .14);
  border-radius: var(--radius);
}
.mdp-pop[hidden] { display: none; }
.mdp-cal .mp-title { text-transform: none; }
.mdp-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 6px; }
.mdp-grid .mp-day { height: 32px; }

/* A FOTO DECIDE O PUBLISHED (02/10/2026): a caixa Published da ficha e travada — mostra o estado, nao se marca */
.flag.is-locked { background: var(--gold-soft); }
.flag.is-locked input { cursor: default; }

/* A BARRA DA SELECAO NO CABECALHO DA TABELA (04/10/2026, shared/bulk-head.js): a barra fica POR CIMA da
   linha dos titulos, na mesma altura e na largura da tabela; os titulos ficam no lugar (medem as colunas),
   so somem da vista enquanto ha selecao */
thead .bulk-anchor { position: relative; display: block; width: 0; height: 0; overflow: visible; }
thead .bulk-ov { position: absolute; z-index: 2; display: flex; align-items: center; box-sizing: border-box;
  padding: 0 12px; background: #FFFFFF; text-transform: none; letter-spacing: normal; font-size: var(--body-size);
  font-weight: 400; color: var(--ink); -webkit-text-fill-color: var(--ink); white-space: nowrap; text-align: left; }
thead .bulk-ov[hidden] { display: none; }
thead .bulk-ov > .pr-bulk, thead .bulk-ov > .cu-bulk, thead .bulk-ov > .fi-bulk { margin: 0 !important; flex: 1; }
thead .bulk-ov .btn { margin-top: 0 !important; margin-bottom: 0 !important; }
thead.bulk-on th { color: transparent !important; -webkit-text-fill-color: transparent !important; }
thead.bulk-on th > input[type="checkbox"] { visibility: hidden; }
/* o titulo que guarda a ancora nao corta a barra (Petra 05/10/2026: no Accounts Receivable o th do Document,
   118px com overflow hidden, so deixava ver "1 selected" — Receive e Statement sumiam) */
thead.bulk-on th:has(> .bulk-anchor) { overflow: visible !important; }
thead.bulk-on .bulk-ov, thead.bulk-on .bulk-ov * { -webkit-text-fill-color: initial; }
/* Who receives now dos automaticos (shared/auto-who.js): a mensagem flutuante e a caixinha (04/10/2026) */
.aw-pop { width: 440px; }
.aw-pop .aw-pop-t { width: 100%; min-height: 160px; resize: vertical; margin-bottom: 10px; }
.aw-pop .aw-pop-sp { flex: 1; }
.aw-table td:first-child { width: 36px; }
.aw-table input[type="checkbox"] { accent-color: var(--gold-deep); width: 17px; height: 17px; margin: 0; }

/* ═══ LEI 11.390 — CAMPOS BEM DIVIDIDOS NA FILEIRA; O SELECT TEM A LARGURA DA MAIOR OPCAO
   (Paulo 05/10/2026: "campos de filtro e texto devem ser mais bem divididos na linha. Cria uma
   regra: campos sempre bem divididos, campo com dropbox o tamanho deve ser sempre igual ao maior
   texto desse campo"). Em toda fileira de filtros (e toda .ft-row):
   1. o SELECT nunca encolhe abaixo da opcao mais longa (min-width max-content — o select do
      navegador mede pela maior opcao) e nao estica alem dela;
   2. o campo de TEXTO divide o que sobra por igual com os outros campos de texto (flex 1),
      com piso de 110px;
   3. o espaco entre campos e um so (12px); a fileira continua numa linha so (6.4), o campo de
      texto cede ate o piso; se ainda nao couber, a fileira quebra a linha com Filter e Clear juntos (11.242). Revoga o piso fixo de 150px do select (21/09). ═══ */
#app-root :is([class*="-filters"], .ft-row) select { min-width: max-content !important; width: auto !important; flex: none !important; }
#app-root :is([class*="-filters"], .ft-row) > .ft-col:has(> select) { flex: none !important; }
/* com rotulo em cima, a caixa ocupa a coluna inteira: nunca mais estreita que o proprio rotulo */
#app-root :is([class*="-filters"], .ft-row) > .ft-col > select { width: 100% !important; }
#app-root :is([class*="-filters"], .ft-row) > :is(.ft-col, [class*="numwrap"]):has(> input:not([type="checkbox"]):not([type="radio"])) { flex: 1 1 110px !important; min-width: 110px !important; }
#app-root :is([class*="-filters"], .ft-row) > :is(.ft-col, [class*="numwrap"]) > input:not([type="checkbox"]):not([type="radio"]) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
#app-root :is([class*="-filters"], .ft-row):not(.shw-tools) { column-gap: 12px !important; row-gap: 10px !important; flex-wrap: wrap !important; }

/* LEI 11.392 — o nome inteiro, numa linha (Paulo 05/10/2026). Revoga a quebra do Contact/Company do Customers
   (01/10) e a reticencia do Name do Products (18/09): a coluna mede o nome (shared/name-fit.js) e, nao cabendo,
   sai a coluna menos importante. */
#app-root #section-products .pr-table .pr-name { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; max-width: none !important; }
#app-root :is(#section-customers, #section-communications) .cu-table-list td:nth-child(2),
#app-root :is(#section-customers, #section-communications) .cu-table-list td:nth-child(3) { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: normal !important; }

/* ═══ HISTORY DO DOCUMENTO (Paulo 12/10/2026, shared/doc-history.js): um construtor so para order, venda, recibo,
   checkout, return e Finances; data, hora, quem e acao numa linha so ═══ */
.dh-block { margin-top: var(--card-gap, 18px) !important; }
.dh-table td.dh-nowrap { white-space: nowrap; }
/* filtros do User activity: rotulo em cima, numa linha, Filter e Clear no pe dos campos */
.dh-filters { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 var(--card-gap); flex-wrap: wrap; }
.dh-f { display: flex; flex-direction: column; }
.dh-f .field { width: auto; margin: 0; }

/* A CAIXA DO WHATSAPP SE DESTACA (Paulo 12/10/2026: "abre a tela do WhatsApp no sistema todo com uma cor um pouco
   diferente do sistema pra dar um contraste"): toda caixa de WhatsApp (wa-compose do sistema inteiro e o painel de
   mensagem do lead, .is-wa) no verde claro da casa, com a borda e a linha do cabecalho no verde — cor que ja existe */
.hp-drawer.wa-compose, .hp-drawer.is-wa { background: var(--green-soft); border-color: var(--green-3); }
.hp-drawer.wa-compose .hp-head, .hp-drawer.is-wa .hp-head { border-bottom-color: var(--green-3); }
/* para quem vai (Contact · Company · numero) nunca leva reticencias (11.342): o subtitulo quebra a linha */
/* Message em cima, a pilula de quem envia na linha de baixo, o destinatario embaixo (Paulo 19/10/2026) */
.hp-drawer.wa-compose .hp-title, .hp-drawer.is-wa .hp-title { flex-direction: column; align-items: flex-start; gap: 4px; }
.hp-drawer.wa-compose .hp-sub { white-space: normal; overflow: visible; text-overflow: clip; }
.hp-drawer.is-wa .hp-mark { color: var(--green); -webkit-text-fill-color: var(--green); }
/* dentro da caixa verde todo campo e branco (Paulo 12/10/2026: "fundo das caixas deve ser branco, todas elas") */
.hp-drawer.wa-compose :is(input, select, textarea), .hp-drawer.is-wa :is(input, select, textarea),
.hp-drawer.wa-compose .field-locked, .hp-drawer.is-wa .field-locked { background: var(--surface); }

/* ══ O CLIENTE E O EDIT DELE (lei 11.424, Paulo 13/10/2026: "botao edit ao lado da empresa do cliente nesse
   formulario e tb em todos os outros do sistema") ═══ a fileira do campo Company com o botao Edit que abre a
   ficha do cliente (shared/customer-edit.js); o campo divide o resto, o botao mede o rotulo. */
.cust-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cust-row > .field, .cust-row > .sa-inp { flex: 1 1 0; min-width: 0; }
.cust-row > .cust-edit { flex: none; }