/* ===========================================================================
   CRM · De Nadai & Marinho Construtora
   Identidade da marca (navy #0B1B3A + verde #7A9A5E) aplicada a uma ferramenta
   de trabalho: fundo claro e quieto, dado em primeiro plano, marca nas bordas.
   =========================================================================== */

:root {
  /* Marca */
  --navy: #0B1B3A;
  --navy-2: #16294F;
  --navy-3: #24395F;
  --navy-4: #35507C;
  /* navy-3 fazia dois trabalhos: cor de texto e cor de fundo. No escuro eles
     puxam para lados opostos — texto precisa clarear, fundo precisa ficar. */
  --navy-texto: #24395F;
  --verde: #7A9A5E;
  --verde-escuro: #5C7A44;
  --verde-claro: #9BB981;
  --verde-suave: #EEF3E7;

  /* Semântica de status */
  --ambar: #B07E22;
  --ambar-suave: #FBF1DC;
  --tijolo: #A9503C;
  --tijolo-suave: #FBEDE9;
  --cinza-status: #8B8A83;
  --cinza-suave: #F0EEE8;

  /* Superfícies */
  --tela: #F5F3EE;
  --cartao: #FFFFFF;
  --cartao-2: #FBFAF7;
  --linha: #E6E2D8;
  --linha-forte: #D7D2C5;

  /* Texto */
  --texto: #161D2B;
  --texto-2: #5D6472;
  --texto-3: #8D8B84;

  /* Escala tipográfica — 8 degraus, sem meio-pixel.
     Antes: 26 valores declarados espalhados por 12 arquivos. */
  --t-xs: 11px;    /* contadores, badges, meta */
  --t-sm: 12px;    /* legendas, texto secundário */
  --t-md: 13px;    /* células de tabela */
  --t-base: 14px;  /* corpo */
  --t-lg: 16px;    /* títulos de card */
  --t-xl: 20px;    /* títulos de seção */
  --t-2xl: 26px;   /* números de KPI */
  --t-3xl: 32px;   /* título de página */

  /* Forma */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Anéis de foco e seleção — antes: 5 variações ad-hoc */
  --anel-verde: var(--anel-verde);
  --anel-tijolo: var(--anel-tijolo);
  --anel-navy: 0 0 0 3px rgba(11, 27, 58, .12);
  --anel-selecao: var(--anel-selecao);

  --sombra-sm: 0 1px 2px rgba(22, 29, 43, .05), 0 1px 3px rgba(22, 29, 43, .04);
  --sombra-md: 0 4px 16px rgba(22, 29, 43, .07);
  --sombra-lg: 0 18px 44px rgba(22, 29, 43, .14);

  --lateral: 248px;
  --topo: 64px;

  --fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Playfair Display', Georgia, serif;

  /* Cores de série de gráfico. Ficavam em hex fixo no JS; no escuro a linha
     do saldo (navy) desaparecia contra o fundo. */
  --serie-saldo: #0B1B3A;
  --serie-entrada: #7A9A5E;
  --serie-saida: #A9503C;
  --tom-navy: #0B1B3A;
  --tom-verde: #7A9A5E;
  --tom-ambar: #B07E22;
  --tom-tijolo: #A9503C;
  --tom-cinza: #8B8A83;

  --transicao: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ===========================================================================
   Modo escuro
   Os tokens já carregam tudo: aqui só os valores mudam. A sidebar continua
   navy em ambos os modos — é a âncora da marca, e o conteúdo é que escurece
   em volta dela. Dark tintado de navy, não cinza neutro, pelo mesmo motivo
   que o claro é creme e não branco puro.
   =========================================================================== */

/*
 * Quem decide é o usuário, não o sistema operacional.
 *
 * A primeira versão vivia dentro de @media (prefers-color-scheme: dark): o
 * ERP ficava escuro porque o Windows estava escuro, sem opção. Agora o JS
 * resolve a preferência — escolha salva, ou a do sistema quando ela for
 * 'automático' — e escreve o resultado em data-tema. O CSS tem um bloco só.
 */
:root[data-tema='escuro'] {
  color-scheme: dark;

  /* Superfícies — o conteúdo fica mais claro que a sidebar, para ela
     continuar lendo como painel e não se fundir com a tela. */
  --tela: #141A26;
  --cartao: #1B2231;
  --cartao-2: #212938;
  --linha: #2C3545;
  --linha-forte: #3C4759;

  /* Texto */
  --texto: #E6E8EC;
  --texto-2: #A6AEBD;
  --texto-3: #7B8494;

  /* Acentos sobem de luminosidade: no claro eles contrastam com branco,
     no escuro precisam contrastar com #1B2231. */
  --verde: #9BB981;
  --verde-escuro: #B5CF9D;
  --verde-claro: #C7DDB2;
  --verde-suave: #1E2A19;

  --ambar: #D9A445;
  --ambar-suave: #2C2415;

  --tijolo: #D4765E;
  --tijolo-suave: #2E201C;

  --cinza-status: #99A1AD;
  --cinza-suave: #262E3B;

  /* Navy claro perde função no escuro: vira o tom de apoio. */
  --navy-3: #5E7BA8;
  --navy-texto: #A9C2E4;
  --navy-4: #7693BF;

  /* Sombra no escuro é preenchimento, não névoa cinza. */
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, .34), 0 1px 3px rgba(0, 0, 0, .26);
  --sombra-md: 0 4px 16px rgba(0, 0, 0, .40);
  --sombra-lg: 0 18px 44px rgba(0, 0, 0, .52);

  --anel-verde: 0 0 0 3px rgba(155, 185, 129, .20);
  --anel-tijolo: 0 0 0 3px rgba(212, 118, 94, .20);
  --anel-navy: 0 0 0 3px rgba(118, 147, 191, .22);
  --anel-selecao: 0 0 0 2px var(--navy-4);

  /* Séries sobem junto com o resto: navy sobre fundo escuro some. */
  --serie-saldo: #8FB0DC;
  --serie-entrada: #9BB981;
  --serie-saida: #D4765E;
  --tom-navy: #8FB0DC;
  --tom-verde: #9BB981;
  --tom-ambar: #D9A445;
  --tom-tijolo: #D4765E;
  --tom-cinza: #99A1AD;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--texto);
  background: var(--tela);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D5D0C4; border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #BDB7A8; background-clip: content-box; border: 3px solid transparent; }

:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: var(--r-xs); }

/* O azul de seleção do navegador não é de ninguém; este é. */
::selection { background: rgba(122, 154, 94, .26); color: var(--texto); }
input, textarea, select { caret-color: var(--verde-escuro); }

/* ── Estrutura ───────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--lateral) 1fr;
  height: 100vh;
  height: 100dvh;
}

.area {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.conteudo {
  /* A folga do rodapé é variável porque a barra de rolagem que acompanha a
     tela precisa descontá-la — o Chromium prende elemento `sticky` à caixa de
     conteúdo do scrollport, não à de preenchimento, então sem o desconto a
     barra flutuaria essa mesma distância acima da base da janela. */
  --folga-rodape: 56px;
  flex: 1;
  overflow-y: auto;
  padding: 26px 30px var(--folga-rodape);
}

.conteudo[data-cheio] { overflow: hidden; padding: 0; }

.limite { max-width: 1360px; margin: 0 auto; }

/* ── Barra lateral ───────────────────────────────────────────────────────── */

.barra-lateral {
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  gap: 4px;
  position: relative;
  z-index: 40;
  min-height: 0;
}

/*
 * O menu rola; o rodapé fica preso embaixo.
 *
 * Sem isso, o menu cresce para fora da tela e leva o botão de usuário junto —
 * e como a lateral não rolava, não havia como alcançá-lo. Aconteceu ao
 * separar os grupos: três títulos a mais bastaram para empurrar o rodapé para
 * baixo da dobra em tela de notebook.
 */
#navegacao {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
#navegacao::-webkit-scrollbar { width: 6px; }
#navegacao::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: var(--r-pill); }
#navegacao::-webkit-scrollbar-track { background: transparent; }

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 10px 22px;
}

.marca svg { width: 32px; height: 32px; flex: none; }

.marca-texto { min-width: 0; }

.marca-nome {
  font-size: var(--t-sm);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

.marca-sub {
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--verde-claro);
  margin-top: 2px;
}

.nav-aviso-perfil {
  margin: 16px 12px 4px;
  padding: 10px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .6);
  font-size: var(--t-xs);
  line-height: 1.4;
}
.nav-aviso-perfil strong { color: rgba(255, 255, 255, .85); font-weight: 600; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, .72);
  font-size: var(--t-md);
  font-weight: 400;
  transition: background var(--transicao), color var(--transicao);
  position: relative;
  width: 100%;
  text-align: left;
}

.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .8; }

.nav-rotulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item:hover svg { opacity: 1; }

.nav-item.ativo {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 500;
}
.nav-item.ativo svg { opacity: 1; }

.nav-raiz.ativo::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--verde-claro);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
}

.nav-item .selo {
  margin-left: auto;
  background: var(--verde);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 600;
  min-width: 20px;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.nav-item .selo[data-vazio] { display: none; }

/*
 * Grupo que abre.
 *
 * Linhas soltas sob títulos que não clicavam obrigavam a ler a lateral
 * inteira para achar uma tela. O grupo agora é a linha: clica, empurra as
 * irmãs para baixo e mostra o que tem dentro — uma gaveta de cada vez, porque
 * duas abertas trazem de volta a lista que causou o problema. Quem quer o
 * mapa inteiro pede por ele no "Ver todos os itens", aqui embaixo.
 */
.nav-grupo { position: relative; }
.nav-grupo + .nav-grupo, .nav-raiz + .nav-grupo, .nav-grupo + .nav-raiz { margin-top: 2px; }

.nav-grupo-cabeca { cursor: pointer; }
.nav-grupo[data-aberto] > .nav-grupo-cabeca,
.nav-grupo[data-tem-ativa] > .nav-grupo-cabeca { color: #fff; }
.nav-grupo[data-tem-ativa] > .nav-grupo-cabeca svg { opacity: 1; }

.nav-chevron {
  display: inline-flex;
  flex: none;
  margin-right: -2px;
  color: rgba(255, 255, 255, .38);
  transition: transform 220ms cubic-bezier(.2, .8, .3, 1), color var(--transicao);
}
.nav-grupo-cabeca .nav-chevron svg { width: 14px; height: 14px; opacity: 1; }
.nav-grupo-cabeca:hover .nav-chevron { color: rgba(255, 255, 255, .7); }
.nav-grupo[data-aberto] > .nav-grupo-cabeca .nav-chevron {
  transform: rotate(90deg);
  color: rgba(255, 255, 255, .7);
}

/* Grupo fechado com a tela aberta lá dentro: o ponto diz onde a pessoa está. */
.nav-grupo[data-tem-ativa]:not([data-aberto]) > .nav-grupo-cabeca::after {
  content: '';
  position: absolute;
  left: 18px;
  bottom: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--verde-claro);
  box-shadow: var(--anel-selecao);
}

/* A gaveta cresce de 0fr a 1fr: altura automática, sem medir nada em JS. */
.nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms cubic-bezier(.2, .8, .3, 1);
}
.nav-grupo[data-aberto] > .nav-sub { grid-template-rows: 1fr; }

.nav-sub-titulo { display: none; }

.nav-sub-lista {
  overflow: hidden;
  min-height: 0;
  position: relative;
  padding-left: 20px;
}

.nav-sub-lista::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: rgba(255, 255, 255, .14);
}

.nav-sub-item {
  padding: 7px 12px 7px 22px;
  font-size: var(--t-md);
  color: rgba(255, 255, 255, .6);
  opacity: 0;
  transition: background var(--transicao), color var(--transicao), opacity 140ms linear;
}
.nav-grupo[data-aberto] .nav-sub-item { opacity: 1; transition-delay: 0s, 0s, 70ms; }

.nav-sub-item:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.nav-sub-item.ativo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 17px;
  background: var(--verde-claro);
  border-radius: var(--r-pill);
}

/*
 * Abrir tudo de uma vez.
 *
 * A gaveta economiza espaço para quem já sabe onde as coisas ficam. Numa
 * apresentação, ou nos primeiros dias de alguém, é o contrário: vale mais ver
 * o sistema inteiro numa tela do que caçar cada grupo. O botão é discreto de
 * propósito — quem usa todo dia não deve tropeçar nele.
 */
.nav-tudo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, .42);
  font-size: var(--t-sm);
  transition: background var(--transicao), color var(--transicao);
}

.nav-tudo:hover { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .82); }

/*
 * Com tudo aberto a lista passa da altura de qualquer notebook. O corte reto
 * lê como tela quebrada; a borda que desvanece lê como "continua abaixo".
 */
#navegacao[data-rola] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
}

/* Aberto por inteiro, o menu respira entre grupos e aperta dentro deles. */
#navegacao[data-tudo] .nav-sub-item { padding-top: 5.5px; padding-bottom: 5.5px; }
#navegacao[data-tudo] .nav-grupo + .nav-grupo,
#navegacao[data-tudo] .nav-raiz + .nav-grupo,
#navegacao[data-tudo] .nav-grupo + .nav-raiz { margin-top: 8px; }
.nav-tudo-icone { display: inline-flex; flex: none; }
.nav-tudo svg { width: 14px; height: 14px; flex: none; }

.lateral-rodape {
  flex: none;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.usuario-lateral {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  width: 100%;
  transition: background var(--transicao);
}

.usuario-lateral:hover { background: rgba(255, 255, 255, .07); }

.usuario-lateral .nome { font-size: var(--t-sm); color: #fff; }
.usuario-lateral .papel { font-size: var(--t-xs); color: rgba(255, 255, 255, .5); text-transform: capitalize; }

.aviso-tempo-real {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .48);
  padding: 8px 12px 2px;
}

.ponto-vivo {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde-claro);
  box-shadow: 0 0 0 0 rgba(155, 185, 129, .6);
  animation: pulso 2.4s infinite;
}

.ponto-vivo[data-off] { background: var(--tijolo); animation: none; }

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(155, 185, 129, .5); }
  70% { box-shadow: 0 0 0 7px rgba(155, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(155, 185, 129, 0); }
}

/* ── Topo ────────────────────────────────────────────────────────────────── */

.topo {
  height: var(--topo);
  flex: none;
  background: var(--cartao);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px 0 20px;
  position: relative;
  z-index: 30;
}

.botao-menu { display: none; }

.busca-global {
  position: relative;
  flex: 1;
  max-width: 460px;
}

.busca-global svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--texto-3);
  pointer-events: none;
}

.busca-global input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--linha);
  background: var(--cartao-2);
  border-radius: var(--r-pill);
  font-size: var(--t-md);
  transition: border-color var(--transicao), background var(--transicao);
}

.busca-global input::placeholder { color: var(--texto-3); }

.busca-global input:focus {
  outline: none;
  border-color: var(--verde);
  background: var(--cartao);
  box-shadow: var(--anel-verde);
}

.resultados-busca {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  z-index: 50;
}

.resultado-grupo {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding: 10px 10px 6px;
  font-weight: 500;
}

.resultado-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  width: 100%;
  text-align: left;
  transition: background var(--transicao);
}

.resultado-item:hover { background: var(--cartao-2); }
.resultado-item .titulo { font-size: var(--t-md); font-weight: 500; }
.resultado-item .sub { font-size: var(--t-sm); color: var(--texto-2); }

.acoes-topo { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.botao-icone {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-2);
  position: relative;
  transition: background var(--transicao), color var(--transicao);
}

.botao-icone:hover { background: var(--cartao-2); color: var(--texto); }
.botao-icone svg { width: 19px; height: 19px; }

.contador-sino {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--tijolo);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.contador-sino[data-vazio] { display: none; }

/* ── Painel de notificações ──────────────────────────────────────────────── */

.painel-notificacoes {
  position: absolute;
  top: calc(100% - 8px);
  right: 20px;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  z-index: 60;
  overflow: hidden;
}

.painel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linha);
}

.painel-cabecalho h3 { margin: 0; font-size: var(--t-md); font-weight: 600; }

.painel-lista { max-height: 420px; overflow-y: auto; }

.notificacao {
  display: flex;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cinza-suave);
  width: 100%;
  text-align: left;
  transition: background var(--transicao);
}

.notificacao:hover { background: var(--cartao-2); }
.notificacao[data-nao-lida] { background: rgba(122, 154, 94, .05); }
.notificacao:last-child { border-bottom: none; }

.notificacao .marcador {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  flex: none;
  background: var(--linha-forte);
}

.notificacao[data-prioridade='alta'] .marcador { background: var(--tijolo); }
.notificacao[data-prioridade='media'] .marcador { background: var(--ambar); }
.notificacao[data-nao-lida] .marcador { box-shadow: var(--anel-tijolo); }

.notificacao .titulo { font-size: var(--t-md); font-weight: 500; margin-bottom: 2px; }
.notificacao .desc { font-size: var(--t-sm); color: var(--texto-2); }
.notificacao .quando { font-size: var(--t-xs); color: var(--texto-3); margin-top: 3px; }

/* ── Tipografia de página ────────────────────────────────────────────────── */

/*
 * O cabeçalho de página: título à esquerda, ações à direita.
 *
 * O alinhamento não é `space-between`, e a diferença só aparece quando a linha
 * não cabe. Com `space-between`, o bloco de ações que quebra para a linha de
 * baixo fica sozinho nela — e sozinho numa linha, ele vai para a esquerda,
 * debaixo do título. Telas com muitos controles no topo, como Cartões e
 * Compras, trocavam de lado conforme o filtro escolhido deixava a fileira dos
 * chips maior ou menor: o botão de ação mudava de canto entre dois cliques.
 *
 * Empurrar pelo título resolve os dois casos de uma vez. A margem automática
 * dele come o espaço livre da primeira linha, então o que couber ao lado
 * continua encostado na direita; e o que quebrar cai numa linha justificada em
 * `flex-end`, que é a direita também. Cabeçalho de uma peça só — título sem
 * ação nenhuma — fica à esquerda, que é onde ele deve ficar.
 */
