/* ===========================================================================
   ARAUTO — folha de estilo

   A identidade é a da casa, não uma própria: fundo #0e0e0e, acento em cobre e
   Ethnocentric na marca, os mesmos do GUARDIÃO, do SENTINELA e do INTENDENTE.
   O lockup logo 54px + nome 30px e a paleta estão fixados em
   tests/test_identidade_visual.py — mexer aqui quebra o teste de propósito.

   A direção visual é **painel de central**, que é o vernáculo do que a empresa
   vende. Daí sai o único gesto de assinatura desta folha:

   ## O trilho de estado

   Uma barra de 3px na borda esquerda de tudo que carrega situação — item de
   menu atual, card parado, dia de hoje na agenda, linha de aviso, coluna que
   recebe o card arrastado. É a mesma leitura do LED de zona num painel: acende
   quando há o que dizer, some quando não há. Ele é o que substitui o
   sublinhado como marca de "isto importa", e por isso **não há sublinhado em
   lugar nenhum** desta interface.

   Nada é buscado fora da máquina: a fonte mora em /estatico/fontes/.
   =========================================================================== */

@font-face {
  font-family: "Ethnocentric";
  src: local("Ethnocentric"), url("/estatico/fontes/Ethnocentric-Regular.otf") format("opentype");
  font-display: swap;
}

:root {
  /* --- paleta da casa (fixada em teste) --- */
  --bg: #0e0e0e;
  --topo: #151515;
  --card: #1a1a1a;
  --alto: #262626;
  --line: #2c2c2c;
  /* Um degrau acima do que era: borda que só aparece de perto não separa nada.
     "Mais definido" — pedido do dono do produto — é borda visível e rótulo
     legível, não paleta nova: o fundo, o cartão e o cobre continuam os da casa. */
  --line-forte: #454545;
  --text: #f2f2f2;
  --muted: #a8a8a8;
  --fraco: #7d7d7d;
  --ok: #4da36f;
  --no: #d06d52;
  --aviso: #c9a227;
  --accent: #a05526;
  --accent-forte: #bf6832;

  /* Prazo é semáforo — decisão do dono do produto (25/08/2026). A primeira
     versão usava uma rampa de claridade numa cor só, teoricamente mais honesta
     para escala ordinal, e na prática ilegível: exigia legenda e comparação
     entre passos vizinhos. O semáforo se lê de longe, sem aprender nada. */
  --prazo-1: #55b97e;                  /* no prazo — verde */
  --prazo-2: #e2b53c;                  /* passou do prazo — amarelo */
  --prazo-3: #f07d2b;                  /* parado — laranja */
  --prazo-4: #f04a38;                  /* esquecido — vermelho */

  /* Cobre a 12% e 22%: usado como lavagem de fundo em estado ativo, onde uma
     borda sozinha some no meio de uma tabela longa. */
  --cobre-fraco: rgba(191, 104, 50, .12);
  --cobre-medio: rgba(191, 104, 50, .22);

  /* --- tipografia --- */
  --sans: "Ubuntu Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, "Noto Sans", sans-serif;
  --mono: "Noto Sans Mono", "Ubuntu Sans Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --marca: "Ethnocentric", "Eurostile", var(--sans);

  /* --- escalas ------------------------------------------------------------
     Os degraus vêm da estrutura do `tangram-design-tokens`, o sistema de design
     que o RD Station publica junto com o app. A paleta NÃO vem de lá — essa é a
     da casa, e continua sendo. O que se copia é o esqueleto: a malha de espaço
     em 4/8/12/16/24/32, os raios nomeados e cinco degraus de sombra em vez de
     dois valores escolhidos no olho.

     As medidas antigas 22px e 30px estavam fora da malha de 8 e desalinhavam o
     ritmo vertical de qualquer coisa colocada ao lado. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 40px;

  --raio-fino: 2px;                    /* quadrado de status, marcador */
  --raio-xs: 4px;
  --raio-p: 6px;                       /* controle: campo, botão */
  --raio: 8px;                         /* cartão, coluna */
  --raio-pill: 999px;                  /* etiqueta */
  --trilho: 3px;                       /* a espessura do trilho de estado */

  /* Transição curta o bastante para não atrasar quem trabalha rápido. */
  --troca: 140ms cubic-bezier(.2, .6, .3, 1);

  /* Sombra tingida do preto do fundo, e não do preto puro: sombra neutra sobre
     superfície escura vira mancha cinza. */
  --sombra-xs: 0 1px 2px rgba(0,0,0,.35);
  --sombra-sm: 0 2px 6px rgba(0,0,0,.4);
  --sombra-md: 0 6px 14px -4px rgba(0,0,0,.55);
  --sombra-lg: 0 12px 26px -8px rgba(0,0,0,.65);
  --sombra: var(--sombra-xs);
  --sombra-alta: var(--sombra-md), 0 0 0 1px var(--line-forte);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sublinhado não existe nesta interface: o que marca destaque é cor, peso e o
   trilho de estado. Sublinhado em tabela densa vira ruído e come a linha de base. */
a {
  color: var(--accent-forte);
  text-decoration: none;
  border-radius: 3px;
  transition: color var(--troca), background-color var(--troca);
}
a:hover { color: #d9814a; background: var(--cobre-fraco); }

:focus-visible {
  outline: 2px solid var(--accent-forte);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------- títulos -- */

h1 {
  font-size: 27.5px;
  font-weight: 600;
  letter-spacing: -.2px;
  margin: 0 0 var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
}

/* Sobrescrita de seção: minúscula, espaçada, com um fio que corre até a borda.
   O fio é estrutura, não enfeite — ele separa blocos numa tela sem molduras. */
h2 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }

h3 { font-size: 15.5px; margin: 0 0 var(--e2); font-weight: 600; }

/* A tela ocupa a largura toda. O funil tem sete colunas e o arquivo do RD tem
   onze, e uma coluna de conteúdo centrada com margem morta dos dois lados forçava
   rolagem lateral num monitor que tinha espaço de sobra. */
main { width: 100%; margin: 0; padding: var(--e5) var(--e4) 56px; }
main.estreito { max-width: 620px; margin: 0 auto; }

/* ----------------------------------------------------------------- marca -- */

.marca-lockup { display: flex; align-items: center; gap: 10px; }
.marca-lockup:hover { background: none; }
.marca-logo {
  width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto;
  transition: transform var(--troca), filter var(--troca);
}
.marca-lockup:hover .marca-logo {
  transform: rotate(-6deg) scale(1.04);
  filter: drop-shadow(0 0 6px rgba(191,104,50,.5));
}
.marca {
  font-family: var(--marca);
  font-size: 30px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--accent-forte);
  line-height: 1;
  margin: 0;
}
.marca-sub { font-size: 13.5px; color: var(--fraco); letter-spacing: .4px; }

/* ------------------------------------------------------------------ topo -- */

.topo {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
  padding: 10px var(--e4);
  background: linear-gradient(var(--topo), #121212);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topo nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }

/* Item de menu: o trilho de estado nasce transparente e acende no atual. */
.topo nav a {
  color: var(--muted);
  padding: 7px 12px 7px 11px;
  border-radius: var(--raio-p);
  font-size: 16px;
  border-left: var(--trilho) solid transparent;
  transition: background-color var(--troca), color var(--troca), border-color var(--troca);
}
.topo nav a:hover { background: var(--alto); color: var(--text); border-left-color: var(--line-forte); }
.topo nav a.ativo { background: var(--cobre-fraco); color: #fff; border-left-color: var(--accent-forte); }

/* Card de usuário, no canto superior direito: avatar com a inicial, nome e
   categoria (o papel), e o botão de sair. Uma peça só, com contorno de pílula,
   para não ficar solto ao lado do menu. */
.usuario-card {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 5px 4px 8px;
  background: var(--card);
  border: 1px solid var(--line-forte);
  border-radius: var(--raio-pill);
  box-shadow: var(--sombra-xs);
}
/* O nome e o avatar levam ao perfil; o botão de sair fica de fora do link. */
.usuario-link { display: flex; align-items: center; gap: 9px; min-width: 0; border-radius: var(--raio-pill); }
.usuario-link:hover { background: none; }
.usuario-link:hover .usuario-nome { color: #fff; }
.usuario-card .avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-forte), var(--accent));
  color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: .3px;
  overflow: hidden;
}
.usuario-card .avatar.avatar-foto { object-fit: cover; background: var(--alto); }
.usuario-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.usuario-nome {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem;
}
.usuario-papel {
  font-size: 11px; color: var(--fraco);
  text-transform: uppercase; letter-spacing: .7px; font-weight: 600;
}
.sair { display: flex; align-items: center; margin: 0; }
button.link {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 14.5px; padding: 2px 6px; border-radius: var(--raio-p);
  transition: color var(--troca), background-color var(--troca), border-color var(--troca);
}
button.link:hover { color: var(--text); background: var(--alto); }
button.link.sair-btn {
  border: 1px solid var(--line); color: var(--muted);
  padding: 6px 12px; border-radius: var(--raio-pill); font-size: 13px;
  font-weight: 600; letter-spacing: .3px;
}
button.link.sair-btn:hover { border-color: var(--no); color: var(--no); background: transparent; }
/* O caminho de volta à página principal, para o navegador que pediu a antiga. */
.troca-casca {
  font-size: 11px; color: var(--fraco); letter-spacing: .4px; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--raio-pill);
}
.troca-casca:hover { color: var(--text); border-color: var(--line-forte); background: none; }

/* ---------------------------------------------------------------- caixas -- */

.cartao {
  background: var(--card);
  border: 1px solid var(--line-forte);
  border-left: var(--trilho) solid var(--line);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
  box-shadow: var(--sombra);
}
.cartao.atraso { border-left-color: var(--no); }
.cartao.sugestoes { border-left-color: var(--accent); }

.grade { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grade > div { min-width: 0; }

.rotulo {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--fraco); font-weight: 600; display: block; margin-bottom: 2px;
}
.vazio { color: var(--fraco); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; }

.explica { color: var(--muted); font-size: 16px; max-width: 72ch; margin: -6px 0 var(--e4); }

/* ---------------------------------------------------------------- tabela -- */

.rolavel { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--fraco); font-weight: 600;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-forte);
  white-space: nowrap;
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  border-left: var(--trilho) solid transparent;
}
td + td { border-left: 0; }
tbody tr { transition: background-color var(--troca); }
tbody tr:hover td { background: var(--alto); }
tbody tr:hover td:first-child { border-left-color: var(--accent); }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.motivo { color: var(--fraco); font-size: 15px; max-width: 30ch; }
td.acoes form { display: flex; gap: var(--e1); }

table.larga { font-size: 16px; white-space: nowrap; }
table.larga td:first-child { white-space: normal; min-width: 17rem; }
td.s-ganho { color: var(--ok); }
td.s-perdido { color: var(--no); }
td.s-aberto { color: var(--muted); }

/* ---------------------------------------------------------------- campos -- */

