@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;
  /* ⚠️ AS CORES DO SISTEMA SAO SEMPRE AS DO VNT (14/09/2026, pedido do
     Matteo). Ate aqui a empresa cliente escolhia duas cores na tela de
     Marca e o sistema inteiro se pintava com elas. Nao faz mais: a tela
     de Marca so recebe a LOGO. Estas duas variaveis ficam porque meia
     duzia de regras la embaixo ja as usa; agora elas sao fixas, e so a
     cor do BRACO (CRM, Marketing...) sobrescreve --marca-1. */
  --marca-1:#84BC25; --marca-1-txt:#FFFFFF;
  --marca-2:#031026; --marca-2-txt:#FFFFFF;
  --navy-900:#0E1220; --navy-800:#141A2C; --navy-700:#1C2338; --navy-600:#2A3248;
  /* Verde padrão do site — trocado em 10/09/2026 (pedido do Fred, era
     #76B82A). --green-dark/--green-soft recalculados com a MESMA fórmula
     de cor_misturar() em bracos.php (22% pro preto, 88% pro branco), pra
     não destoar de onde ainda são calculados dinamicamente. */
  --green:#84BE06; --green-dark:#679405; --green-soft:#F0F7E1;
  /* ⚠️ --verde é APELIDO de --green. Eu escrevi var(--verde) em regras
     novas sem a variável existir — e variável indefinida faz o navegador
     jogar a propriedade fora, calado. Os dois nomes valem; quem manda é
     --green (produto_css em bracos.php trocava os dois por produto —
     desligado em 10/09/2026, ver o próprio arquivo). */
  --verde:var(--green);

  --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.

   ⚠️ A ÚLTIMA CAMADA É A PAREDE, E ELA LÊ --vnt-fundo (10/09/2026,
   achado numa auditoria). Esta camada é OPACA e fica em `z-index:-1`,
   ou seja, pinta POR CIMA do `background` do body. Enquanto ela trazia
   um gradiente quase branco escrito à mão, o `--vnt-fundo` que o Matteo
   mandou escurecer DUAS VEZES só aparecia na faixa de cima — a parede
   continuava branca, e ele continuava sem conseguir separar o bloco do
   fundo. Quem quiser mudar a cor da parede muda --vnt-fundo, e só. */
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,.14), transparent 62%),
    radial-gradient(680px 460px at 96% 8%, rgba(118,184,42,.09), transparent 60%),
    radial-gradient(900px 620px at 50% 108%, rgba(24,95,165,.07), transparent 62%),
    var(--vnt-fundo, #D6DCEA);
}
/* 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; }
/* A barra lateral é a identidade do Vnt (02/09/2026, pedido do Matteo):
   o azul do LOGO (#031026 — o escuro de verdade, não o azul médio do CSS)
   com o verde da marca. Uma "espinha" verde na borda esquerda e uma luz
   verde subindo do canto: é o que a torna reconhecível de longe. A área
   principal, ao contrário, é pintada com as cores de cada EMPRESA. */
#sidebar{
  width:290px; flex-shrink:0; align-self:stretch;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
  background:
    radial-gradient(520px 380px at -10% 108%, rgba(132,188,37,.28), transparent 62%),
    radial-gradient(420px 300px at 110% -8%, rgba(24,95,165,.22), transparent 60%),
    linear-gradient(172deg,#041530 0%,#031026 48%,#020B1C 100%);
  padding:22px 14px 20px; color:#fff;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05);
}
#sidebar::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#84BC25 0%,#5C951C 60%,rgba(132,188,37,.25) 100%);
  pointer-events:none;
}
#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; }

.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); }

/* ⚠️ "VOLTAR" PRECISA SER ACHADO SEM PROCURAR (10/09/2026, pedido do
   Matteo: "fico tentando procurar onde está o botão, mesmo sabendo onde
   está"). Até hoje todo link de Voltar usava `.btn-quiet` — a MESMA
   classe transparente de qualquer ação secundária (Cancelar, Fechar...),
   então ele nunca se destacava de propósito nenhum. `.btn-voltar` tem
   fundo, borda e a seta sempre no mesmo lugar (por CSS, não digitada em
   cada tela — texto com «‹»/«←» à mão ficava inconsistente).
   Some no botão, e não no texto: cada tela pode dizer "Voltar", "Voltar
   para a Agenda" etc., a seta e a moldura são sempre as mesmas. */
.btn-voltar{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-1); border:1.5px solid var(--border);
  color:var(--text-primary); font-weight:700;
}
.btn-voltar::before{ content:'←'; font-weight:800; }
.btn-voltar:hover{ background:var(--surface-2, var(--surface-1)); border-color:var(--green); color:var(--green-dark); }
/* 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);
}
/* 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; }
/* "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; }
.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; }
.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; }

/* ================= 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);
}
.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; }

/* 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;
}
.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); }
/* 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; }
.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); }
.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); }

/* "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), sempre em tom
   claro: até 3 dias verde · 4 a 10 laranja · 11+ vermelho. */
.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.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; }
.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. */
.pfl-painel-leads .pfl-linha{
  grid-template-columns:
    minmax(168px, .8fr)    /* etapa   */
    158px                  /* status  */
    minmax(180px, 1.5fr)   /* lead    */
    38px                   /* WhatsApp — só o ícone (2026-08-26) */
    minmax(182px, 1.1fr)   /* produto */
    54px                   /* reunião — só o calendarinho */
    68px                   /* faturamento — <100K é o mais largo */
    54px                   /* obs — só o número */
    116px                  /* contatei (2026-08-06) */
    150px                  /* próximo contato */
    104px;                 /* fechou  */
}
.pfl-painel-leads{ min-width:1218px; }  /* soma das colunas acima */
/* 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; }
/* célula de botão não corta o que tem dentro */
.pfl-painel-leads .pfl-cel-bt{ overflow:visible; text-overflow:clip; }
/* OBS e FECHOU centralizados na propria coluna (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{ display:flex; align-items:center; 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; }

/* 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; } }

/* 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); }
.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; }

/* 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-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; }
.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;
}
/* ⚠️ COMPENSA A BARRA DE ROLAGEM (10/09/2026). O cabeçalho (dias da
   semana) fica FORA do `.tg-scroll`, que rola só o corpo de horas. Quando
   o corpo é mais alto que a tela e ganha barra de rolagem vertical, ele
   fica alguns pixels mais estreito que o cabeçalho — e as colunas dos dois
   desalinham (foi o que o Matteo viu na foto: a linha de baixo do dia não
   bate com a linha de cima da hora). `--tg-scrollbar-w` é medida de
   verdade no navegador (portal.js) e vira o respiro à direita do
   cabeçalho — 0px em quem não tem barra (celular, conteúdo curto). */
.tg{ --tg-scrollbar-w:0px; }
.tg-cabecalho, .tg-alldia{ display:flex; border-bottom:1px solid rgba(19,24,41,.08); box-sizing:border-box; padding-right:var(--tg-scrollbar-w); }
.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; }
.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; }

.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;
}
/* 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); }

/* --- 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);
}

/* --- 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); }
/* ⚠️ Desde 10/09/2026 esta linha também pode ser um `<a>` de verdade (vai
   direto para o Google quando ainda não há conexão nenhuma) — sem isto o
   texto ficava sublinhado, como qualquer link cru. */
a.ag-linha{ text-decoration:none; }
/* 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; }
}

/* ============================================================
   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%; }
}

/* 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; }
/* o selo de "conectar ao Google" ao lado do nome, na lateral da Agenda
   (10/09/2026) — ver o comentário em modulos/agenda/index.php */
.ag-lat-conectar{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:22px; height:22px; border-radius:6px; color:var(--text-muted);
  text-decoration:none; transition:background .14s ease, color .14s ease;
}
.ag-lat-conectar:hover{ background:var(--surface-1); color:var(--green-dark); }
.ag-lat-conectar 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); }

/* --- 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; }

.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-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);
  }
}
/* o "fundo branco" vira o azul da Vanitelli */

/* barra lateral PRETA */

/* 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> */


/* botão de tema: mostra a lua no claro e o sol no escuro */
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; }
}

/* 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%; }
}


/* ================================================================
   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);
}

/* 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 */

/* --- 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; }
}
/* --- 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); }
/* 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; }
}
/* ================================================================
   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; }
}

/* ============================================================
   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: precisa
   ganhar de `.wfm-caixa`, que vem antes no arquivo. */
.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. */
/* 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; }

.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; }

.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; }

  /* ---- 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; }
  /* cartão da página fixada na home: cabia só cortado (aspect-ratio 1.34
     sobre altura de 52svh estourava a largura da tela) */
  .inicio-palco .pc-card.fixada-card{ height:auto; width:min(88vw, 340px); }
}

@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; }

/* ==================================================================
   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); }

.ads-fx-etapa{ position:relative; z-index:1; background:var(--surface-0); border:1px solid var(--border);
  border-left:3px solid var(--green); border-radius:10px; padding:9px 10px;
  display:flex; flex-direction:column; gap:6px; align-self:center; }
.ads-fx-etapa b{ font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  line-height:1.25; overflow-wrap:break-word; }
.ads-fx-etapa i{ font-style:normal; font-size:10.5px; color:var(--text-muted); line-height:1.35; }
.ads-fx-mais{ display:block; width:100%; border:0; border-radius:7px; cursor:pointer;
  background:var(--green); color:#fff; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 6px; font-family:inherit; }
.ads-fx-mais:hover{ background:var(--green-dark); }
.ads-fx-ics{ display:flex; gap:4px; }
.ads-fx-ics form{ display:inline; }
.ads-fx-ic{ width:23px; height:23px; padding:0; border:1px solid var(--border); border-radius:6px;
  background:var(--surface-1); color:var(--text-secondary); font-size:11px; line-height:1; cursor:pointer;
  font-family:inherit; }
.ads-fx-ic:hover:not(:disabled){ border-color:var(--green); color:var(--green-dark); }
.ads-fx-ic:disabled{ opacity:.35; cursor:default; }
.ads-fx-ic.mal:hover{ border-color:#B4322F; color:#B4322F; }

.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. */
@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-etapa{ flex-flow:row wrap; align-items:center; }
  .ads-fx-etapa b{ flex:0 0 auto; }
  .ads-fx-etapa i{ flex:1 1 auto; }
  .ads-fx-mais{ width:auto; }
  .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 */