.cabecalho-pagina {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.cabecalho-pagina > :first-child { margin-right: auto; }

.cabecalho-pagina h1 {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-3xl);
  line-height: 1.1;
  margin: 0 0 5px;
  letter-spacing: -.01em;
}

.cabecalho-pagina .subtitulo { font-size: var(--t-md); color: var(--texto-2); margin: 0; }

h2.secao {
  font-size: var(--t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-2);
  font-weight: 600;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}

h2.secao .conta {
  background: var(--cinza-suave);
  color: var(--texto-2);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-size: var(--t-xs);
  letter-spacing: 0;
}

/* ── Cartões ─────────────────────────────────────────────────────────────── */

.cartao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
}

.cartao-pad { padding: 18px 20px; }

/* Indicadores */

.grade-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

/* Quantos cartões cabem por linha depende da largura, e o resto sobra órfão na
   linha de baixo. Aqui o número de colunas vem da quantidade de cartões, para
   que a última linha nunca fique com um solitário. */
@media (min-width: 1100px) {
  /* 5 → 3 + 2 */
  .grade-indicadores:has(> :nth-child(5)):not(:has(> :nth-child(6))) { grid-template-columns: repeat(3, 1fr); }
  /* 8 → 4 + 4 */
  .grade-indicadores:has(> :nth-child(8)):not(:has(> :nth-child(9))) { grid-template-columns: repeat(4, 1fr); }

  /*
   * 7 → 4 + 3, com a segunda linha ocupando a largura inteira.
   *
   * Quatro em cima e três embaixo alinhados à esquerda deixavam um vão do
   * tamanho de um cartão no canto, e a tela lia como se algo não tivesse
   * carregado. Em doze colunas os quatro primeiros pegam três cada e os três
   * últimos pegam quatro — as duas linhas fecham na borda, e a diferença de
   * largura ainda separa o dinheiro (em cima) da contagem (embaixo).
   */
  .grade-indicadores:has(> :nth-child(7)):not(:has(> :nth-child(8))) { grid-template-columns: repeat(12, 1fr); }
  .grade-indicadores:has(> :nth-child(7)):not(:has(> :nth-child(8))) > * { grid-column: span 3; }
  .grade-indicadores:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(n+5) { grid-column: span 4; }
}

/* Versão enxuta usada no topo da central de WhatsApp, onde a altura da
   caixa de entrada vale mais do que o tamanho dos números. */
.grade-indicadores[data-compacto] { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.grade-indicadores[data-compacto] .indicador { padding: 10px 13px 9px; }
.grade-indicadores[data-compacto] .rotulo { margin-bottom: 4px; font-size: var(--t-xs); }
.grade-indicadores[data-compacto] .valor { font-size: var(--t-xl); }
.grade-indicadores[data-compacto] .nota { display: none; }

/*
 * Elevação declarada uma vez. A borda de 1px sob uma sombra difusa deixava o
 * cartão com dois contornos concorrendo — some no papel, aparece na tela.
 * Sombra aqui só quando o cartão é clicável e está sob o cursor.
 */
.indicador {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 15px 16px 14px;
  position: relative;
  overflow: hidden;
  text-align: left;
  width: 100%;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

button.indicador:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-md);
  border-color: var(--linha-forte);
}

.indicador .rotulo {
  font-size: var(--t-sm);
  color: var(--texto-2);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.indicador .rotulo svg { width: 14px; height: 14px; opacity: .55; flex: none; }

.indicador .valor {
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.indicador .nota { font-size: var(--t-xs); color: var(--texto-3); margin-top: 6px; }

.indicador[data-tom='verde'] .valor { color: var(--verde-escuro); }
.indicador[data-tom='ambar'] .valor { color: var(--ambar); }
.indicador[data-tom='tijolo'] .valor { color: var(--tijolo); }

/*
 * O tom vive no número e no ícone, não numa tarja na lateral.
 *
 * A tarja de 3px repetia o que o número em vermelho já dizia e alinhava
 * quatro barras coloridas no topo de toda tela — o cartão virava enfeite
 * antes de virar informação.
 */
.indicador[data-tom='verde'] .rotulo svg { color: var(--verde-escuro); opacity: .9; }
.indicador[data-tom='ambar'] .rotulo svg { color: var(--ambar); opacity: .9; }
.indicador[data-tom='tijolo'] .rotulo svg { color: var(--tijolo); opacity: .9; }
.indicador[data-tom='navy'] .rotulo svg { color: var(--navy-texto); opacity: .9; }

/* ── Pílulas de status ───────────────────────────────────────────────────── */

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
}

.pilula::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* A coluna congelada tem fundo proprio e z-index: ela pintava por cima do
   anel de foco da linha, que aparecia so do lado direito da tabela. O tom
   verde no painel congelado devolve a leitura da linha inteira. */
tr:focus-visible td:first-child,
tr:focus-visible th:first-child { background: var(--verde-suave); }

.pilula[data-status='em_alta'] { background: var(--verde-suave); color: var(--verde-escuro); }
.pilula[data-status='em_espera'] { background: var(--ambar-suave); color: var(--ambar); }
.pilula[data-status='inativo'] { background: var(--cinza-suave); color: var(--cinza-status); }
/* A escala inteira mora aqui: em_risco estava declarado 2600 linhas abaixo,
   e meia escala fora de vista é como nasce um status sem cor. */
.pilula[data-status='em_risco'] { background: var(--tijolo-suave); color: var(--tijolo); font-weight: 500; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  background: var(--cinza-suave);
  color: var(--texto-2);
  white-space: nowrap;
}

.etiqueta[data-tom='aguardando'] { background: var(--tijolo-suave); color: var(--tijolo); font-weight: 500; }
.etiqueta[data-tom='site'] { background: rgba(11, 27, 58, .06); color: var(--navy-texto); }
.etiqueta[data-tom='alerta'] { background: var(--ambar-suave); color: var(--ambar); }
/* Os tons da paleta pelo próprio nome. Já eram usados no JS ("ambar",
   "tijolo") e caíam no cinza por falta destas três linhas — a etiqueta que
   avisa "não entra no estoque" precisa ler como aviso, não como rótulo. */
.etiqueta[data-tom='ambar'] { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta[data-tom='tijolo'] { background: var(--tijolo-suave); color: var(--tijolo); font-weight: 500; }
.etiqueta[data-tom='verde'] { background: var(--verde-suave); color: var(--verde-escuro); }
.etiqueta[data-tom='navy'] { background: rgba(11, 27, 58, .06); color: var(--navy-texto); }

/* A coluna "Gerencial" de contas a pagar, quando a nota é mais de uma coisa.
   A maioria tem uma etiqueta só e fica igual ao que sempre foi; a nota de
   empreiteiro que traz uma diária de máquina empilha as duas, a segunda
   recuada, para a linha explicar por que apareceu no filtro de equipamento. */
.etiquetas-gerencial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

/* ── Avatares ────────────────────────────────────────────────────────────── */

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy-2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-sm);
  font-weight: 500;
  flex: none;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar[data-tamanho='p'] { width: 30px; height: 30px; font-size: var(--t-xs); }
.avatar[data-tamanho='g'] { width: 54px; height: 54px; font-size: var(--t-lg); }

.avatar-cerca { position: relative; flex: none; }

.avatar-cerca .selo-nao-lidas {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--verde);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* ── Botões ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
  white-space: nowrap;
}

.btn svg { width: 15px; height: 15px; }

/* display:inline-flex ganha de [hidden], e o botão escondido continuava na
   tela. Vale para todo botão: quem escreve `botao.hidden = true` espera que
   ele suma, não que fique lá desabilitado de mentira. */
.btn[hidden] { display: none; }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primario { background: var(--verde); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--verde-escuro); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover:not(:disabled) { background: var(--navy-2); }

.btn-contorno { border: 1px solid var(--linha-forte); color: var(--texto-2); background: var(--cartao); }
.btn-contorno:hover:not(:disabled) { border-color: var(--navy-texto); color: var(--navy); }

.btn-fantasma { color: var(--texto-2); }
.btn-fantasma:hover:not(:disabled) { background: var(--cinza-suave); color: var(--texto); }

.btn-p { height: 29px; padding: 0 11px; font-size: var(--t-sm); border-radius: var(--r-sm); }

/* ── Precisa de atenção ──────────────────────────────────────────────────── */

/* ── Painel: cabeçalho, cartões de número, rosca e operação ──────────────── */

.cabecalho-painel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.titulo-painel { min-width: 0; }

/* Versalete acima do título: diz de que parte do sistema é a tela para quem
   chegou por link e não veio pelo menu. */
.sobretitulo {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde-escuro);
  margin-bottom: 5px;
}

.cabecalho-painel h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-3xl);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--texto);
}

.cabecalho-painel .subtitulo { margin: 6px 0 0; font-size: var(--t-md); color: var(--texto-2); }
.acoes-painel { display: flex; gap: 8px; flex-wrap: wrap; }

/* Quatro cartões numa linha. Quatro e não sete: só o dinheiro tem série
   apurada para desenhar embaixo, e o resto desceu para "A operação agora". */
.grade-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.cartao-numero {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 16px 18px 0;
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

button.cartao-numero { cursor: pointer; }
button.cartao-numero:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-md);
  border-color: var(--linha-forte);
}

.cartao-numero .rotulo { font-size: var(--t-sm); color: var(--texto-2); margin-bottom: 7px; }

.cartao-numero .linha-valor {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.cartao-numero .valor {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.cartao-numero[data-tom='verde'] .valor { color: var(--verde-escuro); }
.cartao-numero[data-tom='ambar'] .valor { color: var(--ambar); }
.cartao-numero[data-tom='tijolo'] .valor { color: var(--tijolo); }

.selo-variacao {
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 19px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.selo-variacao[data-tom='verde'] { background: var(--verde-suave); color: var(--verde-escuro); }
.selo-variacao[data-tom='tijolo'] { background: var(--tijolo-suave); color: var(--tijolo); }
.selo-variacao[data-tom='neutro'] { background: var(--cinza-suave); color: var(--texto-3); }

.cartao-numero .nota {
  font-size: var(--t-sm);
  color: var(--texto-3);
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A linha encosta nas três bordas do cartão: ela é o rodapé dele, não um
   gráfico dentro de uma caixa dentro de outra. */
.minilinha { margin: 12px -18px 0; }
.minilinha-svg { display: block; width: 100%; height: 100%; }

/* ── Rosca ───────────────────────────────────────────────────────────────── */

.rosca-caixa {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}

.rosca-desenho { position: relative; width: 168px; height: 168px; flex: none; }
.rosca-svg { width: 100%; height: 100%; display: block; }

.rosca-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}

.rosca-centro .valor {
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.rosca-centro .rotulo { font-size: var(--t-xs); color: var(--texto-3); }

.rosca-legenda { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 13px; }
.rosca-item { display: flex; align-items: flex-start; gap: 9px; }

.rosca-item .ponto {
  flex: none;
  width: 9px; height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--navy);
}
.rosca-item[data-tom='verde'] .ponto { background: var(--verde); }
.rosca-item[data-tom='ambar'] .ponto { background: var(--ambar); }
.rosca-item[data-tom='tijolo'] .ponto { background: var(--tijolo); }
.rosca-item[data-tom='cinza'] .ponto { background: var(--cinza-status); }

.rosca-item .nome { font-size: var(--t-sm); color: var(--texto); }
.rosca-item .conta {
  font-size: var(--t-sm);
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* ── A operação agora ────────────────────────────────────────────────────── */

.linha-operacao {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--linha);
  transition: background var(--transicao);
}
.linha-operacao:last-child { border-bottom: none; }
.linha-operacao:hover { background: var(--cartao-2); }

.icone-operacao {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--cinza-suave);
  color: var(--navy-texto);
}

.linha-operacao .corpo { flex: 1; min-width: 0; }
.linha-operacao .titulo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--texto);
}
.linha-operacao .desc {
  font-size: var(--t-sm);
  color: var(--texto-2);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selo-operacao {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 17px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--cinza-suave);
  color: var(--texto-2);
}
.selo-operacao[data-tom='verde'] { background: var(--verde-suave); color: var(--verde-escuro); }
.selo-operacao[data-tom='ambar'] { background: var(--ambar-suave); color: var(--ambar); }
.selo-operacao[data-tom='tijolo'] { background: var(--tijolo-suave); color: var(--tijolo); }

.numero-operacao {
  flex: none;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.colunas-painel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: start;
}

/* Duas terças para o quadro principal e uma para o painel de apoio: curva e
   rosca, lista e resumo. Na proporção de sempre (1 : 1.15) a rosca ficava
   larga demais e a curva perdia justamente o que ela tem de melhor. */
.colunas-painel[data-peso="2-1"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Funil: quadro largo + painel fixo de visitas. Classe própria (em vez de
   estilo inline) pra o breakpoint mobile abaixo conseguir colapsar em 1fr. */
.faixa-visitas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 10px;
}
.faixa-visitas .observacao-item { margin: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 11px 13px; }

/* Configurações: painéis de alturas muito diferentes. Em grade de duas
   colunas o mais curto deixa um buraco embaixo; em coluna múltipla o navegador
   equilibra as alturas sozinho e o vão some. */
.painel-config { columns: 2; column-gap: 18px; margin-bottom: 18px; }
.painel-config > * { break-inside: avoid; width: 100%; margin: 0 0 18px; }

@media (max-width: 1080px) {
  .painel-config { columns: 1; }
}

.lista-atencao { display: flex; flex-direction: column; }

.item-atencao {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--cinza-suave);
  width: 100%;
  text-align: left;
  transition: background var(--transicao);
}

.item-atencao:last-child { border-bottom: none; }
.item-atencao:hover { background: var(--cartao-2); }

.item-atencao .icone {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--cinza-suave);
  color: var(--texto-2);
}

.item-atencao .icone svg { width: 16px; height: 16px; }
.item-atencao[data-prioridade='alta'] .icone { background: var(--tijolo-suave); color: var(--tijolo); }
.item-atencao[data-prioridade='media'] .icone { background: var(--ambar-suave); color: var(--ambar); }
.item-atencao[data-prioridade='normal'] .icone { background: var(--verde-suave); color: var(--verde-escuro); }

.item-atencao .corpo { min-width: 0; flex: 1; }
.item-atencao .titulo { display: block; font-size: var(--t-md); font-weight: 500; margin-bottom: 1px; }
.item-atencao .desc {
  display: block;
  font-size: var(--t-sm);
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-atencao .quando { font-size: var(--t-xs); color: var(--texto-3); flex: none; padding-top: 2px; }

.seta { color: var(--texto-3); opacity: 0; transition: opacity var(--transicao), transform var(--transicao); }
.item-atencao:hover .seta { opacity: 1; transform: translateX(2px); }

/* ── Linhas de interação ─────────────────────────────────────────────────── */

.linha-interacao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--cinza-suave);
  transition: background var(--transicao);
}

.linha-interacao:last-child { border-bottom: none; }
.linha-interacao:hover { background: var(--cartao-2); }
.linha-interacao .corpo { min-width: 0; flex: 1; }

.linha-interacao .nome-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.linha-interacao .nome { font-size: var(--t-md); font-weight: 500; }

.linha-interacao .previa {
  font-size: var(--t-sm);
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha-interacao .previa[data-direcao='saida']::before {
  content: 'Você: ';
  color: var(--texto-3);
}

.linha-interacao .lado {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.linha-interacao .quando {
  font-size: var(--t-sm);
  color: var(--texto-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Cards de lead ───────────────────────────────────────────────────────── */

.grade-leads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.cartao-lead {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 15px 16px 13px;
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: box-shadow var(--transicao), border-color var(--transicao), transform var(--transicao);
  position: relative;
}

.cartao-lead:hover {
  box-shadow: var(--sombra-md);
  border-color: var(--linha-forte);
  transform: translateY(-1px);
}

/*
 * Lead esperando resposta: a borda inteira muda de cor, não uma tarja.
 *
 * A tarja de 3px na lateral marcava o cartão de fora, como um adesivo colado
 * depois. Tingir a borda que o cartão já tem diz a mesma coisa fazendo parte
 * do desenho — e continua legível numa parede de cartões.
 */
.cartao-lead[data-aguardando] {
  border-color: rgba(169, 80, 60, .38);
  background: linear-gradient(var(--tijolo-suave), var(--tijolo-suave)) no-repeat, var(--cartao);
  background-size: 100% 3px;
}

.cartao-lead .topo-cartao { display: flex; align-items: flex-start; gap: 11px; }
.cartao-lead .identidade { min-width: 0; flex: 1; }
.cartao-lead .nome { font-size: var(--t-base); font-weight: 500; margin-bottom: 2px; }
.cartao-lead .contato { font-size: var(--t-sm); color: var(--texto-3); font-variant-numeric: tabular-nums; }

.cartao-lead .mensagem {
  font-size: var(--t-sm);
  color: var(--texto-2);
  background: var(--cartao-2);
  border: 1px solid var(--cinza-suave);
  border-radius: var(--r-md);
  padding: 9px 11px;
  min-height: 38px;
  display: flex;
  align-items: center;
}

.cartao-lead .mensagem[data-vazio] { color: var(--texto-3); font-style: italic; }

.cartao-lead .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cartao-lead .tempo {
  font-size: var(--t-sm);
  color: var(--texto-3);
  margin-left: auto;
  white-space: nowrap;
}

.cartao-lead .acoes {
  display: flex;
  gap: 7px;
  padding-top: 3px;
  border-top: 1px solid var(--cinza-suave);
  margin-top: 1px;
  padding-top: 11px;
}

.cartao-lead .acoes .btn { flex: 1; }

.barra-prazo {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--cinza-suave);
  overflow: hidden;
}

.barra-prazo span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--verde);
  transition: width 400ms ease;
}

.barra-prazo[data-status='em_espera'] span { background: var(--ambar); }
.barra-prazo[data-alerta] span { background: var(--tijolo); }

/* ── Filtros ─────────────────────────────────────────────────────────────── */

.barra-filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
}