label {
  display: block; margin: var(--e2) 0;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--fraco); font-weight: 600;
}
input, select, textarea {
  width: 100%; margin-top: var(--e1);
  padding: 7px 9px;
  font: inherit; font-size: 16px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-forte);
  border-radius: var(--raio-p);
  transition: border-color var(--troca), box-shadow var(--troca);
}
input:hover, select:hover, textarea:hover { border-color: #4a4a4a; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-forte);
  box-shadow: 0 0 0 3px var(--cobre-fraco);
  outline: none;
}
input[type="date"], input[type="datetime-local"], input[type="number"] { font-family: var(--mono); }

button {
  font: inherit; font-size: 16px;
  padding: 7px 14px;
  border-radius: var(--raio-p);
  cursor: pointer;
  background: var(--alto); color: var(--text);
  border: 1px solid var(--line-forte);
  white-space: nowrap;
  transition: background-color var(--troca), border-color var(--troca),
              color var(--troca), transform var(--troca);
}
button:hover { border-color: var(--accent-forte); color: #fff; }
button:active { transform: translateY(1px); }
button.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
button.principal:hover { background: var(--accent-forte); border-color: var(--accent-forte); }
button.perigo { border-color: var(--no); color: var(--no); }
button.perigo:hover { background: var(--no); color: #fff; }

.linha-form { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: flex-end; }
.linha-form label { flex: 1; min-width: 150px; margin: 0; }

.filtros {
  display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-end;
  padding: var(--e3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  margin-bottom: var(--e3);
}
.filtros label { margin: 0; }
.filtros select, .filtros input { min-width: 9rem; }
.filtros select { max-width: 15rem; }
.filtros button { margin-bottom: 1px; }
.filtros a.link-limpar { align-self: center; font-size: 15px; color: var(--muted); padding: 6px; }

/* ----------------------------------------------------------------- funil -- */

.funil {
  display: flex; gap: var(--e2);
  overflow-x: auto;
  padding-bottom: var(--e3);
  align-items: stretch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-forte) transparent;
}
.funil::-webkit-scrollbar { height: 8px; }
.funil::-webkit-scrollbar-thumb { background: var(--line-forte); border-radius: var(--raio-pill); }
/* Cada coluna rola por dentro. Sem isso os 68 cards de Negociação esticavam a
   página inteira, e comparar duas colunas exigia rolar quilômetros: o quadro
   cabe na janela e cada pilha tem a própria barra. */
/* A entrada usa fill `backwards`, NUNCA `both`/`forwards` — e não é capricho:
   com o fill valendo depois do fim, a animação de transform continua "aplicada"
   para sempre, e um elemento com transform animado é containing block de
   `position: fixed`. Foi assim que a janela do card de agenda ficou presa
   DENTRO da coluna: recortada na borda dela, com o véu cobrindo só a coluna.
   O quadro final é igual ao estado natural, então `forwards` não acrescenta
   nada; `backwards` cobre o atraso escalonado e solta o elemento ao terminar. */
.coluna {
  min-width: 272px; flex: 1;
  display: flex; flex-direction: column;
  /* Altura FIXA, não máxima: com max-height a coluna encolhia até o conteúdo e
     o quadro ficava serrilhado — dia vazio baixo, dia cheio alto. Toda coluna
     tem a mesma altura, e o que passa rola por dentro dela. */
  height: calc(100vh - 285px);
  min-height: 460px;
  background: var(--card);
  border: 1px solid var(--line-forte);
  border-radius: var(--raio);
  transition: border-color var(--troca), background-color var(--troca);
  animation: sobe var(--troca) backwards;
}
/* Cabeçalho: nome, contagem e soma na mesma linha — o formato do RD. Empilhar
   a soma numa segunda linha custava altura em cada uma das sete colunas para
   dizer um número que cabe ao lado. */
.coluna h2 { margin: 0; padding: 10px 11px; border-bottom: 1px solid var(--line); gap: var(--e2); }
.coluna h2::after { content: ""; flex: 1; height: 0; background: none; }
.coluna h2 span {
  font-family: var(--mono); color: var(--muted); letter-spacing: 0; font-size: 14.5px;
  background: var(--alto); border-radius: var(--raio-pill); padding: 1px 7px; order: 2;
}
.coluna h2 b {
  order: 3; margin-left: auto; font-family: var(--mono); font-size: 13.5px; font-weight: 400;
  color: var(--fraco); letter-spacing: 0; font-variant-numeric: tabular-nums;
  /* A soma não quebra linha: partida em duas, ela deixa de ser um número. */
  white-space: nowrap;
}
.coluna h2 { min-width: 0; }
.coluna h2:first-line { white-space: nowrap; }
.coluna .soma { padding: var(--e2) 11px 0; font-size: 13.5px; }
.coluna .soma .parados { color: var(--prazo-4); font-style: normal; }
.coluna .pilha {
  display: flex; flex-direction: column; gap: var(--e1);
  padding: 0 var(--e1) var(--e1); min-height: 56px;
  flex: 1; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-forte) transparent;
}
.coluna .pilha::-webkit-scrollbar { width: 8px; }
.coluna .pilha::-webkit-scrollbar-thumb { background: var(--line-forte); border-radius: var(--raio-pill); }
.coluna .pilha .vazio { padding: var(--e3) var(--e2); font-size: 15px; }
.coluna.final { opacity: .7; }
.coluna.final:hover { opacity: 1; }

/* Alvo de arrasto: o trilho de estado da coluna acende e o fundo recebe a
   lavagem de cobre. Sem isso não se sabe onde o card vai cair. */
.coluna.alvo.sobre {
  border-color: var(--accent-forte);
  background: linear-gradient(var(--cobre-fraco), transparent 60%), var(--card);
}
.coluna.alvo.sobre .pilha { outline: 1px dashed var(--accent); outline-offset: -2px; border-radius: var(--raio-p); }

.card {
  display: block;
  padding: 9px 10px;
  background: var(--alto);
  border: 1px solid #3a3a3a;
  border-left: var(--trilho) solid var(--line-forte);
  border-radius: var(--raio-p);
  color: inherit;
  cursor: grab;
  transition: transform var(--troca), border-color var(--troca),
              box-shadow var(--troca), background-color var(--troca);
}
.card:hover {
  background: #262626;
  border-color: var(--line-forte);
  border-left-color: var(--accent-forte);
  transform: translateY(-1px);
  box-shadow: var(--sombra-alta);
}
/* A ordem de leitura é a do card do RD: situação, nome, empresa, números.
   A situação vem primeiro porque é o que permite varrer a coluna inteira sem
   ler nome nenhum — o quadradinho de cor faz esse trabalho antes da palavra. */
.card .situacao {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600;
  color: var(--muted); margin-bottom: 5px;
}
.card .situacao i {
  width: 8px; height: 8px; border-radius: var(--raio-fino);
  background: currentColor; flex: 0 0 auto;
}
.card .situacao b {
  margin-left: auto; font-family: var(--mono); font-weight: 400;
  letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--fraco);
  /* O `d` de dias é minúsculo: a caixa alta do rótulo ao lado não vale para o
     número, e "817D" lê-se como sigla, não como duração. */
  text-transform: none;
}
/* Nome sem espaço (razão social colada, e-mail) quebra dentro do card em vez
   de vazar e abrir rolagem horizontal na coluna. */
.card .cli { font-weight: 600; display: block; line-height: 1.3; overflow-wrap: anywhere; }
.card .titulo { color: var(--muted); font-size: 15.5px; margin-top: 1px; display: block; overflow-wrap: anywhere; }
.card .meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2);
  font-size: 14.5px; color: var(--muted);
  margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line);
}
.card .meta .valor { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.card .meta .dono { color: var(--fraco); font-size: 13.5px; }
/* A cor do card é o semáforo do prazo: borda e rótulo sólidos, sem lavagem de
   gradiente no fundo — a lavagem era a "faixa confusa" que o dono do produto
   mandou tirar. O fundo do card é um só; quem fala é o trilho e o rótulo. */
.card.n0 { border-left-color: var(--line-forte); }
.card.n1 { border-left-color: var(--prazo-1); }
.card.n2 { border-left-color: var(--prazo-2); }
.card.n3 { border-left-color: var(--prazo-3); }
.card.n4 { border-left-color: var(--prazo-4); }
.card.n0 .situacao { color: var(--fraco); }
.card.n1 .situacao { color: var(--prazo-1); }
.card.n2 .situacao { color: var(--prazo-2); }
.card.n3 .situacao { color: var(--prazo-3); }
.card.n4 .situacao { color: var(--prazo-4); }
.card.n4 .situacao b { color: var(--prazo-4); font-weight: 600; }

/* Legenda da escala, no topo do quadro. Escala ordinal sem legenda é enfeite:
   quem olha não tem como saber que o mais claro é o pior. */
.legenda-idade {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin: -6px 0 var(--e3); font-size: 15px; color: var(--muted);
}
.legenda-idade .rotulo { margin: 0; }
.legenda-idade .passo { display: inline-flex; align-items: center; gap: 5px; }
.legenda-idade .passo i {
  width: 12px; height: var(--trilho); border-radius: 2px; display: inline-block;
}
.legenda-idade .passo.n0 i { background: var(--line-forte); }
.legenda-idade .passo.n1 i { background: var(--prazo-1); }
.legenda-idade .passo.n2 i { background: var(--prazo-2); }
.legenda-idade .passo.n3 i { background: var(--prazo-3); }
.legenda-idade .passo.n4 i { background: var(--prazo-4); }
.legenda-idade em { color: var(--fraco); font-style: normal; flex: 1 1 22rem; min-width: 0; }

/* Os sinais que não são tempo entram como etiqueta, não como cor: são fatos de
   outra natureza e disputariam a leitura da escala de idade. */
.card .sinais { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: 5px; }
.card .sinal {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--raio-pill); border: 1px solid currentColor; opacity: .9;
}
.card .sinal.vencida { color: var(--no); }
.card .sinal.aguardando { color: var(--aviso); }
.card .sinal.marcada { color: var(--ok); }
/* A venda que veio da agenda e ainda não tem empresa cadastrada. Sem esta
   etiqueta ela atravessa o quadro parecendo inteira e só trava ao ganhar. */
.card .sinal.falta { color: var(--aviso); }
.card.arrastando { opacity: .35; cursor: grabbing; transform: scale(.97); box-shadow: none; }

/* ---------------------------------------------------------------- agenda -- */

.navega-datas {
  display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap;
  margin: 0 0 var(--e4);
}
.navega-datas a, .navega-datas .desativado {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--raio-p);
  border: 1px solid var(--line);
  font-size: 15px; color: var(--muted);
  transition: border-color var(--troca), color var(--troca), background-color var(--troca);
}
.navega-datas a:hover { border-color: var(--accent-forte); color: var(--text); background: var(--alto); }
.navega-datas .desativado { color: var(--fraco); opacity: .5; }
.navega-datas .periodo {
  margin-left: auto; color: var(--fraco); font-size: 15px;
  font-family: var(--mono); border: 0; padding: 0;
}
.navega-datas svg { width: 9px; height: 9px; flex: 0 0 auto; }

