/* =============================================================================
   Painel Comercial e Atendimento
   =============================================================================

   Reescrito em 20/09/2026 para replicar o design da Área da Beleza, a pedido
   do Danilo.

   O princípio: **nenhuma cor literal daqui para baixo.** Tudo sai dos tokens
   de `fiscal/_estilos.html`, o mesmo arquivo que a Área da Beleza usa. Duas
   paletas seriam duas coisas para manter em sincronia, e elas divergiriam na
   primeira mudança de marca.

   Os tokens são declarados em `.casca`, então valem para tudo que está dentro
   da casca. O `body` fica fora dela e por isso repete o valor do fundo.

   Os nomes de classe são os que as 13 telas do portal já usavam: `.card`,
   `.kpi`, `.table-card`, `.chart-card`. Nenhuma tela precisou ser editada por
   causa desta folha.
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Geist, a mesma do Venner OS. A lista de reserva é longa de propósito: se
     o Google Fonts não responder, a tela continua legível com a fonte do
     sistema em vez de cair numa serifada qualquer. */
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Literais porque o body está fora de `.casca`, onde os tokens vivem.
     Por isso o tema escuro também se anuncia no `<html>`, logo abaixo: sem
     isso o corpo ficaria claro atrás do conteúdo escuro, e aparecia no
     rebote da rolagem. */
  background: #f4f6fa;
  color: #10182b;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============================================================================
   Ícone de linha
   =============================================================================

   Trazido do Venner OS em 09/10/2026, a pedido do Danilo. O desenho vem de
   `apps.core.templatetags.icones`, e o que faz ele funcionar é `currentColor`
   no traço: o ícone acompanha a cor de quem o contém, então item de menu,
   botão e aviso pintam o ícone junto, sem uma regra por ícone.

   `flex: none` porque ícone não encolhe: num item de menu com texto comprido,
   sem isso o ícone é o primeiro a ser achatado e vira um risco.
   ========================================================================== */

.icone { flex: none; display: block; }
/* Dentro de botão e de link, o ícone fica na linha do texto em vez de
   assentar na base dele. */
.btn-primary .icone, .btn-secondary .icone, .casca a .icone { display: inline-block; vertical-align: -3px; }

/* =============================================================================
   `hidden` esconde, sempre
   =============================================================================

   O navegador esconde elemento com `hidden` por uma regra da folha dele,
   e a folha do navegador **perde para qualquer regra nossa**, por mais
   fraca que seja. Então `.alguma-coisa { display: flex }` fazia o bloco
   aparecer mesmo com `hidden` no HTML.

   Foi o que aconteceu em 26/10/2026 com o tocador de áudio do chat: ele
   nascia com `hidden`, o teste confirmava o `hidden`, e ele aparecia na
   tela de todo mundo. O defeito não estava no HTML nem no script, estava
   nesta ausência.

   Uma linha, no começo, e a classe inteira de defeito deixa de existir.
   `!important` aqui não é atalho: é a declaração de que `hidden` ganha de
   qualquer layout, que é exatamente o que ele quer dizer. */
[hidden] { display: none !important; }

/* =============================================================================
   A casca: lateral, topo, conteúdo. A mesma da Área da Beleza.
   ========================================================================== */

.casca { display: flex; min-height: 100vh; }

/* O corpo acompanha o tema. Os tokens vivem em `.casca`, e o `body` está
   fora dela: por isso o tema também se anuncia no `<html>`, e estas duas
   cores são as mesmas de `--fundo` e `--tinta` do bloco escuro. */