.campo-busca { position: relative; flex: 1; min-width: 220px; }

.campo-busca svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--texto-3);
}

.campo-busca input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 35px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao-2);
  font-size: var(--t-md);
}

.campo-busca input:focus {
  outline: none;
  border-color: var(--verde);
  background: var(--cartao);
  box-shadow: var(--anel-verde);
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--linha);
  background: var(--cartao);
  font-size: var(--t-sm);
  color: var(--texto-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transicao);
}

.chip:hover { border-color: var(--linha-forte); color: var(--texto); }

.chip[aria-pressed='true'] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.chip .conta {
  font-size: var(--t-xs);
  background: var(--cinza-suave);
  color: var(--texto-2);
  border-radius: var(--r-pill);
  padding: 0 6px;
  line-height: 15px;
}

.chip[aria-pressed='true'] .conta { background: rgba(255, 255, 255, .18); color: #fff; }

input.controle {
  height: 36px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 0 10px;
  background: var(--cartao);
  font-size: var(--t-sm);
  color: var(--texto-2);
}

/*
 * Select com a cara do sistema.
 *
 * A seta cinza do Windows, a altura de 34px e o fundo branco chapado eram o
 * detalhe que mais entregava "formulário", não "ferramenta" — sete deles
 * lado a lado numa barra de filtros e a tela inteira desandava. Mesma altura
 * do campo de busca, mesma borda, mesmo foco verde, seta desenhada aqui.
 */
.conteudo select,
.modal select,
select.controle {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  max-width: 100%;
  padding: 0 32px 0 12px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background-color: var(--cartao-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D8B84' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px 15px;
  font-size: var(--t-md);
  color: var(--texto);
  cursor: pointer;
  transition: border-color var(--transicao), background-color var(--transicao), box-shadow var(--transicao);
}

.conteudo select:hover,
.modal select:hover,
select.controle:hover { border-color: var(--linha-forte); }

.conteudo select:focus,
.modal select:focus,
select.controle:focus,
input.controle:focus {
  outline: none;
  border-color: var(--verde);
  background-color: #fff;
  box-shadow: var(--anel-verde);
}

.conteudo select:disabled,
.modal select:disabled { color: var(--texto-3); cursor: not-allowed; background-color: var(--cinza-suave); }

/* ── Caixa de entrada (WhatsApp) ─────────────────────────────────────────── */

.wa-cabecalho {
  flex: none;
  padding: 14px 24px 13px;
  border-bottom: 1px solid var(--linha);
  background: var(--tela);
  overflow: auto;
  max-height: 52vh;
}

.inbox {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
  height: 100%;
  background: var(--cartao);
  overflow: hidden;
}

.inbox-coluna {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--linha);
}

.inbox-coluna:last-child { border-right: none; border-left: 1px solid var(--linha); }

.inbox-cabecalho {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linha);
  flex: none;
  background: var(--cartao);
}

.lista-conversas { overflow-y: auto; flex: 1; }

.conversa-item {
  display: flex;
  gap: 11px;
  padding: 11px 14px;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--cinza-suave);
  transition: background var(--transicao);
  position: relative;
}

.conversa-item:hover { background: var(--cartao-2); }

.conversa-item[aria-selected='true'] { background: var(--verde-suave); }

.conversa-item[aria-selected='true']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--verde);
}

.conversa-item .corpo { min-width: 0; flex: 1; }

.conversa-item .linha1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.conversa-item .nome {
  font-size: var(--t-md);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversa-item .hora {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--texto-3);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.conversa-item .linha2 { display: flex; align-items: center; gap: 8px; }

.conversa-item .previa {
  font-size: var(--t-sm);
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.conversa-item[data-nao-lida] .nome { font-weight: 600; }
.conversa-item[data-nao-lida] .previa { color: var(--texto); font-weight: 500; }

/* Painel da conversa */

.conversa-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--linha);
  flex: none;
  background: var(--cartao);
}

.conversa-topo .info { min-width: 0; flex: 1; }
.conversa-topo .nome { font-size: var(--t-base); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa-topo .sub {
  font-size: var(--t-sm);
  color: var(--texto-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.conversa-topo .sub > span:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Em telas largas a ficha do cliente é coluna fixa: não há o que fechar. */
.fechar-info { display: none; }

.mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 12px;
  background:
    linear-gradient(rgba(245, 243, 238, .96), rgba(245, 243, 238, .96)),
    radial-gradient(circle at 1px 1px, rgba(11, 27, 58, .08) 1px, transparent 0) 0 0 / 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.separador-dia {
  align-self: center;
  background: rgba(11, 27, 58, .06);
  color: var(--texto-2);
  font-size: var(--t-xs);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  margin: 14px 0 10px;
}

.balao {
  max-width: min(560px, 74%);
  padding: 8px 12px 6px;
  border-radius: var(--r-md);
  font-size: var(--t-md);
  line-height: 1.45;
  box-shadow: var(--sombra-sm);
  position: relative;
  word-break: break-word;
}

.balao[data-direcao='entrada'] {
  align-self: flex-start;
  background: var(--cartao);
  border-bottom-left-radius: 4px;
}

.balao[data-direcao='saida'] {
  align-self: flex-end;
  background: var(--verde-suave);
  border-bottom-right-radius: 4px;
}

.balao + .balao[data-direcao='entrada'] { margin-top: 0; }

.balao .rodape-balao {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 3px;
  font-size: var(--t-xs);
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

.balao .autor {
  font-size: var(--t-xs);
  color: var(--verde-escuro);
  font-weight: 500;
  margin-bottom: 2px;
}

.balao img.anexo { border-radius: var(--r-md); margin-bottom: 6px; max-height: 300px; width: auto; }

.balao .arquivo-anexo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: rgba(11, 27, 58, .04);
  border-radius: var(--r-md);
  margin-bottom: 5px;
}

.balao .arquivo-anexo svg { width: 20px; height: 20px; color: var(--navy-texto); flex: none; }
.balao .arquivo-anexo .nome-arquivo { font-size: var(--t-sm); font-weight: 500; word-break: break-all; }
.balao .arquivo-anexo .tam { font-size: var(--t-xs); color: var(--texto-3); }

.tique { display: inline-flex; }
.tique svg { width: 14px; height: 14px; }
.tique[data-status='lida'] { color: var(--verde-escuro); }
.tique[data-status='falhou'] { color: var(--tijolo); }

.compositor {
  flex: none;
  border-top: 1px solid var(--linha);
  padding: 11px 16px 13px;
  background: var(--cartao);
}

.compositor-linha {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-xl);
  padding: 5px 6px 5px 12px;
  transition: border-color var(--transicao);
}

.compositor-linha:focus-within {
  border-color: var(--verde);
  box-shadow: var(--anel-verde);
}

.compositor textarea {
  flex: 1;
  border: none;
  background: none;
  resize: none;
  max-height: 132px;
  min-height: 30px;
  padding: 6px 0;
  font-size: var(--t-md);
  line-height: 1.45;
}

.compositor textarea:focus { outline: none; }

.botao-enviar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background var(--transicao), transform var(--transicao);
}

.botao-enviar:hover:not(:disabled) { background: var(--verde-escuro); }
.botao-enviar:disabled { background: var(--linha-forte); cursor: not-allowed; }
.botao-enviar svg { width: 17px; height: 17px; }

.anexos-previa {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  margin-bottom: 8px;
  background: var(--verde-suave);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
}

.seletor-emoji {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 12px;
  width: 300px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  z-index: 20;
}

.seletor-emoji button {
  font-size: var(--t-xl);
  line-height: 1;
  padding: 5px;
  border-radius: var(--r-sm);
  transition: background var(--transicao);
}

.seletor-emoji button:hover { background: var(--cinza-suave); }

.seletor-modelos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  grid-template-columns: none;
  width: 320px;
  right: auto;
  left: 12px;
}

.seletor-modelos button:hover { background: var(--cartao-2); }

/* Coluna de informações */

.info-cliente { overflow-y: auto; flex: 1; }

.info-bloco { padding: 16px 18px; border-bottom: 1px solid var(--cinza-suave); }
.info-bloco:last-child { border-bottom: none; }

.info-titulo {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
  margin: 0 0 10px;
}

.info-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: var(--t-sm);
}

.info-linha dt { color: var(--texto-2); flex: none; }
.info-linha dd { margin: 0; text-align: right; font-weight: 500; word-break: break-word; }

.observacao-item {
  background: var(--cartao-2);
  border: 1px solid var(--cinza-suave);
  border-left: 2px solid var(--verde);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  margin-bottom: 8px;
}

.observacao-item .texto { font-size: var(--t-sm); line-height: 1.45; }
.observacao-item .assinatura { font-size: var(--t-xs); color: var(--texto-3); margin-top: 5px; }

.linha-tempo { position: relative; padding-left: 18px; }

.linha-tempo::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--linha);
}

.evento-tempo { position: relative; padding: 5px 0; font-size: var(--t-sm); }

.evento-tempo::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cartao);
  border: 2px solid var(--linha-forte);
}

.evento-tempo .quando { font-size: var(--t-xs); color: var(--texto-3); }

/* ── Gráfico ─────────────────────────────────────────────────────────────── */

.grafico-caixa { position: relative; }

.grafico-legenda {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--texto-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--linha);
  background: var(--cartao);
  transition: all var(--transicao);
}

.legenda-item .amostra { width: 9px; height: 9px; border-radius: var(--r-xs); flex: none; }
.legenda-item[aria-pressed='false'] { opacity: .42; }
.legenda-item:hover { border-color: var(--linha-forte); }

.grafico { width: 100%; display: block; overflow: visible; }
.grafico .grade { stroke: var(--linha); stroke-width: 1; }
.grafico .eixo-texto { fill: var(--texto-3); font-size: var(--t-xs); }
.grafico .area-serie { opacity: .10; }

/* Painel de fluxos — barras divergentes */
.grafico-fluxo .barra-fluxo { rx: 1.5; }
.grafico-fluxo .base-zero { stroke: var(--linha-forte); stroke-width: 1; }

/* Rótulo que nomeia cada painel do par. Com dois gráficos empilhados, o
   título da seção não basta: cada eixo precisa dizer o que mede. */
