/* ===========================================================================
   RGA Prospect — sistema visual

   Base clara e arejada, barra lateral escura, azul como cor de ação.
   Cor com significado continua reservada: verde/âmbar/vermelho só aparecem
   em nota, situação e alerta, nunca como decoração. E o texto escrito pela
   IA continua em serifada, num bloco próprio, para ninguém aprovar um e-mail
   sem perceber que foi máquina que escreveu.
   =========================================================================== */

:root {
  /* superfícies */
  --fundo:       #f5f7fb;
  --superficie:  #ffffff;
  --sutil:       #f8fafc;
  --linha:       #e6eaf0;
  --linha-forte: #d5dce6;

  /* texto */
  --texto:  #0f172a;
  --suave:  #64748b;
  --fraco:  #94a3b8;

  /* ação */
  --azul:        #2563eb;
  --azul-escuro: #1d4ed8;
  --azul-claro:  #eff4ff;

  /* significado */
  --alto:  #059669;   --alto-fundo:  #ecfdf5;
  --medio: #d97706;   --medio-fundo: #fffbeb;
  --baixo: #94a3b8;
  --erro:  #dc2626;   --erro-fundo:  #fef2f2;

  /* barra lateral */
  --rail:        #0b1324;
  --rail-2:      #111c33;
  --rail-texto:  #a8b3c7;
  --rail-fraco:  #5f6e88;

  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.04);
  --sombra-alta: 0 8px 24px rgba(15,23,42,.10);

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --serifa: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --largura-rail: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 14.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.015em; }
code { font-size: 13px; background: var(--sutil); border: 1px solid var(--linha);
       padding: 1px 5px; border-radius: 5px; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

.pular { position: absolute; left: -999px; top: 0; z-index: 50;
         background: var(--texto); color: #fff; padding: 10px 16px; }
.pular:focus { left: 0; }

.icone { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Barra lateral --------------------------------------------------------- */

.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--largura-rail); z-index: 20;
  background: linear-gradient(180deg, var(--rail) 0%, var(--rail-2) 100%);
  color: var(--rail-texto); display: flex; flex-direction: column;
}

.rail__marca {
  display: flex; align-items: center; gap: 11px; padding: 22px 22px 14px;
  text-decoration: none; color: #fff;
}
.rail__logo {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  font-weight: 700; font-size: 17px; color: #fff;
  box-shadow: 0 4px 12px rgba(59,130,246,.35);
}
.rail__nome { line-height: 1.15; }
.rail__nome strong { display: block; font-size: 16px; letter-spacing: .02em; }
.rail__nome small { color: var(--rail-fraco); font-size: 12px; }

.rail__menu { flex: 1; overflow-y: auto; padding-bottom: 12px; }
.rail__menu ul { list-style: none; margin: 0; padding: 0 12px; }
.rail__grupo {
  margin: 18px 24px 6px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--rail-fraco);
}
.rail__menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; margin: 1px 0; border-radius: var(--raio-p);
  color: var(--rail-texto); text-decoration: none; font-weight: 500;
  transition: background .12s, color .12s;
}
.rail__menu a span { flex: 1; }
.rail__menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail__menu a[aria-current="page"] {
  background: rgba(59,130,246,.16); color: #fff;
  box-shadow: inset 3px 0 0 #3b82f6;
}
.rail__menu a[aria-current="page"] .icone { color: #60a5fa; }
.rail__menu em {
  font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 4px 7px; border-radius: 999px; background: #3b82f6; color: #fff;
}
.rail__menu em.em--alerta { background: #f59e0b; color: #1f1300; }

.rail__cota {
  margin: 0 16px 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.rail__cota-topo { display: flex; justify-content: space-between; align-items: baseline;
                   font-size: 12px; margin-bottom: 8px; }
.rail__cota-topo strong { color: #fff; font-size: 14px; }
.rail__cota small { display: block; margin-top: 7px; font-size: 11.5px; color: var(--rail-fraco); }
.barra { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px;
           background: linear-gradient(90deg, #3b82f6, #6366f1); }

.rail__pe {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.rail__avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #1e2b47; color: #c7d2fe; font-weight: 600; font-size: 13px;
}
.rail__usuario { flex: 1; font-size: 13.5px; color: #dbe3f0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__sair { color: var(--rail-fraco); display: grid; place-items: center;
              padding: 6px; border-radius: 6px; }
.rail__sair:hover { color: #fff; background: rgba(255,255,255,.06); }

/* --- Área principal -------------------------------------------------------- */

#conteudo {
  margin-left: var(--largura-rail); padding: 28px 36px 72px; max-width: 1480px;
}

.topo {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.topo h1 { font-size: 24px; font-weight: 700; }
.topo__sub { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
.topo__acao { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Avisos ---------------------------------------------------------------- */

.aviso {
  position: relative; display: block;
  padding: 12px 16px 12px 34px; margin-bottom: 18px; border-radius: 10px;
  background: var(--alto-fundo); border: 1px solid #bbf0d9; color: #064e3b;
  font-size: 14px;
}
.aviso::before { content: ""; position: absolute; left: 16px; top: 19px;
                 width: 8px; height: 8px; border-radius: 50%; background: var(--alto); }
.aviso--erro { background: var(--erro-fundo); border-color: #fecaca; color: #7f1d1d; }
.aviso--erro::before { background: var(--erro); }
.aviso--atencao { background: var(--medio-fundo); border-color: #fde68a; color: #713f12; }
.aviso--atencao::before { background: var(--medio); }
.aviso a { color: inherit; font-weight: 600; }

/* --- Cartões --------------------------------------------------------------- */

.painel, .quadro {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px;
}
.painel + .painel { margin-top: 18px; }
.painel h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }

.numeros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin-bottom: 20px;
}
.numeros > div {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px;
  display: flex; flex-direction: column-reverse; gap: 4px;
}
/* Cinco números na mesma linha. Sem isto, o quinto cartão cai sozinho numa
   segunda linha com três quartos de espaço vazio ao lado, e parece defeito. */
.numeros--cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --- Placar: os mesmos números, numa faixa só ------------------------------
   Cartão grande é para o número que você veio ver. Cinco contadores de apoio,
   quase sempre em zero, não merecem meia tela de altura cada: viram uma faixa
   que se lê de uma passada de olho e devolve o espaço para o trabalho. */
.placar {
  display: flex; flex-wrap: wrap; overflow: hidden; margin-bottom: 18px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.placar > div {
  flex: 1 1 0; min-width: 112px; padding: 11px 16px;
  border-left: 1px solid var(--linha);
}
.placar > div:first-child { border-left: 0; }
.placar strong { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.placar span { font-size: 12.5px; color: var(--suave); }
.placar__zero strong { color: var(--suave); font-weight: 600; }

/* --- Faixa: painel que é uma barra, não um bloco --------------------------- */
.faixa { padding: 14px 18px; }
.faixa + .faixa, .faixa + .painel, .painel + .faixa { margin-top: 18px; }
/* Rótulo acima do campo some: numa barra de uma linha, o próprio campo e o
   texto de apoio já dizem o que é, e o rótulo só empurraria tudo para baixo. */
.faixa .linha-campos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.faixa .linha-campos .campo { flex: 1 1 220px; }

/* --- Trabalho à esquerda, apoio à direita ---------------------------------
   A peça que se escreve merece a largura; escolher modelo, montar a lista e
   disparar são apoio e cabem numa coluna estreita ao lado, em vez de empurrar
   o editor mais um metro para baixo. */
.duas-colunas {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 18px; align-items: start;
}
.duas-colunas > * > .painel:first-child { margin-top: 0; }
/* Campo de texto pequeno que anda junto de um botão, numa barra de ações. */
.campo-mini {
  font: inherit; font-size: 13px; padding: 6px 10px; min-width: 0;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: #fff;
}
/* Escolher o modelo mora no cabeçalho do painel da mensagem: no telefone ele
   ocupa a linha inteira em vez de empurrar a página para o lado. */
.escolher-modelo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.escolher-modelo select { max-width: 200px; }
@media (max-width: 560px) {
  .escolher-modelo { width: 100%; }
  .escolher-modelo select { flex: 1 1 120px; max-width: none; }
}

/* Na coluna estreita os filtros deixam de disputar a mesma linha. */
.filtros--coluna { flex-direction: column; align-items: stretch; }
.filtros--coluna .campo { min-width: 0; width: 100%; }
.filtros--coluna > .botao { width: 100%; justify-content: center; }
@media (max-width: 1180px) {
  /* minmax(0, 1fr), não 1fr: "1fr" sozinho deixa a coluna crescer até o
     min-content do conteúdo mais teimoso, e aí a tela inteira ganha uma
     rolagem lateral no telefone. */
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .filtros--coluna { flex-direction: row; align-items: flex-end; }
  .filtros--coluna > .botao { width: auto; }
}
.numeros strong { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.numeros span { font-size: 13px; color: var(--suave); font-weight: 500; }

.vazio {
  background: var(--superficie); border: 1px dashed var(--linha-forte);
  border-radius: var(--raio); padding: 42px 26px; text-align: center; color: var(--suave);
}
.vazio strong { display: block; color: var(--texto); font-size: 16px; margin-bottom: 6px; }

/* --- Nota: medidor de dez segmentos ---------------------------------------- */

.medidor { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.medidor i { width: 4px; height: 14px; border-radius: 2px; background: #e5e9f0; }
.medidor b { margin-left: 8px; font-size: 13.5px; font-weight: 600; min-width: 22px; }
.medidor--alto i.cheio  { background: var(--alto); }   .medidor--alto b  { color: var(--alto); }
.medidor--medio i.cheio { background: var(--medio); }  .medidor--medio b { color: var(--medio); }
.medidor--baixo i.cheio { background: var(--baixo); }  .medidor--baixo b { color: var(--suave); }
.medidor--vazio b { color: var(--fraco); font-weight: 500; }
.medidor--vazio i { background: #eef1f5; }

/* --- Etiquetas de situação ------------------------------------------------- */

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta--ambar   { background: #fef3c7; color: #92400e; }
.etiqueta--azul    { background: #dbeafe; color: #1e40af; }
.etiqueta--violeta { background: #ede9fe; color: #5b21b6; }
.etiqueta--ciano   { background: #cffafe; color: #155e75; }
.etiqueta--verde   { background: #d1fae5; color: #065f46; }
.etiqueta--cinza   { background: #f1f5f9; color: #475569; }

/* --- Texto escrito pela IA ------------------------------------------------- */

.ia {
  font-family: var(--serifa); font-size: 15.5px; line-height: 1.65; color: #1e293b;
  background: #f8f9ff; border: 1px solid #e0e7ff; border-left: 3px solid #818cf8;
  border-radius: var(--raio-p); padding: 12px 16px; margin: 0;
}
.ia--email { white-space: pre-wrap; }
.ia__fonte { font-family: var(--sans); font-size: 12px; color: var(--suave); }

/* --- Tabelas --------------------------------------------------------------- */

.envolve {
  overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
table.lista { width: 100%; border-collapse: collapse; background: var(--superficie); }
.painel table.lista { border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
table.lista th, table.lista td {
  padding: 12px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid #eef1f5;
}
table.lista th {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--suave); background: var(--sutil); border-bottom: 1px solid var(--linha);
}
table.lista tbody tr { transition: background .1s; }
table.lista tbody tr:hover { background: #f8fafc; }
table.lista tbody tr:last-child td { border-bottom: 0; }
table.lista .num { text-align: right; font-variant-numeric: tabular-nums; }

.principal { font-weight: 600; color: var(--texto); }
a.principal { text-decoration: none; }
a.principal:hover { color: var(--azul); }
.meta { color: var(--suave); font-size: 13px; }

/* --- Botões ---------------------------------------------------------------- */

.botao, button.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px; font: 500 14px/1.3 var(--sans); cursor: pointer;
  border: 1px solid var(--azul); background: var(--azul); color: #fff;
  border-radius: var(--raio-p); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(37,99,235,.25); transition: background .12s, border-color .12s;
}
.botao:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.botao.botao--claro { background: var(--superficie); color: #1e293b; border-color: var(--linha-forte);
                box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.botao.botao--claro:hover { background: var(--sutil); border-color: #c3ccd9; }
.botao.botao--perigo { background: var(--superficie); color: var(--erro); border-color: #fbcaca;
                 box-shadow: none; }
.botao.botao--perigo:hover { background: var(--erro-fundo); border-color: #f5a3a3; }
.botao.botao--mini { padding: 5px 11px; font-size: 13px; }
.botao[disabled] { opacity: .45; cursor: not-allowed; }
form.linha { display: inline; }

/* --- Formulários ----------------------------------------------------------- */

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.campos--largo { grid-template-columns: 1fr; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: 12.5px; font-weight: 500; color: #334155; }
.campo input, .campo select, .campo textarea {
  font: inherit; padding: 8px 11px; border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p); background: #fff; color: var(--texto); width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo textarea.corpo { font-family: var(--serifa); line-height: 1.6; min-height: 260px; }
.campo small { color: var(--suave); font-size: 12.5px; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--azul); cursor: pointer; }

/* Barra de filtros: um cartão só, em uma linha quando cabe. */
.filtros {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 14px 16px; margin-bottom: 16px;
}
.filtros .campo { min-width: 150px; flex: 0 1 auto; }
.filtros .campo--busca { flex: 1 1 240px; min-width: 220px; }
.filtros .campo label { font-size: 12px; color: var(--suave); }
.filtros .campo input, .filtros .campo select { padding: 7px 10px; }
.filtros > .meta { align-self: center; }

/* --- Tabela de empresas compartilhada -------------------------------------- */

.lote { margin: 0; }
.lista--empresas .col-marca    { width: 44px; padding-right: 0; }
.lista--empresas .col-nota     { width: 150px; }
.lista--empresas .col-situacao { width: 140px; }
.lista--empresas td            { padding-top: 13px; padding-bottom: 13px; }
.lista--empresas td:nth-child(3) { width: 32%; max-width: 0; }

.email {
  display: block; font-size: 14px; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.email--descarte { color: var(--erro); text-decoration: line-through;
                   text-decoration-color: rgba(220,38,38,.4); }
.email--atencao  { color: var(--medio); }

.alerta {
  display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 6px;
  font-size: 12px; font-weight: 600; line-height: 1.45;
}
.alerta--descarte { background: #fee2e2; color: #991b1b; }
.alerta--atencao  { background: #fef3c7; color: #92400e; }
tr.linha--descarte td { background: #fffafa; }
tr.linha--atencao td  { background: #fffdf7; }
.obs-curta { margin-top: 4px; }

/* Barra de lote: diz o que fazer enquanto nada está selecionado; os botões
   só aparecem quando há o que decidir. Cola no topo ao rolar. */
.barra-lote {
  position: sticky; top: 0; z-index: 5; min-height: 52px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--superficie);
  border: 1px solid var(--linha); border-bottom: 0; border-radius: var(--raio) var(--raio) 0 0;
}
.barra-lote + .envolve { border-radius: 0 0 var(--raio) var(--raio); }
.barra-lote__todos { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 500; }
.barra-lote__folga { flex: 1; }
.barra-lote [data-lote-botao] { display: none; }
.barra-lote.ativa { background: var(--azul-claro); border-color: #c7d7fb; }
.barra-lote.ativa [data-lote-botao] { display: inline-flex; }
.barra-lote.ativa [data-lote-contador] { color: var(--azul-escuro); font-weight: 600; }

/* Variante da Abordagem: a barra flutua sobre painéis, não sobre uma tabela.
   Precisa de borda inteira e de sombra para não se misturar com o cartão que
   passa por baixo dela enquanto você rola a fila. */
.barra-lote--cola {
  border-bottom: 1px solid var(--linha); border-radius: var(--raio);
  margin-bottom: 16px; box-shadow: 0 6px 16px -10px rgba(16, 24, 40, .35);
}

/* --- Curadoria: resumo em abas --------------------------------------------- */

.resumo-triagem {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px;
}
.resumo-triagem__item {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 16px 18px; text-decoration: none; color: var(--texto);
  transition: border-color .12s, box-shadow .12s;
}
.resumo-triagem__item:hover { border-color: #c3ccd9; box-shadow: var(--sombra-alta); }
.resumo-triagem__item.ativo { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.resumo-triagem__item strong { display: block; font-size: 26px; font-weight: 700; line-height: 1.15; }
.resumo-triagem__item span { font-size: 13px; color: var(--suave); font-weight: 500; }
.resumo--descarte strong { color: var(--erro); }
.resumo--atencao strong  { color: var(--medio); }
.resumo--limpas strong   { color: var(--alto); }

.atalhos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.atalhos form { margin: 0; }
.atalhos__ordem { margin-left: auto !important; display: flex; gap: 8px; align-items: center; }
.atalhos__ordem select { font: inherit; padding: 7px 10px; border: 1px solid var(--linha-forte);
                         border-radius: var(--raio-p); background: #fff; }

.paginas {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-top: 16px; font-size: 14px;
}
.paginas a { font-weight: 500; text-decoration: none; }
.paginas a:last-child { text-align: right; }

.historico { margin-top: 22px; }
.historico summary { cursor: pointer; list-style: none; }
.historico summary::-webkit-details-marker { display: none; }
.historico summary h2 { display: inline; margin: 0; }
.historico summary::after { content: " +"; color: var(--suave); }
.historico[open] summary::after { content: " −"; }
.historico[open] summary { margin-bottom: 14px; }

/* --- Funil -----------------------------------------------------------------
   Cada coluna tem altura própria e rola por dentro. Antes, uma etapa com 40
   leads esticava a página e as outras colunas ficavam invisíveis no topo. */

.funil {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximate;
  /* Sem align-items: start — no grid, as colunas esticam até a altura da mais
     cheia. Assim o quadro parece um quadro: quando há pouca coisa todas ficam
     baixas, e quando uma enche todas acompanham, até o teto. */
}
.coluna {
  display: flex; flex-direction: column;
  background: #eef2f7; border-radius: var(--raio); padding: 8px;
  min-height: 180px;
  max-height: clamp(360px, calc(100vh - 300px), 700px);
}
.coluna__topo {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px 10px; flex-shrink: 0;
}
.coluna__topo b { font-size: 13px; font-weight: 600; }
.coluna__topo span { font-size: 12px; font-weight: 600; color: var(--suave);
                     background: #fff; padding: 1px 8px; border-radius: 999px; }
.coluna { scroll-snap-align: start; }
/* A barra de rolagem ganha espaço próprio: antes ela passava por cima dos
   cartões e cortava a nota do lado direito. */
.coluna__lista {
  overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0;
  padding: 0 8px 2px 2px; scrollbar-width: thin; scrollbar-gutter: stable;
}
.coluna__lista::-webkit-scrollbar { width: 6px; }
.coluna__lista::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.coluna__vazia { color: var(--fraco); padding: 8px; margin: 0; }
.coluna__mais { display: block; padding: 8px; font-size: 12.5px; text-align: center;
                text-decoration: none; flex-shrink: 0; }

/* Altura igual em todos: cartão que cresce conforme o texto faz a coluna
   parecer quebrada, que foi o que aconteceu com os nomes longos da Receita. */
.ficha { display: flex; flex-direction: column; justify-content: space-between;
         min-height: 86px; background: var(--superficie); border: 1px solid var(--linha);
         border-radius: 10px; padding: 10px 11px; margin-bottom: 8px; text-decoration: none;
         color: inherit; box-shadow: var(--sombra); transition: box-shadow .12s, transform .12s; }
.ficha:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
/* Nome em até duas linhas e apoio em uma: cartão de altura previsível faz a
   coluna ser lida de relance. */
.ficha b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
           overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ficha span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
              overflow: hidden; color: var(--suave); font-size: 12px; margin-top: 2px; }
.ficha__nota { margin-top: 8px; }
/* O medidor completo não cabe num cartão estreito; aqui vale só o número. */
.ficha__nota .medidor i { display: none; }
.ficha__nota .medidor b { margin-left: 0; font-size: 15px; }

/* --- Linha do tempo -------------------------------------------------------- */

.tempo { list-style: none; margin: 0; padding: 0; }
.tempo li { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--linha); margin-left: 5px; }
.tempo li:last-child { padding-bottom: 0; }
.tempo li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px;
                    border-radius: 50%; background: var(--superficie); border: 2px solid #93c5fd; }
.tempo time { display: block; font-size: 12px; color: var(--suave); }
.tempo p { margin: 3px 0 0; white-space: pre-wrap; }

/* --- Login ----------------------------------------------------------------- */

.entrada { display: grid; place-items: center; min-height: 100vh; padding: 20px;
           background: radial-gradient(circle at 30% 20%, #1e3a8a 0%, var(--rail) 55%); }
.entrada__caixa { width: 100%; max-width: 360px; background: var(--superficie);
                  border-radius: 16px; padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.entrada h1 { font-size: 22px; margin-bottom: 4px; }
.entrada p.sub { margin: 0 0 22px; color: var(--suave); font-size: 14px; }
.entrada .botao { width: 100%; margin-top: 18px; padding: 10px; }
.entrada .campo + .campo { margin-top: 12px; }

/* --- Abas -------------------------------------------------------------------
   Para tela que empilha assuntos independentes um embaixo do outro. Sem elas,
   mexer no remetente exige rolar por cima de cota, IA e horário de envio —
   coisas que não têm nada a ver com o que você veio fazer.

   Sem JavaScript, os painéis aparecem todos, empilhados como antes: a barra de
   abas só nasce quando há quem a faça funcionar. Nunca é melhor esconder
   conteúdo atrás de um botão que não clica. */
.abas { display: none; }
.js-abas .abas {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px;
  border-bottom: 1px solid var(--linha); padding-bottom: 0;
}
.abas__item {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: 9px 15px; border: 0; background: none; color: var(--suave);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: var(--raio-p) var(--raio-p) 0 0;
  display: flex; align-items: center; gap: 7px;
}
.abas__item:hover { color: var(--texto); background: #f1f5f9; }
.abas__item[aria-selected="true"] {
  color: var(--azul-escuro); border-bottom-color: var(--azul);
  background: none; font-weight: 600;
}
.abas__item:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
/* Contador ao lado do nome: diz o que tem lá dentro sem precisar abrir. */
.abas__conta {
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: #e2e8f0; color: #475569;
}
.abas__item[aria-selected="true"] .abas__conta { background: var(--azul-claro); color: var(--azul-escuro); }
.abas__conta--alerta { background: #fef3c7; color: #92400e; }
.js-abas [data-aba-painel] { display: none; }
.js-abas [data-aba-painel].ativa { display: block; }
/* Painel dentro de aba não precisa da margem que separa painéis empilhados. */
.js-abas [data-aba-painel] > .painel:first-child { margin-top: 0; }

@media (max-width: 700px) {
  .js-abas .abas { gap: 2px; }
  .abas__item { padding: 8px 11px; font-size: 13.5px; }
}

/* --- Telas estreitas ------------------------------------------------------- */

@media (max-width: 1100px) {
  .numeros, .resumo-triagem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rail { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rail__marca { padding: 14px 16px; }
  .rail__menu { flex: 1 1 100%; order: 3; display: flex; overflow-x: auto; padding: 0 8px 8px; }
  .rail__grupo { display: none; }
  .rail__menu ul { display: flex; padding: 0; }
  .rail__menu a { white-space: nowrap; }
  .rail__cota { display: none; }
  .rail__pe { border-top: 0; margin-left: auto; }
  #conteudo { margin-left: 0; padding: 20px 16px 60px; }
  .campos { grid-template-columns: 1fr; }
  .atalhos__ordem { margin-left: 0 !important; }
  .lista--empresas td:nth-child(3) { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Números do painel são atalhos: cada um leva à tela onde se age sobre ele. */
.numeros--painel > a {
  position: relative; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px 18px 64px;
  display: flex; flex-direction: column; text-decoration: none; color: var(--texto);
  transition: border-color .12s, box-shadow .12s;
}
.numeros--painel > a:hover { border-color: #c3ccd9; box-shadow: var(--sombra-alta); }
.numeros--painel .icone {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 8px; border-radius: 10px;
  background: var(--azul-claro); color: var(--azul);
}
.numeros--painel > a.destaque .icone { background: #fef3c7; color: #b45309; }
.numeros--painel > a.destaque strong { color: #b45309; }
.numeros--painel strong { font-size: 26px; font-weight: 700; line-height: 1.15; }
.numeros--painel span { font-size: 13px; color: var(--suave); }

/* Filtros dentro de um cartão não viram outro cartão. */
.painel .filtros { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 0; }

/* Assinatura no preview: cinza e com fio, para ficar claro que não é texto da
   IA nem coisa que se edite aqui — ela vem do config.ini na hora do envio. */
.assinatura-previa {
  margin: 10px 0 0; padding: 12px 16px; white-space: pre-wrap;
  font-size: 13.5px; color: var(--suave); background: var(--sutil);
  border: 1px dashed var(--linha-forte); border-radius: var(--raio-p);
}

/* --- Resposta do cliente ---------------------------------------------------
   O texto limpo é o que se lê no dia a dia; o original fica guardado atrás de
   um clique, porque quase sempre é a mesma coisa com mais enfeite. */
.resposta + .resposta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha); }
.resposta__texto {
  margin: 8px 0 0; padding: 12px 16px; white-space: pre-wrap;
  background: var(--alto-fundo); border: 1px solid #bbf0d9;
  border-left: 3px solid var(--alto); border-radius: var(--raio-p);
}
.resposta__original { margin-top: 10px; }
.resposta__original summary { cursor: pointer; font-size: 13px; color: var(--suave); }
.resposta__moldura {
  width: 100%; height: 320px; margin-top: 8px; background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio-p);
}

.etiqueta--vermelho { background: #fee2e2; color: #991b1b; }
.rail__menu em.em--boa { background: #10b981; color: #03271c; }

/* Resposta é a notícia boa do dia: o cartão inteiro ganha a cor, não só um
   detalhe. Verde aqui é o único uso "positivo" de cor no painel. */
.painel--boa { border-color: #a7f3d0; box-shadow: 0 0 0 3px rgba(16,185,129,.10), var(--sombra); }
.painel--boa h2 { display: flex; align-items: center; gap: 10px; }

/* Pedido de saída é resposta, mas não é boa notícia. Mesma forma, outra cor. */
.painel--saida { border-color: #fecaca; box-shadow: 0 0 0 3px rgba(220,38,38,.08), var(--sombra); }
.resposta__texto--saida { background: var(--erro-fundo); border-color: #fecaca;
                          border-left-color: var(--erro); }
.barra-lote__rotulo { margin-left: 4px; }
.barra-lote.ativa .barra-lote__rotulo { display: inline; }
.barra-lote .barra-lote__rotulo { display: none; }

/* --- Tela do motor ---------------------------------------------------------
   Cada comando mostra o que faz e a linha equivalente no terminal, para quem
   precisar rodar por SSH saber qual é. */
.comandos { display: flex; flex-direction: column; }
.comando {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid var(--linha); margin: 0; flex-wrap: wrap;
}
.comando:first-child { border-top: 0; padding-top: 0; }
.comando__texto { flex: 1 1 380px; }
.comando__texto strong { font-size: 14.5px; }
.comando__texto p { margin: 3px 0 6px; }
.comando__texto code { font-size: 12px; color: var(--suave); background: var(--sutil); }
/* Os controles de um comando cabem numa linha no monitor e quebram em várias
   no telefone, em vez de empurrarem a página inteira para o lado. */
.comando__acao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comando__acao input { min-width: 0; }
.comando__acao input { font: inherit; padding: 7px 9px; border: 1px solid var(--linha-forte);
                       border-radius: var(--raio-p); }

.saida {
  margin: 0; padding: 14px 16px; border-radius: var(--raio-p);
  background: #0f1a2e; color: #cbd5e1; font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto;
}
.comando__fila { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--azul); }
.comando__fila--zero { color: var(--fraco); font-weight: 500; }
.comando__acao select { font: inherit; font-size: 13.5px; padding: 7px 9px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: #fff;
  max-width: 190px; }
.rail__papel { display: block; font-size: 11px; color: var(--rail-fraco); text-transform: capitalize; }
/* O seletor de campanha acompanha os botões: só aparece com algo marcado. */
.barra-lote select[name="campanha_id"],
.barra-lote select[name="contatos_lote"] { display: none; max-width: 200px; font: inherit;
  font-size: 13px; padding: 5px 8px; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); }
.barra-lote.ativa select[name="campanha_id"],
.barra-lote.ativa select[name="contatos_lote"] { display: inline-block; }

/* --- Editor da campanha ---------------------------------------------------- */
.editor { border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
          overflow: hidden; background: #fff; }
.editor__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
                 padding: 6px 8px; background: var(--sutil);
                 border-bottom: 1px solid var(--linha); }
.editor__barra button { font: inherit; font-size: 13px; padding: 5px 9px; cursor: pointer;
                        background: none; border: 1px solid transparent; border-radius: 6px;
                        color: #334155; }
.editor__barra button:hover { background: #fff; border-color: var(--linha-forte); }
.editor__sep { width: 1px; height: 18px; background: var(--linha-forte); margin: 0 4px; }
.editor__area { min-height: 260px; padding: 16px 18px; outline: none;
                font-size: 15px; line-height: 1.6; }
.editor__area:focus { box-shadow: inset 0 0 0 2px rgba(37,99,235,.12); }
.editor__area img { max-width: 100%; height: auto; border-radius: 6px; }
.editor__area h2 { font-size: 19px; margin: 0 0 10px; }
.editor__area p { margin: 0 0 12px; }
.editor__area ul, .editor__area ol { margin: 0 0 12px; padding-left: 22px; }

/* --- Campanha: escolha do modo de escrita ---------------------------------- */
.modos { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.modos__opcao { display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  font-size: 14px; background: #fff; }
.modos__opcao.ativo { border-color: var(--azul); background: var(--azul-claro);
  color: var(--azul-escuro); font-weight: 600; }
.fonte { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; min-height: 320px; white-space: pre;
  overflow-wrap: normal; overflow-x: auto; }
.previa { width: 100%; height: 520px; border: 1px solid var(--linha);
  border-radius: var(--raio-p); background: #fff; }

/* Prévia do visual do e-mail. Mais baixa que a da campanha: aqui é para
   reconhecer o estilo de relance, não para ler a peça inteira. */
.previa-estilos { display: grid; gap: 14px; margin-bottom: 18px; }
.previa-estilos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.previa--email { width: 100%; height: 330px; border: 1px solid var(--linha);
  border-radius: var(--raio-p); background: #fff; }

/* A peça do e-mail tem 600px de largura. Para caber numa coluna estreita sem
   ser cortada, a moldura encolhe a página inteira — proporção preservada, dá
   para reconhecer o estilo de relance. */
.previa-moldura {
  height: 300px; overflow: hidden; border: 1px solid var(--linha);
  border-radius: var(--raio-p); background: #fff;
}
.previa-moldura .previa--email {
  width: 660px; height: 600px; border: 0; border-radius: 0;
  transform: scale(.5); transform-origin: top left;
}
.previa-dobra { margin-top: 14px; }
.previa-dobra > summary {
  cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--azul-escuro);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 0;
}
.previa-dobra > summary::-webkit-details-marker { display: none; }
.previa-dobra > summary::before { content: "▸"; font-size: 11px; }
.previa-dobra[open] > summary::before { content: "▾"; }
.previa-dobra[open] > summary { margin-bottom: 10px; }
@media (max-width: 900px) {
  .previa-estilos--tres { grid-template-columns: 1fr; }
}

/* --- Trilha do assistente ---------------------------------------------------
   Lista numerada com linha ligando os passos. Quem abre precisa ver, de
   relance, em que ponto do caminho está. */
.trilha { list-style: none; margin: 0 0 18px; padding: 0; }
.passo { position: relative; display: flex; gap: 16px; padding: 0 0 18px 0; }
.passo::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 0;
  width: 2px; background: var(--linha); }
.passo:last-child::before { display: none; }
.passo__marca { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--superficie); border: 2px solid var(--linha); color: var(--suave);
  position: relative; z-index: 1; }
.passo__corpo { flex: 1; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 18px; }
.passo__topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px; }
.passo__topo h2 { font-size: 16px; }
.passo__corpo .meta { margin: 0 0 4px; }
.passo__acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.passo--agora .passo__marca { background: var(--azul); border-color: var(--azul); color: #fff; }
.passo--agora .passo__corpo { border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12), var(--sombra); }
.passo--pronto .passo__marca { background: var(--alto-fundo); border-color: #a7f3d0;
  color: var(--alto); }
.passo--pronto .passo__corpo { background: #fbfdfc; }
.passo--depois .passo__corpo { opacity: .72; }
/* Comando que veio do assistente: destacado para não se perder na lista. */
.comando--foco { background: var(--azul-claro); border-radius: var(--raio-p);
  padding: 14px 12px; margin: 4px -12px; box-shadow: 0 0 0 2px rgba(37,99,235,.18); }

/* Pulso de "está rodando": discreto, só para a tela não parecer congelada. */
.pulso { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--azul); box-shadow: 0 0 0 0 rgba(37,99,235,.5);
  animation: pulsa 1.6s infinite; }
@keyframes pulsa {
  70% { box-shadow: 0 0 0 10px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
#registro { max-height: 460px; }

/* --- Relatório diário ------------------------------------------------------
   Frases, não tabela: o que importa é ler de cima a baixo e entender o dia. */
.dia { margin-bottom: 14px; }
.dia h2 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dia h2 .meta { font-weight: 500; font-size: 13px; }
.dia__linha { display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 8px; font-size: 14.5px; }
.dia__linha .icone { flex-shrink: 0; margin-top: 2px; color: var(--suave); }
.dia__linha--erro { color: var(--erro); }
.dia__linha--erro .icone { color: var(--erro); }