.adsfx-trilho{ position:relative; flex:0 0 150px; width:150px; }
.adsfx-etapa{ position:absolute; left:0; width:150px; 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 */
.ads-video-pagina{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:900px){ .ads-video-pagina{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.ads-player-caixa{ position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden;
  background:#000; margin-bottom:9px; }
.ads-player-caixa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ads-nota{ margin-top:10px; background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius); padding:11px 13px; font-size:12.5px; line-height:1.5; }

/* ==================================================================
   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);
}
.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; }

.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); }
.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);
}
.wa-caixa p{
  margin:0 0 18px; font-size:15px; line-height:1.45; color:#3b4a54; text-transform:none;
}
.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».
   ================================================================== */
.wa-abas{
  display:flex; align-items:center; gap:4px; margin:0 0 16px;
  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;
  transition:color .12s ease, background .12s ease; white-space:nowrap;
}
.wa-aba:hover{ color:var(--text-primary); background:var(--surface-1); }
.wa-aba.ativa{ color:var(--green-dark); }
.wa-aba.ativa::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-1px;
  height:2px; border-radius:2px 2px 0 0; background:var(--green);
}
.wa-aba-lado{
  padding:7px 13px; font-size:12.5px; font-weight:600; text-decoration:none;
  color:var(--text-muted); border-radius:8px;
}
.wa-aba-lado:hover{ color:var(--text-primary); background:var(--surface-1); }
@media(max-width:640px){
  .wa-abas{ overflow-x:auto; }
  .wa-aba{ padding:9px 11px 11px; font-size:12.5px; }
}

/* 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);
}

/* ---------------- 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{ padding:0 26px; margin-bottom:0; }
  .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);
}
/* no modo escolha, o trilho e a subaba ficam ACIMA do escurecido — são
   eles que a pessoa tem de clicar */
html.dupla-escolha .vnt-rail, html.dupla-escolha .vnt-sub{ z-index:70; }
html.dupla-escolha .vnt-rail{ 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 --------------------------------------------------- */
/* ⚠️ O QUADRO DA DIREITA É FIXO, NÃO ENTRA NO GRID (10/09/2026). A casa
   é um grid de três colunas; um quarto filho cairia numa linha nova.
   Quem abre espaço é o `padding-right` do grid, e os dois leem a MESMA
   medida: --dupla-fatia (o portal.js muda ela ao arrastar a alça). */
html.tela-dupla .vnt-app{
  padding-right:calc(var(--dupla-fatia, 50%) + var(--vnt-vao));
  /* ⚠️ COM A TELA DIVIDIDA A SUBABA SAI DA GRADE (10/09/2026, pedido do
     Matteo: "quando tiver páginas divididas, é para ficar suspensa na
     subaba"). São duas páginas dividindo a largura — os 200px fixos da
     subaba custavam caro. Ela vira painel SUSPENSO: fica escondida e
     entra flutuando quando o mouse encosta no trilho ou nela. */
  grid-template-columns:var(--vnt-rail-w) minmax(0, 1fr);
}
html.tela-dupla .vnt-sub{
  position:fixed; z-index:58;
  top:var(--vnt-topo-h); bottom:var(--vnt-pe);
  left:calc(var(--vnt-esq) + var(--vnt-rail-w) + var(--vnt-vao));
  width:var(--vnt-sub-w);
  box-shadow:0 12px 36px rgba(11,18,38,.26);
  opacity:0; pointer-events:none;
  transform:translateX(calc(-100% - var(--vnt-rail-w) - var(--vnt-esq) - var(--vnt-vao)));
  transition:transform .18s ease, opacity .18s ease;
}
/* irmãos na grade: encostar no trilho traz a subaba */
html.tela-dupla .vnt-rail:hover ~ .vnt-sub,
html.tela-dupla .vnt-sub:hover{ opacity:1; pointer-events:auto; transform:none; }
html.tela-dupla body.em-visita .vnt-sub{ top:calc(var(--vnt-topo-h) + 38px); }
#duplaPane{
  display:flex; flex-direction:column; min-width:0;
  position:fixed; z-index:55;
  top:var(--vnt-topo-h); bottom:var(--vnt-pe); right:var(--vnt-dir);
  width:calc(var(--dupla-fatia, 50%) - var(--vnt-dir));
  border:1px solid rgba(11,18,38,.06); border-radius:16px; overflow:hidden;
  background:var(--surface-0); box-shadow:0 6px 22px rgba(11,18,38,.10);
}
body.em-visita #duplaPane{ top:calc(var(--vnt-topo-h) + 38px); }
#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{
  position:fixed; z-index:56; width:7px; border-radius:4px;
  top:var(--vnt-topo-h); bottom:var(--vnt-pe);
  right:calc(var(--dupla-fatia, 50%) + 2px);
  cursor:col-resize; background:transparent;
  transition:background .15s ease;
}
body.em-visita #duplaAlca{ top:calc(var(--vnt-topo-h) + 38px); }
#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; }
/* ⚠️ A MESMA REGRA, PARA A CASA DE TRÊS COLUNAS (10/09/2026). Dentro do
   quadro da direita não cabe faixa, trilho nem subaba — é a página de
   fora que já mostra tudo isso; aqui só o palco. As regras de cima
   (#sidebar etc.) ficam porque nada as alcança mais, mas não fazem mal;
   estas são as que valem hoje. */
html.dupla-quadro .vnt-topo,
html.dupla-quadro .vnt-rail,
html.dupla-quadro .vnt-sub,
html.dupla-quadro .vnt-menu-cel{ display:none !important; }
html.dupla-quadro .vnt-app{
  grid-template-columns:minmax(0,1fr); padding:11px 0 0; height:100vh;
}
html.dupla-quadro .vnt-palco{ border-radius:0; border: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.

   ⚠️ SEM MARGEM NEGATIVA (11/09/2026). Era `-74px`, escrita quando o
   `main.main` era a página inteira e tinha 84px de recuo no topo — a
   faixa subia para dentro desse recuo. Na casa de três colunas o palco é
   um quadrado branco com 22px de respiro, e os -74px jogavam a faixa
   para FORA dele: ela pousava por cima da subaba e cortava a borda
   arredondada. Foi a foto que o Matteo mandou. */
#duplaCabecaEsq{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  margin:0 0 18px; 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);
}

/* ============================================================
   VNT: A BARRA E DO VNT, A AREA E DA EMPRESA (02/09/2026)
   Este bloco fica no FIM do arquivo de proposito: ele vence as regras
   antigas (inclusive as do tema escuro) pela ordem, sem !important.
   ============================================================ */

/* ---------- marca do Vnt na barra ---------- */
.vnt-marca{ display:flex; align-items:center; gap:11px; padding:6px 10px 0; margin-bottom:24px; text-decoration:none; }
.vnt-marca-simbolo{ width:34px; height:34px; display:block; flex-shrink:0; filter:drop-shadow(0 2px 6px rgba(132,188,37,.35)); }
.vnt-marca-nome{
  font-weight:800; font-size:27px; line-height:1; letter-spacing:-.04em; color:#fff;
  text-transform:none;
}
html.side-fina #sidebar .vnt-marca{ padding:0; justify-content:center; margin-bottom:16px; }
html.side-fina #sidebar .vnt-marca-nome{ display:none; }
html.side-fina #sidebar:hover .vnt-marca{ padding:6px 10px 0; justify-content:flex-start; }
html.side-fina #sidebar:hover .vnt-marca-nome{ display:inline; }

/* ---------- itens: o verde do Vnt no item ativo ---------- */
#sidebar .side-label{ color:rgba(132,188,37,.62); }
#sidebar .navitem,
#sidebar .navgroup > .navitem-toggle{ color:rgba(255,255,255,.70); }
#sidebar .navitem:hover,
#sidebar .navgroup > .navitem-toggle:hover{ background:rgba(255,255,255,.07); color:#fff; }
#sidebar .navitem.active{
  background:linear-gradient(90deg, rgba(132,188,37,.22), rgba(132,188,37,.08));
  border-color:rgba(132,188,37,.28); color:#fff;
  box-shadow:inset 3px 0 0 -1px #84BC25, 0 1px 0 rgba(255,255,255,.04);
}
#sidebar .navitem.active svg{ color:#A7DB4F; }
#sidebar .side-user{ border-bottom-color:rgba(132,188,37,.18); }
#sidebar .side-config:hover{ border-color:rgba(132,188,37,.25); }