.rotulo-painel {
  font-size: var(--t-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
  margin: 0 0 2px;
}
.rotulo-painel + .grafico-caixa { margin-bottom: 10px; }
.grafico .linha-serie { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grafico .ponto-serie { stroke: #fff; stroke-width: 2; }
.grafico .faixa-hover { fill: transparent; cursor: crosshair; }
.grafico .faixa-hover:hover { fill: rgba(11, 27, 58, .03); }
.grafico .marcador-vertical { stroke: var(--linha-forte); stroke-width: 1; stroke-dasharray: 3 3; }

.dica-grafico {
  position: absolute;
  pointer-events: none;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: var(--t-sm);
  box-shadow: var(--sombra-lg);
  min-width: 148px;
  z-index: 10;
  transform: translate(-50%, -100%);
}

.dica-grafico .data {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.dica-grafico .linha-dica {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
}

.dica-grafico .linha-dica .valor { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Tabela ──────────────────────────────────────────────────────────────── */

/* Rolagem horizontal com pista visual.
   As sombras laterais aparecem só quando existe conteúdo escondido naquele
   lado — truque de background-attachment: local. Sem JS. */
.tabela-caixa {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--cartao) 30%, rgba(255, 255, 255, 0)) left center / 44px 100% no-repeat,
    linear-gradient(to left, var(--cartao) 30%, rgba(255, 255, 255, 0)) right center / 44px 100% no-repeat,
    radial-gradient(farthest-side at 0% 50%, rgba(22, 29, 43, .13), rgba(22, 29, 43, 0)) left center / 16px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(22, 29, 43, .13), rgba(22, 29, 43, 0)) right center / 16px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
  /* Encaixe por coluna: sem isso a rolagem para no meio de uma coluna e o
     pedaço cortado espia por trás do painel congelado. */
  scroll-snap-type: x proximity;
  /* O encaixe tem que respeitar a largura do painel congelado de cada tabela,
     senão a coluna encaixa debaixo dele. */
  scroll-padding-left: var(--col-fixa, 0px);
}

.tabela-caixa table th,
.tabela-caixa table td { scroll-snap-align: start; }

/* Barra horizontal que acompanha a tela — ver `js/componentes/rolagem-tabela.js`.
   A barra nativa mora no rodapé da caixa, que numa tabela de 33 linhas fica
   1702px abaixo da janela. A substituta se fixa na base da área visível. */
.rolagem-par { position: relative; }

.rolagem-acompanha {
  position: sticky;
  /* Desconta a folga do rodapé e devolve 10px, para a barra pousar logo acima
     da base da janela em vez de colada nela. Fora do `.conteudo` — num modal,
     por exemplo — a variável não existe e o recuo vira zero. */
  bottom: calc(10px - var(--folga-rodape, 10px));
  z-index: 3;
  overflow-x: auto;
  overflow-y: hidden;
  /* Barra de sobreposição, no feitio das do macOS.
     Tentei antes uma pastilha opaca com borda: fixada no meio da tabela ela
     lia como divisória de seção, e quem olhava via a tabela partida em duas.
     Translúcida e sem contorno ela lê como o que é — um controle pairando
     sobre a tabela — e as duas linhas que ela encobre continuam legíveis. */
  background: color-mix(in srgb, var(--cartao) 72%, transparent);
  backdrop-filter: blur(5px);
  /* Firefox não lê `::-webkit-scrollbar` — sem isto a barra sairia na cor do
     sistema, destoando das outras do app. */
  scrollbar-width: thin;
  scrollbar-color: #9A9484 transparent;
}

/* A pista só existe para dar largura ao conteúdo e provocar a barra. */
.rolagem-trilho { height: 1px; }

/* Polegar mais escuro que o das barras comuns: aqui ele compete com as
   células da tabela por trás, não com o fundo liso de um painel. */
.rolagem-acompanha::-webkit-scrollbar { height: 13px; }
.rolagem-acompanha::-webkit-scrollbar-track { background: transparent; }
.rolagem-acompanha::-webkit-scrollbar-thumb {
  background: #9A9484;
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
.rolagem-acompanha::-webkit-scrollbar-thumb:hover { background: #7E7868; background-clip: content-box; border: 3px solid transparent; }

/* A nativa sai de cena só depois que a substituta assume. Sem JS, nada muda. */
.tabela-caixa.rolagem-pareada { scrollbar-width: none; }
.tabela-caixa.rolagem-pareada::-webkit-scrollbar { height: 0; }

/* Sem ponteiro — num celular a rolagem é com o dedo, direto na tabela, e a
   barra extra só comeria altura. */
@media (hover: none) {
  .rolagem-acompanha { display: none; }
  .tabela-caixa.rolagem-pareada { scrollbar-width: auto; }
  .tabela-caixa.rolagem-pareada::-webkit-scrollbar { height: 10px; }
}

.tabela-caixa:has(table.tabela-fluxo) { --col-fixa: 142px; }
.tabela-caixa:has(table.tabela-contas) { --col-fixa: 242px; }
.tabela-caixa:has(table.tabela-contatos) { --col-fixa: 311px; }

/* 371px de razão social era 29% da tela presos num painel congelado.
   Corta em 240 com reticências — o nome inteiro fica no title. */
.tabela-contas th:first-child,
.tabela-contas td:first-child { width: 240px; max-width: 240px; }
.tabela-contas td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Painel congelado: a coluna fixa precisa flutuar acima do que rola sob ela,
   senão o resto de coluna cortado pela rolagem lê como texto quebrado. */
table.tabela-dre th:first-child,
table.tabela-dre td.rotulo-linha,
.tabela-contas th:first-child,
.tabela-contas td:first-child,
.tabela-contatos th:first-child,
.tabela-contatos td:first-child {
  box-shadow: 7px 0 9px -7px rgba(22, 29, 43, .22);
}

/* Matriz esparsa: em Fluxo de caixa 69% das células não têm movimento.
   O travessão recua pro fundo e só o número disputa atenção. */
.celula-vazia { color: var(--texto-3); opacity: .45; }

table.tabela-dre { min-width: 980px; }
table.tabela-dre th:not(:first-child),
table.tabela-dre td:not(:first-child) { text-align: right; white-space: nowrap; }
table.tabela-dre th:first-child,
table.tabela-dre td.rotulo-linha { position: sticky; left: 0; background: var(--cartao); z-index: 1; }
table.tabela-dre th:first-child { background: var(--cartao-2); }
table.tabela-dre td.total-linha { font-weight: 600; }
table.tabela-dre tr[data-destaque] td { font-weight: 600; background: var(--cartao-2); }
table.tabela-dre tr[data-destaque]:hover td { background: var(--cartao-2); }

/* Fluxo de caixa: a coluna de dias é estreita, e o dia fica em cima do mês. */
table.tabela-fluxo { min-width: 0; }
table.tabela-fluxo th:not(:first-child) { min-width: 72px; }
table.tabela-fluxo th .sub { font-weight: 400; font-size: var(--t-xs); opacity: 0.7; }
table.tabela-fluxo td.rotulo-filho { padding-left: 22px; font-weight: 400; opacity: 0.85; }

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

table.tabela th {
  text-align: left;
  font-size: var(--t-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
  background: var(--cartao-2);
}

/* Cifras de larguras diferentes desalinham a coluna e a leitura vai junto. */
table.tabela td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--cinza-suave);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
table.tabela tbody tr { transition: background var(--transicao); }
table.tabela tbody tr:hover { background: var(--cartao-2); }
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela .celula-nome { display: flex; align-items: center; gap: 10px; }
table.tabela .celula-nome > div { min-width: 0; }

/* Colunas com largura declarada. O layout fixo impede o navegador de
   redistribuir a largura pelo conteúdo — é o que fazia a linha inchar até
   130px de altura com o nome quebrado em duas linhas.

   Em px, e não em %, porque cada coluna tem uma exigência própria que não
   escala junto: "Botão \"Mandar mensagem\"" precisa de espaço fixo, os dois
   botões de ação também. A soma passa um pouco de 1130px, então em telas de
   1440 a tabela rola algumas dezenas de pixels — melhor do que espremer. */
table.tabela.tabela-clientes { table-layout: fixed; min-width: 1120px; }
.tabela-clientes col.c-cliente { width: 215px; }
.tabela-clientes col.c-contato { width: 175px; }
.tabela-clientes col.c-origem { width: 132px; }
.tabela-clientes col.c-interesse { width: 135px; }
.tabela-clientes col.c-status { width: 100px; }
.tabela-clientes col.c-data { width: 88px; }
.tabela-clientes col.c-interacao { width: 125px; }
.tabela-clientes col.c-acoes { width: 160px; }

/* Uma linha por dado: o que não couber vira reticências, e a altura da linha
   deixa de depender do tamanho do nome ou da mensagem. */
.tabela-clientes td .linha-unica {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabela-clientes td { vertical-align: middle; }

/* O cabeçalho pode quebrar em duas linhas — sem isso "Primeiro contato" e
   "Última interação" transbordam por cima da coluna vizinha. */
table.tabela.tabela-clientes th { white-space: normal; line-height: 1.25; padding: 9px 12px; }

/* Etiqueta de origem e datas presas dentro da própria coluna. */
.tabela-clientes td .etiqueta {
  display: inline-block;
  line-height: 21px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.tabela.tabela-clientes td { padding: 10px 12px; }
table.tabela.tabela-clientes td:nth-child(6),
table.tabela.tabela-clientes td:nth-child(7) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Os dois botões de ação numa coluna estreita: fonte e respiro menores. */
table.tabela.tabela-clientes td:last-child .btn { padding: 5px 8px; font-size: var(--t-xs); }
table.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Barras de relatório ─────────────────────────────────────────────────── */

.barra-dado { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.barra-dado .rotulo { font-size: var(--t-sm); width: 165px; flex: none; color: var(--texto-2); }
.barra-dado .trilho { flex: 1; height: 8px; background: var(--cinza-suave); border-radius: var(--r-pill); overflow: hidden; }
.barra-dado .trilho span { display: block; height: 100%; background: var(--verde); border-radius: var(--r-pill); transition: width 500ms ease; }
.barra-dado .valor { font-size: var(--t-sm); font-weight: 600; width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

.funil { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }

.funil-etapa {
  flex: 1;
  min-width: 130px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 13px 14px;
  position: relative;
}

.funil-etapa .valor { font-size: var(--t-xl); font-weight: 600; line-height: 1; margin-bottom: 5px; }
.funil-etapa .rotulo { font-size: var(--t-sm); color: var(--texto-2); }
.funil-etapa .taxa { font-size: var(--t-xs); color: var(--verde-escuro); margin-top: 5px; font-weight: 500; }

/* ── Quadro do funil (Kanban) ────────────────────────────────────────────── */

.funil-quadro {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 10px;
}

.funil-coluna {
  flex: none;
  width: 250px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  max-height: calc(100vh - 340px);
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.funil-coluna-topo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  position: sticky;
  top: 0;
  background: var(--cartao-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.funil-coluna-topo .conta {
  margin-left: auto;
  background: var(--cinza-suave);
  color: var(--texto-2);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-size: var(--t-xs);
  font-weight: 500;
}

.funil-coluna-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funil-cartao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 10px 11px;
  box-shadow: var(--sombra-sm);
}

.funil-cartao-topo {
  display: flex;
  align-items: center;
  gap: 9px;
}

.funil-seletor { width: 100%; font-size: var(--t-sm); height: 30px; }

.funil-cartao { cursor: grab; }
.funil-cartao:active { cursor: grabbing; }
.funil-cartao.arrastando { opacity: .4; }

/* Coluna sob o card arrastado. O tracejado diz "solta aqui" sem mexer no
   tamanho da coluna — borda sólida faria o quadro inteiro tremer. */
.funil-coluna.alvo { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
.funil-coluna.alvo .funil-coluna-corpo { background: var(--verde-suave); }

.funil-coluna-vazia {
  padding: 16px 12px;
  font-size: var(--t-sm);
  color: var(--texto-3);
  text-align: center;
  border: 1px dashed var(--linha);
  border-radius: var(--r-md);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

.cortina {
  position: fixed;
  inset: 0;
  background: rgba(11, 27, 58, .38);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: aparecer 140ms ease;
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

@keyframes subir {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}

.modal {
  background: var(--cartao);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-lg);
  width: 100%;
  max-width: 520px;
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: subir 180ms cubic-bezier(.2, .8, .3, 1);
}

.modal[data-largo] { max-width: 780px; }

/* A folha inteira de uma vez: nove colunas de dinheiro e o botão do holerite.
   Continua respeitando a tela — em monitor pequeno volta a rolar. */
.modal[data-largo='tabela'] { max-width: min(1140px, calc(100vw - 48px)); }

/* Modal empilhado: quem está embaixo continua visível, sem escurecer duas
   vezes, e recua um pouco para que a camada de cima leia como "em cima". */
.cortina[data-fundo] { background: transparent; backdrop-filter: none; animation: none; }
.cortina[data-fundo] .modal { transform: scale(.985); opacity: .55; transition: transform 140ms ease, opacity 140ms ease; }

.voltar-modal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto-2);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  max-width: 100%;
}

.voltar-modal:hover { color: var(--verde); }
.voltar-modal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal-topo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--linha);
  flex: none;
}

.modal-topo h2 { margin: 0; font-size: var(--t-lg); font-weight: 600; }
.modal-topo .sub { font-size: var(--t-sm); color: var(--texto-2); margin-top: 2px; }

.modal-corpo { padding: 18px 20px; overflow-y: auto; flex: 1; }

.modal-rodape {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--linha);
  background: var(--cartao-2);
  flex: none;
}

.campo { margin-bottom: 15px; }
.campo:last-child { margin-bottom: 0; }

.campo label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-2);
  margin-bottom: 6px;
}

.campo .ajuda { font-size: var(--t-sm); color: var(--texto-3); margin-top: 5px; }

.campo input[type='text'],
.campo input[type='email'],
.campo input[type='number'],
.campo input[type='datetime-local'],
.campo select,
.campo textarea {
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: var(--t-md);
  background: var(--cartao);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: var(--anel-verde);
}

.sugestoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

.sugestao {
  font-size: var(--t-sm);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--linha-forte);
  color: var(--texto-2);
  transition: all var(--transicao);
}

.sugestao:hover { border-style: solid; border-color: var(--verde); color: var(--verde-escuro); background: var(--verde-suave); }

/* ── Avisos ──────────────────────────────────────────────────────────────── */

.avisos {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 200;
  max-width: 360px;
}

.aviso {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-md);
  padding: 12px 15px;
  box-shadow: var(--sombra-lg);
  display: flex;
  gap: 11px;
  align-items: flex-start;
  animation: entraAviso 240ms cubic-bezier(.2, .8, .3, 1);
  cursor: pointer;
}

@keyframes entraAviso {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

.aviso[data-saindo] { animation: saiAviso 200ms ease forwards; }

@keyframes saiAviso {
  to { opacity: 0; transform: translateX(18px); }
}

.aviso .titulo { font-size: var(--t-md); font-weight: 500; }
.aviso .desc { font-size: var(--t-sm); color: rgba(255, 255, 255, .72); margin-top: 2px; }
.aviso .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-claro); margin-top: 5px; flex: none; }
.aviso[data-tom='erro'] { background: var(--tijolo); }
.aviso[data-tom='erro'] .ponto { background: var(--cartao); }

/* ── Estados vazios / carregando ─────────────────────────────────────────── */

.vazio {
  padding: 44px 24px;
  text-align: center;
  color: var(--texto-3);
}

.vazio svg { width: 34px; height: 34px; margin-bottom: 12px; opacity: .35; }
.vazio .titulo { font-size: var(--t-base); color: var(--texto-2); font-weight: 500; margin-bottom: 4px; }
.vazio .desc { font-size: var(--t-sm); max-width: 340px; margin: 0 auto; line-height: 1.55; }

.esqueleto {
  background: linear-gradient(90deg, var(--cinza-suave) 25%, #F7F5F0 37%, var(--cinza-suave) 63%);
  background-size: 400% 100%;
  animation: brilho 1.3s ease infinite;
  border-radius: var(--r-sm);
}

@keyframes brilho {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.escondido { display: none !important; }

/* ── Barra de demonstração ───────────────────────────────────────────────── */

.barra-demo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(11, 27, 58, .04);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--texto-2);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.barra-demo .rotulo-demo { font-weight: 600; color: var(--navy); letter-spacing: .04em; text-transform: uppercase; font-size: var(--t-xs); }

/* ── Responsivo ──────────────────────────────────────────────────────────── */

@media (max-width: 1240px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .inbox-coluna[data-painel='info'] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 330px;
    background: var(--cartao);
    z-index: 25;
    box-shadow: var(--sombra-lg);
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(.2, .8, .3, 1);
  }
  .inbox-coluna[data-painel='info'][data-aberto] { transform: none; }
  .inbox { position: relative; }
  .botao-info { display: inline-flex !important; }
  .fechar-info { display: inline-flex; }
}

@media (max-width: 1240px) {
  /* Quatro cartões numa linha só cabem numa tela larga; abaixo disso viram
     dois e dois, que ainda é comparação lado a lado. */
  .grade-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .colunas-painel,
  .colunas-painel[data-peso="2-1"] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grade-kpi { grid-template-columns: 1fr; }
  .cabecalho-painel h1 { font-size: var(--t-2xl); }
  .rosca-caixa { justify-content: center; }
  .numero-operacao { font-size: var(--t-lg); }
}

@media (max-width: 980px) {
  :root { --lateral: 72px; }
  .marca { justify-content: center; padding: 4px 0 20px; }
  .marca-texto, .usuario-lateral .dados, .aviso-tempo-real span, .nav-aviso-perfil { display: none; }
  .nav-raiz > .nav-rotulo, .nav-grupo-cabeca > .nav-rotulo, .nav-chevron, .nav-tudo { display: none; }
  .nav-raiz, .nav-grupo-cabeca { justify-content: center; padding: 11px 0; }
  .nav-raiz .selo, .nav-grupo-cabeca .selo {
    position: absolute;
    top: 1px;
    right: 9px;
    margin: 0;
    min-width: 17px;
    height: 17px;
    font-size: var(--t-xs);
    padding: 0 4px;
    box-shadow: var(--anel-selecao);
  }
  .nav-grupo[data-tem-ativa]:not([data-aberto]) > .nav-grupo-cabeca::after { left: 50%; margin-left: -2.5px; bottom: 5px; }

  /*
   * No trilho de 72px não há largura para a gaveta empurrar linha: ela vira
   * painel flutuante ao lado do ícone, com o nome do grupo no topo — sem ele,
   * um painel de seis links aparece do nada, sem dizer de quem é.
   */
  #navegacao { overflow: visible; }

  .nav-sub {
    position: absolute;
    left: calc(100% + 10px);
    top: -6px;
    z-index: 60;
    display: block;
    width: 210px;
    padding: 6px;
    background: var(--navy-2);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-md);
    box-shadow: var(--sombra-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-5px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }

  /* Ponte invisível sobre o vão: sem ela o painel fecha no meio do caminho. */
  .nav-sub::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px; }

  .nav-grupo:hover > .nav-sub,
  .nav-grupo:focus-within > .nav-sub,
  .nav-grupo[data-aberto] > .nav-sub { opacity: 1; visibility: visible; transform: none; }

  .nav-sub-titulo {
    display: block;
    padding: 6px 10px 8px;
    font-size: var(--t-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
  }

  .nav-sub-lista { padding-left: 0; }
  .nav-sub-lista::before { display: none; }
  .nav-sub-item { padding: 8px 10px; opacity: 1; }
  .nav-sub-item .selo { position: static; margin-left: auto; min-width: 20px; height: 19px; font-size: var(--t-xs); padding: 0 6px; }
  .nav-sub-item.ativo::before { display: none; }
  .usuario-lateral { justify-content: center; }
  .aviso-tempo-real { justify-content: center; padding: 8px 0 2px; }
  .atalho-crm { justify-content: center; padding: 9px 0; }
  .atalho-crm span { display: none; }
  .atalho-crm svg { width: 15px; height: 15px; }
}

@media (max-width: 860px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox-coluna[data-painel='lista'] { border-right: none; }
  .inbox[data-conversa-aberta] .inbox-coluna[data-painel='lista'] { display: none; }
  .inbox:not([data-conversa-aberta]) .inbox-coluna[data-painel='conversa'] { display: none; }
  .botao-voltar { display: inline-flex !important; }
  .inbox-coluna[data-painel='info'] { width: min(330px, 88vw); }
}

@media (max-width: 720px) {
  :root { --lateral: 0px; }
  .app { grid-template-columns: 1fr; }
  .barra-lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 248px;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.2, .8, .3, 1);
    box-shadow: var(--sombra-lg);
  }
  .barra-lateral[data-aberta] { transform: none; }
  .marca { justify-content: flex-start; padding: 4px 10px 22px; }
  .marca-texto, .usuario-lateral .dados, .aviso-tempo-real span, .nav-aviso-perfil { display: block; }
  .nav-raiz > .nav-rotulo, .nav-grupo-cabeca > .nav-rotulo { display: block; }
  .nav-chevron { display: inline-flex; }
  .nav-tudo { display: flex; }
  .nav-raiz, .nav-grupo-cabeca { justify-content: flex-start; padding: 9px 12px; }
  .nav-item .selo { position: static; margin-left: auto; min-width: 20px; height: 19px; font-size: var(--t-xs); padding: 0 6px; }
  .nav-grupo[data-tem-ativa]:not([data-aberto]) > .nav-grupo-cabeca::after { left: 18px; margin-left: 0; bottom: 6px; }

  /* A gaveta do celular volta a empilhar: a lateral já tem 248px de largura. */
  #navegacao { overflow-y: auto; }
  .nav-sub {
    position: static;
    display: grid;
    width: auto;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-sub::before { display: none; }
  .nav-sub-titulo { display: none; }
  .nav-sub-lista { padding-left: 20px; }
  .nav-sub-lista::before { display: block; }
  .nav-sub-item { padding: 8px 12px 8px 22px; opacity: 0; }
  .nav-grupo[data-aberto] .nav-sub-item { opacity: 1; }
  .nav-sub-item.ativo::before { display: block; }
  .usuario-lateral { justify-content: flex-start; }
  .aviso-tempo-real { justify-content: flex-start; padding: 8px 12px 2px; }
  .atalho-crm { justify-content: space-between; padding: 8px 11px; }
  .atalho-crm span { display: block; }
  .botao-menu { display: inline-flex; }
  .conteudo { --folga-rodape: 40px; padding: 20px 16px var(--folga-rodape); }
  .cabecalho-pagina h1 { font-size: var(--t-2xl); }

  /*
   * Botão que some pela esquerda e não volta.
   *
   * `.cabecalho-pagina` alinha ao fim, e o grupo de botões tem `display:flex`
   * em estilo embutido — sem `flex-wrap`. Em 358px úteis três botões não
   * cabem, e o que sobra sai pela borda INICIAL. Overflow para esse lado não
   * rola em contêiner nenhum: medido com `scrollLeft` travado em 0 nos três
   * ancestrais e `elementFromPoint` devolvendo outro elemento na posição do
   * botão. Em Estoque, "Repor o depósito" ficava em x = -339px — invisível e
   * intocável. Eram 15 botões assim, em 8 telas.
   *
   * Alinhar ao início é o que resolve: se ainda faltar espaço, o excesso passa
   * a sair pela direita, que rola. A quebra de linha evita que chegue a isso.
   */
  .cabecalho-pagina { justify-content: flex-start; }
  .cabecalho-pagina > * { flex-wrap: wrap; min-width: 0; }

  /* A largura dos filtros se resolve em `suprimentos.css`, junto da regra que
     a causava. A busca ocupa a faixa inteira: ela é o filtro mais usado e o
     que mais sofre com pouca largura. */
  .barra-filtros .campo-busca { flex-basis: 100%; }
  .grade-indicadores { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .painel-notificacoes { right: 8px; width: calc(100vw - 16px); }
  .avisos { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .grade-leads { grid-template-columns: 1fr; }
  .barra-dado .rotulo { width: 110px; }
  .funil-coluna { width: 210px; max-height: calc(100vh - 400px); }

  /*
   * ── Tabela em cartão ────────────────────────────────────────────────────
   *
   * Ver `js/componentes/tabela-cartao.js`, que carimba `data-rotulo` em cada
   * célula a partir do cabeçalho — CSS não lê conteúdo de outro elemento.
   *
   * Medido a 390px antes disto: Contas a receber mostrava 17% da tabela,
   * Estoque e Itens 31%. Agora o registro cabe inteiro, sem rolagem lateral.
   */
  .tabela-caixa[data-cartoes] {
    overflow-x: visible;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .tabela-caixa[data-cartoes] table,
  .tabela-caixa[data-cartoes] tbody,
  .tabela-caixa[data-cartoes] tr,
  .tabela-caixa[data-cartoes] td { display: block; width: auto; max-width: none; }

  /*
   * A largura mínima de desktop não pode sobreviver no cartão.
   *
   * Dez tabelas fixam `min-width` para caber as colunas — `table.tabela.tabela-contas`
   * pede 1180px, e com `table-layout: fixed` por cima. Essas regras vencem em
   * especificidade qualquer seletor razoável daqui, e enquanto valiam o cartão
   * era montado mas a caixa continuava rolando 832px de lado: o modo ligava e
   * não resolvia nada. `!important` aqui é o que diz, sem rodeio, que no
   * estreito a tabela deixou de ser tabela.
   */
  .tabela-caixa[data-cartoes] table {
    min-width: 0 !important;
    table-layout: auto !important;
  }
  .tabela-caixa[data-cartoes] td,
  .tabela-caixa[data-cartoes] tr { min-width: 0 !important; }

  /* `<col>` com largura fixa não tem efeito sobre caixas em bloco, mas some
     junto para não deixar rastro de layout de tabela. */
  .tabela-caixa[data-cartoes] colgroup { display: none; }

  /* O cabeçalho vira o rótulo de cada célula; repetido em cima, sobraria. */
  .tabela-caixa[data-cartoes] thead { display: none; }

  .tabela-caixa[data-cartoes] tr {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .tabela-caixa[data-cartoes] tr:hover td { background: none; }

  .tabela-caixa[data-cartoes] td {
    display: flex;
    /* Alguns valores trazem `white-space: nowrap` próprio — a reserva do
       estoque, por exemplo, com "1.260 reservado · 2.584,41 un". Ao lado do
       rótulo eles não cabiam e vazavam 16px. Com a quebra, o valor desce para
       a própria linha e o rótulo continua onde está. */
    flex-wrap: wrap;
    gap: 14px;
    align-items: baseline;
    justify-content: space-between;
    border: 0;
    padding: 4px 0;
    height: auto;
    white-space: normal;
    text-align: right;
  }

  .tabela-caixa[data-cartoes] td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    text-align: left;
    font-size: var(--t-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-3);
    font-weight: 500;
  }

  /* A primeira coluna é quem o registro É — nome do cliente, do material, da
     obra. Vira título do cartão, sem rótulo e sem disputar a linha. */
  .tabela-caixa[data-cartoes] td:first-child {
    display: block;
    text-align: left;
    font-weight: 600;
    font-size: var(--t-base);
    padding: 0 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--linha);
    overflow: visible;
    text-overflow: clip;
  }
  .tabela-caixa[data-cartoes] td:first-child::before { content: none; }

  /* Célula vazia empilhada é uma linha a mais para rolar, sem informação. */
  .tabela-caixa[data-cartoes] td[data-vazio] { display: none; }

  /*
   * A faixa de ações do cartão.
   *
   * É a coluna de cabeçalho vazio — por isso não ganhou `data-rotulo`. Dentro
   * dela os botões vêm num `display:flex` embutido, sem `flex-wrap`: a mesma
   * armadilha do cabeçalho da página, e o "Receber" saía pela borda. Quebrar
   * linha resolve; o `!important` é só para vencer o `justify-content`
   * embutido, que alinharia os botões à direita do cartão.
   */
  .tabela-caixa[data-cartoes] td:not([data-rotulo]):not(:first-child) {
    display: block;
    text-align: left;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--linha);
  }
  .tabela-caixa[data-cartoes] td:not([data-rotulo]):not(:first-child) > div {
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }

  /* Esqueleto, "nada encontrado" e rodapé de totais: faixa, não cartão. */
  .tabela-caixa[data-cartoes] tr[data-faixa] { padding: 10px 14px; }
  .tabela-caixa[data-cartoes] tr[data-faixa] td { display: block; text-align: left; }
  .tabela-caixa[data-cartoes] tr[data-faixa] td::before { content: none; }
  .tabela-caixa[data-cartoes] tr[data-faixa] td[data-vazio] { display: none; }

  /* O painel congelado e a largura travada da coluna 1 não valem no cartão. */
  .tabela-caixa[data-cartoes] td:first-child,
  .tabela-caixa[data-cartoes] th:first-child { position: static; box-shadow: none; width: auto; }

  /* Central de WhatsApp no celular: cabeçalho enxuto, conversa ocupando a tela. */
  .wa-cabecalho { padding: 12px 16px; max-height: 40vh; }
  .wa-cabecalho h1 { font-size: var(--t-xl) !important; }
  .wa-cabecalho .subtitulo { display: none; }
  .conversa-topo { padding: 9px 12px; gap: 9px; }
  .conversa-topo .btn .rotulo-btn { display: none; }
  .conversa-topo .btn { padding: 0 9px; }
  .conversa-topo .avatar { width: 32px; height: 32px; font-size: var(--t-xs); }
  .mensagens { padding: 14px 12px 8px; }
  .balao { max-width: 86%; }
  .compositor { padding: 9px 10px 11px; }
}

.sombra-lateral {
  position: fixed;
  inset: 0;
  background: rgba(11, 27, 58, .35);
  z-index: 39;
}

@media (min-width: 721px) { .sombra-lateral { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===========================================================================
   ERP · peças próprias
   O que o CRM não tinha: barra de orçamento, extrato de movimentos, cartão de
   pedido, cartão de obra. Mesma paleta, mesmo peso de traço.
   =========================================================================== */

/* ── Atalho para o CRM ────────────────────────────────────────────────────── */

.atalho-crm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 8px;
  padding: 8px 11px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .72);
  font-size: var(--t-sm);
  transition: background var(--transicao), color var(--transicao);
}
.atalho-crm:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.atalho-crm svg { width: 13px; height: 13px; flex: none; }

/* ── Barra de orçamento ───────────────────────────────────────────────────── */

.barra-orcamento {
  position: relative;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--cinza-suave);
  overflow: visible;
  margin: 4px 0 6px;
}
.barra-orcamento .preenchida {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--verde);
  transition: width 500ms ease;
}
.barra-orcamento[data-tom='ambar'] .preenchida { background: var(--ambar); }
.barra-orcamento[data-tom='tijolo'] .preenchida { background: var(--tijolo); }
.barra-orcamento[data-tom='navy'] .preenchida { background: var(--navy-3); }

