/* ==========================================================================
   CRM Suit Pay — identidade visual da Suit
   --------------------------------------------------------------------------
   As cores vieram do CSS do site (suitpay.app/public/css/layout.css):
     --color-primary: #33cc33   --color-primary-dark: #2caa2c
     --color-primary-darken: #1a661a   --color-primary-light: #efffea
   Mais preto e branco. É uma marca de duas cores: verde e preto. Nada de
   segundo tom decorativo.

   Tipografia: o site usa Articulat CF (texto) e Mongoose Black (display), que
   são fontes licenciadas e servidas só pro domínio deles. Aqui ficam as
   substitutas gratuitas mais próximas — Archivo (mesma grotesca geométrica) e
   Big Shoulders Display (mesma condensada alta). Trocando pelos arquivos
   originais, basta apontar o @font-face: o resto da folha não muda.
   ========================================================================== */

:root {
  --verde:        #33CC33;
  --verde-escuro: #2CAA2C;
  --verde-fundo:  #1A661A;
  --verde-claro:  #EFFFEA;

  --preto:   #000000;
  --carvao:  #111111;
  --grafite: #1C1C1C;
  --branco:  #FFFFFF;

  --texto:      #101010;
  --texto-fraco:#6B6B6B;
  --linha:      #E4E4E4;
  --fundo:      #F6F7F5;

  --erro:   #C23934;
  --alerta: #B45309;

  --fonte: 'Archivo', system-ui, -apple-system, sans-serif;
  --display: 'Big Shoulders Display', 'Archivo', system-ui, sans-serif;

  --raio: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-fundo); }

/* ---------- Casca de tela cheia (usada por todas as áreas) ---------------- */
.suit {
  position: fixed;
  inset: 0;
  display: flex;
  background: var(--fundo);
}

/* O MENU É UM SÓ E MOSTRA O PAINEL INTEIRO.
   Antes cada área trazia o próprio menu e trocar de área custava dois cliques
   (voltar ao hub, escolher de novo). Como a lista agora é longa, ela rola
   sozinha e o rodapé fica preso embaixo. */
.suit-rail {
  width: 234px;
  flex-shrink: 0;
  background: var(--preto);
  color: var(--branco);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  transition: width .14s ease;
}

.suit-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 14px;
}
.suit-brand a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.suit-brand img { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; }
.suit-brand b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
}
.suit-min-bt {
  background: none;
  border: 0;
  color: #7E7E7E;
  cursor: pointer;
  padding: 4px;
  border-radius: 7px;
  line-height: 0;
  flex-shrink: 0;
}
.suit-min-bt i { font-size: 18px; }
.suit-min-bt:hover { background: rgba(255, 255, 255, .09); color: var(--branco); }

.suit-secao {
  padding: 14px 9px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
}

.suit-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Barra fina e escura: a padrão do macOS abre um sulco claro dentro do menu
     preto toda vez que o mouse passa. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.suit-nav::-webkit-scrollbar { width: 6px; }