html[data-tema="escuro"] body { background: #070c15; color: #e7edf7; }

/* -----------------------------------------------------------------------------
   A barra lateral, repaginada em 09/10/2026
   -----------------------------------------------------------------------------

   Decisão do Danilo: **continua azul-escura.** O que muda é o que está dentro
   dela, e a mudança que mais pesa não é o ícone, é o item ativo.

   Antes, o item ativo era uma pastilha BRANCA SÓLIDA. Num menu escuro, isso
   é o elemento de maior contraste da tela inteira: o olho vai nele antes de
   ir no conteúdo, e a lateral parece pesada porque de fato é a coisa mais
   forte à vista. Agora o ativo é um fundo translúcido com uma barra clara na
   borda, que diz onde você está sem gritar.
   -------------------------------------------------------------------------- */

.lateral {
  width: 240px; flex: none; background: var(--lateral-fundo); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh;
}
.lateral .marca {
  display: flex; align-items: center; gap: 11px; padding: 0 16px;
  /* Mesma altura do topo: as duas barras encostam e formam uma linha só
     atravessando a tela. Alturas diferentes deixam um degrau no canto. */
  height: 56px; flex: none;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
/* O quadrado branco com a letra saiu em 09/10/2026, substituído pela marca.
   A regra do `.selo` da barra lateral morreu junto; o `.selo` que sobrou é o
   da tela de escolha de painel, que é outro elemento e tem estilo próprio
   lá. */
.lateral .marca .logo { flex: none; }
.lateral .marca .nome {
  font-weight: 650; font-size: 13.5px; letter-spacing: .01em; line-height: 1.15;
}
.lateral .marca .modulo {
  font-size: 9px; text-transform: uppercase; letter-spacing: .22em;
  color: rgba(255,255,255,.5); margin-top: 3px; font-weight: 600;
}
.lateral nav { flex: 1; padding: 8px 10px 12px; overflow-y: auto; }
.lateral .grupo {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.38); font-weight: 700; padding: 15px 10px 5px;
}
.lateral nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--raio-sm); margin-bottom: 1px;
  color: rgba(255,255,255,.76); text-decoration: none;
  font-size: 13px; font-weight: 450; position: relative;
  transition: background .13s, color .13s;
}
.lateral nav a .icone { color: rgba(255,255,255,.52); transition: color .13s; }
.lateral nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral nav a:hover .icone { color: rgba(255,255,255,.82); }
.lateral nav a.ativo {
  background: rgba(255,255,255,.13); color: #fff; font-weight: 600;
}
.lateral nav a.ativo .icone { color: #fff; }
/* A barra na borda esquerda, que é o que marca o lugar sem precisar de um
   bloco branco inteiro. Fica fora do padding do item, encostada na parede. */
.lateral nav a.ativo::before {
  content: ""; position: absolute; left: -10px; top: 5px; bottom: 5px;
  width: 3px; border-radius: 0 3px 3px 0; background: #fff;
}
/* O número de pendência, encostado na direita: o não lido do WhatsApp. */
.lateral nav a .selo-numero {
  margin-left: auto; font-size: 10px; font-weight: 700; line-height: 1.6;
  padding: 0 6px; border-radius: var(--raio-xl);
  background: var(--critico); color: #fff; flex: none;
}
.lateral .rodape {
  padding: 11px 14px; border-top: 1px solid rgba(255,255,255,.10);
  font-size: 10px; color: rgba(255,255,255,.42); line-height: 1.55;
}

.corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo {
  height: 56px; flex: none; background: var(--cartao);
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 22px; gap: 14px;
}
.topo .usuario { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.topo .avatar {
  width: 30px; height: 30px; border-radius: var(--raio-sm);
  /* Quadrado de canto redondo em vez de círculo, como no Venner OS: ele
     combina com o raio do resto da tela, e o círculo era o único elemento
     totalmente redondo da interface. */
  background: linear-gradient(135deg, var(--marca), var(--marca-clara));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: none;
}
.topo form { margin: 0; }
.topo button {
  background: none; border: 1px solid transparent; color: var(--tinta2);
  cursor: pointer; font: inherit; font-size: 12.5px; padding: 5px 9px;
  border-radius: var(--raio-sm); display: inline-flex; align-items: center;
  gap: 6px; transition: all .13s;
}
.topo button:hover {
  color: var(--marca); background: var(--fundo2); border-color: var(--borda);
}

/* O conteúdo tem largura máxima, e isso não é estética.
 *
 * Numa tela de 27 polegadas, uma tabela esticada de ponta a ponta faz o olho
 * percorrer 60 cm para ligar a primeira coluna à última, e a linha se perde no
 * meio do caminho. O limite mantém a linha legível; a folga sobra como
 * margem, que é o que dá o ar de respiro. */
.conteudo { flex: 1; padding: 22px 26px 60px; overflow: auto; }
.faixa { max-width: 1320px; margin: 0 auto; }

/* =============================================================================
   Tipografia, na mesma escala da Área da Beleza
   ========================================================================== */

.casca {
  font-family: var(--fonte-ui);
  font-size: 14px; line-height: 1.5; color: var(--tinta);
  /* Alternativas de desenho da Geist: distinguem melhor "a" e "l" em
     tamanho pequeno. */
  font-feature-settings: "ss01", "cv11";
}

.conteudo h1 {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 4px; color: var(--marca);
}
.conteudo h2 {
  font-size: 15px; font-weight: 700; margin: 26px 0 10px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tinta2);
}
.conteudo h3 {
  font-size: 13.5px; font-weight: 700; margin: 0 0 8px; color: var(--tinta);
}
.conteudo h4 {
  font-size: 12px; font-weight: 700; margin: 14px 0 6px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta3);
}
.casca a { color: var(--marca); text-decoration: none; }
.casca a:hover { text-decoration: underline; }

/* =============================================================================
   Tabelas: densas, com numeral tabular no que é número
   ========================================================================== */

table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--borda2); font-size: 13.5px;
}
th {
  background: transparent; font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tinta3);
  border-bottom: 1px solid var(--borda); white-space: nowrap;
}
/* Realce de passagem no tom neutro, e não no azul da marca: a linha sob o
   cursor é "estou aqui", não "isto é importante". Com o azul, passar o mouse
   pela tabela pintava a tela de marca. */
tbody tr:hover { background: var(--fundo2); }
/* Algarismo de largura fixa alinha a coluna. Sem isto, uma coluna de valores
   fica serrilhada e a comparação visual entre linhas se perde. */
td { font-variant-numeric: tabular-nums; }

/* =============================================================================
   Cartões: mesmo raio e mesma sombra suave da Área da Beleza
   ========================================================================== */

.card, .kpi, .chart-card, .table-card, .info-card, .insight-output,
.filters, .login-container {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
}