/* O traço do avanço físico: à direita dele, o dinheiro está na frente da obra. */
.barra-orcamento .marca-avanco {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--navy);
  border-radius: var(--r-pill);
  transform: translateX(-1px);
}
.barra-orcamento .marca-avanco::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
}

.legenda-barra {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--t-xs);
  color: var(--texto-3);
}

.barra-mini {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cinza-suave);
  overflow: hidden;
}
.barra-mini span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--navy-3); transition: width 500ms ease; }
.barra-mini[data-tom='verde'] span { background: var(--verde); }
.barra-mini[data-tom='ambar'] span { background: var(--ambar); }
.barra-mini[data-tom='tijolo'] span { background: var(--tijolo); }

/* ── Linha de registro (movimentos, entregas, contas) ─────────────────────── */

.linha-registro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--cinza-suave);
  width: 100%;
  text-align: left;
  transition: background var(--transicao);
}
.linha-registro:last-child { border-bottom: none; }
button.linha-registro:hover { background: var(--cartao-2); }

.linha-registro .marca-tipo {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--cinza-suave);
  color: var(--texto-2);
}
.linha-registro[data-tipo='entrada'] .marca-tipo,
.marca-tipo[data-tipo='receber'] { background: var(--verde-suave); color: var(--verde-escuro); }
.linha-registro[data-tipo='saida'] .marca-tipo,
.marca-tipo[data-tipo='pagar'] { background: var(--tijolo-suave); color: var(--tijolo); }
.linha-registro .marca-tipo[data-tom='tijolo'] { background: var(--tijolo-suave); color: var(--tijolo); }

.linha-registro .corpo { flex: 1; min-width: 0; }
.linha-registro .corpo .titulo {
  font-size: var(--t-md);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.linha-registro .corpo .desc {
  font-size: var(--t-sm);
  color: var(--texto-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linha-registro .lado { text-align: right; flex: none; display: flex; flex-direction: column; gap: 2px; }
.linha-registro .lado .valor { font-size: var(--t-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.linha-registro .lado .quando { font-size: var(--t-xs); color: var(--texto-3); }
.linha-registro .lado .quando[data-tom='tijolo'] { color: var(--tijolo); font-weight: 500; }

.separador-lista {
  padding: 9px 18px 5px;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-3);
  background: var(--cartao-2);
  border-bottom: 1px solid var(--cinza-suave);
}

.lista-movimentos { max-height: none; }

/* ── Linha de obra no painel ──────────────────────────────────────────────── */

.linha-obra {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--cinza-suave);
  transition: background var(--transicao);
}
.linha-obra:last-child { border-bottom: none; }
.linha-obra:hover { background: var(--cartao-2); }
.linha-obra .topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; height: auto; }
.linha-obra .nome { font-size: var(--t-md); font-weight: 500; }
.linha-obra .cliente { font-size: var(--t-xs); color: var(--texto-3); margin: 1px 0 5px; }
.linha-obra .numero { font-size: var(--t-sm); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.linha-obra .numero[data-tom='ambar'] { color: var(--ambar); font-weight: 500; }
.linha-obra .numero[data-tom='tijolo'] { color: var(--tijolo); font-weight: 600; }
.linha-obra .rodape { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--texto-3); }

.linha-obra.rodape-lista {
  font-size: var(--t-sm);
  color: var(--texto-2);
  text-align: center;
  padding: 10px 18px;
}
.linha-obra.rodape-lista:hover { color: var(--texto); }

/* Abas dentro de um painel sem padding: a régua horizontal é a das linhas. */
.chips-painel {
  padding: 11px 18px;
  border-bottom: 1px solid var(--cinza-suave);
}
.chips-painel .chip { font-size: var(--t-sm); padding: 4px 9px; }

/* ── Faixas de vencimento (Visão Geral) ───────────────────────────────────── */

.linha-faixa {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 18px 13px;
  border-bottom: 1px solid var(--cinza-suave);
  transition: background var(--transicao);
}
.linha-faixa:last-child { border-bottom: none; }
.linha-faixa:hover { background: var(--cartao-2); }
/* Faixa sem nenhuma conta continua na lista — a ausência também é resposta —
   mas não convida ao clique, porque não há o que abrir. */
.linha-faixa[data-vazia] { opacity: .5; cursor: default; }
.linha-faixa[data-vazia]:hover { background: transparent; }

.linha-faixa .cabeca {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.linha-faixa .nome { font-size: var(--t-md); font-weight: 500; }
.linha-faixa .conta-faixa {
  font-size: var(--t-xs);
  color: var(--texto-3);
  white-space: nowrap;
}
.linha-faixa .numero {
  margin-left: auto;
  font-size: var(--t-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.linha-faixa[data-tom='tijolo'] .numero { color: var(--tijolo); }
.linha-faixa[data-tom='ambar'] .numero { color: var(--ambar); }

/* ── Cartão de pedido ─────────────────────────────────────────────────────── */

.grade-pedidos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.cartao-pedido {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: 15px 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  position: relative;
  transition: box-shadow var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.cartao-pedido:hover { box-shadow: var(--sombra-md); border-color: var(--linha-forte); transform: translateY(-1px); }
/* Pedido atrasado: mesma regra do lead — a borda do cartão é que avisa. */
.cartao-pedido[data-atrasado] {
  border-color: rgba(169, 80, 60, .38);
  background: linear-gradient(var(--tijolo-suave), var(--tijolo-suave)) no-repeat, var(--cartao);
  background-size: 100% 3px;
}
.cartao-pedido[data-status='entregue'] { background: var(--cartao-2); }

.cartao-pedido .topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cartao-pedido .numero { font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; }
.cartao-pedido .fornecedor { font-size: var(--t-sm); color: var(--texto-2); }
.cartao-pedido .meta { display: flex; gap: 6px; flex-wrap: wrap; }

.cartao-pedido .rastreio {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: rgba(11, 27, 58, .04);
  border: 1px solid rgba(11, 27, 58, .07);
  border-radius: var(--r-md);
  padding: 9px 11px;
}
.cartao-pedido .rastreio .marca { color: var(--navy-texto); flex: none; margin-top: 1px; }
.cartao-pedido .rastreio .situacao { font-size: var(--t-sm); font-weight: 500; color: var(--navy-2); }
.cartao-pedido .rastreio .codigo {
  font-size: var(--t-xs);
  color: var(--texto-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-pedido .rodape {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--cinza-suave);
}
.cartao-pedido .entrega { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cartao-pedido .entrega .data { font-size: var(--t-sm); color: var(--texto-2); }
.cartao-pedido .entrega .data[data-tom='tijolo'] { color: var(--tijolo); font-weight: 500; }
.cartao-pedido .entrega .valor { font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao-pedido .acoes { display: flex; gap: 6px; flex: none; }

/* ── Cartão de obra ───────────────────────────────────────────────────────── */

.grade-obras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 14px;
}

.cartao-obra {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
.cartao-obra:hover { box-shadow: var(--sombra-md); border-color: var(--linha-forte); }
.cartao-obra[data-alerta='atencao'] { border-color: rgba(176, 126, 34, .35); }
.cartao-obra[data-alerta='estourado'] { border-color: rgba(169, 80, 60, .4); }
.cartao-obra[data-status='concluida'] { background: var(--cartao-2); }

.cartao-obra .topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cartao-obra .nome { font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; }
.cartao-obra .sub { font-size: var(--t-sm); color: var(--texto-3); margin-top: 2px; }
.cartao-obra .sub.cliente { font-size: var(--t-sm); color: var(--texto-2); font-weight: 500; margin-top: 3px; }

.cartao-obra .numeros { display: flex; gap: 18px; flex-wrap: wrap; }
.numero-obra { display: flex; flex-direction: column; gap: 1px; }
.numero-obra .rotulo { font-size: var(--t-xs); color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }
.numero-obra .valor { font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.numero-obra[data-tom='tijolo'] .valor { color: var(--tijolo); }

.aviso-obra {
  font-size: var(--t-sm);
  padding: 8px 11px;
  border-radius: var(--r-md);
  background: var(--ambar-suave);
  color: var(--ambar);
}
.aviso-obra[data-tom='tijolo'] { background: var(--tijolo-suave); color: var(--tijolo); }

.cartao-obra .rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--cinza-suave);
  flex-wrap: wrap;
}
.cartao-obra .divisao { display: flex; gap: 12px; font-size: var(--t-sm); color: var(--texto-2); flex-wrap: wrap; }
.cartao-obra .acoes { display: flex; gap: 6px; margin-left: auto; }

/* ── Tabelas do ERP ───────────────────────────────────────────────────────── */

table.tabela td .linha-unica {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
table.tabela td .sub { font-size: var(--t-sm); color: var(--texto-3); }

/*
 * A soma das colunas é a largura mínima da tabela.
 *
 * "A chegar" existia no colgroup e não tinha largura: com table-layout fixo,
 * sobrou zero para ela — o cabeçalho colava em "Mínimo" e o valor virava
 * reticências. Mexer numa largura daqui pede refazer a conta do min-width.
 */
table.tabela.tabela-estoque { table-layout: fixed; min-width: 1112px; }
.tabela-estoque col.c-material { width: 215px; }
.tabela-estoque col.c-categoria { width: 118px; }
.tabela-estoque col.c-saldo { width: 155px; }
.tabela-estoque col.c-chegar { width: 88px; }
.tabela-estoque col.c-minimo { width: 88px; }
.tabela-estoque col.c-custo { width: 100px; }
.tabela-estoque col.c-valor { width: 108px; }
.tabela-estoque col.c-consumo { width: 100px; }
.tabela-estoque col.c-acoes { width: 140px; }

table.tabela.tabela-financeiro { table-layout: fixed; min-width: 1120px; }
.tabela-financeiro col.c-descricao { width: 300px; }
.tabela-financeiro col.c-categoria { width: 150px; }
.tabela-financeiro col.c-obra { width: 165px; }
.tabela-financeiro col.c-vencimento { width: 120px; }
.tabela-financeiro col.c-situacao { width: 110px; }
.tabela-financeiro col.c-valor { width: 130px; }
.tabela-financeiro col.c-acoes { width: 150px; }

.celula-link { display: block; text-align: left; width: 100%; }
.celula-link:hover .linha-unica:first-child { color: var(--verde-escuro); text-decoration: underline; }

.celula-saldo { display: flex; align-items: center; gap: 8px; }
.celula-saldo .numero { font-variant-numeric: tabular-nums; font-weight: 500; }

tr[data-situacao='zerado'] td:first-child { box-shadow: inset 3px 0 0 var(--tijolo); }
tr[data-situacao='abaixo'] td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
tr[data-situacao='vencido'] td:first-child { box-shadow: inset 3px 0 0 var(--tijolo); }

tr.linha-total td {
  background: var(--cartao-2);
  font-weight: 600;
  border-top: 1px solid var(--linha);
  color: var(--texto-2);
}

.valor-monetario { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.valor-monetario[data-tom='verde'] { color: var(--verde-escuro); }
.valor-monetario[data-tom='tijolo'] { color: var(--tijolo); }
.valor-monetario[data-forte] { font-weight: 700; font-size: var(--t-base); }

/* ── Categorias com barra ─────────────────────────────────────────────────── */

.linha-categoria { margin-bottom: 12px; }
.linha-categoria:last-child { margin-bottom: 0; }
.linha-categoria .topo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--t-sm);
  margin-bottom: 5px;
}
.linha-categoria .numero { font-variant-numeric: tabular-nums; font-weight: 600; }
.nota-linha { font-size: var(--t-xs); color: var(--texto-3); margin-top: 4px; }

/* ── Formulário em duas colunas ───────────────────────────────────────────── */

.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.linha-campos .campo { margin-bottom: 15px; }

@media (max-width: 640px) {
  .linha-campos { grid-template-columns: 1fr; }
}

.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-md);
  color: var(--texto-2);
  padding: 9px 0;
}
.campo-checkbox input { width: 16px; height: 16px; accent-color: var(--verde); }

.contexto-modal {
  background: var(--cartao-2);
  border: 1px solid var(--cinza-suave);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: var(--t-sm);
  color: var(--texto-2);
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aviso-caixa {
  background: var(--verde-suave);
  border-radius: var(--r-md);
  padding: 11px 13px;
  font-size: var(--t-sm);
  color: var(--verde-escuro);
  line-height: 1.5;
}
.aviso-caixa[data-tom='navy'] { background: rgba(11, 27, 58, .05); color: var(--navy-2); }
.aviso-caixa[data-tom='ambar'] { background: var(--ambar-suave); color: var(--ambar); }
.aviso-caixa[data-tom='verde'] { background: var(--verde-suave); color: var(--verde-escuro); }
.aviso-caixa[data-tom='tijolo'] { background: var(--tijolo-suave); color: var(--tijolo); }
.aviso-caixa .sub { font-size: var(--t-sm); color: var(--texto-3); margin-top: 3px; }


/* ── Repor o depósito ─────────────────────────────────────────────────────
   A lista do que está abaixo do mínimo, do jeito que se compra: marca o que
   entra, ajusta a quantidade, vê o total antes de decidir. */

.linha-reposicao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
  transition: opacity var(--transicao);
}
.linha-reposicao:last-of-type { border-bottom: none; }

/* Desmarcado continua legível — some do total, não da lista: quem tirou um
   item precisa poder voltar atrás sem procurar onde ele foi parar. */
.linha-reposicao[data-fora] { opacity: .45; }

/* A linha acrescentada à mão. Não tem a caixa de seleção das outras — ela está
   no pedido porque alguém a pôs ali, e sai pelo × do lado, não desmarcando. O
   recuo com a barra à esquerda separa o que veio da conta do que veio da
   decisão de quem compra. */
.linha-reposicao[data-avulso] {
  cursor: default;
  padding-left: 12px;
  border-left: 2px solid var(--verde);
}
.linha-reposicao[data-avulso] .titulo select {
  height: 32px;
  max-width: 320px;
  padding: 0 8px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao-2);
  font-size: var(--t-md);
  color: var(--texto);
}

.avulsos-reposicao:not(:empty) { margin-top: 4px; }

/* O botão de acrescentar fica depois da lista e antes do total: é o último
   passo de montar o pedido, e some do caminho de quem só quer repor o mínimo. */
.acao-acrescentar {
  display: flex;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--linha);
  margin-top: 4px;
}

.linha-reposicao > input[type='checkbox'] {
  flex: none;
  width: 17px; height: 17px;
  accent-color: var(--verde);
  cursor: pointer;
}

.linha-reposicao .corpo { flex: 1; min-width: 0; }
.linha-reposicao .titulo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--texto);
}
.linha-reposicao .desc {
  font-size: var(--t-sm);
  color: var(--texto-2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha-reposicao .lado {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
}

.campo-qtd { display: flex; align-items: center; gap: 6px; }

.qtd-reposicao {
  width: 84px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao-2);
  font-size: var(--t-md);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.qtd-reposicao:focus {
  outline: none;
  border-color: var(--verde);
  background: var(--cartao);
  box-shadow: var(--anel-verde);
}
.campo-qtd .un { font-size: var(--t-sm); color: var(--texto-3); width: 26px; }

.linha-reposicao .estimado {
  width: 92px;
  text-align: right;
  font-size: var(--t-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.rodape-reposicao:not(:empty) {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--linha-forte);
}

.total-reposicao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.total-reposicao .rot { font-size: var(--t-sm); color: var(--texto-2); }
.total-reposicao .val {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

/* O atalho no fim da nova requisição: o aviso ganha o botão dentro dele. */
.aviso-caixa .btn { margin-top: 10px; }

@media (max-width: 720px) {
  .linha-reposicao { flex-wrap: wrap; }
  .linha-reposicao .lado { width: 100%; justify-content: space-between; padding-left: 29px; }
  .linha-reposicao .desc { white-space: normal; }
}

.itens-pedido { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.item-pedido {
  display: grid;
  grid-template-columns: 1fr 110px 130px 34px;
  gap: 8px;
  align-items: center;
}
.item-pedido select,
.item-pedido input {
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: var(--t-md);
  background: var(--cartao);
}
@media (max-width: 640px) {
  .item-pedido { grid-template-columns: 1fr 1fr; }
}

/* ── Ficha (modal de detalhe) ─────────────────────────────────────────────── */

.ficha-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cinza-suave);
}
.ficha-topo h3 { margin: 0; font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.ficha-topo .sub { font-size: var(--t-sm); color: var(--texto-3); margin-top: 2px; }

/*
 * O rótulo do bloco de guarda do patrimônio.
 *
 * Maiúsculas espaçadas e pequenas, como o rótulo de um campo de formulário —
 * o bloco é uma ficha dentro da ficha, e o que está embaixo (o nome de quem
 * está com o bem) é que precisa do peso.
 */
.guarda-rotulo {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
}

.linhas-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .linhas-info { grid-template-columns: 1fr; } }

.linha-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cinza-suave);
  font-size: var(--t-sm);
}
.linha-info .rotulo { color: var(--texto-2); }
.linha-info .valor { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

.lista-simples { margin-bottom: 14px; }

.rodape-ficha {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--cinza-suave);
  font-size: var(--t-sm);
  color: var(--texto-3);
}

.nota-config { font-size: var(--t-sm); color: var(--texto-3); line-height: 1.55; margin: 0 0 12px; }

/* ── Grade de indicadores dentro de modal ─────────────────────────────────── */

.modal .grade-indicadores { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 0; }
.modal .indicador { padding: 10px 12px; }
.modal .indicador .rotulo { margin-bottom: 3px; font-size: var(--t-xs); }

/* Linha zero do gráfico: separa saldo positivo de negativo. */
.grafico .grade[data-zero] { stroke: var(--linha-forte); stroke-width: 1.4; }

/* ── Celular ──────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Valor em reais é uma cadeia longa: no cartão estreito ele precisa
     encolher, senão "R$ 286.400,00" vira "R$ 286.400,0". */
  .indicador .valor { font-size: var(--t-xl); letter-spacing: 0; }
  .indicador .rotulo { font-size: var(--t-xs); }
  .indicador .nota { font-size: var(--t-xs); }

  .grade-pedidos, .grade-obras { grid-template-columns: 1fr; }
  .cartao-obra .numeros { gap: 12px; }
  .numero-obra .valor { font-size: var(--t-base); }
  .linha-registro { padding: 10px 14px; }
  .linhas-info { grid-template-columns: 1fr; }
}

/* ===========================================================================
   ERP · Planejamento — cronograma, medição e viabilidade
   =========================================================================== */

/* Reserva vencida: material que voltou a ficar disponível sem ninguém avisar. */

.nota-modal {
  margin: 12px 0 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--texto-3);
}

.valor-fixo {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-md);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--texto-2);
  background: var(--cartao-2);
}

