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

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

.pp-chromepick { display: flex; align-items: center; gap: 10px; }
.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 Henrique,
   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-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; }

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

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

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

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

.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;
}
.rv-dwrap { flex: 0 0 200px; }
.rv-dwrap .field { width: 100%; }
.rv-filters .rv-scope { flex: 0 0 200px; width: 200px; height: var(--ctl-h); }

.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;
}

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

/* 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) {
  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)
  > :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)
  > :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)
  > :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;
}
.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 verde
   --green, App roxo --purple — nenhuma cor nova (UX Lab 9).
   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; }

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

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

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