/* -----------------------------------------------------------------------------
   O cartão sob o cursor
   -----------------------------------------------------------------------------

   Dois pixels para cima, sombra um grau mais funda e a borda mais firme.
   Trazido do Venner OS em 22/10/2026, com a mesma duração de 160ms: rápido
   o bastante para parecer resposta do objeto, lento o bastante para o olho
   ver o movimento.

   **Só no cartão em que se clica.** Cartão que levanta sem levar a lugar
   nenhum promete uma ação que não existe, e isso é pior que não ter efeito:
   a pessoa clica, nada acontece, e passa a desconfiar da tela inteira. Por
   isso o realce pede a classe `clicavel`, e não vale para todo `.card`.

   `prefers-reduced-motion` desliga o movimento e mantém a sombra: quem pediu
   menos animação ainda precisa saber onde está o cursor.
   -------------------------------------------------------------------------- */
/* O botão de tema, e os dois ícones que se revezam nele.

   Mostra para onde vai, e não onde está: no claro aparece a lua ("vai
   escurecer"), no escuro aparece o sol. O contrário faz a pessoa clicar
   achando que vai confirmar o que já vê. */
.botao-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--cartao); color: var(--tinta2); cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.botao-tema:hover {
  border-color: var(--borda-forte); color: var(--marca);
  background: var(--fundo2);
}
.so-no-escuro { display: none; }
[data-tema="escuro"] .so-no-claro { display: none; }
[data-tema="escuro"] .so-no-escuro { display: inline-flex; }

.card.clicavel, .kpi.clicavel, .cartao.clicavel {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card.clicavel:hover, .kpi.clicavel:hover, .cartao.clicavel:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra2);
  border-color: var(--borda-forte);
}
.card.clicavel:active, .kpi.clicavel:active, .cartao.clicavel:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .card.clicavel, .kpi.clicavel, .cartao.clicavel { transition: none; }
  .card.clicavel:hover, .kpi.clicavel:hover, .cartao.clicavel:hover {
    transform: none;
  }
}

.card { padding: var(--pad); margin-bottom: var(--gap); }
.card h2 { margin-top: 0; }

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.kpi { padding: 15px 17px; }
.kpi h3 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta3); margin: 0 0 6px; font-weight: 700;
}
.kpi .value {
  font-size: 25px; font-weight: 700; color: var(--marca); margin: 0;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.kpi small { display: block; margin-top: 4px; color: var(--tinta3); font-size: 11.5px; }

.info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.info-card { padding: 15px 17px; }
.info-card .value {
  font-size: 19px; font-weight: 700; margin: 3px 0; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.info-card small { color: var(--tinta3); font-size: 11.5px; }

/* =============================================================================
   Gráficos e blocos de tabela
   ========================================================================== */

.charts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.chart-card { padding: 17px; }
.chart-card canvas { height: 280px !important; max-height: 320px; width: 100% !important; }
.chart-card-wide { grid-column: 1 / -1; }
.chart-card-wide canvas { height: 360px !important; max-height: 400px; }

.tables-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}
.table-card { padding: 17px; overflow-x: auto; }
.table-card h3 { margin-bottom: 8px; }
.table-card h4 { color: var(--tinta3); }

/* =============================================================================
   Botões: primário sólido na marca, secundário de contorno
   ========================================================================== */

.btn-primary, .btn-secondary {
  /* `inline-flex` para o ícone ficar na linha do texto, e altura fixa para
     dois botões lado a lado terem o mesmo tamanho mesmo quando um tem ícone
     e o outro não. Com `inline-block`, o botão com ícone ficava três pixels
     mais alto que o vizinho. */
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border-radius: var(--raio-sm); font-size: 12.5px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: background .13s, border-color .13s, color .13s;
  font-family: inherit; text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--marca); color: var(--tinta-no-botao); }
.btn-primary:hover { background: var(--marca-escura); text-decoration: none; }
.btn-secondary {
  background: var(--cartao); color: var(--tinta); border-color: var(--borda);
}
.btn-secondary:hover { background: var(--marca-tenue); border-color: var(--marca-contorno); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; }
.btn-lg { height: 40px; padding: 0 18px; font-size: 13.5px; }

/* Botão que é link precisa reafirmar a cor do texto.
 *
 * `.casca a` e `.fiscal a` pintam TODO link com a cor da marca, e são mais
 * específicos (0,1,1) que `.btn-primary` (0,1,0). O resultado é azul-escuro
 * sobre azul-escuro: o botão fica lá, clicável, e ninguém lê o que está
 * escrito nele. Apareceu no "Novo negócio" do quadro, e atingia também o
 * "Editar", o "Nova tarefa", o "Nova pessoa física" e a aba do funil
 * selecionado.
 *
 * Passou despercebido porque, enquanto `btn-primary` vivia em <button>, a
 * regra de link não alcançava. Os botões que viraram <a> herdaram o
 * problema de uma vez. */
.casca .btn-primary, .fiscal .btn-primary { color: var(--tinta-no-botao); }
.casca .btn-secondary, .fiscal .btn-secondary { color: var(--tinta); }

/* A tinta do botão primário tem token próprio por causa do tema escuro.
   No claro o fundo é azul-marinho e a tinta é branca; no escuro o fundo é
   azul-claro, e branco sobre azul-claro não se lê. É a mesma inversão que
   o Venner faz no botão verde. */