.cartao.atraso ul, .cartao.sugestoes ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px;
}
.cartao.atraso li { font-size: 15.5px; display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap; }
.cartao.atraso li b { font-family: var(--mono); color: var(--no); }

/* ------------------------------------------------------------- etiquetas -- */

/* Etiqueta nasce com folga à esquerda: ela quase sempre segue um texto, e
   colada nele vira parte da palavra. */
.etiqueta {
  display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: var(--raio-pill);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600;
  border: 1px solid var(--line-forte); color: var(--muted);
  vertical-align: middle;
}
.etiqueta.enviado { border-color: var(--aviso); color: var(--aviso); }
.etiqueta.aceito { border-color: var(--ok); color: var(--ok); }
.etiqueta.recusado { border-color: var(--no); color: var(--no); }
h1 .etiqueta { border-color: var(--accent); color: var(--accent-forte); margin-left: 0; }
td .etiqueta { margin-left: 6px; }
.cartao.sugestoes .etiqueta { margin-left: 0; }

.aviso {
  padding: 10px var(--e3);
  border: 1px solid var(--line);
  border-left: var(--trilho) solid var(--aviso);
  border-radius: var(--raio-p);
  background: var(--card);
  color: var(--muted);
  margin-bottom: var(--e3);
  font-size: 16px;
}
.aviso.erro { border-left-color: var(--no); color: #e8b6a8; }

.cartao.sugestoes li { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; font-size: 16px; }
.cartao.sugestoes form { display: flex; gap: var(--e1); margin-left: auto; }

/* ----------------------------------------------------------------- somas -- */

.somas { display: flex; gap: var(--e6); flex-wrap: wrap; }
.somas div { min-width: 150px; }
.somas .valor {
  font-family: var(--mono); font-size: 26px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px; display: block;
}

/* --------------------------------------------------------------- entrada -- */

.tela-entrada {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  /* Um halo de cobre atrás do cartão: a única superfície do sistema sem menu,
     sem dado e sem tarefa — é onde o gesto de marca cabe. */
  background:
    radial-gradient(600px 320px at 50% 38%, rgba(160,85,38,.14), transparent 70%),
    var(--bg);
}
.cartao-entrada {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  padding: var(--e6) var(--e5);
  width: min(348px, 92vw);
  box-shadow: var(--sombra-alta);
  animation: sobe 220ms cubic-bezier(.2, .8, .3, 1) backwards;
}
.cartao-entrada .marca-lockup { justify-content: center; margin-bottom: var(--e1); }
.cartao-entrada .sub {
  color: var(--fraco); font-size: 13.5px; text-align: center;
  margin: 0 0 var(--e5); letter-spacing: .9px; text-transform: uppercase;
}
.cartao-entrada button { width: 100%; margin-top: var(--e4); }
.rodape-entrada { text-align: center; margin: 18px 0 0; }
.rodape-entrada a { font-size: 11px; color: var(--fraco); text-transform: uppercase; letter-spacing: .4px; }
.rodape-entrada a:hover { color: var(--muted); background: none; }

/* ------------------------------------------------------------- movimento -- */

/* A entrada anima SÓ a posição, nunca a opacidade.
   Um `from { opacity: 0 }` com `animation-fill-mode: both` deixa o elemento
   invisível enquanto o atraso corre — e se a animação não rodar por qualquer
   motivo (captura de tela, impressão, pintura interrompida, navegador que a
   ignora), o conteúdo simplesmente não existe. Aconteceu aqui: a agenda inteira
   saiu em branco numa captura com os sete dias no HTML.

   Conteúdo não pode depender de animação para aparecer. Deslocamento pode:
   se a animação não rodar, o elemento já está no lugar certo. */
@keyframes sobe {
  from { transform: translateY(7px); }
  to   { transform: none; }
}

/* Escalonar a entrada das colunas e dos dias: a tela se monta da esquerda para
   a direita, na ordem em que se lê. Seis passos bastam — além disso a última
   coluna chegaria depois de quem já começou a trabalhar. */
.funil .coluna:nth-child(1), .semana .dia:nth-child(1) { animation-delay: 0ms; }
.funil .coluna:nth-child(2), .semana .dia:nth-child(2) { animation-delay: 40ms; }
.funil .coluna:nth-child(3), .semana .dia:nth-child(3) { animation-delay: 80ms; }
.funil .coluna:nth-child(4), .semana .dia:nth-child(4) { animation-delay: 120ms; }
.funil .coluna:nth-child(5), .semana .dia:nth-child(5) { animation-delay: 160ms; }
.funil .coluna:nth-child(n+6), .semana .dia:nth-child(n+6) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .marca-lockup:hover .marca-logo { transform: none; }
  .card:hover { transform: none; }
}

/* ------------------------------------------------------------------ tela -- */

@media (max-width: 720px) {
  .topo { gap: var(--e3); padding: var(--e2) var(--e3); }
  .marca { font-size: 22px; }
  .marca-logo { width: 40px; height: 40px; }
  main { padding: var(--e4) var(--e3) 40px; }
  .somas { gap: var(--e4); }
  /* Em tela estreita o card encolhe para o avatar e o botão de sair. */
  .usuario-info { display: none; }
}

/* ------------------------------------------------- proposta impressa ------ */
/* A proposta é o único lugar claro do sistema: ela vai para o papel e para a
   mão do cliente, e tinta preta em fundo escuro não se imprime. */

