@charset "UTF-8";
/* ============================================================
   Portal Vanitelli - sistema de design compartilhado.
   Cabecalho em ASCII puro DE PROPOSITO: em producao o parser do
   navegador chegou a descartar a primeira regra do arquivo (o
   reset de box-sizing), deixando inputs transbordando sobre os
   vizinhos. Nada de acento/travessao antes da primeira regra.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { box-sizing: border-box; }

/* hidden tem que vencer qualquer display: das classes (.form-grid-3 etc.);
   sem isso, bloco escondido com display:grid continuava aparecendo */
[hidden]{ display:none !important; }

:root {
  color-scheme: light;
  --navy-900:#0E1220; --navy-800:#141A2C; --navy-700:#1C2338; --navy-600:#2A3248;
  --green:#76B82A; --green-dark:#5C951C; --green-soft:#EFF8E3;

  --surface-0:#F3F5F8; --surface-1:#F7F8FB; --surface-2:#FFFFFF;
  --text-primary:#131829; --text-secondary:#59607A; --text-muted:#8B92A8;
  --border:#E7E9EF; --border-strong:#D6DAE4;
  --border-accent:var(--green); --text-accent:var(--green-dark);

  --radius:10px; --radius-sm:7px; --radius-lg:14px; --radius-xl:18px;
  --shadow-xs:0 1px 2px rgba(17,24,39,.05);
  --shadow-sm:0 1px 3px rgba(17,24,39,.07), 0 1px 2px rgba(17,24,39,.04);
  --shadow-md:0 6px 18px rgba(17,24,39,.08);
  --shadow-lg:0 24px 60px rgba(15,20,35,.22);
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* --- superfície de vidro (usada nos formulários e painéis) ---
     O efeito depende de existir algo colorido atrás: ver o gradiente
     ambiente aplicado no body logo abaixo. */
  --vidro-fundo: linear-gradient(158deg, rgba(255,255,255,.88) 0%, rgba(247,252,241,.78) 55%, rgba(238,248,227,.72) 100%);
  --vidro-borda: rgba(255,255,255,.75);
  --vidro-borda-verde: rgba(118,184,42,.22);
  --vidro-sombra: 0 12px 32px rgba(24,52,16,.09), 0 2px 8px rgba(24,52,16,.05);
  --vidro-brilho: inset 0 1px 0 rgba(255,255,255,.85);
  --campo-fundo: rgba(255,255,255,.72);
  --campo-fundo-foco: rgba(255,255,255,.96);
}

html, body {
  background:var(--surface-0); color:var(--text-primary);
  font-family:var(--font-sans); margin:0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Ambiente: manchas suaves de verde da marca por trás de tudo. É o que dá
   profundidade ao vidro fosco — sem isso o efeito não aparece. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 520px at 12% -6%, rgba(118,184,42,.16), transparent 62%),
    radial-gradient(680px 460px at 96% 8%, rgba(118,184,42,.11), transparent 60%),
    radial-gradient(900px 620px at 50% 108%, rgba(24,95,165,.08), transparent 62%),
    linear-gradient(180deg, #F4F7F1 0%, #F2F5F8 48%, #F4F6F2 100%);
}
/* Fundo animado: bandas claras que atravessam a tela devagar, desenhadas
   em WebGL por initFundoAnimado() (portal.js). Fica ACIMA do gradiente
   estático acima e ABAIXO de todo o conteúdo. Se o navegador não tiver
   WebGL, o canvas nem é criado e o gradiente continua valendo sozinho. */
#vnt-fundo{
  position:fixed; inset:0; width:100%; height:100%; display:block;
  z-index:-1; pointer-events:none;
  opacity:0; transition:opacity .7s ease;
}
#vnt-fundo.visivel{ opacity:1; }
@media print{ #vnt-fundo{ display:none; } }

body{ font-size:14px; line-height:1.5; }
a{ color:var(--text-accent); }

/* ---------- shell ---------- */
.shell{ display:flex; align-items:flex-start; min-height:100vh; }
#sidebar{
  width:290px; flex-shrink:0; align-self:stretch;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
  background:linear-gradient(175deg,#141A2C 0%,#1A2137 55%,#151B2E 100%);
  padding:22px 14px 20px; color:#fff;
}
#sidebar::-webkit-scrollbar{ width:6px; }
#sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }
/* O respiro de cima (84px) inclui os 58px que a barra de busca + sino
   ocupavam antes de sair do layout em 05/08/2026 (38px de altura + 20px
   de margem). Sem isso o conteúdo de toda página cola no topo. */
.main{ flex:1; min-width:0; padding:84px 30px 64px; }
.main-inner{ max-width:1200px; margin:0 auto; }
/* tela que precisa da página toda (projeto aberto em página inteira) */
.main-inner.largura-total{ max-width:none; }
/* Página com barra de abas no topo (17/09/2026, pedido do Fred: "o espaço
   do topo até os botões está muito grande"). Os 84px acima existem para
   compensar a barra de busca/sino que saiu do layout — mas quando a
   PRIMEIRA coisa da página já é a barra de abas, esse respiro é sobra: a
   própria aba já dá o ar de que a página precisa. Só entra quando a
   página tem `.wa-abas-grupo`; as demais continuam com os 84px. */
.main:has(> .main-inner > .wa-abas-grupo){ padding-top:24px; }

.brandmark{ display:flex; align-items:center; padding:4px 10px 0; margin-bottom:22px; }
.brandmark img{ width:100%; max-width:178px; height:auto; display:block; }
.side-label{
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.38); padding:0 10px; margin:0 0 8px;
}
.side-gap{ height:18px; }

/* Alteração do Portal + Configurações, grudados no pé da barra
   (2026-08-12, 2ª rodada): o bloco inteiro que empurra pro fundo, não
   cada botão sozinho — senão sobra vão entre os dois. */
.side-rodape{ margin-top:auto; display:flex; flex-direction:column; }
.side-rodape .navitem{ margin-bottom:3px; }

/* botão "Configurações" no pé da barra (referência: painel do Claude) */
.side-config{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border-radius:var(--radius); cursor:pointer;
  background:transparent; border:1px solid transparent; font-family:inherit;
  font-size:13.5px; font-weight:500; color:rgba(255,255,255,.72); text-align:left;
  box-shadow:none;
}
.side-config:hover{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.1); }
.side-config-ico{
  width:26px; height:26px; border-radius:7px; flex-shrink:0; display:block;
  background:rgba(255,255,255,.08); padding:3px;
}
.side-config > span{ flex:1; min-width:0; }
.side-config-eng{ flex-shrink:0; opacity:.55; }
.side-config:hover .side-config-eng{ opacity:1; }

/* ---------- painel de Configurações (popup central) ---------- */
.cfg-overlay{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  background:rgba(12,16,28,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:24px; animation:cfg-fade .13s ease;
}
.cfg-overlay[hidden]{ display:none; }
@keyframes cfg-fade{ from{ opacity:0 } to{ opacity:1 } }
.cfg-dialog{
  position:relative; display:flex; width:100%; max-width:960px; height:min(620px, 88vh);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-xl);
  box-shadow:0 30px 80px rgba(12,16,28,.4); overflow:hidden;
  animation:cfg-sobe .16s ease;
}
@keyframes cfg-sobe{ from{ opacity:0; transform:translateY(8px) scale(.99) } to{ opacity:1; transform:none } }
.cfg-fechar{
  position:absolute; top:12px; right:14px; z-index:2; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0;
  background:transparent; border:0; box-shadow:none; color:var(--text-muted); font-size:15px; cursor:pointer;
}
.cfg-fechar:hover{ background:rgba(19,24,41,.07); color:var(--text-primary); }

.cfg-nav{
  width:246px; flex-shrink:0; background:var(--surface-1); border-right:1px solid var(--border);
  padding:16px 10px 12px; overflow-y:auto; display:flex; flex-direction:column;
}
.cfg-nav-titulo{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); padding:0 10px; margin-bottom:10px;
}
.cfg-nav-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 10px; margin-bottom:2px; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid transparent; box-shadow:none;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--text-secondary);
}
.cfg-nav-item:hover{ background:var(--surface-2); color:var(--text-primary); }
.cfg-nav-item.active{
  background:var(--surface-2); border-color:var(--border); color:var(--text-primary);
  font-weight:650; box-shadow:var(--shadow-xs);
}
.cfg-ico{ flex-shrink:0; width:18px; display:inline-flex; align-items:center; justify-content:center; color:#8A93A8; }
.cfg-nav-item:hover .cfg-ico{ color:var(--text-secondary); }
.cfg-nav-item.active .cfg-ico{ color:var(--text-primary); }
.cfg-nav-rodape{ margin-top:auto; padding:10px 10px 0; border-top:1px solid var(--border); }
.cfg-sair{ font-size:12.5px; color:#B4322F; text-decoration:none; font-weight:600; }
.cfg-sair:hover{ text-decoration:underline; }

.cfg-conteudo{ flex:1; min-width:0; overflow-y:auto; padding:26px 30px 30px; }
.cfg-secao{ display:none; }
.cfg-secao.active{ display:block; animation:cfg-fade .12s ease; }
.cfg-secao h2{ font-size:19px; font-weight:700; letter-spacing:-.02em; margin:0 0 6px; }
.cfg-h3{ font-size:13px; font-weight:700; letter-spacing:.02em; margin:24px 0 12px; padding-top:18px; border-top:1px solid var(--border); }

.cfg-atalho{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:8px;
}
.cfg-atalho:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); background:var(--surface-2); }
.cfg-atalho-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cfg-atalho-txt b{ font-size:13.5px; font-weight:650; }
.cfg-atalho-txt small{ font-size:11.5px; color:var(--text-muted); line-height:1.45; }
.cfg-atalho-seta{ color:var(--text-muted); font-size:18px; flex-shrink:0; }

/* ---- Configurações de mídia editadas dentro do popup (2026-08-11) ----
   Uma linha por registro, tudo editável de uma vez. Substituiu os quatro
   atalhos que levavam para paginas separadas. */
.cfgm{ display:flex; flex-direction:column; gap:14px; }
.cfgm-abas{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:0; }
.cfgm-aba{
  border:0; background:none; cursor:pointer; font:inherit;
  font-size:12px; font-weight:650; letter-spacing:.03em; color:var(--text-muted);
  padding:8px 12px; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.cfgm-aba:hover{ color:var(--text-primary); }
.cfgm-aba.active{ color:var(--text-accent); border-bottom-color:var(--green); }

.cfgm-aviso{
  font-size:12px; font-weight:600; line-height:1.45;
  padding:9px 12px; border-radius:var(--radius);
  background:var(--green-soft); color:var(--green-dark); border:1px solid #D3E9B5;
}
.cfgm-aviso.erro{ background:#FDECEC; color:#96262A; border-color:#F0C8C8; }

.cfgm-corpo{ min-height:60px; }
.cfgm-carregando{ opacity:.45; pointer-events:none; }

.cfgm-tabela{ width:100%; border-collapse:collapse; }
.cfgm-tabela th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  color:var(--text-muted); padding:0 8px 6px; border-bottom:1px solid var(--border);
}
.cfgm-tabela td{ padding:4px 8px 4px 0; vertical-align:middle; }
.cfgm-tabela td:last-child{ padding-right:0; }
.cfgm-tabela input[type="text"],
.cfgm-tabela input[type="number"],
.cfgm-tabela select{ width:100%; height:34px; font-size:12.5px; }
.cfgm-th-numero, .cfgm-th-cor{ width:74px; }
.cfgm-th-status{ width:104px; }
.cfgm-th-x{ width:30px; }
.cfgm-td-x{ text-align:right; }
.cfgm-cor{ margin:0; }
.cfgm-nova input[type="text"]{ border-color:var(--green); }

.cfgm-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; line-height:1;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-1);
  color:var(--text-muted); font-size:12px; cursor:pointer;
}
.cfgm-x:hover{ border-color:#E0BDBD; background:#FDECEC; color:#B4322F; }

.cfgm-add{
  align-self:flex-start; margin-top:10px;
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  background:none; cursor:pointer; font:inherit;
  font-size:11.5px; font-weight:650; color:var(--text-secondary); padding:7px 13px;
}
.cfgm-add:hover{ border-color:var(--green); color:var(--text-accent); }
.cfgm-rodape{ display:flex; justify-content:flex-end; margin-top:16px; }
.cfgm-vazio{ font-size:12.5px; color:var(--text-muted); padding:14px 0; }

.cfgm-metas{ display:flex; flex-direction:column; gap:14px; }
.cfgm-meta-marca{ border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
.cfgm-meta-nome{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; margin-bottom:10px; }
.cfgm-bola{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cfgm-meta-grade{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px; }
.cfgm-meta-campo{ display:flex; flex-direction:column; gap:4px; }
.cfgm-meta-campo > span{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--text-secondary); }
.cfgm-meta-campo input{ height:34px; font-size:12.5px; }

/* painéis sem abas: histórico, backup, upload em massa, integrações */
.cfgm-h3{
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  margin:20px 0 10px; padding-top:14px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:7px;
}
.cfgm-corpo > .cfgm-h3:first-child{ margin-top:0; padding-top:0; border-top:0; }
.cfgm-nota{ font-size:11.5px; color:var(--text-muted); line-height:1.5; margin:8px 0 0; }
.cfgm-filtros{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.cfgm-filtros select, .cfgm-filtros input[type="text"]{ height:34px; font-size:12.5px; }
.cfgm-filtros input[type="text"]{ min-width:190px; }
.cfgm-linha-acao{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0; }
.cfgm-linha-acao .cfgm-nota{ margin:0; flex:1; min-width:180px; }
.cfgm-linha-acao select, .cfgm-linha-acao input[type="file"]{ height:34px; font-size:12.5px; }

/* a tabela pode ser larga (a prévia da planilha tem 20 colunas): rola
   dentro do painel, nunca empurra o popup */
.cfgm-rolagem{ overflow-x:auto; max-height:420px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); }
.cfgm-tbl{ font-size:12px; margin:0; }
.cfgm-tbl th{ position:sticky; top:0; z-index:1; background:var(--surface-2); }
.cfgm-tbl td, .cfgm-tbl th{ padding:7px 10px; white-space:nowrap; }

.cfg-dados{ display:flex; flex-direction:column; gap:1px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.cfg-dados > div{ display:flex; gap:14px; padding:10px 14px; background:var(--surface-1); font-size:13px; }
.cfg-dados > div:nth-child(even){ background:var(--surface-2); }
.cfg-dados span{ width:150px; flex-shrink:0; color:var(--text-muted); }
.cfg-dados b{ font-weight:600; word-break:break-word; }

.cfg-form-senha{ display:flex; flex-direction:column; gap:12px; max-width:340px; }
.cfg-campo{ display:flex; flex-direction:column; gap:5px; }
.cfg-campo label{ font-size:12px; font-weight:600; color:var(--text-secondary); }
.cfg-campo label small{ font-weight:500; color:var(--text-muted); }
.cfg-campo input{ box-sizing:border-box; width:100%; height:38px; }
.cfg-nota{
  margin-top:14px; font-size:12px; color:var(--text-secondary); line-height:1.5;
  background:var(--surface-1); border:1px dashed var(--border); border-radius:var(--radius); padding:11px 13px;
}

@media (max-width:820px){
  .cfg-dialog{ flex-direction:column; height:92vh; }
  .cfg-nav{ width:100%; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--border); padding:10px; }
  .cfg-nav-titulo, .cfg-nav-rodape{ display:none; }
  .cfg-nav-item{ white-space:nowrap; width:auto; margin-bottom:0; }
  .cfg-conteudo{ padding:20px; }
  .cfg-dados span{ width:110px; }
}
.side-user{ padding:0 10px 16px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:16px; }
.side-user .nome{ font-size:13.5px; font-weight:600; color:#fff; }
.side-user .cargo{ font-size:11.5px; color:rgba(255,255,255,.5); }
.side-user a{ font-size:11.5px; color:rgba(255,255,255,.55); text-decoration:none; }
.side-user a:hover{ color:#fff; }

/* Menu lateral (2026-08-10): fonte a 80% do que era (13.5px → 10.8px) e
   TODO item do mesmo tamanho — item solto, pai de cascata e filho de
   cascata. O filho era 13px, menor que o pai, e ficava desalinhado.
   `text-transform` explícito aqui: o `body` já manda em maiúscula, mas
   deixar escrito garante o menu mesmo se um dia mexerem na regra geral. */
.navitem,
.navgroup > .navitem-toggle,
.navgroup .subitens .navitem{
  font-size:10.8px; text-transform:uppercase; letter-spacing:.04em;
}
.navitem{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 11px; font-weight:500; line-height:1.2;
  border-radius:var(--radius); border:1px solid transparent; text-decoration:none;
  background:transparent; color:rgba(255,255,255,.66);
  margin-bottom:3px; cursor:pointer; font-family:inherit;
}
.navitem:hover{ background:rgba(255,255,255,.07); color:#fff; }
.navitem.active{
  background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.10);
  color:#fff; font-weight:600; box-shadow:inset 3px 0 0 -1px var(--green);
}
.navitem.disabled{ opacity:.35; cursor:not-allowed; }
.navgroup > .navitem-toggle{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 11px; font-weight:500; background:transparent;
  color:rgba(255,255,255,.66); border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; font-family:inherit;
}
.navgroup > .navitem-toggle:hover{ background:rgba(255,255,255,.07); color:#fff; }
.navgroup .chev{ margin-left:auto; transition:transform .15s ease; }
.navgroup.open .chev{ transform:rotate(90deg); }
.navgroup .subitens{ padding-left:14px; display:none; }
.navgroup.open .subitens{ display:block; }
.navgroup .subitens .navitem{ padding:7px 11px; }

/* ---------- botões ---------- */
button, select, input[type=submit]{
  box-sizing:border-box;
  font-family:inherit; font-size:13.5px; font-weight:550; color:var(--text-primary);
  background:rgba(255,255,255,.82); border:1px solid rgba(19,24,41,.12);
  border-radius:var(--radius); padding:9px 14px; cursor:pointer;
  box-shadow:0 1px 2px rgba(19,24,41,.05);
  transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
button:hover{ background:#fff; border-color:rgba(118,184,42,.5); box-shadow:0 3px 10px rgba(24,52,16,.10); }
button:active{ transform:translateY(1px); }
/* input de arquivo (Escolher arquivo/arquivos): o botao nativo do
   sistema operacional vira o mesmo padrao dos <button> do Portal, em
   toda pagina que tiver esse campo — regra global, sem repetir por tela. */
input[type=file]{ font-family:inherit; font-size:12.5px; color:var(--text-secondary); }
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  font-family:inherit; font-size:13px; font-weight:550; color:var(--text-primary);
  background:rgba(255,255,255,.82); border:1px solid rgba(19,24,41,.12);
  border-radius:var(--radius); padding:8px 14px; cursor:pointer;
  box-shadow:0 1px 2px rgba(19,24,41,.05); margin-right:10px;
  transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover{
  background:#fff; border-color:rgba(118,184,42,.5); box-shadow:0 3px 10px rgba(24,52,16,.10);
}
/* Link com cara de botao (2026-08-10): herdava a fonte do body e saia
   MAIOR que os <button> ao lado — a mesma barra tinha dois tamanhos.
   Agora sao o mesmo tamanho e o mesmo peso. */
a.btn{
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:550; line-height:1.2;
}
/* A caixa do botão (padding, canto, borda, fundo) vinha só da regra de
   <button> acima — link com cara de botão ficava sem nada, e cada tela
   remendava com um style="padding:..." na mão. Sem o remendo, o
   .btn-primary saía como uma barra escura colada no texto (foi o que o
   Matteo viu no Backup). Agora o padrão está aqui. (2026-08-11)

   A lista tem TODOS os modificadores, não só `.btn`, de propósito: 11
   links pelo Portal traziam só `btn-sm btn-quiet` (sem a classe base) e
   saíam como texto sublinhado ao lado do botão vermelho de EXCLUIR, nas
   listas de Clientes, Empresas, Produtos, Níveis de acesso, Contratos e
   Agendas. Aqueles 11 foram corrigidos na origem; a lista aqui é a rede
   de segurança para o próximo que esquecer o `.btn`.

   Vai dentro de :where() de propósito: assim vale ZERO na disputa do CSS
   e qualquer modificador continua ganhando — .btn-quiet segue sem fundo,
   .btn-sm segue mais apertado, e os style="" que já existem mandam. */
:where(a.btn, a.btn-sm, a.btn-primary, a.btn-quiet, a.btn-danger, a.btn-accent, a.btn-google){
  box-sizing:border-box; display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; line-height:1.2; padding:9px 14px;
  border:1px solid rgba(19,24,41,.12); border-radius:var(--radius);
  background:rgba(255,255,255,.82); box-shadow:0 1px 2px rgba(19,24,41,.05);
}
a.btn.btn-sm{ font-size:12.5px; }
/* O <select> nao herda caixa alta — isso agora e resolvido de uma vez
   para toda a familia de campo e botao, la no fim do arquivo. Aqui fica
   so a excecao: select de e-mail continua minusculo. */
select[name*="email" i], select[name*="mail" i]{ text-transform:none; }
.btn-primary{
  background:linear-gradient(160deg, var(--navy-700), var(--navy-900));
  color:#fff; border-color:var(--navy-800); font-weight:600;
  box-shadow:0 4px 14px rgba(14,18,32,.22);
}
.btn-primary:hover{ background:linear-gradient(160deg, #232C46, var(--navy-800)); border-color:var(--navy-700); color:#fff; box-shadow:0 6px 18px rgba(14,18,32,.28); }
.btn-accent{
  background:linear-gradient(160deg, #8CCB36, var(--green-dark));
  color:#fff; border-color:var(--green-dark); font-weight:600;
  box-shadow:0 4px 14px rgba(92,149,28,.28);
}
.btn-accent:hover{ background:linear-gradient(160deg, var(--green), #4E8117); border-color:var(--green-dark); color:#fff; box-shadow:0 6px 18px rgba(92,149,28,.34); }
/* botão de conectar com Google: branco com borda, como a marca recomenda */
.btn-google{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#3C4043; border:1px solid #DADCE0;
  border-radius:var(--radius); padding:10px 18px; font-weight:600; font-size:13.5px;
  text-decoration:none; box-shadow:0 1px 3px rgba(60,64,67,.14);
  transition:background-color .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn-google:hover{ background:#F8F9FA; border-color:#C6C9CE; box-shadow:0 2px 8px rgba(60,64,67,.2); color:#202124; }

.btn-quiet{ background:transparent; border-color:transparent; color:var(--text-secondary); }
.btn-quiet:hover{ background:var(--surface-1); border-color:var(--border); color:var(--text-primary); }
/* EXCLUIR, em todo o Portal (2026-08-10): vermelho cheio, escrita branca
   em caixa alta. Era transparente com texto vermelho — sumia no meio dos
   outros botões e cada tela parecia ter um botão diferente. Como as ~39
   ocorrências em 21 arquivos já usavam .btn-danger, mexer aqui padroniza
   Projetos, Financeiro, Clientes, Contratos, Mídia e Agenda de uma vez.
   Nos rodapés (.form-actions / .fm-acoes) ele fica na ponta ESQUERDA e o
   Salvar na direita, separados pelo .espaco — para o dedo não escorregar
   de um para o outro. A confirmação de cada exclusão continua no PHP/JS. */
.btn-danger{
  background:#B4322F; border-color:#B4322F; color:#fff;
  text-transform:uppercase; letter-spacing:.05em; font-weight:650;
  box-shadow:0 2px 8px rgba(180,50,47,.28);
}
.btn-danger:hover{
  background:#8F2523; border-color:#8F2523; color:#fff;
  box-shadow:0 4px 12px rgba(180,50,47,.4);
}
/* Setas de reordenar pergunta do questionário (2026-09-04): a primeira
   pergunta não sobe, a última não desce — `.btn-quiet` sozinho não
   escurece o suficiente quando `disabled`, então esta regra garante que
   dá para ver que o botão não faz nada ali. */
[data-dm-subir]:disabled, [data-dm-descer]:disabled{
  opacity:.35; cursor:default; background:transparent;
}
/* VER PORTAL (2026-08-25, pedido do Fred): o par verde/cinza do .btn-danger.
   Mesmo corpo, mesma caixa alta — muda só a cor, porque é o que separa
   "tem portal" de "não tem" na lista de Clientes. O cinza nasce `disabled`
   no HTML: botão que parece clicável e não faz nada confunde mais que
   botão apagado. */
.btn-verde{
  background:var(--green-dark); border-color:var(--green-dark); color:#fff;
  text-transform:uppercase; letter-spacing:.05em; font-weight:650;
  box-shadow:0 2px 8px rgba(92,149,28,.28);
}
.btn-verde:hover{
  background:#4E8117; border-color:#4E8117; color:#fff;
  box-shadow:0 4px 12px rgba(92,149,28,.4);
}
.btn-cinza{
  background:#9AA3AF; border-color:#9AA3AF; color:#fff;
  text-transform:uppercase; letter-spacing:.05em; font-weight:650;
  cursor:default; box-shadow:none; opacity:.75;
}
.btn-cinza:hover{ background:#9AA3AF; border-color:#9AA3AF; color:#fff; }
/* Botão cinza CLICÁVEL, para ações reais (09/09/2026 — «Enviar para
   cliente» do quadro Demandas). ⚠️ Não reaproveita `.btn-cinza`: aquele já
   significa "não dá" (cursor:default, sem hover, opacidade baixa) — usar a
   mesma classe aqui trocaria esse significado por uma terceira ideia sem
   querer, o mesmo risco que o comentário abaixo (`.btn-portal-criar`) já
   evitou uma vez. Mesma cor sólida do `.btn-cinza`, mas reagindo ao hover
   como um botão que funciona de verdade. */
.btn-cinza-acao{
  background:#9AA3AF; border-color:#9AA3AF; color:#fff;
  text-transform:uppercase; letter-spacing:.05em; font-weight:650;
}
.btn-cinza-acao:hover{ background:#7D8794; border-color:#7D8794; color:#fff; }
/* "Criar portal" (2026-08-31). Primeira versão saiu branca de borda cinza e
   o Fred cortou na hora: viraram TRÊS aparências para DUAS ideias — verde
   "tem", branco "criar", cinza "não dá". Agora é o mesmo cinza dos outros,
   e o que o separa do parado ao lado é estar aceso: opacidade cheia, seta
   de mão e um hover que já mostra o verde em que ele vai virar. O parado
   continua com a opacidade baixa do .btn-cinza. */
/* ⚠️ NÃO chamar de `.btn-criar`: esse nome já é do botão "Criar" da Agenda
   (o branco arredondado, lá pela linha 2970), que vem DEPOIS e ganhava —
   o botão saía branco e 16px mais alto que os vizinhos. Custou uma
   publicação para descobrir. Nome próprio resolve. (2026-08-31) */
.btn-portal-criar{
  background:#9AA3AF; border-color:#9AA3AF; color:#fff;
  text-transform:uppercase; letter-spacing:.05em; font-weight:650; cursor:pointer;
}
.btn-portal-criar:hover{
  background:var(--green-dark); border-color:var(--green-dark); color:#fff;
  box-shadow:0 4px 12px rgba(92,149,28,.4);
}

/* Coluna do portal: os três estados na MESMA largura. Botões de tamanhos
   diferentes deixavam a coluna serrilhada, com a borda dançando de linha
   em linha — e "Criar portal" é mais longo que "Ver portal", então sem
   isto nunca alinhariam sozinhos. (2026-08-31, pedido do Fred) */
.col-portal .btn-sm{ min-width:132px; justify-content:center; }

/* Etapas na tela de editar contrato: lista de leitura, uma linha por etapa,
   na ordem do cronograma. (2026-08-31) */
.ct-et-lista{ display:flex; flex-direction:column; gap:6px; }
.ct-et-linha{
  display:flex; align-items:center; gap:12px; padding:9px 12px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-1);
}
.ct-et-num{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--surface-0);
  color:var(--text-secondary); font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.ct-et-nome{ flex:1 1 auto; min-width:0; font-weight:600; font-size:13.5px; }
.ct-et-meta{ flex:0 0 auto; font-size:11.5px; color:var(--text-muted); }
.ct-et-status{
  flex:0 0 auto; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--surface-0); color:var(--text-secondary); white-space:nowrap;
}
/* etapa concluída: some do primeiro plano sem sumir da lista */
.ct-et-linha.feita .ct-et-nome{ color:var(--text-secondary); }
.ct-et-linha.feita .ct-et-status{ background:var(--green-soft); color:var(--green-dark); }
.ct-et-pe{ display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; }
.ct-et-pe .field-hint{ flex:1 1 260px; }

/* ---- Painel de Vendas (2026-08-31) ----------------------------------
   Abas por mês. O Fred pediu abas em vez de uma caixa por mês empilhada:
   "vou clicando nas abas, acho que fica melhor". */
.vd-abas{
  display:flex; gap:2px; flex-wrap:wrap; margin:14px 0 0;
  border-bottom:1px solid var(--border);
}
.vd-aba{
  padding:9px 16px; font-size:13px; font-weight:600; text-decoration:none;
  color:var(--text-secondary); border:1px solid transparent; border-bottom:none;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0; margin-bottom:-1px;
}
.vd-aba:hover{ color:var(--text-primary); background:var(--surface-1); }
/* a aba aberta "abre" na tabela: mesma cor de fundo e sem a linha embaixo */
.vd-aba.ativa{
  color:var(--green-dark); background:var(--surface-2);
  border-color:var(--border); border-bottom:1px solid var(--surface-2);
}

/* campos que se editam na própria linha */
/* ⚠️ `.vd-vend` era um <select> com uma caixa de texto embaixo. Virou UM
   campo só com lista de sugestões (2026-08-31): dois controles empilhados
   desalinhavam a linha e obrigavam a escolher "Outro nome" antes de poder
   escrever. */
.vd-vend{ max-width:180px; }
/* quem é da equipe fica marcado: dá para ver de relance o que é login de
   verdade e o que é só um nome escrito */
.vd-vend-equipe{ border-color:var(--green); }
.vd-pct{ width:58px; text-align:right; }

/* Valor da venda, editável (2026-09-14, bug real + pedido do Fred: "eu
   posso colocar também o valor eu mesmo se eu quiser"). Escolher DE QUAL
   contrato é a venda ficou para o pop-up do "Fechou?" (2026-09-15) — aqui
   sobra só o ajuste manual. */
.vd-valor{ width:110px; text-align:right; }

/* ---- meta do mês ---- */
.vd-meta{
  margin:14px 0 0; padding:12px 16px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius);
}
.vd-meta.batida{ border-color:var(--green); background:var(--green-soft); }
.vd-meta-linha{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vd-meta-linha .espaco{ flex:1; }
.vd-meta-rot{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-secondary);
}
.vd-meta-campo{ display:inline-flex; align-items:center; gap:5px; font-size:13px; }
.vd-meta-inp{ width:130px; text-align:right; }
.vd-meta-num{ font-size:12.5px; color:var(--text-secondary); }
.vd-meta-num b{ color:var(--text-primary); font-size:14px; }
.vd-meta-ok{ color:var(--green-dark); }
.vd-meta-trilho{
  height:7px; border-radius:999px; background:var(--surface-0);
  overflow:hidden; margin-top:10px;
}
.vd-meta-trilho i{ display:block; height:100%; background:var(--green); border-radius:999px; }
.vd-meta-pct{ font-size:11.5px; color:var(--text-muted); margin-top:4px; }
.btn-sm{ padding:5px 10px; font-size:12.5px; }

/* ---------- superfícies ---------- */
.card{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.panel{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:16px; }
.page-head{ margin-bottom:20px; }
.page-title{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0 0 3px; }
/* Subtitulo abaixo do titulo (2026-08-11, pedidos do Fred e do Matteo):
   - fonte 30% menor (13.5px -> 9.5px);
   - `max-width` de 70ch saiu: a caixa estica ate alinhar com os blocos
     de baixo, em vez de quebrar antes deles.
   Era a excecao a caixa alta enquanto guardava texto explicativo; hoje so
   sobrou dado (nome do cliente, numero do contrato), entao entrou na
   regra geral junto com o resto (2026-08-11). */
.page-sub{
  font-size:9.5px; color:var(--text-secondary); margin:0;
  max-width:none; line-height:1.5;
}
.section-title{ font-size:14.5px; font-weight:600; margin-bottom:5px; }
.section-sub{ font-size:12.5px; color:var(--text-secondary); margin-bottom:12px; }

/* ---------- formulários ---------- */
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=tel], input[type=url], textarea{
  /* box-sizing explicito: NAO depender do reset universal — se ele for
     descartado pelo parser (ja aconteceu em producao), o padding somava à
     largura e o campo invadia o vizinho do grid */
  box-sizing:border-box;
  font-family:inherit; font-size:13.5px; color:var(--text-primary);
  background:var(--campo-fundo);
  border:1px solid rgba(19,24,41,.10); border-radius:var(--radius);
  padding:0 13px; height:44px; width:100%;
  box-shadow:inset 0 1px 2px rgba(19,24,41,.04);
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
}
textarea{ resize:vertical; min-height:104px; height:auto; padding:12px 13px; line-height:1.6; }

/* selects precisam de width:100% e altura igual aos inputs, senão ficam
   minúsculos ao lado dos campos de texto e o formulário parece quebrado */
.field select, select.full{
  box-sizing:border-box;
  width:100%; height:44px; padding:0 38px 0 13px;
  font-family:inherit; font-size:13.5px; font-weight:400; color:var(--text-primary);
  background-color:var(--campo-fundo); border:1px solid rgba(19,24,41,.10);
  border-radius:var(--radius); cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(19,24,41,.04);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2359607A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field select:hover, select.full:hover,
input:hover, textarea:hover{ border-color:rgba(118,184,42,.45); background-color:var(--campo-fundo-foco); }
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--green);
  background-color:var(--campo-fundo-foco);
  box-shadow:0 0 0 4px rgba(118,184,42,.15), inset 0 1px 2px rgba(19,24,41,.03);
}
input::placeholder, textarea::placeholder{ color:#A3AAB8; }
input[type=checkbox], input[type=radio]{ accent-color:var(--green); width:16px; height:16px; cursor:pointer; }
input[type=color]{
  height:40px; width:56px; padding:4px; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2);
}
input[type=color]:hover{ border-color:#C4C9D6; }

label.field-label{
  display:block; font-size:11.5px; font-weight:650; letter-spacing:.03em;
  color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase;
}
label.field-label .obrig{ color:#C1443F; margin-left:3px; }
.field{ margin-bottom:22px; }
.field-hint{ font-size:11.5px; color:var(--text-muted); margin-top:7px; line-height:1.5; }

/* barra de ações do formulário, também em vidro */
.form-actions{
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(246,251,240,.86));
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--vidro-borda);
  border-radius:var(--radius-lg);
  box-shadow:0 -4px 24px rgba(24,52,16,.08), var(--vidro-brilho);
}

/* gaps generosos: nenhum campo encosta no vizinho */
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; }
.form-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px 20px; }
.form-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px 20px; }
.form-grid-2 > .field, .form-grid-3 > .field, .form-grid-4 > .field{ margin-bottom:0; }
.form-grid-2, .form-grid-3, .form-grid-4{ margin-bottom:22px; }

/* linha de "contato adicional" do cadastro de clientes: nome/tipo/e-mail/
   telefone/remover lado a lado no desktop, empilhados no mobile (ver
   @media abaixo) — antes isso era um grid-template-columns inline, que
   nenhuma media query conseguia sobrescrever. */
.linha-contato-adicional{
  display:grid; grid-template-columns:1.2fr .8fr 1fr 1fr auto;
  align-items:end; gap:8px; margin-bottom:8px;
}
.linha-contato-adicional > .field{ margin-bottom:0; }

/* Seções do formulário em VIDRO FOSCO com verde sutil da marca.
   O blur pega o gradiente ambiente do body::before, então o cartão parece
   um painel de vidro sobre a página em vez de um retângulo branco chapado. */
.form-section{
  position:relative;
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--vidro-borda);
  border-radius:var(--radius-xl);
  box-shadow:var(--vidro-sombra), var(--vidro-brilho);
  padding:28px 30px; margin-bottom:22px;
  transition:box-shadow .25s ease, transform .25s ease;
}
/* fio de luz verde no topo do vidro */
.form-section::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:1px solid transparent;
  background:linear-gradient(180deg, rgba(118,184,42,.30), rgba(118,184,42,0) 42%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.form-section:hover{ box-shadow:0 16px 40px rgba(24,52,16,.11), 0 3px 10px rgba(24,52,16,.06), var(--vidro-brilho); }

.form-section > h3{
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-dark); margin:0 0 4px;
  display:flex; align-items:center; gap:9px;
}
/* marcador verde antes do título da seção */
.form-section > h3::before{
  content:""; width:4px; height:15px; border-radius:3px; flex-shrink:0;
  background:linear-gradient(180deg, var(--green), var(--green-dark));
}
.form-section > .desc{ font-size:12.5px; color:var(--text-secondary); margin:0 0 22px; }
.form-section > h3 + .form-grid-2,
.form-section > h3 + .form-grid-3,
.form-section > h3 + .form-grid-4,
.form-section > h3 + .field{ margin-top:22px; }
.form-section > .field:last-child,
.form-section > .form-grid-2:last-child,
.form-section > .form-grid-3:last-child,
.form-section > .form-grid-4:last-child{ margin-bottom:0; }

/* painéis e cartões seguem a mesma linguagem de vidro */
.panel{
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--vidro-borda);
  border-radius:var(--radius-lg);
  box-shadow:var(--vidro-sombra), var(--vidro-brilho);
  padding:20px;
}

/* barra de ações fixa no rodapé do formulário */
.form-actions{
  position:sticky; bottom:0; z-index:5;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:14px 18px; margin-top:4px;
}
.form-actions .espaco{ flex:1; }
.form-actions .btn-primary, .form-actions button[type=submit]{ padding:9px 20px; }

.form-error{ font-size:12px; color:#B4322F; margin-top:5px; }
.campo-invalido{ border-color:#D9534F !important; box-shadow:0 0 0 3px rgba(217,83,79,.14) !important; }

/* linha de filtros acima das tabelas */
.filtros{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.filtros input[type=text], .filtros input[type=search]{ width:auto; min-width:240px; flex:0 1 320px; }
.filtros select{
  width:auto; min-width:170px; height:40px; padding:0 34px 0 11px;
  font-family:inherit; font-size:13.5px; color:var(--text-primary);
  background-color:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius); cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2359607A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}

/* Filtro de VÁRIAS escolhas (2026-08-27, pedido do Fred no Painel de
   Leads). Parece uma caixa de escolha comum, mas abre uma listinha de
   marcações — dá para pedir duas ou três etapas de uma vez. É um
   <details>/<summary>, então abre e fecha sem depender de JavaScript. */
.fmulti{ position:relative; }
.fmulti > summary{
  list-style:none; display:flex; align-items:center;
  width:auto; min-width:190px; height:40px; padding:0 34px 0 11px;
  font-family:inherit; font-size:13.5px; color:var(--text-primary);
  background-color:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius); cursor:pointer; white-space:nowrap;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2359607A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
/* o triangulinho padrão do <details> apareceria junto com a seta */
.fmulti > summary::-webkit-details-marker{ display:none; }
.fmulti > summary::marker{ content:''; }
.fmulti[open] > summary{ border-color:var(--green); }
.fmulti-cx{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:252px;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius); box-shadow:var(--shadow-md); padding:10px;
}
.fmulti-tit{ font-size:11px; letter-spacing:.04em; color:var(--text-muted); margin:2px 4px 8px; }
.fmulti-op{
  display:flex; align-items:center; gap:8px; padding:6px;
  border-radius:var(--radius-sm); cursor:pointer; font-size:13.5px; white-space:nowrap;
}
.fmulti-op:hover{ background:var(--surface-0); }
.fmulti-bolinha{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.fmulti-rod{
  display:flex; align-items:center; gap:10px;
  margin-top:8px; padding-top:9px; border-top:1px solid var(--border);
}
.fmulti-dica{ font-size:11.5px; color:var(--text-muted); white-space:nowrap; }

/* ---------- tabelas ---------- */
.tbl-wrap{
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--vidro-borda); border-radius:var(--radius-lg);
  box-shadow:var(--vidro-sombra), var(--vidro-brilho); overflow:hidden;
}
.tbl thead th{ background:rgba(247,251,243,.9) !important; }
.tbl tbody tr{ transition:background-color .14s ease; }
.tbl tbody tr:hover{ background:rgba(118,184,42,.06) !important; }
.tbl-scroll{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl thead th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted); background:var(--surface-1); padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.tbl tbody td{ padding:11px 14px; border-top:1px solid var(--border); vertical-align:middle; }

/* Tabela DENSA: para a lista que tem muita coluna e ainda leva botões na
   ponta. Em Contratos são 9 colunas + Abrir/Suspender/Excluir, e a
   tabela passava da largura da tela — o EXCLUIR só aparecia rolando para
   o lado (2026-08-11, print do Matteo). */
.tbl.tbl-densa{ font-size:12.5px; }
.tbl.tbl-densa thead th,
.tbl.tbl-densa tbody td{ padding-left:9px; padding-right:9px; }
.tbl.tbl-densa .btn-sm{ padding:4px 9px; font-size:11.5px; }

/* Coluna de botões. Em tela larga eles ficam numa linha só, como sempre;
   quando a tela aperta, quebram em duas linhas em vez de empurrar a
   tabela para fora — linha um pouco mais alta é bem melhor que botão
   cortado, e some a rolagem lateral.

   O ponto de corte (1259px) é onde a tabela deixa de caber com os três
   botões lado a lado: foi medido no navegador, não chutado. */
.tbl-acoes{ text-align:right; white-space:normal; }
.tbl-acoes-caixa{
  display:flex; flex-wrap:nowrap; gap:5px;
  justify-content:flex-end; align-items:center;
}
.tbl-acoes-caixa form{ display:flex; margin:0; }
@media (max-width:1259px){
  .tbl-acoes-caixa{ flex-wrap:wrap; }
}
.tbl tbody tr:hover{ background:var(--surface-1); }
/* Dinheiro NUNCA quebra em duas linhas. Apertando a coluna de Valor em
   Contratos, "R$ 14.184,00" virava "R$" numa linha e "14.184,00" na
   outra (2026-08-11, print do Matteo). Vale para toda coluna numérica do
   Portal, não só a de Contratos: valor partido no meio se lê errado. */
.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Coluna de CONTAGEM (não dinheiro) que deve ficar no meio da célula, não
   na ponta — pedido do Fred em Produtos e Serviços (2026-08-12): a coluna
   "Etapas do fluxo" usava .num (alinha à direita) e o número ficava
   colado no canto. */
.col-centro{ text-align:center; }

.status-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.status-chip .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.badge-ativo{ background:#EAF6DA; color:#3D6B14; } .badge-ativo .dot{ background:#76B82A; }
.badge-inativo{ background:#EEF0F4; color:#4A5169; } .badge-inativo .dot{ background:#98A0B5; }
/* "bloqueado" (2026-09-04): não confundir com inativo — a pessoa some
   do login mas continua nas listas de responsável, então merece uma cor
   própria, nem verde (ainda tem acesso) nem cinza (não sumiu de nada). */
.badge-bloqueado{ background:#FFF3E0; color:#9A5C10; } .badge-bloqueado .dot{ background:#E0A040; }
.badge-prospect{ background:#E4EFFC; color:#1B5698; } .badge-prospect .dot{ background:#3B82D9; }
.badge-bloqueado{ background:#FDEAEA; color:#B22228; } .badge-bloqueado .dot{ background:#D9534F; }
.badge-concluido{ background:#ECEBFD; color:#453BA0; } .badge-concluido .dot{ background:#7A6FE0; }

.empty{
  border:1.5px dashed rgba(118,184,42,.35); border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.7), rgba(244,250,236,.6));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  padding:36px 24px; text-align:center; font-size:13.5px; color:var(--text-muted);
}

/* cards de indicador (stat) também em vidro — compactos (2026-08-04) */
.stat{
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--vidro-borda); border-radius:var(--radius);
  box-shadow:var(--vidro-sombra), var(--vidro-brilho);
  padding:9px 13px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.stat:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(24,52,16,.10), var(--vidro-brilho); }

.alert{
  border-radius:var(--radius); padding:11px 14px; font-size:13px; margin-bottom:16px;
  border:1px solid transparent; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.alert-sucesso{ background:var(--green-soft); color:var(--green-dark); border-color:#D3E9B5; }
.alert-erro{ background:#FDECEC; color:#8F2523; border-color:#F6D6D5; }
.alert-desfazer{ margin-left:auto; }
/* aviso: nao e erro, e coisa que falta preencher (ex.: cronograma sem ancora) */
.alert-aviso{ background:#FDF3DC; color:#7A5A12; border-color:#F0DCA8; }

/* data da conclusao da etapa: aparece so quando se escolhe «Concluido» */
.ct-et-quando{ display:inline-flex; gap:6px; align-items:center; }
.ct-et-quando[hidden]{ display:none; }
.ct-et-quando input[type="date"]{ height:32px; font-size:12.5px; }

/* ================= Projetos: lista em cartões ================= */
.stat-sub{ font-size:10px; color:var(--text-muted); margin-top:0; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wfl-grupo-titulo{
  font-size:13px; font-weight:700; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.04em;
  margin:18px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border);
}
.wfl-grupo-titulo:first-of-type{ margin-top:4px; }
/* UMA LINHA POR PROJETO (2026-08-17, pedido do Fred) — era uma grade de
   quadradinhos de 4 colunas. A informação é a MESMA do quadradinho, só
   deitada: ferramenta · nome · empresa/cliente e datas · progresso ·
   pessoas e situação · próxima tarefa. Mesma linguagem visual das linhas do
   Painel de Fluxo e do Painel de Leads.
   ⚠️ As áreas são nomeadas uma por uma porque metade dos pedaços é
   OPCIONAL (progresso, chips do projetão): com `grid-template-columns` na
   ordem dos filhos, um cartão sem progresso empurraria todo o resto uma
   coluna para a esquerda e as linhas não se alinhariam entre si. */
.wfl-grid{ display:flex; flex-direction:column; gap:8px; }
.wfl-card{
  display:grid;
  grid-template-columns:128px minmax(140px,1.35fr) minmax(150px,1.5fr) 128px auto minmax(140px,1fr);
  grid-template-areas:
    "chip nome meta prog rodape prox"
    "chip dentro dentro dentro dentro dentro";
  align-items:center; column-gap:14px; row-gap:0;
  text-decoration:none; color:inherit;
  background:var(--surface-2); border:1.5px solid var(--border);
  border-left:4px solid var(--wfl-cor, var(--border));
  border-radius:var(--radius-lg); padding:11px 15px; box-shadow:var(--shadow-sm);
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.wfl-card:hover{ background:var(--surface-1); box-shadow:var(--shadow-lg); }
.wfl-chip{
  grid-area:chip; justify-self:start;
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:.06em;
  padding:3px 9px; border-radius:999px; border:1px solid var(--border); background:var(--surface-1);
  color:var(--text-secondary); max-width:100%; overflow:hidden; white-space:nowrap;
}
.wfl-chip i{ width:7px; height:7px; border-radius:50%; }
/* icone da ferramenta no chip do cartao (2026-08-11) */
.wfl-chip-ico{ display:flex; flex-shrink:0; }
.wfl-chip-ico svg{ display:block; }
.wfl-nome{
  grid-area:nome; font-size:14px; font-weight:750; letter-spacing:-.015em; line-height:1.3;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wfl-meta{
  grid-area:meta; font-size:12px; color:var(--text-muted);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* tela estreita: a linha não caberia deitada e volta a empilhar */
@media(max-width:1100px){
  .wfl-card{
    grid-template-columns:1fr;
    grid-template-areas:"chip" "nome" "meta" "dentro" "prog" "rodape" "prox";
    align-items:start; row-gap:7px;
  }
  .wfl-nome{ white-space:normal; }
  .wfl-meta{ white-space:normal; }
}
.wfl-prog{
  grid-area:prog;
  position:relative; display:flex; align-items:center; gap:8px; height:8px;
  background:rgba(19,24,41,.08); border-radius:999px; margin:2px 34px 2px 0;
}
.wfl-prog i{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; }
.wfl-prog b{ position:absolute; right:-34px; top:50%; transform:translateY(-50%); font-size:12px; font-variant-numeric:tabular-nums; }
.wfl-rodape{ grid-area:rodape; display:flex; align-items:center; gap:8px; }
.wfl-avatares{ display:flex; gap:3px; }
.wfl-status{
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap;
  background:var(--green-soft); color:var(--green-dark); border:1px solid #D3E9B5;
}
.wfl-status.atraso{ background:rgba(180,50,47,.1); color:#B4322F; border-color:rgba(180,50,47,.35); }
/* na linha o "próxima tarefa" é a última coluna: sem o tracejado de cima,
   que só fazia sentido quando ele era o rodapé de um quadradinho */
.wfl-prox{
  grid-area:prox; font-size:12px; color:var(--text-secondary);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wfl-prox.atraso{ color:#B4322F; font-weight:650; }
@media(max-width:1100px){
  .wfl-avatares{ flex:1; }
  .wfl-prox{
    white-space:normal; border-top:1px dashed var(--border); padding-top:8px; width:100%;
  }
}

/* ---------- popup "Novo projeto": as 15 ferramentas ---------- */
.wfm-overlay{
  position:fixed; inset:0; z-index:900; background:rgba(11,15,26,.45);
  backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:22px;
}
.wfm-caixa{
  width:min(1060px, 100%); max-height:88vh; overflow:auto;
  background:var(--surface-1); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow-lg); padding:22px 24px 26px;
}
.wfm-cabeca{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.wfm-cabeca h2{ font-size:19px; letter-spacing:-.015em; display:flex; align-items:center; gap:9px; }
.wfm-cabeca h2 svg{ display:block; flex-shrink:0; color:var(--text-secondary); }
.wfm-cabeca p{ font-size:13px; color:var(--text-secondary); margin-top:4px; max-width:640px; }
.wfm-fechar{
  margin-left:auto; width:30px; height:30px; flex-shrink:0; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid var(--border); color:var(--text-secondary);
}

/* ================================================================
   O "X" CENTRADO NO QUADRADO, EM TODO O PORTAL (2026-08-11)
   ================================================================
   O .wfm-fechar era um botao 30x30 SEM centralizacao: o ✕ ficava
   deslocado, porque um <button> so centra na horizontal e a altura
   sobrava embaixo. Regra unica para todos os fechares do site — quem
   ja centrava (.cfg-fechar, .ev-popover .fechar) so repete o que tinha,
   e o padding/line-height zerados tiram o desencontro que sobrava.
   Botao de fechar novo: use uma destas classes e ja nasce alinhado. */
.wfm-fechar,
.cfg-fechar,
.lead-modal-x,
.ev-popover .fechar,
.pc-fechar{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; line-height:1; text-align:center;
}
.lead-modal-x{ width:30px; height:30px; border-radius:9px; }
.wfm-fechar:hover{ background:rgba(19,24,41,.06); color:var(--text-primary); }
.wfm-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.wfm-item{
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  padding:13px 14px; display:flex; flex-direction:column; gap:8px;
}
.wfm-item-topo{ display:flex; align-items:center; gap:8px; }
/* icone da ferramenta no popup "Novo projeto" — substituiu a numeracao,
   que nao dizia nada (2026-08-11) */
.wfm-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:30px; height:30px; border-radius:9px;
  background:var(--green-soft); color:var(--green-dark);
}
html[data-tema="escuro"] .wfm-ico{ background:rgba(118,184,42,.14); }
.wfm-titulo{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; flex:1; }
.wfm-tag{
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 8px; border-radius:999px; background:rgba(118,184,42,.12); color:var(--green-dark);
}
.wfm-mais{
  width:34px; height:34px; flex-shrink:0; border-radius:10px; cursor:pointer;
  font-size:20px; font-weight:700; line-height:1; padding:0;
  background:var(--green); border:1px solid var(--green); color:#fff;
}
.wfm-mais:hover{ filter:brightness(1.07); }
.wfm-desc{ font-size:12px; color:var(--text-secondary); line-height:1.5; }
.wfm-exemplo{
  border:1px dashed var(--border-strong); border-radius:10px; padding:10px;
  background:var(--surface-1); margin-top:auto;
}
.wfm-form{ display:flex; gap:8px; align-items:center; }
.wfm-form input[type=text]{ flex:1; height:36px; }
.wfm-form input[type=color]{ width:46px; height:36px; padding:3px; flex-shrink:0; }

/* miniaturas de exemplo do popup */
.exf-kb{ display:flex; gap:6px; }
.exf-kb > div{ flex:1; background:rgba(19,24,41,.04); border-radius:7px; padding:5px; }
.exf-kb i{ display:block; height:5px; border-radius:3px; background:rgba(19,24,41,.18); margin-bottom:5px; }
.exf-kb b{ display:block; height:9px; border-radius:4px; margin-bottom:4px; opacity:.75; }
.exf-tab{ display:grid; grid-template-columns:1fr auto; gap:3px 10px; font-size:10.5px; color:var(--text-secondary); }
.exf-tab b{ font-variant-numeric:tabular-nums; }
.exf-chips{ display:flex; flex-wrap:wrap; gap:4px; }
.exf-chips i{ font-style:normal; font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; background:rgba(24,95,165,.1); color:#185FA5; }
.exf-swot{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.exf-swot i{ font-style:normal; display:flex; align-items:center; justify-content:center; height:26px; border-radius:6px; font-size:11px; font-weight:800; color:rgba(19,24,41,.6); }
.exf-okr{ display:flex; flex-direction:column; gap:6px; }
.exf-okr span{ display:block; height:8px; border-radius:99px; background:linear-gradient(90deg,#185FA5,#185FA5); position:relative; }
.exf-okr span::after{ content:""; position:absolute; left:0; right:-0; top:0; bottom:0; border-radius:99px; background:rgba(19,24,41,.08); z-index:-1; }
.exf-bmc{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.exf-bmc i{ height:22px; border-radius:5px; background:rgba(19,24,41,.07); }
.exf-bmc i.w{ grid-column:span 2; }
.exf-bmc i.w:last-child{ grid-column:span 3; }
.exf-s5{ display:flex; flex-direction:column; gap:3px; font-size:10.5px; }
.exf-s5 i{ font-style:normal; color:var(--text-muted); }
.exf-s5 i.ok{ color:var(--green-dark); font-weight:650; }
.exf-flow{ display:flex; flex-direction:column; align-items:center; font-size:10px; color:var(--text-secondary); }
.exf-flow i{ font-style:normal; border:1px solid var(--border-strong); border-radius:5px; padding:2px 10px; background:var(--surface-2); }
.exf-flow i.r{ border-radius:999px; }
.exf-flow i.d{ border-style:dashed; }
.exf-flow s{ text-decoration:none; color:var(--text-muted); line-height:1.1; }

/* ---------- editores das ferramentas (página inteira) ---------- */
.fx-salvo{ font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.fx-salvo.ok{ color:var(--green-dark); font-weight:650; }
.fx-salvo.erro{ color:#B4322F; font-weight:650; }
.fx-salvo.pendente{ color:#8A6110; }
.fx-raiz{ padding:16px; border-top:1px solid var(--border); }
.fx-raiz input[type=text], .fx-raiz textarea{ width:100%; }
.fx-raiz textarea{ min-height:64px; resize:vertical; }
.fx-cartao{
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:12px 13px; margin-bottom:12px;
}
.fx-cartao h4{ font-size:13px; margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.fx-azul{ color:#185FA5; }
.fx-vermelho{ color:#B4322F; }
.fx-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.fx-sub{ display:block; font-size:11px; color:var(--text-muted); margin:-4px 0 8px; }
.fx-dica{ font-size:12px; color:var(--text-muted); margin-top:10px; }
.fx-dica.ruim{ color:#B4322F; font-weight:650; }
.fx-dica.bom{ color:var(--green-dark); font-weight:650; }
.fx-cont{
  font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px;
  background:rgba(19,24,41,.07); color:var(--text-secondary);
}
.fx-chips-list{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.fx-chip{
  display:inline-flex; align-items:center; gap:5px; font-size:12px;
  font-variant-numeric:tabular-nums; padding:4px 9px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-secondary);
}
.fx-chip-x{
  width:16px; height:16px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(19,24,41,.08); color:var(--text-muted); font-size:11px; line-height:1;
}
.fx-chip-x:hover{ background:rgba(180,50,47,.15); color:#B4322F; }
.fx-kb-lim-inp{ width:52px !important; height:28px; font-size:12px; text-align:center; flex-shrink:0; }
.fx-kb-pega{ cursor:grab; color:var(--text-muted); font-size:13px; flex-shrink:0; }
.fx-kb-card.arrastando{ opacity:.35; }
.fx-kb-card.sobre{ border-top:2px solid var(--green); }
.fx-kb-col.sobre{ background:rgba(118,184,42,.07); border-color:var(--green); }
.fx-eis-mover{ width:auto !important; height:28px; padding:2px 4px; font-size:11.5px; flex-shrink:0; }
.fx-historico{ margin-top:16px; border-top:1px solid var(--border); padding-top:12px; }
.fx-historico h4{ font-size:13px; margin-bottom:8px; }
.fx-hist-item{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:8px 12px; margin-bottom:8px; font-size:13px;
}
.fx-hist-item summary{ cursor:pointer; font-weight:650; font-size:12.5px; }
.fx-hist-item p{ margin:6px 0 0; color:var(--text-secondary); }
.fx-hist-item button{ margin-top:8px; }

/* barra de Desfazer/Refazer/Exportar do editor */
/* contêiner dos botões Desfazer/Refazer no topo da ferramenta.
   Tem nome próprio porque ".fx-barra" já é usada por duas outras coisas
   (barra de progresso e barra do canvas de produtos). */
.fx-acoes-topo{ display:inline-flex; gap:6px; align-items:center; }
.fx-undo{
  display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px;
  border-radius:8px; cursor:pointer; font-size:11.5px; font-weight:650;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-secondary);
}
.fx-undo:hover:not(:disabled){ background:#fff; color:var(--text-primary); border-color:var(--border-strong); }
.fx-undo:disabled{ opacity:.35; cursor:default; }
/* desfazer/refazer: só a seta, sem a palavra (pedido do Matteo, 03/09/2026)
   — quadrado em vez de retângulo, e a seta um pouco maior para não sumir. */
.fx-undo-seta{ width:28px; padding:0; justify-content:center; font-size:15px; }

/* lupa de + e - : encolhe/aumenta só o desenho da ferramenta na tela
   (2026-08-14). A porcentagem no meio é um botão — clicar volta a 100%. */
.fx-zoom-grupo{ display:inline-flex; align-items:center; gap:4px; }
.fx-zoom{ padding:0 8px; }
.fx-zoom-val{
  min-width:48px; height:28px; padding:0 4px; border-radius:8px; cursor:pointer;
  font-size:11.5px; font-weight:650; font-variant-numeric:tabular-nums;
  background:transparent; border:1px solid transparent; color:var(--text-muted);
}
.fx-zoom-val:hover{ border-color:var(--border); color:var(--text-primary); }

/* ---------- base comum: comentários, versões e modelos ---------- */
.wfx-painel{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;
}
@media(max-width:900px){ .wfx-painel{ grid-template-columns:1fr; } }
.wfx-col{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:16px 18px;
}
.wfx-col h3{ font-size:14px; letter-spacing:-.01em; margin-bottom:4px; }
.wfx-sub{ font-size:12px; color:var(--text-muted); margin-bottom:10px; line-height:1.5; }
.wfx-hint{ font-size:11px; color:var(--text-muted); margin:6px 0 10px; }
.wfx-hint code{
  background:rgba(24,95,165,.08); color:#185FA5; padding:1px 5px;
  border-radius:5px; font-size:11px; font-weight:650;
}
.wfx-form-com{ display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.wfx-form-com textarea{ flex:1; min-width:180px; min-height:52px; resize:vertical; }
.wfx-form-com input[type=text]{ flex:1; min-width:150px; height:34px; }
.wfx-lista{ margin-top:12px; max-height:340px; overflow-y:auto; }
.wfx-vazio{ font-size:12px; color:var(--text-muted); font-style:italic; line-height:1.55; }
.wfx-com{
  border-top:1px solid var(--border); padding:10px 0;
}
.wfx-com.resolvido{ opacity:.5; }
.wfx-com.resolvido p{ text-decoration:line-through; }
.wfx-com-topo{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.wfx-com-topo b{ font-size:12.5px; }
.wfx-com-topo small{ font-size:11px; color:var(--text-muted); }
.wfx-com p{ font-size:13px; line-height:1.5; white-space:pre-wrap; }
.wfx-mencao{ color:#185FA5; font-weight:650; background:rgba(24,95,165,.08); padding:0 3px; border-radius:4px; }
.wfx-mini{
  width:22px; height:22px; padding:0; border-radius:6px; cursor:pointer; font-size:12px;
  background:transparent; border:1px solid var(--border); color:var(--text-muted);
}
.wfx-mini:hover{ background:rgba(19,24,41,.06); color:var(--text-primary); }
.wfx-mini.perigo:hover{ background:rgba(180,50,47,.12); color:#B4322F; border-color:rgba(180,50,47,.4); }
.wfx-versao{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--border); padding:9px 0; font-size:12.5px;
}
.wfx-versao small{ display:block; font-size:11px; color:var(--text-muted); margin-top:1px; }

/* modelos salvos no popup Novo projeto */
.wfm-modelos{
  background:rgba(118,184,42,.06); border:1px solid #D3E9B5;
  border-radius:14px; padding:14px 16px; margin-bottom:16px;
}
.wfm-modelos h3{ font-size:14px; margin-bottom:2px; }
.wfm-modelos > p{ font-size:12px; color:var(--text-secondary); margin-bottom:10px; }
.wfm-modelos-lista{ display:flex; flex-direction:column; gap:8px; }
.wfm-modelo{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:11px; padding:8px 11px;
}
.wfm-modelo-cor{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.wfm-modelo-nome{ font-size:13px; font-weight:650; }
.wfm-modelo small{ font-size:11px; color:var(--text-muted); flex:1; }
.wfm-modelo .wfm-mais{ width:28px; height:28px; font-size:16px; }
.wfm-modelo .wfm-form{ flex-basis:100%; }
.fx-lista{ display:flex; flex-direction:column; gap:6px; }
.fx-item{ display:flex; gap:6px; align-items:center; }
.fx-x{
  width:26px; height:26px; flex-shrink:0; padding:0; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid var(--border); color:var(--text-muted); font-size:13px;
}
.fx-x:hover{ background:rgba(180,50,47,.1); color:#B4322F; border-color:rgba(180,50,47,.4); }
.fx-add{ display:flex; gap:6px; align-items:center; margin-top:6px; }
.fx-add input{ flex:1; height:34px; font-size:13px; }
.fx-mais{
  width:34px; height:34px; flex-shrink:0; padding:0; border-radius:9px; cursor:pointer;
  font-size:17px; font-weight:700; background:var(--green); border:1px solid var(--green); color:#fff;
}
.fx-mais.largo{ width:auto; padding:0 14px; font-size:13px; }
.fx-mais:hover{ filter:brightness(1.07); }
.fx-btn-add{ margin-top:8px; cursor:pointer; }
.fx-grafico{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:12px; }
.fx-wgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.fx-swot{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fx-tab{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:6px; }
.fx-tab th{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
  text-align:left; padding:6px 8px; border-bottom:1px solid var(--border-strong);
}
.fx-tab td{ padding:6px 8px; border-bottom:1px solid var(--border); }
.fx-tab tr.top td{ background:rgba(24,95,165,.07); }
.fx-tab .fx-rank{ font-weight:700; color:#185FA5; white-space:nowrap; }
.fx-tab .fx-score{ font-weight:750; font-variant-numeric:tabular-nums; }
.fx-tab select{ width:auto; height:32px; padding:3px 6px; }
.fx-tab input[type=number]{ width:90px; height:32px; }
/* ============ Painel de Fluxo: uma coluna por etapa ============ */
.pf-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.pf-check{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
  color:var(--text-secondary); cursor:pointer; white-space:nowrap;
}
.pf-check input{ width:15px; height:15px; accent-color:var(--green); }
.pf-quadro{
  display:flex; gap:14px; align-items:flex-start; overflow-x:auto;
  padding:14px; border-radius:16px; scrollbar-width:thin;
  background:linear-gradient(180deg, rgba(19,24,41,.022), rgba(19,24,41,.045));
  border:1px solid var(--border);
}
.pf-col{
  flex:0 0 296px; display:flex; flex-direction:column; gap:9px;
  background:rgba(252,252,251,.6); border:1px solid var(--border);
  border-radius:12px; padding:10px; max-height:calc(100vh - 300px); overflow-y:auto;
}
.pf-col.tem-atraso{ border-color:rgba(180,50,47,.35); }
.pf-col-topo{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding-bottom:9px; border-bottom:2px solid var(--border);
  position:sticky; top:-10px; background:rgba(252,252,251,.96); z-index:2;
  margin:-10px -10px 0; padding:10px;
}
.pf-col-num{
  font-size:10px; font-weight:800; letter-spacing:.08em;
  padding:2px 8px; border-radius:999px; background:var(--navy-800); color:#fff;
}
.pf-col-nome{ font-size:13.5px; font-weight:750; letter-spacing:-.01em; flex:1; min-width:0; }
.pf-col-cont{
  font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px;
  background:rgba(19,24,41,.08); color:var(--text-secondary);
}
.pf-col-atraso{
  width:100%; font-size:10.5px; font-weight:700; color:#B4322F;
  background:rgba(180,50,47,.1); border-radius:6px; padding:3px 8px; text-align:center;
}
.pf-cli{
  background:var(--surface-1); border:1px solid var(--border); border-left:3px solid var(--border-strong);
  border-radius:10px; padding:11px 12px; box-shadow:0 1px 2px rgba(19,24,41,.05);
}
.pf-cli.atrasada{ border-left-color:#B4322F; background:linear-gradient(180deg, rgba(180,50,47,.05), var(--surface-1)); }
.pf-cli.feita{ border-left-color:var(--green); opacity:.72; }
.pf-cli-topo{ display:flex; align-items:center; gap:8px; }
.pf-cli-nome{ font-size:13.5px; font-weight:700; color:inherit; text-decoration:none; flex:1; min-width:0; }
.pf-cli-nome:hover{ text-decoration:underline; }
.ct-numero{
  font-size:10.5px; font-weight:800; letter-spacing:.03em; font-variant-numeric:tabular-nums;
  padding:2px 7px; border-radius:6px; background:rgba(24,95,165,.1); color:#185FA5;
  text-decoration:none; white-space:nowrap;
}
a.ct-numero:hover, .pf-cli-ct:hover{ background:rgba(24,95,165,.2); }
.pf-cli-ct{
  font-size:10.5px; font-weight:800; letter-spacing:.03em; font-variant-numeric:tabular-nums;
  padding:2px 7px; border-radius:6px; background:rgba(24,95,165,.1); color:#185FA5;
  text-decoration:none; white-space:nowrap; flex-shrink:0;
}
.pf-cli-meta{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }
.pf-cli-prazo{ font-size:11.5px; margin-top:5px; }
.pf-prazo{ color:var(--text-secondary); }
.pf-atraso{ color:#B4322F; font-weight:700; }
.pf-ok{ color:var(--green-dark); font-weight:700; }
.pf-barra{
  position:relative; height:6px; margin:8px 34px 0 0;
  background:rgba(19,24,41,.08); border-radius:99px;
}
.pf-barra i{ position:absolute; left:0; top:0; bottom:0; background:var(--green); border-radius:99px; }
.pf-barra b{ position:absolute; right:-34px; top:-5px; font-size:11px; font-variant-numeric:tabular-nums; color:var(--text-muted); }
.pf-hist{ margin-top:9px; font-size:12px; }
.pf-hist summary{ cursor:pointer; color:var(--text-secondary); font-weight:600; font-size:11.5px; }
.pf-hist-item{ border-left:2px solid var(--border-strong); padding:5px 0 5px 9px; margin-top:6px; }
.pf-hist-item b{ font-variant-numeric:tabular-nums; }
.pf-hist-item p{ color:var(--text-secondary); margin:3px 0; line-height:1.45; }
.pf-hist-item a{ font-size:11.5px; }
.pf-btn-concluir, .pf-btn-reabrir{
  width:100%; margin-top:10px; padding:8px 10px; border-radius:8px; cursor:pointer;
  font-size:12px; font-weight:700; border:1px solid var(--green);
  background:rgba(118,184,42,.12); color:var(--green-dark);
}
.pf-btn-concluir:hover{ background:var(--green); color:#fff; }
.pf-btn-reabrir{ border-color:var(--border-strong); background:transparent; color:var(--text-secondary); }
.pf-btn-reabrir:hover{ background:rgba(19,24,41,.06); color:var(--text-primary); }
.pf-form{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);
  display:flex; flex-direction:column; gap:8px;
}
.pf-form label{
  display:flex; flex-direction:column; gap:3px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted);
}
.pf-form textarea{ resize:vertical; font-size:12.5px; }
.pf-form-acoes{ display:flex; gap:7px; }

/* fluxo de um cliente: linha do tempo das etapas */
.pf-linha-tempo{ display:flex; flex-direction:column; gap:0; }
.pf-lt-item{ display:flex; gap:14px; position:relative; padding-bottom:16px; }
.pf-lt-item::before{
  content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--border-strong);
}
.pf-lt-item:last-child::before{ display:none; }
.pf-lt-marca{
  width:32px; height:32px; flex-shrink:0; border-radius:50%; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; background:var(--surface-2);
  border:2px solid var(--border-strong); color:var(--text-secondary);
}
.pf-lt-item.ok .pf-lt-marca{ background:var(--green); border-color:var(--green); color:#fff; }
.pf-lt-item.ok::before{ background:var(--green); }
.pf-lt-item.atraso .pf-lt-marca{ border-color:#B4322F; color:#B4322F; }
.pf-lt-corpo{
  flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px;
}
.pf-lt-item.atraso .pf-lt-corpo{ border-color:rgba(180,50,47,.35); }
.pf-lt-nome{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pf-lt-chip{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 8px; border-radius:999px; background:rgba(19,24,41,.08); color:var(--text-secondary);
}
.pf-lt-item.ok .pf-lt-chip{ background:var(--green-soft); color:var(--green-dark); }
.pf-lt-item.atraso .pf-lt-chip{ background:rgba(180,50,47,.12); color:#B4322F; }
/* Etapa 59 (2026-08-12): etapa marcada como responsabilidade do cliente.
   Atrasada + do cliente = laranja em vez de vermelho (mesma paleta do
   "Finalizando" do portal do cliente, .pc-et-final). O selo
   "pf-lt-chip-cliente" é sempre laranja, esteja a etapa atrasada ou não —
   ele vem DEPOIS de .atraso .pf-lt-chip de propósito, pra vencer o empate
   de especificidade e não virar vermelho numa etapa atrasada. */
.pf-lt-item.atraso-cliente .pf-lt-marca{ border-color:#B4671B; color:#B4671B; }
.pf-lt-item.atraso-cliente .pf-lt-corpo{ border-color:rgba(180,103,27,.35); }
.pf-lt-item.atraso-cliente .pf-lt-chip{ background:#FFF1DF; color:#B4671B; }
.pf-lt-chip.pf-lt-chip-cliente{ background:#FFF1DF; color:#B4671B; }
.pf-lt-acoes{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pf-lt-form-inline{ display:inline-flex; }
.pfl-prazo-cliente{ color:#B4671B; font-weight:650; }
.pfl-chip.cliente{ background:#FFF1DF; color:#B4671B; }
.pf-lt-prazos{ font-size:12px; color:var(--text-secondary); margin-top:5px; line-height:1.5; }
.pf-lt-reg{
  margin-top:9px; padding:8px 11px; border-radius:9px;
  background:rgba(118,184,42,.07); border-left:3px solid var(--green); font-size:12.5px;
}
.pf-lt-reg p{ color:var(--text-secondary); margin:4px 0; line-height:1.5; }

/* etapa desmarcada na criação do contrato */
.ct-etapa-usar{ width:16px; height:16px; accent-color:var(--green); flex-shrink:0; }
.ct-etapa.fora{ opacity:.4; }
.ct-etapa.fora .ct-etapa-nome{ text-decoration:line-through; }
.ct-etapa.fora input[type=number]{ pointer-events:none; opacity:.5; }

/* outros contratos do mesmo cliente */
.ct-irmaos-cont{
  font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px;
  background:rgba(19,24,41,.08); color:var(--text-secondary); margin-left:6px;
}
.ct-irmaos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.ct-irmao{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; text-decoration:none; color:inherit;
  background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:11px 13px;
  transition:border-color .12s, transform .12s;
}
.ct-irmao:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.ct-irmao.arquivado{ opacity:.6; }
.ct-irmao-prod{ font-size:13px; font-weight:650; flex:1; min-width:0; }
.ct-irmao-meta{ width:100%; font-size:11.5px; color:var(--text-muted); }
.ct-irmao-status{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 8px; border-radius:999px; background:var(--green-soft); color:var(--green-dark);
}
.ct-irmao-status.off{ background:rgba(19,24,41,.08); color:var(--text-muted); }
.ct-irmao-prog{
  position:relative; width:100%; height:5px; margin:2px 32px 0 0;
  background:rgba(19,24,41,.08); border-radius:99px;
}
.ct-irmao-prog i{ position:absolute; left:0; top:0; bottom:0; background:var(--green); border-radius:99px; }
.ct-irmao-prog b{ position:absolute; right:-32px; top:-5px; font-size:10.5px; color:var(--text-muted); }

/* ============ Kanban: colunas (fases) × raias (linhas) ============ */
.kb-quadro{
  overflow-x:auto; padding:4px; scrollbar-width:thin;
  background:
    radial-gradient(1200px 300px at 12% -10%, rgba(118,184,42,.06), transparent 60%),
    linear-gradient(180deg, rgba(19,24,41,.022), rgba(19,24,41,.045));
  border:1px solid var(--border); border-radius:16px;
}
.kb-pista{ display:flex; flex-direction:column; gap:10px; min-width:min-content; padding:8px; }

/* cabeçalho das colunas — fica colado no topo enquanto o quadro rola */
.kb-cab{ display:flex; gap:12px; align-items:flex-start; position:sticky; top:0; z-index:5; }
.kb-cab-canto{ flex:0 0 158px; }
.kb-cab-col{
  flex:0 0 288px; border-radius:12px 12px 0 0; padding:9px 4px 0;
  background:linear-gradient(180deg, var(--surface-1), rgba(252,252,251,.72));
  border:1px solid var(--border); border-bottom:0;
  box-shadow:inset 0 3px 0 0 var(--kb-cor-col, #8A93A8);
  backdrop-filter:blur(6px);
}
.kb-cab-col.recolhida{ flex-basis:56px; }
.kb-cab-col.estourou{ box-shadow:inset 0 3px 0 0 #d1453b; }
.kb-col-topo{ display:flex; align-items:center; gap:6px; padding:2px 7px 7px; }
.kb-col-seta{
  width:20px; height:20px; padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--text-muted); font-size:11px; flex-shrink:0; border-radius:5px;
}
.kb-col-seta:hover{ background:rgba(19,24,41,.07); color:var(--text-primary); }
.kb-col-nome{
  flex:1; min-width:0; border:0 !important; background:transparent !important; height:26px; padding:0 3px !important;
  font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--text-primary);
}
.kb-col-nome:focus{ background:var(--surface-1) !important; border-radius:6px; }
.kb-col-cont{ font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
.kb-col-menu{ display:flex; gap:2px; align-items:center; opacity:0; transition:opacity .12s; }
.kb-col-topo:hover .kb-col-menu{ opacity:1; }
.kb-col-wip{
  width:42px !important; height:22px; padding:0 4px !important; font-size:11px; text-align:center;
  border-radius:5px; color:var(--text-muted);
}
.kb-col-bt{
  width:22px; height:22px; padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--text-muted); font-size:12px; border-radius:5px;
}
.kb-col-bt:hover{ background:rgba(19,24,41,.08); color:var(--text-primary); }
.kb-col-bt.perigo:hover{ background:rgba(209,69,59,.12); color:#d1453b; }
.kb-cab-col.recolhida .kb-col-nome,
.kb-cab-col.recolhida .kb-col-menu,
.kb-cab-col.recolhida .kb-col-barra{ display:none; }
.kb-col-barra{ height:3px; background:rgba(19,24,41,.08); margin:0 7px 7px; border-radius:99px; overflow:hidden; }
.kb-col-barra i{ display:block; height:100%; border-radius:99px; transition:width .25s; }
.kb-wip-alerta{
  font-size:10.5px; font-weight:700; color:#d1453b; background:rgba(209,69,59,.1);
  border-radius:6px; padding:4px 8px; margin:0 7px 7px; text-align:center;
}

/* ---- raias: as LINHAS do quadro ---- */
.kb-raia{
  display:flex; gap:12px; align-items:stretch; border-radius:12px;
  background:rgba(19,24,41,.02); /* reserva para navegador sem color-mix */
  background:linear-gradient(90deg, color-mix(in srgb, var(--kb-cor-raia) 9%, transparent), transparent 42%);
}
.kb-quadro:not(.com-raias) .kb-raia{ background:none; }
.kb-raia-cab{
  flex:0 0 158px; display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  align-content:center; padding:12px 10px;
  border-left:4px solid var(--kb-cor-raia); border-radius:10px 0 0 10px;
  background:linear-gradient(180deg, var(--surface-1), rgba(252,252,251,.6));
}
.kb-raia-seta{
  width:20px; height:20px; padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--text-muted); font-size:11px; border-radius:5px; flex-shrink:0;
}
.kb-raia-seta:hover{ background:rgba(19,24,41,.07); color:var(--text-primary); }
.kb-raia-cor{
  width:20px !important; height:20px; padding:1px !important; border-radius:6px;
  flex-shrink:0; cursor:pointer;
}
.kb-raia-nome{
  flex:1; min-width:60px; border:0 !important; background:transparent !important;
  height:24px; padding:0 3px !important; font-size:12.5px; font-weight:700; letter-spacing:-.01em;
}
.kb-raia-nome:focus{ background:var(--surface-2) !important; border-radius:5px; }
.kb-raia-cont{
  font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px;
  background:rgba(19,24,41,.08); color:var(--text-secondary); /* reserva */
  background:color-mix(in srgb, var(--kb-cor-raia) 18%, transparent);
  color:color-mix(in srgb, var(--kb-cor-raia) 78%, #131829);
}
.kb-raia-menu{ display:flex; gap:2px; width:100%; opacity:0; transition:opacity .12s; }
.kb-raia-cab:hover .kb-raia-menu{ opacity:1; }
.kb-raia.recolhida .kb-raia-cols{ display:none; }
.kb-raia-cols{ display:flex; gap:12px; align-items:flex-start; }
.kb-celula{
  flex:0 0 288px; display:flex; flex-direction:column; gap:7px;
  min-height:62px; padding:8px; border-radius:0 0 12px 12px;
  background:rgba(252,252,251,.55); border:1px solid var(--border); border-top:0;
  transition:background .12s, box-shadow .12s;
}
.kb-quadro.com-raias .kb-celula{ border-radius:12px; border-top:1px solid var(--border); }
.kb-celula.recolhida{ flex-basis:56px; }
.kb-celula.sobre{ background:rgba(118,184,42,.12); box-shadow:inset 0 0 0 2px var(--green); }
.kb-celula-fantasma{ flex:0 0 128px; }

.kb-card{
  position:relative; display:flex; gap:9px; align-items:flex-start; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:10px; padding:11px 12px 11px 13px; overflow:hidden;
  box-shadow:0 1px 2px rgba(19,24,41,.05), 0 1px 1px rgba(19,24,41,.03);
  transition:box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}
.kb-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--kb-prio, transparent); opacity:0; transition:opacity .14s;
}
.kb-card.com-prio::before{ opacity:1; }
.kb-card:hover{
  box-shadow:0 4px 14px rgba(19,24,41,.12), 0 1px 3px rgba(19,24,41,.06);
  border-color:var(--border-strong); transform:translateY(-1px);
}
.kb-card.arrastando{ opacity:.3; transform:rotate(1.5deg) scale(.98); }
.kb-card.sobre{ box-shadow:0 -3px 0 0 var(--green), 0 2px 8px rgba(19,24,41,.1); }
.kb-card.atrasado{ background:linear-gradient(180deg, rgba(209,69,59,.045), var(--surface-1)); }
.kb-card.feito{ opacity:.5; }
.kb-card.feito .kb-card-nome{ text-decoration:line-through; color:var(--text-muted); }
.kb-circ{
  width:19px; height:19px; flex-shrink:0; margin-top:1px; padding:0; cursor:pointer;
  border-radius:50%; border:1.6px solid #9aa0a6; background:transparent;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.kb-circ svg{ opacity:0; transition:opacity .12s; }
.kb-circ:hover svg{ opacity:.55; }
.kb-circ.feito{ background:currentColor !important; }
.kb-circ.feito svg{ opacity:1; color:#fff; }
.kb-card-corpo{ flex:1; min-width:0; }
.kb-card-nome{ font-size:13.5px; line-height:1.4; word-break:break-word; }
.kb-card-desc{
  font-size:11.5px; color:var(--text-muted); margin-top:3px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kb-card-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px; }
.kb-chip-data{
  display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600;
  color:var(--text-muted);
}
.kb-chip-data.hoje{ color:#058527; }
.kb-chip-data.amanha{ color:#ad6200; }
.kb-chip-data.atraso{ color:#d1453b; }
.kb-chip-data.futuro{ color:#692fc2; }
.kb-chip-etq{
  font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:999px;
  background:rgba(24,95,165,.09); color:#185FA5;
}
.kb-chip-sub{ font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.kb-avatar{
  width:19px; height:19px; border-radius:50%; margin-left:auto; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#fff; letter-spacing:-.02em;
}
.kb-add, .kb-add-secao, .kb-add-raia{
  display:flex; align-items:center; gap:8px; width:100%; cursor:pointer;
  background:transparent; border:0; padding:8px 9px; border-radius:8px;
  font-size:13px; font-weight:550; color:var(--text-muted); text-align:left;
}
.kb-add:hover, .kb-add-secao:hover, .kb-add-raia:hover{ background:rgba(19,24,41,.05); color:var(--green-dark); }
.kb-add:hover .kb-add-mais,
.kb-add-secao:hover .kb-add-mais,
.kb-add-raia:hover .kb-add-mais{ background:var(--green); color:#fff; }
.kb-add-mais{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; background:transparent; color:var(--text-muted); transition:all .12s;
}
.kb-add-secao{
  flex:0 0 128px; align-self:flex-start; font-weight:650; margin-top:9px;
  border:1px dashed var(--border-strong); justify-content:center; padding:9px 6px;
}
.kb-add-raia{
  margin-top:12px; border:1px dashed var(--border-strong); padding:11px 14px;
  flex-wrap:wrap; font-weight:650; font-size:13.5px;
}
.kb-add-raia small{ width:100%; padding-left:26px; font-weight:400; font-size:11.5px; color:var(--text-muted); }
.kb-novo{
  background:var(--surface-1); border:1px solid var(--border-strong);
  border-radius:9px; padding:10px; box-shadow:0 2px 8px rgba(19,24,41,.08);
}
.kb-novo textarea{ width:100%; border:0 !important; padding:0 !important; font-size:13.5px; resize:none; min-height:38px; }
.kb-novo textarea:focus{ outline:none; box-shadow:none !important; }
.kb-novo-acoes{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.kb-novo-prio{ width:auto !important; height:28px; font-size:11.5px; padding:2px 6px !important; }
.kb-novo-data{ width:130px !important; height:28px; font-size:11.5px; padding:2px 6px !important; }

/* painel de detalhe da tarefa */
.kb-modal-over{
  position:fixed; inset:0; z-index:950; background:rgba(11,15,26,.42);
  backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:22px;
}
.kb-modal{
  width:min(620px,100%); max-height:88vh; overflow:auto;
  background:var(--surface-1); border-radius:14px; box-shadow:var(--shadow-lg); padding:18px 22px 20px;
}
.kb-modal-cab{ display:flex; align-items:center; margin-bottom:12px; }
.kb-modal-secao{ font-size:12px; color:var(--text-muted); font-weight:600; }
.kb-modal-x{
  margin-left:auto; width:28px; height:28px; padding:0; border-radius:7px; cursor:pointer;
  background:transparent; border:0; color:var(--text-muted); font-size:14px;
}
.kb-modal-x:hover{ background:rgba(19,24,41,.07); color:var(--text-primary); }
.kb-modal-titulo{ display:flex; gap:11px; align-items:flex-start; }
.kb-modal-nome{
  flex:1; border:0 !important; padding:0 !important; resize:none; overflow:hidden;
  font-size:17px; font-weight:700; letter-spacing:-.015em; line-height:1.35; min-height:26px;
}
.kb-modal-nome:focus{ outline:none; box-shadow:none !important; }
.kb-modal-desc{
  width:100%; margin-top:10px; font-size:13px; border-radius:8px; resize:vertical;
}
.kb-sub{ margin-top:16px; }
.kb-sub h5{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:7px; }
.kb-sub-lista{ display:flex; flex-direction:column; gap:5px; }
.kb-sub-item{ display:flex; gap:8px; align-items:center; }
.kb-sub-item input[type=checkbox]{ width:16px; height:16px; accent-color:#d1453b; flex-shrink:0; }
.kb-sub-item.ok input[type=text]{ text-decoration:line-through; color:var(--text-muted); }
.kb-props{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--border);
}
.kb-prop{ display:flex; flex-direction:column; gap:4px; }
.kb-prop-largo{ grid-column:span 2; }
.kb-prop label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:650; }
.kb-etq-edit{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.kb-etq{
  display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:999px; background:rgba(24,95,165,.1); color:#185FA5;
}
.kb-etq-x{
  width:15px; height:15px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(24,95,165,.18); color:#185FA5; font-size:10px; line-height:1;
}
.kb-etq-inp{ width:120px !important; height:28px; font-size:12px; }
.kb-modal-rodape{ margin-top:16px; padding-top:12px; border-top:1px solid var(--border); }
.kb-excluir{ cursor:pointer; color:#d1453b; border-color:rgba(209,69,59,.35); }
.kb-excluir:hover{ background:rgba(209,69,59,.1); }

.fx-kb{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.fx-kb-col{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px; min-height:160px; }
.fx-kb-col.estourou{ border-color:rgba(180,50,47,.5); }
.fx-kb-topo{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.fx-kb-topo input{ border:0; background:transparent; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; padding:2px 4px; height:auto; }
.fx-kb-lim{ font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
.fx-kb-lim.over{ color:#B4322F; font-weight:800; }
.fx-kb-card{
  display:flex; gap:4px; align-items:center; background:var(--surface-1);
  border:1px solid var(--border); border-left:4px solid #185FA5; border-radius:9px;
  padding:6px 7px; margin-bottom:7px;
}
.fx-kb-card input{ border:0; background:transparent; font-size:13px; padding:2px 4px; height:auto; }
.fx-kb-acoes{ display:flex; gap:3px; flex-shrink:0; }
.fx-kb-mv{
  width:24px; height:24px; padding:0; border-radius:7px; cursor:pointer; font-size:13px;
  background:transparent; border:1px solid var(--border); color:var(--text-secondary);
}
.fx-kb-mv:hover{ background:rgba(19,24,41,.06); color:var(--text-primary); }
.fx-pdca{ display:grid; grid-template-columns:210px 1fr; gap:16px; align-items:start; }
.fx-pdca-caixas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:820px){ .fx-pdca{ grid-template-columns:1fr; } .fx-pdca-roda{ text-align:center; } }
.fx-kr{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
.fx-kr-linha{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.fx-kr-linha input[type=text]{ flex:2; min-width:160px; }
.fx-kr-linha input[type=number]{ width:86px; }
.fx-kr-de{ font-size:12px; color:var(--text-muted); }
.fx-kr-pct{ font-size:14px; font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }
/* OKR 2026-08-10: números em campos largos, com ponto de milhar visível */
.fx-kr-vals{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.fx-kr-vals .fx-num-br{
  width:170px; min-width:120px; height:42px; font-size:16.5px; font-weight:750;
  text-align:right; font-variant-numeric:tabular-nums; padding:0 12px;
}
.fx-kr-moeda{ font-size:13px; font-weight:750; color:var(--text-muted); }
.fx-kr-vals .fx-kr-pct{ margin-left:auto; font-size:15px; }
.fx-kr-resumo{ font-size:12.5px; color:var(--text-secondary); margin-top:7px; font-variant-numeric:tabular-nums; }
.fx-okr-tipo{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.fx-okr-tipo span{ font-size:12.5px; font-weight:650; color:var(--text-secondary); white-space:nowrap; }
.fx-okr-tipo select{ max-width:240px; }

/* ---------- Tarefas Diárias (2026-08-10) ---------- */
.fx-di-alerta{
  background:rgba(180,50,47,.09); border:1.5px solid #B4322F; color:#B4322F;
  font-weight:650; font-size:13px; border-radius:11px; padding:11px 14px; margin-bottom:12px;
}
html[data-tema="escuro"] .fx-di-alerta{ background:rgba(180,50,47,.16); color:#F0A9A7; }
.fx-di-linha{
  display:flex; align-items:center; gap:10px; padding:9px 10px; margin-top:8px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2);
}
.fx-di-linha.atrasada{ border-color:#B4322F; background:rgba(180,50,47,.05); }
.fx-di-linha.feita{ opacity:.55; }
.fx-di-linha.feita .fx-di-titulo{ text-decoration:line-through; }
.fx-di-tick{
  width:24px; height:24px; border-radius:50%; border:2px solid var(--border-strong);
  background:transparent; cursor:pointer; color:#fff; font-size:13px; line-height:1;
  flex-shrink:0; padding:0;
}
.fx-di-linha.feita .fx-di-tick{ background:var(--green); border-color:var(--green); }
.fx-di-tick:hover:not(:disabled){ border-color:var(--green); }
.fx-di-hora{ font-weight:750; font-size:13px; font-variant-numeric:tabular-nums; color:var(--text-secondary); width:auto; min-width:48px; flex-shrink:0; white-space:nowrap; }
.fx-di-titulo{ flex:1; min-width:0; font-size:13.5px; font-weight:600; }
.fx-di-chip{
  background:#B4322F; color:#fff; font-size:10.5px; font-weight:750; padding:3px 9px;
  border-radius:99px; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0;
}
/* chip sem urgência: hoje só a "tarefa única" usa (2026-08-20) — o vermelho
   do chip padrão é do aviso de atraso e não pode virar decoração */
.fx-di-chip.neutro{ background:var(--text-muted); }
.fx-di-item{
  background:var(--surface-1); border:1px solid var(--border); border-radius:12px;
  padding:11px 13px; margin-top:10px;
}
.fx-di-item-topo{ display:flex; align-items:center; gap:8px; }
.fx-di-item-topo input[type=text]{ flex:1; font-weight:650; }
.fx-di-campo{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:9px; padding-top:9px; border-top:1px dashed var(--border);
}
.fx-di-campo-topo{ align-items:flex-start; }
.fx-di-rotulo{
  font-size:11.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.03em; width:78px; flex-shrink:0;
}
.fx-di-campo select{ width:150px; flex-shrink:0; }
.fx-di-campo input[type=time]{ width:96px; }
.fx-di-ate{ font-size:11.5px; color:var(--text-muted); flex-shrink:0; }
.fx-di-dias{ display:flex; gap:4px; flex-shrink:0; }
.fx-di-dia{
  width:26px; height:26px; border-radius:7px; border:1.5px solid var(--border-strong);
  background:transparent; font-size:11.5px; font-weight:700; cursor:pointer;
  color:var(--text-secondary); padding:0;
}
.fx-di-dia.on{ background:var(--green); border-color:var(--green); color:#fff; }
.fx-di-diasmes{ display:flex; flex-wrap:wrap; gap:4px; }
.fx-di-flag{
  border:1.5px solid var(--border-strong); background:transparent; color:var(--text-secondary);
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:99px; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
}
.fx-di-flag.on{ background:var(--green); border-color:var(--green); color:#fff; }

/* ---------- Agenda: caixa "Tarefas diárias" na lateral (2026-08-12) ---------- */
.ag-diarias{
  margin-top:14px; display:flex; flex-direction:column; flex:1 1 auto; min-height:90px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface-1); padding:10px 12px;
}
.ag-diarias.atrasada{ border-color:#B4322F; background:rgba(180,50,47,.08); }
html[data-tema="escuro"] .ag-diarias.atrasada{ background:rgba(180,50,47,.18); }
/* 2026-08-20 (pedido do Fred): fonte ~20% menor e linhas mais juntas, para
   caber mais tarefa na mesma caixa. O título agora é o NOME DO PROJETO,
   escrito pelo JS — um por bloco, dentro da lista (por isso o margin-top,
   que o :first-child zera para o primeiro bloco não descolar do topo). */
.ag-diarias-titulo{ font-size:10px; font-weight:700; margin:10px 0 3px; }
.ag-diarias-titulo:first-child{ margin-top:0; }
.ag-diarias-lista{ overflow-y:auto; min-height:0; flex:1 1 auto; }
.ag-diarias-item{ display:flex; align-items:center; gap:7px; padding:3px 0; }
.ag-diarias-sep{ border:none; border-top:1px dashed var(--border); margin:0; }
.ag-diarias-tick{
  width:17px; height:17px; border-radius:50%; border:2px solid var(--border-strong);
  background:transparent; cursor:pointer; color:#fff; font-size:9px; line-height:1;
  flex-shrink:0; padding:0;
}
.ag-diarias-item.feita .ag-diarias-tick{ background:var(--green); border-color:var(--green); }
.ag-diarias-tick:hover:not(:disabled){ border-color:var(--green); }
.ag-diarias-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.ag-diarias-hora{ font-size:8.5px; font-weight:700; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.ag-diarias-nome{ font-size:10px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-diarias-item.feita .ag-diarias-nome{ text-decoration:line-through; opacity:.6; }
.ag-diarias-item.atrasada .ag-diarias-nome{ color:#B4322F; }

/* modelos de pendência no portal do cliente (2026-08-10) */
.pc-pend-modelos{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.pc-pend-modelo{
  border:1.5px solid var(--border-strong); background:var(--surface-2);
  border-radius:99px; padding:7px 13px; font-size:12px; font-weight:650;
  color:var(--text-secondary); cursor:pointer;
}
.pc-pend-modelo:hover{ border-color:var(--green); color:var(--text-primary); }
.pc-pend-modelo.on{ background:var(--green); border-color:var(--green); color:#fff; }
.pc-pend-form .field{ margin-bottom:14px; }

/* cartões GRANDES de produto nas Entregas do portal do cliente (2026-08-10) */
.pc-prods{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:16px; }
.pc-prod{
  position:relative; display:flex; flex-direction:column; gap:9px;
  padding:24px 22px 18px; min-height:176px; border-radius:16px;
  border:1.5px solid var(--border); background:var(--surface-2); overflow:hidden;
  text-decoration:none; color:var(--text-primary);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.pc-prod::before{ content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--pp,#185FA5); }
.pc-prod::after{
  content:""; position:absolute; right:-46px; top:-46px; width:150px; height:150px;
  border-radius:50%; background:var(--pp,#185FA5); opacity:.07; pointer-events:none;
}
.pc-prod:hover{ transform:translateY(-3px); border-color:var(--pp,#185FA5); box-shadow:0 14px 32px rgba(19,24,41,.14); }
.pc-prod-topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pc-prod-cod{ font-size:11.5px; font-weight:800; letter-spacing:.07em; color:var(--pp,#185FA5); }
.pc-prod-badge{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px;
  background:var(--surface-1); border:1px solid var(--border); color:var(--text-secondary);
}
.pc-prod-nome{ font-size:19px; font-weight:750; line-height:1.25; letter-spacing:-.01em; }
.pc-prod-etapas{ font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.pc-prod-barra{ height:7px; border-radius:99px; background:rgba(19,24,41,.08); overflow:hidden; }
html[data-tema="escuro"] .pc-prod-barra{ background:rgba(255,255,255,.10); }
.pc-prod-barra i{ display:block; height:100%; border-radius:99px; background:var(--pp,#185FA5); }
.pc-prod-abrir{
  margin-top:auto; display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; color:var(--pp,#185FA5);
}
.pc-prod:hover .pc-prod-abrir svg{ transform:translateX(3px); }
.pc-prod-abrir svg{ transition:transform .14s ease; }
.fx-barra{ height:8px; background:rgba(19,24,41,.08); border-radius:99px; overflow:hidden; margin-top:8px; }
.fx-barra.grande{ height:11px; margin-bottom:14px; }
.fx-barra i{ display:block; height:100%; border-radius:99px; background:var(--green); transition:width .2s; }
.fx-okr-total{ display:flex; align-items:baseline; gap:10px; border-top:1px solid var(--border); padding-top:12px; margin-top:6px; }
.fx-okr-total b{ font-size:30px; font-weight:800; letter-spacing:-.02em; }
.fx-okr-total span{ font-size:12.5px; color:var(--text-secondary); }
.fx-scrum-cfg{ display:flex; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.fx-scrum-cfg label{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.fx-scrum-cfg input{ width:80px; }
.fx-bmc{ display:grid; grid-template-columns:repeat(10,1fr); gap:8px; }
.fx-bmc .fx-cartao{ margin-bottom:0; }
.fx-bmc .b-kp{ grid-column:span 2; grid-row:span 2; }
.fx-bmc .b-ka{ grid-column:span 2; }
.fx-bmc .b-vp{ grid-column:span 2; grid-row:span 2; }
.fx-bmc .b-cr{ grid-column:span 2; }
.fx-bmc .b-cs{ grid-column:span 2; grid-row:span 2; }
.fx-bmc .b-kr{ grid-column:span 2; }
.fx-bmc .b-ch{ grid-column:span 2; }
.fx-bmc .b-cost{ grid-column:span 5; }
.fx-bmc .b-rev{ grid-column:span 5; }
@media(max-width:900px){ .fx-bmc{ grid-template-columns:1fr 1fr; } .fx-bmc .fx-cartao{ grid-column:span 1 !important; grid-row:auto !important; } .fx-bmc .b-cost, .fx-bmc .b-rev{ grid-column:span 2 !important; } .fx-swot{ grid-template-columns:1fr; } }
.fx-s5{
  display:flex; gap:12px; align-items:flex-start; background:var(--surface-2);
  border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:10px;
}
.fx-s5.feito{ border-color:var(--green); }
.fx-s5 input[type=checkbox]{ width:18px; height:18px; margin-top:3px; accent-color:var(--green); }
.fx-s5-corpo{ flex:1; }
.fx-s5-corpo h4{ font-size:13.5px; margin-bottom:2px; }
.fx-s5-corpo input{ margin-top:7px; }
/* desenho do Fluxograma — cada passo é um bloco posicionado em coordenadas
   calculadas no wf_ferramentas.js e as linhas saem num <svg> por baixo. Era
   uma árvore de <ul>/<li> com bordas em ::before/::after, mas dois ramos podem
   terminar no MESMO passo (a "união" da correntinha) e um <li> só sabe ter um
   pai — o passo unificado aparecia duas vezes. (2026-08-14, pedido do Fred) */
.fx-flow-scroll{ overflow-x:auto; padding:4px 2px 8px; }

/* ---- as 4 setas de criar passo (26/08/2026) — aparecem só no hover ---- */
.fx-seta{
  position:absolute; width:22px; height:22px; padding:0; z-index:6;
  display:none; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); border-radius:50%;
  background:var(--surface-0, #fff); color:var(--text-secondary);
  font-size:12px; line-height:1; cursor:pointer;
  box-shadow:0 1px 4px rgba(3,16,38,.14);
}
.fx-fnode:hover > .fx-seta{ display:flex; }
.fx-seta:hover{ background:var(--green); border-color:var(--green); color:#fff; }
.fx-seta-b{ bottom:-11px; left:50%; transform:translateX(-50%); }
.fx-seta-t{ top:-11px; left:50%; transform:translateX(-50%); }
.fx-seta-l{ left:-11px; top:50%; transform:translateY(-50%); }
.fx-seta-r{ right:-11px; top:50%; transform:translateY(-50%); }

/* arrastando um quadrado para pendurá-lo em outro */
.fx-fnode.fx-arrastando{ opacity:.45; }
.fx-fnode.fx-drop-alvo{ outline:2px dashed var(--green); outline-offset:3px; }

/* "Ligar de:" no painel de editar — a linha inteira desembocando num passo */
.fx-lig-tit{ width:100%; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); margin:8px 0 2px; }
.fx-lig-opc{ display:flex; gap:6px; align-items:center; font-size:12.5px; cursor:pointer; max-width:100%; }
.fx-lig-opc span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-flow-mapa{ position:relative; margin:0 auto; }
.fx-flow-svg{ position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
.fx-flow-svg path{ fill:none; stroke:var(--border-strong); stroke-width:1.5; }
.fx-fnode{
  display:flex; gap:6px; align-items:center; width:min(520px,100%);
  border:1.5px solid var(--border-strong); background:var(--surface-2);
  border-radius:10px; padding:6px 10px;
}
/* só no funil de Ads a borda do quadradinho abre a página do vídeo (pedido
   do Matteo, 28/08) — o cursor avisa isso sem mexer no fluxograma dos
   Projetos, que usa a mesma classe .fx-fnode mas não tem esse clique */
.adsfx-cartao .fx-fnode{ cursor:pointer; }
.adsfx-cartao .fx-fnode-txt, .adsfx-cartao .fx-seta, .adsfx-cartao .fx-flow-toolbar{ cursor:auto; }
/* dentro do mapa o passo tem largura fixa (o mesmo LARG_NO do JS — mexeu num,
   mexa no outro, senão a linha não cai no meio do quadradinho) */
.fx-flow-mapa .fx-fnode{
  position:absolute; flex-direction:column; align-items:stretch;
  width:220px; box-sizing:border-box;
}
.fx-fnode.decisao{ border-style:dashed; background:rgba(24,95,165,.05); }

/* =====================================================================
   IMAGEM COLADA NUM PASSO DO FLUXOGRAMA (15/09/2026)
   Largura travada na do quadrado; só a altura muda, pela alça de baixo.
   `cover` corta o excedente em vez de espremer — a imagem inteira abre
   no pop-up (.fx-lupa).
   ===================================================================== */
.fx-no-img{
  position:relative; width:100%; margin-top:5px;
  border-radius:7px; overflow:hidden; background:rgba(0,0,0,.05);
}
.fx-no-img img{
  width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;
}
/* alça e ✕ só no hover: quadrado parado é desenho, não painel de botões */
.fx-no-img-alca{
  position:absolute; left:0; right:0; bottom:0; height:10px;
  cursor:ns-resize; opacity:0; transition:opacity .12s;
  background:linear-gradient(to top, rgba(11,15,26,.45), transparent);
}
.fx-no-img-alca::after{
  content:''; position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:26px; height:2px; border-radius:2px; background:rgba(255,255,255,.9);
}
.fx-no-img-x{
  position:absolute; top:4px; right:4px; width:19px; height:19px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:rgba(11,15,26,.55); color:#fff;
  font-size:11px; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s;
}
.fx-no-img:hover .fx-no-img-alca, .fx-no-img:hover .fx-no-img-x{ opacity:1; }
.fx-no-img-x:hover{ background:#B4322F; }

/* recado rápido no rodapé — o substituto do alert(), que congelava a tela */
.fx-recado{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 14px);
  z-index:2000; max-width:min(520px, 92vw);
  background:var(--text-primary); color:var(--surface-0);
  padding:11px 18px; border-radius:99px; font-size:13px; font-weight:600;
  box-shadow:0 10px 30px rgba(19,24,41,.3);
  opacity:0; pointer-events:none; transition:opacity .16s, transform .16s;
}
.fx-recado.aparece{ opacity:1; transform:translate(-50%, 0); }

/* «não estou conseguindo salvar»: impossível de não ver (16/09/2026) */
.fx-nao-salvou{
  position:fixed; top:0; left:0; right:0; z-index:2000;
  background:#B4322F; color:#fff; text-align:center;
  padding:11px 16px; font-size:13px; font-weight:700; line-height:1.45;
  box-shadow:0 4px 18px rgba(0,0,0,.28);
}

/* a lupa: a imagem inteira no meio da página, com o resto escurecido */
.fx-lupa{
  position:fixed; inset:0; z-index:1200; cursor:zoom-out;
  background:rgba(8,11,20,.88); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:10px;
}
/* ⚠️ A LUPA OCUPA A TELA (16/09/2026: «está abrindo muito pequena», duas
   vezes).
   1ª tentativa: `max-width`. Não resolve — ele só IMPEDE de crescer, e a
      imagem parava no tamanho natural dela, que é uma versão reduzida.
   2ª tentativa: caixa de `min(1600px, 96vw)` com `object-fit:contain`. A
      imagem passou a crescer, mas o teto de 1600px é pequeno em tela
      grande: na dele, de 2560, dava 62% da largura — ainda «pequena».
   Agora não há teto em pixel nenhum: a caixa é a tela menos uma margem, e
   o `contain` faz a imagem encostar em cima e embaixo ou nos dois lados,
   sempre na proporção certa. Sem fundo e sem canto arredondado: eles
   apareceriam como moldura no espaço que sobra ao lado da imagem. */
.fx-lupa img{
  width:97vw; height:95vh; object-fit:contain;
  filter:drop-shadow(0 22px 60px rgba(0,0,0,.55));
}
.fx-fnode input, .fx-fnode .fx-fnode-txt{ border:0; background:transparent; font-size:13px; padding:2px 4px; height:auto; text-align:center; font-weight:650; }
/* o texto do passo quebra em várias linhas e o quadradinho cresce junto: o
   quadradinho tem largura fixa, então nome comprido sumia para fora do campo
   (2026-08-14, pedido do Fred pela fila). A altura quem manda é o JS
   (`encaixarCampo`), por isso `min-height:0`, sem barra de rolagem e sem a
   alcinha de redimensionar — puxá-la desencontraria o traço do quadradinho. */
.fx-fnode .fx-fnode-txt{
  display:block; font-family:inherit; line-height:1.25;
  min-height:0; resize:none; overflow:hidden; word-break:break-word;
}
/* barra do passo: linha de ícones (duplicar/próximo/unificar/deletar/editar)
   e, quando "editar" está aberto, o painel de tipo/cor logo abaixo */
.fx-flow-toolbar{ width:100%; margin-top:7px; padding-top:6px; border-top:1px solid var(--border); }
.fx-no-corpicker{ width:20px !important; height:20px; padding:1px !important; border-radius:6px; flex-shrink:0; cursor:pointer; }

/* quadro flutuante da correntinha: a lista de passos abre FORA da barra de
   ícones (nasce no document.body e é ancorada no botão), senão ela espremia
   os ícones e um ficava por cima do outro */
.fx-uni-pop{
  position:fixed; z-index:1200; width:250px;
  background:var(--surface-1); border:1px solid var(--border-strong);
  border-radius:12px; box-shadow:0 10px 30px rgba(19,24,41,.18); padding:9px;
}
.fx-uni-tit{ font-size:11px; font-weight:700; color:var(--text-muted); margin-bottom:7px; }
.fx-uni-lista{ display:flex; flex-direction:column; gap:4px; max-height:230px; overflow-y:auto; }
.fx-uni-opc{
  width:100%; text-align:left; border:1px solid var(--border); background:var(--surface-2);
  border-radius:8px; padding:6px 9px; font-size:12.5px; font-weight:650; cursor:pointer;
  color:var(--text-primary);
}
.fx-uni-opc:hover{ background:rgba(19,24,41,.06); border-color:var(--border-strong); }
.fx-uni-atual{ border-color:#185FA5; background:#EFF4FA; color:#185FA5; }
.fx-uni-desfazer{
  margin-top:8px; width:100%; border:1px solid rgba(180,50,47,.4); background:#FDF3F2;
  color:#B4322F; border-radius:8px; padding:6px 9px; font-size:12px; font-weight:650; cursor:pointer;
}
.fx-uni-desfazer:hover{ background:#FBE9E7; }

/* atalho de Cobrança no Financeiro — vermelho só quando há atraso */
.btn-cobranca{
  display:inline-flex; align-items:center; gap:7px;
  background:#FDF3F2; border:1px solid #F0C9C7; color:#B4322F; font-weight:650;
}
.btn-cobranca:hover{ background:#FBE9E7; border-color:#E5A9A6; }
.btn-cobranca-badge{
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  padding:2px 7px; border-radius:999px; background:rgba(180,50,47,.13);
}

/* ---------- Cobrança: só o que venceu e não entrou ---------- */
.cob-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.cob-card{
  display:flex; flex-direction:column; gap:3px; padding:13px 15px;
  border-radius:var(--radius); border:1px solid var(--border); background:var(--surface-2);
}
.cob-card span{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.cob-card b{ font-size:20px; font-weight:750; letter-spacing:-.02em; }
.cob-card-alerta{ border-color:#F0C9C7; background:#FDF3F2; }
.cob-card-alerta b{ color:#B4322F; }

/* tabela de cobrança: uma linha por cliente + produto */
.cob-tabela th.num, .cob-tabela td.num{ text-align:right; white-space:nowrap; }
.cob-linha{ border-left:4px solid transparent; }
.cob-linha.leve{ border-left-color:#E0A82E; }
.cob-linha.media{ border-left-color:#D97A2B; }
.cob-linha.grave{ border-left-color:#B4322F; }
.cob-cli{ font-weight:700; font-size:13.5px; }
.cob-cli a{ color:inherit; text-decoration:none; }
.cob-cli a:hover{ text-decoration:underline; }
.cob-cli-sub{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.cob-atraso-mini{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:1px 6px; border-radius:999px; background:rgba(180,50,47,.11); color:#B4322F;
}
.cob-doc{ font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--text-secondary); white-space:nowrap; }
.cob-contrato{ display:block; font-size:10.5px; color:var(--text-muted); margin-top:1px; }
.cob-meses{ font-size:12.5px; color:var(--text-secondary); }
.cob-total{ font-weight:750; color:#B4322F; }
.cob-total small{ display:block; font-size:10.5px; font-weight:500; color:var(--text-muted); }
.cob-acoes-td{ white-space:nowrap; }
.cob-acoes-td .cob-link{ margin-left:8px; }
.cob-acoes-td .cob-link:first-child{ margin-left:0; }
.cob-abrir{
  background:transparent; border:0; border-bottom:1px dotted var(--border-strong);
  cursor:pointer; padding:0; font-size:12px; color:var(--text-secondary); font-family:inherit;
}
.cob-abrir.aberto{ color:var(--text-primary); font-weight:650; }
.cob-detalhe > td{ background:rgba(19,24,41,.03); padding:8px 14px !important; }
.cob-rodape{ text-align:right; font-weight:650; font-size:12.5px; color:var(--text-secondary); }
.cob-total-geral{ font-weight:800; font-size:14px; color:#B4322F; }

.cob-cliente{
  border:1px solid var(--border); border-left:4px solid var(--border-strong);
  border-radius:var(--radius); background:var(--surface-2);
  margin-bottom:12px; overflow:hidden;
}
.cob-cliente.leve{ border-left-color:#E0A82E; }
.cob-cliente.media{ border-left-color:#D97A2B; }
.cob-cliente.grave{ border-left-color:#B4322F; }
.cob-cliente-topo{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.cob-cliente-id{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:14.5px; font-weight:700; }
.cob-cliente-id a{ color:inherit; text-decoration:none; }
.cob-cliente-id a:hover{ text-decoration:underline; }
.cob-atraso{
  font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:rgba(180,50,47,.11); color:#B4322F;
}
.cob-cliente-contato{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:1; }
.cob-link{ font-size:12px; color:var(--text-secondary); text-decoration:none; border-bottom:1px dotted var(--border-strong); }
.cob-link:hover{ color:var(--text-primary); }
.cob-sem-contato{ font-size:11.5px; color:var(--text-muted); font-style:italic; }
.cob-cliente-total{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; margin-left:auto; }
.cob-cliente-total span{ font-size:11px; color:var(--text-muted); }
.cob-cliente-total b{ font-size:16px; font-weight:750; color:#B4322F; }

.cob-item{ border-bottom:1px solid rgba(19,24,41,.05); }
.cob-item:last-child{ border-bottom:0; }
.cob-item > summary{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 16px; cursor:pointer; font-size:13px; list-style:none;
}
.cob-item > summary::-webkit-details-marker{ display:none; }
.cob-item > summary:hover{ background:rgba(19,24,41,.03); }
.cob-item[open] > summary{ background:rgba(19,24,41,.04); }
.cob-venc{ font-variant-numeric:tabular-nums; color:var(--text-secondary); width:78px; flex-shrink:0; }
.cob-dias{
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  padding:2px 6px; border-radius:6px; background:rgba(180,50,47,.1); color:#B4322F; flex-shrink:0;
}
.cob-desc{ font-weight:500; }
.cob-origem{ font-size:11.5px; color:var(--text-muted); }
.cob-chip-parcial{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:2px 7px; border-radius:999px; background:rgba(224,168,46,.16); color:#8A6110;
}
.cob-valor{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }

@media (max-width:800px){
  .cob-cliente-total{ margin-left:0; align-items:flex-start; }
  .cob-venc{ width:auto; }
  .cob-valor{ margin-left:0; }
}

/* ---------- contrato: como o cliente vai pagar (etapa 20) ---------- */
.ct-cobranca-opcoes{ display:flex; gap:10px; flex-wrap:wrap; }
.ct-cobranca-op{
  flex:1 1 200px; display:flex; flex-direction:column; gap:2px; cursor:pointer;
  padding:11px 13px; border-radius:var(--radius); border:1.5px solid var(--border);
  background:var(--surface-2); transition:border-color .12s, background .12s;
}
.ct-cobranca-op:hover{ border-color:var(--border-strong); }
.ct-cobranca-op.ativo{ border-color:var(--green); background:rgba(118,184,42,.07); }
.ct-cobranca-op input{ position:absolute; opacity:0; pointer-events:none; }
.ct-cobranca-op b{ font-size:13px; font-weight:650; }
.ct-cobranca-op small{ font-size:11px; color:var(--text-muted); line-height:1.35; }
.ct-parcelas-calc{
  display:flex; align-items:center; min-height:40px; padding:0 12px;
  border-radius:var(--radius); border:1px dashed var(--border-strong);
  background:rgba(118,184,42,.06); color:var(--text-secondary);
  font-size:13px; font-weight:600;
}
.ct-parcelas-calc.erro{ background:#FDECEC; border-color:#F6D6D5; color:#8F2523; }

/* ---------- painel de fluxo em LINHAS (2026-08-04) ---------- */
/* uma linha por cliente, células em grade fixa: nada quebra, tudo alinhado,
   com linha fina separando as colunas e blocos altos, bem espaçados */
.pfl-wrap{ overflow-x:auto; }
/* gap 14px -> 5px (2026-08-10, pedido do Fred): o vao entre os cartoes
   comia tela sem informar nada. Vale para o Painel de Fluxo E para as
   listas de Leads — as duas usam .pfl. */
.pfl{ display:flex; flex-direction:column; gap:5px; min-width:900px; }
.pfl-linha{
  display:grid;
  grid-template-columns:minmax(170px,1.5fr) minmax(140px,1.1fr) 84px minmax(180px,1.4fr) 120px minmax(160px,.9fr) 40px;
  gap:0; align-items:stretch;
}
.pfl-cab{ padding:0 6px; }
.pfl-cab > span{
  padding:0 16px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-muted);
}
.pfl-item{
  border:1.5px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface-2); box-shadow:var(--shadow-sm);
  transition:border-color .12s, box-shadow .12s;
}
.pfl-item:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-md, var(--shadow-sm)); }
.pfl-item.tem-atraso{ border-left:3px solid #B4322F; }
/* pendência de verdade (2026-08-12): amarelo/âmbar, vence o vermelho de
   atraso — não é demora nossa, é o cliente que está devendo algo.
   Cor ajustada no mesmo dia: o amber #B4671B lia como marrom/cinza escuro
   ao lado do vermelho e do verde — trocado por #8A6110 (o mesmo tom de
   "pendente" já usado noutro canto do Portal), pra ficar claramente da
   família do amarelo. Clareado em 2026-08-13 (pedido do Matteo) para
   #A9750C: o #8A6110 lia escuro/acastanhado demais na borda, no nome do
   cliente e no número — este é mais claro, mantendo força/contraste. */
.pfl-item.tem-pendencia{ border-left:3px solid #A9750C; }
.pfl-pend-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px; margin-right:6px;
  background:#B4671B; color:#fff; font-size:10px; font-weight:700;
  line-height:1; border-radius:999px; vertical-align:middle; flex-shrink:0;
}
/* bloco ABERTO fica inteiro destacado em relação aos outros. No Painel de
   Fluxo o resto da página ainda escurece por baixo (.pfl-escuro, 2026-08-10
   — mesmo efeito do gerenciamento de agendas), por isso o z-index. */
.pfl-item[open]{
  border-color:var(--green);
  box-shadow:0 8px 26px rgba(19,24,41,.12), 0 0 0 2px rgba(118,184,42,.22);
  position:relative; z-index:60;
}
/* Aberto, a borda segue a MESMA situação do chip da linha (2026-08-12,
   pedido do Matteo) — antes ficava sempre verde, mesmo com o cliente
   atrasado ou com pendência dele. */
.pfl-item.tem-atraso[open]{
  border-color:#B4322F;
  box-shadow:0 8px 26px rgba(19,24,41,.12), 0 0 0 2px rgba(180,50,47,.22);
}
.pfl-item.tem-pendencia[open]{
  border-color:#A9750C;
  box-shadow:0 8px 26px rgba(19,24,41,.12), 0 0 0 2px rgba(169,117,12,.22);
}
.pfl-escuro{
  position:fixed; inset:0; z-index:55; border:0; padding:0; margin:0;
  background:rgba(11,15,26,.34); -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
  cursor:pointer; animation:cfg-fade .16s ease-out;
}
.pfl-item[open] > summary{ background:rgba(118,184,42,.05); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.pfl-item.tem-atraso[open] > summary{ background:rgba(180,50,47,.05); }
.pfl-item.tem-pendencia[open] > summary{ background:rgba(169,117,12,.05); }
.pfl-item summary{ list-style:none; cursor:pointer; padding:0 6px; }
.pfl-item summary::-webkit-details-marker{ display:none; }
.pfl-item[open] summary .pfl-abrir{ transform:rotate(180deg); }
/* cada célula tem o próprio respiro vertical — a borda esquerda vira a
   linha fina de separação entre as colunas, na altura toda do bloco */
/* 19px -> 13px de altura: junto com o gap menor, cabe bem mais linha na
   tela sem apertar o texto (2026-08-10) */
.pfl-item summary > *{
  padding:13px 16px; border-left:1px solid var(--border);
}
.pfl-item summary > :first-child{ border-left:0; }
.pfl-cel{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:13px; color:var(--text-secondary); min-width:0; line-height:1.5;
}
.pfl-cliente{ font-weight:650; color:var(--text-primary); font-size:13.5px; }
/* Quadrado do nome do cliente, colorido pela situação do contrato
   (2026-08-12, pedido do João — mesmo estilo do chip de Status dos
   Leads). Vermelho e verde reaproveitam o tom já usado no chip da coluna
   Status desta mesma tela.
   O amarelo mudou no mesmo dia (2ª rodada): o #FFED29 original era um
   amarelo puro e saturado — forte demais perto do vermelho/verde, que são
   claros e suaves. Trocado por um par leve, no mesmo padrão dos outros
   dois: fundo pastel + texto escuro (mesmo #A9750C do border-left acima,
   pra fundo e lateral lerem como a MESMA cor amarela — clareado de
   #8A6110 em 2026-08-13). */
.pfl-cliente-caixa{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:8px;
  font-weight:650;
}
.pfl-cliente-caixa--atraso{ background:#FDEAEA; color:#B22228; }
.pfl-cliente-caixa--pendencia{ background:#FDF3C7; color:#A9750C; }
.pfl-cliente-caixa--ok{ background:#EAF6DA; color:#3D6B14; }
.pfl-cliente-caixa .pfl-pend-badge{ background:#A9750C; }
.pfl-num{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-primary); font-size:14px; }
.pfl-prazo-atraso{ color:#B4322F; font-weight:650; }
.pfl-chip{ display:inline-block; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.pfl-chip.ok{ background:#EAF6DA; color:#3D6B14; }
.pfl-chip.atraso{ background:#FDEAEA; color:#B22228; }
.pfl-chip.done{ background:#ECEBFD; color:#453BA0; }
/* célula da setinha: sem reticências de overflow (era o "⋯" fantasma) */
.pfl-item summary > .pfl-abrir{
  text-align:center; color:var(--text-muted); transition:transform .15s;
  padding-left:4px; padding-right:4px; overflow:visible; text-overflow:clip;
}
.pfl-acoes{ padding:0 20px 16px; border-top:1px dashed var(--border); }
.pfl-acoes-links{ display:flex; gap:8px; padding-top:12px; flex-wrap:wrap; }

/* ---------- upload em massa: os modelos disponíveis lado a lado ---------- */
.um-modelos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
.um-modelo{
  border:1.5px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface-2); padding:13px 15px;
  display:flex; flex-direction:column; gap:4px;
}
.um-modelo.atual{ border-color:var(--green); box-shadow:0 0 0 2px rgba(118,184,42,.16); }
.um-modelo-nome{ font-size:14px; font-weight:700; }
.um-modelo-cols{ font-size:11.5px; color:var(--text-muted); }
.um-modelo-acoes{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }

/* ---------- LEADS: listas no padrão do Painel de Fluxo ---------- */
/* Lista de Leads: lead · contato · ramo · produto · etapa · origem · próximo */
.pfl-leads .pfl-linha{
  grid-template-columns:minmax(170px,1.4fr) minmax(140px,1.1fr) minmax(120px,1fr) minmax(130px,1fr) 130px minmax(110px,.9fr) 110px;
}

/* produto trocável na própria linha do painel (2026-08-06) */
.lead-sel-produto{
  width:100%; height:30px; padding:2px 6px; font-size:12.5px;
  border:1px solid transparent; border-radius:7px; background:transparent;
  color:var(--text-primary); cursor:pointer;
}
.lead-sel-produto:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.lead-sel-produto:focus{ border-color:var(--green); background:var(--surface-2); }

/* vendedor trocável na própria linha do painel (2026-09-04) */
.lead-sel-vendedor{
  width:100%; height:30px; padding:2px 6px; font-size:12.5px;
  border:1px solid transparent; border-radius:7px; background:transparent;
  color:var(--text-primary); cursor:pointer;
}
.lead-sel-vendedor:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.lead-sel-vendedor:focus{ border-color:var(--green); background:var(--surface-2); }

/* "Já falei" no popup do próximo contato: some a data e o atraso */
.lead-bt-jafalei{ padding:8px 14px; color:var(--green-dark); font-weight:650; }
.lead-bt-jafalei:hover{ background:var(--green-soft); }

/* botão "Contatei": rótulo em cima, data e quem embaixo */
.lead-form-toque{ margin:0; width:100%; }
/* A altura da LINHA inteira era ditada por esta caixa, que empilha tres
   textos (rotulo, data, quem). Achatada em 2026-08-11 a pedido do Fred:
   padding e entrelinha menores deixam a linha visivelmente mais fina sem
   perder nenhuma informacao. */
.lead-bt-toque{
  display:flex; flex-direction:column; align-items:center; gap:0;
  width:100%; padding:2px 6px; cursor:pointer; font-family:inherit;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:8px; color:var(--text-secondary); line-height:1.1;
}
.lead-bt-toque:hover{ border-color:var(--green); background:var(--green-soft); }
/* Cor pelo tempo desde o último contato (2026-08-06, +hoje em
   04/09/2026): contatado HOJE = verde escuro (só nesse dia) · até 3 dias
   verde claro · 4 a 10 laranja · 11+ vermelho. "hoje" é a única em tom
   SÓLIDO/escuro de propósito — pedido do Fred para destacar quem foi
   falado agora mesmo, sem confundir com o verde claro de "fresco" (que já
   inclui contatos de até 3 dias atrás). Por ser escura, o texto de dentro
   vira branco (ver as três regras de `.hoje` logo abaixo das de cor). */
.lead-bt-toque.hoje  { background:var(--green-dark); border-color:#4E8117; }
.lead-bt-toque.fresco{ background:#EDF7E2; border-color:#CBE4A8; }
.lead-bt-toque.morno { background:#FFF3E0; border-color:#F2D6A8; }
.lead-bt-toque.frio  { background:#FDECEC; border-color:#F3C9C7; }
.lead-bt-toque.hoje:hover  { background:#4E8117; border-color:#3E650F; }
.lead-bt-toque.fresco:hover{ background:#E4F2D3; border-color:#A9CE79; }
.lead-bt-toque.morno:hover { background:#FFEBCE; border-color:#E0B370; }
.lead-bt-toque.frio:hover  { background:#FBDDDC; border-color:#E5A29F; }
.lead-bt-toque.fresco .lead-toque-quando{ color:#3E7113; }
.lead-bt-toque.morno .lead-toque-quando { color:#9A5C10; }
.lead-bt-toque.frio .lead-toque-quando  { color:#A8403D; }
/* ⚠️ ".hoje.tem" (3 classes), não ".hoje" sozinho: as regras de baixo
   (".tem" e ".tem .lead-toque-rot") têm a mesma especificidade das de
   texto claro acima e vêm DEPOIS no arquivo — sem a classe a mais aqui,
   elas venceriam a cascata e o texto voltaria a ficar cinza escuro em
   cima do fundo verde escuro, ilegível. */
.lead-bt-toque.hoje.tem{ color:#fff; }
.lead-bt-toque.hoje.tem .lead-toque-rot{ color:rgba(255,255,255,.85); }
.lead-bt-toque.hoje .lead-toque-quando{ color:#fff; }
.lead-bt-toque.hoje .lead-toque-quem { color:rgba(255,255,255,.78); }
.lead-toque-rot{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.lead-bt-toque.tem{ color:var(--text-primary); }
/* com data preenchida o rotulo "CONTATEI" fica miudo: e so o titulo da
   caixa, quem importa e a data e quem fez */
.lead-bt-toque.tem .lead-toque-rot{ color:var(--text-muted); font-size:8.5px; }
.lead-toque-quando{ font-size:11px; font-weight:650; white-space:nowrap; }
.lead-toque-quem{ font-size:8.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
span.lead-bt-toque{ cursor:default; justify-content:center; }
/* Painel de Leads: etapa · status · lead · produto · obs · próximo · fechou
   As três últimas têm largura fixa suficiente para o botão inteiro caber;
   o espaço que sobra vai quase todo para o nome do lead (2026-08-05). */
/* Larguras alargadas em 2026-08-11: "CONTRATO" virava "CONTRATC" e
   "FORMATAÇÃO" virava "FORMAT" dentro dos <select>. Palavra cortada em
   coluna nenhuma (pedido do Fred), entao etapa/status/produto ganharam
   espaco e a tabela inteira ficou mais larga — ela ja rola na horizontal
   quando a tela e estreita (.pfl-wrap). */
/* Reunião, faturamento e observações entraram como colunas estreitas de
   símbolo (2026-08-11): o conteúdo é um ícone, um "<50K" ou um número. */
/* Status apertado no talo e o que sobrou foi para PRODUTO (2026-08-12,
   pedido do Fred: "reduz o maximo que da sem pegar na letra"). A maior
   palavra do status e QUALIFICANDO, que mede 97px nesta fonte; com o
   respiro do <select> e o padding da celula, 158px e o minimo que nao
   corta — 32px a menos que os 190px de antes, e esses 32px foram TODOS
   para a coluna de produto. O status tambem deixou de crescer (era
   .95fr): espaco sobrando agora vai para lead e produto, nao para uma
   pilula que ja cabe. */
/* Vendedor entrou em 04/09/2026 (pedido do Fred) entre produto e as
   colunas-ícone. Para caber sem alargar a tabela, quatro colunas
   encolheram para o mínimo que o conteúdo delas realmente usa —
   etapa e produto têm palavra bem mais curta que o espaço que tinham
   (a mais longa de etapa é "Desistência"/"Qualificado", 11 letras,
   contra "QUALIFICANDO" do status ali do lado, que é quem exige os
   158px fixos — não mexer nele); fechou é uma palavra só. ⚠️ Próximo
   contato encolheu POUCO de propósito: o texto ali (data + hora,
   "04/09/2026 14:30") usa `white-space:nowrap` SEM ellipsis — diferente
   de produto, que QUEBRA linha em vez de cortar (ver `.pfl-cel-produto`),
   então uma coluna curta demais ali só deixa a linha mais alta, nunca
   corta a hora sem avisar. Vendedor é o oposto: desde que passou a
   mostrar só o primeiro nome (mesmo dia), o rótulo NUNCA quebra linha —
   por isso o mínimo dele foi alargado de 100 para 130px (pedido do
   Fred: "não deixar cortado"), em vez de fazer quebrar. */
.pfl-painel-leads .pfl-linha{
  grid-template-columns:
    minmax(148px, .7fr)    /* etapa   */
    158px                  /* status  */
    minmax(180px, 1.5fr)   /* lead    */
    38px                   /* WhatsApp — só o ícone (2026-08-26) */
    minmax(122px, .9fr)    /* produto */
    minmax(130px, .7fr)    /* vendedor (2026-09-04, alargado no mesmo dia — sem quebra, ver nota acima) */
    54px                   /* reunião — só o calendarinho */
    68px                   /* faturamento — <100K é o mais largo */
    54px                   /* obs — só o número */
    116px                  /* contatei (2026-08-06) */
    132px                  /* próximo contato */
    80px;                  /* fechou  */
}
.pfl-painel-leads{ min-width:1280px; }  /* soma das colunas acima */
/* Painel de Recompra (2026-09-14, pedido do Fred: "eu queria que você
   tentasse deixar sem barra de rolagem"). Onze colunas em vez de doze —
   sem WhatsApp, que ali é sempre vazio (cadastrar_recompra.php nunca
   pergunta telefone) — e Vendedor/Próximo contato mais estreitos: aqui
   quem fecha a recompra é sempre alguém do time interno (nome curto,
   cabe em bem menos que os 130px pensados para qualquer vendedor), e a
   data do próximo contato pode quebrar em duas linhas sem problema (não
   corta, só fica mais alta — ver nota do Painel de Leads acima). */
.pfl-painel-leads.pfl-recompra .pfl-linha{
  grid-template-columns:
    minmax(148px, .7fr)   /* etapa   */
    158px                 /* status  */
    minmax(180px, 1.5fr)  /* lead    */
    minmax(122px, .9fr)   /* produto */
    72px                  /* vendedor — cabe um primeiro nome curto */
    54px                  /* reunião */
    68px                  /* faturamento */
    54px                  /* obs */
    116px                 /* contatei */
    104px                 /* próximo contato — quebra em duas linhas se precisar */
    80px;                 /* fechou */
}
.pfl-painel-leads.pfl-recompra{ min-width:1156px; }
/* a célula do WhatsApp: só o botão, centralizado */
.pfl-painel-leads .pfl-zap{ display:flex; align-items:center; justify-content:center; padding:0; }
/* o <select> tem que caber inteiro na celula, sem cortar a palavra */
.pfl-painel-leads .pfl-linha select{
  width:100%; min-width:0; text-overflow:ellipsis;
}
.pfl-painel-leads .pfl-cab > span,
.pfl-painel-leads .pfl-item > .pfl-linha > *{ padding-left:12px; padding-right:12px; }
/* Toda célula de botão centralizada na vertical, não só na horizontal
   (2026-09-14, bug do Fred: "o contatei tá lá em cima, não centralizado").
   `align-items:stretch` do .pfl-linha esticava a célula até a altura da
   linha inteira — e quando um vizinho (o nome do produto, por exemplo)
   quebrava em duas linhas e deixava a linha mais alta, o botão de dentro
   ficava parado no topo da célula em vez de no meio. Vale para QUALQUER
   coluna de botão (Contatei, Próximo contato, Reunião, Obs, Fechou), não
   só as que já tinham o `justify-content:center` para o texto ficar no
   meio horizontalmente também. Célula de botão também não corta o que
   tem dentro. */
.pfl-painel-leads .pfl-cel-bt{
  display:flex; align-items:center; overflow:visible; text-overflow:clip;
}
/* OBS e FECHOU centralizados também na horizontal (2026-08-11). Os botoes
   sao `inline-flex`, entao encostavam a esquerda; o alinhamento tem que
   vir da CELULA, nao do botao. O cabecalho acompanha, senao o titulo
   fica de um lado e o botao do outro. */
.pfl-painel-leads .pfl-cel-obs,
.pfl-painel-leads .pfl-cel-fechou{ justify-content:center; }
.pfl-painel-leads .pfl-cab > span.cab-centro{ text-align:center; }
/* quem marcou a data do proximo contato, logo abaixo dela (2026-08-10) */
.lead-contato-autor{
  display:block; margin-top:3px; font-size:10px; font-weight:600;
  color:var(--text-muted); line-height:1.2; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.pfl-painel-leads .lead-bt-contato{ padding:6px 9px; }

/* Produto: nome inteiro, quebrando em duas linhas quando nao cabe numa
   (2026-08-12, pedido do Fred — "FORMATACAO" estava saindo cortado).
   ⚠️ O <select> nativo NAO quebra linha: nenhum CSS faz isso. Entao quem
   se ve e o <span> do rotulo, que quebra, e o <select> fica por cima
   dele, invisivel e do mesmo tamanho — o clique continua abrindo a lista
   do navegador e o evento `change` continua sendo exatamente o mesmo, por
   isso o leads-painel.js nao precisou de caminho novo, so de atualizar o
   rotulo depois de salvar. As duas caixas TEM que ficar do mesmo tamanho;
   se o rotulo crescer para fora do select, o clique cai fora e a lista
   nao abre. */
.pfl-painel-leads .pfl-cel-produto{
  display:flex; align-items:center;
  white-space:normal; overflow:visible; text-overflow:clip;
}
.lead-produto{ position:relative; display:block; width:100%; min-width:0; }
.pfl-painel-leads .lead-produto .lead-sel-produto{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%; opacity:0;
  margin:0; padding:0; border:0; box-shadow:none; cursor:pointer; z-index:2;
}
/* O rotulo copia o desenho que o .lead-sel-produto ja tinha: transparente
   e sem borda parado, caixa so no hover/foco. Cor e fundo saem das
   variaveis do tema, senao o tema escuro mostraria letra clara sobre
   caixa branca. Fonte 12px (era 12.5) — o Fred autorizou encolher para
   caber mais nome por linha. */
.lead-produto-rot, .lead-produto-txt{
  display:block; width:100%; box-sizing:border-box;
  padding:3px 20px 3px 6px;
  border:1px solid transparent; border-radius:7px; background:transparent;
  font-size:12px; font-weight:550; line-height:1.28; color:var(--text-primary);
  white-space:normal; overflow-wrap:anywhere;
}
/* a setinha some junto com o <select>, entao ela e desenhada aqui — sem
   ela a caixa nao se parece mais com uma lista para escolher */
.lead-produto-rot{ position:relative; }
.lead-produto-rot::after{
  content:''; position:absolute; right:7px; top:50%; margin-top:-2px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--text-muted);
}
.lead-produto:hover .lead-produto-rot{ border-color:var(--border-strong); background:var(--surface-2); }
/* o <select> esta ANTES do rotulo no HTML, entao o irmao `+` alcanca ele
   — e assim quem navega pelo teclado tambem ve onde esta */
.lead-produto .lead-sel-produto:focus + .lead-produto-rot{ border-color:var(--green); background:var(--surface-2); }
/* quem so enxerga nao escolhe nada: sem setinha e sem caixa no hover */
.lead-produto-txt{ padding-right:6px; }

/* Vendedor (2026-09-04): parecido com o produto acima — select invisivel
   por cima do rotulo, pedido do Fred para trocar sem abrir a ficha.
   ⚠️ DIFERENTE do produto num ponto: aqui o rotulo NUNCA quebra linha
   (pedido do Fred, mesmo dia) — só o primeiro nome é mostrado (ver
   painel.php, $vendedorRotulo), então uma coluna estreita cortando com
   "..." no raro caso de um primeiro nome comprido é preferivel a
   qualquer linha quebrando e desalinhando a grade. Copiado em vez de
   compartilhar a classe do produto: são <select> DIFERENTES na mesma
   linha, e uma unica classe pegaria os dois juntos nos seletores
   `.lead-produto .lead-sel-produto`. */
.lead-vendedor{ position:relative; display:block; width:100%; min-width:0; }
.pfl-painel-leads .lead-vendedor .lead-sel-vendedor{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%; opacity:0;
  margin:0; padding:0; border:0; box-shadow:none; cursor:pointer; z-index:2;
}
.lead-vendedor-rot, .lead-vendedor-txt{
  display:block; width:100%; box-sizing:border-box;
  padding:3px 20px 3px 6px;
  border:1px solid transparent; border-radius:7px; background:transparent;
  font-size:12px; font-weight:550; line-height:1.28; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lead-vendedor-rot{ position:relative; }
.lead-vendedor-rot::after{
  content:''; position:absolute; right:7px; top:50%; margin-top:-2px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--text-muted);
}
.lead-vendedor:hover .lead-vendedor-rot{ border-color:var(--border-strong); background:var(--surface-2); }
.lead-vendedor .lead-sel-vendedor:focus + .lead-vendedor-rot{ border-color:var(--green); background:var(--surface-2); }
.lead-vendedor-txt{ padding-right:6px; }

/* Tarja da reuniao marcada, dentro do pop-up de reuniao do Painel de Leads
   (2026-08-12, pedido do Fred — a 1a versao pendurava isso embaixo da linha
   da lista principal e ele nao queria la, so dentro do pop-up). Azul de
   proposito: e o mesmo azul do calendarinho de "reuniao marcada"
   (LEAD_REUNIAO.agendada), entao a cor da tarja e a cor do icone contam a
   mesma coisa. Nao e aviso nem erro — e informacao. */
.lead-tarja-reuniao{
  margin:0 0 12px; padding:8px 12px; border-radius:8px;
  background:rgba(34,207,224,.14); border:1px solid rgba(34,207,224,.42);
  font-size:12.5px; font-weight:600; color:var(--text-secondary);
  line-height:1.35;
}
.lead-tarja-reuniao b{ font-weight:750; color:var(--text-primary); }
.pfl-link{ text-decoration:none; color:inherit; display:block; }
.pfl-link .pfl-linha > *{ padding:19px 16px; border-left:1px solid var(--border); }
.pfl-link .pfl-linha > :first-child{ border-left:0; }
/* Altura da linha: 16px -> 10px -> 7px (2026-08-11, em duas rodadas com o
   Fred). O lado tambem caiu de 16px para 12px, o que devolve 8px de
   largura util por celula — foi o que apertava o botao da coluna OBS. */
.pfl-painel-leads .pfl-item > .pfl-linha > *{ padding:7px 12px; border-left:1px solid var(--border); }
.pfl-painel-leads .pfl-item > .pfl-linha > :first-child{ border-left:0; }
.pfl-etapa{ font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-secondary); }
.pfl-cliente a{ color:inherit; text-decoration:none; }
.pfl-cliente a:hover{ color:var(--text-accent); text-decoration:underline; }
/* Empresa do lead embaixo do nome, no Painel de Leads (2026-08-12,
   pedido do Fred). 72% do tamanho da fonte de cima (60% + 20% pedido
   em 12/08) e cor de texto principal (era --text-muted, cinza claro
   demais pra ler bem). */
.pfl-painel-leads .pfl-cliente a{ display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.pfl-cliente-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfl-cliente-empresa{
  font-size:72%; font-weight:500; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lead-chip-status{
  display:inline-block; font-size:11px; font-weight:650; padding:4px 10px; border-radius:999px;
  background:var(--surface-1); border:1px solid var(--border); color:var(--text-secondary); white-space:nowrap;
}
.lead-bt-obs, .lead-bt-contato, .lead-bt-fechou{
  display:inline-flex; align-items:center; gap:4px; text-decoration:none; white-space:nowrap;
  font-size:11px; font-weight:700; padding:4px 8px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-secondary);
}
/* OBS virou só o NÚMERO de observações (2026-08-11, pedido do Matteo):
   o rótulo "OBS" saiu, o zero também aparece. Quadradinho, para a coluna
   ficar uma régua de números alinhados. */
.lead-bt-obs{
  justify-content:center; width:28px; height:26px; padding:0;
  font-size:12px; font-weight:700; color:var(--text-muted);
}
.lead-bt-obs.tem{ background:var(--green-soft); border-color:#D3E9B5; color:var(--green-dark); }

/* Reunião: o calendarinho diz o estado pela cor — azul marcada, verde
   feita, vermelho não compareceu, cinza sem reunião nenhuma. */
.lead-bt-reuniao{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:28px; padding:0; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-2);
  color:var(--text-muted); cursor:pointer;
}
.lead-bt-reuniao.tem{
  border-color:var(--cor-reuniao);
  background:color-mix(in srgb, var(--cor-reuniao) 20%, transparent);
  color:color-mix(in srgb, var(--cor-reuniao) 78%, #10131F);
}
.lead-bt-reuniao:hover{ border-color:var(--border-strong); color:var(--text-primary); }
.lead-bt-reuniao.tem:hover{ border-color:var(--cor-reuniao); }
span.lead-bt-reuniao{ cursor:default; }

/* A NOTA DO LEAD na coluna do cifrão (2026-08-18, pedido do Fred): média
   do faturamento com a margem de lucro, de 1 a 10. "?" é quem ainda não
   tem as duas respostas. Não é clicável — é conta, não escolha.
   As cores são as mesmas quatro da régua dele: 9 e 10 azul, 8 a 6 verde,
   5 e 4 laranja, 3 para baixo vermelho. Escritas na mão, como as da
   pílula de status logo abaixo, e valem nos dois temas. */
.lead-nota{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:26px; padding:0 6px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-2);
  font-size:12px; font-weight:800; color:var(--text-secondary); white-space:nowrap;
  box-shadow:none; cursor:default;
}
.lead-nota.vazio{ color:var(--text-muted); font-weight:600; font-size:11px; }
.lead-nota-azul{     background:#DDE8FB; border-color:#AEC5EE; color:#1D4B93; }
.lead-nota-verde{    background:#DFF5E3; border-color:#A9DDB6; color:#1E6B33; }
.lead-nota-laranja{  background:#FDEBD2; border-color:#F3CE9B; color:#8A5308; }
.lead-nota-vermelho{ background:#FBDEDC; border-color:#EFB6B3; color:#96262A; }

/* Coluna de símbolo: o conteúdo fica centralizado nela */
.pfl-painel-leads .pfl-cel-mini{ display:flex; align-items:center; justify-content:center; }
.pfl-painel-leads .pfl-cel-obs{ display:flex; align-items:center; justify-content:center; }

/* Cor da pílula do status: verde andando, laranja em aberto, vermelho
   travado. Vale para o <select> de quem edita e para o texto de quem só
   enxerga. (2026-08-11) */
.lead-linha[data-cor-status="verde"] .lead-sel-status,
.lead-linha[data-cor-status="verde"] .lead-chip-status{
  background:#DFF5E3; border-color:#A9DDB6; color:#1E6B33;
}
.lead-linha[data-cor-status="laranja"] .lead-sel-status,
.lead-linha[data-cor-status="laranja"] .lead-chip-status{
  background:#FDEBD2; border-color:#F3CE9B; color:#8A5308;
}
.lead-linha[data-cor-status="vermelho"] .lead-sel-status,
.lead-linha[data-cor-status="vermelho"] .lead-chip-status{
  background:#FBDEDC; border-color:#EFB6B3; color:#96262A;
}

/* Caixinha do motivo da desistência (2026-08-12). Curta: é uma pergunta
   só, com quatro respostas — não precisa da largura das outras. */
.lead-modal-curta{ max-width:420px; }
.lead-des-opcoes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px 0 2px; }
.lead-des-op{
  padding:13px 12px; border-radius:11px; font-size:13px; font-weight:650;
  border:1px solid var(--border); background:var(--surface-1); cursor:pointer;
}
.lead-des-op:hover{ border-color:var(--green); background:var(--green-soft); color:var(--green-dark); }
@media (max-width:520px){ .lead-des-opcoes{ grid-template-columns:1fr; } }

/* "Qual o contrato?" do Fechou? da Recompra (2026-09-15). Uma lista, não
   uma grade como a da desistência: o rótulo tem produto + valor e pode
   ficar longo — duas colunas cortariam feio. */
.lead-fechar-opcoes{ display:flex; flex-direction:column; gap:6px; margin:4px 0 2px; }
.lead-fechar-op{
  display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer;
  padding:10px 12px; border-radius:11px; border:1px solid var(--border); background:var(--surface-1);
}
.lead-fechar-op:hover{ border-color:var(--green); background:var(--green-soft); }
.lead-fechar-op input{ flex-shrink:0; }

/* Estados da reunião na janelinha */
.lead-reu-estados{ display:flex; gap:7px; flex-wrap:wrap; }
.lead-reu-op{ display:inline-flex; cursor:pointer; }
.lead-reu-op input{ position:absolute; opacity:0; width:0; height:0; }
.lead-reu-op span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:650; padding:7px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-1); color:var(--text-secondary);
}
.lead-reu-op span::before{
  content:''; width:9px; height:9px; border-radius:50%; background:var(--c);
}
.lead-reu-op input:checked + span{
  border-color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent);
  color:var(--text-primary);
}
.lead-reu-op input:focus-visible + span{ outline:2px solid var(--green); outline-offset:2px; }
/* Proximo contato com o nome de quem marcou DENTRO da caixinha, abaixo da
   data — mesmo desenho do "Contatei" ao lado (2026-08-11) */
.lead-bt-contato{ flex-direction:column; align-items:center; gap:1px; width:100%; line-height:1.2; }
.lead-bt-contato .lead-toque-quem{ font-weight:600; }
.lead-bt-obs:hover, .lead-bt-contato:hover{ border-color:var(--border-strong); color:var(--text-primary); }
/* Cor pelo estado do próximo contato (04/09/2026, pedido do Fred): tem
   data marcada e ainda não venceu = verde · já passou do dia = vermelho.
   Mesmo par de tons do "Contatei" fresco/vencido, para ler igual em
   qualquer coluna do painel. */
.lead-bt-contato.marcado{ background:#EDF7E2; border-color:#CBE4A8; color:#3E7113; }
.lead-bt-contato.marcado:hover{ background:#E4F2D3; border-color:#A9CE79; }
.lead-bt-contato.vencido{ background:#FDEAEA; border-color:#F1C9C8; color:#B22228; }
.lead-bt-contato.vazio{ color:var(--text-muted); font-weight:600; }
.lead-bt-fechou{ background:var(--green); border-color:var(--green); color:#fff; }
.lead-bt-fechou:hover{ background:var(--green-dark); border-color:var(--green-dark); color:#fff; }

/* "Fechou?" do Painel de Recompra (2026-09-14, pedido do Fred): verde
   manda para o Painel de Vendas, vermelho exclui só esta recompra.
   Rótulo + dois botõezinhos não cabem lado a lado nos mesmos 80px que
   bastavam para a palavra única "Fechou" — por isso ficam um EM CIMA do
   outro (rótulo, depois a fileira dos dois botões), em vez de alargar a
   coluna e empurrar o resto da tabela para fora da tela de quem tem o
   monitor mais estreito (bug apontado pelo Fred no mesmo dia). */
.lead-fechou-recompra{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.lead-fechou-rot{ font-size:10px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.lead-fechou-botoes{ display:inline-flex; align-items:center; gap:4px; }
.lead-form-fechou-ico{ display:inline-flex; }
.lead-bt-fechou-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border-radius:7px; border:1px solid transparent;
  font-size:11px; font-weight:800; line-height:1; cursor:pointer; color:#fff;
}
.lead-bt-fechou-sim{ background:var(--green); }
.lead-bt-fechou-sim:hover{ background:var(--green-dark); }
.lead-bt-fechou-nao{ background:#B4322F; }
.lead-bt-fechou-nao:hover{ background:#8F2523; }

/* ficha do lead */
.lead-colunas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:1000px){ .lead-colunas{ grid-template-columns:1fr; } }
.lead-lista{ display:flex; flex-direction:column; gap:8px; }
.lead-obs{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); padding:10px 13px; }
.lead-obs-topo{ display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--text-muted); margin-bottom:4px; }
.lead-obs-topo b{ color:var(--text-primary); font-size:12px; }
.lead-obs p{ margin:0; font-size:13px; line-height:1.5; }
.lead-prox{
  border:1px solid var(--border); border-left:3px solid var(--green); border-radius:var(--radius);
  background:var(--surface-2); padding:11px 14px; display:flex; flex-direction:column; gap:3px;
}
.lead-prox.atrasado{ border-left-color:#B4322F; background:#FDEAEA; }
.lead-prox b{ font-size:14px; }
.lead-prox span{ font-size:12px; color:var(--text-secondary); }
.lead-prox p{ margin:2px 0 0; font-size:12.5px; }
.lead-prox small{ font-size:11px; color:var(--text-muted); }
.lead-chip-atraso{
  align-self:flex-start; font-size:10.5px; font-weight:700; text-transform:uppercase;
  background:#B4322F; color:#fff; padding:2px 8px; border-radius:999px; margin-top:4px;
}
/* Etapa/status do cadastro NOVO: não se escolhe, então em vez do <select>
   fica o valor fixo (2026-08-17). Mesma caixa dos campos para a linha não
   desalinhar, só sem seta e sem cara de clicável. */
.lead-fixo{
  box-sizing:border-box; display:flex; align-items:center;
  width:100%; height:44px; padding:0 13px;
  font-size:13.5px; font-weight:600; color:var(--text-secondary);
  background:var(--surface-2); border:1px dashed var(--border); border-radius:var(--radius);
}
.lead-concluir{ margin-top:12px; border-top:1px dashed var(--border); padding-top:10px; }
.lead-concluir > summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--text-secondary); padding:4px 0; }
.lead-hist{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  font-size:12.5px; padding:7px 11px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface-2);
}
.lead-hist-data{ color:var(--text-muted); font-size:11.5px; white-space:nowrap; }
.lead-hist-acao{ font-weight:650; }
.lead-hist-det{ color:var(--text-secondary); }
.lead-hist-autor{ margin-left:auto; color:var(--text-muted); font-size:11.5px; }

/* ---------- agenda: alça para esticar a reunião (2026-08-05) ---------- */
.tg-ev-alca{
  position:absolute; left:0; right:0; bottom:0; height:9px;
  cursor:ns-resize; z-index:5; pointer-events:auto;
  display:flex; align-items:flex-end; justify-content:center;
}
.tg-ev-alca::before{
  content:''; width:26px; height:3px; margin-bottom:2px; border-radius:2px;
  background:rgba(255,255,255,.55); opacity:0; transition:opacity .12s ease;
}
.tg-evento:hover .tg-ev-alca::before{ opacity:1; }
.tg-evento.redimensionando{ box-shadow:0 4px 14px rgba(19,24,41,.4); z-index:6; }
.tg-evento.redimensionando .tg-ev-alca::before{ opacity:1; background:#fff; }

/* ---------- Painel de Leads: cor por etapa + edição na linha (2026-08-05) ---------- */
.lead-linha{ border-left:5px solid var(--cor-etapa, var(--border)); }
.lead-linha.tem-atraso{ border-left-color:#B4322F; }
.lead-linha .pfl-etapa{
  background:color-mix(in srgb, var(--cor-etapa) 20%, transparent);
}
.lead-linha.lead-salvo{ box-shadow:0 0 0 2px rgba(118,184,42,.45); transition:box-shadow .2s ease; }
.lead-linha.lead-erro{ box-shadow:0 0 0 2px rgba(180,50,47,.5); transition:box-shadow .2s ease; }

/* seletores que parecem texto até o mouse chegar */
.lead-sel{
  width:100%; max-width:100%; height:30px; padding:3px 6px;
  font-size:12.5px; font-weight:650; color:var(--text-primary);
  background:transparent; border:1px solid transparent; border-radius:7px;
  cursor:pointer; appearance:auto;
}
.lead-sel:hover{ background:var(--surface-2); border-color:var(--border-strong); }
.lead-sel:focus{ background:var(--surface-2); border-color:var(--green); outline:none; }
.lead-sel-etapa{ text-transform:uppercase; font-size:11.5px; letter-spacing:.02em; }

/* janelinha do próximo contato */
.lead-modal-fundo{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(10,14,26,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:18px;
}
.lead-modal{
  width:min(430px, 100%); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:18px 20px 16px;
  max-height:88vh; overflow-y:auto;
}
.lead-modal-topo{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.lead-modal-topo h3{ margin:0; font-size:16px; }
.lead-modal-x{ border:0; background:transparent; font-size:16px; cursor:pointer; color:var(--text-muted); padding:2px 6px; }
.lead-modal-x:hover{ color:var(--text-primary); }
.lead-modal-lead{ margin:2px 0 14px; font-size:13px; font-weight:650; color:var(--text-secondary); }
.lead-modal-erro{
  margin-top:10px; font-size:12.5px; background:#FDECEC; border:1px solid #F6D6D5;
  color:#8F2523; border-radius:var(--radius-sm); padding:8px 11px;
}
.lead-modal-acoes{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* Observacoes anteriores na janelinha do painel de leads (2026-08-12,
   pedido do Fred): uma caixinha por observacao, assinada por quem
   escreveu. Fica DEPOIS do botao Registrar — escrever uma nova continua
   sendo a primeira coisa da tela. */
.lead-obs-tit{
  margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--border);
  font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--text-muted);
}
.lead-obs-lista{ display:flex; flex-direction:column; gap:8px; }
.lead-obs-item{
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:10px; padding:9px 11px;
}
.lead-obs-item p{ margin:0; font-size:12.5px; line-height:1.45; white-space:pre-wrap; }
.lead-obs-assina{
  margin-top:6px; font-size:11px; font-weight:650; color:var(--text-muted);
}

/* ---------- escopo de alteração de evento recorrente ---------- */
.serie-fundo{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(10,14,26,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:18px;
}
.serie-caixa{
  width:min(360px, 100%); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:20px 22px 14px;
}
.serie-caixa h3{ margin:0 0 14px; font-size:16px; font-weight:650; }
.serie-op{
  display:flex; align-items:center; gap:11px; padding:9px 2px;
  font-size:14px; cursor:pointer; color:var(--text-primary);
}
.serie-op input{ accent-color:var(--verde); width:17px; height:17px; cursor:pointer; }
.serie-acoes{ display:flex; justify-content:flex-end; gap:6px; margin-top:12px; }
.serie-acoes button{
  border:0; background:transparent; cursor:pointer; padding:9px 16px;
  border-radius:var(--radius-sm); font-size:14px; font-weight:650; color:var(--verde);
}
.serie-acoes button:hover{ background:rgba(118,184,42,.12); }

/* ---------- conta: tema claro/escuro + ordem do menu lateral ---------- */
.cfg-tema{ display:inline-flex; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; }
.cfg-tema button{
  padding:8px 18px; font-size:12.5px; font-weight:650; background:transparent;
  border:0; cursor:pointer; color:var(--text-secondary);
  display:inline-flex; align-items:center; gap:7px;
}
.cfg-tema button svg{ flex-shrink:0; }
.cfg-tema button.ativo{ background:var(--green); color:#fff; }
.cfg-menu-lista{ display:flex; flex-direction:column; gap:6px; max-width:360px; }
.cfg-menu-item{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border:1.5px solid var(--border); border-radius:10px; background:var(--surface-2);
  font-size:13px; font-weight:600;
}
.cfg-menu-nome{ flex:1; min-width:0; }
/* olho de esconder a página do menu (etapa 51) */
.cfg-menu-olho{
  flex-shrink:0; border:0; background:transparent; cursor:pointer; padding:4px;
  color:var(--text-muted); display:flex; align-items:center; border-radius:7px;
}
.cfg-menu-olho:hover{ color:var(--text-primary); background:var(--surface-1); }
.cfg-menu-olho .olho-fechado{ display:none; }
.cfg-menu-oculto .cfg-menu-olho .olho-aberto{ display:none; }
.cfg-menu-oculto .cfg-menu-olho .olho-fechado{ display:block; }
.cfg-menu-oculto .cfg-menu-nome,
.cfg-menu-oculto .etapa-arrastar{ opacity:.4; }
.cfg-menu-oculto{ border-style:dashed; }

/* ---------- agenda: compromisso que já passou fica esmaecido ---------- */
.ev-passado{ opacity:.4; filter:saturate(.75); }
.ev-passado:hover{ opacity:.8; filter:none; }

/* ---------- financeiro: resumo em cima e totais embaixo do fluxo (etapa 29) ---------- */
/* auto-fit: se o valor não couber em 5 colunas, os CARDS descem de linha —
   o número em si nunca quebra (nowrap) */
/* Resumo do extrato em duas fileiras (2026-08-05): 4 colunas FIXAS para a
   2ª fileira (3 cartões) alinhar coluna a coluna com a 1ª (4 cartões).
   Com auto-fit os três esticavam e ficavam maiores que os de cima. */
.fin-cards-topo{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-bottom:12px; }
.fin-cards-topo-2{ margin-top:-4px; }
.fin-cards-topo .stat{ min-width:0; }
.fin-cards-topo .stat-valor{ font-size:16.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:1000px){ .fin-cards-topo{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px){ .fin-cards-topo{ grid-template-columns:1fr; } }
.fin-chip-acum{ background:#FDF3E3; color:#8A5B00; }
/* anotação ao lado do status: conta recebida, mas fora do mês de vencimento */
.fin-chip-nota{ background:var(--surface-0); color:var(--text-muted); font-weight:600; }
.fin-chip-nota.atraso{ background:#FDECEC; color:#A8403D; }
/* recebimento em mês diferente do vencimento (2026-08-04) */
.fin-chip-outro{ background:#EEF0F4; color:#4A5169; }
.fin-valor-vazio{ color:var(--text-muted); font-weight:600; }
/* valor que saiu diferente do previsto: o tracejado avisa que houve
   ajuste; o title conta o previsto e a diferenca (2026-08-07) */
.fin-valor-ajustado{ border-bottom:1px dotted currentColor; cursor:help; }
.fin-dif{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:650; letter-spacing:.01em;
}
.fin-dif.caro{ background:#FDECEC; color:#A8403D; }
.fin-dif.barato{ background:#EDF7E2; color:#3E7113; }
html[data-tema="escuro"] .fin-dif.caro{ background:rgba(217,83,79,.16); color:#F08A85; }
html[data-tema="escuro"] .fin-dif.barato{ background:rgba(118,184,42,.16); color:#9BD65A; }
.fin-aviso-mes{
  font-size:12px; line-height:1.45; color:var(--text-secondary);
  background:var(--surface-1); border:1px dashed var(--border-strong);
  border-radius:var(--radius); padding:8px 11px; margin-bottom:8px;
}
.fin-totais{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
@media (max-width:800px){ .fin-totais{ grid-template-columns:1fr; } }
.fin-total{
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:13px 16px;
  background:var(--surface-2); display:flex; flex-direction:column; gap:3px;
}
.fin-total b{ font-size:19px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fin-total.ent b{ color:#3E7113; }
.fin-total.sai b{ color:#B4322F; }
.fin-total-rotulo{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
.fin-total small{ font-size:12px; color:var(--text-secondary); }

/* ---------- contrato: situação de cobrança (protestado / ação judicial / fundo perdido) ---------- */
.ct-flags{ display:flex; gap:10px; flex-wrap:wrap; }
.ct-flag{
  flex:1 1 180px; display:flex; flex-direction:column; gap:2px; cursor:pointer;
  padding:11px 13px; border-radius:var(--radius); border:1.5px solid var(--border);
  background:var(--surface-2); transition:border-color .12s, background .12s;
}
.ct-flag:hover{ border-color:var(--border-strong); }
.ct-flag.ativo{ border-color:#D9534F; background:#FDEAEA; }
.ct-flag input{ position:absolute; opacity:0; pointer-events:none; }
.ct-flag b{ font-size:13px; font-weight:650; }
.ct-flag.ativo b{ color:#B22228; }
.ct-flag small{ font-size:11px; color:var(--text-muted); line-height:1.35; }
.ct-flag-chip{
  display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px;
  border-radius:999px; background:#FDEAEA; color:#B22228; white-space:nowrap;
  margin:2px 3px 0 0; text-transform:uppercase; letter-spacing:.02em;
}

/* "Desfazer" (Ctrl+Z): no aviso verde logo após apagar e no Histórico */
.btn-desfazer{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px; cursor:pointer;
  font-size:12px; font-weight:600; line-height:1;
  background:rgba(255,255,255,.75); border:1px solid currentColor;
  color:inherit; box-shadow:none;
}
.btn-desfazer:hover{ background:#fff; }
.tbl .btn-desfazer{ color:var(--text-secondary); border-color:var(--border-strong); }
.tbl .btn-desfazer:hover{ color:var(--text-primary); }

.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy-800); padding:20px; }
.login-card{ width:100%; max-width:380px; background:var(--surface-2); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:32px 28px; }
.login-card .brandmark{ justify-content:center; margin-bottom:26px; padding:0; }
.login-card .brandmark img{ max-width:230px; }
.senha-wrap{ position:relative; }
.senha-wrap button{ position:absolute; right:6px; top:6px; bottom:6px; border:0; background:transparent; padding:0 8px; }

/* ---------- barra superior ---------- */
.topbar{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.topbar-busca{
  flex:1; max-width:420px; display:flex; align-items:center; gap:9px;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:0 12px; height:38px; color:var(--text-muted);
}
.topbar-busca input{ border:0; background:transparent; padding:0; height:auto; }
.topbar-busca input:focus{ box-shadow:none; }
.topbar-sino{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--radius); color:var(--text-secondary);
  background:var(--surface-2); border:1px solid var(--border-strong); flex-shrink:0;
}
.topbar-sino:hover{ background:var(--surface-1); color:var(--text-primary); }
.topbar-badge{
  position:absolute; top:-5px; right:-5px; background:#D9534F; color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}

/* contador na barra lateral (hoje: contas vencidas em Cobrança) */
.nav-badge{
  margin-left:auto; background:#D9534F; color:#fff;
  font-size:10px; font-weight:700; line-height:1; min-width:17px; height:17px;
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
}
.navitem-toggle .nav-badge{ margin-left:auto; margin-right:2px; }

/* ---------- módulo Mídia ---------- */
.check-row{
  display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer;
  padding:8px 10px; border-radius:var(--radius-sm);
}
.check-row:hover{ background:var(--surface-1); }

.conteudo-card{ padding:15px; display:flex; flex-direction:column; }
.conteudo-titulo{
  font-size:14.5px; font-weight:650; letter-spacing:-.01em; line-height:1.35;
  color:var(--text-primary); text-decoration:none; min-width:0;
}
.conteudo-titulo:hover{ text-decoration:underline; }
.conteudo-trecho{
  font-size:12px; color:var(--text-secondary); line-height:1.5; margin-top:9px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.meta-badge{
  font-size:11px; font-weight:500; color:var(--text-secondary);
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:999px; padding:3px 10px;
}
.card-sep{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--border);
}

/* conteúdo finalizado: card inteiro verde, tudo dentro em branco */
.conteudo-card.done{
  background:linear-gradient(158deg,#7FC22E 0%,var(--green) 45%,var(--green-dark) 100%);
  border-color:var(--green-dark); box-shadow:0 4px 16px rgba(118,184,42,.30);
}
.conteudo-card.done, .conteudo-card.done *{ color:#fff; border-color:rgba(255,255,255,.28); }
.conteudo-card.done .meta-badge{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.30); }
.conteudo-card.done .card-sep{ border-top-color:rgba(255,255,255,.28); }
.conteudo-card.done .btn{ background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.32); }
.conteudo-card.done .btn:hover{ background:rgba(255,255,255,.28); }
.conteudo-card.done input[type=checkbox]{ accent-color:#fff; }
.conteudo-card.done .dim{ color:rgba(255,255,255,.85); }

/* calendário da agenda de mídia */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-wd{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); text-align:center; padding:0 0 7px;
}
.daycell{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  min-height:104px; padding:7px; display:block; text-decoration:none; color:inherit;
}
.daycell:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.daycell.fora{ background:var(--surface-1); opacity:.6; }
.daycell.hoje{ border-color:var(--green); box-shadow:0 0 0 2px rgba(118,184,42,.16); }
.daynum{ font-size:11.5px; font-weight:600; color:var(--text-secondary); }
.daycell.hoje .daynum{
  color:#fff; background:var(--green); border-radius:999px;
  min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px;
}
.pchip{
  display:block; font-size:11px; font-weight:500; padding:3px 6px; border-radius:6px;
  margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none;
}
.cal-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.cal-nav .mes{ font-size:16px; font-weight:650; letter-spacing:-.015em; padding:0 4px; }

/* ---------------------------------------------------------------------
   Postagem: Mês / Semana / Dia (29/08/2026, pedido do Matteo — no
   formato do planner do Meta Business Suite).

   O mês continua sendo a grade de sempre. Semana e dia usam a MESMA
   grade de horas, mudando só o número de colunas (--cols): 7 na semana,
   1 no dia. Uma folha de estilo só para os dois evita duas grades
   parecidas que depois divergem.
   --------------------------------------------------------------------- */
/* o seletor de visão: caixinha segmentada, como a do Meta */
.cal-visoes{
  display:inline-flex; border:1px solid var(--border-strong); border-radius:8px;
  overflow:hidden;
}
.cal-visoes a{
  font-size:13px; font-weight:600; color:var(--text-secondary); text-decoration:none;
  padding:8px 16px; line-height:1; background:var(--surface-2);
}
.cal-visoes a + a{ border-left:1px solid var(--border-strong); }
.cal-visoes a:hover{ color:var(--text-primary); }
.cal-visoes a.on{ background:rgba(118,184,42,.16); color:var(--text-primary); }

/* ---- grade do MÊS no formato do planner do Meta (29/08/2026) -------
   ⚠️ CONTÍNUA, sem vão entre as células: no Meta a grade é uma malha só,
   de linhas finas. A versão com `gap` e cartões soltos era a do Portal
   antigo -- o Matteo comparou lado a lado e cobrou. */
.cal-mes{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--surface-2);
}
.cal-mes-wd{
  display:grid; grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid var(--border);
}
.cal-mes-wd span{
  font-size:13px; color:var(--text-secondary); text-align:center; padding:11px 4px;
}
.cal-mes-corpo{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal-dia{
  min-height:118px; padding:7px 8px; border-top:1px solid var(--border);
  border-left:1px solid var(--border); text-decoration:none; color:inherit; display:block;
}
.cal-mes-corpo > .cal-dia:nth-child(7n+1){ border-left:0; }
.cal-mes-corpo > .cal-dia:nth-child(-n+7){ border-top:0; }
.cal-dia:hover{ background:var(--surface-1); }
.cal-dia .num{ font-size:13px; color:var(--text-secondary); }
/* dias do mês vizinho: o Meta mostra, apagados -- some o "buraco" que a
   grade antiga deixava no começo e no fim do mês */
.cal-dia.fora .num{ color:var(--text-muted); opacity:.55; }
/* ⚠️ Hoje NÃO recebe destaque (29/08/2026, pedido do Matteo: «não precisa
   colocar o sábado azul, pode tirar, deixa igual aos outros»). O azul era
   cópia do Meta; aqui ele quis o dia igual aos demais. Quem for
   "consertar" isto de novo está desfazendo um pedido. */

/* ---- SEMANA e DIA no formato do planner do Meta (29/08/2026) -------
   ⚠️ NÃO é grade de horas. A primeira versão daqui era um calendário de
   horários (00:00 a 23:00, como o Google Agenda) -- o Meta não tem isso:
   são colunas com os cards empilhados, cada um com a MINIATURA do vídeo.
   O Matteo mandou a print lado a lado. Quem for "melhorar" isto de novo
   com linhas de hora está desfazendo um pedido, não corrigindo. */
.cal-sem{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--surface-2);
}
.cal-sem-cab,
.cal-sem-corpo{ display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); }
.cal-sem-cab{ border-bottom:1px solid var(--border); }
.cal-sem-cab a{
  padding:9px 4px; text-align:center; font-size:13px; color:var(--text-secondary);
  text-decoration:none; border-left:1px solid var(--border);
}
.cal-sem-cab a:first-child{ border-left:0; }
.cal-sem-cab a:hover{ color:var(--text-primary); }
/* ⚠️ Sem pílula azul e sem coluna azulada em «hoje»: mesmo pedido do
   Matteo que tirou o azul da grade do mês — o dia de hoje fica igual aos
   outros. O convite «Criar uma publicação» continua na coluna de hoje. */
.cal-sem-col{
  min-height:340px; padding:8px 7px; border-left:1px solid var(--border);
  display:flex; flex-direction:column; gap:9px;
}
.cal-sem-corpo > .cal-sem-col:first-child{ border-left:0; }

/* o cartão: hora em cima, miniatura embaixo, rede no canto */
.cal-card{
  background:rgba(118,184,42,.13); border-radius:8px; padding:7px;
  text-decoration:none; color:inherit; display:block;
}
.cal-card:hover{ background:rgba(118,184,42,.22); }
.cal-card.postado{ opacity:.62; }
.cal-card-topo{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--text-primary); margin-bottom:6px;
}
.cal-card-mini{
  position:relative; aspect-ratio:4/3; border-radius:5px; overflow:hidden;
  background:#1C2B33; display:flex; align-items:center; justify-content:center;
}
.cal-card-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.cal-card-mini .semfoto{ color:rgba(255,255,255,.45); font-size:11px; padding:6px; text-align:center; }
.cal-card-mini .rede{ position:absolute; right:5px; bottom:5px; line-height:0; }
.cal-card-nome{
  font-size:11.5px; color:var(--text-secondary); margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* ---- balãozinho «Criar post» ao clicar num dia (29/08/2026) --------
   Pedido do Matteo: clicar no dia não pode ir direto para o formulário —
   abre um botão pequeno ali mesmo, e só ele leva para a criação. Assim
   clicar sem querer não tira ninguém da tela. */
#calPop{
  position:absolute; z-index:80; display:none;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:10px; box-shadow:0 8px 26px rgba(19,24,41,.16);
  padding:9px; min-width:168px;
}
#calPop.aberto{ display:block; }
#calPop .dia{
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted); padding:0 4px 7px;
}
#calPop a{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  font-size:13.5px; font-weight:600; color:#fff; background:var(--green);
  border-radius:8px; padding:9px 12px;
}
#calPop a:hover{ filter:brightness(1.06); }

/* o convite tracejado que o Meta mostra na coluna de hoje */
.cal-criar{
  border:1.5px dashed var(--border-strong); border-radius:8px; padding:16px 10px;
  text-align:center; text-decoration:none; color:var(--text-secondary); font-size:12.5px;
}
.cal-criar:hover{ border-color:var(--green); color:var(--text-primary); }
.cal-criar b{ display:block; font-size:13px; color:var(--text-primary); margin-bottom:3px; }

.cal-horas{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-2); overflow:hidden;
}
/* o cabeçalho de dias e cada linha de hora repetem a MESMA grade, senão
   as colunas do cabeçalho não batem com as de baixo */
.cal-horas-cab,
.cal-horas-linha{ display:grid; grid-template-columns:62px repeat(var(--cols), minmax(0, 1fr)); }
.cal-horas-cab{ border-bottom:1px solid var(--border); background:var(--surface-1); }
.cal-dia-cab{
  padding:9px 6px; text-align:center; text-decoration:none; color:inherit;
  border-left:1px solid var(--border);
}
.cal-dia-cab:hover{ background:var(--surface-2); }
.cal-dia-cab .wd{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted);
}
.cal-dia-cab .num{ display:block; font-size:17px; font-weight:650; margin-top:2px; }
.cal-dia-cab.hoje .num{
  color:#fff; background:var(--green); border-radius:999px;
  width:28px; height:28px; line-height:28px; margin:2px auto 0;
}
/* rola só o corpo: o cabeçalho dos dias fica sempre visível.
   ⚠️ `position:relative` não é enfeite: sem ele o `offsetTop` das linhas
   é medido a partir da PÁGINA, e a rolagem automática (que abre a grade
   na altura do primeiro post) passa direto do alvo. */
.cal-horas-corpo{ max-height:min(62vh, 620px); overflow-y:auto; position:relative; }
.cal-horas-linha{ border-top:1px solid var(--border); }
.cal-horas-linha:first-child{ border-top:0; }
.cal-hora-rot{
  font-size:10.5px; color:var(--text-muted); text-align:right;
  padding:5px 9px 0 0; user-select:none;
}
.cal-hora-cel{
  min-height:42px; padding:3px 4px; border-left:1px solid var(--border);
  text-decoration:none; color:inherit; display:block;
}
a.cal-hora-cel:hover{ background:rgba(118,184,42,.07); }
.cal-hora-cel.hoje{ background:rgba(118,184,42,.05); }
.cal-hora-cel .pchip{ margin-top:0; margin-bottom:3px; }
/* a faixa de quem não tem hora marcada, acima das 24 linhas */
.cal-horas-linha.sem-hora{ background:var(--surface-1); border-bottom:1px solid var(--border); }
.cal-horas-linha.sem-hora .cal-hora-rot{ padding-top:8px; font-style:italic; }
.cal-horas-linha.sem-hora .cal-hora-cel{ min-height:0; padding:6px 4px; }

@media (max-width:760px){
  /* na semana as 7 colunas não cabem: a grade rola de lado */
  .cal-horas{ overflow-x:auto; }
  .cal-horas-cab,
  .cal-horas-linha{ grid-template-columns:52px repeat(var(--cols), minmax(96px, 1fr)); min-width:max-content; }
}

/* ============================================================
   AGENDA ESTILO GOOGLE AGENDA (reforma 2026-07, 2ª rodada)
   ============================================================ */

/* --- layout: mini-calendário à esquerda + grade à direita --- */
.agenda-shell{ display:flex; gap:18px; align-items:stretch; }
.agenda-lateral{ width:216px; flex-shrink:0; display:flex; flex-direction:column; min-height:0; }
.agenda-principal{ flex:1; min-width:0; }

/* --- botão Criar, como o do Google --- */
.btn-criar{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--vidro-borda-verde);
  border-radius:24px; padding:12px 22px 12px 16px;
  font-size:14px; font-weight:600; color:var(--text-primary);
  box-shadow:0 4px 14px rgba(24,52,16,.14); text-decoration:none;
  transition:box-shadow .18s ease, transform .18s ease;
}
.btn-criar:hover{ box-shadow:0 8px 22px rgba(24,52,16,.20); transform:translateY(-1px); color:var(--text-primary); }
.btn-criar .mais{ font-size:20px; line-height:1; color:var(--green-dark); font-weight:700; }

/* --- mini-calendário --- */
.minical{
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--vidro-borda); border-radius:var(--radius-lg);
  box-shadow:var(--vidro-sombra); padding:12px 12px 10px; margin-top:14px;
}
.minical-topo{ display:flex; justify-content:space-between; align-items:center; padding:0 4px 8px; }
.minical-lista{ padding:8px 10px 6px; }
.minical-lista .minical-topo{ padding:0 2px 4px; }
.minical-titulo{ font-size:12.5px; font-weight:650; }
.minical-navs a{ text-decoration:none; color:var(--text-secondary); padding:2px 7px; border-radius:6px; font-size:14px; }
.minical-navs a:hover{ background:rgba(118,184,42,.12); color:var(--text-primary); }
.minical-grade{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.minical-wd{ font-size:9.5px; font-weight:600; color:var(--text-muted); text-align:center; padding:3px 0; }
.minical-dia{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin:0 auto; border-radius:50%;
  font-size:11px; color:var(--text-primary); text-decoration:none;
}
.minical-dia:hover{ background:rgba(118,184,42,.14); }
.minical-dia.hoje{ background:var(--green); color:#fff; font-weight:700; }
.minical-dia.sel:not(.hoje){ background:rgba(118,184,42,.22); font-weight:600; }

/* --- MÊS estilo Google --- */
.gcal-mes{
  display:grid; grid-template-columns:repeat(7,1fr);
  /* Todas as semanas com a MESMA altura (2026-08-07): antes a celula tinha
     min-height, entao um dia com tres compromissos esticava a linha inteira
     e o mes ficava com quadrados de tamanhos diferentes. A primeira linha
     (DOM..SAB) segue automatica; as demais, fixas. */
  grid-template-rows:auto; grid-auto-rows:132px;
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--vidro-borda); border-radius:var(--radius-lg);
  box-shadow:var(--vidro-sombra); overflow:hidden;
}
.gcal-wd{
  font-size:10.5px; font-weight:650; letter-spacing:.06em; color:var(--text-muted);
  text-align:center; padding:9px 0 7px; border-bottom:1px solid rgba(19,24,41,.07);
}
.gcal-celula{
  /* altura vem do grid-auto-rows; overflow corta o que passar, como no
     Google Agenda — o "mais N" leva ao dia inteiro */
  min-height:0; overflow:hidden;
  padding:5px 6px; border-bottom:1px solid rgba(19,24,41,.06);
  border-right:1px solid rgba(19,24,41,.06); cursor:pointer;
}
.gcal-celula:nth-child(7n){ border-right:0; }
.gcal-celula:hover{ background:rgba(118,184,42,.05); }
.gcal-celula.vazia{ cursor:default; background:rgba(19,24,41,.015); }
.gcal-num{
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:600; color:var(--text-secondary);
  border-radius:50%; margin:0 auto 3px;
}
.gcal-num.hoje{ background:var(--green); color:#fff; font-weight:700; }
.gcal-ev{
  /* titulo longo quebra em ate 2 linhas em vez de ser cortado com "..." —
     com a celula de altura fixa, isso cabe sem desalinhar nada.
     min-width:0 é necessário (2026-08-13): sem ele, um item flex some
     "min-width:auto" por padrão e o titulo (que também vira -webkit-box
     logo abaixo) se recusa a encolher — com um titulo comprido/sem espaço
     (ex.: lembrete de "próximo contato" de um lead) o chip ficava enorme,
     estourando o quadradinho do dia em vez de quebrar em 2 linhas. */
  display:flex; align-items:flex-start; gap:5px; font-size:11px; font-weight:500;
  padding:2px 5px; border-radius:5px; margin-top:2px; cursor:pointer;
  line-height:1.32; overflow:hidden; min-width:0;
}
.gcal-ev:hover{ background:rgba(19,24,41,.06); }
.gcal-ev.cheio{ color:#fff; font-weight:600; }
.gcal-ev.cheio:hover{ filter:brightness(1.08); }
.gcal-bolinha{ width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.gcal-ev-hora{ color:var(--text-muted); flex-shrink:0; font-size:10.5px; }
.gcal-ev-titulo{
  flex:1 1 auto; min-width:0;
  overflow:hidden; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
/* o de dia inteiro nao tem <span> interno: o clamp vai no proprio chip */
.gcal-ev.cheio{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  word-break:break-word;
}
.gcal-mais{
  display:block; font-size:10.5px; font-weight:600; color:var(--text-secondary);
  padding:2px 5px; margin-top:2px; border-radius:5px; text-decoration:none;
}
.gcal-mais:hover{ background:rgba(19,24,41,.07); }

/* --- GRADE HORÁRIA (semana/dia) --- */
.tg{
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--vidro-borda); border-radius:var(--radius-lg);
  box-shadow:var(--vidro-sombra); overflow:hidden;
}
.tg-cabecalho, .tg-alldia{ display:flex; border-bottom:1px solid rgba(19,24,41,.08); }
.tg-canto{ width:56px; flex-shrink:0; }
.tg-dia-head{
  flex:1; text-align:center; padding:9px 0 7px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  border-left:1px solid rgba(19,24,41,.05);
}
.tg-dia-sem{ font-size:10px; font-weight:650; letter-spacing:.08em; color:var(--text-muted); }
.tg-dia-num{
  font-size:20px; font-weight:500; color:var(--text-primary);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.tg-dia-head.hoje .tg-dia-sem{ color:var(--green-dark); }
.tg-dia-head.hoje .tg-dia-num{ background:var(--green); color:#fff; font-weight:700; }
.tg-alldia-rotulo{ font-size:9.5px; color:var(--text-muted); display:flex; align-items:center; justify-content:flex-end; padding-right:7px; }
/* min-width:0 é obrigatório: item de flex nasce com min-width:auto e um
   título comprido esticava a coluna do dia, empurrando as vizinhas para o
   lado (o aviso de retorno da segunda cobria a terça e desalinhava a grade
   de horas de baixo). Com o piso em zero a coluna fica na largura do dia e
   o texto quebra em várias linhas em vez de vazar. */
.tg-alldia-col{ flex:1; min-width:0; padding:3px 4px; border-left:1px solid rgba(19,24,41,.05); display:flex; flex-direction:column; gap:2px; }
.tg-alldia-ev{
  font-size:11px; font-weight:600; color:#fff; padding:2px 7px; border-radius:5px;
  cursor:pointer; white-space:normal; overflow-wrap:break-word; word-break:break-word;
  line-height:1.25; text-align:left;
}
.tg-alldia-ev:hover{ filter:brightness(1.08); }
/* a grade acompanha a altura da janela em vez de parar em 640px fixos,
   para as faixas de hora (maiores desde 05/08/2026) preencherem a tela */
.tg-scroll{ max-height:calc(100vh - 220px); min-height:420px; overflow-y:auto; position:relative; }
.tg-corpo{ display:flex; position:relative; }
.tg-horas{ width:56px; flex-shrink:0; position:relative; }
.tg-hora{
  position:absolute; right:8px; transform:translateY(-50%);
  font-size:10px; color:var(--text-muted);
}
.tg-col{ flex:1; position:relative; border-left:1px solid rgba(19,24,41,.05); }
/* arrastar o compromisso para outro dia/horário (2026-08-06) */
.tg-evento.movendo{
  cursor:grabbing; opacity:.9; z-index:20;
  box-shadow:0 10px 26px rgba(15,20,35,.3); transform:scale(1.02);
}
.tg-col.hoje{ background:rgba(118,184,42,.035); }
.tg-slot{ position:absolute; left:0; right:0; border-top:1px solid rgba(19,24,41,.055); cursor:pointer; }
.tg-slot:hover{ background:rgba(118,184,42,.07); }
.tg-evento{
  position:absolute; border-radius:6px; color:#fff; padding:3px 7px;
  font-size:11px; overflow:hidden; cursor:grab; z-index:2;  /* arrastável desde 2026-08-06 */
  box-shadow:0 1px 3px rgba(19,24,41,.22); border:1px solid rgba(255,255,255,.35);
  display:flex; flex-direction:column; gap:0;
  transition:filter .12s ease, box-shadow .12s ease;
}
.tg-evento:hover{ filter:brightness(1.07); box-shadow:0 3px 9px rgba(19,24,41,.3); z-index:3; }
.tg-ev-titulo{ font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-ev-hora{ font-size:10px; opacity:.9; }
/* linha vermelha do "agora" (posicionada por portal.js) */
.tg-agora{
  position:absolute; left:0; right:0; height:2px; background:#EA4335; z-index:4; pointer-events:none;
}
.tg-agora::before{
  content:""; position:absolute; left:-5px; top:-4px;
  width:10px; height:10px; border-radius:50%; background:#EA4335;
}

/* Tarefa concluída, borda fina verde na grade (2026-08-12, 2ª rodada):
   bate o olho de longe em quais tarefas já foram feitas. Por ATRIBUTO, não
   por classe — agenda_attrs_evento() já publica data-ev-tipo/concluida/
   tarefa-feita em todo evento, sem precisar duplicar a lógica aqui. Vale
   nas três grades (semana/dia, faixa de dia inteiro e mês). */
.tg-evento[data-ev-tarefa-feita="1"],
.tg-evento[data-ev-tipo="tarefa"][data-ev-concluida="1"],
.tg-alldia-ev[data-ev-tarefa-feita="1"],
.tg-alldia-ev[data-ev-tipo="tarefa"][data-ev-concluida="1"]{
  border-color:var(--green) !important;
}
.gcal-ev.cheio[data-ev-tarefa-feita="1"],
.gcal-ev.cheio[data-ev-tipo="tarefa"][data-ev-concluida="1"]{
  border:1.5px solid var(--green);
}
.gcal-ev:not(.cheio)[data-ev-tarefa-feita="1"],
.gcal-ev:not(.cheio)[data-ev-tipo="tarefa"][data-ev-concluida="1"]{
  border:1.5px solid var(--green);
}

/* --- PROGRAMAÇÃO (lista) --- */
.prg{
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--vidro-borda); border-radius:var(--radius-lg);
  box-shadow:var(--vidro-sombra); overflow:hidden;
}
.prg-dia{ display:flex; gap:14px; padding:11px 16px; border-bottom:1px solid rgba(19,24,41,.06); }
.prg-dia:last-child{ border-bottom:0; }
.prg-data{ width:120px; flex-shrink:0; display:flex; align-items:center; gap:9px; }
.prg-num{
  font-size:17px; font-weight:600; width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.prg-data.hoje .prg-num{ background:var(--green); color:#fff; font-weight:700; }
.prg-mes{ font-size:10.5px; font-weight:600; color:var(--text-muted); text-transform:uppercase; }
.prg-eventos{ flex:1; display:flex; flex-direction:column; gap:4px; }
.prg-evento{
  display:flex; align-items:center; gap:9px; font-size:12.5px; cursor:pointer;
  padding:5px 9px; border-radius:7px;
}
.prg-evento:hover{ background:rgba(118,184,42,.08); }
.prg-horario{ color:var(--text-secondary); flex-shrink:0; min-width:92px; font-size:11.5px; }
.prg-titulo{ font-weight:550; }

/* --- POPOVER de evento (cartão flutuante ao clicar) --- */
.ev-popover{
  position:fixed; z-index:200; width:320px; max-width:calc(100vw - 24px);
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--vidro-borda); border-radius:var(--radius-lg);
  box-shadow:0 18px 48px rgba(15,20,35,.25); padding:16px 18px;
  animation:ev-pop .14s ease;
}
@keyframes ev-pop{ from{ opacity:0; transform:translateY(5px) scale(.98);} to{ opacity:1; transform:none;} }
.ev-popover-faixa{ height:5px; border-radius:4px 4px 0 0; position:absolute; top:0; left:0; right:0; }
.ev-popover h4{ margin:4px 0 8px; font-size:15.5px; font-weight:650; letter-spacing:-.01em; }
.ev-popover .linha{ display:flex; gap:8px; font-size:12.5px; color:var(--text-secondary); margin-top:5px; align-items:flex-start; }
.ev-popover .linha svg{ flex-shrink:0; margin-top:1px; }
.ev-popover .acoes{ display:flex; gap:8px; margin-top:14px; }

/* Acoes do popover do compromisso (2026-08-07): quatro botoes iguais em
   grade 2x2 — mesma largura, mesma altura, texto centralizado em caixa
   alta. Antes cada um tinha um estilo e um padding proprio, entao ficavam
   de tamanhos diferentes e desalinhados. */
.ev-popover .ev-acoes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }
.ev-popover .ev-bt{
  display:flex; align-items:center; justify-content:center; text-align:center;
  height:36px; padding:0 10px; border-radius:9px;
  background:var(--navy-800); border:1px solid var(--navy-800); color:#fff;
  font-family:inherit; font-size:11.5px; font-weight:650;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.15;
  text-decoration:none; cursor:pointer; box-shadow:0 2px 8px rgba(14,18,32,.18);
}
.ev-popover .ev-bt:hover{
  background:var(--navy-600); border-color:var(--navy-600); color:#fff;
  box-shadow:0 4px 12px rgba(14,18,32,.26);
}
/* um botao sozinho na ultima linha ocupa a largura toda, sem sobrar buraco */
.ev-popover .ev-acoes .ev-bt:last-child:nth-child(odd){ grid-column:1 / -1; }
/* ...menos o EXCLUIR (2026-08-10): botao vermelho ocupando a linha inteira
   vira alvo grande demais para uma acao sem volta. Fica sempre meia
   largura; quem estica e o vizinho. */
.ev-popover .ev-acoes .ev-bt-excluir:last-child:nth-child(odd){ grid-column:auto; }
.ev-popover .ev-bt-excluir{
  background:#B4322F; border-color:#B4322F; color:#fff;
  box-shadow:0 2px 8px rgba(180,50,47,.3);
}
.ev-popover .ev-bt-excluir:hover{
  background:#8F2523; border-color:#8F2523; color:#fff;
  box-shadow:0 4px 12px rgba(180,50,47,.42);
}
.ev-popover .fechar{
  position:absolute; top:9px; right:9px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; box-shadow:none; color:var(--text-muted);
  font-size:15px; cursor:pointer; padding:0;
}
.ev-popover .fechar:hover{ background:rgba(19,24,41,.07); }
/* concluir a tarefa agendada: verde cheio, e ocupa a linha toda quando
   sobra sozinho — é a acao principal do balao de uma tarefa (2026-08-12) */
.ev-popover .ev-bt-tarefa{
  background:var(--green); border-color:var(--green); color:#fff;
  box-shadow:0 2px 8px rgba(118,184,42,.3);
}
.ev-popover .ev-bt-tarefa:hover{
  background:var(--green-dark); border-color:var(--green-dark); color:#fff;
  box-shadow:0 4px 12px rgba(118,184,42,.42);
}

/* ---- escolher reuniao ou tarefa antes de criar (2026-08-12) ---- */
/* As regras da tela "reunião ou tarefa?" sairam junto com ela (2026-08-12):
   criar na agenda vai direto para o editor. O que sobrou aqui é do popup de
   projetos e tarefas, que continua existindo. */
.ev-tipo-item{
  display:block; width:100%; text-align:left; margin-bottom:4px;
  padding:9px 12px; border-radius:9px; font-size:12.5px; font-weight:600;
  border:1px solid transparent; background:transparent; color:var(--text-secondary);
}
.ev-tipo-item:hover{ background:var(--surface-1); border-color:var(--border); color:var(--text-primary); }
.ev-tipo-item.destaque{
  border-color:var(--green); background:var(--green-soft); color:var(--green-dark);
  margin-bottom:10px;
}
.ev-tipo-item.feita{ color:var(--text-muted); }
.ev-tipo-voltar{
  display:inline-block; margin:0 0 8px; padding:5px 9px; border-radius:8px;
  border:1px solid var(--border); background:transparent; color:var(--text-secondary);
  font-size:11.5px; font-weight:650;
}
.ev-tipo-voltar:hover{ background:var(--surface-1); color:var(--text-primary); }

/* ---- Popup grande "Agendar tarefa" (2026-08-12) ----
   Mesmos cartões .pjt-card da página de Projetos, dentro de um
   .wfm-overlay (que já cobre o popover da agenda: 900 contra 200). */
.ag-tar-caixa{ width:min(980px, 100%); }
.ag-tar-corpo{ font-size:12.5px; color:var(--text-secondary); }
/* o cartão vira <button>: tira a cara de botão e deixa a de cartão */
button.ag-tar-card-bt{
  width:100%; background:transparent; border:none; box-shadow:none;
  cursor:pointer; font-family:inherit; border-radius:inherit;
}
.ag-tar-nova{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:0 0 14px; padding:12px 14px; border-radius:11px;
  border:1.5px dashed var(--border-strong); background:var(--surface-2);
}
.ag-tar-nova-nome{ flex:1; min-width:220px; }
.ag-tar-item{ max-width:640px; }
/* criar tarefa ja na entrada, sem escolher projeto antes (2026-08-12) */
.ag-tar-nova-topo{ margin-bottom:16px; }
/* de que ferramenta do projeto o item veio (Kanban, Eisenhower...) */
.ag-tar-onde{
  display:block; margin-top:3px; font-size:10.5px; font-weight:500;
  color:var(--text-muted); letter-spacing:.02em;
}

/* editor rápido (popup de criar/editar compromisso, estilo Google) */
.ev-editor{ width:380px; padding:20px 20px 16px; }
.ev-editor .ed-titulo{
  width:100%; box-sizing:border-box; border:0; border-bottom:2px solid var(--border);
  border-radius:0; background:transparent; box-shadow:none;
  font-size:19px; font-weight:600; letter-spacing:-.01em;
  padding:8px 2px 7px; margin:6px 0 14px; height:auto;
}
.ev-editor .ed-titulo:focus{ outline:none; border-bottom-color:var(--green); box-shadow:none; }
.ev-editor .ed-linha{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.ev-editor .ed-linha > label{ flex-shrink:0; width:86px; padding-right:8px; font-size:12px; font-weight:600; color:var(--text-muted); }
.ev-editor .ed-linha select,
.ev-editor .ed-linha input[type=date],
.ev-editor .ed-linha input[type=time]{
  box-sizing:border-box; height:36px; font-size:13px; padding:6px 10px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
}
.ev-editor .ed-linha select{ flex:1; min-width:0; }
.ev-editor .ed-linha input[type=date]{ flex:1; min-width:0; }
.ev-editor .ed-horas input[type=time]{ width:104px; }
.ev-editor .ed-dur{
  box-sizing:border-box; height:36px; font-size:12.5px; padding:6px 8px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
  flex:1; min-width:0; max-width:150px;
}
.ev-editor .ed-ate{ color:var(--text-muted); }
.ev-editor .ed-diainteiro{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-secondary);
  margin:2px 0 4px 86px; cursor:pointer; user-select:none;
}
.ev-editor .ed-diainteiro input{ width:15px; height:15px; margin:0; accent-color:var(--green); }

/* Tarefa DE projeto (2026-08-12, 2ª rodada): nome fixo (não é texto livre)
   com um link para trocar de tarefa, no lugar do campo de título. */
.ev-editor .ed-tarefa-fixa{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:6px 0 14px; padding:8px 2px 11px; border-bottom:2px solid var(--border);
}
.ev-editor .ed-tarefa-fixa-nome{
  font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ev-editor .ed-tarefa-trocar{
  flex-shrink:0; background:transparent; border:0; box-shadow:none; padding:4px 0;
  font-size:12px; font-weight:650; color:var(--green-dark); cursor:pointer; text-decoration:underline;
}
.ev-editor .ed-tarefa-trocar:hover{ color:var(--green); }

/* Tarefa concluída, caixa GRANDE (2026-08-12, 2ª rodada): a caixinha
   pequena de antes era fácil de não notar — pedido do Matteo foi
   explicitamente "tem que ser bem grande, tem que ser um cheque". */
.ev-editor .ed-concluida-grande{
  display:flex; align-items:center; gap:11px; margin:4px 0 14px;
  padding:11px 14px; border-radius:10px; cursor:pointer; user-select:none;
  border:1.5px solid var(--border-strong); background:var(--surface-1);
  font-size:13.5px; font-weight:650; color:var(--text-secondary);
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ev-editor .ed-concluida-grande input{
  width:26px; height:26px; flex-shrink:0; margin:0; accent-color:var(--green); cursor:pointer;
}
.ev-editor .ed-concluida-grande:has(input:checked){
  border-color:var(--green); background:rgba(118,184,42,.09); color:var(--green-dark);
}
.ev-editor .ed-erro{ color:#B4322F; font-size:12.5px; margin-top:8px; }
.ev-editor .ed-parts-linha{ align-items:flex-start; }
.ev-editor .ed-parts-linha > label{ padding-top:8px; }
.ev-editor .ed-parts{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.ev-editor .ed-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ev-editor .ed-chips:empty{ display:none; }
.ev-editor .ed-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  background:var(--surface-1); border:1px solid var(--border); border-radius:999px;
  padding:4px 6px 4px 11px; font-size:12px; font-weight:600; color:var(--text-primary);
}
.ev-editor .ed-chip > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-editor .ed-chip-x{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; box-shadow:none; padding:0;
  font-size:10px; color:var(--text-muted); cursor:pointer;
}
.ev-editor .ed-chip-x:hover{ background:rgba(19,24,41,.09); color:var(--text-primary); }
.ev-editor .ed-addpart{
  box-sizing:border-box; height:34px; font-size:12.5px; padding:5px 10px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
  color:var(--text-secondary); max-width:100%;
}
/* ---------- Workflow: um cartão por projeto, contorno na cor dele ---------- */
.wf-cards{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin-bottom:12px; }
@media (max-width:900px){ .wf-cards{ grid-template-columns:repeat(2, 1fr); } }

.wfp{
  border:2.5px solid var(--border); border-radius:var(--radius-xl);
  background:var(--surface-2); box-shadow:var(--shadow-sm);
  margin-bottom:16px; overflow:hidden;
}
/* projeto aberto sozinho: ocupa o que sobra da altura da janela, e a lista
   de tarefas rola por dentro do cartão em vez de rolar a página inteira */
.wfp-cheia{ display:flex; flex-direction:column; min-height:calc(100vh - 210px); margin-bottom:0; }

/* ---------------------------------------------------------------------
   ⚠️ PROJETO ABERTO NÃO FICA DENTRO DE UM QUADRADO (29/08/2026)

   Pedido do Matteo, olhando a tela: "quando abre a tela inteira o foco é
   pra ser ele — por que ele tem um quadrado em si?". Eram DOIS quadrados,
   um dentro do outro, e juntos comiam a maior parte da tela:

     · `.wfp`      — cartão com borda de 2,5px, canto e sombra;
     · o teto de largura de `.fx-raiz > *` (1060px, 1240px no kanban).

   Medido antes de mexer, numa tela de 1920: o quadro do kanban saía com
   1240px começando em x=478 — 65% da largura, com ~200px de sobra de cada
   lado, e o conteúdo (1644px) rolando espremido lá dentro. O fluxograma já
   tinha sido liberado do teto em 14/08 pelo mesmo motivo (pedido do Fred);
   agora vale para todos.

   ⚠️ Isto vale SÓ na página do projeto aberto (`.wfp-cheia`). Na LISTA de
   projetos o cartão continua cartão — lá ele é um item entre vários, e
   tirar a borda misturaria um projeto com o outro. */
.wfp-cheia{
  border:0; border-radius:0; background:none; box-shadow:none; overflow:visible;
}
/* sem o cartão, a barra de ações precisa da própria linha de baixo */
.wfp-cheia > .wfp-cabecalho,
.wfp-cheia > .wfp-topo{ border-bottom:1px solid var(--border); }

/* a largura toda, para TODAS as ferramentas */
.wfp-cheia .fx-raiz{ padding:14px 0 0; background:none; }
.wfp-cheia .fx-raiz > *{ max-width:none; margin-left:0; margin-right:0; }

/* o quadro do kanban perde a moldura: vira o próprio palco */
.wfp-cheia .kb-quadro{
  border:0; border-radius:0; background:none; padding:0;
}
/* ⚠️ A rolagem lateral era ruim porque acontecia DENTRO de uma faixa de
   1240px: a barra ficava perdida no meio da tela e mal se via. Agora ela
   corre na largura toda, é grossa o bastante para pegar com o mouse, e o
   cabeçalho das colunas continua colado no topo enquanto rola. */
.wfp-cheia .kb-quadro{
  scrollbar-width:auto; scrollbar-color:var(--border-strong) transparent;
  overscroll-behavior-x:contain;
}
.wfp-cheia .kb-quadro::-webkit-scrollbar{ height:12px; }
.wfp-cheia .kb-quadro::-webkit-scrollbar-track{ background:transparent; }
.wfp-cheia .kb-quadro::-webkit-scrollbar-thumb{
  background:var(--border-strong); border-radius:99px;
  border:3px solid var(--surface-0); background-clip:padding-box;
}
.wfp-cheia .kb-quadro::-webkit-scrollbar-thumb:hover{ background:var(--text-muted); background-clip:padding-box; }
.wfp-cheia .kb-pista{ padding:0 0 6px; }

/* ⚠️ A PARTE DE BAIXO encolheu (mesmo pedido: "está muito grande, sem
   motivo"). O "+ adicionar raia" ocupava 64px de altura na largura toda,
   com duas linhas de explicação, para uma ação que quase nunca é usada.
   Virou um botão discreto do tamanho do texto; a explicação foi para o
   `title`, que aparece ao parar o mouse em cima. */
.wfp-cheia .kb-add-raia{
  display:inline-flex; width:auto; margin-top:10px;
  padding:7px 12px; font-size:12.5px; font-weight:600; border-radius:8px;
}
.wfp-cheia .kb-add-raia small{ display:none; }
.wfp-cheia .fx-dica{ margin-top:8px; font-size:11.5px; opacity:.75; }
.wfp-cheia .wfp-conteudo{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.wfp-cheia .wfp-gantt{ flex:1 1 auto; overflow:auto; }
/* sem corte seco: a grade dos dias (e a linha de hoje) desce até o pé do
   cartão — a linha do "+ Adicionar tarefa" estica para engolir a sobra */
.wfp-cheia .wfp-inner{ display:flex; flex-direction:column; min-height:100%; }
.wfp-cheia .wfp-tarefas{ flex:0 0 auto; }
.wfp-cheia .wfp-linha-add{ flex:1 1 auto; }
.wfp-cheia .wfp-linha-add .wfp-rotulo{ align-items:flex-start; }

/* botão de voltar da página inteira: grande e óbvio */
.wfp-voltar{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  padding:11px 20px; border-radius:12px; text-decoration:none;
  font-size:14px; font-weight:700; letter-spacing:-.01em;
  background:var(--surface-2); border:1.5px solid var(--border-strong);
  color:var(--text-primary); box-shadow:var(--shadow-sm);
}
.wfp-voltar:hover{ background:var(--surface-1); border-color:var(--text-muted); transform:translateX(-2px); }

/* botões rotulados da barra do projeto (Editar / Excluir) */
.wfp-btn{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border-radius:9px; cursor:pointer; font-size:12px; font-weight:650;
  background:rgba(255,255,255,.75); border:1px solid var(--border); color:var(--text-secondary);
  box-shadow:none;
}
.wfp-btn:hover{ background:#fff; color:var(--text-primary); border-color:var(--border-strong); }
/* mesmo padrao do .btn-danger (2026-08-10): excluir e sempre vermelho
   cheio com escrita branca, aqui tambem */
.wfp-btn.perigo{ background:#B4322F; border-color:#B4322F; color:#fff; text-transform:uppercase; letter-spacing:.04em; }
.wfp-btn.perigo:hover{ background:#8F2523; border-color:#8F2523; color:#fff; }
.wfp-btn.perigo svg{ color:#fff; }

/* barra única do projeto */
.wfp-cabeca{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; }
.wfp-bolinha{ width:13px; height:13px; border-radius:4px; flex-shrink:0; }
.wfp-nome{ font-size:15px; font-weight:750; letter-spacing:-.015em; }
.wfp-meta{ font-size:11.5px; color:var(--text-muted); }
.wfp-espaco{ flex:1; min-width:10px; }
.wfp-acao{
  width:26px; height:26px; padding:0; border-radius:8px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.7); border:1px solid var(--border); box-shadow:none;
  color:var(--text-secondary); font-size:12px; cursor:pointer;
}
.wfp-acao:hover{ background:#fff; color:var(--text-primary); border-color:var(--border-strong); }
a.wfp-acao{ text-decoration:none; font-size:14px; line-height:1; }
.wfp-acao.perigo:hover{ background:rgba(180,50,47,.12); color:#B4322F; border-color:rgba(180,50,47,.4); }
.wfp-situacao{
  width:auto; height:24px; padding:1px 7px; font-size:11px; font-weight:700;
  border-radius:999px; background:rgba(255,255,255,.8); border:1px solid var(--border);
}
.wfp-prog{
  position:relative; width:150px; height:24px; flex-shrink:0;
  border-radius:999px; background:rgba(19,24,41,.09); overflow:hidden;
  border:1px solid rgba(19,24,41,.06);
}
.wfp-prog i{ position:absolute; left:0; top:0; bottom:0; display:block; border-radius:999px; }
.wfp-prog b{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:var(--text-primary);
  /* contorno claro: o número continua legível sobre qualquer cor de projeto */
  text-shadow:0 0 3px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.95), 0 1px 1px rgba(255,255,255,.9);
}
.wfp-recolher{
  width:26px; height:26px; padding:0; border-radius:8px; flex-shrink:0;
  background:transparent; border:0; box-shadow:none; color:var(--text-secondary);
  font-size:13px; cursor:pointer;
}
.wfp.fechado .wfp-conteudo{ display:none; }
.wfp.fechado .wfp-recolher{ transform:rotate(-90deg); }

.wfp-form{ padding:12px 16px; border-top:1px solid var(--border); background:rgba(118,184,42,.05); }
.wfp-form-linha{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.wfp-form-linha:last-child{ margin-bottom:0; }
.wfp-form-linha input[type=text], .wfp-form-linha input[type=date], .wfp-form-linha select{
  box-sizing:border-box; height:36px; padding:6px 10px; font-size:12.5px; width:auto;
}
.wfp-form-linha input[type=date]{ width:150px; }
.wfp-form-linha input[type=color]{ width:52px; height:36px; padding:3px; }

/* gantt: rótulo grudado à esquerda, tempo rolando junto na mesma linha */
.wfp-gantt{ overflow-x:auto; border-top:1px solid var(--border); }
/* o min-width vem do PHP (560 + dias × largura mínima do dia):
   caber na tela = a faixa estica e não sobra branco; não caber = rola */
.wfp-inner{ width:100%; }
.wfp-linha{ min-height:52px; }
/* as linhas do Gantt também são [data-reorder-item] (arraste), mas NÃO devem
   herdar o visual de cartão daquele componente — em especial o
   align-items:center, que zerava a altura da faixa e apagava a grade */
.wfp-tarefas [data-reorder-item]{
  display:flex; align-items:stretch; gap:0;
  background:transparent; border:0; border-radius:0;
  padding:0; margin:0; cursor:default;
  border-bottom:1px solid rgba(19,24,41,.05);
}
.wfp-linha{ display:flex; align-items:stretch; border-bottom:1px solid rgba(19,24,41,.05); width:100%; }
.wfp-linha:last-child{ border-bottom:0; }
.wfp-linha:not(.wfp-cabecalho):hover{ background:rgba(118,184,42,.05); }
.wfp-rotulo{
  flex:0 0 660px; box-sizing:border-box;
  display:flex; align-items:center; gap:8px; padding:9px 12px 9px 14px;
  position:sticky; left:0; z-index:3;
  background:var(--surface-2); border-right:1px solid var(--border);
  min-height:52px;
}
.wfp-linha:not(.wfp-cabecalho):hover .wfp-rotulo{ background:#F6FAF0; }
/* cabeçalho: todos os títulos exatamente no mesmo estilo e alinhados
   com a coluna de dados que fica embaixo de cada um */
.wfp-cabecalho .wfp-rotulo{ background:var(--surface-1); align-items:flex-end; min-height:56px; padding-bottom:10px; }
.wfp-cabecalho .wfp-rotulo > span{
  font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-muted); white-space:nowrap; line-height:1;
}
.wfp-linha.ok .c-nome{ opacity:.5; text-decoration:line-through; }

.wfp-rotulo .c-nome{
  flex:1; min-width:0; font-size:12.5px; font-weight:650; line-height:1.32;
  white-space:normal; overflow-wrap:break-word; word-break:break-word;
}
.wfp-rotulo .c-donos{ width:84px; flex-shrink:0; display:flex; gap:3px; flex-wrap:wrap; }
.wfp-rotulo .c-data{ width:44px; flex-shrink:0; color:var(--text-secondary); font-variant-numeric:tabular-nums; font-size:12px; }
.wfp-rotulo .c-dur{ width:38px; flex-shrink:0; text-align:center; color:var(--text-muted); font-variant-numeric:tabular-nums; font-size:12px; }
.wfp-rotulo .c-prog{ width:58px; flex-shrink:0; text-align:center; }
.wfp-rotulo .c-ok{ width:104px; flex-shrink:0; }
.wfp-rotulo .c-x{ width:22px; flex-shrink:0; display:flex; justify-content:flex-end; }

/* % de tempo decorrido (automático, não se escolhe) */
.wfp-tempo-txt{ font-size:12px; font-weight:800; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.wfp-tempo-txt.atraso{ color:#B4322F; font-size:10px; letter-spacing:.03em; text-transform:uppercase; }
.wfp-tempo-txt.feito{ color:var(--green-dark); font-size:10px; letter-spacing:.03em; text-transform:uppercase; }

/* botão Concluir / Concluída */
.wfp-check{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--border); border-radius:999px;
  padding:4px 11px 4px 5px; font-family:inherit; font-size:11px; font-weight:700;
  color:var(--text-secondary); box-shadow:none; white-space:nowrap;
}
.wfp-check i{
  width:17px; height:17px; border-radius:50%; flex-shrink:0; font-style:normal;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(19,24,41,.08); color:transparent; font-size:10px; font-weight:900;
}
.wfp-check:hover{ border-color:var(--green); color:var(--text-primary); }
.wfp-check:hover i{ color:rgba(19,24,41,.25); }
.wfp-check.marcado{ background:rgba(118,184,42,.14); border-color:var(--green); color:var(--green-dark); }
.wfp-check.marcado i{ background:var(--green); color:#fff; }
.c-late{
  font-style:normal; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:#B4322F; background:rgba(180,50,47,.11); padding:1px 6px; border-radius:999px; white-space:nowrap;
}

.wfp-tempo{ position:relative; flex:1 1 auto; min-width:0; }
.wfp-cabecalho .wfp-tempo{ background:var(--surface-1); }
/* grade de dias: uma linha cinza clara em cada divisa de dia, contínua de
   cima a baixo do quadro (cada linha desenha a sua parte) */
.wfp-faixa{ background-image:linear-gradient(90deg, rgba(19,24,41,.17) 1px, transparent 1px); }
.wfp-meses{ display:flex; height:24px; border-bottom:1px solid var(--border); }
.wfp-meses span{
  display:inline-flex; align-items:center; padding-left:9px; box-sizing:border-box;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); border-right:1px solid var(--border); white-space:nowrap; overflow:hidden;
}
.wfp-dias{ display:flex; height:30px; }
.wfp-dias span{
  box-sizing:border-box; flex-shrink:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1.1;
  /* mesma divisa que a grade das linhas: o traço do dia desce contínuo */
  border-left:1px solid rgba(19,24,41,.17); overflow:hidden;
}
.wfp-dias span:first-child{ border-left-color:transparent; }
/* escala semana/mês: célula maior, rótulo alinhado à esquerda */
.wfp-dias.largo{ height:34px; }
.wfp-dias.largo span{ align-items:flex-start; padding-left:9px; border-left:1px solid var(--border-strong); }
.wfp-dias.largo b{ font-size:11px; }
.wfp-dias b{ font-size:10.5px; font-weight:700; color:var(--text-secondary); }
.wfp-dias small{ font-size:8px; color:var(--text-muted); }
.wfp-dias .hj{ background:rgba(234,67,53,.12); }
.wfp-dias .hj b{ color:#EA4335; }
.wfp-hoje{ position:absolute; top:0; bottom:0; width:2px; background:#EA4335; z-index:2; pointer-events:none; }

.wf-b-tarefa{
  position:absolute; top:50%; transform:translateY(-50%); height:34px;
  border-radius:9px; overflow:hidden; z-index:1;
  box-shadow:0 2px 7px rgba(15,20,35,.16), inset 0 0 0 1px rgba(19,24,41,.06);
  transition:box-shadow .1s ease;
}
.wf-b-tarefa:hover{ box-shadow:0 5px 16px rgba(15,20,35,.28); z-index:4; }
/* parte do prazo que já passou: cor cheia. o resto fica na cor clara do fundo */
.wf-b-passado{ display:block; height:100%; border-radius:9px 0 0 9px; }
.wf-b-tarefa.ok{ opacity:.55; filter:saturate(.7); }
.wf-b-tarefa.ok .wf-b-passado{ border-radius:9px; }
.wf-b-tarefa.atrasada{ outline:2px solid #B4322F; outline-offset:1px; }

/* alça de arrastar a tarefa para cima/baixo */
.wfp-pegar{
  flex-shrink:0; width:14px; cursor:grab; user-select:none;
  color:var(--text-muted); font-size:13px; line-height:1; letter-spacing:-1px;
  opacity:.35; align-self:center;
}
.wfp-pegar:hover{ opacity:1; color:var(--text-primary); }
.wfp-pegar:active{ cursor:grabbing; }
.wfp-linha[data-reorder-item].sendo-arrastado{ opacity:.4; }
.wfp-linha[data-reorder-item].sendo-arrastado .wfp-rotulo{ background:rgba(118,184,42,.12); }

.wfp-linha-add .wfp-rotulo{ padding:7px 12px 7px 16px; }
.wfp-add{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:transparent; border:1.5px dashed var(--border-strong); border-radius:9px;
  padding:6px 14px; font-family:inherit; font-size:12px; font-weight:650;
  color:var(--text-secondary); box-shadow:none;
}
.wfp-add span{
  width:18px; height:18px; border-radius:50%; background:var(--green); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; line-height:1;
}
.wfp-add:hover{ border-color:var(--green); color:var(--text-primary); background:rgba(118,184,42,.08); }

.wf-avatar{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:9px; font-weight:800;
  border:1.5px solid #fff; box-shadow:0 1px 3px rgba(15,20,35,.25);
}
.wf-p-x{
  width:22px; height:22px; padding:0; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; box-shadow:none; color:var(--text-muted);
  font-size:11px; cursor:pointer;
}
.wf-p-x:hover{ background:rgba(180,50,47,.12); color:#B4322F; }

/* edição direto na célula */
.wf-inline{ cursor:pointer; border-bottom:1px dashed transparent; }
.wf-inline:hover{ border-bottom-color:var(--border-strong); background:rgba(118,184,42,.1); border-radius:4px; }
.c-donos.wf-inline{ border-radius:6px; padding:2px 4px; margin:-2px -4px; }
.wf-inline-input{
  box-sizing:border-box; width:100%; height:30px !important; padding:3px 8px !important;
  font-size:12.5px !important; border-radius:7px !important; border:1.5px solid var(--green) !important;
  background:#fff !important; box-shadow:0 0 0 3px rgba(118,184,42,.15) !important;
}
.wf-inline-input:not(.nome){ width:130px; }
.wf-minipop{
  position:fixed; z-index:300; min-width:190px;
  background:rgba(255,255,255,.98); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 14px 40px rgba(15,20,35,.25); padding:11px 13px;
  display:flex; flex-direction:column; gap:6px; animation:ev-pop .12s ease;
}
.wf-minipop > b{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
.wf-minipop label{ display:flex; align-items:center; gap:8px; font-size:12.5px; cursor:pointer; padding:3px 2px; }
.wf-minipop label input{ width:15px; height:15px; margin:0; accent-color:var(--green); }
.wf-minipop .btn-primary{ margin-top:6px; }
/* ---------- prazos das etapas na criação do contrato ---------- */
.ct-etapas{ display:flex; flex-direction:column; gap:6px; }
.ct-etapa{
  display:flex; align-items:center; gap:11px;
  background:var(--surface-1); border:1px solid var(--border); border-radius:9px;
  padding:8px 13px;
}
.ct-etapa-num{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(118,184,42,.16); color:var(--green-dark); font-size:11px; font-weight:800;
}
.ct-etapa-nome{ flex:1; min-width:0; font-size:13px; font-weight:600; }
.ct-etapa-prazo{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:11.5px; color:var(--text-muted);
}
.ct-etapa-prazo input{ width:74px; height:32px; padding:3px 8px; font-size:12.5px; text-align:center; }

/* ---------- Financeiro por mês ---------- */
.fin-shell{ display:flex; gap:16px; align-items:flex-start; }
.fin-meses{
  width:190px; flex-shrink:0; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:16px;
}
.fin-mes{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 13px; border-radius:10px; text-decoration:none;
  background:var(--surface-2); border:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--text-secondary);
}
.fin-mes:hover{ border-color:var(--border-strong); color:var(--text-primary); box-shadow:var(--shadow-xs); }
.fin-mes.active{
  background:linear-gradient(160deg,#141A2C,#232B45); color:#fff; border-color:#141A2C;
  box-shadow:var(--shadow-sm);
}
.fin-mes-tag{
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; background:rgba(118,184,42,.16); color:var(--green-dark);
}
.fin-mes.active .fin-mes-tag{ background:rgba(118,184,42,.35); color:#E6F5D2; }
.fin-mes-seta{
  text-align:center; padding:5px; border-radius:8px; text-decoration:none;
  color:var(--text-muted); font-size:11px; border:1px dashed var(--border);
}
.fin-mes-seta:hover{ color:var(--text-primary); border-color:var(--border-strong); background:var(--surface-2); }

.fin-extrato{
  flex:1; min-width:0;
  background:var(--vidro-fundo, rgba(255,255,255,.66));
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--vidro-borda, var(--border)); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm); padding:22px 24px 24px;
}
.fin-titulo-mes{ font-size:18px; font-weight:700; letter-spacing:-.02em; margin:0 0 16px; }
.fin-grupo-titulo{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:8px;
}
.fin-vazio{ font-size:12.5px; color:var(--text-muted); padding:10px 2px 4px; }

/* uma linha só por lançamento, em COLUNAS alinhadas e separadas por
   divisória: dia · nome · categoria/produto · situação · valor */
/* A categoria dividia o espaço com o nome numa largura fixa de 190px e
   vivia cortando ("MATERIAL DE USO E CONS…") enquanto o nome sobrava
   espaço. Agora as duas são frações: o nome fica maior, mas a categoria
   cresce junto com a tela. Respiro vertical um pouco maior. (2026-08-05) */
.fin-linha{
  /* A coluna de situação passou de 116px para 184px (2026-08-07): com dois
     chips ("RECEBIDO" + "ATRASADO") eles não cabiam, ficavam colados um no
     outro e invadiam a coluna do valor — era esse o desalinhamento. */
  display:grid; align-items:center; gap:0;
  grid-template-columns:48px minmax(0,1.7fr) minmax(0,1fr) 184px 148px;
  padding:0 12px; border-radius:8px; margin-bottom:4px;
  border:1px solid transparent; min-height:42px;
}
.fin-linha > *{
  padding:9px 14px; min-width:0;
  border-left:1px solid rgba(19,24,41,.07);
}
.fin-linha > *:first-child{ border-left:0; padding-left:0; }
.fin-linha > *:last-child{ padding-right:0; }
@media (max-width:1240px){
  .fin-linha{ grid-template-columns:44px minmax(0,1.5fr) minmax(0,1fr) 168px 136px; }
  .fin-linha > *{ padding:8px 10px; }
}
@media (max-width:1100px){
  .fin-linha{ grid-template-columns:42px minmax(0,1.4fr) minmax(0,.9fr) 152px 128px; }
  .fin-linha > *{ padding:7px 9px; }
}
@media (max-width:760px){
  .fin-linha{ grid-template-columns:38px minmax(0,1fr) 96px 108px; }
  .fin-linha .fin-cat{ display:none; }
}
.fin-cabeca{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.fin-cabeca .fin-titulo-mes{ margin:0; }
.fin-filtros{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; align-items:center; }
.fin-filtros .fin-busca{
  width:230px; height:32px; padding:3px 11px; font-size:12.5px;
  border-radius:8px; background:var(--surface-2); border:1px solid var(--border);
}
.fin-filtros .fin-busca:focus{ border-color:var(--green); }
@media (max-width:760px){ .fin-filtros .fin-busca{ width:100%; } }
.fin-filtros select{
  width:auto; height:32px; padding:3px 9px; font-size:12px; font-weight:600;
  border-radius:8px; background:var(--surface-2); border:1px solid var(--border);
}
.fin-cat{
  font-size:11.5px; color:var(--text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* os chips precisam de folga entre si e nunca podem passar da coluna */
.fin-sit{ display:flex; justify-content:center; align-items:center; gap:6px; min-width:0; overflow:hidden; }
.fin-sit > *{ flex-shrink:0; }
/* cada lançamento abre ali mesmo, sem precisar ir em "Gerenciar" */
.fin-item > summary{ list-style:none; cursor:pointer; }
.fin-item > summary::-webkit-details-marker{ display:none; }
.fin-item > summary:hover{ filter:brightness(.97); }
.fin-item[open] > summary{ margin-bottom:0; border-radius:10px 10px 0 0; }
.fin-acoes{
  background:var(--surface-1); border:1px solid var(--border); border-top:0;
  border-radius:0 0 10px 10px; padding:12px 14px; margin-bottom:8px;
  display:flex; flex-direction:column; gap:10px;
}
.fin-acoes-info{ font-size:12.5px; color:var(--text-secondary); }
.fin-form-conc, .fin-form-edit{ display:flex; gap:9px; flex-wrap:wrap; align-items:flex-end; }
.fin-form-edit{ padding-top:10px; border-top:1px dashed var(--border); }
.fin-acoes label{
  display:flex; flex-direction:column; gap:3px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted);
}
.fin-acoes label input, .fin-acoes label select{
  box-sizing:border-box; height:32px; padding:4px 8px; font-size:12.5px;
  font-weight:500; letter-spacing:0; color:var(--text-primary);
}
.fin-acoes label input[type=text]{ width:112px; }
.fin-acoes label input[type=date]{ width:138px; }
.fin-acoes label select{ width:auto; min-width:120px; }
.fin-form-edit label:nth-child(2) input{ width:190px; }
.fin-parcial{ justify-content:flex-end; }
.fin-parcial > span{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--text-secondary);
  height:32px;
}
.fin-parcial input[type=checkbox]{ width:15px; height:15px; margin:0; accent-color:var(--green); }
.fin-parcial input[type=date]{ margin-top:4px; }
.fin-acoes-rodape{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:9px; border-top:1px dashed var(--border);
  font-size:11.5px; color:var(--text-muted);
}
/* cores combinadas: verde bem clarinho na entrada, vermelho bem clarinho na
   saída (mesma intensidade), âmbar quando é recorrente de valor variável */
/* verde = entrada, vermelho = saída. Nada de laranja. */
.fin-ent{ background:rgba(118,184,42,.09); border-color:rgba(118,184,42,.22); }
.fin-sai{ background:rgba(217,83,79,.09);  border-color:rgba(217,83,79,.22); }
/* no extrato mensal só o DIA basta: o mês já é o título da tela */
.fin-dia{
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:750; font-variant-numeric:tabular-nums;
  color:var(--text-secondary);
}
.fin-desc{
  font-size:12.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fin-chip{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.fin-chip-pago{ background:rgba(118,184,42,.18); color:#3E7113; }
.fin-chip-vencido{ background:rgba(180,50,47,.14); color:#B4322F; }
.fin-chip-aberto{ background:rgba(19,24,41,.07); color:var(--text-secondary); }
.fin-valor{ text-align:right; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.fin-ent .fin-valor{ color:#3E7113; }
.fin-sai .fin-valor{ color:#B4322F; }

/* resumo do mês: azul em transparência */
.fin-resumo{
  margin-top:22px; border-radius:var(--radius-lg); padding:16px 18px;
  background:rgba(62,134,201,.10); border:1px solid rgba(62,134,201,.28);
  display:flex; flex-direction:column; gap:8px;
}
.fin-resumo > div{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.fin-resumo span{ color:var(--text-secondary); }
.fin-resumo b{ font-variant-numeric:tabular-nums; }
.fin-resumo-saldo{
  border-top:1px solid rgba(62,134,201,.3); padding-top:10px; margin-top:2px;
  font-size:14.5px !important;
}
.fin-resumo-saldo span{ font-weight:650; color:var(--text-primary); }
.fin-resumo-saldo.positivo b{ color:#3E7113; font-size:16px; }
.fin-resumo-saldo.negativo b{ color:#B4322F; font-size:16px; }
.fin-saldo-ini{ align-items:center; padding-bottom:8px; border-bottom:1px solid rgba(62,134,201,.28); margin-bottom:2px; }
.fin-nota-saldo{ font-size:11.5px; color:var(--text-muted); line-height:1.5; padding-top:6px; }
.fin-tipo{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.fin-tipo label{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--surface-1); border:1.5px solid var(--border); border-radius:10px;
  padding:9px 15px; font-size:12.5px; font-weight:650;
}
.fin-tipo label:has(input:checked){ border-color:var(--green); background:rgba(118,184,42,.1); }
.fin-tipo input{ width:15px; height:15px; margin:0; accent-color:var(--green); }

@media (max-width:900px){
  .fin-shell{ flex-direction:column; }
  .fin-meses{ width:100%; flex-direction:row; flex-wrap:wrap; position:static; }
  .fin-mes{ flex:1; min-width:130px; }
}

/* ---------- variações do produto ---------- */
.var-linha{
  display:grid; grid-template-columns:1.2fr 1.6fr .8fr .8fr auto; gap:10px;
  align-items:center; margin-bottom:9px;
}
.var-linha input{ box-sizing:border-box; width:100%; }
.var-linha [data-var-remover]{ padding:6px 11px; }
@media (max-width:900px){ .var-linha{ grid-template-columns:1fr 1fr; } }

/* ---------- canvas do fluxo do produto ---------- */
.fx-barra{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.fx-paleta{ display:flex; gap:6px; flex-wrap:wrap; }
.fx-add{
  font-family:inherit; font-size:12px; font-weight:600; cursor:pointer;
  padding:6px 12px; border-radius:999px; box-shadow:none;
  background:var(--surface-1); border:1px solid var(--border); color:var(--text-secondary);
}
.fx-add:hover{ border-color:var(--green); color:var(--text-primary); background:rgba(118,184,42,.08); }
.fx-acoes{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.fx-estado{ font-size:11.5px; font-weight:600; margin-right:4px; }

.fx-canvas{
  position:relative; min-height:360px; overflow:auto;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 1px 1px, rgba(19,24,41,.11) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}
.fx-linhas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.fx-linha{ stroke:#7A8194; stroke-width:1.9; pointer-events:stroke; cursor:pointer; }
.fx-linha:hover{ stroke:var(--text-primary); stroke-width:2.6; }
.fx-linha.selecionada{ stroke:#B4322F; stroke-width:2.8; }
.fx-linha-rotulo{ font-size:11px; font-weight:700; fill:var(--text-secondary); text-anchor:middle; }
.fx-vazio{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--text-muted); pointer-events:none; text-align:center; padding:20px;
}

.fx-no{
  position:absolute; min-width:158px; max-width:230px; min-height:52px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:11px 15px; border-radius:12px; cursor:grab; user-select:none;
  font-size:12.5px; font-weight:650; line-height:1.3; color:#fff;
  box-shadow:0 4px 14px rgba(15,20,35,.16); border:1px solid rgba(255,255,255,.18);
}
.fx-no:active{ cursor:grabbing; }
.fx-no.selecionado{ outline:2.5px solid var(--navy-700); outline-offset:2px; }
.fx-no.ligando{ outline:2.5px dashed var(--green); outline-offset:2px; }
.fx-no-txt{ pointer-events:none; }
.fx-alca{
  position:absolute; right:-9px; bottom:-9px; width:19px; height:19px; padding:0;
  border-radius:50%; cursor:crosshair; box-shadow:0 2px 6px rgba(15,20,35,.3);
  background:#fff; border:2px solid var(--green);
}
.fx-alca:hover{ background:var(--green); }

/* cores: identidade Vanitelli (verde/navy) + apoio para os outros tipos */
.fx-inicio{ background:linear-gradient(160deg,#131829,#232B45); }
.fx-processo{ background:linear-gradient(160deg,#76B82A,#5D9720); }
.fx-subprocesso{ background:linear-gradient(160deg,#8A93A8,#6E7789); }
.fx-decisao{
  background:linear-gradient(160deg,#E39A17,#C97E06); min-width:150px;
  border-radius:10px; transform:none;
}
.fx-decisao .fx-no-txt::before{ content:"◆ "; opacity:.85; }
.fx-espera{ background:linear-gradient(160deg,#3E86C9,#2D6BA5); }
.fx-cliente{ background:linear-gradient(160deg,#7E5BD1,#6544B4); }
.fx-documento{ background:linear-gradient(160deg,#4E5668,#3A4152); }

.fx-legenda{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:11.5px; color:var(--text-secondary); }
.fx-legenda span{ display:flex; align-items:center; gap:6px; }
.fx-legenda i{ width:12px; height:12px; border-radius:4px; display:inline-block; }
.fx-cor-inicio{ background:#1B2136; }
.fx-cor-processo{ background:#76B82A; }
.fx-cor-subprocesso{ background:#8A93A8; }
.fx-cor-decisao{ background:#E39A17; }
.fx-cor-espera{ background:#3E86C9; }
.fx-cor-cliente{ background:#7E5BD1; }
.fx-cor-documento{ background:#4E5668; }

/* "Gerenciar agendas": o que raramente se mexe fica fechado num <details>,
   para a tela não virar um paredão de texto (2026-08-05) */
.ag-detalhe{ margin-top:10px; font-size:12.5px; color:var(--text-secondary); }
.ag-detalhe > summary{
  cursor:pointer; color:var(--text-muted); font-size:12px;
  padding:4px 0; list-style:none; user-select:none;
}
.ag-detalhe > summary::-webkit-details-marker{ display:none; }
.ag-detalhe > summary::before{ content:'▸ '; }
.ag-detalhe[open] > summary::before{ content:'▾ '; }
.ag-detalhe > summary:hover{ color:var(--text-primary); }

/* bloco do cartão de crédito no contrato (2026-08-05) */
.ct-cartao{
  margin-top:12px; padding:12px 14px; border-radius:var(--radius);
  border:1px dashed var(--border-strong); background:var(--surface-1);
}
.ct-cartao .field-hint{ margin-top:4px; }

/* tabela de ajuste do que o cliente vê no Financeiro (2026-08-05):
   linha destacada quando a visão dele foi alterada de propósito */
.pf-tabela input[type="text"], .pf-tabela select{
  width:100%; height:31px; padding:3px 9px; font-size:12.5px; min-width:110px;
}
.pf-tabela td{ vertical-align:middle; }
.pf-ajustada{ background:#FFF9EC; }
.pf-ajustada td:first-child{ box-shadow:inset 3px 0 0 #E0A93E; }

/* ============================================================
   Portal do Cliente — Cronograma · Atividades · Entregas · Financeiro
   (2026-08-05). Prefixo .pc- para não colidir com as telas internas.
   ============================================================ */
.pc-progresso-topo{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:13px; color:var(--text-secondary); margin-bottom:6px;
}
.pc-progresso-topo b{ color:var(--text-primary); font-size:14px; }
.pc-barra{ height:7px; border-radius:999px; background:var(--surface-0); overflow:hidden; }
.pc-barra > span{ display:block; height:100%; background:var(--green); border-radius:999px; }

/* ---- etapas do cronograma ---- */
.pc-etapas{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.pc-etapa{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2);
}
.pc-etapa.feita{ background:var(--green-soft); border-color:#D3E9B5; }
.pc-etapa-marca{
  width:11px; height:11px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--border-strong); background:transparent;
}
.pc-etapa.feita .pc-etapa-marca{ background:var(--green); border-color:var(--green); }
.pc-etapa-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.pc-etapa-txt b{ font-size:13.5px; font-weight:650; }
.pc-etapa-txt small, .pc-item-txt small{ font-size:11.5px; color:var(--text-muted); }

/* ---- etiquetas de situação ---- */
.pc-chip{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
  white-space:nowrap; background:var(--surface-0); color:var(--text-secondary);
}
.pc-et-ok{ background:var(--green-soft); color:var(--green-dark); }
/* "Finalizando" — é o atrasado do time, dito de outro jeito para o
   cliente: laranja em vez de vermelho, sem soar cobrança */
.pc-et-final{ background:#FFF1DF; color:#B4671B; }
/* Selo extra (2026-08-12, etapa 59): mostra no Cronograma do cliente
   quando a etapa está marcada como pendência dele — mesma laranja do
   Painel de Fluxo interno (.pf-lt-chip-cliente), fica AO LADO do chip
   de situação, nunca no lugar dele. */
.pc-chip-cliente{ background:#FFF1DF; color:#B4671B; }
.pc-et-andando{ background:#E9F0FE; color:#2B5CAB; }
/* PRONTO, AGUARDANDO A DATA — só o administrador vê (2026-09-01, pedido do
   Fred: "quando está concluído mas não foi entregue, deixa azul"). Azul
   forte para separar do «Em andamento», que é o mesmo estado visto pelo
   cliente. Verde continua querendo dizer uma coisa só: chegou às mãos dele. */
.pc-et-pronto{ background:#2B5CAB; color:#fff; }
.pc-et-espera{ background:var(--surface-0); color:var(--text-muted); }
/* ATRASADO — só no Financeiro do portal (2026-08-10, pedido do Matteo).
   É a exceção deliberada ao "Finalizando" laranja: parcela vencida é
   cobrança, e cobrança precisa ser lida como cobrança. */
.pc-et-atraso{ background:rgba(180,50,47,.12); color:#B4322F; letter-spacing:.03em; }
html[data-tema="escuro"] .pc-et-atraso{ background:rgba(180,50,47,.2); color:#F0A9A7; }

.pc-bt-agendar{
  font-size:12px; font-weight:650; padding:6px 12px; border-radius:8px;
  background:var(--navy-900); color:#fff; text-decoration:none; white-space:nowrap;
  border:0; cursor:pointer; font-family:inherit;
}
.pc-bt-agendar:hover{ background:var(--navy-700); color:#fff; }

/* ---- listas (pendências, parcelas, avisos) ---- */
.pc-grupo-resumo{ margin:-4px 0 10px; font-size:12.5px; color:var(--text-muted); }
.pc-lista{ display:flex; flex-direction:column; gap:7px; }
.pc-item{
  display:flex; align-items:center; gap:14px; padding:12px 14px; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2);
}
.pc-item-txt{ flex:1; min-width:190px; display:flex; flex-direction:column; gap:2px; }
.pc-item-txt b{ font-size:13.5px; font-weight:650; }
.pc-item-lado{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* ---- envio de arquivo nas pendências que vêm da base (2026-08-29) ----
   O sinal é a informação principal da linha: vermelho enquanto falta, verde
   quando chegou. Cores literais, e não os tokens de superfície, porque
   «pendente» e «enviado» querem dizer a mesma coisa nos dois temas. */
.pc-item-acao{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
.pc-sinal{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
}
.pc-sinal::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pc-sinal-falta{ background:#FDF3F2; border:1px solid #F0C9C7; color:#B4322F; }
.pc-sinal-ok{ background:#F1F8EA; border:1px solid #CDE6AE; color:#4E8117; }
/* o input de arquivo fica escondido dentro do rótulo: o botão é o rótulo,
   e escolher o arquivo já envia (o form.submit do onchange) — sem um
   segundo clique em «enviar», que é onde as pessoas desistem */
.pc-envio-form{ display:inline; }
.pc-envio-bt{ cursor:pointer; }
/* «remover» fica discreto de propósito: é ação do time, apaga de vez,
   e não deve competir com o botão de enviar. */
.pc-envio-tirar{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:#B4322F; text-decoration:underline;
}

/* ---- planos de ação ---- */
.pc-projeto{
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px 16px; margin-bottom:12px; background:var(--surface-2);
}
.pc-tarefas{ margin-top:12px; display:flex; flex-direction:column; gap:4px; }
.pc-tarefa{
  display:flex; align-items:center; gap:11px; padding:8px 10px;
  border-radius:8px; margin:0;
}
.pc-tarefa:hover{ background:var(--surface-1); }
.pc-tarefa.feita .pc-tarefa-nome{ color:var(--text-muted); text-decoration:line-through; }
.pc-check{
  width:21px; height:21px; flex-shrink:0; border-radius:6px; cursor:pointer;
  border:1.5px solid var(--border-strong); background:var(--surface-2);
  color:#fff; font-size:12px; font-weight:700; line-height:1; padding:0;
}
.pc-tarefa.feita .pc-check{ background:var(--green); border-color:var(--green); }
.pc-check:disabled{ cursor:not-allowed; opacity:.5; }
.pc-tarefa-nome{ flex:1; min-width:0; font-size:13.5px; }
.pc-tarefa-prazo{ font-size:11.5px; color:var(--text-muted); white-space:nowrap; }
.pc-tarefa-prazo.final{ color:#B4671B; font-weight:650; }

/* ---- entregas: quadrados ---- */
.pc-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }

/* ---- Entregas em LINHA (2026-08-31, pedido do Fred) ----------------
   Eram quadradinhos numa grade. Em quadrado a ordem do cronograma não se
   lê (o olho varre em zigue-zague) e não sobra canto para um botão sem
   virar bagunça. Em linha, a ordem é a leitura, e o «Ver documento» tem
   sempre o mesmo lugar: o fim da linha. */
.pc-linhas{ display:flex; flex-direction:column; gap:8px; }
.pc-linha-doc{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2);
}
.pc-linha-doc:hover{ border-color:var(--green); }
/* o número é a posição no cronograma, não um enfeite */
.pc-linha-ord{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:var(--surface-0); color:var(--text-secondary);
  font-size:11.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.pc-linha-ico{ flex:0 0 auto; color:var(--text-muted); display:inline-flex; }
.pc-linha-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pc-linha-nome{ font-size:14px; font-weight:650; line-height:1.3; }
.pc-linha-sub{ font-size:11.5px; color:var(--text-muted); }
.pc-linha-ver{
  flex:0 0 auto; height:34px; padding:0 14px; border-radius:9px;
  background:var(--green); color:#fff; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap;
}
.pc-linha-ver:hover{ filter:brightness(1.06); color:#fff; }
/* entrega que o cliente ainda não vê: some a cor, não some da tela */
.pc-linha-doc.oculto{ opacity:.62; }
/* Andamento da alteração: âmbar enquanto está pedida, verde depois de
   refeita. São dois estados de uma coisa só, então moram juntos. */
.pc-chip-alterar{ background:#FFF4D6; color:#8A6100; }
.pc-chip-alterado{ background:var(--green-soft); color:var(--green-dark); }

/* caixinha de pedir alteração, abaixo da linha */
.pc-editar-cx{
  margin:-2px 0 4px; padding:14px; border:1px solid var(--border-strong);
  border-radius:var(--radius); background:var(--surface-1);
  display:flex; flex-direction:column; gap:8px;
}
.pc-editar-cx textarea{ width:100%; }
.pc-editar-pe{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pc-editar-pe .espaco{ flex:1; }
.pc-ditar{ display:inline-flex; align-items:center; gap:8px; }
.pc-ditar-bt.ativo{ border-color:var(--green); color:var(--green-dark); }
.pc-ditar-dica{ font-size:11.5px; color:var(--text-muted); }

@media (max-width: 640px){
  .pc-linha-doc{ flex-wrap:wrap; }
  .pc-linha-ver{ flex:1 1 100%; justify-content:center; }
}
.pc-cartao{
  display:flex; flex-direction:column; gap:4px; padding:18px 16px; min-height:110px;
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-2);
  text-decoration:none; color:var(--text-primary); justify-content:flex-end;
}
.pc-cartao:hover{ border-color:var(--green); box-shadow:var(--shadow-sm); }
.pc-cartao-nome{ font-size:14px; font-weight:650; line-height:1.3; }
.pc-cartao-sub{ font-size:11.5px; color:var(--text-muted); }
.pc-cartao-doc{ justify-content:space-between; }
.pc-doc-ico{ color:var(--green-dark); }

/* ---------- faixa de "vendo como o cliente" (2026-08-05) ----------
   Laranja de propósito: não é erro nem sucesso, é um aviso de contexto.
   Fica no topo o tempo todo para ninguém confundir o portal do cliente
   com o Portal interno. */
.visita-faixa{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:#FFF4E2; border:1px solid #F3D9AE; color:#8A5B00;
  border-radius:var(--radius); padding:10px 14px; margin-bottom:16px; font-size:13px;
}
.visita-faixa b{ font-weight:700; }
.visita-faixa form{ margin:0; }
.visita-faixa button{
  border:1px solid #D9A94E; background:#fff; color:#8A5B00; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:650;
  padding:6px 13px; border-radius:8px; white-space:nowrap;
}
.visita-faixa button:hover{ background:#FFF9F0; border-color:#B4832F; }

/* ---------- Equipe em cartões (2026-08-05) ---------- */
/* 4 por fileira; encolhe sozinho em tela menor */
.eq-grade{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px 20px; }
@media (max-width:1280px){ .eq-grade{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:980px){ .eq-grade{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:620px){ .eq-grade{ grid-template-columns:1fr; } }
.eq-item{ position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; }
.eq-item .pc-card-wrapper{ width:100%; }

/*
 * ⚠️ O ProfileCard original dimensiona pela ALTURA (height:80svh +
 * aspect-ratio), e a largura sai daí — por isso o cartão estourava a
 * coluna e passava por cima do painel ao lado. Aqui é o contrário: a
 * largura manda e a altura vem do aspect-ratio, então todos os cartões
 * ficam do mesmo tamanho e os botões alinham sozinhos. (2026-08-05)
 */
.eq-grade .pc-card,
.eq-ficha .pc-card{ width:100%; height:auto; max-height:none; }

/* com o cartão menor, o texto acompanha (o original usa svh e ficava
   grande demais em cartão de 4 colunas) */
.eq-grade .pc-details h3{ font-size:clamp(17px, 1.55vw, 23px); }
.eq-grade .pc-details p{ font-size:12.5px; }
.eq-grade .pc-details .pc-extra{ font-size:11px; }

.eq-ver{
  margin-top:auto; width:100%; display:flex; justify-content:center; align-items:center;
  padding:9px 14px; font-weight:650; font-size:13.5px;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius); color:var(--text-primary); text-decoration:none;
}
.eq-ver:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-soft); }
.eq-inativo{
  position:absolute; top:8px; right:8px; z-index:3;
  background:rgba(19,24,41,.82); color:#fff; font-size:10.5px; font-weight:700;
  padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
}
/* "bloqueado" (2026-09-04) na grade da equipe: mesma pílula do inativo,
   mas em âmbar — visualmente diferente de longe, sem precisar ler o
   texto, já que aqui vira "some/não some da lista de vendedor". */
.eq-inativo.eq-bloqueado{ background:#B5730F; }
/* 3ª linha do cartão (último acesso), abaixo do cargo */
.pc-details .pc-extra{ font-size:11.5px; opacity:.72; margin-top:2px; }

/* ficha de uma pessoa: cartão à esquerda, dados à direita */
.eq-ficha{ display:grid; grid-template-columns:280px minmax(0, 1fr); gap:26px; align-items:start; }
@media (max-width:860px){ .eq-ficha{ grid-template-columns:1fr; } }
.eq-ficha-cartao{ min-width:0; }
.eq-ficha-cartao .pc-card-wrapper{ width:100%; }
.eq-ficha .pc-details h3{ font-size:clamp(18px, 1.7vw, 24px); }
.eq-ficha .pc-details p{ font-size:13px; }
.eq-campos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px 20px; }
.eq-campos > div{ min-width:0; }
.eq-campos span{
  display:block; font-size:10.5px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;
}
.eq-campos b{ font-size:14px; font-weight:600; word-break:break-word; }

/* ---------- Fundo Perdido (Financeiro → Cobrança) ---------- */
/* O andamento processual entrou no lugar do acordo (2026-08-05): é texto
   longo e variável, então ganha a fração maior e corta com reticências —
   o inteiro fica no title e no detalhe. */
.fp-grade{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) 148px 116px minmax(0,2.1fr) 30px;
  align-items:center; gap:14px;
}
/* cabeçalho não quebra em duas linhas ("TOTAL DA / DÍVIDA") */
.pfl-cab.fp-grade > span{ white-space:nowrap; }
.fp-num{ text-align:right; }
.fp-valor{ font-weight:700; color:#B4322F; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fp-andamento{
  color:var(--text-secondary); font-size:12.5px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}
@media (max-width:1180px){
  .fp-grade{ grid-template-columns:minmax(0,1.7fr) 130px 100px minmax(0,1.5fr) 28px; gap:10px; }
}
.fp-detalhes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px 18px;
}
.fp-detalhes > div{ min-width:0; }
.fp-detalhes span{
  display:block; font-size:10.5px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;
}
.fp-detalhes b{ font-size:13.5px; font-weight:600; word-break:break-word; }
/* campo de texto longo (cálculo, andamento, observações) ocupa a linha toda */
.fp-largo{ grid-column:1 / -1; }
@media (max-width:900px){
  .fp-grade{ grid-template-columns:minmax(0,1.6fr) 120px 150px 30px; }
  .fp-grade > :nth-child(4){ display:none; } /* andamento só no detalhe */
}

/* ---------- mini agenda de escolher data (abrirMiniCalendario) ---------- */
.datepick{
  position:fixed; z-index:95; width:250px; padding:11px 12px 9px;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  font-size:13px; animation:aviso-surge .14s ease-out;
}
.datepick-topo{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:650; font-size:13px; margin-bottom:8px; color:var(--text-primary);
}
.datepick-nav{
  /* mesmo motivo do .datepick-dia: sem zerar o padding global de button,
     a setinha nao cabia nos 24px e ficava torta */
  padding:0; box-shadow:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); background:var(--surface-2); cursor:pointer;
  width:24px; height:24px; border-radius:7px; color:var(--text-secondary); line-height:1;
}
.datepick-nav:hover{ background:var(--surface-1); color:var(--text-primary); }
.datepick-dow, .datepick-dias{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.datepick-dow span{
  text-align:center; font-size:10px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; padding-bottom:3px;
}
.datepick-dia{
  /* PADDING ZERO E MIN-WIDTH ZERO SAO OBRIGATORIOS.
     O dia e um <button>, e a regra global de button (padding:9px 14px)
     valia aqui: 28px de padding horizontal em celula de ~30px fazia cada
     dia exigir uma largura minima maior que a coluna. A grade de 7 colunas
     estourava os 250px da caixa e os dias da direita apareciam FORA do
     fundo branco — era esse o calendario "quebrado" do Gantt. (2026-08-07) */
  padding:0; min-width:0; box-shadow:none;
  aspect-ratio:1; border:1px solid transparent; background:transparent; cursor:pointer;
  border-radius:7px; font-family:inherit; font-size:12.5px; color:var(--text-primary);
  display:flex; align-items:center; justify-content:center;
}
/* a grade nunca pode passar da caixa, aconteca o que acontecer */
.datepick-dow, .datepick-dias{ width:100%; min-width:0; }
.datepick-dias > span{ aspect-ratio:1; }
.datepick-dia:hover{ background:var(--green-soft); color:var(--green-dark); }
.datepick-dia.hoje{ border-color:var(--green); font-weight:700; color:var(--green-dark); }
.datepick-dia.sel{ background:var(--green); border-color:var(--green); color:#fff; font-weight:700; }
.datepick-rodape{ margin-top:7px; padding-top:7px; border-top:1px solid var(--border); text-align:center; }
.datepick-hoje{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:650; color:var(--green-dark); padding:3px 10px; border-radius:6px;
}
.datepick-hoje:hover{ background:var(--green-soft); }
/* a célula que abriu o calendário fica marcada enquanto ele está aberto */
[data-wf-campo].editando{ background:var(--green-soft); border-radius:5px; }

/* aviso montado pelo JS (mostrarAvisoTopo) quando uma ação é recusada */
@keyframes aviso-surge{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ #avisoTopo{ animation:none !important; } }

/* mantido para telas antigas; o "por quê?" da lista de clientes saiu em
   05/08/2026 — hoje o motivo aparece no aviso do topo */
.ajuda-trava{
  font-size:11.5px; color:var(--text-muted); text-decoration:underline dotted;
  margin-left:5px; cursor:help; white-space:nowrap;
}
.ajuda-trava:hover{ color:var(--text-primary); }

/* ---------- Gerenciar Agendas: cartões expansíveis ---------- */
.ag-topo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
@media (max-width:1000px){ .ag-topo{ grid-template-columns:1fr; } }

/* ============================================================
   Gerenciar Agendas — reforma visual (2026-08-07).
   Só aparência: as acoes, formularios e regras sao os mesmos.
   ============================================================ */

/* --- cabecalho da pagina + botao que abre o popup --- */
.ag-cabeca-pagina{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.ag-bt-nova{
  flex-shrink:0; height:42px; padding:0 20px; border-radius:11px;
  display:inline-flex; align-items:center; gap:8px; font-size:13px;
}
.ag-bt-nova .mais{ font-size:15px; line-height:1; }

/* --- popup "Nova agenda" (usa a caixa do popup de Projetos) --- */
.ag-nova-caixa{ width:min(660px, 100%); }
.ag-nova-acoes{
  grid-column:1 / -1; display:flex; justify-content:flex-end; gap:10px;
  align-items:center; margin-top:2px; padding-top:16px; border-top:1px solid var(--border);
}
/* Nome | Dono  ·  Cor (linha inteira)  ·  Pessoal | Criar.
   A paleta ganha a largura toda: ela nao cabe numa coluna estreita. */
.ag-nova-form{
  display:grid; align-items:end; gap:16px 18px;
  grid-template-columns:minmax(200px,1.6fr) minmax(170px,1fr);
}
.ag-nova-form .field{ margin-bottom:0; min-width:0; }
.ag-pessoal{
  grid-column:1 / -1;
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer; padding:11px 13px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface-1);
  transition:border-color .16s ease, background-color .16s ease;
}
.ag-pessoal:hover{ border-color:var(--border-strong); }
.ag-pessoal input{ margin-top:2px; flex-shrink:0; }
.ag-pessoal b{ display:block; font-size:12.5px; font-weight:650; }
.ag-pessoal small{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.45; }
.ag-nova-bt{ height:44px; padding:0 26px; white-space:nowrap; }
/* dono travado em quem esta logado (agenda pessoal) */
.ag-dono-voce{
  display:flex; align-items:center; height:44px; padding:0 13px;
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  background:var(--surface-1); font-size:13.5px; color:var(--text-primary);
}
.ag-dono-voce span{ color:var(--text-muted); margin-left:6px; font-size:12px; }
/* aviso de "sempre pessoal" para quem nao administra agendas */
.ag-pessoal-fixo{ cursor:default; background:var(--green-soft); border-color:#D3E9B5; }
.ag-pessoal-fixo:hover{ border-color:#D3E9B5; }
.ag-cadeado{ flex-shrink:0; display:flex; margin-top:1px; color:var(--green-dark); }
html[data-tema="escuro"] .ag-pessoal-fixo{ background:rgba(118,184,42,.10); border-color:rgba(118,184,42,.26); }

/* --- foco no cartao aberto (2026-08-07) ---
   Abrindo uma agenda, o resto da pagina escurece um pouco e o cartao sobe
   por cima. Sem isso tudo era branco sobre branco e nao dava para ver o
   que estava aberto. */
.ag-escuro{
  position:fixed; inset:0; z-index:55; border:0; padding:0; margin:0;
  background:rgba(11,15,26,.34); -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
  cursor:pointer; animation:cfg-fade .16s ease-out;
}
/* O cartao e de vidro: sobre o escuro ele escureceria junto. Estas sao as
   MESMAS cores do vidro, ja compostas sobre o fundo da pagina — o cartao
   fica identico, so que opaco. */
.agcard[open]{
  position:relative; z-index:60;
  background:linear-gradient(158deg, #FEFEFE 0%, #F6FAF3 55%, #EFF7E9 100%);
  box-shadow:0 18px 50px rgba(11,15,26,.22);
}
html[data-tema="escuro"] .agcard[open]{
  background:linear-gradient(158deg, #1A2136 0%, #161D30 55%, #13192A 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}

/* --- corpo do cartao: uma linha por assunto, o resto abre em popup --- */
.ag-linhas{ display:flex; flex-direction:column; gap:7px; }
.ag-linha{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; border-radius:11px; cursor:pointer; text-align:left;
  background:var(--surface-2); border:1px solid var(--border); box-shadow:none;
  transition:border-color .14s ease, background-color .14s ease;
}
.ag-linha:hover{ border-color:var(--green); background:var(--surface-2); }
/* Icone de traco, uma cor so — igual aos itens do menu lateral. A unica
   excecao e o logotipo de empresa (Google Agenda), que entra colorido pelo
   logo_marca(). (2026-08-07) */
.ag-linha-ico{
  width:30px; height:30px; flex-shrink:0; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-1); border:1px solid var(--border);
  color:var(--text-secondary);
}
.ag-linha-ico svg{ display:block; }
.ag-linha:hover .ag-linha-ico{ color:var(--green-dark); border-color:rgba(118,184,42,.4); }
.ag-linha-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.ag-linha-txt b{ font-size:13px; font-weight:650; }
.ag-linha-txt small{
  font-size:11.5px; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ag-linha-seta{ flex-shrink:0; color:var(--text-muted); font-size:17px; line-height:1; }
.ag-linha:hover .ag-linha-seta{ color:var(--green-dark); }

/* popup de configuracao: um pouco mais estreito que o das ferramentas */
.ag-cfg-caixa{ width:min(720px, 100%); }
.ag-cfg-corpo{ font-size:13px; }

/* dentro do popup o bloco nao precisa de moldura propria */
.ag-cfg-corpo .ag-bloco{ background:transparent; border:0; padding:0; }

@media (max-width:640px){
  .ag-linha{ gap:9px; padding:11px; }
  .ag-linha-txt small{ display:none; }
}
html[data-tema="escuro"] .ag-linha{ background:var(--surface-1); }
html[data-tema="escuro"] .ag-linha-ico{ background:var(--surface-2); }

/* ============================================================
   Link publico de agendamento — formulario refeito (2026-08-07).
   Cinco perguntas em faixas, cada campo com rotulo de uma linha so
   (era isso que desalinhava as grades de 3 e 4 colunas).
   ============================================================ */
.lk-secao{
  border:1px solid var(--border); border-radius:14px;
  background:var(--surface-2); padding:16px 18px 18px; margin-bottom:14px;
}
.lk-tit{
  display:flex; align-items:center; gap:10px; margin-bottom:15px;
  font-size:13.5px; font-weight:700; letter-spacing:-.01em;
}
.lk-tit span{
  width:22px; height:22px; flex-shrink:0; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green-soft); color:var(--green-dark);
  font-size:11.5px; font-weight:750;
}
/* Colunas iguais, alinhadas pelo TOPO. Com `align-items:end` o campo que
   tem dica embaixo subia e desencontrava dos vizinhos — era metade do
   desalinhamento da tela antiga. */
.lk-campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px 18px; align-items:start; }
.lk-campos .field{ margin-bottom:0; min-width:0; }
/* rotulo com altura fixa de uma linha: os campos comecam todos na mesma
   altura, mesmo quando um titulo e mais comprido que o outro */
.lk-campos .field-label{ min-height:15px; margin-bottom:8px; }
.lk-campos .field-hint{ margin-top:6px; }
.lk-largo{ grid-column:span 2; }
@media (max-width:700px){ .lk-largo{ grid-column:span 1; } }
.lk-opc{
  font-weight:500; letter-spacing:0;
  color:var(--text-muted); font-size:11px; margin-left:5px;
}

/* dias da semana: botoes, nao "1,2,3,4,5" digitado */
.lk-dias{ display:flex; gap:7px; flex-wrap:wrap; }
.lk-dia{ cursor:pointer; }
.lk-dia input{ position:absolute; opacity:0; pointer-events:none; }
.lk-dia span{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); background:var(--surface-2);
  font-size:13.5px; font-weight:700; color:var(--text-secondary);
  transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
.lk-dia:hover span{ border-color:var(--green); }
.lk-dia input:checked + span{
  background:var(--green); border-color:var(--green); color:#fff;
  box-shadow:0 2px 8px rgba(118,184,42,.3);
}
.lk-dia input:focus-visible + span{ outline:2px solid var(--green-dark); outline-offset:2px; }

/* quem mais precisa estar livre */
.lk-pessoas{ display:flex; gap:8px; flex-wrap:wrap; }
.lk-pessoa{ cursor:pointer; }
.lk-pessoa input{ position:absolute; opacity:0; pointer-events:none; }
.lk-pessoa span{
  display:inline-flex; align-items:center; height:36px; padding:0 15px; border-radius:999px;
  border:1px solid var(--border-strong); background:var(--surface-2);
  font-size:12.5px; font-weight:600; color:var(--text-secondary);
  transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
.lk-pessoa:hover span{ border-color:var(--green); }
.lk-pessoa input:checked + span{
  background:var(--green-soft); border-color:var(--green); color:var(--green-dark);
}

.lk-aviso{
  margin-top:14px; padding:10px 13px; border-radius:10px;
  background:var(--surface-1); border:1px dashed var(--border-strong);
  font-size:11.5px; color:var(--text-secondary); line-height:1.5;
}

.lk-rodape{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--border);
}
.lk-ativo{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; flex:1; min-width:200px; }
.lk-ativo input{ margin-top:2px; flex-shrink:0; }
.lk-ativo b{ display:block; font-size:12.5px; font-weight:650; }
.lk-ativo small{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.lk-bt{ margin-left:auto; height:44px; padding:0 28px; }
@media (max-width:560px){
  .lk-rodape{ flex-direction:column; align-items:stretch; }
  .lk-bt{ margin-left:0; width:100%; }
}
html[data-tema="escuro"] .lk-secao{ background:var(--surface-1); }
html[data-tema="escuro"] .lk-dia span, html[data-tema="escuro"] .lk-pessoa span{ background:var(--surface-2); }

/* cadeado da agenda pessoal na lista lateral da Agenda */
.ag-lat-pessoal{ display:inline-flex; margin-left:auto; color:var(--text-muted); flex-shrink:0; }
.ag-lat-pessoal svg{ display:block; }

/* --- agendas pessoais: quadradinhos dentro do cartao do dono --- */
.ag-pessoais{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.ag-pessoais-tit{
  display:flex; align-items:center; gap:7px; margin-bottom:9px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
}
.ag-pessoais-tit svg{ display:block; flex-shrink:0; color:var(--text-muted); }
.ag-pessoais-tit span{ font-weight:500; font-size:11.5px; color:var(--text-muted); }
.ag-pessoais-grade{ display:flex; gap:8px; flex-wrap:wrap; }
/* chip, nao cartao: eles sao atalhos, nao o assunto principal do cartao */
.ag-pess-quad{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 13px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  cursor:pointer; box-shadow:none; max-width:220px;
  transition:border-color .14s ease, background-color .14s ease;
}
.ag-pess-quad:hover{ border-color:var(--c, var(--green)); background:var(--surface-2); }
.ag-pess-cor{
  width:13px; height:13px; border-radius:50%; flex-shrink:0;
  background:var(--c, var(--green)); box-shadow:0 1px 3px rgba(19,24,41,.20);
}
.ag-pess-nome{
  font-size:12.5px; font-weight:600; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ag-pess-quad.nova{
  border-style:dashed; background:transparent; color:var(--text-muted);
  width:36px; padding:0; justify-content:center;
}
.ag-pess-quad.nova:hover{ border-color:var(--green); color:var(--green-dark); }
.ag-pess-mais{ font-size:16px; line-height:1; }

/* rodape do popup da agenda pessoal */
.ag-pess-excluir{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }

html[data-tema="escuro"] .ag-pess-quad{ background:var(--surface-1); }
html[data-tema="escuro"] .ag-pess-quad.nova{ background:transparent; }

/* --- paleta de cores --- */
.ag-campo-cor{ grid-column:1 / -1; }
.cor-escolha{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:34px; }
.cor-sw{
  width:26px; height:26px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--c); border:2px solid transparent; box-shadow:0 1px 3px rgba(19,24,41,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.cor-sw:hover{ transform:scale(1.14); border-color:transparent; background:var(--c); }
.cor-sw.on{
  border-color:var(--surface-2);
  box-shadow:0 0 0 2px var(--c), 0 2px 6px rgba(19,24,41,.22);
}
/* "outra cor": o input nativo vira um circulo com o arco-iris */
.cor-outra{
  position:relative; width:26px; height:26px; border-radius:50%; overflow:hidden;
  cursor:pointer; flex-shrink:0; box-shadow:0 1px 3px rgba(19,24,41,.18);
  background:conic-gradient(#E0762E,#D6A400,#76B82A,#0E9488,#185FA5,#7B4FBF,#B4322F,#E0762E);
}
.cor-outra::after{
  content:''; position:absolute; inset:7px; border-radius:50%; background:var(--surface-2);
}
.cor-outra input[type="color"]{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  padding:0; border:0; background:transparent; z-index:2;
}

@media (max-width:680px){
  .ag-nova-form{ grid-template-columns:1fr; }
  .ag-nova-acoes{ flex-direction:column-reverse; align-items:stretch; }
  .ag-nova-acoes .btn{ width:100%; justify-content:center; }
  .ag-bt-nova{ width:100%; justify-content:center; }
}

/* --- grade das agendas: quatro por fileira --- */
/* sem align-items:start — assim a fileira estica todos os cartoes ate a
   altura do mais alto e eles ficam exatamente iguais */
.ag-lista{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px; margin-bottom:14px;
}
/* o cartao ocupa a altura inteira da celula e o summary acompanha, para o
   botao "Configurar" descer ate o rodape */
.ag-lista .agcard{ display:flex; flex-direction:column; }
.ag-lista .agcard > summary{ flex:1; }
@media (max-width:1250px){ .ag-lista{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:950px){ .ag-lista{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .ag-lista{ grid-template-columns:1fr; } }
/* aberto, o cartao toma a fileira inteira: o conteudo de configuracao
   nao cabe em meia largura */
.ag-lista .agcard[open]{ grid-column:1 / -1; }

.agcard{
  position:relative;
  background:var(--vidro-fundo, rgba(255,255,255,.66));
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--vidro-borda, var(--border)); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.agcard:hover{ box-shadow:var(--shadow-md, 0 8px 22px rgba(24,52,16,.10)); border-color:var(--border-strong); }
.agcard-largo{ margin-bottom:12px; }

/* faixa da cor da agenda no topo do quadrado */
.agcard-faixa{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--ag-cor, var(--green));
}
.agcard > summary{
  display:flex; flex-direction:column; align-items:stretch; gap:13px;
  padding:20px 18px 18px; cursor:pointer; list-style:none; user-select:none;
  min-height:206px;
}
.agcard > summary::-webkit-details-marker{ display:none; }
.agcard > summary:hover{ background:rgba(19,24,41,.02); }

.agcard-topo{ display:flex; align-items:center; gap:13px; min-width:0; }
/* MARCADOR DA AGENDA — circulo cheio (2026-08-07)
   Preenchido com a cor da agenda, inicial (ou icone) em branco. */
.agcard-marca{
  width:38px; height:38px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ag-cor, var(--green));
  color:#fff;
  font-size:14px; font-weight:700; letter-spacing:.005em;
}
.agcard-marca svg{ display:block; }
.agcard-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.agcard-nome{
  font-weight:650; font-size:15px; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.agcard-dono{ color:var(--text-muted); font-size:12px; }
.agcard-chips{ display:flex; gap:6px; flex-wrap:wrap; align-content:flex-start; flex:1; }
.agcard-abrir{
  align-self:stretch; text-align:center;
  font-size:12px; font-weight:650; color:var(--text-secondary);
  border:1px solid var(--border); border-radius:9px; padding:8px 11px;
  background:var(--surface-2); transition:border-color .16s ease, color .16s ease;
}
.agcard > summary:hover .agcard-abrir{ border-color:var(--green); color:var(--green-dark); }
.agcard-abrir::after{ content:" ▾"; font-size:10px; }
.agcard[open] .agcard-abrir::after{ content:" ▴"; }

/* aberto (ou o cartao largo do link), o cabecalho volta a ser uma linha */
.agcard[open] > summary, .agcard-largo > summary{
  flex-direction:row; align-items:center; gap:14px; min-height:0; padding:15px 18px;
}
.agcard[open] > summary .agcard-chips,
.agcard-largo > summary .agcard-chips{ flex:1; justify-content:flex-end; }
.agcard[open] > summary .agcard-abrir,
.agcard-largo > summary .agcard-abrir{ align-self:center; flex-shrink:0; padding:6px 13px; }
.agcard[open] > summary{ border-bottom:1px solid var(--border); }

.agcard-corpo{ padding:16px 18px 18px; }

html[data-tema="escuro"] .ag-pessoal{ background:var(--surface-2); }
html[data-tema="escuro"] .cor-sw.on{ border-color:var(--surface-1); }

.mini-chip{
  display:inline-flex; align-items:center; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--surface-1); border:1px solid var(--border); color:var(--text-secondary);
}
.mini-chip.ok{ background:rgba(118,184,42,.12); border-color:rgba(118,184,42,.35); color:#3E7113; }
.mini-chip.warn{ background:rgba(214,138,0,.12); border-color:rgba(214,138,0,.4); color:#8A5A00; }
.mini-chip.off{ color:var(--text-muted); }

.ag-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:1000px){ .ag-grid{ grid-template-columns:1fr; } }
.ag-bloco{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:13px 15px;
}
.ag-bloco-titulo{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; margin-bottom:9px;
}
.ag-nota{ font-size:11.5px; color:var(--text-muted); margin-top:8px; line-height:1.45; }
.ag-fatos{ display:flex; flex-direction:column; gap:4px; }
.ag-fatos > div{ display:flex; gap:8px; font-size:12.5px; }
.ag-fatos span{ color:var(--text-muted); width:150px; flex-shrink:0; }
.ag-fatos b{ font-weight:600; word-break:break-all; }

.hc-linha{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:4px 0; border-bottom:1px dashed var(--border); }
.hc-linha:last-child{ border-bottom:0; }
.hc-linha input[type=time]{ width:96px; height:32px; padding:4px 7px; font-size:12.5px; }
.hc-aplicar{ font-size:11px; padding:3px 9px; margin-left:auto; }

.ag-link{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px;
  background:var(--surface-2);
}
.ag-link-url{ font-size:11px; color:var(--text-secondary); word-break:break-all; }

.ag-acoes{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--border);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}

.subcard{
  margin-top:14px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-2); padding:0 14px;
}
.subcard > summary{
  padding:11px 0; cursor:pointer; list-style:none; user-select:none;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.subcard > summary::-webkit-details-marker{ display:none; }
.subcard > summary::after{ content:" ▾"; color:var(--text-muted); font-size:10px; }
.subcard[open] > summary::after{ content:" ▴"; }
.subcard[open]{ padding-bottom:14px; }

/* horário fora do expediente (Semana útil com horário comercial definido) */
.tg-slot-fora{
  background:repeating-linear-gradient(135deg, rgba(19,24,41,.035) 0 6px, transparent 6px 12px);
  cursor:not-allowed;
}
.tg-col-fechada{ background:rgba(19,24,41,.02); }

.ev-editor .ed-copia{
  margin:8px 0 2px 86px; font-size:12px; color:var(--text-muted);
  background:var(--surface-1); border:1px dashed var(--border);
  border-radius:8px; padding:7px 11px; display:inline-block;
}
.ev-editor .ed-meet{ margin:10px 0 2px 86px; }
.ev-editor .ed-meet-add{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:8px 13px; font-size:12.5px; font-weight:600; color:var(--text-primary);
  cursor:pointer; box-shadow:none;
}
.ev-editor .ed-meet-add:hover{ border-color:var(--border-strong); background:var(--surface-1); }
.ev-editor .ed-meet-add.ativo{ border-color:var(--green); background:rgba(118,184,42,.08); }
/* "Reservar sala de reunião" (2026-08-10): caixa de selecao alinhada com o
   "Dia inteiro" logo acima — era um botao que se repintava e fechava o
   popup ao ser clicado (achado pelo Fred no mesmo dia) */
.ev-editor .ed-sala{ margin-top:2px; }
.ev-editor .ed-sala-chk{ margin-top:0; }
.ev-editor .ed-meet-linha{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.ev-editor .ed-meet-abrir{ color:var(--text-primary); font-weight:600; text-decoration:none; }
.ev-editor .ed-meet-abrir:hover{ text-decoration:underline; }
.ev-editor .ed-meet-copiar{
  background:transparent; border:1px solid var(--border); border-radius:7px;
  padding:5px 10px; font-size:12px; cursor:pointer; box-shadow:none; color:var(--text-secondary);
}
.ev-editor .ed-meet-copiar:hover{ border-color:var(--border-strong); color:var(--text-primary); }
.ev-editor .acoes{ align-items:center; margin-top:16px; }
.ev-editor .ed-excluir{
  background:transparent; border:0; box-shadow:none; padding:8px 10px;
  font-size:12.5px; font-weight:600; cursor:pointer; border-radius:8px;
}
.ev-editor .ed-excluir:hover{ background:rgba(180,50,47,.08); }

/* seletor de visualização da Agenda (§2.1) */
.agenda-view-switch{ display:inline-flex; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:3px; gap:2px; }
.agenda-view-switch button{
  border:0; background:transparent; padding:6px 12px; font-size:12.5px; font-weight:500;
  border-radius:calc(var(--radius) - 3px); color:var(--text-secondary); cursor:pointer;
}
.agenda-view-switch button.active{ background:var(--surface-2); color:var(--text-primary); box-shadow:var(--shadow-xs); font-weight:600; }

/* visualização "Dia" da Agenda: lista detalhada em vez de grade */
.agenda-dia-lista{ display:flex; flex-direction:column; gap:8px; }
.agenda-dia-item{
  display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px;
}
.agenda-dia-item:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.agenda-dia-hora{ flex-shrink:0; width:110px; font-size:12.5px; font-weight:600; color:var(--text-secondary); }

/* ---------- etapas de fluxo (arrastar para reordenar) ---------- */
[data-reorder-item]{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 12px; margin-bottom:8px; cursor:grab;
}
[data-reorder-item].sendo-arrastado{ opacity:.4; }
[data-reorder-item] .etapa-arrastar{ color:var(--text-muted); flex-shrink:0; cursor:grab; }
[data-reorder-item] .etapa-corpo{ flex:1; min-width:0; }
[data-reorder-item].etapa-inativa{ opacity:.55; }
[data-reorder-item].etapa-personalizada{ border-color:var(--green); box-shadow:0 0 0 1px rgba(118,184,42,.18); }

/* ⚠️ Quando o item arrastável é uma LINHA DE TABELA, ele NÃO pode virar o
   cartão flex acima. `display:flex` num <tr> faz a linha deixar de ser linha
   de tabela: ela passa a ignorar as colunas do <thead> e cada uma se arruma
   sozinha pelo conteúdo. Era o "está tudo desalinhado" do cadastro de produto
   (28/08/2026, achado pelo Fred). Medido antes de consertar, em Formatação de
   Franquia: o cabeçalho somava 1367px e a linha 650px, e a coluna da alcinha
   ⋮⋮ — declarada `width:1%` — comia 873px, espremendo o nome da etapa em 66px.
   É a MESMA armadilha que o Gantt já tinha (ver `.wfp-tarefas
   [data-reorder-item]`, mais acima): a regra nasceu global para listas de
   <div> e alcança qualquer coisa com o atributo.
   Hoje só `produtos_servicos/form.php` usa <tr data-reorder-item>. */
tr[data-reorder-item]{
  display:table-row; gap:0;
  background:transparent; border:0; border-radius:0;
  padding:0; margin:0; cursor:default;
}
/* o arraste continua existindo, mas pela alça — que já tem o próprio cursor */
tr[data-reorder-item] .etapa-arrastar{ cursor:grab; }

/* Prazo e "conta a partir de" numa linha só: em caixa alta "15 DIAS ÚTEIS"
   quebrava em duas e as linhas ficavam de alturas diferentes, que é metade
   da sensação de bagunça. */
.tbl-etapas-prod td.col-prazo,
.tbl-etapas-prod td.col-conta{ white-space:nowrap; }

/* cards de indicador (métricas) — enxutos, para não roubar a tela */
.stat{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:9px 13px; box-shadow:var(--shadow-sm); }
.stat-label{ font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-valor{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
.barra{ height:7px; background:#E7E9EF; border-radius:999px; overflow:hidden; }
.barra > span{ display:block; height:100%; background:linear-gradient(90deg,var(--green),#93CE45); border-radius:999px; }

.mobile-menu-btn{ display:none; }
.sidebar-backdrop{ display:none; }

/* impressão / "salvar como PDF" do navegador (§3.4) — a classe .no-print já
   era usada em layout_header.php na topbar, mas nunca tinha regra de fato */
@media print{
  .no-print, #sidebar, .mobile-menu-btn, .sidebar-backdrop, .form-actions,
  .filtros, button, a.btn, a.btn-sm, .btn-primary, .btn-quiet, .btn-danger{ display:none !important; }
  .shell{ display:block; }
  .main{ padding:0; }
  .main-inner{ max-width:none; }
  .tbl-wrap{ box-shadow:none; border:1px solid #999; }
  body{ background:#fff; }
}

@media (max-width:1000px){
  .shell{ flex-direction:column; }
  #sidebar{
    width:82%; max-width:300px; height:100vh; position:fixed; top:0; left:0; z-index:50;
    padding:22px 14px 20px; transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:var(--shadow-lg);
  }
  #sidebar.mobile-open{ transform:translateX(0); }
  .main{ padding:64px 18px 48px; }
  .form-grid-2, .form-grid-3, .form-grid-4{ grid-template-columns:1fr; }
  .linha-contato-adicional{ grid-template-columns:1fr; }
  .linha-contato-adicional .btn-danger{ width:100%; text-align:center; }
  .cal-grid{ gap:3px; }
  .daycell{ min-height:78px; padding:5px; }

  .mobile-menu-btn{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:14px; left:14px; z-index:60;
    width:40px; height:40px; border-radius:var(--radius);
    background:var(--navy-800); border:1px solid var(--navy-800); color:#fff;
    cursor:pointer;
  }
  .sidebar-backdrop.show{
    display:block; position:fixed; inset:0; z-index:45;
    background:rgba(14,18,32,.45);
  }
}
/* ============================================================
   TEMA ESCURO — fundo no azul Vanitelli, barra lateral preta.
   Ligado por html[data-tema="escuro"] (botão de lua na barra de
   cima; a escolha fica no navegador via localStorage).
   ============================================================ */
html[data-tema="escuro"]{ color-scheme:dark; }
html[data-tema="escuro"] body{
  --surface-0:#0E1220; --surface-1:#151B2E; --surface-2:#1B2238;
  --text-primary:#EDF0F7; --text-secondary:#A9B0C6; --text-muted:#727A95;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.17);
  --green-soft:rgba(118,184,42,.16); --green-dark:#8FCC4A; --text-accent:#8FCC4A;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 18px rgba(0,0,0,.42);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  --vidro-fundo:linear-gradient(158deg, rgba(27,34,56,.92) 0%, rgba(23,30,50,.88) 55%, rgba(20,26,44,.85) 100%);
  --vidro-borda:rgba(255,255,255,.10);
  --vidro-borda-verde:rgba(118,184,42,.3);
  --vidro-sombra:0 12px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.06);
  --campo-fundo:rgba(255,255,255,.06);
  --campo-fundo-foco:rgba(255,255,255,.11);
}
/* o "fundo branco" vira o azul da Vanitelli */
html[data-tema="escuro"] body::before{
  background:
    radial-gradient(760px 520px at 12% -6%, rgba(118,184,42,.09), transparent 62%),
    radial-gradient(680px 460px at 96% 8%, rgba(118,184,42,.06), transparent 60%),
    radial-gradient(900px 620px at 50% 108%, rgba(24,95,165,.12), transparent 62%),
    linear-gradient(180deg, #0E1220 0%, #10162a 48%, #0E1220 100%);
}
/* barra lateral PRETA */
html[data-tema="escuro"] #sidebar{
  background:linear-gradient(175deg,#050710 0%,#0A0D18 55%,#04060D 100%);
}
html[data-tema="escuro"] .tbl thead th{ background:rgba(255,255,255,.045) !important; color:var(--text-secondary); }
html[data-tema="escuro"] .fin-ent{ background:rgba(118,184,42,.10); border-color:rgba(118,184,42,.24); }
html[data-tema="escuro"] .fin-sai{ background:rgba(217,83,79,.10); border-color:rgba(217,83,79,.26); }
html[data-tema="escuro"] .fin-ent .fin-valor{ color:#9BD65A; }
html[data-tema="escuro"] .fin-sai .fin-valor,
html[data-tema="escuro"] .cob-total, html[data-tema="escuro"] .cob-total-geral,
html[data-tema="escuro"] .pf-atraso, html[data-tema="escuro"] .fin-chip-vencido,
html[data-tema="escuro"] .wfl-status.atraso, html[data-tema="escuro"] .wfl-prox.atraso{ color:#F08A85; }
html[data-tema="escuro"] .fin-chip-vencido{ background:rgba(217,83,79,.18); }
html[data-tema="escuro"] .fin-linha > *{ border-left-color:rgba(255,255,255,.08); }
html[data-tema="escuro"] .wfp-acao, html[data-tema="escuro"] .wfp-btn,
html[data-tema="escuro"] .wfp-situacao, html[data-tema="escuro"] .btn-desfazer{
  background:rgba(255,255,255,.07); color:var(--text-secondary);
}
html[data-tema="escuro"] .wfp-acao:hover, html[data-tema="escuro"] .wfp-btn:hover{ background:rgba(255,255,255,.14); color:var(--text-primary); }
html[data-tema="escuro"] .kb-quadro, html[data-tema="escuro"] .pf-quadro{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.18));
}
html[data-tema="escuro"] .kb-cab-col{ background:linear-gradient(180deg, #1B2238, rgba(27,34,56,.8)); }
html[data-tema="escuro"] .kb-celula{ background:rgba(255,255,255,.035); }
html[data-tema="escuro"] .kb-raia-cab{ background:linear-gradient(180deg, #171E33, rgba(23,30,51,.7)); }
html[data-tema="escuro"] .pf-col{ background:rgba(255,255,255,.035); }
html[data-tema="escuro"] .pf-col-topo{ background:rgba(20,26,44,.97); }
html[data-tema="escuro"] .fx-raiz input[type=text], html[data-tema="escuro"] .fx-raiz textarea,
html[data-tema="escuro"] .fx-raiz input[type=number], html[data-tema="escuro"] .fx-raiz select,
html[data-tema="escuro"] .kb-novo textarea, html[data-tema="escuro"] .kb-modal textarea,
html[data-tema="escuro"] .kb-modal input{ background:var(--campo-fundo); color:var(--text-primary); }
html[data-tema="escuro"] .kb-modal, html[data-tema="escuro"] .wfm-caixa,
html[data-tema="escuro"] .cfg-caixa{ background:var(--surface-1); }
/* o texto do passo do fluxograma é textarea desde 2026-08-14, e a regra de
   cima pinta TODA textarea do fx-raiz com fundo de campo — dentro do
   quadradinho ele tem que continuar transparente, como era com o <input> */
html[data-tema="escuro"] .fx-fnode .fx-fnode-txt{ background:transparent; color:inherit; }
html[data-tema="escuro"] .alert-sucesso{ background:rgba(118,184,42,.14); color:#9BD65A; border-color:rgba(118,184,42,.3); }
html[data-tema="escuro"] .alert-erro{ background:rgba(217,83,79,.14); color:#F08A85; border-color:rgba(217,83,79,.3); }
html[data-tema="escuro"] .agenda-view-switch button.active{ color:#fff; }
html[data-tema="escuro"] img.side-config-ico{ filter:brightness(10); }

/* botão de tema: mostra a lua no claro e o sol no escuro */
.tema-sol{ display:none; }
html[data-tema="escuro"] .tema-lua{ display:none; }
html[data-tema="escuro"] .tema-sol{ display:block; }
button.topbar-sino{ cursor:pointer; }

/* ============================================================
   Portal do Cliente — visao cliente x administrador (2026-08-07)
   Tudo aqui so aparece durante uma visita do time; o cliente de
   verdade nunca recebe esse HTML.
   ============================================================ */
.pc-visao{ display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.pc-visao a{
  display:block; padding:7px 10px; border-radius:9px; font-size:11.5px; font-weight:600;
  text-align:center; text-decoration:none; letter-spacing:.01em;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.14); transition:background .15s, color .15s;
}
.pc-visao a:hover{ background:rgba(255,255,255,.16); color:#fff; }
.pc-visao a.on{ background:var(--green); border-color:var(--green); color:#fff; }

/* a faixa do topo muda de cor no modo admin: quem edita precisa saber
   sem ler que nao esta mais vendo a tela do cliente */
.visita-faixa.adm{ background:#FFF3E0; border-color:#F2D6A8; color:#8A5A16; }

/* bloco de administracao dentro de uma pagina do cliente */
.pc-adm{
  background:#FFF9F0; border:1px solid #F2DFC2; border-radius:var(--radius);
  padding:14px 16px; margin-bottom:18px;
}
.pc-adm-tit{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#A9761F; }
.pc-adm-txt{ font-size:12.5px; color:var(--text-secondary); margin:7px 0 12px; line-height:1.55; }
.pc-adm-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pc-adm-form input[type="text"]{ flex:2; min-width:220px; height:38px; }
.pc-adm-form select{ flex:1; min-width:190px; height:38px; }
.pc-adm-linha{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:12px; }
.pc-adm-fer{ font-size:11.5px; color:var(--text-muted); }
.pc-adm-linha .espaco{ flex:1; }
.pc-adm-bt{
  height:34px; padding:0 14px; border-radius:9px; border:1px solid var(--border-strong);
  background:#fff; color:var(--text-primary); font-size:12.5px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap;
}
.pc-adm-bt:hover{ border-color:var(--green); color:var(--green-dark); }
.pc-adm .pc-adm-bt:not(.quieto){ background:var(--green); border-color:var(--green); color:#fff; }
.pc-adm .pc-adm-bt:not(.quieto):hover{ filter:brightness(1.06); color:#fff; }

/* item que o cliente ainda nao ve: some a cor, nao some da tela */
.pc-projeto.oculto, .pc-cartao-caixa.oculto{ opacity:.62; }
.pc-cartao-caixa{ display:flex; flex-direction:column; }
.pc-cartao-caixa .pc-adm-linha{ margin-top:8px; }

@media (max-width:640px){
  .pc-adm-form input[type="text"], .pc-adm-form select, .pc-adm-form .pc-adm-bt{ width:100%; flex:none; }
}
html[data-tema="escuro"] .pc-adm{ background:rgba(224,138,46,.10); border-color:rgba(224,138,46,.26); }
html[data-tema="escuro"] .pc-adm-bt{ background:var(--surface-1); }
html[data-tema="escuro"] .visita-faixa.adm{ background:rgba(224,138,46,.16); border-color:rgba(224,138,46,.32); color:#E8B573; }

/* Agenda de Midia: atalho para puxar um conteudo ja montado. Faixa fina,
   nao um cartao — quem cria do zero passa direto para o titulo. (2026-08-07) */
.midia-puxar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--green-soft); border:1px solid #D3E9B5;
  border-radius:var(--radius); padding:11px 16px; margin-bottom:18px;
}
.midia-puxar .field-label{ margin:0; white-space:nowrap; color:var(--green-dark); }
.midia-puxar select{ flex:1; min-width:220px; height:38px; background:#fff; }
@media (max-width:640px){
  .midia-puxar{ gap:8px; }
  .midia-puxar select{ width:100%; }
}
html[data-tema="escuro"] .midia-puxar{ background:rgba(118,184,42,.10); border-color:rgba(118,184,42,.28); }
html[data-tema="escuro"] .midia-puxar select{ background:var(--surface-1); }


/* ================================================================
   PROJETOS — reforma visual das 15 ferramentas (2026-08-08).
   Cada ferramenta tem uma COR DE ASSINATURA (--fx), aplicada no
   cabecalho, nos cartoes e nos detalhes. O conteudo e centrado e o
   fundo ganha um tom da propria ferramenta — chega de branco puro.
   Nada de funcionalidade: so aparencia.
   ================================================================ */
.wfp[data-ferramenta="kanban"]{     --fx:#185FA5; }
.wfp[data-ferramenta="cep"]{        --fx:#0E9488; }
.wfp[data-ferramenta="gut"]{        --fx:#B4322F; }
.wfp[data-ferramenta="pdca"]{       --fx:#185FA5; }
.wfp[data-ferramenta="w5h2"]{       --fx:#E0762E; }
.wfp[data-ferramenta="ishikawa"]{   --fx:#0E9488; }
.wfp[data-ferramenta="swot"]{       --fx:#3E7113; }
.wfp[data-ferramenta="pareto"]{     --fx:#7B4FBF; }
.wfp[data-ferramenta="okr"]{        --fx:#A87F00; }
.wfp[data-ferramenta="scrum"]{      --fx:#185FA5; }
.wfp[data-ferramenta="bmc"]{        --fx:#42506B; }
.wfp[data-ferramenta="eisenhower"]{ --fx:#B4322F; }
.wfp[data-ferramenta="s5"]{         --fx:#3E7113; }
.wfp[data-ferramenta="fluxograma"]{ --fx:#42506B; }

/* o palco da ferramenta: fundo com um veu da cor, conteudo centrado */
.wfp .fx-raiz{
  border-top:0; padding:26px 22px 30px;
  /* o fundo inteiro carrega a cor da ferramenta — mais forte no alto,
     nunca branco puro */
  background:
    radial-gradient(1000px 380px at 50% -100px, color-mix(in srgb, var(--fx, var(--green)) 13%, transparent), transparent 72%),
    color-mix(in srgb, var(--fx, var(--green)) 5%, var(--surface-1));
}
@supports not (color: color-mix(in srgb, red, blue)){
  .wfp .fx-raiz{ background:var(--surface-1); }
}
.wfp .fx-raiz > *{ max-width:1060px; margin-left:auto; margin-right:auto; }
/* na página inteira o palco desce até o pé do cartão — sem sobra branca */
.wfp-cheia .fx-raiz{ flex:1 1 auto; }
/* quadro do kanban e linha do tempo precisam da largura toda */
.wfp[data-ferramenta="kanban"] .fx-raiz > *,
.wfp[data-ferramenta="cep"] .fx-raiz > *,
.wfp[data-ferramenta="pareto"] .fx-raiz > *{ max-width:1240px; }
/* o fluxograma usa a LARGURA TODA do palco, sem teto: a faixa de 1060px
   cortava o desenho no meio, e a lupa só encolhia dentro da mesma faixa
   estreita — diminuir não fazia caber, porque não era o desenho que
   faltava espaço, era a janela. (2026-08-14, pedido do Fred pela fila)
   ⚠️ Vale só para o fluxograma: as outras ferramentas são texto e ficam
   ilegíveis esticadas de ponta a ponta. */
.wfp[data-ferramenta="fluxograma"] .fx-raiz > *{ max-width:none; }
/* ⚠️ Projeto aberto sozinho: SEM teto para ferramenta nenhuma (29/08,
   pedido do Matteo — "abriu a tela inteira, o foco é ele"). Esta regra
   precisa vir DEPOIS dos tetos acima, senão a do kanban (1240px) vence
   por especificidade e o quadro segue espremido no meio da tela. */
.wfp-cheia[data-ferramenta] .fx-raiz > *{ max-width:none; margin-left:0; margin-right:0; }

/* cartoes: filete da cor de assinatura no topo, titulo padronizado */
.wfp .fx-cartao{
  position:relative; border-radius:13px; padding:14px 15px;
  border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(19,24,41,.05);
  overflow:hidden;
}
.wfp .fx-cartao::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--q, var(--fx, var(--green)));
}
.wfp .fx-cartao h4{
  font-size:11.5px; font-weight:750; text-transform:uppercase; letter-spacing:.05em;
}
.wfp .fx-dica{
  max-width:760px; text-align:center; font-size:12px; color:var(--text-muted);
  margin:16px auto 0; line-height:1.55;
}

/* --- SWOT: cada quadrante com a sua cor de verdade --- */
.wfp[data-ferramenta="swot"] .fx-swot .fx-cartao:nth-child(1){ --q:#3E7113; background:#F3F8EC; }
.wfp[data-ferramenta="swot"] .fx-swot .fx-cartao:nth-child(2){ --q:#B4322F; background:#FBF1F0; }
.wfp[data-ferramenta="swot"] .fx-swot .fx-cartao:nth-child(3){ --q:#185FA5; background:#EFF4FA; }
.wfp[data-ferramenta="swot"] .fx-swot .fx-cartao:nth-child(4){ --q:#C98500; background:#FBF5E8; }

/* --- Eisenhower: 1 fazer, 2 agendar, 3 delegar, 4 eliminar --- */
.wfp[data-ferramenta="eisenhower"] .fx-swot .fx-cartao:nth-child(1){ --q:#B4322F; background:#FBF1F0; }
.wfp[data-ferramenta="eisenhower"] .fx-swot .fx-cartao:nth-child(2){ --q:#3E7113; background:#F3F8EC; }
.wfp[data-ferramenta="eisenhower"] .fx-swot .fx-cartao:nth-child(3){ --q:#C98500; background:#FBF5E8; }
.wfp[data-ferramenta="eisenhower"] .fx-swot .fx-cartao:nth-child(4){ --q:#5B6472; background:#F2F3F6; }

/* --- PDCA: as caixas seguem as cores da roda --- */
.wfp[data-ferramenta="pdca"] .fx-pdca{ align-items:center; }
.wfp[data-ferramenta="pdca"] .fx-pdca-caixas .fx-cartao:nth-child(1){ --q:#185FA5; background:#EFF4FA; }
.wfp[data-ferramenta="pdca"] .fx-pdca-caixas .fx-cartao:nth-child(2){ --q:#C9542C; background:#FBF2EC; }
.wfp[data-ferramenta="pdca"] .fx-pdca-caixas .fx-cartao:nth-child(3){ --q:#C98500; background:#FBF5E8; }
.wfp[data-ferramenta="pdca"] .fx-pdca-caixas .fx-cartao:nth-child(4){ --q:#3E7113; background:#F3F8EC; }

/* --- BMC: tres territorios do canvas, cada um com um tom ---
   infraestrutura (parceiros/atividades/recursos) · oferta (proposta)
   · cliente (relacionamento/canais/segmentos) · dinheiro (custos/receita) */
.wfp[data-ferramenta="bmc"] .fx-bmc .b-kp,
.wfp[data-ferramenta="bmc"] .fx-bmc .b-ka,
.wfp[data-ferramenta="bmc"] .fx-bmc .b-kr{ --q:#42506B; background:#F2F3F6; }
.wfp[data-ferramenta="bmc"] .fx-bmc .b-vp{ --q:#3E7113; background:#F3F8EC; }
.wfp[data-ferramenta="bmc"] .fx-bmc .b-cr,
.wfp[data-ferramenta="bmc"] .fx-bmc .b-ch,
.wfp[data-ferramenta="bmc"] .fx-bmc .b-cs{ --q:#185FA5; background:#EFF4FA; }
.wfp[data-ferramenta="bmc"] .fx-bmc .b-cost{ --q:#B4322F; background:#FBF1F0; }
.wfp[data-ferramenta="bmc"] .fx-bmc .b-rev{ --q:#A87F00; background:#FBF5E8; }

/* --- 5S: passos verdes, concluido comemorado --- */
.wfp[data-ferramenta="s5"] .fx-s5{ border-radius:13px; box-shadow:0 1px 3px rgba(19,24,41,.05); }
.wfp[data-ferramenta="s5"] .fx-s5.feito{ background:#F3F8EC; border-color:#CBE4A8; }

/* --- Fluxograma: quadradinho pintado, sem tarja, refeito do zero a pedido
   do Fred (2026-08-14, print de referência) --- */
.wfp[data-ferramenta="fluxograma"] .fx-fnode{
  border-radius:10px; box-shadow:0 1px 3px rgba(19,24,41,.06);
  border-color:var(--border); background:var(--surface-2);
}
/* a cor escolhida preenche o quadrado inteiro, não só a borda. O texto e a
   barra de ícones trocam de tom sozinhos conforme a cor for clara ou
   escura, pra continuar legível com qualquer cor. */
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-custom{
  border-color:var(--fx-no-cor);
  background:var(--fx-no-cor);
}
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-custom input,
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-custom .fx-fnode-txt{ color:#1B2136; }
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-custom input::placeholder,
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-custom .fx-fnode-txt::placeholder{ color:#1B2136; opacity:.6; }
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-custom .fx-flow-toolbar{ border-top-color:rgba(27,33,54,.25); }
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura input,
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura .fx-fnode-txt{ color:#fff; }
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura input::placeholder,
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura .fx-fnode-txt::placeholder{ color:#fff; opacity:.65; }
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura .fx-flow-toolbar{ border-top-color:rgba(255,255,255,.3); }
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-custom .fx-fic{
  background:rgba(255,255,255,.75); border-color:rgba(27,33,54,.25); color:#1B2136;
}
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura .fx-fic{
  background:rgba(0,0,0,.28); border-color:rgba(255,255,255,.35); color:#fff;
}
.wfp[data-ferramenta="fluxograma"] .fx-flow-svg path{ stroke:var(--fx); }

/* barra de ícones do passo (duplicar / próximo / unificar / deletar / editar) */
.fx-flow-barra{ display:flex; gap:5px; justify-content:center; }
.fx-fic{
  width:26px; height:26px; padding:0; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px; border:1px solid var(--border-strong);
  background:var(--surface-1); color:var(--text-primary); cursor:pointer;
}
.fx-fic svg{ width:15px; height:15px; }
.fx-fic:hover:not(:disabled){ background:rgba(19,24,41,.06); }
.fx-fic:disabled{ opacity:.35; cursor:not-allowed; }
.fx-fic.ativo{ background:#185FA5; border-color:#185FA5; color:#fff; }
/* ⚠️ O painel .fx-flow-editar (cor + mover + ligar, atras de um lapis) foi
   embora em 31/08/2026: o Matteo nao entendia para que servia o botao. Cor
   virou a bolinha da barra, mover virou seta na beirada, ligar foi para o
   botao de ligacao. Se alguem sentir falta do painel, o motivo esta aqui. */

/* bolinha de cor do passo — mesmo circulo do resto do site, so menor para
   caber na barra de icones (26px, como os vizinhos) */
/* ⚠️ A regra base .cor-unica (38px) mora MAIS ABAIXO neste arquivo, entao
   uma regra de mesmo peso aqui perdia e a bolinha saia gigante. Duas
   classes juntas pesam mais e a ordem deixa de importar. */
.cor-unica.fx-cor-unica{
  width:26px; height:26px;
  box-shadow:0 1px 2px rgba(19,24,41,.18), inset 0 0 0 1.5px var(--surface-1);
}
/* a bolinha virou <button> (16/09/2026): ela abre o quadro de cores em vez
   do seletor do sistema, e botão traz borda e padding próprios */
button.cor-unica.fx-cor-unica{ border:0; padding:0; }

/* ---- quadro de cores do passo (16/09/2026) ---- */
.fx-cor-pop{ width:208px; }
.fx-cor-grade{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.fx-cor-bola{
  width:24px; height:24px; border-radius:50%; padding:0; cursor:pointer;
  border:1.5px solid rgba(19,24,41,.14);
  box-shadow:inset 0 0 0 1.5px var(--surface-1);
}
.fx-cor-bola:hover{ transform:scale(1.12); }
.fx-cor-bola.escolhida{ outline:2px solid var(--text-primary); outline-offset:2px; }
.fx-cor-nova{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:12.5px; color:var(--text-secondary);
  border:1px solid var(--border); border-radius:8px; padding:5px 8px; margin-bottom:8px;
}
.fx-cor-nova input[type="color"]{
  width:24px; height:24px; padding:0; border:0; background:transparent;
  border-radius:50%; cursor:pointer; flex:none;
}
.fx-cor-aplicar{ margin-bottom:5px; }
.fx-cor-limpar{ color:var(--text-muted); }

/* setas de MOVER para os lados (31/08/2026, 2a rodada com o Matteo).
   ⚠️ Sairam da beirada do quadrado: la ficavam coladas nas setas de CRIAR
   passo (.fx-seta, que sao redondas e ficam FORA) e as duas se confundiam.
   Agora moram na mesma linha dos quadradinhos, menores, SEM quadrado — so
   a ponta da seta, sem a linha do meio. */
.fx-mv{
  width:14px; height:26px; padding:0; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; cursor:pointer;
  color:var(--text-muted); opacity:.5;
  font-size:16px; line-height:1; font-weight:700;
}
.fx-mv:hover{ opacity:1; color:var(--text-primary); }
/* em passo de cor escura o cinza sumiria */
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura .fx-mv{ color:#fff; opacity:.65; }
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura .fx-mv:hover{ opacity:1; color:#fff; }

/* as 4 setas de CRIAR passo ganharam o + junto (o Matteo nao distinguia
   criar de mover) e as quatro passaram a ter o MESMO tamanho — antes a de
   cima/baixo parecia diferente da esquerda/direita. */
.fx-seta{
  /* ⚠️ SÓ O «+», grosso e centrado. O tamanho segue travado nas quatro:
     com texto maior o botao esticava e as dos lados saiam ovais. */
  width:23px; height:23px; min-width:23px; max-width:23px;
  font-size:16px; font-weight:800; line-height:1; letter-spacing:0;
  padding-bottom:2px;   /* o glifo + nasce alto na fonte; isto centra */
  overflow:hidden;
}

/* --- tabelas (GUT, Pareto, CEP): cabecalho e destaque na cor --- */
.wfp .fx-tab th{
  color:var(--fx, var(--text-muted));
  border-bottom:2px solid color-mix(in srgb, var(--fx, var(--green)) 45%, transparent);
}
.wfp .fx-tab tr.top td{ background:color-mix(in srgb, var(--fx, #185FA5) 8%, transparent); }
.wfp .fx-tab .fx-rank{ color:var(--fx, #185FA5); }
.wfp .fx-grafico{
  border-radius:13px; padding:16px;
  box-shadow:0 1px 3px rgba(19,24,41,.05);
  border-top:3px solid var(--fx, var(--green));
}

/* --- OKR: resultados-chave como cartoes com a barra dourada --- */
.wfp[data-ferramenta="okr"] .fx-kr{
  border-radius:13px; border-left:4px solid var(--fx);
  box-shadow:0 1px 3px rgba(19,24,41,.05);
}
.wfp[data-ferramenta="okr"] .fx-okr-total{ font-weight:750; color:var(--fx); }

/* --- Kanban: quadro com profundidade, colunas destacadas --- */
.wfp[data-ferramenta="kanban"] .fx-raiz{ padding:18px 16px 24px; }
.wfp[data-ferramenta="kanban"] .kb-celula{
  background:rgba(19,24,41,.035); border-radius:12px;
}
.wfp[data-ferramenta="kanban"] .kb-card{
  border-radius:11px; box-shadow:0 1px 4px rgba(19,24,41,.08);
  transition:transform .12s ease, box-shadow .12s ease;
}
.wfp[data-ferramenta="kanban"] .kb-card:hover{
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(19,24,41,.14);
}

/* ---------------- rodape comum do projeto ---------------- */
.wfx-painel{ grid-template-columns:minmax(230px,.8fr) 1.2fr 1fr; align-items:start; }
@media (max-width:1000px){ .wfx-painel{ grid-template-columns:1fr; } }

/* ⚠️ Os blocos do rodapé são <details> FECHADOS por padrão (29/08/2026):
   três barras finas com o resumo à vista, em vez de ~400px de cartões
   quase vazios. `align-items:start` acima é o que impede um bloco aberto
   de esticar os outros dois junto. */
.wfx-col > summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  user-select:none; margin:-16px -18px; padding:13px 18px;
}
.wfx-col > summary::-webkit-details-marker{ display:none; }
.wfx-col > summary::before{
  content:''; width:7px; height:7px; flex-shrink:0;
  border-right:1.8px solid var(--text-muted); border-bottom:1.8px solid var(--text-muted);
  transform:rotate(-45deg); transition:transform .15s ease; margin-top:-2px;
}
.wfx-col[open] > summary::before{ transform:rotate(45deg); margin-top:-4px; }
.wfx-col > summary h3{ margin:0; }
.wfx-resumo{ margin-left:auto; font-size:11.5px; color:var(--text-muted); white-space:nowrap; }
.wfx-col[open] > summary{ margin-bottom:0; border-bottom:1px solid var(--border); }
.wfx-col[open] > .wfx-sub{ margin-top:12px; }
.wfx-col h3{ display:flex; align-items:center; gap:8px; }
.wfx-col h3 svg{ color:var(--text-muted); flex-shrink:0; }

.wfx-membros{ display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.wfx-membro{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:11px; padding:7px 10px;
}
.wfx-membro.resp{ border-color:rgba(118,184,42,.45); background:var(--green-soft); }
.wfx-membro-nome{ display:flex; flex-direction:column; min-width:0; flex:1; }
.wfx-membro-nome{ font-size:12.5px; font-weight:600; }
.wfx-membro-nome small{ font-size:10.5px; font-weight:500; color:var(--text-muted); }
.wfx-membro form{ margin:0; }
.wfx-add-pessoa{ display:flex; gap:8px; }
.wfx-add-pessoa select{ flex:1; min-width:0; height:36px; }
.wfx-add-pessoa .btn-primary{ white-space:nowrap; }

/* tema escuro: os tons pastel viram veus da mesma cor */
html[data-tema="escuro"] .wfp .fx-raiz{
  background:
    radial-gradient(900px 320px at 50% -80px, color-mix(in srgb, var(--fx, var(--green)) 14%, transparent), transparent 70%),
    var(--surface-0);
}
html[data-tema="escuro"] .wfp .fx-cartao[style],
html[data-tema="escuro"] .wfp .fx-cartao{ background:var(--surface-1); }
html[data-tema="escuro"] .wfp[data-ferramenta] .fx-swot .fx-cartao,
html[data-tema="escuro"] .wfp[data-ferramenta] .fx-pdca-caixas .fx-cartao,
html[data-tema="escuro"] .wfp[data-ferramenta="bmc"] .fx-bmc .fx-cartao{
  background:color-mix(in srgb, var(--q, var(--fx)) 10%, var(--surface-1));
}
html[data-tema="escuro"] .wfx-membro{ background:var(--surface-1); }
/* --- formulario "Editar projeto": campos com rotulo, grade alinhada --- */
.wfe{ background:var(--surface-1); border-bottom:1px solid var(--border); padding:16px 18px 14px; }
.wfe-grade{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:13px 14px; align-items:end;
}
.wfe-campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.wfe-campo > span{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted);
}
.wfe-campo > span small{
  font-weight:500; letter-spacing:0; font-size:10.5px;
}
.wfe-campo input, .wfe-campo select{ width:100%; height:38px; }
.wfe-2{ grid-column:span 2; }
.wfe-3{ grid-column:span 3; }
.wfe-cor input[type=color]{ width:52px; height:38px; padding:3px; cursor:pointer; }
.wfe-rodape{
  display:flex; align-items:center; gap:12px; margin-top:14px;
  padding-top:12px; border-top:1px dashed var(--border);
}
.wfe-rodape .field-hint{ flex:1; }
@media (max-width:900px){
  .wfe-grade{ grid-template-columns:1fr 1fr; }
  .wfe-2, .wfe-3{ grid-column:span 2; }
}
@media (max-width:540px){
  .wfe-grade{ grid-template-columns:1fr; }
  .wfe-2, .wfe-3{ grid-column:span 1; }
  .wfe-rodape{ flex-wrap:wrap; }
}
html[data-tema="escuro"] .wfe{ background:var(--surface-0); }
/* --- circulo unico de cor (campo_cor modo "unico") ---
   Para formularios de uma linha, onde a paleta inteira nao cabe: um
   circulo com a cor atual; clicar abre o seletor do sistema. */
.cor-unica{
  position:relative; width:38px; height:38px; flex-shrink:0; border-radius:50%;
  display:inline-block; cursor:pointer; background:var(--c, var(--green));
  box-shadow:0 1px 3px rgba(19,24,41,.2), inset 0 0 0 2px var(--surface-2);
  border:1px solid rgba(19,24,41,.14);
  transition:transform .12s ease;
}
.cor-unica:hover{ transform:scale(1.06); }
.cor-unica input[type="color"]{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  padding:0; border:0; background:transparent;
}
/* dentro dos formularios inline dos popups, alinha com os campos de 38px */
.wfm-form .cor-unica, .ag-nova-form .cor-unica{ align-self:center; }
/* ================================================================
   PROJETAO (2026-08-08) — um projeto que guarda outros dentro.
   ================================================================ */

/* card do projetao no popup "Novo projeto" */
.wfm-projetao{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  background:linear-gradient(120deg, #42506B, #2A3248); color:#fff;
  border-radius:14px; padding:16px 18px; margin-bottom:16px;
}
.wfm-projetao-txt{ flex:1; min-width:220px; }
.wfm-projetao h3{ font-size:15px; font-weight:700; margin:0 0 5px; color:#fff; }
.wfm-projetao p{ font-size:12px; line-height:1.55; margin:0; color:rgba(255,255,255,.8); }
.wfm-projetao .wfm-mais{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35); color:#fff;
  width:34px; height:34px; font-size:19px; flex-shrink:0;
}
.wfm-projetao .wfm-mais:hover{ background:rgba(255,255,255,.28); }
.wfm-projetao .wfm-form{ flex-basis:100%; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.wfm-projetao .wfm-form input[type=text]{ flex:1; min-width:200px; }

/* selo e miniaturas no cartao da lista */
.wfl-chip.projetao{ background:#42506B; color:#fff; border-color:#42506B; }
.wfl-chip.projetao i{ background:#fff !important; }
/* na linha, o "mais grosso" do projetão é a barra da ESQUERDA (2026-08-17) */
.wfl-projetao{ border-left-width:7px; }
.wfl-dentro{ grid-area:dentro; display:flex; gap:5px; flex-wrap:wrap; margin:7px 0 0; }
.wfl-dentro-chip{
  font-size:10px; font-weight:650; padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--c) 14%, transparent);
  color:color-mix(in srgb, var(--c) 60%, #0E1220);
  border:1px solid color-mix(in srgb, var(--c) 35%, transparent);
  white-space:nowrap;
}
@supports not (color: color-mix(in srgb, red, blue)){
  .wfl-dentro-chip{ background:var(--surface-1); color:var(--text-secondary); border-color:var(--border); }
}
.wfl-dentro-mais{ font-size:10px; font-weight:650; color:var(--text-muted); align-self:center; }

/* corpo do projetao: a grade dos projetos de dentro */
.pjt{ padding:22px; background:var(--surface-1); border-top:1px solid var(--border); }
.pjt-topo{
  display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
  max-width:1160px; margin:0 auto 18px;
}
.pjt-topo > div{ flex:1; min-width:240px; }
.pjt-topo h3{ font-size:15px; font-weight:700; letter-spacing:-.01em; margin:0 0 4px; }
.pjt-topo p{ font-size:12.5px; color:var(--text-secondary); margin:0; line-height:1.55; max-width:66ch; }
.pjt-vazio{
  max-width:1160px; margin:0 auto; text-align:center; padding:34px 20px;
  border:1.5px dashed var(--border-strong); border-radius:14px;
  font-size:13px; color:var(--text-secondary); line-height:1.7; background:var(--surface-2);
}
.pjt-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:13px;
  max-width:1160px; margin:0 auto;
}
.pjt-card{
  position:relative; background:var(--surface-2); border:1px solid var(--border);
  border-top:3px solid var(--c, var(--green)); border-radius:13px;
  box-shadow:0 1px 3px rgba(19,24,41,.05);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pjt-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(19,24,41,.12); }
.pjt-card-link{
  display:flex; flex-direction:column; gap:7px; padding:14px 15px 15px;
  text-decoration:none; color:inherit; min-height:118px;
}
.pjt-card-tag{
  font-size:9.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c, var(--green));
}
.pjt-card-nome{ font-size:13.5px; font-weight:650; letter-spacing:-.01em; line-height:1.3; }
.pjt-card-resumo{
  font-size:11.5px; color:var(--text-muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pjt-card-prog{
  display:flex; align-items:center; gap:8px; margin-top:auto;
  font-size:11px; font-weight:700; color:var(--text-secondary);
}
.pjt-card-prog i{
  flex:1; height:5px; border-radius:99px; background:rgba(19,24,41,.09); position:relative;
}
.pjt-card-prog i::after{
  content:''; position:absolute; inset:0; width:inherit; border-radius:99px;
  background:var(--c, var(--green));
}
.pjt-card-tirar{ position:absolute; top:8px; right:8px; opacity:0; transition:opacity .12s ease; }
.pjt-card:hover .pjt-card-tirar{ opacity:1; }

.pjt-trazer{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  max-width:1160px; margin:20px auto 0; padding-top:16px;
  border-top:1px dashed var(--border);
}
.pjt-trazer label{ font-size:12px; color:var(--text-secondary); font-weight:600; }
.pjt-trazer select{ flex:1; min-width:220px; height:36px; }

/* faixa no projeto que mora dentro de um projetao */
.pjt-faixa{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px 10px;
  padding:7px 14px; border-radius:999px; font-size:12px; color:var(--text-secondary);
  background:color-mix(in srgb, var(--c) 12%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)){
  .pjt-faixa{ background:var(--surface-2); border-color:var(--border); }
}
.pjt-faixa b{ color:var(--text-primary); }

html[data-tema="escuro"] .pjt{ background:var(--surface-0); }
html[data-tema="escuro"] .pjt-card, html[data-tema="escuro"] .pjt-vazio{ background:var(--surface-1); }
/* atalho "Todas / Nenhuma" no cabecalho de cada grupo de agendas */
.ag-lat-todas{
  margin-left:auto; font-size:11px; font-weight:650; text-decoration:none;
  color:var(--text-muted); padding:3px 9px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-2);
  transition:border-color .14s ease, color .14s ease;
}
.ag-lat-todas:hover{ border-color:var(--green); color:var(--green-dark); }
/* ================================================================
   Formulario de compromisso — refeito (2026-08-08).
   Quatro perguntas em faixas, na mesma linguagem do formulario do
   link publico de agendamento.
   ================================================================ */
.cp-cabeca{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.cp-cabeca .page-sub{ margin:4px 0 0; }

.fm-secao{
  border:1px solid var(--border); border-radius:14px;
  background:var(--surface-2); padding:16px 18px 18px; margin-bottom:14px;
}
.fm-tit{
  display:flex; align-items:center; gap:10px; margin-bottom:15px;
  font-size:13.5px; font-weight:700; letter-spacing:-.01em;
}
.fm-tit span{
  width:22px; height:22px; flex-shrink:0; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green-soft); color:var(--green-dark);
  font-size:11.5px; font-weight:750;
}
/* colunas iguais, alinhadas pelo topo, rotulo de uma linha */
.fm-campos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px 16px; align-items:start;
}
.fm-campos .field{ margin-bottom:0; min-width:0; }
.fm-campos .field-label{ min-height:15px; margin-bottom:8px; }
.fm-campos .field-hint{ margin-top:6px; }
.fm-2{ grid-column:span 2; }
@media (max-width:700px){ .fm-2{ grid-column:span 1; } }
.fm-cor .cor-unica{ margin-top:2px; }
.fm-opc{
  font-weight:500; letter-spacing:0;
  color:var(--text-muted); font-size:11px; margin-left:5px;
}

.fm-dia-inteiro{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  margin-bottom:15px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-1);
  font-size:12.5px; font-weight:600;
}
.fm-dia-inteiro:hover{ border-color:var(--green); }
.fm-dia-inteiro input{ accent-color:var(--green); }

.fm-pessoas{ display:flex; gap:8px; flex-wrap:wrap; }
.fm-aviso{
  padding:12px 14px; border-radius:11px; font-size:12.5px; line-height:1.55;
  background:var(--surface-1); border:1px dashed var(--border-strong);
  color:var(--text-secondary);
}

/* "Mais detalhes": o que quase nunca se mexe fica fechado */
.fm-mais{
  border:1px solid var(--border); border-radius:14px;
  background:var(--surface-2); margin-bottom:14px; overflow:hidden;
}
.fm-mais > summary{
  padding:15px 18px; cursor:pointer; list-style:none; user-select:none;
  font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  display:flex; align-items:center; gap:10px;
}
.fm-mais > summary::-webkit-details-marker{ display:none; }
.fm-mais > summary::after{ content:'▾'; margin-left:auto; color:var(--text-muted); font-size:12px; }
.fm-mais[open] > summary::after{ content:'▴'; }
.fm-mais > summary:hover{ background:rgba(19,24,41,.02); }
.fm-mais > summary small{ font-weight:500; font-size:11.5px; color:var(--text-muted); }
.fm-mais[open] > summary{ border-bottom:1px solid var(--border); }
.fm-mais-corpo{ padding:16px 18px 18px; }
.fm-mais-corpo textarea{ min-height:74px; }

.fm-acoes{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--border); margin-top:4px;
}
.fm-acoes .espaco{ flex:1; }
.fm-salvar{ height:44px; padding:0 28px; }
@media (max-width:560px){
  .fm-acoes{ flex-direction:column; align-items:stretch; }
  .fm-acoes .espaco{ display:none; }
  .fm-acoes .btn, .fm-salvar{ width:100%; justify-content:center; text-align:center; }
}
html[data-tema="escuro"] .fm-secao, html[data-tema="escuro"] .fm-mais{ background:var(--surface-1); }
html[data-tema="escuro"] .fm-dia-inteiro{ background:var(--surface-2); }
/* ================================================================
   FUNDO DE TELA DA AGENDA (2026-08-09) - popup "Baixar agenda do dia".
   A imagem em si e desenhada em <canvas> pelo portal.js; aqui e so o
   popup de escolher dia, horario e agendas.
   ================================================================ */
.fdia-caixa{ width:min(600px, 100%); }
.fdia-linhas{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px; }
.fdia-linhas .field{ margin-bottom:0; min-width:0; }
.fdia-ag-topo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin:18px 0 8px;
}
.fdia-atalhos{ display:flex; gap:6px; }
.fdia-atalhos button{
  font-size:11px; font-weight:650; cursor:pointer; padding:4px 10px;
  border-radius:999px; border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text-secondary);
}
.fdia-atalhos button:hover{ border-color:var(--green); color:var(--green-dark); }
.fdia-ags{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 12px;
  border:1px solid var(--border); border-radius:var(--radius); padding:9px 11px;
  background:var(--surface-2); max-height:250px; overflow:auto;
}
.fdia-ag{
  display:flex; align-items:center; gap:8px; font-size:12.5px;
  padding:5px 4px; border-radius:7px; cursor:pointer;
}
.fdia-ag:hover{ background:rgba(19,24,41,.05); }
.fdia-ag input{ flex-shrink:0; }
.fdia-cor{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.fdia-acoes{ display:flex; justify-content:flex-end; margin-top:18px; }
@media (max-width:640px){
  .fdia-linhas{ grid-template-columns:1fr; }
  .fdia-ags{ grid-template-columns:1fr; }
}
/* ================================================================
   SALA DE REUNIAO (2026-08-09) - grade de UMA SEMANA em faixas de
   30 minutos. Substitui o sistema que vivia solto no Netlify.
   ================================================================ */
.sl-barra{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:14px;
}
.sl-salas{ display:flex; gap:8px; flex-wrap:wrap; }
.sl-sala{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 15px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface-2);
  color:var(--text-secondary); font-size:13px; font-weight:600; text-decoration:none;
  transition:border-color .15s, color .15s, background-color .15s;
}
.sl-sala::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:var(--sl-cor,#185FA5); flex-shrink:0;
}
.sl-sala:hover{ border-color:var(--border-strong); color:var(--text-primary); }
.sl-sala.on{ background:var(--sl-cor,#185FA5); border-color:var(--sl-cor,#185FA5); color:#fff; }
.sl-sala.on::before{ background:rgba(255,255,255,.85); }

.sl-mes{ display:flex; align-items:center; gap:6px; }
/* setas de semana maiores (2026-08-10) — tambem respondem as setas ← → do teclado */
.sl-nav{ padding:9px 18px; font-size:19px; line-height:1; font-weight:700; }
.sl-mes-nome{ font-size:14px; font-weight:650; min-width:210px; text-align:center; }
.sl-mes-nome b{ color:var(--green-dark); font-weight:650; }

.sl-legenda{
  display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px;
  font-size:12px; color:var(--text-secondary);
}
.sl-legenda span{ display:flex; align-items:center; gap:7px; }
.sl-sw{ width:13px; height:13px; border-radius:4px; display:inline-block; flex-shrink:0; }

.sl-semana{
  border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow-xs);
}
/* a tabela nao encolhe abaixo disso: em tela estreita ela rola sozinha */
.sl-rolagem{ overflow-x:auto; }
/* table-layout FIXO (2026-08-10): os 5 dias tem SEMPRE a mesma largura,
   nao importa o tamanho do nome dentro da celula — antes o dia com uma
   reserva de nome comprido (Byte in Motion) ficava mais largo que os
   outros. O nome que nao cabe leva reticencias. */
.sl-tabela{ width:100%; border-collapse:collapse; min-width:640px; table-layout:fixed; }
.sl-tabela th, .sl-tabela td{
  text-align:center; padding:0; border-right:1px solid var(--border);
}
.sl-tabela th:last-child, .sl-tabela td:last-child{ border-right:none; }
.sl-tabela thead th{
  background:var(--surface-1); color:var(--text-muted); font-weight:500;
  font-size:11.5px; padding:9px 4px; border-bottom:1px solid var(--border);
}
.sl-tabela thead th.sl-hoje{ color:var(--green-dark); background:var(--green-soft); }
.sl-dnum{ display:block; font-size:14px; font-weight:700; color:var(--text-primary); margin-top:1px; }
.sl-tabela thead th.sl-hoje .sl-dnum{ color:var(--green-dark); }
.sl-th-hora{ width:74px; }

/* Uma linha por HORA (2026-08-10 — a grade de 30 min durou um dia). */
.sl-tabela tr.sl-linha-cheia td{ border-top:1px solid var(--border); }
.sl-tabela tbody tr:first-child td{ border-top:none; }
.sl-tabela tbody tr:last-child td{ border-bottom:none; }

.sl-hora{
  background:var(--surface-1); color:var(--text-secondary); font-size:11.5px;
  font-weight:600; white-space:nowrap; padding:0 8px; width:74px;
  text-align:right; vertical-align:top; line-height:48px;
}
/* Altura da faixa: 34px -> 48px (2026-08-11). A semana ficava achatada,
   com muito espaco sobrando embaixo da grade. */
.sl-cel{ height:48px; font-size:12.5px; font-weight:600; position:relative; }
.sl-cel .sl-txt{ display:block; padding:0 8px; line-height:48px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-passou{ background:var(--surface-1); }
.sl-livre{ background:var(--surface-2); }

/* o botao ocupa a celula inteira: a area de clique e o quadrado todo */
.sl-bt-livre, .sl-bt-ocupada{
  display:block; width:100%; height:48px; padding:0 8px; border:none;
  font:inherit; line-height:48px; cursor:pointer; background:transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;
}
.sl-livre:hover .sl-bt-livre{ background:var(--green-soft); }
/* o "+" so aparece no hover: com 100 celulas na tela, um sinal fixo em cada
   uma viraria ruido puro */
.sl-livre:hover .sl-bt-livre::after{ content:"+"; color:var(--green-dark); font-weight:700; }

.sl-ocupada{ background:var(--sl-cor,#42506B); }
.sl-ocupada .sl-txt, .sl-bt-ocupada{ color:#fff; }
.sl-ocupada.sl-passou{ opacity:.4; }
/* horas seguidas do mesmo bloco viram um retangulo so: a continuacao
   esconde o traco da hora e so a primeira mostra o nome */
.sl-ocupada{ border-bottom-color:transparent !important; }
.sl-tabela tr.sl-linha-cheia td.sl-ocupada:not(.sl-inicio){ border-top-color:transparent; }
.sl-tabela tr.sl-linha-cheia td.sl-ocupada.sl-inicio{ border-top:1px solid rgba(255,255,255,.28); }
.sl-tabela tbody tr:first-child .sl-ocupada.sl-inicio{ border-top:none; }
.sl-bt-ocupada:hover{ background:rgba(0,0,0,.2); }
.sl-cadeado{ font-size:9px; opacity:.75; }
.sl-ocupada form{ margin:0; }

/* popup de reserva */
.sl-caixa{ width:min(500px, 100%); }
.sl-campos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sl-campos .field{ margin-bottom:0; min-width:0; }
.sl-dias{ margin-top:14px; margin-bottom:0; }
.sl-dias-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.sl-dia input{ position:absolute; opacity:0; pointer-events:none; }
.sl-dia span{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface-2);
  font-size:13px; font-weight:650; color:var(--text-secondary);
  transition:background-color .14s, border-color .14s, color .14s;
}
.sl-dia input:checked + span{ background:var(--green); border-color:var(--green); color:#fff; }
.sl-dia input:focus-visible + span{ outline:2px solid var(--green-dark); outline-offset:2px; }
.sl-acoes{
  display:flex; justify-content:flex-end; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--border);
}
.sl-sala-linha{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sl-sala-linha input[type=text]{ flex:1; min-width:0; }
.sl-sala-nova{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--border-strong); }

@media (max-width:640px){
  .sl-campos{ grid-template-columns:1fr; }
  .sl-barra{ flex-direction:column; align-items:stretch; }
  .sl-mes{ justify-content:center; }
}

/* ============================================================
   CAIXA ALTA NO PORTAL INTEIRO (2026-08-10, pedido do Matteo)
   ============================================================
   Padrao visual: tudo dentro do Portal aparece em MAIUSCULA —
   titulos, menus, cadastro, observacoes, agenda — e o campo ja
   mostra maiusculo enquanto se digita.

   E APENAS VISUAL, de proposito. `text-transform` nao muda o
   `value` enviado no formulario: o banco continua guardando o
   texto como foi digitado. Fazer a troca na GRAVACAO quebraria o
   sistema — senha (a do cliente mistura maiuscula e minuscula de
   proposito), caminho de foto em servidor Linux
   (uploads/equipe/u3.png), link de Drive/boleto/Meet,
   google_event_id, e os valores de ENUM que viajam nos mesmos
   formularios ('ativo', 'semanal', 'excluir'...) viveriam em
   caixa alta e parariam de casar. Por isso: CSS, nao PHP.

   Para tirar tudo isso, basta apagar este bloco.

   login.php NAO entra: ele tem CSS proprio e nao carrega este
   arquivo. Idem canvas (lanyard, fundo animado) — CSS nao pinta
   texto desenhado em canvas.

   ⚠️ A regra fica no BODY, nao no `.shell` (corrigido em 2026-08-10,
   no mesmo dia): com `.shell` sobrava caixa baixa por todo lado —
   o painel de Configuracoes e incluido DEPOIS do `</div>` do shell
   (layout_footer.php), e 9 popups nascem em `document.body` pelo JS
   (editor rapido da agenda, popover de evento, minipop de donos,
   overlay das ferramentas...). No body nada escapa. */
body{ text-transform:uppercase; }

/* ⚠️ CAMPO E BOTÃO NÃO HERDAM (2026-08-11).
   `text-transform` desce por herança para tudo... menos para os
   controles de formulário: <button>, <input>, <textarea> e <select>
   nascem em `none` pelo próprio navegador, exatamente como acontece com
   font-family. Por isso o Portal ficou meio maiúsculo e meio não —
   título e texto corrido em caixa alta, mas TODO botão em caixa de
   sentença ("Concluir", "Editar", "+ Novo projeto", "Criar nova
   agenda"...), e todo placeholder junto.

   Alguém já tinha esbarrado nisso e consertado só o <select>; o resto
   passou batido até o Matteo mandar as telas em 11/08. Esta regra fecha
   a família inteira de uma vez.

   `inherit` em vez de `uppercase` de propósito: assim quem estiver
   dentro de um `.sem-caixa` continua fora da caixa alta junto com o
   bloco, em vez de virar a única coisa gritando lá dentro. */
button, input, textarea, select, optgroup, option{ text-transform:inherit; }

/* --- o que NUNCA vai para caixa alta --- */
/* e-mail e site: o padrao deles e minusculo (pedido do Matteo).
   senha: o campo mostra bolinhas, mas fica de fora por seguranca —
   e o autocomplete do navegador nao deve ser mascarado. */
input[type="email"],
input[type="password"],
input[type="url"],
input[name*="email" i],
input[name*="mail" i],
input[name*="site" i],
input[name*="link" i],
input[name*="url" i],
input[name*="senha" i],
textarea[name*="link" i],
/* a mensagem pronta do acesso do cliente carrega URL + e-mail +
   SENHA gerada: em caixa alta o cliente digitaria a senha errada */
#msgPortalCliente,
/* marcador para PHP e JS: class="sem-caixa" */
.sem-caixa,
.sem-caixa *{
  text-transform:none;
}
/* e-mail exibido (nao campo) fica minusculo de verdade, nao so "sem
   caixa alta" — assim MATTEO@X.COM digitado errado aparece certo */
.email-txt{ text-transform:lowercase; }

/* ================================================================
   ACESSO DO CLIENTE AO PORTAL — ficha do cliente (2026-08-11)
   ================================================================
   Antes era um painel com seis contagens e cinco botões soltos do mesmo
   tamanho: dava para ler tudo e não entender nada. Agora são duas telas
   bem diferentes.

   SEM ACESSO: nem painel existe, só a faixa com o botão que cria.
   COM ACESSO: um cartão com o essencial em cima, o botão grande de
   entrar no portal no meio, e as ações raras embaixo, pequenas — com o
   "Remover acesso" separado dos outros pelo espaço vazio, para ninguém
   acertá-lo sem querer.
   ================================================================ */
.pac-vazio{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 18px; border:1px dashed var(--border-strong); border-radius:var(--radius-lg);
  background:var(--surface-1);
}
.pac-vazio > span{ font-size:13px; color:var(--text-secondary); }
.pac-vazio form{ margin:0; }
.pac-bt-add{ padding:11px 20px; font-size:13.5px; border-radius:11px; }

.pac-cartao{
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface-1); padding:16px 18px;
}
.pac-cartao.bloqueado{ border-color:#EFC9C7; background:#FDF4F3; }

.pac-topo{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:14px;
}
.pac-quem{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pac-email{ font-size:15px; font-weight:700; letter-spacing:-.01em; word-break:break-all; }
.pac-quando{ font-size:11.5px; color:var(--text-muted); }
.pac-selos{ display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0; }

/* o botão que a pessoa procura quase sempre: grande e preenchido */
.pac-principal{ margin:0 0 14px; }
.pac-bt-ver{
  width:100%; justify-content:center;
  padding:14px 22px; font-size:15px; font-weight:700; letter-spacing:.02em;
  border-radius:12px;
}

.pac-acoes{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding-top:13px; border-top:1px solid var(--border);
}
.pac-acoes form{ display:flex; align-items:center; gap:6px; margin:0; }
/* Bloquear e Remover ficam juntos na ponta direita, longe do que se usa
   todo dia. Em par, e não soltos: quando a barra fica estreita os dois
   descem para a linha de baixo juntos e continuam à direita, em vez de o
   "Remover acesso" cair sozinho na esquerda. */
.pac-acoes-fim{ display:flex; align-items:center; gap:7px; margin-left:auto; }

@media (max-width:700px){
  .pac-acoes-fim{ margin-left:0; width:100%; }
}

/* ================================================================
   SOLICITACOES DE ALTERACAO (2026-08-10)
   Formulario a esquerda, fila a direita; embaixo o historico.
   ================================================================ */
/* ---- Escolher a página, em grupos (2026-08-12) ----
   O <select> em ordem alfabética punha "Agenda" ao lado de "Backup". O
   botão abaixo abre um popup pequeno com os mesmos grupos do menu da
   esquerda, e "Geral" sozinho no topo. */
.sol-escolhe{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; font-size:13.5px; font-weight:600;
}
.sol-escolhe-seta{ color:var(--text-muted); flex-shrink:0; }
/* Caixa do "Onde" IGUAL ao menu da esquerda (2026-08-12, pedido do Matteo
   com print anexado): mesmo degradê azul-marinho do #sidebar, e por dentro
   as MESMAS classes .navitem/.navgroup/.chev do menu de verdade — item com
   ícone, cascata com seta, rodapé separado (o "Geral" fica no lugar que o
   menu real dá ao botão Configurações). Sempre escura, como a barra.
   ⚠️ `.wfm-caixa.sol-pag-caixa` (duas classes) de propósito: é a mesma
   especificidade de `html[data-tema="escuro"] .wfm-caixa`, então esta
   regra — que vem depois no arquivo — vence nos dois temas. Só
   `.sol-pag-caixa` sozinho perderia no tema escuro. */
.wfm-caixa.sol-pag-caixa{
  max-width:380px;
  background:linear-gradient(175deg,#141A2C 0%,#1A2137 55%,#151B2E 100%);
  border-color:rgba(255,255,255,.08);
}
.sol-pag-caixa .wfm-cabeca h2{ color:#fff; }
.sol-pag-caixa .wfm-fechar{ border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.7); }
.sol-pag-caixa .wfm-fechar:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sol-pag-caixa ::-webkit-scrollbar{ width:6px; }
.sol-pag-caixa ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }
.sol-pag-menu{ max-height:62vh; overflow-y:auto; padding-right:4px; }
/* Cascata DENTRO de cascata (2026-08-12): Configurações abre as secoes, e
   a secao abre as telas dela. A regra geral do menu (`.navgroup.open
   .subitens`) e descendente, entao abrir o pai escancararia tambem os
   netos de todo mundo — aqui a abertura e so de filho direto. */
.sol-pag-menu .navgroup .subitens{ display:none; }
.sol-pag-menu .navgroup.open > .subitens{ display:block; }
/* a seta do "Projetos" (item solto, fora de .navgroup) também vai à direita */
.sol-pag-menu .chev{ margin-left:auto; }
/* rodapé do popup: mesma divisória que separa o Configurações no menu real */
.sol-pag-pe{ margin-top:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); }
.sol-pag-pe-dica{ display:block; font-size:10px; font-weight:500; color:rgba(255,255,255,.45); }
/* o tema escuro clareia o favicon do rodapé do menu real; aqui a caixa já
   é sempre escura e o ícone fica como é (html na frente: desempata com a
   regra do tema, que tem a mesma quantidade de classes) */
html .sol-pag-pe img.side-config-ico{ filter:none; }
.sol-pag-titulo{
  font-size:10px; font-weight:700; letter-spacing:.09em;
  color:rgba(255,255,255,.38); margin:0 0 5px 4px;
}
/* Cartão que também é filtro (2026-08-17): só o "Novos diagnósticos" é
   clicável entre os cartões do topo, então precisa PARECER clicável — e
   ficar visivelmente ligado enquanto o filtro está valendo. */
.stat-bt{ text-decoration:none; color:inherit; display:block; transition:border-color .15s, box-shadow .15s; }
.stat-bt:hover{ border-color:var(--green); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.stat-bt.ativo{ border-color:var(--green); background:var(--green-soft); }
.stat-bt.ativo .stat-label{ color:var(--green-dark); }

/* Diagnóstico do lead (2026-08-17): pergunta fechada, resposta abre na
   setinha. <details> nativo — sem JavaScript, funciona com o teclado. */

/* Os DOIS diagnósticos (03/09/2026): crescimento e franquia. O botão troca
   de um para o outro, e a bolinha diz quantas perguntas cada um tem — dá
   para ver o que existe sem precisar clicar. */
.lead-diag-abas{ display:flex; gap:8px; flex-wrap:wrap; margin:-4px 0 14px; }
.lead-diag-aba{
  display:inline-flex; align-items:center; gap:7px;
  border:1.5px solid var(--border); border-radius:999px;
  background:var(--surface-0); color:var(--text-secondary);
  font-family:inherit; font-size:12px; font-weight:650;
  padding:7px 14px; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.lead-diag-aba:hover{ border-color:var(--border-strong); color:var(--text-primary); }
.lead-diag-aba.ativa{ border-color:var(--green); background:var(--green-soft); color:var(--green-dark); }
.lead-diag-bolha{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--surface-2); color:var(--text-muted);
  font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.lead-diag-aba.ativa .lead-diag-bolha{ background:var(--green); color:#fff; }
/* faixa do documento do diagnostico, acima das 30 perguntas (2026-08-19) */
.lead-diag-doc{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; background:var(--green-soft); border:1px solid var(--green);
  border-radius:var(--radius); padding:12px 15px; margin:-6px 0 14px; }
.lead-diag-doc.vazio{ background:var(--surface-0); border-color:var(--border); }
.lead-diag-doc-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lead-diag-doc-txt b{ font-size:13.5px; font-weight:650; }
.lead-diag-doc-txt i{ font-style:normal; font-size:11.5px; color:var(--text-secondary); }
.lead-diag-doc-bt{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.lead-diag-doc .btn-primary{ text-decoration:none; padding:8px 15px; flex-shrink:0; }
/* «Enviar PDF» é discreto de propósito: o normal é o documento chegar
   sozinho às 9h30, e este atalho serve para a exceção. */
.lead-diag-subir{ font-size:11.5px; font-weight:650; color:var(--text-secondary);
  text-decoration:underline; cursor:pointer; white-space:nowrap; }
.lead-diag-subir:hover{ color:var(--green-dark); }

.lead-diag{ display:flex; flex-direction:column; gap:6px; }
.lead-diag-item{
  border:1px solid var(--border); border-radius:10px; background:var(--surface-1);
  overflow:hidden;
}
.lead-diag-item summary{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:11px 14px; list-style:none; font-size:13px; font-weight:600;
  color:var(--text-primary);
}
.lead-diag-item summary::-webkit-details-marker{ display:none; }
.lead-diag-item summary::after{
  content:''; margin-left:auto; flex-shrink:0; width:8px; height:8px;
  border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg); transition:transform .18s; margin-top:4px;
}
.lead-diag-item[open] summary::after{ transform:rotate(-135deg); }
.lead-diag-item[open] summary{ background:var(--surface-2); }
.lead-diag-num{
  flex-shrink:0; min-width:22px; font-variant-numeric:tabular-nums;
  color:var(--text-muted); font-weight:700;
}
.lead-diag-perg{ flex:1; }
.lead-diag-resp{
  padding:2px 14px 13px 46px; font-size:13px; line-height:1.55;
  color:var(--text-secondary);
}

/* numero da solicitacao: discreto, largura fixa, nunca quebra em duas linhas */
.sol-num{
  color:var(--text-muted); font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* separa "minhas" do que a equipe pediu, nas duas listas (2026-08-12) */
.sol-equipe-titulo{
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--text-muted); margin:22px 0 8px;
  padding-top:14px; border-top:1px solid var(--border);
}
.sol-pag-item{
  display:flex; align-items:center; width:100%; text-align:left; margin-bottom:3px;
  padding:9px 11px; border-radius:9px; font-size:12.5px; font-weight:500;
  border:1px solid transparent; background:transparent; color:rgba(255,255,255,.66);
}
.sol-pag-item:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.1); color:#fff; }

/* drill-down para registro especifico (ex: um projeto), 2026-08-12 */
.sol-pag-drill{ max-height:56vh; overflow-y:auto; }
.sol-pag-voltar{
  display:inline-block; margin-bottom:10px; padding:6px 10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.16); background:transparent; color:rgba(255,255,255,.66);
  font-size:12px; font-weight:650;
}
.sol-pag-voltar:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* rascunho: borda laranja para se identificar sem ler o chip (2026-08-12) */
.sol-item.rascunho{ border-left:3px solid #B4671B; }

/* ---- barra "gravando o áudio", em cima de tudo (2026-08-12) ----
   Fica embaixo, no meio, enquanto a gravação atravessa a troca de página.
   Parar só na tela de Solicitações, por isso aqui só tem o botão de voltar. */
.grav-barra{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:9999; display:flex; align-items:center; gap:11px;
  padding:10px 14px 10px 16px; border-radius:999px;
  background:#131829; color:#fff; box-shadow:0 8px 26px rgba(19,24,41,.4);
  font-size:12.5px; font-weight:650; max-width:calc(100vw - 28px);
}
.grav-ponto{
  width:9px; height:9px; border-radius:50%; background:#E5484D; flex-shrink:0;
  animation:gravPulsa 1.2s ease-in-out infinite;
}
@keyframes gravPulsa{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.8); } }
.grav-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grav-ir{
  padding:6px 13px; border-radius:999px; border:0; flex-shrink:0;
  background:rgba(255,255,255,.16); color:#fff; font-size:11.5px; font-weight:700;
}
.grav-ir:hover{ background:rgba(255,255,255,.28); color:#fff; }
/* as ultimas palavras transcritas: e a prova visivel de que esta gravando */
.grav-previa{
  max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:.62; font-weight:500;
}
.grav-previa:empty{ display:none; }
.grav-barra.erro .grav-ponto{ animation:none; background:#98A0B5; }
.grav-barra.religar{ cursor:pointer; }
@media (prefers-reduced-motion:reduce){ .grav-ponto{ animation:none; } }

/* ---- Print colado com Ctrl+V (2026-08-12) ---- */
/* Varios prints na mesma solicitacao (2026-08-12, etapa 63): as imagens
   ficam lado a lado, e cada uma tem o seu proprio X. Com uma imagem so, a
   aparencia e a mesma de antes. */
.sol-colados{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.sol-colado{ position:relative; }
.sol-colados .sol-colado img{ max-height:120px; width:auto; }
.sol-colado img{
  display:block; max-width:100%; max-height:190px;
  border:1px solid var(--border); border-radius:10px;
}
.sol-colado-x{
  position:absolute; top:6px; right:6px;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; line-height:1; border-radius:8px;
  background:rgba(14,18,32,.78); color:#fff; border:0; font-size:12px; cursor:pointer;
}
.sol-colado-x:hover{ background:#B4322F; }

.sol-grade{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; align-items:start; }
.sol-form .field{ margin-bottom:14px; }
.sol-anexos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sol-anexos .field{ margin-bottom:0; min-width:0; }
.sol-anexos input[type=file]{ width:100%; font-size:12px; }

/* gravar e transcrever */
.sol-audio{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.sol-audio .btn{ display:inline-flex; align-items:center; gap:7px; }
.sol-audio .btn.ativo{
  background:#B4322F; border-color:#B4322F; color:#fff;
  animation:sol-pulsa 1.2s ease-in-out infinite;
}
.sol-audio .btn.ativo svg{ color:#fff; }
@keyframes sol-pulsa{ 50%{ box-shadow:0 0 0 6px rgba(180,50,47,.18); } }
.sol-audio-dica{ font-size:11.5px; color:var(--text-muted); }
@media (prefers-reduced-motion: reduce){ .sol-audio .btn.ativo{ animation:none; } }

/* faixa do "enviar para deploy" */
.sol-deploy{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--green-soft); border:1.5px solid #D3E9B5;
  border-radius:var(--radius-lg); padding:13px 16px; margin-bottom:14px;
}
.sol-deploy b{ display:block; font-size:13px; }
.sol-deploy small{ display:block; font-size:11.5px; color:var(--text-secondary); margin-top:2px; }
html[data-tema="escuro"] .sol-deploy{ background:rgba(118,184,42,.10); border-color:rgba(118,184,42,.26); }

.sol-item .pc-item-lado{ flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.sol-resposta{ color:var(--text-primary) !important; font-weight:550; }

@media (max-width:1000px){ .sol-grade{ grid-template-columns:1fr; } }

/* selinho "trabalhando nisso" — rodape, cinza, girando enquanto a fila
   da pessoa nao zera (2026-08-10) */
.sol-trabalhando{
  position:fixed; right:20px; bottom:20px; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--border-strong);
  box-shadow:0 6px 20px rgba(19,24,41,.16);
  font-size:11.5px; font-weight:650; color:var(--text-secondary);
}
.sol-girando{ display:flex; color:var(--text-muted); animation:sol-gira 1.6s linear infinite; }
@keyframes sol-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .sol-girando{ animation:none; } }
@media (max-width:640px){ .sol-trabalhando{ left:16px; right:16px; justify-content:center; } }
/* ---- Convidados do compromisso (2026-08-12, etapa 62) ----
   Lista de quem foi convidado por e-mail, com a resposta que cada um deu
   no Google. So aparece depois de salvo -- antes disso ninguem respondeu
   nada ainda. */
.fm-convidados{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.fm-convidado{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:5px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border);
  font-size:11.5px;
}
.fm-convidado small{ color:var(--text-muted); font-size:10.5px; }

/* ---- Botao do WhatsApp ao lado do telefone (2026-08-12, pedido do Fred) ----
   Verde do WhatsApp de proposito (nao a cor da marca): a pessoa reconhece
   o icone antes de ler qualquer coisa. Fica na MESMA linha do numero, e so
   aparece quando o numero da para chamar. */
.zap-linha{ display:inline-flex; align-items:center; gap:7px; }
.zap-bt{
  display:inline-flex; align-items:center; justify-content:center;
  width:21px; height:21px; flex-shrink:0; border-radius:50%;
  background:#25D366; color:#fff; text-decoration:none; line-height:0;
}
.zap-bt:hover{ background:#1DA851; color:#fff; }
.zap-bt[data-zap]{ cursor:pointer; }
.zap-bt[data-zap]:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* ---- Painéis de Leads: cada um é um retângulo grande (2026-08-12) ----
   Pedido do Matteo: "um retângulo grande que é clicável, que cobre a
   linha inteira". Empilhados, não em grade — o oposto do cartão de
   Projetos, de propósito: aqui cada linha é um funil inteiro. */
/* ------------------------------------------------------------------
   Cartão de painel de leads (refeito em 23/08/2026, pedido do Matteo:
   "ta feio e simples"). Agora o cartão MOSTRA o funil — cada etapa vira
   um pedaço colorido da barra, do tamanho do que ela carrega, com as
   mesmas cores do Painel de Leads.
   ------------------------------------------------------------------ */
/* ⚠️ sem max-width: o cartão ocupa a faixa inteira da página (o limite
   é o do próprio miolo, 1200px) — pedido do Matteo em 23/08/2026 */
/* Faixa "leads fora de qualquer painel" (2026-08-27). Laranja de propósito:
   não é erro (nada se perdeu) nem sucesso — é uma pendência para resolver. */
.pnl-orfaos{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:rgba(214,132,20,.10); border:1.5px solid #D68414; color:#8A5307;
  border-radius:12px; padding:13px 16px; margin-bottom:18px; font-size:13.5px;
}
.pnl-orfaos-txt{ flex:1 1 320px; line-height:1.45; }
.pnl-orfaos-acao{ display:flex; align-items:center; gap:8px; }
.pnl-orfaos-acao select{ max-width:220px; }
html[data-tema="escuro"] .pnl-orfaos{ background:rgba(214,132,20,.16); color:#F2C57C; }

.pnl-lista{ display:grid; gap:18px; }
.pnl-card{
  display:block; padding:26px 30px 24px; border-radius:18px;
  background:
    linear-gradient(135deg, rgba(118,184,42,.05), transparent 42%),
    var(--surface-2);
  border:1px solid var(--border);
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  box-shadow:0 1px 2px rgba(19,24,41,.04), 0 6px 18px -10px rgba(19,24,41,.18);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* a faixa verde da esquerda: entra como pseudo-elemento para poder
   engordar no hover sem empurrar o conteúdo */
.pnl-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(var(--green), var(--green-dark));
  transition:width .16s ease;
}
.pnl-card:hover{
  transform:translateY(-2px); color:inherit; border-color:var(--border-strong);
  box-shadow:0 2px 4px rgba(19,24,41,.05), 0 16px 34px -14px rgba(19,24,41,.32);
}
.pnl-card:hover::before{ width:8px; }

.pnl-card-cabeca{ display:flex; align-items:center; gap:18px; }
.pnl-card-ico{
  width:54px; height:54px; border-radius:15px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); color:var(--green-dark);
}
.pnl-card-txt{ flex:1; min-width:0; }
.pnl-card-tag{
  display:block; font-size:10px; font-weight:750; letter-spacing:.09em;
  text-transform:uppercase; color:var(--green-dark); margin-bottom:3px;
}
.pnl-card-nome{ font-size:23px; font-weight:680; letter-spacing:-.02em; line-height:1.2; }
.pnl-card-resumo{
  margin-top:5px; font-size:13.5px; color:var(--text-secondary); line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* o número grande, encostado na seta */
.pnl-card-numero{ text-align:right; flex-shrink:0; line-height:1.05; }
.pnl-card-numero b{
  display:block; font-size:34px; font-weight:700; letter-spacing:-.03em;
  color:var(--text-primary);
}
.pnl-card-numero span{
  font-size:10px; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted);
}
.pnl-card-seta{
  flex-shrink:0; color:var(--text-muted); display:flex;
  transform:translateX(-3px); opacity:0; transition:opacity .16s ease, transform .16s ease;
}
.pnl-card:hover .pnl-card-seta{ opacity:1; transform:translateX(0); }

/* ---- o funil ---- */
.pnl-funil{
  display:flex; gap:4px; margin-top:22px; height:12px;
  border-radius:99px; overflow:hidden;
}
.pnl-funil-parte{
  min-width:8px; border-radius:99px;
  transition:filter .16s ease;
}
.pnl-card:hover .pnl-funil-parte{ filter:saturate(1.15); }

.pnl-legenda{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px;
  font-size:12.5px; color:var(--text-secondary);
}
.pnl-legenda-item{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pnl-legenda-item i{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.pnl-legenda-item b{ color:var(--text-primary); font-weight:650; }

/* O lixinho de apagar painel (27/08/2026). O cartão inteiro é um <a>,
   então o botão mora num irmão (.pnl-card-caixa) e flutua no canto —
   dentro do link, o clique apagaria e navegaria ao mesmo tempo.
   Primeira versão saiu quase transparente e o Matteo não achou o botão:
   agora é um botãozinho de verdade, sempre visível, vermelho no hover. */
.pnl-card-caixa{ position:relative; }
.pnl-lixo{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px; cursor:pointer;
  background:var(--surface-1, #fff); color:var(--text-secondary);
  box-shadow:0 1px 3px rgba(19,24,41,.10);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.pnl-lixo:hover, .pnl-lixo:focus-visible{
  color:#fff; background:#C0392B; border-color:#C0392B; transform:scale(1.06);
}

@media (max-width:560px){
  .pnl-card{ padding:18px 16px 16px; }
  .pnl-card-ico{ display:none; }
  .pnl-card-nome{ font-size:19px; }
  .pnl-card-numero b{ font-size:24px; }
  .pnl-card-seta{ display:none; }
}

/* ============================================================
   CELULAR (2026-08-17) — adaptação completa para telefone.
   Este bloco fica no FIM do arquivo DE PROPÓSITO: em empate de
   especificidade a última regra vence, inclusive sobre o tema
   escuro acima. 1000px casa com o breakpoint do drawer que já
   existia; 700/600/560/480px são apertos específicos de telefone.
   ============================================================ */

/* o menu de Relatórios era um grid inline no PHP (220px 1fr) e não tinha
   como responder a media query — virou classe (2026-08-17) */
.rel-shell{ display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:flex-start; }

@media (max-width:1000px){
  /* ---- iOS: campo com fonte < 16px dá zoom automático ao focar.
     !important porque .wf-inline-input força 12.5px com !important e
     vários seletores de módulo (.filtros select etc.) têm especificidade
     maior que uma regra de elemento. ---- */
  input[type=text], input[type=search], input[type=email], input[type=password],
  input[type=date], input[type=time], input[type=number], input[type=tel],
  input[type=url], input[type=month], textarea, select{ font-size:16px !important; }

  /* ---- drawer: barra de URL do iOS come o rodapé com 100vh ---- */
  #sidebar{ height:100dvh; padding-top:64px; padding-bottom:max(20px, env(safe-area-inset-bottom)); }
  body:has(#sidebar.mobile-open){ overflow:hidden; }
  .navitem, .navgroup > .navitem-toggle, .navgroup .subitens .navitem{ font-size:12px; }
  .page-sub{ font-size:11.5px; }

  /* ---- tabela sempre rola contida, mesmo onde faltou .tbl-scroll ---- */
  .tbl-wrap{ overflow-x:auto; }
  .tbl{ font-size:12.5px; }
  .tbl thead th, .tbl tbody td{ padding-left:9px; padding-right:9px; }
  .tbl input[type=checkbox]{ width:22px; height:22px; }

  /* ---- alvos de toque: tudo que era menor que um dedo ---- */
  .btn-sm, a.btn.btn-sm{ padding:9px 13px; }
  .tbl.tbl-densa .btn-sm{ padding:8px 11px; font-size:12px; }
  .wf-p-x, .wfp-acao, .wfp-recolher, .fx-x, .wfx-mini, .fx-kb-mv{ width:38px; height:38px; }
  .fx-chip-x{ width:24px; height:24px; }
  .wfp-pegar{ width:24px; }
  .lead-modal-x, .wfm-fechar{ width:40px; height:40px; }
  .zap-bt{ width:32px; height:32px; }
  .cfg-menu-olho{ padding:11px; }
  .cfgm-x{ width:38px; height:38px; }
  .ev-popover .fechar{ width:36px; height:36px; }
  .ev-popover .ev-bt{ height:44px; }
  .minical-dia{ width:32px; height:32px; }
  .wfp-check{ padding:10px 14px 10px 8px; font-size:12.5px; }
  .wfp-check i{ width:20px; height:20px; }
  .cob-link, .cob-abrir{ display:inline-block; padding:10px 8px; }
  .conteudo-card input[type=checkbox]{ width:22px; height:22px; }
  .fin-mes-seta{ padding:10px 14px; }

  /* ---- cartões de perfil (home, Equipe): touch-action:none do tilt
     engolia o gesto de rolagem — pan-y devolve a rolagem ao dedo e o
     tilt continua no mouse. body na frente para vencer o perfil-card.css,
     que carrega depois deste arquivo. ---- */
  body .pc-card-wrapper{ touch-action:pan-y; }

  /* ---- Agenda: lateral vai para baixo da grade ---- */
  .agenda-shell{ flex-direction:column; }
  .agenda-lateral{ width:100%; order:2; }
  .agenda-principal{ order:1; min-width:0; width:100%; }

  /* semana (5/7 dias) rola de lado CONTIDA; o dia (tg-d1) cabe inteiro */
  .tg.tg-d5, .tg.tg-d7{ overflow-x:auto; }
  .tg-d5 .tg-cabecalho, .tg-d5 .tg-alldia, .tg-d5 .tg-scroll{ min-width:560px; }
  .tg-d7 .tg-cabecalho, .tg-d7 .tg-alldia, .tg-d7 .tg-scroll{ min-width:700px; }
  .tg-canto, .tg-horas{ width:44px; }

  /* editor rápido e popover de evento cabem na tela e rolam por dentro */
  .ev-popover{ max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); overflow-y:auto; }
  .ev-editor{ width:calc(100vw - 24px); }
  .ev-editor .ed-linha > label{ width:60px; }
  .ev-editor .ed-diainteiro{ margin-left:60px; }
  .ev-editor .ed-meet{ margin-left:60px; }

  /* mês estilo Google: célula mais baixa, chip sem hora */
  .gcal-mes{ grid-auto-rows:80px; }
  .gcal-ev-hora{ display:none; }
  .gcal-ev{ font-size:10px; padding:1px 3px; }

  /* ---- Salas: barra da semana quebra em duas linhas ---- */
  .sl-mes{ flex-wrap:wrap; justify-content:center; }
  .sl-mes-nome{ min-width:0; flex:1 1 100%; order:-1; text-align:center; }
  .sl-th-hora, .sl-hora{ width:52px; padding:0 5px; font-size:10.5px; }
  .sl-tabela{ min-width:560px; }
  /* no toque não existe hover: célula livre mostra o + de reservar sempre */
  .sl-bt-livre::after{ content:"+"; color:var(--green-dark); font-weight:700; opacity:.45; }

  /* ---- Painel de Fluxo vira cartão empilhado (o painel de LEADS fica
     de fora: é interativo demais para empilhar e já rola contido) ---- */
  .pfl:not(.pfl-painel-leads){ min-width:0; }
  .pfl:not(.pfl-painel-leads) .pfl-cab{ display:none; }
  .pfl:not(.pfl-painel-leads) .pfl-item summary.pfl-linha{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    position:relative; padding:12px 40px 12px 8px;
  }
  .pfl:not(.pfl-painel-leads) .pfl-item summary > *{ border-left:0; padding:1px 8px; }
  .pfl:not(.pfl-painel-leads) .pfl-cel{ white-space:normal; }
  .pfl:not(.pfl-painel-leads) .pfl-item summary > .pfl-abrir{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
  }
  .pfl:not(.pfl-painel-leads) .pfl-item[open] summary .pfl-abrir{ transform:translateY(-50%) rotate(180deg); }
  .pfl-acoes{ padding:0 12px 14px; }
  /* com uma linha aberta, o escurecimento ficava POR CIMA do drawer e do
     hamburger (55/60 contra 50/60) — abaixo de 1000px eles descem */
  .pfl-escuro{ z-index:40; }
  .pfl-item[open]{ z-index:41; }

  /* ---- Financeiro: painel de conciliar/cobrar preso na parte visível
     enquanto a tabela larga rola por baixo ---- */
  .conciliar-linha td > div{ position:sticky; left:12px; max-width:calc(100vw - 84px); }
  .cob-detalhe > td .cob-item{ position:sticky; left:12px; max-width:calc(100vw - 84px); }

  /* ---- Projetos: Gantt com rótulo enxuto (só nome + concluir);
     as barras rolam contidas no .wfp-gantt, que já tem overflow ---- */
  .wfp-rotulo{ flex:0 0 220px; }
  .wfp-rotulo .c-donos, .wfp-rotulo .c-data, .wfp-rotulo .c-dur, .wfp-rotulo .c-prog{ display:none; }
  .wfp-rotulo .c-ok{ width:auto; }
  .wfp-prog{ width:96px; }
  .wfp-meta{ flex-basis:100%; order:9; }

  /* ferramentas: tabelas (GUT/Pareto) e gráficos SVG rolam contidos */
  .fx-tab{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .fx-tab td input[type=text]{ min-width:140px; }
  .fx-grafico{ overflow-x:auto; }
  .fx-grafico svg{ min-width:480px; }
  .wfm-overlay{ padding:10px; }
  .wfm-caixa{ padding:16px 14px 20px; }
  .wfm-grade{ grid-template-columns:1fr; }

  /* ---- Configurações: o painel usa a tela quase inteira ---- */
  .cfg-overlay{ padding:10px; }
  .cfg-dialog{ height:calc(100vh - 20px); height:calc(100dvh - 20px); }
  .cfg-conteudo{ padding:16px 14px; }
  .cfgm-corpo{ overflow-x:auto; }
  .cfgm-tabela{ min-width:460px; }
  .cfgm-linha-acao select, .cfgm-linha-acao input[type=file]{ width:100%; }

  /* ---- Relatórios: menu de operação empilha em cima ---- */
  .rel-shell{ grid-template-columns:1fr; }

  /* ---- Solicitações: anexos um por linha ---- */
  .sol-anexos{ grid-template-columns:1fr; }

  /* ---- Mídia: calendário do mês rola de lado contido, célula legível ---- */
  .cal-grid{ grid-template-columns:repeat(7, minmax(92px, 1fr)); overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:6px; }

  /* ---- Portal do Cliente ---- */
  .pc-etapa{ flex-wrap:wrap; }
  .pc-etapa-txt{ flex:1 1 100%; }
  .pc-prods{ grid-template-columns:1fr; }

  /* ---- etapas de fluxo (Contratos/Produtos): os botões Editar/Duplicar/
     Excluir descem para linha própria em vez de estourar o cartão.
     O gantt (.wfp-linha) fica de fora — lá a linha É larga de propósito. ---- */
  [data-reorder-item]:not(.wfp-linha){ flex-wrap:wrap; }
  div[data-reorder-item]:not(.wfp-linha) > div:last-child{ flex-wrap:wrap; flex-basis:100%; justify-content:flex-start; }
}

/* ---- apertos de telefone (não de tablet) ---- */
@media (max-width:640px){
  /* filtros: busca em linha cheia, selects dois por linha */
  .filtros{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .filtros input[type=text], .filtros input[type=search]{ grid-column:1 / -1; min-width:0; width:100%; }
  .filtros select{ min-width:0; width:100%; }
  /* no celular a linha de filtros vira grade: a caixa de várias escolhas
     ocupa a coluna inteira, e a listinha nasce colada nela */
  .filtros .fmulti{ min-width:0; }
  .filtros .fmulti > summary{ min-width:0; width:100%; }
  .fmulti-cx{ min-width:0; width:100%; }
  .filtros form{ display:contents; }
}

@media (max-width:600px){
  .form-section{ padding:18px 14px; }
}

@media (max-width:560px){
  /* Financeiro: cards de resumo voltam a 2 colunas com número menor —
     7 cards empilhados eram uma tela inteira antes do extrato */
  .fin-cards-topo{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .fin-cards-topo .stat-valor{ font-size:15px; }
  /* menu de meses vira fita horizontal de uma linha */
  .fin-meses{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .fin-mes{ flex:0 0 auto; min-width:auto; }
  /* Fundo Perdido: cliente + valor + seta (protestado fica no detalhe) */
  .fp-grade{ grid-template-columns:minmax(0,1fr) 92px 24px; gap:6px; }
  .fp-grade > :nth-child(3){ display:none; }
  .pfl-lista .pfl-item summary > *{ padding:11px 8px; }
  .pfl-cab.fp-grade > span{ white-space:normal; }
}

@media (max-width:480px){
  /* extrato: dia + descrição + valor numa linha, situação embaixo */
  .fin-extrato{ padding:14px 12px; }
  .fin-linha{ grid-template-columns:32px minmax(0,1fr) 100px; row-gap:2px; padding:6px 8px; }
  .fin-linha > *{ border-left:0; padding:2px 4px; }
  .fin-linha .fin-dia{ grid-row:1; grid-column:1; }
  .fin-linha .fin-desc{ grid-row:1; grid-column:2; }
  .fin-linha .fin-valor{ grid-row:1; grid-column:3; }
  .fin-linha .fin-sit{ grid-row:2; grid-column:2 / 4; justify-content:flex-start; overflow:visible; flex-wrap:wrap; height:auto; }
}

/* ==========================================================================
   Aviso de reunião (2026-08-18, pedido do Fred pela fila)
   ==========================================================================
   O cartão verde que desce do alto da tela 30 e 5 minutos antes de uma
   reunião. Aparece em qualquer página do Portal — o bloco vazio nasce no
   includes/layout_footer.php e o portal.js enche.

   Fica no TOPO, centralizado, e não num canto: o pedido era "bem destaque",
   e canto de tela é onde a pessoa não olha. Só ocupa a altura do próprio
   cartão, então não cobre a tela nem impede de continuar trabalhando —
   .alr-pilha não recebe clique (pointer-events:none), só os cartões.

   z-index 9000 fica acima de tudo que existe hoje (o maior era 1200, fora o
   9999 do menu do celular, que é uma tela inteira e deve mesmo ficar por
   cima). */
.alr-pilha{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:9000; width:min(430px, calc(100vw - 24px));
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.alr-card{
  pointer-events:auto;
  background:linear-gradient(150deg, #8CCB36, var(--green-dark));
  color:#fff; border-radius:16px; padding:14px 16px 15px;
  box-shadow:0 18px 44px rgba(19,24,41,.30), 0 2px 0 rgba(255,255,255,.22) inset;
  display:flex; gap:12px; align-items:flex-start;
  animation:alrEntra .28s ease-out;
}
@keyframes alrEntra{
  from{ opacity:0; transform:translateY(-16px) scale(.97); }
  to{ opacity:1; transform:none; }
}
.alr-card.saindo{ animation:alrSai .25s ease-in forwards; }
@keyframes alrSai{ to{ opacity:0; transform:translateY(-12px); } }

.alr-sino{ flex-shrink:0; margin-top:1px; opacity:.95; }
/* o sino balança nos primeiros segundos para puxar o olho */
.alr-card .alr-sino{ animation:alrSino 1.1s ease-in-out 3; transform-origin:50% 12%; }
@keyframes alrSino{
  0%,60%,100%{ transform:rotate(0); }
  10%{ transform:rotate(13deg); } 20%{ transform:rotate(-11deg); }
  30%{ transform:rotate(8deg); }  40%{ transform:rotate(-6deg); }
  50%{ transform:rotate(3deg); }
}

.alr-corpo{ flex:1; min-width:0; }
.alr-titulo{ font-size:13.5px; font-weight:750; letter-spacing:.2px; line-height:1.25; }
.alr-nome{
  font-size:15.5px; font-weight:700; margin-top:3px; line-height:1.3;
  overflow-wrap:anywhere;
}
.alr-onde{ font-size:12px; margin-top:3px; color:rgba(255,255,255,.86); }
.alr-acoes{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.alr-bt{
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14);
  color:#fff; font-size:12px; font-weight:650; padding:6px 12px;
  border-radius:99px; cursor:pointer; text-decoration:none; display:inline-block;
  font-family:inherit;
}
.alr-bt:hover{ background:rgba(255,255,255,.26); color:#fff; }
.alr-bt.cheio{ background:#fff; color:var(--green-dark); border-color:#fff; }
.alr-bt.cheio:hover{ background:rgba(255,255,255,.88); color:var(--green-dark); }

.alr-fechar{
  flex-shrink:0; background:none; border:0; color:rgba(255,255,255,.85);
  font-size:16px; line-height:1; cursor:pointer; padding:2px 2px 4px 6px;
  font-family:inherit;
}
.alr-fechar:hover{ color:#fff; }

@media (max-width:640px){
  .alr-pilha{ top:10px; }
  .alr-nome{ font-size:14.5px; }
}
/* quem prefere a tela parada continua vendo o aviso, só que sem o balanço */
@media (prefers-reduced-motion:reduce){
  .alr-card, .alr-card .alr-sino, .alr-card.saindo{ animation:none; }
}

/* --- a chavinha que liga/desliga, na lateral da Agenda --- */
.alr-pref{ padding:10px 12px; }
.alr-pref-linha{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.alr-pref-linha input{ margin-top:1px; flex-shrink:0; }
.alr-pref-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.alr-pref-txt b{ font-size:12.5px; font-weight:650; }
.alr-pref-txt i{ font-style:normal; font-size:11px; color:var(--text-muted); line-height:1.35; }
.alr-pref-salvo{ display:block; font-size:11px; font-weight:650; color:var(--green-dark); margin:6px 0 0 25px; }
html[data-tema="escuro"] .alr-pref-salvo{ color:#9BD456; }

/* ==================================================================
   ADS (2026-08-18) — produto › campanha › funil › vídeo.
   Classes próprias do módulo: o Portal não tinha grade de cartão nem
   selo colorido, e forçar as classes existentes deixaria os dois presos.
   ================================================================== */
.ads-trilha{ font-size:12px; color:var(--text-secondary); margin-top:3px; }
.ads-trilha a{ color:var(--text-secondary); text-decoration:none; }
.ads-trilha a:hover{ color:var(--green-dark); text-decoration:underline; }

.ads-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.ads-card{
  background:var(--surface-1); border:1px solid var(--border); border-left:3px solid var(--cor,var(--green));
  border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:9px;
}
.ads-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ads-card-top b{ font-size:14.5px; font-weight:650; }
.ads-cont{ font-size:11px; color:var(--text-muted); white-space:nowrap; }
.ads-desc{ font-size:12.5px; color:var(--text-secondary); margin:0; }

.ads-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--surface-0); color:var(--text-secondary); white-space:nowrap; }
.ads-chip.ok{ background:var(--green-soft); color:var(--green-dark); }
.ads-chip.warn{ background:#FCEFD9; color:#8A5A12; }
.ads-chip.off{ background:var(--surface-0); color:var(--text-muted); }

.ads-metricas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:8px; }
.ads-m{ background:var(--surface-0); border-radius:9px; padding:7px 9px; }
.ads-m span{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-muted); }
.ads-m b{ display:block; font-size:13.5px; font-weight:650; font-variant-numeric:tabular-nums;
  white-space:nowrap; margin-top:2px; }

.ads-verba{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--text-secondary); }
.ads-verba-barra{ flex:1; height:6px; border-radius:999px; background:var(--surface-0); overflow:hidden; }
.ads-verba-barra i{ display:block; height:100%; background:var(--green); }

.ads-acoes{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px; }
.ads-total{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  padding:13px 16px; margin-bottom:16px; }
.ads-total-rot{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:8px; }
.ads-linha{ display:flex; gap:10px; flex-wrap:wrap; }
.ads-linha .field{ flex:1; min-width:130px; }

/* funil — o fluxograma de verdade (2026-08-18).
   Duas colunas: a régua das etapas à esquerda («Funil») e os vídeos à
   direita («Vídeo»), uma faixa por etapa. As setas verdes NÃO são CSS:
   são desenhadas em SVG por cima, medindo as caixas já posicionadas na
   tela. É o único jeito de a seta continuar certa quando um vídeo muda de
   lugar por causa da quebra de linha ou do tamanho do monitor. */
/* ⚠️ `.page-head` sozinho é display:block — título e botões empilham. Esta
   classe extra é que põe os dois lados na mesma linha (2026-08-26). */
.page-head.ads-topo{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap;
}
.ads-fx{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px 14px; }
.ads-fx-cabs{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; margin-bottom:8px; }
.ads-fx-cabs span{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); }
.ads-fx-cabs span:last-child{ text-align:center; }

.ads-fx-corpo{ position:relative; display:grid; grid-template-columns:150px minmax(0,1fr);
  gap:34px 14px; }
.ads-fx-svg{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.ads-fx-svg svg{ display:block; }
.ads-fx-svg path{ fill:none; stroke:var(--green); stroke-width:1.6; }
.ads-fx-svg polygon{ fill:var(--green); }

/* =====================================================================
   CARTÃO DE ETAPA DO FUNIL — refeito do zero (03/09/2026, pedido do
   Matteo: «tá muito claustrofóbico, precisa ficar mais desenvolvido»).

   O que pesava no cartão antigo: título inteiro em CAIXA ALTA com
   letter-spacing (gritado, e quebrava em 3 linhas feio), filete verde
   grosso repetido em todo cartão sem dizer nada, botão «VÍDEO +» sólido
   em caixa alta do tamanho da largura inteira, e os ícones de mover/
   editar/excluir sempre visíveis, disputando espaço com o resto.

   A composição nova:
   - número da etapa (1, 2, 3…) — é sequência de verdade, o funil É
     ordenado, então numerar aqui conta algo real, não decora;
   - título em CAIXA NORMAL, sem gritar;
   - contador de vídeos virou uma etiqueta com ícone, não mais itálico
     solto;
   - "+ Vídeo" é contorno (quieto em repouso, preenche no hover) — a
     versão sólida gritava em CADA cartão da lista inteira;
   - mover/editar/excluir só aparecem no hover/foco, como o resto do
     fluxograma já faz (.fx-fic) — o cartão parado fica limpo.
===================================================================== */
.ads-fx-etapa{
  position:relative; z-index:1; background:var(--surface-0);
  border:1px solid var(--border); border-radius:14px;
  padding:12px 12px 11px;
  display:flex; flex-direction:column; gap:10px; align-self:center;
  box-shadow:0 1px 2px rgba(3,16,38,.05), 0 4px 12px -8px rgba(3,16,38,.18);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.ads-fx-etapa:hover{
  border-color:var(--border-strong);
  box-shadow:0 2px 4px rgba(3,16,38,.08), 0 10px 20px -10px rgba(3,16,38,.28);
}
.ads-fx-cab{ display:flex; align-items:flex-start; gap:8px; position:relative; }
.ads-fx-num{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green-soft); color:var(--green-dark);
  font-size:10.5px; font-weight:800; font-variant-numeric:tabular-nums;
}
.ads-fx-nomes{ flex:1 1 auto; min-width:0; }
.ads-fx-etapa b{
  display:block; font-size:12.5px; font-weight:650; letter-spacing:0;
  text-transform:none; line-height:1.35; color:var(--text-primary);
  overflow-wrap:break-word;
}
.ads-fx-etapa i{
  display:block; font-style:normal; font-size:10.5px; color:var(--text-muted);
  line-height:1.3; margin-top:2px;
}
/* mover/editar/excluir: só no hover ou com foco dentro (teclado) — em
   repouso o cartão não expõe quatro botões pequenos o tempo todo.
   ⚠️ Fica FORA do fluxo (position:absolute), não inline na linha flex:
   os 4 botões inline (mesmo com display:none↔flex) espremiam a coluna do
   título pra ~20px quando apareciam, e o texto quebrava uma letra por
   linha. Como flutuante ele sobrepõe o canto do título (com fundo opaco
   igual ao cartão) em vez de empurrar a largura. Mesma ideia do `.fx-seta`
   do fluxograma grande, que também fica FORA da caixa. */
.ads-fx-ics{
  display:none; gap:3px; position:absolute; top:-4px; right:-4px;
  background:var(--surface-0); padding:3px; border-radius:9px;
  box-shadow:0 2px 8px rgba(3,16,38,.18), 0 0 0 1px var(--border);
}
.ads-fx-etapa:hover .ads-fx-ics, .ads-fx-etapa:focus-within .ads-fx-ics{ display:flex; }
.ads-fx-ics form{ display:inline-flex; }
.ads-fx-ic{
  width:20px; height:20px; padding:0; border:1px solid var(--border); border-radius:6px;
  background:var(--surface-1); color:var(--text-secondary); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-family:inherit;
}
.ads-fx-ic svg{ width:11px; height:11px; display:block; }
.ads-fx-ic:hover:not(:disabled){ border-color:var(--green); color:var(--green-dark); background:var(--green-soft); }
.ads-fx-ic:disabled{ opacity:.3; cursor:default; }
.ads-fx-ic.mal:hover{ border-color:#B4322F; color:#B4322F; background:#FDF3F2; }

.ads-fx-rodape{ display:flex; flex-direction:column; gap:8px; padding-top:9px; border-top:1px solid var(--border); }
.ads-fx-cont{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600; color:var(--text-muted);
}
.ads-fx-cont svg{ width:12px; height:12px; flex-shrink:0; color:var(--text-muted); }
.ads-fx-mais{
  display:flex; align-items:center; justify-content:center; gap:5px; width:100%;
  border:1.5px solid var(--green); border-radius:9px; cursor:pointer;
  background:transparent; color:var(--green-dark);
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
  padding:6px 8px; font-family:inherit;
}
.ads-fx-mais:hover{ background:var(--green); border-color:var(--green); color:#fff; }

.ads-fx-faixa{ position:relative; z-index:1; background:var(--surface-0); border-radius:12px;
  padding:12px 10px; display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center;
  justify-content:center; min-height:56px; }
.ads-fx-video{ position:relative; background:var(--surface-1); border:1.5px solid var(--green);
  border-radius:9px; padding:7px 26px 22px 11px; min-width:104px; max-width:180px; }
.ads-fx-video.solto{ border-color:#E0B770; }
/* «↳» = puxar o próximo vídeo já ligado a este (2026-08-26). Fica no pé da
   caixa, do lado de onde a seta verde sai — é a leitura do fluxograma. */
.ads-fx-seguir{ position:absolute; left:8px; bottom:4px; height:17px; padding:0 7px; border:0;
  border-radius:5px; background:var(--green-soft); color:var(--green-dark); font-size:11px;
  font-weight:700; line-height:17px; cursor:pointer; font-family:inherit; }
.ads-fx-seguir:hover{ background:var(--green); color:#fff; }
.ads-fx-video a{ display:block; font-size:11.5px; font-weight:650; line-height:1.3;
  color:var(--text-primary); text-decoration:none; overflow-wrap:anywhere; }
.ads-fx-video a:hover{ color:var(--green-dark); text-decoration:underline; }
.ads-fx-ed{ position:absolute; top:4px; right:4px; width:19px; height:19px; padding:0; border:0;
  border-radius:5px; background:transparent; color:var(--text-muted); font-size:11px; line-height:1;
  cursor:pointer; font-family:inherit; }
.ads-fx-ed:hover{ background:var(--green-soft); color:var(--green-dark); }
.ads-fx-sem{ font-size:11.5px; color:var(--text-muted); }
.ads-fx-legenda{ font-size:11px; color:var(--text-muted); margin-top:12px; }
.ads-fx-vem{ display:none; font-size:10.5px; color:var(--text-secondary); line-height:1.35; margin-top:3px; }

/* No celular tudo vira uma coluna só, e aí toda seta viraria o mesmo risco
   reto por cima das caixas — ilegível. Então some a seta e aparece escrito
   de onde o vídeo vem, que é a informação que a seta dava. */
/* ⚠️ 4 regras que mexiam em `.ads-fx-etapa`/`.ads-fx-mais` SAÍRAM daqui
   em 03/09/2026: essas duas classes continuam ativas (o cartão de etapa
   de hoje), mas as regras eram do desenho ANTIGO — «flex-flow:row wrap»
   brigava com a coluna do cartão novo e quebrava o celular. O ajuste de
   celular do cartão de hoje mora mais abaixo, junto de `.adsfx-palco`. */
@media(max-width:760px){
  .ads-fx-cabs{ display:none; }
  .ads-fx-corpo{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .ads-fx-svg{ display:none; }
  .ads-fx-faixa{ justify-content:flex-start; }
  .ads-fx-video{ max-width:none; flex:1 1 100%; }
  .ads-fx-vem{ display:block; }
  .ads-fx-legenda{ display:none; }
}

/* ---- o funil virou o FLUXOGRAMA dos Projetos (2026-08-28, pedido do Fred) ----
   O desenho inteiro (quadradinho, setas de hover, traço em cotovelo, cor,
   barra de ícones) reaproveita as classes `.fx-*` dos Projetos SEM CÓPIA —
   é por isso que o cartão do funil leva `class="wfp" data-ferramenta="fluxograma"`
   no funil.php: sem esse ancestral, o preenchimento colorido do quadradinho,
   a cor do traço e a liberação da largura total não valem (portal.css 4762+).
   O que sobra para cá é só o que é NOVO: a régua de etapas ao lado do palco.

   ⚠️ A régua fica FORA do `#fxRaiz` porque o motor esvazia esse elemento a
      cada redesenho, e os cartões de etapa carregam formulário com CSRF.
      Quem os põe na altura certa é o `alinharTrilho()` do ads_fluxo.js, que
      MEDE a distância na hora — nada aqui pode depender de uma conta fixa de
      padding, senão o zoom desencontra a etapa do vídeo dela.

   As classes do funil ANTIGO (`.ads-fx-cabs`, `.ads-fx-corpo`, `.ads-fx-svg`,
   `.ads-fx-faixa`, `.ads-fx-video`, `.ads-fx-seguir`, `.ads-fx-ed`,
   `.ads-fx-vem`, `.ads-fx-sem`, `.ads-origens`, `.ads-origem`) ficaram ÓRFÃS
   nessa troca — nenhuma tela as emite mais. Não foram apagadas junto para a
   mudança ficar reversível numa linha; podem sair numa limpeza depois. */
/* linha do quadro «Documentos» do portal do cliente (2026-08-28): os dois
   seletores lado a lado, ocupando as duas colunas da tabela. Cada linha é um
   formulário que se envia sozinho ao trocar um dos campos. */
.pc-doc-linha{ display:flex; gap:10px; align-items:center; padding:10px 12px; }
.pc-doc-linha select{ margin:0; }
.pc-doc-linha select[name="escopo"]{ flex:1 1 auto; min-width:0; }
.pc-doc-linha select[name="status_doc"]{ flex:0 0 170px; }
@media(max-width:760px){
  .pc-doc-linha{ flex-direction:column; align-items:stretch; }
  .pc-doc-linha select[name="status_doc"]{ flex:1 1 auto; }
}

.adsfx-cartao{ margin-bottom:16px; }
.adsfx-cabeca{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; border-bottom:1px solid var(--border);
}
.adsfx-titulo{
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--text-secondary); margin-right:auto;
}
/* `position:relative` não é enfeite: é ele que faz a régua e o mapa terem o
   MESMO offsetParent, que é como o alinharTrilho() mede sem se enganar com
   o zoom (ver o comentário no ads_fluxo.js). */
.adsfx-palco{ position:relative; display:flex; align-items:flex-start; gap:14px; }
/* a régua: coluna fixa à esquerda, com os cartões posicionados pelo JS.
   ⚠️ 172px (era 150px, 03/09/2026): o título da etapa é uma frase — "tal
   coisa (para) tal outra coisa" — e a 150px quebrava em 3 linhas
   apertadas. O JS (alinharTrilho, em ads_fluxo.js) mede tudo na hora via
   offsetTop; não depende deste número, só o cartão. */
.adsfx-trilho{ position:relative; flex:0 0 172px; width:172px; }
.adsfx-etapa{ position:absolute; left:0; width:172px; box-sizing:border-box; }
.adsfx-raiz{ flex:1 1 auto; min-width:0; }
/* quem só tem permissão de ver não recebe a barra de ícones — mas continua
   podendo abrir o vídeo */
.fx-fnode-ver{
  display:block; margin-top:5px; font-size:11.5px; font-weight:650;
  text-align:center; color:var(--green-dark);
}
@media(max-width:760px){
  /* empilha: a régua vira uma lista comum em cima do desenho. O JS limpa os
     `top` inline quando chega aqui — ver alinharTrilho(). */
  .adsfx-palco{ display:block; }
  .adsfx-trilho{ width:auto; height:auto !important; margin-bottom:12px; }
  .adsfx-etapa{ position:static; width:auto; margin-bottom:8px; }
}

.ads-origens{ display:flex; flex-direction:column; gap:5px; max-height:190px; overflow-y:auto; }
.ads-origem{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; }
.ads-vem{ font-size:11px; color:var(--text-secondary); margin-top:4px; }

/* ==================================================================
   PÁGINA DO VÍDEO (refeita em 03/09/2026)

   Era uma grade de dois blocos soltos, sem moldura nenhuma, com
   rotulinhos maiúsculos no meio do nada — «está bem desorganizada, feia
   e mal montada» (Matteo). Agora é uma coluna de CARTÕES, cada um com um
   assunto só e um título de verdade: o conteúdo (o vídeo), a ficha (o
   que se edita), onde ele está no funil, os números e os lançamentos.

   A ficha veio do popup que morava no desenho do funil: o quadradinho
   tinha um botão de «ficha» e outro de «abrir» fazendo quase a mesma
   coisa. Agora o desenho só traz para cá, e aqui está tudo.
   ================================================================== */
.ads-video-pagina{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
@media(min-width:1000px){ .ads-video-pagina{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); } }
.adsv-coluna{ display:flex; flex-direction:column; gap:16px; min-width:0; }
/* a tabela de lançamentos ocupa a largura toda, embaixo das duas colunas */
.adsv-largo{ margin-top:16px; }
.adsv-bloco{
  background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 16px 17px;
  box-shadow:0 1px 2px rgba(3,16,38,.04), 0 6px 16px -12px rgba(3,16,38,.2);
}
.adsv-bloco-cab{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.adsv-bloco-cab h2{
  font-size:13px; font-weight:700; letter-spacing:.01em; margin:0;
  color:var(--text-primary); margin-right:auto;
}
.ads-player-caixa{ position:relative; padding-top:56.25%; border-radius:10px; overflow:hidden;
  background:#000; }
.ads-player-caixa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.adsv-sem-video{
  display:flex; flex-direction:column; gap:5px; text-align:center;
  border:1px dashed var(--border-strong); border-radius:10px;
  padding:26px 18px; background:var(--surface-1);
}
.adsv-sem-video b{ font-size:12.5px; color:var(--text-primary); }
.adsv-sem-video span{ font-size:11.5px; color:var(--text-muted); line-height:1.5; }
.adsv-acoes{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.adsv-ficha .field{ margin-bottom:12px; }
.adsv-ficha-acoes{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.adsv-ficha-acoes .espaco{ flex:1 1 auto; }
.adsv-lista{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; }
.adsv-lista dt{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted); }
.adsv-lista dd{ margin:0; font-size:12.5px; line-height:1.5; color:var(--text-primary); }

/* onde o vídeo está no funil: de quem ele vem e para quem leva */
.adsv-funil{ display:flex; flex-direction:column; gap:9px; }
.adsv-funil-linha{ display:flex; align-items:baseline; gap:10px; }
.adsv-rot{
  flex:0 0 68px; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-muted);
}
.adsv-chips{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.adsv-chip{
  display:inline-block; max-width:100%; padding:4px 9px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-1);
  font-size:11.5px; color:var(--text-secondary); text-decoration:none;
  overflow-wrap:anywhere;
}
a.adsv-chip:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-soft); }
.adsv-chip-aqui{ border-color:var(--green); background:var(--green-soft); color:var(--green-dark); font-weight:650; }
.adsv-vazio{ font-size:11.5px; color:var(--text-muted); font-style:italic; }

/* ==================================================================
   Contrato a partir de MODELO (2026-08-19) — tela do modelo, tela de
   montar o contrato pendente e a folha que vai para impressão.
   ================================================================== */
.cm-editor{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:14px; align-items:start; }
@media(max-width:900px){ .cm-editor{ grid-template-columns:minmax(0,1fr); } }
.cm-marcadores{ background:var(--surface-0); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; max-height:520px; overflow-y:auto; }
.cm-marc-titulo{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:7px; }
.cm-marc{ display:block; width:100%; text-align:left; border:1px solid var(--border); border-radius:8px;
  background:var(--surface-2); padding:6px 8px; margin-bottom:5px; cursor:pointer; font-family:inherit; }
.cm-marc:hover{ border-color:var(--green); }
.cm-marc b{ display:block; font-family:ui-monospace,Consolas,monospace; font-size:11px; color:var(--text-primary); }
.cm-marc i{ display:block; font-style:normal; font-size:10.5px; color:var(--text-muted); margin-top:1px; }

.cm-campos{ display:flex; flex-direction:column; gap:10px; }
.cm-campo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
  background:var(--surface-0); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.cm-campo .field{ margin:0; }
.cm-campo-pe{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cm-chave-linha{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; cursor:pointer; }

/* as duas opções de "Novo contrato" */
.ct-escolha{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:620px){ .ct-escolha{ grid-template-columns:1fr; } }
.ct-escolha a{ display:block; text-decoration:none; background:var(--surface-0);
  border:1.5px solid var(--border); border-radius:var(--radius); padding:16px; }
.ct-escolha a:hover{ border-color:var(--green); background:var(--green-soft); }
.ct-escolha b{ display:block; font-size:14px; font-weight:650; color:var(--text-primary); margin-bottom:4px; }
.ct-escolha span{ display:block; font-size:12px; line-height:1.5; color:var(--text-secondary); }

/* abas Assinados / Pendentes */
.ct-abas{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.ct-abas a{ text-decoration:none; font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-1); color:var(--text-secondary); }
.ct-abas a:hover{ border-color:var(--green); }
.ct-abas a.on{ background:var(--green); border-color:var(--green); color:#fff; }
.ct-abas a .cont{ font-size:11px; opacity:.85; margin-left:5px; }

/* a folha do contrato — na tela parece papel, e na impressão É o papel */
.ctdoc-folha{ background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:26mm 22mm; max-width:820px; margin:0 auto; color:#16232F;
  font-size:11pt; line-height:1.75; }
/* Cabecalho igual ao do orcamento: logo centralizada no topo, e so.
   Sem risco embaixo — quem separa o cabecalho do texto e o espaco. */
.ctdoc-cab{ text-align:center; margin-bottom:16px; }
/* a logo de verdade, em imagem — a marca tem letra propria e nao da
   para imitar com fonte. A altura manda; a largura acompanha. */
.ctdoc-marca{ display:block; height:12mm; width:auto; margin:0 auto; }
.ctdoc-emp{ font-size:8pt; line-height:1.5; color:#8A939C; margin-top:7px;
  letter-spacing:.04em; }
.ctdoc-titulo{ font-size:14pt; font-weight:700; letter-spacing:.02em; text-align:center;
  color:#16232F; margin:0 0 22px; text-transform:uppercase; }
.ctdoc-corpo{ text-align:justify; }
.ctdoc-assinaturas{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:52px; text-align:center; }
.ctdoc-linha{ border-top:1px solid #16232F; margin-bottom:7px; }
.ctdoc-assinaturas b{ display:block; font-size:10pt; font-weight:650; }
.ctdoc-assinaturas span{ display:block; font-size:8.5pt; color:#59607A; margin-top:2px; }

@media print{
  @page{ size:A4; margin:16mm 14mm; }
  .ctdoc-folha{ border:0; border-radius:0; padding:0; max-width:none; margin:0; font-size:10.5pt; }
  .ctdoc-assinaturas{ break-inside:avoid; page-break-inside:avoid; }
  .alert{ display:none !important; }
}

/* ------------------------------------------------------------------
   Estética do orçamento aplicada ao contrato (2026-08-20).
   Título de seção com risco verde, subtítulo verde, caixa cinza dos
   dados e caixa escura do valor — as marcações vêm de cm_corpo_html().
   ------------------------------------------------------------------ */
/* ⚠️ A folha do contrato é a exceção à caixa alta do Portal.
   `body{ text-transform:uppercase }` (lá em cima) deixa o site inteiro em
   maiúsculas, e num CONTRATO isso não pode: é documento jurídico, e o
   próprio orçamento que serviu de modelo é em caixa de sentença. Só os
   títulos de seção sobem, e por regra própria. */
.ctdoc-folha{ text-transform:none; }
.ctdoc-titulo, .ctdoc-corpo h2.ctdoc-sec, .ctdoc-corpo h3.ctdoc-sub,
.ctdoc-dados span, .ctdoc-destaque span{ text-transform:uppercase; }

.ctdoc-corpo h2.ctdoc-sec{
  font-size:11pt; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#12233A; margin:22px 0 0; padding-bottom:5px; border-bottom:2px solid #8CC63F;
}
.ctdoc-corpo h2.ctdoc-sec + p{ margin-top:10px; }
.ctdoc-corpo h3.ctdoc-sub{
  font-size:9.5pt; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#7CA828; margin:16px 0 2px;
}
.ctdoc-corpo p{ margin:0 0 9px; }
.ctdoc-corpo ul.ctdoc-lista{ margin:0 0 10px; padding-left:18px; }
.ctdoc-corpo ul.ctdoc-lista li{ margin-bottom:4px; }

.ctdoc-dados{
  display:grid; grid-template-columns:1fr 1fr; gap:9px 22px;
  background:#EFEFEC; padding:15px 18px; margin:14px 0 6px;
}
.ctdoc-dados span{ font-size:9pt; color:#5A6672; }
.ctdoc-dados b{ font-size:9pt; color:#12233A; font-weight:700; }
.ctdoc-dados div{ display:flex; gap:5px; flex-wrap:wrap; align-items:baseline; }

.ctdoc-destaque{
  display:grid; grid-template-columns:1fr auto; gap:10px 26px; align-items:center;
  background:#12233A; color:#fff; padding:17px 20px; margin:14px 0;
}
.ctdoc-destaque div{ display:flex; flex-direction:column; }
.ctdoc-destaque div:nth-child(even){ text-align:right; }
.ctdoc-destaque span{
  font-size:8pt; letter-spacing:.11em; text-transform:uppercase; color:#B9C4CF; margin-bottom:3px;
}
.ctdoc-destaque b{ font-size:15pt; font-weight:700; color:#fff; line-height:1.15; }
.ctdoc-destaque div:nth-child(even) b{ font-size:11pt; }

@media print{
  .ctdoc-corpo h2.ctdoc-sec, .ctdoc-corpo h3.ctdoc-sub{ break-after:avoid; page-break-after:avoid; }
  .ctdoc-dados, .ctdoc-destaque{ break-inside:avoid; page-break-inside:avoid; }
}

/* bloco do contratante por CNPJ, dentro do formulário de contrato novo */
.ct-cnpj{ background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px 4px; margin:2px 0 14px; }

/* ==================================================================
   WhatsApp — caixa de atendimento (v4, 21/08/2026).

   Refeito depois do Matteo dizer que a v3 estava "simples demais".
   O que mudou de verdade, e por quê:

     · DENSIDADE — linha de conversa de 92px caiu para 64px, cabeçalho
       de 62 para 52. Cabe mais gente na tela sem apertar a leitura.
     · AGRUPAMENTO — mensagens seguidas da mesma pessoa não repetem
       nome nem avatar. É o que separa um chat profissional de uma
       lista de caixinhas.
     · FOTO — avatar aceita imagem de verdade; sem imagem, degradê com
       as iniciais, nunca um bloco de cor chapada.
     · MOVIMENTO — entrada dos balões, hover das linhas, foco do campo,
       sombra que aparece ao rolar. Curto (120–220ms) e com curva de
       saída; animação longa deixa a tela lenta, não bonita.

   ⚠️ portal.css deixa o site inteiro em MAIÚSCULAS. Aqui isso é
   desligado, senão a conversa do cliente vira grito.
   ================================================================== */

.wa-quadro{
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.10);
}
html[data-tema="escuro"] .wa-quadro{ box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5); }
.wa-quadro, .wa-quadro input, .wa-quadro textarea, .wa-quadro button,
.wa-quadro input::placeholder{ text-transform:none; }
.wa-dia span, .wa-tag, .wa-balao-pe i, .wa-status,
.wa-lista-tit, .wa-cab-acao{ text-transform:uppercase; }

.wa-status{ display:inline-flex; align-items:center; gap:7px; font-size:11px;
  font-weight:600; color:var(--text-secondary); letter-spacing:.04em; }
.wa-ponto{ width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(118,184,42,.55); animation:waPulso 2.6s infinite; }
@keyframes waPulso{
  0%{ box-shadow:0 0 0 0 rgba(118,184,42,.5); }
  70%{ box-shadow:0 0 0 6px rgba(118,184,42,0); }
  100%{ box-shadow:0 0 0 0 rgba(118,184,42,0); }
}

/* ---------------- sem número conectado ---------------- */
.wa-vazio{ text-align:center; padding:56px 30px; max-width:560px; margin:0 auto; }
.wa-vazio-ico{
  width:76px; height:76px; margin:0 auto 18px; border-radius:22px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(145deg, var(--green) 0%, var(--green-dark) 100%);
  box-shadow:0 10px 26px -6px rgba(118,184,42,.45);
  animation:waSobe .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes waSobe{ from{ opacity:0; transform:translateY(10px) scale(.96); } to{ opacity:1; transform:none; } }
.wa-vazio h2{ font-size:18px; font-weight:700; color:var(--text-primary);
  margin-bottom:8px; letter-spacing:-.015em; }
.wa-vazio p{ font-size:13px; line-height:1.65; color:var(--text-secondary); margin-bottom:14px; }
.wa-vazio-nota{
  background:var(--surface-0); border-left:3px solid var(--green); border-radius:10px;
  padding:12px 14px; font-size:12px !important; color:var(--text-muted) !important;
  text-align:left; line-height:1.6 !important;
}

/* ---------------- o aplicativo ---------------- */
.wa-app{ display:grid; grid-template-columns:296px minmax(0,1fr); height:min(78vh, 720px); }
@media(max-width:860px){ .wa-app{ grid-template-columns:minmax(0,1fr); height:auto; } }

/* ================= AVATAR ================= */
.wa-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  font-weight:750; font-size:14px; letter-spacing:-.02em;
  /* Fundo claro, contorno e letra na cor da pessoa (pedido do Matteo,
   21/08). Some o peso do círculo cheio e a lista respira; a cor
   continua identificando quem é quem. */
  background:var(--surface-1);
  color:var(--wa-cor,#76B82A);
  border:2px solid var(--wa-cor,#76B82A);
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  overflow:hidden; user-select:none;
}
.wa-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.wa-avatar.grande{ width:42px; height:42px; font-size:15px; }
/* bolinha do canal */
.wa-avatar.canal::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:12px; height:12px;
  border-radius:50%; background:var(--green); border:2.5px solid var(--surface-1);
}

/* ================= coluna da esquerda ================= */
.wa-lista{ border-right:1px solid var(--border); display:flex; flex-direction:column;
  min-height:0; background:var(--surface-1); }
.wa-lista-topo{ padding:12px 12px 0; }
.wa-busca{ position:relative; }
.wa-busca svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); pointer-events:none; transition:color .15s ease; }
.wa-busca input{
  width:100%; padding-left:33px; border-radius:9px; height:34px; font-size:12.5px;
  background:var(--surface-0); border:1px solid transparent;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wa-busca input:focus{
  background:var(--surface-1); border-color:var(--green);
  box-shadow:0 0 0 3px rgba(118,184,42,.14); outline:none;
}
.wa-busca input:focus + svg, .wa-busca:focus-within svg{ color:var(--green); }

.wa-lista-abas{ display:flex; align-items:center; gap:10px; padding:10px 14px 0; }
.wa-lista-tit{ font-size:11px; font-weight:700; letter-spacing:.07em;
  color:var(--text-primary); position:relative; padding-bottom:8px; }
.wa-lista-tit::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--green);
  animation:waRegua .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes waRegua{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.wa-lista-arquivo{ margin-left:auto; color:var(--text-muted); display:flex;
  padding-bottom:8px; cursor:default; }

/* Selecionar várias conversas (2026-08-24, pedido do Fred): o botão fica
   entre o título e o ícone de arquivar, cada linha ganha uma caixinha e a
   barra de ações entra logo abaixo do contador.
   ⚠️ O botão é quem empurra o resto para a direita — por isso o
   `margin-left:auto` sai do ícone de arquivar quando os dois convivem,
   senão os dois dividiriam o espaço e ficariam separados no meio. */
.wa-lista-selbt{ margin-left:auto; color:var(--text-muted); display:flex;
  padding:0 0 8px; background:none; border:0; cursor:pointer; }
.wa-lista-selbt:hover{ color:var(--green-dark); }
.wa-lista-selbt.ativo{ color:var(--green); }
.wa-lista-abas .wa-lista-selbt + .wa-lista-arquivo{ margin-left:12px; }

.wa-sel-todas{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  color:var(--text-secondary); font-weight:600; }
.wa-sel-todas input{ accent-color:var(--green); margin:0; }

.wa-sel-barra{ display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--surface-0); border-bottom:1px solid var(--border); }
.wa-sel-barra button{ font:inherit; font-size:10.5px; font-weight:700; white-space:nowrap;
  padding:6px 9px; border-radius:8px; border:1px solid var(--border-strong);
  background:var(--surface-1); color:var(--text-primary); cursor:pointer;
  transition:border-color .15s ease, color .15s ease; }
.wa-sel-barra button:hover:not(:disabled){ border-color:var(--green); color:var(--green-dark); }
.wa-sel-barra button:disabled{ opacity:.45; cursor:default; }
.wa-sel-barra .wa-sel-sair{ margin-left:auto; border-color:transparent;
  background:none; color:var(--text-muted); }

.wa-sel-caixa{ flex:0 0 18px; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border-strong); box-sizing:border-box; }
.wa-sel-caixa.marcada{ border-color:var(--green); background:var(--green); }
.wa-conversa.selecionada{ background:rgba(118,184,42,.10); }

.wa-lista-conta{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 14px; font-size:11px; color:var(--text-muted);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--surface-0); font-variant-numeric:tabular-nums;
}
.wa-lista-filtro{ display:inline-flex; align-items:center; gap:5px; color:var(--text-secondary);
  font-weight:600; text-decoration:none; transition:color .15s ease; }
.wa-lista-filtro:hover{ color:var(--green-dark); }

.wa-lista-itens{ overflow-y:auto; flex:1; min-height:0; }
.wa-lista-itens::-webkit-scrollbar{ width:6px; }
.wa-lista-itens::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:3px; }
.wa-lista-itens::-webkit-scrollbar-track{ background:transparent; }
.wa-lista-vazia{ padding:36px 22px; font-size:12.5px; line-height:1.7;
  color:var(--text-muted); text-align:center; }

.wa-conversa{
  display:flex; gap:11px; align-items:center; padding:11px 14px; text-decoration:none;
  position:relative; transition:background .14s ease;
  box-shadow:inset 0 -1px 0 var(--border);
}
.wa-conversa::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--green); transform:scaleY(0); transform-origin:center;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
.wa-conversa:hover{ background:var(--surface-0); }
.wa-conversa.ativa{ background:var(--green-soft); }
.wa-conversa.ativa::before{ transform:scaleY(1); }
.wa-conversa .wa-avatar{ transition:transform .18s cubic-bezier(.2,.8,.2,1); }
.wa-conversa:hover .wa-avatar{ transform:scale(1.06); }

.wa-conversa-txt{ min-width:0; flex:1; }
.wa-conversa-topo{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.wa-conversa-topo b{ font-size:13px; font-weight:600; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; }
.wa-conversa-topo span{ font-size:10.5px; color:var(--text-muted); flex-shrink:0;
  font-variant-numeric:tabular-nums; }
.wa-conversa-previa{ display:flex; justify-content:space-between; gap:8px;
  align-items:center; margin-top:2px; }
.wa-conversa-previa i{ font-style:normal; font-size:12px; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* não lida: nome mais forte e prévia legível, como qualquer inbox bom */
.wa-conversa.nao-lida .wa-conversa-topo b{ font-weight:750; }
.wa-conversa.nao-lida .wa-conversa-previa i{ color:var(--text-primary); font-weight:500; }
.wa-conversa-previa u{
  text-decoration:none; background:var(--green); color:#fff; font-size:10px; font-weight:700;
  border-radius:999px; padding:1.5px 6px; flex-shrink:0; min-width:18px; text-align:center;
  line-height:1.5; box-shadow:0 1px 3px rgba(118,184,42,.4);
}

/* ================= coluna da direita ================= */
.wa-conversa-painel{ display:flex; flex-direction:column; min-height:0; min-width:0;
  background:var(--surface-0); }
.wa-nenhuma{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; min-height:320px; color:var(--text-muted); font-size:13px; padding:40px; gap:14px; }
.wa-nenhuma svg{ opacity:.22; }

.wa-cab{
  display:flex; align-items:center; gap:11px; padding:9px 16px;
  border-bottom:1px solid var(--border); background:var(--surface-1);
  position:relative; z-index:2;
}
.wa-cab-txt{ min-width:0; }
.wa-cab b{ display:block; font-size:14px; font-weight:650; letter-spacing:-.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-cab-sub{ display:flex; align-items:center; gap:6px; margin-top:2px; flex-wrap:wrap; }
.wa-cab-sub span{ font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.wa-tag{ font-size:9px; font-weight:700; letter-spacing:.06em; font-style:normal;
  padding:2.5px 7px; border-radius:5px; background:var(--green-soft); color:var(--green-dark); }
.wa-tag.lead{ background:#EAF1FB; color:#2C5C99; }
.wa-tag.aberto{ background:var(--surface-0); color:var(--text-secondary);
  border:1px solid var(--border); }
.wa-tag.aberto::before{ content:"● "; color:var(--green); font-size:7px; vertical-align:middle; }
html[data-tema="escuro"] .wa-tag.lead{ background:rgba(44,92,153,.22); color:#8FB6E8; }

.wa-cab-dir{ margin-left:auto; display:flex; align-items:center; gap:5px; flex-shrink:0; }
.wa-cab-acao{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px;
  background:var(--green); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-decoration:none; border:0; cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.1);
  transition:background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.wa-cab-acao:hover{ background:var(--green-dark); transform:translateY(-1px);
  box-shadow:0 4px 10px -2px rgba(118,184,42,.45); }
.wa-cab-acao:active{ transform:translateY(0); }
.wa-cab-ico{
  width:30px; height:30px; border-radius:8px; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  text-decoration:none; transition:background .14s ease, color .14s ease;
}
.wa-cab-ico:hover{ background:var(--surface-0); color:var(--text-primary); }

/* ---------------- área das mensagens ---------------- */
.wa-mensagens{
  flex:1; min-height:300px; overflow-y:auto; padding:18px 24px 10px;
  display:flex; flex-direction:column;
  /* ⚠️ NADA de scroll-behavior:smooth aqui. Abrir uma conversa é um
     salto de dezenas de milhares de pixels: com «smooth» o navegador
     ANIMA a descida, e a animação é cancelada pela próxima atualização —
     a conversa abria no topo e ficava lá (medido em 23/08/2026: faltavam
     89.709px do fim). Instantâneo é o que o WhatsApp faz. */
  scroll-behavior:auto;
  /* sombra que só aparece quando há conteúdo rolado para cima */
  background:
    linear-gradient(var(--surface-0) 30%, rgba(0,0,0,0)) top / 100% 26px no-repeat,
    linear-gradient(rgba(16,24,40,.055), rgba(0,0,0,0)) top / 100% 8px no-repeat;
  background-attachment:local, scroll;
}
.wa-mensagens::-webkit-scrollbar{ width:7px; }
.wa-mensagens::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:4px; }
.wa-mensagens::-webkit-scrollbar-track{ background:transparent; }

/* nada de sticky: dentro de um flex-column ele cola por cima da
   primeira mensagem em vez de flutuar. */
.wa-dia{ text-align:center; margin:16px 0 14px; }
.wa-dia span{
  background:var(--surface-2); color:var(--text-muted); font-size:9.5px; font-weight:700;
  letter-spacing:.07em; padding:4px 11px; border-radius:999px;
  border:1px solid var(--border); box-shadow:0 1px 3px rgba(16,24,40,.06);
}

/* ---------------- linha de mensagem ----------------
   Cada mensagem é uma linha com avatar + balão. Mensagens seguidas da
   mesma pessoa entram como «.junta»: sem avatar, sem nome, coladas.
   É esse agrupamento que faz o chat parecer conversa e não formulário. */
/* avatar no TOPO do grupo, ao lado do nome — é onde o olho procura
   quem está falando. No rodapé ele fica órfão do nome. */
.wa-linha{ display:flex; gap:9px; align-items:flex-start; margin-bottom:10px;
  animation:waEntra .22s cubic-bezier(.2,.8,.2,1) both; }
.wa-linha.junta{ margin-bottom:3px; }
.wa-linha.eu{ flex-direction:row-reverse; }
/* no balão o avatar é pequeno: contorno de 2px ali vira um anel grosso */
.wa-linha .wa-avatar{ width:28px; height:28px; font-size:10.5px; margin-top:2px; border-width:1.5px; }
.wa-linha.junta .wa-avatar{ visibility:hidden; height:0; margin:0; }
@keyframes waEntra{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}

.wa-balao{
  max-width:min(62%, 520px); min-width:96px; padding:8px 12px 6px;
  border-radius:14px; position:relative;
  transition:box-shadow .16s ease;
}
.wa-linha.dele .wa-balao{
  background:var(--surface-1); color:var(--text-primary);
  border:1px solid var(--border); border-bottom-left-radius:5px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.wa-linha.eu .wa-balao{
  background:linear-gradient(155deg, var(--green) 0%, var(--green-dark) 130%);
  color:#fff; border-bottom-right-radius:5px;
  box-shadow:0 1px 2px rgba(16,24,40,.09), 0 6px 14px -6px rgba(118,184,42,.5);
}
.wa-linha.junta.dele .wa-balao{ border-bottom-left-radius:14px; border-top-left-radius:5px; }
.wa-linha.junta.eu .wa-balao{ border-bottom-right-radius:14px; border-top-right-radius:5px; }
.wa-balao:hover{ box-shadow:0 2px 6px rgba(16,24,40,.1); }

.wa-balao-quem{
  font-size:11.5px; font-weight:700; margin-bottom:2px; letter-spacing:-.01em;
  color:rgba(255,255,255,.9);
}
.wa-linha.dele .wa-balao-quem{ color:var(--green-dark); }
html[data-tema="escuro"] .wa-linha.dele .wa-balao-quem{ color:var(--green); }
.wa-linha.junta .wa-balao-quem{ display:none; }

.wa-balao-txt{ font-size:13px; line-height:1.48; word-break:break-word; white-space:pre-wrap; }
.wa-balao-pe{
  display:flex; align-items:center; justify-content:flex-end; gap:5px;
  font-size:10px; margin-top:2px; opacity:.72; font-variant-numeric:tabular-nums;
}
.wa-linha.eu .wa-balao-pe{ color:#fff; }
.wa-linha.dele .wa-balao-pe{ color:var(--text-muted); }
.wa-balao-pe i{ font-style:normal; font-size:8px; font-weight:700; letter-spacing:.06em;
  background:rgba(255,255,255,.22); border-radius:4px; padding:1px 5px; }
.wa-linha.dele .wa-balao-pe i{ background:var(--surface-0); }
.wa-tique{ font-weight:700; letter-spacing:-1.5px; }
.wa-tique.lido{ color:#A5E9FF; }
.wa-tique.falhou{ color:#FFD4D2; letter-spacing:0; }
/* parada = não saiu do aparelho (status 1). Cor de aviso, não de erro:
   ainda pode sair quando a ponte voltar. (2026-08-31) */
.wa-tique.parada{ color:#FFE08A; letter-spacing:0; }
/* Tarja de mensagens que não saíram, abaixo do cabeçalho da conversa. */
.wa-paradas{ flex:0 0 auto; padding:9px 14px; font-size:13px; font-weight:600;
  color:#6B4E00; background:#FFF4D6; border-bottom:1px solid #E8C868; }
.wa-balao-erro{
  font-size:10px; margin-top:5px; padding-top:5px; line-height:1.45;
  border-top:1px solid rgba(255,255,255,.22); opacity:.9;
}
.wa-linha.dele .wa-balao-erro{ color:#C1443F; border-top-color:var(--border); }
@media(max-width:860px){ .wa-balao{ max-width:82%; } }

/* ---------------- barra de escrever ---------------- */
.wa-escrever{ border-top:1px solid var(--border); padding:10px 14px; background:var(--surface-1); }
.wa-escrever form{ display:flex; gap:7px; align-items:center; }
.wa-campo{
  flex:1; display:flex; align-items:center; gap:6px; padding:0 6px 0 13px;
  background:var(--surface-0); border:1px solid var(--border); border-radius:11px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.wa-campo:focus-within{
  background:var(--surface-1); border-color:var(--green);
  box-shadow:0 0 0 3px rgba(118,184,42,.14);
}
/* ⚠️ O campo de escrever é um <textarea>, não um <input> (26/08/2026).
   Com <input type="text"> o texto colado de fora PERDIA as quebras de
   linha — um input de uma linha simplesmente não guarda "\n", então uma
   mensagem já estruturada virava um parágrafo só ao colar no Portal.
   O textarea guarda; a altura cresce sozinha pelo JS (waAltura), de uma
   linha até seis, como no WhatsApp Web. */
.wa-campo textarea{
  flex:1; border:0 !important; background:transparent !important; box-shadow:none !important;
  min-height:36px; max-height:132px; padding:9px 0 8px; font-size:13px; line-height:19px;
  color:var(--text-primary); outline:none; resize:none; overflow-y:auto;
  font-family:inherit;
}
.wa-campo{ align-items:flex-end; }

/* ---------- arrastar arquivo para dentro da conversa (26/08/2026) ---------- */
/* O alvo precisa de `position:relative` para a tarja cobrir só ele. */
.wa-conversa, .wa-mensagens{ position:relative; }
.wa-solte{
  position:absolute; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  background:rgba(118,184,42,.10); border:3px dashed var(--green);
  border-radius:10px; pointer-events:none;   /* não rouba o próprio "drop" */
}
.wa-solte[hidden]{ display:none; }
.wa-solte span{
  background:var(--surface-0, #fff); color:var(--green-dark);
  font-size:15px; font-weight:700; padding:12px 22px; border-radius:999px;
  box-shadow:0 6px 20px rgba(3,16,38,.18);
}

/* ---------- ações sobre UMA mensagem (26/08/2026) ---------- */
/* A setinha que abre o menu do balão. Fica no canto de CIMA do lado de
   FORA da conversa: mensagem recebida (à esquerda) → seta à direita;
   minha mensagem (à direita) → seta à esquerda. Só aparece ao passar o
   mouse, como no WhatsApp — no celular fica sempre visível, porque lá não
   existe passar o mouse. */
.wa-balao{ position:relative; }
.wa-seta-msg{
  position:absolute; top:2px; right:2px; width:22px; height:22px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:4px; cursor:pointer;
  background:transparent; color:var(--text-muted);
  opacity:0; transition:opacity .12s ease, color .12s ease;
}
.wa-linha.eu .wa-seta-msg{ right:auto; left:2px; }
.wa-balao:hover .wa-seta-msg,
.wa-seta-msg:focus-visible{ opacity:1; }
.wa-seta-msg:hover{ color:var(--text-primary); }
@media (hover:none){ .wa-seta-msg{ opacity:.55; } }
/* no tema WhatsApp o balão é colorido: a seta acompanha */
.wa-zap .wa-seta-msg{ color:var(--zap-txt2); }
.wa-zap .wa-seta-msg:hover{ color:var(--zap-txt); }
/* ⚠️ NÃO mexer no padding do `.wa-balao-txt` para abrir espaço para a seta.
   O tema WhatsApp já reserva 52px à direita para o horário
   (`.wa-zap .wa-balao-txt`), e uma regra com `.wa-linha.eu` ganha dele na
   especificidade — foi assim que o texto passou a correr por cima da hora
   ("10:33feito", 26/08/2026). A seta só aparece ao passar o mouse e leva o
   fundo do próprio balão atrás dela, que é como o WhatsApp Web resolve. */
.wa-seta-msg{ background:var(--surface-2); border-radius:0 8px 0 6px; }
.wa-linha.eu .wa-seta-msg{ border-radius:8px 0 6px 0; }
.wa-zap .wa-linha.dele .wa-seta-msg{ background:var(--zap-dele); }
.wa-zap .wa-linha.eu .wa-seta-msg{ background:var(--zap-meu); }

/* janela de confirmação com a cara do WhatsApp — não o confirm() do navegador */
.wa-caixa-fundo{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(11,20,26,.5); padding:20px;
}
.wa-caixa-fundo[hidden]{ display:none; }
.wa-caixa{
  background:#fff; border-radius:10px; padding:22px 24px 14px; max-width:400px; width:100%;
  box-shadow:0 12px 40px rgba(11,20,26,.32);
}
[data-tema="escuro"] .wa-caixa{ background:var(--surface-2); }
.wa-caixa p{
  margin:0 0 18px; font-size:15px; line-height:1.45; color:#3b4a54; text-transform:none;
}
[data-tema="escuro"] .wa-caixa p{ color:var(--text-primary); }
.wa-caixa-bts{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.wa-caixa-bts button{
  border:0; background:transparent; border-radius:999px; cursor:pointer;
  padding:9px 18px; font-size:14px; font-weight:600; font-family:inherit;
  letter-spacing:0; text-transform:none; color:var(--green-dark); box-shadow:none;
}
.wa-caixa-bts button:hover{ background:rgba(118,184,42,.12); transform:none; box-shadow:none; }
.wa-caixa-bts button.quieto{ color:var(--text-muted); }
.wa-caixa-bts button.quieto:hover{ background:rgba(0,0,0,.05); }
.wa-caixa-bts button.mal{ color:#c4314b; }
.wa-caixa-bts button.mal:hover{ background:#fdeaec; }

/* a tarja «respondendo a…», entre a conversa e o campo de escrever */
.wa-citando{
  display:flex; align-items:flex-start; gap:10px; margin:0 0 6px;
  padding:8px 12px; border-radius:9px; background:var(--surface-1);
  border-left:3px solid var(--green);
}
.wa-citando-txt{ flex:1; min-width:0; font-size:12.5px; line-height:1.4; }
.wa-citando-txt b{ display:block; color:var(--green-dark); font-size:12px; }
.wa-citando-txt span{
  display:block; color:var(--text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wa-citando button{
  flex-shrink:0; border:0; background:transparent; color:var(--text-muted);
  font-size:14px; cursor:pointer; padding:2px 4px; line-height:1;
}
.wa-citando button:hover{ color:var(--text-primary); }

/* a fileira de emojis do «Reagir» — flutua sobre a conversa */
.wa-reagir-barra{
  position:fixed; z-index:80; display:flex; gap:2px; padding:5px 7px;
  background:var(--surface-0); border:1px solid var(--border);
  border-radius:999px; box-shadow:var(--shadow-md, 0 8px 24px rgba(3,16,38,.16));
}
.wa-reagir-barra button{
  border:0; background:transparent; font-size:20px; line-height:1;
  cursor:pointer; padding:3px 5px; border-radius:50%;
  transition:transform .1s ease, background .1s ease;
}
.wa-reagir-barra button:hover{ transform:scale(1.25); background:var(--surface-1); }

/* a lista de destinos do «Encaminhar» */
.wa-enc-lista{ max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.wa-enc-item{
  text-align:left; border:0; background:transparent; padding:10px 12px;
  border-radius:8px; font-size:13.5px; font-family:inherit; color:var(--text-primary);
  cursor:pointer; width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wa-enc-item:hover{ background:var(--surface-1); }
.wa-enc-item:disabled{ opacity:.5; cursor:default; }
.wa-enc-vazio{ font-size:12.5px; color:var(--text-muted); padding:14px 12px; text-align:center; }
.wa-ferramenta{
  width:30px; height:30px; flex-shrink:0; border:0; background:transparent; border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  cursor:pointer; transition:color .14s ease, background .14s ease, transform .14s ease;
}
.wa-ferramenta:hover{ color:var(--green-dark); background:var(--surface-2); transform:scale(1.08); }
.wa-enviar{
  flex-shrink:0; width:36px; height:36px; border:0; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
  box-shadow:0 2px 6px -1px rgba(118,184,42,.5);
  transition:transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s ease, opacity .14s ease;
}
.wa-enviar:hover:not(:disabled){ transform:scale(1.07); box-shadow:0 4px 12px -2px rgba(118,184,42,.6); }
.wa-enviar:active:not(:disabled){ transform:scale(.96); }
.wa-enviar:disabled{ opacity:.4; cursor:default; box-shadow:none; }
/* enquanto envia, o avião vira uma rodinha */
.wa-enviar.enviando svg{ animation:waGira .7s linear infinite; }
@keyframes waGira{ to{ transform:rotate(360deg); } }

.wa-fora-janela{
  display:flex; gap:10px; align-items:flex-start; font-size:12px; line-height:1.6;
  color:var(--text-secondary); background:var(--surface-0); border:1px solid var(--border);
  border-left:3px solid #E0B770; border-radius:10px; padding:11px 14px;
}
.wa-fora-janela svg{ flex-shrink:0; color:#E0B770; margin-top:1px; }

.wa-passos{ margin:0; padding-left:20px; font-size:13px; line-height:1.8; color:var(--text-secondary); }
.wa-passos li{ margin-bottom:10px; }
.wa-passos b{ color:var(--text-primary); }

/* quem prefere menos movimento, tem menos movimento */
@media(prefers-reduced-motion:reduce){
  .wa-linha, .wa-vazio-ico, .wa-lista-tit::after{ animation:none !important; }
  .wa-conversa, .wa-avatar, .wa-enviar, .wa-cab-acao, .wa-ferramenta{ transition:none !important; }
}

/* ==================================================================
   WhatsApp — as tres abas (2026-08-21, pedido do Matteo).
   «Meu WhatsApp» · «WhatsApp Vanitelli» · «Disparo».

   ⚠️ DUAS BARRAS (17/09/2026, pedido do Fred): `.wa-abas-grupo` embrulha
   as duas. A de cima (`.wa-abas`) tem só as abas e a marca «WhatsApp»
   jogada para a direita (`.wa-abas-marca`) — era o <h1> da página. A de
   baixo (`.wa-abas-baixo`) é fina, só o link «Onde é que está ligado» e o
   status de conexão — antes isso vivia num link solto dentro da barra de
   cima (`.wa-aba-lado`, removida).

   ⚠️ ABA ATIVA EM FORMATO DE ABINHA DE PASTA (17/09/2026, pedido do Fred,
   depois de ver o CRM de Vendas no ar): antes a aba ativa só ficava com o
   texto verde e um traço embaixo. Agora ela "sobe": ganha fundo branco
   (var(--surface-2)) e borda nos 3 lados, com a borda de baixo pintada da
   MESMA cor do fundo — o `margin-bottom:-1px` empurra a aba 1px para
   baixo, exatamente sobre a linha do `border-bottom` da `.wa-abas`, e essa
   borda-de-baixo "invisível" tampa o traço embaixo da aba ativa. O
   resultado é a aba ativa parecendo uma guia física saindo da barra, e as
   inativas continuam lisas. Mesma classe em todo canto que usa este
   padrão (WhatsApp, CRM, Operacional, Financeiro, Marketing) — um ajuste
   de CSS só e todos ficam iguais. */
.wa-abas-grupo{ margin:0 0 20px; }
.wa-abas{
  display:flex; align-items:center; gap:4px; margin:0;
  border-bottom:1px solid var(--border); padding-bottom:0;
}
.wa-abas-espaco{ flex:1; }
.wa-aba{
  position:relative; padding:9px 15px 11px; text-decoration:none; font-size:13.5px;
  font-weight:600; color:var(--text-secondary); border-radius:9px 9px 0 0;
  border:1px solid transparent; border-bottom:none; margin-bottom:-1px;
  transition:color .12s ease, background .12s ease, border-color .12s ease; white-space:nowrap;
}
.wa-aba:hover{ color:var(--text-primary); background:var(--surface-1); }
.wa-aba.ativa{
  color:var(--green-dark); background:var(--surface-2);
  border-color:var(--border); border-bottom-color:var(--surface-2);
}
html[data-tema="escuro"] .wa-aba.ativa{ color:var(--green); }
.wa-abas-marca{
  display:flex; align-items:center; gap:6px; padding:9px 4px 11px 10px;
  font-size:13.5px; font-weight:600; color:var(--text-secondary); white-space:nowrap;
}
.wa-abas-marca svg{ flex-shrink:0; color:var(--green-dark); }
html[data-tema="escuro"] .wa-abas-marca svg{ color:var(--green); }
.wa-abas-baixo{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:6px 2px; font-size:12px; color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.wa-abas-baixo a{ font-weight:600; color:var(--text-secondary); text-decoration:none; }
.wa-abas-baixo a:hover{ color:var(--text-primary); text-decoration:underline; }
@media(max-width:640px){
  .wa-abas{ overflow-x:auto; }
  .wa-aba{ padding:9px 11px 11px; font-size:12.5px; }
  .wa-abas-marca{ padding:9px 2px 11px 8px; }
}

/* sub-abas dentro de Disparo */
.wa-sub{ display:flex; align-items:center; gap:6px; margin:0 0 14px; flex-wrap:wrap; }
.wa-sub-espaco{ flex:1; }
.wa-sub-item{
  padding:6px 13px; border-radius:999px; text-decoration:none; font-size:12.5px;
  font-weight:600; color:var(--text-secondary); border:1px solid var(--border);
  background:var(--surface-1);
}
.wa-sub-item:hover{ color:var(--text-primary); border-color:var(--border-strong); }
.wa-sub-item.ativa{
  background:var(--green-soft); border-color:transparent; color:var(--green-dark);
}
html[data-tema="escuro"] .wa-sub-item.ativa{ color:var(--green); }

/* ---------------- Meu WhatsApp ---------------- */
.wa-meu{ padding:34px 26px; }
.wa-meu-lado{ max-width:560px; margin:0 auto; text-align:center; }
.wa-meu-lado h2{ font-size:19px; font-weight:700; color:var(--text-primary);
  margin:0 0 10px; letter-spacing:-.01em; }
.wa-meu-lado p{ font-size:13.5px; line-height:1.7; color:var(--text-secondary); margin:0 0 16px; }
.wa-meu-abrir{ display:inline-block; padding:10px 20px; text-decoration:none; border-radius:10px; }
.wa-meu-nota{
  margin-top:20px; text-align:left; background:var(--surface-0);
  border-left:3px solid #E0B770; border-radius:10px; padding:13px 15px;
  font-size:12.5px; line-height:1.7; color:var(--text-muted);
}
.wa-meu-nota b{ display:block; color:var(--text-secondary); margin-bottom:3px; }

/* ---------------- escolha do público do disparo ---------------- */
.wa-publico{
  background:var(--surface-0); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin:0 0 14px;
}
.wa-publico-tit{ font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
.wa-publico-lista{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.wa-chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 13px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-2); font-size:12.5px; font-weight:600;
  color:var(--text-secondary); transition:border-color .12s ease;
}
.wa-chip:hover{ border-color:var(--border-strong); }
.wa-chip input{ width:14px; height:14px; margin:0; accent-color:var(--green); }
.wa-chip i{ width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.wa-chip b{ color:var(--text-primary); font-variant-numeric:tabular-nums; }
.wa-chip.vazio{ opacity:.45; cursor:default; }
.wa-publico-aviso{
  display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:1.65;
  color:var(--text-secondary); background:var(--surface-0);
  border-left:3px solid #E0B770; border-radius:10px; padding:12px 15px; margin:0 0 14px;
}
.wa-publico-aviso svg{ flex-shrink:0; color:#E0B770; margin-top:2px; }

/* QR do WhatsApp pessoal (2026-08-21) */
.wa-qr{
  display:block; width:280px; height:280px; margin:6px auto 0;
  background:#fff; padding:12px; border-radius:16px;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
@media(max-width:420px){ .wa-qr{ width:230px; height:230px; } }

/* ------------------------------------------------------------------
   Coluna de conversas no AZUL ESCURO DA VANITELLI (21/08/2026).

   ⚠️ O azul escuro da Vanitelli é o #031026 — dito pelo Matteo e
   confirmado no LOGO: amostrando assets/logo-navy.png ele é a segunda
   cor mais presente (2148px), junto do verde #84BC25.
   NÃO está na PALETA_PORTAL nem nos tokens do site; está na ARTE.
   Por isso procurar em CSS não achava — tinha que olhar o logo.
   O #A7B8D0 do texto secundário vem do site (SITE VANITELLI).

   Histórico das tentativas erradas, para ninguém repetir:
     1. só o sublinhado e a bolinha pintados  → azul nenhum
     2. azul CLARO de fundo                   → continuava branca
     3. #12395F inventado                     → "um azul qualquer"
     4. #185FA5 (paleta do Portal)            → é o azul MÉDIO, não o escuro
     5. #0A2240 (imagem de compartilhamento)  → secundário, não o oficial
     6. #0F1325 (--color-navy do site)        → do SITE, não do logo

   É um painel escuro fixo, como a navegação: cores literais, não muda
   com o tema claro/escuro.
   ------------------------------------------------------------------ */
.wa-lista{
  --vnt-azul:#031026;           /* o azul escuro da Vanitelli */
  --vnt-azul-claro:#0A1B33;     /* o mesmo, um degrau acima */
  --vnt-azul-texto:#A7B8D0;     /* o azul-claro de texto do site */
  --vnt-azul-linha:rgba(255,255,255,.10);
  background:linear-gradient(180deg, var(--vnt-azul-claro) 0%, var(--vnt-azul) 55%);
  border-right-color:rgba(0,0,0,.25);
}

/* busca */
.wa-lista .wa-busca svg{ color:var(--vnt-azul-texto); }
.wa-lista .wa-busca input{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.14); color:#fff;
}
.wa-lista .wa-busca input::placeholder{ color:var(--vnt-azul-texto); opacity:.8; }
.wa-lista .wa-busca input:focus{
  background:rgba(255,255,255,.16); border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}
.wa-lista .wa-busca:focus-within svg{ color:#fff; }

/* aba «Ativas» */
.wa-lista .wa-lista-tit{ color:#fff; }
.wa-lista .wa-lista-tit::after{ height:3px; background:#fff; }
.wa-lista .wa-lista-arquivo{ color:var(--vnt-azul-texto); }

/* faixa do contador */
.wa-lista .wa-lista-conta{
  background:rgba(0,0,0,.18); color:var(--vnt-azul-texto);
  border-top-color:var(--vnt-azul-linha); border-bottom-color:var(--vnt-azul-linha);
}
.wa-lista .wa-lista-filtro{ color:var(--vnt-azul-texto); }
.wa-lista .wa-lista-filtro:hover{ color:#fff; }

/* as linhas */
.wa-lista .wa-conversa{ box-shadow:inset 0 -1px 0 var(--vnt-azul-linha); }
.wa-lista .wa-conversa:hover{ background:rgba(255,255,255,.06); }
.wa-lista .wa-conversa::before{ width:4px; background:#fff; }
.wa-lista .wa-conversa.ativa{ background:rgba(255,255,255,.12); }
.wa-lista .wa-conversa-topo b{ color:#fff; }
.wa-lista .wa-conversa-topo span{ color:var(--vnt-azul-texto); opacity:.85; }
.wa-lista .wa-conversa-previa i{ color:var(--vnt-azul-texto); }
.wa-lista .wa-conversa.nao-lida .wa-conversa-previa i{ color:#fff; }

/* não lidas */
.wa-lista .wa-conversa-previa u{
  background:#fff; color:var(--vnt-azul); box-shadow:0 1px 4px rgba(0,0,0,.35);
}

/* avatar: branco de verdade, porque o fundo é escuro sempre */
.wa-lista .wa-avatar{ background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.wa-lista .wa-avatar.canal::after{ background:#fff; border-color:var(--vnt-azul); }

.wa-lista .wa-lista-vazia{ color:var(--vnt-azul-texto); }
.wa-lista .wa-lista-itens::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); }

/* ==================================================================
   «Meu WhatsApp» com a cara do WhatsApp Web (23/08/2026).

   Pedido do Matteo: "muda essa página inteira pro CSS do WhatsApp,
   exatamente". São as cores e as medidas do WhatsApp Web claro.

   ⚠️ Fica preso em .wa-zap, que só existe em meu.php. A aba oficial
   (WhatsApp Vanitelli) continua com a identidade do Portal — foi ela
   que o Matteo aprovou, e misturar as duas desfaria aquele trabalho.

   ⚠️ Nenhuma arte do WhatsApp foi copiada: o bonequinho de quem não tem
   foto é desenhado por nós, e o fundo da conversa é uma trama própria.
   ================================================================== */
.wa-zap{
  --zap-verde:#00a884;
  --zap-verde-esc:#008069;
  --zap-painel:#ffffff;
  --zap-barra:#f0f2f5;
  --zap-fundo:#efeae2;
  --zap-linha:#e9edef;
  --zap-txt:#111b21;
  --zap-txt2:#667781;
  --zap-hover:#f5f6f6;
  --zap-ativo:#f0f2f5;
  --zap-meu:#d9fdd3;
  --zap-dele:#ffffff;
  border:1px solid #d1d7db; border-radius:3px; box-shadow:0 1px 3px rgba(11,20,26,.08);
  overflow:hidden;
}
.wa-zap .wa-app{ grid-template-columns:400px minmax(0,1fr); height:min(82vh, 780px); }
@media(max-width:900px){ .wa-zap .wa-app{ grid-template-columns:minmax(0,1fr); height:auto; } }

/* ---------------- coluna da esquerda ---------------- */
.wa-zap .wa-lista{ background:var(--zap-painel); border-right:1px solid var(--zap-linha); }
.wa-zap .wa-lista-topo{ background:var(--zap-barra); padding:7px 12px; }
.wa-zap .wa-busca input{
  height:35px; border-radius:8px; background:var(--zap-painel); border:1px solid transparent;
  color:var(--zap-txt); font-size:14px; padding-left:60px;
}
.wa-zap .wa-busca input::placeholder{ color:var(--zap-txt2); }
.wa-zap .wa-busca input:focus{ border-color:transparent; box-shadow:none; outline:none; }
.wa-zap .wa-busca svg{ left:26px; color:var(--zap-txt2); }

.wa-zap .wa-lista-abas{ background:var(--zap-painel); padding:8px 12px 0;
  border-bottom:1px solid var(--zap-linha); }
.wa-zap .wa-lista-tit{
  color:var(--zap-verde-esc); font-size:13px; font-weight:500; letter-spacing:0;
  text-transform:none; padding-bottom:10px;
}
.wa-zap .wa-lista-tit::after{ height:3px; background:var(--zap-verde); border-radius:3px 3px 0 0; }
.wa-zap .wa-lista-conta{
  background:var(--zap-painel); color:var(--zap-txt2); font-size:12px;
  border-top:0; border-bottom:1px solid var(--zap-linha); padding:6px 16px;
}

/* a seleção múltipla com a cara do WhatsApp (2026-08-24) */
.wa-zap .wa-lista-selbt{ color:var(--zap-txt2); }
.wa-zap .wa-lista-selbt:hover, .wa-zap .wa-lista-selbt.ativo{ color:var(--zap-verde); }
.wa-zap .wa-sel-todas{ color:var(--zap-txt2); font-weight:400; }
.wa-zap .wa-sel-barra{
  background:var(--zap-painel); border-bottom:1px solid var(--zap-linha); padding:8px 12px; gap:6px;
}
.wa-zap .wa-sel-barra button{
  background:var(--zap-barra); border-color:var(--zap-linha); color:var(--zap-txt);
  font-size:11px; font-weight:500; white-space:nowrap;
}
.wa-zap .wa-sel-barra button:hover:not(:disabled){ border-color:var(--zap-verde); color:var(--zap-verde); }
.wa-zap .wa-sel-barra .wa-sel-sair{ background:none; border-color:transparent; color:var(--zap-txt2); }
.wa-zap .wa-sel-caixa{ border-color:var(--zap-txt2); }
.wa-zap .wa-sel-caixa.marcada{ border-color:var(--zap-verde); background:var(--zap-verde); }
.wa-zap .wa-conversa.selecionada{ background:var(--zap-ativo); }

.wa-zap .wa-lista-itens{ background:var(--zap-painel); }
.wa-zap .wa-lista-vazia{ color:var(--zap-txt2); font-size:14px; }
.wa-zap .wa-conversa{
  padding:0 0 0 13px; height:72px; gap:15px; box-shadow:none; align-items:center;
}
.wa-zap .wa-conversa::before{ display:none; }
.wa-zap .wa-conversa:hover{ background:var(--zap-hover); }
.wa-zap .wa-conversa.ativa{ background:var(--zap-ativo); }
/* a linha divisória do WhatsApp começa depois do avatar, não na borda */
.wa-zap .wa-conversa-txt{
  border-bottom:1px solid var(--zap-linha); height:100%;
  display:flex; flex-direction:column; justify-content:center; padding-right:15px;
}
.wa-zap .wa-conversa:last-child .wa-conversa-txt{ border-bottom:0; }
.wa-zap .wa-conversa-topo b{ font-size:16px; font-weight:400; color:var(--zap-txt); }
.wa-zap .wa-conversa-topo span{ font-size:12px; color:var(--zap-txt2); }
.wa-zap .wa-conversa.nao-lida .wa-conversa-topo span{ color:var(--zap-verde); }
.wa-zap .wa-conversa-previa{ margin-top:2px; }
.wa-zap .wa-conversa-previa i{ font-size:14px; color:var(--zap-txt2); }
/* ⚠️ A prévia da conversa NÃO LIDA é branca lá em cima (`.wa-lista
   .wa-conversa.nao-lida ... { color:#fff }`) porque a lista da aba OFICIAL
   tem fundo azul-escuro. O «Meu WhatsApp» usa a mesma `.wa-lista` com fundo
   CLARO — e ali o branco sumia: toda conversa não lida ficava sem prévia
   nenhuma na tela (visto ao vivo em 24/08/2026). */
.wa-zap .wa-conversa.nao-lida .wa-conversa-previa i{ color:var(--zap-txt); font-weight:500; }
.wa-zap .wa-conversa-previa u{
  background:var(--zap-verde); color:#fff; font-size:12px; font-weight:500;
  padding:1px 6px; box-shadow:none; min-width:20px;
}

/* ---------------- avatar ---------------- */
.wa-zap .wa-avatar{
  width:49px; height:49px; border:0; background:#dfe5e7; box-shadow:none;
  border-radius:50%; overflow:hidden; flex-shrink:0;
}
.wa-zap .wa-avatar svg, .wa-zap .wa-avatar img{ width:100%; height:100%; display:block; }
.wa-zap .wa-avatar::after{ display:none; }
.wa-zap .wa-conversa:hover .wa-avatar{ transform:none; }
.wa-zap .wa-cab .wa-avatar{ width:40px; height:40px; }

/* ---------------- coluna da direita ---------------- */
.wa-zap .wa-conversa-painel{ background:var(--zap-fundo); }
.wa-zap .wa-cab{
  background:var(--zap-barra); border-bottom:1px solid var(--zap-linha);
  padding:10px 16px; gap:15px; height:59px;
}
.wa-zap .wa-cab b{ font-size:16px; font-weight:400; color:var(--zap-txt); }
.wa-zap .wa-cab-sub span{ font-size:13px; color:var(--zap-txt2); }

/* fundo da conversa: trama própria, no bege do WhatsApp */
.wa-zap .wa-mensagens{
  background-color:var(--zap-fundo);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(17,27,33,.028) 1.5px, transparent 1.6px),
    radial-gradient(circle at 70% 65%, rgba(17,27,33,.024) 1.5px, transparent 1.6px),
    radial-gradient(circle at 45% 85%, rgba(17,27,33,.02) 1.2px, transparent 1.3px);
  background-size:64px 64px, 88px 88px, 52px 52px;
  padding:12px 6%;
}
.wa-zap .wa-dia span{
  background:#ffffff; color:var(--zap-txt2); font-size:12.5px; font-weight:500;
  letter-spacing:0; text-transform:none; border:0; padding:5px 12px;
  border-radius:7px; box-shadow:0 1px .5px rgba(11,20,26,.13);
}

/* ---------------- balões ---------------- */
.wa-zap .wa-linha{ margin-bottom:2px; align-items:flex-end; gap:0; }
.wa-zap .wa-linha .wa-avatar{ display:none; }
.wa-zap .wa-linha:not(.junta){ margin-top:12px; }
.wa-zap .wa-balao{
  max-width:65%; min-width:0; padding:6px 7px 8px 9px; border-radius:7.5px;
  box-shadow:0 1px .5px rgba(11,20,26,.13); position:relative;
}
.wa-zap .wa-linha.dele .wa-balao{ background:var(--zap-dele); border:0; color:var(--zap-txt); }
.wa-zap .wa-linha.eu .wa-balao{ background:var(--zap-meu); color:var(--zap-txt); }
/* o rabinho, só no primeiro balão do grupo — como no WhatsApp */
.wa-zap .wa-linha:not(.junta) .wa-balao::before{
  content:""; position:absolute; top:0; width:8px; height:13px;
}
.wa-zap .wa-linha.dele:not(.junta) .wa-balao{ border-top-left-radius:0; }
.wa-zap .wa-linha.dele:not(.junta) .wa-balao::before{
  left:-8px; background:var(--zap-dele);
  clip-path:polygon(100% 0, 0 0, 100% 100%);
}
.wa-zap .wa-linha.eu:not(.junta) .wa-balao{ border-top-right-radius:0; }
.wa-zap .wa-linha.eu:not(.junta) .wa-balao::before{
  right:-8px; background:var(--zap-meu);
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.wa-zap .wa-balao-txt{ font-size:14.2px; line-height:19px; color:var(--zap-txt); padding-right:52px; }
.wa-zap .wa-balao-pe{
  font-size:11px; color:rgba(17,27,33,.5); margin-top:-14px; opacity:1;
  height:15px; align-items:flex-end;
}
.wa-zap .wa-linha.eu .wa-balao-pe, .wa-zap .wa-linha.dele .wa-balao-pe{ color:rgba(17,27,33,.5); }

/* ---------------- barra de escrever ---------------- */
.wa-zap .wa-escrever{ background:var(--zap-barra); border-top:0; padding:5px 16px; }
.wa-zap .wa-escrever form{ gap:8px; align-items:center; }
.wa-zap .wa-campo{
  background:var(--zap-painel); border:0; border-radius:8px; padding:0 12px; min-height:42px;
}
.wa-zap .wa-campo:focus-within{ box-shadow:none; background:var(--zap-painel); }
.wa-zap .wa-campo textarea{
  min-height:42px; max-height:150px; padding:11px 0 10px; font-size:15px; line-height:20px;
  color:var(--zap-txt);
}
.wa-zap .wa-campo textarea::placeholder{ color:var(--zap-txt2); }
.wa-zap .wa-enviar{
  width:40px; height:40px; border-radius:50%; background:transparent;
  color:var(--zap-txt2); box-shadow:none;
}
.wa-zap .wa-enviar:hover:not(:disabled){ background:rgba(11,20,26,.06); transform:none; box-shadow:none; }

/* ---------------- telas de QR e espera ---------------- */
.wa-zap .wa-meu{ background:var(--zap-painel); }
.wa-zap .wa-nenhuma{ background:var(--zap-fundo); color:var(--zap-txt2); }
.wa-zap .wa-nenhuma svg{ opacity:.3; }

/* ------------------------------------------------------------------
   O que só existe na aba oficial (WhatsApp Vanitelli), no mesmo visual:
   nome de quem atendeu dentro do balão, etiquetas, botão de abrir o
   cadastro e o aviso da janela de 24 horas.
   ------------------------------------------------------------------ */

/* nome de quem atendeu — o WhatsApp usa isto em grupo, e aqui serve para
   saber qual atendente respondeu */
.wa-zap .wa-balao-quem{
  font-size:12.8px; font-weight:500; color:#e542a3; margin-bottom:2px;
}
.wa-zap .wa-linha.eu .wa-balao-quem{ color:#027eb5; }

/* etiquetas do cabeçalho */
.wa-zap .wa-tag{
  background:#e7f8f2; color:var(--zap-verde-esc); font-size:11px; font-weight:500;
  letter-spacing:0; text-transform:none; border:0; border-radius:4px; padding:2px 7px;
}
.wa-zap .wa-tag.lead{ background:#e8f1fb; color:#027eb5; }
.wa-zap .wa-tag.aberto{ background:transparent; color:var(--zap-txt2); border:0; padding:2px 0; }

/* botões da direita do cabeçalho */
.wa-zap .wa-cab-acao{
  background:transparent; color:var(--zap-verde-esc); font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none; padding:7px 12px; border-radius:6px; box-shadow:none;
}
.wa-zap .wa-cab-acao:hover{
  background:rgba(11,20,26,.06); color:var(--zap-verde-esc);
  transform:none; box-shadow:none;
}
.wa-zap .wa-cab-ico{ color:var(--zap-txt2); border-radius:50%; }
.wa-zap .wa-cab-ico:hover{ background:rgba(11,20,26,.06); color:var(--zap-txt); }

/* atalhos da barra de escrever */
.wa-zap .wa-ferramenta{ color:var(--zap-txt2); width:40px; height:40px; border-radius:50%; }
.wa-zap .wa-ferramenta:hover{ background:rgba(11,20,26,.06); color:var(--zap-txt); transform:none; }

/* tiques de entrega */
.wa-zap .wa-tique{ color:rgba(17,27,33,.5); }
.wa-zap .wa-tique.lido{ color:#53bdeb; }
.wa-zap .wa-tique.falhou{ color:#c4314b; }
.wa-zap .wa-tique.parada{ color:#b07d00; letter-spacing:0; }
.wa-zap .wa-balao-pe i{
  background:rgba(11,20,26,.06); color:var(--zap-txt2);
  font-size:9px; letter-spacing:.03em;
}
.wa-zap .wa-balao-erro{
  color:#c4314b; border-top-color:rgba(11,20,26,.1); font-size:11.5px;
}

/* aviso da janela de 24 horas */
.wa-zap .wa-fora-janela{
  background:#fff4d6; border:0; border-radius:8px; color:#54656f;
  font-size:13px; padding:10px 14px; box-shadow:0 1px .5px rgba(11,20,26,.13);
}
.wa-zap .wa-fora-janela svg{ color:#b58105; }

/* lista: arquivadas e filtros no cinza do WhatsApp */
.wa-zap .wa-lista-arquivo{ color:var(--zap-txt2); }
.wa-zap .wa-lista-filtro{ color:var(--zap-txt2); font-weight:400; }
.wa-zap .wa-lista-filtro:hover{ color:var(--zap-verde-esc); }

/* tela de "nenhum número conectado" */
.wa-zap .wa-vazio{ background:var(--zap-painel); }
.wa-zap .wa-vazio-ico{
  background:var(--zap-verde); box-shadow:none; border-radius:50%;
}
.wa-zap .wa-vazio-nota{ border-left-color:var(--zap-verde); background:var(--zap-barra); }

/* ------------------------------------------------------------------
   Fixar e arquivar conversa (23/08/2026) — nas duas abas.
   ------------------------------------------------------------------ */

/* seta que abre o menu: só aparece ao passar o mouse, como no WhatsApp */
.wa-conversa{ position:relative; }
.wa-conversa-seta{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  color:var(--zap-txt2, #667781); opacity:0; transition:opacity .12s; cursor:pointer;
  border-radius:4px;
}
.wa-conversa:hover .wa-conversa-seta{ opacity:1; }
.wa-conversa-seta:hover{ background:rgba(11,20,26,.08); }

/* o pino na prévia */
.wa-conversa-previa s{
  text-decoration:none; color:var(--zap-txt2, #667781); display:inline-flex;
  margin-left:auto; flex-shrink:0;
}
.wa-conversa-previa u + s, .wa-conversa-previa s + u{ margin-left:5px; }

/* contador de arquivadas no cabeçalho da lista */
.wa-lista-arquivo{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.wa-lista-arquivo em{
  font-style:normal; font-size:11px; font-weight:600; background:var(--zap-verde, #00a884);
  color:#fff; border-radius:9px; padding:0 6px; line-height:17px;
}

/* o menu em si */
.wa-menu{
  position:fixed; z-index:60; min-width:190px; padding:6px 0;
  background:#fff; border-radius:8px; box-shadow:0 2px 12px rgba(11,20,26,.28);
  display:flex; flex-direction:column;
}
.wa-menu[hidden]{ display:none; }
.wa-menu button{
  background:none; border:0; text-align:left; padding:11px 22px;
  font-size:14.5px; font-weight:400; letter-spacing:0; text-transform:none;
  color:#3b4a54; cursor:pointer; box-shadow:none; border-radius:0;
}
.wa-menu button:hover{ background:#f5f6f6; transform:none; box-shadow:none; }
/* excluir conversa: vermelho e separado — apaga no celular e não tem volta */
.wa-menu button.wa-menu-excluir{
  color:#c4314b; margin-top:4px; padding-top:12px; border-top:1px solid #e9edef;
}
.wa-menu button.wa-menu-excluir:hover{ background:#fdeaec; color:#a3283a; }

/* o sininho cortado é traçado, não preenchido */
.wa-conversa-previa s + s{ margin-left:5px; }
.wa-conversa-previa .wa-ico-mudo svg{ fill:none; }
.wa-conversa-previa .wa-ico-pino{ transform:rotate(45deg); }

/* ------------------------------------------------------------------
   Mídia nos balões (23/08/2026): foto, áudio, vídeo, documento,
   figurinha — no visual do WhatsApp.
   ------------------------------------------------------------------ */
.wa-zap .wa-balao.midia{ padding:4px 4px 8px; }
.wa-zap .wa-balao.midia .wa-balao-txt{ padding:4px 8px 0 5px; }
.wa-zap .wa-midia-img{
  display:block; max-width:330px; width:100%; max-height:340px;
  object-fit:cover; border-radius:6px; cursor:pointer;
}
.wa-zap .wa-midia-fig{
  display:block; width:150px; height:150px; object-fit:contain;
}
/* figurinha não tem balão — flutua no fundo, como no aplicativo */
.wa-zap .wa-linha .wa-balao.midia:has(.wa-midia-fig){
  background:transparent; box-shadow:none; padding:0;
}
.wa-zap .wa-linha .wa-balao.midia:has(.wa-midia-fig)::before{ display:none; }
.wa-zap .wa-midia-video{
  display:block; max-width:330px; width:100%; border-radius:6px; background:#000;
}
.wa-zap .wa-balao audio{ width:300px; max-width:66vw; height:42px; display:block; }
.wa-zap .wa-midia-doc{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(11,20,26,.05); border-radius:6px; color:var(--zap-txt);
  font-size:14px; text-decoration:none; max-width:320px;
}
.wa-zap .wa-midia-doc:hover{ background:rgba(11,20,26,.09); }
.wa-zap .wa-midia-doc svg{ color:#7f66ff; flex-shrink:0; }
.wa-zap .wa-midia-doc span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-zap .wa-apagada{ color:var(--zap-txt2); font-style:italic; }
.wa-zap .wa-balao-pe .wa-tique{ font-size:12px; letter-spacing:-2px; }

/* ------------------------------------------------------------------
   WhatsApp de parede a parede (23/08/2026, pedido do Matteo):
   o quadro vai da barra lateral até a parede direita, e do fim das
   abas até o pé da janela — como o WhatsApp Web. Só nas abas Meu
   WhatsApp e WhatsApp Vanitelli (classe wa-tela-cheia no main-inner).
   ------------------------------------------------------------------ */
@media (min-width: 901px){
  .main:has(> .main-inner.wa-tela-cheia){ padding:0; height:100vh; overflow:hidden; }
  .main-inner.wa-tela-cheia{ max-width:none; height:100%; display:flex; flex-direction:column; }
  .main-inner.wa-tela-cheia > .alert{ margin:12px 26px 0; }
  .main-inner.wa-tela-cheia .page-head{ padding:20px 26px 0; margin:0 0 4px; }
  .main-inner.wa-tela-cheia .wa-abas-grupo{ margin-bottom:0; }
  .main-inner.wa-tela-cheia .wa-abas{ padding:0 26px; }
  .main-inner.wa-tela-cheia .wa-abas-baixo{ padding:6px 26px; }
  .main-inner.wa-tela-cheia .wa-quadro{
    flex:1; min-height:0; margin:12px 0 0;
    border-radius:0; border-left:0; border-right:0; border-bottom:0;
    display:flex; flex-direction:column;
  }
  .main-inner.wa-tela-cheia .wa-app{ flex:1; height:auto; min-height:0; }
  .main-inner.wa-tela-cheia .wa-meu{ flex:1; }
}

/* a linha da ponte, pequena e discreta no topo */
.wa-ponte-mini{
  display:flex; align-items:center; gap:5px; font-size:11.5px;
  color:var(--text-muted); text-transform:none; letter-spacing:0;
  white-space:nowrap; overflow:hidden;
}
.wa-ponte-mini form{ display:inline; margin:0; }
.wa-ponte-mini button{
  background:none; border:0; padding:0; margin:0; font-size:11.5px;
  color:var(--text-muted); text-decoration:underline; cursor:pointer;
  box-shadow:none; letter-spacing:0; text-transform:none;
}
.wa-ponte-mini button:hover{ color:var(--text-secondary); transform:none; box-shadow:none; }

/* ------------------------------------------------------------------
   Mensagem de voz igual à do WhatsApp (23/08/2026): avatar com
   microfone, play, onda com progresso, duração e velocidade.
   ------------------------------------------------------------------ */
.wa-zap .wa-balao.voz{ padding:7px 10px 22px 7px; min-width:300px; position:relative; }
.wa-voz{ display:flex; align-items:center; gap:9px; }

.wa-voz-avatar{ position:relative; width:47px; height:47px; flex-shrink:0; }
.wa-voz-avatar .wa-avatar{ width:47px; height:47px; }
.wa-voz-mic{
  position:absolute; right:-5px; bottom:-1px; color:var(--zap-verde, #00a884);
  display:flex; filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff);
}
.wa-linha.eu .wa-voz-mic{ color:#889a8f; }

/* tocando, o avatar dá lugar ao botão de velocidade — como no WhatsApp */
.wa-voz-vel{
  width:47px; height:26px; flex-shrink:0; border:0; border-radius:13px;
  background:#8696a0; color:#fff; font-size:12.5px; font-weight:600;
  letter-spacing:0; text-transform:none; cursor:pointer; box-shadow:none; padding:0;
}
.wa-voz-vel:hover{ background:#728089; transform:none; box-shadow:none; }

.wa-voz-play{
  background:none; border:0; padding:0; width:32px; flex-shrink:0;
  color:#8696a0; cursor:pointer; display:flex; align-items:center; box-shadow:none;
}
.wa-voz-play:hover{ color:#54656f; transform:none; box-shadow:none; }

.wa-voz-meio{ flex:1; min-width:0; }
.wa-voz-onda{
  position:relative; display:flex; align-items:center; gap:1.5px;
  height:26px; cursor:pointer; min-width:160px;
}
.wa-voz-onda s{
  flex:1; min-width:2px; max-width:3px; border-radius:2px;
  background:rgba(17,27,33,.26); text-decoration:none; pointer-events:none;
}
.wa-voz-onda s.tocada{ background:#7a938a; }
.wa-linha.eu .wa-voz-onda s{ background:rgba(17,27,33,.28); }
.wa-linha.eu .wa-voz-onda s.tocada{ background:#639786; }
.wa-voz-bolinha{
  position:absolute; top:50%; left:0; width:12px; height:12px; border-radius:50%;
  background:var(--zap-verde, #00a884); transform:translate(-50%,-50%);
  box-shadow:0 1px 2px rgba(11,20,26,.3); pointer-events:none;
}
/* a duração fica embaixo da onda, à esquerda — a hora continua à direita */
.wa-voz-tempo{
  position:absolute; left:96px; bottom:5px;
  font-size:11px; color:rgba(17,27,33,.5);
}
/* a regra geral esconde avatar dentro da linha de mensagem — o do player
   de voz é a exceção: no WhatsApp ele aparece */
.wa-zap .wa-linha .wa-voz-avatar .wa-avatar{ display:block; }

/* links dentro dos balões — o azul que o WhatsApp usa */
.wa-zap .wa-balao-txt a{ color:#027eb5; text-decoration:underline; word-break:break-all; }
.wa-zap .wa-balao-txt a:hover{ color:#016397; }

/* ------------------------------------------------------------------
   Lado direito da prévia arrumado (23/08/2026, pedido do Matteo):
   texto ocupa o espaço, e na direita a ordem fixa é
   [silenciado] [grupo] [não lidas] [pino] — o pino sempre na ponta.
   ------------------------------------------------------------------ */
.wa-zap .wa-conversa-previa{ display:flex; align-items:center; gap:5px; }
.wa-zap .wa-conversa-previa i{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wa-zap .wa-conversa-previa s{ margin-left:0; flex-shrink:0; }

/* alfinete em pé, preenchido e discreto */
.wa-zap .wa-conversa-previa .wa-ico-pino{ transform:none; color:#8696a0; }
.wa-zap .wa-conversa-previa .wa-ico-pino svg{ display:block; }

/* etiqueta de grupo: pequena, cinza e centralizada — sem berrar */
.wa-zap .wa-conversa-previa u.wa-etiqueta-grupo{
  background:rgba(17,27,33,.07); color:var(--zap-txt2); font-weight:500;
  font-size:10px; padding:1px 7px 2px; min-width:0; border-radius:8px;
  box-shadow:none; display:inline-flex; align-items:center; justify-content:center;
  line-height:1.4; flex-shrink:0;
}

/* ------------------------------------------------------------------
   Gravando mensagem de voz (23/08/2026) — a barra de escrever dá lugar
   a este painel, como no WhatsApp.
   ------------------------------------------------------------------ */
.wa-gravando{ display:flex; align-items:center; gap:12px; padding:4px 2px; min-height:52px; }
.wa-gravando[hidden]{ display:none; }
.wa-grav-lixo, .wa-grav-parar{
  background:none; border:0; padding:0; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:#8696a0; box-shadow:none; flex-shrink:0;
}
.wa-grav-lixo:hover{ background:rgba(11,20,26,.06); color:#c4314b; transform:none; box-shadow:none; }
.wa-grav-parar{ color:var(--zap-verde-esc, #008069); }
.wa-grav-parar:hover{ background:rgba(0,168,132,.12); transform:none; box-shadow:none; }
.wa-grav-ponto{
  width:9px; height:9px; border-radius:50%; background:#f15c6d; flex-shrink:0;
  animation:waGravPisca 1.1s ease-in-out infinite;
}
@keyframes waGravPisca{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.wa-grav-tempo{
  font-variant-numeric:tabular-nums; font-size:15px; color:var(--zap-txt, #111b21);
  min-width:44px; flex-shrink:0;
}
.wa-grav-dica{
  flex:1; min-width:0; font-size:13px; color:var(--zap-txt2, #667781);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (prefers-reduced-motion: reduce){ .wa-grav-ponto{ animation:none; } }

/* «Leia mais» das mensagens compridas (23/08/2026) — como no WhatsApp:
   discreto, na mesma linha do texto */
.wa-ler-mais{
  color:#027eb5; text-decoration:none; font-size:14px; white-space:nowrap;
  cursor:pointer;
}
.wa-ler-mais:hover{ text-decoration:underline; }
.wa-zap .wa-ler-mais{ font-size:14.2px; }
/* as reticências somem junto com o «Leia mais» ao abrir */
.wa-balao-txt:has(.wa-txt-resto:not([hidden])) .wa-txt-reticencia{ display:none; }

/* ------------------------------------------------------------------
   Fase do funil dentro do WhatsApp (24/08/2026): em que etapa o lead
   está, com a cor do Painel de Leads.
   ⚠️ Cores literais, e não var(--surface-*): o quadro .wa-zap é uma
   pele clara FIXA e não acompanha o tema escuro do Portal.
   ------------------------------------------------------------------ */
.wa-tag.lead-fase{
  background:transparent; color:#3b4a54; border:0; padding:2px 0 2px 12px;
  position:relative; font-weight:600; text-transform:none; letter-spacing:0;
}
.wa-tag.lead-fase::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--cor-etapa, #8FA3B8);
}
.wa-tag.lead-status{
  background:rgba(11,20,26,.06); color:#54656f; border:0; border-radius:4px;
  padding:2px 7px; font-size:11px; font-weight:600;
  text-transform:none; letter-spacing:0;
}
.wa-tag.lead-status.verde{ background:#e7f8ec; color:#1a7f3c; }
.wa-tag.lead-status.laranja{ background:#fdf1dd; color:#8a5a12; }
.wa-tag.lead-status.vermelho{ background:#fdeaec; color:#a3283a; }
.wa-cab-fase{ display:inline-flex; align-items:center; gap:7px; }

/* etiqueta miúda no item da lista — só a etapa, o resto vai no title */
.wa-conversa-previa u.wa-etiqueta-fase{
  background:transparent; color:#667781; font-size:10.5px; font-weight:600;
  padding:0 0 0 11px; min-width:0; border-radius:0; box-shadow:none;
  position:relative; letter-spacing:0; text-transform:none;
  max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wa-conversa-previa u.wa-etiqueta-fase::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--cor-etapa, #8FA3B8);
}

/* ------------------------------------------------------------------
   «Escolher um a um» no Disparo (24/08/2026): o Painel de Leads dentro
   de uma janelinha, com caixinha por pessoa.
   ------------------------------------------------------------------ */
.wd-escolha{ display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.wd-escolha-conta{ font-size:12.5px; font-weight:600; color:var(--text-accent); }
.wd-escolha-limpar{
  background:none; border:0; padding:0; font-size:12px; color:var(--text-muted);
  text-decoration:underline; cursor:pointer; box-shadow:none; letter-spacing:0;
  text-transform:none;
}
.wd-escolha-limpar:hover{ color:var(--text-secondary); transform:none; box-shadow:none; }

.lead-modal.lead-modal-larga{ max-width:900px; width:calc(100vw - 48px); }
.wd-filtros{ margin:0 0 10px; }
.wd-filtros input[type="search"]{ flex:1; min-width:200px; }

.wd-barra-acao{
  display:flex; align-items:center; gap:8px; padding:8px 0 10px;
  border-bottom:1px solid var(--border);
}
.wd-barra-acao .espaco{ flex:1; }
.wd-barra-acao b{ font-size:12.5px; color:var(--text-accent); }

.wd-lista{ max-height:46vh; overflow-y:auto; margin:4px 0 12px; }
.wd-grupo{ margin-bottom:14px; }
.wd-grupo-cab{
  display:flex; align-items:center; gap:9px; padding:7px 2px; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-secondary); position:sticky; top:0;
  background:var(--surface-1); z-index:1;
}
.wd-grupo-cab i{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.wd-grupo-cab b{
  margin-left:auto; font-size:11px; color:var(--text-muted);
  background:var(--surface-0); border-radius:9px; padding:1px 8px;
}

.wd-linha{
  display:flex; align-items:center; gap:11px; padding:8px 10px;
  border-left:3px solid var(--cor-etapa, #8FA3B8); border-radius:0 8px 8px 0;
  cursor:pointer; margin-bottom:3px; background:var(--surface-2);
}
.wd-linha:hover{ background:var(--surface-0); }
.wd-linha.vazio{ opacity:.5; cursor:not-allowed; }
.wd-linha-quem{ flex:1; min-width:0; }
.wd-linha-tel{
  font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ------------------------------------------------------------------
   Seletor de emoji das duas abas (24/08/2026).
   ------------------------------------------------------------------ */
.wa-emoji-painel{
  position:fixed; z-index:70; width:330px; padding:10px;
  background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(11,20,26,.28);
  border:1px solid #e9edef;
}
.wa-emoji-painel[hidden]{ display:none; }
.wa-emoji-busca{
  width:100%; height:32px; border-radius:8px; border:1px solid #e9edef;
  padding:0 10px; font-size:13px; margin-bottom:8px; background:#f0f2f5;
}
.wa-emoji-abas{ display:flex; gap:4px; margin-bottom:8px; flex-wrap:wrap; }
.wa-emoji-abas button{
  background:none; border:0; padding:4px 9px; border-radius:7px; cursor:pointer;
  font-size:11px; font-weight:600; color:#667781; letter-spacing:0;
  text-transform:none; box-shadow:none;
}
.wa-emoji-abas button:hover{ background:#f0f2f5; transform:none; box-shadow:none; }
.wa-emoji-abas button.ativa{ background:#e7f8ec; color:#008069; }
.wa-emoji-grade{
  display:grid; grid-template-columns:repeat(8, 1fr); gap:2px;
  max-height:230px; overflow-y:auto;
}
.wa-emoji-grade button{
  background:none; border:0; padding:5px 0; font-size:21px; line-height:1.2;
  cursor:pointer; border-radius:7px; box-shadow:0 0 0 0;
}
.wa-emoji-grade button:hover{ background:#f0f2f5; transform:none; box-shadow:none; }
.wa-emoji-vazio{
  grid-column:1 / -1; padding:16px 8px; text-align:center;
  font-size:12px; color:#667781;
}

/* mídia e player também na aba oficial (fora do .wa-zap) */
.wa-balao.midia{ padding:4px 4px 8px; }
.wa-balao.midia .wa-balao-txt{ padding:4px 8px 0 5px; }
.wa-balao.voz audio, .wa-balao audio{ width:290px; max-width:62vw; height:40px; display:block; }
.wa-midia-img{
  display:block; max-width:330px; width:100%; max-height:340px;
  object-fit:cover; border-radius:6px; cursor:pointer;
}
.wa-midia-fig{ display:block; width:150px; height:150px; object-fit:contain; }
.wa-midia-video{ display:block; max-width:330px; width:100%; border-radius:6px; background:#000; }
.wa-midia-doc{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(11,20,26,.05); border-radius:6px; color:inherit;
  font-size:14px; text-decoration:none; max-width:320px;
}
.wa-midia-doc:hover{ background:rgba(11,20,26,.09); }
.wa-midia-doc svg{ color:#7f66ff; flex-shrink:0; }
.wa-midia-doc span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Excluir conversa: separado dos outros e em vermelho — apaga no celular
   também e não tem volta */
.wa-sel-barra .wa-sel-excluir{ color:#c4314b; }
.wa-sel-barra .wa-sel-excluir:hover{ background:#fdeaec; color:#a3283a; }

/* Selo de cliente (24/08/2026) */
.wa-tag.wa-tag-cliente{
  background:#e8f1fb; color:#0b5ea8; border:0; border-radius:4px;
  padding:2px 8px; font-size:11px; font-weight:700;
  text-transform:none; letter-spacing:0;
}
.wa-conversa-previa u.wa-etiqueta-cliente{
  background:#e8f1fb; color:#0b5ea8; font-size:10px; font-weight:700;
  padding:1px 6px; min-width:0; border-radius:7px; box-shadow:none;
  letter-spacing:0; text-transform:none; flex-shrink:0;
}

/* Reação de emoji pendurada na quina do balão, como no WhatsApp */
.wa-balao{ position:relative; }
.wa-reacao{
  position:absolute; bottom:-11px; left:10px;
  background:#fff; border:1px solid rgba(11,20,26,.08); border-radius:11px;
  padding:1px 6px; font-size:13px; line-height:1.4;
  box-shadow:0 1px 2px rgba(11,20,26,.12);
}
.wa-linha.eu .wa-reacao{ left:auto; right:10px; }
/* Excluir no menu da conversa: separado e em vermelho, porque não volta */
.wa-menu .wa-menu-excluir{ color:#c4314b; }
.wa-menu .wa-menu-excluir:hover{ background:#fdeaec; }

/* ---------------------------------------------------------------------
   Conexão com o Meta Business (28/08/2026) — modulos/midia_config/meta.php
   Tela de configuração: sem subtítulo, como manda a regra do CONTEXTO.
   --------------------------------------------------------------------- */
.meta-estado{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.meta-bolinha{
  width:11px; height:11px; border-radius:50%; flex-shrink:0;
  background:var(--text-secondary); box-shadow:0 0 0 3px rgba(19,24,41,.06);
}
.meta-bolinha.on{ background:#2FA84F; box-shadow:0 0 0 3px rgba(47,168,79,.16); }
.meta-bolinha.off{ background:#C0392B; box-shadow:0 0 0 3px rgba(192,57,43,.14); }
.meta-estado-txt{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:3px; }
.meta-estado-txt small{ color:var(--text-secondary); }
.meta-acoes{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.meta-passos{ margin:0 0 14px 18px; display:flex; flex-direction:column; gap:9px; }
.meta-passos li{ color:var(--text-primary); }
/* o endereço do callback é para COPIAR: quebra em qualquer ponto e nunca
   estoura a largura do painel, mesmo em tela pequena */
.meta-uri{
  display:block; margin-top:6px; padding:8px 11px; border-radius:9px;
  background:var(--surface-1); border:1px solid var(--border);
  font-size:12.5px; word-break:break-all; user-select:all;
}

.meta-contas{ display:grid; gap:10px; }
.meta-conta{
  display:flex; align-items:center; gap:12px; padding:11px 13px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
}
.meta-conta.inativa{ opacity:.5; }
.meta-conta-foto{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.meta-conta-foto.vazia{ background:var(--surface-1); border:1px solid var(--border); }
.meta-conta-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.meta-conta-txt small{ color:var(--text-secondary); }

/* =====================================================================
   TELA DUPLA + BARRA FINA (28/08/2026, pedido do Matteo)

   Três estados, todos controlados por classe no <html>:
     .side-fina    barra encolhida, só ícones; passa o mouse e ela abre
                   POR CIMA do conteúdo (não empurra nada).
     .dupla-escolha  a tela escurece e a barra fica em destaque: o
                   próximo clique numa aba escolhe o que abre ao lado.
     .tela-dupla   a tela atual fica à esquerda e a escolhida à direita,
                   num quadro; a divisória do meio arrasta.
     .dupla-quadro dentro do quadro da direita: a barra some (quem manda
                   é a página de fora).
   ===================================================================== */



/* ---- barra fina -------------------------------------------------- */
/* ⚠️ A barra vira FIXA e o conteúdo ganha a margem: assim o hover pode
   reabrir a barra por cima do conteúdo sem empurrar a página inteira
   para os lados a cada passada de mouse. */
html.side-fina #sidebar{
  position:fixed; left:0; top:0; z-index:70;
  width:64px; padding:16px 9px 14px;
  transition:width .15s ease;
}
html.side-fina .shell{ padding-left:64px; }
html.side-fina #sidebar .brandmark{ padding:0; margin-bottom:14px; }
html.side-fina #sidebar .brandmark img{ max-width:44px; }
html.side-fina #sidebar .side-user,
html.side-fina #sidebar .side-label,
html.side-fina #sidebar .navitem span,
html.side-fina #sidebar .navitem-toggle span,
html.side-fina #sidebar .side-config span,
html.side-fina #sidebar .navgroup .subitens{ display:none; }
/* ⚠️ O bloco do usuário some na barra fina, MAS os dois botões moram
   dentro dele desde 28/08 — e sumindo junto ficava impossível expandir a
   barra de volta. Eles voltam, empilhados e centralizados. */
html.side-fina #sidebar .side-user{
  display:block; padding:0; border-bottom:0; margin-bottom:14px;
}
html.side-fina #sidebar .side-user .nome,
html.side-fina #sidebar .side-user .cargo,
html.side-fina #sidebar .side-user > a{ display:none; }
html.side-fina #sidebar .side-ferramentas{
  flex-direction:column; gap:8px; margin-top:0; align-items:center;
}
html.side-fina #sidebar:hover .side-user{
  padding:0 10px 16px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:16px;
}
html.side-fina #sidebar:hover .side-user .nome,
html.side-fina #sidebar:hover .side-user .cargo,
html.side-fina #sidebar:hover .side-user > a{ display:revert; }
html.side-fina #sidebar:hover .side-ferramentas{
  flex-direction:row; margin-top:10px; align-items:center;
}
html.side-fina #sidebar .navitem,
html.side-fina #sidebar .navitem-toggle{ justify-content:center; }
/* passou o mouse: reabre por cima, com tudo de volta */
html.side-fina #sidebar:hover{ width:290px; padding:22px 14px 20px; box-shadow:8px 0 30px rgba(5,8,18,.45); }
html.side-fina #sidebar:hover .side-user,
html.side-fina #sidebar:hover .side-label,
html.side-fina #sidebar:hover .navitem span,
html.side-fina #sidebar:hover .navitem-toggle span,
html.side-fina #sidebar:hover .side-config span{ display:revert; }
html.side-fina #sidebar:hover .navgroup.open .subitens{ display:block; }
html.side-fina #sidebar:hover .navitem,
html.side-fina #sidebar:hover .navitem-toggle{ justify-content:flex-start; }
html.side-fina #sidebar:hover .brandmark img{ max-width:178px; }

/* ---- modo escolha ------------------------------------------------- */
#duplaEscurecer{
  position:fixed; inset:0; z-index:60;
  background:rgba(8,12,24,.45);
}
html.dupla-escolha #sidebar{ z-index:70; box-shadow:8px 0 34px rgba(5,8,18,.55); }
#duplaDica{
  position:fixed; left:50%; top:26px; transform:translateX(-50%); z-index:75;
  background:#141A2C; color:#fff; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:9px 20px; font-size:13.5px; font-weight:600;
  box-shadow:0 10px 30px rgba(5,8,18,.5); white-space:nowrap;
}
#duplaDica small{ opacity:.65; font-weight:400; margin-left:8px; }

/* ---- tela dupla --------------------------------------------------- */
html.tela-dupla .main{ min-width:0; }
#duplaPane{
  display:flex; flex-direction:column; min-width:0;
  align-self:stretch; height:100vh; position:sticky; top:0;
  border-left:1px solid var(--border); background:var(--surface-0);
}
#duplaPane .dupla-cabeca{
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  margin:10px 12px; padding:8px 12px;
  background:var(--surface-2); border:1.5px solid #84BC25;
  border-radius:12px; box-shadow:0 4px 16px rgba(19,24,41,.08);
}
#duplaPane .dupla-cabeca b{ font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#duplaPane .dupla-fechar{
  width:28px; height:28px; flex-shrink:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px;
  background:var(--surface-1); cursor:pointer; font-size:13px; line-height:1;
  color:var(--text-secondary);
}
#duplaPane .dupla-fechar:hover{ background:#C0392B; border-color:#C0392B; color:#fff; }
#duplaPane iframe{ flex:1; width:100%; border:0; background:#fff; }
/* a alça do meio: arrasta para ajustar o tamanho dos dois lados */
#duplaAlca{
  width:7px; flex-shrink:0; cursor:col-resize; align-self:stretch;
  background:var(--border); position:relative; z-index:5;
  transition:background .15s ease;
}
#duplaAlca:hover, #duplaAlca.arrastando{ background:#84BC25; }
/* enquanto arrasta, o iframe não pode "roubar" o mouse */
html.dupla-arrastando iframe{ pointer-events:none; }
html.dupla-arrastando{ user-select:none; }

/* ---- dentro do quadro da direita ---------------------------------- */
html.dupla-quadro #sidebar,
html.dupla-quadro .mobile-menu-btn,
html.dupla-quadro #sidebarBackdrop{ display:none !important; }
html.dupla-quadro .shell{ padding-left:0; }

/* ⚠️ OS DOIS LADOS COMEÇAM NA MESMA ALTURA (29/08/2026, o Matteo mandou
   a print com um projeto mais alto que o outro).

   As duas faixas verdes já alinhavam — o que estava torto era o CONTEÚDO,
   e as contas de cada lado são diferentes:

     esquerda: o `main` tem 84px de recuo e a faixa sobe -74px para dentro
               dele, então o conteúdo começa em 84 - 74 + 45 (faixa) + 22
               (margem) = 77px;
     direita:  a faixa fica FORA do quadro, então o iframe já começa em
               66px; dentro dele o `main` tinha mais 64px de recuo, e o
               conteúdo caía em 130px -- 53px abaixo do outro lado.

   Aqui o recuo de dentro do quadro vira 11px, que é o que falta para os
   dois baterem em 77. Medido na tela, não estimado. */
html.dupla-quadro .main{ padding-top:11px; }

/* telefone: tela dupla não cabe — os botões somem */
@media (max-width:900px){
  .side-ferramentas{ display:none; }
}

/* ---- ajustes de 28/08, tarde (feedback do Matteo na tela) ------------- */

/* Barra fina: a logo larga espremida ficava horrível — entra o SÍMBOLO. */
.brandmark .brand-simbolo{ display:none; }
html.side-fina #sidebar .brandmark .brand-cheia{ display:none; }
html.side-fina #sidebar .brandmark .brand-simbolo{ display:block; width:24px; height:24px; margin:0 auto; }
html.side-fina #sidebar:hover .brandmark .brand-cheia{ display:block; }
html.side-fina #sidebar:hover .brandmark .brand-simbolo{ display:none; }
html.side-fina #sidebar .brandmark{ justify-content:center; }

/* Barra fina: o Configurações aparecia cortado — a engrenagem pequena
   continuava ao lado do ícone sem caber. Só o ícone, centralizado. */
html.side-fina #sidebar .side-config{ justify-content:center; padding:9px 4px; }
html.side-fina #sidebar .side-config-eng{ display:none; }
html.side-fina #sidebar:hover .side-config{ justify-content:flex-start; padding:9px 10px; }
html.side-fina #sidebar:hover .side-config-eng{ display:block; }

/* "Alterar página" — o botão no alto de CADA lado da tela dupla */
.dupla-trocar{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  padding:5px 12px; border:1px solid var(--border); border-radius:999px;
  background:var(--surface-1); color:var(--text-primary);
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.dupla-trocar:hover{ background:#84BC25; border-color:#84BC25; color:#16250a; }

/* a faixa no alto da tela da ESQUERDA (a da direita já tem a sua).
   Sticky: continua à vista quando a página rola. */
#duplaCabecaEsq{
  position:sticky; top:10px; z-index:40;
  display:flex; align-items:center; gap:10px;
  margin:-74px 0 22px; padding:8px 12px;
  background:var(--surface-2); border:1.5px solid #84BC25;
  border-radius:12px; box-shadow:0 4px 16px rgba(19,24,41,.08);
}
#duplaCabecaEsq b{ font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }



/* ---------------------------------------------------------------------
   A barrinha de ferramentas da lateral (28/08/2026, 4º ajuste do Matteo)

   Fica ACIMA do nome: um quadrado pequeno de duplicar à esquerda e o
   "Suspender" ao lado. Com a barra fina o texto vira "Expandir" e a
   seta gira — e, encolhida, sobram só os dois ícones, empilhados.
   --------------------------------------------------------------------- */
/* Os dois botões, abaixo do Sair (5º ajuste do Matteo). Sem padding
   lateral: o .side-user já tem o dele, e repetir desalinhava do nome. */
.side-ferramentas{
  display:flex; align-items:center; gap:8px; margin-top:10px;
}
/* o quadrado de duplicar: pequeno mesmo, mas com contorno visível */
.side-quadrado{
  width:30px; height:30px; flex-shrink:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); border-radius:8px;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.side-quadrado:hover{ background:rgba(132,188,37,.25); border-color:#84BC25; color:#fff; }
/* ⚠️ SVG dentro de flex encolhe até sumir: o desenho ficou com LARGURA
   ZERO e o botão apareceu vazio na tela (28/08). O atributo width= do SVG
   não segura — quem segura é o flex-shrink e a largura em CSS. */
.side-quadrado svg{ flex-shrink:0; width:16px; height:16px; display:block; }

/* O botão de encolher é um quadrado igual ao de duplicar. */
.side-suspender{ font-family:inherit; }
.side-suspender svg{ flex-shrink:0; transition:transform .15s ease; }
/* ⚠️ Qual texto aparece — a ORDEM e a força de cada regra importam:
   a primeira versão deixava "EXPANDIR" escapando para fora da barra
   fina, porque a regra que mostrava vencia a que escondia.
     barra larga ............ "Suspender"
     fina, sem o mouse ...... só o ícone (não cabe texto)
     fina, com o mouse ...... "Expandir" (clicar abre de vez) */
.side-suspender .q-exp{ display:none; }
html.side-fina .side-suspender .q-susp,
html.side-fina .side-suspender .q-exp{ display:none; }
html.side-fina #sidebar:hover .side-suspender .q-exp{ display:none; }
/* a seta aponta para o outro lado enquanto está encolhida */
html.side-fina .side-suspender svg{ transform:rotate(180deg); }

/* encolhida: os dois viram só ícone, um embaixo do outro e centralizados */
html.side-fina .side-ferramentas{
  flex-direction:column; gap:6px; padding:0; margin:10px 0 12px;
}
html.side-fina .side-suspender{ width:30px; padding:0; justify-content:center; border-radius:8px; }
html.side-fina .side-suspender span{ display:none; }
/* ⚠️ Nem margem negativa, nem padding próprio (29/08/2026). Medido antes
   de mexer: a margem `-6px` fazia os botões começarem 4px ACIMA do fim do
   «Sair» — encostavam nele — e o `padding:0 10px` os empurrava para 34px
   enquanto o nome e o «Sair» ficam em 24px, 10px de desalinho. O recuo
   lateral é do `.side-user`; repetir aqui desalinha. */
html.side-fina #sidebar:hover .side-ferramentas{
  flex-direction:row; padding:0; margin:10px 0 14px;
}

/* ---- templates do docMaker (29/08/2026) ---- */
/* Campo dentro de célula de tabela: sem borda dupla e sem margem, senão a
   linha cresce e a tabela vira um formulário empilhado. */
.dmt-tabela td input{
  width:100%; margin:0; padding:6px 8px; font-size:13px;
}
.dmt-tabela .dmt-num{ text-align:right; }
.dmt-calc{
  text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--text-secondary);
}
.dmt-tabela tfoot th{ font-weight:700; }
.dmt-tirar{
  background:none; border:0; cursor:pointer; padding:2px 6px;
  color:var(--text-muted); font-size:13px; line-height:1;
}
.dmt-tirar:hover{ color:#B4322F; }
.dmt .form-section [data-dmt-mais]{ margin-top:8px; }

/* A projeção tem 60 colunas: ela rola sozinha, e a coluna da descrição fica
   grudada na esquerda — sem isso, rolar até o mês 40 deixa a pessoa sem
   saber de qual linha é o número que está vendo. */
.dmt-projecao{ min-width:100%; }
.dmt-projecao th, .dmt-projecao td{
  white-space:nowrap; text-align:right;
  font-variant-numeric:tabular-nums; font-size:12px;
}
.dmt-projecao .dmt-fixa-col{
  position:sticky; left:0; z-index:1; text-align:left;
  background:var(--surface-1); border-right:1px solid var(--border);
}
.dmt-projecao thead .dmt-fixa-col{ background:var(--surface-2); }
.dmt-projecao .dmt-linha-forte th,
.dmt-projecao .dmt-linha-forte td{ font-weight:700; background:var(--surface-2); }

/* =====================================================================
   BOTÕES DO PASSO DO FLUXOGRAMA — acabamento (31/08/2026, pedido do
   Matteo: «funcionalidades perfeitas, agora deixa bonito»).

   ⚠️ A dificuldade aqui é que o passo pode ter QUALQUER cor de fundo,
   escolhida pelo usuário. Botão com cor fixa some no fundo escuro e
   grita no fundo claro. Por isso tudo abaixo é feito de branco e preto
   TRANSPARENTES, que se adaptam sozinhos: no verde escuro o vidro
   clareia, no amarelo claro escurece. É o mesmo motivo de as bordas
   serem rgba e não uma cor do tema.
   ⚠️ Vem depois das regras .fx-cor-custom/.fx-cor-escura de propósito:
   estas mandam no acabamento, aquelas só escolhem claro ou escuro.
===================================================================== */

/* a linha que separa o texto dos botões: some nas pontas, em vez de
   bater na borda do quadrado */
.fx-flow-toolbar{
  border-top:0 !important;
  padding-top:7px;
  position:relative;
}
.fx-flow-toolbar::before{
  content:''; position:absolute; top:0; left:6%; right:6%; height:1px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:.22;
}

/* --- os quadradinhos de ação ---
   ⚠️ A mira precisa incluir .fx-cor-escura/.fx-cor-custom porque as regras
   antigas (mais acima) usam essas classes e, sendo mais especificas,
   venciam as minhas: no passo escuro os botoes continuavam pretos. */
.wfp[data-ferramenta="fluxograma"] .fx-fnode .fx-fic,
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-custom .fx-fic,
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura .fx-fic,
.adsfx-cartao .fx-fnode .fx-fic{
  border-radius:8px;
  border:1px solid rgba(19,24,41,.22);
  background:rgba(255,255,255,.92);
  color:#1B2136;
  box-shadow:0 1px 2px rgba(3,16,38,.14), inset 0 1px 0 #fff;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
/* no passo de cor ESCURA o botao vira vidro claro: branco solido ali fica
   pesado, e preto sumiria no fundo */
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura .fx-fic,
.adsfx-cartao .fx-fnode.fx-cor-escura .fx-fic{
  border-color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.2);
  color:#fff;
  box-shadow:0 1px 3px rgba(3,16,38,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.wfp[data-ferramenta="fluxograma"] .fx-fnode .fx-fic:hover:not(:disabled),
.adsfx-cartao .fx-fnode .fx-fic:hover:not(:disabled){
  transform:translateY(-1px);
  background:#fff; border-color:rgba(19,24,41,.42);
  box-shadow:0 4px 10px rgba(3,16,38,.2), inset 0 1px 0 #fff;
}
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura .fx-fic:hover:not(:disabled),
.adsfx-cartao .fx-fnode.fx-cor-escura .fx-fic:hover:not(:disabled){
  background:rgba(255,255,255,.4); border-color:#fff; color:#fff;
}
/* apertar afunda — o clique fica com resposta fisica */
.wfp[data-ferramenta="fluxograma"] .fx-fnode .fx-fic:active:not(:disabled),
.adsfx-cartao .fx-fnode .fx-fic:active:not(:disabled){
  transform:translateY(0) scale(.93);
  box-shadow:inset 0 1px 3px rgba(3,16,38,.25);
}
/* --- as pontinhas de mover --- */
.fx-mv{
  border-radius:6px;
  transition:background .12s ease, opacity .12s ease, transform .12s ease;
}
.fx-mv:hover{ background:rgba(255,255,255,.22); transform:scale(1.15); }
.fx-fnode:not(.fx-cor-escura) .fx-mv:hover{ background:rgba(19,24,41,.08); }

/* --- a bolinha de cor: anel branco para nunca sumir no fundo --- */
.cor-unica.fx-cor-unica{
  box-shadow:0 1px 3px rgba(3,16,38,.3), inset 0 0 0 1.5px rgba(255,255,255,.9);
  border:1px solid rgba(19,24,41,.28);
}
.cor-unica.fx-cor-unica:hover{ transform:scale(1.12); }

/* --- as 4 setas de criar: mesma família visual dos quadradinhos --- */
.fx-seta{
  border:1px solid rgba(19,24,41,.2);
  box-shadow:0 2px 6px rgba(3,16,38,.18), inset 0 1px 0 #fff;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.fx-seta:hover{ transform:scale(1.18); box-shadow:0 3px 9px rgba(3,16,38,.26); }

/* o próprio quadrado ganha profundidade — antes era um retângulo chapado
   e os botões bonitos ficavam pousados no nada */
.wfp[data-ferramenta="fluxograma"] .fx-fnode,
.adsfx-cartao .fx-fnode{
  border-radius:12px;
  box-shadow:0 1px 2px rgba(3,16,38,.1), 0 6px 16px -8px rgba(3,16,38,.28);
  transition:box-shadow .15s ease, transform .15s ease;
}
.wfp[data-ferramenta="fluxograma"] .fx-fnode:hover,
.adsfx-cartao .fx-fnode:hover{
  box-shadow:0 2px 4px rgba(3,16,38,.12), 0 12px 26px -10px rgba(3,16,38,.4);
}
/* as pontinhas de mover estavam apagadas demais para achar sem procurar */
.fx-mv{ opacity:.62; }

/* =====================================================================
   BORDA EM VOLTA DE CADA BLOCO (31/08/2026 — o Matteo pediu isto duas
   vezes; na primeira eu entendi «cada botão» e fiz no lugar errado).

   ⚠️ A borda é rgba, nunca uma cor do tema: o bloco pode ter qualquer
   cor de fundo. Um contorno preto transparente escurece a própria cor
   do bloco e funciona no amarelo, no verde e no branco; uma cor fixa
   sumiria em metade deles. No bloco escuro, inverte para branco.
===================================================================== */
/* ⚠️ ALÉM da borda: um fio escuro por fora, no box-shadow. A borda
   sozinha some quando a cor do bloco é parecida com ela — no verde vivo
   o contorno branco quase não aparecia. O fio externo fecha o desenho em
   qualquer cor, sem escurecer o bloco por dentro. */
.wfp[data-ferramenta="fluxograma"] .fx-fnode,
.adsfx-cartao .fx-fnode{
  box-shadow:0 0 0 1px rgba(3,16,38,.22), 0 1px 2px rgba(3,16,38,.1), 0 6px 16px -8px rgba(3,16,38,.28);
  border-width:2px;
  border-style:solid;
  border-color:rgba(3,16,38,.30);
}
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-escura,
.adsfx-cartao .fx-fnode.fx-cor-escura{
  border-color:rgba(255,255,255,.8);
}

/* =====================================================================
   PASSO A PASSO DENTRO DE UM QUADRADO DO FLUXOGRAMA (03/09/2026)

   Uma camada só, em linha: passo 1 → passo 2 → passo 3. As setas de cada
   quadrado inserem ANTES ou DEPOIS — não existe cima nem baixo aqui de
   propósito, senão isto viraria outro fluxograma em árvore, que é o que o
   quadrado de fora já faz.
===================================================================== */
.fx-sub-caixa{ width:min(1180px,100%); }

.fx-sub-trilho{
  display:flex; align-items:stretch; gap:6px; overflow-x:auto;
  padding:14px 4px 18px; min-height:150px;
}
/* a flecha entre dois passos */
.fx-sub-liga{
  align-self:center; flex-shrink:0; padding:0 2px;
  color:var(--text-muted); font-size:19px; line-height:1;
}

.fx-sub-passo{
  position:relative; flex-shrink:0; width:214px;
  display:flex; flex-direction:column;
  border:2px solid var(--border-strong); border-radius:12px;
  background:var(--surface-1);
  box-shadow:0 1px 2px rgba(3,16,38,.08), 0 6px 16px -10px rgba(3,16,38,.3);
  padding:26px 12px 12px;
}
/* o número do passo, no cantinho — é a POSIÇÃO na fila, nunca um valor
   gravado: inserir no meio renumera tudo sozinho */
.fx-sub-num{
  position:absolute; top:-11px; left:10px;
  min-width:23px; height:23px; padding:0 6px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green); color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.02em;
  box-shadow:0 1px 3px rgba(3,16,38,.28);
}
.fx-sub-txt{
  width:100%; flex:1; resize:vertical; min-height:74px;
  border:0; background:transparent; color:var(--text-primary);
  font-family:inherit; font-size:13px; line-height:1.45; padding:0;
}
.fx-sub-txt:focus{ outline:none; }

/* as setas de inserir: fora do quadrado, aparecem no hover — mesma
   linguagem das setas do fluxograma grande */
.fx-sub-seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:22px; height:22px; padding:0; z-index:3; display:none;
  align-items:center; justify-content:center;
  border:1px solid var(--border-strong); border-radius:50%;
  background:var(--surface-0,#fff); color:var(--text-secondary);
  font-size:15px; font-weight:700; line-height:1; cursor:pointer;
  box-shadow:0 1px 4px rgba(3,16,38,.16);
}
.fx-sub-passo:hover > .fx-sub-seta{ display:flex; }
.fx-sub-seta:hover{ background:var(--green); border-color:var(--green); color:#fff; }
.fx-sub-seta-e{ left:-12px; }
.fx-sub-seta-d{ right:-12px; }

.fx-sub-del{
  position:absolute; top:5px; right:6px; width:20px; height:20px; padding:0;
  display:none; align-items:center; justify-content:center;
  border:0; border-radius:6px; background:transparent;
  color:var(--text-muted); font-size:12px; cursor:pointer;
}
.fx-sub-passo:hover > .fx-sub-del{ display:flex; }
.fx-sub-del:hover{ background:rgba(214,60,60,.12); color:#C0392B; }

.fx-sub-vazio{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:8px 2px; }

/* ---- o quadrado do fluxograma QUE TEM passo a passo dentro ---- */
/* duas marcas somadas de propósito: a borda engrossa (some em quadrado
   colorido se fosse só ela) e entra o selo no canto (se perde de longe se
   fosse só ele) */
.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-tem-sub,
.adsfx-cartao .fx-fnode.fx-tem-sub{
  border-width:3.5px;
  border-color:var(--green);
}
.fx-sub-selo{
  position:absolute; top:-9px; right:-9px; z-index:5;
  display:inline-flex; align-items:center; gap:3px;
  height:21px; padding:0 7px 0 5px; border-radius:8px;
  background:var(--green); color:#fff;
  box-shadow:0 1px 4px rgba(3,16,38,.3);
  pointer-events:none;
}
.fx-sub-selo svg{ width:13px; height:13px; display:block; }
.fx-sub-selo b{ font-size:11px; font-weight:800; line-height:1; }

/* =====================================================================
   ESTILO DO QUADRO — escolhido no botão «Estilo», no topo da página
   (03/09/2026). Seis acabamentos, saídos do «Provador de Quadrados» que
   o Matteo escolheu (opções 2, 3, 5, 6, 7 e 10 de dez propostas).

   ⚠️ A COR CONTINUA SENDO A MESMA DE SEMPRE — a bolinha de cor de cada
   quadro, ou nenhuma. O «Estilo» muda só o ACABAMENTO (moldura, sombra,
   cantos): os dois sistemas são independentes de propósito, senão
   trocar de acabamento apagaria a cor que alguém já tinha escolhido.

   ⚠️ var(--fx-no-cor, var(--fx)): usa a cor QUE O QUADRO TEM (se tiver);
   sem cor, cai na cor de assinatura da ferramenta fluxograma (--fx).
   Nunca fica sem acento nenhum.
===================================================================== */

/* ---- Bloco: preenchimento cheio SEMPRE, faixa escura no topo ----
   ⚠️ A primeira versão só decorava o quadro já colorido — num quadro SEM
   cor, «Bloco» ficava idêntico a «Padrão» (queixa do Matteo: «nem sei
   qual é o bloco»). Agora Bloco PREENCHE todo quadro, com cor ou sem —
   sem cor, usa a de assinatura da ferramenta (--fx). É a diferença que
   salta aos olhos: Bloco é o único acabamento que nunca deixa quadro
   branco. */
.fx-flow-mapa[data-estilo="bloco"] .fx-fnode{ border-radius:14px; }
.fx-flow-mapa[data-estilo="bloco"] .fx-fnode:not(.fx-cor-custom){
  background:var(--fx);
  border-color:color-mix(in srgb, var(--fx) 100%, black 25%);
}
.fx-flow-mapa[data-estilo="bloco"] .fx-fnode:not(.fx-cor-custom) .fx-fnode-txt{ color:#fff; }
.fx-flow-mapa[data-estilo="bloco"] .fx-fnode:not(.fx-cor-custom) .fx-fnode-txt::placeholder{ color:#fff; opacity:.65; }
.fx-flow-mapa[data-estilo="bloco"] .fx-fnode:not(.fx-cor-custom) .fx-flow-toolbar{ border-top-color:rgba(255,255,255,.3); }
.fx-flow-mapa[data-estilo="bloco"] .fx-fnode:not(.fx-cor-custom) .fx-fic{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42); color:#fff;
}
.fx-flow-mapa[data-estilo="bloco"] .fx-fnode:not(.fx-cor-custom) .fx-mv{ color:rgba(255,255,255,.7); }
/* faixa cheia no topo — não é mais um fio de 50%, é uma tarja de verdade */
.fx-flow-mapa[data-estilo="bloco"] .fx-fnode::before{
  content:''; position:absolute; top:0; left:0; right:0; height:6px;
  border-radius:14px 14px 0 0;
  background:color-mix(in srgb, var(--fx-no-cor, var(--fx)) 100%, black 32%);
  pointer-events:none;
}

/* ---- Selo: anel duplo, fundo neutro (a cor vira moldura, não tinta) ---- */
.fx-flow-mapa[data-estilo="selo"] .fx-fnode{
  border-radius:16px;
  border-color:color-mix(in srgb, var(--fx-no-cor, var(--fx)) 45%, transparent);
  box-shadow:0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--fx-no-cor, var(--fx));
}
.fx-flow-mapa[data-estilo="selo"] .fx-fnode.fx-cor-custom{
  background:var(--surface-2);
}

/* ---- Relevo: quadro 100% branco — a cor escolhida mora só na SOMBRA ----
   ⚠️ Antes o quadro colorido continuava com preenchimento sólido (a
   regra de fundo nunca tinha sido tirada dele) — «5, você deixou branco
   mas não é branco». Agora o fundo é sempre var(--surface-1), com ou sem
   cor; quem carrega a cor é a sombra, que afunda o quadro na cor
   escolhida (ou na de assinatura da ferramenta, sem cor nenhuma). */
.fx-flow-mapa[data-estilo="relevo"] .fx-fnode{
  border:0; border-radius:18px; background:var(--surface-1);
  box-shadow:
    6px 6px 14px color-mix(in srgb, var(--fx-no-cor, var(--fx)) 40%, transparent),
    -6px -6px 14px rgba(255,255,255,.75);
}
.fx-flow-mapa[data-estilo="relevo"] .fx-fnode.fx-cor-custom{ background:var(--surface-1); }
html[data-tema="escuro"] .fx-flow-mapa[data-estilo="relevo"] .fx-fnode{
  box-shadow:
    6px 6px 14px color-mix(in srgb, var(--fx-no-cor, var(--fx)) 55%, black 15%),
    -6px -6px 14px rgba(255,255,255,.06);
}

/* ---- Vidro: mais desfoque e um brilho diagonal — pra parecer vidro de
   verdade, não só uma cor semitransparente (pedido do Matteo: «um efeito
   de vidro bem suave»). O brilho é um ::after à parte, não background,
   porque a cor de fundo já é disputada por outra regra (a de baixo, para
   quadro colorido) — num pseudo-elemento próprio os dois nunca brigam. ---- */
.fx-flow-mapa[data-estilo="vidro"] .fx-fnode{
  border-radius:14px;
  backdrop-filter:blur(13px) saturate(1.3); -webkit-backdrop-filter:blur(13px) saturate(1.3);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -8px rgba(3,16,38,.3);
}
.fx-flow-mapa[data-estilo="vidro"] .fx-fnode::after{
  content:''; position:absolute; inset:0; border-radius:13px;
  background:linear-gradient(135deg, rgba(255,255,255,.32) 0%, transparent 42%);
  pointer-events:none;
}
.fx-flow-mapa[data-estilo="vidro"] .fx-fnode:not(.fx-cor-custom){
  background:color-mix(in srgb, var(--fx) 14%, var(--surface-1) 86%);
}
.fx-flow-mapa[data-estilo="vidro"] .fx-fnode.fx-cor-custom{
  background:color-mix(in srgb, var(--fx-no-cor) 24%, transparent);
  border-color:color-mix(in srgb, var(--fx-no-cor) 45%, white 55%);
}

/* ---- Técnico: traço tracejado com mira nos 2 cantos, como um desenho técnico ---- */
.fx-flow-mapa[data-estilo="tecnico"] .fx-fnode{
  border-radius:5px; border-style:dashed;
  border-color:var(--fx-no-cor, var(--fx));
}
.fx-flow-mapa[data-estilo="tecnico"] .fx-fnode.fx-cor-custom{
  background:var(--surface-1);
}
.fx-flow-mapa[data-estilo="tecnico"] .fx-fnode::before,
.fx-flow-mapa[data-estilo="tecnico"] .fx-fnode::after{
  content:'+'; position:absolute; font-size:12px; line-height:1; font-weight:700;
  color:var(--fx-no-cor, var(--fx)); pointer-events:none;
}
.fx-flow-mapa[data-estilo="tecnico"] .fx-fnode::before{ top:-7px; left:-6px; }
.fx-flow-mapa[data-estilo="tecnico"] .fx-fnode::after{ bottom:-7px; right:-6px; }

/* ---- Adesivo: papel quase branco, só uma tinta bem leve da cor, com
   uma borda FINA na cor cheia (pedido do Matteo: «deixa a cor, mas
   quase branca, e uma borda bem fina da cor mesma que eu escolhi»).
   ⚠️ Antes o fundo ficava sólido na cor inteira (mesma causa do Relevo:
   a regra de preenchimento nunca tinha sido tirada daqui). ---- */
.fx-flow-mapa[data-estilo="adesivo"] .fx-fnode{
  border-radius:2px 2px 8px 2px;
  border:1px solid color-mix(in srgb, var(--fx-no-cor, var(--fx)) 55%, transparent);
  background:color-mix(in srgb, var(--fx-no-cor, var(--fx)) 8%, var(--surface-1) 92%);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  box-shadow:0 10px 20px -8px rgba(3,16,38,.35), 0 2px 4px rgba(3,16,38,.15);
  transform:rotate(-1.6deg);
  transition:transform .15s ease, box-shadow .15s ease;
}
.fx-flow-mapa[data-estilo="adesivo"] .fx-fnode.fx-cor-custom{
  background:color-mix(in srgb, var(--fx-no-cor) 8%, var(--surface-1) 92%);
  border-color:var(--fx-no-cor);
}
/* alterna o giro — pilha de post-its de verdade não fica todo torto pro
   mesmo lado */
.fx-flow-mapa[data-estilo="adesivo"] .fx-fnode:nth-of-type(even){ transform:rotate(1.3deg); }
/* endireita para editar — texto torto incomoda na hora de digitar */
.fx-flow-mapa[data-estilo="adesivo"] .fx-fnode:hover,
.fx-flow-mapa[data-estilo="adesivo"] .fx-fnode:focus-within{ transform:rotate(0deg); }
.fx-flow-mapa[data-estilo="adesivo"] .fx-fnode::after{
  content:''; position:absolute; bottom:0; right:0; width:14px; height:14px;
  background:linear-gradient(135deg, transparent 50%, rgba(3,16,38,.18) 50%);
  pointer-events:none;
}

/* =====================================================================
   O POP-UP DE ESCOLHA — botão «Estilo» no cabeçalho do projeto/campanha
===================================================================== */
.fx-est-pop{
  position:fixed; z-index:1200; width:296px;
  background:var(--surface-1); border:1px solid var(--border-strong);
  border-radius:14px; box-shadow:0 14px 34px rgba(3,16,38,.22); padding:12px;
}
.fx-est-tit{ font-size:11.5px; font-weight:700; color:var(--text-muted); letter-spacing:.02em; margin-bottom:9px; }
.fx-est-grade{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fx-est-opc{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 6px 9px; border:1.5px solid var(--border); border-radius:10px;
  background:var(--surface-2); cursor:pointer; text-align:center;
}
.fx-est-opc:hover{ border-color:var(--border-strong); }
.fx-est-opc.fx-est-atual{ border-color:var(--green); background:var(--green-soft); }
.fx-est-nome{ font-size:12px; font-weight:650; color:var(--text-primary); }
/* a amostrinha: um quadradinho de mentira, na cor verde da marca (o
   pop-up pode aparecer fora do fluxograma, sem a var(--fx) daquela
   ferramenta por perto — verde funciona em qualquer lugar do Portal) */
.fx-est-amostra{
  width:100%; height:34px; background:var(--surface-1);
  border:1.5px solid var(--border-strong); border-radius:8px; position:relative;
}
.fx-est-amostra.fx-est-a-padrao{ }
.fx-est-amostra.fx-est-a-bloco{ background:var(--green); border-color:var(--green-dark); }
.fx-est-amostra.fx-est-a-selo{
  border-radius:12px; border-color:var(--green);
  box-shadow:0 0 0 2px var(--surface-1), 0 0 0 3px var(--green);
}
.fx-est-amostra.fx-est-a-relevo{
  border:0; border-radius:14px;
  box-shadow:3px 3px 8px rgba(3,16,38,.16), -3px -3px 8px rgba(255,255,255,.7);
}
.fx-est-amostra.fx-est-a-vidro{
  background:color-mix(in srgb, var(--green) 20%, var(--surface-1) 80%);
  border-color:rgba(255,255,255,.5);
}
.fx-est-amostra.fx-est-a-tecnico{ border-style:dashed; border-color:var(--green-dark); border-radius:3px; }
.fx-est-amostra.fx-est-a-adesivo{
  border:0; border-radius:2px 2px 7px 2px; transform:rotate(-3deg);
  clip-path:polygon(0 0, 100% 0, 100% 72%, 78% 100%, 0 100%);
  box-shadow:0 4px 8px -2px rgba(3,16,38,.3);
}

/* =====================================================================
   NOTAS DE ESTUDO (03/09/2026, pedido do Matteo)

   «Eu quero estudar várias coisas diferentes... crio um tópico e escrevo
   coisas sobre ele. Aí aparece tudo em uma página só.»

   Cada tópico é um quadro numa grade que se ajusta à largura. O
   ACABAMENTO do quadro é o mesmo botão «Estilo» do Fluxograma, e os sete
   acabamentos estão repetidos aqui embaixo para `.nt-card`.

   ⚠️ POR QUE REPETIR E NÃO REAPROVEITAR O SELETOR DO FLUXOGRAMA: lá as
   regras são `.fx-flow-mapa[data-estilo=X] .fx-fnode`, e tirar o
   `.fx-flow-mapa` da frente para servir aos dois BAIXARIA o peso do
   seletor — as regras de quadro colorido do fluxograma
   (`.wfp[data-ferramenta="fluxograma"] .fx-fnode.fx-cor-custom`) passariam
   a ganhar delas, e Relevo/Adesivo voltariam a sair coloridos, que foi
   exatamente o defeito consertado na manhã de 03/09. Repetir aqui custa
   linhas; mexer lá custaria o acabamento do fluxograma.
   ===================================================================== */
.wfp[data-ferramenta="notas"]{ --fx:#7B4FBF; }
.wfp[data-ferramenta="rank"]{  --fx:#C9542C; }

.nt-mapa{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  align-items:start;
}
.nt-card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  background:var(--surface-2); border:1.5px solid var(--border-strong);
  border-radius:12px; padding:12px 13px 11px;
}
/* ⚠️ `.wfp .nt-card input/textarea` e não só `.nt-titulo`: dentro do
   #fxRaiz existem regras gerais de formulário (`.fx-raiz input[type=text]`,
   `.fx-raiz textarea`) que dão fundo branco, borda, sombra e a alcinha de
   redimensionar. Com uma classe só elas ganhavam, e o quadro aparecia com
   uma caixa de campo dentro dele. Medido na tela antes de publicar. */
.wfp .nt-card input.nt-titulo{
  border:0; background:transparent; padding:0; width:100%; box-shadow:none;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--text-primary);
}
.nt-titulo::placeholder{ color:var(--text-muted); font-weight:600; }
.wfp .nt-card textarea.nt-texto{
  border:0; background:transparent; padding:0; width:100%; box-shadow:none;
  font-family:inherit; font-size:12.8px; line-height:1.55; color:var(--text-secondary);
  resize:none; overflow:hidden; min-height:64px; word-break:break-word;
}
.nt-texto::placeholder{ color:var(--text-muted); }
.nt-titulo:focus, .nt-texto:focus{ outline:none; }

/* A barra de ações só no hover/foco — o quadro parado fica limpo.
   ⚠️ `display:none`, não `opacity`: escondido por opacidade continua
   ocupando a linha (lição do cartão de etapa do funil, 03/09). */
.nt-barra{
  display:none; align-items:center; gap:5px;
  margin-top:2px; padding-top:8px; border-top:1px solid var(--border);
}
.nt-card:hover > .nt-barra, .nt-card:focus-within > .nt-barra{ display:flex; }
.nt-barra .cor-unica{ margin-left:auto; }
.nt-rodape{ display:flex; justify-content:flex-start; margin-top:14px; }

/* ---- quadro com cor escolhida (a mesma bolinha do fluxograma) ---- */
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-custom{
  background:var(--fx-no-cor);
  border-color:color-mix(in srgb, var(--fx-no-cor) 100%, black 22%);
}
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-custom .nt-titulo{ color:#1B2136; }
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-custom .nt-texto{ color:#2A3247; }
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-custom .nt-barra{ border-top-color:rgba(27,33,54,.25); }
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-escura .nt-titulo,
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-escura .nt-texto{ color:#fff; }
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-escura .nt-titulo::placeholder,
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-escura .nt-texto::placeholder{ color:#fff; opacity:.6; }
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-escura .nt-barra{ border-top-color:rgba(255,255,255,.3); }
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-escura .fx-fic{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42); color:#fff;
}
.wfp[data-ferramenta="notas"] .nt-card.fx-cor-escura .fx-mv{ color:rgba(255,255,255,.7); }

/* ================= os sete acabamentos, em .nt-card ================= */
/* Bloco: preenche sempre — com cor, ou com a de assinatura da ferramenta */
.nt-mapa[data-estilo="bloco"] .nt-card{ border-radius:14px; }
.nt-mapa[data-estilo="bloco"] .nt-card:not(.fx-cor-custom){
  background:var(--fx);
  border-color:color-mix(in srgb, var(--fx) 100%, black 25%);
}
.nt-mapa[data-estilo="bloco"] .nt-card:not(.fx-cor-custom) .nt-titulo,
.nt-mapa[data-estilo="bloco"] .nt-card:not(.fx-cor-custom) .nt-texto{ color:#fff; }
.nt-mapa[data-estilo="bloco"] .nt-card:not(.fx-cor-custom) .nt-titulo::placeholder,
.nt-mapa[data-estilo="bloco"] .nt-card:not(.fx-cor-custom) .nt-texto::placeholder{ color:#fff; opacity:.65; }
.nt-mapa[data-estilo="bloco"] .nt-card:not(.fx-cor-custom) .nt-barra{ border-top-color:rgba(255,255,255,.3); }
.nt-mapa[data-estilo="bloco"] .nt-card:not(.fx-cor-custom) .fx-fic{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42); color:#fff;
}
.nt-mapa[data-estilo="bloco"] .nt-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  border-radius:14px 14px 0 0;
  background:color-mix(in srgb, var(--fx-no-cor, var(--fx)) 100%, black 32%);
  pointer-events:none;
}

/* Selo: anel duplo, fundo neutro (a cor vira moldura, não tinta) */
.nt-mapa[data-estilo="selo"] .nt-card{
  border-radius:16px;
  border-color:color-mix(in srgb, var(--fx-no-cor, var(--fx)) 45%, transparent);
  box-shadow:0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--fx-no-cor, var(--fx));
}
.wfp[data-ferramenta="notas"] .nt-mapa[data-estilo="selo"] .nt-card.fx-cor-custom{
  background:var(--surface-2);
}

/* Relevo: quadro branco, a cor mora só na sombra */
.nt-mapa[data-estilo="relevo"] .nt-card{
  border:0; border-radius:18px; background:var(--surface-1);
  box-shadow:
    6px 6px 14px color-mix(in srgb, var(--fx-no-cor, var(--fx)) 40%, transparent),
    -6px -6px 14px rgba(255,255,255,.75);
}
.wfp[data-ferramenta="notas"] .nt-mapa[data-estilo="relevo"] .nt-card.fx-cor-custom{ background:var(--surface-1); }
html[data-tema="escuro"] .nt-mapa[data-estilo="relevo"] .nt-card{
  box-shadow:
    6px 6px 14px color-mix(in srgb, var(--fx-no-cor, var(--fx)) 55%, black 15%),
    -6px -6px 14px rgba(255,255,255,.06);
}

/* Vidro: desfoque, saturação e um brilho diagonal por cima */
.nt-mapa[data-estilo="vidro"] .nt-card{
  border-radius:14px;
  backdrop-filter:blur(13px) saturate(1.3); -webkit-backdrop-filter:blur(13px) saturate(1.3);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -8px rgba(3,16,38,.3);
}
.nt-mapa[data-estilo="vidro"] .nt-card::after{
  content:""; position:absolute; inset:0; border-radius:13px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 62%);
}
.nt-mapa[data-estilo="vidro"] .nt-card:not(.fx-cor-custom){
  background:color-mix(in srgb, var(--fx) 12%, transparent);
}
.wfp[data-ferramenta="notas"] .nt-mapa[data-estilo="vidro"] .nt-card.fx-cor-custom{
  background:color-mix(in srgb, var(--fx-no-cor) 22%, transparent);
}

/* Tracejado: borda picotada e dois cantos marcados */
.nt-mapa[data-estilo="tecnico"] .nt-card{
  border:1.5px dashed var(--fx-no-cor, var(--fx)); border-radius:6px;
  background:var(--surface-1);
}
.wfp[data-ferramenta="notas"] .nt-mapa[data-estilo="tecnico"] .nt-card.fx-cor-custom{
  background:var(--surface-1);
}
.nt-mapa[data-estilo="tecnico"] .nt-card::before,
.nt-mapa[data-estilo="tecnico"] .nt-card::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  border:1.5px solid var(--fx-no-cor, var(--fx));
}
.nt-mapa[data-estilo="tecnico"] .nt-card::before{ top:-7px; left:-6px; }
.nt-mapa[data-estilo="tecnico"] .nt-card::after{ bottom:-7px; right:-6px; }

/* Adesivo: quase branco na cor escolhida, borda fina cheia, meio torto */
.nt-mapa[data-estilo="adesivo"] .nt-card{
  border:1.5px solid var(--fx-no-cor, var(--fx)); border-radius:3px 3px 12px 3px;
  background:color-mix(in srgb, var(--fx-no-cor, var(--fx)) 8%, var(--surface-0));
  box-shadow:0 5px 10px -4px rgba(3,16,38,.3);
  transition:transform .15s ease;
}
.wfp[data-ferramenta="notas"] .nt-mapa[data-estilo="adesivo"] .nt-card.fx-cor-custom{
  background:color-mix(in srgb, var(--fx-no-cor) 8%, var(--surface-0));
}
.nt-mapa[data-estilo="adesivo"] .nt-card:nth-of-type(odd){ transform:rotate(-1deg); }
.nt-mapa[data-estilo="adesivo"] .nt-card:nth-of-type(even){ transform:rotate(1.2deg); }
.nt-mapa[data-estilo="adesivo"] .nt-card:hover,
.nt-mapa[data-estilo="adesivo"] .nt-card:focus-within{ transform:rotate(0deg); }

/* miniaturas do popup «Novo projeto» */
.exf-notas{ display:flex; flex-direction:column; gap:5px; }
.exf-notas i{
  border-left:3px solid #185FA5; background:var(--surface-2);
  border-radius:4px; padding:5px 7px; display:block;
}
.exf-notas b{ display:block; font-size:10px; font-weight:700; margin-bottom:3px; }
.exf-notas s{ display:block; height:3px; border-radius:2px; background:rgba(19,24,41,.16); text-decoration:none; }
.exf-notas s.c{ width:62%; margin-top:3px; }
.exf-rank{ display:grid; grid-template-columns:26px 1fr; gap:4px; align-items:stretch; }
.exf-rank u{
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  border-radius:3px; font-size:10px; font-weight:800; color:#2A3247;
}
.exf-rank span{ display:flex; gap:4px; align-items:center; background:rgba(19,24,41,.06); border-radius:3px; padding:3px; }
.exf-rank b{ width:16px; height:16px; border-radius:3px; display:block; }

/* =====================================================================
   RANQUEAMENTO / TIER LIST (03/09/2026, pedido do Matteo)

   O desenho é o das imagens que ele mandou: uma coluna de rótulos
   coloridos à esquerda e, ao lado de cada um, a pista onde os itens
   ficam. O que muda em relação às imagens de referência é a moldura —
   fundo e bordas são os da Vanitelli, e a cor de cada faixa é escolhida
   por ele, não fixa.

   ⚠️ O item é sempre um QUADRADO. Imagem larga entra cortada
   (object-fit:cover), não espremida — foi o pedido: «se a imagem for
   horizontal, você deixa ela só quadrada, vai ficar meio cortado».
   ===================================================================== */
.rk-quadro{
  border:1.5px solid var(--border-strong); border-radius:12px; overflow:hidden;
  background:var(--surface-2);
}
.rk-linha{
  display:flex; align-items:stretch; gap:0;
  border-bottom:1.5px solid var(--border-strong);
}
.rk-linha:last-child{ border-bottom:0; }

/* o rótulo colorido da faixa, com o nome editável dentro */
.rk-rotulo{
  flex:0 0 84px; width:84px; min-height:76px;
  display:flex; align-items:center; justify-content:center; padding:4px;
}
.wfp .rk-rotulo input.rk-rotulo-nome{
  width:100%; border:0; background:transparent; box-shadow:none; padding:0;
  text-align:center; font-family:inherit; font-size:15px; font-weight:800;
  color:#1B2136; line-height:1.15;
}
.rk-rotulo-nome::placeholder{ color:rgba(27,33,54,.45); }

/* a pista: onde os itens daquela faixa ficam */
.rk-pista{
  flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:6px;
  align-content:flex-start; padding:6px; background:var(--surface-1);
}
.rk-linha-acoes{
  flex:0 0 auto; display:flex; align-items:center; gap:4px;
  padding:0 8px; background:var(--surface-1);
  border-left:1px solid var(--border);
}

/* ---- o quadradinho de cada coisa ranqueada ---- */
.rk-item{
  position:relative; width:64px; height:64px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); border-radius:8px;
  background:var(--surface-0); overflow:hidden; cursor:grab;
}
.rk-item.rk-arrastando{ opacity:.45; }
.rk-img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.wfp .rk-item textarea.rk-item-nome{
  width:100%; height:100%; min-height:0; border:0; background:transparent; box-shadow:none;
  padding:4px 3px; text-align:center; font-family:inherit; font-size:10.5px;
  font-weight:650; color:var(--text-primary); line-height:1.2;
  resize:none; overflow:hidden; word-break:break-word;
  display:flex; align-items:center;
}
.rk-item-nome:focus{ outline:none; }
.rk-item-nome::placeholder{ color:var(--text-muted); font-weight:500; }

/* as açõezinhas do item só no hover — o quadro parado mostra só a coisa.
   ⚠️ display:none, não opacity (mesma lição do resto do portal). */
/* ⚠️ NA BASE, e não no canto de cima: o quadrado tem 64px e três botões no
   canto tapavam o nome inteiro. Embaixo, numa faixa, o nome (que é
   centralizado) continua legível por cima. */
.rk-item-acoes{
  display:none; position:absolute; left:0; right:0; bottom:0; gap:3px;
  justify-content:center; padding:2px 0;
  background:rgba(255,255,255,.94);
  box-shadow:0 -1px 4px rgba(3,16,38,.16);
}
.rk-item:hover > .rk-item-acoes, .rk-item:focus-within > .rk-item-acoes{ display:flex; }
.rk-mini{
  width:18px; height:18px; padding:0; border:0; border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text-secondary);
  font-size:10px; line-height:1; cursor:pointer; font-family:inherit;
}
.rk-mini svg{ width:12px; height:12px; display:block; }
.rk-mini:hover{ background:var(--green-soft); color:var(--green-dark); }

/* onde se pode soltar o que está sendo arrastado */
.rk-alvo{ outline:2px dashed var(--green); outline-offset:-3px; background:var(--green-soft); }

.rk-barra{ display:flex; gap:8px; margin:12px 0 0; }
.rk-bandeja-tit{
  margin:18px 0 6px; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted);
}
.rk-bandeja{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  min-height:76px; padding:6px;
  border:1.5px dashed var(--border-strong); border-radius:12px;
  background:var(--surface-1);
}

@media(max-width:760px){
  .rk-rotulo{ flex-basis:60px; width:60px; }
  .rk-item{ width:54px; height:54px; }
}

/* ---------------------------------------------------------------------
   NOTAS — 2ª versão (03/09/2026, no mesmo dia)

   A 1ª saiu errada. O que ele descreveu depois: «tipo um Kanban, só que
   diferente. Adiciono um, colo a logo com Ctrl+V, aparece o quadradinho
   com a logo. O título, e embaixo Informações, um espaço grande. Do lado
   do bloco tem um maisinho, e aparece outro bloco com animação. Na parte
   de texto eu adiciono notas diferentes: escrevo, clico em Concluir, e
   consigo adicionar outra nota dentro daquele quadrado.»
   --------------------------------------------------------------------- */
.nt-mapa{
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start;
  grid-template-columns:none;   /* desfaz a grade da 1ª versão */
}
.nt-card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  width:300px; flex:0 0 auto;
  background:var(--surface-2); border:1.5px solid var(--border-strong);
  border-radius:12px; padding:12px 13px 11px;
  animation:nt-entra .22s ease both;
}
@keyframes nt-entra{
  from{ opacity:0; transform:translateY(6px) scale(.97); }
  to{ opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce){ .nt-card{ animation:none; } }

/* o bloco escolhido é o que recebe o Ctrl+V — precisa aparecer */
.nt-card.nt-escolhido{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }

/* topo: a logo colada + o título */
.nt-topo{ display:flex; align-items:center; gap:9px; }
.nt-logo{
  flex:0 0 auto; width:46px; height:46px; border-radius:9px; overflow:hidden;
  background:var(--surface-0); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.nt-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.nt-logo.vazia{ border-style:dashed; }
.nt-logo.vazia span{ font-size:8.5px; font-weight:700; color:var(--text-muted); letter-spacing:.02em; }

.nt-rot{
  font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-muted); margin-top:2px;
}

/* ---- as notas de dentro do bloco ---- */
.nt-notas{ display:flex; flex-direction:column; gap:6px; }
.nt-nota{
  position:relative; border:1px solid var(--border); border-radius:9px;
  background:var(--surface-0); padding:8px 10px; cursor:text;
}
.nt-nota-txt{ font-size:12.5px; line-height:1.5; color:var(--text-secondary); white-space:pre-wrap; word-break:break-word; }
.nt-nota-acoes{
  display:none; position:absolute; top:4px; right:5px; gap:3px;
  padding:2px; border-radius:6px; background:var(--surface-0);
  box-shadow:0 1px 4px rgba(3,16,38,.2);
}
.nt-nota:hover > .nt-nota-acoes{ display:flex; }
.nt-nota-abre{ border-color:var(--green); cursor:auto; }
.wfp .nt-nota textarea.nt-nota-campo{
  width:100%; border:0; background:transparent; box-shadow:none; padding:0;
  font-family:inherit; font-size:12.5px; line-height:1.5; color:var(--text-primary);
  resize:vertical; min-height:76px;
}
.nt-nota-campo:focus{ outline:none; }
.nt-nota-pe{ display:flex; gap:6px; margin-top:8px; }

.nt-add-nota{
  align-self:flex-start; border:1px dashed var(--border-strong); border-radius:8px;
  background:transparent; color:var(--text-secondary);
  font-family:inherit; font-size:11.5px; font-weight:650;
  padding:5px 10px; cursor:pointer;
}
.nt-add-nota:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-soft); }
.nt-mini{
  border:1px solid var(--border); border-radius:7px; background:var(--surface-1);
  color:var(--text-secondary); font-family:inherit; font-size:10.5px; font-weight:650;
  padding:3px 7px; cursor:pointer;
}
.nt-mini:hover{ border-color:var(--green); color:var(--green-dark); }

/* o "+" ao lado do último bloco */
.nt-mais{
  flex:0 0 auto; width:46px; align-self:stretch; min-height:120px;
  border:1.5px dashed var(--border-strong); border-radius:12px;
  background:transparent; color:var(--text-muted);
  font-size:24px; font-weight:300; line-height:1; cursor:pointer; font-family:inherit;
}
.nt-mais:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-soft); }

/* item escolhido no Ranqueamento (o que recebe o Ctrl+V) */
.rk-item.rk-escolhido{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }

/* ---- a tira dos projetos ligados, no topo do projeto ---- */
.wfp-ligados{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 14px; }
.wfp-ligados-rot{
  font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-muted);
}
.wfp-ligado{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--border); border-left:3px solid var(--c, var(--green));
  border-radius:8px; background:var(--surface-1); color:var(--text-secondary);
  font-size:11.5px; font-weight:600; padding:4px 9px; text-decoration:none;
}
.wfp-ligado:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-soft); }

/* ---- popup do «Adicionar outro projeto» ---- */
.wfp-ligar-opcoes{ display:grid; gap:10px; }
.wfp-ligar-op{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  border:1.5px solid var(--border); border-radius:11px;
  background:var(--surface-1); padding:13px 15px; font-family:inherit; cursor:pointer;
}
.wfp-ligar-op b{ font-size:13px; color:var(--text-primary); }
.wfp-ligar-op span{ font-size:11.5px; color:var(--text-muted); line-height:1.45; }
button.wfp-ligar-op:hover{ border-color:var(--green); background:var(--green-soft); }
.wfp-ligar-form{ cursor:auto; }
.wfp-ligar-form select{ margin-top:7px; }
.wfp-ligar-form button{ align-self:flex-start; margin-top:8px; }
.wfp-ligar-vazio{ cursor:auto; opacity:.7; }

/* ---------------------------------------------------------------------
   ABAS DOS PROJETOS CONECTADOS (03/09/2026)

   «Criei o projeto 1 e conecto com o projeto 2: ficam as duas abas em
   cima. Se eu entrar direto no projeto 2, aparece a aba do projeto 1
   também, porque eles são conectados.» As abas são do GRUPO, não de quem
   está aberto — por isso a barra é a mesma entrando por qualquer uma.
   --------------------------------------------------------------------- */
.wfp-abas{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:4px;
  margin:0 0 16px; padding-bottom:0;
  border-bottom:2px solid var(--border);
}
.wfp-aba{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; margin-bottom:-2px;
  border:2px solid transparent; border-bottom:0;
  border-radius:10px 10px 0 0;
  background:var(--surface-1); color:var(--text-secondary);
  font-size:12.5px; font-weight:650; text-decoration:none;
  max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wfp-aba svg{ flex-shrink:0; color:var(--c, var(--green)); }
.wfp-aba:hover{ background:var(--surface-2); color:var(--text-primary); }
/* a aba aberta encosta na página: fundo do conteúdo e sem risco embaixo */
.wfp-aba.ativa{
  background:var(--surface-0); color:var(--text-primary);
  border-color:var(--border); border-bottom:2px solid var(--surface-0);
  box-shadow:0 -2px 0 var(--c, var(--green)) inset;
}
.wfp-aba-mais{
  width:32px; height:32px; margin-bottom:2px; padding:0;
  border:1.5px dashed var(--border-strong); border-radius:8px;
  background:transparent; color:var(--text-muted);
  font-size:17px; line-height:1; cursor:pointer; font-family:inherit;
}
.wfp-aba-mais:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-soft); }

/* ---------------------------------------------------------------------
   NOTAS: o bloco é uma COLUNA ALTA (03/09/2026, 3ª rodada)
   «Ficou muito pequeno, você fez só um quadradinho. Eu quero que seja
   longo verticalmente. Deixa um pouquinho maior horizontalmente também,
   só um pouquinho, mas bastante verticalmente.»
   --------------------------------------------------------------------- */
.nt-card{
  width:340px;
  min-height:560px;
}
/* a pilha de notas ocupa o que sobra da altura, e rola dentro quando passa */
.nt-notas{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.nt-mais{ min-height:560px; }
@media(max-width:760px){
  .nt-card{ width:100%; min-height:420px; }
  .nt-mais{ width:100%; min-height:56px; }
}

/* ---------------------------------------------------------------------
   Ranqueamento — a coluna de ações da faixa (03/09/2026)

   ⚠️ LARGURA FIXA. Sem ela, uma faixa com uma seta a menos (a primeira e a
   última) encolhia a coluna e a fileira inteira terminava mais à direita —
   «tem algumas que a linha da cor está mais para a direita, tem que estar
   todas na mesma linha». Agora as duas setas existem sempre (a que não
   serve vem desabilitada) E a coluna tem medida própria, então nenhuma
   fileira depende do que tem dentro dela.
   --------------------------------------------------------------------- */
.rk-linha-acoes{
  flex:0 0 122px; width:122px;
  justify-content:flex-end;
}
.rk-linha-acoes .fx-mv:disabled{ opacity:.25; cursor:default; }
.rk-linha-acoes .fx-mv:disabled:hover{ background:transparent; transform:none; }

/* o lixo da faixa: tamanho de botão de verdade, e vermelho ao passar o
   mouse — antes era um mini de 18px que o Matteo não conseguia acertar */
.rk-apagar{ margin-left:2px; }
.rk-apagar:hover:not(:disabled){
  border-color:#B4322F; color:#B4322F; background:#FDF3F2;
}

/* ---------------------------------------------------------------------
   Ranqueamento — o quadrado «pronto» (03/09/2026)

   O play fecha o quadrado: «é porque eu terminei de usar ele». Fechado,
   passar o mouse não abre mais os botõezinhos — «não acontece nada, só
   fica uma animaçãozinha de pop bem sutil». Duplo clique reabre.
   --------------------------------------------------------------------- */
.rk-item{ transition:transform .13s ease, box-shadow .13s ease; }
.rk-pronto{ cursor:grab; }
.rk-pronto:hover{
  transform:scale(1.06);
  box-shadow:0 3px 10px -3px rgba(3,16,38,.3);
  z-index:2;
}
@media(prefers-reduced-motion:reduce){
  .rk-item{ transition:none; }
  .rk-pronto:hover{ transform:none; }
}
/* nome de quadrado fechado: texto, não campo */
.rk-item-lido{
  width:100%; padding:4px 3px; text-align:center;
  font-size:10.5px; font-weight:650; color:var(--text-primary); line-height:1.2;
  word-break:break-word; user-select:none;
}
/* o play fica verde: é o botão que "conclui" */
.rk-pronto-bt:hover{ background:var(--green-soft); color:var(--green-dark); }

/* =====================================================================
   CADERNO (14/09/2026, ideia do Matteo)

   «Vai ter literalmente a aparência de um caderno... vou ver a página da
   esquerda e a da direita, com o caderno aberto e a borda bem realista em
   volta, como se eu tivesse o caderno aberto na minha frente.»

   O desenho é: mesa escura -> capa de couro (a borda que aparece em volta
   das folhas) -> as duas folhas -> o vinco no meio. A "realidade" vem de
   três coisas somadas: a sombra funda embaixo do livro, o degradê escuro
   junto ao vinco (papel curvando para dentro) e a pilha de folhas nas
   bordas de fora.
   ===================================================================== */
.wfp[data-ferramenta="caderno"]{ --fx:#A9714B; }

.cad-mesa{
  display:flex; justify-content:center;
  padding:26px 16px 30px;
  border-radius:16px;
  background:
    radial-gradient(120% 100% at 50% 0%, #6d6f74 0%, #4a4c50 60%, #3c3e42 100%);
}

/* a capa de couro: é ela que aparece como moldura em volta das folhas */
.cad-livro{
  position:relative; display:flex; align-items:stretch;
  width:min(1180px, 100%);
  padding:16px;
  border-radius:12px 14px 14px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.16)),
    linear-gradient(90deg, #B97A50 0%, #A9714B 48%, #96613E 52%, #A9714B 56%, #B97A50 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.18) inset,
    0 26px 50px -18px rgba(0,0,0,.65),
    0 60px 90px -40px rgba(0,0,0,.5);
}
/* costura da capa, como no caderno da foto */
.cad-livro::before{
  content:''; position:absolute; inset:7px; border-radius:9px;
  border:1px dashed rgba(255,255,255,.22); pointer-events:none;
}

.cad-pagina{
  position:relative; flex:1 1 0; min-width:0;
  background:
    linear-gradient(180deg, #fffdf6 0%, #fdfaf0 100%);
  min-height:620px; padding:34px 30px 40px;
  overflow:hidden;
}
/* a pilha de folhas: fininhas linhas na borda de fora */
.cad-esq{
  border-radius:8px 2px 2px 8px;
  box-shadow:
    inset 8px 0 14px -10px rgba(0,0,0,.5),
    -1px 0 0 #f1ece0, -2px 0 0 #e9e3d4, -3px 0 0 #f3eee2, -4px 0 0 #e6dfd0;
}
.cad-dir{
  border-radius:2px 8px 8px 2px;
  box-shadow:
    inset -8px 0 14px -10px rgba(0,0,0,.5),
    1px 0 0 #f1ece0, 2px 0 0 #e9e3d4, 3px 0 0 #f3eee2, 4px 0 0 #e6dfd0;
}
/* o papel curvando para dentro, junto ao vinco */
.cad-esq::after, .cad-dir::after{
  content:''; position:absolute; top:0; bottom:0; width:56px; pointer-events:none;
}
.cad-esq::after{ right:0; background:linear-gradient(90deg, rgba(90,60,35,0) 0%, rgba(90,60,35,.16) 100%); }
.cad-dir::after{ left:0;  background:linear-gradient(270deg, rgba(90,60,35,0) 0%, rgba(90,60,35,.16) 100%); }

.cad-vazia{ background:linear-gradient(180deg, #f4f0e6 0%, #efeade 100%); }

/* o vinco do meio */
.cad-vinco{
  flex:0 0 18px; width:18px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.06) 50%,
                    rgba(0,0,0,.14) 70%, rgba(0,0,0,.34) 100%);
}

.cad-corpo{ display:flex; flex-direction:column; gap:10px; min-height:100%; }
.cad-num{
  position:absolute; bottom:14px; left:0; right:0; text-align:center;
  font-family:'Caveat', cursive; font-size:15px; color:#9b8f76;
}
.cad-dir .cad-num{ text-align:center; }

/* ---- a letra de mão ----
   ⚠️ `white-space:pre-wrap` é o que faz o texto quebrar sozinho na linha
   de baixo, como papel, e ainda guardar o Enter de quem escreveu. */
/* ⚠️ EXCEÇÃO AO CAIXA ALTA DO PORTAL INTEIRO (14/09/2026). O `body` tem
   `text-transform:uppercase` de propósito, e um <div contenteditable>
   HERDA isso (campo e botão não herdam — por isso as outras ferramentas
   não pegaram). Letra de mão em CAIXA ALTA não parece escrita à mão, e o
   próprio pedido do Matteo falava em «vários tipos de i minúscula». Então
   o caderno — e só ele — escreve em caixa normal. */
.wfp[data-ferramenta="caderno"] .cad-txt,
.wfp[data-ferramenta="caderno"] .cad-num,
.wfp[data-ferramenta="caderno"] .cad-des-vazio,
.cad-mini-num{ text-transform:none; }

.wfp[data-ferramenta="caderno"] .cad-txt{
  font-family:'Caveat', 'Segoe Script', cursive;
  font-size:25px; line-height:1.62; color:#22314e;
  white-space:pre-wrap; word-break:break-word;
  outline:none; border:0; background:transparent;
  padding:2px 2px; min-height:1.62em;
  font-feature-settings:"calt" 1, "liga" 1, "clig" 1;
  transform-origin:left center;
}
.cad-txt:empty::before{
  content:attr(data-vazio); color:#b9b0a0;
}
.cad-txt.cad-alvo{ box-shadow:0 2px 0 var(--green); }

/* ---- o quadro de desenho dentro da página ---- */
.cad-des{
  position:relative; align-self:stretch; cursor:pointer;
  border:1px solid rgba(90,60,35,.25); border-radius:6px;
  background:rgba(255,255,255,.65);
  padding:4px;
}
.cad-des:hover{ border-color:var(--green); }
.cad-des.arrastando{ opacity:.45; }
.cad-des-cv{ display:block; width:100%; height:auto; }
.cad-des-vazio{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Caveat', cursive; font-size:20px; color:#b4a993; pointer-events:none;
}
.cad-des-x{
  position:absolute; top:5px; right:5px; width:22px; height:22px; padding:0;
  display:none; align-items:center; justify-content:center;
  border:1px solid rgba(90,60,35,.3); border-radius:6px;
  background:rgba(255,255,255,.95); color:#8a7a62; cursor:pointer; font-family:inherit; font-size:11px;
}
.cad-des:hover > .cad-des-x{ display:flex; }
.cad-des-x:hover{ border-color:#B4322F; color:#B4322F; }

/* ---- barra de ferramentas e rodapé ---- */
.cad-tools{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cad-bt{
  border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
  color:var(--text-secondary); font-family:inherit; font-size:11.5px; font-weight:650;
  padding:6px 12px; cursor:pointer;
}
.cad-bt:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-soft); }
.cad-pe{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.cad-seta{
  width:34px; height:30px; padding:0; border:1px solid var(--border); border-radius:8px;
  background:var(--surface-2); color:var(--text-secondary);
  font-family:inherit; font-size:17px; line-height:1; cursor:pointer;
}
.cad-seta:hover:not(:disabled){ border-color:var(--green); color:var(--green-dark); }
.cad-seta:disabled{ opacity:.3; cursor:default; }
.cad-conta{ font-size:11.5px; font-weight:650; color:var(--text-muted); min-width:120px; text-align:center; }

/* ---- pop-ups (desenho e páginas) ---- */
.cad-ov{
  position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(12,16,28,.55);
}
.cad-ov-caixa{
  display:flex; flex-direction:column; gap:12px;
  width:min(980px, 100%); max-height:92vh; overflow:auto;
  background:var(--surface-0); border-radius:14px; padding:16px 18px;
  box-shadow:0 30px 80px rgba(12,16,28,.45);
}
.cad-ov-cab{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cad-ov-cab b{ font-size:15px; }
.cad-ov-pe{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cad-ov-acoes{ display:flex; gap:8px; margin-left:auto; }

.cad-barra{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-left:auto; }
.cad-ferr{
  width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-1);
  color:var(--text-secondary); cursor:pointer; font-family:inherit;
}
.cad-ferr svg{ width:16px; height:16px; display:block; }
.cad-ferr:hover{ border-color:var(--green); color:var(--green-dark); }
.cad-ferr.ativa{ border-color:var(--green); background:var(--green-soft); color:var(--green-dark); }
.cad-cor{
  width:20px; height:20px; padding:0; border:2px solid transparent; border-radius:50%;
  cursor:pointer; box-shadow:0 0 0 1px var(--border);
}
.cad-cor.ativa{ border-color:#fff; box-shadow:0 0 0 2px var(--green); }
.cad-esp{ width:92px; }
.cad-cheio{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--text-muted); cursor:pointer; }
.cad-sep{ width:1px; height:20px; background:var(--border); margin:0 3px; }

.cad-palco{ background:#f3f1ea; border:1px solid var(--border); border-radius:10px; padding:8px; overflow:auto; }
.cad-cv{ display:block; width:100%; height:auto; background:#fffdf6; border-radius:6px; cursor:crosshair; }

/* ---- miniaturas das páginas ---- */
.cad-pgs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:12px; }
.cad-mini{
  position:relative; cursor:grab; border:1.5px solid var(--border); border-radius:8px;
  background:#fffdf6; padding:8px; min-height:140px;
}
.cad-mini:hover{ border-color:var(--green); }
.cad-mini.arrastando{ opacity:.4; }
.cad-mini.alvo{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.cad-mini-folha{ display:flex; flex-direction:column; gap:5px; }
.cad-mini-linha{ display:block; height:3px; border-radius:2px; background:rgba(34,49,78,.22); }
.cad-mini-linha:last-child{ width:62%; }
.cad-mini-des{ display:block; height:34px; border-radius:3px; border:1px dashed rgba(90,60,35,.4); background:rgba(90,60,35,.06); }
.cad-mini-num{
  position:absolute; bottom:4px; right:7px;
  font-family:'Caveat', cursive; font-size:14px; color:#9b8f76;
}

/* miniatura do popup "Novo projeto" */
.exf-cad{ display:flex; gap:3px; height:64px; }
.exf-cad i{ flex:0 0 12px; border-radius:3px 1px 1px 3px; background:linear-gradient(180deg,#B97A50,#96613E); }
.exf-cad u{ flex:1; display:flex; flex-direction:column; gap:4px; justify-content:center;
  text-decoration:none; background:#fffdf6; border-radius:1px 4px 4px 1px; padding:8px 9px; }
.exf-cad s{ display:block; height:3px; border-radius:2px; background:rgba(34,49,78,.25); text-decoration:none; }
.exf-cad s.c{ width:55%; }
.exf-cad b{ display:block; height:16px; border-radius:2px; border:1px dashed rgba(90,60,35,.45); }

@media(max-width:760px){
  .cad-livro{ flex-direction:column; padding:10px; }
  .cad-vinco{ width:auto; height:10px; flex:0 0 10px;
    background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.08), rgba(0,0,0,.3)); }
  .cad-pagina{ min-height:380px; padding:20px 16px 28px; border-radius:6px; }
  .cad-esq::after, .cad-dir::after{ display:none; }
}

/* ---------------------------------------------------------------------
   Caderno: a barra com ícone, e a FERRAMENTA dentro da página
   (14/09/2026, pedido do Matteo)
   --------------------------------------------------------------------- */
.cad-bt-ico{ display:inline-flex; align-items:center; gap:6px; }
.cad-bt-ico svg{ width:15px; height:15px; display:block; flex-shrink:0; }

/* o quadro da ferramenta: mesma cara do quadro de desenho, com uma faixa
   em cima dizendo o que é (um fluxograma sem nome vira adivinhação) */
.cad-fer{
  position:relative; cursor:pointer;
  border:1px solid rgba(90,60,35,.25); border-radius:6px;
  background:rgba(255,255,255,.7); padding:4px;
}
.cad-fer:hover{ border-color:var(--green); }
.cad-fer.arrastando{ opacity:.45; }
.cad-fer-faixa{
  display:flex; align-items:center; gap:7px; padding:3px 6px 6px;
  border-bottom:1px dashed rgba(90,60,35,.22); margin-bottom:6px;
}
.wfp[data-ferramenta="caderno"] .cad-fer-faixa b{
  font-family:'Caveat', cursive; font-size:19px; font-weight:700;
  color:#22314e; text-transform:none;
}
.cad-fer-selo{
  margin-left:auto; font-size:9px; font-weight:700; letter-spacing:.06em;
  padding:2px 7px; border-radius:99px; background:var(--green-soft); color:var(--green-dark);
}
/* ⚠️ A ferramenta é montada em tamanho real e ENCOLHIDA por transform: é
   o que a faz «se adaptar e ficar menor do que é necessário». `overflow`
   corta o que passar, e a altura do palco é calculada no JS a partir da
   escala — sem isso sobraria um buraco embaixo do tamanho original. */
.cad-fer-palco{ overflow:hidden; position:relative; }
.cad-fer-interno{
  transform-origin:top left; width:900px;
  pointer-events:none;   /* o clique é do quadro, que abre o pop-up */
}

/* o pop-up de edição da ferramenta: bem maior, é onde se trabalha */
.cad-ov-fer{ width:min(1240px, 100%); }
.cad-fer-edicao{
  border:1px solid var(--border); border-radius:10px; padding:12px;
  background:var(--surface-1); overflow:auto; max-height:70vh;
}
/* ⚠️ Sem o prefixo `.wfp`: os pop-ups do caderno nascem em document.body,
   FORA do cartão do projeto — um seletor começando em `.wfp` nunca casaria
   com eles, e o nome saía em caixa alta (achado na tela, 14/09/2026). */
.cad-ov-fer input.cad-fer-nome{
  flex:1; min-width:180px; border:0; border-bottom:1.5px dashed var(--border);
  background:transparent; box-shadow:none; border-radius:0; padding:2px 0;
  font-family:'Caveat', cursive; font-size:23px; font-weight:700; color:#22314e;
  text-transform:none;
}
.cad-fer-nome:focus{ outline:none; border-bottom-color:var(--green); }
/* o texto do caderno dentro dos pop-ups tambem escapa do caixa alta */
.cad-ov .cad-txt, .cad-ov .cad-fer-faixa b, .cad-ov-fer .cad-fer-nome{ text-transform:none; }
.cad-fer-tag{
  font-size:10px; font-weight:700; letter-spacing:.06em;
  padding:3px 9px; border-radius:99px; background:var(--surface-2); color:var(--text-muted);
}

/* o escolhedor de ferramenta */
.cad-fers{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:9px; }
.cad-fer-op{
  text-align:left; border:1.5px solid var(--border); border-radius:10px;
  background:var(--surface-1); padding:11px 13px; cursor:pointer; font-family:inherit;
}
.cad-fer-op b{ font-size:12.5px; color:var(--text-primary); }
.cad-fer-op:hover{ border-color:var(--green); background:var(--green-soft); }

/* =====================================================================
   ROTINAS DO AGENTE (15/09/2026)
   A pessoa escreve o que a IA dela deve fazer e de quanto em quanto
   tempo. O aviso do topo existe para ninguém achar que o Portal executa
   sozinho — ele guarda o combinado, quem faz é a IA de quem criou.
   ===================================================================== */
.rot-aviso{
  border:1px solid var(--border); border-left:3px solid var(--green);
  border-radius:var(--radius); background:var(--surface-1);
  padding:13px 16px; margin-bottom:18px;
  font-size:12.5px; line-height:1.6; color:var(--text-secondary);
}
.rot-aviso b{ color:var(--text-primary); }

.rot-form{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-0); padding:16px 18px; margin-bottom:22px;
}
.rot-form h3{ margin:0 0 14px; font-size:14px; }
.rot-quando{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.rot-quando .field{ min-width:170px; }
.rot-ativa{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:12.5px; color:var(--text-secondary); margin:10px 0 2px;
}

.rot-titulo{ font-size:14px; margin:24px 0 10px; }
.rot-lista{ display:flex; flex-direction:column; gap:10px; }
.rot-item{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-0); padding:13px 16px;
}
.rot-item.desligada{ opacity:.62; }
.rot-item-topo{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px; }
.rot-item-topo b{ font-size:13.5px; }
.rot-dono{ margin-left:auto; font-size:11px; color:var(--text-muted); }
.rot-instrucao{
  font-size:12.5px; line-height:1.55; color:var(--text-secondary);
  white-space:pre-wrap; word-break:break-word;
  border-left:2px solid var(--border); padding-left:11px; margin-bottom:9px;
}
.rot-item-pe{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:11.5px; color:var(--text-muted);
  border-top:1px solid var(--border); padding-top:9px;
}
.rot-acoes{ display:flex; gap:6px; margin-left:auto; align-items:center; }
.rot-tag{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:3px 9px; border-radius:99px;
  background:var(--surface-2); color:var(--text-secondary);
}
.rot-tag.off{ background:rgba(180,50,47,.12); color:#B4322F; }
.rot-tag.ok{ background:var(--green-soft); color:var(--green-dark); }
.rot-tag.erro{ background:rgba(180,50,47,.12); color:#B4322F; }

.rot-chave{ border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-1); padding:12px 16px; margin-bottom:20px; font-size:12.5px; }
.rot-chave summary{ cursor:pointer; font-weight:650; color:var(--text-secondary); }
.rot-chave p{ margin:10px 0; color:var(--text-muted); line-height:1.55; }
.rot-chave input{ width:100%; font-family:ui-monospace, monospace; font-size:11.5px; margin-bottom:8px; }