@import url('lorica-fonts.css');

/*
 * ARX . Design System da Lorica Uniformes
 * Extraido da proposta de tela aprovada (Proposta-Tela-Dashboard-Arx.html).
 *
 * Como usar: carregue este arquivo DEPOIS do tailwind-standalone.css em cada tela.
 *   <link rel="stylesheet" href="/css/arx.css">
 *
 * Estrutura:
 *   1. Tokens          - a paleta, tipografia e medidas da marca
 *   2. Remapeamento    - as variaveis --brand-* antigas (azuis) apontam para o navy
 *   3. Base            - fundo, texto e titulos
 *   4. Componentes Arx - classes .arx-* para markup novo ou refatorado
 *   5. Camada de adocao- harmoniza as classes Tailwind que as telas ja usam
 *
 * Regra de ouro da camada 5: SO propriedades visuais (cor, borda, raio, sombra,
 * fonte). Nunca layout (display, flex, grid, width), para nao quebrar as telas.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --arx-navy:      #193B4F;
  --arx-navy-ink:  #1D2F3A;
  --arx-navy-deep: #12303F;
  --arx-amber:     #D07E1F;
  --arx-terracotta:#BB4731;
  --arx-green:     #288C46;
  --arx-beige:     #EACFA5;
  --arx-cream:     #F0EADF;
  --arx-offwhite:  #F5F2EC;
  --arx-white:     #FFFFFF;
  --arx-soft:      #606E78;
  --arx-line:      #ece4d6;
  /* Texto sobre fundo COLORIDO (navy, ambar, terracota, verde). Fica branco nos
     dois modos: o --arx-white e superficie de card e vira escuro no noturno. */
  --arx-on-accent: #FFFFFF;
  --arx-terra-soft: #F3E7E4;   /* fundo suave de alerta */
  --arx-terra-ink:  #9F3B29;   /* texto sobre o alerta suave */
  --arx-amber-ink:  #A86314;   /* texto ambar legivel sobre fundo claro */
  --arx-green-ink:  #1A5C2E;   /* texto verde legivel: o #288C46 da marca da 4.26 sobre branco */

  --arx-font-display: "Playfair Display", Georgia, serif;
  --arx-font-ui: "Foco", "Hanken Grotesk", "Figtree", "Mulish", system-ui, sans-serif;

  --arx-radius: 10px;
  --arx-ctrl: 8px;
  --arx-shadow: 0 1px 3px rgba(25, 59, 79, .08);
  --arx-shadow-lift: 0 6px 20px rgba(25, 59, 79, .12);
}

/* ── 2. Remapeamento das variaveis antigas (azul -> navy da marca) ─────────── */
:root {
  --brand-50:  #F5F2EC;
  --brand-100: #F0EADF;
  --brand-500: #2C5468;
  --brand-600: #193B4F;
  --brand-700: #12303F;
  --brand-900: #12303F;
  --brand: #193B4F;
  --brand-light: #F0EADF;
  --danger:  #BB4731;
  --warning: #D07E1F;
  --success: #288C46;
}

/* ── 3. Base ───────────────────────────────────────────────────────────────── */
body {
  background: var(--arx-offwhite);
  color: var(--arx-navy-ink);
  font-family: var(--arx-font-ui);
  line-height: 1.45;
}
h1, h2, h3 { font-family: var(--arx-font-display); color: var(--arx-navy); font-weight: 600; }

/* ── 4. Componentes Arx ────────────────────────────────────────────────────── */
/* O KICKER E TEXTO, E TEXTO USA O AMBAR DE TEXTO (08/09/2026).
   Ele usava `--arx-amber` (#D07E1F), que e a cor do ACENTO: 3,14 sobre branco no tema claro
   e 4,10 sobre o card no escuro, os dois abaixo do minimo de 4,5 para 11px. O token que
   resolve ja existia aqui em cima desde sempre, com o comentario dizendo para que serve
   ("texto ambar legivel sobre fundo claro"): `--arx-amber-ink` da 4,71 no claro e 8,57 no
   escuro. Faltava so o kicker usar. O filete continua com `--arx-amber`: ele e grafismo, e
   nao texto. */
.arx-kicker {
  text-transform: uppercase; color: var(--arx-amber-ink); font-weight: 700;
  font-size: 11px; letter-spacing: .2em; margin: 0;
}
.arx-h1 { font-family: var(--arx-font-display); color: var(--arx-navy); font-weight: 600; font-size: 29px; margin: 0; }
.arx-h2 { font-family: var(--arx-font-display); color: var(--arx-navy); font-weight: 600; font-size: 21px; margin: 0; }
.arx-sub { color: var(--arx-soft); margin: 4px 0 0; font-size: 15px; }
.arx-filete { height: 3px; width: 54px; background: var(--arx-amber); border-radius: 2px; margin: 8px 0 18px; }

/* Barra superior da marca */
.arx-appbar {
  background: var(--arx-navy); color: var(--arx-offwhite);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; position: sticky; top: 0; z-index: 30;
}
.arx-logo {
  width: 38px; height: 38px; background: var(--arx-offwhite); color: var(--arx-navy);
  border-radius: var(--arx-ctrl); display: flex; align-items: center; justify-content: center;
  font-family: var(--arx-font-display); font-weight: 600; font-size: 22px;
}
.arx-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--arx-amber); color: var(--arx-on-accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}

/* Cartao e resumo */
.arx-card {
  background: var(--arx-white); border: 1px solid var(--arx-beige);
  border-radius: var(--arx-radius); box-shadow: var(--arx-shadow); padding: 16px 20px;
}
.arx-resumo {
  background: var(--arx-white); border: 1px solid var(--arx-beige); border-radius: var(--arx-radius);
  box-shadow: var(--arx-shadow); padding: 16px 20px; font-size: 16px;
  display: flex; align-items: center; gap: 12px;
}
.arx-badge {
  background: var(--arx-terracotta); color: var(--arx-on-accent); border-radius: 999px;
  padding: 2px 10px; font-size: 13px; font-weight: 700;
}

/* Botao grande de acao (o padrao guiado do Arx) */
.arx-action {
  display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; width: 100%;
  background: var(--arx-white); border: 1px solid var(--arx-beige); border-radius: var(--arx-radius);
  box-shadow: var(--arx-shadow); padding: 18px 20px; font-family: inherit;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.arx-action:hover { transform: translateY(-2px); box-shadow: var(--arx-shadow-lift); border-color: var(--arx-amber); }
.arx-action:focus-visible { outline: 3px solid rgba(208, 126, 31, .4); outline-offset: 2px; }
.arx-action .ic {
  width: 46px; height: 46px; border-radius: var(--arx-ctrl); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.arx-action .ic svg { width: 24px; height: 24px; }
.arx-action.primary .ic { background: var(--arx-navy); color: var(--arx-offwhite); }
.arx-action.accent  .ic { background: var(--arx-amber); color: var(--arx-on-accent); }
.arx-action.warn    .ic { background: var(--arx-terracotta); color: var(--arx-on-accent); }
.arx-action .tx b { display: block; font-size: 17px; color: var(--arx-navy); }
.arx-action .tx span { font-size: 13px; color: var(--arx-soft); }

/* Botoes */
.arx-btn {
  padding: 10px 16px; background: var(--arx-navy); color: var(--arx-on-accent); border: none;
  border-radius: var(--arx-ctrl); font-family: var(--arx-font-ui); font-size: 14px;
  font-weight: 600; cursor: pointer; transition: filter .12s;
}
.arx-btn:hover { filter: brightness(1.1); }
.arx-btn.ok { background: var(--arx-green); }
.arx-btn.alerta { background: var(--arx-terracotta); }
.arx-btn.secundario { background: transparent; color: var(--arx-navy); border: 1px solid var(--arx-beige); }
.arx-btn:disabled { opacity: .6; cursor: default; }
a.arx-btn { display: inline-block; text-decoration: none; }

/* Botão cheio de confirmação (03/09/2026). A cor de repouso vinha em `style=` e o
   realce do mouse em `onmouseover`/`onmouseout` dentro do HTML. A política de
   segurança publicada em `_headers` recusa atributo de evento embutido, então no ar
   o botão ficava parado sob o mouse. Cor e realce passam a ser CSS, que a política
   não bloqueia. */
.arx-btn-cheio { color: var(--arx-on-accent); transition: background-color .12s; }
.arx-btn-cheio.navy      { background: var(--arx-navy); }
.arx-btn-cheio.navy:hover      { background: var(--arx-navy-deep); }
.arx-btn-cheio.verde     { background: var(--arx-green); }
.arx-btn-cheio.verde:hover     { background: #1A5C2E; }
.arx-btn-cheio.terracota { background: var(--arx-terracotta); }
.arx-btn-cheio.terracota:hover { background: var(--arx-terra-ink); }
.arx-btn-cheio.ambar     { background: var(--arx-amber); }
.arx-btn-cheio.ambar:hover     { background: var(--arx-amber-ink); }

/* ── Estado da tela: carregando, vazio e falha ──────────────────────────────
   (03/09/2026) Cada tela escrevia o seu, e o pior caso era a home: quando a rota
   do dia falhava, a seção inteira ficava escondida. Quem abre a home e não vê a
   fila de atrasados entende que ninguém está esperando retorno, e o vendedor
   passa o dia sem ligar para quem devia. Aqui os três estados têm desenho
   próprio, e a FALHA sempre oferece tentar de novo: erro não pode ter a mesma
   cara de fila vazia. */
.arx-estado {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--arx-line); border-radius: var(--arx-radius);
  background: var(--arx-white); padding: 14px 16px; font-size: 14px;
}
.arx-estado .arx-estado-tx { flex: 1 1 auto; }
.arx-estado b { display: block; color: var(--arx-navy); font-size: 15px; margin-bottom: 2px; }
.arx-estado span { color: var(--arx-soft); }
.arx-estado .arx-estado-marca {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-top: 6px;
  background: var(--arx-soft);
}
.arx-estado.carregando { border-style: dashed; }
.arx-estado.carregando .arx-estado-marca { background: var(--arx-beige); }
.arx-estado.vazio { background: var(--arx-cream); border-color: var(--arx-beige); }
.arx-estado.vazio .arx-estado-marca { background: var(--arx-green); }
.arx-estado.falha { background: var(--arx-terra-soft); border-color: var(--arx-terracotta); }
.arx-estado.falha .arx-estado-marca { background: var(--arx-terracotta); }
.arx-estado.falha b { color: var(--arx-terra-ink); }
.arx-estado.falha span { color: var(--arx-terra-ink); }
.arx-estado .arx-btn { flex: 0 0 auto; align-self: center; }
/* Em tela estreita o botão desce em vez de espremer o texto em coluna de duas palavras. */
@media (max-width: 520px) {
  .arx-estado { flex-wrap: wrap; }
  .arx-estado .arx-estado-tx { flex: 1 1 100%; }
  .arx-estado .arx-btn { width: 100%; margin-top: 10px; }
}

/* ── A caixa da casa (js/arx-dialogo.js) ────────────────────────────────────
   Substitui alert, confirm e prompt do navegador. A caixa do navegador aparece com
   a cara do Chrome, sem o nome do sistema, e o botão dela diz "OK" tanto para salvar
   quanto para apagar cliente. Aqui o kicker diz o que é, o botão diz o VERBO e a ação
   destrutiva vem em terracota. */
.arx-dialogo-fundo {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(29, 47, 58, 0.55);
}
.arx-dialogo-caixa {
  background: var(--arx-white); border: 1px solid var(--arx-line);
  border-radius: var(--arx-radius); box-shadow: 0 12px 34px rgba(25, 59, 79, 0.22);
  padding: 24px; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
}
.arx-dialogo-caixa .arx-filete { margin: 8px 0 12px; }
.arx-dialogo-titulo {
  font-family: var(--arx-font-display); font-weight: 600;
  color: var(--arx-navy); font-size: 21px; line-height: 1.25; margin: 0;
}
.arx-dialogo-texto { color: var(--arx-soft); font-size: 14px; margin: 10px 0 0; white-space: pre-line; }
.arx-dialogo-rotulo {
  display: block; margin: 16px 0 6px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--arx-amber-ink);
}
.arx-dialogo-campo {
  width: 100%; background: var(--arx-white); color: var(--arx-navy-ink);
  border: 1px solid var(--arx-beige); border-radius: var(--arx-ctrl);
  padding: 9px 11px; font: inherit; font-size: 14px;
}
.arx-dialogo-campo:focus { outline: 2px solid var(--arx-amber); outline-offset: 1px; }
.arx-dialogo-erro { margin: 8px 0 0; font-size: 13px; color: var(--arx-terra-ink); }
.arx-dialogo-acoes {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap;
}
/* Em tela de celular os botões ocupam a linha: alvo grande e ordem clara. */
@media (max-width: 420px) {
  .arx-dialogo-acoes { flex-direction: column-reverse; }
  .arx-dialogo-acoes .arx-btn { width: 100%; }
}

/* Marcadores de estado (substituem emoji, proibidos no design system) */
.arx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.arx-dot.ok { background: var(--arx-green); }
.arx-dot.atencao { background: var(--arx-amber); }
.arx-dot.alerta { background: var(--arx-terracotta); }
.arx-vazio { color: var(--arx-soft); font-size: 13px; font-style: italic; }

/* ── 5. Camada de adocao (harmoniza o Tailwind que ja existe) ──────────────── */
/* Superficies */
.bg-white { background-color: var(--arx-white) !important; }
.bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100 { background-color: var(--arx-cream) !important; }
.hover\:bg-gray-50:hover, .hover\:bg-slate-50:hover, .hover\:bg-gray-100:hover { background-color: var(--arx-cream) !important; }
/* O fundo da PAGINA e off-white; o creme fica para paineis e hover. */
body.bg-gray-50, body.bg-gray-100, body.bg-slate-50, body.bg-slate-100 { background-color: var(--arx-offwhite) !important; }

/* Bordas */
.border-gray-100, .border-gray-200, .border-gray-300,
.border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--arx-beige) !important; }

/* Texto */
.text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800 { color: var(--arx-navy-ink) !important; }
.text-gray-700, .text-slate-700 { color: var(--arx-navy-ink) !important; }
.text-gray-600, .text-gray-500, .text-gray-400,
.text-slate-600, .text-slate-500, .text-slate-400 { color: var(--arx-soft) !important; }

/* Cor de marca antiga (azul) -> navy */
.bg-brand-600, .bg-brand-700, .bg-blue-600, .bg-blue-700, .bg-blue-500 { background-color: var(--arx-navy) !important; }
.text-brand-600, .text-brand-700, .text-blue-600, .text-blue-700 { color: var(--arx-navy) !important; }
.border-brand-600, .border-blue-600, .border-blue-500 { border-color: var(--arx-navy) !important; }
.hover\:bg-brand-700:hover, .hover\:bg-blue-700:hover { background-color: var(--arx-navy-deep) !important; }
.bg-brand-50, .bg-brand-100, .bg-blue-50, .bg-blue-100 { background-color: var(--arx-cream) !important; }

/* Semantica: verde, ambar, vermelho da marca */
.bg-green-600, .bg-green-500, .bg-emerald-600 { background-color: var(--arx-green) !important; }
.text-green-700, .text-green-600, .text-emerald-600 { color: var(--arx-green) !important; }
.bg-red-600, .bg-red-500 { background-color: var(--arx-terracotta) !important; }
.text-red-700, .text-red-600, .text-red-500 { color: var(--arx-terracotta) !important; }
.bg-yellow-500, .bg-amber-500, .bg-orange-500 { background-color: var(--arx-amber) !important; }
.text-yellow-700, .text-amber-700, .text-amber-600 { color: var(--arx-amber) !important; }

/* Raios e sombras */
.rounded-lg, .rounded-xl, .rounded-2xl { border-radius: var(--arx-radius) !important; }
.rounded, .rounded-md { border-radius: var(--arx-ctrl) !important; }
.shadow-sm, .shadow { box-shadow: var(--arx-shadow) !important; }
.shadow-md, .shadow-lg, .shadow-xl { box-shadow: var(--arx-shadow-lift) !important; }

/* Tipografia: titulos das telas ganham a fonte de exibicao e o navy da marca.
   O :not() preserva titulos intencionalmente claros (sobre fundo escuro). */
.text-2xl, .text-3xl, .text-xl { font-family: var(--arx-font-display); }
/* :not(:is(...)) em vez de tres :not() encadeados. Nao e estilo: cada :not()
   soma a especificidade do argumento, entao a versao antiga pesava 4 classes e
   ganhava do BLOCO 15, que existe exatamente para o numero dentro de card
   colorido. Era isso que apagava os valores dos cards de Fornecedores no modo
   claro. Com :is() o peso cai para 1 classe e o bloco 15 volta a valer. */
.text-xl:not(:is(.text-white, .text-gray-100, .text-gray-200)),
.text-2xl:not(:is(.text-white, .text-gray-100, .text-gray-200)),
.text-3xl:not(:is(.text-white, .text-gray-100, .text-gray-200)) { color: var(--arx-navy) !important; }

/* Formularios: campos maiores e mais legiveis (equipe pouco tecnica) */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="search"], input[type="tel"], select, textarea {
  font-family: var(--arx-font-ui);
  border-color: var(--arx-beige);
  border-radius: var(--arx-ctrl);
  color: var(--arx-navy-ink);
  background-color: var(--arx-white);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(208, 126, 31, .35);
  outline-offset: 1px;
  border-color: var(--arx-amber);
}
label { color: var(--arx-navy-ink); font-weight: 600; }

/* Tabelas: cabecalho no padrao Arx */
table thead th {
  background: var(--arx-cream);
  color: var(--arx-navy);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .08em;
  font-weight: 700;
  border-bottom: 1px solid var(--arx-beige);
}
table tbody td { border-bottom: 1px solid var(--arx-line); }