body.folha { background: #2a2a2a; padding: var(--e5) var(--e3); color: #16202a; }
.proposta { max-width: 800px; margin: 0 auto; background: #fff; padding: 42px; }
.proposta header {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 3px solid #ff6b00; padding-bottom: var(--e3); margin-bottom: var(--e5);
}
.proposta .marca-lockup .marca { color: #0a0a0a; }
.proposta .marca-lockup:hover .marca-logo { transform: none; filter: none; }
.dados-proposta { text-align: right; font-size: 15px; color: #5a6a72; }
.proposta .para { margin-bottom: var(--e5); }
.proposta table { width: 100%; }
.proposta thead th { color: #5a6a72; border-bottom: 1px solid #0a0a0a; background: transparent; }
.proposta td { border-bottom: 1px solid #e4e4e4; border-left: 0; }
.proposta tbody tr:hover td { background: transparent; }
.proposta tbody tr:hover td:first-child { border-left-color: transparent; }
.totais {
  margin-top: var(--e5); display: flex; gap: var(--e6); justify-content: flex-end;
  flex-wrap: wrap; font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.totais .rotulo { color: #5a6a72; }
.condicoes p { font-size: 15px; color: #5a6a72; }
.condicoes h2 { color: #5a6a72; }
.condicoes h2::after { background: #e4e4e4; }
.assinatura { margin-top: 46px; border-top: 1px solid #e4e4e4; padding-top: var(--e2); font-size: 15px; }
.so-tela { text-align: center; font-size: 15px; color: #cfcfcf; }
.so-tela a { color: var(--accent-forte); }

@media print {
  body.folha { background: #fff; padding: 0; }
  .proposta { padding: 0; }
  .so-tela { display: none; }
}

/* --- criação rápida nas páginas ------------------------------------------ */
/* O formulário mora na página onde a coisa criada vai aparecer: marcar
   compromisso na agenda, abrir orçamento no funil — sem desviar pela ficha. */
.criar-rapido {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end;
  background: var(--card); border: 1px solid var(--line);
  border-left: var(--trilho) solid var(--accent);
  border-radius: var(--raio); padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
}
.criar-rapido label, .criar-rapido .campo { flex: 1 1 260px; margin: 0; }
/* O bloco de marcação ocupa a linha inteira. Como campo comum ele ficava numa
   coluna de 260px, e os catorze tipos da casa se empilhavam em nove fileiras
   estreitas — uma torre de 283px de altura ao lado de um vazio do tamanho dela.
   Na largura toda as mesmas pílulas cabem em três linhas, e os campos vizinhos
   fecham o buraco. */
.criar-rapido .campo.largo { flex: 1 1 100%; }

/* O campo que falta: o recado nasce colado nele, e não numa faixa vermelha no
   alto da página. A faixa dizia o quê sem dizer onde, e a janela fechava
   levando junto o que já estava digitado — a pessoa procurava e redigitava.
   O trilho de 3px na borda esquerda é o mesmo gesto de estado do resto da
   casa, aqui na cor de perigo. */
.criar-rapido .campo.falta {
  border-left: var(--trilho) solid var(--no);
  padding-left: var(--e2);
}
.criar-rapido .campo.falta > input,
.criar-rapido .campo.falta > select,
.criar-rapido .campo.falta .marcacoes { border-color: var(--no); }
.recado-campo {
  display: block; margin-top: var(--e1);
  font-style: normal; font-size: 13px; color: var(--no);
}
.linha-form select, .criar-rapido select { max-width: 100%; }
.cartao .linha-form + .linha-form { margin-top: var(--e3); padding-top: var(--e3);
  border-top: 1px solid var(--line); }

/* --- troca de funil e filtros da agenda ---------------------------------- */
.troca-funil { display: flex; gap: var(--e1); margin: -6px 0 var(--e3); flex-wrap: wrap; }
.troca-funil a, .filtros-agenda a {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--raio-pill);
  color: var(--muted); font-size: 13.5px;
  transition: border-color var(--troca), color var(--troca), background-color var(--troca);
}
.troca-funil a:hover, .filtros-agenda a:hover { border-color: var(--accent-forte); color: var(--text); }
.troca-funil a.ativo, .filtros-agenda a.ativo {
  border-color: var(--accent); background: var(--cobre-fraco); color: var(--text);
}
.filtros-agenda { display: inline-flex; gap: var(--e1); margin-left: var(--e3); flex-wrap: wrap; }
.filtros-agenda .qtd { color: var(--prazo-4); font-family: var(--mono); }

/* --- a barra sobre o quadro ----------------------------------------------- */
/* Controles à esquerda, o botão de criar em cobre na ponta direita — pedido do
   dono do produto: criar é a ação da página e não pode parecer mais um filtro. */
.barra-quadro {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin: 0 0 var(--e3);
}
.barra-quadro .criar-rapido-dobra { margin-left: auto; }
/* Duas janelas na mesma barra ficam juntas na ponta direita: só a primeira
   empurra, a segunda senta ao lado — senão as duas se espalham pelo meio. */
.barra-quadro .criar-rapido-dobra + .criar-rapido-dobra { margin-left: 0; }

.controle-semana {
  display: flex; align-items: center; gap: 2px;
  background: var(--card); border: 1px solid var(--line-forte);
  border-radius: var(--raio-p); padding: 3px;
}
.controle-semana .passo {
  display: flex; align-items: center; padding: 7px 10px;
  border-radius: 4px; color: var(--muted);
}
.controle-semana .passo:hover { background: var(--alto); color: var(--text); }
.controle-semana .passo svg { width: 10px; height: 10px; }
.controle-semana .faixa-semana {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14.5px; color: var(--text); padding: 0 var(--e2);
  white-space: nowrap;
}
.controle-semana .volta-hoje {
  border-left: 1px solid var(--line); margin-left: 4px;
  padding: 7px 12px; border-radius: 4px;
  color: var(--accent-forte); font-size: 13.5px; white-space: nowrap;
}
.controle-semana .volta-hoje:hover { background: var(--cobre-fraco); }

/* --- criação dobrável: botão em cobre, painel suspenso --------------------- */
/* O painel abre POR CIMA do quadro, ancorado à direita: abrir o formulário não
   pode empurrar as colunas para baixo — quem estava mirando um card perderia o
   alvo no meio do gesto. */
.criar-rapido-dobra { position: relative; margin: 0; }
.criar-rapido-dobra > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 8px 16px; border: 1px solid var(--accent);
  border-radius: var(--raio-p); background: var(--accent);
  font-size: 14.5px; font-weight: 600; color: #fff;
  box-shadow: var(--sombra-sm);
  transition: background-color var(--troca), border-color var(--troca);
}
.criar-rapido-dobra > summary::before { content: "+"; font-weight: 700; }
.criar-rapido-dobra > summary:hover,
.criar-rapido-dobra[open] > summary { background: var(--accent-forte); border-color: var(--accent-forte); }
/* A janela de criação abre no MEIO da tela, com o resto desfocado atrás —
   colada no canto do botão ela parecia um menu perdido (pedido do dono do
   produto, 28/08/2026). O véu é ::before do próprio <details>: clique nele
   (ou Esc, ou Cancelar) fecha, tratado no app.js. */
.criar-rapido-dobra[open]::before {
  content: ""; position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.criar-rapido-dobra .criar-rapido {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 41;
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 64px); overflow-y: auto;
  margin: 0; background: var(--card);
  border-color: var(--line-forte);
  box-shadow: var(--sombra-lg);
}
/* A janela de completar mora na ficha da negociação, não numa barra de quadro:
   precisa do respiro que a barra dava. O rótulo sai em âmbar porque o que ela
   guarda é pendência — a venda que saiu da coluna de entrada sem empresa, sem
   tipo ou sem valor —, e não mais um "criar". */
.criar-rapido-dobra.completar { margin: 0 0 var(--e4); }
.criar-rapido-dobra.completar > summary {
  background: none; color: var(--aviso); border-color: var(--aviso);
  box-shadow: none;
}
.criar-rapido-dobra.completar > summary::before { content: none; }
.criar-rapido-dobra.completar > summary:hover,
.criar-rapido-dobra.completar[open] > summary {
  background: rgba(201, 162, 39, .14); border-color: var(--aviso);
}
.criar-rapido-dobra.completar .criar-rapido { border-left-color: var(--aviso); }

.criar-rapido .acoes-janela {
  flex-basis: 100%; display: flex; gap: var(--e3); align-items: center;
  margin-top: var(--e1);
}
.criar-rapido .acoes-janela .cancelar {
  background: none; border-color: var(--line-forte); color: var(--muted);
}
.criar-rapido .acoes-janela .cancelar:hover { color: var(--text); border-color: var(--muted); }
.criar-rapido .explica { flex-basis: 100%; margin: 0; }
.explica-linha { color: var(--fraco); font-size: 12.5px; flex-basis: 100%; }
.lista-funis { margin: var(--e2) 0 0; padding-left: 1.2em; color: var(--muted); font-size: 13.5px; }
.lista-funis b { color: var(--text); }

/* --- estados do card de agenda e das colunas finais ----------------------- */
.card.agenda .cli a { color: inherit; }
.card.agenda.atrasado { border-left-color: var(--prazo-4); }
.card.agenda.atrasado .situacao { color: var(--prazo-4); }
.card.agenda.concluido { opacity: .55; border-left-color: var(--ok); }
.card.n-ganha { border-left-color: var(--ok); }
.card.n-perdida { border-left-color: var(--no); opacity: .7; }
.coluna.ganha h2 { color: var(--ok); }
.coluna.concluida h2 { color: var(--ok); }
.coluna.e-hoje { border-color: var(--accent-forte); }
.pilha-lista { display: flex; flex-direction: column; gap: var(--e1); max-width: 560px; }
.s-ganha { color: var(--ok); }
.s-perdida { color: var(--no); }
.s-aberta { color: var(--muted); }

/* --- follow-up: a proposta sendo cobrada, dentro do quadro ---------------- */
/* O card da etapa de follow-up segue o semáforo (.n0–.n4) da escada de
   contato — verde no dia do contato — e carrega botões na face, por isso é
   bloco, e não link: o nome da empresa é o link para a ficha. */
.card.follow { cursor: grab; }
.card.follow a.cli { color: inherit; }
.card.follow a.cli:hover { color: var(--accent-forte); }
.card .acoes-face {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px;
  padding-top: 6px; border-top: 1px solid var(--line);
}
.card .acoes-face form.na-face { display: contents; }
.card .acao-face {
  display: inline-block; padding: 2px 9px; font-size: 12.5px; line-height: 1.5;
  background: none; border: 1px solid var(--line-forte); color: var(--muted);
  border-radius: var(--raio-pill);
}
.card .acao-face:hover { border-color: var(--accent-forte); color: var(--text); background: none; }
.card .acao-face.principal-face { border-color: var(--accent); color: var(--accent-forte); }
.card .acao-face.principal-face:hover { background: var(--cobre-fraco); }
.card .acao-face.aprovar { border-color: var(--ok); color: var(--ok); }
.card .acao-face.declinar { border-color: var(--no); color: var(--no); }
/* A janela "Ainda em negociação" mora fora do quadro e não tem face: só o
   botão do card (ou o "abrir" da agenda) a abre. */
.modal-ainda > summary { display: none; }
.janela-topo .situacao.n1 { color: var(--prazo-1); }
.janela-topo .situacao.n2 { color: var(--prazo-2); }
.janela-topo .situacao.n3 { color: var(--prazo-3); }
.janela-topo .situacao.n4 { color: var(--prazo-4); }
/* A escada de contato desenhada: os degraus feitos apagados, o atual aceso. */
.escada-follow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e3); }
.escada-follow .degrau {
  font-family: var(--mono); font-size: 12.5px; padding: 2px 9px;
  border: 1px solid var(--line-forte); border-radius: var(--raio-pill); color: var(--fraco);
}
.escada-follow .degrau.feito { color: var(--ok); border-color: var(--ok); opacity: .7; }
.escada-follow .degrau.atual { color: var(--text); border-color: var(--accent-forte); background: var(--cobre-fraco); }
.escada-follow .degrau.decisao { font-family: inherit; }
.decisao-follow { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; }
.decisao-follow .criar-rapido { flex: 1 1 200px; }
.titulo-agenda { margin: var(--e3) 0 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--fraco); }
.agenda-contato { width: 100%; margin-top: var(--e2); font-size: 14px; border-collapse: collapse; }
.agenda-contato td { padding: 5px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.agenda-contato td:first-child { font-family: var(--mono); white-space: nowrap; }
.dados-card dd.fone a.whatsapp { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* A janela de Follow-up da barra: a lista de quem espera o dia do contato —
   a mesma janela centrada da criação, com uma tabela dentro em vez de
   formulário, por isso volta a ser bloco. */
.janela-agendados { display: block; }
.janela-agendados .janela-topo { margin-bottom: var(--e2); }
.janela-agendados table { width: 100%; }
.agendados .quando { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A linha leva a situação do card (o semáforo .n0–.n4 da escada de contato),
   para o atrasado e a decisão pendente cobrarem também na lista — o
   componente é o mesmo do card, e aqui ganha a cor pelo nível. */
.agendados .situacao {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600;
  color: var(--fraco); white-space: nowrap;
}
.agendados .situacao i {
  width: 8px; height: 8px; border-radius: var(--raio-fino);
  background: currentColor; flex: 0 0 auto;
}
.agendados .situacao.n1 { color: var(--prazo-1); }
.agendados .situacao.n2 { color: var(--prazo-2); }
.agendados .situacao.n3 { color: var(--prazo-3); }
.agendados .situacao.n4 { color: var(--prazo-4); }
/* Os gestos da linha (abrir, perdida, excluir) numa coluna estreita: ficam
   um sobre o outro, alinhados à direita, sem esticar a tabela. */
.agendados td.acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* --- faturamento: o quadro do pós-venda ----------------------------------- */
/* Quatro estados, quatro cores no cabeçalho e no trilho do card: aprovado é
   neutro (nada entrou nem saiu ainda), recebido-a-realizar é âmbar (dinheiro
   dentro, entrega pendente), realizado-a-receber é cobre (entrega feita,
   cobrança aberta) e finalizado é verde (fechado). É a mesma leitura de longe
   do semáforo de prazo, aplicada ao ciclo de caixa. */
.coluna.fat-aprovado_realizar h2 { color: var(--muted); }
.coluna.fat-recebido_realizar h2 { color: var(--aviso); }
.coluna.fat-realizado_receber h2 { color: var(--accent-forte); }
.coluna.fat-recebido_finalizado h2 { color: var(--ok); }
.card.fat { border-left-color: var(--line-forte); }
.card.fat .situacao { color: var(--text); letter-spacing: .3px; text-transform: none; font-size: 15px; }
.card.fat .situacao i { display: none; }
/* O telefone do contato no card do pós-venda: um link, com a cor da casa e
   sem sublinhado, que abre a conversa no WhatsApp. Sem link, é só texto. */
.card .fone { font-size: 14.5px; margin-top: 3px; display: block; }
.card .fone a.whatsapp { font-family: var(--mono); font-variant-numeric: tabular-nums; padding: 0 3px; }
.card .fone .fone-texto { font-family: var(--mono); color: var(--muted); }
.card.fat .cli a { color: inherit; }
.coluna.fat-recebido_realizar .card.fat { border-left-color: var(--aviso); }
.coluna.fat-realizado_receber .card.fat { border-left-color: var(--accent-forte); }
.coluna.fat-recebido_finalizado .card.fat { border-left-color: var(--ok); opacity: .85; }
/* A marca de já cobrado na face do card: o dia da última cobrança, em âmbar —
   a mesma cor de "dinheiro pendente" do cabeçalho de Recebido a realizar. É
   informação, não botão: cobrar de novo continua sendo a dobra logo abaixo. */
.card.fat .cobrado {
  display: block; margin-top: 4px; font-size: 12.5px; color: var(--aviso);
  font-variant-numeric: tabular-nums;
}
/* O histórico de cobranças dentro da dobra usa a tabela da agenda de contato,
   que é a mesma leitura: dia, o que foi dito e quem fez. */
.dobra-no-card .agenda-contato { font-size: 13px; margin-top: var(--e1); }

/* --- perfil: a janela suspensa do cabeçalho ------------------------------- */
/* O perfil não é página: abre por cima da tela, ancorado no card de usuário,
   como as dobras de criação abrem sobre os quadros. */
.usuario-card { position: relative; }
.perfil-dobra > summary { list-style: none; cursor: pointer; border-radius: var(--raio-pill); }
.perfil-dobra > summary::-webkit-details-marker { display: none; }
.perfil-dobra[open] > summary .usuario-nome { color: #fff; }
.painel-perfil {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
  width: min(340px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--line-forte);
  border-left: var(--trilho) solid var(--accent);
  border-radius: var(--raio);
  padding: var(--e4);
  box-shadow: var(--sombra-lg);
  animation: sobe var(--troca) backwards;
}
.perfil-topo { display: flex; gap: var(--e3); align-items: center; }
.perfil-topo label { flex: 1; margin: 0; }
.perfil-acoes { display: flex; gap: var(--e3); align-items: center; margin-top: var(--e3); }
.perfil-acoes a { color: var(--muted); font-size: 14px; }
.perfil-acoes a:hover { color: var(--text); }
.foto-previa {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line-forte); background: var(--alto);
  display: block; flex: 0 0 auto;
}
.foto-previa.vazia {
  display: flex; align-items: center; justify-content: center;
  color: var(--fraco); font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}

/* Marca de "não veio do cadastro": cliente fora da base na agenda, ou
   faturamento lançado à mão. Etiqueta discreta, na língua do trilho de estado. */
.fora-base {
  margin-left: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--fraco); border: 1px solid var(--line-forte); border-radius: var(--raio-pill);
  padding: 0 6px; white-space: nowrap;
}

/* --- empresas: busca, faixa de resumo e recortes -------------------------- */
/* A lista é o trabalho da tela; a busca abre a página com o mesmo peso que o
   controle de semana tem na agenda. */
.busca-empresas { display: flex; gap: var(--e2); align-items: center; flex: 1 1 340px; max-width: 620px; }
.busca-empresas input { margin-top: 0; }
.busca-empresas .link-limpar { color: var(--muted); font-size: 15px; padding: 6px; white-space: nowrap; }

/* A faixa de resumo diz o tamanho do parque numa linha. O recorte é um filtro
   vestido de etiqueta: acende em cobre quando está ativo, como o item de menu. */
.faixa-resumo {
  display: flex; gap: var(--e5); flex-wrap: wrap; align-items: baseline;
  margin: 0 0 var(--e3); color: var(--muted); font-size: 15px;
}
.faixa-resumo b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--text); font-size: 18px; font-weight: 600; margin-right: 4px;
}
.faixa-resumo .recorte {
  border: 1px solid var(--line); border-radius: var(--raio-pill);
  border-left: var(--trilho) solid var(--aviso);
  padding: 3px 12px; font-size: 13.5px; color: var(--muted);
  transition: border-color var(--troca), color var(--troca), background-color var(--troca);
}
.faixa-resumo .recorte:hover { border-color: var(--accent-forte); color: var(--text); }
.faixa-resumo .recorte.ativo { border-color: var(--accent); background: var(--cobre-fraco); color: var(--text); }

td.sem-dado { color: var(--fraco); font-size: 13.5px; text-transform: uppercase; letter-spacing: .6px; }
.etiqueta.origem-moni { border-color: var(--accent); color: var(--accent-forte); margin-left: 0; }
td .etiqueta { margin-left: 0; }

/* --- cadastros: fichas e o trilho do funil -------------------------------- */
/* A contagem no título, no mesmo formato da contagem das colunas do quadro. */
h2 .qtd-cadastro {
  font-family: var(--mono); color: var(--muted); letter-spacing: 0; font-size: 13.5px;
  background: var(--alto); border-radius: var(--raio-pill); padding: 1px 8px;
}

.grade-cadastros { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; margin-bottom: var(--e3); }
.grade-cadastros .cartao { margin-bottom: 0; }

/* O que já existe, como fichas: dado se lê de relance, não como frase. */
.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e3); }
.ficha {
  padding: 3px 11px; border: 1px solid var(--line-forte); border-radius: var(--raio-pill);
  font-size: 13.5px; color: var(--muted); background: var(--bg);
  transition: border-color var(--troca), color var(--troca);
}
.ficha:hover { border-color: var(--accent); color: var(--text); }

/* O funil desenhado como trilho de etapas — a miniatura do quadro. Cada etapa
   carrega o trilho de estado e o prazo em mono; a seta é o mesmo chevron SVG. */
.trilho-funil {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2);
  margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--line);
}
.trilho-funil .nome-funil {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .9px; font-weight: 600;
  color: var(--accent-forte); margin-right: var(--e2);
}
.trilho-funil .etapa {
  border: 1px solid var(--line-forte); border-left: var(--trilho) solid var(--accent);
  border-radius: var(--raio-p); padding: 4px 10px; font-size: 14px; background: var(--alto);
  white-space: nowrap;
}
.trilho-funil .etapa b {
  font-family: var(--mono); color: var(--fraco); font-weight: 400;
  font-size: 12.5px; margin-left: 7px;
}
.trilho-funil .seta { display: inline-flex; color: var(--fraco); }
.trilho-funil .seta svg { width: 8px; height: 8px; }

/* Os tipos de serviço da venda, no card e na ficha. Etiqueta em cobre, discreta:
   é o que a negociação vende, não o estado dela — quem grita é o semáforo do
   prazo. Uma venda pode carregar mais de uma. */
.tipos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tipos .tipo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--accent-forte); border: 1px solid var(--line-forte);
  border-radius: var(--raio-pill); padding: 1px 8px; background: var(--bg);
}

/* Caixas de marcação do tipo de serviço, no formulário. Sem sublinhado e sem
   emoji, como o resto: a marca é a borda em cobre quando a caixa está marcada. */
.marcacoes {
  border: 1px solid var(--line); border-radius: var(--raio-p);
  padding: var(--e2) var(--e3) var(--e3); margin: 0; display: flex;
  flex-wrap: wrap; gap: var(--e2); align-items: center;
}
.marcacoes legend {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--muted); padding: 0 6px;
}
/* O nome do tipo sai em minúscula e menor: os tipos são gravados em CAIXA
   ALTA no cadastro, e catorze pílulas gritando em maiúscula engoliam a janela
   de criação (pedido do dono do produto, 28/08/2026). É só exibição — o dado
   continua como foi cadastrado. */
/* A pílula de tipo herda de três lugares que não são dela, e cada um a
   quebrava de um jeito: `.marca` é o nome da classe do logotipo (Ethnocentric,
   espaçamento e linha da marca); `.criar-rapido label` dá `flex: 1 1 260px` a
   todo label da janela, esticando cada pílula; e o `input` global tem
   `width: 100%`, que fazia o quadradinho do checkbox ocupar a linha inteira.
   Este bloco desfaz as três — é pílula pequena de formulário, nada mais. */
.marcacoes .marca {
  display: inline-flex; align-items: center; gap: 5px; margin: 0;
  flex: 0 0 auto; width: auto;
  border: 1px solid var(--line-forte); border-radius: var(--raio-pill);
  padding: 2px 9px 2px 7px; font-size: 12.5px; cursor: pointer;
  text-transform: lowercase; color: var(--muted);
  font-family: var(--sans); font-weight: 400;
  letter-spacing: normal; line-height: 1.4;
  transition: border-color var(--troca), color var(--troca);
}
.marcacoes .marca:hover { border-color: var(--accent); }
/* Uma caixa de opção sozinha num formulário de linha ("cobra por mês"): sem
   moldura de grupo e sem a classe do logotipo. */
.opcao-caixa { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.opcao-caixa input { width: auto; margin: 0; }
/* O orçamento que não se edita mais fica travado de verdade: o fieldset
   desabilita os campos, sem moldura própria. */
fieldset.sem-moldura { border: 0; padding: 0; margin: 0; min-width: 0; }
.marcacoes .marca:has(input:checked) { border-color: var(--accent); color: var(--text); background: var(--cobre-fraco); }
.marcacoes input {
  accent-color: var(--accent); margin: 0;
  width: 13px; height: 13px; flex: 0 0 auto;
}

/* --- a mensalidade grudada na pílula do tipo ------------------------------ */
/* O serviço que a casa cobra por mês (monitoramento, Sentinela) traz o campo do
   valor mensal ao lado da própria caixa: marcar o tipo e digitar quanto é um
   gesto só, e o número fica onde a decisão foi tomada em vez de num campo solto
   no fim do formulário, longe de qual serviço ele é.

   A revelação é em CSS, com `:has`, e não em JavaScript, de propósito: sem a
   folha o campo simplesmente aparece — visível e funcionando —, em vez de
   sumir para sempre. Quem decide o que vale é o servidor, que descarta
   mensalidade de tipo não marcado. */
.marca-mensal { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.marca-mensal .mensalidade { display: none; }
.marca-mensal:has(input[type="checkbox"]:checked) .mensalidade { display: inline-flex; }
.marcacoes .mensalidade,
.marca-mensal .mensalidade {
  align-items: center; gap: 5px; margin: 0; flex: 0 0 auto; width: auto;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); font-family: var(--sans); font-weight: 400;
}
.marca-mensal .mensalidade input {
  width: 92px; flex: 0 0 auto; margin: 0;
  padding: 2px 8px; font-size: 12.5px; font-family: var(--mono, var(--sans));
  border: 1px solid var(--line-forte); border-radius: var(--raio-pill);
  text-align: right;
}
.marca-mensal .mensalidade input:focus { border-color: var(--accent); outline: none; }
.marca-mensal.falta .mensalidade input { border-color: var(--no); }

/* A marca "R$/mês": na ficha do tipo (Cadastros) e ao lado do total recorrente
   da negociação. Pequena e discreta — é unidade, não valor. */
.por-mes {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--fraco); font-weight: 400; margin-left: 4px;
}
.ficha .por-mes { border-left: 1px solid var(--line); padding-left: 6px; }
.fichas-apagar .apagar-item.ligado { border-color: var(--accent); color: var(--text); }

/* --- cadastros: a dobra de apagar ----------------------------------------- */
/* Apagar mora numa dobra: gesto que desfaz pede um clique a mais, como a
   redefinição de senha na tabela da equipe. Fechada, some da tela. */
.apagar-dobra { margin-top: var(--e3); }
.apagar-dobra summary {
  cursor: pointer; font-size: 13px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--fraco); width: fit-content;
}
.apagar-dobra summary:hover { color: var(--no); }
.apagar-dobra[open] summary { color: var(--no); }
.fichas-apagar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e2); }
.fichas-apagar form { display: contents; }
button.apagar-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px 3px 11px; border: 1px solid var(--line-forte);
  border-radius: var(--raio-pill); background: var(--bg); color: var(--muted);
  font-size: 13.5px; font-family: inherit; cursor: pointer;
  transition: border-color var(--troca), color var(--troca);
}
button.apagar-item i { font-style: normal; color: var(--fraco); font-size: 15px; display: inline-flex; width: 11px; height: 11px; }
button.apagar-item i svg { width: 11px; height: 11px; }
button.apagar-item:hover { border-color: var(--no); color: var(--no); }
button.apagar-item:hover i { color: var(--no); }