/* ---------- a marca da EMPRESA no topo da area principal ---------- */
.marca-topo{
  display:flex; align-items:center; gap:16px; min-height:44px;
  margin:-56px 0 24px; padding:0 0 14px;
  border-bottom:1px solid var(--border);
}
.marca-topo-logo{ display:flex; align-items:center; text-decoration:none; min-width:0; }
.marca-topo-logo img{ display:block; height:38px; width:auto; max-width:220px; object-fit:contain; }
.marca-topo-nome{
  font-weight:800; font-size:20px; letter-spacing:-.03em; color:var(--marca-2, var(--text-primary));
  text-transform:none; white-space:nowrap;
}
.marca-topo.vnt .marca-topo-nome{ color:var(--text-primary); }
.marca-topo-pagina{
  margin-left:auto; font-size:10.5px; font-weight:600; letter-spacing:.09em;
  color:var(--text-muted); white-space:nowrap;
}
/* ---- o logo do PRODUTO, no lugar da marca do cliente (09/09/2026,
   10/09/2026) ----
   "Tira o logo das abas; deixa o logo na própria página." Dentro de um
   produto ele substitui a marca do cliente (não fica ao lado — mostrar
   os dois era repetitivo, pedido do Fred em 10/09/2026: sumiu o filete
   `.marca-topo-risco`, que só existia pra separar os dois).
   ⚠️ Quem decide se aparece é `braco_do_modulo()` no layout_header, não
   este CSS. No Escritório e nas telas da casa não há produto — volta a
   mostrar a marca do cliente. */
.marca-topo-produto{ display:flex; align-items:center; flex:none; }
@media (max-width:1000px){
  .marca-topo{ margin:-40px 0 18px; padding-left:52px; }
  .marca-topo-logo img{ height:30px; max-width:160px; }
  .marca-topo-nome{ font-size:17px; }
  .marca-topo-pagina{ display:none; }
  /* no celular a faixa é estreita: o logo do produto encolhe junto */
  .marca-topo-produto .vnt-produto{ height:36px; }
}

/* ---------- o verde e o azul do Vnt nos botoes e destaques ----------
   --marca-1 / --marca-2 saem do :root la em cima e sao FIXAS (o verde e o
   azul do Vnt). Dentro de um braco, produto_css() troca --marca-1 pela
   cor do braco. A barra lateral NAO le isto. */