/* ── Estoque: o que já está prometido ─────────────────────────────────────── */

.linha-reserva {
  margin-top: 3px;
  font-size: var(--t-xs);
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Gantt ────────────────────────────────────────────────────────────────── */

.gantt-bloco { --gantt-rotulo: 230px; --gantt-pad: 16px; --gantt-vao: 12px; }

.gantt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 10px;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
}

.gantt-linha {
  display: grid;
  grid-template-columns: var(--gantt-rotulo) 1fr;
  align-items: center;
  gap: var(--gantt-vao);
}

.gantt-rotulo { display: flex; align-items: baseline; gap: 7px; min-width: 0; font-size: var(--t-sm); }
.gantt-rotulo .codigo {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
.gantt-rotulo .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }

.gantt-trilha {
  position: relative;
  height: 22px;
  border-radius: var(--r-sm);
  background: repeating-linear-gradient(90deg, var(--cinza-suave) 0 1px, transparent 1px 56px);
}

.gantt-barra {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: var(--r-sm);
  background: var(--cinza-suave);
  border: 1px solid var(--linha-forte);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.gantt-barra .preenchida {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--verde-claro);
  opacity: .55;
}
.gantt-barra .rotulo-barra {
  position: relative;
  padding: 0 7px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gantt-barra[data-tom='concluida'] { border-color: var(--verde); }
.gantt-barra[data-tom='concluida'] .preenchida { background: var(--verde); opacity: .35; }
.gantt-barra[data-tom='andando'] { border-color: var(--navy-4); }
.gantt-barra[data-tom='andando'] .preenchida { background: var(--navy-4); opacity: .3; }
.gantt-barra[data-tom='atrasada'] { border-color: var(--tijolo); background: var(--tijolo-suave); }
.gantt-barra[data-tom='atrasada'] .preenchida { background: var(--tijolo); opacity: .28; }

/* A linha de hoje é o que transforma o desenho em julgamento de prazo. Ela
   cobre exatamente a coluna das trilhas, para cair no dia certo. */
.gantt-hoje {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--gantt-pad) + var(--gantt-rotulo) + var(--gantt-vao));
  right: var(--gantt-pad);
  pointer-events: none;
}
.gantt-hoje i { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--tijolo); }

.gantt-eixo {
  display: flex;
  justify-content: space-between;
  padding: 6px var(--gantt-pad) 0;
  margin-left: calc(var(--gantt-rotulo) + var(--gantt-vao));
  font-size: var(--t-xs);
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

/* ── Tabela de etapas ─────────────────────────────────────────────────────── */

.tabela-etapas {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
}
.tabela-etapas table.tabela { min-width: 720px; }
.tabela-etapas td.num, .tabela-etapas th.num,
.tabela-viabilidade td.num, .tabela-viabilidade th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabela-etapas td.forte, .tabela-viabilidade td.forte { font-weight: 600; }
.tabela-etapas td.sutil, .tabela-viabilidade td.sutil { color: var(--texto-3); }

.etapa-nome { display: flex; align-items: baseline; gap: 7px; font-weight: 500; }
.etapa-nome .codigo { font-size: var(--t-xs); font-weight: 600; color: var(--texto-3); }
.etapa-status { font-size: var(--t-xs); color: var(--texto-3); margin-top: 2px; }
.etapa-prazo { font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etapa-prazo[data-tom='tijolo'] { color: var(--tijolo); font-weight: 500; }

.marca-estouro {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ambar);
}
tr[data-alerta='estourado'] .marca-estouro { color: var(--tijolo); }
tr[data-alerta='atencao'] td:first-child { box-shadow: inset 2px 0 0 var(--ambar); }
tr[data-alerta='estourado'] td:first-child { box-shadow: inset 2px 0 0 var(--tijolo); }

/* ── Viabilidade ──────────────────────────────────────────────────────────── */

.grade-demandas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}

.cartao-demanda {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 17px 13px;
  text-align: left;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
.cartao-demanda:hover { box-shadow: var(--sombra-md); border-color: var(--linha-forte); }
.cartao-demanda:focus-visible { outline: 2px solid var(--navy-4); outline-offset: 2px; }
.cartao-demanda[data-status='convertida'], .cartao-demanda[data-status='perdida'] { background: var(--cartao-2); }
.cartao-demanda[data-status='expirada'] { border-color: rgba(169, 80, 60, .35); }

.cartao-demanda .topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cartao-demanda .nome { font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; }
.cartao-demanda .sub { font-size: var(--t-sm); color: var(--texto-3); margin-top: 2px; }

.cartao-demanda .linha-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: var(--t-xs);
  color: var(--texto-2);
}
.cartao-demanda .linha-meta span { white-space: nowrap; }

/* O veredito é a primeira coisa que o vendedor lê. */
.veredito {
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--linha);
  background: var(--cartao-2);
}
.veredito .frase { font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; }
.veredito .detalhe { margin: 4px 0 10px; font-size: var(--t-sm); color: var(--texto-2); }
.veredito[data-tom='verde'] { background: var(--verde-suave); border-color: rgba(122, 154, 94, .35); }
.veredito[data-tom='verde'] .frase { color: var(--verde-escuro); }
.veredito[data-tom='ambar'] { background: var(--ambar-suave); border-color: rgba(176, 126, 34, .32); }
.veredito[data-tom='ambar'] .frase { color: var(--ambar); }
.veredito[data-tom='tijolo'] { background: var(--tijolo-suave); border-color: rgba(169, 80, 60, .32); }
.veredito[data-tom='tijolo'] .frase { color: var(--tijolo); }

.tabela-viabilidade {
  margin-top: 14px;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
}
.tabela-viabilidade table.tabela { min-width: 700px; }
.tabela-viabilidade .material-nome { font-weight: 500; }
.tabela-viabilidade .material-etapa { font-size: var(--t-xs); color: var(--texto-3); margin-top: 2px; }

.tabela-viabilidade tr[data-situacao='falta'] td:first-child { box-shadow: inset 2px 0 0 var(--tijolo); }
.tabela-viabilidade tr[data-situacao='a_caminho'] td:first-child { box-shadow: inset 2px 0 0 var(--ambar); }

.tabela-viabilidade .falta { font-weight: 600; color: var(--tijolo); }
.tabela-viabilidade .a-caminho { font-size: var(--t-xs); color: var(--ambar); }
.tabela-viabilidade .ok { font-size: var(--t-xs); color: var(--verde-escuro); }

@media (max-width: 720px) {
  .grade-demandas { grid-template-columns: 1fr; }
  .gantt-bloco { --gantt-rotulo: 104px; --gantt-pad: 12px; --gantt-vao: 8px; }
  .gantt-rotulo .nome { font-size: var(--t-xs); }
  /* Na trilha estreita do celular o número não cabe dentro da barra e sai
     cortado. O preenchimento já mostra o avanço, e a tabela logo abaixo tem o
     valor exato — melhor tirar do que mostrar "10" no lugar de "100%". */
  .gantt-barra .rotulo-barra { display: none; }
}

/* O número da ficha é maior que o do painel — e no celular ele precisa caber:
   "R$ 2.850.000,00" numa coluna de 150px não pode ser cortado. */
.modal .indicador .valor-ficha { font-size: var(--t-xl); }

@media (max-width: 720px) {
  .modal .grade-indicadores { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .modal .indicador .valor-ficha { font-size: var(--t-base); letter-spacing: -.01em; }
}

/* ── Conflito de reserva na saída de material ─────────────────────────────── */

/* No contexto do modal, a linha do que está livre vem antes do aviso duro:
   quem lê "0,17 sc livre" corrige o número sem precisar bater no bloqueio. */
.contexto-modal .linha-reservado { color: var(--ambar); }

.alerta-reserva {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--ambar-suave);
  border: 1px solid rgba(176, 126, 34, .32);
}
.alerta-reserva .titulo { font-size: var(--t-md); font-weight: 600; color: var(--ambar); }
.alerta-reserva .desc { margin-top: 4px; font-size: var(--t-sm); line-height: 1.55; color: var(--texto-2); }
.alerta-reserva ul {
  margin: 8px 0 0;
  padding-left: 17px;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--texto);
}

/* O botão muda de cor junto com o verbo: "Registrar" verde vira "Tirar mesmo
   assim" âmbar. A ação continua disponível — o que muda é o peso dela. */
.btn.btn-alerta { background: var(--ambar); color: #fff; border-color: var(--ambar); }
.btn.btn-alerta:hover { filter: brightness(1.06); }

/* ===========================================================================
   Banco · Open Finance e conciliação
   O extrato é a única tela do ERP em que o número que manda não é nosso.
   Por isso a linha do banco vem primeiro e inteira; o palpite do sistema
   aparece embaixo, recuado, com cara de sugestão — porque é o que ele é.
   =========================================================================== */

/* ── O que explica a diferença ───────────────────────────────────────────── */

.explicacao-diferenca { display: flex; flex-direction: column; }

.linha-explicacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
}
.linha-explicacao:last-child { border-bottom: 0; padding-bottom: 0; }
.linha-explicacao:first-child { padding-top: 0; }

.linha-explicacao .rotulo { display: block; font-size: var(--t-md); font-weight: 500; color: var(--texto); }
.linha-explicacao .nota { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--texto-3); }
.linha-explicacao .valor { font-size: var(--t-base); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-explicacao .valor[data-tom='tijolo'] { color: var(--tijolo); }
.linha-explicacao .valor[data-tom='verde'] { color: var(--verde-escuro); }

/* O resto sem explicação não é mais uma linha da lista: é a que tem botão. */
.linha-explicacao.resto {
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
}

.tudo-certo { display: flex; align-items: center; gap: 12px; }
.tudo-certo .marca {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde-escuro);
}
.tudo-certo strong { display: block; font-size: var(--t-md); }
.tudo-certo span { font-size: var(--t-sm); color: var(--texto-2); }

/* ── Contas conectadas ───────────────────────────────────────────────────── */

/* auto-fill criava 6 trilhas num container de 1600px e segurava as 5 vazias:
   uma conta só virava um cartão de 232px perdido num mar de branco. auto-fit
   colapsa as vazias; o teto de 360px impede que o cartão sozinho estique a
   tela inteira, e justify-content alinha a fileira à esquerda. */
.grade-contas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 360px));
  justify-content: start;
  gap: 12px;
}

.cartao-conta {
  padding: 13px 15px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
}
/* Conta fora do consolidado fica visivelmente de lado: o saldo dela não
   entra na conta que a tela está fazendo. */
.cartao-conta[data-considerar='0'] { background: var(--cartao-2); opacity: .68; }

.conta-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.conta-banco { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--navy-texto); }
.conta-nome { display: block; margin-top: 1px; font-size: var(--t-sm); color: var(--texto-3); }
.conta-tipo {
  flex: none;
  font-size: var(--t-xs);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--cinza-suave);
  color: var(--texto-2);
}

.conta-saldo {
  margin: 10px 0 8px;
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.conta-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--t-xs);
  color: var(--texto-3);
}
.conta-rodape .nota { font-style: italic; }

.chave-considerar { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.chave-considerar input { accent-color: var(--verde-escuro); }

.cartao-conta.alerta-conexao {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  background: var(--ambar-suave);
  border-color: rgba(176, 126, 34, .32);
}
.cartao-conta.alerta-conexao strong { font-size: var(--t-md); color: var(--ambar); }
.cartao-conta.alerta-conexao span { font-size: var(--t-sm); color: var(--texto-2); }

.acoes-conexoes { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.linha-conexao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--linha);
  font-size: var(--t-sm);
}
.linha-conexao .nome { font-weight: 500; color: var(--texto); }
.linha-conexao .quando { color: var(--texto-3); }
.linha-conexao .btn { margin-left: auto; }