.somas .explica-linha { display: block; margin-top: 2px; }

/* A navegação de mês no título de um cartão, na ponta direita do fio. */
h2 .controle-semana { order: 5; padding: 2px; letter-spacing: 0; text-transform: none; font-weight: 400; }
h2 .controle-semana .passo { padding: 4px 8px; }
h2 .controle-semana .faixa-semana { font-size: 13.5px; }

.etiqueta.s-ganha { border-color: var(--ok); color: var(--ok); }
.etiqueta.s-perdida { border-color: var(--no); color: var(--no); }
.etiqueta.s-aberta { border-color: var(--line-forte); color: var(--muted); }

/* --- configurações -------------------------------------------------------- */
/* A tela é leitura: os formulários moram em janelas dobráveis, ancoradas na
   cabeça de cada cartão — o h2 continua dono da linha, a dobra senta ao lado. */
.cabeca-cartao { display: flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e3); }
.cabeca-cartao h2 { margin: 0; flex: 1; }
/* "Editar" é a variante discreta da dobra de criação: sem o "+", sem fundo —
   ajuste de padrão não disputa atenção com o que a tela mostra. */
.criar-rapido-dobra.discreta > summary {
  background: none; border-color: var(--line-forte); color: var(--muted);
  font-weight: 500; box-shadow: none;
}
.criar-rapido-dobra.discreta > summary::before { content: none; }
.criar-rapido-dobra.discreta > summary:hover,
.criar-rapido-dobra.discreta[open] > summary {
  background: none; border-color: var(--accent); color: var(--text);
}
.texto-corrido { white-space: pre-line; }