.main .btn-primary,
.main button.btn-primary,
.main a.btn-primary{
  background:var(--marca-1, var(--green)); border-color:var(--marca-1, var(--green));
  color:var(--marca-1-txt, #fff);
}
.main .btn-primary:hover,
.main a.btn-primary:hover{ filter:brightness(1.06); }
/* ⚠️ `.minical-dia` entrou na lista de exceções (10/09/2026): esta regra
   tem mais especificidade que `.minical-dia.hoje{ color:#fff }`, então o
   dia de hoje (fundo roxo/verde/laranja da seção) ficava com o número
   quase preto (--marca-2) em cima — foi o que o Matteo viu, sem contraste
   nenhum. O dia de hoje precisa da cor DELE, não da cor de link do texto. */
.main a:not(.btn):not(.navitem):not(.cfg-atalho):not(.minical-dia){ color:var(--marca-2, var(--text-accent)); }
.main .page-title{ color:var(--marca-2, var(--text-primary)); }

/* ---------- tela "Logo da empresa" ---------- */
.marca-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:26px; align-items:start; }
@media (max-width:900px){ .marca-grid{ grid-template-columns:1fr; } }
.marca-logo-atual{
  display:flex; align-items:center; justify-content:center; min-height:96px;
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  background:var(--surface-2); padding:14px; margin-bottom:14px;
}
.marca-logo-atual img{ max-height:64px; max-width:100%; object-fit:contain; }
.marca-logo-vazia{ font-size:12px; color:var(--text-muted); }
.marca-previa{ position:sticky; top:24px; }
.marca-previa-rotulo{ font-size:10.5px; font-weight:600; letter-spacing:.09em; color:var(--text-muted); margin-bottom:10px; }
.marca-previa-tela{
  display:flex; height:240px; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-md); background:var(--surface-1);
}
.marca-previa-side{
  width:64px; flex-shrink:0; padding:14px 0 0;
  background:linear-gradient(172deg,#041530,#031026 60%,#020B1C); border-left:3px solid #84BC25;
  display:flex; justify-content:center;
}
.marca-previa-vnt{ color:#fff; font-weight:800; font-size:13px; letter-spacing:-.03em; text-transform:none; }
.marca-previa-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.marca-previa-topo{
  height:46px; display:flex; align-items:center; padding:0 16px;
  border-bottom:1px solid var(--border); color:var(--marca-2);
  font-weight:800; font-size:14px; letter-spacing:-.02em; text-transform:none;
}
.marca-previa-topo img{ height:26px; width:auto; max-width:140px; object-fit:contain; }
.marca-previa-corpo{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.marca-previa-titulo{ width:46%; height:12px; border-radius:6px; background:var(--marca-2); opacity:.85; }
.marca-previa-linha{ width:88%; height:8px; border-radius:4px; background:var(--border-strong); }
.marca-previa-linha.curta{ width:62%; }
.marca-previa-btn{
  align-self:flex-start; margin-top:8px; padding:8px 16px; border-radius:8px;
  background:var(--marca-1); color:var(--marca-1-txt); font-size:11.5px; font-weight:700;
}
/* a mesma marca Vnt nas telas CLARAS soltas (recuperar senha, primeiro
   acesso, link público): o nome fica no azul do logo, não em branco */
.vnt-marca-clara{ justify-content:center; margin-bottom:22px; }
.vnt-marca-clara .vnt-marca-nome{ color:#031026; font-size:34px; }
.vnt-marca-clara .vnt-marca-simbolo{ width:40px; height:40px; filter:none; }
/* contrato sem logo enviada: o nome da empresa no lugar da imagem */
.ctdoc-marca-texto{ font-weight:800; font-size:22px; letter-spacing:-.02em; text-align:center; color:#031026; text-transform:none; }
/* ⚠️ `.brandmark img{ width:100%; max-width:178px }` (regra antiga da logo
   em PNG) vence `.vnt-marca-simbolo` por especificidade e inflava o
   símbolo para 178px. Esta regra tem a mesma força e vem depois. */
.brandmark.vnt-marca img{ width:34px; max-width:34px; height:34px; }
html.side-fina #sidebar .brandmark.vnt-marca img{ width:30px; max-width:30px; height:30px; }
.vnt-marca-clara.brandmark img{ width:40px; max-width:40px; height:40px; }

/* ============================================================
   VNT · ETAPA 1 (04/09/2026) — pagina-indice do Marketing
   Um cartao por funcionaria de IA. So a porta; o conteudo e a Etapa 3.
   ============================================================ */
.mk-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.mk-card{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); text-decoration:none; color:var(--text-primary);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mk-card:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:var(--marca-1, var(--green)); }
.mk-avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--marca-2, #031026); color:#fff; font-weight:800; font-size:18px;
}
.mk-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.mk-txt b{ font-size:14.5px; }
.mk-txt small{ font-size:10.5px; letter-spacing:.06em; color:var(--marca-1, var(--text-accent)); font-weight:600; }
.mk-faz{ font-size:12.5px; color:var(--text-secondary); text-transform:none; line-height:1.4; margin-top:4px; }
.mk-seta{ color:var(--text-muted); font-size:20px; flex-shrink:0; }

/* ---------------------------------------------------------------------
   VISITA: a equipe do Vnt dentro da conta de um cliente (08/09/2026).
   Faixa fixa no topo, em TODAS as telas — quem visita não pode esquecer
   de quem é o que está vendo. O `padding-top` no shell é o que impede a
   faixa de cobrir a barra lateral e o conteúdo.
   --------------------------------------------------------------------- */
.faixa-visita{
  position:fixed; top:0; left:0; right:0; z-index:1200; height:38px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(90deg, #6C4BD1, #8B5CF6);
  color:#fff; font-size:13px; font-weight:600; padding:0 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.faixa-visita-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.faixa-visita strong{ font-weight:800; }
.faixa-visita form{ margin:0; flex:none; }
.faixa-visita-sair{
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14); color:#fff;
  font:inherit; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; cursor:pointer;
}
.faixa-visita-sair:hover{ background:#fff; color:#4C2FA8; }
/* ⚠️ ATUALIZADO para a casa de três colunas (10/09/2026). A barra antiga
   (#sidebar) não existe mais — quem hoje é fixa no topo é `.vnt-topo`, na
   MESMA altura (top:0) da faixa de visita. As duas ficavam empilhadas uma
   por cima da outra: a foto que o Matteo mandou é exatamente isso, a faixa
   roxa cobrindo a faixa nova. A faixa de visita empurra `.vnt-topo` para
   baixo dela, e o grid de três colunas ganha o respiro extra por cima. */
body.em-visita .vnt-topo{ top:38px; }
body.em-visita .vnt-app{ padding-top:calc(var(--vnt-topo-h) + 38px); }
body.em-visita .vnt-menu-cel{ top:calc(17px + 38px); }
@media (max-width:640px){
  .faixa-visita{ font-size:11.5px; gap:8px; }
}

/* ---------------------------------------------------------------------
   OS QUATRO BRAÇOS (08/09/2026): a etiqueta com o nome e a cor de cada
   produto (VNT Marketing, VNT CRM...). A cor vem do banco por `--braco`,
   inline — é a única forma de uma cor cadastrável pintar CSS.
   --------------------------------------------------------------------- */
.braco-chip{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px; margin:2px 4px 2px 0; white-space:nowrap;
  color:var(--braco, var(--verde)); background:color-mix(in srgb, var(--braco, var(--verde)) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--braco, var(--verde)) 35%, transparent);
}
/* Navegador velho não conhece color-mix: sem este trecho a etiqueta ficaria
   sem fundo nenhum. Aqui ela vira contorno da cor, que é legível do mesmo
   jeito. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .braco-chip{ background:transparent; border-color:var(--braco, var(--verde)); }
}
.btn-visitar{
  border:1px solid #6C4BD1; background:rgba(108,75,209,.1); color:#5B3EC0;
  font-weight:700; cursor:pointer;
}
.btn-visitar:hover{ background:#6C4BD1; color:#fff; }

/* ---------------------------------------------------------------------
   ESCRITÓRIO (09/09/2026): a sala desenhada à esquerda e a lista do lado.
   O desenho em si tem folha própria (assets/sala.css), porque a página de
   vendas mostra a MESMA sala e não carrega este arquivo.
   --------------------------------------------------------------------- */
.esc-palco{ display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:20px; align-items:start; }
.esc-sala{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:12px; overflow:hidden;
  box-shadow:0 4px 16px rgba(11,18,38,.06);
}
.esc-lado{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:18px;
}
.esc-lado h4{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-secondary); margin:0 0 10px;
}
.esc-chips{ margin-bottom:2px; }
.esc-linha{
  display:block; padding:9px 8px; margin:0 -8px; border-radius:10px;
  border-top:1px dashed var(--border); font-size:12.5px; line-height:1.35;
  text-decoration:none; transition:background .14s ease;
}
.esc-linha b{ display:block; font-size:13.5px; color:var(--text-primary); }
.esc-linha span{ color:var(--text-secondary); }
/* a mesma linha, quando leva para algum lugar */
.esc-linha-clic{ cursor:pointer; }
.esc-linha-clic:hover{ background:rgba(11,18,38,.05); }
.esc-linha-clic:hover b{ color:var(--marca-2, var(--green)); }
.esc-nota{ font-size:12px; color:var(--text-secondary); margin-top:10px; line-height:1.45; }
.esc-nota-obra{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-style:italic;
}
@media (max-width:900px){
  .esc-palco{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------
   PLANO E PAGAMENTO (09/09/2026): os cartões dos produtos, a conta que
   soma sozinha e o botão do presente de 7 dias.
   --------------------------------------------------------------------- */
.pl-faixa{
  display:flex; flex-direction:column; gap:4px;
  border-radius:var(--radius-xl); padding:16px 18px; margin-bottom:22px;
  border:1px solid var(--border); background:var(--surface-2);
}
.pl-faixa b{ font-size:15px; }
.pl-faixa span{ font-size:13.5px; color:var(--text-secondary); line-height:1.45; }
.pl-faixa-boa{ border-color:rgba(132,188,37,.45); background:rgba(132,188,37,.08); }
.pl-faixa-trancada{ border-color:rgba(224,135,30,.5); background:rgba(224,135,30,.09); }

.pl-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.pl-card{
  display:block; cursor:pointer; position:relative;
  background:var(--surface-2); border:1.5px solid var(--border);
  border-radius:var(--radius-xl); padding:18px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pl-card:hover{ border-color:var(--braco); }
/* o cartão marcado ganha a cor do produto — é o retorno visual da escolha */
.pl-card:has(.pl-check:checked){ border-color:var(--braco); box-shadow:0 0 0 3px color-mix(in srgb, var(--braco) 18%, transparent); }
.pl-card-topo{ display:flex; align-items:flex-start; gap:12px; }
.pl-check{ width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--braco); cursor:pointer; }
.pl-card-nome{ font-size:16px; font-weight:800; color:var(--braco); letter-spacing:-.01em; }
.pl-card-desc{ font-size:12.5px; color:var(--text-secondary); line-height:1.4; margin-top:3px; }
.pl-card-preco{ font-size:26px; font-weight:800; margin:14px 0 2px; letter-spacing:-.03em; }
.pl-card-preco span{ font-size:13px; font-weight:600; color:var(--text-secondary); letter-spacing:0; }
.pl-card-preco-breve{ font-size:14px; font-weight:600; color:var(--text-secondary); }
.pl-card-time{
  font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--text-secondary);
  padding-top:10px; border-top:1px dashed var(--border);
}
.pl-card-breve{ opacity:.6; cursor:default; }
.pl-selo{
  margin-left:auto; flex:none; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.pl-selo-pago{ background:rgba(132,188,37,.18); color:#4a7a12; }
.pl-selo-teste{ background:rgba(31,95,168,.14); color:#1F5FA8; }
.pl-selo-breve{ background:rgba(3,16,38,.08); color:var(--text-secondary); }
.pl-selo-cadeado{ background:transparent; font-size:15px; padding:0; }

.pl-conta{
  display:flex; gap:24px; align-items:flex-end; flex-wrap:wrap;
  margin-top:22px; padding:20px; border-radius:var(--radius-xl);
  border:1px solid var(--border); background:var(--surface-1);
}
.pl-conta-linhas{ flex:1 1 260px; min-width:240px; }
.pl-conta-l{ display:flex; justify-content:space-between; gap:16px; font-size:13.5px; padding:5px 0; }
.pl-conta-l span{ color:var(--text-secondary); }
.pl-conta-desc b{ color:#4a7a12; }
.pl-conta-total{ border-top:1px solid var(--border); margin-top:6px; padding-top:10px; font-size:16px; }
.pl-conta-total b{ font-size:22px; font-weight:800; letter-spacing:-.02em; }
.pl-conta-acoes{ flex:1 1 300px; }
.pl-nota{ font-size:12px; color:var(--text-secondary); margin-top:10px; line-height:1.45; }

.pl-presente{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 18px; border-radius:var(--radius-xl);
  background:linear-gradient(135deg, rgba(132,188,37,.14), rgba(31,95,168,.10));
  border:1.5px dashed var(--verde);
}
.pl-presente-txt{ flex:1 1 180px; display:flex; flex-direction:column; gap:3px; }
.pl-presente-txt b{ font-size:15px; }
.pl-presente-txt span{ font-size:12.5px; color:var(--text-secondary); }
.pl-bt-presente, .pl-bt-assinar{
  flex:none; border:0; cursor:pointer; font-family:inherit;
  font-size:15px; font-weight:800; letter-spacing:.02em;
  padding:14px 26px; border-radius:999px; color:#16250a;
  background:linear-gradient(180deg, #b9e174, #8ec737 55%, #a4d858);
  box-shadow:0 8px 20px rgba(132,188,37,.35), inset 0 -4px 8px rgba(60,110,10,.2);
}
.pl-bt-assinar{ width:100%; }
.pl-bt-presente:hover, .pl-bt-assinar:hover:not(:disabled){ transform:translateY(-1px); }
.pl-bt-assinar:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* Navegador sem :has() não pinta o cartão marcado — o checkbox continua
   dizendo o que está escolhido, e a conta embaixo continua certa. */
@supports not selector(:has(*)){
  .pl-card-tenho{ border-color:var(--braco); }
}

/* o cadeado nos itens do menu que a empresa não tem */
.navitem-trancado{ opacity:.55; }
.navitem-trancado .navitem-cadeado{ margin-left:auto; font-size:12px; }
/* aviso curto no topo de uma seção do painel de Configurações */
.cfg-dica{
  font-size:13px; color:var(--text-secondary); line-height:1.5;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 14px; margin-bottom:14px;
}
/* interruptor solto embaixo dos cartões de produto (Escritório sim/não) */
.cp-extra{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  margin-top:16px; padding:14px 16px; border-radius:var(--radius-xl);
  border:1px dashed var(--border); background:var(--surface-1);
}
.cp-extra input{ width:19px; height:19px; flex:none; margin-top:1px; accent-color:var(--verde); cursor:pointer; }
.cp-extra span{ font-size:13px; color:var(--text-secondary); line-height:1.45; }
.cp-extra b{ color:var(--text-primary); }

/* ---------------------------------------------------------------------
   PAGAMENTO (09/09/2026): o resumo do plano de um lado, a forma de pagar
   do outro. ⚠️ Nunca há campo de cartão aqui — ver o comentário no topo
   de modulos/planos/pagamento.php.
   --------------------------------------------------------------------- */
.pg-tela{ display:grid; grid-template-columns:1fr 380px; gap:22px; align-items:start; }
.pg-resumo, .pg-formas{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:22px;
}
.pg-resumo h3, .pg-formas h3{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-secondary); margin:0 0 14px;
}
.pg-item{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
.pg-item:first-of-type{ border-top:0; }
.pg-item-bola{ width:10px; height:10px; border-radius:50%; background:var(--braco); flex:none; }
.pg-item-nome{ font-weight:700; font-size:14.5px; }
.pg-item-desc{ font-size:12px; color:var(--text-secondary); line-height:1.35; }
.pg-item b{ margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pg-conta{ margin-top:16px; padding-top:14px; border-top:2px solid var(--border); }
.pg-conta-l{ display:flex; justify-content:space-between; gap:14px; font-size:13.5px; padding:5px 0; }
.pg-conta-l span{ color:var(--text-secondary); }
.pg-conta-desc b{ color:#4a7a12; }
.pg-conta-total{ margin-top:8px; padding-top:10px; border-top:1px solid var(--border); font-size:16px; }
.pg-conta-total b{ font-size:24px; font-weight:800; letter-spacing:-.02em; }

.pg-forma{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  padding:13px 14px; margin-bottom:9px;
  border:1.5px solid var(--border); border-radius:var(--radius-xl);
}
.pg-forma:has(input:checked){ border-color:var(--verde); background:rgba(132,188,37,.07); }
.pg-forma input{ width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--verde); cursor:pointer; }
.pg-forma-nome{ font-weight:700; font-size:14.5px; }
.pg-forma-txt{ font-size:12.5px; color:var(--text-secondary); line-height:1.4; }
.pg-aviso{
  font-size:12.5px; line-height:1.5; color:var(--text-secondary);
  background:rgba(224,135,30,.09); border:1px solid rgba(224,135,30,.35);
  border-radius:var(--radius); padding:12px 14px; margin:16px 0;
}
.pg-aviso b{ color:var(--text-primary); }
.pg-voltar{ display:block; text-align:center; margin-top:14px; font-size:13px; color:var(--text-secondary); }
@media (max-width:900px){ .pg-tela{ grid-template-columns:1fr; } }
/* link de voltar no topo de uma tela interna (a tela de Produtos não
   tinha nenhum, e dava para ficar preso nela) */
.voltar-topo{
  display:inline-block; margin-bottom:10px; font-size:13px; font-weight:600;
  color:var(--text-secondary); text-decoration:none;
}
.voltar-topo:hover{ color:var(--verde); }
/* campo de preço só daquele cliente, dentro do cartão do produto */
.pd-preco{ padding-top:10px; margin-top:10px; border-top:1px dashed var(--border); }
.pd-preco > span{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-secondary); margin-bottom:5px;
}
.pd-preco > div{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; }
.pd-preco input{
  width:110px; padding:5px 9px; font-size:14px; font-family:inherit;
  border:1px solid var(--border); border-radius:8px; text-transform:none;
}
.pd-preco small{ display:block; font-size:11px; color:var(--text-secondary); margin-top:4px; text-transform:none; }

/* ---------------------------------------------------------------------
   A MARCA DE CADA PRODUTO — o ARQUIVO que o Matteo desenhou
   (assets/marca/vnt-<slug>.png), vindo de braco_marca() em bracos.php.

   ⚠️ Só ALTURA. A largura sai da proporção do arquivo, e é ela que faz
   "marketing" ser mais largo que "crm" — que é o certo, são palavras de
   tamanhos diferentes. Os cinco arquivos foram normalizados para o "Vnt"
   ocupar 45% da altura em todos, então a MESMA altura aqui deixa o "Vnt"
   do mesmo tamanho nos quatro.
   --------------------------------------------------------------------- */
/* ⚠️ flex:none + align-self + object-fit NÃO são enfeite. Dentro de uma
   coluna flex (o .btproduto-txt do botão de produto), o padrão
   `align-items:stretch` estica o item na horizontal — e a imagem, com a
   altura travada, saía ESMAGADA. Foi o que aconteceu em 09/09/2026: o
   HTML estava certo e a tela estava errada. */
/* ⚠️ AS MARCAS DE PRODUTO SÃO MAIS ALTAS QUE A MARCA SOLTA (11/09/2026).
   Os arquivos novos (assets/marca/vnt-*.png) são TODOS 1000×400, e o
   desenho ocupa só uns 45% dessa altura — o "Vnt" sozinho ocupa quase
   100%. Pôr a mesma altura de CSS nos dois faz o lockup nascer com metade
   do tamanho do letreiro. Por isso a marca solta segue em --vnt-logo-h
   (26px) e o lockup tem a régua dele, --vnt-produto-h.
   ⚠️ Antes os quatro arquivos tinham proporções diferentes (de 2,09 a
   4,77) e saíam de tamanhos diferentes na tela com a MESMA altura de CSS
   — foi a reclamação do Matteo. Agora os quatro são 2,50. Quem trocar um
   logo tem de exportar na mesma medida, senão o desencontro volta. */
.vnt-produto{
  display:block; height:var(--vnt-produto-h); width:auto;
  flex:none; align-self:flex-start;
  max-width:100%; object-fit:contain; object-position:left center;
}
/* ⚠️ '-g' e o tamanho base sao IGUAIS de proposito desde 11/09/2026: o
   pedido foi "todos do mesmo tamanho na pagina". A classe continua porque
   o braco_marca() a imprime e porque ela e o gancho para, um dia, um
   tamanho grande voltar a existir. */
.vnt-produto-g{ height:var(--vnt-produto-h); }
.vnt-produto-p{ height:28px; }
/* ⚠️ O lettering é azul-escuro: no tema escuro ele sumiria. A solução não
   é filtro (mancharia o pingo colorido junto), é o fundo claro atrás.
   (O `.btproduto` saiu desta regra em 10/09/2026: a logo não mora mais
   dentro do botão da barra — foi pro topo da página em 09/09 — e o botão
   agora é sem fundo de propósito, ver a seção "os cartões" mais abaixo.) */


/* a marca do produto usada como ETIQUETA (lista de clientes, Escritório):
   a mesma marca, num quadradinho com a cor do produto ao fundo */
.braco-etq{
  display:inline-block; padding:4px 10px 5px; border-radius:999px;
  margin:2px 5px 2px 0; vertical-align:middle;
  background:color-mix(in srgb, var(--braco) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--braco) 32%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .braco-etq{ background:transparent; border-color:var(--braco); }
}

/* A barra lateral antiga (barra + cartoes de produto + cascata + a faixa
   .marca-topo) saiu em 10/09/2026, quando a casa virou tres colunas. O CSS
   dela foi apagado junto — nenhuma tela usava mais essas classes. Restam
   no arquivo algumas regras antigas de  do tema escuro, de antes
   de setembro; elas nao alcancam nada hoje e saem na proxima limpeza. */

/* =====================================================================
   A CASA — três colunas e uma faixa. Refeita em 10/09/2026 (3ª rodada)
   MEDINDO A FOTO do Matteo, e não o exemplo laranja que ele mandou
   ("é só a estrutura").

   As medidas da foto, em ordem:
     · faixa de cima 72px, sem fundo destacado;
     · trilho: 70px de largura, AZUL-MARINHO LISO (sem degradê), cantos
       redondos, 12px da borda esquerda;
     · subaba: 200px, borda de 2px na cor da seção, e um degradê SUAVE
       da cor da seção para branco dentro dela — é aqui que o degradê
       mora, não no trilho;
     · palco: o resto, 24px da borda direita;
     · vão de 12px entre as três, 14px até o pé da tela;
     · AS TRÊS TÊM A MESMA ALTURA. O palco rola por dentro.

   ⚠️ `--secao` vem do PHP (o `.shell` imprime). Tudo o que tem cor lê
   essa variável. Não repita cor cravada aqui.
   ⚠️ A Home é a ÚNICA com quadrado branco, e ele fica sempre. Seção
   aberta se mostra pelo brilho do ícone e pela cor da subaba.
   ===================================================================== */
:root{
  --vnt-topo-h:72px;
  --vnt-rail-w:70px;
  --vnt-sub-w:200px;
  --vnt-vao:12px;
  --vnt-esq:12px;
  --vnt-dir:24px;
  --vnt-pe:14px;
  --vnt-navy:#0B1226;
  /* ⚠️ ESTE CINZA É PROPOSITALMENTE ESCURO (10/09/2026, 2º pedido do
     Matteo: "ainda está muito difícil de distinguir o bloco principal do
     fundo atrás"). O antigo #F3F4F9 tinha 3% de diferença para o branco
     do palco — de longe parecia tudo uma coisa só. Quem clarear isto de
     novo apaga a separação entre a parede e os quadrados. */
  --vnt-fundo:#D6DCEA;
  --vnt-logo-h:26px;    /* a marca SOLTA (Vnt.) — o desenho enche o arquivo */
  /* ⚠️ 25px E NÃO MAIS (11/09/2026). Um valor só para os quatro lockups —
     é isso que os deixa iguais entre si — mas existe um TETO: a subaba dá
     160px de largura útil, e o mais largo (Vnt.atendimento) tem proporção
     6,19. Acima de 25,8px ele bate no `max-width:100%` e ENCOLHE, ficando
     menor que os outros três: era o 46px de antes, e era exatamente a
     queixa do Matteo ("todos do mesmo tamanho"). Aumentar isto exige
     alargar a subaba na mesma conta.
     ⚠️ Só vale porque os arquivos foram RECORTADOS na arte (11/09/2026):
     antes sobrava margem transparente e cada um começava num ponto
     diferente — não alinhavam com o risco de baixo. Logo novo tem de vir
     recortado, ou volta tudo. */
  --vnt-produto-h:25px;
}
body{ background:var(--vnt-fundo); }

/* ---------------------------------------------------------------------
   A FAIXA DE CIMA
   --------------------------------------------------------------------- */
.vnt-topo{
  position:fixed; top:0; left:0; right:0; height:var(--vnt-topo-h); z-index:60;
  display:flex; align-items:center; gap:20px;
  padding:0 var(--vnt-dir) 0 var(--vnt-esq); background:var(--vnt-fundo);
}
/* ⚠️ `overflow:hidden` DE PROPÓSITO (10/09/2026, achado na varredura
   de celular). A caixa encolhia com o flex, mas a IMAGEM de dentro tinha
   `width:auto; max-width:200px` e não encolhia junto: em 375px a logo do
   cliente ia por cima da logo do Vnt, 31px de sobreposição medidos. */
.vnt-topo-cliente{ display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto; padding-left:6px; overflow:hidden; }
/* ⚠️ A logo do cliente vem de qualquer proporção. Caixa de altura fixa
   com `object-fit:contain`: encaixa a redonda, a deitada e a alta sem
   cortar nem esticar. */
.vnt-logo-cliente{ display:block; height:34px; max-width:200px; min-width:0; }
.vnt-logo-cliente img{ height:100%; width:auto; max-width:100%; object-fit:contain; object-position:left center; display:block; }
.vnt-nome-cliente{
  font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--vnt-navy); text-transform:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;
}
.vnt-pede-logo{
  width:20px; height:20px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#F5A623; color:#fff; text-decoration:none;
  box-shadow:0 0 0 4px rgba(245,166,35,.22);
  animation:vnt-pulsa 2.4s ease-in-out infinite;
}
.vnt-pede-logo svg{ width:13px; height:13px; }
@keyframes vnt-pulsa{ 0%,100%{ box-shadow:0 0 0 4px rgba(245,166,35,.22); } 50%{ box-shadow:0 0 0 7px rgba(245,166,35,.10); } }
@media (prefers-reduced-motion: reduce){ .vnt-pede-logo{ animation:none; } }

/* ---- os atalhos, no meio: bolinhas de 30px, como na foto ---- */
.vnt-atalhos{ display:flex; align-items:center; gap:12px; margin:0 auto; }
.vnt-atalho{
  width:30px; height:30px; flex:none; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid rgba(11,18,38,.28);
  background:transparent; color:var(--vnt-navy);
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.vnt-atalho svg{ width:15px; height:15px; }
.vnt-atalho:hover{ border-color:var(--secao); color:var(--secao); background:#fff; }
.vnt-atalho-vazio{ border-style:dashed; color:rgba(11,18,38,.4); }
.vnt-atalho-lapis{
  width:16px; height:16px; flex:none; padding:0; margin-left:2px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; color:rgba(11,18,38,.45);
  transition:color .14s ease;
}
.vnt-atalho-lapis svg{ width:14px; height:14px; }
.vnt-atalho-lapis:hover{ color:var(--secao); }
.vnt-atalho, .vnt-atalho-lapis{ position:relative; }
.vnt-atalho::after, .vnt-atalho-lapis::after{
  content:attr(data-dica) " · " attr(data-sub);
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-3px);
  white-space:nowrap; pointer-events:none; opacity:0;
  font-size:10.5px; font-weight:600; letter-spacing:.01em; text-transform:none;
  padding:5px 9px; border-radius:8px; background:var(--vnt-navy); color:#fff;
  transition:opacity .13s ease, transform .13s ease;
}
.vnt-atalho:hover::after, .vnt-atalho:focus-visible::after,
.vnt-atalho-lapis:hover::after, .vnt-atalho-lapis:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- o Vnt e quem entrou, à direita ---- */
.vnt-topo-dir{ display:flex; align-items:center; gap:18px; flex:none; }
.vnt-topo-vnt img{ display:block; height:var(--vnt-logo-h); width:auto; }
.vnt-usuario{ display:flex; align-items:center; gap:8px; }
/* ⚠️ O AVATAR É AZUL-MARINHO, com as iniciais em SERIFA ITÁLICA — é o
   que está na foto dele. Nada de cor do produto aqui. */
.vnt-foto{
  width:34px; height:34px; flex:none; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:var(--vnt-navy); color:#fff; text-decoration:none;
  font-family:'Instrument Serif', Georgia, serif; font-style:italic;
  font-size:15px; font-weight:400; letter-spacing:0; text-transform:none;
}
.vnt-foto img{ width:100%; height:100%; object-fit:cover; }
.vnt-pede-foto{
  position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%;
  background:#F5A623; border:1.6px solid #fff;
}
/* ⚠️ Nome comprido NUNCA empurra os três pontinhos: cada linha trunca por
   conta própria. Caixa de sentença: "Matteo" em cima, leve; "Vanitelli"
   embaixo, negrito. */
.vnt-usuario-nome{ display:flex; flex-direction:column; min-width:0; max-width:110px; line-height:1.1; }
.vnt-usuario-nome b, .vnt-usuario-nome i{
  font-style:normal; text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vnt-usuario-nome b{ font-size:11px; font-weight:500; color:rgba(11,18,38,.72); }
.vnt-usuario-nome i{ font-size:12.5px; font-weight:800; color:var(--vnt-navy); letter-spacing:-.01em; }
.vnt-tres-pontos{
  width:22px; height:22px; flex:none; padding:0; cursor:pointer; border:0; background:none;
  color:var(--vnt-navy); display:flex; align-items:center; justify-content:center;
  border-radius:6px; transition:background .14s ease;
}
.vnt-tres-pontos svg{ width:16px; height:16px; }
.vnt-tres-pontos:hover{ background:rgba(11,18,38,.07); }

/* ---------------------------------------------------------------------
   AS TRÊS COLUNAS — mesma altura, vão igual, o palco rola por dentro
   --------------------------------------------------------------------- */
.vnt-app{
  display:grid;
  grid-template-columns:var(--vnt-rail-w) var(--vnt-sub-w) minmax(0, 1fr);
  gap:var(--vnt-vao);
  padding:var(--vnt-topo-h) var(--vnt-dir) var(--vnt-pe) var(--vnt-esq);
  /* ⚠️ `min-height` e `max-height` travados junto com a altura: o
     `.shell` antigo (lá em cima no arquivo) traz `min-height:100vh`, e sem
     o teto qualquer conteúdo alto empurrava o grid para além da janela. */
  height:100vh; min-height:100vh; max-height:100vh;
  box-sizing:border-box; align-items:stretch;
}
/* a janela nunca rola na horizontal — quem rola é o palco, por dentro */
body{ overflow-x:hidden; }
.vnt-app > .vnt-palco{ margin:0; padding:0; }
/* ⚠️ ESPECIFICIDADE ALTA DE PROPÓSITO (10/09/2026). A altura e a rolagem
   das três colunas são do LAYOUT, e uma página não pode mudá-las: o
   `painel.php` tinha um `.main{ min-height:100vh; overflow:hidden }` no
   próprio <style>, escrito na época em que `.main` era a página inteira.
   Como o <style> da página vem depois do portal.css, ele vencia — o
   cartão do meio ficava 100vh DENTRO de um espaço de 100vh menos a faixa,
   a janela inteira passava a rolar e o trilho escorregava por baixo da
   faixa fixa. `main.main.vnt-palco` ganha de qualquer regra de página.
   Se uma tela precisar de altura própria, ela muda o conteúdo dela, não
   estas três. */
.vnt-app > .vnt-rail,
.vnt-app > .vnt-sub,
.vnt-app > main.main.vnt-palco{
  height:100%; min-height:0; max-height:100%; box-sizing:border-box;
}
.vnt-app > main.main.vnt-palco{ overflow:auto; }

/* ---- o trilho: azul-marinho LISO ---- */
.vnt-rail{
  background:var(--vnt-navy);
  border-radius:22px;
  padding:16px 6px 12px;
  /* ⚠️ gap 20px, não 10 (10/09/2026: "espaça melhor esses botões"). Seis
     botões a 92px de passo + o Sair cabem em janela de 800px de altura;
     quem aumentar mais tem de conferir isso, senão o trilho começa a
     rolar por dentro em notebook baixo. */
  display:flex; flex-direction:column; align-items:center; gap:20px;
  /* ⚠️ O TRILHO ROLA POR DENTRO (10/09/2026, achado na auditoria). Sem
     overflow, o conteúdo dele (seis botões + Sair = ~534px) vazava para
     fora da caixa em janelas mais baixas, e o transbordo entrava na
     rolagem do DOCUMENTO — o mesmo sintoma da foto do Matteo, por outra
     porta: o trilho escorregava por baixo da faixa fixa de novo. */
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
}
.vnt-rail::-webkit-scrollbar{ width:0; height:0; }
.vnt-rail-item{
  width:100%; padding:6px 2px; border-radius:12px; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:rgba(255,255,255,.72);
  transition:color .14s ease;
}
.vnt-rail-ico{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
/* ⚠️ Ícone GRANDE — 28px, como na foto. */
.vnt-rail-ico svg{ width:28px; height:28px; }
.vnt-rail-nome{
  font-size:10px; font-weight:600; letter-spacing:0; text-transform:none;
  text-align:center; line-height:1.1;
}
.vnt-rail-item:hover{ color:#fff; }
/* seção aberta: só o brilho — o quadrado branco é da Home */
.vnt-rail-item.ativo{ color:#fff; }
.vnt-rail-item.ativo .vnt-rail-nome{ font-weight:800; }
/* ⚠️ A HOME É BRANCA 100% DO TEMPO (pedido dele): é a marca de "início",
   não o estado de "aberta". */
.vnt-rail-item.home{ color:#fff; }
.vnt-rail-item.home .vnt-rail-ico{ background:#fff; color:var(--vnt-navy); }
.vnt-rail-item.embreve, .vnt-rail-item.trancado{ opacity:.4; }
.vnt-rail-item.embreve{ cursor:default; }
.vnt-sair{
  margin-top:auto; padding:8px 4px 4px; text-decoration:none;
  font-size:9.5px; font-weight:700; letter-spacing:.08em;
  color:rgba(255,255,255,.55); transition:color .14s ease;
}
.vnt-sair:hover{ color:#fff; }

/* ---- a subaba: borda da seção e o degradê SUAVE dela para branco ---- */
.vnt-sub{
  border-radius:16px; padding:18px 12px 14px;
  border:2px solid var(--secao);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--secao) 14%, #fff) 0%,
    color-mix(in srgb, var(--secao) 4%, #fff) 42%,
    #fff 100%);
  display:flex; flex-direction:column; gap:4px; overflow:auto;
}
@supports not (color: color-mix(in srgb, red 50%, blue)){ .vnt-sub{ background:#fff; } }
.vnt-sub-marca{ padding:0 6px; margin-bottom:12px; }
.vnt-sub-marca .vnt-produto{ height:var(--vnt-produto-h); }
.vnt-sub-risco{ display:block; height:1px; margin-top:10px; background:var(--secao); opacity:.8; }
.vnt-sub-item{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px;
  text-decoration:none; color:var(--vnt-navy);
  font-size:12.5px; font-weight:600; letter-spacing:-.01em; text-transform:none;
  transition:background .14s ease, color .14s ease;
}
.vnt-sub-item svg{ width:17px; height:17px; flex:none; color:color-mix(in srgb, var(--secao) 85%, #000); }
.vnt-sub-item:hover{ background:color-mix(in srgb, var(--secao) 12%, #fff); }
.vnt-sub-item.ativo{ background:color-mix(in srgb, var(--secao) 18%, #fff); color:color-mix(in srgb, var(--secao) 80%, #000); }

/* ---- o palco: branco, mesma altura, rola por dentro ---- */
.vnt-palco{
  background:#fff; border-radius:16px; min-width:0;
  border:1px solid rgba(11,18,38,.06);
  box-shadow:0 6px 22px rgba(11,18,38,.10);
  overflow:auto;
}
/* Home e Escritório não têm subaba (layout_header.php): o palco fica com
   a coluna dela. */
.vnt-app.sem-sub{ grid-template-columns:var(--vnt-rail-w) minmax(0, 1fr); }
.vnt-conteudo{ padding:22px 26px 28px; max-width:none; width:100%; margin:0; box-sizing:border-box; }

/* ---------------------------------------------------------------------
   CELULAR — o trilho vira gaveta, a subaba entra junto
   --------------------------------------------------------------------- */
.vnt-menu-cel{
  display:none; position:fixed; top:17px; left:12px; z-index:70;
  width:38px; height:38px; border-radius:12px; border:0; cursor:pointer;
  background:var(--vnt-navy); color:#fff; align-items:center; justify-content:center;
}
.vnt-menu-cel svg{ width:20px; height:20px; }
/* ⚠️ 820px: o trilho (70) e a subaba (200) somam 270, e num notebook de
   1280 ainda sobra tela de sobra para a página. */
@media (max-width:820px){
  .vnt-menu-cel{ display:flex; }
  .vnt-topo{ padding-left:60px; gap:10px; }
  .vnt-atalhos{ display:none; }
  /* no celular a logo do cliente é menor: ela e a do Vnt dividem 375px */
  .vnt-logo-cliente{ height:26px; max-width:104px; }
  .vnt-nome-cliente{ max-width:104px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .vnt-app, .vnt-app.sem-sub{ grid-template-columns:minmax(0,1fr); padding:var(--vnt-topo-h) var(--vnt-vao) var(--vnt-vao); }
  .vnt-rail, .vnt-sub{
    position:fixed; top:var(--vnt-topo-h); bottom:0; left:0; z-index:65;
    transform:translateX(-110%); transition:transform .2s ease; height:auto;
  }
  .vnt-rail{ width:var(--vnt-rail-w); border-radius:0; }
  .vnt-sub{ left:var(--vnt-rail-w); width:var(--vnt-sub-w); border-radius:0; }
  body.vnt-menu-aberto .vnt-rail, body.vnt-menu-aberto .vnt-sub{ transform:none; }
  .vnt-conteudo{ padding:16px 14px 22px; }
}

/* =====================================================================
   "CONECTE SUA AGENDA" — o vazio da Agenda (10/09/2026, pedido do Matteo:
   "faz uma página bem bonita de início... clica aqui no quadrado enorme,
   que é onde fica a agenda").

   ⚠️ O quadro é grande DE PROPÓSITO: ele ocupa o lugar onde a agenda vai
   ficar. É o formulário inteiro que é o quadrado — não existe um botão
   pequeno em cima de um fundo grande.
   ⚠️ A cor vem de `var(--green)`, que dentro de um produto é a cor DELE
   (produto_css em bracos.php). Aqui, no Vnt projetos, sai roxo sozinho.
   ===================================================================== */
.ag0{ max-width:760px; margin:0 auto; padding:8px 0 40px; }
.ag0-topo{ text-align:center; margin-bottom:26px; }
.ag0-titulo{
  font-size:30px; font-weight:800; letter-spacing:-.03em;
  color:var(--text-primary); margin:0 0 8px;
}
.ag0-sub{
  font-size:14px; line-height:1.55; color:var(--text-secondary);
  max-width:460px; margin:0 auto; text-transform:none;
}

/* o quadrado: é o formulário */
.ag0-quadro{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:38px 28px 32px; border-radius:22px;
  border:2px dashed color-mix(in srgb, var(--secao) 45%, transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--secao) 7%, var(--surface-1)),
    var(--surface-1));
  transition:border-color .16s ease, box-shadow .16s ease;
}
.ag0-quadro:hover, .ag0-quadro:focus-within{
  border-color:var(--secao);
  box-shadow:0 14px 34px -22px color-mix(in srgb, var(--secao) 80%, transparent);
}
.ag0-mais{
  width:92px; height:92px; border-radius:24px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--secao); color:#fff;
  box-shadow:0 12px 26px -12px color-mix(in srgb, var(--secao) 85%, transparent);
}
.ag0-mais svg{ width:46px; height:46px; }

.ag0-nome{ width:100%; max-width:340px; }
.ag0-rot{
  display:block; font-size:11px; font-weight:700; letter-spacing:.07em;
  color:var(--text-muted); margin-bottom:5px;
}
.ag0-quadro input[type="text"], .ag0-quadro select{ width:100%; }
.ag0-dica{
  font-size:11.5px; color:var(--text-muted); margin-top:5px; text-transform:none;
}
.ag0-dica-solta{ text-align:center; }
.ag0-botao{ min-width:220px; padding:11px 20px; border-radius:12px; font-size:14px; }

/* os três passos, embaixo */
.ag0-passos{
  list-style:none; margin:24px auto 0; padding:0; max-width:460px;
  display:flex; flex-direction:column; gap:8px;
}
.ag0-passos li{
  font-size:12.5px; color:var(--text-secondary); text-transform:none;
  padding-left:2px;
}
.ag0-passos b{ color:color-mix(in srgb, var(--secao) 78%, #000); }

@media (max-width:640px){
  .ag0-titulo{ font-size:23px; }
  .ag0-quadro{ padding:28px 18px 24px; }
  .ag0-mais{ width:72px; height:72px; border-radius:20px; }
  .ag0-mais svg{ width:36px; height:36px; }
}


/* =====================================================================
   OS POP-UPS (10/09/2026) — "deixa todos centralizados no meio da página"

   Um desenho só serve para todos: fundo escurecido, caixa centrada,
   topo com título, corpo que rola e pé com os botões. Pop-up novo é só
   marcar `.vpop` + `.vpop-caixa` e ganhar isto de graça.
   ===================================================================== */
.vpop{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; }
.vpop[hidden]{ display:none !important; }
.vpop-fundo{ position:absolute; inset:0; background:rgba(3,16,38,.5); backdrop-filter:blur(2px); }
.vpop-caixa{
  position:relative; z-index:1; width:100%; max-width:460px;
  max-height:calc(100vh - 40px); display:flex; flex-direction:column;
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(3,16,38,.65);
}
.vpop-largo{ max-width:720px; }
.vpop-topo{
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 22px 14px; border-bottom:1px solid rgba(3,16,38,.08);
}
.vpop-titulo{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--vnt-navy); }
.vpop-sub{ margin:4px 0 0; font-size:12px; color:var(--text-muted); text-transform:none; line-height:1.45; }
.vpop-x{
  margin-left:auto; width:28px; height:28px; flex:none; border:0; cursor:pointer;
  border-radius:8px; background:rgba(3,16,38,.05); color:var(--vnt-navy); font-size:13px;
}
.vpop-x:hover{ background:rgba(3,16,38,.11); }
.vpop-corpo{ padding:16px 22px; overflow:auto; }
.vpop-pe{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:14px 22px 18px; border-top:1px solid rgba(3,16,38,.08);
}
.vpop-rot{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  color:var(--text-muted); margin:12px 0 5px;
}
.vpop-rot:first-child{ margin-top:0; }
.vpop-rot i{ font-style:normal; font-weight:500; text-transform:none; letter-spacing:0; }
.vpop-corpo input, .vpop-corpo select, .vpop-corpo textarea{ width:100%; }
.vpop-linha{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; }
body.vpop-aberto{ overflow:hidden; }

/* ---- a grade de escolher atalho ---- */
.vat-grupo{
  font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--text-muted);
  margin:16px 0 8px;
}
.vat-grupo:first-child{ margin-top:0; }
.vat-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:8px; }
.vat-op{
  display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
  padding:9px 10px; border-radius:12px; position:relative;
  border:1.5px solid rgba(3,16,38,.10); background:#fff;
  transition:border-color .14s ease, background .14s ease;
}
.vat-op:hover{ border-color:var(--secao); }
.vat-op.escolhido{
  border-color:var(--secao);
  background:color-mix(in srgb, var(--secao) 9%, #fff);
}
.vat-op-ico{
  width:32px; height:32px; flex:none; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(3,16,38,.05); color:var(--vnt-navy);
}
.vat-op.escolhido .vat-op-ico{ background:var(--secao); color:#fff; }
.vat-op-ico svg{ width:17px; height:17px; }
.vat-op-txt{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.vat-op-txt b{ font-size:12px; font-weight:700; color:var(--vnt-navy); text-transform:none; }
.vat-op-txt i{
  font-style:normal; font-size:10.5px; color:var(--text-muted); text-transform:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vat-op-marca{
  margin-left:auto; width:16px; height:16px; flex:none; border-radius:50%;
  border:1.5px solid rgba(3,16,38,.16);
}
.vat-op.escolhido .vat-op-marca{
  background:var(--secao); border-color:var(--secao);
  box-shadow:inset 0 0 0 3px #fff;
}
/* passou do teto: o botão recusa e explica pelo movimento */
@keyframes vat-nega{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.vat-nega{ animation:vat-nega .4s ease; border-color:#B4322F; }
.vat-conta{ margin-right:auto; font-size:11.5px; color:var(--text-muted); text-transform:none; }
.vat-conta.cheio{ color:#B4322F; font-weight:700; }

@media (max-width:640px){
  .vpop-linha{ grid-template-columns:1fr; }
  .vat-grade{ grid-template-columns:1fr; }
}

/* =====================================================================
   O ACESSO DO CLIENTE (empresas/form.php — 11/09/2026)
   A caixa onde a equipe do Vnt define a senha de um cliente e recebe a
   mensagem pronta para mandar. A mensagem aparece UMA VEZ: ver o
   comentário no PHP sobre por que a senha não se consulta.
   ===================================================================== */
.acesso-caixa{ border:1.5px solid var(--marca-2, var(--green)); }
.acesso-explica, .acesso-vazio{
  font-size:12.5px; line-height:1.5; color:var(--text-secondary);
  margin:0 0 14px; text-transform:none;
}
.acesso-lista{ margin-bottom:14px; }
.acesso-lista-tit{
  display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-secondary); margin-bottom:7px;
}
.acesso-quem{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px;
  margin:0 8px 8px 0; padding:7px 12px; cursor:pointer;
  border:1px solid var(--border); border-radius:10px;
  background:var(--surface-1); font-family:inherit; text-align:left;
  transition:border-color .14s ease, background .14s ease;
}
.acesso-quem:hover{ border-color:var(--marca-2, var(--green)); background:var(--surface-2); }
.acesso-quem b{ font-size:12.5px; color:var(--text-primary); }
.acesso-quem span{ font-size:11.5px; color:var(--text-secondary); text-transform:none; }
.acesso-off{ font-size:10px; font-style:normal; color:#C0392B; }
.field-dica{
  display:block; margin-top:5px; font-size:11.5px; line-height:1.45;
  color:var(--text-secondary); text-transform:none;
}
/* a mensagem pronta — some assim que a tela recarrega */
.acesso-pronto{
  border:1.5px solid var(--marca-2, var(--green)); border-radius:var(--radius-xl);
  background:var(--surface-2); padding:18px 20px; margin-bottom:20px;
  box-shadow:0 6px 22px rgba(11,18,38,.10);
}
.acesso-pronto h3{ margin:0 0 6px; font-size:15px; }
.acesso-aviso{ margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--text-secondary); text-transform:none; }
.acesso-msg{
  width:100%; box-sizing:border-box; resize:vertical;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:12.5px; line-height:1.6; text-transform:none;
  border:1px solid var(--border); border-radius:10px; padding:12px 14px;
  background:var(--surface-1); color:var(--text-primary);
}
.acesso-bts{ display:flex; align-items:center; gap:10px; margin-top:12px; }

/* =====================================================================
   O AVISO DE VERSÃO NOVA (11/09/2026)

   ⚠️ O botão mora DENTRO do trilho azul-marinho, logo acima do "Sair".
   O Matteo mandou a foto de uma caixa cinza tracejada e pediu "bem mais
   bonito": aqui é um bloco de vidro com a cor do Vnt, um ponto verde que
   respira e o texto em duas linhas. Nada de tracejado.
   ===================================================================== */
/* ⚠️ O TRILHO TEM 70px. Sobram ~54px de texto depois do respiro, e
   "disponível" em 11px mede 60 — na primeira tentativa a palavra saiu
   cortada pela metade. Por isso o conteúdo é EMPILHADO e centrado, com
   fonte pequena: o ponto verde em cima, as duas palavras embaixo. Quem
   aumentar a fonte aqui tem de medir a palavra mais longa. */
.vnt-atualizar{
  margin-top:auto; width:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:9px 5px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(118,184,42,.42);
  background:linear-gradient(160deg, rgba(118,184,42,.20), rgba(118,184,42,.07));
  color:#fff; font-family:inherit; text-align:left;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.vnt-atualizar:hover{
  background:linear-gradient(160deg, rgba(118,184,42,.32), rgba(118,184,42,.12));
  border-color:rgba(118,184,42,.75); transform:translateY(-1px);
}
/* o pontinho que respira — é ele que chama o olho, não uma borda grossa */
.vnt-atualizar-luz{
  flex:none; width:9px; height:9px; border-radius:50%; background:#8FD43A;
  box-shadow:0 0 0 0 rgba(143,212,58,.65); animation:vnt-pulsa 2.4s ease-out infinite;
}
@keyframes vnt-pulsa{
  0%{ box-shadow:0 0 0 0 rgba(143,212,58,.60); }
  70%{ box-shadow:0 0 0 9px rgba(143,212,58,0); }
  100%{ box-shadow:0 0 0 0 rgba(143,212,58,0); }
}
@media (prefers-reduced-motion: reduce){ .vnt-atualizar-luz{ animation:none; } }
.vnt-atualizar-txt{ display:block; width:100%; line-height:1.2; text-align:center; }
.vnt-atualizar-txt i{ display:block; font-style:normal; font-size:8px; letter-spacing:.04em; opacity:.7; }
.vnt-atualizar-txt b{ display:block; font-size:9.5px; font-weight:800; letter-spacing:-.01em; }
/* com o botão presente, o "Sair" perde o margin-top:auto para os dois
   ficarem colados no pé em vez de se empurrarem */
.vnt-atualizar ~ .vnt-sair{ margin-top:6px; }

/* ---- o painel "o que mudou" ---- */
.vsn-caixa{ max-width:560px; width:100%; }
.vsn-topo{ padding:22px 24px 16px; border-bottom:1px solid var(--border); }
.vsn-selo{
  display:inline-block; margin-bottom:8px; padding:3px 10px; border-radius:999px;
  background:var(--marca-2, var(--green)); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
}
.vsn-titulo{ margin:0 0 5px; font-size:19px; letter-spacing:-.01em; }
.vsn-sub{ margin:0; font-size:12.5px; color:var(--text-secondary); text-transform:none; }
.vsn-corpo{ padding:6px 24px 4px; max-height:46vh; overflow:auto; }
.vsn-item{ display:flex; gap:12px; padding:13px 0; border-bottom:1px dashed var(--border); }
.vsn-item:last-child{ border-bottom:0; }
.vsn-tipo{
  flex:none; align-self:flex-start; margin-top:1px;
  padding:2px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--t) 14%, #fff);
  color:color-mix(in srgb, var(--t) 78%, #000);
  font-size:9.5px; font-weight:800; letter-spacing:.05em;
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .vsn-tipo{ background:var(--surface-2); color:var(--text-primary); }
}
.vsn-txt{ min-width:0; }
.vsn-txt b{ display:block; font-size:13.5px; line-height:1.35; color:var(--text-primary); }
.vsn-txt span{ display:block; margin-top:3px; font-size:12px; line-height:1.45; color:var(--text-secondary); text-transform:none; }
.vsn-pe{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 24px 20px; border-top:1px solid var(--border);
}
.vsn-nota{ font-size:11.5px; color:var(--text-secondary); text-transform:none; }

/* ---- a tela de versões (só a equipe do Vnt) ---- */
.vsa-aviso{
  padding:12px 16px; margin-bottom:18px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
  font-size:12.5px; line-height:1.5; color:var(--text-secondary); text-transform:none;
}
.vsa-nova{ margin-bottom:18px; }
.vsa-versao{
  border:1px solid var(--border); border-radius:var(--radius-xl);
  background:var(--surface-1); padding:16px 18px; margin-bottom:14px;
}
.vsa-versao.rascunho{ border-color:var(--marca-2, var(--green)); }
.vsa-cabeca{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.vsa-ident{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.vsa-num{
  padding:3px 10px; border-radius:8px; background:var(--vnt-navy); color:#fff;
  font-size:11px; font-weight:800;
}
.vsa-itens{ list-style:none; margin:12px 0 0; padding:0; }
.vsa-itens li{ display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-top:1px dashed var(--border); }
.vsa-tipo{
  flex:none; margin-top:1px; padding:2px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--t) 14%, #fff);
  color:color-mix(in srgb, var(--t) 78%, #000);
  font-size:9.5px; font-weight:800; letter-spacing:.05em;
}
.vsa-txt{ flex:1; min-width:0; }
.vsa-txt b{ display:block; font-size:13px; line-height:1.35; }
.vsa-txt span{ display:block; margin-top:2px; font-size:11.5px; color:var(--text-secondary); text-transform:none; }
.vsa-x{
  flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--text-secondary); font-size:12px; padding:2px 6px; border-radius:6px;
}
.vsa-x:hover{ background:rgba(192,57,43,.12); color:#C0392B; }
.vsa-vazio{ margin:12px 0 0; font-size:12.5px; color:var(--text-secondary); text-transform:none; }
.vsa-add{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.vsa-add select{ flex:0 0 130px; }
.vsa-add input[name="item_titulo"]{ flex:2 1 260px; }
.vsa-add input[name="item_detalhe"]{ flex:1 1 180px; }

/* o painel "quem está vendo o quê", na tela de Versões */
.vsa-canal{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:18px; border-radius:var(--radius-xl);
  background:var(--surface-2); border:1px solid var(--border);
}
/* so o TITULO do painel e bloco: o ` b ` de dentro do texto e negrito comum,
   senao "versao nova" pula de linha e o ponto final fica sozinho. */
.vsa-canal-txt > b{ display:block; font-size:13px; margin-bottom:3px; }
.vsa-canal-txt span{ display:block; font-size:12px; line-height:1.5; color:var(--text-secondary); text-transform:none; max-width:62ch; }
.vsa-canal-bts{ display:flex; gap:8px; flex-wrap:wrap; }
/* sem a cópia no servidor o botão é enfeite — o painel avisa em amarelo */
.vsa-canal-sem{ background:#fff8e1; border-color:#f0d68a; }
.vsa-canal-sem code{ background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px; font-size:11px; }