/* ── 6. Complemento da camada de adoção ────────────────────────────────────── */
/* As telas de CRM, Cadastros, Ficha Técnica e Indicadores usam tons que a
   camada 5 não alcançava: as pastilhas de status (bg-*-50/100 com text-*-800),
   os roxos e índigos fora da paleta, as superfícies escuras e os anéis de foco.
   Mesma regra de ouro: só propriedade visual, nunca layout. */

/* Tons suaves das pastilhas de status */
.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100,
.bg-teal-50, .bg-teal-100 { background-color: #E7F0EA !important; }
.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100 { background-color: #F3E7E4 !important; }
.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100,
.bg-yellow-200, .bg-orange-50, .bg-orange-100 { background-color: #F6EBDB !important; }
.bg-purple-50, .bg-purple-100, .bg-violet-50, .bg-violet-100,
.bg-pink-50, .bg-pink-100, .bg-indigo-50, .bg-indigo-100,
.bg-sky-50, .bg-sky-100, .bg-cyan-50, .bg-cyan-100 { background-color: var(--arx-cream) !important; }

/* Texto escuro das pastilhas */
.text-green-800, .text-green-900, .text-emerald-800 { color: #1A5C2E !important; }
.text-red-800, .text-red-900, .text-rose-800 { color: #9F3B29 !important; }
.text-amber-800, .text-amber-900, .text-yellow-800, .text-orange-800 { color: #8A5111 !important; }

/* Roxo, índigo, rosa e ciano estão fora da paleta: viram navy */
.text-purple-600, .text-purple-700, .text-purple-800, .text-purple-900,
.text-violet-600, .text-violet-700, .text-pink-600, .text-pink-700,
.text-indigo-600, .text-indigo-700, .text-indigo-800,
.text-sky-600, .text-sky-700, .text-cyan-600, .text-cyan-700,
.text-blue-800, .text-blue-900 { color: var(--arx-navy) !important; }
.bg-purple-600, .bg-purple-700, .bg-violet-600, .bg-pink-600,
.bg-indigo-600, .bg-indigo-700, .bg-sky-600, .bg-cyan-600,
.bg-blue-800, .bg-blue-900 { background-color: var(--arx-navy) !important; }

/* Laranja é âmbar da marca */
.text-orange-600, .text-orange-700 { color: var(--arx-amber) !important; }

/* Superfícies escuras: navy, nunca cinza-chumbo */
.bg-gray-700, .bg-gray-800, .bg-gray-900,
.bg-slate-700, .bg-slate-800, .bg-slate-900 { background-color: var(--arx-navy-deep) !important; }
.bg-gray-600, .bg-slate-600 { background-color: var(--arx-navy) !important; }
.bg-gray-200, .bg-gray-300, .bg-slate-200, .bg-slate-300 { background-color: #E4DCCC !important; }
.text-gray-300, .text-gray-200, .text-slate-300, .text-slate-200 { color: var(--arx-beige) !important; }
.border-gray-600, .border-gray-700, .border-slate-600, .border-slate-700 { border-color: #2C4B5E !important; }

/* Bordas coloridas e divisórias */
.border-green-200, .border-green-300, .border-emerald-200 { border-color: #B9D6C3 !important; }
.border-red-200, .border-red-300, .border-rose-200 { border-color: #E2C3BC !important; }
.border-amber-200, .border-amber-300, .border-yellow-200,
.border-blue-100, .border-blue-200, .border-blue-300,
.border-purple-200, .border-indigo-200, .border-slate-50 { border-color: var(--arx-beige) !important; }

.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--arx-line) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--arx-beige) !important; }

/* Anel de foco: sempre âmbar, é a assinatura do foco na marca */
.ring-blue-500, .ring-blue-600, .ring-indigo-500, .ring-purple-500,
.ring-green-500, .ring-red-500, .ring-amber-500 { --tw-ring-color: var(--arx-amber) !important; }
.focus\:ring-blue-500:focus, .focus\:ring-indigo-500:focus,
.focus\:ring-green-500:focus, .focus\:ring-red-500:focus { --tw-ring-color: var(--arx-amber) !important; }
.focus\:border-blue-500:focus, .focus\:border-blue-600:focus { border-color: var(--arx-amber) !important; }

/* Preto puro não existe na paleta da marca */
.text-black { color: var(--arx-navy-ink) !important; }
/* Preserva a variável de opacidade do Tailwind. Fixar cor sólida aqui anulava o
   .bg-opacity-50 que acompanha o fundo dos modais: o overlay virava navy opaco e
   tapava a tela inteira em vez de escurecer o que está atrás. */
.bg-black { background-color: rgb(18 48 63 / var(--tw-bg-opacity, 1)) !important; }

/* Fundos de modal com opacidade: navy translúcido, nunca preto ou cinza frio.
   Cada nível guarda a própria alfa: antes todos caíam em .55 e o /40 ficava tão
   escuro quanto o /60. */
.bg-black\/40, .bg-gray-900\/40, .bg-slate-900\/40 { background-color: rgba(18, 48, 63, .40) !important; }
.bg-black\/50, .bg-gray-900\/50, .bg-slate-900\/50 { background-color: rgba(18, 48, 63, .50) !important; }
.bg-black\/60, .bg-gray-900\/60, .bg-slate-900\/60 { background-color: rgba(18, 48, 63, .60) !important; }
.bg-black\/70, .bg-gray-900\/70, .bg-slate-900\/70 { background-color: rgba(18, 48, 63, .70) !important; }

/* A borda padrão do Tailwind é cinza (#e5e7eb) e vale para todo elemento com
   borda sem cor declarada. Sem isto, sobra cinza frio em centenas de lugares. */
*, ::before, ::after { border-color: var(--arx-line); }

/* Tons 200, usados em pastilhas de contagem */
.bg-blue-200, .bg-indigo-200, .bg-sky-200, .bg-purple-200,
.bg-violet-200, .bg-pink-200 { background-color: var(--arx-cream) !important; }
.bg-green-200, .bg-emerald-200, .bg-teal-200 { background-color: #E7F0EA !important; }
.bg-red-200, .bg-rose-200 { background-color: #F3E7E4 !important; }
.bg-amber-200, .bg-orange-200 { background-color: #F6EBDB !important; }
.text-blue-200, .text-blue-300, .text-indigo-200 { color: var(--arx-beige) !important; }

/* Utilities brand-* que a compilação antiga deixou em azul */
.text-brand-100, .text-brand-50 { color: var(--arx-beige) !important; }
.text-brand-500, .text-brand-900 { color: var(--arx-navy) !important; }
.bg-brand-500, .bg-brand-900 { background-color: var(--arx-navy) !important; }
.border-brand-100, .border-brand-200, .border-brand-300 { border-color: var(--arx-beige) !important; }

/* Ciano e sky não existem na paleta */
.bg-cyan-500, .bg-cyan-600, .bg-sky-500 { background-color: var(--arx-navy) !important; }
.from-sky-500, .from-cyan-500 {
  --tw-gradient-from: var(--arx-navy) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(25, 59, 79, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-cyan-500, .to-sky-500 { --tw-gradient-to: var(--arx-navy-deep) var(--tw-gradient-to-position); }

/* ── 7. Bootstrap (telas de Orçamentos e Admin) ────────────────────────────── */
/* O Bootstrap traz a própria paleta por variáveis. Sem reapontá-las, sobra o
   cinza-chumbo #212529 e a borda #dee2e6 dele em centenas de elementos. */
:root, [data-bs-theme="light"] {
  --bs-body-bg: var(--arx-offwhite);
  --bs-body-color: var(--arx-navy-ink);
  --bs-body-color-rgb: 29, 47, 58;
  --bs-body-font-family: var(--arx-font-ui);
  --bs-border-color: var(--arx-beige);
  --bs-border-color-translucent: var(--arx-line);
  --bs-border-radius: var(--arx-ctrl);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--arx-radius);
  --bs-primary: var(--arx-navy);
  --bs-primary-rgb: 25, 59, 79;
  --bs-secondary-color: var(--arx-soft);
  --bs-secondary-bg: var(--arx-cream);
  --bs-tertiary-bg: var(--arx-offwhite);
  --bs-emphasis-color: var(--arx-navy);
  --bs-heading-color: var(--arx-navy);
  --bs-link-color: var(--arx-navy);
  --bs-link-hover-color: var(--arx-navy-deep);
  --bs-success: var(--arx-green);
  --bs-danger: var(--arx-terracotta);
  --bs-warning: var(--arx-amber);
}
.btn-primary {
  --bs-btn-bg: var(--arx-navy);
  --bs-btn-border-color: var(--arx-navy);
  --bs-btn-hover-bg: var(--arx-navy-deep);
  --bs-btn-hover-border-color: var(--arx-navy-deep);
  --bs-btn-active-bg: var(--arx-navy-deep);
  --bs-btn-color: var(--arx-on-accent);
  --bs-btn-hover-color: var(--arx-on-accent);
}
.btn-success { --bs-btn-bg: var(--arx-green); --bs-btn-border-color: var(--arx-green); }
.btn-danger  { --bs-btn-bg: var(--arx-terracotta); --bs-btn-border-color: var(--arx-terracotta); }
.btn-warning { --bs-btn-bg: var(--arx-amber); --bs-btn-border-color: var(--arx-amber); --bs-btn-color: var(--arx-on-accent); }
.btn-secondary {
  --bs-btn-bg: var(--arx-soft);
  --bs-btn-border-color: var(--arx-soft);
  --bs-btn-hover-bg: var(--arx-navy-ink);
  --bs-btn-hover-border-color: var(--arx-navy-ink);
}

/* Botões de contorno: o Bootstrap grava o azul e o cinza dele em valor literal,
   por isso não basta reapontar --bs-primary. */
.btn-outline-primary {
  --bs-btn-color: var(--arx-navy);
  --bs-btn-border-color: var(--arx-navy);
  --bs-btn-hover-bg: var(--arx-navy);
  --bs-btn-hover-border-color: var(--arx-navy);
  --bs-btn-hover-color: var(--arx-on-accent);
  --bs-btn-active-bg: var(--arx-navy-deep);
  --bs-btn-active-border-color: var(--arx-navy-deep);
}
.btn-outline-secondary {
  --bs-btn-color: var(--arx-soft);
  --bs-btn-border-color: var(--arx-beige);
  --bs-btn-hover-bg: var(--arx-cream);
  --bs-btn-hover-border-color: var(--arx-beige);
  --bs-btn-hover-color: var(--arx-navy);
  --bs-btn-active-bg: var(--arx-cream);
}
.btn-outline-success {
  --bs-btn-color: var(--arx-green); --bs-btn-border-color: var(--arx-green);
  --bs-btn-hover-bg: var(--arx-green); --bs-btn-hover-color: var(--arx-on-accent);
}
.btn-outline-danger {
  --bs-btn-color: var(--arx-terracotta); --bs-btn-border-color: var(--arx-terracotta);
  --bs-btn-hover-bg: var(--arx-terracotta); --bs-btn-hover-color: var(--arx-on-accent);
}
.btn-outline-warning {
  --bs-btn-color: var(--arx-amber); --bs-btn-border-color: var(--arx-amber);
  --bs-btn-hover-bg: var(--arx-amber); --bs-btn-hover-color: var(--arx-on-accent);
}

/* Caixas de marcar e selecionar */
.form-check-input:checked {
  background-color: var(--arx-navy);
  border-color: var(--arx-navy);
}
.form-check-input:focus {
  border-color: var(--arx-amber);
  box-shadow: 0 0 0 .2rem rgba(208, 126, 31, .25);
}

/* Etiquetas de status do Bootstrap */
.text-bg-primary   { background-color: var(--arx-navy) !important; color: var(--arx-on-accent) !important; }
.text-bg-secondary { background-color: var(--arx-soft) !important; color: var(--arx-on-accent) !important; }
.text-bg-success   { background-color: var(--arx-green) !important; color: var(--arx-on-accent) !important; }
.text-bg-danger    { background-color: var(--arx-terracotta) !important; color: var(--arx-on-accent) !important; }
.text-bg-warning   { background-color: var(--arx-amber) !important; color: var(--arx-on-accent) !important; }
.text-bg-light     { background-color: var(--arx-cream) !important; color: var(--arx-navy) !important; }
.text-secondary    { color: var(--arx-soft) !important; }
.table { --bs-table-color: var(--arx-navy-ink); --bs-table-border-color: var(--arx-line); --bs-table-striped-bg: var(--arx-offwhite); }
.form-control, .form-select {
  border-color: var(--arx-beige);
  color: var(--arx-navy-ink);
  background-color: var(--arx-white);
}
.form-control:focus, .form-select:focus {
  border-color: var(--arx-amber);
  box-shadow: 0 0 0 .2rem rgba(208, 126, 31, .25);
}
.card { --bs-card-border-color: var(--arx-beige); --bs-card-bg: var(--arx-white); }
.modal { --bs-modal-bg: var(--arx-white); --bs-modal-border-color: var(--arx-beige); }
.modal-backdrop { --bs-backdrop-bg: #12303F; }

/* Cabeçalho de tabela: creme com texto navy, no lugar do cinza do Bootstrap */
.table-light {
  --bs-table-bg: var(--arx-cream);
  --bs-table-color: var(--arx-navy);
  --bs-table-border-color: var(--arx-beige);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--arx-offwhite); }

/* Avisos: cada variante na cor de mesmo papel na marca */
.alert-info, .alert-primary, .alert-secondary, .alert-light, .alert-dark {
  --bs-alert-color: var(--arx-navy);
  --bs-alert-bg: var(--arx-cream);
  --bs-alert-border-color: var(--arx-beige);
}
.alert-success { --bs-alert-color: #1A5C2E; --bs-alert-bg: #E7F0EA; --bs-alert-border-color: #B9D6C3; }
.alert-warning { --bs-alert-color: #8A5111; --bs-alert-bg: #F6EBDB; --bs-alert-border-color: var(--arx-beige); }
.alert-danger  { --bs-alert-color: #9F3B29; --bs-alert-bg: #F3E7E4; --bs-alert-border-color: #E2C3BC; }

/* O X de fechar vem preto por imagem; o filtro leva ao navy da marca */
.btn-close { filter: sepia(24%) saturate(180%) hue-rotate(155deg) brightness(.45); }

/* Variante "dark" do Bootstrap: o cinza-chumbo dele vira o navy da marca */
.text-dark { color: var(--arx-navy-ink) !important; }
.border-dark { border-color: var(--arx-navy) !important; }
.btn-outline-dark {
  --bs-btn-color: var(--arx-navy);
  --bs-btn-border-color: var(--arx-navy);
  --bs-btn-hover-bg: var(--arx-navy);
  --bs-btn-hover-color: var(--arx-on-accent);
}
.btn-dark { --bs-btn-bg: var(--arx-navy-deep); --bs-btn-border-color: var(--arx-navy-deep); }
.btn-info { --bs-btn-bg: var(--arx-navy); --bs-btn-border-color: var(--arx-navy); --bs-btn-color: var(--arx-on-accent); }
.btn-outline-info {
  --bs-btn-color: var(--arx-navy);
  --bs-btn-border-color: var(--arx-navy);
  --bs-btn-hover-bg: var(--arx-navy);
  --bs-btn-hover-color: var(--arx-on-accent);
}
/* Botões sólidos: além de reapontar a variável, fixa a cor final. Em alguns
   modais o background do .btn não acompanhava a variável reapontada. */
.btn-primary { background-color: var(--arx-navy) !important; border-color: var(--arx-navy) !important; color: var(--arx-on-accent) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--arx-navy-deep) !important; border-color: var(--arx-navy-deep) !important; }
.btn-success { background-color: var(--arx-green) !important; border-color: var(--arx-green) !important; color: var(--arx-on-accent) !important; }
.btn-success:hover, .btn-success:focus { background-color: #1A5C2E !important; border-color: #1A5C2E !important; }
.btn-danger { background-color: var(--arx-terracotta) !important; border-color: var(--arx-terracotta) !important; color: var(--arx-on-accent) !important; }
.btn-danger:hover, .btn-danger:focus { background-color: #9F3B29 !important; border-color: #9F3B29 !important; }
.btn-warning { background-color: var(--arx-amber) !important; border-color: var(--arx-amber) !important; color: var(--arx-on-accent) !important; }
.btn-warning:hover, .btn-warning:focus { background-color: #A86314 !important; border-color: #A86314 !important; }
.btn-info { background-color: var(--arx-navy) !important; border-color: var(--arx-navy) !important; color: var(--arx-on-accent) !important; }
.btn-secondary { background-color: var(--arx-soft) !important; border-color: var(--arx-soft) !important; color: var(--arx-on-accent) !important; }
.btn-dark { background-color: var(--arx-navy-deep) !important; border-color: var(--arx-navy-deep) !important; color: var(--arx-on-accent) !important; }

.text-info { color: var(--arx-navy) !important; }
.bg-info { background-color: var(--arx-cream) !important; }
.bg-success { background-color: var(--arx-green) !important; }
.bg-danger { background-color: var(--arx-terracotta) !important; }
.bg-warning { background-color: var(--arx-amber) !important; }
.bg-primary { background-color: var(--arx-navy) !important; }
.border-success { border-color: var(--arx-green) !important; }
.border-danger { border-color: var(--arx-terracotta) !important; }
.border-warning { border-color: var(--arx-amber) !important; }
.border-info, .border-primary { border-color: var(--arx-navy) !important; }

/* Textos utilitários do Bootstrap */
.text-muted, .text-body-secondary { color: var(--arx-soft) !important; }
.bg-light { background-color: var(--arx-cream) !important; }
.bg-dark { background-color: var(--arx-navy-deep) !important; }
.text-primary { color: var(--arx-navy) !important; }
.text-success { color: var(--arx-green) !important; }
.text-danger { color: var(--arx-terracotta) !important; }
.text-warning { color: var(--arx-amber) !important; }

/* ── 8. Gráficos (ApexCharts, tela de Indicadores) ─────────────────────────── */
/* A biblioteca desenha rótulos, grade e legenda no cinza dela. */
.apexcharts-text, .apexcharts-title-text, .apexcharts-legend-text,
.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-datalabel {
  fill: var(--arx-navy-ink) !important;
  color: var(--arx-navy-ink) !important;
  font-family: var(--arx-font-ui) !important;
}
.apexcharts-gridline, .apexcharts-grid line { stroke: var(--arx-line) !important; }
.apexcharts-tooltip {
  background: var(--arx-white) !important;
  border: 1px solid var(--arx-beige) !important;
  color: var(--arx-navy-ink) !important;
  font-family: var(--arx-font-ui) !important;
}
.apexcharts-tooltip-title {
  background: var(--arx-cream) !important;
  border-bottom: 1px solid var(--arx-beige) !important;
}
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
  background: var(--arx-cream) !important;
  border-color: var(--arx-beige) !important;
  color: var(--arx-navy-ink) !important;
  font-family: var(--arx-font-ui) !important;
}
.apexcharts-xaxistooltip-text, .apexcharts-yaxistooltip-text { color: var(--arx-navy-ink) !important; }
.apexcharts-xaxistooltip:after, .apexcharts-xaxistooltip:before { border-bottom-color: var(--arx-beige) !important; }
.apexcharts-yaxistooltip:after, .apexcharts-yaxistooltip:before { border-left-color: var(--arx-beige) !important; }
.apexcharts-menu { background: var(--arx-white) !important; border-color: var(--arx-beige) !important; }
.apexcharts-menu-item:hover { background: var(--arx-cream) !important; }

/* Tons 700 que faltavam no mapa semântico */
.text-emerald-700, .text-teal-700 { color: #1A5C2E !important; }

/* ==========================================================================
   TRAVA DE EXPORTACAO: so o admin (classe html.arx-admin, posta pelo export-guard.js)
   enxerga os controles marcados com [data-admin-only]. FAIL-CLOSED: escondido por
   padrao; se o guard nao rodar, continua escondido.
   ========================================================================== */
html:not(.arx-admin) [data-admin-only] { display: none !important; }

/* ==========================================================================
   MODO NOTURNO (opt-in via html.arx-dark) — na cara da marca Arx.
   O modo claro padrao fica 100% intacto: nada aqui aplica sem a classe.
   Fundo = navy profundo (o navy e a cor escura do Arx); texto = off-white
   quente; acentos = ambar/terracota/verde como sempre. Playfair + Foco iguais.
   ========================================================================== */
html.arx-dark {
  --arx-offwhite: #0e2530;   /* fundo da tela: navy profundo */
  --arx-white:    #163545;   /* superficie de card */
  --arx-cream:    #122e3c;   /* colunas do funil */
  --arx-line:     #274a5a;   /* linhas/bordas */
  --arx-beige:    #2c5165;   /* bordas de destaque */
  --arx-navy-ink: #ece5d8;   /* texto principal: off-white quente (alma da marca) */
  --arx-soft:     #9fb2ba;   /* texto suave */
  --arx-terra-soft: #3a2329;   /* alerta suave no escuro */
  --arx-terra-ink:  #f0a58f;   /* texto do alerta no escuro */
  --arx-amber-ink:  #EACFA5;   /* no escuro o acento de texto e o bege */
  --arx-green-ink:  #6ee7b7;   /* no escuro o verde de texto clareia */
  --arx-shadow:      0 1px 3px rgba(0,0,0,.45);
  --arx-shadow-lift: 0 8px 24px rgba(0,0,0,.55);
  color-scheme: dark;
}
/* A caixa da casa no tema escuro. O titulo usa --arx-navy, que NAO vira ao trocar de
   tema (navy continua navy): sobre o card escuro ele sumiria. Mesma correcao que .arx-h1
   e .arx-h2 ja recebem logo abaixo. E o fundo do modal escurece mais, senao a tela de tras
   continua legivel demais e a caixa nao parece por cima de nada. */
html.arx-dark .arx-dialogo-fundo { background: rgba(4, 14, 20, 0.72); }
html.arx-dark .arx-dialogo-titulo { color: #f0e9db; }
html.arx-dark .arx-dialogo-campo { background: var(--arx-offwhite); color: var(--arx-navy-ink); }

html.arx-dark body { background: var(--arx-offwhite); color: var(--arx-navy-ink); }
html.arx-dark h1, html.arx-dark h2, html.arx-dark h3,
html.arx-dark .arx-h1, html.arx-dark .arx-h2 { color: #f0e9db; }

/* Superficies e texto (utilidades Tailwind mais usadas) mapeados para o navy da marca. */
html.arx-dark .bg-white { background-color: var(--arx-white) !important; }
html.arx-dark .bg-gray-50 { background-color: #122e3c !important; }
html.arx-dark .bg-gray-100 { background-color: #1a3c4c !important; }
html.arx-dark .bg-gray-200 { background-color: #22485a !important; }
html.arx-dark .text-gray-900,
html.arx-dark .text-gray-800,
html.arx-dark .text-gray-700 { color: #ece5d8 !important; }
html.arx-dark .text-gray-600,
html.arx-dark .text-gray-500,
html.arx-dark .text-gray-400 { color: #9fb2ba !important; }
html.arx-dark .border-gray-100,
html.arx-dark .border-gray-200,
html.arx-dark .border-gray-300 { border-color: var(--arx-line) !important; }
html.arx-dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.arx-dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--arx-line) !important; }
html.arx-dark .shadow, html.arx-dark .shadow-sm, html.arx-dark .shadow-md, html.arx-dark .shadow-lg { box-shadow: var(--arx-shadow-lift) !important; }

/* Acentos da marca: a etapa/aba ativa usa AMBAR no escuro (o navy sumiria no fundo). */
html.arx-dark .text-brand-600, html.arx-dark .text-brand-700 { color: var(--arx-amber) !important; }
html.arx-dark .border-brand-600 { border-color: var(--arx-amber) !important; }
html.arx-dark .bg-brand-50, html.arx-dark .bg-brand-100 { background-color: #16384a !important; }
html.arx-dark .text-brand-500 { color: var(--arx-amber) !important; }

/* Aba ativa (pilula) no escuro: o navy do bg-brand-600 sumiria no fundo navy,
   entao a pilula ativa usa o ambar da marca com texto navy profundo (alto contraste). */
html.arx-dark #crmTabs .tab-btn.active {
  background-color: var(--arx-amber) !important;
  color: #0e2530 !important;
}

/* Caixa de entrada no escuro: elementos de marca em navy sumiriam sobre o card navy.
   Botao Escrever/Responder/Conectar e o ponto de nao-lida viram ambar (texto navy profundo);
   a linha selecionada e a pasta ativa (bg-brand-50) ganham um navy visivelmente mais claro. */
html.arx-dark #view-inbox .bg-brand-600,
html.arx-dark #inboxEscrever { background-color: var(--arx-amber) !important; color: #0e2530 !important; }
html.arx-dark #view-inbox .bg-brand-50 { background-color: #22485a !important; }
/* Divisor arrastavel entre a lista e o leitor. */
html.arx-dark .inbox-splitter { background-color: var(--arx-line) !important; }
html.arx-dark .inbox-splitter:hover { background-color: var(--arx-amber) !important; }

/* Campos de formulario */
html.arx-dark input, html.arx-dark textarea, html.arx-dark select,
html.arx-dark [contenteditable="true"] {
  background-color: #122e3c !important;
  color: #ece5d8 !important;
  border-color: var(--arx-line) !important;
}
/* O PLACEHOLDER TAMBEM E TEXTO (08/09/2026, conferido no navegador na tela de entrar).
   Era `#6f8894` escrito direto aqui, e sobre o campo escuro (#163545) isso da 3,80 de
   contraste, abaixo do minimo de 4,5. Duas coisas erradas na mesma linha, e o design system
   nomeia as duas: cor escrita no componente em vez de token, e contraste que so aparece
   olhando no navegador. `--arx-soft` e o token de texto suave e da 5,86. Vale para o app
   inteiro, e nao so para o login. */
html.arx-dark input::placeholder, html.arx-dark textarea::placeholder { color: var(--arx-soft) !important; }

/* Hovers claros ficam sutis no escuro; backdrop dos modais escurece mais. */
html.arx-dark .hover\:bg-gray-50:hover,
html.arx-dark .hover\:bg-gray-100:hover,
html.arx-dark .hover\:bg-white:hover { background-color: #1f4152 !important; }
html.arx-dark .bg-black.bg-opacity-50 { background-color: rgba(0,0,0,.72) !important; }

/* ==========================================================================
   PENTE FINO DO MODO NOTURNO
   Cobre as familias de utilidades Tailwind usadas nas telas que ainda ficavam
   claras/ilegiveis no escuro: slate (tratado como gray), fundos claros semanticos
   (bg-*-50/100/200 -> tint escuro), textos semanticos escuros (-600..900 -> versao
   clara), cinzas escuros como superficie e bordas coloridas. Botoes SOLIDOS coloridos
   (bg-*-500/600/700) sao mantidos de proposito (funcionam sobre o navy).
   ========================================================================== */

/* --- Slate = mesmo tratamento do gray --- */
html.arx-dark .bg-slate-50 { background-color: #122e3c !important; }
html.arx-dark .bg-slate-100 { background-color: #1a3c4c !important; }
html.arx-dark .bg-slate-200 { background-color: #22485a !important; }
html.arx-dark .bg-slate-700 { background-color: #1a3c4c !important; }
html.arx-dark .bg-slate-800 { background-color: #132c39 !important; }
html.arx-dark .bg-slate-900, html.arx-dark .bg-slate-900\/70 { background-color: #0e2530 !important; }
html.arx-dark .text-slate-900, html.arx-dark .text-slate-800, html.arx-dark .text-slate-700 { color: #ece5d8 !important; }
html.arx-dark .text-slate-600, html.arx-dark .text-slate-500, html.arx-dark .text-slate-400 { color: #9fb2ba !important; }
html.arx-dark .text-slate-300, html.arx-dark .text-slate-200 { color: #9fb2ba !important; }
html.arx-dark .border-slate-50, html.arx-dark .border-slate-100, html.arx-dark .border-slate-200,
html.arx-dark .border-slate-300, html.arx-dark .border-slate-600, html.arx-dark .border-slate-700 { border-color: var(--arx-line) !important; }
html.arx-dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.arx-dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--arx-line) !important; }

/* --- Cinzas escuros como superficie: navy da marca, mantendo a hierarquia --- */
html.arx-dark .bg-gray-300 { background-color: #2c5165 !important; }
html.arx-dark .bg-gray-600 { background-color: #22485a !important; }
html.arx-dark .bg-gray-700 { background-color: #1a3c4c !important; }
html.arx-dark .bg-gray-800 { background-color: #132c39 !important; }
html.arx-dark .bg-gray-900 { background-color: #0e2530 !important; }
html.arx-dark .border-gray-600, html.arx-dark .border-gray-700 { border-color: var(--arx-line) !important; }
html.arx-dark .divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--arx-line) !important; }
html.arx-dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--arx-line) !important; }
html.arx-dark .text-gray-100, html.arx-dark .text-gray-200 { color: #ece5d8 !important; }
html.arx-dark .text-gray-300 { color: #9fb2ba !important; }

/* --- Fundos claros semanticos (bg-*-50/100/200) -> tint ESCURO da mesma familia --- */
html.arx-dark .bg-red-50, html.arx-dark .bg-red-100, html.arx-dark .bg-red-200,
html.arx-dark .bg-rose-50, html.arx-dark .bg-rose-100, html.arx-dark .bg-rose-200,
html.arx-dark .bg-pink-50, html.arx-dark .bg-pink-100, html.arx-dark .bg-pink-200 { background-color: #3a2329 !important; }
html.arx-dark .bg-orange-50, html.arx-dark .bg-orange-100, html.arx-dark .bg-orange-200,
html.arx-dark .bg-amber-50, html.arx-dark .bg-amber-100, html.arx-dark .bg-amber-200,
html.arx-dark .bg-yellow-50, html.arx-dark .bg-yellow-100, html.arx-dark .bg-yellow-200 { background-color: #362c1a !important; }
html.arx-dark .bg-green-50, html.arx-dark .bg-green-100, html.arx-dark .bg-green-200,
html.arx-dark .bg-emerald-50, html.arx-dark .bg-emerald-100, html.arx-dark .bg-emerald-200,
html.arx-dark .bg-teal-50, html.arx-dark .bg-teal-100, html.arx-dark .bg-teal-200 { background-color: #14342a !important; }
html.arx-dark .bg-blue-50, html.arx-dark .bg-blue-100, html.arx-dark .bg-blue-200, html.arx-dark .bg-blue-50\/50,
html.arx-dark .bg-sky-50, html.arx-dark .bg-sky-100, html.arx-dark .bg-sky-200,
html.arx-dark .bg-cyan-50, html.arx-dark .bg-cyan-100, html.arx-dark .bg-cyan-200 { background-color: #16303f !important; }
html.arx-dark .bg-indigo-50, html.arx-dark .bg-indigo-100, html.arx-dark .bg-indigo-200,
html.arx-dark .bg-violet-50, html.arx-dark .bg-violet-100, html.arx-dark .bg-violet-200,
html.arx-dark .bg-purple-50, html.arx-dark .bg-purple-100, html.arx-dark .bg-purple-200 { background-color: #241f3a !important; }

/* --- Textos semanticos escuros (-600..900) -> versao CLARA legivel no navy --- */
html.arx-dark .text-red-600, html.arx-dark .text-red-700, html.arx-dark .text-red-800, html.arx-dark .text-red-900,
html.arx-dark .text-red-400, html.arx-dark .text-red-300 { color: #fca5a5 !important; }
html.arx-dark .text-rose-700, html.arx-dark .text-rose-800 { color: #fda4af !important; }
html.arx-dark .text-pink-600, html.arx-dark .text-pink-700, html.arx-dark .text-pink-800, html.arx-dark .text-pink-300 { color: #f9a8d4 !important; }
html.arx-dark .text-orange-600, html.arx-dark .text-orange-700, html.arx-dark .text-orange-800, html.arx-dark .text-orange-300 { color: #fdba74 !important; }
html.arx-dark .text-amber-600, html.arx-dark .text-amber-700, html.arx-dark .text-amber-800, html.arx-dark .text-amber-900 { color: #fcd34d !important; }
html.arx-dark .text-yellow-700, html.arx-dark .text-yellow-800, html.arx-dark .text-yellow-300 { color: #fde047 !important; }
html.arx-dark .text-green-600, html.arx-dark .text-green-700, html.arx-dark .text-green-800, html.arx-dark .text-green-900, html.arx-dark .text-green-300 { color: #86efac !important; }
html.arx-dark .text-emerald-600, html.arx-dark .text-emerald-700, html.arx-dark .text-emerald-800 { color: #6ee7b7 !important; }
html.arx-dark .text-teal-500, html.arx-dark .text-teal-700, html.arx-dark .text-teal-800 { color: #5eead4 !important; }
html.arx-dark .text-blue-500, html.arx-dark .text-blue-600, html.arx-dark .text-blue-700, html.arx-dark .text-blue-800, html.arx-dark .text-blue-900,
html.arx-dark .text-blue-400, html.arx-dark .text-blue-300, html.arx-dark .text-blue-200 { color: #93c5fd !important; }
html.arx-dark .text-sky-600, html.arx-dark .text-sky-700 { color: #7dd3fc !important; }
html.arx-dark .text-cyan-600, html.arx-dark .text-cyan-700, html.arx-dark .text-cyan-800 { color: #67e8f9 !important; }
html.arx-dark .text-indigo-500, html.arx-dark .text-indigo-600, html.arx-dark .text-indigo-700, html.arx-dark .text-indigo-800,
html.arx-dark .text-indigo-900, html.arx-dark .text-indigo-950, html.arx-dark .text-indigo-400, html.arx-dark .text-indigo-300, html.arx-dark .text-indigo-200 { color: #a5b4fc !important; }
html.arx-dark .text-violet-600, html.arx-dark .text-violet-700,
html.arx-dark .text-purple-600, html.arx-dark .text-purple-700, html.arx-dark .text-purple-800, html.arx-dark .text-purple-900, html.arx-dark .text-purple-300 { color: #d8b4fe !important; }

/* --- Bordas claras semanticas -> linha discreta do tema --- */
html.arx-dark .border-red-200, html.arx-dark .border-red-300,
html.arx-dark .border-amber-100, html.arx-dark .border-amber-200, html.arx-dark .border-amber-300,
html.arx-dark .border-yellow-200,
html.arx-dark .border-green-100, html.arx-dark .border-green-200, html.arx-dark .border-green-300,
html.arx-dark .border-emerald-100, html.arx-dark .border-emerald-200, html.arx-dark .border-emerald-300, html.arx-dark .border-emerald-400,
html.arx-dark .border-teal-200, html.arx-dark .border-teal-600,
html.arx-dark .border-blue-100, html.arx-dark .border-blue-200, html.arx-dark .border-blue-300, html.arx-dark .border-blue-500, html.arx-dark .border-blue-600,
html.arx-dark .border-indigo-50, html.arx-dark .border-indigo-100, html.arx-dark .border-indigo-200, html.arx-dark .border-indigo-300, html.arx-dark .border-indigo-400, html.arx-dark .border-indigo-500, html.arx-dark .border-indigo-600,
html.arx-dark .border-purple-200, html.arx-dark .border-pink-200, html.arx-dark .border-rose-200,
html.arx-dark .border-orange-200, html.arx-dark .border-cyan-200 { border-color: var(--arx-line) !important; }

/* --- Shell (app.html): cores fixas do app-shell.css que nao adaptavam sozinhas --- */
html.arx-dark { background-color: #0e2530 !important; }
html.arx-dark #moduleFrame { background-color: #0e2530 !important; } /* evita flash branco na troca de modulo */
html.arx-dark .nav-link.active { background-color: #16384a !important; color: var(--arx-amber) !important; }
/* Icone da aba ativa: forca o AMBAR direto no stroke/fill (nao so via currentColor),
   com #mainSidebar para vencer o .nav-link.active svg { color:var(--brand-600) } do app-shell.css. */
html.arx-dark #mainSidebar .nav-link.active svg,
html.arx-dark #mainSidebar .nav-link.active svg path,
html.arx-dark .nav-link.active svg { color: var(--arx-amber) !important; stroke: var(--arx-amber) !important; }
html.arx-dark .hamburger-btn { background: var(--arx-white) !important; color: #ece5d8 !important; border-color: var(--arx-line) !important; }

/* --- Componentes com cor FIXA nos CSS de modulo (crm/vendas/producao) --- */
html.arx-dark .kpi-card, html.arx-dark .lead-card,
html.arx-dark .modal-box, html.arx-dark .sticky-actions { background: var(--arx-white) !important; }
html.arx-dark .kanban-column { background: var(--arx-cream) !important; }
html.arx-dark .grade-chip { background: var(--arx-cream) !important; color: #ece5d8 !important; }
html.arx-dark .brand-block { background: #16384a !important; }
html.arx-dark .kanban-scroll::-webkit-scrollbar-track { background: #163545 !important; }

/* --- Textos que a CAMADA DE ADOCAO (modo claro) fixa em navy e sumiam no escuro ---
   O var(--arx-navy) NAO e redefinido no dark (tambem e cor de FUNDO), entao esses
   textos ficavam navy sobre navy. Aqui viram off-white quente. Cobre: numeros dos
   KPIs e titulos das telas (.text-xl/2xl/3xl), titulo dos botoes de acao guiada,
   botao secundario, cabecalho de tabela e brand-900. */
html.arx-dark .text-xl:not(:is(.text-white, .text-gray-100, .text-gray-200)),
html.arx-dark .text-2xl:not(:is(.text-white, .text-gray-100, .text-gray-200)),
html.arx-dark .text-3xl:not(:is(.text-white, .text-gray-100, .text-gray-200)) { color: #f0e9db !important; }
html.arx-dark .arx-action .tx b { color: #f0e9db !important; }
html.arx-dark .arx-btn.secundario { color: var(--arx-navy-ink) !important; }
html.arx-dark table thead th { color: var(--arx-navy-ink) !important; }
html.arx-dark .text-brand-900 { color: var(--arx-amber) !important; }
html.arx-dark .text-brand-100, html.arx-dark .text-brand-50 { color: #9fb2ba !important; }
html.arx-dark .bg-slate-300 { background-color: #22485a !important; }

/* ==========================================================================
   PENTE FINO 2 (auditoria por tela): paletas LOCAIS sem prefixo e cores FIXAS.
   Varias telas definem seu proprio :root (--white/--navy/--soft/--cream/--beige)
   e usam hex fixo em <style>/inline/JS. Redefinimos as locais e sobrescrevemos os
   pontos que sobravam claros/ilegiveis. Um !important de folha vence o inline sem
   !important, entao cobre tambem os estilos injetados por JS. Modo claro intacto.
   ========================================================================== */
html.arx-dark {
  --white: #163545 !important; --offwhite: #0e2530 !important; --cream: #122e3c !important;
  --soft: #9fb2ba !important; --navy-ink: #ece5d8 !important; --beige: #274a5a !important;
  --line: #274a5a !important; --brand-light: #1f4152 !important;
}

/* Dashboard */
html.arx-dark .arx-action { background: var(--arx-white) !important; border-color: var(--arx-line) !important; }
html.arx-dark .arx-card { background: var(--arx-white) !important; border-color: var(--arx-line) !important; }
html.arx-dark .arx-resumo { background: var(--arx-white) !important; border-color: var(--arx-line) !important; }
html.arx-dark .arx-entrada-card { background: var(--arx-white) !important; border-color: var(--arx-line) !important; }
html.arx-dark .arx-count { background: var(--arx-white) !important; color: var(--arx-navy-ink) !important; border-color: var(--arx-line) !important; }
html.arx-dark .arx-col.fechado { background:#14342a !important; }
html.arx-dark .arx-col.perdido { background:#3a2329 !important; }
html.arx-dark .arx-col-head b { color: var(--arx-navy-ink) !important; }
html.arx-dark .arx-resumo b { color: var(--arx-navy-ink) !important; }
html.arx-dark .arx-entrada-card .valor { color: var(--arx-navy-ink) !important; }
html.arx-dark .arx-btn-avista:hover { color: var(--arx-navy-ink) !important; }
html.arx-dark .arx-dot { box-shadow: 0 0 0 1px rgba(236,229,216,.35) !important; }
html.arx-dark .arx-action.primary .ic { background:#22485a !important; }
html.arx-dark .arx-erro, html.arx-dark .arx-card .data { color:#fca5a5 !important; }
/* Caixa de estado (03/09/2026): fundo de alerta e texto claro no noturno. */
html.arx-dark .arx-estado.falha { background:#3a2329 !important; border-color: var(--arx-terracotta) !important; }
html.arx-dark .arx-estado.falha b, html.arx-dark .arx-estado.falha span { color:#fca5a5 !important; }
html.arx-dark .arx-estado.vazio { background:#14342a !important; }
/* Home por funcao (18/08/2026): os acentos de alerta das filas do dia e da fila da
   fabrica clareiam no escuro, como os vizinhos de cima. */
html.arx-dark .arx-fila-item .quando { color: #f0a58f !important; }
html.arx-dark .arx-numero.alerta .valor { color: #fca5a5 !important; }
html.arx-dark .arx-lote .prazo.estourado { color: #fca5a5 !important; }
html.arx-dark .arx-lote .prazo.apertado { color: #fcd34d !important; }
/* Letras que sumiam no noturno, pegas pela regra 6 da auditoria (18/08/2026): texto em
   token escuro sobre superficie que VIRA escura. Cada uma clareia como os vizinhos. */
html.arx-dark .atd-links a { color: var(--arx-navy-ink) !important; }
html.arx-dark .status-prospeccao, html.arx-dark .status-qualificacao,
html.arx-dark .status-negociacao, html.arx-dark .status-fechamento,
html.arx-dark .status-ganho, html.arx-dark .status-perdido { color: var(--arx-navy-ink) !important; }
html.arx-dark .lot-card-code, html.arx-dark .lot-card-tamanho { color: var(--arx-navy-ink) !important; }

/* CRM (inline/JS) */
html.arx-dark .kanban-column h3 { color: var(--arx-navy-ink) !important; }
html.arx-dark .col-count { color: var(--arx-navy-ink) !important; }
html.arx-dark .col-sort-opt, html.arx-dark .col-due-toggle { color: var(--arx-navy-ink) !important; }
html.arx-dark .crm-mail { background: var(--arx-white) !important; color: var(--arx-navy-ink) !important; border-color: var(--arx-line) !important; }
html.arx-dark .col-menu { background: var(--arx-white) !important; border-color: var(--arx-line) !important; box-shadow: 0 8px 24px rgba(0,0,0,.55) !important; }
/* "Retornar hoje" no card usa ambar #A86314 inline (js/crm.js); no noturno esse
   ambar some no fundo. O seletor tem que cacar o hex ATUAL do JS: ja ficou orfao
   uma vez apontando para #9a5c12, e o aviso do dia sumia no escuro (achado C8). */
html.arx-dark .lead-card span[style*="#A86314"] { color: #fcd34d !important; }
html.arx-dark .aging-green { background: #14342a !important; color: #86efac !important; }
html.arx-dark .aging-yellow { background: #362c1a !important; color: #fcd34d !important; }
html.arx-dark .aging-red { background: #3a2329 !important; color: #fca5a5 !important; }
html.arx-dark #crmErroBanner { background: #3a2329 !important; border-color: #5b3a3a !important; color: #fca5a5 !important; }
html.arx-dark span[style*="background:#EFE6D4"] { background: #362c1a !important; color: #fcd34d !important; }
html.arx-dark #disparoMensagem a { color: #93c5fd !important; }
html.arx-dark .lead-card span[style*="--arx-terracotta"] { color: #fca5a5 !important; }
html.arx-dark .col-count span[style*="#a5560f"] { color: #fdba74 !important; }
html.arx-dark #modalDetalhesInner div[style*="border-bottom:1px solid #ECE4D6"] { border-bottom-color: var(--arx-line) !important; }

/* Financeiro */
html.arx-dark .fin-kpi { background: var(--arx-white) !important; border-left-color: var(--arx-line) !important; border-right-color: var(--arx-line) !important; border-bottom-color: var(--arx-line) !important; }
html.arx-dark .fin-kpi .val { color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-card { background: var(--arx-white) !important; border-top-color: var(--arx-line) !important; border-right-color: var(--arx-line) !important; border-bottom-color: var(--arx-line) !important; }
html.arx-dark .fin-card .empresa, html.arx-dark .fin-card .valor { color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-lista { background: var(--arx-white) !important; border-color: var(--arx-line) !important; }
html.arx-dark .fin-linha { border-bottom-color: var(--arx-line) !important; }
html.arx-dark .fin-linha .emp, html.arx-dark .fin-linha .vl { color: var(--arx-navy-ink) !important; }
/* Contas a receber (04/09/2026). Sem estas duas linhas o valor do titulo sai em navy sobre
   card escuro no tema noturno, que e letra invisivel: a auditoria visual reprova, e com
   razao. Ver a regra 6 de tools/auditoria-visual.mjs. */
html.arx-dark .fin-tit { border-bottom-color: var(--arx-line) !important; }
html.arx-dark .fin-tit .quem, html.arx-dark .fin-tit .vl { color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-resumo-receber b { color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-sit { border-color: var(--arx-line) !important; }
/* Regua de cobranca (04/09/2026). Mesma razao das linhas acima: sem elas o nome do cliente,
   o valor e a frase da acao saem em navy sobre card escuro, que e letra invisivel. */
html.arx-dark .fin-cob { border-bottom-color: var(--arx-line) !important;
  border-left-color: var(--arx-line) !important; }
html.arx-dark .fin-cob .quem, html.arx-dark .fin-cob .vl { color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-acao { color: var(--arx-navy-ink) !important; }
/* Fila de conferencia (05/09/2026). Mesma razao das linhas acima: sem elas a regra, o valor
   e a frase do que fazer saem em navy sobre card escuro, que e letra invisivel. */
html.arx-dark .fin-div { border-bottom-color: var(--arx-line) !important; }
html.arx-dark .fin-div .regra, html.arx-dark .fin-div .vl { color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-div .oquefazer { color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-sit.atencao { color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-cob.atencao { border-left-color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-tabela-wrap { background: var(--arx-white) !important; border-color: var(--arx-line) !important; }
html.arx-dark table.fin-tab th { background: var(--arx-cream) !important; border-bottom-color: var(--arx-line) !important; }
html.arx-dark table.fin-tab td { border-bottom-color: var(--arx-line) !important; }
html.arx-dark table.fin-tab .tag { color: var(--arx-soft) !important; }
html.arx-dark .fin-nota { background: var(--arx-cream) !important; border-color: var(--arx-line) !important; color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-prov { background: var(--arx-cream) !important; border-color: var(--arx-line) !important; }
html.arx-dark .fin-save:not(.saved) { background: var(--arx-amber) !important; color: #0e2530 !important; }
html.arx-dark .fin-save:not(.saved):hover { filter: brightness(1.06); }
html.arx-dark .fin-kpi .rot, html.arx-dark .fin-kpi .det, html.arx-dark .fin-vazio,
html.arx-dark .fin-card .meta, html.arx-dark .fin-linha .tag, html.arx-dark .fin-btn-sec, html.arx-dark .fin-loading { color: var(--arx-soft) !important; }
html.arx-dark .fin-btn-sec:hover { color: var(--arx-navy-ink) !important; }
html.arx-dark .fin-erro, html.arx-dark .fin-card .espera, html.arx-dark .margem-neg { color: #fca5a5 !important; }
html.arx-dark .margem-pos { color: #86efac !important; }

/* Vendas (Bootstrap) */
html.arx-dark .btn-outline-primary, html.arx-dark .btn-outline-info, html.arx-dark .btn-outline-dark {
  --bs-btn-color: var(--arx-navy-ink) !important; --bs-btn-border-color: var(--arx-beige) !important;
  --bs-btn-hover-bg: var(--arx-navy) !important; --bs-btn-hover-color: #fff !important; --bs-btn-hover-border-color: var(--arx-navy) !important;
}
html.arx-dark .alert-info, html.arx-dark .alert-light, html.arx-dark .alert-primary,
html.arx-dark .alert-secondary, html.arx-dark .alert-dark { --bs-alert-color: var(--arx-navy-ink) !important; }
html.arx-dark .alert-warning { --bs-alert-bg: #362c1a !important; --bs-alert-color: #f0d9b5 !important; --bs-alert-border-color: var(--arx-line) !important; }
html.arx-dark .input-group-text { background-color: var(--arx-cream) !important; color: var(--arx-navy-ink) !important; border-color: var(--arx-line) !important; }
html.arx-dark .search-item { border-bottom-color: var(--arx-line) !important; }
html.arx-dark .search-item:hover, html.arx-dark .search-item.active { background-color: var(--arx-cream) !important; color: var(--arx-navy-ink) !important; border-color: var(--arx-line) !important; }
html.arx-dark .search-item[data-action="cnpj-lookup"] { background: var(--arx-cream) !important; border-top-color: var(--arx-line) !important; }
html.arx-dark #emailModal .p-2.rounded { background: var(--arx-cream) !important; border-color: var(--arx-line) !important; }
html.arx-dark .btn-close:not(.btn-close-white) { filter: invert(0.85) !important; }
html.arx-dark .material-display, html.arx-dark .material-placeholder, html.arx-dark .custom-display { border-color: var(--arx-line) !important; }
html.arx-dark #searchDropdown::-webkit-scrollbar-thumb { background: var(--arx-line) !important; }
html.arx-dark .signature-pad { border-color: var(--arx-line) !important; }

/* Producao */
html.arx-dark #fila-panel { background: var(--arx-white) !important; border-right-color: var(--arx-line) !important; }
html.arx-dark #fila-search { border-bottom-color: var(--arx-line) !important; }
html.arx-dark #kanban-header { background: var(--arx-white) !important; border-bottom-color: var(--arx-line) !important; }
html.arx-dark #kanban-header-info h2 { color: var(--arx-navy-ink) !important; }
html.arx-dark #kanban-header-info h2 span { color: var(--arx-amber) !important; }
html.arx-dark #kanban-header-info p { color: var(--arx-soft) !important; }
html.arx-dark #prod-metrics-bar { background: var(--arx-white) !important; border-bottom-color: var(--arx-line) !important; }
html.arx-dark #prod-metrics-bar button[data-filter="urgentes"] { color: var(--arx-navy-ink) !important; border-color: var(--arx-line) !important; }
html.arx-dark .fila-card { background: var(--arx-cream) !important; }
html.arx-dark .fila-card:hover, html.arx-dark .fila-card.active { background: #1f4152 !important; border-color: var(--arx-amber) !important; }
html.arx-dark .fila-card-nome { color: var(--arx-navy-ink) !important; }
html.arx-dark .fila-card-os, html.arx-dark .fila-card-pecas { color: var(--arx-soft) !important; }
html.arx-dark .badge-dias.ok { background: #14342a !important; color: #86efac !important; }
html.arx-dark .badge-dias.urgente { background: #362c1a !important; color: #fcd34d !important; }
html.arx-dark .badge-dias.atrasado { background: #3a2329 !important; color: #fca5a5 !important; }
html.arx-dark .badge-dias.sem-data { background: var(--arx-cream) !important; color: var(--arx-soft) !important; }
html.arx-dark .prod-badge-dias[style*="--color-primary"] { color: var(--arx-soft) !important; background: var(--arx-cream) !important; }
html.arx-dark .kb-col-header { background-color: #1a3c4c !important; }
html.arx-dark .kb-col { border-color: var(--arx-line) !important; }
html.arx-dark #prod-alocacao-info { background: var(--arx-cream) !important; color: var(--arx-soft) !important; }
html.arx-dark #prod-alocacao-erro { background: #3a2329 !important; color: #fca5a5 !important; }
html.arx-dark .sugestao-oficina { background: var(--arx-cream) !important; border-color: var(--arx-line) !important; }
html.arx-dark .sugestao-oficina [style*="1D2F3A"] { color: var(--arx-navy-ink) !important; }
html.arx-dark .sugestao-oficina [style*="606E78"] { color: var(--arx-soft) !important; }
html.arx-dark .progress-bar { background: var(--arx-line) !important; }
html.arx-dark .progress-fill { background: var(--arx-amber) !important; }
html.arx-dark .modal-box label { color: var(--arx-soft) !important; }
html.arx-dark #kanban-placeholder { color: var(--arx-soft) !important; }

/* Cadastros / abas proprias (nao #crmTabs) */
html.arx-dark .tab-btn.active { background-color: var(--arx-amber) !important; color: #0e2530 !important; border-color: var(--arx-amber) !important; }
html.arx-dark .tab-btn-sm.active { background-color: var(--arx-amber) !important; color: #0e2530 !important; }
html.arx-dark .tab-btn, html.arx-dark .tab-btn-sm { color: var(--arx-soft) !important; }
html.arx-dark .hover\:text-brand-800:hover { color: var(--arx-amber) !important; }

/* Ficha tecnica / Atendimento */
html.arx-dark .card { background: var(--arx-white) !important; border-color: var(--arx-line) !important; }
html.arx-dark .image-box { background: var(--arx-cream) !important; border-color: var(--arx-line) !important; }
html.arx-dark .image-box.has-image { background: var(--arx-white) !important; border-color: var(--arx-line) !important; }
html.arx-dark .image-box:hover { background: #1f4152 !important; border-color: var(--arx-amber) !important; }
html.arx-dark .table-head { background: var(--arx-cream) !important; color: var(--arx-soft) !important; }
html.arx-dark .pill { background: var(--arx-amber) !important; color: #0e2530 !important; }
html.arx-dark .margin-good { background: #14342a !important; color: #86efac !important; }
html.arx-dark .margin-medium { background: #362c1a !important; color: #fcd34d !important; }
html.arx-dark .margin-low { background: #3a2329 !important; color: #fca5a5 !important; }
html.arx-dark .atd-valor .v { color: var(--arx-navy-ink) !important; }
html.arx-dark .atd-prazo .data { color: var(--arx-navy-ink) !important; }
html.arx-dark .atd-chip.ativo { background: var(--arx-amber) !important; color: #0e2530 !important; border-color: var(--arx-amber) !important; }
html.arx-dark .atd-sit.em_producao { background: #22485a !important; color: var(--arx-navy-ink) !important; }
html.arx-dark .atd-sit.aguardando_os { background: #362c1a !important; color: #fcd34d !important; }
html.arx-dark .atd-prazo.apertado { background: #362c1a !important; }
html.arx-dark .atd-prazo.apertado .rest { color: #fcd34d !important; }
html.arx-dark .atd-sit.aguardando_entrada { background: #3a2329 !important; color: #f0a58f !important; }
html.arx-dark .atd-sit.pronto { background: #14342a !important; color: #86efac !important; }
html.arx-dark .atd-prazo.atrasado { background: #3a2329 !important; }
html.arx-dark .atd-prazo.atrasado .rest, html.arx-dark .atd-prazo.atrasado .data { color: #f0a58f !important; }
html.arx-dark .atd-card.em_producao { border-left-color: #5b86a6 !important; }
html.arx-dark .atd-alerta, html.arx-dark .atd-erro { color: #f0a58f !important; }
html.arx-dark .atd-prazo.no_prazo .rest { color: #86efac !important; }

/* ---- Switch de tema (barra lateral) ---- */
.arx-theme-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 12px; padding: 8px 10px; border-radius: var(--arx-ctrl, 8px);
  background: transparent; border: 1px solid var(--arx-line, #ece4d6);
  color: var(--arx-soft, #606E78); font-family: var(--arx-font-ui); font-size: 13px;
  font-weight: 600; cursor: pointer; text-align: left;
}
.arx-theme-toggle:hover { background: rgba(25,59,79,.05); }
html.arx-dark .arx-theme-toggle:hover { background: rgba(255,255,255,.06); }
.arx-theme-lbl { flex: 1; }
.arx-theme-sw {
  width: 36px; height: 20px; border-radius: 999px; background: #EACFA5;
  position: relative; flex-shrink: 0; transition: background .2s;
}
html.arx-dark .arx-theme-sw { background: var(--arx-amber, #D07E1F); }
.arx-theme-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .2s; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
html.arx-dark .arx-theme-knob { left: 18px; }
.arx-theme-floating {
  position: fixed; bottom: 16px; left: 16px; z-index: 9998; width: auto;
  background: var(--arx-white, #fff); box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* ── 9. Tabelas no padrao editorial da marca ─────────────────────────────── */

table:not(.fin-tab):not(.arx-tabela) thead th,
table:not(.fin-tab):not(.arx-tabela) thead td {
  background-color: var(--arx-navy) !important;
  /* O !important aqui NAO e enfeite. O cabecalho e navy nos DOIS modos, mas
     varias telas escrevem `text-gray-700` no <th>, e a camada de adocao manda
     essa classe para --arx-navy-ink COM !important. No modo claro esse token e
     escuro: dava texto escuro sobre navy, contraste 1.17, ilegivel. No noturno
     o mesmo token e claro, e por isso o defeito so aparecia com o modo noturno
     desligado. Como o fundo nao muda entre os modos, a cor do texto tambem nao
     pode mudar. */
  color: var(--arx-on-accent) !important;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  font-weight: 700;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 3px solid var(--arx-amber) !important;
}

table:not(.fin-tab):not(.arx-tabela) tbody td {
  padding: 11px 14px;
  color: var(--arx-navy-ink);
  border-bottom: 1px solid var(--arx-line);
  border-left: none !important;
  border-right: none !important;
}

table:not(.fin-tab):not(.arx-tabela) tbody tr:nth-child(even) td {
  background-color: var(--arx-offwhite) !important;
}

table:not(.fin-tab):not(.arx-tabela) tbody tr:hover td {
  background-color: var(--arx-cream) !important;
}

table:not(.fin-tab):not(.arx-tabela) tbody tr:last-child td {
  border-bottom: none;
}

table:not(.fin-tab):not(.arx-tabela) td.num,
table:not(.fin-tab):not(.arx-tabela) td.text-end,
table:not(.fin-tab):not(.arx-tabela) td.text-right,
table:not(.fin-tab):not(.arx-tabela) .valor {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.table-bordered th,
.table-bordered td {
  border-left: none !important;
  border-right: none !important;
}

.table-light thead th {
  background-color: var(--arx-navy) !important;
  color: var(--arx-on-accent) !important;
}

/* ── Botao de acao no modo noturno: ambar no lugar do navy ──────────────── */
html.arx-dark .arx-btn:not(.secundario):not(.ok):not(.alerta) {
  background-color: var(--arx-amber) !important;
  color: #0e2530 !important;
  font-weight: 700 !important;
}

html.arx-dark .arx-btn:not(.secundario):not(.ok):not(.alerta):hover {
  background-color: #A86314 !important;
  color: #0e2530 !important;
}

html.arx-dark .btn-primary,
html.arx-dark .btn-info {
  background-color: var(--arx-amber) !important;
  color: #0e2530 !important;
}

html.arx-dark .btn-success,
html.arx-dark .btn-danger,
html.arx-dark .btn-warning {
  color: #FFFFFF !important;
}

html.arx-dark .arx-acao {
  border-color: var(--arx-line) !important;
}

html.arx-dark .arx-acao:hover {
  border-color: var(--arx-amber) !important;
}

html.arx-dark :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--arx-amber) !important;
  outline-offset: 2px !important;
}

/* ── 10. A barra lateral e sempre escura (navy nos dois modos) ───────────── */

#mainSidebar {
  background-color: #193B4F !important;
}

/* Neutralizar as utilities de texto cinza dentro da barra */
#mainSidebar .text-gray-400,
#mainSidebar .text-gray-500,
#mainSidebar .text-gray-600,
#mainSidebar .text-gray-700,
#mainSidebar .text-gray-800,
#mainSidebar .text-gray-900,
#mainSidebar .text-slate-400,
#mainSidebar .text-slate-500,
#mainSidebar .text-slate-600,
#mainSidebar .text-slate-700,
#mainSidebar .text-slate-800,
#mainSidebar .text-slate-900 {
  color: #C9D5DC !important;
}

/* Itens de menu */
#mainSidebar .nav-link {
  color: #C9D5DC !important;
}

#mainSidebar .nav-link svg {
  color: #93A7B3 !important;
}

#mainSidebar .nav-link:hover {
  color: #F5F2EC !important;
  background-color: #12303F !important;
}

#mainSidebar .nav-link:hover svg {
  color: #EACFA5 !important;
}

#mainSidebar .nav-link.active {
  color: #FFFFFF !important;
  background-color: #12303F !important;
  border-left: 3px solid #D07E1F !important;
  font-weight: 700 !important;
}

#mainSidebar .nav-link.active svg {
  color: #D07E1F !important;
}

/* Rodape (usuario, botao Sair e switch de tema) */
#mainSidebar .arx-sidebar-usuario-nome {
  color: #F5F2EC !important;
}

#mainSidebar .arx-sidebar-usuario-papel {
  color: #93A7B3 !important;
}

#mainSidebar button[aria-label="Sair"] {
  color: #93A7B3 !important;
}

#mainSidebar button[aria-label="Sair"]:hover {
  color: #EACFA5 !important;
}

#mainSidebar .arx-theme-lbl {
  color: #C9D5DC !important;
}

#mainSidebar .arx-sidebar-rodape {
  border-top: 1px solid #2C4B5E !important;
}

/* Topo */
#mainSidebar .arx-sidebar-nome {
  color: #F5F2EC !important;
}

#mainSidebar .arx-sidebar-kicker {
  color: #EACFA5 !important;
}

#mainSidebar .arx-sidebar-topo {
  border-bottom: 1px solid #2C4B5E !important;
}

/* Neutralizar fundo branco dentro da barra */
#mainSidebar .bg-white {
  background-color: #193B4F !important;
}

/* ── 11. Contraste do modo noturno: acentos e botoes ────────────────────── */
/* Medido no navegador com o tema aplicado na carga. Minimo: 4.5 para texto,
   3.0 para a forma do componente. Nada aqui vale no modo claro. */

/* Botao solido navy passa a ambar: o navy sumia no fundo escuro (contraste 1.20).
   Escopo em button/a de proposito, para nao pintar barra de progresso, que e div. */
html.arx-dark button.bg-brand-600, html.arx-dark a.bg-brand-600,
html.arx-dark button.bg-brand-700, html.arx-dark a.bg-brand-700,
html.arx-dark button.bg-blue-600,  html.arx-dark a.bg-blue-600,
html.arx-dark button.bg-blue-700,  html.arx-dark a.bg-blue-700,
html.arx-dark button.bg-gray-600,  html.arx-dark a.bg-gray-600 {
  background-color: #D07E1F !important;
  color: #0e2530 !important;
}
html.arx-dark button.bg-brand-600:hover, html.arx-dark a.bg-brand-600:hover,
html.arx-dark button.bg-brand-700:hover, html.arx-dark a.bg-brand-700:hover,
html.arx-dark button.bg-blue-600:hover,  html.arx-dark a.bg-blue-600:hover,
html.arx-dark button.bg-blue-700:hover,  html.arx-dark a.bg-blue-700:hover,
html.arx-dark button.bg-gray-600:hover,  html.arx-dark a.bg-gray-600:hover {
  background-color: #EACFA5 !important;
  color: #0e2530 !important;
}

/* Botao de fundo branco vira cor de card no escuro e some: ganha borda. */
html.arx-dark button.bg-white,
html.arx-dark a.bg-white {
  border: 1px solid var(--arx-line) !important;
}

/* O fundo do .btn-secondary e o soft, que no escuro e claro: texto escurece. */
html.arx-dark .btn-secondary { color: #0e2530 !important; }

/* Acento ambar vira bege: o design system define o bege como realce e texto
   sobre navy, e no escuro o fundo E navy. O .arx-kicker fica de fora, e a
   assinatura da marca e ja passa no contraste. */
html.arx-dark .text-amber-600,
html.arx-dark .text-amber-700,
html.arx-dark .text-warning,
html.arx-dark .btn-outline-warning,
html.arx-dark .btn-link { color: #EACFA5 !important; }

/* Terracota clareia para ler sobre card escuro. */
html.arx-dark .text-danger,
html.arx-dark .text-red-600,
html.arx-dark .text-red-700,
html.arx-dark .btn-outline-danger { color: var(--arx-terra-ink) !important; }

/* Verde: texto clareia; botao solido escurece para o branco passar em 7.99. */
html.arx-dark .text-success,
html.arx-dark .text-green-600,
html.arx-dark .text-green-700,
html.arx-dark .btn-outline-success { color: #86efac !important; }

html.arx-dark .btn-success,
html.arx-dark .arx-btn.ok {
  background-color: #1A5C2E !important;
  color: #FFFFFF !important;
}

/* Etiquetas solidas do Bootstrap: no escuro o fundo `secondary` e o soft, que e
   claro, entao o texto branco sumia (2.20). Texto escurece. */
html.arx-dark .text-bg-secondary { color: #0e2530 !important; }
html.arx-dark .text-bg-light { color: #0e2530 !important; }

/* Botao de acento com fundo suave (ex.: "Disparar e-mail" no CRM): o texto usa
   .text-brand-600, que no escuro vira ambar e fica em 3.94 sobre o card. Bege. */
html.arx-dark .text-brand-600,
html.arx-dark .text-brand-700 { color: var(--arx-amber-ink) !important; }

/* Botao verde da home ("Confirmar entrada"): branco sobre o verde da marca da
   4.26. Escurece o fundo e mantem a borda no verde vivo, para a forma aparecer. */
html.arx-dark .arx-btn-confirmar {
  background: #1A5C2E !important;
  color: var(--arx-on-accent) !important;
  border: 1px solid #288C46 !important;
}

/* Botao de superficie de card no escuro: a borda em --arx-line quase nao aparece
   contra o fundo (1.49). O soft delineia sem pesar. */
html.arx-dark button.bg-white,
html.arx-dark a.bg-white,
html.arx-dark button[class*="bg-brand-50"],
html.arx-dark a[class*="bg-brand-50"] {
  border: 1px solid var(--arx-soft) !important;
}

/* Chip ativo da barra de metricas da producao: o fundo dele e a propria cor do
   indicador. No escuro a cor de "Total" e clara, entao o texto branco sumia.
   O !important de folha de estilo vence o estilo inline que o JS injeta. */
html.arx-dark #prod-metrics-bar .prod-chip-ativo[data-filter="todos"] {
  color: #0e2530 !important;
}

/* ── 12. Classes de opacidade que o Tailwind pré-compilado nao tem ──────────
   O css/tailwind-standalone.css e um build fixo. Classes com barra escritas
   depois dele NAO existem no arquivo e renderizam SEM estilo nenhum: o elemento
   simplesmente perde o fundo ou a cor que o autor quis. Verificado uma a uma;
   as que faltavam estao definidas aqui, na paleta da marca. */

/* Botoes translucidos sobre cabecalho colorido (CRM e Ficha Tecnica) */
.bg-white\/15 { background-color: rgba(255, 255, 255, .15) !important; }
.bg-white\/25 { background-color: rgba(255, 255, 255, .25) !important; }
.bg-white\/30 { background-color: rgba(255, 255, 255, .30) !important; }
.hover\:bg-white\/25:hover { background-color: rgba(255, 255, 255, .25) !important; }
.hover\:bg-white\/30:hover { background-color: rgba(255, 255, 255, .30) !important; }

/* Texto secundario sobre cabecalho colorido */
.text-white\/70 { color: rgba(255, 255, 255, .72) !important; }
.text-white\/90 { color: rgba(255, 255, 255, .90) !important; }

/* Blocos de destaque suave: viram creme da marca, que ja acompanha o tema. */
.bg-blue-50\/50,
.bg-gray-50\/60,
.bg-slate-100\/80 { background-color: var(--arx-cream) !important; }

/* Bordas translucidas sobre cabecalho colorido */
.border-white\/30 { border-color: rgba(255, 255, 255, .30) !important; }
.border-white\/50 { border-color: rgba(255, 255, 255, .50) !important; }

/* ── 13. Contorno do botao secundario no modo claro ─────────────────────────
   O design system define: "secundario = contorno navy sobre claro". Os botoes
   de fundo branco herdavam borda bege do mapeamento de .border-gray-300, o que
   da 1.35 de contraste contra o off-white: a forma do botao quase nao aparece.
   Navy da 10.5 e e o que a especificacao pede.
   Escopo em button/a de proposito: input e card continuam com borda bege, como
   o design system tambem manda. */
button.bg-white,
a.bg-white {
  border-color: var(--arx-navy) !important;
}

/* Botao secundario de fundo creme (ex.: "Disparar e-mail"): mesmo caso do de
   fundo branco, a borda bege nao define a forma. Contorno navy, como manda o
   design system. */
button[class*="bg-brand-50"],
a[class*="bg-brand-50"] {
  border-color: var(--arx-navy) !important;
}

/* ── 14. Verde acessivel em texto e botao (modo claro) ──────────────────────
   O verde da marca #288C46 com texto branco da 4.26, abaixo do minimo de 4.5.
   Texto e botao passam a usar o derivado escuro #1A5C2E, que ja e adotado no
   arquivo e da 7.99. O #288C46 continua sendo o verde da marca para pastilha de
   status, ponto de etapa e realce: la ele nao carrega texto pequeno.
   DESVIO CONSCIENTE do "verde = #288C46" em botao. Reversivel: basta remover
   este bloco. */
.btn-success,
.arx-btn.ok,
.arx-btn-confirmar {
  background-color: #1A5C2E !important;
  /* A borda fica no verde VIVO da marca de proposito: e ela que desenha a forma
     do botao contra o fundo (3.80 no claro, 3.33 no escuro). Igualar a borda ao
     preenchimento escuro fazia o botao sumir como forma no modo noturno. */
  border-color: #288C46 !important;
  color: var(--arx-on-accent) !important;
}
.text-success,
.text-green-600,
.text-green-700,
.btn-outline-success {
  color: #1A5C2E !important;
}
.btn-outline-success { border-color: #1A5C2E !important; }

/* ── 15. Titulo dentro de bloco com texto branco ────────────────────────────
   A regra que pinta .text-xl/2xl/3xl de navy tem guarda `:not(.text-white)`,
   mas ela so olha o PROPRIO elemento. Quando o texto branco esta no bloco pai
   (card colorido), o numero herdava navy e sumia sobre fundo escuro. Foi o que
   apagou o valor do card Fornecedores em Cadastros. */
.text-white .text-xl,
.text-white .text-2xl,
.text-white .text-3xl,
.text-white h1, .text-white h2, .text-white h3 { color: inherit !important; }
html.arx-dark .text-white .text-xl,
html.arx-dark .text-white .text-2xl,
html.arx-dark .text-white .text-3xl,
html.arx-dark .text-white h1,
html.arx-dark .text-white h2,
html.arx-dark .text-white h3 { color: inherit !important; }

/* ── 16. Cartao de indicador no padrao editorial da marca ───────────────────
   Substitui o card de gradiente saturado, que o design system reprova
   ("layout poluido, promocional, com cara de varejo"). Superficie clara, borda
   bege, rotulo em kicker ambar e numero em Playfair. Usa token em tudo, entao
   acompanha o modo noturno sozinho. */
.arx-kpi {
  background: var(--arx-white);
  border: 1px solid var(--arx-beige);
  border-radius: var(--arx-radius);
  box-shadow: var(--arx-shadow);
  padding: 18px 20px;
}
.arx-kpi-rotulo {
  text-transform: uppercase;
  /* Ambar escuro: o rotulo e texto pequeno (10.5px) e o ambar cheio da so 3.14
     sobre o card claro. O amber-ink da 4.67 no claro e vira bege no escuro. */
  color: var(--arx-amber-ink);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .16em;
  margin: 0;
}
.arx-kpi-valor {
  font-family: var(--arx-font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--arx-navy-ink);
  line-height: 1.15;
  margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
}

/* ── 17. Classes de valor arbitrario que o Tailwind pre-compilado nao tem ────
   Mesma armadilha do bloco 12, agora com as classes entre colchetes. O
   css/tailwind-standalone.css e um build fixo: `max-h-[92vh]` escrito depois
   dele NAO existe no arquivo e nao aplica nada.
   Consequencias reais, relatadas pelo Douglas em 01/08/2026:
     . o modal "Montar a peca" ficava SEM altura maxima, crescia com os
       acabamentos e empurrava os botoes Cancelar e Adicionar para fora da tela;
     . a pagina do orcamento ficava SEM largura maxima e o conteudo se espalhava
       de ponta a ponta.
   Verificado no navegador antes de corrigir: max-height e max-width vinham
   como `none`, e o cartao do modal media 1943px de altura.
   Usadas em 11 arquivos, entao a correcao aqui vale para o sistema inteiro. */

/* Altura maxima: o que devolve o rodape do modal para dentro da tela */
.max-h-\[92vh\] { max-height: 92vh; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[80vh\] { max-height: 80vh; }
.max-h-\[280px\] { max-height: 280px; }

/* Largura maxima: o que impede o conteudo de se espalhar */
.max-w-\[1200px\] { max-width: 1200px; }
.max-w-\[200px\] { max-width: 200px; }
.max-w-\[150px\] { max-width: 150px; }

/* Larguras e alturas minimas de coluna, cartao e etiqueta */
.min-w-\[250px\] { min-width: 250px; }
.min-w-\[240px\] { min-width: 240px; }
.min-w-\[230px\] { min-width: 230px; }
.min-w-\[200px\] { min-width: 200px; }
.min-w-\[18px\]  { min-width: 18px; }
.min-h-\[400px\] { min-height: 400px; }
.min-h-\[140px\] { min-height: 140px; }
.min-h-\[28px\]  { min-height: 28px; }

/* Tamanhos de texto miudos usados em etiqueta e contador */
.text-\[13px\] { font-size: 13px; }
.text-\[11px\] { font-size: 11px; }
.text-\[10px\] { font-size: 10px; }

/* Empilhamento dos modais. Sem isto nenhum deles tinha z-index e a ordem ficava
   por conta da posicao no HTML, o que quebra assim que um modal abre outro. */
.z-\[60\]  { z-index: 60; }
.z-\[65\]  { z-index: 65; }
.z-\[70\]  { z-index: 70; }
.z-\[80\]  { z-index: 80; }
.z-\[85\]  { z-index: 85; }
.z-\[90\]  { z-index: 90; }
.z-\[100\] { z-index: 100; }

/* ── 18. Tabela de peças do orçamento ───────────────────────────────────────
   A coluna de ações ficava confusa: o cabeçalho de um lado e as duas ações
   soltas do outro, sem alinhamento entre si. Agora as ações encostam à direita,
   junto das colunas de valor, e ganham respiro entre elas.
   As células vêm do js/orcamento.js, que nesta rodada é da sessão de
   desenvolvimento, então o ajuste é feito por CSS, sem tocar naquele arquivo. */
.tabela-itens thead th { white-space: nowrap; }

/* Última coluna: as ações alinham à direita, como os valores acima delas. */
.tabela-itens tbody td:last-child > div {
  justify-content: flex-end;
  gap: 14px;
}

/* As duas ações precisam parecer ações, não texto solto. */
.tabela-itens tbody td:last-child button {
  white-space: nowrap;
  padding: 2px 0;
  font-weight: 600;
}
.tabela-itens tbody td:last-child button:hover { text-decoration: underline; }

/* A descrição da peça é longa: um teto evita que ela empurre as colunas de
   valor para fora e deixe a linha com cara de texto corrido. */
.tabela-itens tbody td:first-child { max-width: 640px; }

/* ── 19. Cabecalho de tabela respeita o alinhamento pedido na tela ──────────
   O bloco 9 alinha todo cabecalho a esquerda, que e o padrao editorial. So que
   ele vence por especificidade o .text-right do Tailwind, entao a coluna de
   valor ficava com o titulo a esquerda e os numeros a direita: a tabela inteira
   parecia desalinhada, nao so a coluna de acoes.
   O proprio design system pede "numeros a direita", entao quando a tela declara
   o alinhamento, ele manda. Especificidade espelha a do bloco 9 para vencer,
   sem precisar de !important. */
table:not(.fin-tab):not(.arx-tabela) thead th.text-right,
table:not(.fin-tab):not(.arx-tabela) thead td.text-right { text-align: right; }

table:not(.fin-tab):not(.arx-tabela) thead th.text-center,
table:not(.fin-tab):not(.arx-tabela) thead td.text-center { text-align: center; }

/* ── 20. Utilities brand-* que sobraram azuis ───────────────────────────────
   O tailwind.config define `brand` como a paleta AZUL de antes do Arx, entao no
   build compilado `.from-brand-600` vale #2563eb. A camada de adocao remapeava
   varias brand-*, mas nao as de gradiente, e o cabecalho do card de lead saia
   AZUL, sem nada a ver com a marca. Foi o que o Douglas viu em 01/08/2026.
   Outras da mesma familia sequer existem no build e nao aplicam nada.
   Levantadas uma a uma comparando o uso nas telas com o que o build define. */

/* Gradiente: a causa do cabecalho azul. */
.from-brand-600, .from-brand-700 {
  --tw-gradient-from: var(--arx-navy) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(25, 59, 79, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-brand-700, .to-brand-800, .to-brand-900 {
  --tw-gradient-to: var(--arx-navy-deep) var(--tw-gradient-to-position);
}

/* Fundos e bordas que nao existiam no build. */
.bg-brand-200 { background-color: #E4DCCC; }
.bg-brand-400 { background-color: var(--arx-navy-light, #2C5468); }
.border-brand-500 { border-color: var(--arx-navy); }
.border-brand-700 { border-color: var(--arx-navy-deep); }
.text-brand-800 { color: var(--arx-navy); }

/* Anel de foco: ambar, como em todo o resto do sistema. */
.ring-brand-300, .ring-brand-500 { --tw-ring-color: var(--arx-amber); }

/* ==========================================================================
   BLOCO 21 · Colunas ordenaveis (cabecalho de tabela clicavel)
   --------------------------------------------------------------------------
   A tela de Cadastros tinha busca e filtro, mas nao tinha como ORDENAR a
   lista. Clicar no titulo da coluna passa a ordenar; clicar de novo inverte.
   O cabecalho e navy nos dois modos (BLOCO 9), entao tudo aqui e desenhado
   sobre --arx-on-accent, que nao muda de modo.
   ========================================================================== */

.col-ordenavel {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  /* Espaco reservado para a seta: sem isso a coluna pula de largura ao ser
     selecionada e a linha inteira dança. */
  padding-right: 1.6rem !important;
  position: relative;
}

/* O hover ESCURECE em vez de clarear. Navy claro parecia mais natural, mas
   sobre ele o ambar da seta ativa cai para 2.60 de contraste, abaixo do
   minimo 3.0 de componente. Escurecendo, o ambar sobe para 4.39 e ainda passa
   a sensacao de tecla apertada. */
.col-ordenavel:hover,
.col-ordenavel:focus-visible {
  background-color: var(--arx-navy-deep, #12303F) !important;
}

.col-ordenavel:focus-visible {
  outline: 2px solid var(--arx-amber);
  outline-offset: -2px;
}

/* Seta neutra, discreta, so para avisar que a coluna e clicavel. */
.col-ordenavel::after {
  content: "\2195";           /* seta dupla */
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--arx-on-accent);
  /* 0.45 e o piso: abaixo disso o branco composto sobre o navy fica em 2.85
     de contraste. Em 0.45 da 3.70 e a seta continua discreta. */
  opacity: 0.45;
  font-size: 0.9em;
}

.col-ordenavel:hover::after { opacity: 0.8; }

/* Coluna que manda na ordem agora: seta cheia e ambar, o mesmo destaque que o
   resto do sistema usa para "e por aqui que voce esta". */
.col-ordenavel[aria-sort="ascending"]::after  { content: "\2191"; opacity: 1; color: var(--arx-amber); }
.col-ordenavel[aria-sort="descending"]::after { content: "\2193"; opacity: 1; color: var(--arx-amber); }
.col-ordenada { color: var(--arx-on-accent) !important; }

/* ==========================================================================
   BLOCO 22 · Linha de Pedidos Vinculados (card do lead) e anexo do e-mail
   --------------------------------------------------------------------------
   Cada linha tem tres acoes: abrir o documento, baixar o PDF e mandar por
   e-mail. Os tres sao <button> de verdade, entao o estilo vem por classe e
   nao por role/tabindex numa div.
   As classes moram aqui, e nao no HTML com utilitarios, porque o
   tailwind-standalone.css e um build fixo: classe escrita depois dele nao
   existe e o elemento sai sem estilo nenhum.
   ========================================================================== */

.arx-pedido {
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--arx-line);
  background-color: var(--arx-white);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.arx-pedido:hover { border-color: var(--arx-amber); }

/* O foco do teclado aparece na LINHA quando o alvo interno recebe foco.
   Sem isso o contorno some no botao invisivel de abrir. */
.arx-pedido:focus-within { border-color: var(--arx-amber); }

.arx-pedido-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* O botao de abrir nao PARECE botao: ele e a identidade da linha. Botao com
   cara de botao dentro de uma linha que ja e clicavel confunde. */
.arx-pedido-abrir {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.arx-pedido-abrir:focus-visible {
  outline: 2px solid var(--arx-amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.arx-pedido-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--arx-soft);
}

.arx-pedido-tag {
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  text-transform: capitalize;
  /* Tarja contornada, nao preenchida. Antes eram bg-yellow-100/text-yellow-700 do
     Tailwind: amarelo de biblioteca, fora da paleta, e medido em 2.67 de
     contraste no modo claro. Contorno em currentColor com tinta da marca da
     4.69 e 8.03 no claro, 8.57 e 8.46 no escuro. */
  border: 1px solid currentColor;
  background-color: transparent;
}

.arx-pedido-tag.aberto  { color: var(--arx-amber-ink); }
.arx-pedido-tag.fechado { color: var(--arx-green-ink); }

/* A dica de acao fica sempre visivel, nao so no hover: a equipe e leiga em
   tecnologia e nao vai descobrir sozinha que a linha abre o documento. */
.arx-pedido-abrir-dica {
  font-size: 0.6875rem;
  color: var(--arx-amber-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.arx-pedido-valor { text-align: right; white-space: nowrap; }
.arx-pedido-total { font-weight: 700; color: var(--arx-green-ink); }
.arx-pedido-data { font-size: 0.75rem; color: var(--arx-soft); margin-left: 0.5rem; }

.arx-pedido-acoes {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.625rem;
  flex-wrap: wrap;
}

/* Hover INVERTE (fundo vira a cor do texto). Encher de navy funcionava no modo
   claro, mas no escuro o navy quase encosta na cor do card e o botao sumia de
   novo. Invertendo, o realce e obvio nos dois modos. */
/* Botao de acao com area de toque de verdade (44px de alvo somando o padding),
   contorno visivel e rotulo escrito por extenso. Nada de icone sozinho: o
   Manual do produto pede que a tela diga o que faz. */
.arx-pedido-acao {
  flex: 1 1 auto;
  min-width: 9.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  /* Borda em currentColor, nao em --arx-navy. Medido: navy sobre a superficie
     escura do card da 1.09 de contraste, ou seja, no modo noturno a forma do
     botao sumia. Seguindo a cor do rotulo, a borda herda o mesmo contraste do
     texto: 13.8 no claro e 10.3 no escuro. */
  border: 1px solid currentColor;
  background-color: transparent;
  color: var(--arx-navy-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.arx-pedido-acao:hover:not(:disabled) {
  background-color: var(--arx-navy-ink);
  color: var(--arx-white);
}

.arx-pedido-acao:focus-visible {
  outline: 2px solid var(--arx-amber);
  outline-offset: 2px;
}

/* "Fechar pedido" e a acao principal da linha e a unica irreversivel: leva o ambar da
   marca para o olho achar sozinho, sem virar bloco chapado. A borda continua em
   currentColor como as irmas, entao o contraste segue valendo nos dois temas. */
.arx-pedido-acao.destaque {
  color: var(--arx-amber);
  font-weight: 600;
}

.arx-pedido-acao.destaque:hover:not(:disabled) {
  background-color: var(--arx-amber);
  color: var(--arx-white);
}

.arx-pedido-acao:disabled { opacity: 0.6; cursor: progress; }

/* --- Anexo do e-mail de orcamento --- */

.arx-anexo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid var(--arx-line);
  background-color: var(--arx-white);
  font-size: 0.8125rem;
}

.arx-anexo-nome { font-weight: 500; color: var(--arx-navy-ink); }
.arx-anexo-estado { color: var(--arx-soft); }
.arx-anexo-ok { color: var(--arx-green-ink); }
.arx-anexo-erro { color: var(--arx-terra-ink); flex-basis: 100%; }
.arx-anexo-botoes { display: flex; gap: 0.75rem; flex-basis: 100%; }

.arx-anexo-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--arx-amber-ink);
  text-decoration: underline;
  cursor: pointer;
}

.arx-anexo-link:focus-visible { outline: 2px solid var(--arx-amber); outline-offset: 2px; }

/* Miniatura da arte de aplicação na lista do orçamento. Contain e fundo branco porque
   logo com fundo transparente sobre o off-white some. */
/* A CAIXA DA MINIATURA DA ARTE, que agora tambem serve para o arquivo que NAO e imagem.
   PDF, AI e EPS sao aceitos no anexo e nenhum deles vira <img>: desenhavam um quadrado
   branco de 56px, sem nome e sem jeito de abrir. Agora a mesma caixa escreve a extensao. */
.arte-mini-lista {
  width: 56px; height: 56px; flex-shrink: 0;
  border: 1px solid var(--arx-beige);
  background: var(--arx-white);
  padding: 2px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.arte-mini-lista img, .arte-mini-img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
}
/* Arquivo sem previa: a extensao escrita, para a pessoa saber que ANEXOU e o que anexou. */
.arte-mini-lista.arquivo {
  font-size: 0.625rem; font-weight: 600; letter-spacing: .04em;
  color: var(--arx-soft); text-align: center; line-height: 1.2;
  background: var(--arx-cream);
}
/* A arte aberta no tamanho que da para conferir o desenho. */
.arte-grande {
  max-width: 100%; max-height: 70vh; object-fit: contain;
  display: block; margin: 0 auto;
  background: var(--arx-white);
}
/* ==========================================================================
   BLOCO 23 · Estrelas de avaliacao
   --------------------------------------------------------------------------
   .text-yellow-500 nao existe no tailwind-standalone.css, que e um build fixo.
   No modo claro as estrelas ficavam sem cor e herdavam a tinta escura da
   tabela; no noturno o proprio arx.css as pintava de #fde047, amarelo de
   biblioteca. Passam a usar a tinta ambar da marca, que inverte com o tema.
   ========================================================================== */
.text-yellow-500 { color: var(--arx-amber-ink) !important; }

/* ==========================================================================
   BLOCO 24 · Historico da empresa no card do lead
   --------------------------------------------------------------------------
   Pedido do Douglas em 17/08/2026: o mesmo CNPJ pode ter varios cards e varios
   orcamentos rodando, e o card so enxergava o que estava pendurado nele. Em
   cima ficam os documentos DESTE card (BLOCO 22, .arx-pedido); aqui embaixo
   fica tudo que ja foi feito para a empresa, inclusive em outro card e
   inclusive documento sem card nenhum.

   Linha mais leve que a de cima de proposito: aquela e acionavel (fechar
   pedido, mandar e-mail), esta e so consulta e abre o documento. Peso igual
   faria as duas competirem pela atencao de quem esta com o cliente ao telefone.

   As classes moram aqui e nao no HTML com utilitarios porque o
   tailwind-standalone.css e um build fixo: classe escrita depois dele sai sem
   estilo nenhum. Cores so da paleta, e so as tintas que o modo noturno
   redefine (--arx-*-ink, --arx-soft, --arx-line, --arx-white).
   ========================================================================== */

.arx-hist {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.arx-hist-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--arx-line);
  background-color: var(--arx-white);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease;
}

.arx-hist-linha:hover        { border-color: var(--arx-amber); }
.arx-hist-linha:focus-visible {
  outline: 2px solid var(--arx-amber);
  outline-offset: 2px;
}

.arx-hist-esq {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.arx-hist-dir {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.arx-hist-num {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--arx-navy-ink);
}

/* Mesma tarja contornada do BLOCO 22, com as duas situacoes que so existem no
   historico: entregue (a venda que chegou ao fim) e cancelado. */
.arx-hist-tag {
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  border: 1px solid currentColor;
  background-color: transparent;
  white-space: nowrap;
}

.arx-hist-tag.aberto    { color: var(--arx-amber-ink); }
.arx-hist-tag.fechado   { color: var(--arx-green-ink); }
.arx-hist-tag.entregue  { color: var(--arx-green-ink); }
.arx-hist-tag.cancelado { color: var(--arx-terra-ink); }

/* Numeros de dinheiro alinham na coluna: digito de largura fixa, senao a
   virgula dança de linha para linha. */
.arx-hist-valor {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--arx-navy-ink);
  font-variant-numeric: tabular-nums;
}

/* O valor que o vendedor nao pode ver nao e um numero: e uma frase, e nao pode
   parecer dinheiro. */
.arx-hist-valor.reservado {
  font-weight: 400;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--arx-soft);
}

.arx-hist-data {
  font-size: 0.75rem;
  color: var(--arx-soft);
  font-variant-numeric: tabular-nums;
}

/* De qual card veio, na linha de baixo, ocupando a largura toda. */
.arx-hist-card {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  color: var(--arx-soft);
}

.arx-hist-resumo {
  font-size: 0.8125rem;
  color: var(--arx-navy-ink);
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--arx-amber);
  /* --arx-cream e o fundo suave da paleta que o modo noturno redefine
     (css/arx.css:569). Nao existe --arx-amber-soft: variavel inventada nao
     falha, ela some, e o resumo sairia sem fundo nenhum. */
  background-color: var(--arx-cream);
  border-radius: 0.375rem;
}

/* O estado que nao e lista: "nao procurei", "procurei e nao achei", "cortei em
   30". Sobrio, sem tarja de alarme: nenhum deles e erro. */
.arx-hist-nota {
  font-size: 0.8125rem;
  color: var(--arx-soft);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* ==========================================================================
   BALÕES DE DICA E GUIA (js/dicas.js, 02/09/2026)
   Um balão só para a página, em cima de qualquer [data-dica]; e o guia da tela,
   a janela do botão "?". Superfície, texto e linha saem dos tokens, então o
   noturno vira sozinho; o que não vira (navy do "?" e do rótulo) tem regra escura.
   ========================================================================== */
.arx-dica {
  position: fixed; z-index: 95; max-width: 300px;
  background: var(--arx-white); color: var(--arx-navy-ink);
  border: 1px solid var(--arx-line); border-radius: var(--arx-ctrl);
  box-shadow: var(--arx-shadow-lift); padding: 10px 12px 11px;
  font-family: var(--arx-font-ui); font-size: 13px; line-height: 1.4;
  pointer-events: none; opacity: 0; transition: opacity .12s;
}
.arx-dica.visivel { opacity: 1; }
.arx-dica[hidden] { display: none; }
.arx-dica-kicker {
  text-transform: uppercase; color: var(--arx-amber); font-weight: 700;
  font-size: 10px; letter-spacing: .18em; margin: 0 0 3px;
}
.arx-dica-texto { margin: 0; }
.arx-dica-acao { margin: 6px 0 0; font-size: 12px; color: var(--arx-soft); }
.arx-dica-acao:empty { display: none; }
/* A seta: um quadrado girado, com a mesma superfície e a mesma linha do balão. */
.arx-dica::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  background: var(--arx-white); border: 1px solid var(--arx-line);
  left: var(--arx-dica-seta, 50%); margin-left: -5px; transform: rotate(45deg);
}
.arx-dica.acima::after { bottom: -6px; border-top: 0; border-left: 0; }
.arx-dica.abaixo::after { top: -6px; border-bottom: 0; border-right: 0; }

/* O botão "?" do cabeçalho da tela: redondo, sóbrio, Playfair. */
.arx-btn-ajuda {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--arx-white); color: var(--arx-navy);
  border: 1px solid var(--arx-beige); cursor: pointer;
  font-family: var(--arx-font-display); font-weight: 600; font-size: 18px; line-height: 1;
  transition: border-color .12s, color .12s;
}
.arx-btn-ajuda:hover { border-color: var(--arx-amber); color: var(--arx-amber); }
.arx-btn-ajuda:focus-visible { outline: 3px solid rgba(208, 126, 31, .4); outline-offset: 2px; }
html.arx-dark .arx-btn-ajuda { color: var(--arx-navy-ink); }

/* O guia: fundo escurecido e um cartão, como as outras janelas da casa. */
.arx-guia {
  position: fixed; inset: 0; z-index: 96; background: rgba(18, 48, 63, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.arx-guia-cartao {
  background: var(--arx-white); color: var(--arx-navy-ink);
  border-radius: 12px; box-shadow: 0 10px 40px rgba(18, 48, 63, .35);
  width: min(620px, 96vw); max-height: 90vh; display: flex; flex-direction: column;
  font-family: var(--arx-font-ui);
}
.arx-guia-topo {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--arx-line);
}
.arx-guia-kicker {
  text-transform: uppercase; color: var(--arx-amber); font-weight: 700;
  font-size: 10px; letter-spacing: .18em; margin: 0 0 2px;
}
.arx-guia-topo h2 { font-family: var(--arx-font-display); font-size: 20px; margin: 0; }
.arx-guia-sub { font-size: 13px; color: var(--arx-soft); margin: 4px 0 0; }
.arx-guia-fechar {
  background: none; border: none; font-size: 26px; line-height: 1;
  color: var(--arx-soft); cursor: pointer; padding: 0 2px;
}
.arx-guia-corpo { padding: 6px 20px 10px; overflow: auto; }
.arx-guia-secao + .arx-guia-secao { margin-top: 14px; }
.arx-guia-secao h3 {
  font-family: var(--arx-font-ui); text-transform: uppercase; letter-spacing: .16em;
  font-size: 10px; font-weight: 700; color: var(--arx-soft); margin: 10px 0 2px;
}
.arx-guia-item {
  display: grid; grid-template-columns: 9px 1fr; gap: 12px; align-items: start;
  padding: 9px 0; border-top: 1px solid var(--arx-line);
}
.arx-guia-item.sem-ponto { grid-template-columns: 1fr; }
.arx-guia-item:first-of-type { border-top: 0; }
.arx-guia-ponto { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; display: inline-block; }
.arx-guia-item b { display: block; color: var(--arx-navy); font-weight: 600; font-size: 14px; }
.arx-guia-item span { display: block; font-size: 13px; color: var(--arx-navy-ink); margin-top: 1px; }
html.arx-dark .arx-guia-item b { color: var(--arx-navy-ink); }
.arx-guia-pe { display: flex; justify-content: flex-end; padding: 10px 20px 16px; border-top: 1px solid var(--arx-line); }

/* ==========================================================================
   AÇÕES DA JANELA DO LEAD (02/09/2026)
   Três grupos com rótulo, UMA ação de destaque em âmbar, o resto em contorno
   navy, e verde/terracota só para o resultado do negócio. Regra do design
   system, seção 5: primário navy, destaque âmbar, destrutivo terracota, e o
   verde reservado a concluído.
   ========================================================================== */
.arx-acoes-lead {
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--arx-line);
}
.arx-acoes-kicker {
  text-transform: uppercase; color: var(--arx-soft); font-weight: 700;
  font-size: 10px; letter-spacing: .16em; margin: 0 0 6px;
}
.arx-acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.arx-btn-acao {
  padding: 9px 14px; border-radius: var(--arx-ctrl); cursor: pointer;
  font-family: var(--arx-font-ui); font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; transition: filter .12s, border-color .12s, color .12s;
}
.arx-btn-acao:focus-visible { outline: 3px solid rgba(208, 126, 31, .4); outline-offset: 2px; }
.arx-btn-acao.principal { background: var(--arx-amber); color: var(--arx-on-accent); }
.arx-btn-acao.secundaria {
  background: var(--arx-white); color: var(--arx-navy); border-color: var(--arx-beige);
}
.arx-btn-acao.secundaria:hover { border-color: var(--arx-amber); color: var(--arx-amber); }
.arx-btn-acao.ganho { background: var(--arx-green); color: var(--arx-on-accent); }
.arx-btn-acao.perda { background: var(--arx-terracotta); color: var(--arx-on-accent); }
.arx-btn-acao.principal:hover, .arx-btn-acao.ganho:hover, .arx-btn-acao.perda:hover { filter: brightness(1.08); }
html.arx-dark .arx-btn-acao.secundaria { color: var(--arx-navy-ink); }

/* ==========================================================================
   HISTÓRICO DA EQUIPE (historico.html, 02/09/2026)
   Uma lista só: quando, quem, o quê, em qual registro e de onde. Cabeçalho
   navy com filete âmbar e linhas zebradas, como manda o design system para
   tabela (seção 5). Sem grade de Excel: nada de borda vertical.
   ========================================================================== */
.arx-hist-filtros {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px;
}
.arx-hist-filtros label { display: flex; flex-direction: column; gap: 4px; }
.arx-hist-busca { flex: 1 1 260px; }
.arx-hist-rotulo {
  text-transform: uppercase; color: var(--arx-soft); font-weight: 700;
  font-size: 10px; letter-spacing: .16em;
}
.arx-hist-filtros select, .arx-hist-filtros input {
  background: var(--arx-white); color: var(--arx-navy-ink);
  border: 1px solid var(--arx-beige); border-radius: var(--arx-ctrl);
  padding: 8px 10px; font-family: var(--arx-font-ui); font-size: 13.5px; min-width: 170px;
}
.arx-hist-filtros input { width: 100%; }
.arx-hist-filtros select:focus, .arx-hist-filtros input:focus {
  outline: 2px solid rgba(208, 126, 31, .45); outline-offset: 1px; border-color: var(--arx-amber);
}
.arx-hist-resumo-linha { color: var(--arx-soft); font-size: 13px; margin: 0 0 10px; }

.arx-hist-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.arx-hist-tabela thead th {
  background: var(--arx-navy); color: var(--arx-offwhite);
  text-align: left; text-transform: uppercase; letter-spacing: .14em;
  font-size: 10px; font-weight: 700; padding: 10px 14px;
  border-bottom: 3px solid var(--arx-amber);
}
.arx-hist-tabela tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--arx-line); color: var(--arx-navy-ink);
  vertical-align: top;
}
.arx-hist-tabela tbody tr:nth-child(4n+3) td { background: var(--arx-cream); }
.arx-hist-linha { cursor: pointer; }
.arx-hist-linha:hover td { background: var(--arx-beige); }
.arx-hist-quando { white-space: nowrap; color: var(--arx-soft); }
.arx-hist-quem { font-weight: 600; color: var(--arx-navy); white-space: nowrap; }
html.arx-dark .arx-hist-quem { color: var(--arx-navy-ink); }
.arx-hist-alvo { color: var(--arx-navy-ink); }
.arx-hist-onde { color: var(--arx-soft); white-space: nowrap; }
.arx-hist-vazio-celula { color: var(--arx-soft); }
.arx-hist-falhou {
  background: var(--arx-terra-soft); color: var(--arx-terra-ink);
  border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700;
  white-space: nowrap; margin-left: 6px;
}
.arx-hist-linha.falhou td { border-left: 3px solid var(--arx-terracotta); }
.arx-hist-linha.falhou td:not(:first-child) { border-left: 0; }
.arx-hist-detalhe td {
  background: var(--arx-cream); color: var(--arx-soft); font-size: 12px; padding: 8px 14px;
}
.arx-hist-vazio { padding: 26px 16px; text-align: center; color: var(--arx-soft); margin: 0; }
.arx-hist-rodape { display: flex; justify-content: center; margin-top: 14px; }

/* Campo que o servidor recusou (js/crm.js, 02/09/2026): borda terracota até a pessoa
   mexer nele. Sem isto, "confira o que está marcado na tela" não marcava nada. */
.campo-recusado {
  border-color: var(--arx-terracotta) !important;
  background: var(--arx-terra-soft) !important;
  color: var(--arx-terra-ink) !important;
}
.campo-recusado:focus { outline: 2px solid var(--arx-terracotta); outline-offset: 1px; }

/* ==========================================================================
   MATERIAIS: O TECIDO, E AS CORES DENTRO DELE (02/09/2026)
   A lista mostrava 638 cores em fila, com o nome do tecido reimpresso em cada
   uma, e isso lia como tecido repetido. O cabecalho de grupo e o tecido; as
   cores dele ficam recolhidas embaixo.
   ========================================================================== */
.arx-mat-grupo { cursor: pointer; background: var(--arx-cream); }
.arx-mat-grupo:hover { background: var(--arx-beige); }
.arx-mat-grupo td { border-top: 1px solid var(--arx-line); }
.arx-mat-seta {
  display: inline-block; color: var(--arx-amber); font-weight: 700;
  margin-right: 8px; transition: transform .12s;
}
.arx-mat-seta.aberta { transform: rotate(90deg); }
.arx-mat-tecido {
  font-weight: 600; color: var(--arx-navy); font-size: 14px;
}
html.arx-dark .arx-mat-tecido { color: var(--arx-navy-ink); }
.arx-mat-contagem {
  margin-left: 10px; font-size: 12px; color: var(--arx-soft);
}
.arx-mat-selo {
  margin-left: 10px; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.arx-mat-selo.falta { background: var(--arx-terra-soft); color: var(--arx-terra-ink); }
/* A cor, dentro do grupo, anda um degrau para dentro. */
.arx-mat-cor-nome { padding-left: 14px; }

/* O cabecalho e o TECIDO DO CATALOGO (02/09/2026, a tarde): a familia como selo
   discreto e as linhas do fornecedor como detalhe apagado, com reticencias quando
   sao muitas (Tricoline tem cinco). */
.arx-mat-familia {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--arx-soft); background: var(--arx-white); border: 1px solid var(--arx-line);
  vertical-align: 1px; white-space: nowrap;
}
.arx-mat-linhas {
  display: inline-block; max-width: 46%; margin-left: 12px; font-size: 12px;
  color: var(--arx-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: bottom;
}
/* O rodape que conta os tecidos do catalogo ainda sem cor: informacao, nao alarme. */
.arx-mat-rodape td {
  border-top: 1px solid var(--arx-line); background: var(--arx-offwhite);
  font-size: 12.5px; color: var(--arx-soft);
}

/* ==========================================================================
   ABA TECIDOS E CORES do catálogo (02/09/2026)
   O tecido é o artigo (onde mora o preço); a cor pendura nele. A tabela segue
   o padrão da casa: cabeçalho navy com filete âmbar, linhas zebradas, sem
   borda vertical.
   ========================================================================== */
.arx-tec-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.arx-tec-tabela thead th {
  background: var(--arx-navy); color: var(--arx-offwhite);
  text-align: left; text-transform: uppercase; letter-spacing: .14em;
  font-size: 10px; font-weight: 700; padding: 10px 14px;
  border-bottom: 3px solid var(--arx-amber);
}
.arx-tec-tabela th.num, .arx-tec-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.arx-tec-tabela tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--arx-line);
  color: var(--arx-navy-ink); vertical-align: middle;
}
.arx-tec-tabela tbody tr:nth-child(even) td { background: var(--arx-cream); }
.arx-tec-nome { font-weight: 600; color: var(--arx-navy); }
html.arx-dark .arx-tec-nome { color: var(--arx-navy-ink); }
.arx-tec-inativo td { opacity: .55; }
.arx-tec-selo {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: var(--arx-white); color: var(--arx-soft); border: 1px solid var(--arx-line);
}
.arx-tec-selo.ok { background: var(--arx-white); color: var(--arx-soft); }
.arx-tec-selo.falta { background: var(--arx-terra-soft); color: var(--arx-terra-ink); border-color: transparent; }
.arx-tec-acoes { white-space: nowrap; }
.arx-tec-link {
  background: none; border: none; cursor: pointer; padding: 0 10px 0 0;
  font-family: var(--arx-font-ui); font-size: 13px; color: var(--arx-amber-ink); font-weight: 600;
}
.arx-tec-link:hover { text-decoration: underline; }
.arx-tec-escolha {
  background: var(--arx-white); color: var(--arx-navy-ink);
  border: 1px solid var(--arx-beige); border-radius: var(--arx-ctrl);
  padding: 6px 10px; font-family: var(--arx-font-ui); font-size: 13px; min-width: 220px;
}
.arx-tec-escolha:focus { outline: 2px solid rgba(208, 126, 31, .45); border-color: var(--arx-amber); }
.arx-tec-vazio { padding: 22px 14px; text-align: center; color: var(--arx-soft); }
.arx-tec-fila { margin-top: 26px; }

/* ==========================================================================
   TAMANHO DA APLICACAO POR POSICAO (orcamento, 02/09/2026)
   A mesma peca leva bordado pequeno na frente e grande nas costas. Cada posicao
   marcada mostra os tamanhos em botoes, e o escolhido vai PINTADO: era a queixa
   ("nao da pra ver qual esta selecionado"). A caixa de cobranca abre a conta
   posicao por posicao.
   ========================================================================== */
.ap-posicoes { display: flex; flex-direction: column; gap: 6px; }
/* O NOME NA LINHA INTEIRA, os botoes na de baixo (02/09/2026). Eles ficavam ao lado, e com
   tres tamanhos o nome era espremido numa coluna de duas palavras. */
/* O titulo da parte da peca (Frente, Mangas, Costas, Calca): discreto, so para achar. */
.ap-grupo {
  margin: 12px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--arx-soft);
}
.ap-grupo:first-child { margin-top: 0; }
.ap-pos { display: block; padding: 5px 0; }
.ap-pos-nome { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; }
.ap-pos-nome span { min-width: 0; }
.ap-pos + .ap-pos { border-top: 1px solid var(--arx-line); }
.ap-tam { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px 26px; }
.ap-tam:empty { display: none; margin: 0; }

/* O campo "Outro": tracejado enquanto vazio (e um convite, nao um dado), solido ao escrever. */
.ap-livre-campo {
  flex: 1 1 auto; min-width: 0; padding: 5px 10px; font-size: 14px;
  border: 1px dashed var(--arx-beige); border-radius: 8px;
  background: var(--arx-white); color: var(--arx-navy-ink);
}
.ap-livre-campo:focus { border-style: solid; border-color: var(--arx-amber); outline: none; }
.ap-livre-marca { color: var(--arx-soft); font-weight: 700; }
.ap-livre-tirar {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--arx-line); background: var(--arx-white); color: var(--arx-soft);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.ap-livre-tirar:hover { border-color: var(--arx-terracotta); color: var(--arx-terra-ink); }
.ap-livre-tirar:focus-visible { outline: 3px solid rgba(208, 126, 31, .4); outline-offset: 2px; }
/* No toque o alvo vai ao mínimo de 44px: 24x24 é alvo de mouse, não de dedo. */
@media (pointer: coarse) {
  .ap-livre-tirar { width: 44px; height: 44px; }
}
html.arx-dark .ap-livre-campo { background: var(--arx-cream); color: var(--arx-navy-ink); }
html.arx-dark .ap-livre-tirar { background: var(--arx-cream); }
.arx-tam {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--arx-white); color: var(--arx-navy);
  border: 1.5px solid var(--arx-beige); cursor: pointer; line-height: 1.2;
  transition: background .12s, border-color .12s;
}
.arx-tam:hover { border-color: var(--arx-amber); }
.arx-tam:focus-visible { outline: 3px solid rgba(208, 126, 31, .4); outline-offset: 2px; }
.arx-tam .arx-tam-preco { font-weight: 400; color: var(--arx-soft); }
.arx-tam.ativa {
  background: var(--arx-navy); color: var(--arx-on-accent); border-color: var(--arx-navy);
}
.arx-tam.ativa .arx-tam-preco { color: var(--arx-on-accent); opacity: .85; }
/* Tamanho unico (silk): escrito, nao clicavel. */
.arx-tam.fixo { cursor: default; }
.arx-tam.fixo:hover { border-color: var(--arx-navy); }
.arx-tam.ativa::before {
  content: ""; width: 7px; height: 11px; margin-right: 2px;
  border: solid var(--arx-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px);
}
html.arx-dark .arx-tam { background: var(--arx-cream); color: var(--arx-navy-ink); }
html.arx-dark .arx-tam.ativa { background: var(--arx-amber); border-color: var(--arx-amber); color: #12303F; }
html.arx-dark .arx-tam.ativa .arx-tam-preco { color: #12303F; }
html.arx-dark .arx-tam.ativa::before { border-color: #12303F; }

.ap-quebra-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ap-quebra-lista li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--arx-line);
}
.ap-quebra-pos { color: var(--arx-navy-ink); }
.ap-quebra-tam { color: var(--arx-soft); white-space: nowrap; }
.ap-quebra-preco { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-quebra-soma { margin: 6px 0 0; font-size: 12.5px; color: var(--arx-soft); }
.ap-quebra-aviso {
  margin: 0; font-size: 13px; color: var(--arx-amber-ink);
}


/* ===========================================================================
   BLOCO 31 · A CAIXA DE ENTRADA DO CRM EM TELA ESTREITA (03/09/2026, CRM-20 da
   auditoria do CRM)

   O layout dela é o do Gmail: pastas, lista e leitura lado a lado. São 176px de
   pastas mais 240px de largura mínima da lista antes de a leitura começar, então
   em 360px de celular não sobrava nada para ler: o e-mail aparecia numa faixa de
   poucos caracteres, com rolagem horizontal na página inteira.

   Abaixo de 768px vira uma coisa de cada vez, como todo aplicativo de e-mail de
   celular faz: as pastas viram uma tira que rola na horizontal, a lista ocupa a
   largura toda, e a leitura só aparece quando um e-mail é aberto (js/crm.js põe a
   classe .lendo em #inboxPanel). O "Voltar para a lista" é o caminho de volta, e só
   existe nessa largura.

   POR QUE MORA AQUI, e não num css do CRM: `css/crm.css` existe no repositório e
   NENHUMA tela o carrega (crm.html linka tailwind-standalone.css e este arquivo,
   mais nada). A regra é presa a IDs que só existem no CRM, então não encosta em
   nenhuma outra tela.
   =========================================================================== */
/* A REGRA GERAL VEM ANTES DA ESTREITA, e nao depois: as duas tem a mesma forca
   (um id), entao a ULTIMA escrita ganha. Com o `display: none` no fim do bloco, o
   botao continuava escondido dentro da media query, que e justamente onde ele
   precisa aparecer. Foi o navegador que mostrou, medindo 0 de largura. */
#inboxVoltarLista { display: none; }

@media (max-width: 767px) {
  #inboxBody { flex-direction: column; }

  #inboxFolders {
    width: 100%;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--arx-line, #ece4d6);
    padding: .5rem;
  }
  #inboxFolders > * { flex: 0 0 auto; white-space: nowrap; }

  #inboxSplitter { display: none; }

  #inboxListCol { width: 100% !important; min-width: 0 !important; flex: 1 1 auto; }
  #inboxReader { display: none; }

  /* Com um e-mail aberto, a leitura toma a tela e a lista sai da frente. */
  #inboxPanel.lendo #inboxListCol { display: none; }
  #inboxPanel.lendo #inboxReader { display: flex; }
  #inboxPanel.lendo #inboxFolders { display: none; }

  /* Em tela larga ele nao faz sentido: os dois paineis estao a vista. */
  #inboxVoltarLista { display: inline-flex; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   O MODAL CABE NA JANELA · auditoria visual de 05/09/2026, VIS-06
   ──────────────────────────────────────────────────────────────────────────────
   Em 768 por 320 o painel do "Novo Usuário" ficava com 402 pixels de altura,
   começando 41 pixels ACIMA do topo: o botão de fechar saía por cima e os botões
   Cancelar e Criar Usuário ficavam 17 pixels abaixo do fim da janela, sem rolagem
   nenhuma para alcançá-los. A sobreposição é `fixed inset-0` com overflow visível,
   então não havia por onde rolar. Vale para janela baixa, para paisagem no celular
   e para o teclado virtual, que come metade da altura útil.

   AS CLASSES SÃO POSTAS POR js/arx-modal.js, e não escritas no HTML de cada tela:
   são 35 sobreposições em oito telas, com classes diferentes entre si, e uma regra
   que tentasse acertar todas pelo nome erraria a próxima. Quem sabe qual está
   aberta é quem observa a tela.

   `.arx-modal-cabe` é a camada escurecida; `.arx-modal-painel` é a caixa branca de
   dentro. A rolagem fica na caixa branca quando ela cabe, e na camada quando nem
   isso cabe, que é o caso da janela muito baixa. */
.arx-modal-cabe {
  overflow-y: auto;
  padding: 12px;
  /* `items-center` do Tailwind centraliza e, com o painel maior que a janela, corta
     o topo. Com o alinhamento no começo, o que sobra sai por baixo, onde a rolagem
     alcança. */
  align-items: flex-start !important;
}

.arx-modal-painel {
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  /* Margem própria para a caixa não colar na borda quando a rolagem entra. */
  margin: auto 0;
}

@media (min-height: 640px) {
  /* Em janela de altura normal nada muda: a caixa volta ao centro, como sempre foi. */
  .arx-modal-cabe { align-items: center !important; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   O CABECALHO DO MODULO CABE NO QUE ELE TEM DENTRO · auditoria visual, VIS-04
   ──────────────────────────────────────────────────────────────────────────────
   Quatro telas (Relatórios, CRM, Cadastros e Estoque) abrem com o mesmo cabeçalho
   escrito à mão: `h-16 flex items-center justify-between px-8`. O `h-16` é altura
   FIXA de 64 pixels. Medido em Relatórios com 390 de largura: o conteúdo tem 133
   pixels de altura dentro de uma caixa de 64, o título quebra em três linhas e o
   subtítulo encosta nos indicadores. É o "componente quebrado" do laudo.

   E O BOTAO DO MENU PASSA POR CIMA. No celular a barra lateral vira uma gaveta e
   sobra um botão flutuante de 44 por 44 em cima e à esquerda, na camada 60, que
   mora no SHELL e não no módulo: o módulo não sabe que ele existe e desenha o
   kicker embaixo dele. Medido: o botão ocupa de 12 a 56, e o título começa em 32.
   A primeira letra de "Números da empresa" ficava escondida atrás do menu.

   SAO DUAS PERGUNTAS DIFERENTES, e no começo eu tratei como uma só.
   "O cabeçalho cabe na largura que eu tenho?" é sobre a largura DO MÓDULO, e media
   query responde. "O botão do menu está desenhado por cima de mim?" é sobre a
   largura DA JANELA, e o módulo mora num iframe mais estreito que ela: numa janela
   de 1280 com o menu aberto o módulo vê 1024, a media query casava e ele guardava
   68 pixels à esquerda para um botão que naquela largura não existe. Um notebook de
   1280 por 800 cai exatamente aí. Quem sabe é a casca, e ela passa a dizer, pela
   classe `arx-com-botao-menu` (ver marcarBotaoDoMenu em js/app-shell.js). */
@media (max-width: 1024px) {
  .arx-cabecalho-modulo {
    /* Altura pelo conteúdo, com o piso de sempre para não encolher quando é curto. */
    height: auto;
    min-height: 4rem;
    align-items: flex-start;
    /* Os dois grupos (identificação e ações) param de disputar a mesma linha: com a
       quebra, o período e o botão de exportar caem para a linha de baixo em vez de
       sair pela direita. Em Relatórios o "Exportar planilha" ia até 412 numa tela
       de 390. */
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* O filete e o kicker acompanham a quebra em vez de brigar por uma linha só. */
  .arx-cabecalho-modulo > * { min-width: 0; }
}

/* A folga da esquerda é do BOTÃO, e só existe quando ele existe. 12 da borda + 44
   dele + 12 de respiro = 68. */
html.arx-com-botao-menu .arx-cabecalho-modulo { padding-left: 68px; }

/* ── A GRADE DE INDICADORES · VIS-01 e VIS-07 ───────────────────────────────────
   `grid-cols-4` sem comportamento no telefone é a família de defeito mais comum do
   laudo. Medido em Relatórios com 390: quatro colunas de 63,5 pixels, e com o
   `p-6` de cada cartão sobram 14 pixels de texto útil. O rótulo "Faturamento"
   precisa de 82 e sai por cima; o documento passa a rolar 119 pixels para o lado.

   A ESCOLHA NAO E A MESMA NAS DUAS TELAS, e forcar uma so seria escolher errado
   numa delas. Em Relatórios os números SÃO o conteúdo: não há trabalho abaixo
   deles que alguém esteja procurando, e a leitura confortável vale mais que a
   altura. No CRM eles são o cabeçalho do trabalho: quatro cartões empilhados
   empurram a busca para 974 pixels abaixo do topo, mais de uma tela inteira de
   estatística antes de a vendedora achar um cliente, que é o VIS-07.

   Por isso são duas classes, cada uma com o nome do que ela serve:
   `.arx-grade-numeros` para a tela dos números, um cartão por linha no telefone;
   `.arx-grade-kpis` para o cabeçalho de outra tela, dois por linha. Das duas para
   cima o comportamento volta a ser o mesmo. */
.arx-grade-numeros {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .arx-grade-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .arx-grade-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.arx-grade-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .arx-grade-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .arx-grade-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* O cartao aperta o proprio recheio no telefone: com 24 pixels de padding de cada
   lado sobrava menos texto que borda. */
@media (max-width: 639px) {
  .arx-grade-kpis > *,
  .arx-grade-numeros > * { padding: 0.875rem !important; }
}

/* O VALOR CABE NO CARTAO, e continua sendo a coisa maior dele.
   Medido depois de arrumar a grade: "R$ 103.649,88" a 30 pixels fixos precisa de 190
   e o cartao oferece 127, entao o numero saia por cima da borda e o documento voltava
   a rolar de lado. Nenhum ajuste de espacamento resolve isso: seis digitos a 30 pixels
   nao cabem em meia tela de telefone, ponto.

   E NAO E "RESOLVER DIMINUINDO A FONTE", que o laudo proibe com razao. A ordem foi
   outra: primeiro a grade deixou de ser quatro colunas, depois o cartao apertou o
   proprio espacamento, e so entao o tamanho do numero passou a sair do espaco que
   existe em vez de ser um numero fixo que nunca coube. Vale SO na grade de duas
   colunas: onde o cartao ocupa a linha inteira, o numero continua com os 30 pixels
   de sempre, porque ali ele cabe. A partir de 640 as duas voltam a ser iguais. */
@media (max-width: 639px) {
  .arx-grade-kpis .text-3xl,
  .arx-grade-kpis .text-2xl {
    font-size: clamp(1.05rem, 4.4vw, 1.875rem);
    line-height: 1.15;
    /* SEM QUEBRA DENTRO DO NUMERO, de proposito. A primeira versao disto trazia
       `overflow-wrap: anywhere`, como rede para o valor de sete digitos. E rede errada:
       ela parte o numero no meio, e "R$ 1.284.5" numa linha com "50,00" na outra e pior
       do que um numero que transborda. O que transborda a pessoa ve que esta quebrado;
       o que parte ela LE, e le errado. Numa tela de dinheiro, para uma equipe leiga,
       essa diferenca decide. Quem segura o tamanho e o `clamp` acima; o unico ponto de
       quebra continua sendo o espaco depois do "R$", que e uma quebra legitima. */
  }
}

/* Os dois modais do CRM que decidem o destino do card ("Voltar para o funil" e "Mover
   para etapa") escrevem o titulo e o nome da empresa em `--arx-navy`, que NAO vira no
   noturno porque tambem e cor de fundo: navy sobre navy e letra invisivel, justamente
   na caixa onde a pessoa confere de qual empresa e o card antes de mexer nele. */
html.arx-dark #modalVoltarFunil h2, html.arx-dark #modalMoverEtapa h2,
html.arx-dark #voltarFunilEmpresa, html.arx-dark #moverEtapaEmpresa { color: var(--arx-navy-ink) !important; }

/* A faixa de compras de tecido do Financeiro tinha fundo creme fixo e ganhou letra
   clara no escuro: creme claro com letra clara e texto que some. As duas irmãs dela já
   têm a contrapartida; esta passou batido. */
html.arx-dark .fin-compras-topo { background: var(--arx-cream) !important; border-color: var(--arx-line) !important; }

/* ── A SITUACAO QUE NASCEU HOJE PRECISA DE PELE · auditoria visual, NAO-04 ──────
   `pronto_aguardando_pagamento` entrou em 05/09/2026 para o Em Atendimento parar de
   anunciar "Pronto para entrega" num pedido que a política não deixa sair sem o
   dinheiro. A situação virou classe do cartão e da tarja (`atd-card <situacao>` e
   `atd-sit <situacao>`), e nenhuma regra existia com esse nome: a tarja saía sem
   fundo e sem cor, e a faixa lateral do cartão caía no cinza de quem não tem estado.
   Estado novo sem pele parece cartão quebrado, e não estado novo.

   A cor é a mesma de `aguardando_entrada`, que é a cor do que falta pagar: é
   exatamente disso que se trata, com a diferença de que a fábrica já terminou. */
.atd-card.pronto_aguardando_pagamento { border-left-color: var(--arx-terracotta); }
.atd-sit.pronto_aguardando_pagamento { background: #F3E7E4; color: var(--arx-terracotta); }
html.arx-dark .atd-sit.pronto_aguardando_pagamento { background: #3a2329 !important; color: #f0a58f !important; }

/* ── A BARRA DE BUSCA E ACOES QUEBRA EM LINHAS · VIS-02 ─────────────────────────
   Duas metades (buscar/filtrar de um lado, criar do outro) numa linha só com
   `justify-between`: em tela estreita a segunda metade simplesmente sai pela
   direita, e a ação principal da tela some. Com a quebra, cada grupo cai para a
   sua linha e os campos ocupam a largura que sobra. */
@media (max-width: 767px) {
  .arx-barra-acoes {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .arx-barra-acoes .arx-barra-grupo {
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }

  /* Campo que ocupa a linha em vez de manter a largura de desktop e empurrar o resto. */
  .arx-barra-acoes input,
  .arx-barra-acoes select { flex: 1 1 12rem; min-width: 0; }
}

/* ── TABELA LARGA ROLA DENTRO DA PROPRIA CAIXA · VIS-02 ─────────────────────────
   `overflow: hidden` numa caixa mais estreita que a tabela não esconde: CORTA. As
   colunas da direita ficam inalcançáveis, inclusive por rolagem da página, e a
   pessoa conclui que a função não existe. A rolagem própria devolve o alcance sem
   mexer na tabela nem no que ela mostra.

   `-webkit-overflow-scrolling` porque no iPhone, sem ele, a rolagem lateral dentro
   de uma caixa fica travada e o defeito continua de pé para metade da equipe. */
.arx-tabela-rola {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* O canto arredondado da caixa continua valendo: era o que o `overflow-hidden`
     original estava fazendo de útil. */
  border-radius: 0.5rem;
}

/* ── Os graficos, um embaixo do outro no telefone (VIS-01) ─────────────────── */
.arx-grade-graficos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .arx-grade-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}