/* ── Equipe e acesso ─────────────────────────────────────────────────────── */

/* O recado que responde "cadastrei a pessoa e ela não entra". Fica acima da
   lista porque é a razão de alguém ter aberto esta tela. */
.aviso-inline {
  background: color-mix(in srgb, var(--amarelo, #B07E22) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amarelo, #B07E22) 35%, transparent);
  border-radius: var(--r-md);
  padding: 10px 13px;
  margin-bottom: 12px;
  font-size: var(--t-sm);
  line-height: 1.45;
}

.rodape-lista { margin-top: 14px; display: flex; justify-content: flex-end; }

.titulo-secao {
  margin: 18px 0 2px;
  font-size: var(--t-sm);
  font-weight: 600;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}

/* ── Permissões por pessoa ───────────────────────────────────────────────── */

/* Quarenta e seis permissões numa coluna só não deixam ninguém decidir nada.
   Agrupadas por área, a pergunta vira "o que essa pessoa mexe no estoque?" —
   e as respostas ficam lado a lado, do ver até o editar. */
.grade-permissoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.area-permissao {
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 11px 13px;
  background: var(--cartao-2);
}

.area-permissao h4 {
  margin: 0 0 8px;
  font-size: var(--t-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.opcoes-permissao { display: flex; flex-direction: column; gap: 5px; }

.opcao-permissao {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--t-sm);
  line-height: 1.35;
  cursor: pointer;
  padding: 3px 5px;
  margin: 0 -5px;
  border-radius: var(--r-sm);
}

.opcao-permissao:hover { background: var(--cartao); }
.opcao-permissao input { margin-top: 2px; flex: 0 0 auto; }

/* O que foge do perfil fica marcado. Sem isso não há como saber, três meses
   depois, se aquele acesso foi decisão de alguém ou padrão do cargo. */
.opcao-permissao[data-mudado] {
  background: color-mix(in srgb, var(--verde) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--verde);
}

.opcao-permissao[data-mudado]:hover {
  background: color-mix(in srgb, var(--verde) 18%, transparent);
}

/* ── Convite e configuração ──────────────────────────────────────────────── */

.convite-banco { display: flex; gap: 16px; align-items: flex-start; }
.convite-icone {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--verde-suave);
  color: var(--verde-escuro);
}
.convite-banco strong { display: block; font-size: var(--t-base); margin-bottom: 5px; }
.convite-banco p { margin: 0 0 8px; font-size: var(--t-sm); line-height: 1.6; color: var(--texto-2); max-width: 62ch; }
.convite-banco p.nota { font-size: var(--t-sm); color: var(--texto-3); }

.aviso-config strong { display: block; font-size: var(--t-base); margin-bottom: 6px; }
.aviso-config p { margin: 0 0 8px; font-size: var(--t-sm); line-height: 1.6; color: var(--texto-2); max-width: 68ch; }
.aviso-config p.nota { font-size: var(--t-sm); color: var(--texto-3); }
.bloco-env {
  margin: 0 0 10px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #E8EDF6;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  line-height: 1.7;
  overflow-x: auto;
}

/* ── Extrato ─────────────────────────────────────────────────────────────── */

.lista-extrato { display: flex; flex-direction: column; gap: 9px; }

.extrato-linha {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 12px 15px;
  box-shadow: var(--sombra-sm);
}
.extrato-linha[data-estado='conciliada'] { background: var(--cartao-2); }
.extrato-linha[data-estado='ignorada'] { opacity: .7; }

.extrato-topo { display: flex; align-items: flex-start; gap: 14px; }

.extrato-quando { flex: none; width: 96px; }
.extrato-quando .dia {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.extrato-quando .onde { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--texto-3); }

.extrato-oque { flex: 1; min-width: 0; }
.extrato-oque .descricao {
  display: block;
  font-size: var(--t-md);
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.extrato-oque .detalhe {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--texto-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.extrato-valor { flex: none; text-align: right; }
.extrato-valor .valor {
  display: block;
  font-size: var(--t-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.extrato-valor[data-sentido='credito'] .valor { color: var(--verde-escuro); }
.extrato-valor[data-sentido='debito'] .valor { color: var(--tijolo); }
.extrato-valor .rotulo { display: block; margin-top: 1px; font-size: var(--t-xs); color: var(--texto-3); }

.extrato-baixo {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed var(--linha);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.extrato-baixo > .btn { margin-left: auto; }

.nota-extrato { font-size: var(--t-sm); color: var(--texto-2); }
.nota-extrato.nota-sozinha { color: var(--tijolo); }

.extrato-acoes { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; }

/* O palpite: encostado à esquerda, com uma barra de cor que diz o quanto o
   sistema confia. Nunca ocupa o lugar do dado do banco. */
/* O fundo tingido já diz a confiança; a barra na lateral repetia o recado. */
.palpite {
  flex: 1;
  min-width: 240px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--cartao-2);
  border: 1px solid var(--linha);
}
.palpite[data-confianca='alta'] { border-color: rgba(122, 154, 94, .45); background: var(--verde-suave); }
.palpite[data-confianca='media'] { border-color: rgba(176, 126, 34, .4); background: var(--ambar-suave); }

.palpite-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.palpite-nome {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palpite-valor { flex: none; font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--texto-2); }
.palpite-motivos { margin-top: 3px; font-size: var(--t-xs); color: var(--texto-2); }

.par-fechado { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--texto-2); min-width: 0; }
.par-fechado .marca {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde-escuro);
}
.par-fechado .obra { font-size: var(--t-xs); color: var(--texto-3); }
.par-fechado .selo-auto {
  font-size: var(--t-xs);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--cinza-suave);
  color: var(--texto-3);
}

/* ── Escolher outro lançamento ───────────────────────────────────────────── */

.lista-sugestoes { display: flex; flex-direction: column; gap: 8px; }

.sugestao {
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
  cursor: pointer;
  transition: var(--transicao);
  font: inherit;
}
.sugestao:hover { border-color: var(--verde); background: var(--verde-suave); }

.sugestao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sugestao-nome { font-size: var(--t-md); font-weight: 500; color: var(--texto); }
.sugestao-valor { flex: none; font-size: var(--t-md); font-variant-numeric: tabular-nums; }

.sugestao-baixo { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; font-size: var(--t-xs); color: var(--texto-3); }
.sugestao-baixo .ja-baixado { color: var(--ambar); }
.sugestao-baixo .pontos { padding: 1px 7px; border-radius: var(--r-pill); background: var(--cinza-suave); }
.sugestao-baixo .pontos[data-tom='verde'] { background: var(--verde-suave); color: var(--verde-escuro); }
.sugestao-baixo .pontos[data-tom='ambar'] { background: var(--ambar-suave); color: var(--ambar); }

.sugestao-motivos { margin-top: 5px; font-size: var(--t-xs); color: var(--texto-2); }

/* ── Celular ─────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .extrato-topo { flex-wrap: wrap; gap: 8px; }
  .extrato-quando { width: auto; order: 1; }
  .extrato-valor { order: 2; margin-left: auto; text-align: right; }
  .extrato-oque { order: 3; flex-basis: 100%; }
  .extrato-acoes { margin-left: 0; width: 100%; }
  .extrato-acoes .btn { flex: 1; }
  .extrato-baixo > .btn { margin-left: 0; }
  .palpite { min-width: 0; flex-basis: 100%; }
  .linha-explicacao { flex-direction: column; align-items: flex-start; gap: 8px; }
  .linha-explicacao.resto > div:last-child { width: 100%; justify-content: space-between; }
  .convite-banco { flex-direction: column; }
}

/* Extrato de demonstração se anuncia: âmbar, minúsculo, sempre visível. */
.conta-tipo.selo-demo { background: var(--ambar-suave); color: var(--ambar); font-weight: 500; }

/* Conta alimentada por arquivo. Discreta de propósito — é banco de verdade,
   só não é saldo de agora —, mas nunca igual à conta que atualiza sozinha. */
.conta-tipo.selo-arquivo { background: var(--cinza-suave); color: var(--navy-texto); font-weight: 500; }
.conta-saldo-quando {
  display: block;
  margin: -6px 0 8px;
  font-size: var(--t-xs);
  color: var(--texto-3);
}

/* A saída sem contrato, dentro do aviso de configuração do Open Finance. */
.saida-ofx {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--linha);
}
.saida-ofx strong { display: block; font-size: var(--t-md); margin-bottom: 5px; }
.saida-ofx p { margin: 0 0 10px; font-size: var(--t-sm); line-height: 1.6; color: var(--texto-2); max-width: 68ch; }

/* Resultado da importação: uma conta por bloco, porque um arquivo pode trazer
   várias e somá-las num número só esconderia qual delas recebeu o quê. */
.bloco-importacao + .bloco-importacao { margin-top: 14px; }
.bloco-importacao > strong { display: block; font-size: var(--t-md); margin-bottom: 4px; }
.bloco-importacao > p.nota { margin: 0 0 8px; font-size: var(--t-sm); line-height: 1.6; color: var(--texto-3); }

/* Escolha do que cada depósito guarda: caixas em grade, porque são oito
   categorias e uma lista vertical empurraria o resto do modal para baixo. */
.grade-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.opcao-categoria { display: flex; align-items: center; gap: 6px; font-size: var(--t-md); cursor: pointer; }
.opcao-categoria input { accent-color: var(--navy, #0B1B3A); }
.lista-locais { margin-top: 4px; }

/* ── Contas a pagar / a receber ──────────────────────────────────────────── */

/* Nove colunas não cabem em tela de notebook sem encolher a razão social até
   ela virar reticências. A tabela rola na horizontal dentro do cartão, e a
   primeira coluna fica presa: rolar para ver o vencimento sem perder de vista
   de quem é a conta é a leitura que essa tela existe para permitir. */
table.tabela.tabela-contas { min-width: 1180px; }
.tabela-contas th:first-child,
.tabela-contas td:first-child {
  position: sticky;
  left: 0;
  background: var(--cartao);
  z-index: 1;
}
.tabela-contas td:nth-child(4),
.tabela-contas th:nth-child(4) { text-align: right; white-space: nowrap; }
.tabela-contas td:nth-child(2) { white-space: nowrap; }
.tabela-contas td:last-child { text-align: right; }
.tabela-contas .linha-total td { font-weight: 600; }

/* Período específico: só aparece quando alguém escolhe datas na mão. */
/* [hidden] perde para display:flex — a regra abaixo devolve o padrão. */
.periodo-personalizado[hidden] { display: none; }
.periodo-personalizado {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 14px;
  font-size: var(--t-md);
  color: var(--texto-suave, #5b6472);
}

/* Plano gerencial: renomear é digitar na própria linha. */
.linha-categoria-gerencial {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.linha-categoria-gerencial input { flex: 1; min-width: 0; }
.linha-categoria-gerencial .sub { white-space: nowrap; font-size: var(--t-sm); }
.linha-categoria-gerencial[data-inativo] input { opacity: 0.55; text-decoration: line-through; }
.linha-categoria-nova { display: flex; gap: 10px; margin: 10px 0 18px; }
.linha-categoria-nova input { flex: 1; min-width: 0; }
.secao-categorias { margin-bottom: 8px; }

/* ── Contatos: lista e ficha do fornecedor ────────────────────────────────── */

table.tabela.tabela-contatos { min-width: 980px; }
.tabela-contatos th:first-child,
.tabela-contatos td:first-child {
  position: sticky;
  left: 0;
  background: var(--cartao);
  z-index: 1;
}
.tabela-contatos .nome-forte { font-weight: 500; }
.tabela-contatos .desc { font-size: var(--t-xs); color: var(--texto-3); margin-top: 1px; }

/* A linha inteira abre a ficha: o alvo de clique é a linha, não um botão de
   3 mm no fim dela. */
.linha-clicavel { cursor: pointer; transition: background var(--transicao); }
.linha-clicavel:hover { background: var(--cartao-2); }

.estrelas { display: inline-flex; align-items: center; white-space: nowrap; }
.estrelas .estrela {
  color: var(--cinza-suave);
  font-size: var(--t-base);
  line-height: 1;
  background: none;
  border: 0;
  padding: 0 1px;
}
.estrelas .estrela[data-cheia] { color: var(--ambar); }
.estrelas-editaveis .estrela { cursor: pointer; font-size: var(--t-xl); padding: 0 2px; }
.estrelas-editaveis .estrela:hover { color: var(--ambar); }

/* Cada contato é um cartão: sem a moldura, três contatos viram doze campos
   soltos e ninguém sabe qual telefone é de quem. */
.lista-contatos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ficha-contato {
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 13px 14px 4px;
  background: var(--cartao-2);
}
.ficha-contato .campo { margin-bottom: 11px; }

.caixa-marcar { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); }
.caixa-marcar input { width: auto; }

/* Colunas que não devem quebrar: telefone partido em duas linhas vira dois
   números na leitura rápida, e cidade-UF separadas parecem outra cidade. */
table.tabela.tabela-contatos { table-layout: fixed; }
.tabela-contatos th:nth-child(1), .tabela-contatos td:nth-child(1) { width: 24%; }
.tabela-contatos th:nth-child(2), .tabela-contatos td:nth-child(2) { width: 13%; }
.tabela-contatos th:nth-child(3), .tabela-contatos td:nth-child(3) { width: 15%; }
.tabela-contatos th:nth-child(4), .tabela-contatos td:nth-child(4) { width: 12%; white-space: nowrap; }
.tabela-contatos th:nth-child(5), .tabela-contatos td:nth-child(5) { width: 19%; }
.tabela-contatos th:nth-child(6), .tabela-contatos td:nth-child(6) { width: 11%; white-space: nowrap; }
.tabela-contatos th:nth-child(7), .tabela-contatos td:nth-child(7) { width: 6%; white-space: nowrap; }
.tabela-contatos td:nth-child(5) { overflow: hidden; text-overflow: ellipsis; }

/* ── Clientes ──────────────────────────────────────────────────────────────
   Mesma anatomia da tabela de fornecedores, com duas colunas a mais que só o
   cliente tem: quantas obras e quanto ele deve. Larguras fixas porque e-mail
   comprido não pode empurrar o valor a receber para fora da tela. */
table.tabela.tabela-clientes { min-width: 980px; table-layout: fixed; }
.tabela-clientes .nome-forte { font-weight: 500; }
.tabela-clientes .desc { font-size: var(--t-xs); color: var(--texto-3); margin-top: 1px; }
.tabela-clientes th:nth-child(1), .tabela-clientes td:nth-child(1) { width: 22%; }
.tabela-clientes th:nth-child(2), .tabela-clientes td:nth-child(2) { width: 11%; }
.tabela-clientes th:nth-child(3), .tabela-clientes td:nth-child(3) { width: 20%; }
.tabela-clientes th:nth-child(4), .tabela-clientes td:nth-child(4) { width: 11%; white-space: nowrap; }
.tabela-clientes th:nth-child(5), .tabela-clientes td:nth-child(5) { width: 11%; white-space: nowrap; }
.tabela-clientes th:nth-child(6), .tabela-clientes td:nth-child(6) { width: 11%; white-space: nowrap; }
.tabela-clientes th:nth-child(7), .tabela-clientes td:nth-child(7) { width: 14%; white-space: nowrap; }

/* Só o e-mail corta com reticências: nome de cliente e razão social quebram em
   duas linhas, porque "Comércio de Materiais Central Lt…" não identifica
   ninguém. */
.tabela-clientes td:nth-child(3) > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vencido é a única informação da lista que pede uma ligação hoje. */
.tabela-clientes .desc.alerta, .tabela-obras-cliente .desc.alerta { color: var(--tijolo); }

/* As obras dentro da ficha do cliente: contratado, gasto e recebido lado a
   lado. Cabe dentro do modal, então é mais estreita que a lista. */
table.tabela.tabela-obras-cliente { min-width: 0; }
.tabela-obras-cliente .nome-forte { font-weight: 500; }
.tabela-obras-cliente .desc { font-size: var(--t-xs); color: var(--texto-3); margin-top: 1px; }
.tabela-obras-cliente td.num, .tabela-obras-cliente th.num { text-align: right; white-space: nowrap; }

/* O nome da obra abre a obra; o resto da linha não, porque a linha tem um
   botão de desvincular e clique perdido em cima dele mudaria de tela. */
.tabela-obras-cliente .linha-abrir { cursor: pointer; }
.tabela-obras-cliente .linha-abrir:hover { text-decoration: underline; }
.tabela-obras-cliente th.acao, .tabela-obras-cliente td.acao { width: 1%; white-space: nowrap; text-align: right; }

/* Amarrar uma obra que já existe: seletor e botão na mesma linha. */
.linha-vincular { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.linha-vincular select { flex: 1; min-width: 0; }

/* O cartão que está filtrando a lista fica visivelmente ligado: sem isso, um
   número clicado e uma lista menor parecem duas coisas sem relação. */
.indicador[data-ativo] {
  border-color: var(--navy-texto);
  box-shadow: 0 0 0 1px var(--navy-3) inset, var(--sombra-sm);
  background: var(--cartao-2);
}
button.indicador { cursor: pointer; }

/* A nota fica escondida nos indicadores compactos para o número respirar. No
   cartão que está filtrando ela volta: é ali que precisa caber o caminho de
   volta ("clique para ver tudo"). */
.grade-indicadores[data-compacto] .indicador[data-ativo] .nota { display: block; margin-top: 4px; }

/* ── Para onde o material está indo ────────────────────────────────────────
   A ficha do galpão de destino, dentro da transferência. Fundo diferente do
   formulário porque não é campo para preencher: é o que o sistema sabe sobre
   o lugar escolhido. */
.ficha-deposito {
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 11px 13px;
  margin-bottom: 12px;
}
.ficha-deposito .topo-deposito {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
/* Uma coluna só: aqui são frases (endereço, observação), não números pareados
   — em duas colunas elas se espremem e o rótulo cola no valor do lado. */
.ficha-deposito .linhas-info { grid-template-columns: 1fr; gap: 0; }
.ficha-deposito .linha-info {
  padding: 5px 0;
  font-size: var(--t-sm);
  gap: 16px;
  align-items: start;
}
.ficha-deposito .linha-info:last-child { border-bottom: 0; }
.ficha-deposito .linha-info .rotulo { flex: none; min-width: 82px; }
.ficha-deposito .linha-info .valor { font-weight: 400; text-align: left; }

/* O aviso de material fora de lugar. Âmbar, não vermelho: guardar fora da
   categoria é decisão de quem está com o material na mão, não erro. */
.ficha-deposito .aviso-lugar {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--ambar-suave);
  color: var(--texto);
  font-size: var(--t-sm);
  line-height: 1.45;
}

/* ── Ficha de uma movimentação ────────────────────────────────────────────── */

/* A linha do extrato virou botão. O reset é aqui porque `.linha-registro` foi
   desenhada para uma <div> e o navegador entrega <button> com fundo, borda e
   fonte próprios — sem isso a lista fica com um botão cinza por linha. */
button.linha-registro {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--cinza-suave);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.linha-registro:last-child { border-bottom: none; }

/* De onde para onde, lado a lado. Duas colunas com a seta no meio: o caminho
   do material é a informação, e empilhar os dois cartões faria parecer lista
   de lugares em vez de trajeto. */
.caminho-movimento {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
}
.caminho-movimento .ficha-deposito { flex: 1; min-width: 0; margin-bottom: 0; }
.caminho-movimento .seta-caminho {
  align-self: center;
  color: var(--cinza-status);
  font-size: var(--t-xl);
  flex: none;
}
.ficha-deposito .rotulo-lugar {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cinza-status);
  margin-bottom: 5px;
}

/* O mesmo aviso âmbar da transferência, agora fora da ficha do galpão: na
   movimentação ele fala do movimento inteiro, não de um dos lados. */
.aviso-lugar {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--ambar-suave);
  color: var(--texto);
  font-size: var(--t-sm);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .caminho-movimento { flex-direction: column; }
  .caminho-movimento .seta-caminho { align-self: flex-start; transform: rotate(90deg); }
}

/* ── Comparativo entre duas obras ──────────────────────────────────────────
   Duas colunas simétricas com um botão de inverter no meio: a simetria é a
   mensagem da tela, e é ela que faz a coluna de diferença se explicar sozinha.
   A é navy, B é verde — a mesma dupla em todos os gráficos daqui para baixo. */

.escolha-comparativo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
}
.escolha-comparativo .lado { min-width: 0; }
.escolha-comparativo .lado select { width: 100%; }
.escolha-comparativo .rotulo-lado {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
  margin-bottom: 5px;
}
/* O botão de inverter é quadrado e sem rótulo: ao lado de dois seletores
   largos, uma palavra ali disputaria a leitura com os nomes das obras. */
.escolha-comparativo .btn-inverter { padding: 8px 10px; }

.par-obras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.cartao-comparado { position: relative; }
.cartao-comparado[data-alerta='atencao'] { border-color: rgba(176, 126, 34, .35); }
.cartao-comparado[data-alerta='estourado'] { border-color: rgba(169, 80, 60, .4); }
/* A faixa de cor no topo é o que amarra o cartão à sua coluna nas tabelas. */
.cartao-comparado::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--navy);
}
.cartao-comparado[data-lado='b']::before { background: var(--verde); }

.cartao-comparado .topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cartao-comparado .nome { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; margin-top: 4px; }
.cartao-comparado .sub { font-size: var(--t-sm); color: var(--texto-3); margin-top: 2px; }
.marcador-lado {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--navy);
}
.cartao-comparado[data-lado='b'] .marcador-lado { color: var(--verde-escuro); }

