:root{
  --bg:#f4f5f7;
  --filtros-bg:#ffffff;
  --header:#1c1f2b;
  --header-text:#f4f5f7;
  --accent:#c9a84c;
  --accent-dark:#a8873a;
  --card:#ffffff;
  --input-bg:#ffffff;
  --border:#e2e4ea;
  --text:#22242c;
  --muted:#6b6f7b;
  --quente:#e0554f;
  --morno:#e0a83f;
  --frio:#4f8fe0;
  --ativo:#2e9e5b;
  --pausado:#b3b7c2;
  --coluna-bg:#ebedf1;
  --coluna-count-bg:#d8dbe2;
  --coluna-ia-bg:#ece7fb;
  --coluna-ia-borda:#d6ccf5;
  --coluna-ia-texto:#5b3fc4;
  --coluna-ia-count-bg:#ddd3f7;
  --fonte-badge-bg:#f3ecd8;
  --fonte-badge-now-bg:#e6ddf7;
  --fonte-badge-now-text:#6b46c1;
  --historico-bg:#fafafc;
  --msg-aline-bg:#eef1f8;
  --msg-humano-bg:#fdf0c9;
  --msg-humano-text:#7a5b00;
  --msg-humano-border:#f0d98a;
  --radius:10px;
  --shadow:0 1px 3px rgba(20,20,30,.08), 0 1px 2px rgba(20,20,30,.06);
  --esquecido:#c0392b;
  --esquecido-bg:#fdecea;
}

body.dark{
  --bg:#15161e;
  --filtros-bg:#1b1d27;
  --card:#1e2029;
  --input-bg:#20222c;
  --border:#343748;
  --text:#e7e8ee;
  --muted:#9195a6;
  --coluna-bg:#1a1c26;
  --coluna-count-bg:#2b2e3c;
  --coluna-ia-bg:#241f37;
  --coluna-ia-borda:#3a3256;
  --coluna-ia-texto:#b9a6f5;
  --coluna-ia-count-bg:#332b4d;
  --fonte-badge-bg:#3a2f1a;
  --fonte-badge-now-bg:#2e2547;
  --fonte-badge-now-text:#c3a6f7;
  --historico-bg:#191b24;
  --msg-aline-bg:#242737;
  --msg-humano-bg:#3a300f;
  --msg-humano-text:#f5d97a;
  --msg-humano-border:#5c4a12;
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.35);
  --esquecido:#e0554f;
  --esquecido-bg:#3a1f1e;
  color-scheme:dark;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  height:100vh; /* fallback pra navegadores sem suporte a dvh */
  height:100dvh; /* desconta a barra do navegador no celular, que 100vh não desconta -- sem isso, o último card da coluna fica escondido atrás dela */
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:background .15s, color .15s;
}

.topbar{
  background:var(--header);
  color:var(--header-text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  height:56px;
  flex-shrink:0;
}
.topbar-left{display:flex; align-items:center; gap:24px;}
.logo{font-weight:700; font-size:16px; letter-spacing:.02em; white-space:nowrap;}

/* Carrossel de ovelhinhas no header (05/09/2026) -- no lugar de onde
   escrevia o nome do usuário logado. Mesma técnica do Sheep Viral Lab
   (scrollLeft por timer em app.js), só que compacto pra caber na altura
   fixa de 56px do header; maior no computador (ele pediu "pode ser bem
   maior assim" pro desktop). Cantos arredondados + sombra em vez de
   círculo com borda dourada (06/09/2026, pedido dele: "igual lá do
   aplicativo" -- mesmo visual do mosaico do Sheep Viral Lab).*/
.mosaico-sheep-header{
  display:flex; gap:6px;
  overflow-x:hidden;
  max-width:100%;
  min-width:0;
  /* 06/09/2026, pedido dele: a 1ª ovelhinha estava colada no "s" de
     "Leads" -- respiro de "um dedo, dois dedos" antes de começar a andar. */
  margin-left:16px;
}
.mosaico-sheep-header img{
  flex:0 0 auto;
  width:34px; height:34px;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
  display:block;
}
@media (min-width:900px){
  .mosaico-sheep-header{gap:10px; margin-left:28px;}
  .mosaico-sheep-header img{width:58px; height:58px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.4);}
}

/* Corpo do app: filtros + ações + avisos + quadro, todos filhos diretos daqui.
   06/09/2026: virou CSS GRID com áreas nomeadas -- é o que permite reposicionar
   `.sidebar-acoes` de "carrossel abaixo dos filtros" (celular) pra "coluna à
   esquerda de TUDO" (computador) sem duplicar HTML nem depender de `order`
   (que não dá pra fazer um item "vazar" de uma coluna pra virar linha inteira
   em outro breakpoint -- Grid resolve isso nomeando áreas por breakpoint). */
.corpo-app{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto auto auto 1fr;
  grid-template-areas:
    "filtros"
    "acoes"
    "erros"
    "push"
    "selecao"
    "board";
}
.corpo-app > .filtros-barra{grid-area:filtros;}
.corpo-app > .sidebar-acoes{grid-area:acoes;}
.corpo-app > #avisoErros{grid-area:erros;}
.corpo-app > #avisoPush{grid-area:push;}
.corpo-app > #barraSelecao{grid-area:selecao;}
.corpo-app > #board{grid-area:board; min-height:0;}

/* Barra/coluna de ações (Novo lead, Calculadora, Dashboard...). 05/09/2026,
   pedido dele: ícones "top" tipo Sheep Viral Lab (SVG de linha dourado) em
   vez de emoji, carrossel horizontal no celular (06/09/2026: agora ABAIXO
   de todos os filtros, pedido dele), coluna fixa à esquerda no computador. */