[data-tema="escuro"] .btn-primary,
[data-tema="escuro"] .casca .btn-primary,
[data-tema="escuro"] .fiscal .btn-primary { color: #081426; }

.actions { margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* =============================================================================
   Formulários e filtros
   ========================================================================== */

.filters {
  padding: 14px 16px; display: flex; gap: 14px; align-items: flex-end;
  flex-wrap: wrap; margin-bottom: 16px;
}
.filter-group, .form-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label, .form-group label {
  font-size: 10.5px; color: var(--tinta3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
}
.filter-group input, .filter-group select,
.form-group input, .form-group textarea, .form-group select {
  padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); font-size: 13.5px; font-family: inherit;
  color: var(--tinta); background: var(--cartao); min-width: 150px;
}
.filter-group input:focus, .filter-group select:focus,
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: var(--marca-clara);
  box-shadow: 0 0 0 3px var(--anel);
}
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; }
.adjust-form { display: flex; flex-direction: column; gap: 11px; }

.login-container { max-width: 380px; margin: 64px auto; padding: 28px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }

/* =============================================================================
   Recados, nas cores de estado da Área da Beleza
   ========================================================================== */

.messages { padding: 16px 26px 0; }
/* Na mesma faixa do conteúdo: sem isto, o recado começa na borda da tela
   enquanto os cartões começam recuados, e em monitor grande o desalinhamento
   salta aos olhos. */
.messages > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.message {
  padding: 11px 14px; border-radius: var(--raio-sm); margin-bottom: 8px;
  font-size: 13.5px; border: 1px solid var(--borda); border-left-width: 3px;
}
.message.success { background: var(--ok-tenue);      color: var(--ok);      border-left-color: var(--ok); }
.message.error   { background: var(--critico-tenue); color: var(--critico); border-left-color: var(--critico); }
.message.warning { background: var(--atencao-tenue); color: var(--atencao); border-left-color: var(--atencao); }
.message.info    { background: var(--info-tenue);    color: var(--info);    border-left-color: var(--info); }

/* =============================================================================
   Insights e miudezas
   ========================================================================== */

.insight-output { padding: 22px; font-size: 14.5px; line-height: 1.7; margin-bottom: 16px; }
.insight-output p { margin: 0 0 11px; }

.meta, .hint { color: var(--tinta3); font-size: 12.5px; margin-bottom: 16px; }

details.card summary { cursor: pointer; font-weight: 600; color: var(--tinta2); }
details.card pre {
  font-size: 11.5px; overflow: auto; max-height: 300px;
  background: var(--fundo); border-radius: var(--raio-sm); padding: 12px;
}

.link.back { display: inline-block; margin-bottom: 8px; font-size: 12.5px; }
.link-button {
  background: none; border: none; color: var(--tinta2); cursor: pointer;
  font: inherit; font-size: 13px; padding: 0;
}
.link-button:hover { color: var(--marca); text-decoration: underline; }

@media (max-width: 900px) {
  .lateral { display: none; }
  .conteudo, .topo, .messages { padding-left: 16px; padding-right: 16px; }
}

/* =============================================================================
   O quadro do funil
   =============================================================================

   Colunas que rolam na horizontal, cartões que rolam na vertical dentro de
   cada uma. É a forma que todo CRM usa, e o motivo é que o olho compara
   colunas lado a lado: empilhar etapas verticalmente destruiria a leitura de
   onde o funil estrangula.
   ========================================================================== */

.quadro {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 14px;
  margin-top: 16px;
  /* Encaixa a coluna na posição ao rolar: com oito etapas, rolar livre deixa
     sempre meia coluna cortada na borda. */
  scroll-snap-type: x proximate;
}

.coluna {
  flex: 0 0 272px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 290px);
  scroll-snap-align: start;
  transition: background .12s, border-color .12s;
}
.coluna.alvo {
  background: var(--marca-tenue);
  border-color: var(--marca-clara);
}

.coluna-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; padding: 11px 12px 9px;
  border-bottom: 1px solid var(--borda);
}
.coluna-topo b { font-size: 12.5px; }
.coluna-topo .sigla {
  display: inline-block; margin-left: 5px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; color: var(--tinta3);
}
.coluna-numeros { text-align: right; white-space: nowrap; }
.coluna-numeros span {
  display: block; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.coluna-numeros small { color: var(--tinta3); font-size: 10.5px; }

.coluna .objetivo {
  margin: 0; padding: 8px 12px;
  font-size: 11px; line-height: 1.45; color: var(--tinta3);
  border-bottom: 1px solid var(--borda2);
}

.cartoes { flex: 1; overflow-y: auto; padding: 9px; min-height: 60px; }
.coluna-vazia {
  margin: 6px 3px; font-size: 11.5px; color: var(--tinta3); text-align: center;
}

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 10px 11px;
  margin-bottom: 8px;
  cursor: grab;
  /* `var(--sombra)` e não a cor escrita à mão: sombra azulada de tema claro
     sobre fundo escuro vira uma mancha. Era a única cor literal que tinha
     sobrado fora da folha de tokens, e só apareceu ao ligar o tema escuro. */
  box-shadow: var(--sombra);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* O cartão do quadro leva ao negócio e se arrasta entre colunas: aqui o
   realce não promete nada que não exista, então vale sem pedir classe. */
.cartao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra2);
  border-color: var(--borda-forte);
}
.cartao:active { cursor: grabbing; transform: translateY(0); }
.cartao.arrastando { opacity: .45; }
.cartao.atrasado { border-left: 3px solid var(--critico); }