/* --- configurações: equipe ------------------------------------------------ */
.avatar-mini {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; margin-right: 10px; vertical-align: middle;
  background: linear-gradient(135deg, var(--accent-forte), var(--accent));
  color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: .3px;
}
.etiqueta.papel-gestor { border-color: var(--accent); color: var(--accent-forte); }
.etiqueta.papel-administrativo { border-color: var(--aviso); color: var(--aviso); }
.etiqueta.papel-vendedor { color: var(--muted); }
/* O assistente trabalha ao lado do vendedor e enxerga o quadro inteiro: a
   mesma família da etiqueta dele, um grau mais firme. */
.etiqueta.papel-assistente { border-color: var(--line-forte); color: var(--text); }

/* Ação sensível dobrada: a linha fica limpa e redefinir pede um clique a mais. */
.dobra-linha summary {
  cursor: pointer; list-style: none; display: inline-block;
  padding: 3px 11px; border: 1px solid var(--line); border-radius: var(--raio-pill);
  color: var(--muted); font-size: 13.5px; white-space: nowrap;
  transition: border-color var(--troca), color var(--troca);
}
.dobra-linha summary:hover, .dobra-linha[open] summary { border-color: var(--accent); color: var(--text); }
.dobra-linha form { display: flex; gap: var(--e1); margin-top: var(--e2); align-items: center; }
.dobra-linha input { margin-top: 0; min-width: 12rem; }
/* Excluir anuncia o perigo antes do clique: a face da dobra já é vermelha,
   como o excluir da janela do card de agenda. */
.dobra-linha.perigo summary { color: var(--no); }
.dobra-linha.perigo summary:hover,
.dobra-linha.perigo[open] summary { border-color: var(--no); color: var(--no); }

/* --- entrada dos cartões -------------------------------------------------- */
/* O mesmo deslocamento das colunas do quadro, escalonado de cima para baixo.
   Só posição: sem animação, o cartão já está no lugar. */
.cartao { animation: sobe var(--troca) backwards; }
.cartao:nth-of-type(2) { animation-delay: 40ms; }
.cartao:nth-of-type(3) { animation-delay: 80ms; }
.cartao:nth-of-type(4) { animation-delay: 120ms; }
.cartao:nth-of-type(5) { animation-delay: 160ms; }
.cartao:nth-of-type(n+6) { animation-delay: 200ms; }

/* --- logs: o rastro da plataforma ----------------------------------------- */
/* Aba da conta de desenvolvimento. O nível é semáforo, como toda escala de
   urgência da casa, e vive no trilho de 3px da borda esquerda da linha — o
   mesmo gesto de assinatura do card parado e do dia de hoje na agenda. Ele
   acende só quando há o que dizer: linha de informação não ganha trilho. */
.etiqueta.papel-desenvolvimento { border-color: var(--prazo-1); color: var(--prazo-1); }

.filtros-log { flex-wrap: wrap; align-items: flex-end; }
.filtros-log label { min-width: 9rem; }

.tabela-log td { vertical-align: top; }
.tabela-log td.mono { white-space: nowrap; }

.linha-log > td:first-child { border-left: var(--trilho) solid transparent; padding-left: 9px; }
.linha-log.n-aviso > td:first-child { border-left-color: var(--prazo-2); }
.linha-log.n-erro > td:first-child { border-left-color: var(--prazo-4); }

.etiqueta.nivel-info { color: var(--fraco); }
.etiqueta.nivel-aviso { border-color: var(--prazo-2); color: var(--prazo-2); }
.etiqueta.nivel-erro { border-color: var(--prazo-4); color: var(--prazo-4); }

.faixa-resumo .recorte.ruim { border-left-color: var(--prazo-4); }
.faixa-resumo .recorte.alerta { border-left-color: var(--prazo-3); }

/* O detalhe (rota, traceback) é longo e não pode empurrar a tabela: mora numa
   dobra, e só quem quer o abre. */
.log-detalhe { margin-top: var(--e1); }
.log-detalhe summary {
  cursor: pointer; font-size: 12.5px; color: var(--fraco);
  text-transform: uppercase; letter-spacing: .9px;
}
.log-detalhe summary:hover { color: var(--accent-forte); }
.log-detalhe pre {
  margin: var(--e1) 0 0; padding: var(--e2); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--raio);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  white-space: pre-wrap; word-break: break-word; max-height: 18rem; overflow: auto;
}


/* --- agenda: as pessoas do card e o desfecho -------------------------------
   O card carrega quem faz a visita e quem a marcou; a troca mora numa dobra
   pequena, e o desfecho são dois botões — Aprovado (vira negociação) e
   Declínio. A coluna de Concluídas saiu: aprovado/declinado é como o card
   deixa a semana (decisão do dono do produto, 28/08/2026). */
.pessoas-card {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  font-size: 12.5px; color: var(--muted); margin-top: var(--e1);
}
.pessoas-card b { color: var(--text); font-weight: 600; }

.dobra-no-card { margin-top: var(--e1); }
.dobra-no-card > summary {
  cursor: pointer; list-style: none; font-size: 12.5px; color: var(--accent-forte);
  display: inline-flex; align-items: center; gap: 4px;
}
.dobra-no-card > summary::-webkit-details-marker { display: none; }
.dobra-no-card > summary::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform var(--troca);
}
.dobra-no-card[open] > summary::after { transform: rotate(-135deg); }
.dobra-no-card .criar-rapido {
  margin: var(--e2) 0 0; padding: var(--e2) var(--e3);
  border-left-color: var(--line);
}
.dobra-no-card .criar-rapido label { font-size: 12.5px; }


/* --- a janela do card de agenda ------------------------------------------
   O card não abre página: abre janela no meio da tela, com o fundo desfocado,
   igual à dobra de criação — é o mesmo <details>, só que o resumo é o próprio
   card. Toda ação vive aqui dentro: as pessoas, o desfecho e o excluir. Na
   face do card não sobrou botão nenhum (decisão do dono do produto,
   28/08/2026), porque um clique errado ali apagava a visita. */
.card-janela { margin: 0; position: relative; }
.card-janela > summary { list-style: none; }
.card-janela > summary::-webkit-details-marker { display: none; }
.card-janela[open] > summary { border-left-color: var(--accent-forte); background: #262626; }
.card-janela[open]::before {
  content: ""; position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.janela-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 41; cursor: default;
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line-forte);
  border-left: var(--trilho) solid var(--accent);
  border-radius: var(--raio);
  padding: var(--e4);
  box-shadow: var(--sombra-lg);
  /* `sobe` NÃO serve aqui, e o motivo custou uma tela quebrada: os quadros dele
     terminam em `transform: none`, e com `fill-mode: both` esse valor fica
     valendo para sempre — apagando a translação que centra a janela. Ela então
     nascia com o canto superior esquerdo no meio da tela e o resto caindo para
     fora. Elemento centrado por transform anima com um quadro que **repete** a
     centralização; nunca com um que zera o transform. */
  animation: sobe-centrado var(--troca) backwards;
}
@keyframes sobe-centrado {
  from { transform: translate(-50%, calc(-50% + 7px)); }
  to   { transform: translate(-50%, -50%); }
}
.janela-topo { display: flex; align-items: flex-start; gap: var(--e3); }
.janela-topo h3 { flex: 1; margin: 0; font-size: 19px; }
.janela-topo .situacao {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600;
  color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 4px;
}
.janela-topo .situacao i {
  width: 8px; height: 8px; border-radius: var(--raio-fino);
  background: currentColor; flex: 0 0 auto;
}
.fechar-janela {
  background: none; border: 1px solid var(--line-forte); color: var(--muted);
  padding: 0 9px; font-size: 17px; line-height: 1.5;
}
.fechar-janela:hover { color: var(--text); border-color: var(--muted); }
.dados-card {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e2) var(--e4); margin: var(--e3) 0 0;
}
.dados-card dt {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--fraco);
}
.dados-card dd { margin: 2px 0 0; color: var(--text); }
.negociacao-do-card { margin-top: var(--e3); color: var(--muted); font-size: 14px; }
.descricao-card { margin: var(--e2) 0 0; color: var(--muted); }
.acoes-card {
  display: flex; gap: var(--e2); margin: var(--e3) 0;
  padding-top: var(--e3); border-top: 1px solid var(--line);
}
.janela-card .criar-rapido { margin: 0; }
.janela-card button.aprovar {
  border-color: var(--ok); color: var(--ok);
}
.janela-card button.aprovar:hover { background: rgba(77,163,111,.15); }
.janela-card button.declinar {
  border-color: var(--no); color: var(--no);
}
.janela-card button.declinar:hover { background: rgba(208,109,82,.15); }
.janela-card .dobra-no-card { margin-top: var(--e3); }
.janela-card .dobra-no-card .criar-rapido { margin-top: var(--e2); }

/* --- relatórios: a barra de ajustes e os gráficos --------------------------
   Os ajustes (mês, janela, vendedor, tipo) governam a página inteira; a barra
   fica entre a faixa de resumo e os cartões. Os gráficos estão no bloco
   "Relatórios em painel", no fim da folha. */
.ajustes-relatorio {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end;
  background: var(--card); border: 1px solid var(--line);
  border-left: var(--trilho) solid var(--line);
  border-radius: var(--raio); padding: var(--e2) var(--e4);
  margin-bottom: var(--e3);
}
.ajustes-relatorio .controle-semana { margin-right: var(--e2); align-self: center; }
.ajustes-relatorio label { flex: 0 1 190px; margin: 0; }
.ajustes-relatorio .recorte { align-self: center; }


/* A dobra de excluir, no card e na linha da equipe: o rótulo fica na cor de
   perigo para dizer o que guarda antes do clique. */
.dobra-no-card.perigo > summary { color: var(--no); }