.suit-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 3px;
}
.suit-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--raio);
  color: #B9B9B9;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: .12s;
  white-space: nowrap;
}
.suit-nav a i { font-size: 19px; flex-shrink: 0; }
.suit-nav a:hover { background: rgba(255, 255, 255, .07); color: var(--branco); }
.suit-nav a.on {
  background: var(--verde);
  color: var(--preto);
  font-weight: 700;
}
.suit-nav a .badge {
  margin-left: auto;
  background: var(--verde);
  color: var(--preto);
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 9px;
}
.suit-nav a.on .badge { background: var(--preto); color: var(--verde); }
.suit-nav a .badge.quente { background: var(--alerta); color: #fff; }

.suit-rail-pe {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  flex-shrink: 0;
}
.suit-eu { display: flex; align-items: center; gap: 9px; padding: 2px 6px 8px; }
.suit-eu-bola {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--verde); color: var(--preto);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.suit-eu-txt { min-width: 0; line-height: 1.25; }
.suit-eu-txt b { display: block; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suit-eu-txt span { font-size: 10.5px; color: #8E8E8E; text-transform: uppercase;
  letter-spacing: .07em; }
.suit-rail-pe a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: 9px;
  color: #8E8E8E;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.suit-rail-pe a i { font-size: 18px; flex-shrink: 0; }
.suit-rail-pe a:hover { background: rgba(255, 255, 255, .07); color: var(--branco); }

/* -- Menu encolhido: os mesmos itens, só os ícones ------------------------- */
.suit.min .suit-rail { width: 64px; padding-left: 8px; padding-right: 8px; }
/* O botão de abrir NÃO some junto com os rótulos: sem ele o menu encolhido
   viraria uma escolha sem volta. Ele desce pra baixo da marca — o espaço que
   sobra quando o nome sai — e a seta aponta pro outro lado. */
.suit.min .suit-brand { flex-direction: column; gap: 6px; padding-bottom: 10px; }
.suit.min .suit-min-bt i { transform: rotate(180deg); }
/* `:not(.badge)`: o contador TAMBÉM é um span, e sem esta exceção ele sumia
   junto com os rótulos. Menu encolhido sem contador é pior que menu
   encolhido — some justamente o aviso de que chegou algo, que é o único
   motivo de o menu precisar ser visto de canto de olho. */
.suit.min .suit-brand b,
.suit.min .suit-nav a span:not(.badge),
.suit.min .suit-eu-txt,
.suit.min .suit-rail-pe a span { display: none; }
.suit.min .suit-nav a,
.suit.min .suit-rail-pe a { justify-content: center; padding-left: 0; padding-right: 0; }
.suit.min .suit-secao {
  height: 1px; padding: 0; margin: 12px 10px; font-size: 0;
  background: rgba(255, 255, 255, .14); overflow: hidden;
}
.suit.min .suit-nav a .badge {
  position: absolute; top: 3px; right: 5px; margin: 0;
  min-width: auto; padding: 0 4px; font-size: 9.5px; line-height: 15px;
}
.suit.min .suit-eu { justify-content: center; padding: 2px 0 8px; }

.suit-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.suit-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 28px;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  flex-shrink: 0;
  /* Tela com muitos botões (o chat tem sete filas) espremia o título até ele
     quebrar no meio de uma palavra. Aqui as ações descem para a linha de
     baixo, que é o que sobra quando não cabe. */
  flex-wrap: wrap;
}
.suit-topo h1 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}
.suit-topo .sub { font-size: 13px; color: var(--texto-fraco); margin-top: 4px; }

.suit-corpo { flex: 1; overflow-y: auto; padding: 24px 28px 60px; }

/* Faixa de aviso do topo do corpo (recado marcado, conversa esperando gente).
   Estava escrita à mão dentro do shell.html — trinta linhas de `style=` que
   ninguém conseguia ajustar sem reler o template inteiro. */