.cartao-nome {
  display: block; font-weight: 600; font-size: 13px; line-height: 1.35;
  color: var(--tinta);
}
.cartao-nome:hover { color: var(--marca); text-decoration: none; }
.cartao-linha {
  display: block; font-size: 11.5px; color: var(--tinta3); margin-top: 3px;
}
.cartao-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 8px;
}
.cartao-rodape .valor {
  font-size: 12px; font-weight: 700; color: var(--marca);
  font-variant-numeric: tabular-nums;
}
.cartao-rodape .dono {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--marca-tenue); color: var(--marca);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
}
.cartao .aviso-atraso {
  display: block; margin-top: 7px; font-size: 10.5px; color: var(--critico);
}

/* O aviso de movimento, que aparece no canto e some sozinho. Mensagem em
   faixa no topo empurraria o quadro para baixo a cada arrasto. */
.aviso-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  background: var(--ok-tenue); color: var(--ok);
  border: 1px solid var(--ok); border-radius: var(--raio-sm);
  padding: 10px 14px; font-size: 13px; max-width: 360px;
  box-shadow: var(--sombra);
}
.aviso-flutuante.erro {
  background: var(--critico-tenue); color: var(--critico);
  border-color: var(--critico);
}

@media (max-width: 900px) {
  .coluna { flex-basis: 85vw; max-height: none; }
}

/* A caixa de concluir tarefa. É um botão, e não um campo de marcar, porque
   concluir grava no servidor: um campo marcado que não gravou mente. */
.caixa {
  width: 19px; height: 19px; flex: none; padding: 0; cursor: pointer;
  border: 1.5px solid var(--borda); border-radius: 5px;
  background: var(--cartao); color: var(--ok);
  font-size: 12px; line-height: 1; font-weight: 700;
}
.caixa:hover { border-color: var(--marca-clara); }

.feito { text-decoration: line-through; color: var(--tinta3); font-weight: 500; }
tr.linha-atrasada td { background: var(--critico-tenue); }


/* =============================================================================
   Pastilha de estado, trazida do Venner OS
   =============================================================================

   O `.chip` da Área da Beleza é um bloco de indicador, não uma pastilha: o
   nome já está ocupado em 71 lugares. A pastilha aqui se chama `.etiqueta`,
   igual à da Área da Beleza, para o mesmo elemento ter o mesmo nome nos dois
   lados do sistema.
   ========================================================================== */

.casca .etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 2.5px 9px;
  border-radius: var(--raio-xl); white-space: nowrap; line-height: 1.5;
  background: var(--fundo2); color: var(--tinta2);
  border: 1px solid var(--borda);
}
.casca .etiqueta.ok      { background: var(--ok-tenue);      color: var(--ok);      border-color: transparent; }
.casca .etiqueta.atencao { background: var(--atencao-tenue); color: var(--atencao); border-color: transparent; }
.casca .etiqueta.critico { background: var(--critico-tenue); color: var(--critico); border-color: transparent; }
.casca .etiqueta.neutra  { background: var(--marca-tenue);   color: var(--marca);   border-color: transparent; }

/* Número em fonte monoespaçada, onde a coluna é de número. Ver o porquê em
   `_estilos.html`: é o que faz a vírgula de cada linha cair na mesma
   posição. */
.casca td.num, .casca th.num { text-align: right; }
.casca td.num { font-family: var(--fonte-mono); font-size: 12.5px; }

/* =============================================================================
   Notebook de 1366 px, que é a tela da equipe da Hangar
   =============================================================================

   Trazido do Venner OS, onde a regra nasceu de uma reunião de validação: a
   barra lateral estreita, a tabela aperta, e o conteúdo ganha de volta o
   espaço que a lateral devolveu. Sem isso, a tela de 1366 px mostra o quadro
   do funil com duas colunas e meia.
   ========================================================================== */

@media (max-width: 1500px) {
  .lateral { width: 208px; }
  .conteudo { padding: 18px 18px 60px; }
  th, td { padding: 7px 8px; }
}

/* =============================================================================
   O WhatsApp: uma tela só, com a lista ao lado da conversa
   =============================================================================

   Reescrita em 26/10/2026. O Danilo olhou a tela e disse duas coisas: "acho
   que ficou bem esquisita" e "deixe o mais similar possível ao WhatsApp". A
   semelhança não é gosto: o time passa o dia no WhatsApp, e cada diferença é
   uma coisa a reaprender numa tela onde se atende cliente com pressa.

   Daqui para baixo nenhuma cor é literal. As três do chat (--fio-fundo,
   --bolha-minha, --bolha-dele) moram no bloco de tokens, com par no tema
   escuro, como todo o resto. */

/* A tela de conversa sai da faixa de 1320px e do rodapé de 60px: ela é a
   tela inteira, como todo aplicativo de conversa. O :has evita ter que
   marcar a casca, que é compartilhada com os outros módulos.

   A altura **não** é calculada à mão. Era `calc(100vh - 28px)`, e qualquer
   coisa acima dela (o aviso de conexão caída, por exemplo) empurrava o
   mesmo tanto para fora da janela. Agora a corrente inteira é flexível e a
   conversa fica com o que sobrar, seja quanto for. */