/* --- a janela do card de faturamento --------------------------------------
   O card do pós-venda abre em janela, como o da agenda (19/09/2026): a face
   não tem dobra nenhuma. Dentro, cada coisa é uma seção com título — os dados
   (editáveis na hora, sem "editar"), a cobrança — e o rodapé traz os gestos
   que desfazem, cada um na própria cor: revogar em âmbar, excluir em vermelho.
   Era uma pilha de quatro dobras na face, todas em cobre, e não se sabia qual
   era qual sem ler. */
.secao-janela { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--line); }
.secao-janela h4 {
  margin: 0 0 var(--e2); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--fraco); font-weight: 600;
}
.secao-janela .criar-rapido { margin: 0; padding: var(--e2) 0 0; background: none; border: 0; }
.secao-janela .explica { margin: 0 0 var(--e2); font-size: 14px; }
.secao-janela .agenda-contato { margin-top: var(--e2); }
.botao-link {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--accent);
  border-radius: var(--raio-p); color: var(--accent-forte); font-size: 14px;
}
.botao-link:hover { background: var(--cobre-fraco); }
.dados-card dd.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Âmbar: desfaz sem apagar. Não é o vermelho de excluir. */
button.atencao { border-color: var(--aviso); color: var(--aviso); background: none; }
button.atencao:hover { background: rgba(201, 162, 39, .16); color: var(--aviso); border-color: var(--aviso); }
.acoes-fim { justify-content: flex-end; margin-bottom: 0; }
.acoes-fim form { margin: 0; }
.card-janela .card.fat { cursor: grab; }

/* =========================================================================
   Relatórios em painel (04/11/2026)
   "Reformule a parte de relatórios, parecido com os do INTENDENTE" — dono do
   produto. As formas vêm de lá: a faixa de cartões com ícone e barra de
   proporção, um cartão por recorte com as ferramentas no cabeçalho (medir
   por, CSV, recolher), a rosca ao lado da lista e a frase que diz o que o
   gráfico mostra. As cores são as da casa; a paleta categórica é a mesma
   validada no INTENDENTE para fundo escuro. As classes são `rel-*`, todas
   novas: nada aqui mexe no resto da folha.
   ========================================================================= */
:root {
  --rel-1: #3987e5; --rel-2: #d95926; --rel-3: #199e70; --rel-4: #c98500;
  --rel-5: #d55181; --rel-6: #6fae3a; --rel-7: #9085e9; --rel-8: #e66767;
  --rel-neutro: #5c5c5c;
  /* A etapa vai do cobre ao verde, como a faixa por etapa da rail. */
  --rel-d0: #bf6832; --rel-d1: #d9914a; --rel-d2: #e2b53c;
  --rel-d3: #a9b04a; --rel-d4: #6db07e; --rel-d5: #4da36f;
  --rel-azul: #3987e5;
}

.rel-painel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rel-painel h1 { margin: 0; }
.rel-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rel-carimbo { font-size: 12.5px; color: var(--fraco); }
.rel-acoes { margin-left: auto; display: flex; gap: 8px; }
.rel-secao-rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--fraco); font-weight: 600;
}

/* O botão pequeno das ferramentas: serve a <button> e a <a> (o CSV é link,
   para o navegador baixar sem script). */
.botao-fino, .casca-nova .botao-fino {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2;
  padding: 5px 10px; border-radius: var(--raio-p);
  background: var(--alto); color: var(--muted);
  border: 1px solid var(--line-forte); cursor: pointer; white-space: nowrap;
}
.botao-fino:hover, .casca-nova .botao-fino:hover { color: var(--text); border-color: #4a4a4a; background: #2a2a2a; }
.botao-fino[aria-pressed="true"], .casca-nova .botao-fino[aria-pressed="true"] {
  background: var(--cobre-medio); border-color: var(--accent-forte); color: var(--text);
}

/* --- a faixa de resumo --- */
/* Seis cartões: 6, 3, 2 ou 1 por linha — nunca um sobrando sozinho. Medido
   pela largura do painel (não da janela), que já desconta a coluna do lado. */
.rel-faixa { container-type: inline-size; }
.rel-infos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); }
@container (min-width: 500px) { .rel-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 760px) { .rel-infos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1440px) {
  .rel-infos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Estreito, o texto de apoio pode ir a duas linhas: tudo alinha pelo
     topo, para os rótulos e os números ficarem na mesma altura. */
  .rel-infos .rel-info { gap: 10px; padding: 13px 12px; align-items: flex-start; }
  .rel-info .rel-icone { width: 38px; height: 38px; }
  .rel-info .rel-icone-svg { width: 21px; height: 21px; }
}
.rel-info {
  display: flex; align-items: center; gap: 13px; min-width: 0;
  padding: 13px 15px; background: var(--card); border: 1px solid var(--line-forte);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.rel-icone {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rel-icone-svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rel-info-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; color: var(--text); }
.rel-info-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-info strong { font-family: var(--mono); font-size: 18px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* O texto de apoio quebra linha em vez de virar reticências. */
.rel-info-sub { font-size: 11.5px; color: var(--fraco); line-height: 1.35; }
/* A barra da taxa ao lado do número, para o cartão ter a altura dos outros. */
.rel-info-valor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rel-info-valor strong { flex: 0 0 auto; }
.rel-info-valor .rel-progresso { flex: 1; min-width: 28px; margin: 0; }
.rel-progresso { display: block; height: 4px; border-radius: 2px; background: var(--alto); overflow: hidden; margin: 2px 0 1px; }
.rel-progresso span { display: block; height: 100%; border-radius: 2px; background: currentColor; }

/* O tom: o ícone num quadrado tingido. rgba fixo por tom — a casa não usa
   color-mix, que deixaria o quadrado sem fundo em navegador sem a função. */
.rel-tom-marca { color: var(--accent-forte); }
.rel-tom-critico { color: var(--no); }
.rel-tom-aviso { color: var(--aviso); }
.rel-tom-ok { color: var(--ok); }
.rel-tom-azul { color: var(--rel-azul); }
.rel-tom-marca .rel-icone, .rel-icone-mini.rel-tom-marca { background: rgba(191, 104, 50, .16); }
.rel-tom-critico .rel-icone, .rel-icone-mini.rel-tom-critico { background: rgba(208, 109, 82, .16); }
.rel-tom-aviso .rel-icone, .rel-icone-mini.rel-tom-aviso { background: rgba(201, 162, 39, .16); }
.rel-tom-ok .rel-icone, .rel-icone-mini.rel-tom-ok { background: rgba(77, 163, 111, .16); }
.rel-tom-azul .rel-icone, .rel-icone-mini.rel-tom-azul { background: rgba(57, 135, 229, .16); }
.rel-info .rel-progresso span { background: currentColor; }
.rel-tom-aviso .rel-progresso span { background: var(--aviso); }

/* --- a barra de ajustes, no painel --- */
.rel-painel .ajustes-relatorio { margin-bottom: 0; }

/* --- os cartões --- */
.rel-grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); align-items: start; }
.rel-cartao {
  background: var(--card); border: 1px solid var(--line-forte);
  border-left: var(--trilho) solid var(--line);
  border-radius: var(--raio); box-shadow: var(--sombra); min-width: 0;
}
.rel-cartao[hidden] { display: none; }
.rel-cartao.rel-largo { grid-column: 1 / -1; }
/* Mosaico: com script, a grade corre em linhas de 1px e cada cartão ocupa a
   altura que tem (app.js); o curto não deixa mais buraco embaixo. */
.rel-grade.rel-mosaico { grid-auto-rows: 1px; row-gap: 0; grid-auto-flow: row dense; }
.rel-grade > .rel-cartao { container-type: inline-size; }
.rel-cartao-cabeca {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.rel-cartao.recolhido .rel-cartao-cabeca { border-bottom: 0; }
.rel-cartao.recolhido .rel-cartao-corpo { display: none; }
.rel-titulo { display: inline-flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap; }
.rel-titulo h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); letter-spacing: 0; text-transform: none; }
.rel-base { font-size: 11.5px; color: var(--fraco); }
.rel-icone-mini { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rel-icone-mini .rel-icone-svg { width: 17px; height: 17px; }
.rel-ferramentas { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rel-medir { display: inline-flex; gap: 0; }
.rel-medir .botao-fino { border-radius: 0; margin-left: -1px; }
.rel-medir .botao-fino:first-child { border-radius: var(--raio-p) 0 0 var(--raio-p); margin-left: 0; }
.rel-medir .botao-fino:last-child { border-radius: 0 var(--raio-p) var(--raio-p) 0; }
.rel-recolher { width: 30px; padding: 5px 0; }
.rel-seta { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--troca); }
.rel-recolher[aria-expanded="false"] .rel-seta { transform: translateX(-1px) rotate(-45deg); }
.rel-cartao-corpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rel-vista { display: flex; flex-direction: column; gap: 12px; }
.rel-vista[hidden] { display: none; }

/* A frase de leitura: o que o gráfico diz, em português. */
.rel-leitura { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; border-left: var(--trilho) solid var(--accent-forte); padding: 2px 0 2px 10px; }
.rel-leitura b { color: var(--text); font-weight: 600; }

.rel-grafico { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: center; }
.rel-rosca { width: 140px; height: 140px; display: block; }
.rel-rosca circle { transition: opacity var(--troca); }
.rel-rosca-valor { fill: var(--text); font-size: 12.5px; font-weight: 600; font-family: var(--sans); }
.rel-rosca-rotulo { fill: var(--fraco); font-size: 10px; }
.rel-lista { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rel-linha {
  display: grid; grid-template-columns: 10px minmax(110px, 190px) minmax(40px, 1fr) 104px 44px;
  align-items: center; gap: 10px; padding: 3px 6px; border-radius: 5px;
  transition: opacity var(--troca), background-color var(--troca);
}
/* Ao lado da rosca a lista tem metade do cartão: o rótulo cede, a barra encolhe. */
.rel-grafico .rel-linha { grid-template-columns: 10px minmax(60px, 1fr) minmax(24px, 70px) 92px 38px; gap: 8px; }
.rel-cor { width: 10px; height: 10px; border-radius: 3px; display: block; }
.rel-linha-rotulo { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-linha-trilho { height: 10px; border-radius: 3px; background: var(--alto); overflow: hidden; }
.rel-linha-trilho span { display: block; height: 100%; border-radius: 3px; }
.rel-linha-valor { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--text); white-space: nowrap; }
.rel-linha-parte { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--muted); }
/* O foco: a linha e a fatia dela acesas, o resto esmaecido. */
.rel-cartao.com-foco .rel-linha:not(.em-foco), .rel-cartao.com-foco .rel-fatia:not(.em-foco) { opacity: .35; }
.rel-linha.em-foco { background: var(--alto); }

/* A fileira de números grandes (o comparativo, a recorrência). */
.rel-numeros { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 12.5px; color: var(--muted); align-items: baseline; }
.rel-numeros strong { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--text); margin-right: 4px; }
.rel-numeros .rel-ruim strong { color: var(--no); }
.rel-numeros .rel-bom strong { color: var(--ok); }