.faixa {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: #FFFBEB;
  border-left: 4px solid var(--alerta);
  color: #92400E;
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 16px;
  font-size: 13.5px;
  font-weight: 600;
}
.faixa > span { flex: 1; }
.faixa > i { font-size: 20px; }
.faixa-forte { background: #FEF3C7; }
.faixa em {
  font-style: normal;
  background: var(--alerta);
  color: #fff;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12.5px;
}

/* ---------- Componentes ------------------------------------------------- */
.card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  box-shadow: var(--sombra);
}
.card h2 { font-size: 18px; margin: 0 0 4px; }
.card h3 { font-size: 15.5px; margin: 0 0 10px; }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.kpi {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
}
.kpi .lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.kpi .val {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  margin-top: 6px;
}
.kpi .nota { font-size: 12.5px; color: var(--texto-fraco); margin-top: 4px; }
.kpi.destaque { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.kpi.destaque .lbl { color: var(--verde); }
.kpi.destaque .nota { color: #9A9A9A; }

.muted { color: var(--texto-fraco); }
.verde { color: var(--verde-fundo); }
.vermelho { color: var(--erro); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
}
td { padding: 11px 10px; border-bottom: 1px solid #F1F1F1; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--raio);
  font-family: var(--fonte);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: .12s;
}
.btn-primario { background: var(--verde); color: var(--preto); }
.btn-primario:hover { background: var(--verde-escuro); color: var(--branco); }
.btn-preto { background: var(--preto); color: var(--branco); }
.btn-preto:hover { background: var(--grafite); }
.btn-vazio { background: var(--branco); color: var(--texto); border-color: #D5D5D5; }
.btn-vazio:hover { background: #F3F3F3; }
.btn-perigo { background: #FDECEC; color: var(--erro); border-color: #F5C9C7; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 6px 11px; font-size: 13px; }

.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 7px;
  text-transform: uppercase;
  background: #EFEFEF;
  color: #444;
}
.chip-verde { background: var(--verde-claro); color: var(--verde-fundo); }
.chip-preto { background: var(--preto); color: var(--verde); }
.chip-erro { background: #FDECEC; color: var(--erro); }
.chip-alerta { background: #FEF3C7; color: var(--alerta); }

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  border: 1px solid #D5D5D5;
  border-radius: 9px;
  padding: 9px 11px;
  background: var(--branco);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--verde);
  outline-offset: -1px;
  border-color: var(--verde);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-fraco);
  margin: 0 0 5px;
}
.campo { margin-bottom: 14px; }

.flash {
  padding: 12px 15px;
  border-radius: var(--raio);
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
  border-left: 4px solid;
}
.flash-sucesso { background: var(--verde-claro); color: var(--verde-fundo); border-color: var(--verde); }
.flash-info    { background: #F1F1F1; color: #333; border-color: var(--preto); }
.flash-erro    { background: #FDECEC; color: var(--erro); border-color: var(--erro); }
.flash-alerta  { background: #FEF3C7; color: var(--alerta); border-color: var(--alerta); }

.vazio {
  text-align: center;
  padding: 44px 20px;
  color: var(--texto-fraco);
}
/* Só o ícone grande do próprio estado vazio, não o que vai dentro do botão:
   como descendente, esta regra inflava o ícone do "Limpar filtros" para 38px. */
.vazio > i { font-size: 38px; opacity: .3; display: block; margin-bottom: 10px; }
.vazio .btn i { font-size: inherit; opacity: 1; display: inline; margin: 0; }

.aviso-sim {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--preto);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.aviso-sim b { color: var(--verde); }

/* ---------- Chat ---------------------------------------------------------- */
.chat { display: grid; grid-template-columns: 310px 1fr; gap: 14px; height: 100%; }
.chat-lista { background: var(--branco); border: 1px solid var(--linha);
              border-radius: var(--raio); overflow-y: auto; }
.chat-item {
  display: block;
  padding: 13px 15px;
  border-bottom: 1px solid #F1F1F1;
  text-decoration: none;
  color: var(--texto);
}
.chat-item:hover { background: #FAFAFA; }
.chat-item.on { background: var(--verde-claro); box-shadow: inset 3px 0 0 var(--verde); }
.chat-item .nome { font-weight: 600; font-size: 14px; }
.chat-item .previa {
  font-size: 12.5px;
  color: var(--texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.chat-janela {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.chat-cabeca {
  padding: 13px 18px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.chat-msgs { flex: 1; overflow-y: auto; padding: 18px; background: #FAFAFA; }
.bolha {
  max-width: 66%;
  padding: 10px 13px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.bolha .quem {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 3px;
}
.bolha-cliente { background: var(--branco); border: 1px solid var(--linha); }
.bolha-nossa { background: var(--verde); color: var(--preto); margin-left: auto; }
.bolha-ia { background: var(--preto); color: var(--branco); margin-left: auto; }
.bolha-sistema {
  background: #FEF3C7;
  color: var(--alerta);
  max-width: 100%;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
}
.chat-envio {
  display: flex;
  gap: 9px;
  padding: 13px;
  border-top: 1px solid var(--linha);
}

/* ---------- Pipeline ------------------------------------------------------ */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.coluna { min-width: 250px; flex: 1; background: #EFEFEF; border-radius: var(--raio); padding: 11px; }
.coluna-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 3px;
}
.coluna-cor { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.mini-card {
  background: var(--branco);
  border-radius: 8px;
  padding: 11px 12px;
  margin-bottom: 8px;
  box-shadow: var(--sombra);
  font-size: 13.5px;
}
.mini-card .valor { font-weight: 700; color: var(--verde-fundo); }

/* ---------- Login --------------------------------------------------------- */
.login-tela {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--preto);
  padding: 20px;
}
.login-caixa {
  width: 100%;
  max-width: 380px;
  background: var(--branco);
  border-radius: 14px;
  padding: 34px;
}
.login-caixa img { width: 46px; height: 46px; border-radius: 10px; }
.login-caixa h1 {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 16px 0 2px;
  line-height: 1;
}

/* ---------- Telas públicas: erro e descadastro --------------------------- */
/* Sem menu de propósito: quem cai aqui pode nem estar logado. */
.tela-recado {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--preto);
  padding: 20px;
}
.recado-caixa {
  width: 100%;
  max-width: 440px;
  background: var(--branco);
  border-radius: 16px;
  padding: 38px 34px;
  text-align: center;
}
.recado-caixa img { width: 44px; height: 44px; border-radius: 10px; }
.recado-caixa h1 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 14px 0 8px;
}
.recado-caixa p { color: var(--texto-fraco); margin: 0 0 22px; font-size: 14.5px; }
.recado-codigo {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--verde-fundo);
  margin-top: 16px;
}
.recado-marca {
  width: 52px;
  height: 52px;
  margin: 16px auto 0;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde-fundo);
  display: grid;
  place-items: center;
  font-size: 28px;
}

/* ---------- Progresso do disparo ---------------------------------------- */
/* Uma campanha grande leva horas. Sem barra, a única forma de saber se anda é
   recarregar e comparar números na memória. */
.barra {
  height: 8px;
  border-radius: 999px;
  background: #ECECEC;
  overflow: hidden;
  display: flex;
}
.barra i { display: block; height: 100%; }
.barra .b-ok    { background: var(--verde); }
.barra .b-falha { background: var(--erro); }
.barra .b-fora  { background: var(--alerta); }
.barra .b-saiu  { background: #9A9A9A; }

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--texto-fraco);
  margin-top: 10px;
}
.legenda b { color: var(--texto); font-variant-numeric: tabular-nums; }
.legenda span { display: flex; align-items: center; gap: 6px; }
.legenda i {
  width: 9px; height: 9px; border-radius: 3px; display: inline-block;
}

/* Pulso discreto enquanto a campanha está enviando: a tela precisa dizer que
   está viva sem virar enfeite piscando. */
.pulsando { animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .pulsando { animation: none; }
}

/* ---------- Escolha de canal -------------------------------------------- */
.canais { display: flex; gap: 8px; flex-wrap: wrap; }
.canais label {
  flex: 1;
  min-width: 104px;
  margin: 0;
  border: 1px solid #D5D5D5;
  border-radius: var(--raio);
  padding: 11px 12px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: .12s;
}
.canais label:hover { border-color: #B4B4B4; }
.canais input { position: absolute; opacity: 0; width: 0; height: 0; }
.canais input:checked + label,
.canais label.on { border-color: var(--verde); background: var(--verde-claro); }
.canais input:focus-visible + label { outline: 2px solid var(--verde); outline-offset: 2px; }
.canais label i { font-size: 17px; }
.canais label .off {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--texto-fraco);
  text-transform: uppercase;
}

/* ---------- Acabamento -------------------------------------------------- */
/* Foco visível em tudo que recebe teclado. Sem isto, quem navega por Tab não
   enxerga onde está — e o painel tem ação que não volta atrás. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: 6px;
}
.suit-nav a:focus-visible, .suit-rail-pe a:focus-visible { outline-color: var(--verde); }

/* Tabela larga rola dentro do próprio quadro em vez de empurrar a página. */
.rolagem { overflow-x: auto; }
/* O min-width vale só onde a tela é estreita. Aplicado sempre, ele obrigava a
   tabela de 3 colunas dentro de um card de meia largura a rolar no desktop —
   e a última coluna ficava escondida atrás da barra, que é justamente o que
   este bloco existe para evitar. */
@media (max-width: 820px) {
  .rolagem table { min-width: 560px; }
}

td, .kpi .val, .legenda b { font-variant-numeric: tabular-nums; }

/* Estado vazio com ação: "nenhuma campanha" sem um botão obriga a pessoa a
   procurar onde se cria uma. */
.vazio .btn { margin-top: 14px; }
.vazio p { max-width: 340px; margin: 6px auto 0; font-size: 13.5px; }

@media (max-width: 900px) {
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: 1fr; }
  .chat { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .suit-rail { width: 62px; }
  .suit-nav a span, .suit-brand b, .suit-secao, .suit-rail-pe a span { display: none; }
  .g2 { grid-template-columns: 1fr; }
  .suit-topo { padding: 14px 16px; }
  .suit-topo h1 { font-size: 23px; }
  .suit-corpo { padding: 16px 16px 48px; }
  .card { padding: 16px; }
}
@media (max-width: 560px) {
  .g4, .g5 { grid-template-columns: 1fr; }
  /* Cabeçalho vira coluna: título e botão lado a lado espremem os dois. */
  .suit-topo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .suit-topo > div:last-child { width: 100%; }
  .suit-topo .btn { width: 100%; justify-content: center; }
}

/* ---------- Barra de filtros --------------------------------------------- */
/* Era flex inline com larguras fixas de 170px: no celular os três campos e o
   botão disputavam a mesma linha e nenhum cabia. Agora quebra. */
.filtros {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filtros .f-curto { width: 170px; }
.filtros label { display: block; }

@media (max-width: 560px) {
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros .f-curto { width: 100%; }
  .filtros .btn { width: 100%; justify-content: center; }
}

/* No papel não existe rolagem: a tabela precisa se soltar do min-width, senão
   imprime cortada na largura da tela em vez de caber na folha. */
@media print {
  .rolagem { overflow-x: visible; }
  .rolagem table { min-width: 0 !important; }
}

/* ---------- Recado da equipe na conversa --------------------------------- */
/* Amarelo de papel colado, não verde de marca: precisa ler como bilhete
   interno à primeira vista, para ninguém confundir com mensagem do cliente. */
.recado {
  margin: 12px 14px 0;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--raio);
  padding: 10px 13px;
  font-size: 13.5px;
}
.recado > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 700;
  color: #92400E;
  list-style: none;
}
.recado > summary::-webkit-details-marker { display: none; }
.recado > summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform .12s;
}
.recado[open] > summary::before { transform: rotate(90deg); }
.recado .so-equipe {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #B45309;
  opacity: .75;
}
/* pre-wrap: recado costuma vir em linhas curtas, uma por combinado. Colapsar
   em parágrafo único desfaz a lista que a pessoa escreveu. */
.recado-texto {
  white-space: pre-wrap;
  margin-top: 8px;
  color: #78350F;
  line-height: 1.45;
}
.recado textarea { font-size: 13.5px; }

@media (max-width: 560px) {
  .recado { margin: 10px 10px 0; }
}

/* ---------- Registrar tentativa na própria linha ------------------------- */
/* Tudo numa linha só de propósito: se anotar "liguei, não atendeu" custar uma
   tela nova, ninguém anota — e a fila passa a mentir sobre o que foi tentado. */
.toque {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.toque select, .toque input {
  width: auto;
  font-size: 12.5px;
  padding: 5px 8px;
  margin: 0;
}
.toque input { min-width: 130px; flex: 1; }

@media (max-width: 820px) {
  .toque { flex-direction: column; align-items: stretch; }
  .toque select, .toque input, .toque .btn { width: 100%; }
}

/* Edição do recado: discreta, porque ler é o que se faz aqui quase sempre. */
.recado-editar { margin-top: 10px; }
.recado-editar > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: #B45309;
  list-style: none;
}
.recado-editar > summary::-webkit-details-marker { display: none; }
.recado-editar > summary::before { content: "✎ "; }

/* ---------- Limites de envio, no topo do disparo ------------------------- */
/* Em cima dos KPIs de propósito: "dá para enviar agora?" é a pergunta que
   antecede qualquer número de campanha. */
.limites {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.limite {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 4px solid #D5D5D5;
  border-radius: var(--raio);
  padding: 14px 16px;
}
.limite.ok      { border-left-color: var(--verde); }
.limite.atencao { border-left-color: var(--alerta); }
.limite.fechado { border-left-color: var(--erro); }
.limite .lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.limite .val {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.limite .nota { font-size: 12.5px; color: var(--texto-fraco); margin-top: 6px; line-height: 1.4; }

@media (max-width: 900px) { .limites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .limites { grid-template-columns: 1fr; } }

/* Sugerir fica embaixo do campo, discreto: é apoio para quem responde, não a
   ação principal. A ação principal é a pessoa escrever. */
.chat-sugerir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 12px;
  flex-wrap: wrap;
}
.chat-sugerir .btn[disabled] { opacity: .5; cursor: not-allowed; }


/* Resumo do handoff: mesma caixa do recado da equipe, borda verde para não
   se confundir com ele — um é o que a IA levantou, o outro é o combinado
   entre as pessoas. */
.recado.handoff { border-left: 3px solid var(--verde, #33CC33); }


/* O texto da mensagem como o cliente lê. Fundo de bolha de WhatsApp e largura
   de celular: a mensagem que parece curta numa caixa larga vira seis linhas no
   telefone, e é no telefone que ela vai ser lida. */
.previa-msg {
  white-space: pre-wrap;
  background: var(--verde-claro, #EFFFEA);
  border: 1px solid var(--borda, #E4E7EC);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  max-width: 460px;
  font-size: 14.5px;
  line-height: 1.5;
}

/* ---------- Tela de Fluxo ------------------------------------------------ */
/* O funil desenhado de cima para baixo: número, linha ligando um passo ao
   outro e o card com os campos daquele ponto. A linha é o que faz a tela ser
   um fluxo e não uma lista de configurações soltas. */
.fluxo { max-width: 940px; }

.passo { display: flex; gap: 16px; align-items: flex-start; }

.passo-num {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--preto);
  color: var(--verde);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* A linha sai do número e desce até o próximo passo. No último, não existe:
   fluxo que termina numa linha solta parece que ficou faltando alguma coisa. */
.passo:not(:last-child) .passo-num::after {
  content: "";
  position: absolute;
  top: 34px;
  left: 50%;
  width: 2px;
  height: calc(100% + 22px);
  background: var(--linha);
  transform: translateX(-50%);
  z-index: 0;
}

.passo-card {
  flex: 1;
  min-width: 0;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.passo-card h2 { font-size: 18px; margin: 0 0 6px; }
.passo-card p { font-size: 13.5px; margin: 0 0 14px; line-height: 1.55; }

/* Os números reais do dia, ao lado do campo que manda neles: "descanso 20h"
   sozinho é opinião; com "3 adiados hoje" ao lado, é decisão. */
.numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.numeros span {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.numeros span b { color: var(--texto); font-size: 13.5px; }

.estado {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--raio);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.estado i { font-size: 20px; flex: 0 0 auto; }
.estado.ok  { background: var(--verde-claro); color: var(--verde-fundo); }
.estado.nao { background: #FEF3C7; color: var(--alerta); }

.bloco-fino {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 15px 4px;
  margin-bottom: 14px;
}
.bloco-titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.bloco-titulo .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Dias da semana: caixinha por dia. Sete campos de texto separados por vírgula
   é onde nasce "1,2,33" — o clique não tem como errar o formato. */
.dias { display: flex; flex-wrap: wrap; gap: 6px; }
.dias .dia {
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.dias .dia input { position: absolute; opacity: 0; width: 0; height: 0; }
.dias .dia span {
  display: inline-block;
  border: 1px solid #D5D5D5;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-fraco);
  background: var(--branco);
  text-transform: capitalize;
}
.dias .dia input:checked + span {
  background: var(--verde-claro);
  border-color: var(--verde);
  color: var(--verde-fundo);
}
.dias .dia input:focus-visible + span { outline: 2px solid var(--verde); }

.sw { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.sw input { width: auto; }
.sw span { font-size: 14px; color: var(--texto); font-weight: 500; }

/* "Voltar ao padrão" é um botão porque muda estado no servidor, mas dentro de
   uma frase ele tem que parecer link — botão cinza no meio de um parágrafo
   rouba a atenção do campo. */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--verde-fundo);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 820px) {
  .passo-card .grid.g3, .passo-card .grid.g2 { grid-template-columns: 1fr; }
}

/* ---------- Painel: fila, estado, gráfico e barras ------------------------ */
/* Linha clicável de lista curta (a fila do "precisa de você", as campanhas).
   É link, não linha de tabela: o alvo do clique é a linha inteira, não um
   texto de quatro palavras no meio dela. */
.linha-acao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 8px;
  border-bottom: 1px solid #F1F1F1;
  text-decoration: none;
  color: var(--texto);
  font-size: 14px;
}
.linha-acao:last-child { border-bottom: 0; }
.linha-acao:hover { background: #FAFAFA; }
.linha-acao > i:first-child { font-size: 19px; color: var(--texto-fraco); }
.linha-acao b { font-weight: 700; }
.linha-acao > span { flex: 1; }
.linha-acao .seta { color: #C9C9C9; font-size: 16px; }
.linha-acao.urgente > i:first-child { color: var(--alerta); }
.linha-acao.urgente b { color: var(--alerta); }

.linha-estado {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 2px;
  border-bottom: 1px solid #F1F1F1;
  font-size: 13.5px;
}
.linha-estado i { font-size: 18px; color: var(--texto-fraco); }
.linha-estado b { font-weight: 600; }
/* O ponto vem ANTES do texto e é a mesma forma nos dois estados: quem lê a
   coluna de cima a baixo compara pontos, não frases. */
.ponto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ponto.on  { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.ponto.off { background: #C9C9C9; }

.grafico { width: 100%; height: 170px; display: block; overflow: visible; }
.grafico-eixo {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--texto-fraco);
  margin-top: 2px;
}
.grafico-eixo span { flex: 1; text-align: center; }
.grafico-eixo span:first-child { text-align: left; }
.grafico-eixo span:last-child { text-align: right; }
.legenda { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px;
  color: var(--texto-fraco); }
.legenda i { width: 11px; height: 3px; border-radius: 2px; display: inline-block; }

.barra-linha { margin-top: 12px; }
.barra-topo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 4px;
}
.barra-trilho { height: 8px; background: #EFEFEF; border-radius: 4px; overflow: hidden; }
.barra-cheia { height: 100%; border-radius: 4px; min-width: 2px; }

/* Tela estreita. Duas quebras, não uma: num notebook de 13" o que atrapalha
   são as duas colunas largas lado a lado (o gráfico sai cortado), mas quatro
   KPIs em duas fileiras de dois continuam legíveis. Só no celular tudo vira
   coluna única. */
@media (max-width: 1000px) {
  .grid.g2, .grid.g3 { grid-template-columns: 1fr; }
  .grid.g4, .grid.g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid.g4, .grid.g5 { grid-template-columns: 1fr; }
}

/* ---------- Monitor da IA ------------------------------------------------ */
/* Número grande dentro de um card, sem a moldura do .kpi: no monitor ele
   aparece em dupla dentro de outro cartão, e cartão dentro de cartão vira
   uma cebola de bordas. */
.kpi-inline {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}
.kpi-inline.alerta { color: var(--alerta); }

/* Colunas do gráfico de barras. CSS puro e não SVG porque cada coluna precisa
   de `title` para o valor exato aparecer no hover — dentro do SVG isso viraria
   um <title> por barra e o dobro de marcação.

   NÃO existe trilho de fundo. Com ele, cada dia virava um retângulo cinza da
   altura toda e o gráfico dizia "todo dia bateu o teto" — o oposto do que os
   dados diziam. A régua é a linha de base, e só. */
.colunas {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
  border-bottom: 1px solid var(--linha);
}
.col-dia { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.col-cheia {
  width: 100%;
  background: var(--verde);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  display: flex;
  align-items: flex-end;
}
.col-falha { width: 100%; background: var(--erro); }

/* Uma volta da IA: o que entrou e o que saiu, lado a lado. Lado a lado e não
   um embaixo do outro porque o que se faz aqui é comparar os dois. */
.volta { padding: 12px 2px; border-bottom: 1px solid #F1F1F1; }
.volta:last-child { border-bottom: 0; }
.volta.ruim { background: #FEF7F7; border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.volta-topo { display: flex; align-items: center; gap: 8px; font-size: 13px;
  margin-bottom: 7px; flex-wrap: wrap; }
.volta-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  font-size: 13.5px; line-height: 1.45; }
.volta-par > div { background: #FAFAFA; border-radius: 8px; padding: 9px 11px; }
.volta-par > div:last-child { background: var(--verde-claro); }
.volta.ruim .volta-par > div:last-child { background: #FDECEC; color: var(--erro); }
.volta-rot { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 3px; }
@media (max-width: 820px) { .volta-par { grid-template-columns: 1fr; } }

/* Resumo do handoff no ensaio: é texto montado em código, com quebras que
   fazem parte dele — `pre` preserva, mas precisa quebrar a linha longa em vez
   de esticar o cartão. */
.resumo-handoff {
  margin: 0;
  font-family: var(--fonte);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #FAFAFA;
  border-radius: 8px;
  padding: 12px 13px;
  max-height: 300px;
  overflow-y: auto;
}

/* ---------- Recorte de tempo (hoje, ontem, 7 dias…) ---------------------- */
.periodo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.periodo-atalhos { display: flex; gap: 6px; flex-wrap: wrap; }
.periodo-bt {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid #D5D5D5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.2;
}
.periodo-bt:hover { background: #F3F3F3; }
.periodo-bt.on { background: var(--preto); border-color: var(--preto); color: var(--verde); }
.periodo-datas { display: flex; align-items: center; gap: 6px; }
.periodo-datas input[type=date] {
  width: auto;
  padding: 6px 9px;
  font-size: 12.5px;
  border-radius: 9px;
}
.periodo-datas span { color: var(--texto-fraco); font-size: 12px; }

/* ---------- O primeiro disparo, na tela de Fluxo ------------------------- */
/* Uma trilha e não quatro cartões: o que se lê aqui é a SEQUÊNCIA — toque,
   resposta, reforço, ligação —, e cartões soltos lado a lado leem como quatro
   coisas independentes. As setas entre eles são a informação. */
.f1-trilha {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.f1-passo {
  flex: 1;
  min-width: 170px;
  background: #FAFAFA;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 13px 14px;
  font-size: 13px;
}
/* `> b`, filho DIRETO. Como descendente, esta regra pegava o <b> dentro da
   frase explicativa e quebrava "vai para uma pessoa, não para o João" em três
   linhas no meio das palavras. */
.f1-passo > b { display: block; font-size: 13.5px; margin: 6px 0 2px; }
.f1-passo .muted { font-size: 12.5px; line-height: 1.4; display: block; }
.f1-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--preto);
  color: var(--verde);
  font-size: 11.5px;
  font-weight: 800;
}
.f1-n {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  margin: 4px 0 5px;
  color: var(--verde-fundo);
}
.f1-seta { align-self: center; color: #C9C9C9; font-size: 18px; }
/* Em tela estreita a trilha vira coluna, e a seta apontando para a direita
   passaria a mentir sobre a direção da leitura. */
@media (max-width: 900px) {
  .f1-seta { transform: rotate(90deg); align-self: flex-start; margin-left: 22px; }
}