.casca:has(.zap) { height: 100vh; min-height: 0; overflow: hidden; }
.conteudo:has(.zap) {
  padding: 14px 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
.faixa:has(.zap) {
  max-width: none; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  /* `margin: 0` e `width: 100%` desfazem o `margin: 0 auto` da faixa, e
     isso **não** é cosmético. Num contêiner flex em coluna a margem
     automática atua no eixo cruzado, que é o horizontal: o item deixa de
     esticar e encolhe até o conteúdo, centrado. Com conversa aberta o
     conteúdo é largo e o defeito não aparecia; sem conversa aberta a
     tela encolhia e sobrava vazio à esquerda, que foi o que o Danilo viu
     em 26/10/2026. */
  margin: 0; width: 100%;
}

/* A tela é a barra de filtros mais a grade de três colunas. A barra tem a
   altura que precisar e a grade fica com o resto. */
.zap-tela {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px;
}

/* A barra de filtros, na largura inteira.
   Morava dentro da coluna de conversas e custava duas linhas dela. Filtro é
   decisão que se toma uma vez e vale para a coluna inteira: espremido em
   330px, cada etiqueta nova empurrava uma conversa para fora da tela. */
.zap-barra {
  flex: none; display: flex; align-items: center; gap: 8px 14px;
  flex-wrap: wrap;
  padding: 9px 12px; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: var(--raio-lg);
}
/* A divisória entre o grupo de estado e o de etiqueta, que antes era a
   quebra de linha e agora precisa existir sozinha. */
.zap-barra .zap-filtros-etiqueta {
  padding-left: 14px; border-left: 1px solid var(--borda2);
}
.zap-barra-fim { margin-left: auto; display: flex; gap: 6px; }

.zap {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 290px;
  flex: 1; min-height: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--cartao);
  box-shadow: var(--sombra);
}
.zap.sem-conversa { grid-template-columns: 330px minmax(0, 1fr); }
.zap.sem-crm { grid-template-columns: 330px minmax(0, 1fr); }
.zap.sem-crm .zap-crm { display: none; }

/* ---- a coluna da esquerda ---- */

.zap-lista {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-right: 1px solid var(--borda); background: var(--cartao);
}
.zap-lista-topo { border-bottom: 1px solid var(--borda2); padding: 9px 10px; }
.zap-busca { margin: 0; }
.zap-busca input { width: 100%; border-radius: var(--raio-xl); padding: 8px 14px; }

/* Os filtros **quebram linha**, nunca rolam para o lado.
   Rolavam, e em 26/10/2026 isso escondeu o "limpar" fora da borda: o
   Danilo clicou numa etiqueta, a lista ficou vazia e a saída estava no
   pedaço cortado. Filtro que esconde a própria saída prende quem clicou. */
.zap-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.zap-filtros-etiqueta { margin: 0; }
.zap-chip.limpar {
  border-color: var(--critico); color: var(--critico); font-weight: 600;
}
.zap-chip {
  flex: none; font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--tinta2);
  background: var(--cartao); white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.zap-chip:hover { background: var(--fundo2); text-decoration: none; }
.zap-chip.ativo {
  background: var(--marca); border-color: var(--marca);
  color: var(--tinta-no-botao); font-weight: 600;
}
.zap-chip b { font-weight: 700; }

.zap-rolagem { flex: 1; min-height: 0; overflow-y: auto; }

.zap-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; text-decoration: none; color: var(--tinta);
  border-bottom: 1px solid var(--borda2);
}
.zap-item:hover { background: var(--fundo2); text-decoration: none; }
.zap-item.aberta { background: var(--marca-tenue); }

.zap-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 999px;
  background: var(--marca-tenue); color: var(--marca);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.zap-avatar.grande { width: 38px; height: 38px; font-size: 14px; }