.numeros-comparado { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.acoes-comparado { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cinza-suave); }

/* A frase pronta para a reunião. Fundo quieto: é leitura, não alerta. */
.linha-leitura {
  font-size: var(--t-md);
  line-height: 1.5;
  padding: 9px 0;
  border-bottom: 1px solid var(--cinza-suave);
}
.linha-leitura:last-child { border-bottom: 0; padding-bottom: 0; }
.linha-leitura .material { font-weight: 600; margin-right: 6px; }

table.tabela-comparativo th.num, table.tabela-comparativo td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.tabela-comparativo td .nome-forte { font-weight: 500; }
table.tabela-comparativo .sutil { color: var(--texto-3); }
table.tabela-materiais-par { min-width: 940px; }

.diferenca { font-weight: 600; white-space: nowrap; }
.diferenca[data-tom='verde'] { color: var(--verde-escuro); }
.diferenca[data-tom='tijolo'] { color: var(--tijolo); }
.diferenca .variacao { font-weight: 400; font-size: var(--t-xs); color: var(--texto-3); }

/* Duas barras na mesma escala, empilhadas. Vale mais que a coluna de números:
   a proporção entre as obras é lida antes de qualquer cifra. */
.barra-par { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.barra-par .faixa {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cinza-suave);
  overflow: hidden;
}
.barra-par .preenchida { display: block; height: 100%; border-radius: var(--r-pill); background: var(--navy); }
.barra-par .preenchida[data-lado='b'] { background: var(--verde); }

@media (max-width: 900px) {
  .escolha-comparativo { grid-template-columns: 1fr; }
  .escolha-comparativo .btn-inverter { justify-self: start; }
  .par-obras { grid-template-columns: 1fr; }
}

/* ── Conta dos sócios ───────────────────────────────────────────────────────
   Um cartão por sócio, com os três números que respondem a conversa inteira:
   quanto pôs, quanto recebeu de volta, quanto ainda falta. */

.grade-socios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.cartao-socio { display: flex; flex-direction: column; gap: 12px; }
.cartao-socio .topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cartao-socio .nome { font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; }
.cartao-socio .sub { font-size: var(--t-sm); color: var(--texto-3); margin-top: 2px; }
/* Sócio inativo continua na tela — o histórico dele é dívida ou quitação que
   aconteceu — mas recua para o fundo. */
.cartao-socio[data-inativo='1'] { background: var(--cartao-2); opacity: .75; }

.numeros-socio { display: flex; gap: 18px; flex-wrap: wrap; }
.numeros-socio .numero-obra[data-tom='ambar'] .valor { color: var(--ambar); }

.acoes-socio {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--cinza-suave);
}

/* ── Estudo de viabilidade como bancada de trabalho ────────────────────────
 *
 * A ficha do estudo deixou de ser leitura: dentro dela a pessoa cria etapa,
 * quebra em subetapa e pendura material. Os blocos abaixo separam essas três
 * conversas dentro do mesmo modal, sem transformá-lo numa parede de campos.
 */
.bloco-estudo { margin-top: 18px; }
.bloco-estudo .cabecalho-bloco {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bloco-estudo .cabecalho-bloco h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; }
.bloco-estudo .cabecalho-bloco .nota-modal { margin: 0; flex: 1; min-width: 120px; }

.plano-etapas {
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  background: var(--cartao);
  overflow: hidden;
}
.linha-etapa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--linha);
}
.linha-etapa:last-child { border-bottom: none; }
.linha-etapa .codigo {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  color: var(--texto-3);
  min-width: 34px;
}
.linha-etapa .corpo { flex: 1; min-width: 0; }
.linha-etapa .nome { font-size: var(--t-sm); font-weight: 500; }
.linha-etapa .sub { font-size: var(--t-xs); color: var(--texto-3); margin-top: 2px; }
.linha-etapa .acoes { display: flex; gap: 2px; }
/* A subetapa recua e ganha um fio: é filha, e a tela diz isso sem legenda. */
.linha-etapa[data-filha] { padding-left: 26px; background: var(--cartao-2); }
.linha-etapa[data-filha] .codigo { color: var(--texto-3); font-size: var(--t-xs); }

.form-inline {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-lg);
  background: var(--cartao-2);
}
.form-inline .acoes-inline {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 10px;
}
.form-material .linha-campos { align-items: end; }

.aviso-material { font-size: var(--t-sm); color: var(--texto-2); min-height: 16px; }
.aviso-material[data-tom='verde'] { color: var(--verde-escuro); }
.aviso-material[data-tom='tijolo'] { color: var(--tijolo); font-weight: 500; }

/* A coluna "Falta" é botão: o que ela diz é o filtro que a pessoa quer. */
.celula-filtro { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
.celula-filtro:hover span { text-decoration: underline; }

.campo-com-acao { display: flex; gap: 6px; align-items: center; }
.campo-com-acao select { flex: 1; min-width: 0; }

.grade-etapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px 12px;
  margin-top: 8px;
}
.caixa-etapa {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-sm);
  color: var(--texto-2);
  cursor: pointer;
}
.caixa-etapa input { width: 14px; height: 14px; accent-color: var(--verde-escuro); }

/* Dentro do modal os indicadores mostram dinheiro, não contagem: o número
   grande da tela cheia estoura a linha aqui. */
.modal .grade-indicadores .valor { font-size: var(--t-base); }

/* Subetapa no cronograma da obra: recuo e fio, sem coluna nova. */
.tabela-etapas tr[data-filha] td:first-child { padding-left: 26px; box-shadow: inset 3px 0 0 var(--linha-forte); }
.tabela-etapas tr[data-filha] .etapa-nome { font-weight: 400; }

/* ── Modelos de obra: o layout salvo ───────────────────────────────────────
 *
 * O cartão do tipo repete a linguagem do cartão de estudo — quem sai da
 * Viabilidade e entra aqui não precisa reaprender a ler a tela.
 */
.grade-modelos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.cartao-modelo {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, transform .15s;
}
.cartao-modelo:hover { border-color: var(--navy-texto); transform: translateY(-1px); }
/*
 * Cabeçalho do cartão com nome próprio: `.topo` é a barra fixa do aplicativo
 * e traz altura, fundo e padding que não têm nada a ver com um cartão.
 */
.cartao-modelo .topo-modelo {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}
.cartao-modelo .nome { font-weight: 600; letter-spacing: -.01em; }
/* Duas linhas de descrição, com corte por altura — o clamp sozinho não segura
   o texto dentro de um cartão que a grade estica para alinhar com os vizinhos. */
.cartao-modelo .sub {
  font-size: var(--t-sm);
  color: var(--texto-3);
  margin-top: 3px;
  line-height: 1.35;
  max-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartao-modelo .topo-modelo > div { overflow: hidden; }
.cartao-modelo .linha-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: var(--t-xs);
  color: var(--texto-2);
}

.cabecalho-modelo { margin-bottom: 14px; }
.cabecalho-modelo .regua-metragem { margin-top: 10px; max-width: 320px; }

/* A etapa do modelo abre e fecha: o material fica escondido até ser pedido. */
.linha-etapa .corpo-botao {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.linha-etapa .corpo-botao:hover .nome { color: var(--verde-escuro); }

.materiais-etapa {
  border-bottom: 1px solid var(--linha);
  background: var(--cartao-2);
  padding: 0 12px 8px 34px;
}
.materiais-etapa.vazia { padding: 10px 12px 12px 34px; font-size: var(--t-sm); color: var(--texto-3); }
.materiais-etapa table.tabela { background: transparent; }
.materiais-etapa td.num, .materiais-etapa th.num { text-align: right; }
.materiais-etapa td.forte { font-weight: 600; }
.materiais-etapa td.sutil { color: var(--texto-3); }
.materiais-etapa .material-nome { font-weight: 500; font-size: var(--t-sm); }
.materiais-etapa .material-etapa { font-size: var(--t-xs); color: var(--texto-3); margin-top: 2px; }
.campo-coeficiente input { width: 92px; text-align: right; }

.acoes-modelo { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* ── Composições e orçamento ────────────────────────────────────────────────
 *
 * O número que interessa nessas telas é sempre um custo unitário — quanto
 * custa UM metro quadrado —, porque é ele que vai ser multiplicado pela
 * metragem da obra. Por isso ele é o único elemento tipograficamente grande
 * aqui; o resto da ficha é tabela, e tabela se lê alinhada.
 */

.tabela-receita td.num, .tabela-receita th.num,
.tabela-orcamento td.num, .tabela-orcamento th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabela-receita td.forte, .tabela-orcamento td.forte { font-weight: 600; }

/* Mão de obra ganha um filete: é a metade da composição que some quando
 * alguém monta uma receita só com material, e o filete faz a falta aparecer. */
.tabela-receita tr[data-mao='1'] td:first-child {
  border-left: 2px solid var(--verde);
}

.ficha-composicao h2 { font-size: var(--t-xl); margin: 0; }
.ficha-composicao > .sub { color: var(--texto-3); font-size: var(--t-sm); margin: 4px 0 16px; }

.custo-composicao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.custo-composicao .principal { display: flex; align-items: baseline; gap: 8px; }
.custo-composicao .principal .valor {
  font-family: var(--fonte-titulo);
  font-size: var(--t-3xl);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.custo-composicao .principal .un { font-size: var(--t-sm); color: var(--texto-3); }
.custo-composicao .partes { display: flex; gap: 22px; }
.custo-composicao .parte { display: flex; flex-direction: column; gap: 2px; }
.custo-composicao .parte .rot {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
}
.custo-composicao .parte .val {
  font-size: var(--t-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.custo-composicao .parte .pct { font-size: var(--t-xs); color: var(--texto-3); }

/* ── Montar a receita ─────────────────────────────────────────────────────── */

.linhas-receita { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.linha-receita {
  display: grid;
  grid-template-columns: 1fr 110px 96px 34px;
  gap: 8px;
  align-items: center;
}
.linha-receita .coef-receita { text-align: right; font-variant-numeric: tabular-nums; }
.linha-receita .sub-receita {
  text-align: right;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--texto-2);
}

.total-receita,
.total-orcamento,
.total-linha-orcamento {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
}
.total-receita .rot, .total-orcamento .rot { font-size: var(--t-sm); color: var(--texto-2); }
.total-receita .val, .total-orcamento .val {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.total-linha-orcamento {
  justify-content: flex-end;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* ── O orçamento dentro da obra ───────────────────────────────────────────── */

.grupo-orcamento { margin-bottom: 14px; }
.grupo-orcamento .cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.grupo-orcamento .cabeca .nome { font-size: var(--t-md); font-weight: 600; }
.grupo-orcamento .cabeca .valor {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.acoes-orcamento { display: flex; gap: 8px; margin-top: 12px; }

/* Um "sub" que precisa ser lido, e não apenas estar disponível: item sem preço
 * é orçamento incompleto, e incompleto aqui vira obra orçada barata demais. */
.sub.alerta { color: var(--tijolo); }

/* ── Viver com uma base de milhares de linhas ───────────────────────────────
 *
 * Com a tabela oficial dentro, o sistema passou de sete composições para quase
 * oito mil. Duas peças nascem daí: a paginação, que impede a lista de mentir
 * por omissão, e a busca com resultados, que substitui um seletor que não
 * abriria.
 */

.paginacao {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  justify-content: flex-end;
}
.paginacao .onde {
  margin-right: auto;
  font-size: var(--t-sm);
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

/*
 * A lista de composições dentro do modal — e não a gaveta da busca global.
 *
 * Ela se chamava `.resultados-busca`, o mesmo nome do painel que desce da
 * busca do topo. Nome repetido não avisa: as duas regras convivem, cada uma
 * ganha as propriedades que a outra não declara, e a lista herdou daquela um
 * `position: absolute; top: calc(100% + 8px)` — dez resultados renderizados
 * uma tela inteira abaixo do modal, atrás de um `overflow: hidden`. No DOM,
 * tudo certo; na tela, nada. Nome próprio é o conserto, não um `position:
 * static` por cima.
 */
.lista-composicoes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.resultado-composicao {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.resultado-composicao:hover { border-color: var(--verde); background: var(--verde-suave); }
.resultado-composicao .nome { font-size: var(--t-md); line-height: 1.4; }
.resultado-composicao .meta { font-size: var(--t-sm); color: var(--texto-3); margin-top: 2px; }

.escolhido-composicao {
  padding: 10px 12px;
  border: 1px solid var(--verde);
  border-radius: var(--r-md);
  background: var(--verde-suave);
  margin-top: 8px;
}
.escolhido-composicao .nome { font-size: var(--t-md); font-weight: 500; line-height: 1.4; }
.escolhido-composicao .meta { font-size: var(--t-sm); color: var(--verde-escuro); margin-top: 2px; }

/* ── Consultar preço ───────────────────────────────────────────────────────
 *
 * O total é o que a pessoa veio buscar; a divisão material / mão de obra é o
 * que ela não sabia que precisava. Por isso os dois moram no mesmo cartão, e
 * a divisão fica logo abaixo do número grande em vez de num rodapé.
 */

.consulta-cabeca { margin: 14px 0 10px; }
.consulta-cabeca .nome { font-size: var(--t-base); font-weight: 500; line-height: 1.4; }
.consulta-cabeca .sub { font-size: var(--t-sm); color: var(--texto-3); margin-top: 3px; }

.consulta-total {
  margin: 12px 0 14px;
  padding: 14px 16px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
}
.consulta-total .principal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.consulta-total .principal .rot { font-size: var(--t-sm); color: var(--texto-2); }
.consulta-total .principal .valor {
  font-family: var(--fonte-titulo);
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.consulta-total .partes {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.consulta-total .parte { display: flex; flex-direction: column; gap: 2px; }
.consulta-total .parte .rot {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
}
.consulta-total .parte .val {
  font-size: var(--t-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.consulta-total .parte .pct { font-size: var(--t-xs); color: var(--texto-3); }