.sidebar-acoes{
  display:flex;
  flex-direction:row;
  gap:8px;
  padding:10px 12px;
  background:var(--filtros-bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  flex-shrink:0;
}
.sidebar-acoes::-webkit-scrollbar{display:none;}
.acao-btn{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:68px;
  padding:8px 6px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  cursor:pointer;
  font-size:11px;
  text-align:center;
  text-decoration:none;
  font-family:inherit;
  line-height:1.15;
}
.acao-btn:hover{border-color:var(--accent);}
.acao-btn{position:relative;}
/* 06/09/2026, pedido dele: o texto e o ícone ficam mais "fortes" (negrito +
   sombra), pra parecer claramente um sumário de opções clicáveis, tipo um
   catálogo -- não só um rótulo decorativo. */
.acao-btn .acao-label{font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.18);}
.acao-btn .acao-icone{color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.acao-btn .acao-icone svg{width:20px; height:20px; stroke-width:2.4;}
.acao-btn.hidden{display:none;}
.acao-btn.btn-ghost-ativo{border-color:var(--esquecido);}
.acao-btn.btn-ghost-ativo .acao-icone{color:var(--esquecido);}
.acao-btn.btn-ghost-ativo .acao-label{color:var(--esquecido);}

@media (min-width:900px){
  /* No computador a sidebar vira uma coluna que ocupa TODAS as 4 linhas à
     esquerda (filtros, erros, aviso-push e quadro empilham só na coluna
     da direita) -- é essa área "acoes" repetida 4x que faz ela esticar a
     altura toda, mesmo sendo definida uma vez só no HTML. */
  .corpo-app{
    grid-template-columns:172px 1fr;
    grid-template-rows:auto auto auto auto 1fr;
    grid-template-areas:
      "acoes filtros"
      "acoes erros"
      "acoes push"
      "acoes selecao"
      "acoes board";
  }
  .sidebar-acoes{
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    border-top:none;
    border-bottom:none;
    border-right:1px solid var(--border);
    /* 06/09/2026: ele mudou de ideia sobre o alinhamento vertical -- a
       versão anterior compensava a altura da barra de filtros pra alinhar
       "Novo lead" com o título das colunas do quadro (medido, 74px). Agora
       ele quer o oposto: a sidebar sobe até ficar "do lado do buscar",
       na mesma linha que a barra de filtros, logo abaixo do header. */
  }
  .acao-btn{
    flex-direction:row;
    justify-content:flex-start;
    width:100%;
    min-width:0;
    gap:12px;
    padding:9px 12px;
    font-size:13px;
    text-align:left;
  }
  .acao-btn .acao-icone svg{width:19px; height:19px;}

  /* Logo bem maior, "robusto" e ancorado na BASE do header (pedido dele,
     06/09/2026, comparando com o print) -- header cresce pra caber. */
  .topbar{height:104px; align-items:flex-end; padding-bottom:16px;}
  .logo{font-size:38px; font-weight:800; text-shadow:0 3px 10px rgba(0,0,0,.5);}
}

.filtros-barra{
  background:var(--filtros-bg);
  border-bottom:1px solid var(--border);
  padding:10px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  flex-shrink:0;
}
/* Ordem no COMPUTADOR (a ordem "natural" do HTML, ele pediu "fica onde já
   está"): busca, campanhas, [temperatura+corretor], [data+período] -- tudo
   numa linha só. */
.filtros-barra > .busca-wrap{order:1;}
.filtros-barra > #fonteTabs{order:2; flex:1 1 200px;}
.filtros-barra > .filtro-linha-dupla{order:3;}
.filtros-barra > .data-filtro{order:4;}
#fonteTabs .filtro-select{width:100%;}

.filtro-select{
  padding:7px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:13px;
  color:var(--text);
  background:var(--input-bg);
  cursor:pointer;
  min-width:150px;
}
.filtro-select:hover{border-color:var(--accent-dark);}

/* Temperatura + corretor lado a lado (05/09/2026, pedido dele) -- mesmo
   grupo em mobile e desktop, só a largura de cada select que muda. */
.filtro-linha-dupla{display:flex; gap:10px; flex:1 1 auto;}
.filtro-linha-dupla > *{flex:1 1 150px;}
.filtro-linha-dupla .filtro-select{width:100%;}

/* Busca por nome / telefone / e-mail. Ocupa a linha toda no celular e
   divide espaço com os selects no computador. */
.busca-wrap{position:relative; display:flex; align-items:center; flex:1 1 260px; max-width:360px;}
.busca-input{
  width:100%;
  padding:7px 30px 7px 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  color:var(--text);
  font-size:16px; /* mesma causa do zoom do DWV -- abaixo de 16px o iPhone zoom ao focar */
  font-family:inherit;
}
.busca-input:focus{outline:none; border-color:var(--accent-dark); box-shadow:0 0 0 2px var(--msg-aline-bg);}
.busca-input::-webkit-search-cancel-button{display:none;}
.busca-limpar{
  position:absolute; right:6px;
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:13px; line-height:1;
  padding:4px;
}
.busca-limpar:hover{color:var(--text);}
.busca-limpar.hidden{display:none;}
.busca-vazia{
  padding:18px 14px; font-size:14px; color:var(--muted); text-align:center;
}

.data-filtro{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.data-filtro input[type="date"]{
  padding:5px 8px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:13px;
  background:var(--input-bg);
  color:var(--text);
}
.data-filtro-ate{font-size:12px; color:var(--muted);}

@media (max-width:640px){
  .filtros-barra{padding:10px 12px;}
  .filtro-select{min-width:0; flex:1 1 140px;}
  .filtro-linha-dupla > *{flex:1 1 120px;}
  /* "Bem pequenininha" (pedido dele, 06/09/2026) -- data + "até" + período
     rápido têm que caber numa linha só no celular, então cada um encolhe
     bastante; o select de período (dentro de .data-filtro) fica ainda
     menor que o .filtro-select genérico de cima. */
  .data-filtro input[type="date"]{flex:1 1 76px; padding:4px; font-size:11px;}
  .data-filtro-ate{font-size:11px; flex:0 0 auto;}
  .data-filtro .filtro-select{flex:1 1 108px; min-width:0; padding:5px 6px; font-size:12px;}
}

/* No CELULAR (06/09/2026, pedido dele revisto): a ordem dos FILTROS é a
   MESMA do computador (busca primeiro, depois campanhas, depois
   temperatura+corretor, depois data+período) -- só empilha em vez de ficar
   numa linha só (`flex-basis:100%`). As AÇÕES (sidebar-acoes) já nascem
   numa área própria no HTML/Grid, abaixo de tudo isso -- não precisam de
   `order` aqui. */
/* 06/09/2026, pedido dele revisto de novo: no celular a busca volta a ficar
   por ÚLTIMA dentro dos filtros -- "embaixo do período rápido" -- e as
   ações (grid-area própria "acoes") continuam depois de tudo isso. */
@media (max-width:899px){
  .filtros-barra > *{flex-basis:100%;}
  .filtros-barra > .busca-wrap{max-width:none; order:5;}
}

/* 05/09/2026: os botões de ação saíram daqui pra virar `.sidebar-acoes`
   (carrossel/coluna própria) -- sobrou só o carrossel de ovelhinhas,
   alinhado à direita e sem vazar da largura do header. */
.topbar-right{
  display:flex; align-items:center; justify-content:flex-end;
  flex:1; min-width:0; overflow:hidden;
}
.btn-ghost{
  background:transparent;
  border:1px solid #3a3f52;
  color:#c3c6d1;
  padding:6px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  text-decoration:none; /* também é usado num <a> (link da calculadora) */
  display:inline-block;
}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
/* 04/09/2026 -- chave "Alerta de parado" ligada: mesmo padrão visual do
   resto do app pra indicar "ativo" (ver .badge-status.ativo). */
.btn-ghost-ativo{border-color:var(--esquecido); color:var(--esquecido);}

.aviso-erros{
  background:#4a3416;
  color:#f0c780;
  font-size:12px;
  padding:6px 20px;
  flex-shrink:0;
}
.aviso-erros.hidden{display:none;}

.aviso-push{
  background:#1c3a3a;
  color:#8fe0d0;
  font-size:13px;
  padding:8px 20px;
  flex-shrink:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.aviso-push.hidden{display:none;}
/* 🔴 min-width:0 é o que corrige de vez -- sem isso, um filho flex nunca
   encolhe além do tamanho do próprio conteúdo (aqui, a frase inteira sem
   quebra), sobrando pouquíssimo espaço pro botão e empurrando ele a
   crescer na vertical (achado visual, 04/09/2026: o texto saía uma
   palavra por linha e o botão "Ativar" virava uma barra enorme). */
.aviso-push span{flex:1; min-width:0;}
.aviso-push button{width:auto; flex-shrink:0; padding:8px 16px;}
.fechar-aviso{
  background:none;
  border:none;
  color:#8fe0d0;
  font-size:16px;
  cursor:pointer;
  padding:0 4px;
}

/* 01/10/2026: barra de ação em lote (seleção múltipla de cards). Mesmo
   padrão visual/estrutural do .aviso-push (faixa cheia, flex-wrap), com
   cor própria pra não confundir com o aviso de notificação. */
.barra-selecao{
  background:var(--filtros-bg);
  border-bottom:1px solid var(--border);
  padding:8px 20px;
  flex-shrink:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text);
}
.barra-selecao.hidden{display:none;}
#selecaoContador{font-weight:700; flex-shrink:0;}
.barra-selecao select{flex:1 1 170px; min-width:140px;}
.barra-selecao button{
  flex-shrink:0;
  padding:7px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-size:12.5px;
  font-weight:700;
  font-family:inherit;
}
.barra-selecao button:hover:not(:disabled){border-color:var(--accent-dark); color:var(--accent-dark);}
.barra-selecao button:disabled{opacity:.45; cursor:default;}
@media (max-width:640px){
  .barra-selecao{padding:8px 12px;}
}

.board{
  flex:1;
  min-height:0;
  display:flex;
  gap:14px;
  padding:16px;
  overflow-x:auto;
  overflow-y:hidden;
  align-items:flex-start;
  opacity:1;
  transition:opacity .15s;
}
.board.carregando{opacity:.5; pointer-events:none;}

.coluna{
  background:var(--coluna-bg);
  border-radius:var(--radius);
  width:280px;
  min-width:280px;
  max-height:100%;
  display:flex;
  flex-direction:column;
}
.coluna-header{
  padding:12px 14px 8px;
  font-weight:700;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--text);
  gap:8px;
}
.coluna-header-titulo{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;}
/* 01/10/2026, pedido dele: "selecionar todos e vai selecionar todos daquela
   coluna" -- só aparece com o modo seleção ligado. */
.coluna-selecionar-todos{
  font-size:10.5px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  border:1px solid var(--accent-dark);
  background:transparent;
  color:var(--accent-dark);
  cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
}
.coluna-selecionar-todos:hover{background:var(--accent); color:#1c1f2b;}
.coluna-count{
  background:var(--coluna-count-bg);
  color:var(--muted);
  border-radius:999px;
  padding:1px 8px;
  font-size:12px;
  font-weight:600;
}
.coluna-cards{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 10px 28px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:40px;
}

/* Colunas próprias da IA de corretor (Bia/Laiza) -- pré-qualificação,
   follow-up e "perdido pela IA". Ficam à esquerda do funil (primeiras no
   array de etapas da fonte) e ganham um tom próprio pra ler de relance
   "isto aqui é a IA trabalhando", não o corretor. */
.coluna-ia{
  background:var(--coluna-ia-bg);
  border:1px solid var(--coluna-ia-borda);
}
.coluna-ia .coluna-header{
  color:var(--coluna-ia-texto);
  border-bottom:2px solid var(--coluna-ia-texto);
  margin:0 4px;
  padding-left:10px; padding-right:10px;
}
.coluna-ia .coluna-count{
  background:var(--coluna-ia-count-bg);
  color:var(--coluna-ia-texto);
}

.card{
  position:relative;
  background:var(--card);
  border-radius:8px;
  box-shadow:var(--shadow);
  padding:10px 12px 20px;
  cursor:grab;
  border-left:4px solid var(--border);
}
.card.temp-Quente{border-left-color:var(--quente);}
.card.temp-Morno{border-left-color:var(--morno);}
.card.temp-Frio{border-left-color:var(--frio);}
.card:active{cursor:grabbing;}

/* 01/10/2026: modo seleção múltipla -- quadradinho no canto de cada card
   (pedido dele) + destaque no card marcado. Com o modo ligado, o card
   inteiro também é clicável pra marcar/desmarcar (mirar um quadrado de
   20px no celular é ruim -- o toque em qualquer parte do card já alterna,
   o quadradinho só mostra o estado). */
.card.modo-selecao{padding-left:38px; cursor:pointer;}
.card.selecionado{
  outline:2px solid var(--accent-dark);
  outline-offset:-1px;
  background:var(--fonte-badge-bg);
}
.card-check{
  position:absolute;
  top:12px; left:10px;
  width:20px; height:20px;
  border-radius:5px;
  border:2px solid var(--border);
  background:var(--card);
  z-index:1;
}
.card-check.marcado{
  background:var(--accent);
  border-color:var(--accent-dark);
}
.card-check.marcado::after{
  content:"";
  position:absolute;
  left:6px; top:2px;
  width:5px; height:10px;
  border:solid #1c1f2b;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
/* Data que o lead caiu -- bem pequenininha, canto direito embaixo do card
   (07/09/2026, pedido dele). */
.card-data-entrada{
  position:absolute;
  right:8px;
  bottom:6px;
  font-size:10px;
  color:var(--muted);
  opacity:.7;
  pointer-events:none;
}
.card-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:6px; margin-bottom:6px;}
/* 08/09/2026, achado real no print dele: nome de lead comprido e sem
   espaço (ex: "cardosodeandradejuventino") empurrava o selo da fonte (ex:
   "CC CÂMBIOS") pra fora do card -- .card-nome não tinha como encolher
   dentro do flex (min-width:0 destrava isso) nem quebrar uma palavra
   longa sem espaço (overflow-wrap:break-word). */
.card-nome{font-weight:600; font-size:14px; min-width:0; overflow-wrap:break-word;}
.card-fonte-badge{
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
  color:var(--accent-dark);
  background:var(--fonte-badge-bg);
  padding:2px 7px;
  border-radius:999px;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.02em;
}
/* Cor própria por campanha, só no texto/fundo do selo -- o resto do card
   (badges de temperatura, layout) continua igual pras duas, é só pra
   distinguir de relance qual empreendimento é cada lead (feedback do
   Estefani, 2026-08-06). Brickell mantém a cor dourada padrão de sempre. */
.card-fonte-badge.now_residence{
  color:var(--fonte-badge-now-text);
  background:var(--fonte-badge-now-bg);
}
.card-badges{display:flex; gap:6px; flex-wrap:wrap;}
.badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  font-weight:600;
}
.badge-temp{color:#fff;}
.badge-temp.Quente{background:var(--quente);}
.badge-temp.Morno{background:var(--morno);}
.badge-temp.Frio{background:var(--frio);}
.badge-status{color:#fff;}
.badge-status.ativo{background:var(--ativo);}
.badge-status.pausado{background:var(--pausado); color:#3a3f52;}

.sortable-ghost{opacity:.35;}
.sortable-drag{box-shadow:0 8px 20px rgba(0,0,0,.18) !important;}

.overlay{
  position:fixed; inset:0;
  background:rgba(20,20,30,.35);
  z-index:10;
}
.overlay.hidden{display:none;}

.painel-lead{
  position:fixed;
  top:0; right:0; bottom:0;
  width:420px;
  /* No celular ocupa a tela INTEIRA -- sem isso sobrava uma fatia do
     quadro visível do lado esquerdo, e parecia um painel flutuando por
     cima em vez de "trocar de tela" (feedback do Estefani, 03/09/2026).
     Em telas maiores, a media query lá embaixo volta a limitar a 50vw. */
  max-width:100vw;
  background:var(--card);
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
  z-index:11;
  padding:24px;
  overflow-y:auto;
}
.painel-lead.hidden{display:none;}

.fechar{
  position:absolute; top:16px; right:16px;
  background:none; border:none; font-size:18px; cursor:pointer; color:var(--muted);
}

.painel-lead h2{margin:0 0 4px; font-size:20px;}
.painel-lead .telefone-link{
  display:inline-block; margin-bottom:16px; color:var(--accent-dark); text-decoration:none; font-size:14px; font-weight:600;
}
.painel-secao{margin-bottom:18px;}
.painel-secao label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.painel-secao select, .painel-secao textarea, .painel-secao input[type="text"], .painel-secao input[type="date"], .painel-secao input[type="datetime-local"]{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  /* 16px, não 14px: abaixo disso o Safari do iPhone dá zoom automático
     na tela ao focar o campo (mesma causa do "zoom" no painel do DWV,
     03/09/2026) -- esses campos (observação, lembrete) ainda não tinham
     sido reclamados, mas é a mesma classe de bug, corrigido junto. */
  font-size:16px;
  font-family:inherit;
  background:var(--input-bg);
  color:var(--text);
}
.painel-secao textarea{min-height:70px; resize:vertical;}

.btn-status{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:none;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  font-size:14px;
}
.btn-status.pausar{background:var(--quente);}
.btn-status.retomar{background:var(--ativo);}

.btn-salvar{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:#1c1f2b;
  font-weight:700;
  cursor:pointer;
  font-size:14px;
}
.btn-salvar:hover{background:var(--accent-dark); color:#fff;}
.btn-salvar:disabled{cursor:wait;}

/* "Salvando..." -- faixa animada indo e voltando, pra ficar óbvio que está
   trabalhando (não dá pra saber quanto tempo falta, então é indeterminado
   de propósito, não uma barra que "enche" até um fim que não conhecemos). */
.btn-salvar.btn-salvar-progresso{
  color:#1c1f2b;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 50%, var(--accent) 100%);
  background-size:200% 100%;
  animation:btn-salvar-varredura 1.1s linear infinite;
}
@keyframes btn-salvar-varredura{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.btn-salvar.btn-salvar-ok{background:var(--ativo); color:#fff;}
.btn-salvar.btn-salvar-erro{background:var(--quente); color:#fff;}

.status-salvar{margin-top:8px; font-size:12px; color:var(--muted); min-height:16px;}

.quiz-lista{list-style:none; margin:0; padding:0;}
.quiz-lista li{
  padding:8px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.quiz-lista li .q-label{color:var(--muted); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.02em;}

/* Observações: histórico datado (cada contato vira uma entrada carimbada) */
.btn-obs{
  width:100%;
  margin-top:6px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.btn-obs:hover{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-obs:disabled{cursor:wait;}
/* 04/09/2026 -- "Excluir lead" (só master): visual vermelho de ação
   destrutiva, mesmo padrão de peso do .btn-obs, cor emprestada de
   --esquecido pra não precisar de token novo. */
.btn-excluir-lead{
  width:100%; padding:9px 12px; margin-top:6px;
  border:1px solid var(--esquecido); border-radius:8px;
  background:transparent; color:var(--esquecido);
  font-size:13px; font-weight:600; cursor:pointer;
}
.btn-excluir-lead:hover{background:var(--esquecido); color:#fff;}
.obs-historico{
  margin-top:10px;
  max-height:240px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.obs-item{
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:8px;
  padding:7px 10px;
  background:var(--historico-bg);
}
.obs-quando{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--muted);
  margin-bottom:3px;
  font-weight:600;
}
.obs-texto{font-size:13px; color:var(--text); white-space:pre-wrap;}
.obs-vazio{font-size:13px; color:var(--muted);}

/* Botões embaixo do campo de observação: ditar + registrar, lado a lado. */
.obs-acoes{display:flex; gap:8px; margin-top:6px; align-items:stretch;}
.obs-acoes .btn-obs{margin-top:0; flex:1 1 auto;}
.btn-ditado{
  display:flex; align-items:center; gap:6px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  color:var(--text);
  font-size:13px; font-weight:600;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
}
.btn-ditado:hover{border-color:var(--accent-dark);}
.btn-ditado.hidden{display:none;}
/* Ouvindo: vermelho pulsando, o mesmo idioma visual de gravação que ele já
   conhece do celular -- e o rótulo diz como parar, em vez de só um ícone. */
.btn-ditado.gravando{
  background:var(--quente); border-color:var(--quente); color:#fff;
  animation:ditado-pulso 1.4s ease-in-out infinite;
}
@keyframes ditado-pulso{
  0%,100%{box-shadow:0 0 0 0 rgba(224,85,79,.45);}
  50%    {box-shadow:0 0 0 6px rgba(224,85,79,0);}
}
@media (prefers-reduced-motion:reduce){
  .btn-ditado.gravando{animation:none;}
}

/* Lead sem nenhuma atualização há muito tempo, ainda numa etapa em aberto
   (SLA) -- destaque forte no card pra não passar batido rolando o quadro
   rápido, mais o motivo por extenso no painel de detalhe. */
.card.esquecido{
  border-left-color:var(--esquecido);
  background:var(--esquecido-bg);
}
.badge-esquecido{background:var(--esquecido); color:#fff;}
.aviso-esquecido{
  border:1px solid var(--esquecido);
  border-left:4px solid var(--esquecido);
  background:var(--esquecido-bg);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:18px;
  font-size:13px;
  line-height:1.5;
  color:var(--text);
}

/* ===================== DASHBOARD ===================== */
.painel-dashboard{
  position:fixed; top:0; right:0; bottom:0;
  width:520px; max-width:100vw; /* cobre a tela inteira no celular, mesmo motivo do painel-lead */
  background:var(--card);
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
  z-index:11;
  padding:24px;
  overflow-y:auto;
}
.painel-dashboard.hidden{display:none;}
.painel-dashboard h2{margin:0 0 16px;}
.painel-dashboard h3{margin:22px 0 10px; font-size:15px; color:var(--muted);}
.dash-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px;}
.dash-card{
  background:var(--coluna-bg); border-radius:8px; padding:12px; text-align:center;
}
.dash-card-alerta{background:var(--esquecido-bg); color:var(--esquecido);}
.dash-num{font-size:24px; font-weight:700;}
.dash-label{font-size:11.5px; color:var(--muted); margin-top:2px;}
.dash-card-alerta .dash-label{color:var(--esquecido);}
.dash-barras{display:flex; flex-direction:column; gap:8px;}
.dash-barra-linha{display:flex; align-items:center; gap:8px; font-size:13px;}
.dash-barra-nome{flex:0 0 130px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dash-barra-trilho{flex:1; background:var(--coluna-bg); border-radius:6px; height:14px; overflow:hidden;}
.dash-barra-preenchida{background:var(--accent); height:100%; border-radius:6px;}
.dash-barra-num{flex:0 0 28px; text-align:right; color:var(--muted); font-weight:600;}
.dash-tabela{width:100%; border-collapse:collapse; font-size:13px;}
.dash-tabela th, .dash-tabela td{padding:6px 8px; border-bottom:1px solid var(--border); text-align:left;}
.dash-nota{font-size:11.5px; color:var(--muted); margin-top:20px; font-style:italic;}

/* Filtros do dashboard (03/09/2026, pedido dele: "pegar por campanha, por
   corretor, por mês, por dias específicos") -- fica preso no topo do
   painel (sticky) pra continuar visível mesmo rolando o conteúdo, já que
   o painel inteiro pode ficar mais alto que a tela no celular. */
.dash-filtros{
  position:sticky; top:-24px; z-index:2;
  background:var(--card);
  margin:-24px -24px 16px; padding:16px 24px 12px;
  border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:10px;
}
.dash-filtros-linha{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.dash-filtros-linha select, .dash-filtros-linha input[type="date"]{
  font-size:12.5px; padding:6px 8px; border-radius:6px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
}
.dash-preset-btn{
  font-size:12px; padding:6px 10px; border-radius:16px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  cursor:pointer; white-space:nowrap;
}
.dash-preset-btn.ativo{background:var(--accent); color:#fff; border-color:var(--accent);}
.dash-filtro-personalizado{display:flex; gap:6px; align-items:center;}
.dash-filtro-personalizado span{font-size:12px; color:var(--muted);}

/* Série temporal -- gráfico de barras verticais em SVG puro (sem lib
   externa, mesma filosofia do resto do app). */
.dash-grafico-serie{width:100%; overflow-x:auto;}
.dash-grafico-svg{display:block; min-width:100%;}
.dash-grafico-barra{fill:var(--accent);}
.dash-grafico-eixo-label{font-size:9.5px; fill:var(--muted);}
.dash-grafico-valor{font-size:9.5px; fill:var(--text); font-weight:600;}
.dash-grafico-vazio{font-size:12.5px; color:var(--muted); font-style:italic; padding:20px 0; text-align:center;}

@media (min-width:900px){
  .painel-dashboard{width:50vw; min-width:420px; max-width:900px;}
}

/* ===================== TAREFAS (08/09/2026) ===================== */
/* #painelTarefas reusa .painel-dashboard (mesmo full-screen/50vw já
   corrigido acima) -- só o conteúdo próprio fica aqui. */
.tarefa-item{
  border:1px solid var(--border); border-left:4px solid var(--border);
  border-radius:8px; padding:10px 12px; margin-bottom:8px;
  cursor:pointer; background:var(--card);
}
.tarefa-item:hover{background:var(--coluna-bg);}
.tarefa-topo{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.tarefa-status-badge{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
.tarefa-data{font-size:12px; color:var(--muted); font-weight:600;}
.tarefa-nome{font-size:14px; font-weight:600;}
.tarefa-fonte{font-size:11.5px; color:var(--muted); font-weight:400;}
.tarefa-texto{font-size:12.5px; color:var(--muted); margin-top:4px;}
.tarefa-atrasada{border-left-color:var(--esquecido);}
.tarefa-atrasada .tarefa-status-badge{color:var(--esquecido);}
.tarefa-hoje{border-left-color:var(--morno);}
.tarefa-hoje .tarefa-status-badge{color:var(--morno);}
.tarefa-futura{border-left-color:var(--frio);}
.tarefa-futura .tarefa-status-badge{color:var(--frio);}

/* ===================== PENDÊNCIAS DE AJUSTE NA IA (01/10/2026) ===================== */
/* Botão com contador -- bolinha vermelha no canto, mesmo padrão de
   notificação de app, só aparece quando há pendência (ver acao-contador.hidden). */
.acao-contador{
  position:absolute; top:2px; right:4px;
  background:var(--esquecido); color:#fff;
  font-size:10px; font-weight:800; line-height:1;
  min-width:16px; height:16px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px;
}
.acao-contador.hidden{display:none;}
/* Item de pendência reusa a casca de .tarefa-item (borda esquerda + card),
   só não é clicável no corpo inteiro (o lead já pode nem existir mais no
   quadro) -- só o botão de concluir é interativo. */
.pendencia-item{
  border:1px solid var(--border); border-left:4px solid var(--morno);
  border-radius:8px; padding:10px 12px; margin-bottom:10px;
  background:var(--card);
}
.pendencia-corretor{font-size:12px; color:var(--muted); margin-top:2px;}
.pendencia-midia{margin-top:6px; font-size:12.5px;}
.pendencia-midia a{color:var(--accent);}
.pendencia-acoes{margin-top:10px;}
.pendencia-acoes .btn-salvar{font-size:12.5px; padding:6px 12px;}
.pendencia-concluida-em{margin-top:8px; font-size:12px; color:var(--muted); font-weight:600;}
/* Gaveta de concluídas (01/10/2026) -- item já revisado fica discreto
   (opacidade reduzida), pra não competir visualmente com as pendências
   reais logo acima. */
.pendencia-gaveta-concluidas{margin-top:14px; border-top:1px solid var(--border); padding-top:10px;}
.pendencia-gaveta-concluidas summary{cursor:pointer; font-weight:700; font-size:13.5px; color:var(--muted); list-style:none;}
.pendencia-gaveta-concluidas summary::-webkit-details-marker{display:none;}
.pendencia-gaveta-concluidas summary::before{content:"▸ "; }
.pendencia-gaveta-concluidas[open] summary::before{content:"▾ "; }
.pendencia-gaveta-concluidas #pendenciasConcluidasConteudo{margin-top:10px;}
.pendencia-gaveta-concluidas .pendencia-item{opacity:.72; border-left-color:var(--border);}

/* ===================== MARIA (09/09/2026) ===================== */
/* Ele pediu tela cheia de verdade ("mais solto e mais livre"), diferente
   dos outros painéis (50vw no desktop) -- sobrescreve só #painelMaria,
   nos dois breakpoints, sem tocar em .painel-dashboard base. */
.painel-tela-cheia{width:100vw !important; max-width:100vw !important;}
@media (min-width:900px){
  .painel-tela-cheia{min-width:0 !important;}
}
.maria-form-tarefa, .maria-form-simples{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-bottom:16px; padding:10px; border-radius:8px; background:var(--coluna-bg);
}
.maria-form-tarefa input[type="text"], .maria-form-simples input[type="text"]{flex:1 1 160px;}
#mariaNovaAreaTexto.hidden{display:none;}
.maria-form-tarefa input, .maria-form-simples input, .maria-form-tarefa select{
  padding:8px 10px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:16px; /* abaixo de 16px o iPhone dá zoom ao focar */
}
.maria-form-tarefa button, .maria-form-simples button{width:auto; margin-top:0; white-space:nowrap;}
.maria-tarefa-edicao{margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);}
.maria-tarefa-edicao.hidden{display:none;}
.maria-form-linha{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.maria-form-linha select, .maria-form-linha input{
  padding:7px 9px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:16px; /* abaixo de 16px o iPhone dá zoom ao focar */
}
.maria-tarefa-edicao textarea{
  width:100%; min-height:60px; padding:8px; border-radius:6px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  font-size:16px; margin-bottom:8px; resize:vertical; /* abaixo de 16px o iPhone dá zoom ao focar */
}
.maria-tarefa-edicao .btn-obs, .maria-tarefa-edicao .btn-excluir-lead{width:auto; flex:1 1 auto; margin-top:0;}
.maria-lista-simples{margin-bottom:8px;}
/* 09/09/2026 -- restaurando a estrutura do site antigo (Central de
   Organização): rotina diária + "quem eu sou" + objetivos de vida juntos
   na mesma página do carrossel, cada bloco com seu próprio subtítulo. */
.maria-subtitulo{
  font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.03em; margin:20px 0 8px;
}
.maria-subtitulo:first-child{margin-top:0;}
.maria-item-afirmacao{background:var(--coluna-bg); font-style:italic;}
.maria-item-simples{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:6px; margin-bottom:4px; background:var(--card);
  border:1px solid var(--border); font-size:13px;
}
.maria-item-simples button{
  border:none; background:transparent; color:var(--muted); cursor:pointer;
  font-size:14px; line-height:1; padding:2px 4px;
}
.maria-item-simples button:hover{color:var(--esquecido);}
/* 09/09/2026 -- rotina/ideias/lembretes ganharam área (múltipla escolha,
   diferente da tarefa que é 1 área só): checkboxes no form + chips no item */
.maria-areas-checkboxes{display:flex; flex-wrap:wrap; gap:6px 10px; width:100%; margin-top:2px;}
.maria-area-check{display:flex; align-items:center; gap:4px; font-size:13px; color:var(--muted); cursor:pointer;}
.maria-area-check input{width:auto; padding:0; margin:0;}
.maria-item-areas{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
.maria-chip-area{
  font-size:11px; padding:2px 7px; border-radius:10px;
  background:var(--coluna-bg); border:1px solid var(--border); color:var(--muted);
}
/* Fase 3 (09/09/2026) -- toggle de 2 abas (Painel/Conversar), mesmo espírito
   visual do resto do app (pill buttons), e o chat aproveitando a tela cheia
   do painel em vez do max-height:220px padrão de .copiloto-chat-msgs (que
   foi pensado pra caber dentro de um card de lead, não numa tela dedicada). */
.maria-abas{display:flex; gap:8px; margin-bottom:16px;}
.maria-aba-btn{
  padding:8px 16px; border-radius:20px; border:1px solid var(--border);
  background:var(--coluna-bg); color:var(--text); font-size:13px; font-weight:600;
  cursor:pointer;
}
.maria-aba-btn.ativa{background:var(--accent); color:#1c1f2b; border-color:var(--accent);}
/* 09/09/2026, pedido dele: a carinha real da Maria no botão da aba, em
   vez do emoji genérico de ovelha. */
.maria-aba-avatar{width:16px; height:16px; border-radius:50%; object-fit:cover; vertical-align:-3px; margin-right:2px;}
/* 09/09/2026 -- selo de origem em "Meus compromissos": logo do Google
   (eventos do Calendar) ou a carinha da Maria (lembretes só dela). */
.maria-selo-origem{vertical-align:-2px; margin-right:2px; flex:0 0 auto;}
.maria-selo-avatar{width:14px; height:14px; border-radius:50%; object-fit:cover;}
.maria-chat{margin-top:0; border-top:none; padding-top:0;}
/* 09/09/2026, pedido dele: com a conversa já tendo histórico de verdade,
   60vh de mensagens empurrava o avatar (que ele quer SEMPRE visível ao
   abrir o app, "dois cliques e já falo com ela") pra fora da tela --
   diminuído bem mais, a lista de mensagens rola por dentro dela mesma. */
.maria-chat .copiloto-chat-msgs{max-height:20vh;}
.maria-chat-expandir-btn{padding:10px 12px !important; font-size:16px !important; line-height:1;}
/* 09/09/2026, pedido dele: "expandir e ficar só na conversa" -- esconde
   tudo que não é a lista de mensagens (nome/frase do dia/abas/avatar de
   voz), a caixa de mensagens ganha quase a tela toda. O campo de digitar +
   os 2 botões (Enviar/Expandir) continuam visíveis, pra dar pra recolher
   de volta ou mandar mensagem sem sair do modo expandido. */
#painelMaria.maria-chat-expandido .maria-topo,
#painelMaria.maria-chat-expandido #mariaFraseDia,
#painelMaria.maria-chat-expandido .maria-abas,
#painelMaria.maria-chat-expandido .maria-voz-embaixo{display:none !important;}
#painelMaria.maria-chat-expandido .maria-chat .copiloto-chat-msgs{max-height:72vh;}
#mariaAbaConversar.hidden, #mariaAbaPainel.hidden{display:none;}
/* 09/09/2026 -- modo de voz bidirecional, mesmo espírito visual do "modo
   de ligação" do Sheep Viral Lab: avatar redondo com anel vermelho
   pulsando enquanto grava, anel dourado (accent) enquanto ela fala.
   Pedido dele: EMBAIXO, centralizado, fácil de alcançar com o polegar
   (o app dedicado já abre direto nesta aba) -- maior que antes, mas não
   tão grande quanto o avatar do Sheep Viral Lab. */
.maria-voz-embaixo{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  margin-top:18px; padding-top:18px; border-top:1px solid var(--border);
}
.maria-avatar-voz{
  width:176px; height:176px; border-radius:50%; padding:0; flex:0 0 auto;
  border:3px solid var(--border); cursor:pointer; background:none;
  transition:border-color .2s;
}
.maria-avatar-voz img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;}
.maria-avatar-voz.gravando{border-color:#e05252; animation:maria-voz-pulsar 1.2s infinite;}
.maria-avatar-voz.falando{border-color:var(--accent); animation:maria-voz-pulsar-suave 1.6s infinite;}
@keyframes maria-voz-pulsar{
  0%{box-shadow:0 0 0 0 rgba(224,82,82,.55);}
  70%{box-shadow:0 0 0 16px rgba(224,82,82,0);}
  100%{box-shadow:0 0 0 0 rgba(224,82,82,0);}
}
@keyframes maria-voz-pulsar-suave{
  0%{box-shadow:0 0 0 0 rgba(180,160,90,.4);}
  70%{box-shadow:0 0 0 12px rgba(180,160,90,0);}
  100%{box-shadow:0 0 0 0 rgba(180,160,90,0);}
}
.maria-voz-status{font-size:13.5px; font-weight:600; color:var(--text);}
/* Fase 4 (09/09/2026) -- barra de views personalizadas (autonomia de UI:
   a Maria cria pelo chat, aqui só renderiza o que está salvo). */
.maria-views-barra{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.maria-view-pill-wrap{display:flex; align-items:stretch;}
.maria-view-pill{
  padding:7px 14px; border-radius:16px 0 0 16px; border:1px solid var(--border);
  background:var(--coluna-bg); color:var(--text); font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.maria-views-barra > .maria-view-pill{border-radius:16px;}
.maria-view-pill.ativa{background:var(--accent); color:#1c1f2b; border-color:var(--accent);}
.maria-view-excluir{
  padding:0 8px; border-radius:0 16px 16px 0; border:1px solid var(--border); border-left:none;
  background:var(--coluna-bg); color:var(--muted); cursor:pointer; font-size:11px;
}
.maria-view-excluir:hover{color:var(--esquecido);}
/* 10/09/2026 -- lista "Minhas áreas" (card Adicionar): excluir área que
   ele ou a Maria criou. Layout parecido com a barra de views, mas em
   classes PRÓPRIAS -- de propósito, pra não herdar o onclick de trocar
   de view que .maria-view-pill/.maria-view-excluir já carregam. */
.maria-area-pill-wrap{display:flex; align-items:stretch;}
.maria-area-pill{
  padding:7px 14px; border-radius:16px 0 0 16px; border:1px solid var(--border); border-right:none;
  background:var(--coluna-bg); color:var(--text); font-size:12.5px; font-weight:600; white-space:nowrap;
}
.maria-area-excluir{
  padding:0 8px; border-radius:0 16px 16px 0; border:1px solid var(--border); border-left:none;
  background:var(--coluna-bg); color:var(--muted); cursor:pointer; font-size:11px;
}
.maria-area-excluir:hover{color:var(--esquecido);}
/* 09/09/2026 -- app dedicado (maria.html/window.MARIA_APP_MODE): esconde
   tudo que não é o painel dela (topbar do Sheep Leads, o Kanban por trás,
   overlay, e o botão de fechar -- não faz sentido "fechar" quando esse é
   o app inteiro) -- só o painel-tela-cheia da Maria ocupa a tela. */
body.modo-maria-app .topbar,
body.modo-maria-app .corpo-app,
body.modo-maria-app #overlay,
body.modo-maria-app #fecharMaria{display:none !important;}
body.modo-maria-app #painelMaria{position:fixed; inset:0; z-index:20;}
/* 09/09/2026 -- topo virou "Central de Organização" (nome do app
   original) + saudação em fonte cursiva embaixo, igual ao site estático
   antigo. */
.maria-topo{display:flex; flex-direction:column; margin-bottom:2px;}
.maria-topo h2{margin:0; font-size:22px;}
.maria-saudacao{
  font-family:"Segoe Script","Bradley Hand",cursive; font-size:16px;
  color:var(--accent); margin-top:2px;
}
.maria-frase-dia{
  margin:14px 0 18px; padding:14px 16px; border-radius:10px;
  background:var(--coluna-bg); border:1px solid var(--border);
}
.maria-frase-rotulo{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600;}
.maria-frase-texto{font-family:Georgia,"Times New Roman",serif; font-size:15px; font-style:italic; margin:6px 0 4px; line-height:1.4;}
.maria-frase-ref{font-size:12px; color:var(--muted);}
/* fileira de abas/ações vira carrossel horizontal se não couber tudo --
   Painel/Conversar trocam de tela, Notificações/Tema são ações diretas,
   convivem na mesma fileira (pedido dele). */
.maria-abas{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.maria-abas::-webkit-scrollbar{display:none;}
.maria-abas .maria-aba-btn{flex:0 0 auto; white-space:nowrap;}
#mariaConteudoRaiz.hidden, #mariaAcessoNegado.hidden{display:none;}
/* 09/09/2026 -- Painel virou CARROSSEL HORIZONTAL, pedido dele: "passa
   tudo pro lado, como era o site antigo" em vez de empilhar área embaixo
   de área. margin:-24px cancela o padding do .painel-dashboard pai só
   pra este trecho, pra o carrossel ocupar a largura cheia do painel. */
.maria-carrossel{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 -24px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.maria-carrossel::-webkit-scrollbar{display:none;}
.maria-pagina{
  flex:0 0 100%; min-width:0; box-sizing:border-box;
  scroll-snap-align:start; scroll-snap-stop:always;
  padding:0 24px;
}
.maria-pagina-titulo{margin:0 0 14px;}
.maria-carrossel-dots{display:flex; justify-content:center; gap:6px; margin:16px 0 4px;}
.maria-dot{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background:var(--border); cursor:pointer;
}
.maria-dot.ativo{background:var(--accent); width:20px; border-radius:4px;}

/* ===================== META ADS (08/09/2026) ===================== */
/* #painelMetaAds reusa .painel-dashboard (mesmo full-screen/50vw já
   corrigido acima) -- só o conteúdo próprio fica aqui. */
/* Cada conta é uma <details> só (08/09/2026, pedido dele: "cada um na sua
   gaveta... pode fazer uma gaveta bem grande, bem gordinha") -- o
   <summary> é o nome da campanha/conta, tudo mais (números + as 2
   sub-gavetas de métricas/campanhas) fica dentro, escondido até abrir. */
.meta-ads-card{
  margin-bottom:12px; border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; background:var(--coluna-bg);
}
.meta-ads-card > summary{
  cursor:pointer; font-size:16px; font-weight:700; color:var(--text);
  margin:0 0 2px; list-style:none;
}
.meta-ads-card[open] > summary{margin-bottom:12px;}
.meta-ads-card > summary::-webkit-details-marker{display:none;}
.meta-ads-card > summary::before{content:"▸ "; color:var(--accent-dark);}
.meta-ads-card[open] > summary::before{content:"▾ ";}
.meta-ads-lucro{background:var(--ativo); color:#fff;}
.meta-ads-lucro .dash-label{color:#fff; opacity:.85;}
.meta-ads-gaveta{margin-top:12px;}
/* 08/09/2026, pedido dele: essas 3 gavetas (Ver métricas / Escolher
   campanhas / Agente de campanha) ganham o MESMO visual de botão comprido
   que o Agente de campanha já usa -- sem a setinha NATIVA do navegador
   (que <summary> desenha sozinho quando ninguém esconde), com uma seta
   customizada ▸/▾ no padrão do resto do app, texto branco. */
.meta-ads-gaveta summary{
  cursor:pointer; list-style:none;
  width:100%; padding:10px 12px; margin-top:8px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:#fff; font-size:12.5px; font-weight:600;
}
.meta-ads-gaveta summary::-webkit-details-marker{display:none;}
.meta-ads-gaveta summary::before{content:"▸ "; color:var(--accent-dark);}
.meta-ads-gaveta[open] summary{border-color:var(--accent); background:rgba(201,168,76,.12);}
.meta-ads-gaveta[open] summary::before{content:"▾ ";}
.meta-ads-gaveta .dash-cards{margin-top:10px;}
.meta-ads-campanhas-lista{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.meta-ads-campanha-item{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px; border-radius:8px; background:var(--card); cursor:pointer;
}
.meta-ads-campanha-nome{font-size:12.5px; font-weight:600; flex:1 1 auto; min-width:140px;}
.meta-ads-campanha-info{font-size:11px; color:var(--muted); white-space:nowrap;}
/* Números como "R$ 2.119,33" são mais largos que os quadradinhos foram
   pensados pra caber -- 08/09/2026, achado por ele ("está fora do
   quadradinho"). min-width:0 destrava o encolhimento (o item de grid, por
   padrão, nunca fica menor que o conteúdo, mesmo maior que a coluna) e o
   texto quebra em vez de vazar. */
.meta-ads-card .dash-card{min-width:0;}
.meta-ads-card .dash-num{font-size:19px; overflow-wrap:break-word;}

/* ===================== AGENTE DE CAMPANHA (Frente 3, 08/09/2026) ===================== */
/* 08/09/2026, achado no print dele: as abas nasciam quase coladas no
   <summary> da gaveta ("Agente de campanha") -- .agente-camp é o 1º filho
   depois do summary, então o respiro tem que vir DAQUI, não das abas. */
.agente-camp{margin-top:14px;}
/* 08/09/2026, pedido dele (2ª rodada, revertendo a 1ª): "Criar campanha
   nova"/"Analisar e otimizar" voltam a ficar LADO A LADO ("igual estava
   antes"), continuando com a cara de gaveta (aperta ativa, aperta a outra
   desativa) -- só o texto virou branco em vez de dourado. A LÓGICA de
   troca continua a mesma de sempre (agenteCampCarregar). */
.agente-camp-abas{display:flex; flex-direction:row; gap:6px; margin-bottom:10px; flex-wrap:wrap;}
.agente-camp-gaveta-cab{
  flex:1; min-width:140px; text-align:left; padding:10px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:#fff; font-size:12.5px; font-weight:600; cursor:pointer;
}
.agente-camp-gaveta-cab.ativa{border-color:var(--accent); background:rgba(201,168,76,.12);}
.agente-camp-gaveta-seta{display:inline-block; width:14px; color:var(--accent-dark);}
/* Busca no histórico (pedido dele: sem "nova conversa"/apagar, tudo fica
   registrado -- então precisa de como achar algo específico depois). */
.agente-camp-busca{margin-bottom:6px;}
.agente-camp-busca-input{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-size:12.5px;
}
.agente-camp-chat .agente-camp-msgs{max-height:340px;}
/* "Pensando..." com 3 pontinhos pulsando -- indicador real de que o job
   está rodando em segundo plano (antes era só "…" estático, ele achou que
   podia estar travado). */
.agente-camp-pensando{display:inline-flex; align-items:center; gap:3px;}
.agente-camp-pensando i{
  width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.35;
  font-style:normal; animation:agenteCampPulsar 1.1s infinite ease-in-out;
}
.agente-camp-pensando i:nth-child(2){animation-delay:.18s;}
.agente-camp-pensando i:nth-child(3){animation-delay:.36s;}
@keyframes agenteCampPulsar{0%,80%,100%{opacity:.35; transform:scale(.85);} 40%{opacity:1; transform:scale(1);}}
/* O campo de escrever nascia "embolado" com o botão Enviar -- .btn-obs tem
   width:100% (pensado pra ficar sozinho numa linha), e dentro do
   .copiloto-chat-input (flex row) isso empurrava o botão pra baixo do
   campo em vez de ficar do lado, sobrando pouco espaço pra digitar. Aqui
   (e só aqui, não mexe no Copiloto) o botão vira largura pelo próprio
   texto, ficando ao lado do campo, que ganha o resto do espaço de volta. */
/* 08/09/2026, achado no aparelho dele: font-size abaixo de 16px faz o
   Safari do iPhone dar ZOOM AUTOMÁTICO ao focar o campo (comportamento do
   próprio sistema, não é bug de CSS visual -- ele descreveu como "dá um
   zoom, tira azul", que é a barra do Safari aparecendo atrás durante o
   zoom). 16px é o piso oficial pra evitar isso -- .btn-obs junto no mesmo
   tamanho pra não ficar desproporcional ao lado do campo maior. */
.agente-camp-chat .copiloto-chat-input input{padding:10px 12px; font-size:16px;}
.agente-camp-chat .copiloto-chat-input .btn-obs{width:auto; flex:0 0 auto; margin-top:0; white-space:nowrap; font-size:14px;}
/* 08/09/2026: MESMA correcao acima, generalizada pro .copiloto-chat-input
   "puro" (painel do lead, Copiloto -- Estefani CEO IA) -- tinha ficado so
   no chat do Agente de campanha, e o botao Enviar nascia gigante empurrando
   o campo de escrever pra quase nada. */
.copiloto-chat-input input{padding:10px 12px; font-size:16px;}
.copiloto-chat-input .btn-obs{width:auto; flex:0 0 auto; margin-top:0; white-space:nowrap; font-size:14px;}
.agente-camp-nova{width:auto; padding:5px 10px; font-size:11.5px;}
.agente-camp-planos:not(:empty){margin-bottom:10px; display:flex; flex-direction:column; gap:8px;}
.agente-camp-card{
  border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:rgba(201,168,76,.06);
  overflow-wrap:break-word; max-width:100%;
}
.agente-camp-card-titulo{font-size:13px; font-weight:700; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;}
.agente-camp-card-status{font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--accent-dark); letter-spacing:.02em;}
.agente-camp-card-acoes{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.agente-camp-card-acoes button{
  padding:7px 12px; border-radius:8px; border:1px solid var(--accent-dark); background:var(--accent);
  color:#231a05; font-size:12px; font-weight:700; cursor:pointer;
}
.agente-camp-card-acoes button.btn-secundario{
  background:transparent; border-color:var(--border); color:var(--muted); font-weight:600;
}
.agente-camp-erro{color:var(--esquecido);}
/* 08/09/2026, achado no print dele: a justificativa de cada mudança
   sugerida (frase da IA, pode ser longa) reusa `.meta-ads-campanha-info`
   -- que nasceu pra um rótulo CURTO ("R$ 1.234 · 12 leads" na gaveta
   "Escolher campanhas") e tem `white-space:nowrap` de propósito lá. Aqui
   dentro do card do agente essa mesma classe segurava uma frase inteira
   numa linha só, vazando pra fora do card ("texto vazando", "foi pro
   lado"). Escopado só pra dentro de `.agente-camp-card` -- a gaveta de
   campanhas continua exatamente como estava. */
.agente-camp-card .meta-ads-campanha-info{
  white-space:normal; overflow-wrap:break-word; flex:1 1 200px; min-width:150px;
}
.agente-camp-idmanual{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
.agente-camp-idmanual input{flex:1; min-width:110px; font-size:12px; padding:6px 8px; border-radius:6px; border:1px solid var(--border);}
.agente-camp-idmanual button{
  padding:6px 10px; border-radius:6px; border:1px solid var(--accent-dark); background:var(--accent);
  color:#231a05; font-size:11.5px; font-weight:700; cursor:pointer;
}

/* ===================== BUSCA NO DWV ===================== */
/* #painelDwv reusa a classe .painel-dashboard (mesmo full-screen no
   celular / 50vw no computador já corrigido acima) -- só o CONTEÚDO
   interno é próprio daqui pra baixo. */
.dwv-intro{font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 16px;}
/* 04/09/2026 -- form do "+ Novo lead", mesmo padrão de campo do
   .painel-secao (16px de propósito: abaixo disso o Safari do iPhone dá
   zoom automático ao focar, mesma lição já paga em 03/09). */
.novo-lead-form{display:flex; flex-direction:column; gap:4px; margin-top:16px;}
.novo-lead-form label{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-top:10px;}
.novo-lead-form select, .novo-lead-form input{
  width:100%; border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; font-size:16px; font-family:inherit;
  background:var(--input-bg); color:var(--text);
}
.novo-lead-form button{margin-top:16px;}

.dwv-busca-form{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
/* 08/09/2026 -- DWV e portais/internet viraram 2 CARDS separados de
   verdade (pedido dele: "como se fosse dois cards... um pra busca do DW,
   outro pra internet"), um embaixo do outro, cada um com seu próprio
   campo/botão/histórico -- ver DWV_IDS no app.js. */
.dwv-card-busca{
  border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:16px;
  background:var(--card);
}
.dwv-card-busca h3{margin:0 0 8px; font-size:15px;}
.dwv-card-busca .dwv-intro{margin-bottom:14px;}
.dwv-botao-externa{background:transparent !important; border:1px solid var(--accent) !important; color:var(--accent-dark) !important;}
.dwv-consulta{
  width:100%; resize:vertical; min-height:52px;
  font:inherit; padding:10px 12px;
  border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text);
  /* 16px, não 13.5px: abaixo de 16px o Safari do iPhone dá zoom
     automático na tela inteira ao focar o campo -- ficava pior ainda
     aqui porque o painel já foca sozinho ao abrir (abrirDwv), então o
     "zoom" acontecia na hora, parecendo bug de tela (feedback do
     Estefani, 03/09/2026: "aperto pra abrir e ele dá um zoom"). */
  font-size:16px;
}
.dwv-aviso{
  font-size:12.5px; padding:10px 12px; border-radius:8px; margin-bottom:14px;
  background:var(--esquecido-bg); color:var(--esquecido);
}
.dwv-filtros-entendidos{
  font-size:12px; color:var(--muted); margin-bottom:14px; line-height:1.5;
}
.dwv-filtros-entendidos b{color:var(--text); font-weight:600;}
.dwv-resultados{display:flex; flex-direction:column; gap:12px;}
.dwv-card{
  border:1px solid var(--border); border-radius:10px; padding:14px;
  background:var(--coluna-bg);
}
.dwv-card h3{margin:0 0 6px; font-size:15px;}
.dwv-card-linha{font-size:12.5px; color:var(--muted); margin:2px 0;}
.dwv-card-endereco{color:var(--text);}
.dwv-card-preco{font-size:16px; font-weight:700; color:var(--accent); margin:8px 0 4px;}
/* 08/09/2026 -- destaque da unidade específica mais barata dentro do que
   ele pediu (ver unidade_destaque em dwv.py). */
.dwv-card-destaque{
  font-size:12px; color:var(--text); background:rgba(201,168,76,.1);
  border-radius:6px; padding:6px 8px; margin:4px 0 8px;
}
.dwv-card-destaque b{color:var(--accent-dark);}
.dwv-card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.dwv-card-tag{
  font-size:11px; padding:3px 8px; border-radius:12px;
  background:var(--bg); border:1px solid var(--border); color:var(--muted);
}
.dwv-vazio, .dwv-carregando{font-size:13px; color:var(--muted); text-align:center; padding:24px 0;}
.dwv-erro{font-size:13px; color:var(--quente); text-align:center; padding:16px 0;}
.dwv-nota-link{font-size:11.5px; color:var(--muted); margin-top:14px; font-style:italic;}
.dwv-card-links a{color:var(--accent);}
/* 08/09/2026 -- botão em destaque pra abrir a ficha do empreendimento
   direto no DWV (testado real, ver dwv.py). */
.dwv-card-abrir{
  display:block; text-align:center; margin-top:10px; padding:9px 12px;
  border-radius:8px; background:var(--accent); color:#231a05;
  font-size:12.5px; font-weight:700; text-decoration:none;
}

/* 08/09/2026 -- busca unificada DWV + portais/internet, ver htmlSecaoExterna
   em app.js. Título de cada seção dentro da mesma gaveta, e um selo pro
   nome do portal no card externo (reusa .dwv-card, só marca a origem). */
.dwv-secao-titulo{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted); margin:18px 0 10px;
}
.dwv-secao-titulo:first-child{margin-top:0;}
.dwv-card-portal{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  color:var(--accent);
}
.dwv-card-externo{border-style:dashed;}
/* 08/09/2026 -- selo de "página de busca do portal" (vs anúncio individual). */
.dwv-card-selo-busca{
  font-size:10px; font-weight:600; color:var(--muted);
  background:var(--bg); border:1px solid var(--border); border-radius:999px;
  padding:1px 6px; margin-left:4px;
}

/* Histórico de buscas em gavetas (03/09/2026, pedido dele: "a busca fica
   salva... vem uma gaveta com os apartamentos daquela vez") -- cada
   busca é um <details> nativo, sem JS pra abrir/fechar. */
.dwv-gaveta{
  border:1px solid var(--border); border-radius:10px; margin-bottom:10px;
  background:var(--coluna-bg); overflow:hidden;
}
.dwv-gaveta-resumo{
  padding:12px 14px; cursor:pointer; list-style:none;
  display:flex; flex-direction:column; gap:3px;
}
.dwv-gaveta-resumo::-webkit-details-marker{display:none;}
.dwv-gaveta-consulta{font-size:13.5px; font-weight:600; color:var(--text);}
.dwv-gaveta-meta{font-size:11.5px; color:var(--muted);}
.dwv-gaveta-conteudo{padding:0 14px 14px;}
.dwv-gaveta[open] .dwv-gaveta-resumo{border-bottom:1px solid var(--border);}
/* 08/09/2026, pedido dele: excluir busca de teste da própria lista. */
.dwv-gaveta-excluir{
  display:block; width:auto; margin:0 14px 12px; padding:5px 10px;
  border-radius:6px; border:1px solid var(--border); background:transparent;
  color:var(--muted); font-size:11px; cursor:pointer;
}
.dwv-gaveta-excluir:hover{border-color:var(--esquecido); color:var(--esquecido);}

/* ===================== RODÍZIO ===================== */
.rodizio-push-linha{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.btn-rodizio-push{width:100%;}
.rodizio-fonte-card{
  border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:12px;
  background:var(--coluna-bg);
}
.rodizio-fonte-card h3{margin:0 0 10px; font-size:14.5px;}
/* Liga/desliga a IA dessa fonte (07/09/2026, pedido dele: "pra cada IA um
   botão de liga e desliga") -- pega efeito na hora, não depende do botão
   "Salvar esta campanha" (que é só rodízio/timeout). */
.ia-toggle-linha{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding:8px 10px; border-radius:8px; background:var(--bg);
  border:1px solid var(--border); font-size:13px;
}
.ia-toggle-nome{font-weight:600; flex:1;}
.ia-toggle-switch{position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0;}
.ia-toggle-input{opacity:0; width:0; height:0; position:absolute;}
.ia-toggle-trilho{
  position:absolute; inset:0; background:var(--border); border-radius:999px;
  transition:background .15s; cursor:pointer;
}
.ia-toggle-bolinha{
  position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .15s; pointer-events:none;
}
.ia-toggle-input:checked + .ia-toggle-trilho{background:var(--ativo);}
.ia-toggle-input:checked + .ia-toggle-trilho .ia-toggle-bolinha{transform:translateX(18px);}
.ia-toggle-estado{font-size:12px; color:var(--muted); min-width:64px;}
.rodizio-corretores{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.rodizio-corretor-linha{display:flex; align-items:center; gap:8px; font-size:13px;}
.rodizio-corretor-linha input[type="checkbox"]{width:16px; height:16px;}
.rodizio-timeout-linha{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.rodizio-timeout-linha label{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.rodizio-timeout-linha input[type="number"]{
  width:70px; padding:6px 8px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14px;
}
.rodizio-aviso-timeout{font-size:11.5px; color:var(--esquecido); margin:6px 0 10px;}
.rodizio-salvar{padding:8px 16px; border-radius:8px; border:none; background:var(--accent); color:#1c1f2b; font-weight:700; cursor:pointer;}
.rodizio-salvar:hover{background:var(--accent-dark); color:#fff;}
.rodizio-status-salvo{font-size:12px; color:var(--muted); margin-left:10px;}
.rodizio-log-tabela{width:100%; border-collapse:collapse; font-size:12.5px;}
.rodizio-log-tabela th, .rodizio-log-tabela td{padding:6px 8px; border-bottom:1px solid var(--border); text-align:left;}
.rodizio-log-vazio{font-size:13px; color:var(--muted); text-align:center; padding:16px 0;}

/* Resumo da conversa por IA -- sob demanda, custa API a cada geração */
.resumo-ia-texto{
  font-size:13.5px; line-height:1.5; color:var(--text);
  background:var(--historico-bg); border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; margin-bottom:8px; white-space:pre-wrap;
}

/* Tags livres -- marcador neutro, não é etapa nem temperatura */
.badge-tag{background:var(--accent-soft, var(--fonte-badge-bg)); color:var(--accent-dark); border:1px solid var(--accent-dark);}
.tags-lista{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; min-height:4px;}
.tag-chip{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--fonte-badge-bg); color:var(--accent-dark);
  border-radius:999px; padding:3px 6px 3px 10px; font-size:12px; font-weight:600;
}
.tag-remover{
  background:none; border:none; cursor:pointer; color:var(--accent-dark);
  font-size:14px; line-height:1; padding:2px 4px; border-radius:50%;
}
.tag-remover:hover{background:rgba(0,0,0,.08);}
.tags-add{display:flex; gap:8px;}
.tags-add input{flex:1;}
.tags-add .btn-obs{flex:0 0 auto; width:auto; margin-top:0; white-space:nowrap;}

/* Campos customizados por fonte (ex: modelo/ano do carro na CC Câmbios) */
.campo-custom-item{margin-bottom:10px;}
.campo-custom-label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:600;}
.campo-custom-input{
  width:100%; border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; font-size:14px; font-family:inherit;
  background:var(--input-bg); color:var(--text);
}

/* Lead que entrou mais de uma vez na campanha */
.badge-dup{background:var(--coluna-count-bg); color:var(--muted); font-weight:700;}
.aviso-duplicata{
  border:1px solid var(--accent);
  border-left:4px solid var(--accent);
  background:var(--fonte-badge-bg);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:18px;
  font-size:13px;
  line-height:1.5;
  color:var(--text);
}

/* 04/09/2026 -- redesenho do painel do lead: quiz virou gaveta fechada
   (mesmo padrão visual de .dwv-gaveta), pra economizar espaço vertical no
   topo do painel. */
.gaveta-quiz{
  border:1px solid var(--border); border-radius:10px; margin-bottom:14px;
  background:var(--coluna-bg); overflow:hidden;
}
.gaveta-quiz summary{
  padding:10px 14px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:600; color:var(--text);
}
.gaveta-quiz summary::-webkit-details-marker{display:none;}
.gaveta-quiz[open] summary{border-bottom:1px solid var(--border);}
.gaveta-quiz .quiz-lista{padding:12px 14px; margin:0;}

/* 🔴 04/09/2026 -- telefone+WhatsApp NÃO É gaveta (era `<details>` com o
   botão fora do <summary>): funcionava só por sorte de especificidade
   (`.btn-whatsapp{display:flex}` "vencendo" a regra nativa do navegador
   que esconde conteúdo de <details> fechado) -- e essa vitória não é
   garantida entre navegadores, o que explica o relato dele de "o botão
   não está aparecendo" (provável Safari/iPhone aplicando a regra nativa
   com mais força que o Chromium onde eu tinha testado). Virou uma <div>
   sempre visível -- também mais fiel ao pedido original ("do lado do
   telefone", sem precisar abrir nada). */
.linha-telefone{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:14px;
}
.linha-telefone-numero{font-size:13.5px; font-weight:600; color:var(--text);}
.btn-whatsapp{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; text-align:center;
  background:#25d366; color:#fff; font-weight:700; font-size:13.5px;
  border-radius:8px; text-decoration:none;
}
.btn-whatsapp:hover{background:#1ebc59;}
.icone-whatsapp{flex-shrink:0;}

.painel-info-linha{font-size:13px; color:var(--muted); margin-bottom:14px;}

/* Histórico de contato (timeline única -- entrada, quiz, rodízio,
   observações, lembretes, tudo junto e ordenado do mais recente pro mais
   antigo). Mesmo padrão de scroll interno de .historico-conversa. */
.historico-lista{
  /* 🔴 height FIXO, não max-height -- medido de verdade (Playwright): com
     max-height, o container nasce pequeno (só o texto "Carregando..." de 1
     linha) e cresce de repente quando a busca assíncrona chega, empurrando
     TUDO que vem depois (nova observação, lembrete, tags...) pra baixo --
     105px de pulo medido no lead de teste. Altura fixa reserva o espaço
     desde o início, o "tremor" relatado por ele some porque nada mais
     muda de tamanho na tela quando o histórico termina de carregar. */
  height:280px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--historico-bg);
}
.historico-item{font-size:13px; line-height:1.4; color:var(--text);}
.historico-data{display:block; font-size:11px; color:var(--muted); margin-bottom:2px;}
.historico-texto{white-space:pre-wrap;}
.historico-vazio{font-size:13px; color:var(--muted); text-align:center; padding:16px 0;}
.historico-item.historico-rodizio .historico-texto{color:var(--accent-dark);}
.historico-item.historico-lembrete .historico-texto{font-weight:600;}

/* Lembrete ganhou textarea (era campo de 1 linha) -- pedido dele, "que
   tenha duas, três linhas pro cliente/corretor escrever". */
.campo-lembrete-texto{min-height:70px;}

.historico-conversa{
  max-height:260px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--historico-bg);
}
.msg{font-size:13px; padding:6px 10px; border-radius:8px; max-width:88%; color:var(--text);}
.msg-quem{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:2px;}
/* data+hora no cantinho do nome de cada mensagem (06/09/2026, pedido dele) */
.msg-hora{float:right; letter-spacing:0; opacity:.7; font-weight:400;}
/* URL na mensagem vira link clicável (06/09/2026) -- break-all pra link
   longo de mídia não estourar a largura da bolha */
.msg a,.copiloto-msg a{color:var(--accent); text-decoration:underline; word-break:break-all;}
.msg-cliente{background:var(--card); border:1px solid var(--border); align-self:flex-start;}
.msg-aline{background:var(--msg-aline-bg); align-self:flex-end;}
/* "humano" = alguém respondeu pelo celular depois de assumir a conversa. */
.msg-humano{background:var(--msg-humano-bg); border:1px solid var(--msg-humano-border); color:var(--msg-humano-text); align-self:flex-end;}
.msg-humano .msg-quem{color:var(--msg-humano-text); opacity:.8;}
.msg-vazio{font-size:13px; color:var(--muted);}
/* No computador o painel vai até a metade da tela -- é onde ele lê o
   histórico de contato e o campo estreito de 420px obrigava a rolar demais
   (pedido do Estefani, 30/08/2026). No celular nada muda: lá o max-width de
   92vw já faz o painel ocupar a tela toda, que é o comportamento certo.
   O teto de 1000px só age em monitor ultra-wide, onde "metade" viraria uma
   coluna larga demais pra ler. */
@media (min-width:900px){
  .painel-lead{width:50vw; min-width:420px; max-width:1000px;}
  /* Com mais espaço em tela, o histórico deixa de ser uma janelinha:
     acompanha a altura da tela em vez do valor fixo de 240px. */
  .obs-historico{max-height:46vh;}
  .painel-secao textarea{min-height:90px;}
}

/* 05/09/2026 -- filtros do computador numa linha só (pedido dele). Fica no
   FIM do arquivo de propósito: as regras base de .busca-wrap/#fonteTabs/
   .filtro-linha-dupla (mais acima) têm a MESMA especificidade de algumas
   destas, e um empate de especificidade é resolvido por ORDEM no arquivo
   -- só ficando por último aqui é que estas realmente vencem. Cada grupo
   com tamanho FIXO (grow:0 shrink:0, todas as 3 sub-propriedades do
   `flex` redeclaradas explicitamente, nunca só flex-basis sozinho): numa
   tela larga cabe tudo numa linha; numa mais estreita nada espreme até
   ficar ilegível, a barra inteira rola de lado (mesmo princípio do
   carrossel de ações). */
@media (min-width:900px){
  .filtros-barra{flex-wrap:nowrap; overflow-x:auto;}
  .filtros-barra > .busca-wrap{flex-grow:0; flex-shrink:0; flex-basis:240px; max-width:300px;}
  .filtros-barra > #fonteTabs{flex-grow:0; flex-shrink:0; flex-basis:190px;}
  .filtros-barra > .filtro-linha-dupla{flex-grow:0; flex-shrink:0; flex-basis:auto;}
  .filtro-linha-dupla > *{flex-grow:0; flex-shrink:0; flex-basis:140px;}
  .filtros-barra > .data-filtro{flex-grow:0; flex-shrink:0;}
}

/* ===================== COPILOTO DO CORRETOR ("Estefani IA") — 06/09/2026 ===================== */
/* Gaveta (<details>) fechada por padrão -- o briefing é grande e não pode
   dominar o card do cliente (pedido dele 06/09). Abrir a gaveta pela 1ª vez
   dispara a análise (ver wireCopiloto). */
.copiloto-secao{background:#f4f1fb;border:1px solid #d9cff0;border-radius:10px;overflow:hidden;padding:0}
.copiloto-secao > summary{
  padding:11px 14px;cursor:pointer;list-style:none;
  font-size:13.5px;font-weight:700;color:#5b3fa0;
}
.copiloto-secao > summary::-webkit-details-marker{display:none}
.copiloto-secao[open] > summary{border-bottom:1px solid #d9cff0}
.copiloto-corpo{padding:12px}
.copiloto-sub{font-size:12px;color:#7a6ba3;margin:0 0 8px}
.copiloto-briefing{font-size:13px;line-height:1.45;color:#2b2540;max-height:55vh;overflow-y:auto}
.copiloto-fonte-aviso{background:#fdf7e9;border:1px solid #e0b34d;border-radius:8px;padding:7px 9px;font-size:12px;color:#7a5a12;margin-bottom:8px}
.copiloto-vazio{color:#8a80a5;font-style:italic}
.copiloto-topo{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.copiloto-badge{background:#5b3fa0;color:#fff;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;text-transform:capitalize}
.copiloto-bloco{margin-top:8px;background:#fff;border-radius:8px;padding:8px 10px;border:1px solid #e7e0f5}
.copiloto-bloco > b{display:block;color:#5b3fa0;font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.copiloto-proximo{border-color:#6fbf73;background:#f1fbf1}
.copiloto-proximo > b{color:#2f7a34}
.copiloto-risco{border-color:#e0b34d;background:#fdf7e9}
.copiloto-risco > b{color:#a9791a}
.copiloto-objecao{margin-top:6px;padding-top:6px;border-top:1px dashed #e0d7f2}
.copiloto-objecao:first-of-type{border-top:none;padding-top:0}
.copiloto-objecao-titulo{font-weight:700;color:#2b2540}
.copiloto-linha{margin-top:2px}
.copiloto-rascunho{margin-top:4px;padding:6px 8px;background:#f4f1fb;border-left:3px solid #5b3fa0;border-radius:4px;font-style:italic;white-space:pre-wrap}
.copiloto-chat{margin-top:10px;border-top:1px solid #d9cff0;padding-top:8px}
.copiloto-chat-msgs{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.copiloto-chat-msgs:empty{display:none}
.copiloto-msg{font-size:13px;line-height:1.4;padding:6px 9px;border-radius:8px;max-width:92%}
.copiloto-msg-eu{align-self:flex-end;background:#5b3fa0;color:#fff}
.copiloto-msg-ia{align-self:flex-start;background:#fff;border:1px solid #e7e0f5;color:#2b2540}
.copiloto-msg-quem{display:block;font-size:10px;opacity:.75;margin-bottom:2px}
.copiloto-chat-input{display:flex;gap:6px;margin-top:8px}
.copiloto-chat-input input{flex:1;min-width:0}

/* Conversa crua do WhatsApp (só master) virou gaveta fechada por padrão
   (06/09/2026) -- ocupava muito espaço no card aberta o tempo todo. */
.gaveta-conversa{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--coluna-bg);margin-bottom:14px}
.gaveta-conversa > summary{padding:10px 14px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--text)}
.gaveta-conversa > summary::-webkit-details-marker{display:none}
.gaveta-conversa[open] > summary{border-bottom:1px solid var(--border)}
.gaveta-conversa .historico-conversa{border:none;border-radius:0;margin:0}

/* 28/09/2026 -- "Sugerir ajuste na IA": corretor reporta direto na
   conversa (texto/áudio/print) em vez de mandar print pelo WhatsApp. */
.gaveta-feedback-ia{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--coluna-bg);margin-bottom:14px}
.gaveta-feedback-ia > summary{padding:10px 14px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--text)}
.gaveta-feedback-ia > summary::-webkit-details-marker{display:none}
.gaveta-feedback-ia[open] > summary{border-bottom:1px solid var(--border)}
.gaveta-feedback-ia .feedback-ia-sub{font-size:12px;color:#7a6ba3;margin:10px 12px 8px;line-height:1.4}
.gaveta-feedback-ia textarea{width:calc(100% - 24px);margin:0 12px 8px;box-sizing:border-box}
.gaveta-feedback-ia .feedback-ia-botoes{display:flex;gap:6px;padding:0 12px 10px}
.gaveta-feedback-ia .feedback-ia-botoes #btnFeedbackIAEnviar{flex:2}
.gaveta-feedback-ia .feedback-ia-botoes .btn-midia{flex:1;padding:8px 0;font-size:17px;min-width:44px}
.gaveta-feedback-ia .conversa-midia-barra{margin:0 12px 8px}
.gaveta-feedback-ia .status-salvar{padding:0 12px 10px}

/* 28/09/2026 -- aviso de onboarding da feature acima (3 primeiras vezes
   que cada corretor loga). Overlay PRÓPRIO, não o #overlay compartilhado
   dos painéis -- evita qualquer interação com o resto do app. */
.overlay-aviso{position:fixed;inset:0;z-index:100;background:rgba(20,20,30,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.overlay-aviso.hidden{display:none}
.overlay-aviso .aviso-card{background:var(--card);border-radius:14px;padding:22px;max-width:380px;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.overlay-aviso .aviso-card h3{margin:0 0 10px;font-size:17px}
.overlay-aviso .aviso-card p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--text)}
.overlay-aviso .aviso-card button{width:100%;margin-top:6px}

/* 10/09/2026 -- Protocolo de Execução (portado do site estático antigo,
   estefaniliotti.online/organizacao/execucao.html). Tema escuro FIXO,
   escopado em .execucao-wrap com variáveis PRÓPRIAS (--exec-*) -- de
   propósito, pra não brigar com o tema claro/escuro do resto do Sheep
   Leads nem vazar pra fora; mantém a mesma identidade "guerreiro/dourado"
   que ele já conhece dessa ferramenta. */
.execucao-wrap{
  --exec-bg:#0E1116; --exec-card:#161C25; --exec-card-2:#1D2530; --exec-line:#28313E;
  --exec-amber:#FFB020; --exec-amber-dark:#B87700; --exec-success:#4CC38A; --exec-plan:#7C8DA6;
  --exec-alert:#E5636C; --exec-text:#EDF1F6; --exec-text-dim:#8B97A8;
  background:var(--exec-bg); color:var(--exec-text); padding:14px; border-radius:12px;
}
.execucao-wrap section{margin-bottom:20px;}
.execucao-wrap .maria-subtitulo{color:var(--exec-text-dim); font-size:12px; text-transform:uppercase; letter-spacing:0.07em;}
.execucao-wrap .hero-card{background:linear-gradient(180deg, var(--exec-card-2), var(--exec-card)); border:1px solid var(--exec-line); border-radius:12px; padding:22px 18px; text-align:center;}
.execucao-wrap .big-num{font-size:64px; font-weight:800; color:var(--exec-amber); line-height:1;}
.execucao-wrap .big-label{font-size:12px; color:var(--exec-text-dim); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px;}
.execucao-wrap .tick-row{display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:14px 0; min-height:10px;}
.execucao-wrap .tick{width:8px; height:8px; background:var(--exec-amber); border-radius:1px; opacity:0.85;}
.execucao-wrap .btn-hero{width:100%; padding:16px; margin-top:8px; background:var(--exec-amber); color:#14100a; border:none; border-radius:12px; font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:0.03em; cursor:pointer;}
.execucao-wrap .btn-hero.flash,.execucao-wrap .btn.flash{background:var(--exec-amber-dark);}
.execucao-wrap .hero-caption{font-size:11.5px; color:var(--exec-text-dim); margin-top:10px; line-height:1.4;}
.execucao-wrap .btn-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.execucao-wrap .btn{background:var(--exec-card); border:1px solid var(--exec-line); color:var(--exec-text); border-radius:10px; padding:11px 10px; font-weight:600; font-size:13px; cursor:pointer; text-align:center;}
.execucao-wrap .btn-sim{color:var(--exec-success);}
.execucao-wrap .btn-minus{background:transparent; border:1px solid var(--exec-line); color:var(--exec-text-dim); font-size:11px; padding:7px 6px; border-radius:8px; cursor:pointer;}
.execucao-wrap .minus-row{display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-top:8px;}
.execucao-wrap .btn-zerar{width:100%; margin-top:10px; padding:10px; background:transparent; border:1px dashed var(--exec-alert); color:var(--exec-alert); border-radius:10px; font-size:12px; cursor:pointer;}
.execucao-wrap .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.execucao-wrap .stat-card{background:var(--exec-card); border:1px solid var(--exec-line); border-radius:12px; padding:14px;}
.execucao-wrap .stat-card .n{font-size:26px; font-weight:800;}
.execucao-wrap .stat-card .label{font-size:11px; color:var(--exec-text-dim); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px;}
.execucao-wrap .stat-card.exp .n{color:var(--exec-amber);}
.execucao-wrap .stat-card.sim .n{color:var(--exec-success);}
.execucao-wrap .stat-card.exec .n{color:var(--exec-success);}
.execucao-wrap .stat-card.plan .n{color:var(--exec-plan);}
.execucao-wrap .ratio-alert{border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.4; display:none;}
.execucao-wrap .ratio-alert.show{display:block;}
.execucao-wrap .ratio-alert.warn{background:rgba(229,99,108,0.12); border:1px solid var(--exec-alert); color:var(--exec-alert);}
.execucao-wrap .ratio-alert.good{background:rgba(76,195,138,0.12); border:1px solid var(--exec-success); color:var(--exec-success);}
.execucao-wrap .mission-list{display:flex; flex-direction:column; gap:8px;}
.execucao-wrap .mission{display:flex; align-items:flex-start; gap:10px; background:var(--exec-card); border:1px solid var(--exec-line); border-radius:10px; padding:12px; cursor:pointer;}
.execucao-wrap .mission input[type="checkbox"]{margin-top:2px; width:18px; height:18px; accent-color:var(--exec-amber); flex-shrink:0;}
.execucao-wrap .mission .pillar{font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--exec-amber); display:block; margin-bottom:2px;}
.execucao-wrap .mission .txt{font-size:13px; line-height:1.35;}
.execucao-wrap .mission.done .txt{color:var(--exec-text-dim); text-decoration:line-through;}
.execucao-wrap .challenge-box{background:var(--exec-card); border:1px solid var(--exec-line); border-radius:12px; padding:16px; text-align:center;}
.execucao-wrap .challenge-box .txt{font-size:14px; line-height:1.45; min-height:40px;}
.execucao-wrap .btn-dado{margin-top:10px; background:var(--exec-amber); color:#14100a; border:none; border-radius:999px; padding:10px 20px; font-weight:700; cursor:pointer;}
.execucao-wrap details.acc{background:var(--exec-card); border:1px solid var(--exec-line); border-radius:10px; margin-bottom:8px; overflow:hidden;}
.execucao-wrap details.acc summary{padding:12px 14px; font-size:13px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--exec-text);}
.execucao-wrap details.acc summary::-webkit-details-marker{display:none;}
.execucao-wrap details.acc summary::after{content:'+'; color:var(--exec-text-dim); font-size:16px;}
.execucao-wrap details.acc[open] summary::after{content:'–';}
.execucao-wrap .acc-body{padding:0 14px 14px; font-size:12.5px; line-height:1.55; color:var(--exec-text-dim);}
.execucao-wrap .acc-body pre{white-space:pre-wrap; font-family:inherit; color:var(--exec-text); background:var(--exec-card-2); border-radius:8px; padding:10px; margin:8px 0;}
.execucao-wrap .acc-body .note{font-style:italic; color:var(--exec-text-dim); margin-top:6px;}
.execucao-wrap .btn-copy{background:transparent; border:1px solid var(--exec-line); color:var(--exec-amber); border-radius:999px; padding:5px 12px; font-size:11px; cursor:pointer;}
.execucao-wrap .btn-copy.copied{border-color:var(--exec-success); color:var(--exec-success);}
.execucao-wrap .price-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.execucao-wrap .price-table td{padding:8px 4px; border-bottom:1px solid var(--exec-line); color:var(--exec-text);}
.execucao-wrap .price-table td:last-child{text-align:right; color:var(--exec-amber); font-weight:700; white-space:nowrap;}
.execucao-wrap .price-note{font-size:11.5px; color:var(--exec-text-dim); margin-top:8px; line-height:1.4;}
.execucao-wrap .timer-box{background:var(--exec-card); border:1px solid var(--exec-line); border-radius:12px; padding:18px; text-align:center;}
.execucao-wrap .timer-num{font-size:36px; font-weight:800; color:var(--exec-text);}
.execucao-wrap .timer-controls{display:flex; gap:8px; justify-content:center; margin-top:10px;}
.execucao-wrap .timer-controls button{flex:1; max-width:110px;}
.execucao-wrap .grid30{display:grid; grid-template-columns:repeat(10, 1fr); gap:4px;}
.execucao-wrap .g-day{aspect-ratio:1; border-radius:4px; background:var(--exec-card-2); border:1px solid var(--exec-line);}
.execucao-wrap .g-day.win{background:var(--exec-amber); border-color:var(--exec-amber);}
.execucao-wrap .g-day.half{background:rgba(255,176,32,0.28); border-color:rgba(255,176,32,0.5);}
.execucao-wrap .g-day.today{outline:2px solid var(--exec-text); outline-offset:1px;}
.execucao-wrap .streak{text-align:center; margin:10px 0; font-size:13px; color:var(--exec-text-dim);}
.execucao-wrap .streak b{color:var(--exec-amber); font-size:18px;}
.execucao-wrap .legend{font-size:11px; color:var(--exec-text-dim); text-align:center; margin-top:8px; line-height:1.4;}
.execucao-wrap .intent-list{display:flex; flex-direction:column; gap:6px;}
.execucao-wrap .intent-item{display:flex; align-items:center; gap:8px; background:var(--exec-card); border:1px solid var(--exec-line); border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.4; color:var(--exec-text);}
.execucao-wrap .intent-item .rm{margin-left:auto; color:var(--exec-alert); cursor:pointer; font-size:14px; flex-shrink:0;}
.execucao-wrap .intent-add{display:flex; gap:6px; margin-top:8px;}
.execucao-wrap .intent-add input{flex:1; background:var(--exec-card); border:1px solid var(--exec-line); border-radius:8px; padding:8px 10px; color:var(--exec-text); font-size:12.5px;}
.execucao-wrap .intent-add button{background:var(--exec-amber); color:#14100a; border:none; border-radius:8px; padding:8px 14px; font-weight:700; cursor:pointer;}

.btn-renomear-lead{background:none;border:0;cursor:pointer;font-size:14px;padding:0 4px;opacity:.6}
.btn-renomear-lead:hover{opacity:1}

/* 21/09/2026 -- responder o cliente pelo card (conversa do WhatsApp) */
.conversa-responder{display:flex; gap:8px; align-items:flex-end; padding:10px 12px 0;}
.conversa-responder textarea{flex:1; min-width:0; font-size:16px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; resize:vertical; font-family:inherit; background:var(--bg, #fff); color:var(--text);}
.conversa-responder-botoes{display:flex; flex-direction:column; gap:6px;}
.conversa-responder-botoes .btn-obs{width:auto; margin-top:0; white-space:nowrap; font-size:14px;}
.gaveta-conversa .status-salvar{padding:0 12px;}
.conversa-aviso{font-size:11.5px; opacity:.7; padding:4px 12px 10px;}
.btn-usar-resposta{margin-top:6px; padding:5px 10px; font-size:12px; font-weight:600; border:1px solid #5b3fa0; background:#fff; color:#5b3fa0; border-radius:8px; cursor:pointer;}

/* 21/09/2026 -- mandar áudio/foto/vídeo/PDF pelo card */
.conversa-midia-botoes{display:flex; gap:6px;}
.conversa-midia-botoes .btn-midia{flex:1; padding:8px 0; font-size:17px; min-width:44px;}
.btn-midia.gravando{background:#c0392b; color:#fff; border-color:#c0392b; animation:pulsarGravando 1.2s infinite; font-size:13px;}
@keyframes pulsarGravando{0%,100%{opacity:1;}50%{opacity:.65;}}
.conversa-midia-barra{margin:8px 12px 0; padding:10px; border:1px dashed var(--border); border-radius:10px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; background:var(--bg,#fff);}
.conversa-midia-barra[hidden]{display:none;}
.conversa-midia-barra audio{width:100%; max-width:100%;}
.conversa-midia-barra .conv-thumb{max-width:100%; max-height:180px; border-radius:8px;}
.conv-arquivo{font-size:13px; word-break:break-all;}
.conv-barra-acoes{display:flex; gap:8px;}
.conv-barra-acoes .btn-obs{width:auto; margin-top:0; font-size:14px;}
.btn-descartar{background:transparent; color:#c0392b; border:1px solid #c0392b;}
.conv-dica{font-size:11.5px; opacity:.7;}

/* 21/09/2026: visualizador de foto/vídeo/PDF do WhatsApp SEM sair do app
   (ver abrirLightboxMidia em app.js) -- resolve o link preso na webview
   do PWA instalado, sem nenhum X pra fechar. */
.lightbox-midia{
  position:fixed; inset:0; z-index:60;
  background:rgba(10,10,16,.94);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.lightbox-midia.hidden{display:none;}
.lightbox-midia-fechar{
  position:fixed; top:14px; right:14px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.16); border:none; color:#fff;
  font-size:20px; line-height:1; cursor:pointer; z-index:61;
}
.lightbox-midia-conteudo{
  max-width:100%; max-height:100%;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-midia-conteudo img, .lightbox-midia-conteudo video{
  max-width:100%; max-height:calc(100vh - 48px);
  border-radius:6px; display:block;
}
.lightbox-midia-conteudo iframe{
  width:min(92vw, 800px); height:calc(100vh - 60px);
  border:none; border-radius:6px; background:#fff;
}