/* A série mensal, larga como o cartão. */
.rel-serie { width: 100%; height: auto; display: block; max-height: 260px; }
.rel-serie .rs-regua { stroke: var(--line); stroke-width: 1; }
.rel-serie text { fill: var(--fraco); font-size: 11px; font-family: var(--mono); }
.rel-serie text.rs-aceso { fill: var(--text); font-weight: 600; }
.rel-serie .rs-col { fill: var(--accent); transition: fill var(--troca); }
.rel-serie .rs-col.rs-aceso { fill: #d9814a; }
.rel-serie .rs-col:hover { fill: var(--prazo-1); }
.rel-serie .rs-traco { fill: none; stroke: var(--ok); stroke-width: 2.2; }
.rel-serie .rs-area { fill: rgba(77, 163, 111, .12); }
.rel-serie .rs-ponto { fill: var(--ok); stroke: var(--card); stroke-width: 2; }
.rel-serie .rs-ponto.rs-aceso { fill: var(--text); }
.rel-serie .rs-ponto:hover { fill: var(--text); }

/* A tabela inteira, numa dobra do cartão. */
.rel-dobra { border-top: 1px solid var(--line); padding-top: 8px; }
.rel-dobra > summary {
  cursor: pointer; list-style: none; font-size: 12.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.rel-dobra > summary::-webkit-details-marker { display: none; }
.rel-dobra > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform var(--troca); }
.rel-dobra[open] > summary::before { transform: rotate(45deg); }
.rel-dobra > summary:hover { color: var(--text); }
.rel-rola { overflow-x: auto; margin-top: 8px; }
.rel-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.rel-tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--fraco); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--line-forte); white-space: nowrap; }
.rel-tabela td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
.rel-tabela tbody tr:hover td { background: var(--alto); }
.rel-tabela tfoot td { font-weight: 600; border-top: 1px solid var(--line-forte); border-bottom: 0; color: var(--text); }
.rel-tabela td.n, .rel-tabela th.n { text-align: right; white-space: nowrap; }

/* Os recortes que não são destaque: etiquetas que abrem o cartão. */
.rel-outros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rel-etiqueta {
  font-size: 12.5px; padding: 5px 12px; border-radius: var(--raio-pill);
  border: 1px solid var(--line-forte); color: var(--muted); background: var(--card);
}
.rel-etiqueta:hover { color: var(--text); background: var(--alto); }
.rel-etiqueta[aria-pressed="true"] { border-color: var(--accent-forte); color: var(--text); background: var(--cobre-medio); }

/* O montador. */
.rel-ferramenta { border-left-color: var(--accent); }
.rel-montador { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }
.rel-montador label { margin: 0; }
.rel-colunas { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--raio-p); padding: 8px 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rel-colunas legend { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--fraco); font-weight: 600; padding: 0 4px; }
.rel-marca { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 400; font-family: var(--sans); cursor: pointer; }
.rel-marca input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent-forte); }
.rel-montador .explica-linha { grid-column: 1 / -2; margin: 0; align-self: center; }
.rel-cartao .rel-cartao { box-shadow: none; }

/* Cartão estreito (três por linha): a rosca encolhe e a legenda perde a
   barrinha, que repete a fatia — o nome cabe inteiro. */
@container (max-width: 560px) {
  .rel-grafico { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; }
  .rel-rosca { width: 116px; height: 116px; }
  .rel-grafico .rel-linha { grid-template-columns: 10px minmax(0, 1fr) auto 36px; }
  .rel-grafico .rel-linha-trilho { display: none; }
}

@media (max-width: 720px) {
  .rel-grafico { grid-template-columns: 1fr; justify-items: center; }
  .rel-lista { width: 100%; }
  .rel-linha { grid-template-columns: 10px minmax(0, 1fr) 92px 40px; }
  .rel-linha-trilho { grid-column: 2 / -1; grid-row: 2; }
  .rel-ferramentas { margin-left: 0; }
}

/* Impresso: o painel em papel, sem as ferramentas e com toda dobra à mostra. */
@media print {
  .casca-nova .topo-areas, .casca-nova .rail, .casca-nova .ajuste-rail,
  .rel-ferramentas, .rel-acoes, .rel-outros, .ajustes-relatorio,
  .rel-montador, #rel-montador.recolhido, #rel-uma_a_uma { display: none !important; }
  .casca-nova .app { display: block; height: auto; }
  .casca-nova .painel { overflow: visible; }
  .rel-cartao, .rel-info { break-inside: avoid; box-shadow: none; }
  .rel-grade.rel-mosaico { grid-auto-rows: auto; row-gap: 14px; }
  .rel-grade.rel-mosaico > .rel-cartao { grid-row-end: auto !important; }
}

/* ------------------------------------------------------------ o agente ---- */
/* O agente do gestor (04/11/2026): um balão no canto de toda tela, que abre a
   janela por cima dela, como o chat financeiro do INTENDENTE. Na janela, as
   conversas à esquerda, a aberta à direita e o campo preso embaixo: só a lista
   de mensagens rola, e o campo fica sempre à vista. */
.balao-agente {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;  /* abaixo das janelas (40): janela aberta cobre o balão */
  width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-forte); color: #fff; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.casca-nova .balao-agente, .balao-agente:hover {
  background: var(--accent-forte); border: 0; border-radius: 50%; color: #fff; padding: 0;
}
.casca-nova .balao-agente:hover { background: var(--accent); }
.balao-agente[hidden] { display: none; }
.balao-agente.trabalhando::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ok); border: 2px solid var(--bg);
}
@media print { .balao-agente, .agente-fundo { display: none !important; } }
body.com-agente { overflow: hidden; }
.agente-fundo {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(8, 10, 14, .72);
}
.agente-fundo[hidden] { display: none; }
.agente {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  width: min(1240px, 100%);
  height: min(88vh, 100%);
  background: var(--card);
  border: 1px solid var(--line-forte);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  padding: 16px 18px 16px 12px;
}
.agente-lista {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 0; overflow-y: auto;
  border-right: 1px solid var(--line);
  padding-right: 14px;
}
.agente-conversas { display: flex; flex-direction: column; gap: 2px; }
.agente .agente-nova, .agente .agente-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-left: var(--trilho) solid transparent;
  color: var(--muted); padding: 8px 10px; border-radius: 0 6px 6px 0;
  font-weight: 500;
}
.agente .agente-nova { color: var(--text); border-color: var(--line); border-left-color: var(--accent-forte);
  margin-bottom: 8px; }
.agente .agente-nova:hover, .agente .agente-item:hover { background: var(--alto); color: var(--text); }
.agente .agente-nova[aria-current="true"], .agente .agente-item[aria-current="true"] {
  background: var(--cobre-fraco); color: var(--text); border-left-color: var(--accent-forte);
}
.agente-item-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agente-trabalhando {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-forte);
  animation: agente-pulso 1.2s ease-in-out infinite;
}
@keyframes agente-pulso { 50% { opacity: .35; } }

.agente-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.agente-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.agente .agente-topo h2 {
  display: block; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em;
  text-transform: none; color: var(--text);
}
.agente .agente-topo h2::after { content: none; }
.agente-sub { color: var(--fraco); font-size: 13px; }
.agente-topo .espaco { flex: 1; }

.agente-mensagens {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 4px 12px 0;
}
.agente-vazio { margin: auto; max-width: 720px; text-align: center; }
/* O estilo dos botões e do bloco vazio põe `display`: sem isto, `hidden` não esconde. */
.agente [hidden] { display: none !important; }
.agente .agente-vazio h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.agente-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.agente .agente-sugestao { white-space: normal; text-align: left; max-width: 100%; }

.agente-msg { max-width: 920px; line-height: 1.55; overflow-wrap: anywhere; }
.agente-pergunta {
  align-self: flex-end; max-width: 70%;
  background: var(--cobre-fraco); border: 1px solid var(--cobre-medio);
  padding: 10px 14px; border-radius: 10px 10px 2px 10px;
}
.agente-resposta {
  align-self: flex-start; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-left: var(--trilho) solid var(--accent-forte);
  padding: 12px 16px; border-radius: 0 10px 10px 0;
}
.agente-resposta.erro { border-left-color: var(--no); }
.agente-resposta p { margin: 0 0 10px; }
.agente-resposta p:last-child { margin-bottom: 0; }
.agente-resposta h3, .agente-resposta h4 { margin: 14px 0 6px; }
.agente-resposta ul, .agente-resposta ol { margin: 0 0 10px; padding-left: 22px; }
.agente-resposta code { font-family: var(--mono); font-size: .92em; background: var(--alto); padding: 0 4px; border-radius: 3px; }
.agente-tabela { overflow-x: auto; margin: 6px 0 12px; }
.agente-tabela table { border-collapse: collapse; min-width: 50%; }
.agente-tabela th, .agente-tabela td { padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.agente-tabela th { color: var(--muted); font-weight: 600; font-size: 13px; }
.agente-tabela td.n { text-align: right; font-family: var(--mono); white-space: nowrap; }
.agente-analisando { color: var(--muted); }
.agente-resposta.pensando .agente-analisando::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%;
  background: var(--accent-forte); animation: agente-pulso 1.2s ease-in-out infinite;
}
.agente-passos { margin: 6px 0 0; padding-left: 18px; color: var(--fraco); font-size: 13px; }
.agente-nota { color: var(--fraco); font-size: 12px; margin-left: 6px; }
.agente-consultas { margin-top: 10px; color: var(--fraco); font-size: 13px; }
.agente-consultas summary { cursor: pointer; }
.agente-arquivos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.agente-arquivo {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-forte); border-radius: 8px; padding: 6px 12px; color: var(--text);
}
.agente-arquivo:hover { border-color: var(--accent-forte); background: var(--cobre-fraco); }
.agente-arquivo-tipo {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--accent-forte); border: 1px solid var(--accent-forte); border-radius: 4px; padding: 0 4px;
}

.agente-campo { display: flex; gap: 10px; align-items: stretch; padding-top: 10px; border-top: 1px solid var(--line); }
.agente-campo textarea { flex: 1; resize: vertical; min-height: 52px; max-height: 240px; }
.agente-campo button { align-self: stretch; min-width: 120px; }

@media (max-width: 720px) {
  .agente-fundo { padding: 0; }
  .agente { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 10px;
    height: 100%; border-radius: 0; padding: 12px; }
  .agente-lista { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; max-height: 120px; }
  .balao-agente { right: 16px; bottom: 16px; }
  .agente-pergunta { max-width: 90%; }
  .agente-campo { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .agente-trabalhando, .agente-resposta.pensando .agente-analisando::after { animation: none; }
}

/* A conta que só olha (papel visualizador, 09/11/2026): a tela é a mesma, sem
   os formulários de gravar e sem as dobras que só existem para eles. É só
   aparência — quem recusa a escrita é o servidor. Fica o Sair e o próprio
   perfil, que são as duas coisas que ela ainda manda. */
body.so-leitura form[method="post"]:not(.sair):not([action="/perfil"]),
body.so-leitura :is(.criar-rapido-dobra, .dobra-no-card, .dobra-linha, .apagar-dobra):has(form[method="post"]) {
  display: none !important;
}
body.so-leitura [data-arrastavel] { cursor: default; }