.zap-corpo { min-width: 0; flex: 1; display: block; }
.zap-linha1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.zap-nome {
  font-weight: 600; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zap-hora { font-size: 11px; color: var(--tinta3); white-space: nowrap; flex: none; }
.zap-numero {
  display: block; font-size: 11px; color: var(--tinta3);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.zap-previa {
  display: block; font-size: 12.5px; color: var(--tinta2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zap-selos { display: flex; gap: 5px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.zap-nao-lidas {
  /* A tinta do botão, e não branco: no tema escuro o verde clareia, e
     branco em cima dele dá contraste 2,2. */
  background: var(--ok); color: var(--tinta-no-botao); border-radius: 999px;
  font-size: 10.5px; font-weight: 700; padding: 1px 7px;
}
.zap-etapa {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--marca-tenue); color: var(--marca);
  border: 1px solid var(--marca-contorno);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zap-etapa.sem {
  background: var(--atencao-tenue); color: var(--atencao); border-color: var(--atencao);
}
.zap-ponto { width: 9px; height: 9px; border-radius: 999px; display: inline-block; flex: none; }
.zap-dono { font-size: 10.5px; color: var(--tinta3); }
.zap-vazio { padding: 28px 18px; text-align: center; color: var(--tinta3); font-size: 13px; }
.zap-vazio a { display: inline-block; margin-top: 10px; font-weight: 600; }

/* ---- o fio ---- */

/* `min-height: 0` nos dois, e é o conserto do defeito que o Danilo
   encontrou em 26/10/2026: "tem algumas conversas que não está dando pra
   clicar na aba onde eu escrevo a mensagem, a não ser que eu reduza a tela
   para 90%".

   Era só em algumas porque dependia do tamanho da conversa: num filho de
   flex o mínimo padrão é o tamanho do conteúdo, então a lista de mensagens
   crescia até caber tudo e empurrava o campo de escrever para fora da
   coluna. Conversa curta cabia, conversa longa não. */
.zap-fio {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--fio-fundo);
}

/* O cabeçalho não quebra em várias linhas: com nome longo e três
   etiquetas ele virava três linhas e comia a conversa. O que sobra encolhe
   e corta, que é o certo num cabeçalho. */
.zap-cabecalho {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  padding: 9px 14px; background: var(--cartao);
  border-bottom: 1px solid var(--borda); flex: none;
}
.zap-quem { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.zap-quem-nome {
  font-weight: 700; font-size: 14.5px; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zap-quem-sub { font-size: 11.5px; color: var(--tinta3); }
.zap-caiu { color: var(--atencao); }
.zap-etiquetas {
  display: flex; gap: 5px; align-items: center; flex-wrap: nowrap;
  min-width: 0; overflow: hidden;
}
.zap-etiquetas form { display: inline; margin: 0; }
.zap-etiquetas .link-button { color: inherit; font-size: 12px; padding: 0 0 0 4px; }
.zap-acoes { display: flex; gap: 6px; margin-left: auto; flex: none; }
.zap-acoes form { margin: 0; }

.zap-mais { position: relative; }
.zap-mais summary {
  list-style: none; cursor: pointer; width: 22px; height: 22px;
  border: 1px dashed var(--borda-forte); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: var(--tinta2);
}
.zap-mais summary::-webkit-details-marker { display: none; }
.zap-balao {
  position: absolute; left: 0; top: 28px; z-index: 30; width: 230px;
  box-shadow: var(--sombra2); padding: 12px; text-align: left;
}
.zap-balao h2 { margin: 0 0 8px; font-size: 12px; }
.zap-escolha { display: flex; gap: 5px; flex-wrap: wrap; }
.zap-escolha form { margin: 0; }
.zap-etiqueta-botao {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  cursor: pointer; border: 1px solid; background: transparent;
}
.zap-balao-pe { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--borda2); }

.zap-mensagens {
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 12px;
  display: flex; flex-direction: column; gap: 3px;
}

.zap-dia {
  align-self: center; margin: 12px 0 8px;
  background: var(--cartao); color: var(--tinta2);
  font-size: 11px; font-weight: 600; padding: 3px 12px;
  border-radius: 999px; box-shadow: var(--sombra);
}

/* Acontecimento, não mensagem: reação, recado do sistema. Linha no meio,
   como no WhatsApp, sem ponta e sem dono. */
.zap-evento {
  align-self: center; max-width: 80%; text-align: center;
  font-size: 11.5px; color: var(--tinta3); padding: 3px 10px;
  margin: 4px 0;
}

.zap-bolha {
  max-width: min(74%, 540px); align-self: flex-start;
  background: var(--bolha-dele); color: var(--tinta);
  border-radius: var(--raio) var(--raio) var(--raio) var(--raio-xs);
  padding: 6px 9px 4px; font-size: 13.5px; line-height: 1.45;
  box-shadow: var(--sombra); position: relative;
}
.zap-bolha.minha {
  align-self: flex-end; background: var(--bolha-minha);
  border-radius: var(--raio) var(--raio) var(--raio-xs) var(--raio);
}
/* Mensagens seguidas da mesma ponta se encostam: o espaço entre blocos é o
   que mostra que a conversa trocou de lado. */
.zap-bolha + .zap-bolha { margin-top: 1px; }
.zap-bolha.minha + .zap-bolha:not(.minha),
.zap-bolha:not(.minha) + .zap-bolha.minha { margin-top: 9px; }
/* Foto e vídeo ocupam a bolha inteira, sem moldura em volta. */
.zap-bolha.so-midia { padding: 4px 4px 3px; }

.zap-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
/* O link dentro da bolha: sublinhado sempre, porque na bolha tingida a cor
   sozinha nao basta para dizer que da para clicar. */
.zap-texto a { color: var(--marca); text-decoration: underline; }
.zap-bolha.minha .zap-texto a { color: var(--marca-escura); }
.zap-carimbo {
  font-size: 10.5px; color: var(--tinta3); text-align: right;
  margin-top: 2px; display: flex; gap: 5px; justify-content: flex-end;
  align-items: center;
}
.zap-tique { font-weight: 700; letter-spacing: -1px; }
.zap-tique.lida { color: var(--info); }
.zap-tique.falhou { color: var(--critico); }
/* A palavra na última mensagem: é a resposta a "ela viu?", e por isso ela
   é escrita, não só colorida. */
.zap-situacao { font-size: 10.5px; }
.zap-situacao.lida { color: var(--info); font-weight: 700; }
.zap-situacao.falhou { color: var(--critico); font-weight: 700; }
.zap-autor { font-style: italic; }
.zap-erro {
  font-size: 11px; background: var(--critico-tenue); color: var(--critico);
  padding: 4px 7px; border-radius: var(--raio-xs); margin-top: 5px;
}

.zap-foto { display: block; }
.zap-foto img, .zap-video {
  display: block; max-width: 100%; max-height: 330px;
  border-radius: var(--raio-sm); background: var(--fundo2);
}
.zap-audio { display: block; width: 260px; max-width: 100%; margin: 2px 0; }
.zap-documento {
  display: flex; gap: 8px; align-items: center; padding: 7px 9px;
  background: var(--fundo2); border-radius: var(--raio-sm);
  color: var(--tinta); text-decoration: none; font-size: 12.5px;
}
.zap-documento:hover { text-decoration: underline; }
.zap-sem-arquivo { font-size: 12px; color: var(--tinta3); font-style: italic; }

/* ---- escrever ---- */

.zap-escrever {
  display: flex; gap: 8px; align-items: flex-end; margin: 0;
  padding: 10px 12px; background: var(--cartao);
  border-top: 1px solid var(--borda);
  /* Não encolhe e não cresce: é a âncora de baixo da coluna. */
  flex: none;
}
.zap-redondo {
  flex: none; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--cartao);
  color: var(--tinta2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.zap-redondo:hover { background: var(--fundo2); }
.zap-redondo.gravando {
  background: var(--critico); border-color: var(--critico);
  color: var(--tinta-no-botao);
}
.zap-campo { flex: 1; position: relative; min-width: 0; }
.zap-campo textarea {
  width: 100%; resize: none; border-radius: var(--raio-lg);
  padding: 9px 14px; max-height: 130px; line-height: 1.4;
}
.zap-enviar {
  flex: none; width: 40px; height: 40px; border-radius: 999px;
  border: 0; background: var(--marca); color: var(--tinta-no-botao);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.zap-enviar:disabled { opacity: .5; cursor: not-allowed; }

.zap-rapidas {
  position: absolute; bottom: 100%; left: 0; right: 0; z-index: 40;
  max-height: 260px; overflow-y: auto; margin-bottom: 6px;
  box-shadow: var(--sombra2); padding: 8px;
}
.zap-rapida {
  display: block; width: 100%; text-align: left; border: 0;
  background: transparent; padding: 7px 6px; cursor: pointer;
  border-bottom: 1px solid var(--borda2);
}
.zap-rapida b { font-size: 12px; display: block; }
.zap-rapida span { font-size: 11.5px; }

.zap-gravando { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; }
.zap-bolinha {
  width: 9px; height: 9px; border-radius: 999px; background: var(--critico);
  animation: zap-pisca 1s infinite;
}
@keyframes zap-pisca { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .zap-bolinha { animation: none; } }
.zap-gravado { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.zap-gravado audio { height: 34px; flex: 1; min-width: 180px; }

.zap-aviso-pe { padding: 8px 14px; margin: 0; background: var(--cartao); }
.zap-desligado { margin-bottom: 10px; border-left: 3px solid var(--atencao); }

/* ---- o painel do negócio ---- */

.zap-crm {
  border-left: 1px solid var(--borda); background: var(--fundo);
  overflow-y: auto; padding: 12px; min-width: 0;
}
.zap-crm .card { margin: 0 0 10px; padding: 12px; }
.zap-crm h2 { margin: 0 0 8px; font-size: 11px; }
.zap-negocio-nome { margin: 0 0 3px; font-weight: 600; }
.zap-funil { margin-bottom: 10px; }
.zap-funil select { width: 100%; }
.zap-nota { margin: 10px 0 0; }

/* A trilha de etapas: clicar move. Eram dois seletores dentro de um painel
   fechado, que é a forma certa de ninguém mover nada, porque quem está
   conversando decide a etapa em um segundo. */
.zap-trilha { list-style: none; margin: 0; padding: 0; }
.zap-passo button, .zap-passo-parado {
  display: flex; gap: 9px; align-items: center; width: 100%;
  text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 6px 7px; border-radius: var(--raio-sm);
  font: inherit; font-size: 12.5px; color: var(--tinta2);
}
.zap-passo-parado { cursor: default; }
.zap-passo button:hover { background: var(--fundo2); color: var(--tinta); }
.zap-bolinha-passo {
  width: 10px; height: 10px; border-radius: 999px; flex: none;
  border: 2px solid var(--borda-forte); background: var(--cartao);
}
.zap-passo.aqui button, .zap-passo.aqui .zap-passo-parado {
  background: var(--marca-tenue); color: var(--marca); font-weight: 700;
}
.zap-passo.aqui .zap-bolinha-passo {
  background: var(--marca); border-color: var(--marca);
}

/* ---- o convite, sem conversa aberta ---- */

.zap-convite {
  display: flex; align-items: center; justify-content: center;
  background: var(--fio-fundo); text-align: center; padding: 20px;
}
.zap-convite h2 { margin: 0 0 6px; }
.zap-convite .meta { display: block; margin-bottom: 14px; }
.zap-convite a { margin: 0 4px; }

/* ---- telas estreitas ----
   Abaixo de 1180px o painel do negócio sai; abaixo de 820px a lista some
   quando há conversa aberta, que é o comportamento do WhatsApp no celular:
   uma coisa de cada vez. */
@media (max-width: 1180px) {
  .zap { grid-template-columns: 300px minmax(0, 1fr); }
  .zap-crm { display: none; }
}
@media (max-width: 820px) {
  .zap { grid-template-columns: minmax(0, 1fr); }
  .zap:not(.sem-conversa) .zap-lista { display: none; }
}