@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fontes/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fontes/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* A fonte do Cronos: Orbitron (Google Fonts, licença OFL), guardada no próprio servidor */
@font-face{font-family:'Cronos';src:url('fonte-cronos.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
.cronos-nome{font-family:'Cronos','Orbitron','Sora',system-ui,sans-serif;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.iaim-marca{font-size:clamp(26px,3.4vw,38px);line-height:1;color:#dff3ff;text-shadow:0 0 18px rgba(80,160,255,.75),0 0 44px rgba(47,214,189,.35);letter-spacing:.3em;text-indent:.3em}
.iaf-topo .cronos-nome{font-size:15px;letter-spacing:.2em}
/* ============================================================
   CRM eixo -- folha única

   Dois temas no mesmo arquivo. O claro é o padrão (fundo branco); o
   escuro entra pelo sol/lua no topo, que grava a escolha no navegador.
   Nenhuma cor literal fora daqui: tela que escreve #hex na mão quebra
   no outro tema.

   Ordem: tokens, base, casca (topo e menu), botões, barra e filtros,
   funil, tabela, conta, painéis, formulário, janela, avisos, área do
   desenvolvedor, telas pequenas.
   ============================================================ */

:root{
  color-scheme:light;

  /* superfícies, do fundo para a frente */
  --ink:#fafbfc;
  --panel:#ffffff;
  --panel-2:#f2f4f7;
  --panel-3:#e8ebf0;

  --fg:#15181e;
  --fg-soft:#4c5563;
  --fg-faint:#78818f;

  --line:rgba(17,20,26,.10);
  --line-strong:rgba(17,20,26,.18);

  --accent:#0e9c89;
  --accent-dim:rgba(14,156,137,.12);
  --accent-forte:#0b7d6e;

  /* contraste de quem fica por cima do accent */
  --sobre-accent:#ffffff;

  /* o padrão único de status: quatro significados, quatro cores.
     Fase e situação de serviço bebem daqui -- nunca de cor solta.

     Os quatro tons passaram nos testes de daltonismo, de contraste
     contra o fundo e de distância entre vizinhos, um jogo por tema.
     Trocar um valor aqui pede refazer o teste: verde e âmbar são o par
     que se confunde primeiro em quem não enxerga cor. */
  --st-aberto:#2f6fed;
  --st-espera:#a85f05;
  --st-ganho:#12805f;
  --st-perdido:#d13a2c;

  --st-neutro:#6b7280;

  /* paleta categórica: identidade, não estado. Nunca reaproveita cor de
     status -- verde aqui não pode querer dizer "ganho". Os seis tons
     passaram nos mesmos testes de contraste e daltonismo. */
  --cat-1:#00897c;
  --cat-2:#5c4ad4;
  --cat-3:#b03a86;
  --cat-4:#856f00;
  --cat-5:#2b6cb8;
  --cat-6:#a94a22;

  /* rampa de atraso: um tom so, do claro ao escuro.
     Escala ordenada nao e identidade -- 31 a 60 e um degrau depois de
     1 a 30, nao outra categoria. Cor de estado aqui dava duas faixas
     com a mesma cor. */
  --atraso-1:#e5917a;
  --atraso-2:#d1634a;
  --atraso-3:#ad3a1e;
  --atraso-4:#7f2510;

  --sombra:0 1px 2px rgba(16,20,28,.06),0 8px 24px rgba(16,20,28,.06);
  --sombra-alta:0 18px 44px rgba(16,20,28,.18);

  --font-display:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Escala da interface. 0.85 é a densidade pedida: a mesma tela,
     15% mais compacta, cabendo bem mais linha sem trocar
     tipografia. Aplicada com `zoom` no corpo, que reflui o layout de
     verdade -- `transform: scale` encolheria o desenho e deixaria a
     sobra em branco na direita. Ajustável na área do desenvolvedor. */
  --escala:.85;

  /* A altura da tela DENTRO do zoom.

     `zoom` encolhe o desenho, mas `vh` continua medindo a janela real.
     Um bloco com `height:100vh` dentro de um corpo com zoom .85 ocupa
     85% da tela -- e o rodapé sobe, deixando uma faixa vazia embaixo.
     Dividir pela escala devolve a altura de verdade. */
  --tela:calc(100vh / var(--escala));

  --raio:10px;
  --raio-g:12px;
  --topo:50px;
  --lateral:196px;
}

:root[data-tema="escuro"]{
  color-scheme:dark;

  --ink:#09090b;
  --panel:#111114;
  --panel-2:#17171b;
  --panel-3:#1f1f25;

  --fg:#e4e4e7;
  --fg-soft:#a1a1aa;
  --fg-faint:#85858e;

  --line:rgba(228,228,231,.10);
  --line-strong:rgba(228,228,231,.22);

  --accent:#2fd6bd;
  --accent-dim:rgba(47,214,189,.14);
  --accent-forte:#5fe4d0;
  --sobre-accent:#09090b;

  --st-aberto:#4f86e8;
  --st-espera:#bd8420;
  --st-ganho:#17a78c;
  --st-perdido:#e05b51;
  --st-neutro:#9aa1ad;

  --cat-1:#1aa899;
  --cat-2:#8878ee;
  --cat-3:#d668b0;
  --cat-4:#a78b1c;
  --cat-5:#4d90dd;
  --cat-6:#cc6b3c;

  /* No escuro a rampa anda para o outro lado: mais atraso, mais claro.
     Nao e o tema claro invertido -- sao degraus proprios, medidos
     contra o fundo escuro. */
  --atraso-1:#8a3a22;
  --atraso-2:#b04f2f;
  --atraso-3:#d1704a;
  --atraso-4:#ef9a72;

  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --sombra-alta:0 22px 52px rgba(0,0,0,.6);
}

*{box-sizing:border-box}

/* O atributo hidden perde para qualquer display do autor. Como há bloco
   com display:grid que nasce escondido, esta regra precisa vencer. */
[hidden]{display:none !important}

html,body{height:100%}

body{
  zoom:var(--escala);
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:13.5px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent);color:var(--sobre-accent)}

*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;
  border:3px solid var(--ink);background-clip:padding-box}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ============================================================
   CASCA: topo e menu da direita
   ============================================================ */

.topo{
  position:sticky;top:0;z-index:40;
  height:var(--topo);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px) minmax(0,1fr);
  align-items:center;gap:12px;
  padding:0 14px;
  /* o verde da logo assina o topo e o rodape, diluido o bastante para
     nao competir com o conteudo */
  background:
    linear-gradient(90deg, rgba(47,214,189,.16) 0%, rgba(47,214,189,.05) 38%, transparent 70%),
    var(--panel);
  border-bottom:1px solid var(--line);
}

.marca{display:inline-flex;align-items:center;gap:9px;min-width:0;flex:0 0 auto}
.marca svg{height:17px;width:auto;color:var(--accent);flex:0 0 auto}
.marca b{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.02em}
.marca span{
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--fg-faint);
  border-left:1px solid var(--line-strong);padding-left:9px;margin-left:2px;
}

.topo > .marca{justify-self:start}
.topo-meio{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.topo-fim{display:flex;align-items:center;gap:8px;justify-self:end}

/* ---- busca global: existe em toda tela, inclusive dentro da conta ---- */

/* A pílula é o container, e não o campo: dentro dela moram o escopo, a
   lupa e o texto. Enquanto a borda era do <input>, qualquer coisa
   acrescentada ao lado caía para fora da pílula -- que foi como o
   seletor de escopo empurrou a lupa para o canto de cima. */
.busca{
  position:relative;flex:1 1 340px;max-width:470px;min-width:0;
  display:flex;align-items:center;height:31px;padding:0 11px 0 5px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:99px;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.busca:focus-within{border-color:var(--accent);background:var(--panel)}
.busca input{
  flex:1 1 auto;min-width:0;width:100%;height:100%;padding:0;
  background:transparent;border:0;border-radius:0;
  color:var(--fg);font:inherit;font-size:13px;
}
.busca input::placeholder{color:var(--fg-faint)}
.busca input:focus{outline:none}
/* O X nativo do type=search encosta na borda arredondada e pisca com o
   foco; quem limpa a busca apaga o texto. */
.busca input::-webkit-search-cancel-button{display:none}

/* ---------------- escopo da busca ---------------- */
.busca-escopo{
  flex:0 0 auto;width:auto;max-width:112px;min-width:0;
  padding:0 5px 0 7px;height:21px;
  background:transparent;border:0;border-right:1px solid var(--line);
  border-radius:0;font-family:inherit;font-size:12px;color:var(--fg-soft);
  cursor:pointer;
}
.busca-escopo:focus{outline:none;color:var(--accent-forte)}
.busca > svg{
  flex:0 0 auto;width:15px;height:15px;margin:0 7px;
  color:var(--fg-faint);pointer-events:none;
}

.achados{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--raio);
  box-shadow:var(--sombra-alta);overflow:hidden;
  max-height:calc(var(--tela) * .6);overflow-y:auto;
}
.achados button{
  display:flex;align-items:center;gap:10px;width:100%;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:9px 12px;color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.achados button:last-child{border-bottom:0}
.achados button:hover,.achados button:focus-visible{background:var(--panel-2)}
.achados .nome{flex:1 1 auto;min-width:0;font-weight:600;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.achados .valor{color:var(--fg-soft);font-size:13px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.achados .nada{padding:12px;color:var(--fg-faint);font-size:13.5px}

/* ---- sol e lua ---- */

.tema{
  width:30px;height:30px;padding:0;border-radius:99px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--fg-soft);display:grid;place-items:center;cursor:pointer;
}
.tema:hover{color:var(--fg);border-color:var(--line-strong)}

/* ---------------- seletor de idioma ---------------- */
.idioma{position:relative}
.idioma-botao{gap:4px;padding-inline:7px}
.idioma-botao b{font-size:10.5px;font-weight:700;letter-spacing:.04em}
.idioma-lista{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:150px;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--raio);box-shadow:var(--sombra-alta);padding:5px;
}
.idioma-op{
  display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:0;border-radius:7px;padding:7px 9px;
  font:inherit;font-size:12.5px;color:var(--fg);cursor:pointer;text-align:left;
}
.idioma-op:hover{background:var(--panel-2)}
.idioma-op b{
  font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--fg-faint);
  min-width:18px;
}
.idioma-op.escolhido{color:var(--accent-forte);font-weight:600}
.idioma-op.escolhido b{color:var(--accent-forte)}
.tema svg{width:16px;height:16px}

.eu{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 5px;border-radius:99px;border:1px solid var(--line);
  background:var(--panel-2);cursor:pointer;font:inherit;color:var(--fg);
}
.eu:hover{border-color:var(--line-strong)}
.eu small{color:var(--fg-soft);font-size:13px;max-width:130px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.avatar{
  width:24px;height:24px;border-radius:99px;flex:0 0 auto;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:11px;
  color:#fff;background:var(--accent);
}
.avatar.g{width:46px;height:46px;font-size:16px}

/* ---- palco + menu da direita ---- */

.palco-geral{
  display:grid;grid-template-columns:minmax(0,1fr) var(--lateral);
  align-items:start;align-content:start;
  min-height:calc(var(--tela) - var(--topo));
}
/* align-content:start acima não é enfeite: com min-height maior que o
   conteúdo, o grid estica as linhas automáticas e abre um buraco entre
   o menu e o resto quando ele vira faixa horizontal. */

.lateral{
  position:sticky;top:var(--topo);
  height:calc(var(--tela) - var(--topo));
  border-left:1px solid var(--line);
  background:var(--panel);
  padding:12px 10px;
  display:flex;flex-direction:column;gap:3px;
}
.lateral h2{
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fg-faint);
  font-weight:600;padding:0 10px;margin-bottom:8px;
}
.lateral a{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:8px;
  color:var(--fg-soft);font-size:13px;
}
.lateral a svg{width:16px;height:16px;flex:0 0 auto;opacity:.85}
.lateral a:hover{background:var(--panel-2);color:var(--fg)}
.lateral a[aria-current="page"]{
  background:var(--accent-dim);color:var(--accent-forte);font-weight:600;
}
.lateral a .n{margin-left:auto;font-size:11.5px;color:var(--fg-faint);
  font-variant-numeric:tabular-nums}
.lateral .rodape{margin-top:auto;padding:10px;border-top:1px solid var(--line)}
.lateral .rodape a{font-size:13px;padding:7px 0;color:var(--fg-faint)}
.lateral .rodape a:hover{background:transparent;color:var(--accent)}


/* ============================================================
   BOTÕES
   ============================================================ */

.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:31px;padding:0 13px;border-radius:99px;border:1px solid transparent;
  background:var(--fg);color:var(--panel);
  font:inherit;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;
  transition:transform .12s var(--ease),opacity .16s var(--ease);
}
.botao:hover{opacity:.88}
.botao:active{transform:translateY(1px)}
.botao[disabled]{opacity:.45;cursor:not-allowed}

.botao.fino{background:var(--panel);color:var(--fg-soft);border-color:var(--line-strong);font-weight:500}
.botao.fino:hover{color:var(--fg);border-color:var(--fg-faint);background:var(--panel-2);opacity:1}

.botao.verde{background:var(--accent);color:var(--sobre-accent)}
.botao.perigo{background:transparent;color:var(--st-perdido);border-color:var(--st-perdido)}
.botao.perigo:hover{background:var(--st-perdido);color:#fff;opacity:1}
.botao.pequeno{height:26px;padding:0 10px;font-size:12.5px}

.icone{
  width:30px;height:30px;padding:0;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--fg-soft);display:grid;place-items:center;cursor:pointer;
}
.icone:hover{color:var(--fg);border-color:var(--line-strong)}
.icone svg{width:16px;height:16px}


/* ============================================================
   BARRA E FILTROS
   ============================================================ */

.barra{
  position:sticky;top:var(--topo);z-index:30;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 14px;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}

.titulo-pagina{font-size:15px;font-weight:700;margin-right:2px}

.abas{display:inline-flex;background:var(--panel);border:1px solid var(--line);
  border-radius:99px;padding:3px;gap:2px}
.abas button{
  border:0;background:transparent;color:var(--fg-faint);
  font:inherit;font-size:13px;font-weight:500;
  padding:5px 11px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.abas button svg{width:14px;height:14px}
.abas button[aria-pressed="true"]{background:var(--panel-3);color:var(--fg)}

/* Select compacto de barra (fase da conta, fonte do gráfico). Sem esta
   regra ele herda o width:100% do formulário e ocupa a linha inteira. */
.filtro{
  width:auto;max-width:200px;height:30px;
  padding:0 27px 0 10px;border-radius:99px;
  background-color:var(--panel);border:1px solid var(--line-strong);
  color:var(--fg-soft);font:inherit;font-size:13px;cursor:pointer;
}
.filtro:hover{border-color:var(--fg-faint);color:var(--fg)}
.filtro.ativo{color:var(--accent-forte);border-color:var(--accent);background-color:var(--accent-dim)}

/* ---- o ícone de filtro e o painel que ele abre ---- */

.caixa-filtro{position:relative}

.botao-filtro{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border-radius:99px;border:1px solid var(--line-strong);background:var(--panel);
  color:var(--fg-soft);font:inherit;font-size:13.5px;cursor:pointer;
}
.botao-filtro:hover{border-color:var(--fg-faint);color:var(--fg)}
.botao-filtro svg{width:15px;height:15px}
.botao-filtro[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-forte)}
.botao-filtro .conta-n{
  min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--accent);color:var(--sobre-accent);
  font-size:11px;font-weight:700;display:grid;place-items:center;
}

.painel-filtro{
  position:absolute;top:42px;left:0;z-index:45;width:290px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--raio-g);
  box-shadow:var(--sombra-alta);padding:14px;
}
.painel-filtro h3{
  font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--fg-faint);
  font-weight:600;margin-bottom:12px;
}
.painel-filtro .linha-campo{margin-bottom:11px}
.painel-filtro label{
  display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:4px;font-weight:600;
}
.painel-filtro select{width:100%}
.painel-filtro .pe{display:flex;gap:8px;justify-content:space-between;align-items:center;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

.barra-fim{margin-left:auto;display:flex;align-items:center;gap:8px}

.resumo{display:flex;align-items:center;gap:16px;padding-right:12px;
  border-right:1px solid var(--line);margin-right:4px}
.resumo div{text-align:right;line-height:1.15}
.resumo span{display:block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--fg-faint)}
.resumo b{font-family:var(--font-display);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums}


/* ============================================================
   SELOS DE STATUS  (o padrão único)
   ============================================================ */

.selo{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;letter-spacing:.3px;padding:3px 8px;border-radius:99px;
  border:1px solid var(--line-strong);color:var(--fg-soft);white-space:nowrap;
  background:var(--panel-2);
}
.selo.st{border-color:var(--cor);color:var(--cor);background:transparent}
.selo.forte{background:var(--cor);border-color:transparent;color:#fff;font-weight:600}
.selo .ponto{width:6px;height:6px;border-radius:99px;background:currentColor}

/* classes de significado, para quem não passa cor inline */
.st-aberto{--cor:var(--st-aberto)}
.st-espera{--cor:var(--st-espera)}
.st-ganho{--cor:var(--st-ganho)}
.st-perdido{--cor:var(--st-perdido)}
.st-neutro{--cor:var(--st-neutro)}

.mini{
  width:20px;height:20px;border-radius:99px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:9.5px;font-weight:600;color:#fff;
  background:var(--accent);flex:0 0 auto;
}


/* ============================================================
   FUNIL
   ============================================================ */

.quadro{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 14px 22px;
  overflow-x:auto;overflow-y:hidden;
  min-height:calc(var(--tela) - var(--topo) - 60px);
  scroll-snap-type:x proximity;
}

.coluna{
  flex:0 0 258px;width:258px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--raio-g);
  display:flex;flex-direction:column;
  max-height:calc(var(--tela) - var(--topo) - 88px);
  scroll-snap-align:start;
  box-shadow:var(--sombra);
  transition:border-color .16s var(--ease);
}
.coluna.alvo{border-color:var(--cor,var(--accent));background:var(--panel-2)}

.coluna-topo{padding:9px 11px 9px;border-bottom:1px solid var(--line)}
/* o numerinho de cards em cima, pequeno; o valor parado logo abaixo */
.coluna-topo .contagem{
  display:block;font-size:10px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:3px;
}
.coluna-topo h2{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.coluna-topo h2::before{
  content:"";width:8px;height:8px;border-radius:99px;flex:0 0 auto;
  background:var(--cor,var(--accent));
}
.coluna-topo .soma{
  display:block;margin-top:4px;
  font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--fg-soft);
  font-variant-numeric:tabular-nums;
}
.coluna-topo .soma em{font-style:normal;color:var(--fg-faint);font-weight:400;font-size:11px}

.coluna-cards{
  padding:8px;display:flex;flex-direction:column;gap:7px;
  overflow-y:auto;flex:1 1 auto;min-height:64px;
}

.coluna-fim{padding:0 10px 11px}
.coluna-fim button{
  width:100%;height:32px;border-radius:10px;border:1px dashed var(--line-strong);
  background:transparent;color:var(--fg-faint);font:inherit;font-size:13px;cursor:pointer;
}
.coluna-fim button:hover{color:var(--fg);border-color:var(--line-strong)}

.card{
  position:relative;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--raio);
  padding:9px 10px 8px;
  cursor:pointer;display:block;width:100%;text-align:left;
  font:inherit;color:inherit;
  transition:border-color .14s var(--ease),transform .14s var(--ease),box-shadow .14s var(--ease);
  touch-action:pan-y;
}
.card::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:99px;
  background:var(--cor,var(--accent));
}
.card:hover{border-color:var(--line-strong);transform:translateY(-1px);box-shadow:var(--sombra)}
.card.arrastando{opacity:.3}
.card.fantasma{
  position:fixed;z-index:100;pointer-events:none;width:262px;
  box-shadow:var(--sombra-alta);transform:rotate(-1.4deg) scale(1.02);
  border-color:var(--line-strong);opacity:1;background:var(--panel);
}

.card h3{
  font-size:13px;font-weight:600;line-height:1.3;margin:0 0 5px;padding-left:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card .valor{
  padding-left:7px;font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.card .valor.zero{color:var(--fg-faint);font-weight:400;font-size:13px}
.card .linha{padding-left:7px;margin-top:6px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}

.vazio-coluna{
  border:1px dashed var(--line);border-radius:var(--raio);
  padding:16px 12px;text-align:center;color:var(--fg-faint);font-size:12.5px;
}


/* ============================================================
   TABELA
   ============================================================ */

.envolve-tabela{padding:11px 14px 34px;overflow-x:auto}

table.lista{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra);
}
table.lista th{
  background:var(--panel-2);text-align:left;padding:7px 11px;
  font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--fg-faint);
  font-weight:600;white-space:nowrap;border-bottom:1px solid var(--line);cursor:pointer;
  user-select:none;
}
table.lista th:hover{color:var(--fg-soft)}
table.lista th .seta{opacity:.6;font-size:9px;margin-left:3px}
table.lista td{padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px}
table.lista tr:last-child td{border-bottom:0}
table.lista tbody tr{cursor:pointer;transition:background .12s var(--ease)}
table.lista tbody tr:hover{background:var(--panel-2)}
table.lista td.num{text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--font-display);font-weight:600}
table.lista td.empresa{font-weight:600}
table.lista td.fraco{color:var(--fg-soft)}

/* ---- a fila de ligacao dos leads ----

   A alca e estreita e sem texto: o icone na linha e o que diz que da
   para arrastar. Ela aparece so na ordem da casa -- arrastar com a
   tabela ordenada por nome produziria uma ordem que a proxima
   ordenacao joga fora. */
/* `fila-pega` e nao `alca`: `.alca` ja e a alca de redimensionar
   painel (la embaixo, com position:absolute e display:none). As
   regras daqui eram mais especificas, mas nao declaravam display:
   o `display:none` da outra valia, e a celula nascia com caixa de
   zero por zero. Arrastar ficava inalcancavel, sem erro nenhum no
   console. */
table.lista th.fila-pega{width:30px;padding-right:0}
table.lista td.fila-pega{
  width:30px;padding:8px 0 8px 10px;color:var(--fg-faint);line-height:0;
}
table.lista td.fila-pega svg{width:15px;height:15px}
table.lista tbody.fila td.fila-pega{cursor:grab;touch-action:none}
table.lista tbody.fila td.fila-pega:hover{color:var(--fg-soft)}
table.lista tbody.fila tr.arrastando{opacity:.45;cursor:grabbing}
table.lista tbody.fila tr.arrastando td.fila-pega{cursor:grabbing}

/* Onde a linha cai. Sombra de dentro em vez de um no entre as <tr>:
   nao existe lugar para pendurar um elemento entre duas linhas de
   tabela sem mexer no numero de celulas. */
table.lista tbody.fila tr.cai-antes td{box-shadow:inset 0 2px 0 var(--accent)}
table.lista tbody.fila tr.cai-depois td{box-shadow:inset 0 -2px 0 var(--accent)}
/* No celular a alca cresce: 21px de largura e menos que o dedo
   acerta, e e justamente no celular que se liga para lead. */
@media (max-width:760px){
  table.lista th.fila-pega,
  table.lista td.fila-pega{width:38px;padding-left:13px;padding-right:4px}
  table.lista td.fila-pega svg{width:17px;height:17px}
}

/* ---- o pipeline de vendas, em forma de funil ----

   Estrutura fixa: largura em pixel, sem `flex-grow`. Coluna que cresce
   para preencher a tela muda de tamanho a cada filtro aplicado, e a
   forma do funil -- que e a informacao -- se desfaz junto.

   `--larg` vem do JS: depende de quantas fases a casa tem, e CSS nao
   sabe contar irmaos para dividir um intervalo.

   O respiro entre as fases e menor que no Planner (4px contra 10): no
   funil as colunas sao uma sequencia, e espaco grande entre elas le
   como quadros separados em vez de etapas de um caminho. */
.quadro.afunila{gap:4px;scroll-snap-type:none}
.quadro.afunila .coluna{
  flex:0 0 var(--larg,258px);width:var(--larg,258px);
}
/* No celular o funil nao afunila: 150px de largura numa tela de 390
   nao cabe card nenhum, e a forma nao vale o preco de nao dar para
   ler o nome da conta. */
@media (max-width:760px){
  .quadro.afunila{gap:8px}
  .quadro.afunila .coluna{flex:0 0 258px;width:258px}
}


/* ============================================================
   CONTA
   ============================================================ */

.conta-topo{
  padding:18px 22px 16px;border-bottom:1px solid var(--line);
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  background:var(--panel);
}
.conta-topo .titulo{flex:1 1 320px;min-width:0}
.conta-topo h1{font-size:25px;font-weight:800;line-height:1.15;word-break:break-word}
.conta-topo .sub{margin-top:7px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  color:var(--fg-faint);font-size:12.5px}
.conta-topo .dinheiro{
  font-family:var(--font-display);font-size:27px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.conta-topo .dinheiro small{display:block;font-size:10px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--fg-faint);font-weight:500;margin-bottom:6px}
.conta-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.conta-grade{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;
  padding:12px 18px 48px;align-items:start;
}

.bloco{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio-g);
  margin-bottom:16px;overflow:hidden;box-shadow:var(--sombra);
}
.bloco > header{display:flex;align-items:center;gap:9px;padding:9px 13px;
  border-bottom:1px solid var(--line)}
.bloco > header h2{
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--fg-faint);
  font-weight:600;flex:1 1 auto;
}
.bloco .corpo{padding:13px}
.bloco .corpo.aperta{padding:8px}

.pares{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:10px 18px}
.par{min-width:0}
.par dt{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--fg-faint);margin-bottom:3px}
.par dd{margin:0;font-size:13.5px;word-break:break-word}
.par dd.vazia{color:var(--fg-faint)}

/* ---------------- edição rápida no lugar ----------------
   O lápis fica escondido até o par receber o mouse. Um ícone por
   campo, todos visíveis ao mesmo tempo, transformaria a ficha numa
   grade de botões e tiraria a atenção do que importa: o dado. */
.par.editavel dt{display:flex;align-items:center;gap:6px}
.lapis{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;padding:0;flex:0 0 auto;
  background:none;border:0;border-radius:5px;cursor:pointer;
  color:var(--fg-faint);opacity:0;
  transition:opacity .12s var(--ease),background .12s var(--ease);
}
.lapis svg{width:12px;height:12px}
.par.editavel:hover .lapis,
.lapis:focus-visible{opacity:1}
.lapis:hover{background:var(--panel-3);color:var(--fg)}
/* Sem hover (toque), o lápis fica sempre visível: esconder atrás de um
   gesto que o aparelho não tem é esconder para sempre. */
@media (hover:none){
  .lapis{opacity:.7}
}
.par dd.editando{margin-top:2px}
.par dd input.inline,.par dd textarea.inline{
  width:100%;font-size:13.5px;padding:5px 8px;border-radius:8px;
  border:1px solid var(--accent);background:var(--panel);
}

/* ---------------- seção que fecha ---------------- */
.bloco.colapsavel > header{cursor:default}
.colapso{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;padding:0;flex:0 0 auto;
  background:none;border:0;border-radius:6px;cursor:pointer;
  color:var(--fg-faint);
  transition:transform .16s var(--ease),background .12s var(--ease);
}
.colapso svg{width:14px;height:14px}
.colapso:hover{background:var(--panel-3);color:var(--fg)}
.bloco.fechada .colapso{transform:rotate(-90deg)}
.bloco.fechada > header{border-bottom-color:transparent}
.par dd a{color:var(--accent-forte)}
.par dd a:hover{text-decoration:underline}

.contato{
  display:flex;gap:11px;align-items:flex-start;
  padding:9px 10px;border-radius:var(--raio);border:1px solid var(--line);
  background:var(--panel-2);margin-bottom:6px;
}
.contato:last-child{margin-bottom:0}
.contato .dados{flex:1 1 auto;min-width:0}
.contato b{font-size:13.5px;font-weight:600;display:block}
.contato .cargo{color:var(--fg-faint);font-size:12.5px}
.contato .vias{margin-top:7px;display:flex;gap:7px;flex-wrap:wrap}
.contato .vias a{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--fg-soft);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px;background:var(--panel);
}
.contato .vias a:hover{color:var(--fg);border-color:var(--line-strong)}
.contato .vias svg{width:12px;height:12px}

.servico{
  border:1px solid var(--line);border-radius:var(--raio);background:var(--panel-2);
  margin-bottom:8px;overflow:hidden;
}
.servico:last-child{margin-bottom:0}
.servico > button{
  width:100%;display:flex;align-items:center;gap:9px;padding:8px 10px;
  background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left;
}
.servico > button:hover{background:var(--panel-3)}
.servico .nome{flex:1 1 auto;min-width:0;font-weight:600;font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.servico .preco{font-family:var(--font-display);font-weight:600;font-size:14px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.servico .seta{color:var(--fg-faint);transition:transform .16s var(--ease);flex:0 0 auto}
.servico[aria-expanded="true"] .seta{transform:rotate(90deg)}
.servico .detalhe{padding:2px 12px 13px;border-top:1px solid var(--line);display:grid;gap:12px}
.servico .detalhe p{margin:10px 0 0;color:var(--fg-soft);font-size:13.5px;white-space:pre-wrap}

.total-servicos{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 16px;border-top:1px solid var(--line);background:var(--panel-2);
}
.total-servicos span{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--fg-faint)}
.total-servicos b{font-family:var(--font-display);font-size:17px;font-weight:700;
  font-variant-numeric:tabular-nums}

.rf-cabeca{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--raio);background:var(--panel-2);
  border:1px solid var(--line);margin-bottom:14px;
}
.rf-cabeca .estado{font-weight:600;font-size:14px}
.rf-cabeca .quando{color:var(--fg-faint);font-size:12px;margin-left:auto}
.cnae{border:1px solid var(--line);border-radius:var(--raio);padding:12px 14px;background:var(--panel-2)}
.cnae .codigo{font-family:var(--font-display);font-size:12px;color:var(--accent-forte);
  letter-spacing:.4px;font-weight:600}
.cnae p{margin:4px 0 0;font-size:14.5px;line-height:1.45}
.cnae-lista{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.cnae-lista div{font-size:13px;color:var(--fg-soft);display:flex;gap:8px}
.cnae-lista span{color:var(--fg-faint);font-family:var(--font-display);font-size:11.5px;
  flex:0 0 74px;padding-top:1px;white-space:nowrap}

.evento{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.evento:last-child{border-bottom:0}
.evento .quando{color:var(--fg-faint);font-size:12px;flex:0 0 84px;font-variant-numeric:tabular-nums}
.evento .texto{flex:1 1 auto;color:var(--fg-soft)}
.evento .texto b{color:var(--fg);font-weight:600}


/* ============================================================
   PAINÉIS
   ============================================================ */

.paineis{padding:12px 14px 48px;display:grid;gap:11px}

.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:11px}
.numero{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio-g);
  padding:13px 15px;box-shadow:var(--sombra);
}
.numero span{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:7px}
.numero b{display:block;font-family:var(--font-display);font-size:23px;font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.numero small{display:block;margin-top:7px;font-size:12.5px;color:var(--fg-faint)}

.cartao{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio-g);
  box-shadow:var(--sombra);overflow:hidden;
}
.cartao > header{padding:10px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cartao > header h2{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600}
.cartao > header .expl{font-size:12px;color:var(--fg-faint);margin-left:auto}
.cartao .corpo{padding:14px}
/* Um quadro dentro de um cartão não pode reclamar a tela inteira: quem
   manda na altura aqui é o cartão, não o quadro. */
.cartao .corpo.sem-forro{padding:0}
.quadro.no-cartao{min-height:0;padding:12px 14px 14px}

.dupla{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}

/* barra horizontal: gráfico que não precisa de biblioteca nenhuma */
.barras{display:grid;gap:13px}
.barra-item .cima{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;font-size:13.5px}
.barra-item .cima b{font-weight:600}
.barra-item .cima .qtd{color:var(--fg-faint);font-size:12px}
.barra-item .cima .val{margin-left:auto;font-family:var(--font-display);font-weight:600;
  font-variant-numeric:tabular-nums}
.barra-item .trilho{height:9px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.barra-item .cheio{
  /* `display:block` porque o preenchimento nasce <span> em um dos dois
     lugares que desenham esta barra, e caixa em linha ignora largura e
     altura: o aging do financeiro desenhava o trilho e nunca o
     preenchimento. Dizer aqui conserta os dois e impede o proximo. */
  display:block;height:100%;border-radius:99px;background:var(--cor,var(--accent));
  transition:width .5s var(--ease)}


/* ============================================================
   FORMULÁRIO
   ============================================================ */

.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px}
/* Duas colunas fixas, para formulário em que a ordem dos pares é
   informação: CNPJ ao lado de Tipo, Nome ao lado de Fantasia. Com
   `auto-fit` a janela larga abriria quatro colunas e desmancharia os
   pares. */
.campos.duplas{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){
  .campos.duplas{grid-template-columns:1fr}
}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo.largo{grid-column:1/-1}
.campo label{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--fg-faint);font-weight:600}
.campo .dica{font-size:12px;color:var(--fg-faint);letter-spacing:0;text-transform:none;font-weight:400}

input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],
input[type=number],input[type=date],select,textarea{
  width:100%;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
  color:var(--fg);font:inherit;font-size:13.5px;padding:7px 10px;
  transition:border-color .14s var(--ease);
}
/* A seta vem de uma variavel, e nao de uma regra por tema.
   ANTES: `select` punha a imagem com no-repeat, e
   `:root[data-tema="escuro"] select` repunha SO a imagem. Quem usasse o
   atalho `background:` -- como .busca-escopo, que zera repeat e position
   junto -- ficava com a seta ladrilhada por cima do texto no modo
   escuro, porque a regra do tema tinha especificidade maior e devolvia a
   imagem sem devolver o no-repeat.
   Com a variavel ha UMA regra de select, de especificidade baixa: quem
   escrever `background:` apaga a seta nos dois temas, como esperado. */
:root{
  --seta-select:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378818f' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
}
:root[data-tema="escuro"]{
  --seta-select:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2385858e' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
}
select{appearance:none;padding-right:32px;cursor:pointer;
  background-image:var(--seta-select);
  background-repeat:no-repeat;background-position:right 11px center}

/* Lista mais o botao de criar, na mesma linha. Usado no Setor da
   tarefa; serve para qualquer select que aceite opcao nova. */
.linha-com-mais{display:flex;align-items:center;gap:6px;min-width:0}
.linha-com-mais > select,.linha-com-mais > input{flex:1 1 auto;min-width:0}
.botao-mais{
  flex:0 0 auto;width:30px;height:30px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:9px;
  color:var(--fg-soft);font-size:17px;font-family:inherit;cursor:pointer;
  transition:border-color .14s var(--ease),color .14s var(--ease);
}
.botao-mais:hover{border-color:var(--line-strong);color:var(--fg)}
textarea{resize:vertical;min-height:72px;line-height:1.45}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
input::placeholder,textarea::placeholder{color:var(--fg-faint)}

.caixa{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;color:var(--fg-soft)}
.caixa input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;flex:0 0 auto}


/* ============================================================
   JANELA
   ============================================================ */

.cortina{
  position:fixed;inset:0;z-index:60;
  background:rgba(12,14,20,.45);backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:calc(var(--tela) * .05) 16px 16px;overflow-y:auto;
  animation:aparece .16s var(--ease);
}
:root[data-tema="escuro"] .cortina{background:rgba(4,4,6,.74)}
@keyframes aparece{from{opacity:0}to{opacity:1}}

.janela{
  width:100%;max-width:620px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:18px;
  box-shadow:var(--sombra-alta);animation:sobe .2s var(--ease);
}
.janela.larga{max-width:860px}
@keyframes sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.janela > header{display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.janela > header h2{font-size:15.5px;font-weight:600;flex:1 1 auto}
.janela .corpo{padding:16px;display:grid;gap:13px}
.janela > footer{display:flex;gap:8px;justify-content:flex-end;padding:11px 16px;
  border-top:1px solid var(--line);background:var(--panel-2);
  border-radius:0 0 18px 18px;flex-wrap:wrap}
.janela > footer .esquerda{margin-right:auto}


/* ============================================================
   AVISOS
   ============================================================ */

.fitas{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:8px}
.fita{
  background:var(--panel);border:1px solid var(--line-strong);border-left:3px solid var(--accent);
  border-radius:10px;padding:11px 15px;font-size:14px;max-width:340px;
  box-shadow:var(--sombra-alta);animation:entra .2s var(--ease);
}
.fita.erro{border-left-color:var(--st-perdido)}
@keyframes entra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

.tarja{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 16px;font-size:13px;color:var(--fg-soft);
  background:var(--panel-2);border-bottom:1px solid var(--line);
}
.tarja b{color:var(--st-espera)}
.tarja button{margin-left:auto}

.nada{text-align:center;padding:60px 20px;color:var(--fg-faint)}
.nada h2{font-size:17px;color:var(--fg-soft);margin-bottom:6px}
.nada p{margin:0 0 18px;font-size:14px}

.carregando{padding:60px;text-align:center;color:var(--fg-faint)}


/* ============================================================
   ÁREA DO DESENVOLVEDOR
   ============================================================ */

.dev-grade{display:grid;grid-template-columns:224px minmax(0,1fr);gap:16px;
  padding:16px 18px 48px;align-items:start}

.dev-menu{position:sticky;top:calc(var(--topo) + 16px);display:flex;flex-direction:column;gap:2px}
.dev-menu button{
  text-align:left;background:transparent;border:0;border-radius:10px;
  padding:9px 12px;color:var(--fg-faint);font:inherit;font-size:14px;cursor:pointer;
  display:flex;align-items:center;gap:9px;
}
.dev-menu button:hover{color:var(--fg);background:var(--panel)}
.dev-menu button[aria-current="true"]{background:var(--panel);color:var(--fg);font-weight:600;
  box-shadow:var(--sombra)}

/* ---------------- a sanfona por entidade ----------------
   Cinco grupos, um aberto por vez. A lista corrida de treze seções
   obrigava a lembrar em qual delas mora cada ajuste; agrupada, a
   pergunta vira "isso é da conta, da oportunidade ou do contrato?". */
.dev-sanfona{gap:3px}

/* ---------------- procurar um ajuste ---------------- */
.dev-procurar{position:relative;margin-bottom:10px}
.dev-procurar input{
  width:100%;box-sizing:border-box;font-size:13px;padding:8px 11px;
  border-radius:10px;
}
/* Com a busca aberta, os grupos somem: duas listas competindo pela
   mesma decisao e pior do que uma. */
.dev-menu.procurando .dev-grupo,
.dev-menu.procurando .dev-grupo-itens{display:none}
.dev-achados{
  display:flex;flex-direction:column;gap:2px;margin-top:6px;
}
.dev-achados button{
  display:block;width:100%;text-align:left;padding:8px 11px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  color:inherit;font:inherit;cursor:pointer;
}
.dev-achados button:hover{border-color:var(--line-strong)}
.dev-achados button b{display:block;font-size:13px;font-weight:600}
.dev-achados button small{display:block;font-size:11.5px;color:var(--fg-faint)}
.dev-achados-nada{margin:0;padding:8px 11px;font-size:12.5px;color:var(--fg-faint)}

/* ---------------- onde estou ---------------- */
.dev-caminho{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:0 0 14px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
}
.dev-caminho b{color:var(--fg-soft);font-weight:700}
.dev-caminho span{opacity:.6}
.dev-grupo{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 11px;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--fg-soft);
  font:inherit;font-size:13px;font-weight:600;text-align:left;
}
.dev-grupo:hover{background:var(--panel);color:var(--fg)}
.dev-grupo .nome{flex:1 1 auto;min-width:0}
.dev-grupo .conta-n{
  font-size:11px;font-weight:600;color:var(--fg-faint);
  background:var(--panel-2);border-radius:99px;padding:1px 7px;
}
.dev-grupo .seta{flex:0 0 auto;transition:transform .16s var(--ease)}
.dev-grupo.aberto{color:var(--fg);background:var(--panel-2)}
.dev-grupo.aberto .seta{transform:rotate(180deg)}

.dev-grupo-itens{
  display:flex;flex-direction:column;gap:2px;
  padding:3px 0 10px 9px;margin-left:5px;
  border-left:1px solid var(--line);
}
.dev-grupo-resumo{
  margin:2px 0 6px;padding:0 3px;
  font-size:11.5px;line-height:1.45;color:var(--fg-faint);
}
.dev-menu .dev-grupo-itens button{font-size:13px;padding:7px 11px}

.dev-sub{font-size:15px;font-weight:700;margin:22px 0 3px}
.dev-explica{margin:0 0 11px;font-size:13px;color:var(--fg-soft);max-width:64ch}

/* O modelo de cobrança tem um textarea dentro: a linha do item deixa
   de ser uma linha e vira um bloco. */
.item.item-alto{align-items:flex-start}
.item.item-alto .fim{margin-top:2px}
.dev-modelo{display:flex;flex-direction:column;gap:9px;flex:1 1 320px}
.dev-modelo textarea{
  width:100%;min-height:150px;resize:vertical;font-family:inherit;
  font-size:13px;line-height:1.55;
}
.aviso-dev code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--panel-2);border-radius:5px;padding:1px 5px;
}

.dev-secao > h2{font-size:17px;font-weight:700;margin-bottom:4px}
.dev-secao > .expl{color:var(--fg-soft);font-size:14px;margin:0 0 18px;max-width:64ch}

.item{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);
  padding:9px 10px;margin-bottom:7px;box-shadow:var(--sombra);
}
.item .corpo{flex:1 1 200px;min-width:0}
.item .corpo b{display:block;font-size:14.5px;font-weight:600}
.item .corpo small{color:var(--fg-faint);font-size:12.5px}
.item .fim{display:flex;gap:6px;align-items:center;margin-left:auto}
.item input[type=color]{width:34px;height:30px;padding:2px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--panel);cursor:pointer}

.linha-botoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

.aviso-dev{
  border:1px solid var(--accent);background:var(--accent-dim);
  border-radius:var(--raio);padding:12px 15px;font-size:13.5px;color:var(--fg-soft);margin-bottom:18px;
}
.aviso-dev b{color:var(--accent-forte)}

/* A barra de salvar gruda no pe da area visivel. Ela ficava no fim do
   rolo: numa secao de vinte linhas, salvar exigia rolar ate o fim toda
   vez -- e quem nao rolava achava que nao dava para salvar. */
.salvar-fixo{
  position:sticky;bottom:10px;z-index:4;

  position:sticky;bottom:0;margin:20px 0 70px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:12px 14px;background:var(--panel);
  border:1px solid var(--line-strong);border-radius:var(--raio);box-shadow:var(--sombra-alta);
}
.salvar-fixo .estado{color:var(--fg-faint);font-size:13px;margin-right:auto}


/* ============================================================
   ENTRADA
   ============================================================ */

.entrada{min-height:var(--tela);display:grid;place-items:center;padding:24px}
.entrada .caixa-entrada{
  width:100%;max-width:400px;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:34px 30px;box-shadow:var(--sombra);
}
.entrada h1{font-size:22px;margin-bottom:6px}
.entrada .expl{color:var(--fg-soft);font-size:14px;margin:0 0 24px}
.entrada .campo{margin-bottom:14px}
.entrada .botao{width:100%}
.entrada .lista-gente{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.entrada .lista-gente button{
  display:flex;align-items:center;gap:10px;width:100%;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--raio);
  padding:10px 12px;color:inherit;font:inherit;cursor:pointer;text-align:left;
}
.entrada .lista-gente button:hover{border-color:var(--line-strong)}
.entrada .lista-gente small{color:var(--fg-faint);font-size:12px;display:block}


/* ============================================================
   HERO DE REGISTRO  (cabeçalho corporativo)

   O padrão de tela de registro que o mercado consagrou: ladrilho do
   objeto à esquerda, tipo em caixa alta pequena, nome grande e, numa
   régua abaixo, os campos que respondem "em que pé está isto" sem
   precisar rolar. Ações ficam à direita, longe do título.
   ============================================================ */

.hero{
  padding:13px 18px 0;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(47,214,189,.10) 0%, transparent 46%),
    var(--panel);
}

.hero-topo{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}

.hero-ladrilho{
  width:38px;height:38px;flex:0 0 auto;border-radius:9px;
  display:grid;place-items:center;color:#fff;
  background:var(--cor,var(--accent));
}
.hero-ladrilho svg{width:19px;height:19px}

.hero-titulo{flex:1 1 280px;min-width:0}
.hero-titulo .tipo{
  display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;margin-bottom:1px;
}
.hero-titulo h1{
  font-size:21px;font-weight:700;line-height:1.15;letter-spacing:-.02em;
  word-break:break-word;
}
.hero-acoes{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-left:auto}

/* a régua de campos, que vira barra rolável em tela estreita */
.hero-regua{
  display:flex;gap:0;margin-top:11px;
  overflow-x:auto;
}
.hero-regua .campo-hero{
  flex:0 0 auto;min-width:130px;max-width:230px;
  padding:0 16px 11px 0;margin-right:16px;
  border-right:1px solid var(--line);
}
.hero-regua .campo-hero:last-child{border-right:0}
.hero-regua dt{
  font-size:10px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;margin-bottom:2px;
}
.hero-regua dd{margin:0;font-size:13.5px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-regua dd.vazia{color:var(--fg-faint);font-weight:400}
.hero-regua dd.dinheiro-hero{
  font-family:var(--font-display);font-size:17px;font-weight:700;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}

.hero-aviso{
  margin:0 0 11px;padding:8px 11px;border-radius:9px;font-size:13px;
  background:var(--panel-2);border:1px solid var(--st-perdido);
}


/* ============================================================
   FOTO DE PERFIL
   ============================================================ */

.avatar img{width:100%;height:100%;border-radius:99px;object-fit:cover;display:block}

.editor-foto{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.editor-foto .previa{
  width:66px;height:66px;border-radius:99px;flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden;
  font-family:var(--font-display);font-weight:600;font-size:22px;color:#fff;
  background:var(--accent);border:2px solid var(--line-strong);
}
.editor-foto .previa img{width:100%;height:100%;object-fit:cover}
.editor-foto .lado{display:flex;flex-direction:column;gap:6px}
.editor-foto .lado small{color:var(--fg-faint);font-size:12px}
.editor-foto input[type=file]{display:none}


/* ============================================================
   CONFETES  (só quando a venda fecha)
   ============================================================ */

.confete-palco{
  position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden;
}
.confete{
  position:absolute;width:9px;height:14px;opacity:0;
  animation:cai 2.4s cubic-bezier(.24,.86,.44,1) forwards;
}
@keyframes cai{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  8%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--dx),108vh,0) rotate(var(--giro))}
}
@media (prefers-reduced-motion:reduce){
  .confete-palco{display:none}
}


/* ============================================================
   MENU RETRÁTIL E FIXAR TELA INICIAL
   ============================================================ */

:root[data-menu="recolhido"]{--lateral:62px}

.lateral-topo{
  display:flex;align-items:center;gap:6px;
  padding:0 6px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.lateral-topo h2{flex:1 1 auto;margin:0;padding:0 4px}
.lateral-topo button{
  width:28px;height:28px;flex:0 0 auto;padding:0;border-radius:8px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--fg-faint);
  display:grid;place-items:center;cursor:pointer;
}
.lateral-topo button:hover{color:var(--fg);border-color:var(--line-strong)}
.lateral-topo button svg{width:15px;height:15px}

.lateral a{position:relative}
.lateral a .rotulo{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* o pino só aparece no hover, ou quando está fixado */
.lateral .pino{
  width:22px;height:22px;flex:0 0 auto;padding:0;border:0;border-radius:6px;
  background:transparent;color:var(--fg-faint);display:grid;place-items:center;
  cursor:pointer;opacity:0;transition:opacity .14s var(--ease);
}
.lateral .pino svg{width:13px;height:13px}
.lateral a:hover .pino,.lateral .pino:focus-visible{opacity:1}
.lateral .pino[aria-pressed="true"]{opacity:1;color:var(--accent)}
.lateral .pino:hover{color:var(--accent);background:var(--accent-dim)}

/* ---------------- menu reordenavel ---------------- */
.lateral a{cursor:grab}
.lateral a.arrastando-menu{opacity:.4;cursor:grabbing}
.lateral a.alvo-menu{box-shadow:inset 0 2px 0 var(--accent)}
.ajuste-menu{display:flex;flex-direction:column;gap:2px}
.ajuste-menu .caixa{padding:7px 9px;border-radius:8px}
.ajuste-menu .caixa:hover{background:var(--panel-2)}
.ajuste-linha{display:flex;align-items:center;gap:4px}
.ajuste-linha .caixa{flex:1 1 auto;min-width:0}
.ajuste-seta{
  flex:0 0 auto;width:26px;height:26px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
  color:var(--fg-soft);font-size:13px;font-family:inherit;cursor:pointer;
  transition:border-color .14s var(--ease),color .14s var(--ease);
}
.ajuste-seta:hover:not(:disabled){border-color:var(--line-strong);color:var(--fg)}
.ajuste-seta:disabled{opacity:.3;cursor:default}

/* O rotulo das sugestoes de empresa, no topo da lista de achados. */
.achados-rotulo{
  padding:8px 12px 6px;font-size:10.8px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);
}

:root[data-menu="recolhido"] .lateral{padding:12px 8px;align-items:stretch}
:root[data-menu="recolhido"] .lateral h2,
:root[data-menu="recolhido"] .lateral .rotulo,
:root[data-menu="recolhido"] .lateral .n,
:root[data-menu="recolhido"] .lateral .pino,
:root[data-menu="recolhido"] .lateral .rodape{display:none}
:root[data-menu="recolhido"] .lateral a{justify-content:center;padding:10px 0}
:root[data-menu="recolhido"] .lateral-topo{border-bottom:0;justify-content:center;padding:0 0 10px}


/* ============================================================
   PLANEJADOR
   ============================================================ */

.cal-topo{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 16px 0;
}
.cal-topo .mes{font-size:17px;font-weight:700;min-width:190px}
.cal-topo .hoje{margin-left:4px}

.calendario{padding:10px 14px 34px}

.cal-cabeca{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  margin-bottom:1px;
}
.cal-cabeca div{
  padding:7px 8px;text-align:center;
  font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
}

.cal-grade{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--raio-g);overflow:hidden;
}
.cal-dia{
  background:var(--panel);min-height:96px;padding:6px 7px 8px;
  display:flex;flex-direction:column;gap:4px;cursor:pointer;
  transition:background .12s var(--ease);
}
.cal-dia:hover{background:var(--panel-2)}
.cal-dia.fora{background:var(--panel-2);opacity:.55}
.cal-dia.hoje{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-dia .num{
  font-family:var(--font-display);font-size:12.5px;font-weight:600;color:var(--fg-soft);
  display:flex;align-items:center;gap:6px;
}
.cal-dia.hoje .num{color:var(--accent-forte)}
.cal-dia .num .mais{margin-left:auto;font-size:11px;color:var(--fg-faint);font-weight:400}

/* semana e dia: uma coluna alta por dia */
.cal-semana{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--raio-g);overflow:hidden;
}
.cal-semana .col{background:var(--panel);min-height:calc(var(--tela) * .6);padding:8px;
  display:flex;flex-direction:column;gap:5px}
.cal-semana .col.hoje{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-semana .col h3{font-size:12.5px;font-weight:600;color:var(--fg-soft);
  padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:2px}

.cal-lista{display:flex;flex-direction:column;gap:8px;max-width:760px}

/* a tarefa, tanto no calendário quanto nas listas */
.tarefa{
  position:relative;display:flex;align-items:flex-start;gap:8px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:6px 8px 6px 11px;cursor:pointer;text-align:left;width:100%;
  font:inherit;color:inherit;
}
.tarefa::before{
  content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;
  border-radius:99px;background:var(--cor,var(--st-aberto));
}
.tarefa:hover{border-color:var(--line-strong);background:var(--panel-3)}
.tarefa .hora{font-size:11px;color:var(--fg-faint);font-variant-numeric:tabular-nums;
  flex:0 0 auto;padding-top:1px}
.tarefa .titulo{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarefa.feita .titulo{text-decoration:line-through;color:var(--fg-faint)}
.tarefa .mini{width:17px;height:17px;font-size:8.5px}

.tarefa.arrastando{opacity:.3}
.tarefa.fantasma{
  position:fixed;z-index:100;pointer-events:none;
  box-shadow:var(--sombra-alta);transform:rotate(-1.4deg) scale(1.02);
  border-color:var(--line-strong);opacity:1;background:var(--panel);
}

/* o dia que vai receber a tarefa */
.cal-dia.alvo,.cal-semana .col.alvo{
  background:var(--accent-dim);box-shadow:inset 0 0 0 2px var(--accent);
}

/* ---------------- doca de quadros ----------------
   Só existe enquanto há tarefa na mão. Fora disso ela não ocupa
   espaço nenhum: ninguém precisa de uma barra explicando um arrasto
   que não está acontecendo. */
.doca{
  position:fixed;left:50%;bottom:14px;transform:translate(-50%,130%);
  z-index:90;max-width:min(94vw,1100px);
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--raio-g);box-shadow:var(--sombra-alta);
  padding:10px 14px 12px;opacity:0;pointer-events:none;
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
/* Fechada ela e transparente ao ponteiro; aberta precisa receber a
   tarefa, senao o arrasto atravessa a doca e nada acontece. */
body.com-tarefa-na-mao .doca{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.doca-dica{
  display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;margin-bottom:8px;
}
.doca-faixa{display:flex;gap:18px;overflow-x:auto;padding-bottom:2px}
.doca-grupo{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.doca-grupo b{font-size:12px;color:var(--fg-soft);margin-right:2px;white-space:nowrap}
.doca-alvo{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:12px;padding:6px 11px;border-radius:99px;
  border:1px dashed var(--line-strong);color:var(--fg-soft);
  transition:background .12s var(--ease),color .12s var(--ease),
             border-color .12s var(--ease);
}
.doca-alvo::before{
  content:"";width:7px;height:7px;border-radius:99px;
  background:var(--cor,var(--st-aberto));
}
.doca-alvo.alvo{
  background:var(--cor,var(--st-aberto));border-color:transparent;
  color:#fff;font-weight:600;
}
.doca-alvo.alvo::before{background:rgba(255,255,255,.85)}

.cal-lista .tarefa{padding:10px 12px 10px 14px;border-radius:var(--raio)}
.cal-lista .tarefa .titulo{font-size:14.5px;font-weight:500;white-space:normal}
.cal-lista .tarefa .hora{font-size:12.5px}


/* ============================================================
   GRÁFICOS
   ============================================================ */

.grafico{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.grafico svg{flex:0 0 auto}

.legenda{display:flex;flex-direction:column;gap:7px;flex:1 1 180px;min-width:0}
.legenda .item-leg{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.legenda .bolinha{width:10px;height:10px;border-radius:3px;flex:0 0 auto;background:var(--cor)}
.legenda .nome{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--fg-soft)}
.legenda .val{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.legenda .pct{color:var(--fg-faint);font-size:12px;width:38px;text-align:right;
  font-variant-numeric:tabular-nums}

/* funil: degraus que estreitam */
.funil{display:grid;gap:6px}
.funil-passo{display:flex;align-items:center;gap:12px}
.funil-passo .barra-f{
  height:34px;border-radius:7px;background:var(--cor,var(--st-aberto));
  display:flex;align-items:center;padding:0 10px;min-width:44px;
  color:#fff;font-size:12.5px;font-weight:600;
  transition:width .5s var(--ease);
}
.funil-passo .lado{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px}
.funil-passo .lado b{font-size:13.5px;font-weight:600}
.funil-passo .lado .qtd{color:var(--fg-faint);font-size:12px}
.funil-passo .lado .val{margin-left:auto;font-family:var(--font-display);font-weight:600;
  font-variant-numeric:tabular-nums;font-size:13.5px}
.funil-passo .taxa{flex:0 0 52px;text-align:right;color:var(--fg-faint);font-size:12px;
  font-variant-numeric:tabular-nums}

.cartao .acoes-cartao{display:flex;gap:6px;align-items:center;margin-left:auto}


/* ---------------- gaveta lateral ----------------
   A mesma janela, encostada na direita. O conteúdo não muda de
   formato: quem decide é uma classe, não um segundo componente. */
.cortina-gaveta{justify-content:flex-end;align-items:stretch;padding:0}
.janela.gaveta{
  width:min(440px,100vw);max-width:none;max-height:none;height:var(--tela);
  border-radius:0;border-right:0;border-top:0;border-bottom:0;
  display:flex;flex-direction:column;
  animation:entra-gaveta .2s var(--ease);
}
.janela.gaveta > .corpo{flex:1 1 auto;overflow-y:auto}
.janela.gaveta > footer{margin-top:auto}
@keyframes entra-gaveta{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .janela.gaveta{animation:none}
}
@media (max-width:560px){
  .janela.gaveta{width:100vw}
}


/* ============================================================
   TELA DA OPORTUNIDADE
   ============================================================ */

.oportunidade{display:flex;flex-direction:column;gap:14px}

/* O path aqui é largo e cheio, como no Salesforce: é a informação
   principal da tela, não um detalhe do formulário. */
.path-largo .path-trilha{gap:2px}
.path-largo .path-passo{
  min-width:118px;padding:11px 12px 11px 20px;font-size:12px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.path-largo .path-passo.feita{opacity:1}
.path-largo .path-passo.feita svg{flex:0 0 auto;opacity:.85}
.path-largo .path-passo.feita{background:var(--st-ganho);color:#fff;opacity:.62}
/* A Proposta abre o caminho: ganha o gradiente do verde da EIXO,
   marcando onde tudo começa. */
.path-passo.inicial:not(.feita):not(.atual){
  background:linear-gradient(100deg,
    rgba(47,214,189,.30) 0%, rgba(47,214,189,.10) 60%, var(--panel-2) 100%);
  color:var(--fg-soft);
}
.path-passo.inicial.atual{
  background:linear-gradient(100deg,
    var(--accent) 0%, var(--accent-forte) 100%);
  color:#fff;
}
/* Clicável: o cursor precisa dizer isso antes do clique. */
.path-passo{border:0;font-family:inherit;cursor:pointer}
.path-passo:disabled{cursor:default}
.path-passo:not(:disabled):hover{filter:brightness(1.06)}
.path-passo:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.path-largo .path-acao{margin-top:9px}

/* duas colunas: detalhes e links rápidos */
.op-grade{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:14px;align-items:start}
.op-detalhes{min-width:0}
.op-lado{min-width:0;display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){
  .op-grade{grid-template-columns:minmax(0,1fr)}
}

/* pares em duas colunas dentro da seção, como no print.

   As linhas de grade quase transparentes separam um campo do outro
   sem virar tabela: com 5% de opacidade elas guiam o olho e somem
   quando ele para de procurar. */
.pares.duas{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
}
.pares.duas .par{
  padding:11px 16px 11px 0;
  border-bottom:1px solid rgba(120,129,143,.13);
  border-right:1px solid rgba(120,129,143,.09);
}
.pares.duas .par:nth-child(even){padding-right:0;border-right:0;padding-left:16px}
.pares.duas .par:nth-last-child(-n+2){border-bottom:0}
.pares.duas .par.largo{border-right:0;padding-right:0}
.pares.duas .par.largo{grid-column:1/-1}
@media (max-width:620px){
  .pares.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pares.duas .par{padding:10px 10px 10px 0}
  .pares.duas .par:nth-child(even){padding-left:12px}
  .pares.duas .par dd{overflow-wrap:anywhere}
}

/* ---------------- links rápidos: duas colunas de três ----------------
   A grade de 2x3 cabe sem rolar e deixa os seis à vista de uma vez. */
.grade-links{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);padding:0;
}
.link-caixa{position:relative;background:var(--panel)}
.link-rapido{
  display:flex;align-items:center;gap:8px;padding:11px 12px;
  text-decoration:none;color:inherit;font-size:12.5px;
}
.link-rapido:hover{background:var(--panel-2)}

/* a prévia que abre no hover */
/* A prévia é posicionada em coordenadas de tela por JS: presa dentro
   da coluna de 250px ela nasceria estreita e vazaria pela direita. */
.previa-pop{
  position:fixed;z-index:90;
  width:380px;max-width:calc(100vw - 24px);
  overflow-y:auto;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--raio-g);box-shadow:var(--sombra-alta);
  padding:15px 17px;
  animation:aparece-pop .13s var(--ease);
}
@keyframes aparece-pop{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.previa-pop{animation:none}}

.previa-pop h4{
  font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;margin:0 0 8px;
}
.previa-pares{display:flex;flex-direction:column;gap:7px;margin:0}
.previa-pares > div{display:flex;flex-direction:column;gap:1px}
.previa-pares dt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600}
.previa-pares dd{margin:0;font-size:12.5px;line-height:1.45;word-break:break-word;
  white-space:pre-wrap}
.previa-vazia{margin:0;font-size:12.5px;color:var(--fg-faint)}
.link-rapido .ponto{
  flex:0 0 auto;width:9px;height:9px;border-radius:99px;
  background:var(--cor,var(--st-neutro));
}
.link-rapido .nome{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--accent-forte);
}
.link-rapido .conta-n{
  flex:0 0 auto;color:var(--fg-faint);font-size:12px;
  background:none;padding:0;min-width:0;
}


/* ============================================================
   SINO E PATH
   ============================================================ */

.sino{position:relative}
.sino-botao{position:relative}
.sino-botao svg{width:17px;height:17px}
.sino-conta{
  position:absolute;top:1px;right:1px;min-width:15px;height:15px;
  padding:0 4px;border-radius:99px;background:var(--st-perdido);color:#fff;
  font-size:9.5px;font-weight:700;line-height:15px;text-align:center;
  box-shadow:0 0 0 2px var(--panel);
}
.sino-botao.tem-novas{color:var(--accent-forte)}

.sino-painel{
  position:absolute;top:calc(100% + 7px);right:0;z-index:80;
  width:min(342px,92vw);max-height:calc(var(--tela) * .62);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--raio-g);box-shadow:var(--sombra-alta);
}
.sino-painel > header{padding:11px 14px;border-bottom:1px solid var(--line)}
.sino-painel h3{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;margin:0}
.sino-vazio{margin:0;padding:16px 14px;font-size:12.5px;color:var(--fg-faint);line-height:1.5}
.sino-lista{display:flex;flex-direction:column}
.sino-item{
  display:flex;gap:10px;align-items:flex-start;padding:11px 14px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  cursor:pointer;
}
.sino-item:last-child{border-bottom:0}
.sino-item:hover{background:var(--panel-2)}
.sino-item.nova{background:var(--accent-dim)}
.sino-item.nova:hover{background:var(--panel-2);filter:brightness(.97)}
.sino-icone{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;
  background:var(--cor,var(--st-aberto));color:#fff;
}
.sino-icone svg{width:14px;height:14px}
.sino-texto{min-width:0;display:flex;flex-direction:column;gap:2px}
.sino-texto b{font-size:12.5px;line-height:1.3}
.sino-texto small{font-size:12px;color:var(--fg-soft);line-height:1.4}
.sino-texto .quando{font-size:11px;color:var(--fg-faint)}
.sino-limpar{
  width:100%;padding:10px;background:var(--panel-2);border:0;
  border-top:1px solid var(--line);cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--accent-forte);
}
.sino-limpar:hover{background:var(--panel-2)}

/* ---------------- path da oportunidade ---------------- */
.path{margin-bottom:18px}
.path-trilha{display:flex;gap:3px;flex-wrap:wrap}
.path-passo{
  flex:1 1 0;min-width:88px;position:relative;
  padding:8px 10px 8px 18px;
  background:var(--panel-2);color:var(--fg-faint);
  font-size:11.5px;font-weight:600;text-align:center;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%);
}
.path-passo:first-child{
  padding-left:12px;border-radius:7px 0 0 7px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
}
.path-passo:last-child{
  border-radius:0 7px 7px 0;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10px 50%);
}
.path-passo.feita{background:var(--accent-dim);color:var(--accent-forte)}
.path-passo.atual{background:var(--cor,var(--st-aberto));color:#fff}
.path-passo span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.path-acao{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:10px;padding:10px 13px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--raio);
}
.path-aviso{font-size:12.5px;color:var(--fg-soft);flex:1 1 auto;min-width:0}
.path-aviso.espera{color:var(--st-espera);font-weight:600}
.path-aviso.ganho{color:var(--st-ganho);font-weight:600}
.path-aviso.perdido{color:var(--st-perdido);font-weight:600}

/* ---------------- decidir a aprovação ---------------- */
.aprova-resumo{
  display:flex;flex-direction:column;gap:2px;padding:13px 15px;margin-bottom:13px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--raio);
}
.aprova-resumo b{font-size:15px}
.aprova-resumo > span{font-size:12.5px;color:var(--fg-faint)}
.aprova-valor{
  margin-top:7px;font-family:var(--font-display);font-size:22px;font-weight:700;
  display:flex;align-items:baseline;gap:9px;
}
.aprova-valor small{font-size:12px;font-weight:400;color:var(--fg-faint)}
.aprova-explica{margin:0 0 11px;font-size:13px;color:var(--fg-soft);line-height:1.5}
.aprova-mensagem{
  margin:0 0 13px;padding:11px 14px;border-left:3px solid var(--accent);
  background:var(--panel-2);border-radius:0 var(--raio) var(--raio) 0;
  font-size:13.5px;line-height:1.5;color:var(--fg);
}
.aprova-mensagem cite{
  display:block;margin-top:6px;font-style:normal;font-size:12px;
  color:var(--fg-faint);
}
.aprova-mensagem cite::before{content:"— "}

/* ---------------- proposta aprovada, bloqueada ---------------- */
.aviso-bloqueio{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 0 14px;padding:11px 13px;
  background:var(--panel-2);border:1px solid var(--line);
  border-left:3px solid var(--st-espera);
  border-radius:0 var(--raio) var(--raio) 0;
  font-size:12.5px;line-height:1.5;color:var(--fg-soft);
}
.aviso-bloqueio svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;
  color:var(--st-espera)}

/* A lista relacionada da conta, no pe da pagina. */
.conta-relacionadas{padding:0 22px 22px}


/* ============================================================
   HUB DA EMPRESA
   ============================================================ */

.hub{display:flex;flex-direction:column}
.hub-corpo{padding:16px 22px 22px;max-width:1080px}

/* As abas moram no rodapé do cabeçalho, coladas nele, como no
   Salesforce: elas pertencem ao registro, não à página. */
.hub-abas{
  display:flex;gap:2px;margin:14px -22px -14px;padding:0 22px;
  border-top:1px solid var(--line);overflow-x:auto;
}
.hub-aba{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:11px 15px;background:none;border:0;
  border-bottom:2px solid transparent;
  font:inherit;font-size:13px;font-weight:500;color:var(--fg-soft);
  cursor:pointer;white-space:nowrap;
  transition:color .12s var(--ease),border-color .12s var(--ease);
}
.hub-aba:hover{color:var(--fg)}
.hub-aba.atual{color:var(--accent-forte);font-weight:600;
  border-bottom-color:var(--accent)}
.hub-aba .n{
  font-size:11px;font-weight:600;color:var(--fg-faint);
  background:var(--panel-3);border-radius:99px;padding:1px 6px;
}
.hub-aba.atual .n{background:var(--accent-dim);color:var(--accent-forte)}


/* ---------------- escolher a visao do perfil ---------------- */
.perfil-opcao{
  display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--raio);
  background:var(--panel-2);font:inherit;color:inherit;cursor:pointer;
}
.perfil-opcao:hover{border-color:var(--line-strong)}
.perfil-opcao.escolhido{border-color:var(--accent);background:var(--accent-dim)}
.perfil-opcao b{font-size:14px}
.perfil-opcao small{font-size:12.5px;color:var(--fg-soft);line-height:1.45}
.perfil-opcao .abre{
  margin-top:5px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
}
.perfil-opcao.escolhido .abre{color:var(--accent-forte)}

/* ---------------- parcelamento ---------------- */
.espelho-parcela{
  margin:14px 0 0;padding:11px 13px;
  background:var(--accent-dim);border-radius:var(--raio);
  font-family:var(--font-display);font-size:14px;font-weight:600;
  color:var(--accent-forte);
}
.parcela-mini{
  display:block;font-size:11px;font-weight:400;color:var(--fg-faint);
  font-family:var(--font-body);margin-top:1px;
}


/* ============================================================
   FINANCEIRO
   ============================================================ */

.financeiro{display:flex;flex-direction:column;gap:14px;max-width:1080px}

/* ---------------- o painel da direita ----------------
   Com títulos importados a tela vira duas colunas: o caminho à
   esquerda, a matriz de aging à direita. A matriz é o que se consulta
   o tempo todo enquanto se lê o resto -- embaixo da página obrigaria a
   subir e descer a cada linha. */
.financeiro.com-lado{
  display:grid;grid-template-columns:minmax(0,1fr) 384px;
  align-items:start;gap:16px;max-width:1500px;
}
.fin-principal{display:flex;flex-direction:column;gap:14px;min-width:0}
.fin-lado{min-width:0}
.fin-lado-fixo{
  position:sticky;top:12px;
  display:flex;flex-direction:column;gap:11px;
}
.fin-lado-acao{width:100%;justify-content:center}

.fin-resumo{
  display:flex;flex-direction:column;gap:2px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--raio-g);padding:13px 15px;
}
.fin-resumo .rot{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-faint);
}
.fin-resumo b{font-family:var(--fonte-titulo);font-size:25px;line-height:1.1}
.fin-resumo small{font-size:11.5px;color:var(--fg-soft)}

/* ---------------- a matriz de aging ----------------
   Cliente na vertical, faixa de atraso na horizontal. É a tabela que
   responde "quem está em qual faixa" -- a pergunta que decide o tom da
   cobrança. */
.fin-matriz{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--raio-g);overflow:hidden;
}
.fin-matriz h3{
  margin:0;padding:11px 14px 9px;font-size:13px;
  border-bottom:1px solid var(--line);
}
.fin-matriz-rolo{max-height:calc(var(--tela) - 320px);min-height:150px;overflow:auto}
.tabela.matriz{font-size:11.5px}
.tabela.matriz thead th{
  position:sticky;top:0;z-index:1;background:var(--panel-2);
  padding:6px 7px;font-size:10px;white-space:nowrap;
}
.tabela.matriz td{padding:6px 7px;white-space:nowrap}
.tabela.matriz .empresa{
  max-width:118px;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;
}
.tabela.matriz td.num{font-variant-numeric:tabular-nums}
/* A célula sem dívida fica quase invisível: numa matriz o que se
   procura é onde TEM algo, e um zero em toda célula vazia esconderia
   justamente isso. */
.tabela.matriz td.num.vazia{color:var(--line-strong);text-align:center}
.tabela.matriz td.st-espera{color:var(--st-espera)}
.tabela.matriz td.st-perdido{color:var(--st-perdido);font-weight:600}
.tabela.matriz tfoot td{
  position:sticky;bottom:0;background:var(--panel-2);
  border-top:1px solid var(--line-strong);font-weight:600;
}

@media (max-width:1180px){
  .financeiro.com-lado{grid-template-columns:1fr}
  .fin-lado-fixo{position:static}
  .fin-matriz-rolo{max-height:none}
}

/* ---------------- a régua de cobrança ----------------
   Uma linha por devedor, com o modelo já escolhido pela faixa. A
   pessoa confere e destrava quem não deve receber -- cobrança em massa
   sem conferência é o jeito mais rápido de mandar texto jurídico para
   quem atrasou três dias. */
.regua{display:flex;flex-direction:column;gap:12px}
.regua-tabela{font-size:12.5px}
.regua-tabela td{padding:7px 9px;vertical-align:middle}
.regua-tabela .caixa-col{width:32px;text-align:center}
.regua-tabela tr.desmarcada{opacity:.42}
.regua-tabela tr.desmarcada .empresa{text-decoration:line-through}
.regua-modelo{white-space:nowrap}
.regua-modelo select{
  font-family:inherit;font-size:12px;padding:4px 7px;margin-right:6px;
  background:var(--panel-2);color:var(--fg);
  border:1px solid var(--line-strong);border-radius:var(--raio);
}
.regua-rodape{
  display:flex;align-items:center;gap:9px;
  padding:10px 13px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--raio);font-size:13px;
}
.regua-rodape .fraco{color:var(--fg-faint);font-size:12.5px}

.previa-cabeca{
  display:grid;grid-template-columns:auto 1fr;gap:5px 12px;align-items:baseline;
  padding:11px 13px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--raio);margin-bottom:12px;
}
.previa-cabeca .rot{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-faint);
}
.previa-cabeca b{font-size:13px;font-weight:600;min-width:0;word-break:break-word}
.previa-mensagem{
  margin:0;padding:14px 16px;font-family:inherit;font-size:13.5px;
  line-height:1.6;white-space:pre-wrap;word-break:break-word;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--raio);color:var(--fg-soft);
}

/* ---------------- os passos ----------------
   Numerados e ligados por uma linha: a ordem de leitura é a
   informação principal de um módulo que se usa uma vez por semana. */
.fin-passos{
  display:flex;flex-direction:column;gap:0;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--raio-g);overflow:hidden;
}
.fin-passo{
  position:relative;display:flex;gap:14px;align-items:flex-start;
  padding:15px 17px;border-bottom:1px solid var(--line);
}
.fin-passo:last-child{border-bottom:0}
.fin-passo.adormecido{opacity:.55}
.fin-num{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:99px;
  background:var(--accent);color:var(--sobre-accent);
  font-family:var(--font-display);font-size:13px;font-weight:700;
}
.fin-passo.adormecido .fin-num{background:var(--panel-3);color:var(--fg-faint)}
/* A linha que liga um passo ao seguinte. */
.fin-passo:not(:last-child)::after{
  content:"";position:absolute;left:30px;top:41px;bottom:-1px;width:2px;
  background:var(--line);
}
.fin-texto{min-width:0;flex:1 1 auto}
.fin-texto h3{font-size:14.5px;margin:0 0 4px}
.fin-texto p{margin:0;font-size:13px;line-height:1.5;color:var(--fg-soft);max-width:64ch}
.fin-texto .botao{margin-top:11px}

/* ---------------- animação de abertura ----------------
   Cada cartão sobe e aparece, um logo depois do outro. */
.entrando{animation:sobe-fin .42s var(--ease) backwards}
@keyframes sobe-fin{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .entrando{animation:none}
}

.fin-cartao .corpo{padding:14px 16px 16px}


/* ============================================================
   DETALHE DA TAREFA
   ============================================================ */

/* ---------------- tela cheia ---------------- */
.cortina-cheia{padding:0}
.janela.cheia{
  width:100vw;max-width:none;height:var(--tela);max-height:none;
  border-radius:0;border:0;display:flex;flex-direction:column;
}
.janela.cheia > .corpo{flex:1 1 auto;overflow-y:auto}
/* ---------------- as superficies que o navegador desenha ----------------

   Selecao, cursor, barra de rolagem e anel de foco vem com o padrao do
   navegador, que nao pertence a desenho nenhum. Tema-los e o sinal mais
   barato de que a tela foi construida, e o que mais se esquece. */
::selection{background:var(--accent-dim);color:var(--fg)}
:root{accent-color:var(--accent);caret-color:var(--accent)}
*{}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:99px;
  border:2px solid transparent;background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{background-color:var(--fg-faint)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.janela.cheia .tarefa-corpo{max-width:1180px;margin:0 auto}

/* ---------------- seletor de formato ---------------- */
.formatos{display:flex;gap:2px;margin-left:auto;padding:2px;
  background:var(--panel-2);border-radius:8px}
.formato{
  display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:23px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--fg-faint);cursor:pointer;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.formato svg{width:14px;height:14px}
.formato:hover{color:var(--fg)}
.formato.atual{background:var(--panel);color:var(--accent-forte);box-shadow:var(--sombra)}

.janela > header .icone.aceso{color:var(--accent-forte);background:var(--accent-dim)}

/* ---------------- o corpo em duas partes ---------------- */
.tarefa-corpo{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:22px}
.tarefa-centro{min-width:0;display:flex;flex-direction:column}

/* Os metadados, em duas colunas, logo abaixo do título. São as seis
   perguntas que se faz de toda tarefa -- e em coluna única elas viravam
   uma lista de doze linhas que ninguém lia até o fim. */
.tarefa-meta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 22px;margin:20px 0 4px;padding:0 0 20px;
  /* Um fio so, embaixo. Os dois de antes emolduravam o bloco como se
     ele fosse outra caixa dentro da janela; um fio separa sem cercar. */
  border-bottom:1px solid var(--line);
}
.tarefa-meta .meta.largo{grid-column:1/-1}
.tarefa-meta .meta{margin:0}

/* A conversa é coluna, não painel que abre: é o que mais cresce numa
   tarefa e o que mais precisa de altura. */
.tarefa-chat{
  min-width:0;display:flex;flex-direction:column;
  padding-left:20px;border-left:1px solid var(--line);
}
/* O titulo da conversa anda junto com os rotulos dos campos: mesma
   altura de letra, mesmo espacamento. Duas escalas de rotulo na mesma
   janela fazem a pessoa procurar a diferenca que nao existe. */
.tarefa-chat .tarefa-sub{margin-top:0}
.tarefa-chat .tarefa-conversa{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;
}
/* A lista rola DENTRO da coluna, com barra propria. Antes era
   max-height:none: a conversa empurrava a tela para baixo e, com vinte
   recados, o campo de escrever ficava fora da janela. */
.tarefa-chat .conversa-lista{
  flex:1 1 auto;min-height:130px;max-height:min(330px,40vh);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  }
.tarefa-chat .conversa-lista::-webkit-scrollbar{width:9px}
.tarefa-chat .conversa-lista::-webkit-scrollbar-track{background:transparent}
.tarefa-chat .conversa-lista::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:99px;
  border:2px solid var(--panel-2);
}
.tarefa-chat .conversa-lista::-webkit-scrollbar-thumb:hover{background:var(--fg-faint)}

.janela.gaveta .tarefa-corpo,
.janela.cheia .tarefa-corpo{grid-template-columns:minmax(0,1fr) 284px}
.janela.gaveta .tarefa-corpo{grid-template-columns:1fr;gap:16px}
.janela.gaveta .tarefa-chat{padding-left:0;border-left:0;
  border-top:1px solid var(--line);padding-top:15px}
.janela.gaveta .tarefa-meta{grid-template-columns:1fr}

@media (max-width:760px){
  .tarefa-corpo{grid-template-columns:1fr}
  .tarefa-meta{grid-template-columns:1fr}
  .tarefa-chat{padding-left:0;border-left:0;
    border-top:1px solid var(--line);padding-top:15px}
}

/* ---------------- cabeçalho da tarefa ---------------- */
.tarefa-cabeca{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.tarefa-tipo{
  font-family:inherit;font-size:12px;font-weight:600;padding:4px 9px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:99px;color:var(--fg-soft);cursor:pointer;
}
.tarefa-tipo:focus{outline:none;border-color:var(--accent)}
.tarefa-codigo{
  font-size:11.5px;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}

/* ---------------- opções inferiores ---------------- */
.tarefa-opcoes{
  /* Acoes que se acrescentam a tarefa, nao campos dela: ficam no pe,
     separadas por um fio, com peso de link e nao de botao. */
  display:flex;flex-wrap:wrap;gap:4px;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--line);
}
.tarefa-opcoes button{
  display:flex;align-items:center;gap:7px;padding:7px 10px;
  background:transparent;border:0;border-radius:var(--raio);
  color:var(--fg-faint);font:inherit;font-size:12.5px;cursor:pointer;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.tarefa-opcoes button svg{width:14px;height:14px;flex:0 0 auto}
.tarefa-opcoes button:hover:not(:disabled){background:var(--panel-2);color:var(--fg)}
.tarefa-opcoes button:disabled{opacity:.45;cursor:default}

/* ---------------- avaliação da entrega ----------------
   Cinco notas, no momento em que a tarefa é concluída -- que é o único
   momento em que alguém lembra como foi. */
.satisfacao{display:flex;flex-direction:column;gap:3px}
.satisfacao-alvo{
  margin:0;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.satisfacao-pergunta{margin:2px 0 12px;font-size:13.5px;color:var(--fg-soft)}
.satisfacao-notas{display:flex;gap:6px}
.satisfacao-nota{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:3px;padding:10px 4px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--raio);color:var(--fg-faint);font:inherit;
  transition:background .12s var(--ease),color .12s var(--ease),
             border-color .12s var(--ease);
}
.satisfacao-nota .n{font-family:var(--fonte-titulo);font-size:19px;line-height:1}
.satisfacao-nota .rot{
  font-size:10px;text-align:center;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.satisfacao-nota:hover{border-color:var(--line-strong);color:var(--fg)}
.satisfacao-nota.aceso{
  background:var(--accent-dim);border-color:var(--accent);
  color:var(--accent-forte);font-weight:600;
}
.satisfacao-legenda{
  margin:9px 0 0;font-size:12.5px;color:var(--fg-faint);min-height:1.2em;
}
.satisfacao .campo{margin-top:12px}
@media (max-width:760px){
  .tarefa-corpo{grid-template-columns:1fr;gap:16px}
  .tarefa-lado{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:15px}
}

/* ---------------- o titulo, que e o assunto ---------------- */

/* Caixa com borda em volta do titulo, como no desenho de referencia.
   O rotulo fica dentro, pequeno, no canto: ele diz o que e o campo sem
   roubar uma linha inteira do formulario. */
/* ---------------- o titulo ----------------

   Sem caixa em volta. O titulo e a unica coisa que toda tarefa tem, e
   emoldura-lo com borda o igualava aos campos que quase nunca mudam.
   O que marca o campo e o TAMANHO -- corpo de manchete -- e um fio
   embaixo que acende no foco. Caixa dentro de caixa foi o que a janela
   inteira veio deixar de ser. */
.tarefa-titulo-caixa{
  position:relative;margin:0 0 2px;padding:0 0 11px;
  border-bottom:1px solid var(--line);
}
/* O fio que acende: cresce do ponto onde o cursor vai entrar.
   `scaleX` em cima de uma linha de 1px e barato e nao repinta nada. */
.tarefa-titulo-caixa::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.tarefa-titulo-caixa:focus-within::after{transform:scaleX(1)}

.tarefa-titulo{
  width:100%;box-sizing:border-box;resize:none;overflow:hidden;display:block;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2.2vw,25px);letter-spacing:-.03em;line-height:1.22;
  color:var(--fg);
  background:none;border:0;border-radius:0;padding:0;margin:0;
  text-wrap:balance;
  /* O `textarea` global tem min-height:72px -- altura de caixa de
     texto, nao de titulo. Sem zerar aqui, uma linha de manchete ficava
     com duas linhas de altura e abria um vao morto ate o fio. */
  min-height:0;
}
.tarefa-titulo:hover,
.tarefa-titulo:focus{background:none;outline:none;box-shadow:none}
.tarefa-titulo::placeholder{color:var(--fg-faint);font-weight:600;opacity:.55}

@media (prefers-reduced-motion:reduce){
  .tarefa-titulo-caixa::after{transition:none}
}

.tarefa-desc{width:100%;box-sizing:border-box;min-height:74px;resize:vertical}
.tarefa-sub{
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;margin:20px 0 9px;
  display:flex;align-items:center;gap:9px;
}

/* ---------------- os metadados ---------------- */
.meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.meta > label{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
  display:flex;align-items:center;gap:7px;
}
.meta select,.meta input{width:100%;box-sizing:border-box}
/* A dica embaixo do campo. A regra existia so para `.campo .dica`,
   e o lado da tarefa usa `.meta` -- sem isto a linha saia com o
   tamanho do texto normal, competindo com o proprio campo. */
.meta .dica{margin:0;font-size:11.5px;color:var(--fg-faint);line-height:1.45}
.tarefa-centro .meta{margin-top:16px}

.dono-linha{display:flex;align-items:center;gap:8px;min-width:0}
.dono-linha span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dono-linha span.vazia{color:var(--fg-faint)}

/* ---------------- escolher pessoa ---------------- */
.pessoa-escolha{position:relative;flex:0 0 auto}
.pessoa-botao{
  display:inline-flex;padding:2px;border:0;border-radius:99px;
  background:none;cursor:pointer;
}
.pessoa-botao:hover{background:var(--panel-3)}
.avatar.mini{width:21px;height:21px;font-size:9px}
.avatar.vazio{
  background:var(--panel-3);color:var(--fg-faint);
  border:1px dashed var(--line-strong);
}
.pessoa-lista{
  position:absolute;left:0;top:calc(100% + 5px);z-index:80;min-width:186px;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--raio);box-shadow:var(--sombra-alta);padding:4px;
  max-height:232px;overflow-y:auto;
}
.pessoa-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:6px 8px;background:none;border:0;border-radius:7px;
  font:inherit;font-size:12.5px;color:var(--fg);cursor:pointer;text-align:left;
}
.pessoa-item:hover{background:var(--panel-2)}
.pessoa-item.escolhido{color:var(--accent-forte);font-weight:600}
.pessoa-item span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- checklist com dono ---------------- */
.item-check{display:flex;align-items:center;gap:8px}
.item-check .pessoa-escolha{margin-left:2px}
.tirar-item{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;padding:0;flex:0 0 auto;
  background:none;border:0;border-radius:6px;color:var(--fg-faint);cursor:pointer;
}
.tirar-item svg{width:12px;height:12px}
.tirar-item:hover{background:var(--panel-3);color:var(--st-perdido)}

/* ---------------- cronometro ---------------- */
.tempo-caixa{
  display:flex;align-items:center;gap:10px;
  padding:7px 9px 7px 12px;border-radius:12px;
  background:var(--panel-2);
}
/* Numeral tabular porque e medida: sem ele o relogio balanca de pixel
   a cada segundo, e o olho persegue o movimento em vez de ler a hora. */
.tempo-caixa b{
  font-family:var(--font-display);font-size:17px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--fg);
}
.tempo-caixa b.correndo{color:var(--accent-forte)}
.tempo-caixa b.estourou{color:var(--st-espera)}
.tempo-caixa .botao{margin-left:auto;flex:0 0 auto}
/* O ponto que pulsa enquanto o cronometro corre. Um unico momento de
   movimento na janela -- e o unico que informa algo. */
.tempo-caixa b.correndo::before{
  content:"";display:inline-block;width:7px;height:7px;margin-right:8px;
  border-radius:50%;background:var(--accent-forte);vertical-align:middle;
  animation:tempo-pulsa 1.6s ease-in-out infinite;
}
@keyframes tempo-pulsa{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.8)}
}
@media (prefers-reduced-motion:reduce){
  .tempo-caixa b.correndo::before{animation:none}
}

/* ---------------- prazo ---------------- */
.prazo-caixa{display:flex;flex-direction:column;gap:5px}
.contador-prazo{
  font-size:12px;font-weight:600;padding:3px 8px;border-radius:99px;
  align-self:flex-start;background:var(--panel-3);color:var(--fg-soft);
}
.contador-prazo.vazio{background:none;padding-left:0;color:var(--fg-faint);font-weight:400}
.contador-prazo.perto{background:var(--st-espera);color:#fff}
.contador-prazo.hoje{background:var(--st-espera);color:#fff}
.contador-prazo.vencido{background:var(--st-perdido);color:#fff}

/* ---------------- local ---------------- */
.local-caixa{position:relative;display:flex;align-items:center}
.local-caixa input{padding-right:32px}
.ir-mapa{
  position:absolute;right:6px;display:inline-flex;align-items:center;
  justify-content:center;width:22px;height:22px;border-radius:6px;
  color:var(--fg-faint);text-decoration:none;
}
.ir-mapa svg{width:14px;height:14px}
.ir-mapa:hover{background:var(--panel-3);color:var(--fg)}

/* ---------------- microfone ---------------- */
.microfone{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;margin-left:auto;flex:0 0 auto;
  background:none;border:0;border-radius:6px;color:var(--fg-faint);cursor:pointer;
}
.microfone svg{width:13px;height:13px}
.microfone:hover{background:var(--panel-3);color:var(--fg)}
/* Indisponivel continua visivel e clicavel: some e a pessoa acha que
   perdeu o recurso; explica e ela sabe o que fazer. */
.microfone.indisponivel{opacity:.45;cursor:help}
.microfone.ouvindo{
  background:var(--st-perdido);color:#fff;
  animation:pulsa-mic 1.1s ease-in-out infinite;
}
@keyframes pulsa-mic{
  0%,100%{box-shadow:0 0 0 0 rgba(193,58,42,.55)}
  50%{box-shadow:0 0 0 5px rgba(193,58,42,0)}
}
@media (prefers-reduced-motion:reduce){
  .microfone.ouvindo{animation:none}
}
.meta > label{display:flex;align-items:center;gap:6px}

/* ---------------- etiquetas ---------------- */
.etiquetas{display:flex;flex-wrap:wrap;gap:5px}
.etiqueta{
  font-size:11.5px;padding:4px 9px;border-radius:99px;cursor:pointer;
  background:none;border:1px dashed var(--line-strong);color:var(--fg-faint);
  font-family:inherit;
  transition:background .12s var(--ease),color .12s var(--ease),
             border-color .12s var(--ease);
}
.etiqueta:hover{border-color:var(--cor);color:var(--cor)}
.etiqueta.ligada{
  background:var(--cor);border-color:transparent;color:#fff;font-weight:600;
}


/* ---------------- setup pos-contrato ----------------
   O que a entrega precisa saber depois da assinatura. Quatro grupos,
   um por pergunta -- e o resumo na ficha mostra o que ja foi combinado
   sem abrir o formulario, porque quem passa na tela quer ver, nao
   editar. */
.setup{display:flex;flex-direction:column;gap:18px}
.setup-bloco{display:flex;flex-direction:column;gap:9px}
.setup-bloco .tarefa-sub{margin:0}
.setup-resumo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:12px 18px;margin:0 0 14px;
}
.setup-grupo h4{
  margin:0 0 5px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-faint);
}
.setup-grupo ul{margin:0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:3px}
.setup-grupo li{
  font-size:12.5px;line-height:1.4;color:var(--fg-soft);
  padding-left:11px;position:relative;
}
.setup-grupo li::before{
  content:"";position:absolute;left:0;top:7px;width:4px;height:4px;
  border-radius:99px;background:var(--st-ganho);
}
.setup-grupo .vazia{margin:0;font-size:12.5px;color:var(--fg-faint)}

/* ---------------- conversa ---------------- */
.tarefa-conversa{margin-top:6px}
.conversa-lista{
  display:flex;flex-direction:column;gap:11px;
  max-height:252px;overflow-y:auto;padding:11px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--raio) var(--raio) 0 0;border-bottom:0;
}
/* O nome do grupo do checklist. Fica parecendo texto até receber o
   foco: é um rótulo que quase sempre já está certo, não um campo que
   pede preenchimento. */
.checklist-nome{
  width:100%;margin:0 0 7px;padding:5px 8px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--fg);
  background:transparent;border:1px solid transparent;border-radius:var(--raio);
}
.checklist-nome::placeholder{font-weight:400;color:var(--fg-faint)}
.checklist-nome:hover{border-color:var(--line)}
.checklist-nome:focus{
  border-color:var(--accent);background:var(--panel-2);outline:none;
}

/* O recado de erro que fica colado no campo. A fita some sozinha; quem
   saiu para procurar o número volta para uma tela que ainda diz o que
   estava errado. */
.recado-erro{
  display:flex;gap:8px;align-items:flex-start;
  margin:12px 0 0;padding:10px 13px;
  font-size:13px;line-height:1.5;color:var(--st-perdido);
  background:var(--panel-2);border:1px solid var(--st-perdido);
  border-radius:var(--raio);
}

/* ---------------- prévia dos Links Rápidos ----------------
   O que era a Matriz 360 virou isto: o conteúdo é o mesmo, mas só
   aparece quando a pessoa pergunta por ele, passando o mouse.

   `position:fixed` porque o painel precisa sair de dentro da coluna da
   direita, que é estreita -- dentro dela ele nasceria cortado. */
.link-previa{
  position:fixed;z-index:60;width:min(560px, calc(100vw - 24px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--raio-g);box-shadow:var(--sombra-alta);
  animation:previa-entra .13s var(--ease);
}
@keyframes previa-entra{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .link-previa{animation:none}
}
.link-previa > header{
  display:flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:10px 13px;border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.link-previa > header b{font-size:13.5px;font-weight:700}
.link-previa > header .conta-n{
  font-size:11.5px;font-weight:600;color:var(--fg-faint);
  background:var(--panel-3);border-radius:99px;padding:1px 8px;
}
.link-previa > header .botao{margin-left:auto}
.link-previa-corpo{
  flex:1 1 auto;min-height:0;overflow:auto;padding:11px 13px 13px;
}
.link-previa-corpo .tabela{font-size:12.5px}
.link-previa-corpo .tabela td{padding:6px 8px}
.link-previa-corpo .tabela thead th{padding:5px 8px;font-size:10.5px}

/* O link que está com a prévia aberta continua marcado: com o painel
   flutuando longe, some a ligação entre os dois. */
.link-rapido.previa-aberta{background:var(--panel-2);font-weight:600}
.link-rapido.previa-aberta .nome{color:var(--accent-forte)}

/* ---------------- modo da tarefa ----------------
   Operação ou Produto: os dois quadros do planejador, lado a lado.
   Dois botões e não um select porque são só dois, e um select esconde
   metade da escolha atrás de um clique. */
.modos-tarefa{
  display:flex;gap:2px;padding:2px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:9px;
}
.modos-tarefa button{
  flex:1 1 0;min-width:0;padding:5px 8px;
  background:transparent;border:0;border-radius:7px;
  color:var(--fg-faint);font:inherit;font-size:12px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.modos-tarefa button:hover{color:var(--fg)}
.modos-tarefa button[aria-pressed="true"]{
  background:var(--panel);color:var(--fg);font-weight:600;
  box-shadow:var(--sombra);
}

/* ---------------- faixa do assistente ----------------
   Fica entre o conteúdo e o rodapé: é o lugar reservado para o módulo
   de IA, declarado como reservado. */
.faixa-ia{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:18px 18px 0;padding:12px 16px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--raio-g);
}
.ia-marca{
  flex:0 0 auto;display:grid;place-items:center;
  width:32px;height:32px;border-radius:9px;
  background:var(--accent-dim);color:var(--accent-forte);
}
.ia-marca svg{width:18px;height:18px}
.ia-texto{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:1px}
.ia-texto b{font-size:13.5px}
.ia-texto small{font-size:12px;color:var(--fg-soft);line-height:1.45}
.faixa-ia .selo{flex:0 0 auto}

@media (max-width:700px){
  .faixa-ia{margin:14px 12px 0}
}

/* O HEX ao lado do seletor de cor, copiável com um clique. */
.hex-copia{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  letter-spacing:.02em;padding:4px 8px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line-strong);
  border-radius:var(--raio);color:var(--fg-soft);
  transition:color .12s var(--ease),border-color .12s var(--ease);
}
.hex-copia:hover{color:var(--fg);border-color:var(--line-strong)}
.hex-copia.copiado{
  color:var(--st-ganho);border-color:var(--st-ganho);font-weight:600;
}

/* ---------------- motor de regras ---------------- */
.dev-regra{display:flex;flex-direction:column;gap:9px;flex:1 1 320px}
.dev-regra-topo{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.dev-regra-topo b{font-size:14px}
.dev-regra-topo code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--fg-faint);background:var(--panel-2);
  border-radius:5px;padding:1px 6px;
}
.dev-regra textarea{width:100%;resize:vertical;font-family:inherit;font-size:13px}

.modos-regra{display:flex;gap:6px;flex-wrap:wrap}
.modo-regra{
  padding:5px 12px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px dashed var(--line-strong);
  color:var(--fg-faint);font:inherit;font-size:12px;
  transition:background .12s var(--ease),color .12s var(--ease),
             border-color .12s var(--ease);
}
.modo-regra:hover{color:var(--cor);border-color:var(--cor)}
.modo-regra[aria-pressed="true"]{
  background:var(--cor);border-color:transparent;color:#fff;font-weight:600;
}

/* ---------------- abas de setor do planejador ----------------
   Filtram tudo que vem abaixo: calendario e quadro. Rolam na
   horizontal em tela estreita, em vez de quebrar em duas linhas -- o
   que empurraria o quadro para baixo da dobra. */
.abas-setor{
  display:flex;gap:4px;align-items:center;overflow-x:auto;
  margin:0 0 14px;padding:0 0 2px;
  }
.abas-setor button{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--line);
  color:var(--fg-faint);font:inherit;font-size:13px;white-space:nowrap;
  transition:background .12s var(--ease),color .12s var(--ease),
             border-color .12s var(--ease);
}
.abas-setor button:hover{color:var(--fg);border-color:var(--line-strong)}
.abas-setor button .conta-n{
  font-size:11px;font-weight:600;padding:0 6px;border-radius:99px;
  background:var(--panel-2);color:var(--fg-faint);
}
.abas-setor button[aria-pressed="true"]{
  background:var(--fg);border-color:var(--fg);color:var(--panel);font-weight:600;
}
.abas-setor button[aria-pressed="true"] .conta-n{
  background:rgba(255,255,255,.22);color:inherit;
}

/* ---------------- tela de caso ---------------- */
.caso-form{display:flex;flex-direction:column;gap:4px}
.caso-form .tarefa-sub{margin:14px 0 8px}
.caso-form .tarefa-sub:first-child{margin-top:0}
.caso-pe{
  display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.caso-pe .campo{flex:1 1 220px;min-width:0}
.caso-pe .caixa{flex:0 0 auto;padding-bottom:7px}

/* ---------------- tabela de ordens de trabalho ---------------- */
.os-tabela{display:flex;flex-direction:column;gap:10px}
.os-tabela .acao-col{width:34px;padding-left:0;padding-right:4px;text-align:right}

.paginacao{
  display:flex;align-items:center;gap:8px;justify-content:flex-end;
  font-size:12px;color:var(--fg-faint);
}
.paginacao > span{margin-right:auto;font-variant-numeric:tabular-nums}
.paginacao .botao{min-width:28px;padding:4px 10px;font-size:15px;line-height:1}

/* O menu de ações da linha. Aberto no clique -- três botões por linha
   competiriam com o dado, que é o que a pessoa veio ler. */
.menu-linha{position:relative;display:inline-flex}
.menu-linha > .icone svg{width:15px;height:15px}
.menu-linha-lista{
  position:absolute;right:0;top:calc(100% + 4px);z-index:20;
  display:flex;flex-direction:column;min-width:190px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--raio);box-shadow:var(--sombra-alta);
}
.menu-linha-lista button{
  padding:9px 13px;text-align:left;white-space:nowrap;cursor:pointer;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--fg);font:inherit;font-size:12.5px;
}
.menu-linha-lista button:last-child{border-bottom:0}
.menu-linha-lista button:hover:not(:disabled){background:var(--panel-2)}
.menu-linha-lista button.perigo{color:var(--st-perdido)}
.menu-linha-lista button:disabled{color:var(--fg-faint);cursor:default}

/* ---------------- mapa do endereco ----------------
   Nao carrega sozinho: o endereco vira coordenada num servico de fora,
   que pede uso comedido. Carrega no clique, e a coordenada fica
   guardada na conta. */
.mapa-endereco{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mapa-cabeca{
  display:flex;align-items:center;gap:10px;margin-bottom:9px;
  font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--fg-faint);
}
.mapa-cabeca .botao{margin-left:auto;letter-spacing:0;text-transform:none}
.mapa-quadro{
  position:relative;height:220px;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--raio);
}
.mapa-quadro iframe{width:100%;height:100%;border:0;display:block}
.mapa-carregar{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;padding:16px;
  color:var(--fg-soft);font:inherit;text-align:center;
}
.mapa-carregar b{font-size:13px;font-weight:600;max-width:36ch;line-height:1.4}
.mapa-carregar span{font-size:12px;color:var(--fg-faint)}
.mapa-carregar.falhou span{color:var(--st-espera)}

/* ---------------- WhatsApp ----------------
   Bolhas, como no aplicativo. A nossa à direita, a dele à esquerda --
   é a convenção que todo mundo já leu mil vezes, e inverter aqui só
   faria a pessoa parar para pensar. */
.whats{display:flex;flex-direction:column;height:100%;min-height:0;gap:10px}
.whats-topo{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.whats-quem{
  flex:1 1 200px;min-width:0;padding:7px 10px;font-family:inherit;
  font-size:12.5px;background:var(--panel-2);color:var(--fg);
  border:1px solid var(--line-strong);border-radius:var(--raio);
}
.whats-lista{
  flex:1 1 auto;min-height:190px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;padding:12px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--raio);
}
.whats-bolha{
  max-width:82%;padding:8px 11px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);
}
.whats-bolha.nossa{
  align-self:flex-end;background:var(--accent-dim);border-color:transparent;
}
.whats-bolha.dele{align-self:flex-start}
.whats-bolha p{
  margin:0;font-size:13.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
}
.whats-pe{
  display:flex;align-items:center;gap:7px;margin-top:4px;
  font-size:10.5px;color:var(--fg-faint);
}
.whats-escrever{display:flex;gap:8px;align-items:flex-end}
.whats-escrever textarea{
  flex:1 1 auto;min-width:0;resize:vertical;font-family:inherit;font-size:13.5px;
}

/* ---------------- rastreio de e-mail ----------------
   Os dois avisos existem porque "aberto" é sinal e não prova, e porque
   quem aperta Enviar precisa saber que está rastreando. */
.rastreio-nota{
  margin:11px 0 14px;padding:10px 13px;font-size:12px;line-height:1.55;
  color:var(--fg-soft);background:var(--panel-2);
  border-left:2px solid var(--st-espera);border-radius:0 var(--raio) var(--raio) 0;
}
.rastreio-alerta{
  margin:14px 0 0;padding:11px 14px;font-size:12.5px;line-height:1.55;
  color:var(--fg-soft);background:var(--accent-dim);
  border-radius:var(--raio);
}
.rastreio-alerta b{color:var(--accent-forte)}

/* Link rapido sem registro continua na lista, so apagado: a ausencia
   e informacao, e esconder o zero obrigaria a lembrar que o objeto
   existe. A excecao e Casos, que some mesmo -- la a presenca do link e
   que e o alerta. */
.link-rapido.vazio .nome{color:var(--fg-faint)}
.link-rapido.vazio .ponto{opacity:.35}

/* ---------------- arquivos ---------------- */
.arquivos-lista{display:flex;flex-direction:column;gap:2px}
.arquivo-item{
  display:flex;flex-direction:column;gap:1px;padding:8px 10px;
  text-decoration:none;color:inherit;border-radius:var(--raio);
}
.arquivo-item:hover{background:var(--panel-2)}
.arquivo-item b{font-size:13px;font-weight:600}
.arquivo-item span{font-size:11.5px;color:var(--fg-faint)}

.conversa-vazia{margin:0;font-size:12.5px;color:var(--fg-faint)}
.conversa-item{display:flex;gap:9px;align-items:flex-start}
.conversa-item > div{min-width:0;flex:1 1 auto}
.conversa-item b{font-size:12.5px}
.conversa-item .quando{font-size:11px;color:var(--fg-faint);margin-left:5px}
.conversa-item p{margin:2px 0 0;font-size:13px;line-height:1.45;
  white-space:pre-wrap;word-break:break-word}
.conversa-escrever{
  display:flex;gap:8px;align-items:flex-end;padding:9px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:0 0 var(--raio) var(--raio);
}
.conversa-escrever textarea{flex:1 1 auto;resize:vertical;min-height:38px}
.conversa-escrever .botao{flex:0 0 auto}


/* ============================================================
   LOOKUP DE CONTA
   ============================================================ */

.lookup{position:relative}
.lookup-linha{position:relative;display:flex;align-items:center}
.lookup-linha input{padding-right:34px}
.lookup-linha input.escolhido{
  border-color:var(--accent);background:var(--accent-dim);font-weight:500;
}
.lookup-limpar{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--fg-faint);cursor:pointer;
}
.lookup-limpar svg{width:13px;height:13px}
.lookup-limpar:hover{background:var(--panel-3);color:var(--fg)}

.lookup-lista{
  position:absolute;left:0;right:0;top:100%;z-index:70;margin-top:2px;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--raio);box-shadow:var(--sombra-alta);
  /* Teto de altura com rolagem propria: lista de cem servicos nao pode
     passar da tela inteira, por mais espaco que pareca haver. */
  max-height:min(320px,46vh);overflow-y:auto;overscroll-behavior:contain;
}
/* Quando nao cabe embaixo, ela sobe. O JavaScript mede e poe a classe. */
.lookup-lista.acima{top:auto;bottom:100%;margin-top:0;margin-bottom:2px}
.lookup-item{
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;
  width:100%;padding:8px 11px;background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  border-bottom:1px solid var(--line);
}
.lookup-item:hover{background:var(--panel-2)}
/* O item sob a seta do teclado. Mais forte que o hover de proposito:
   com o mouse parado em cima de outro item, os dois ficariam iguais e
   o Enter pareceria ir para o errado. */
/* ---------------- avatar que troca a propria foto ---------------- */
.avatar-troca{
  position:relative;display:inline-flex;padding:0;border:0;background:none;
  border-radius:50%;cursor:pointer;flex:0 0 auto;
}
.avatar-troca .avatar{overflow:hidden}
.avatar-troca .avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar-camera{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  opacity:0;transition:opacity .16s var(--ease);
}
.avatar-camera svg{width:18px;height:18px}
.avatar-troca:hover .avatar-camera,
.avatar-troca:focus-visible .avatar-camera{opacity:1}
@media (prefers-reduced-motion:reduce){.avatar-camera{transition:none}}
/* Sem hover (dedo), a camera fica sempre visivel: nao ha como
   descobrir que a foto e clicavel de outro jeito. */
@media (hover:none){.avatar-camera{opacity:.82}}

/* ---------------- quem tem acesso ---------------- */
.acessos{margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.acessos h3{
  margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
}
/* O titulo e o botao de cadastrar na mesma linha: o botao e a
   resposta de quem olha a lista e pensa "falta alguem aqui". */
.acessos-cabeca{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:12px;flex-wrap:wrap;
}
/* Rola dentro da janela: numa equipe de vinte, a lista empurraria os
   botoes de Sair e Fechar para fora da tela. */
.acessos-env{
  max-height:min(300px,38vh);overflow-y:auto;
  display:flex;flex-direction:column;gap:16px;
}
.acessos-vazio{margin:0;color:var(--fg-faint);font-size:13px}

.acesso-grupo > header{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-bottom:7px;margin-bottom:7px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--panel);z-index:1;
}
.acesso-grupo > header b{font-size:13px;font-weight:700}
.acesso-grupo > header .conta-n{
  font-size:11px;font-weight:700;color:var(--fg-faint);
  background:var(--panel-2);border-radius:99px;padding:1px 7px;
}
.acesso-grupo > header small{
  flex:1 1 100%;font-size:12px;color:var(--fg-faint);line-height:1.45;
}
.acesso-grupo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.acesso-grupo li{display:flex;align-items:center;gap:9px;padding:4px 0;min-width:0}
.acesso-grupo li.sem-acesso{opacity:.55}
.acesso-quem{flex:1 1 auto;min-width:0}
.acesso-quem b{
  display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;
}
.acesso-quem b .selo{font-size:10px;padding:1px 6px}
.acesso-quem small{display:block;font-size:11.5px;color:var(--fg-faint)}
.acesso-mail{
  flex:0 1 auto;min-width:0;font-size:12px;color:var(--fg-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%;
}
a.acesso-mail:hover{color:var(--fg)}
.acesso-mail.vazia{font-style:italic}

/* Apagar: cinza na lista, vermelho so no hover e no foco. Vermelho
   permanente em cada linha viraria campo minado -- e esta lista
   existe para ser lida, nao para ser mexida. */
.acesso-fora{
  flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;
  border:0;border-radius:8px;background:transparent;cursor:pointer;
  color:var(--fg-faint);opacity:0;
  transition:opacity .14s var(--ease),color .14s var(--ease),background .14s var(--ease);
}
.acesso-fora svg{width:14px;height:14px}
.acesso-grupo li:hover .acesso-fora,
.acesso-fora:focus-visible{opacity:1}
.acesso-fora:hover,
.acesso-fora:focus-visible{color:var(--st-perdido,#ff6b6b);background:var(--panel-2)}
/* Sem mouse nao ha como descobrir o botao: ele fica visivel. */
@media (hover:none){.acesso-fora{opacity:.7}}

.acessos-nota{margin:12px 0 0;font-size:11.5px;color:var(--fg-faint);line-height:1.5}

/* O aviso no topo da janela de EDITAR pessoa. Fica em evidencia porque
   e o unico lugar onde da para sobrescrever o login de alguem sem
   querer -- foi assim que o comercial@ sumiu. */
/* ---- Meus CRMs, no Perfil (so equipe da eixo) ---- */
.crms{margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.crms-cabeca{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:12px;flex-wrap:wrap;
}
.crms h3{
  margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
}
.crms-lista{display:flex;flex-direction:column;gap:2px;max-height:min(260px,34vh);overflow-y:auto}
.crms-vazio{margin:0;color:var(--fg-faint);font-size:13px}
.crm-linha{display:flex;align-items:center;gap:9px;padding:6px 0;min-width:0}
.crm-linha.suspenso{opacity:.55}
.crm-quem{flex:1 1 auto;min-width:0}
.crm-quem b{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600}
.crm-quem b .selo{font-size:10px;padding:1px 6px}
.crm-quem small{display:block;font-size:11.5px;color:var(--fg-faint)}
.crm-plano{color:var(--fg-soft);font-weight:600}
/* Plano cheio: a cor diz que a proxima pessoa sera barrada. */
.crm-uso.cheio{color:var(--st-espera,#b97a0d);font-weight:600}
.crm-fim{display:flex;gap:6px;flex:0 0 auto}

/* ---- escolha de plano ---- */
.plano-nota{margin:0 0 14px;font-size:13px;color:var(--fg-soft);line-height:1.5}
.plano-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.plano-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.plano-grade{grid-template-columns:1fr}}
.plano-cartao{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:16px 10px;border:1px solid var(--line-strong);border-radius:var(--raio-g);
  background:var(--panel);color:var(--fg);font:inherit;cursor:pointer;
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
.plano-cartao:hover,.plano-cartao:focus-visible{border-color:var(--line-strong);background:var(--panel-2)}
.plano-cartao.atual{border-color:var(--accent)}
.plano-cartao b{font-size:14px}
.plano-n{font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1.1}
.plano-cartao small{color:var(--fg-faint);font-size:12px}
.plano-cartao em{font-style:normal;font-size:11px;color:var(--accent-forte);margin-top:4px}
.plano-resumo{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--fg-soft)}

.recado-edicao{
  margin:0 0 14px;padding:10px 13px;font-size:13px;line-height:1.5;
  color:var(--fg);background:var(--panel-2);
  border:1px solid var(--line-strong);border-left:3px solid var(--st-espera,#d99a1d);
  border-radius:var(--raio);
}
/* ---- o documento do contrato, dentro do formulario ----

   O espaco e o mesmo com o contrato completo e incompleto: com, o
   botao; sem, a lista do que falta. Botao que some sem explicacao faz
   a pessoa procurar o que ela fez de errado. */
.bloco-contrato{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.bloco-contrato h4{
  margin:0 0 9px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
}
.contrato-exporta{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.contrato-nota{margin:0;font-size:12.4px;color:var(--fg-faint);line-height:1.5;max-width:62ch}
.contrato-nota.falta{color:var(--fg-soft)}
.bloco-contrato .form-arquivos h3{margin-top:18px}


/* ---------------- faixa de filtro vindo da URL ---------------- */
.faixa-filtro{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;padding:9px 13px;font-size:13.4px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--raio);
  color:var(--fg-soft);
}
.faixa-filtro a{color:var(--accent-forte);text-underline-offset:3px}

.card{position:relative}
.card-canto{
  position:absolute;top:8px;right:8px;
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:50%;
  color:var(--fg-faint);cursor:pointer;
  transition:border-color .14s var(--ease),color .14s var(--ease),background .14s var(--ease);
}
.card-canto svg{width:13px;height:13px}
.card-canto:hover,.card-canto:focus-visible{
  border-color:var(--line-strong);color:var(--fg);background:var(--panel);
}

/* A ficha de persona. Lista de perguntas e respostas, sem caixa em
   volta de cada uma: sao cinco blocos curtos lidos de cima a baixo
   antes de uma ligacao, nao um formulario. */
.persona dt{
  font-size:11px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;margin-top:16px;
}
.persona dt:first-of-type{margin-top:0}
.persona dd{margin:5px 0 0;font-size:14px;line-height:1.55;color:var(--fg)}
.persona .frases{margin:5px 0 0;padding-left:18px;color:var(--fg-soft);font-size:13.6px}
.persona .frases li{margin-bottom:4px;line-height:1.5}
.persona-quem{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid var(--line);
}
.persona-quem b{font-size:16px}
.persona-quem span{font-size:13px;color:var(--fg-faint)}

.lookup-item.marcado{background:var(--panel-3,var(--panel-2));box-shadow:inset 2px 0 0 var(--accent)}
.lookup-item .lk-nome{font-size:13px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lookup-item .lk-sub{
  grid-column:1;font-size:11.5px;color:var(--fg-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lookup-item .selo{grid-column:2;grid-row:1/3;justify-self:end}
.lookup-item .lk-valor{
  grid-column:2;grid-row:1/3;justify-self:end;align-self:center;
  font-family:var(--font-display);font-weight:600;font-size:12.5px;
  font-variant-numeric:tabular-nums;color:var(--fg-soft);
}

/* Espacamento menor em cima: a dica nascia longe do campo e a lista
   parecia solta no meio da tela, em vez de presa ao que se digitou. */
.lookup-nada{padding:7px 11px 9px;font-size:12.5px;color:var(--fg-faint)}

/* O botao de cadastrar fica colado no rodape da lista: e a saida para
   o caso mais comum, que e a empresa ainda nao existir. */
.lookup-novo{
  display:flex;align-items:center;gap:7px;width:100%;
  padding:9px 11px;background:var(--panel-2);border:0;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--accent-forte);
  text-align:left;
}
.lookup-novo svg{width:14px;height:14px}
.lookup-novo:hover{background:var(--panel-2)}

.lookup .dica.ok{color:var(--accent-forte)}


/* ============================================================
   IMPORTAR PLANILHA
   ============================================================ */

.importar{min-height:190px;border-radius:var(--raio-g);transition:background .14s var(--ease)}
.importar.recebendo{background:var(--accent-dim);outline:2px dashed var(--accent);outline-offset:6px}
.expl-import{margin:0 0 12px;font-size:13px;color:var(--fg-soft);line-height:1.5}
.erro-import{margin:10px 0 0;font-size:13px;color:var(--st-perdido)}
.ok-import{color:var(--st-ganho);font-weight:600}
.aviso-import{color:var(--st-espera);font-weight:600}
.linha-import{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.area-import{margin-top:16px}

/* de/para: o nome da coluna do arquivo à esquerda, o campo do CRM à
   direita. Uma linha por campo, e não uma matriz -- o CRM tem três
   campos a preencher, não trinta. */
.mapa-import{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;padding:13px;margin-bottom:14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--raio);
}
.de-para{display:flex;flex-direction:column;gap:5px;min-width:0}
.de-para .para{
  font-size:11px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
}

.previa-import{margin-top:4px}
.previa-import .tabela{font-size:12.5px}
.previa-import .tabela td,.previa-import .tabela th{padding:6px 9px}
.fora-import{
  margin:10px 0 0;padding:9px 12px 9px 26px;font-size:12.5px;
  color:var(--fg-soft);background:var(--panel-2);border-radius:8px;
  border-left:3px solid var(--st-espera);
}
.fora-import li{margin:2px 0}


/* ============================================================
   GUIA DO FLUXO (botão "!")
   ============================================================ */

.guia-botao svg{width:17px;height:17px}

.guia-intro{margin:0 0 16px;color:var(--fg-soft);font-size:13px}

.guia-trilho{
  display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;
  padding-bottom:4px;
}
.guia-seta{
  display:flex;align-items:center;color:var(--fg-faint);flex:0 0 auto;
}
.guia-seta svg{width:16px;height:16px}

.guia-etapa{
  position:relative;flex:1 1 118px;min-width:108px;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--raio);padding:12px 11px 13px;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:border-color .14s var(--ease),background .14s var(--ease),
             transform .14s var(--ease);
}
.guia-etapa:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.guia-etapa.aberta{
  border-color:var(--accent);background:var(--accent-dim);
}
.guia-etapa .n{
  position:absolute;top:8px;right:9px;
  font-size:10px;font-weight:700;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}
.guia-etapa.aberta .n{color:var(--accent-forte)}
.guia-etapa .sinal{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:var(--panel);color:var(--fg-soft);
  border:1px solid var(--line);
}
.guia-etapa.aberta .sinal{
  background:var(--accent);color:var(--sobre-accent);border-color:transparent;
}
.guia-etapa .sinal svg{width:16px;height:16px}
.guia-etapa b{font-size:12.5px;line-height:1.25;font-weight:600}

.guia-detalhe{
  margin-top:14px;padding:15px 16px 16px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--raio-g);
}
.guia-detalhe h3{font-size:15px;margin:0 0 7px}
.guia-detalhe p{margin:0 0 9px;font-size:13px;line-height:1.5;color:var(--fg-soft)}
.guia-detalhe .resumo{color:var(--fg);font-size:13.5px}
.guia-detalhe .regra{
  margin:12px 0 13px;padding:9px 11px;font-size:12.5px;
  background:var(--panel);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;color:var(--fg-soft);
}
.guia-detalhe .regra b{color:var(--fg)}

@media (max-width:640px){
  .guia-trilho{flex-direction:column}
  .guia-seta{transform:rotate(90deg);align-self:center;height:16px}
  .guia-etapa{flex:1 1 auto;width:100%;flex-direction:row;align-items:center;gap:11px}
  .guia-etapa .n{position:static;margin-left:auto}
}


/* ============================================================
   TELA DE ABERTURA
   ============================================================ */

.janela-abertura .corpo-janela{padding-top:0}
.abertura-topo{text-align:center;padding:14px 8px 22px}
.abertura-topo svg{color:var(--accent)}
.abertura-topo .ola{
  margin:14px 0 2px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
}
.abertura-topo h2{font-size:25px;line-height:1.2;margin:0 auto;max-width:18ch}
.abertura-topo .linha{
  margin:10px auto 0;max-width:56ch;color:var(--fg-soft);font-size:13.5px;line-height:1.5;
}

/* Flex, e nao grid: com cinco cartoes o grid deixa o quinto sozinho
   na esquerda da segunda linha. Aqui a linha que sobra fica centrada. */
.frentes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.frente{
  flex:1 1 180px;max-width:250px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--raio-g);
  padding:15px 14px 16px;
}
.frente .sinal{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;margin-bottom:10px;
  background:var(--accent-dim);color:var(--accent-forte);
}
.frente .sinal svg{width:18px;height:18px}
.frente h3{font-size:14px;margin:0 0 5px}
.frente p{margin:0;font-size:12.5px;line-height:1.45;color:var(--fg-soft)}

@media (max-width:560px){
  .abertura-topo h2{font-size:21px}
  .frente{flex:1 1 100%;max-width:none}
}


/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape-crm{
  margin-top:auto;
  padding:16px 18px 20px;
  border-top:1px solid var(--line);
  /* o verde da logo, bem diluído: assina a tela sem virar faixa */
  background:
    linear-gradient(180deg, transparent 0%, rgba(47,214,189,.07) 55%, rgba(47,214,189,.16) 100%),
    var(--panel);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--fg-faint);
}
.rodape-crm .logo-rodape{height:20px;width:auto;max-width:120px;object-fit:contain;flex:0 0 auto}
.logo-dev-previa{display:flex;align-items:center;gap:12px;margin:10px 0 4px;flex-wrap:wrap}
.logo-dev-previa img{height:28px;max-width:160px;object-fit:contain;padding:6px 10px;border:1px solid var(--line,#ddd);border-radius:8px;background:var(--panel,#fff)}
.rodape-crm svg{height:15px;width:auto;color:var(--accent);flex:0 0 auto}
.rodape-crm b{color:var(--fg-soft);font-family:var(--font-display);font-weight:700;font-size:13px}
.rodape-crm .direita{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.rodape-crm a:hover{color:var(--fg)}


/* ============================================================
   MATRIZ 360  (card único da conta)
   ============================================================ */

.matriz{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio-g);
  box-shadow:var(--sombra);overflow:hidden;margin-bottom:16px;
}
.matriz > header{
  display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.matriz > header button{
  flex:1 1 0;min-width:0;
  background:transparent;border:0;border-right:1px solid var(--line);
  padding:11px 12px;cursor:pointer;color:var(--fg-faint);font:inherit;text-align:left;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.matriz > header button:last-child{border-right:0}
.matriz > header button:hover{background:var(--panel-3);color:var(--fg)}
.matriz > header button[aria-selected="true"]{
  background:var(--panel);color:var(--fg);
  box-shadow:inset 0 -2px 0 var(--accent);
}
.matriz > header .rot{
  display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;
}
.matriz > header .num{
  display:block;font-family:var(--font-display);font-size:18px;font-weight:700;
  letter-spacing:-.02em;margin-top:3px;color:var(--fg);
}
.matriz > header .sub{display:block;font-size:11.5px;margin-top:1px}
.matriz .painel-matriz{padding:16px}
.matriz .acoes-matriz{
  display:flex;justify-content:flex-end;gap:8px;
  padding:0 16px 14px;
}


/* ============================================================
   PRIORIDADE COM BANDEIRA
   ============================================================ */

.bandeira{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--cor,var(--st-aberto));white-space:nowrap;
}
.bandeira svg{width:13px;height:13px;flex:0 0 auto}
.bandeira.so-icone{gap:0}

/* no seletor de prioridade, a bandeira aparece do lado do campo */
.campo-bandeira{display:flex;align-items:center;gap:8px}
.campo-bandeira select{flex:1 1 auto}
.campo-bandeira .bandeira svg{width:17px;height:17px}


/* ============================================================
   CHECKLIST
   ============================================================ */

.checklist{display:flex;flex-direction:column;gap:6px}
.checklist .item-check{
  display:flex;align-items:center;gap:9px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:7px 9px;
}
.checklist .item-check input[type=checkbox]{
  width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:0 0 auto;
}
.checklist .item-check input[type=text]{
  flex:1 1 auto;border:0;background:transparent;padding:0;font-size:14px;
}
.checklist .item-check input[type=text]:focus{outline:none}
.checklist .item-check.feito input[type=text]{
  text-decoration:line-through;color:var(--fg-faint);
}
.checklist .item-check button{
  border:0;background:transparent;color:var(--fg-faint);cursor:pointer;
  padding:2px;display:grid;place-items:center;
}
.checklist .item-check button:hover{color:var(--st-perdido)}
.checklist .item-check button svg{width:14px;height:14px}

.progresso-check{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--fg-faint);
}
.progresso-check .trilho-mini{
  width:38px;height:4px;border-radius:99px;background:var(--panel-3);overflow:hidden;
}
.progresso-check .cheio-mini{height:100%;background:var(--accent);border-radius:99px}


/* ============================================================
   QUADRO ÁGIL
   ============================================================ */

.quadro-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.quadro-barra select{width:auto;min-width:150px;height:34px;padding:0 30px 0 11px;
  border-radius:99px;font-size:13.5px}

/* a coluna do quadro usa a cor escolhida, não a de status */
.coluna.agil .coluna-topo{border-bottom:2px solid var(--cor)}
.coluna.agil .coluna-topo h2::before{background:var(--cor)}

.coluna-acoes{display:flex;gap:4px;margin-left:auto}
.coluna-topo .cabeca-col{display:flex;align-items:center;gap:6px}


/* ============================================================
   CICLO DE VIDA DO PRODUTO (PDLC)
   ============================================================ */

.pdlc{padding:16px 16px 60px;display:grid;gap:16px}

.linha-tempo{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio-g);
  box-shadow:var(--sombra);padding:20px 22px 26px;overflow-x:auto;
}
.linha-tempo h2{
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--fg-faint);
  font-weight:600;margin-bottom:16px;
}

.faixas{display:flex;gap:3px;min-width:680px}
.faixa{
  position:relative;border-radius:8px;padding:11px 12px 13px;
  background:var(--cor);color:#fff;min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.faixa b{font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.faixa small{font-size:11px;opacity:.85}
.faixa .datas{font-size:10.5px;opacity:.75;font-variant-numeric:tabular-nums}

/* régua de marcos, abaixo das faixas */
.marcos{position:relative;height:104px;min-width:680px;margin-top:6px}
.marcos .trilho-m{
  position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line-strong);
}
.marco{
  position:absolute;top:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:transparent;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;
  max-width:130px;
}
.marco .pino-m{
  width:20px;height:20px;border-radius:99px;flex:0 0 auto;
  border:2px solid var(--panel);background:var(--cor,var(--fg-soft));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 0 0 1px var(--line-strong);
}
.marco .pino-m svg{width:11px;height:11px}
.marco .nome-m{
  font-size:11px;line-height:1.25;text-align:center;color:var(--fg-soft);
  max-width:120px;
}
.marco:hover .nome-m,.marco:focus-visible .nome-m{color:var(--fg)}
.marco .data-m{font-size:10px;color:var(--fg-faint);font-variant-numeric:tabular-nums}
/* Alterna a altura só do rótulo, não do pino: no fim do ciclo os marcos
   ficam a poucos dias um do outro e os nomes se atropelariam. O pino
   continua fincado na régua. */
.marco.baixo .nome-m{margin-top:26px}

/* o balão que abre no hover do marco */
.balao{
  position:absolute;z-index:35;width:290px;max-width:calc(100% - 8px);
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--raio);
  box-shadow:var(--sombra-alta);padding:13px 14px;
  font-size:13px;color:var(--fg-soft);
}
.balao h3{
  font-size:13.5px;color:var(--fg);margin-bottom:8px;
  display:flex;align-items:center;gap:7px;
}
.balao h3 .selo{margin-left:auto}
.balao ul{margin:0;padding-left:17px;display:grid;gap:5px}
.balao li{line-height:1.4}
.balao p{margin:0 0 9px;line-height:1.45}
.balao .contas-b{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.balao .vazio-b{color:var(--fg-faint);font-size:12.5px}

/* sprints ligadas ao quadro */



/* ============================================================
   PAINÉIS: ARRASTAR, REDIMENSIONAR E A VIBRAÇÃO
   ============================================================ */

.paineis.editando .cartao,
.paineis.editando .numeros{
  /* vibração de menos de um grau: diz "dá para mexer" sem virar festa */
  animation:vibra 2.6s var(--ease) infinite;
  cursor:grab;
}
.paineis.editando .cartao:nth-child(even){animation-delay:.35s}
@keyframes vibra{
  0%,92%,100%{transform:rotate(0)}
  94%{transform:rotate(-.35deg)}
  96%{transform:rotate(.35deg)}
  98%{transform:rotate(-.2deg)}
}

.bloco-painel{position:relative;min-width:0}
.bloco-painel.arrastando{opacity:.35}
.bloco-painel.alvo-antes::before,
.bloco-painel.alvo-depois::after{
  content:"";position:absolute;top:6px;bottom:6px;width:3px;border-radius:99px;
  background:var(--accent);
}
.bloco-painel.alvo-antes::before{left:-8px}
.bloco-painel.alvo-depois::after{right:-8px}

.pega-bloco{
  position:absolute;top:10px;right:10px;z-index:3;
  display:none;align-items:center;gap:4px;
}
.paineis.editando .pega-bloco{display:flex}
.pega-bloco button{
  width:26px;height:26px;padding:0;border-radius:7px;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--fg-faint);
  display:grid;place-items:center;cursor:pointer;
}
.pega-bloco button:hover{color:var(--fg);border-color:var(--fg-faint)}
.pega-bloco button svg{width:13px;height:13px}
.pega-bloco .mover{cursor:grab}

/* alça de redimensionar, no canto de baixo */
.alca{
  position:absolute;right:4px;bottom:4px;z-index:3;
  width:18px;height:18px;cursor:nwse-resize;display:none;
  color:var(--fg-faint);
}
.paineis.editando .alca{display:block}
.alca svg{width:100%;height:100%}

.grade-paineis{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;align-items:start;
}
.grade-paineis > .bloco-painel[data-largura="2"]{grid-column:span 2}
.grade-paineis > .bloco-painel > .cartao{height:100%;display:flex;flex-direction:column}
.grade-paineis > .bloco-painel > .cartao > .corpo{flex:1 1 auto;overflow:auto}


/* ============================================================
   TELAS PEQUENAS
   ============================================================ */

@media (max-width:1040px){
  .palco-geral{grid-template-columns:minmax(0,1fr)}
  /* o menu vira uma faixa acima do conteúdo, rolando de lado */
  .lateral{
    position:static;height:auto;order:-1;
    flex-direction:row;overflow-x:auto;gap:6px;
    border-left:0;border-bottom:1px solid var(--line);padding:10px 12px;
  }
  .lateral h2,.lateral .rodape{display:none}
  .lateral a{white-space:nowrap;padding:8px 12px}
  .lateral a .n{margin-left:6px}
  .conta-grade{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:980px){
  .dev-grade{grid-template-columns:minmax(0,1fr)}
  .dev-menu{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .dev-menu button{white-space:nowrap}
}

@media (max-width:900px){
  .grade-paineis{grid-template-columns:minmax(0,1fr)}
  .grade-paineis > .bloco-painel[data-largura="2"]{grid-column:span 1}
  .matriz > header{flex-direction:column}
  .matriz > header button{border-right:0;border-bottom:1px solid var(--line)}
  .matriz > header button[aria-selected="true"]{box-shadow:inset 2px 0 0 var(--accent)}
}

@media (max-width:760px){
  .topo{display:flex;gap:8px;padding:0 12px}
  .topo-meio{flex:1 1 auto}
  .rodape-crm{padding:16px 14px 20px;font-size:12px}
  .rodape-crm .direita{margin-left:0;width:100%}
  .marca b,.marca span{display:none}
  .eu small{display:none}
  .eu{padding:5px}
  .busca{flex:1 1 auto;max-width:none}
  .barra{padding:10px 12px;gap:8px}
  .resumo{display:none}
  .titulo-pagina{display:none}
  .quadro{padding:12px;gap:10px}
  .coluna{flex-basis:83vw;width:83vw}
  .conta-topo{padding:16px 14px}
  .conta-grade{padding:14px 14px 50px}
  .envolve-tabela{padding:12px}
  .paineis{padding:12px 12px 50px}
  .painel-filtro{width:min(290px,86vw)}
  .cortina{padding:0}
  .janela{max-width:none;border-radius:16px 16px 0 0;
    margin-top:calc(var(--tela) * .08);min-height:calc(var(--tela) * .92)}
  .janela > footer{border-radius:0;position:sticky;bottom:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.link-acesso{display:flex;gap:8px;align-items:center}
.link-acesso input{
  flex:1 1 auto;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;
}
.link-acesso .botao{flex:0 0 auto}

/* A aba unica de quem ve so a propria area: nao e botao, e rotulo.
   Botao que nao faz nada ensina a nao clicar em botao. */
.abas-setor.uma-so{pointer-events:none}
.aba-fixa{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:999px;
  background:var(--accent-dim);color:var(--accent-forte);
  font-size:13px;font-weight:600;
}

/* ====================================================================
   ARRASTO COM O DEDO

   `touch-action:none` so entra DEPOIS que o arrasto comecou -- o
   JavaScript poe a classe. Deixar a regra fixa no card mataria a
   rolagem da tela: no celular, rolar e passar o dedo exatamente em
   cima dos cards, e a pagina ficaria presa.
   ==================================================================== */
.arrastando-toque{touch-action:none;-webkit-user-select:none;user-select:none}
/* Enquanto ha tarefa na mao, a tela nao rola junto. */
body.com-tarefa-na-mao{overscroll-behavior:contain}
@media (pointer:coarse){
  /* Alvo maior no dedo: 30px de card e preciso demais para arrastar. */
  .cal-dia .tarefa{min-height:32px}
  .coluna-cards .card{touch-action:pan-y}
}

/* ====================================================================
   CHAT DA EQUIPE

   Mesma caixa do sino -- mesma largura, mesma borda, mesmo canto. Dois
   paineis parecidos lado a lado no topo so confundem se forem
   PARECIDOS; iguais, a pessoa aprende um e sabe os dois.
   ==================================================================== */
.chat{position:relative}
.chat-botao{position:relative}
.chat-botao svg{width:17px;height:17px}
.chat-botao.tem-novas{color:var(--accent-forte)}
.chat-conta{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--st-perdido);color:#fff;border-radius:99px;
  font-size:10px;font-weight:700;line-height:1;
}

.chat-painel{
  position:absolute;top:calc(100% + 7px);right:0;z-index:80;
  width:min(360px,94vw);
  display:flex;flex-direction:column;
  max-height:calc(var(--tela) * .68);overflow:hidden;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--raio-g);box-shadow:var(--sombra-alta);
}
.chat-painel > header{
  flex:0 0 auto;padding:11px 14px;border-bottom:1px solid var(--line);
}
.chat-painel h3{
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;margin:0;
}
.chat-cabeca{display:flex;align-items:center;gap:9px}
.chat-cabeca h3{
  font-size:14px;letter-spacing:-.01em;text-transform:none;color:var(--fg);
}
.chat-voltar{
  flex:0 0 auto;width:24px;height:24px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:6px;color:var(--fg-faint);cursor:pointer;
}
.chat-voltar svg{width:15px;height:15px}
.chat-voltar:hover{background:var(--panel-2);color:var(--fg)}

/* ---------------- a lista de conversas ---------------- */
.chat-salas{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.chat-sala{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 13px;background:none;border:0;border-bottom:1px solid var(--line);
  color:inherit;font:inherit;cursor:pointer;
}
.chat-sala:hover{background:var(--panel-2)}
.chat-sala.tem-novas b{color:var(--fg)}
.chat-avatar{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-3,var(--panel-2));color:var(--fg-soft);
  font-size:11.5px;font-weight:700;
}
.chat-avatar.equipe{background:var(--accent-dim);color:var(--accent-forte)}
.chat-sala-txt{flex:1 1 auto;min-width:0}
.chat-sala-txt b{display:block;font-size:13.5px;font-weight:600;color:var(--fg-soft)}
.chat-sala-txt small{
  display:block;font-size:12px;color:var(--fg-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-badge{
  flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--st-perdido);color:#fff;border-radius:99px;
  font-size:10.5px;font-weight:700;
}

.chat-nova{flex:0 0 auto;padding:10px 13px;border-top:1px solid var(--line)}
.chat-nova label{
  display:block;margin-bottom:5px;font-size:11px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--fg-faint);font-weight:600;
}

/* ---------------- a conversa ---------------- */
.chat-corpo{
  flex:1 1 auto;min-height:170px;max-height:min(360px,42vh);
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:7px;padding:13px;
  }
.chat-corpo::-webkit-scrollbar{width:9px}
.chat-corpo::-webkit-scrollbar-track{background:transparent}
.chat-corpo::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:99px;border:2px solid var(--panel);
}
.chat-vazio{margin:auto;padding:10px;font-size:12.5px;color:var(--fg-faint);text-align:center;line-height:1.5}

.chat-msg{
  max-width:86%;align-self:flex-start;padding:7px 11px 5px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;border-bottom-left-radius:4px;
}
.chat-msg.minha{
  align-self:flex-end;background:var(--accent-dim);border-color:var(--accent);
  border-radius:12px;border-bottom-right-radius:4px;
}
.chat-quem{
  display:block;font-size:11px;font-weight:700;color:var(--accent-forte);margin-bottom:2px;
}
.chat-texto{display:block;font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.chat-hora{
  display:flex;align-items:center;gap:4px;justify-content:flex-end;
  margin-top:3px;font-size:10.5px;color:var(--fg-faint);
}
.chat-voz svg{width:10px;height:10px;display:block}

/* ---------------- escrever ---------------- */
.chat-escrever{
  flex:0 0 auto;display:flex;align-items:flex-end;gap:6px;
  padding:9px 10px;border-top:1px solid var(--line);background:var(--panel-2);
}
.chat-escrever textarea{
  flex:1 1 auto;min-width:0;min-height:34px;max-height:110px;
  padding:7px 10px;border-radius:10px;resize:none;line-height:1.4;
}
.chat-mic,.chat-enviar{
  flex:0 0 auto;width:32px;height:32px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;cursor:pointer;
}
.chat-mic{
  background:transparent;border:1px solid var(--line-strong);color:var(--fg-faint);
  transition:border-color .14s var(--ease),color .14s var(--ease),background .14s var(--ease);
}
.chat-mic svg{width:14px;height:14px}
.chat-mic:hover{border-color:var(--line-strong);color:var(--fg)}
.chat-mic.indisponivel{opacity:.45;cursor:help}
.chat-mic.ouvindo{
  background:var(--st-perdido);border-color:var(--st-perdido);color:#fff;
  animation:pulsa-mic 1.1s ease-in-out infinite;
}
.chat-enviar{
  background:var(--accent);border:0;color:var(--ink);
  transition:filter .14s var(--ease);
}
.chat-enviar svg{width:15px;height:15px}
.chat-enviar:hover:not(:disabled){filter:brightness(1.08)}
.chat-enviar:disabled{opacity:.5;cursor:default}

@media (max-width:560px){
  .chat-painel{width:calc(100vw - 20px);right:-8px}
}

/* ====================================================================
   ANÁLISE DE CRÉDITO

   Responde "como a eixo recebe deste cliente", e não "se vende". Por
   isso o veredicto vem primeiro e grande: é a única linha que alguém
   precisa ler antes de montar uma proposta.
   ==================================================================== */
.credito{display:flex;flex-direction:column;gap:18px}
.credito-carregando{margin:0;padding:24px 0;text-align:center;color:var(--fg-faint);font-size:13.5px}

/* Sem tarja colorida na lateral. O veredicto se distingue pelo que ele
   diz e pelo TAMANHO do que diz -- a cor entra na palavra, onde ela
   acompanha o texto em vez de substituir. Uma faixa grossa de cor na
   borda e decoracao que finge ser informacao. */
.credito-veredicto{
  padding:17px 19px;border-radius:14px;background:var(--panel-2);
}
.credito-veredicto b{
  display:block;font-family:var(--font-display);font-size:18px;font-weight:700;
  letter-spacing:-.022em;margin-bottom:6px;
}
.credito-veredicto p{margin:0;font-size:13.5px;line-height:1.55;color:var(--fg-soft)}
.credito-veredicto .credito-condicao{margin-top:8px;color:var(--fg)}
/* A cor vem do status, e sempre acompanhada da palavra: quem não
   separa verde de laranja lê "Exigir garantia" do mesmo jeito. */
.credito-veredicto.st-ganho b{color:var(--st-ganho)}
.credito-veredicto.st-espera b{color:var(--st-espera)}
.credito-veredicto.st-aprovacao b{color:var(--st-aprovacao)}
.credito-veredicto.st-perdido b{color:var(--st-perdido)}

.credito-numeros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;
}
.credito-numeros > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.credito-numeros span{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;
}
.credito-numeros b{
  font-family:var(--font-display);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.credito-numeros small{font-size:11.5px;color:var(--fg-faint);line-height:1.4}

.credito-barras{display:flex;justify-content:center}
.credito-grafico{width:100%;max-width:330px;height:auto}
.credito-grafico .credito-num{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  fill:var(--fg);font-variant-numeric:tabular-nums;
}
.credito-grafico .credito-rot{font-size:10px;fill:var(--fg-faint);letter-spacing:.04em}

.credito-alerta{
  margin:0;padding:11px 13px;border-radius:12px;font-size:13.2px;line-height:1.5;
  background:rgba(224,60,60,.09);color:var(--st-perdido);font-weight:600;
}
.credito-obs{margin:0;font-size:13.2px;line-height:1.55;color:var(--fg-soft)}
.credito-fonte{margin:0;font-size:12px;color:var(--fg-faint)}
.credito-nota{
  margin:0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--fg-faint);
}

.credito-vazio{padding:8px 0 4px}
.credito-vazio h3{margin:0 0 7px;font-size:16px;font-weight:700;letter-spacing:-.022em}
.credito-vazio p{margin:0;font-size:13.5px;line-height:1.6;color:var(--fg-soft);max-width:62ch}


/* ---- o que a Receita diz, dentro da analise de credito ----

   Separado do resto por uma linha e nao por uma caixa: e continuacao
   da mesma leitura, nao um segundo assunto. */
.credito-rf{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.credito-rf h4{
  margin:0 0 10px;font-family:var(--font-display);font-weight:700;
  font-size:14px;letter-spacing:-.01em;color:var(--fg)
}
.credito-rf-situacao{
  margin:0 0 14px;padding:11px 13px;border-radius:10px;
  font-size:13.5px;line-height:1.5;
  background:color-mix(in srgb, var(--cor) 10%, transparent);
  color:var(--fg)
}
.credito-rf-situacao b{color:var(--cor)}
.credito-rf-atividade{
  margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--fg-soft)
}
.credito-rf-atividade span{
  display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:2px
}
.credito-rf-carregando{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--fg-faint);font-size:13.5px
}

.credito-acoes{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}

/* O botão de crédito no formulário do lead, colado no CNPJ. */
.lead-credito{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.lead-credito small{font-size:12.3px;color:var(--fg-faint);line-height:1.45}

/* O segundo botão de canto do card fica à esquerda do primeiro. */
.card-canto.segundo{right:38px}

/* ============================================================
   PAINEL FINANCEIRO -- composicao e projecao
   ============================================================ */

/* ---- a carteira numa linha so ----

   Parte-do-todo lido de relance, antes das faixas uma a uma. O que
   separa os pedacos e uma FRESTA de 2px na cor da superficie, nao um
   contorno: contorno e tinta que nao e dado. */
.fin-composicao{margin:0 0 20px}
.fin-comp-trilho{
  display:flex;height:14px;border-radius:7px;overflow:hidden;
  background:var(--panel-3);gap:2px
}
.fin-comp-pedaco{min-width:3px;transition:opacity .12s}
.fin-comp-trilho:hover .fin-comp-pedaco{opacity:.45}
.fin-comp-trilho .fin-comp-pedaco:hover{opacity:1}

.fin-comp-legenda{
  display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:11px;
  font-size:12.5px;color:var(--fg-soft)
}
.fin-comp-legenda span{display:inline-flex;align-items:center;gap:6px}
.fin-comp-legenda i{
  width:9px;height:9px;border-radius:3px;flex:0 0 auto;background:var(--cor)
}
.fin-comp-legenda b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- projecao de vencimentos ---- */
.fin-projecao{position:relative}
.fin-projecao svg{display:block;width:100%;height:auto;overflow:visible}
/* A tabela gemea ocupa a largura toda: encolhida ao conteudo ela
   fica apertada ao lado de um grafico que se estica. */
.fin-projecao-tabela{width:100%;margin-top:18px}

/* Grade e eixo recuam um passo da superficie, e sao linha cheia:
   tracejado soa "previsao" quando e so grade. */
.fin-projecao .grade{stroke:var(--line);stroke-width:1}
.fin-projecao .eixo{fill:var(--fg-faint);font-size:11px}
.fin-projecao .eixo-val{fill:var(--fg-faint);font-size:11px;font-variant-numeric:tabular-nums}
.fin-projecao .coluna{fill:var(--cor-col, var(--accent))}
.fin-projecao .alvo{fill:transparent;cursor:default}
.fin-projecao .alvo:hover + .coluna,
.fin-projecao .coluna:hover{filter:brightness(1.08)}
.fin-projecao .rotulo-topo{
  fill:var(--fg);font-size:11.5px;font-weight:600;
  font-variant-numeric:tabular-nums
}

.fin-dica{
  position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
  background:var(--panel);color:var(--fg);border:1px solid var(--line-strong);
  border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.45;
  white-space:nowrap;box-shadow:0 8px 24px -10px rgba(0,0,0,.45);
  transition:opacity .1s;z-index:3
}
.fin-dica b{font-variant-numeric:tabular-nums}
.fin-dica.vendo{opacity:1}

/* ---- o numero grande nao usa digito de largura fixa ----

   `tabular-nums` existe para numero que se alinha em coluna. Num
   numero grande e solto ele so abre buracos entre os digitos. */
.numeros .numero b{font-variant-numeric:proportional-nums}
/* Numero em coluna alinha pela direita e usa digito de largura fixa:
   e assim que a casa decimal de uma linha cai em cima da da outra, e o
   olho compara grandeza sem ler digito por digito. As tabelas deste
   painel marcavam .num e nenhuma regra lia a marca. */
.fin-cartao .tabela td.num,
.fin-cartao .tabela th.num{text-align:right;font-variant-numeric:tabular-nums}
/* As colunas de numero ficam estreitas; a sobra vai para o rotulo, que
   e o que cresce. */
.fin-projecao-tabela td.num,
.fin-projecao-tabela th.num{width:9rem}

/* Mapa de calor da matriz: a cor mora no fundo da celula, o numero
   fica na cor de texto. Lavagem leve porque celula inteira pintada
   forte vira bloco e some a leitura da linha. */
.tabela.matriz td.calor{
  background:color-mix(in srgb, var(--cor) 16%, transparent);
  color:var(--fg);font-weight:600
}
:root[data-tema="escuro"] .tabela.matriz td.calor{
  background:color-mix(in srgb, var(--cor) 26%, transparent)
}

@media (max-width:620px){
  .fin-comp-legenda{gap:4px 12px;font-size:12px}
}


/* O endereco que o mapa achou, escrito embaixo dele: e assim que
   um palpite errado fica visivel em vez de virar certeza. */
.mapa-legenda{
  margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--fg-faint)
}
.mapa-legenda:empty{display:none}

/* ---- campo obrigatorio em branco ----

   A borda muda e o rotulo ganha o recado. Cor sozinha nao
   serve: quem nao separa vermelho de cinza precisa da palavra. */
.campo.falta input,
.campo.falta select,
.campo.falta textarea{
  border-color:var(--st-perdido);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--st-perdido) 14%, transparent)
}
.campo.falta > label{color:var(--st-perdido)}
.campo.falta > label::after{
  content:" — falta preencher";font-weight:400;font-size:11.5px;
  letter-spacing:0;text-transform:none
}

/* ============================================================
   ARQUIVOS PRESOS A UM REGISTRO
   ============================================================ */

.anexos{display:flex;flex-direction:column;gap:10px}
.anexos-lista{display:flex;flex-direction:column;gap:6px}
.anexos-lista:empty{display:none}

.anexo{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);padding:8px 10px
}
.anexo-abre{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;
  color:var(--fg);text-decoration:none
}
.anexo-abre:hover .anexo-nome{text-decoration:underline}
.anexo-abre svg{width:18px;height:18px;flex:0 0 auto;color:var(--fg-faint)}
.anexo-nome{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:13.5px;font-weight:500
}
.anexo-meta{flex:0 0 auto;font-size:11.5px;color:var(--fg-faint)}

.anexo-acao{
  flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;
  border:0;border-radius:8px;background:none;color:var(--fg-faint);
  cursor:pointer;text-decoration:none
}
.anexo-acao svg{width:15px;height:15px}
.anexo-acao:hover{background:var(--panel-3);color:var(--fg)}
.anexo-acao.perigo:hover{color:var(--st-perdido)}

/* A area de soltar e tracejada de proposito: tracejado aqui quer dizer
   "cabe algo", e nao "grade" -- e o unico lugar do CRM onde ele tem
   esse sentido. */
.anexos-solta{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:18px 14px;border:1.5px dashed var(--line-strong);border-radius:12px;
  background:none;color:var(--fg-faint);text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s
}
.anexos-solta svg{width:22px;height:22px;margin-bottom:2px}
.anexos-solta b{font-size:13.5px;font-weight:600;color:var(--fg-soft)}
.anexos-solta span{font-size:12px}
.anexos-solta:hover,
.anexos-solta:focus-visible{border-color:var(--line-strong);color:var(--fg)}
.anexos-solta.sobre{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-dim)
}
.anexos-solta.so-leitura{cursor:default;padding:12px;border-style:solid}
.anexos-solta.so-leitura:hover{border-color:var(--line-strong);color:var(--fg-faint)}

.anexo-subindo{
  display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);padding:9px 11px
}
.anexo-trilho{height:4px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.anexo-cheio{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--accent);transition:width .15s linear
}

/* ============================================================
   VELOCIDADE DE RESPOSTA AO LEAD
   ============================================================ */

/* O selo no card: a palavra carrega o significado, a cor reforca.
   Nao e emoji -- emoji muda de desenho a cada sistema, ignora o tema e
   some em alto contraste. */
.velo-selo{gap:6px;font-variant-numeric:tabular-nums}
.velo-selo i{font-style:normal;opacity:.75;font-weight:500}
.card-extra{margin-top:8px;display:flex}

/* O aviso do topo. So aparece quando ha atraso: aviso permanente vira
   moldura e para de ser lido. */
.velo-alerta{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:0 0 16px;padding:12px 15px;border-radius:12px;
  background:color-mix(in srgb, var(--cor) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--cor) 28%, transparent);
  font-size:13.5px;line-height:1.5;color:var(--fg)
}
.velo-alerta svg{width:19px;height:19px;flex:0 0 auto;color:var(--cor)}
.velo-alerta span{flex:1 1 320px;min-width:0}
.velo-alerta b{color:var(--cor)}

/* O recado dentro do lead. */
.velo-recado{
  margin:0 0 18px;padding:13px 15px;border-radius:12px;
  background:color-mix(in srgb, var(--cor) 10%, transparent);
  border-left:3px solid var(--cor)
}
.velo-recado p{margin:0 0 7px;font-size:13.5px;line-height:1.55;color:var(--fg)}
.velo-recado p:last-child{margin-bottom:0}
.velo-recado b{color:var(--cor)}
.velo-recado small{color:var(--fg-faint);font-size:12.5px;line-height:1.5}

/* ============================================================
   PLANNER -- onde o card vai cair, e as divisórias
   ============================================================ */

/* A linha de destino. Fina e na cor de marca: ela diz "aqui", e some
   no instante em que a pessoa solta. Altura própria em vez de borda
   num card -- borda empurraria o resto da coluna um pixel para baixo
   a cada movimento do ponteiro. */
.marca-queda{
  height:3px;border-radius:99px;margin:3px 0;flex:0 0 auto;
  background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)
}

/* ---- divisória entre sessões do Planner ----

   Cinza discreto, e com respiro no meio: a linha não vai de ponta a
   ponta. Separar não é cortar -- a divisória que atravessa a tela
   inteira faz o olho tratar os dois lados como telas diferentes.

   `border-image` com gradiente dá o vão central sem elemento extra. */
.sessao-linha{
  height:1px;border:0;margin:clamp(18px,2.4vw,30px) 0;
  background:linear-gradient(to right,
    rgba(136,136,146,.34) 0%,
    rgba(136,136,146,.34) 38%,
    transparent 46%,
    transparent 54%,
    rgba(136,136,146,.34) 62%,
    rgba(136,136,146,.34) 100%)
}
:root[data-tema="escuro"] .sessao-linha{
  background:linear-gradient(to right,
    rgba(170,170,180,.26) 0%,
    rgba(170,170,180,.26) 38%,
    transparent 46%,
    transparent 54%,
    rgba(170,170,180,.26) 62%,
    rgba(170,170,180,.26) 100%)
}


/* ============================================================
   PLANNER: progresso do checklist no card e gaveta do item
   ============================================================ */

/* A barra enche pela razao exata (5 de 10 = metade da trilha). O texto
   arredonda; a barra nao. */
.card-progresso{
  display:flex;align-items:center;gap:8px;
  padding:7px 0 1px 7px;
}
.card-progresso-txt{
  flex:0 0 auto;font-size:11px;font-weight:600;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}
.card-progresso-trilho{
  flex:1 1 auto;height:5px;border-radius:99px;overflow:hidden;
  background:var(--panel-3);
}
.card-progresso-cheio{
  display:block;height:100%;border-radius:99px;background:var(--accent);
  transition:width .35s var(--ease);
}
.card-progresso.completo .card-progresso-txt{color:var(--accent-forte)}
@media (prefers-reduced-motion:reduce){
  .card-progresso-cheio{transition:none}
}

/* O botao de detalhes do item, na linha do checklist. */
.checklist .item-check button.item-detalhes{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 4px 2px 6px;border-radius:99px;color:var(--fg-faint);
}
.checklist .item-check button.item-detalhes:hover{color:var(--fg);background:var(--panel-3)}
.item-ficha{
  font-size:10.5px;font-weight:600;line-height:1;padding:3px 6px;border-radius:99px;
  background:var(--accent-dim);color:var(--accent-forte);white-space:nowrap;
}
.checklist .item-check{cursor:default}

/* A gaveta do item abre por cima da janela da tarefa. */
.janela.gaveta.gaveta-item{width:min(420px,100vw);box-shadow:var(--sombra-alta)}
.item-gaveta{display:flex;flex-direction:column;gap:14px}
.item-campo{display:flex;flex-direction:column;gap:6px;margin:0}
.item-campo > span{font-size:12px;font-weight:600;color:var(--fg-faint)}
.item-campo input[type=text],
.item-campo input[type=date],
.item-campo select,
.item-campo textarea{width:100%;font:inherit}
.item-campo textarea{resize:vertical;min-height:96px}
.item-campo.item-feito{flex-direction:row;align-items:center;gap:9px}
.item-campo.item-feito input{width:16px;height:16px;accent-color:var(--accent)}
.item-campo.item-feito > span{font-size:13.5px;font-weight:500;color:var(--fg)}
.item-aviso{margin:0;font-size:13px;color:var(--fg-faint)}


/* ============================================================
   FLUXO DE CAIXA  (fluxo.html)

   Dark premium: a tela inteira vive dentro de .fx, que traz as proprias
   cores e nao herda o tema claro/escuro do CRM. Isso e de proposito --
   e uma "mesa de controle" do caixa, e fica igual nos dois temas.

   Nada aqui vaza para fora de .fx, exceto o balao (.fx-tip), que mora
   no <body> para nao ser cortado pelo overflow dos cartoes.
   ============================================================ */
.fx{
  --fx-bg:#09090b;
  --fx-card:rgba(24,24,27,.62);
  --fx-linha:#27272a;
  --fx-linha-forte:#3f3f46;
  --fx-txt:#fafafa;
  --fx-suave:#a1a1aa;
  --fx-fraco:#71717a;
  --fx-e:#10b981;
  --fx-s:#f43f5e;
  --fx-p:#38bdf8;
  --fx-m:#6366f1;
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--fx-bg);color:var(--fx-txt);color-scheme:dark;
  border:1px solid var(--fx-linha);border-radius:20px;
  padding:clamp(14px,2.2vw,28px);margin:clamp(8px,1.6vw,18px);
}
.fx::before{
  content:"";position:absolute;inset:0 0 auto 0;height:460px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 280px at 16% 0%,rgba(16,185,129,.17),transparent 70%),
    radial-gradient(540px 260px at 84% 4%,rgba(99,102,241,.17),transparent 70%);
}
.fx *{box-sizing:border-box}
.fx :focus-visible{outline:2px solid var(--fx-p);outline-offset:2px;border-radius:6px}
.fx h1,.fx h2,.fx h3{margin:0}

/* ---------------- topo ---------------- */
.fx-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.fx-titulo h1{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.025em}
.fx-sub{margin:4px 0 0;font-size:13px;color:var(--fx-suave)}
.fx-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.fx-ctl{
  display:inline-flex;padding:3px;gap:2px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--fx-linha);
}
.fx-ctl button{
  border:0;background:transparent;color:var(--fx-suave);font:inherit;font-size:13px;font-weight:500;
  padding:7px 14px;border-radius:9px;cursor:pointer;
  transition:background .18s,color .18s,box-shadow .18s,transform .12s;
}
.fx-ctl button:hover{color:var(--fx-txt)}
.fx-ctl button:active{transform:scale(.96)}
.fx-ctl button[aria-pressed="true"]{
  background:rgba(16,185,129,.15);color:#6ee7b7;
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.4),0 0 18px -4px rgba(16,185,129,.55);
}
.fx-ctl.pequeno button{padding:5px 10px;font-size:12px}

.fx-botao{
  display:inline-flex;align-items:center;gap:8px;border-radius:11px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;padding:9px 15px;
  border:1px solid transparent;
  transition:transform .12s,box-shadow .2s,background .2s,border-color .2s,opacity .2s;
}
.fx-botao svg{width:16px;height:16px;flex:none}
.fx-botao:active{transform:scale(.96)}
.fx-botao:disabled{opacity:.45;cursor:not-allowed;transform:none}
.fx-botao.primario{
  color:#03140d;background:linear-gradient(135deg,#34d399,#10b981 55%,#0ea5a3);
  box-shadow:0 0 0 1px rgba(16,185,129,.5),0 10px 26px -10px rgba(16,185,129,.8);
}
.fx-botao.primario:hover:not(:disabled){filter:brightness(.94);transform:translateY(-1px)}
.fx-botao.fantasma{background:rgba(255,255,255,.03);border-color:var(--fx-linha-forte);color:var(--fx-txt)}
.fx-botao.fantasma:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:#52525b}
.fx-botao.pequeno{padding:6px 11px;font-size:12.5px}
.fx-botao.perigo{color:#fb7185;border-color:rgba(244,63,94,.4)}

/* ---------------- cartoes ---------------- */
.fx-cartao{
  position:relative;min-width:0;
  background:var(--fx-card);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--fx-linha);border-radius:16px;padding:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -26px rgba(0,0,0,.9);
  animation:fx-sobe .55s cubic-bezier(.2,.9,.2,1) both;
}
.fx-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.fx-cab h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
.fx-cab p{margin:3px 0 0;font-size:12.5px;color:var(--fx-suave)}
.fx-cab-ctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fx-corpo-grafico{min-height:120px}
.fx-nota{margin:8px 0 0;font-size:12px;color:var(--fx-fraco)}

.fx-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:12px}
.fx-grade2{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr);gap:12px;margin-bottom:12px}
.fx-grade3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;margin-bottom:12px}

@keyframes fx-sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fx-pulso{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.fx-pulso{animation:fx-pulso .45s cubic-bezier(.2,.9,.2,1) both}

/* ---------------- KPIs ---------------- */
.fx-kpi{
  position:relative;overflow:hidden;min-height:128px;
  display:flex;flex-direction:column;gap:2px;padding:16px 16px 14px;
  background:var(--fx-card);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--fx-linha);border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -26px rgba(0,0,0,.9);
  animation:fx-sobe .6s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i,0) * 70ms);
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.fx-kpi::after{
  content:"";position:absolute;right:-30px;top:-40px;width:150px;height:120px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--cor) 30%,transparent),transparent);
  opacity:.55;transition:opacity .3s;
}
.fx-kpi:hover{border-color:color-mix(in srgb,var(--cor) 55%,#27272a);transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 20px 44px -22px color-mix(in srgb,var(--cor) 60%,transparent)}
.fx-kpi:hover::after{opacity:.9}
.fx-kpi-rot{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fx-suave)}
.fx-kpi-val{
  display:block;margin:6px 0 4px;position:relative;z-index:1;
  font-family:var(--font-display);font-size:clamp(19px,2vw,25px);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fx-kpi.ruim .fx-kpi-val{color:#fb7185}
.fx-kpi.bom .fx-kpi-val{color:#34d399}
.fx-kpi-sub{font-size:12px;color:var(--fx-fraco);position:relative;z-index:1;max-width:calc(100% - 100px);line-height:1.35}
.fx-kpi .fx-spark{position:absolute;right:12px;bottom:12px;width:96px;height:30px;opacity:.95}
.fx-kpi .fx-spark svg{width:100%;height:100%;display:block}
.fx-delta{font-weight:600}
.fx-delta.bom{color:#34d399}
.fx-delta.ruim{color:#fb7185}
.fx-delta.neutro{color:var(--fx-fraco);font-weight:500}

/* ---------------- chave (meta) ---------------- */
.fx-chave{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fx-suave);cursor:pointer;user-select:none}
.fx-chave input{position:absolute;opacity:0;width:1px;height:1px}
.fx-chave-trilho{
  position:relative;width:34px;height:20px;border-radius:99px;background:#27272a;border:1px solid var(--fx-linha-forte);
  transition:background .2s,box-shadow .2s;flex:none;
}
.fx-chave-trilho::after{
  content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#a1a1aa;
  transition:transform .22s cubic-bezier(.2,.9,.2,1),background .2s;
}
.fx-chave input:checked + .fx-chave-trilho{background:rgba(99,102,241,.35);box-shadow:0 0 14px -2px rgba(99,102,241,.7);border-color:#6366f1}
.fx-chave input:checked + .fx-chave-trilho::after{transform:translateX(14px);background:#a5b4fc}
.fx-chave input:focus-visible + .fx-chave-trilho{outline:2px solid var(--fx-p);outline-offset:2px}

/* ---------------- legendas ---------------- */
.fx-leg{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--fx-suave)}
.fx-leg span{display:inline-flex;align-items:center;gap:7px}
.fx-leg i{width:18px;height:3px;border-radius:2px;background:#10b981;box-shadow:0 0 8px #10b981}
.fx-leg i.p{background:repeating-linear-gradient(90deg,#38bdf8 0 5px,transparent 5px 9px);box-shadow:0 0 8px #38bdf8}
.fx-leg i.m{background:repeating-linear-gradient(90deg,#6366f1 0 2px,transparent 2px 6px);box-shadow:0 0 8px #6366f1}
.fx-leg i.e{width:10px;height:10px;border-radius:3px}
.fx-leg i.s{width:10px;height:10px;border-radius:3px;background:#f43f5e;box-shadow:0 0 8px #f43f5e}

/* ---------------- graficos ---------------- */
.fx-grafico{position:relative}
.fx-grafico svg{display:block;width:100%;height:auto;overflow:visible}
.fx-vazio{margin:0;padding:34px 8px;text-align:center;color:var(--fx-fraco);font-size:13.5px}
.fx-grade{stroke:var(--fx-linha);stroke-width:1;stroke-dasharray:2 5}
.fx-zero{stroke:#52525b;stroke-width:1.2}
.fx-eixo{fill:var(--fx-fraco);font-size:11px;font-variant-numeric:tabular-nums}
.fx-eixo-fut{fill:#7dd3fc;opacity:.85}

.fx-linha{fill:none;stroke:#10b981;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.entra .fx-linha{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.22,.8,.2,1)}
.fx-area-preenche,.fx-proj-preenche{opacity:0}
.entra .fx-area-preenche{opacity:1;transition:opacity 1s .5s}
.entra .fx-proj-preenche{opacity:1;transition:opacity 1s 1.2s}
.fx-proj{fill:none;stroke:#38bdf8;stroke-width:2.4;stroke-dasharray:7 7;stroke-linecap:round;opacity:0}
.entra .fx-proj{opacity:1;transition:opacity .8s 1s;animation:fx-marcha 1.8s linear infinite 1.8s}
@keyframes fx-marcha{to{stroke-dashoffset:-28}}
.fx-cenario{fill:none;stroke:#6366f1;stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round;opacity:0}
.entra .fx-cenario{opacity:1;transition:opacity .8s 1.2s}
.fx-ponto{fill:#09090b;stroke:#10b981;stroke-width:1.6}
.fx-ponto-fim{fill:#10b981;filter:drop-shadow(0 0 6px #10b981)}
.fx-ponto-proj{fill:#09090b;stroke:#38bdf8;stroke-width:1.6}
.fx-ponto-meta{fill:#09090b;stroke:#6366f1;stroke-width:1.6}
.fx-hoje{stroke:#52525b;stroke-dasharray:3 4}
.fx-guia{stroke:#a1a1aa;stroke-width:1;opacity:0;transition:opacity .12s;pointer-events:none}
.fx-guia.on{opacity:.5}
.fx-foco{fill:#10b981;stroke:#09090b;stroke-width:2;opacity:0;pointer-events:none;transition:opacity .12s}
.fx-foco.on{opacity:1}
.fx-foco.fut{fill:#38bdf8}

/* barras */
.fx-barra{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:opacity .15s}
.entra .fx-barra{animation:fx-cresce .75s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes fx-cresce{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.fx-barra-e{filter:drop-shadow(0 0 5px rgba(16,185,129,.4))}
.fx-barra-s{filter:drop-shadow(0 0 5px rgba(244,63,94,.4))}
.fx-barras:has(.fx-grupo.ativa) .fx-grupo:not(.ativa) .fx-barra{opacity:.32}
.fx-grupo.fantasma .fx-barra{fill-opacity:.28;stroke-width:1.2;stroke-dasharray:3 3;filter:none}
.fx-grupo.fantasma .fx-barra-e{stroke:#10b981}
.fx-grupo.fantasma .fx-barra-s{stroke:#f43f5e}

/* rosca */
.fx-donut{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:16px;align-items:center}
.fx-donut svg{max-width:250px;margin:0 auto}
.fx-seg{cursor:pointer;outline:none;transition:transform .24s cubic-bezier(.2,.9,.2,1),opacity .2s}
.fx-seg path{fill:none;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1}
.entra .fx-seg path{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.22,.8,.2,1) var(--atraso,0ms),transform .24s cubic-bezier(.2,.9,.2,1),filter .24s}
.fx-seg.ativa{transform:translate(var(--dx),var(--dy))}
.fx-seg.ativa .topo{transform:translateY(-4px);filter:drop-shadow(0 0 10px var(--glow))}
.fx-donut.com-foco .fx-seg:not(.ativa){opacity:.42}
.fx-donut-rot{fill:var(--fx-suave);font-size:10.5px;letter-spacing:.12em;font-weight:600}
.fx-donut-val{fill:#fafafa;font-size:21px;font-weight:700;font-family:var(--font-display);font-variant-numeric:tabular-nums}
.fx-donut-pct{fill:var(--fx-suave);font-size:11.5px}
.fx-donut-centro text{pointer-events:none}

.fx-legenda{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fx-legenda li{
  display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;column-gap:9px;row-gap:5px;
  padding:7px 9px;border-radius:10px;font-size:13px;cursor:default;outline:none;
  transition:background .15s;
}
.fx-legenda li i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor}
.fx-leg-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-legenda li b{font-variant-numeric:tabular-nums}
.fx-legenda li em{font-style:normal;color:var(--fx-fraco);font-size:12px;font-variant-numeric:tabular-nums;min-width:84px;text-align:right}
.fx-legenda li s{grid-column:1/-1;display:block;height:3px;border-radius:99px;background:#27272a;overflow:hidden;text-decoration:none}
.fx-legenda li u{display:block;height:100%;border-radius:99px;text-decoration:none;transition:width .8s cubic-bezier(.22,.8,.2,1)}
.fx-legenda li.ativa,.fx-legenda li:focus-visible{background:rgba(255,255,255,.06)}

/* medidor */
.fx-gauge-lugar{display:grid;place-items:center;margin:-4px 0 4px}
.fx-gauge svg{width:min(100%,262px)}
.fx-radar-anel{fill:none;stroke:#1f1f23;stroke-width:1}
.fx-radar-anel.g{stroke:#3f3f46;stroke-dasharray:2 7}
.fx-radar-giro{transform-origin:120px 118px;animation:fx-gira 70s linear infinite}
@keyframes fx-gira{to{transform:rotate(360deg)}}
.fx-radar-marca{stroke:#3f3f46;stroke-width:1}
.fx-radar-marca.m{stroke:#71717a;stroke-width:1.5}
.fx-medidor-trilho{fill:none;stroke:#27272a;stroke-width:12;stroke-linecap:round}
.fx-medidor-valor{fill:none;stroke-width:12;stroke-linecap:round}
.fx-medidor-ponta{stroke:#09090b;stroke-width:3}
.fx-medidor-marca{fill:#52525b;font-size:9.5px;font-variant-numeric:tabular-nums}
.fx-medidor-num{font-size:46px;font-weight:700;font-family:var(--font-display);font-variant-numeric:tabular-nums}
.fx-medidor-rot{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

.fx-partes{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:11px}
.fx-parte-topo{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.fx-parte-topo span{color:var(--fx-suave)}
.fx-parte-topo b{font-variant-numeric:tabular-nums}
.fx-parte-topo small{color:var(--fx-fraco);font-weight:500}
.fx-parte-barra{height:4px;border-radius:99px;background:#27272a;overflow:hidden}
.fx-parte-barra u{display:block;height:100%;border-radius:99px;text-decoration:none;
  background:linear-gradient(90deg,#38bdf8,#10b981);transition:width .9s cubic-bezier(.22,.8,.2,1)}
.fx-partes li > small{display:block;margin-top:4px;font-size:11.5px;color:var(--fx-fraco)}

/* balao */
.fx-tip{
  position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .12s;
  min-width:176px;max-width:270px;padding:10px 12px;border-radius:12px;
  background:rgba(9,9,11,.95);border:1px solid #3f3f46;color:#fafafa;font-size:12.5px;
  box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);will-change:transform;
}
.fx-tip.on{opacity:1}
.fx-tip-t{font-weight:700;font-size:13px;margin-bottom:6px}
.fx-tip-t em{font-style:normal;font-weight:600;font-size:11px;color:#38bdf8;margin-left:6px}
.fx-tip-l{display:flex;align-items:center;gap:7px;padding:2px 0;color:#a1a1aa}
.fx-tip-l i{width:8px;height:8px;border-radius:50%;flex:none}
.fx-tip-l span{flex:1}
.fx-tip-l b{color:#fafafa;font-variant-numeric:tabular-nums}

/* ---------------- tabela ---------------- */
.fx-tabela{padding:18px 18px 14px}
#fx-tab-resumo .e,.fx-tab .e{color:#34d399}
#fx-tab-resumo .s,.fx-tab .s{color:#fb7185}
.fx-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.fx-filtros select,.fx-filtros input[type=date]{width:auto;flex:0 1 auto;min-width:0}
.fx-filtros select,.fx-filtros input[type=date],.fx-tab select,.fx-tab input{
  background:rgba(255,255,255,.04);border:1px solid var(--fx-linha);border-radius:10px;
  color:var(--fx-txt);font:inherit;font-size:13px;padding:8px 10px;
  transition:border-color .15s,background .15s;
}
.fx-filtros select:hover,.fx-filtros input:hover,.fx-tab select:hover,.fx-tab input:hover{border-color:var(--fx-linha-forte)}
.fx-filtros select option,.fx-tab select option{background:#18181b;color:#fafafa}
.fx-busca{
  flex:1 1 250px;display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--fx-fraco);
  background:rgba(255,255,255,.04);border:1px solid var(--fx-linha);border-radius:10px;
}
.fx-busca:focus-within{border-color:var(--fx-p)}
.fx-busca svg{width:16px;height:16px;flex:none}
.fx-busca input{flex:1;min-width:0;border:0;background:transparent;padding:8px 0;color:var(--fx-txt);font:inherit;font-size:13px;outline:none}
.fx-data{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fx-suave)}
.fx-rolagem{overflow-x:auto}
.fx-tab{width:100%;min-width:780px;border-collapse:collapse;font-size:13.5px}
.fx-tab th{
  text-align:left;padding:8px 10px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fx-fraco);border-bottom:1px solid var(--fx-linha);white-space:nowrap;
}
.fx-tab th.num,.fx-tab td.num{text-align:right}
.fx-tab td{padding:7px 10px;border-bottom:1px solid rgba(39,39,42,.75);vertical-align:middle}
.fx-tab tbody tr{transition:background .12s}
.fx-tab tbody tr:hover{background:rgba(255,255,255,.035)}
.fx-tab td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.fx-ord{
  border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;
  cursor:pointer;padding:0;display:inline-flex;gap:5px;align-items:center;
}
.fx-ord:hover{color:var(--fx-txt)}
.fx-ord[data-sentido="asc"]::after{content:"▲";font-size:8px}
.fx-ord[data-sentido="desc"]::after{content:"▼";font-size:8px}
.fx-t-data{white-space:nowrap;color:var(--fx-suave);font-variant-numeric:tabular-nums}
.fx-t-desc{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-t-desc small{display:block;font-size:11px;color:var(--fx-fraco);overflow:hidden;text-overflow:ellipsis}
.fx-cat{max-width:200px;width:100%;padding:5px 8px !important;font-size:12.5px !important}
.fx-cat.sem{border-color:rgba(245,158,11,.5) !important;color:#fbbf24 !important}
.fx-conc{display:flex;gap:6px;align-items:center}
.fx-conc-b{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--fx-linha-forte);color:var(--fx-suave);font:inherit;font-size:12px;
  transition:background .18s,border-color .18s,color .18s,transform .12s;
}
.fx-conc-b svg{width:13px;height:13px;opacity:.5}
.fx-conc-b:active{transform:scale(.94)}
.fx-conc-b[aria-pressed="true"]{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.55);color:#6ee7b7}
.fx-conc-b[aria-pressed="true"] svg{opacity:1}
.fx-conc-b:disabled{cursor:default}
.fx-tag{width:94px;padding:5px 8px !important;font-size:12px !important}
.fx-t-acao{width:34px;text-align:right}
.fx-lixo{border:0;background:transparent;color:var(--fx-fraco);cursor:pointer;padding:5px;border-radius:8px;display:grid;place-items:center;
  opacity:.55;transition:color .15s,background .15s,opacity .15s}
.fx-lixo svg{width:16px;height:16px}
.fx-tab tr:hover .fx-lixo{opacity:1}
.fx-lixo:hover{color:#fb7185;background:rgba(244,63,94,.12)}
.fx-tab-vazio{text-align:center;color:var(--fx-fraco);padding:28px 10px !important}
.fx-mais{display:flex;justify-content:center;padding-top:12px}

/* ---------------- vazio ---------------- */
.fx-vazio-geral{display:grid;justify-items:center;gap:10px;text-align:center;padding:52px 20px}
.fx-vazio-arte svg{width:150px;height:auto}
.fx-vazio-geral h2{font-size:21px;font-weight:700;font-family:var(--font-display)}
.fx-vazio-geral p{margin:0;max-width:520px;color:var(--fx-suave);font-size:14px;line-height:1.55}
.fx-vazio-acoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* ---------------- janelas (importar / ajustes) ----------------
   Estas seguem o tema do CRM; so a mesa de controle e sempre escura. */
.fx-m{display:flex;flex-direction:column;gap:12px}
.fx-m-campo{display:grid;gap:5px;font-size:13px;margin:0}
.fx-m-campo > span{font-weight:600;color:var(--fg-soft)}
.fx-m-campo small,.fx-m-dica{font-size:12px;color:var(--fg-faint);margin:0;line-height:1.45}
.fx-m-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start}
.fx-m-sub{font-size:14px;margin:6px 0 0}
.fx-solta{
  display:grid;justify-items:center;gap:5px;text-align:center;padding:30px 16px;cursor:pointer;
  border:1.5px dashed var(--line-strong);border-radius:14px;color:var(--fg-soft);
  transition:border-color .15s,background .15s;
}
.fx-solta svg{width:30px;height:30px;color:var(--accent)}
.fx-solta b{font-size:15px;color:var(--fg)}
.fx-solta span{font-size:12.5px;color:var(--fg-faint)}
.fx-solta:hover,.fx-solta.sobre{border-color:var(--line-strong);background:var(--panel-2)}
.fx-solta.lendo{opacity:.55;pointer-events:none}
.fx-m-aviso{margin:0;padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.45;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.45);color:var(--fg)}
.fx-m-arq{margin:0;font-size:13.5px}
.fx-m-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fx-m-col{display:grid;gap:4px;font-size:12px;color:var(--fg-faint)}
.fx-m-col select{width:100%}
.fx-m-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:2px 0 6px}
.fx-m-nums div{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line)}
.fx-m-nums b{font-size:15px;font-variant-numeric:tabular-nums}
.fx-m-nums span{font-size:11.5px;color:var(--fg-faint)}
.fx-m .e{color:#0b7d6e}
.fx-m .s{color:#be123c}
:root[data-tema="escuro"] .fx-m .e{color:#34d399}
:root[data-tema="escuro"] .fx-m .s{color:#fb7185}
.fx-m-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.fx-m-tab th{text-align:left;padding:6px 8px;color:var(--fg-faint);font-weight:600;border-bottom:1px solid var(--line)}
.fx-m-tab td{padding:6px 8px;border-bottom:1px solid var(--line)}
.fx-m-tab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-m-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fx-m-lista li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;
  padding:7px 10px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line)}
.fx-m-lista li.vazio{color:var(--fg-faint);justify-content:center;background:transparent;border-style:dashed}
.fx-m-x{border:0;background:transparent;color:var(--fg-faint);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.fx-m-x:hover{color:var(--st-perdido)}
.fx-m-novaregra{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fx-m-novaregra input,.fx-m-novaregra select{flex:1 1 180px;width:auto;min-width:0}
.fx-m-novaregra .fx-botao{flex:0 0 auto}
.fx-m .fx-botao.fantasma{background:transparent;border-color:var(--line-strong);color:var(--fg)}
.fx-m .fx-botao.fantasma:hover{background:var(--panel-2)}
.fx-m .fx-botao.perigo{color:var(--st-perdido);border-color:var(--st-perdido)}

/* ---------------- telas menores ---------------- */
@media (max-width:1240px){
  .fx-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fx-grade2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .fx-grade3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .fx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-donut{grid-template-columns:minmax(0,1fr)}
  .fx-topo{align-items:flex-start}
}
@media (max-width:480px){
  .fx-kpis{grid-template-columns:minmax(0,1fr)}
  .fx-kpi-sub{max-width:calc(100% - 110px)}
  .fx-acoes{width:100%}
  .fx-acoes .fx-botao{flex:1 1 auto;justify-content:center}
}

/* Quem pede menos movimento recebe tudo parado e ja no lugar. */
@media (prefers-reduced-motion:reduce){
  .fx *,.fx *::before,.fx *::after{animation:none !important;transition:none !important}
  .fx .fx-linha,.fx .fx-seg path{stroke-dashoffset:0}
  .fx .fx-barra{transform:none}
  .fx .fx-area-preenche,.fx .fx-proj,.fx .fx-proj-preenche,.fx .fx-cenario{opacity:1}
}
.sem-movimento .fx-linha,.sem-movimento .fx-seg path{stroke-dashoffset:0}
.sem-movimento .fx-barra{transform:none}
.sem-movimento .fx-area-preenche,.sem-movimento .fx-proj,.sem-movimento .fx-proj-preenche,.sem-movimento .fx-cenario{opacity:1}


/* ============================================================
   GESTAO DOS CRMs (Perfil > Meus CRMs > Gerenciar)

   Quem administra os CRMs de cliente: dados da empresa, plano e contas
   avulsas, membros, desativar. As classes `.crm-*` ja existiam para a
   lista; aqui entram as da janela de gestao e da lista de quem
   administra.
   ============================================================ */

.selo.desativado{background:rgba(190,18,60,.12);color:#be123c}
:root[data-tema="escuro"] .selo.desativado{background:rgba(251,113,133,.16);color:#fb7185}
.crm-pago{color:var(--fg-faint)}
.crm-pago.vencido{color:#be123c;font-weight:600}
:root[data-tema="escuro"] .crm-pago.vencido{color:#fb7185}

/* ---------------- quem administra os CRMs ---------------- */
.crm-admins{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.crm-admins h4{margin:0 0 4px;font-size:14px}
.crm-admins-nota{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--fg-faint)}
.crm-admins-lista{display:flex;flex-direction:column;gap:2px}
.crm-admin-linha{
  display:flex;align-items:center;gap:9px;padding:6px 0;min-width:0;cursor:pointer;
}
.crm-admin-linha .crm-quem{flex:1 1 auto;min-width:0}
.crm-chave-entrada{position:absolute;opacity:0;width:1px;height:1px}
.crm-chave{
  position:relative;flex:0 0 auto;width:36px;height:20px;border-radius:99px;
  background:var(--panel-3);border:1px solid var(--line-strong);
  transition:background .18s,border-color .18s;
}
.crm-chave::after{
  content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;
  background:var(--fg-faint);transition:transform .2s var(--ease),background .18s;
}
.crm-chave-entrada:checked + .crm-chave{background:var(--accent-dim);border-color:var(--accent)}
.crm-chave-entrada:checked + .crm-chave::after{transform:translateX(16px);background:var(--accent)}
.crm-chave-entrada:focus-visible + .crm-chave{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- a janela "Gerenciar" ---------------- */
.gestao-abas{
  display:flex;gap:4px;margin:0 0 16px;padding:3px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto;
}
.gestao-abas button{
  border:0;background:transparent;color:var(--fg-soft);font:inherit;font-size:13px;font-weight:500;
  padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s;
}
.gestao-abas button:hover{color:var(--fg)}
.gestao-abas button[aria-pressed="true"]{background:var(--panel);color:var(--fg);font-weight:600;box-shadow:var(--sombra)}
.gestao-painel{min-height:260px}
.gestao-rodape{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.gestao-rodape small{color:var(--fg-faint);font-size:12px}
.gestao-rodape .botao{margin-left:auto}

.gestao-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0 4px}
.gestao-numero{display:grid;gap:5px;font-size:13px;margin:0}
.gestao-numero > span{font-weight:600;color:var(--fg-soft)}
.gestao-numero small{font-size:12px;color:var(--fg-faint)}
.gestao-numero input{width:100%}
.gestao-passo{display:flex;gap:6px;align-items:stretch}
.gestao-passo input{text-align:center;flex:1 1 auto;min-width:0}
.gestao-passo .botao{padding:0 14px;font-size:18px;line-height:1}
.gestao-resumo{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--panel-2);
  border:1px solid var(--line);font-size:13px;color:var(--fg-soft)}
.plano-cartao[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim)}

.gestao-membros-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-size:13px}
.gestao-membros{display:flex;flex-direction:column;gap:2px}
.gestao-membro{
  display:flex;align-items:center;gap:10px;padding:9px 0;min-width:0;
  border-bottom:1px solid var(--line);
}
.gestao-membro:last-child{border-bottom:0}
.gestao-membro .crm-quem{flex:1 1 auto;min-width:0}
.gestao-membro.desligado .crm-quem,.gestao-membro.desligado .avatar{opacity:.5}
.gestao-papel{width:auto;min-width:0;padding:5px 8px;font-size:12.5px}
.gestao-membro .crm-fim{flex-wrap:wrap;justify-content:flex-end}
.gestao-acesso p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--fg-soft)}
@media (max-width:640px){
  .gestao-membro{flex-wrap:wrap}
  .gestao-membro .crm-fim{width:100%;justify-content:flex-start}
}

/* CRM desativado: o nome e o avatar esmaecem, mas os botoes NAO -- "Gerenciar"
   e justamente o que reativa, e parecer desligado esconderia isso. */
.crm-linha.suspenso{opacity:1}
.crm-linha.suspenso .avatar,.crm-linha.suspenso .crm-quem{opacity:.6}


/* ---- segurança (duas etapas), pagamentos e cópias ---- */
.seg,.pg{display:flex;flex-direction:column;gap:12px}
.seg-nota,.pg-nota{margin:0;font-size:13.5px;line-height:1.55;color:var(--fg-soft)}
.seg-alerta,.pg-alerta{color:var(--vermelho,#b3261e)}
.seg-campo{display:flex;flex-direction:column;gap:5px;font-size:13px}
.seg-campo>span{color:var(--fg-faint)}
.seg-campo input,.seg-campo textarea,.pg-copia{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--line);border-radius:var(--raio);background:var(--panel-2);color:inherit;font:inherit}
.seg-erro{color:var(--vermelho,#b3261e);font-size:12.5px}
.seg-qr{display:flex;justify-content:center;padding:6px 0}
.seg-qr svg{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
.seg-chave{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg-chave code,.seg-codigos code{font:600 14px ui-monospace,Consolas,monospace;letter-spacing:.06em;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:6px 9px}
.seg-codigos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.seg-codigos code{text-align:center}
.seg-botoes,.pg-botoes,.pg-acoes{display:flex;gap:8px;flex-wrap:wrap}
.seg-aceite{display:flex;align-items:center;gap:8px;font-size:13.5px}
.seg-selo{display:inline-block;padding:2px 9px;border-radius:99px;background:#1f7a3f;color:#fff;font-size:12px;font-weight:600;margin-right:6px}
.pg-card{border:1px solid var(--line);border-radius:var(--raio);padding:12px 14px;background:var(--panel-2);display:flex;flex-direction:column;gap:6px}
.pg-card.pg-vencida{border-color:var(--vermelho,#b3261e)}
.pg-card.pg-paga{opacity:.75}
.pg-topo{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pg-valor{font-weight:700;white-space:nowrap}
.pg-meta{font-size:12.5px;color:var(--fg-faint)}
.pg-vencida .pg-sel{color:var(--vermelho,#b3261e);font-weight:600}
.pg-copia{font:12px ui-monospace,Consolas,monospace;resize:none}
.crm-copia{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;font-size:13px;border-bottom:1px solid var(--line)}
.crm-copia small{color:var(--fg-faint)}
@media print{.seg-botoes,.seg-aceite{display:none}}


/* ============================================================
   LOTE 2: leads esfriando, busca no meio, links rapidos, arvore
   ============================================================ */

/* Lead esfriando: so uma barra vertical fina (4px) na borda esquerda da
   linha ou do card. O resto fica limpo e legivel. Frio = vermelho cheio;
   morno = o mesmo vermelho, mais suave. */
.card.esfriando,
tr.esfriando > td:first-child{box-shadow:inset 4px 0 0 rgba(220,38,38,.5)}
.card.esfriando-frio,
tr.esfriando-frio > td:first-child{box-shadow:inset 4px 0 0 #dc2626}

/* O campo de procura fica no meio do topo. */
.topo-meio{justify-content:center}

/* Links rapidos: cartoes pequenos, com o verde da eixo no hover. */
.grade-links{
  gap:8px;background:transparent;padding:12px;
}
.link-caixa{
  background:var(--panel-2);border:1px solid var(--line);border-radius:11px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease);
}
.link-caixa:hover{border-color:var(--line-strong);background:var(--panel)}
.link-rapido{padding:10px 11px;border-radius:11px;gap:9px}
.link-rapido:hover{background:transparent}
.link-rapido .ponto{width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--cor,var(--st-neutro)) 20%,transparent)}
.link-rapido .conta-n{
  background:var(--panel);border:1px solid var(--line);border-radius:99px;
  padding:1px 8px;min-width:24px;text-align:center;font-weight:600;color:var(--fg-soft);
}
.link-rapido.vazio .nome{color:var(--fg-soft);font-weight:400}
.link-rapido.vazio .conta-n{color:var(--fg-faint);font-weight:400}

/* Conta pai e filiais */
.arvore-conta .arvore-vazia{margin:0;font-size:13.5px;color:var(--fg-faint);line-height:1.55}
.arvore,.arvore ul{list-style:none;margin:0;padding:0}
.arvore ul{margin-left:14px;padding-left:12px;border-left:1px dashed var(--line-strong)}
.arvore li{margin:4px 0}
.arvore-no{
  display:flex;flex-direction:column;gap:1px;padding:7px 10px;border-radius:9px;
  border:1px solid transparent;text-decoration:none;color:inherit;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
a.arvore-no:hover{background:var(--panel-2);border-color:var(--line-strong)}
.arvore-no.atual{background:var(--accent-dim);border-color:var(--accent)}
.arvore-nome{font-weight:600;font-size:13.5px}
.arvore-no small{color:var(--fg-faint);font-size:12px}
.arvore-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.arvore-busca{width:100%;box-sizing:border-box;padding:9px 10px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--raio);background:var(--panel-2);color:inherit;font:inherit}
.arvore-escolha{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto}
.arvore-opcao{text-align:left;display:flex;flex-direction:column;gap:1px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:inherit;font:inherit;cursor:pointer}
.arvore-opcao:hover{border-color:var(--line-strong);background:var(--panel)}
.arvore-opcao small{color:var(--fg-faint)}


/* ---- cartoes: nome comprido nao vaza da caixa ---- */
.card{min-width:0;max-width:100%;overflow:hidden}
.card h3{overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.card .valor,.card .linha{min-width:0;overflow-wrap:anywhere}
.card .linha .selo{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coluna .cards,.coluna .corpo,.coluna > div{min-width:0}

.coluna-cards{min-width:0}

/* ---- varios produtos num seletor compacto ---- */
.lk-extras{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
.lk-chips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.lk-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 4px 3px 10px;border:1px solid var(--line);border-radius:99px;background:var(--panel-2);font-size:12.5px}
.lk-chip > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.lk-chip button{border:0;background:transparent;color:var(--fg-faint);cursor:pointer;font-size:15px;line-height:1;padding:0 5px}
.lk-chip button:hover{color:var(--st-perdido)}
.lk-mais{border:1px dashed var(--line-strong);background:transparent;color:var(--accent-forte);border-radius:99px;padding:3px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.lk-mais:hover{border-color:var(--line-strong);background:var(--panel-2)}
.lk-pop{position:absolute;left:0;top:calc(100% + 4px);z-index:60;width:min(340px,100%);background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--raio);box-shadow:var(--sombra-alta);padding:8px}
.lk-pop input{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:inherit;font:inherit;font-size:13px;margin-bottom:6px}
.lk-pop-lista{max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.lk-pop-lista button{display:flex;justify-content:space-between;gap:10px;text-align:left;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;padding:7px 8px;border-radius:7px;cursor:pointer}
.lk-pop-lista button:hover{background:var(--panel-2)}
.lk-pop-lista em{font-style:normal;color:var(--fg-faint);font-size:12px;white-space:nowrap}
.lk-pop-vazio{margin:0;padding:6px 8px;color:var(--fg-faint);font-size:12.5px}

/* ---- tarefas delegadas ---- */
.deleg{margin:14px 0 4px;border:1px solid var(--line);border-radius:var(--raio);background:var(--panel-2)}
.deleg > summary{cursor:pointer;padding:9px 12px;font-size:13px;font-weight:600;color:var(--fg-soft);list-style:none}
.deleg > summary::-webkit-details-marker{display:none}
.deleg > summary::before{content:'▸';display:inline-block;margin-right:7px;transition:transform .15s var(--ease)}
.deleg[open] > summary::before{transform:rotate(90deg)}
.deleg-linhas{display:flex;flex-direction:column;gap:6px;padding:0 12px 6px}
.deleg-linha{display:grid;grid-template-columns:130px minmax(0,1fr) 28px;gap:6px}
.deleg-linha select,.deleg-linha input{padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit;font:inherit;font-size:13px;min-width:0}
.deleg-x{border:0;background:transparent;color:var(--fg-faint);font-size:18px;cursor:pointer}
.deleg-x:hover{color:var(--st-perdido)}
.deleg > .botao{margin:0 12px 12px}
@media (max-width:560px){.deleg-linha{grid-template-columns:1fr 28px}.deleg-linha select{grid-column:1/2}.deleg-linha input{grid-column:1/2}}

/* ---- metricas na aprovacao ---- */
.aprova-metricas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.aprova-metricas > div{border:1px solid var(--line);border-radius:var(--raio);padding:8px 11px;background:var(--panel-2)}
.aprova-metricas .largo{grid-column:1/-1}
.aprova-metricas dt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);font-weight:600}
.aprova-metricas dd{margin:2px 0 0;font-size:14px;font-weight:600}

/* ---- historico no hub ---- */
.hub-sub{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--fg-faint);margin:16px 0 8px;font-weight:600}
.hub-casos{display:flex;flex-direction:column;gap:6px}
.hub-caso{display:flex;flex-direction:column;gap:1px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:inherit}
.hub-caso:hover{border-color:var(--line-strong)}
.hub-caso small{color:var(--fg-faint)}


/* ---- a cor da linha de vida, quando o desenvolvedor escolhe uma ---- */
.path.com-vida .path-passo.feita{background:var(--vida);color:#fff;opacity:.8}
.path.com-vida .path-passo.atual{background:var(--vida);color:#fff;opacity:1;box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--vida)}


/* ============================================================
   LOTE 4: menu que abre ao passar o mouse, luz verde, retorno
   ============================================================ */

/* A posicao vertical do menu (arrastavel pelo titulo). */
.lateral{
  margin-top:var(--menu-y,0px);
  height:calc(var(--tela) - var(--topo) - var(--menu-y,0px));
  top:calc(var(--topo) + var(--menu-y,0px));
  width:100%;
  transition:width .24s var(--ease),margin-left .24s var(--ease),box-shadow .24s var(--ease);
}
.lateral.movendo{transition:none;user-select:none}
.menu-alca{cursor:grab;touch-action:none}
.lateral.movendo .menu-alca{cursor:grabbing}

/* Solto (recolhido): ao passar o mouse, abre por cima do conteudo, sem
   empurrar a pagina. */
:root[data-menu="recolhido"] .lateral.expandido{
  width:196px;margin-left:-134px;z-index:35;
  padding:12px 10px;
  box-shadow:-18px 0 38px -22px rgba(0,0,0,.38);
}
:root[data-menu="recolhido"] .lateral.expandido h2,
:root[data-menu="recolhido"] .lateral.expandido .rotulo,
:root[data-menu="recolhido"] .lateral.expandido .n,
:root[data-menu="recolhido"] .lateral.expandido .rodape{display:revert}
:root[data-menu="recolhido"] .lateral.expandido .pino{display:grid}
:root[data-menu="recolhido"] .lateral.expandido a{justify-content:flex-start;padding:7px 9px}
:root[data-menu="recolhido"] .lateral.expandido .lateral-topo{justify-content:flex-start;padding:0 6px 10px;border-bottom:1px solid var(--line)}
:root[data-menu="recolhido"] .lateral.expandido .rotulo,
:root[data-menu="recolhido"] .lateral.expandido h2,
:root[data-menu="recolhido"] .lateral.expandido .n{animation:menu-texto .22s var(--ease) both}
@keyframes menu-texto{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}

@media (max-width:1040px){
  .lateral{margin-top:0;height:auto;top:auto;width:auto}
  .menu-alca{cursor:default}
}
@media (prefers-reduced-motion:reduce){
  .lateral{transition:none}
  :root[data-menu="recolhido"] .lateral.expandido .rotulo,
  :root[data-menu="recolhido"] .lateral.expandido h2,
  :root[data-menu="recolhido"] .lateral.expandido .n{animation:none}
}

/* Luz verde: brilho que segue o cursor dentro do elemento. */
/* So nos itens do menu lateral. */
.lateral a.luz::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .18s var(--ease);
  background:radial-gradient(110px circle at var(--lx,50%) var(--ly,50%),rgba(47,214,189,.24),rgba(47,214,189,0) 70%);
}
.lateral a.luz.luz-on::after{opacity:1}

/* O pop-up de retorno */
.retorno p{margin:0 0 12px;font-size:14.5px;line-height:1.55}
.retorno-opcoes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.retorno-opcoes .botao[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-forte)}
.retorno textarea{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--line);border-radius:var(--raio);background:var(--panel-2);color:inherit;font:inherit}

/* Agenda do mes: so o nome da tarefa e o responsavel. */
.cal-dia .tarefa.so-nome{flex-direction:column;align-items:flex-start;gap:1px;padding-top:4px;padding-bottom:4px}
.cal-dia .tarefa.so-nome .titulo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:600}
.cal-dia .tarefa.so-nome .resp{font-size:11px;color:var(--fg-faint);line-height:1.2}


/* ============================================================
   FLUXO: previsao pelas oportunidades, barra flutuante, maximizar
   ============================================================ */

.fx-cartao-previsao{margin-top:14px}
.fx-prev-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:2px 0 10px}
.fx-prev-kpis > div{border:1px solid var(--line);border-radius:var(--raio);padding:9px 12px;background:var(--panel-2)}
.fx-prev-kpis span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);font-weight:600}
.fx-prev-kpis b{display:block;margin-top:2px;font-size:16px}
@media (max-width:760px){.fx-prev-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fx-barra-n{fill:none}

/* A barra branca que acompanha a rolagem, no meio da tela. */
.fx-flutua{
  position:fixed;left:50%;top:calc(var(--topo) + 10px);transform:translateX(-50%);
  z-index:55;display:flex;gap:6px;align-items:stretch;
  max-width:calc(100vw - 24px);overflow:hidden;
  background:#fff;color:#18181b;border:1px solid rgba(0,0,0,.08);border-radius:99px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.35);padding:7px 10px;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.fx-flutua.on{opacity:1;pointer-events:auto}
.fx-flutua[hidden]{display:none}
.fx-flutua > span{display:flex;flex-direction:column;padding:0 12px;border-right:1px solid #e4e4e7;white-space:nowrap;line-height:1.25}
.fx-flutua > span:last-child{border-right:0}
.fx-flutua small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#71717a;font-weight:600}
.fx-flutua b{font-size:14px;font-variant-numeric:tabular-nums}
.fx-flutua b.ruim{color:#dc2626}
.fx-flutua b.bom{color:#0e9c89}
@media (max-width:760px){.fx-flutua{border-radius:14px;flex-wrap:wrap;justify-content:center}.fx-flutua > span{padding:2px 8px}}

/* Maximizado: cobre a tela inteira, por cima do menu e do topo. */
.fx.fx-max{
  position:fixed;inset:0;z-index:70;overflow:auto;
  background:var(--bg,var(--panel));padding:20px clamp(14px,3vw,36px) 40px;
}
.fx-travado,.fx-travado body{overflow:hidden}
.fx.fx-max ~ *{display:none}

.fx-travado .fx-flutua{z-index:80;top:10px}

.crm-retorno{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.crm-retorno > summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--fg-soft)}
.crm-retorno-item{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.crm-retorno-item p{margin:4px 0 0;color:var(--fg-soft)}
.crm-ret-nao > b{color:var(--st-perdido)}
.crm-ret-sim > b{color:var(--st-ganho)}

/* A barra é só informativa: nunca deve interceptar o mouse nos gráficos. */
.fx-flutua,.fx-flutua.on{pointer-events:none}


/* ============================================================
   CASOS: selo vermelho no menu e a arvore Casos > Origem > Motivo
   ============================================================ */

.lateral a .n.vermelho{
  background:#dc2626;color:#fff;font-weight:700;border-radius:99px;
  min-width:20px;padding:1px 7px;text-align:center;font-size:11.5px;line-height:1.5;
  box-shadow:0 0 0 2px var(--panel);
}
:root[data-menu="recolhido"] .lateral:not(.expandido) a .n.vermelho{
  display:block;position:absolute;top:2px;right:6px;min-width:17px;padding:0 5px;font-size:10px;margin:0;
}

.arvore-casos{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--raio);background:var(--panel)}
.arvore-trilha{font-size:13px;color:var(--fg-faint);margin-bottom:8px}
.arvore-nivel{border:0;background:transparent;color:var(--fg-soft);font:inherit;font-weight:600;cursor:pointer;padding:2px 4px;border-radius:6px}
.arvore-nivel:hover{background:var(--panel-2)}
.arvore-nivel.atual{color:var(--fg)}
.arvore-ramos{display:flex;gap:8px;flex-wrap:wrap}
.arvore-ramo{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:var(--panel-2);color:inherit;font:inherit;font-size:13px;cursor:pointer}
.arvore-ramo:hover{border-color:var(--line-strong);background:var(--panel)}
.arvore-ramo.ativo{border-color:var(--fg-soft);font-weight:600}
.arvore-n{font-style:normal;font-weight:700;font-size:11.5px;min-width:19px;text-align:center;padding:1px 6px;border-radius:99px;background:#dc2626;color:#fff}

/* Sino: marcar um aviso como lido, sem sair do painel. */
.sino-ler{display:inline-block;margin-top:5px;padding:2px 9px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--fg-soft);font:inherit;font-size:11.5px;cursor:pointer}
.sino-ler:hover{border-color:var(--line-strong);color:var(--fg)}


/* ---- texto longo nos cartoes do Planner ---- */
.card-detalhe{
  margin:4px 0 0;padding-left:7px;font-size:12px;line-height:1.45;color:var(--fg-soft);
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card-mais{
  display:inline-block;margin:5px 0 0 7px;font-size:11.5px;font-weight:600;color:var(--fg-soft);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;border-radius:4px;
}
.card-mais:hover{color:var(--fg)}
.card.lido-inteiro h3{display:block;-webkit-line-clamp:unset;overflow:visible}
.card.lido-inteiro .card-detalhe{display:block;-webkit-line-clamp:unset;overflow:visible}
.tarefa .titulo{overflow-wrap:anywhere}
.cal-lista .tarefa .titulo{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}

/* O estado do salvamento automatico da tarefa. */
.autosave{font-size:12px;color:var(--fg-faint);margin-right:8px;white-space:nowrap;align-self:center}


/* ============================================================
   MAIS (plugins) e RECURSOS POR PLANO
   ============================================================ */

.mais{max-width:1100px;margin:0 auto;padding:22px 18px 40px}
.mais-topo h1{margin:0 0 4px;font-size:24px;letter-spacing:-.02em}
.mais-topo p{margin:0 0 18px;color:var(--fg-soft);line-height:1.55}
.mais-aviso{margin:0 0 16px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--raio);background:var(--panel-2)}
.mais-sub{margin:26px 0 12px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--fg-faint);font-weight:700}
.mais-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.mais-grade.compacta{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.mais-cartao{display:flex;flex-direction:column;gap:8px;padding:15px 16px;border:1px solid var(--line);border-radius:var(--raio);background:var(--panel)}
.mais-cartao.destaque{border-color:var(--fg-soft);box-shadow:0 0 0 3px var(--panel-2)}
.mais-cartao.incluso{background:var(--panel-2)}
.mais-cartao header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mais-cartao h3{margin:0;font-size:15px;line-height:1.3}
.mais-cartao p{margin:0;font-size:13.5px;color:var(--fg-soft);line-height:1.5}
.mais-cartao ul{margin:0;padding-left:18px;font-size:13px;color:var(--fg-soft);line-height:1.55}
.mais-selo{flex:0 0 auto;padding:2px 9px;border-radius:99px;border:1px solid var(--line);font-size:11px;font-weight:600;color:var(--fg-faint);white-space:nowrap}
.mais-selo.ok{color:var(--st-ganho);border-color:var(--st-ganho)}
.mais-cartao footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.mais-preco{font-size:12.5px;color:var(--fg-faint);margin-right:auto}
.mais-vazio{color:var(--fg-faint)}

.recursos-titulo{margin:16px 0 4px;font-size:14px}
.recursos-nivel{margin:12px 0 6px;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--fg-faint)}
.recursos-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.recursos-item{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);cursor:pointer}
.recursos-item span{display:flex;flex-direction:column;gap:1px;min-width:0}
.recursos-item small{color:var(--fg-faint);font-size:12px;line-height:1.35}
.recursos-gerenciar{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

/* ===== Coluna do quadro: os cards ficam DENTRO dela, com rolagem propria ===== */
/* Sem isto, num flex em coluna os cards encolhem (flex-shrink) quando a
   coluna enche, e se amassam uns nos outros. Cada card guarda a altura
   que tem; quem rola e a lista. */
.coluna{min-height:160px;overflow:hidden}
.coluna-topo,.coluna-fim{flex:0 0 auto}
.coluna-cards{
  flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scroll-behavior:smooth;
  scrollbar-gutter:stable;
}
.coluna-cards > *{flex-shrink:0}
.coluna-cards::-webkit-scrollbar{width:8px}
.coluna-cards::-webkit-scrollbar-track{background:transparent}
.coluna-cards::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:99px;border:2px solid transparent;background-clip:padding-box;
}
.coluna-cards::-webkit-scrollbar-thumb:hover{background:var(--fg-faint);background-clip:padding-box;border:2px solid transparent}

/* Contagem e limite no topo da coluna */
.coluna-topo .contagem.cheia{color:var(--st-perdido);font-weight:600}
.limite-col{width:64px;height:30px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--fg);font:inherit;font-size:12.5px;padding:0 6px;text-align:center}

/* Alerta no meio da tela */
.alerta-centro{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);
  animation:alertaFundo .16s ease-out;
}
.alerta-centro-caixa{
  width:min(440px,100%);background:var(--panel);color:var(--fg);
  border:1px solid var(--line);border-top:4px solid var(--st-perdido);
  border-radius:16px;padding:26px 24px 22px;text-align:center;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45);animation:alertaCaixa .2s ease-out;
}
.alerta-centro-icone{display:inline-flex;width:48px;height:48px;border-radius:99px;
  align-items:center;justify-content:center;color:var(--st-perdido);
  background:color-mix(in srgb,var(--st-perdido) 14%,transparent);margin-bottom:12px}
.alerta-centro-icone svg{width:26px;height:26px}
.alerta-centro-caixa h2{font-size:18px;margin:0 0 8px;font-weight:700}
.alerta-centro-caixa p{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--fg-soft)}
@keyframes alertaFundo{from{opacity:0}to{opacity:1}}
@keyframes alertaCaixa{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.alerta-centro,.alerta-centro-caixa{animation:none}.coluna-cards{scroll-behavior:auto}}

/* ===== Mais: abas e a loja de plugins (sempre escura, com vidro) ===== */
.mais-titulo{font-size:26px;font-weight:700;margin:6px 0 14px;letter-spacing:-.02em}
.mais-abas{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.mais-abas button{
  background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;margin-bottom:-1px;
  font:inherit;font-size:14.5px;color:var(--fg-faint);cursor:pointer;
}
.mais-abas button:hover{color:var(--fg)}
.mais-abas button.on{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}
.mais-corpo.modulos .mais-topo h1{display:none}

.loja{
  background:#09090b;color:#e4e4e7;border-radius:20px;padding:30px 26px 34px;
  border:1px solid rgba(255,255,255,.06);
}
.loja-topo h2{font-size:24px;font-weight:700;letter-spacing:-.02em;color:#fafafa;margin:0 0 6px}
.loja-topo p{color:#a1a1aa;font-size:14.5px;max-width:640px;margin:0 0 24px}
.loja-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.loja-vazio{color:#a1a1aa;font-size:14px;grid-column:1/-1}

.loja-card{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px 18px;
  background:rgba(24,24,27,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;
  opacity:0;transform:translateY(14px);animation:lojaEntra .55s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--i,0) * 70ms);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.loja-card:hover{transform:translateY(-4px);border-color:rgba(122,167,255,.45);box-shadow:0 18px 40px -14px rgba(37,99,235,.35)}
.loja-card.ativo{border-color:rgba(52,211,153,.35)}
.loja-linha1{display:flex;align-items:center;justify-content:space-between}
.loja-icone{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:#93b4ff;background:rgba(37,99,235,.14);border:1px solid rgba(147,180,255,.2);
}
.loja-icone.peq{width:30px;height:30px;border-radius:9px}
.loja-selo{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.loja-selo.disp{color:#93b4ff;background:rgba(37,99,235,.14)}
.loja-selo.breve{color:#fbbf24;background:rgba(251,191,36,.12)}
.loja-selo.espera{color:#fbbf24;background:rgba(251,191,36,.12)}
.loja-selo.ativo{color:#34d399;background:rgba(52,211,153,.14)}
.loja-selo.pausado{color:#a1a1aa;background:rgba(161,161,170,.14)}
.loja-meta{display:flex;gap:10px;font-size:12px;color:#71717a}
.loja-card h3{font-size:18px;font-weight:700;color:#fafafa;letter-spacing:-.01em;margin:0}
.loja-card p{font-size:14px;line-height:1.55;color:#a1a1aa;margin:0}
.loja-card ul{list-style:none;padding:0;margin:2px 0 0;display:grid;gap:5px}
.loja-card li{font-size:13px;color:#d4d4d8;padding-left:18px;position:relative}
.loja-card li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;background:#93b4ff;border-radius:2px}
.loja-pe{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;position:relative;min-height:56px}
.loja-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
  border-radius:11px;border:0;font:inherit;font-weight:600;font-size:14px;cursor:pointer;color:#fff;
  background:#2563eb;transition:background .18s,transform .18s,box-shadow .18s;
}
.loja-btn:hover:not(:disabled){background:#1d4ed8;transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(37,99,235,.7)}
.loja-btn:disabled{cursor:progress;background:#1e3a8a}
.loja-preco{font-size:12.5px;color:#71717a}
.loja-espera{font-size:13px;color:#fbbf24}
.loja-link{font-size:13px;color:#93b4ff;text-decoration:underline}
.loja-uso{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#a1a1aa}
.loja-uso b{color:#fafafa}
.loja-prefixo{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:#71717a}
.loja-chave-liga{display:inline-flex;align-items:center;gap:9px;margin-left:auto;cursor:pointer;font-size:13px;color:#d4d4d8}
.loja-chave-liga input{position:absolute;opacity:0;width:0;height:0}
.loja-trilho{width:40px;height:22px;border-radius:99px;background:#3f3f46;position:relative;transition:background .2s}
.loja-trilho::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:99px;background:#fff;transition:transform .2s}
.loja-chave-liga input:checked ~ .loja-trilho{background:#10b981}
.loja-chave-liga input:checked ~ .loja-trilho::after{transform:translateX(18px)}
.loja-chave-liga input:focus-visible ~ .loja-trilho{outline:2px solid #93b4ff;outline-offset:2px}
.loja-chave-liga input:disabled ~ .loja-trilho{opacity:.5}

/* instalando: roda + barra; liberado: check desenhado + brilho */
.loja-roda{width:16px;height:16px;border-radius:99px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:lojaGira .7s linear infinite}
.loja-progresso{position:absolute;left:0;right:0;bottom:-4px;height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.loja-progresso i{display:block;height:100%;width:0;background:#93b4ff;animation:lojaBarra 1.1s ease-out forwards}
.loja-ok{display:inline-flex;align-items:center;gap:8px;color:#34d399;font-weight:700;font-size:15px}
.loja-ok svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:lojaCheck .45s .05s ease-out forwards}
.loja-card.liberado{animation:lojaBrilho 1.4s ease-out;border-color:rgba(52,211,153,.7)}

.loja-sub{margin:30px 0 12px;font-size:16px;color:#fafafa}
.loja-painel{background:rgba(24,24,27,.6);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px 16px 8px;margin-bottom:14px}
.loja-painel header{display:flex;align-items:center;gap:10px;color:#fafafa;font-size:14px}
.plugin-quadro{display:block;width:100%;border:0;background:transparent;overflow:hidden}
.loja-grade.sem-anim .loja-card{animation:none;opacity:1;transform:none}
.loja-chave code{display:block;margin:12px 0;padding:12px;border-radius:10px;background:var(--panel-2);word-break:break-all;font-size:13px}

@keyframes lojaEntra{to{opacity:1;transform:none}}
@keyframes lojaGira{to{transform:rotate(360deg)}}
@keyframes lojaBarra{to{width:100%}}
@keyframes lojaCheck{to{stroke-dashoffset:0}}
@keyframes lojaBrilho{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}60%{box-shadow:0 0 0 14px rgba(52,211,153,0)}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){
  .loja-card{animation:none;opacity:1;transform:none}
  .loja-roda,.loja-progresso i,.loja-ok svg path,.loja-card.liberado{animation:none}
  .loja-progresso i{width:100%}.loja-ok svg path{stroke-dashoffset:0}
}
@media (max-width:640px){.loja{padding:22px 16px 26px;border-radius:16px}}

/* ===== Developer Hub ===== */
.hub{display:flex;flex-direction:column;gap:18px}
.hub-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hub-topo h1{font-size:26px;letter-spacing:-.02em;margin:0 0 4px}
.hub-topo p{color:var(--fg-soft);margin:0;font-size:14.5px}
.hub-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.hub-resumo div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.hub-resumo b{display:block;font-size:26px;font-family:var(--font-display);letter-spacing:-.02em}
.hub-resumo span{font-size:12.5px;color:var(--fg-faint)}
.hub-rolagem{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.hub-tabela{width:100%;border-collapse:collapse;font-size:14px;min-width:860px}
.hub-tabela th{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--fg-faint);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:600}
.hub-tabela td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.hub-tabela tr:last-child td{border-bottom:0}
.hub-tabela small{display:block;color:var(--fg-faint);font-size:12px}
.hub-tabela code{font-size:12px}
.hub-nome{display:flex;align-items:center;gap:10px}
.hub-nome .loja-icone{background:var(--panel-2);color:var(--fg-soft);border-color:var(--line)}
.hub-status{font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--panel-2);color:var(--fg-soft)}
.hub-status.publicado{background:color-mix(in srgb,var(--st-ganho) 16%,transparent);color:var(--st-ganho)}
.hub-status.desativado{background:color-mix(in srgb,var(--st-perdido) 14%,transparent);color:var(--st-perdido)}
.hub-breve{color:var(--st-aprovacao)}
.hub-acoes{text-align:right;white-space:nowrap}
.hub-expande td{background:var(--panel-2)}
.hub-clientes{display:grid;gap:8px}
.hub-cliente{display:grid;grid-template-columns:minmax(120px,1.3fr) 1.2fr .9fr .9fr auto auto;gap:12px;align-items:center;font-size:13.5px}
.hub-cliente-sit.ativo{color:var(--st-ganho);font-weight:600}
.hub-cliente-sit.solicitado{color:var(--st-aprovacao)}
.hub-cliente-sit.pausado{color:var(--fg-faint)}
.hub-prefixo{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--fg-faint)}
.hub-vazio{color:var(--fg-faint);font-size:13.5px}
.hub-liga{position:relative;display:inline-flex;cursor:pointer}
.hub-liga input{position:absolute;opacity:0;width:0;height:0}
.hub-trilho{width:42px;height:24px;border-radius:99px;background:var(--line-strong);position:relative;transition:background .18s}
.hub-trilho::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:99px;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.hub-liga input:checked ~ .hub-trilho{background:var(--st-ganho)}
.hub-liga input:checked ~ .hub-trilho::after{transform:translateX(18px)}
.hub-liga input:focus-visible ~ .hub-trilho{outline:2px solid var(--accent);outline-offset:2px}
.hub-liga input:disabled ~ .hub-trilho{opacity:.5}
.hub-editor .mais-abas{margin-bottom:14px}
.grade-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.grade-form .largo{grid-column:1/-1}
.hub-icone{display:flex;align-items:center;gap:10px}
.hub-icone .loja-icone{background:var(--panel-2);color:var(--fg-soft);border-color:var(--line);flex:0 0 auto}
.hub-icone select{flex:1}
.hub-ep{display:grid;grid-template-columns:1fr 92px 2fr auto;gap:8px;margin-bottom:8px}
.hub-nota{font-size:13px;color:var(--fg-soft);line-height:1.5}
.hub-nota code,.hub-pagina code{background:var(--panel-2);padding:1px 6px;border-radius:6px;font-size:12px}
.hub-escopo{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13.5px}
.hub-escopo small{display:block;color:var(--fg-faint);font-size:12px}
.hub-escopo input{margin-top:3px}
.hub-codigo{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;min-height:220px;white-space:pre;tab-size:2}
.hub-linha{display:flex;gap:8px}
.hub-pagina .loja-painel{background:#09090b;color:#e4e4e7}
@media (max-width:720px){.grade-form{grid-template-columns:1fr}.hub-ep{grid-template-columns:1fr}.hub-cliente{grid-template-columns:1fr 1fr}}
.loja-grade.sem-anim .loja-card:hover{transform:translateY(-4px)}

/* ===== Contrato: assinantes adicionais e link de assinatura ===== */
.assinantes{display:flex;flex-direction:column;gap:8px}
.assinantes-lista{display:grid;gap:8px}
.assinante-linha{display:grid;grid-template-columns:1.2fr 1fr 1.2fr auto;gap:8px;align-items:center}
.assinante-linha input{min-width:0}
.assinante-linha.assinado input{opacity:.7}
.assinante-ok{font-size:12px;font-weight:600;color:var(--st-ganho);white-space:nowrap}
.assinante-tirar{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--fg-faint);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.assinante-tirar:hover{color:var(--st-perdido);border-color:var(--st-perdido)}
.assinante-mais{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;
  border-radius:99px;border:1px dashed var(--line-strong);background:transparent;color:var(--fg-soft);
  font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.assinante-mais:hover:not(:disabled){border-color:var(--accent);color:var(--fg);background:var(--panel-2)}
.assinante-mais:disabled{opacity:.5;cursor:not-allowed}
.assinante-mais svg{background:var(--accent);color:#fff;border-radius:99px;padding:3px;width:20px;height:20px}
@media (max-width:640px){.assinante-linha{grid-template-columns:1fr auto}.assinante-linha input:nth-child(2),.assinante-linha input:nth-child(3){grid-column:1}}

.assin-link{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel-2);transition:border-color .3s,box-shadow .3s}
.assin-link.gerado{border-color:var(--st-ganho);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-ganho) 18%,transparent)}
.assin-link h4{margin:0 0 3px;font-size:14.5px}
.assin-link p{margin:0;font-size:13px;color:var(--fg-soft)}
.assin-cab{display:flex;align-items:center;justify-content:space-between;gap:14px}
.assin-liga{position:relative;display:inline-flex;cursor:pointer;flex:0 0 auto}
.assin-liga input{position:absolute;opacity:0;width:0;height:0}
.assin-trilho{width:46px;height:26px;border-radius:99px;background:var(--line-strong);position:relative;transition:background .18s}
.assin-trilho::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:99px;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.assin-liga input:checked ~ .assin-trilho{background:var(--st-ganho)}
.assin-liga input:checked ~ .assin-trilho::after{transform:translateX(20px)}
.assin-liga input:focus-visible ~ .assin-trilho{outline:2px solid var(--accent);outline-offset:2px}
.assin-liga input:disabled ~ .assin-trilho{opacity:.55}
.assin-corpo{display:grid;gap:8px;margin-top:10px}
.assin-corpo:empty{display:none}
.assin-item{display:grid;grid-template-columns:minmax(120px,.9fr) 2fr auto;gap:10px;align-items:center}
.assin-quem b{display:block;font-size:13.5px}
.assin-quem small{color:var(--fg-faint);font-size:12px}
.assin-item input{min-width:0;font-size:12.5px}
.assin-copiar{height:34px;padding:0 14px;border-radius:9px;border:0;background:var(--accent);color:#fff;font:inherit;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s}
.assin-copiar:hover{transform:translateY(-1px)}
.assin-copiar.ok{background:var(--st-ganho)}
.assin-assinou{grid-column:2/4;color:var(--st-ganho);font-weight:600;font-size:13px}
.assin-sem{grid-column:2/4;color:var(--fg-faint);font-size:13px}
.assin-estado{margin-top:8px !important;min-height:18px}
.assin-estado.ok{color:var(--st-ganho)}
.assin-estado.erro{color:var(--st-perdido)}
@media (max-width:640px){.assin-item{grid-template-columns:1fr}.assin-assinou,.assin-sem{grid-column:1}}
@media (prefers-reduced-motion:reduce){.assin-link,.assin-copiar{transition:none}}

/* ===== Conta pai no cabecalho da conta ===== */
.conta-pai-chip{
  display:inline-flex;align-items:center;gap:8px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:pointer;padding-right:30px;position:relative;
}
.conta-pai-chip::after{
  content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-5px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);opacity:.7;
}

/* ===== Leads: indicador de frios e filtros personalizados ===== */
.metrica-frios{
  display:flex;flex-direction:column;gap:1px;align-items:flex-start;background:none;border:0;
  border-left:3px solid transparent;padding:0 0 0 10px;font:inherit;color:inherit;cursor:pointer;text-align:left;
  transition:border-color .15s;
}
.metrica-frios{text-align:right;line-height:1.15;align-items:flex-end;border-left:0;border-right:3px solid transparent;padding:0 10px 0 0}
.metrica-frios:hover{border-right-color:var(--line-strong)}
.metrica-frios.ativo{border-right-color:#dc2626}
.metrica-frios span{font-size:10px}
.metrica-frios b{color:var(--st-perdido)}
.metrica-frios.zerada b{color:var(--fg-faint)}
.metrica-frios:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.filtro-env{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.filtros-salvos{display:flex;flex-wrap:wrap;gap:6px}
.filtros-salvos:empty{display:none}
.filtro-salvo{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;background:var(--panel);overflow:hidden}
.filtro-salvo.ativo{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.filtro-salvo-nome{border:0;background:none;font:inherit;font-size:12.5px;padding:5px 6px 5px 12px;color:var(--fg);cursor:pointer;white-space:nowrap}
.filtro-salvo-tirar{border:0;background:none;color:var(--fg-faint);padding:0 9px 0 4px;cursor:pointer;display:inline-flex;align-items:center;height:26px}
.filtro-salvo-tirar:hover{color:var(--st-perdido)}
.filtros-pers{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.filtros-pers h3{font-size:12px;margin-bottom:8px}
.filtros-pers .filtros-salvos{margin-bottom:10px}
.filtro-criar{display:inline-flex;align-items:center;gap:6px}
.filtro-novo-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.filtro-novo-dica{font-size:13px;color:var(--fg-soft);margin:10px 0 12px}
.filtro-novo-erro{color:var(--st-perdido);font-size:13px;min-height:18px;margin-top:10px}
@media (max-width:560px){.filtro-novo-grade{grid-template-columns:1fr}}

/* Antes do JavaScript ajustar, telas grandes ja abrem maiores: o mesmo
   fator que dados.js aplica (largura / 1536px, ate 2x) sobre a base .85. */
@media (min-width:1920px){:root{--escala:1.06}}
@media (min-width:2560px){:root{--escala:1.42}}
@media (min-width:3200px){:root{--escala:1.7}}

/* ===== Planner: o quadro leva a cor (bem de leve); o card fica neutro ===== */
.coluna.agil{
  background:color-mix(in srgb,var(--cor,var(--st-aberto)) 6%,var(--panel));
  border-color:color-mix(in srgb,var(--cor,var(--st-aberto)) 16%,var(--line));
}
.coluna.agil .coluna-topo{border-bottom:1px solid color-mix(in srgb,var(--cor,var(--st-aberto)) 22%,var(--line))}
.coluna.agil .card::before{display:none}
.coluna.agil .card h3,.coluna.agil .card .linha{padding-left:0}
.coluna.agil .card{background:var(--panel)}

/* ===== Selos que abrem lista, bolinha de pessoa, menu e perfil ===== */
.card .linha{align-items:center}
.selo-ativo{cursor:pointer;transition:box-shadow .12s,transform .12s,border-color .12s}
.selo-ativo:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.selo-ativo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.selo-av{
  --av:#6b7280;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:22px;height:22px;border-radius:99px;background:var(--av);color:#fff;
  font-size:11px;font-weight:700;line-height:1;font-family:var(--font-display);user-select:none;
}
.selo-av.vazio{background:transparent;color:var(--fg-faint);border:1.5px dashed var(--line-strong);font-weight:500}
.selo-av.peq{width:20px;height:20px;font-size:10px}
.selo-av.grande{width:38px;height:38px;font-size:16px}

.menu-card{
  position:fixed;z-index:260;min-width:190px;max-width:260px;max-height:min(320px,50vh);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:var(--sombra-alta);animation:menuCardEntra .12s ease-out;
}
.menu-card-titulo{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--fg-faint);padding:6px 9px 4px;font-weight:600}
.menu-card-item{
  display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;color:var(--fg);
  font:inherit;font-size:13px;padding:7px 9px;border-radius:8px;cursor:pointer;text-align:left;
}
.menu-card-item:hover,.menu-card-item:focus-visible{background:var(--panel-2);outline:none}
.menu-card-item.atual{font-weight:600}
.menu-card-item svg{margin-left:auto;color:var(--accent)}
.menu-card-ponto{width:10px;height:10px;border-radius:99px;flex:0 0 auto}
.menu-card-texto{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-card-data{padding:8px}
.menu-card-data input{width:100%}
.perfil-card{
  position:fixed;z-index:270;width:250px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;box-shadow:var(--sombra-alta);pointer-events:none;
  animation:menuCardEntra .12s ease-out;
}
.perfil-topo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.perfil-topo b{display:block;font-size:14px}
.perfil-topo small{color:var(--fg-faint);font-size:12px}
.perfil-linha{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:3px 0;border-top:1px solid var(--line)}
.perfil-linha span{color:var(--fg-faint)}
.perfil-linha b{font-weight:500;text-align:right;word-break:break-word}
@keyframes menuCardEntra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.menu-card,.perfil-card{animation:none}}

/* ===== Links rapidos: icone no lugar da bolinha; nome inteiro, sem cortar ===== */
.op-grade{grid-template-columns:minmax(0,1fr) 380px}
.grade-links{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.link-icone{flex:0 0 auto;display:inline-flex;color:var(--fg-soft)}
.link-rapido:hover .link-icone,.link-rapido.previa-aberta .link-icone{color:var(--accent-forte)}
.link-rapido.vazio .link-icone{opacity:.45}
.link-rapido .nome{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.link-rapido{align-items:center}
@media (max-width:900px){.op-grade{grid-template-columns:minmax(0,1fr)}}
.conta-grade{grid-template-columns:minmax(0,1fr) 400px}
@media (max-width:1100px){.conta-grade{grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:900px){.conta-grade{grid-template-columns:minmax(0,1fr)}}

/* ===== Pagina da IA ===== */
.ia-pagina{max-width:760px;margin:6px auto 30px}
.ia-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.ia-topo h1{font-size:22px;letter-spacing:-.02em;margin:0 0 2px}
.ia-topo p{margin:0;color:var(--fg-soft);font-size:14px}
.ia-topo .selo{margin-left:auto}
.ia-marca.grande{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;background:var(--panel-2);color:var(--accent-forte);border:1px solid var(--line)}
.ia-marca.grande svg{width:24px;height:24px}
.ia-pagina .corpo{padding:18px 20px;font-size:14px;line-height:1.65;color:var(--fg-soft)}
.ia-pagina h2{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-faint);margin:16px 0 6px}
.ia-pagina ul{margin:0 0 4px;padding-left:20px;line-height:1.8}
.ia-nota{margin-top:14px;color:var(--fg-faint);font-size:13px}

.hub-ajuda{margin:0 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:10px 14px;font-size:13.5px;color:var(--fg-soft)}
.hub-ajuda summary{cursor:pointer;font-weight:600;color:var(--fg)}
.hub-ajuda p{margin:8px 0}
.hub-ajuda ul{margin:6px 0 2px;padding-left:20px;line-height:1.7}

/* ===== Mais plugins: loja CLARA, na cor do tema do CRM (escura so no tema escuro) ===== */
.loja{background:var(--panel);color:var(--fg);border:1px solid var(--line)}
.loja-topo h2{color:var(--fg)}
.loja-topo p,.loja-vazio{color:var(--fg-soft)}
.loja-card{
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sombra);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.loja-card:hover{border-color:var(--line-strong);box-shadow:var(--sombra-alta)}
.loja-card.ativo{border-color:color-mix(in srgb,var(--st-ganho) 55%,var(--line))}
.loja-card h3{color:var(--fg)}
.loja-card p{color:var(--fg-soft)}
.loja-card li{color:var(--fg)}
.loja-card li::before{background:var(--accent)}
.loja-meta{color:var(--fg-faint)}
.loja-icone{color:var(--accent-forte);background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.loja-selo.disp{color:var(--accent-forte);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.loja-selo.breve,.loja-selo.espera{color:#b45309;background:rgba(245,158,11,.14)}
.loja-selo.ativo{color:#15803d;background:rgba(34,197,94,.14)}
.loja-selo.pausado{color:var(--fg-faint);background:var(--panel-2)}
.loja-btn{background:var(--accent);color:#fff}
.loja-btn:hover:not(:disabled){background:var(--accent-forte);box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.loja-btn:disabled{background:var(--accent-forte);opacity:.8}
.loja-preco{color:var(--fg-faint)}
.loja-espera{color:#b45309}
.loja-link{color:var(--accent-forte)}
.loja-uso{color:var(--fg-soft)}
.loja-uso b{color:var(--fg)}
.loja-chave-liga{color:var(--fg-soft)}
.loja-trilho{background:var(--line-strong)}
.loja-chave-liga input:checked ~ .loja-trilho{background:var(--st-ganho)}
.loja-progresso{background:var(--line)}
.loja-progresso i{background:var(--accent)}
.loja-ok{color:#15803d}
.loja-sub{color:var(--fg)}
.loja-painel{background:var(--panel-2);border-color:var(--line)}
.loja-painel header{color:var(--fg)}
.hub-pagina .loja-painel{background:var(--panel-2);color:var(--fg)}

.versao-crm{font-variant-numeric:tabular-nums;opacity:.7}

/* ===== Cores comuns das colunas do Planner ===== */
.cores-comuns{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center;flex:1 1 100%;order:-1;margin-bottom:2px}
.cor-comum{width:20px;height:20px;border-radius:99px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:0 0 0 1px var(--line)}
.cor-comum:hover{transform:scale(1.12)}
.cor-comum.atual{border-color:var(--panel);box-shadow:0 0 0 2px var(--fg)}

/* ===== Links rapidos: cada tipo na sua cor ===== */
.link-icone{color:var(--ic,var(--fg-soft))}
.link-rapido:hover .link-icone,.link-rapido.previa-aberta .link-icone{color:var(--ic,var(--accent-forte))}
.link-icone.preto{color:#111827}
:root[data-tema="escuro"] .link-icone.preto{color:#e5e7eb}
.item .limite-col{width:92px;flex:0 0 92px;max-width:92px;align-self:center}
.item .cores-comuns{margin-bottom:4px}

/* ===== Casos: temas prontos e o + no Hub ===== */
.temas-caso{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tema-ficha{border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;font-size:12.5px;padding:6px 12px;border-radius:99px;cursor:pointer;transition:border-color .14s,background .14s}
.tema-ficha:hover{border-color:var(--line-strong);background:var(--panel-2)}
.tema-ficha.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));font-weight:600}
.tema-ficha.outro{border-style:dashed;color:var(--fg-soft)}
.hub-sub-caso{display:flex;align-items:center;gap:8px}
.caso-mais{width:26px;height:26px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--fg-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.caso-mais:hover{border-color:var(--accent);color:var(--accent-forte)}

/* ===== Planner no celular: arrastar para o lado em QUALQUER ponto do quadro =====
   Antes, o card e a lista da coluna so deixavam rolar na vertical
   (pan-y): o dedo que comecava em cima de um card nao movia o quadro
   para o lado, so o titulo da coluna deixava. Agora os dois eixos passam;
   o arrasto de card continua sendo o toque longo (que liga touch-action:none). */
.quadro,.coluna,.coluna-cards,.coluna-cards .card,.coluna-fim,.vazio-coluna{touch-action:pan-x pan-y}
.quadro{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.card.arrastando-toque{touch-action:none}

/* ===== Pagina de resultados da busca ===== */
.busca-pagina{max-width:900px;margin:6px auto 30px}
.busca-topo h1{font-size:24px;letter-spacing:-.02em;margin:0 0 4px}
.busca-topo p{margin:0 0 18px;color:var(--fg-soft);font-size:14.5px}
.busca-bloco{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px 10px;margin-bottom:14px}
.busca-bloco h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-soft);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.busca-n{background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:0 8px;font-size:12px;color:var(--fg)}
.busca-vazio{margin:4px 0 6px;color:var(--fg-faint);font-size:13.5px}
.busca-lista{display:flex;flex-direction:column}
.busca-item{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:center;padding:9px 6px;border-top:1px solid var(--line);color:inherit;text-decoration:none;border-radius:8px}
.busca-item:first-child{border-top:0}
.busca-item:hover,.busca-item:focus-visible{background:var(--panel-2);outline:none}
.busca-nome{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-lado{color:var(--fg-faint);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
@media (max-width:640px){.busca-item{grid-template-columns:auto 1fr}.busca-lado{grid-column:2;text-align:left}}

/* ===== Cliente x Prestador ===== */
.perfil-selo{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 9px;border-radius:99px;vertical-align:middle;margin-left:4px}
.perfil-selo.cliente{color:#1d4ed8;background:rgba(37,99,235,.12)}
.perfil-selo.prestador{color:#b45309;background:rgba(245,158,11,.18)}

/* ===== Quem executa a oportunidade ===== */
.exec-bloco{margin:16px 0 6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.exec-opcoes{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.exec-radio{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer}
.exec-corpo{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.exec-corpo .exec-dica,.exec-corpo .exec-trava{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--fg-faint)}
.exec-trava{padding:10px 12px;border:1px dashed var(--st-aprovacao);border-radius:10px;color:var(--fg-soft) !important;background:color-mix(in srgb,var(--st-aprovacao) 8%,transparent)}
@media (max-width:640px){.exec-corpo{grid-template-columns:1fr}}

/* ===== Tarefa do time inteiro ===== */
.selo-av.time{border-radius:7px}
.time-inteiro{margin-top:8px;font-size:13px}

/* ===== Construtor de layout ===== */
.lay-oculto{display:none !important}
.lay-esmaecido{opacity:.38;outline:2px dashed var(--line-strong);outline-offset:-2px}
.lay-ajuda{margin:0 0 14px;padding-left:20px;line-height:1.8;font-size:13.5px;color:var(--fg-soft)}
body.lay-editando .lay-bloco{position:relative;outline:2px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-2px}
.lay-ferr{position:absolute;top:6px;right:6px;z-index:40;display:flex;gap:3px;background:var(--panel);border:1px solid var(--line-strong);border-radius:9px;padding:3px;box-shadow:var(--sombra)}
.lay-btn{width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--fg);cursor:pointer;font-size:12px;line-height:1}
.lay-btn:hover{background:var(--panel-2)}
.lay-campo-x{position:absolute;right:2px;top:2px;width:20px;height:20px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--fg-soft);cursor:pointer;font-size:10px;line-height:1;opacity:0}
body.lay-editando dl > div{position:relative}
body.lay-editando dl > div:hover .lay-campo-x,.lay-campo-x:focus-visible{opacity:1}
.lay-barra{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:180;max-width:calc(100vw - 24px);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 14px;background:var(--panel);
  border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--sombra-alta)}
.lay-barra-titulo{display:flex;flex-direction:column;font-size:13px;line-height:1.25}
.lay-barra-titulo small{color:var(--fg-faint);font-size:11.5px}
.lay-barra-acoes{display:flex;flex-wrap:wrap;gap:6px}
.lay-extras{display:flex;flex-direction:column}
.lay-extra-corpo{white-space:pre-wrap;padding:12px 14px;font-size:14px;color:var(--fg-soft)}

.exec-bloco>summary{cursor:pointer;font-size:13px;color:var(--fg-soft);list-style:none}
.exec-bloco>summary b{color:var(--fg);margin-left:6px}
.exec-bloco>summary::before{content:"\25B8";margin-right:6px;color:var(--fg-faint)}
.exec-bloco[open]>summary::before{content:"\25BE"}
.exec-bloco[open]>summary{margin-bottom:10px}

/* ===== Acessos da equipe ===== */
.acesso-on{color:var(--st-ganho);font-weight:600}
.acesso-off{color:var(--fg-faint)}
.acesso-linha .corpo small{display:block}
.acesso-linha .fim{display:flex;align-items:center;gap:8px;flex-wrap:wrap}


/* ===== Entrada do CRM: escura, logo grande e caixa centrada ===== */
.entrada{
  grid-auto-flow:row;align-content:center;justify-items:center;gap:0;
  background:radial-gradient(ellipse at 50% 18%,#0f2a29 0,#071314 55%,#050c0d 100%);
}
.entrada-logo{color:var(--accent);display:inline-flex;margin-bottom:26px}
.entrada .caixa-entrada{
  max-width:420px;background:#0b1819;border:1px solid #1d3535;border-radius:16px;
  padding:28px 26px;box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.entrada h1{font-size:19px;margin-bottom:4px}
.entrada .expl{font-size:13px;margin-bottom:16px}
.entrada .campo label{font-size:12px;font-weight:600}
.entrada input{background:#071112;border:1px solid #1d3535;border-radius:9px;height:40px}
.entrada input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(47,214,189,.2);outline:0}
.entrada .senha-caixa{position:relative;display:block}
.entrada .senha-caixa input{width:100%;padding-right:42px}
.entrada .olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border:0;background:transparent;color:var(--fg-soft);cursor:pointer;display:grid;place-items:center;border-radius:8px}
.entrada .olho:hover{color:var(--fg)}
.entrada .botao.verde{height:44px;border-radius:10px;font-weight:700}
.entrada-rodape{margin:16px 0 0;font-size:12px;color:var(--fg-faint);text-align:center}


/* ===== Planner, visao Mes: um cartao so, com o dia da semana dentro ===== */
.cal-topo .mes .ano{color:var(--fg-faint);font-weight:500}
.calendario.cal-mes{
  margin:12px 14px 34px;padding:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--raio-g);overflow:hidden;
}
.cal-mes .cal-cabeca{gap:0;margin:0;border-bottom:1px solid var(--line)}
.cal-mes .cal-cabeca div{text-align:left;padding:10px 12px;font-size:9.5px;letter-spacing:1.4px}
.cal-mes .cal-grade{border:0;border-radius:0;gap:0;background:transparent}
.cal-mes .cal-dia{
  min-height:92px;padding:8px 8px 6px;gap:4px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cal-mes .cal-dia:nth-child(7n){border-right:0}
.cal-mes .cal-dia.fora{background:var(--panel-2);opacity:1;cursor:default}
.cal-mes .cal-dia .num{font-family:inherit;font-size:12px;font-weight:500;color:var(--fg-soft);min-height:20px}
.cal-mes .cal-dia.hoje{box-shadow:none;background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.cal-mes .cal-dia.hoje .num span{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:99px;background:var(--accent-forte);color:#fff;font-weight:700;
}
.cal-mes .tarefa.so-nome{
  flex-direction:row;align-items:center;padding:3px 8px;min-height:0;border:0;border-radius:6px;
  background:color-mix(in srgb,var(--st-aberto) 14%,var(--panel));color:color-mix(in srgb,var(--st-aberto) 78%,var(--fg));
}
.cal-mes .tarefa.so-nome::before{display:none}
.cal-mes .tarefa.so-nome .titulo{font-size:11px;font-weight:500;color:inherit}
.cal-mes .tarefa.p-atraso{
  background:color-mix(in srgb,var(--st-perdido) 14%,var(--panel));color:color-mix(in srgb,var(--st-perdido) 82%,var(--fg));
}
.cal-mes .tarefa.p-feita{
  background:color-mix(in srgb,var(--st-ganho) 16%,var(--panel));color:color-mix(in srgb,var(--st-ganho) 85%,var(--fg));
}
.cal-mes .tarefa.p-feita .titulo{text-decoration:none}
.cal-mes .tarefa.so-nome:hover{filter:brightness(.97)}
.cal-mes .mais-dia{font-size:10.5px;color:var(--fg-faint);padding-left:2px}


/* ===== Nivel do cliente e qualificacao do lead ===== */
.selo.nivel{font-weight:700;letter-spacing:.02em}
.selo.nivel-bronze{background:color-mix(in srgb,#b4713a 16%,var(--panel));color:#8a4f1f;border-color:color-mix(in srgb,#b4713a 40%,var(--line))}
.selo.nivel-prata{background:color-mix(in srgb,#8d99a6 18%,var(--panel));color:#566371;border-color:color-mix(in srgb,#8d99a6 45%,var(--line))}
.selo.nivel-ouro{background:color-mix(in srgb,#d4a017 18%,var(--panel));color:#8a6500;border-color:color-mix(in srgb,#d4a017 50%,var(--line))}
:root[data-tema="escuro"] .selo.nivel-bronze{color:#e0a272}
:root[data-tema="escuro"] .selo.nivel-prata{color:#c3ccd6}
:root[data-tema="escuro"] .selo.nivel-ouro{color:#f0c850}
.lead-extras{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.selo.qualif{cursor:help}


/* ===== Reunioes: transcricao e analise ===== */
.reu-grade{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:16px;padding:14px;align-items:start}
.reu-lista{display:flex;flex-direction:column;gap:8px;max-height:calc(var(--tela) - var(--topo) - 40px);overflow-y:auto}
.reu-h{font-size:16px;font-weight:700;margin:0 0 10px}
.reu-vazio,.reu-nota{color:var(--fg-soft);font-size:13px;line-height:1.5;margin:6px 0}
.reu-item{display:flex;flex-direction:column;gap:4px;text-align:left;padding:11px 12px;border-radius:var(--raio);
  background:var(--panel);border:1px solid var(--line);font:inherit;color:inherit;cursor:pointer}
.reu-item:hover{border-color:var(--line-strong)}
.reu-item.ativa{border-color:var(--accent);background:var(--accent-dim)}
.reu-item b{font-size:13.5px}
.reu-item small{color:var(--fg-faint);font-size:11.5px}
.reu-item .selo{align-self:flex-start}
.reu-cartao{background:var(--panel);border:1px solid var(--line);border-radius:var(--raio-g);padding:18px 20px}
.reu-campo{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:12.5px;font-weight:600}
.reu-campo input,.reu-campo select{height:38px}
.reu-modos{border:1px solid var(--line);border-radius:var(--raio);padding:10px 12px;margin:0 0 12px}
.reu-modos legend{font-size:12.5px;font-weight:600;padding:0 6px}
.reu-modo{display:flex;gap:10px;align-items:flex-start;padding:7px 0;cursor:pointer}
.reu-modo span{display:flex;flex-direction:column;gap:2px}
.reu-modo small{color:var(--fg-soft);font-size:12px;font-weight:400}
.reu-modo.desligado{opacity:.6;cursor:not-allowed}
.reu-aviso{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--fg-soft);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--raio);padding:10px 12px;margin-bottom:14px}
.reu-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.reu-topo{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px}
.reu-topo .reu-h{margin:0}
.reu-tempo{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:18px}
.reu-ponto{width:11px;height:11px;border-radius:50%;background:var(--st-perdido);animation:reuPulsa 1.4s ease-in-out infinite}
.reu-ponto.pausado{animation:none;background:var(--st-espera)}
@keyframes reuPulsa{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.reu-ponto{animation:none}}
.reu-ao-vivo{min-height:240px;max-height:48vh;overflow-y:auto;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--raio);padding:12px 14px;font-size:14px;line-height:1.55}
.reu-ao-vivo p{margin:0 0 8px}
.reu-ao-vivo small{color:var(--fg-faint);font-variant-numeric:tabular-nums;margin-right:6px}
.reu-ao-vivo .parcial{color:var(--fg-faint)}
.reu-meta{color:var(--fg-faint);font-size:12px}
.reu-res h3,.reu-cartao>h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin:18px 0 6px}
.reu-res ul{margin:0;padding-left:18px;line-height:1.6;font-size:14px}
.reu-res p{font-size:14px;line-height:1.6;margin:0}
.reu-temp{margin-top:10px !important;padding:8px 12px;border-radius:var(--raio);background:var(--panel-2)}
.reu-tarefas{list-style:none;padding:0 !important}
.reu-tarefas li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.reu-dir{color:var(--accent-forte)}
.reu-transc{white-space:pre-wrap;font:inherit;font-size:13px;line-height:1.55;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--raio);padding:12px 14px;max-height:340px;overflow-y:auto;margin:0}
.reu-texto{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:var(--raio);
  background:var(--panel-2);color:inherit;font:inherit;line-height:1.5}
@media (max-width:860px){.reu-grade{grid-template-columns:1fr}.reu-lista{max-height:none}}


/* ===== Painel: melhor vendedor ===== */
.melhor{display:flex;gap:16px;align-items:center;padding:4px 0 14px}
.melhor .medalha{width:56px;height:56px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-weight:800;font-size:20px;color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,#d4a017 35%,transparent)}
.melhor h3{margin:0;font-size:18px}
.melhor p{margin:2px 0 0;color:var(--fg-soft);font-size:13px}
.melhor-rank{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.melhor-rank div{display:grid;grid-template-columns:22px minmax(80px,170px) 1fr 90px;gap:10px;align-items:center;font-size:13px}
.melhor-rank i{font-style:normal;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.melhor-rank u{display:block;height:7px;border-radius:4px;background:var(--accent);text-decoration:none}
.melhor-rank b{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){.melhor-rank div{grid-template-columns:20px 1fr 80px}.melhor-rank u{display:none}}
.reu-cliente{margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--raio);background:var(--panel-2)}
.reu-cliente h3{margin-top:0 !important}
.reu-cliente p{font-size:14px;margin:0 0 6px}


/* ===== IA: a bolinha no meio e a conversa do lado ===== */
.ia-tela{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:0;min-height:calc(var(--tela) - var(--topo) - 40px);position:relative}
.ia-centro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.ia-titulo{font-size:24px;letter-spacing:-.02em;margin:6px 0 0}
.ia-sub{max-width:44ch;margin:0;color:var(--fg-soft);font-size:14px;line-height:1.55}
.ia-sugestoes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:520px;margin-top:6px}
.ia-chip{padding:8px 14px;border-radius:99px;border:1px solid var(--line-strong);background:var(--panel);color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
.ia-chip:hover:not(:disabled){border-color:var(--accent);background:var(--accent-dim)}
.ia-chip:disabled{opacity:.5;cursor:not-allowed}
.ia-medidor{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin:10px 0 0;font-size:12.5px;color:var(--fg-soft)}
.ia-medidor b{color:var(--fg);margin-right:4px}
/* a bolinha */
.ia-orbe{position:relative;width:168px;height:168px;display:grid;place-items:center}
.ia-nucleo{position:relative;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#9bf3e2 0,#2fd6bd 34%,#0e7d6e 72%,#06403a 100%);
  box-shadow:0 0 38px 4px color-mix(in srgb,#2fd6bd 45%,transparent),inset -8px -10px 22px rgba(0,0,0,.28);
  animation:iaRespira 4.2s ease-in-out infinite}
.ia-anel{position:absolute;inset:6px;border-radius:50%;border:1.5px solid color-mix(in srgb,#2fd6bd 55%,transparent);opacity:.55;animation:iaOnda 4.2s ease-out infinite}
.ia-anel.dois{animation-delay:2.1s}
.ia-orbe.pensando .ia-nucleo{animation-duration:.9s}
.ia-orbe.pensando .ia-anel{animation-duration:1.4s}
.ia-orbe.falando .ia-nucleo{animation-duration:1.6s}
.ia-orbe.apagada .ia-nucleo{background:radial-gradient(circle at 32% 28%,#d9dde2 0,#9aa1ad 60%,#5b616b 100%);box-shadow:none;animation:none}
.ia-orbe.apagada .ia-anel{display:none}
@keyframes iaRespira{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes iaOnda{0%{transform:scale(.72);opacity:.6}100%{transform:scale(1.18);opacity:0}}
@media (prefers-reduced-motion:reduce){.ia-nucleo,.ia-anel{animation:none}}
/* a lateral */
.ia-lateral{display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);max-height:calc(var(--tela) - var(--topo) - 40px);min-height:420px}
.ia-lateral.fechada{display:none}
.ia-tela:has(.ia-lateral.fechada){grid-template-columns:1fr}
.ia-lateral-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ia-lateral-acoes{display:flex;gap:6px}
.ia-mensagens{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ia-msg{max-width:92%;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.55}
.ia-msg p{margin:0}
.ia-msg.voce{align-self:flex-end;background:var(--accent);color:var(--sobre-accent,#fff);border-bottom-right-radius:4px}
.ia-msg.ia{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.ia-msg.erro{align-self:flex-start;background:color-mix(in srgb,var(--st-perdido) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--st-perdido) 40%,var(--line))}
.ia-custo{margin-top:8px !important;padding-top:7px;border-top:1px dashed var(--line-strong);font-size:12px;color:var(--fg-soft)}
.ia-custo b{color:var(--fg)}
.ia-pontos{display:inline-flex;gap:4px}
.ia-pontos i{width:7px;height:7px;border-radius:50%;background:var(--fg-faint);animation:iaPonto 1s ease-in-out infinite}
.ia-pontos i:nth-child(2){animation-delay:.15s}.ia-pontos i:nth-child(3){animation-delay:.3s}
@keyframes iaPonto{0%,100%{opacity:.3}50%{opacity:1}}
.ia-form{padding:10px 12px 12px;border-top:1px solid var(--line)}
.ia-entrada{width:100%;box-sizing:border-box;resize:none;padding:10px 12px;border:1px solid var(--line);border-radius:var(--raio);background:var(--panel-2);color:inherit;font:inherit;line-height:1.45}
.ia-form-rodape{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.ia-contador{color:var(--fg-faint);font-size:12px}
.ia-contador.alerta{color:var(--st-espera);font-weight:700}
.ia-alterna{display:none}
@media (max-width:860px){
  .ia-tela{grid-template-columns:1fr}
  .ia-centro{padding:14px}
  .ia-orbe{width:110px;height:110px}.ia-nucleo{width:78px;height:78px}
  .ia-lateral{border-left:0;border-top:1px solid var(--line);max-height:none;min-height:360px}
  .ia-alterna{display:inline-flex;position:absolute;right:10px;top:10px}
}


/* ===== Botoes: ao passar o mouse, sobem um pouco, ganham sombra e uma luz na borda ===== */
.botao,.loja-btn,.ia-chip{
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease),background-color .16s var(--ease);
}
.botao:hover:not(:disabled):not([aria-disabled="true"]),.loja-btn:hover:not(:disabled),.ia-chip:hover:not(:disabled){
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.34),
             0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent),
             0 0 16px 1px color-mix(in srgb,var(--accent) 38%,transparent);
}
.botao.perigo:hover:not(:disabled){
  box-shadow:0 10px 20px -8px rgba(0,0,0,.34),
             0 0 0 2px color-mix(in srgb,var(--st-perdido) 60%,transparent),
             0 0 16px 1px color-mix(in srgb,var(--st-perdido) 38%,transparent);
}
.botao:active:not(:disabled),.loja-btn:active:not(:disabled){transform:translateY(0) scale(.99);box-shadow:0 2px 6px -2px rgba(0,0,0,.3)}
.botao:focus-visible,.loja-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .botao:hover:not(:disabled),.loja-btn:hover:not(:disabled),.ia-chip:hover:not(:disabled){transform:none}
}

/* ===== Mais: chave de acesso ===== */
.loja-btn.sec{background:transparent;color:var(--accent-forte);border:1px solid var(--line-strong)}
a.loja-btn{display:inline-flex;align-items:center;text-decoration:none}
.mais-modulos,.chaves-eixo{margin-top:30px}
.chave-dica{color:var(--fg-soft);font-size:13.5px;line-height:1.55;margin:0 0 12px}
.chave-campo{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600}
.chave-campo input{height:46px;font-size:18px;letter-spacing:.08em;text-align:center;font-variant-numeric:tabular-nums}
.chave-msg{min-height:20px;margin:10px 0 0;font-size:13.5px}
.chave-msg.erro{color:var(--st-perdido)}
.chave-ok{text-align:center;padding:6px 0;color:var(--st-ganho)}
.chave-ok svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:chaveRisco .5s .1s ease-out forwards}
.chave-ok h3{margin:8px 0 2px;color:var(--fg)}.chave-ok p{margin:0;color:var(--fg-soft);font-size:13.5px}
@keyframes chaveRisco{to{stroke-dashoffset:0}}
.chaves-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end;margin-bottom:16px}
.chaves-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600}
.chaves-form select,.chaves-form input{height:38px}
.chave-botoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chaves-tabela{width:100%;border-collapse:collapse;font-size:13px}
.chaves-tabela th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-faint);padding:8px 10px;border-bottom:1px solid var(--line)}
.chaves-tabela td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.chaves-tabela small{display:block;color:var(--fg-faint);font-size:11.5px;margin-top:2px}
.chave-estado{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;background:var(--panel-3)}
.chave-estado.disponivel{background:color-mix(in srgb,var(--st-ganho) 18%,var(--panel));color:var(--st-ganho)}
.chave-estado.usada{background:color-mix(in srgb,var(--st-aberto) 16%,var(--panel));color:var(--st-aberto)}
.chave-estado.vencida,.chave-estado.revogada{background:color-mix(in srgb,var(--st-perdido) 14%,var(--panel));color:var(--st-perdido)}
@media (prefers-reduced-motion:reduce){.chave-ok svg path{animation:none;stroke-dashoffset:0}}


/* ===== IA flutuante (telinha de canto) ===== */
.iaf{position:fixed;right:18px;bottom:18px;z-index:90;width:min(392px,calc((100vw - 24px) / var(--escala,1)));height:min(640px,calc((100vh - 96px) / var(--escala,1)));
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-strong);border-radius:18px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);overflow:hidden;
  animation:iafEntra .22s var(--ease)}
.iaf[hidden]{display:none}
@keyframes iafEntra{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.iaf{animation:none}}
.iaf-topo{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.iaf-topo b{font-size:14px}
.iaf-teste{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--st-espera);border:1px solid color-mix(in srgb,var(--st-espera) 45%,transparent);border-radius:99px;padding:1px 8px}
.iaf-acoes{margin-left:auto;display:flex;gap:2px}
.iaf-btn{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--fg-soft);cursor:pointer;text-decoration:none}
.iaf-btn:hover{background:var(--panel-3);color:var(--fg)}
.iaf-orbe{position:relative;width:22px;height:22px;display:inline-block}
.iaf-orbe i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#9bf3e2,#2fd6bd 38%,#0e7d6e 80%);box-shadow:0 0 10px 1px color-mix(in srgb,#2fd6bd 55%,transparent);animation:iaRespira 4s ease-in-out infinite}
.iaf-orbe.pensando i{animation-duration:.8s}
.iaf-tela{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--fg-soft)}
.iaf-tela-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iaf-tela-nome b{color:var(--fg)}
.iaf-liga{display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex:0 0 auto;font-size:12px}
.iaf-liga input{position:absolute;opacity:0;width:1px;height:1px}
.iaf-trilho{position:relative;width:30px;height:17px;border-radius:99px;background:var(--panel-3);border:1px solid var(--line-strong);transition:background .15s}
.iaf-trilho::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--fg-faint);transition:transform .15s,background .15s}
.iaf-liga input:checked + .iaf-trilho{background:var(--accent-dim);border-color:var(--accent)}
.iaf-liga input:checked + .iaf-trilho::after{transform:translateX(13px);background:var(--accent)}
.iaf-liga input:focus-visible + .iaf-trilho{outline:2px solid var(--accent);outline-offset:2px}
.iaf-mensagens{flex:1 1 auto;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px}
.iaf-msg{max-width:94%;padding:9px 11px;border-radius:13px;font-size:13.5px;line-height:1.5}
.iaf-msg p{margin:0}
.iaf-msg.voce{align-self:flex-end;background:var(--accent);color:var(--sobre-accent,#fff);border-bottom-right-radius:4px}
.iaf-msg.ia{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.iaf-msg.erro{align-self:flex-start;background:color-mix(in srgb,var(--st-perdido) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--st-perdido) 40%,var(--line))}
.iaf-ir{margin-top:8px;display:inline-flex}
.iaf-aviso{margin:8px 0 0 !important;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,var(--st-espera) 15%,var(--panel));font-size:12.5px;line-height:1.45}
.iaf-atalhos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:7px 12px;border-top:1px solid var(--line)}
.iaf-atalhos-rot{font-size:11.5px;color:var(--fg-faint)}
.iaf-atalho{font-size:12px;padding:3px 10px;border-radius:99px;border:1px solid var(--line-strong);color:var(--fg);text-decoration:none;background:var(--panel)}
.iaf-atalho:hover{border-color:var(--accent);background:var(--accent-dim)}
.iaf-form{padding:8px 12px 11px;border-top:1px solid var(--line)}
.iaf-entrada{width:100%;box-sizing:border-box;resize:none;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:inherit;font:inherit;font-size:13.5px;line-height:1.4}
.iaf-rodape{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
.iaf-medidor{color:var(--fg-faint);font-size:11.5px;line-height:1.3}
#lateral a.iaf-aberta{background:var(--accent-dim);color:var(--accent-forte)}
/* O CRM usa zoom (escala): no celular a janela precisa compensar para ocupar a tela inteira. */
/* No celular a janela da IA tem tamanho de conversa, não de tela cheia */
@media (max-width:640px){.iaf{right:8px;bottom:8px;width:calc((100vw - 16px) / var(--escala,1));height:min(calc(56vh / var(--escala,1)),440px);border-radius:18px}.iaf .iaf-msg{font-size:14px}}

/* ===== Reunioes: app de transcricao ===== */
.reu-app h4{margin:16px 0 6px;font-size:13px}
.reu-passos{margin:0 0 6px;padding-left:20px;line-height:1.7;font-size:13.5px;color:var(--fg-soft)}
.reu-chave-linha{display:flex;gap:8px;flex-wrap:wrap}
.reu-chave-linha input{flex:1 1 220px;height:34px}
.reu-chave-nova{margin:12px 0;padding:10px 12px;border:1px solid var(--accent);border-radius:var(--raio);background:var(--accent-dim)}
.reu-chave-nova p{margin:0 0 6px;font-size:13px}
.reu-chave-nova code,.reu-app code{word-break:break-all;font-size:12.5px}
.reu-chaves{margin-top:6px}
.reu-chave-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.reu-chave-item small{display:block;color:var(--fg-faint);font-size:11.5px}

/* Fazer upgrade e Chave de acesso lado a lado no cartao do plugin */
.loja-pe .loja-btn{padding:0 12px;font-size:13px;height:38px;white-space:nowrap}
.loja-pe{gap:8px}
.loja-pe .loja-preco{flex:1 0 100%;margin-top:2px}

/* ---- avisos ao cliente (formulario da oportunidade) ---- */
.acomp-corpo{padding:0 12px 12px;display:flex;flex-direction:column;gap:6px}
.acomp-ativo{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;cursor:pointer}
.acomp-det{display:flex;flex-direction:column;gap:4px}
.acomp-tit{margin:8px 0 2px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);font-weight:600}
.acomp-quem{font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer}
.acomp-fases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.acomp-fases li{font-size:13px;color:var(--fg-faint);padding-left:20px;position:relative}
.acomp-fases li::before{content:'○';position:absolute;left:2px}
.acomp-fases li.feito{color:var(--st-ganho)}
.acomp-fases li.feito::before{content:'✓'}
.acomp-fases li.agora{color:var(--fg);font-weight:700}
.acomp-fases li.agora::before{content:'●'}
.acomp-estrelas{margin:6px 0 0;font-size:13px;color:var(--fg-soft)}
.acomp-estrelas b{color:#d4a017;letter-spacing:2px;font-size:15px}
.entrega-quem{display:flex;flex-direction:column;gap:3px;margin:2px 0 6px}
.entrega-quem div{font-size:13px;display:flex;gap:8px;flex-wrap:wrap}
.entrega-quem .ok{color:var(--st-ganho);font-weight:600}
.entrega-quem .aberta{color:var(--fg-faint)}

/* ============================================================
   IA em página própria: avatar, microfone e mais nada.
   Fundo escuro nos dois temas: o avatar é de luz.
   ============================================================ */
.iaim{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;
  height:calc(var(--tela) - var(--topo) - 40px);min-height:520px;padding:22px 20px 26px;border-radius:0;overflow:hidden;color:#cfe0ff;
  background:radial-gradient(ellipse 70% 55% at 50% 42%,#0b1a3a 0%,#060d1f 55%,#030711 100%);isolation:isolate}
.iaim-canto{position:absolute;top:14px;right:14px;display:flex;gap:6px;z-index:3}
.iaim-peq{width:36px;height:36px;border-radius:50%;border:1px solid rgba(140,180,255,.25);background:rgba(20,40,90,.35);color:#9dbfff;display:grid;place-items:center;cursor:pointer}
.iaim-peq:hover,.iaim-peq:focus-visible{background:rgba(60,110,220,.35);color:#fff}
.iaim-menu{position:absolute;top:42px;right:0;min-width:180px;background:#0b1630;border:1px solid rgba(140,180,255,.25);border-radius:12px;padding:6px;display:flex;flex-direction:column;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.iaim-menu[hidden]{display:none}
.iaim-menu button{background:none;border:0;color:#cfe0ff;text-align:left;font:500 14px/1.2 inherit;padding:10px 12px;border-radius:8px;cursor:pointer}
.iaim-menu button:hover{background:rgba(80,130,255,.2)}
.iaim-topo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.iaim-rotulo{font:600 13px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.42em;text-transform:uppercase;color:#6fb0ff;text-indent:.42em}
.iaim-ondas{display:flex;align-items:center;justify-content:center;gap:3px;height:26px}
.iaim-ondas i{display:block;width:3px;height:26px;border-radius:2px;background:linear-gradient(#7fc0ff,#3b7bff);transform:scaleY(.1);transform-origin:center;opacity:.9}
.iaim-ondas.mic{height:34px}
.iaim-ondas.mic i{height:34px}
.iaim-centro{flex:1;display:grid;place-items:center;width:100%;min-height:0}
.iaim-avatar{display:block;max-width:100%}
.iaim.apagada .iaim-avatar{opacity:.35;filter:grayscale(1)}
.iaim-fala{width:min(720px,100%);text-align:center;min-height:96px;display:flex;flex-direction:column;align-items:center;gap:6px}
.iaim-voce{margin:0;font-size:14px;color:#7f9bc9;font-style:italic;min-height:1em}
.iaim-legenda{margin:0;font-size:clamp(17px,2.2vw,22px);line-height:1.45;color:#e8f0ff;max-height:7.4em;overflow:auto;scrollbar-width:none;text-wrap:pretty}
.iaim-legenda::-webkit-scrollbar{display:none}
.iaim-legenda.erro{color:#ff9aa4}
.iaim-acoes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.iaim-ir{display:inline-block;padding:9px 16px;border-radius:999px;background:#2f6bff;color:#fff;font-weight:600;font-size:14px;text-decoration:none}
.iaim-ir:hover{background:#4a82ff;color:#fff}
.iaim-nota{margin:0;font-size:12.5px;color:#d9b36a;max-width:560px}
.iaim-nota:empty{display:none}
.iaim-economia{display:inline-block;margin:2px 0;padding:4px 12px;border-radius:999px;font-size:12.5px;color:#9fe3b4;background:rgba(80,200,120,.14);border:1px solid rgba(80,200,120,.35);cursor:help}
.iaim-economia[hidden]{display:none}
.iaim-economia:focus-visible{outline:2px solid #9fe3b4;outline-offset:2px}
.iaim-base{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.iaim-mic{position:relative;width:78px;height:78px;border-radius:50%;border:1px solid rgba(120,170,255,.5);background:radial-gradient(circle at 35% 30%,#2a5fe0,#10307a);color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 0 6px rgba(60,110,255,.12),0 10px 30px rgba(20,60,200,.45);transition:transform .15s,box-shadow .2s}
.iaim-mic:hover{transform:scale(1.04)}
.iaim-mic:focus-visible{outline:2px solid #9ec5ff;outline-offset:4px}
.iaim-mic:disabled{opacity:.4;cursor:default}
.iaim-anel{position:absolute;inset:-2px;border-radius:50%;border:1.5px solid rgba(120,180,255,.6);opacity:0;pointer-events:none}
.iaim[data-modo="ouvindo"] .iaim-mic{background:radial-gradient(circle at 35% 30%,#ff5a6a,#b3182e);border-color:rgba(255,140,150,.7);box-shadow:0 0 0 6px rgba(255,80,100,.16),0 10px 30px rgba(220,40,70,.45)}
.iaim[data-modo="ouvindo"] .iaim-anel{animation:iaimAnel 1.6s ease-out infinite;border-color:rgba(255,130,145,.7)}
.iaim[data-modo="ouvindo"] .iaim-anel.dois{animation-delay:.8s}
.iaim[data-modo="falando"] .iaim-anel{animation:iaimAnel 2.2s ease-out infinite}
.iaim[data-modo="falando"] .iaim-anel.dois{animation-delay:1.1s}
@keyframes iaimAnel{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.iaim-digitar-liga{background:none;border:0;color:#7f9bc9;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.iaim-digitar-liga:hover{color:#cfe0ff}
.iaim-digitar{display:flex;gap:8px;width:min(520px,100%)}
.iaim-digitar[hidden]{display:none}
.iaim-digitar input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid rgba(140,180,255,.3);background:rgba(10,24,56,.8);color:#e8f0ff;padding:0 18px;font-size:15px}
.iaim-digitar input:focus{outline:2px solid #4a82ff;outline-offset:1px}
.iaim-digitar button{height:44px;padding:0 20px;border-radius:999px;border:0;background:#2f6bff;color:#fff;font-weight:600;cursor:pointer}
@media (max-width:700px){
  .iaim{padding:16px 14px 20px}
  .iaim-rotulo{letter-spacing:.3em;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.iaim-anel{animation:none!important}}
.lateral a.alvo-menu-baixo{box-shadow:inset 0 -2px 0 var(--accent)}
.lateral.arrastando a{cursor:grabbing}

/* ============================================================
   Onde está seus clientes? (o mapa)
   Fundo branco como o resto do CRM (e escuro no tema escuro).
   ============================================================ */
.mapa-tela{display:flex;flex-direction:column;gap:12px;padding:6px 0 18px;
  --mp-fundo:var(--panel);--mp-borda:var(--line);--mp-uf:#e7edf7;--mp-uf-b:#b4c3dd;--mp-uf-h:#d6e1f2;--mp-viz:#f1f4f9;--mp-viz-b:#d3dcec;--mp-sigla:#5a6f96;--mp-base:#e7edf7}
:root[data-tema="escuro"] .mapa-tela{--mp-uf:#12284f;--mp-uf-b:#2d5192;--mp-uf-h:#1d3d73;--mp-viz:#0d1d3d;--mp-viz-b:#1d3763;--mp-sigla:#7da4e8;--mp-base:#12284f}
.mapa-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mapa-titulo h1{margin:0;font:700 22px/1.2 'Sora',system-ui,sans-serif}
.mapa-titulo p{margin:2px 0 0;color:var(--fg-soft);font-size:13.5px}
.mapa-filtros{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mapa-filtros button{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:500 13px/1 inherit;cursor:pointer}
.mapa-filtros button[hidden]{display:none}
.mapa-filtros button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#04201b;font-weight:700}
.mapa-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.mapa-cartao{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--mp-borda);background:var(--mp-fundo);min-height:520px;height:calc(var(--tela) - var(--topo) - 190px)}
.mapa-fundo{position:absolute;inset:0}
.mapa-svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);display:block;overflow:visible}
.mapa-uf{cursor:pointer}
.mapa-forma{fill:var(--mp-uf);stroke:var(--mp-uf-b);stroke-width:.07;stroke-linejoin:round;transition:fill .2s}
.mapa-uf:hover .mapa-forma{fill:var(--mp-uf-h)}
.mapa-uf.vizinho .mapa-forma{fill:var(--mp-viz);stroke:var(--mp-viz-b);opacity:.8}
.mapa-uf.vizinho:hover .mapa-forma{fill:var(--mp-viz)}
.mapa-sigla{font:600 .62px 'JetBrains Mono',ui-monospace,monospace;fill:var(--mp-sigla);opacity:.8;pointer-events:none;letter-spacing:.04em}
.mapa-sigla.forte{fill:#04312c;opacity:.9;font-size:.8px}
.mapa-topo{transition:filter .2s}
.mapa-pino{cursor:pointer;outline:none}
.mapa-pino-corpo{fill:#ea4335;stroke:#a52714;stroke-width:1;stroke-linejoin:round;transition:transform .15s}
.mapa-pino-miolo{fill:#7f1d14}
.mapa-pino-sombra{fill:#000;opacity:.25}
.mapa-pino-onda{fill:none;stroke:#ea4335;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.mapa-pino-nome{font:600 11.5px 'Outfit',system-ui,sans-serif;fill:#0b1b36;paint-order:stroke;stroke:#fff;stroke-width:3.2px;stroke-linejoin:round;pointer-events:none}
:root[data-tema="escuro"] .mapa-pino-nome{fill:#fff;stroke:#071328}
.mapa-pino:hover .mapa-pino-corpo,.mapa-pino:focus-visible .mapa-pino-corpo{fill:#ff5a4a;transform:translateY(-1.5px)}
.mapa-pino:focus-visible .mapa-pino-miolo{fill:#fff}
.mapa-pino.aprox .mapa-pino-corpo{fill:#f26d62;stroke-dasharray:3 1.5}
.mapa-pino.ativo .mapa-pino-corpo{fill:#ff2b1a;stroke:#fff;stroke-width:1.4}
.mapa-pino.ativo .mapa-pino-miolo{fill:#fff}
.mapa-pino.ativo .mapa-pino-onda{animation:mapaOnda 1.6s ease-out infinite}
@keyframes mapaOnda{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.mapa-vazio{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;color:var(--fg-soft);font-size:14px}
.mapa-rodape{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--fg)}
.mapa-rodape .fraca{color:var(--fg-soft)}
.mapa-sem{background:none;border:0;color:var(--accent-ink,var(--accent));text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.mapa-lista-sem{margin:8px 0 0;padding-left:18px}
/* a gaveta */
.mapa-gaveta{position:absolute;top:0;right:0;bottom:0;width:min(380px,100%);background:var(--panel);border-left:1px solid var(--line);color:var(--fg);
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.7,.2,1);box-shadow:-18px 0 40px rgba(10,30,70,.18);z-index:4}
.mapa-gaveta.aberta{transform:none}
.mg-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:18px 18px 12px;border-bottom:1px solid var(--line)}
.mg-topo h2{margin:0;font:700 19px/1.25 'Sora',system-ui,sans-serif}
.mg-topo p{margin:3px 0 0;font-size:13px;color:var(--fg-soft)}
.mg-fechar{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg-soft);display:grid;place-items:center;cursor:pointer}
.mg-fechar:hover{background:var(--panel-2);color:var(--fg)}
.mg-corpo{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:14px}
.mg-grande{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mg-grande>div{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.mg-grande span{display:block;font-size:12px;color:var(--fg-soft)}
.mg-grande b{display:block;margin-top:4px;font:700 19px/1.1 'Sora',system-ui,sans-serif}
.mg-bloco{display:flex;flex-direction:column}
.mg-linha{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.mg-linha span{color:var(--fg-soft)}
.mg-linha b{font-weight:600;text-align:right}
.mg-pistas,.mg-viz{padding:0 18px 14px}
.mg-pistas h3,.mg-viz h3{margin:0 0 6px;font:600 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft)}
.mg-pistas{padding:12px 14px;margin:0 18px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px}
.mg-pistas ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}
.mg-viz{padding-top:14px}
.mg-viz-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);padding:8px 0;font:inherit;font-size:13.5px;cursor:pointer}
.mg-viz-item:hover{color:var(--accent-ink,var(--accent))}
.mg-pe{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
@media (max-width:760px){
  .mapa-cartao{min-height:460px;height:auto}
  .mapa-gaveta{top:auto;height:62%;width:100%;border-left:0;border-top:1px solid var(--line);transform:translateY(102%)}
  .mapa-gaveta.aberta{transform:none}
}
@media (prefers-reduced-motion:reduce){.mapa-gaveta{transition:none}.mapa-pino.ativo .mapa-pino-onda{animation:none}}

/* IA: mensagens prontas */
.iaim-sugestoes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:720px;transition:opacity .2s}
.iaim[data-modo="pensando"] .iaim-sugestoes,.iaim[data-modo="falando"] .iaim-sugestoes,.iaim[data-modo="ouvindo"] .iaim-sugestoes{opacity:0;visibility:hidden;pointer-events:none}
.iaim-chip{border:1px solid rgba(140,180,255,.35);background:rgba(30,60,130,.35);color:#dbe7ff;border-radius:999px;padding:9px 16px;font:500 14px/1 inherit;cursor:pointer}
.iaim-chip:hover,.iaim-chip:focus-visible{background:rgba(70,120,230,.45);color:#fff}
.iaim-chip:disabled{opacity:.4;cursor:default}
.iaf-sug{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 8px}
.iaf-chip{border:1px solid var(--line);background:var(--panel-2);color:var(--fg);border-radius:999px;padding:6px 11px;font:500 12.5px/1 inherit;cursor:pointer}
.iaf-chip:hover{border-color:var(--accent)}

/* Fluxo de Caixa: personalizar e tela em branco */
.fx [hidden]{display:none!important}
.fx-em-branco{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:28px;border:1px dashed var(--line);border-radius:14px;color:var(--fg-soft);justify-content:center}
.fx-pers-lista{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.fx-pers-item{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;cursor:pointer}
.fx-pers-item:hover{background:var(--panel-2)}
.fx-pers-item small{display:block;color:var(--fg-soft);font-size:12.5px}
.fx-pers-rapidos{display:flex;gap:8px}
.iaf-expandir{width:34px;height:34px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg)}
.iaf-expandir:hover{border-color:var(--accent);color:var(--accent-ink,var(--accent))}

/* Filtros: faixas (de / até) e datas */
.linha-faixa{display:flex;flex-direction:column;gap:5px}
.rot-faixa{font-size:12.5px;color:var(--fg-soft)}
.faixa-par{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.faixa-par input{min-width:0;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);padding:0 9px;font:inherit;font-size:13px}
.faixa-par input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.campo-faixa .faixa-par{margin-top:4px}

/* Planner: o título de cada coluna é um bloquinho na cor escolhida */
.coluna.agil .coluna-topo{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:10px 11px}
.coluna.agil .coluna-topo h2{order:0;display:inline-flex;align-items:center;gap:6px;padding:5px 13px 5px 10px;border-radius:999px;
  background:var(--cor);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.coluna.agil .coluna-topo h2::before{width:12px;height:12px;border-radius:50%;background:transparent;border:2px solid currentColor;box-sizing:border-box}
.coluna.agil .coluna-topo .contagem{order:1;display:inline;margin:0;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--cor)}
.coluna.agil .coluna-topo .contagem.cheia{color:var(--st-perdido,#c0392b)}
.iaf-sug[hidden]{display:none}

/* IA: a resposta falada nao e escrita na tela; o cartao do canto mostra os numeros */
.iaim-legenda.oculta,.iaim-voce.oculta{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0}
.iaim-cartoes{position:absolute;top:84px;right:22px;width:min(300px,calc(100% - 44px));display:flex;flex-direction:column;gap:12px;z-index:3;pointer-events:none}
.iaim-cartoes.aberto .iaim-cartao{pointer-events:auto}
.iaim-cartao{background:rgba(12,28,62,.82);border:1px solid rgba(140,180,255,.35);border-radius:14px;padding:14px 16px;color:#e6efff;backdrop-filter:blur(8px);box-shadow:0 14px 34px rgba(0,0,0,.35);animation:iaimCartao .35s cubic-bezier(.2,.7,.2,1)}
@keyframes iaimCartao{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.iaim-cartao header{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#9fc2ff}
.iaim-cartao-x{background:none;border:0;color:#9fc2ff;font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.iaim-cartao strong{display:block;margin-top:8px;font:700 30px/1.1 'Sora',system-ui,sans-serif;color:#fff}
.iaim-cartao small{display:block;margin-top:2px;color:#9fc2ff;font-size:13px}
.iaim-cartao dl{margin:12px 0 0;display:flex;flex-direction:column;gap:6px}
.iaim-cartao dl>div{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;border-top:1px solid rgba(140,180,255,.2);padding-top:6px}
.iaim-cartao dt{color:#9fc2ff}.iaim-cartao dd{margin:0;font-weight:600;text-align:right}
.iaim-cartao ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.iaim-cartao li{display:grid;grid-template-columns:84px 1fr auto;gap:8px;align-items:center;font-size:13px}
.iaim-cartao li span{color:#bcd3ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iaim-cartao li i{display:block;height:7px;border-radius:4px;width:var(--w);background:linear-gradient(90deg,#4f8cff,#2fd6bd)}
@media (max-width:760px){.iaim-cartoes{position:static;width:100%;max-width:420px;margin:0 auto;padding:0 8px}}
@media (prefers-reduced-motion:reduce){.iaim-cartao{animation:none}}

/* Primeiros passos, importar, juntar repetidas e cadencia */
.primeiros{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.primeiros header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.primeiros header b{font:700 15px/1.2 'Sora',system-ui,sans-serif;display:block}
.primeiros header span{font-size:12.5px;color:var(--fg-soft)}
.primeiros-x{background:none;border:0;color:var(--fg-soft);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.primeiros-barra{height:6px;border-radius:3px;background:var(--panel-2);margin:10px 0 8px;overflow:hidden}
.primeiros-barra i{display:block;height:100%;background:var(--accent);border-radius:3px}
.primeiros ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 16px}
.primeiros li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px}
.primeiros li.feito{color:var(--fg-soft);text-decoration:line-through}
.primeiros-marca{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:11px;color:#04201b}
.primeiros li.feito .primeiros-marca{background:var(--accent);border-color:var(--accent)}
.primeiros a,.primeiros-ir{color:var(--accent-ink,var(--accent));background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.imp-arquivo{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.imp-h{margin:14px 0 6px;font:700 14px/1.2 'Sora',system-ui,sans-serif}
.imp-mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 14px}
.imp-linha{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--fg-soft)}
.imp-linha select{height:34px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);padding:0 8px}
.imp-resumo{margin:6px 0;font-size:14px}
.imp-lista{margin:6px 0;padding-left:18px;font-size:13px}
.imp-lista .fraca{color:var(--fg-soft);list-style:none;margin-left:-18px}
.imp-puladas{font-size:13px;margin-top:6px}
.dup-grupo{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.dup-grupo h3{margin:0 0 8px;font:700 14px/1.2 'Sora',system-ui,sans-serif}
.dup-grupo h3 small{font-weight:400;color:var(--fg-soft)}
.dup-linha{display:flex;gap:9px;align-items:flex-start;padding:5px 0;font-size:13.5px;cursor:pointer}
.cad-liga{display:flex;align-items:center;gap:8px;margin:12px 0}
.cad-passos{display:flex;flex-direction:column;gap:8px}
.cad-passo{display:grid;grid-template-columns:26px auto 1fr 110px auto;gap:8px;align-items:center}
.cad-passo label{font-size:13px;display:flex;gap:6px;align-items:center;white-space:nowrap}
.cad-dias{width:62px}
.cad-passo input,.cad-passo select{height:34px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);padding:0 8px}
.cad-n{width:24px;height:24px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;font-size:12px}
.cad-tira{background:none;border:0;font-size:20px;color:var(--fg-soft);cursor:pointer}
@media (max-width:760px){.cad-passo{grid-template-columns:26px 1fr}.cad-passo>*:nth-child(n+3){grid-column:1 / -1}}

.app-passos{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;line-height:1.5}

/* IA: o mascote 3D no lugar da esfera de pontos */
.iaim-mascote{display:block;margin:0 auto;max-width:100%}

/* O personagem: do lado direito na tela cheia, e no cantinho do chat */
.iaim-lado{position:absolute;right:18px;bottom:12px;width:150px;height:150px;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;z-index:2}
.iaim-lado .iaim-mascote{width:150px;height:150px}
@media (max-width:1100px){.iaim-lado{right:6px;bottom:8px;width:110px;height:110px}.iaim-lado .iaim-mascote{width:110px!important;height:110px!important}}
@media (max-width:760px){.iaim-lado{right:4px;bottom:4px;width:84px;height:84px}.iaim-lado .iaim-mascote{width:84px!important;height:84px!important}}
.iaim-cartoes{max-height:calc(100% - 84px - 200px);overflow:auto}
.iaf-orbe.com-mascote{width:48px;height:48px;margin:-8px 0}
.iaf-orbe.com-mascote i{display:none}
.iaf-mascote{display:block;width:48px;height:48px}

/* O simbolo da IA no topo, ao lado do sino */
.ia-botao{color:var(--accent-ink,var(--accent))}
.ia-botao.iaf-aberta{background:color-mix(in srgb,var(--accent) 18%,transparent)}

/* A IA propoe mudar o CRM: o que muda, e o botao que aplica */
.iaf-mudanca{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:var(--panel-2);font-size:13px}
.iaf-mudanca-lista{margin:6px 0;padding-left:18px}
.iaf-mudanca-acoes{display:flex;gap:8px;margin-top:8px}
.iaim-cartoes .iaf-mudanca{background:rgba(12,28,62,.82);border-color:rgba(140,180,255,.35);color:#e6efff;pointer-events:auto}

/* IA: letras e microfone mais para baixo e mais compactos, para a animacao aparecer inteira */
.iaim{gap:4px;padding:16px 20px 18px}
.iaim-centro{min-height:260px;overflow:visible}
.iaim-fala{min-height:0;gap:4px}
.iaim-legenda{font-size:clamp(15px,1.55vw,19px);line-height:1.35;max-height:4.2em}
.iaim-sugestoes{gap:6px}
.iaim-chip{padding:7px 13px;font-size:13px}
.iaim-ondas.mic{height:22px}
.iaim-ondas.mic i{height:22px}
.iaim-mic{width:64px;height:64px}
.iaim-base{gap:6px}

/* Arrastar tarefa no celular: sem menu de segurar, sem imã de coluna e sem selecionar texto */
.card,.tarefa{-webkit-touch-callout:none}
body.com-tarefa-na-mao .quadro{scroll-snap-type:none!important;overscroll-behavior-x:none}
body.com-tarefa-na-mao{-webkit-user-select:none;user-select:none}

/* Onde estao os clientes: lista a esquerda, zoom e arrastar */
.mapa-cartao.com-lista .mapa-fundo{left:300px;touch-action:none;cursor:grab}
.mapa-cartao.com-lista .mapa-fundo.arrastando{cursor:grabbing}
.mapa-lista{position:absolute;left:0;top:0;bottom:0;width:300px;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);z-index:3}
.mapa-lista-topo{padding:12px 12px 8px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--line)}
.mapa-lista-topo input{height:36px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--fg);padding:0 11px;font:inherit;font-size:14px}
.mapa-lista-topo small{color:var(--fg-soft);font-size:12px}
.mapa-lista ul{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}
.mapa-lista li{margin:0}
.mapa-lista-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:9px 10px;border-radius:9px;border:0;background:none;color:var(--fg);font:inherit;cursor:pointer;text-decoration:none}
.mapa-lista-item b{font-size:14px;font-weight:600}
.mapa-lista-item small{color:var(--fg-soft);font-size:12px}
.mapa-lista-item:hover,.mapa-lista-item:focus-visible{background:var(--panel-2)}
.mapa-lista-item.sem b{color:var(--fg-soft)}
.mapa-lista li.ativa .mapa-lista-item{background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.mapa-zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:3}
.mapa-zoom button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(10,30,70,.15)}
.mapa-zoom button:hover{background:var(--panel-2)}
@media (max-width:900px){
  .mapa-cartao.com-lista .mapa-fundo{left:0;top:190px}
  .mapa-lista{width:100%;bottom:auto;height:190px;border-right:0;border-bottom:1px solid var(--line)}
  .mapa-cartao{height:calc(var(--tela) - var(--topo) - 150px)}
}
.mapa-cartao.com-lista .mapa-vazio{left:300px}

/* Hub da empresa: cabeçalho, abas e cartões no mesmo alinhamento (22px dos dois lados) */
.hub .hero{padding:14px 22px 0}
.hub .hero .hub-abas{margin:14px -22px 0;padding:0 7px}
.hub .hero-regua{margin-right:0}
.hub-corpo{padding-left:22px;padding-right:22px}
@media (max-width:760px){.hub .hero{padding:12px 14px 0}.hub .hero .hub-abas{margin:12px -14px 0;padding:0 0}.hub-corpo{padding-left:14px;padding-right:14px}}

/* O Cronos aprende: avaliar a resposta e a janela das licoes */
.iaf-avalia{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--fg-soft)}
.iaf-avalia button{border:1px solid var(--line);background:var(--panel-2);color:var(--fg);border-radius:999px;padding:4px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.iaf-avalia button:hover:not(:disabled){border-color:var(--accent)}
.iaf-avalia button:disabled{opacity:.5;cursor:default}
.iaf-aval-form{flex:1 1 100%;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.iaf-aval-form label{font-size:12.5px;color:var(--fg-soft)}
.iaf-aval-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--fg);padding:8px 10px;font:inherit;font-size:13px;resize:vertical}
.iaf-aval-fim{color:var(--accent-ink,var(--accent))}
.iaf-aprende-lista{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.iaf-aprende-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel-2)}
.iaf-aprende-item.pendente{border-style:dashed;border-color:#d9b36a}
.iaf-aprende-item p{margin:2px 0 4px;font-size:14px}
.iaf-aprende-item small{color:var(--fg-soft);font-size:12px}
.iaf-aprende-pend{color:#b7791f}
.iaf-aprende-vazio{color:var(--fg-soft);font-size:13.5px;padding:8px 2px}
.iaim-cartoes .iaim-avalia{padding:10px 14px}
.iaim-cartoes .iaf-avalia{color:#bcd3ff;margin-top:0}
.iaim-cartoes .iaf-avalia button{background:rgba(30,60,130,.45);color:#e6efff;border-color:rgba(140,180,255,.35)}
.iaim-cartoes .iaf-aval-form textarea{background:rgba(7,19,40,.7);color:#e6efff;border-color:rgba(140,180,255,.35)}
.iaim-cartoes .iaf-aval-form label,.iaim-cartoes .iaf-aval-fim{color:#9fc2ff}
.iaim-cartoes .iaim-avalia,.iaim-cartoes .iaim-avalia *{pointer-events:auto}


/* A borda da janelinha do Cronos (botao de IA do topo): degrade suave rosa, laranja, verde e azul,
   que respira devagar. So existe enquanto ela esta aberta. Parada para quem prefere menos movimento. */
.iaf::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;padding:2px;
  background:linear-gradient(135deg,#f9a8d4 0%,#fdba74 32%,#86efac 64%,#93c5fd 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.7;animation:cronosBorda 5.2s ease-in-out infinite;will-change:opacity}
/* o brilho suave fora da borda, nas mesmas cores (o miolo da janela fica como sempre foi) */
.iaf{box-shadow:0 24px 60px -12px rgba(0,0,0,.45),0 0 14px rgba(249,168,212,.45),0 0 22px rgba(147,197,253,.35)}
.iaf{position:fixed}
@keyframes cronosBorda{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.iaf::after{animation:none;opacity:.85}}

.iaim-montagem{position:absolute;top:84px;left:22px;width:min(250px,calc(100% - 44px));max-height:calc(100% - 84px - 200px);overflow:auto;display:none;flex-direction:column;gap:8px;z-index:3;pointer-events:none}
.iaim-montagem.aberta{display:flex}
.iaim-bloco{background:rgba(12,28,62,.82);border:1px solid rgba(140,180,255,.35);border-left:3px solid #10B981;border-radius:10px;padding:9px 13px;color:#e6efff;backdrop-filter:blur(8px);opacity:0;transform:translateX(-22px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.iaim-bloco.entrou{opacity:1;transform:none}
.iaim-bloco small{display:block;font:600 10.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#9fc2ff}
.iaim-bloco b{display:block;margin-top:5px;font:600 14px/1.3 'Sora',system-ui,sans-serif;color:#fff;word-break:break-word}
.iaim-bloco-cab{background:none;border:0;border-left:0;padding:2px 2px 0;font:700 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#10B981;backdrop-filter:none}
.iaim-montagem .iaim-bloco-cab:not(:first-child){margin-top:8px}
@media (prefers-reduced-motion:reduce){.iaim-bloco{transition:none;opacity:1;transform:none}}
@media (max-width:760px){.iaim-montagem{top:64px;left:12px;width:min(210px,calc(100% - 24px));max-height:34%}}
/* Os personagens da IA: Athenas (feminina) e Cronos (masculino). */
.sino-push{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--line,#e5e7eb);font-size:12.5px;color:var(--fg-soft,#556)}
.sino-push-txt{flex:1;line-height:1.35}
.bio-trava{position:fixed;inset:0;z-index:100000;background:rgba(5,11,31,.97);color:#e6efff;display:flex;align-items:center;justify-content:center;padding:24px}
.bio-trava-cx{max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.bio-trava-cx h2{margin:4px 0 0;font:700 20px/1.2 'Sora',system-ui,sans-serif}
.bio-trava-msg{margin:0 0 6px;color:#9fc2ff;font-size:14px}
.bio-trava-cx .botao{min-width:220px}
.bio-janela{display:flex;flex-direction:column;gap:12px;min-width:min(420px,86vw)}
.bio-intro{margin:0;color:var(--fg-soft,#556);font-size:13.5px}
.bio-aviso{margin:0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--st-espera,#d99) 14%,transparent);font-size:13px}
.bio-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bio-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--line,#e5e7eb);border-radius:10px}
.bio-item small{display:block;color:var(--fg-faint,#889);font-size:12px}
.bio-vazio{color:var(--fg-faint,#889);font-size:13px}
.bio-trava-opcao{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.iaim-sug{display:flex;flex-direction:column;gap:10px;min-width:min(560px,88vw)}
.iaim-sug-barra{display:flex;gap:8px}
.iaim-sug-barra .ativo{outline:2px solid var(--accent,#10b981)}
.iaim-sug-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto}
.iaim-sug-item{padding:12px 14px;border:1px solid var(--line,#e5e7eb);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.iaim-sug-item.nova{border-color:var(--accent,#10b981);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#10b981) 18%,transparent)}
.iaim-sug-item small{color:var(--fg-faint,#889);font-size:12px}
.iaim-sug-item blockquote{margin:0;padding:6px 10px;border-left:3px solid var(--line,#ddd);color:var(--fg-soft,#556);font-size:13px}
.iaim-sug-acoes{display:flex;gap:8px;flex-wrap:wrap}
.iaim-sug-vazio{color:var(--fg-faint,#889);font-size:13px}
.tarefa-cliente{padding:8px 12px;border:1px solid var(--line,#e5e7eb);border-radius:10px;background:var(--panel-2,transparent);font-size:14px}
.persona-seletor{display:inline-flex;align-items:center;gap:8px;color:inherit}
.persona-seta{background:rgba(255,255,255,.08);border:1px solid rgba(160,190,255,.35);color:inherit;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;padding:0}
.persona-seta:hover{background:rgba(255,255,255,.18)}
.persona-nome{background:none;border:0;color:inherit;font:700 15px/1 'Sora',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:4px 2px}
.persona-nota{font-size:11px;opacity:.7;letter-spacing:.04em}
.persona-seletor.outra-indisponivel .persona-seta{opacity:.45}
.com-personagem .iaim-lado{right:20px;bottom:104px;width:auto;height:auto;align-items:flex-end}
.iaim-personagem{margin:0;display:block;pointer-events:none}
.iaim-gira{transition:transform .14s ease-out;transform-origin:50% 90%}
.iaim-tela{display:block;height:min(62vh,520px);width:auto;max-width:52vw;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
.iaim.apagada .iaim-tela{filter:grayscale(1);opacity:.5}
@media (prefers-reduced-motion:reduce){.iaim-gira{transition:none}}
@media (max-width:1100px){.com-personagem .iaim-lado{right:0;bottom:96px}.iaim-tela{height:min(34vh,280px)}}
@media (max-width:760px){.com-personagem .iaim-lado{right:0;bottom:92px}.iaim-tela{height:150px;max-width:42vw}}
.iaf-orbe.com-mascote{position:relative;width:48px;height:48px;overflow:hidden;border-radius:50%;border:0;box-shadow:0 2px 8px rgba(0,0,0,.2);background:#2fd6d6}
/* o aro fino e colorido em volta do rosto: o mesmo degradê da borda da janelinha */
.iaf-orbe.com-mascote::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;padding:2px;
  background:linear-gradient(135deg,#f9a8d4 0%,#fdba74 32%,#86efac 64%,#93c5fd 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.iaf-rosto{display:block;width:100%;height:100%;object-fit:cover}
.iaim-cartoes .iaf-criacao{pointer-events:auto}
.iaim-cartoes .iaf-criacao .botao[disabled]{opacity:.5}

/* O dado do Sebrae, à esquerda, enquanto a gravação fala dele: transparente, some sozinho */
.iaim-dado{position:absolute;left:clamp(12px,4vw,56px);top:30%;width:min(280px,42vw);z-index:6;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.iaim-dado.aberto{opacity:1;transform:none}
.iaim-dado-num{margin:0;font-size:clamp(40px,6vw,64px);line-height:1;font-weight:900;color:rgba(255,70,70,.78);text-shadow:0 0 22px rgba(255,60,60,.28)}
.iaim-dado-txt{margin:6px 0 10px;font-size:clamp(14px,1.6vw,17px);font-weight:800;line-height:1.3;color:rgba(255,110,110,.78)}
.iaim-dado svg{display:block;width:100%;height:auto;overflow:visible}
.iaim-dado-linha{fill:none;stroke:rgba(255,90,90,.7);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.iaim-dado.aberto .iaim-dado-linha{animation:iaimDadoLinha 1.6s .4s ease forwards}
.iaim-dado circle{fill:rgba(255,110,110,.8)}
.iaim-dado text{font-size:11px;fill:rgba(255,160,160,.75)}
.iaim-dado-fonte{margin:8px 0 0;font-size:11px;color:rgba(255,160,160,.55)}
@keyframes iaimDadoLinha{to{stroke-dashoffset:0}}
@media (max-width:760px){.iaim-dado{top:14%;width:min(220px,56vw)}}
@media (prefers-reduced-motion:reduce){.iaim-dado,.iaim-dado.aberto .iaim-dado-linha{transition:none;animation:none;stroke-dashoffset:0}}

.resumo-atraso{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;display:block}
.resumo-atraso span{display:block}
.resumo-atraso[aria-pressed="true"]{outline:2px solid var(--st-perdido);outline-offset:3px;border-radius:6px}

/* Busca: lista de resultados por área ao lado */
.busca-pagina{max-width:1680px;margin:6px 0 30px;padding:0 20px}
.busca-grade{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.busca-lado-lista{position:sticky;top:84px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.busca-lado-lista h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-soft);margin:0 0 8px}
.busca-atalho{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;color:var(--fg);text-decoration:none;font-size:14px}
.busca-atalho:hover{background:var(--panel-2)}
.busca-atalho b{font-size:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:1px 9px}
.busca-atalho.vazio{color:var(--fg-soft)}
.busca-bloco.destaque{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){.busca-grade{grid-template-columns:1fr}.busca-lado-lista{position:static;display:flex;flex-wrap:wrap;gap:6px}.busca-lado-lista h2{width:100%}}

/* A borda colorida da IA ganha um carrossel: as cores saem do topo e dão a volta inteira, sem parar.
   Vale para a janelinha, para o rostinho do botão e para a tela cheia da IA. Parada para quem prefere menos movimento. */
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes iaGiro{to{--giro:360deg}}
.iaf::after,.iaf-orbe.com-mascote::after,.iaim::after{
  background:conic-gradient(from var(--giro),#f9a8d4,#fdba74,#86efac,#93c5fd,#c4b5fd,#f9a8d4);
  animation:iaGiro 7s linear infinite;opacity:.95;will-change:auto}
.iaim::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;padding:3px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (prefers-reduced-motion:reduce){.iaf::after,.iaf-orbe.com-mascote::after,.iaim::after{animation:none}}

/* Ícone da IA: seta azul que sobe, com quatro brilhos que piscam em sequência */
.iaico{width:22px;height:22px;display:block;overflow:visible}
.iaico-seta{fill:#3b8bff;transform-box:fill-box;transform-origin:center;animation:iaicoSobe 2.6s ease-in-out infinite}
.iaico-brilho{fill:#8fd3ff;transform-box:fill-box;transform-origin:center;opacity:.25;animation:iaicoPisca 1.8s ease-in-out infinite}
@keyframes iaicoSobe{0%,100%{transform:translateY(1px)}50%{transform:translateY(-1.4px)}}
@keyframes iaicoPisca{0%,100%{opacity:.2;transform:scale(.45)}50%{opacity:1;transform:scale(1.15)}}
.lateral a .iaico,.menu a .iaico{flex:0 0 auto}
.ia-botao .iaico{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.iaico-seta,.iaico-brilho{animation:none;opacity:1}}

/* O "+" para anexar um arquivo para a IA ler, e o arquivo escolhido */
.iaf-anexo-mais{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.iaf-anexo-mais:hover{border-color:var(--accent)}
.iaim .iaf-anexo-mais{border-color:rgba(140,180,255,.35);background:rgba(20,40,90,.35);color:#9dbfff}
.iaf-anexo{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.iaf-anexo[hidden]{display:none}
.iaf-anexo-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 4px 3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);font-size:12.5px}
.iaim .iaf-anexo-chip{border-color:rgba(140,180,255,.35);background:rgba(20,40,90,.45);color:#cfe0ff}
.iaf-anexo-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.iaf-anexo-x{border:0;background:none;color:inherit;font-size:16px;line-height:1;cursor:pointer;width:22px;height:22px;border-radius:50%}
.iaf-anexo-x:hover{background:rgba(127,127,127,.25)}
.iaf-rodape{align-items:center}

/* Conversa da tarefa em formato de chat: caixa arredondada, ferramentas embaixo e botão de enviar */
.chat-caixa{display:block!important;position:relative;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:10px 12px 8px;margin-top:10px}
.chat-caixa:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.chat-campo{width:100%;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;resize:none!important;font:inherit;color:var(--fg);padding:2px 0 6px;min-height:44px}
.chat-barra{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-ferramentas{display:flex;align-items:center;gap:4px}
.chat-ferr{width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--fg-soft);display:grid;place-items:center;cursor:pointer}
.chat-ferr:hover:not(:disabled){background:var(--panel-2);color:var(--fg)}
.chat-ferr:disabled{opacity:.4;cursor:not-allowed}
.chat-mais-botao{background:var(--panel-2)}
.chat-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.chat-mic.ouvindo{color:#fff;background:#e5484d;animation:chatPulsa 1.2s ease-in-out infinite}
@keyframes chatPulsa{50%{box-shadow:0 0 0 6px rgba(229,72,77,.25)}}
.chat-enviar{width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--fg-soft);display:grid;place-items:center;cursor:pointer}
.chat-enviar:hover:not(:disabled){color:var(--accent)}
.chat-enviar:disabled{opacity:.4;cursor:not-allowed}
.chat-painel{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:6px;margin:4px 0 6px;max-height:190px;overflow:auto}
.chat-painel[hidden]{display:none}
.chat-mais,.chat-lista-pessoas{display:flex;flex-direction:column;gap:2px}
.chat-mais button,.chat-lista-pessoas button{border:0;background:none;text-align:left;padding:7px 10px;border-radius:8px;font:inherit;color:var(--fg);cursor:pointer}
.chat-mais button:hover,.chat-lista-pessoas button:hover{background:var(--panel-2)}
.chat-emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.chat-emojis button{border:0;background:none;font-size:20px;padding:4px;border-radius:8px;cursor:pointer}
.chat-emojis button:hover{background:var(--panel-2)}
@media (prefers-reduced-motion:reduce){.chat-mic.ouvindo{animation:none}}

/* ===== Perfil e selos de conquista ===== */
.mp{max-width:1200px;margin:0 auto;padding-bottom:60px}
.mp-capa{height:200px;border-radius:0 0 18px 18px;overflow:hidden;background:#0d2b2f}
.mp-capa svg{display:block;width:100%;height:100%}
.mp-cab{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;padding:0 24px;margin-top:-64px;position:relative}
.mp-avatar{width:128px!important;height:128px!important;font-size:42px!important;border:6px solid var(--ink);box-shadow:0 6px 20px rgba(13,43,47,.2);flex:0 0 auto}
.mp-quem{flex:1 1 320px;min-width:0;margin-top:76px}
.mp-quem h1{margin:0;font-size:30px;line-height:1.15;color:var(--fg)}
.mp-quem p{margin:6px 0 0;font-size:16px;color:var(--fg-soft)}
.mp-quem small{display:block;margin-top:4px;font-size:13.5px;color:var(--fg-faint)}
.mp-cab-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:76px}
.mp-ver{font-size:13px;color:var(--fg-soft);display:flex;flex-direction:column;gap:3px}
.mp-ver select{font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg);min-height:40px}
.mp-corpo{display:flex;flex-wrap:wrap;gap:22px;padding:22px 24px 0;align-items:flex-start}
.mp-lado{flex:1 1 280px;max-width:330px;display:flex;flex-direction:column;gap:16px}
.mp-principal{flex:999 1 540px;min-width:0;display:flex;flex-direction:column;gap:16px}
.mp-cartao{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.mp-cartao h2{margin:0;font-size:19px;color:var(--fg)}
.mp-lado .mp-cartao h2{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:12px}
.mp-titulo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px}
.mp-titulo span{font-size:13.5px;color:var(--fg-soft)}
.mp-cartao dl{margin:0;display:grid;gap:10px}
.mp-cartao dt{font-size:12px;color:var(--fg-faint)}
.mp-cartao dd{margin:0;font-size:15px;color:var(--fg);word-break:break-word}
.mp-athenas{background:#0d2b2f;color:#e9fbf7;border-radius:16px;padding:20px}
.mp-athenas h2{margin:0 0 8px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#8fdcca}
.mp-athenas p{margin:0 0 14px;font-size:15px;line-height:1.5}
.mp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mp-tile{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel-2);display:flex;flex-direction:column;gap:2px}
.mp-tile span{font-size:12.5px;color:var(--fg-soft)}
.mp-tile b{font-size:26px;line-height:1.2;color:var(--fg)}
.mp-tile small{font-size:12px;color:var(--fg-faint)}
.mp-sub{margin:16px 0 8px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-soft)}
.mp-selos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.mp-selo{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px;opacity:.78}
.mp-selo.ganho{opacity:1;border-color:#e3b53c;background:color-mix(in srgb,#f5c542 10%,var(--panel))}
.mp-selo-img{width:44px;flex:0 0 auto;filter:grayscale(1) opacity(.55)}
.mp-selo.ganho .mp-selo-img{filter:none}
.mp-selo-img svg{display:block;width:100%;height:auto}
.mp-selo-txt{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px}
.mp-selo-txt b{font-size:14.5px;color:var(--fg)}
.mp-selo-txt span,.mp-selo-txt small{color:var(--fg-soft)}
.mp-ok{color:#8a5d00!important;font-weight:600}
.mp-barra{height:6px;border-radius:99px;background:var(--panel-3);overflow:hidden;margin-top:4px}
.mp-barra span{display:block;height:100%;background:#0b7f6c;border-radius:99px}
.mp-mapa-rolagem{overflow-x:auto;padding-bottom:6px}
.mp-mapa{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,11px);grid-auto-columns:11px;gap:3px;width:max-content}
.mp-mapa i,.mp-legenda i{width:11px;height:11px;border-radius:3px;display:block}
.mp-vazio{background:transparent}
.mp-n0{background:var(--panel-3)}.mp-n1{background:#c6efe6}.mp-n2{background:#8fdcca}.mp-n3{background:#3cb89f}.mp-n4{background:#0b7f6c}
.mp-legenda{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;color:var(--fg-soft)}
.mp-abas-cartao{padding:0;overflow:hidden}
.mp-abas{display:flex;flex-wrap:wrap;gap:2px;padding:10px 14px 0;border-bottom:1px solid var(--line)}
.mp-aba{border:0;background:transparent;font:inherit;font-size:15px;color:var(--fg-soft);padding:11px 14px;border-bottom:3px solid transparent;cursor:pointer;min-height:44px}
.mp-aba.ativa{color:var(--accent-ink,#0b6b5b);font-weight:700;border-bottom-color:#0b7f6c}
.mp-aba-corpo{padding:16px 20px 20px}
.mp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.mp-chip{border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer;min-height:40px}
.mp-chip.ativo{background:#0b7f6c;border-color:#0b7f6c;color:#fff}
.mp-lista{display:flex;flex-direction:column}
.mp-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.mp-item-txt{flex:1 1 auto;min-width:0;font-size:15px}
.mp-item-txt small{display:block;color:var(--fg-soft);font-size:13px;margin-top:2px}
.mp-item time{font-size:13px;color:var(--fg-soft);white-space:nowrap}
.mp-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:#e4f6f2;color:#0b6b5b}
.mp-ico.t-conta{background:#e8efff;color:#2347a8}.mp-ico.t-lead{background:#f0e9ff;color:#5b2bb0}.mp-ico.t-tarefa{background:#fff1db;color:#8a4b08}
.mp-caixa{width:20px;height:20px;border-radius:6px;border:2px solid #b45309;flex:0 0 auto}
.mp-caixa.feita{border-color:#0b7f6c;background:#0b7f6c}
.mp-tabela{overflow-x:auto}
.mp-tabela table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
.mp-tabela th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-soft);padding:6px 8px}
.mp-tabela td{padding:11px 8px;border-top:1px solid var(--line)}
.mp-tabela .dir{text-align:right}
.mp-vazio-txt{margin:6px 0;color:var(--fg-soft)}
@media (max-width:760px){.mp-quem{margin-top:0;flex-basis:100%}.mp-cab-acoes{margin-top:0}.mp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.mp-avatar{width:100px!important;height:100px!important;font-size:34px!important}}

/* A comemoração do selo: prêmio dourado pulsando, raios girando e confete */
.selo-festa{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(3,12,14,.74);animation:seloFundo .35s ease both;padding:20px}
.selo-festa.saindo{animation:seloSai .26s ease both}
.selo-confete{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.selo-confete i{position:absolute;top:-24px;border-radius:2px;animation:seloQueda linear both}
.selo-cartao{position:relative;width:min(440px,100%);text-align:center;background:var(--panel);color:var(--fg);border-radius:22px;padding:30px 26px 24px;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:seloEntra .55s cubic-bezier(.2,1.3,.4,1) both;overflow:hidden}
.selo-raios{position:absolute;left:50%;top:128px;width:520px;height:520px;margin:-260px 0 0 -260px;background:repeating-conic-gradient(from 0deg,rgba(245,197,66,.34) 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 68%);mask:radial-gradient(circle,#000 0,transparent 68%);animation:seloGira 14s linear infinite}
.selo-palco{position:relative;width:150px;margin:0 auto 8px;animation:seloPulsa 1.5s ease-in-out infinite .5s}
.selo-medalha{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(160,100,0,.4))}
.selo-brilho{position:absolute;width:16px;height:16px;background:#fff7c9;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:seloPisca 1.3s ease-in-out infinite}
.selo-brilho.b1{left:-6px;top:20px}.selo-brilho.b2{right:-4px;top:6px;animation-delay:.4s}.selo-brilho.b3{right:6px;top:92px;animation-delay:.8s}
.selo-chamada{position:relative;margin:6px 0 2px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a5d00;font-weight:700}
.selo-nome{position:relative;margin:0;font-size:28px;line-height:1.15}
.selo-frase{position:relative;margin:8px 0 18px;font-size:15.5px;color:var(--fg-soft)}
.selo-acoes{position:relative;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@keyframes seloFundo{from{opacity:0}to{opacity:1}}
@keyframes seloSai{to{opacity:0}}
@keyframes seloEntra{from{opacity:0;transform:scale(.6) translateY(30px)}to{opacity:1;transform:none}}
@keyframes seloPulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes seloGira{to{transform:rotate(360deg)}}
@keyframes seloPisca{0%,100%{opacity:.15;transform:scale(.4)}50%{opacity:1;transform:scale(1.2)}}
@keyframes seloQueda{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(var(--giro));opacity:.9}}
@media (prefers-reduced-motion:reduce){.selo-festa,.selo-cartao,.selo-raios,.selo-palco,.selo-brilho,.selo-confete i{animation:none!important}.selo-confete{display:none}}

/* Mensagem de voz: gravar, conferir e ouvir */
.grav{margin:8px 0}
.grav-botao{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;cursor:pointer;min-height:40px}
.grav-botao:hover{border-color:var(--accent)}
.grav-botao.parar{background:#e5484d;border-color:#e5484d;color:#fff;margin-left:auto}
.grav-botao.fino{background:transparent}
.grav-linha{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.grav-ponto{width:12px;height:12px;border-radius:50%;background:#e5484d;animation:gravPulsa 1s ease-in-out infinite}
.grav-tempo{font-variant-numeric:tabular-nums;font-size:16px}
.grav-dica{font-size:13px;color:var(--fg-soft)}
.grav-preview{height:40px;max-width:100%}
.grav-ouvir{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);border-radius:999px;padding:6px 14px 6px 10px;font:inherit;font-size:14px;cursor:pointer;min-height:36px}
.grav-ouvir small{color:var(--fg-soft)}
.grav-ouvir.tocando{border-color:#0b7f6c;color:#0b6b5b}
.grav-tocador{margin-top:6px}
@keyframes gravPulsa{50%{opacity:.35;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.grav-ponto{animation:none}}

/* Busca: usa a largura da tela. Os blocos de resultado ficam lado a lado quando há espaço. */
.busca-grade{grid-template-columns:230px minmax(0,1fr);gap:18px}
.busca-corpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:14px;align-items:start}
.busca-corpo .busca-bloco{margin-bottom:0}
@media (max-width:760px){.busca-pagina{padding:0 12px}.busca-corpo{grid-template-columns:1fr}}

/* A seta da IA: maior, com uma aura brilhante que sobe devagar na cor dela */
.iaico{width:26px;height:26px}
.lateral a .iaico{width:22px;height:22px;opacity:1}
.iaico-seta{filter:drop-shadow(0 0 3px rgba(59,139,255,.85));animation:iaicoSobe 2.6s ease-in-out infinite,iaicoBrilha 2.6s ease-in-out infinite}
.iaico-aura{fill:#4aa0ff;opacity:0;transform-box:fill-box;transform-origin:center;filter:blur(1.6px);animation:iaicoAura 2.8s ease-out infinite}
.iaico-aura.a2{animation-delay:1.4s}
@keyframes iaicoBrilha{0%,100%{filter:drop-shadow(0 0 2px rgba(59,139,255,.6))}50%{filter:drop-shadow(0 0 7px rgba(110,190,255,1))}}
@keyframes iaicoAura{0%{opacity:0;transform:translateY(4px) scale(.7)}35%{opacity:.7}100%{opacity:0;transform:translateY(-11px) scale(1.25)}}
@media (prefers-reduced-motion:reduce){.iaico-aura{animation:none;opacity:.25}.iaico-seta{animation:none}}

/* Busca: a lista do lado escolhe a área, e só o meio muda */
button.busca-atalho{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.busca-atalho.ativo{background:var(--accent-dim,var(--panel-2));color:var(--accent-ink,var(--fg));font-weight:700}
.busca-atalho.ativo b{background:var(--accent,#0b7f6c);border-color:transparent;color:#fff}
.busca-corpo.so-um{grid-template-columns:1fr}
.busca-corpo.so-um .busca-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:8px}

/* Tarefa: a conversa fica sempre à vista; a seta na linha que a separa da tarefa amplia a conversa */
.tarefa-corpo{transition:grid-template-columns .5s cubic-bezier(.2,.9,.3,1.04)}
.tarefa-chat{position:relative}
.tarefa-corpo[data-chat="largo"]{grid-template-columns:minmax(0,38fr) minmax(0,62fr)!important}
.tarefa-puxa{position:absolute;left:-16px;top:10px;z-index:4;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong,var(--line));background:var(--panel);color:var(--accent-ink,var(--accent));box-shadow:0 2px 8px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .2s,box-shadow .2s}
.tarefa-puxa:hover{transform:scale(1.1);box-shadow:0 3px 12px rgba(0,0,0,.26)}
.tarefa-puxa svg{transition:transform .5s cubic-bezier(.2,.9,.3,1.05)}
.tarefa-corpo[data-chat="largo"] .tarefa-puxa svg{transform:rotate(180deg)}
.janela.gaveta .tarefa-puxa{display:none}
@media (max-width:900px){.tarefa-puxa{display:none}.tarefa-corpo[data-chat="largo"]{grid-template-columns:1fr!important}}
@media (prefers-reduced-motion:reduce){.tarefa-corpo{transition:none}.tarefa-puxa svg{transition:none}}

/* O "+" de anexar fica ao lado do microfone */
.iaim-mic-linha{display:flex;align-items:center;justify-content:center;gap:22px}
.iaim-mic-linha .iaim-anexo-mais{width:42px;height:42px;font-size:22px;margin-top:0}

/* Capa do perfil: trocar e escolher */
.mp-capa{position:relative}
.mp-capa-foto{display:block;width:100%;height:100%;object-fit:cover}
.mp-capa-troca{position:absolute;right:16px;top:14px;border:1px solid rgba(255,255,255,.55);background:rgba(8,28,31,.55);color:#fff;border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;cursor:pointer;min-height:40px;backdrop-filter:blur(4px)}
.mp-capa-troca:hover{background:rgba(8,28,31,.8)}
.mp-capa-dica{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--fg-soft)}
.mp-modelos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.mp-modelo{border:2px solid var(--line);border-radius:12px;background:var(--panel);padding:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;font:inherit;color:var(--fg)}
.mp-modelo svg{display:block;width:100%;height:56px}
.mp-modelo span{padding:6px 8px;font-size:13px;text-align:left}
.mp-modelo.ativo{border-color:#0b7f6c;box-shadow:0 0 0 3px rgba(11,127,108,.2)}
.mp-foto-linha{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mp-foto-nome{font-size:13px;color:var(--fg-soft)}
.mp-previa{height:96px;border-radius:12px;overflow:hidden;background:#0d2b2f}
.mp-previa svg{display:block;width:100%;height:100%}

/* Atividade: 10 itens e a setinha para mostrar o resto */
.mp-lista .mp-extra{display:none}
.mp-lista.expandida .mp-extra{display:flex}
.mp-mais{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:6px;padding:10px;border:1px dashed var(--line);border-radius:12px;background:transparent;color:var(--accent-ink,var(--accent));font:inherit;font-size:14.5px;cursor:pointer;min-height:44px}
.mp-mais:hover{background:var(--panel-2)}
.mp-mais svg{transition:transform .3s}
.mp-mais[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Planner: um respiro entre a linha de cima e as abas de área */
.abas-setor{margin-top:16px}

/* Sino: "marcar todas como lidas" lá em cima, ao lado do título */
.sino-painel header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sino-limpar-topo{border:0;background:none;color:var(--accent-forte,var(--accent));font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:5px 8px;border-radius:8px;white-space:nowrap}
.sino-limpar-topo:hover{background:var(--panel-2)}

/* Calendário: a folha que vira, como a página de um livro */
.folha-vira{position:fixed;z-index:60;margin:0!important;pointer-events:none;background:var(--ink);overflow:hidden;backface-visibility:hidden;will-change:transform;box-shadow:0 0 30px rgba(0,0,0,.22)}
.folha-vira::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.3));opacity:0;animation:folhaSombra .72s ease-in forwards}
.folha-vira.prox{transform-origin:left center;animation:folhaProx .72s cubic-bezier(.55,.05,.3,1) forwards}
.folha-vira.ant{transform-origin:right center;animation:folhaAnt .72s cubic-bezier(.55,.05,.3,1) forwards}
.folha-vira.ant::after{background:linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.3))}
@keyframes folhaProx{0%{transform:perspective(1500px) rotateY(0)}100%{transform:perspective(1500px) rotateY(-112deg)}}
@keyframes folhaAnt{0%{transform:perspective(1500px) rotateY(0)}100%{transform:perspective(1500px) rotateY(112deg)}}
@keyframes folhaSombra{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.folha-vira{display:none}}

/* Títulos em negrito: o das seções e o de cada campo das fichas (oportunidade, conta, contrato...) */
.bloco > header h2{font-weight:800}
.par dt{font-weight:700;color:var(--fg-soft)}
.campo label{font-weight:700}

/* Conta: e-mails com o cliente (linha do tempo) */
.email-linha-tempo{display:flex;flex-direction:column;margin-bottom:10px}
.email-item{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
.email-item:first-child{border-top:0}
.email-ponto{width:10px;height:10px;border-radius:50%;background:var(--line-strong,#b9c1cd);margin-top:6px;flex:0 0 auto}
.email-ponto.aberto{background:#0b7f6c}
.email-ponto.copia{background:transparent;border:2px solid #7c8796}
.email-txt{min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13.5px}
.email-txt b{font-size:14px;word-break:break-word}
.email-txt small{color:var(--fg-soft);font-size:12.5px}
.email-nota.aberto{color:#0b6b5b!important}
.email-vazio{margin:0;color:var(--fg-soft);font-size:14px}
.email-linha-tempo .email-extra{display:none}
.email-linha-tempo.expandida .email-extra{display:flex}
.email-mais{display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--accent-forte,var(--accent));font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:4px 0 10px}
.email-mais svg{transition:transform .3s}
.email-mais[aria-expanded="true"] svg{transform:rotate(180deg)}
.email-aviso{margin:10px 0 0;font-size:12.5px;color:var(--fg-faint);line-height:1.45}

.hero-titulo h1 a.hero-ficha{color:inherit;text-decoration:none}
.hero-titulo h1 a.hero-ficha:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* Linha do tempo: só a última alteração e uma setinha para abrir o resto */
.evento.evento-extra{display:none}
.eventos-abertos .evento.evento-extra{display:flex}
.evento-repete{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;background:var(--panel-3);color:var(--fg-soft);font-size:11.5px;font-weight:700}
.evento-mais{display:flex;align-items:center;gap:6px;margin:8px 0 2px;border:0;background:none;color:var(--accent-forte,var(--accent));font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:6px 0}
.evento-mais svg{transition:transform .3s}
.evento-mais[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Genie: a janela sugada para o dia do calendário, e o dia que pisca ao receber a tarefa */
.genie-voando{box-shadow:0 20px 60px rgba(0,0,0,.35)}
.genie-chegou{animation:genieChegou 1s ease-out}
@keyframes genieChegou{0%{box-shadow:0 0 0 0 rgba(11,127,108,.7);background:color-mix(in srgb,#0b7f6c 22%,transparent)}60%{box-shadow:0 0 0 14px rgba(11,127,108,0)}100%{box-shadow:0 0 0 0 rgba(11,127,108,0)}}
@media (prefers-reduced-motion:reduce){.genie-chegou{animation:none}}

/* ===== Oportunidades (tabela): linhas em cartões soltos, avatar com inicial e selos suaves ===== */
.barra-op .titulo-pagina{font-size:26px;font-weight:800;letter-spacing:-.02em}
.barra-op .barra-fim{gap:14px;align-items:center}
.barra-op .resumo{gap:0}
.barra-op .resumo > div{padding:0 18px}
.barra-op .resumo > div + div{border-left:1px solid var(--line)}
.barra-op .resumo > div:first-child{padding-left:0}
.barra-op .resumo b{font-size:19px}
.barra-op .botao.fino{border-radius:999px;padding:9px 18px;font-weight:500}
.barra-op .botao.verde{border-radius:999px;padding:11px 20px;font-weight:700}

.envolve-cartoes{padding:6px 18px 40px}
table.lista-cartoes{border-collapse:separate;border-spacing:0 9px}
table.lista-cartoes th{background:transparent;border:0;padding:8px 14px;font-size:11px;letter-spacing:1.4px;color:var(--fg-faint)}
table.lista-cartoes thead tr{background:transparent}
table.lista-cartoes tbody tr{background:transparent;box-shadow:none}
table.lista-cartoes td{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 14px;font-size:13.5px}
table.lista-cartoes tr:last-child td{border-bottom:1px solid var(--line)}
table.lista-cartoes td:first-child{border-left:1px solid var(--line);border-radius:16px 0 0 16px}
table.lista-cartoes td:last-child{border-right:1px solid var(--line);border-radius:0 16px 16px 0}
table.lista-cartoes tbody tr{transition:transform .15s var(--ease)}
table.lista-cartoes tbody tr:hover{background:transparent}
table.lista-cartoes tbody tr:hover td{background:var(--panel-2);border-color:var(--line-strong,var(--line))}
table.lista-cartoes tbody tr:hover{transform:translateY(-1px)}
table.lista-cartoes td.empresa{display:table-cell}
table.lista-cartoes td.empresa .op-avatar{display:inline-grid;vertical-align:middle;place-items:center;width:38px;height:38px;border-radius:11px;font-weight:800;font-size:15px;margin-right:12px}
table.lista-cartoes td.empresa .op-nome{vertical-align:middle;font-weight:700;font-size:14px}
table.lista-cartoes td.fila-pega{width:30px;padding-right:0;color:var(--fg-faint)}
/* Selos: fundo suave na própria cor do estado, com uma bolinha, sem a borda */
table.lista-cartoes .selo.st{border:0;background:color-mix(in srgb,var(--cor) 14%,transparent);padding:5px 12px 5px 10px;border-radius:999px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
table.lista-cartoes .selo.st::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cor);flex:0 0 auto}

/* ===== Tela cheia da IA no visual do Cronos.html: azul-esverdeado, título grande, sem o robozinho ===== */
.iaim{background:radial-gradient(ellipse at 50% 48%,#0a2f3d 0%,#05202b 38%,#030f14 72%);color:#e8f0ff}
.iaim-peq{border-color:#1f8a99;background:#05212baa;color:#d6f7fc}
.iaim-peq:hover,.iaim-peq:focus-visible{background:#0d3b47;color:#fff}
.iaim-menu{background:#06242e;border-color:#1f8a99}
.iaim-menu button{color:#d6f7fc}
.iaim-menu button:hover{background:#0d3b47}
.iaim-topo{gap:8px}
.iaim-topo .persona-nome{font:800 clamp(30px,4.4vw,46px)/1.1 'Cronos','Orbitron','Sora',system-ui,sans-serif;letter-spacing:.3em;padding-left:.3em;color:#eafcff;text-shadow:0 0 22px #2bd0e0,0 0 48px #2bd4e088;cursor:default}
.iaim-topo .persona-nome:hover{color:#eafcff}
.iaim-rotulo{font:600 12px/1 'Cronos','Orbitron','JetBrains Mono',ui-monospace,monospace;letter-spacing:.5em;text-indent:.5em;color:#2bd0e0}
.iaim[data-modo]:not([data-modo="pronta"]) .iaim-rotulo{color:#a5f1fa}
.iaim-ondas i{background:radial-gradient(circle,#2bd0e0 1.3px,transparent 1.6px);background-size:8px 4px;height:4px;width:8px;border-radius:0;transform:none;opacity:.75}
.iaim-voce{color:#8fc9d1}
.iaim-legenda{color:#f2fdff}
.iaim-ir{background:#127a8c}
.iaim-ir:hover{background:#2bd0e0;color:#03222a}
.iaim-chip{border-color:#1f8a99;background:#05212baa;color:#d6f7fc}
.iaim-chip:hover,.iaim-chip:focus-visible{background:#0d3b47;border-color:#67e4f2;color:#fff}
.iaim-mic{border:1px solid #2bd0e0;background:radial-gradient(circle at 50% 35%,#2bd4e0,#127a8c);box-shadow:0 0 0 6px #2bd4e033,0 0 30px #2bd4e088}
.iaim-mic:focus-visible{outline-color:#67e4f2}
.iaim[data-modo="ouvindo"] .iaim-mic{background:radial-gradient(circle at 50% 35%,#67e4f2,#127a8c);border-color:#67e4f2;box-shadow:0 0 0 10px #2bd4e044,0 0 46px #67e4f2cc;animation:iaimMicPulsa 1.2s ease-in-out infinite}
@keyframes iaimMicPulsa{50%{transform:scale(1.1)}}
.iaim-anel,.iaim[data-modo="ouvindo"] .iaim-anel{border-color:#67e4f2}
.iaim-digitar-liga{color:#67e4f2}
.iaim-digitar-liga:hover{color:#c4f6fc}
.iaim-digitar input{border-color:#1f8a99;background:#05212bcc;color:#fff}
.iaim-digitar input:focus{outline-color:#67e4f2}
.iaim-digitar button{background:#127a8c}
.iaim .iaf-anexo-mais{border-color:#1f8a99;background:#05212baa;color:#d6f7fc}
.iaim .iaf-anexo-chip{border-color:#1f8a99;background:#05212bcc;color:#d6f7fc}
@media (prefers-reduced-motion:reduce){.iaim[data-modo="ouvindo"] .iaim-mic{animation:none}}


/* ============================================================
   CELULAR -- o CRM como app (até 760 px; mobile.js liga a classe .mob)
   Barra de abas embaixo, folha "Mais", botão da Athenas, cartões no
   lugar das tabelas. O Fluxo de Caixa mantém o visual e as animações
   do computador; só a grade se reorganiza.
   ============================================================ */
.mob-abas,.mob-folha,.mob-athenas,.mob-ola,.mob-hero{display:none}

@media (max-width:760px){
  html.mob body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  html.mob .lateral{display:none}
  html.mob .rodape-crm{display:none}

  /* título da tela, com o "Olá" em cima */
  html.mob .barra{flex-wrap:wrap;align-items:flex-end;padding:14px 16px 8px;background:transparent;border:0}
  html.mob .barra .mob-ola{display:block;flex:0 0 100%;font-size:13px;color:var(--fg-faint);font-weight:500;margin-bottom:2px}
  html.mob .titulo-pagina{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0}

  /* barra de abas */
  html.mob .mob-abas{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .mob-aba{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;border:0;background:none;color:var(--fg-faint);font:inherit;
    font-size:11px;font-weight:600;text-decoration:none;position:relative;cursor:pointer;
  }
  .mob-aba-ico{display:grid;place-items:center;width:46px;height:28px;border-radius:99px;transition:background .2s}
  .mob-aba-ico svg{width:21px;height:21px}
  .mob-aba.atual{color:var(--accent-forte)}
  .mob-aba.atual .mob-aba-ico{background:var(--accent-dim)}
  .mob-aba-rot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mob-badge{
    position:absolute;top:2px;left:calc(50% + 8px);min-width:17px;height:17px;padding:0 5px;
    border-radius:99px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:700;
    display:grid;place-items:center;box-shadow:0 0 0 2px var(--panel);
  }

  /* folha "Mais" */
  html.mob .mob-folha{
    position:fixed;inset:0;z-index:75;display:flex;align-items:flex-end;
    background:rgba(8,12,16,0);transition:background .22s;
  }
  html.mob .mob-folha[hidden]{display:none}
  html.mob .mob-folha.aberta{background:rgba(8,12,16,.45)}
  .mob-folha-corpo{
    width:100%;background:var(--panel);border-radius:22px 22px 0 0;
    padding:10px 16px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .24s var(--ease);
    max-height:80vh;overflow:auto;
  }
  .mob-folha.aberta .mob-folha-corpo{transform:none}
  .mob-folha-alca{display:block;width:40px;height:4px;border-radius:99px;background:var(--line-strong);margin:0 auto 16px}
  .mob-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .mob-tile{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:16px 6px 12px;border-radius:18px;background:var(--panel-2);
    border:1px solid var(--line);color:var(--fg);text-decoration:none;
    font-size:12.5px;font-weight:600;text-align:center;
  }
  .mob-tile.atual{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-forte)}
  .mob-tile-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .mob-tile-ico svg{width:22px;height:22px}
  .mob-tile .mob-badge{top:8px;left:auto;right:10px}

  /* botão da Athenas */
  html.mob .mob-athenas{
    display:flex;align-items:center;gap:10px;position:fixed;right:14px;
    bottom:calc(84px + env(safe-area-inset-bottom));z-index:58;
    padding:6px 18px 6px 6px;border:1px solid rgba(43,208,224,.45);border-radius:99px;
    background:#05212b;color:#e8fbff;font:inherit;cursor:pointer;
    box-shadow:0 10px 26px -8px rgba(5,33,43,.7),0 0 18px rgba(43,208,224,.25);
  }
  .mob-athenas[hidden]{display:none !important}
  .mob-athenas-av{
    width:40px;height:40px;border-radius:50%;padding:2px;flex:0 0 auto;
    background:conic-gradient(from 0deg,#2bd0e0,#7c5cff,#ff7ab6,#ffc857,#2bd0e0);
    animation:mob-gira 6s linear infinite;
  }
  .mob-athenas-av img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #05212b;animation:mob-gira 6s linear infinite reverse}
  @keyframes mob-gira{to{transform:rotate(360deg)}}
  .mob-athenas-tx{display:flex;flex-direction:column;text-align:left;line-height:1.15}
  .mob-athenas-tx b{font-size:11px;letter-spacing:.18em}
  .mob-athenas-tx small{font-size:12.5px;color:#9fe9f2}
  html.mob #botaoIaChat{display:none}

  /* resumo do pipeline */
  html.mob .mob-hero{
    display:block;position:relative;overflow:hidden;margin:4px 16px 14px;padding:18px 18px 16px;
    border-radius:22px;color:#eafcff;
    background:radial-gradient(120% 140% at 85% 0%,#0f4a5a 0%,#0a2f3d 45%,#05202b 100%);
    box-shadow:0 14px 30px -16px rgba(5,33,43,.8);
  }
  .mob-hero-rot{display:block;font-size:11px;letter-spacing:.2em;color:#7fdfec;font-weight:700}
  .mob-hero > b{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;margin:6px 0 14px}
  .mob-hero-n{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
  .mob-hero-n b{display:block;font-size:20px;font-weight:800}
  .mob-hero-n span{font-size:12px;color:#9fd8e0}
  .mob-hero-marca{position:absolute;right:-10px;top:-10px;width:90px;height:90px;opacity:.08;pointer-events:none}
  .mob-hero-marca svg{width:100%;height:100%;color:#fff}

  /* kanban: uma coluna por vez, encaixando ao rolar */
  html.mob .quadro{scroll-snap-type:x mandatory;scroll-padding:0 16px;padding:4px 16px 16px;gap:12px}
  html.mob .quadro .coluna{scroll-snap-align:center;border-radius:20px;flex-basis:84vw;width:84vw;border:0;box-shadow:0 8px 22px -16px rgba(0,0,0,.35)}

  /* tabelas viram cartões */
  html.mob #palco table.lista,html.mob #palco table.lista tbody{display:block;width:100%}
  html.mob #palco table.lista thead{display:none}
  html.mob #palco table.lista tr{
    display:flex;flex-wrap:wrap;gap:4px 12px;position:relative;
    margin:0 0 12px;padding:14px 14px 12px;background:var(--panel);
    border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px -14px rgba(0,0,0,.35);
  }
  html.mob #palco table.lista td{display:block;border:0;padding:0;background:none;width:auto;max-width:100%;font-size:13px}
  html.mob #palco table.lista td:first-child{flex:0 0 100%;font-size:16px;font-weight:700;margin-bottom:2px}
  html.mob #palco table.lista td[data-rot]:not(:first-child)::before{
    content:attr(data-rot);display:block;font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--fg-faint);font-weight:600;margin-bottom:1px;
  }
  html.mob #palco table.lista td:empty{display:none}
  html.mob .envolve-tabela{padding:4px 16px 16px;overflow:visible}

  /* links rápidos da conta: caixinhas arredondadas */
  html.mob .grade-links{gap:10px;background:transparent;padding:12px}
  html.mob .link-caixa{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  html.mob .link-rapido{padding:13px 12px;font-size:13px;font-weight:600;min-height:48px}

  /* fluxo de caixa: mesmo visual do computador, grade mais estreita */
  html.mob .fx-kpis,html.mob .fx-prev-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.mob .fx-grade2,html.mob .fx-grade3{grid-template-columns:minmax(0,1fr)}
  html.mob .fx-cab{flex-direction:column;align-items:stretch}
  html.mob .fx svg{max-width:100%}
}


/* ============================================================
   FLUXO DE CAIXA -- visual claro do desenho novo (cartões brancos,
   número grande, faixa de cor em cima de cada indicador).
   Só o visual muda: as animações (fx-sobe, fx-cresce, fx-marcha...) ficam
   como estavam. No tema escuro a tela continua escura.
   ============================================================ */
:root:not([data-tema="escuro"]) .fx{
  --fx-bg:transparent;
  --fx-card:#ffffff;
  --fx-linha:#e6ecee;
  --fx-linha-forte:#d5dee2;
  --fx-txt:#1b2830;
  --fx-suave:#5f7078;
  --fx-fraco:#7d8c94;
  --fx-e:#24c9b0;
  --fx-s:#ef5d73;
  --fx-p:#24c9b0;
  --fx-m:#6366f1;
  color-scheme:light;
  border:0;border-radius:0;padding:clamp(12px,2vw,24px) clamp(14px,2.4vw,28px) 32px;margin:0;
}
:root:not([data-tema="escuro"]) .fx::before{display:none}
:root:not([data-tema="escuro"]) .fx.fx-max{background:var(--bg,#fafbfc)}

:root:not([data-tema="escuro"]) .fx-titulo h1{font-weight:800;letter-spacing:-.02em}

/* abas e botões */
:root:not([data-tema="escuro"]) .fx-ctl{background:#fff;border:1px solid var(--fx-linha);border-radius:99px;padding:3px}
:root:not([data-tema="escuro"]) .fx-ctl button{border-radius:99px;color:var(--fx-suave);font-weight:600}
:root:not([data-tema="escuro"]) .fx-ctl button:hover{color:var(--fx-txt)}
:root:not([data-tema="escuro"]) .fx-ctl button[aria-pressed="true"]{
  background:#e3f7f3;color:#0b7d6e;box-shadow:inset 0 0 0 1px rgba(36,201,176,.5);
}
:root:not([data-tema="escuro"]) .fx-botao{border-radius:99px}
:root:not([data-tema="escuro"]) .fx-botao.primario{
  color:#fff;background:linear-gradient(135deg,#2bd4b9,#0e9c89);
  box-shadow:0 8px 20px -10px rgba(14,156,137,.7);
}
:root:not([data-tema="escuro"]) .fx-botao.fantasma{background:#fff;border-color:var(--fx-linha-forte);color:var(--fx-txt)}
:root:not([data-tema="escuro"]) .fx-botao.fantasma:hover:not(:disabled){background:#f1f6f7;border-color:#b9c6cb}
:root:not([data-tema="escuro"]) .fx-botao.perigo{color:#d6334e;border-color:rgba(214,51,78,.35)}

/* cartões brancos */
:root:not([data-tema="escuro"]) .fx-cartao,
:root:not([data-tema="escuro"]) .fx-kpi{
  background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--fx-linha);border-radius:16px;
  box-shadow:0 1px 3px rgba(31,50,60,.06);
}
:root:not([data-tema="escuro"]) .fx-cartao{padding:22px 26px 24px}
:root:not([data-tema="escuro"]) .fx-cab h2{font-size:16px;font-weight:700;letter-spacing:-.01em}
:root:not([data-tema="escuro"]) .fx-cab p{font-size:13px;color:var(--fx-fraco)}

/* indicadores: faixa colorida em cima, número grande */
:root:not([data-tema="escuro"]) .fx-kpis,
:root:not([data-tema="escuro"]) .fx-grade2,
:root:not([data-tema="escuro"]) .fx-grade3{gap:16px;margin-bottom:16px}
:root:not([data-tema="escuro"]) .fx-kpi{
  border-top:3px solid var(--cor,#24c9b0);padding:18px 22px;min-height:118px;
}
:root:not([data-tema="escuro"]) .fx-kpi::after{display:none}
:root:not([data-tema="escuro"]) .fx-kpi:hover{
  border-color:#bfe8e1;border-top-color:var(--cor,#24c9b0);
  box-shadow:0 10px 26px rgba(14,140,125,.16);transform:translateY(-2px);
}
:root:not([data-tema="escuro"]) .fx-kpi-rot{font-size:11px;font-weight:700;letter-spacing:.14em}
:root:not([data-tema="escuro"]) .fx-kpi-val{font-size:clamp(22px,2.1vw,26px);font-weight:700;letter-spacing:-.03em;margin:6px 0 2px}
:root:not([data-tema="escuro"]) .fx-kpi.ruim .fx-kpi-val{color:#d6334e}
:root:not([data-tema="escuro"]) .fx-kpi.bom .fx-kpi-val{color:#0f9d6e}
:root:not([data-tema="escuro"]) .fx-kpi-sub{font-size:12.5px}
:root:not([data-tema="escuro"]) .fx-delta.bom{color:#0f9d6e}
:root:not([data-tema="escuro"]) .fx-delta.ruim{color:#d6334e}

/* gráficos */
:root:not([data-tema="escuro"]) .fx-grade{stroke:#e9eff1;stroke-dasharray:none}
:root:not([data-tema="escuro"]) .fx-chave-trilho{background:#e6ecee}
:root:not([data-tema="escuro"]) .fx-vazio{color:var(--fx-fraco)}

/* Fluxo claro: o que ainda era escuro dentro dos gráficos, da tabela e dos filtros */
:root:not([data-tema="escuro"]) .fx-donut-val,
:root:not([data-tema="escuro"]) .fx-medidor-num{fill:#1b2830;color:#1b2830}
:root:not([data-tema="escuro"]) .fx-medidor-num{fill:#1b2830}
:root:not([data-tema="escuro"]) .fx-medidor-trilho{stroke:#e9eff1}
:root:not([data-tema="escuro"]) .fx-medidor-ponta{stroke:#fff}
:root:not([data-tema="escuro"]) .fx-medidor-marca{fill:#7d8c94}
:root:not([data-tema="escuro"]) .fx-radar-anel{stroke:#edf1f3}
:root:not([data-tema="escuro"]) .fx-radar-anel.g,
:root:not([data-tema="escuro"]) .fx-radar-marca{stroke:#c2cdd2}
:root:not([data-tema="escuro"]) .fx-radar-marca.m{stroke:#8a9aa2}
:root:not([data-tema="escuro"]) .fx-parte-barra,
:root:not([data-tema="escuro"]) .fx-legenda li s{background:#eef2f4}
:root:not([data-tema="escuro"]) .fx-legenda li.ativa,
:root:not([data-tema="escuro"]) .fx-legenda li:focus-visible{background:#f2f7f8}
:root:not([data-tema="escuro"]) .fx-legenda li i{box-shadow:none}
:root:not([data-tema="escuro"]) .fx-ponto,
:root:not([data-tema="escuro"]) .fx-ponto-proj,
:root:not([data-tema="escuro"]) .fx-ponto-meta{fill:#fff}
:root:not([data-tema="escuro"]) .fx-foco{stroke:#fff}
:root:not([data-tema="escuro"]) .fx-guia{stroke:#8a9aa2}
:root:not([data-tema="escuro"]) #fx-tab-resumo .e,
:root:not([data-tema="escuro"]) .fx-tab .e{color:#0f9d6e}
:root:not([data-tema="escuro"]) #fx-tab-resumo .s,
:root:not([data-tema="escuro"]) .fx-tab .s{color:#d6334e}
:root:not([data-tema="escuro"]) .fx-filtros select,
:root:not([data-tema="escuro"]) .fx-filtros input[type=date],
:root:not([data-tema="escuro"]) .fx-tab select,
:root:not([data-tema="escuro"]) .fx-tab input{background:#fff;border:1px solid var(--fx-linha-forte);border-radius:99px;color:var(--fx-txt)}
:root:not([data-tema="escuro"]) .fx-filtros select option,
:root:not([data-tema="escuro"]) .fx-tab select option{background:#fff;color:#1b2830}
:root:not([data-tema="escuro"]) .fx-tab td{border-bottom:1px solid #eef2f4}
:root:not([data-tema="escuro"]) .fx-tab tbody tr:hover{background:#f4fbfa}
:root:not([data-tema="escuro"]) .fx-tab th{color:var(--fx-fraco)}
:root:not([data-tema="escuro"]) .fx-donut .lado{opacity:.22}

/* ---------------- Receita Federal e quadro societário (desenho novo) ---------------- */
.rf-corpo .rf-cabeca{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  padding:12px 16px;border-radius:14px;background:var(--panel-2);margin-bottom:14px;
}
.rf-corpo .rf-cabeca .estado{font-weight:700;font-size:14.5px}
.rf-corpo .rf-cabeca .quando{margin-left:auto;font-size:12.5px;color:var(--fg-faint)}
.rf-corpo .cnae{
  margin:0;padding:14px 18px;border-radius:14px;
  background:#eaf8f6;border:1px solid #c6ece6;
}
.rf-corpo .cnae .codigo{font-size:13.5px;font-weight:700;color:#0b6b5f;margin-bottom:4px}
.rf-corpo .cnae p{margin:0;font-size:14.5px;color:var(--fg)}
.rf-corpo .pares{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px}
.rf-corpo .par dt{font-size:11px;letter-spacing:.12em;font-weight:700}
.rf-corpo .par dd{font-size:14px;font-weight:600}
@media (max-width:760px){.rf-corpo .pares{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rf-corpo .mapa-cabeca{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;color:var(--fg-faint)}
.rf-corpo .mapa-cabeca .botao{border-radius:99px;text-transform:none;letter-spacing:0;font-weight:600;font-size:13px;padding:7px 18px;background:var(--panel);color:var(--fg)}
.rf-socios{margin-top:20px;padding-top:0}
.rf-socios-tit{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--fg-faint);margin-bottom:10px}
.rf-socio{
  display:flex;align-items:center;gap:14px;margin-bottom:10px;padding:12px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
}
.rf-socio-av{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#d3f5ef;color:#0b4f46;font-weight:800;font-size:13px;
}
.rf-socio b{font-size:15px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rf-socio-q{margin-left:auto;font-size:13.5px;color:var(--fg-faint);white-space:nowrap}
.rf-fonte{margin:14px 0 0;color:var(--fg-faint);font-size:12.5px}

/* Fluxo claro: cabeçalho em uma faixa (título, abas e importar), como no desenho */
:root:not([data-tema="escuro"]) .fx-topo{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 calc(-1 * clamp(14px,2.4vw,28px)) 14px;
  padding:0 clamp(14px,2.4vw,28px) 14px;border-bottom:1px solid var(--fx-linha);
}
:root:not([data-tema="escuro"]) .fx-titulo,
:root:not([data-tema="escuro"]) .fx-acoes{display:contents}
:root:not([data-tema="escuro"]) .fx-titulo h1{font-size:22px;font-weight:800;order:0}
:root:not([data-tema="escuro"]) .fx-visoes{order:1;background:#eef2f4;border:0}
:root:not([data-tema="escuro"]) .fx-visoes button{padding:9px 20px;font-size:14px}
:root:not([data-tema="escuro"]) .fx-visoes button[aria-pressed="true"]{background:#fff;color:var(--fx-txt);box-shadow:0 1px 3px rgba(31,50,60,.14)}
:root:not([data-tema="escuro"]) .fx-periodos{order:2;background:#eef2f4;border:0}
:root:not([data-tema="escuro"]) .fx-periodos button[aria-pressed="true"]{background:#fff;color:var(--fx-txt);box-shadow:0 1px 3px rgba(31,50,60,.14)}
:root:not([data-tema="escuro"]) #fx-maximizar{order:3;margin-left:auto}
:root:not([data-tema="escuro"]) #fx-personalizar,
:root:not([data-tema="escuro"]) #fx-ajustes{order:3}
:root:not([data-tema="escuro"]) #fx-importar{order:4}
:root:not([data-tema="escuro"]) .fx-acoes .fx-botao.fantasma{font-size:0;gap:0;padding:0;width:38px;height:38px;justify-content:center;border-radius:50%}
:root:not([data-tema="escuro"]) .fx-acoes .fx-botao.fantasma svg{width:17px;height:17px}
:root:not([data-tema="escuro"]) .fx-botao.primario{font-size:14px;padding:12px 24px;box-shadow:none;background:#24c9b0;color:#fff}
:root:not([data-tema="escuro"]) .fx-sub{order:10;flex:0 0 100%;margin:0;font-size:13.5px;color:var(--fx-suave)}
:root:not([data-tema="escuro"]) .fx-kpi .fx-spark{display:none}
:root:not([data-tema="escuro"]) .fx-kpi-sub{max-width:none}
.envolve-tabela.envolve-cartoes{background:transparent;border:0;box-shadow:none}

/* Menu "Ir para" na fonte Figtree, como no desenho */
.lateral,.lateral h2,.lateral a,.lateral .rodape a,.lateral .n,.lateral .rotulo{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.lateral a{font-weight:500}
.lateral a[aria-current="page"]{font-weight:700}

/* ===== Links rápidos no visual do desenho: caixas brancas arredondadas, contador em pílula.
   As cores dos ícones (--ic) ficam como estavam. ===== */
.grade-links{gap:10px;padding:14px 16px 16px}
.link-caixa{background:#fff;border:1px solid #e6ecee;border-radius:12px;box-shadow:none}
.link-caixa:hover{background:#fff;border-color:#bfe8e1;box-shadow:0 6px 16px rgba(14,140,125,.10)}
.link-rapido{padding:12px 14px;gap:12px;min-height:48px}
.link-rapido .nome{font-size:14px;font-weight:500;color:var(--fg)}
.link-rapido .conta-n{
  background:#d7f4ef;border:0;color:#0b6b5f;font-size:12.5px;font-weight:700;
  padding:2px 10px;min-width:30px;margin-left:auto;
}
.link-rapido.vazio .nome{color:var(--fg);font-weight:500}
.link-rapido.vazio .conta-n{background:#eef2f4;color:#6b7a82;font-weight:600}
.link-rapido.vazio .link-icone{opacity:1}
.link-rapido{padding:12px 12px;gap:10px}
.link-rapido .nome{font-size:13.5px;flex:1 1 auto;min-width:0}
.link-rapido .conta-n{padding:2px 8px;min-width:28px}

/* Projeção no visual do desenho: coluna cinza atrás de cada barra, barras largas e arredondadas */
.fx-trilho{fill:rgba(255,255,255,.05)}
:root:not([data-tema="escuro"]) .fx-trilho{fill:#f3f6f7}
.fx-previsao .fx-barra-e{filter:none}
:root:not([data-tema="escuro"]) .fx-prev-kpis{gap:12px;margin:18px 0 6px}
:root:not([data-tema="escuro"]) .fx-prev-kpis > div{border:0;border-radius:12px;background:#f3f6f7;padding:14px 18px}
:root:not([data-tema="escuro"]) .fx-prev-kpis span{font-size:10.5px;letter-spacing:.12em;font-weight:700}
:root:not([data-tema="escuro"]) .fx-prev-kpis b{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
table.lista:not(.lista-cartoes) .op-avatar{display:none}

/* ===== Painéis no visual do desenho ===== */
.barra:has(.abas[aria-label="Contexto do painel"]){padding:14px 24px;gap:14px;background:var(--panel);border-bottom:1px solid var(--line)}
.barra:has(.abas[aria-label="Contexto do painel"]) .titulo-pagina{font-size:24px;font-weight:800;letter-spacing:-.02em}
.barra .abas[aria-label="Contexto do painel"]{background:#eef2f4;border:0;border-radius:99px;padding:4px}
.barra .abas[aria-label="Contexto do painel"] button{padding:9px 20px;font-size:14.5px;border-radius:99px}
.barra .abas[aria-label="Contexto do painel"] button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 3px rgba(31,50,60,.14);color:var(--fg)}
.barra:has(.abas[aria-label="Contexto do painel"]) .barra-fim .botao{border-radius:99px;padding:11px 22px;font-size:14.5px;font-weight:600;background:#fff}
.paineis .numeros{gap:16px}
.paineis .numero{border-radius:16px;padding:16px 22px;box-shadow:0 1px 3px rgba(31,50,60,.05)}
.paineis .numero span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.paineis .numero b{font-size:26px;font-weight:700;letter-spacing:-.03em;margin:5px 0 2px}
.paineis .numero small{font-size:13.5px}
.paineis .cartao{border-radius:16px;box-shadow:0 1px 3px rgba(31,50,60,.05)}
.paineis .cartao > header h2,.paineis .cartao > header{font-size:11px;font-weight:700;letter-spacing:.14em}

/* funil: triângulo invertido */
.funil-caixa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;padding:8px 20px 6px}
.funil-lado{min-width:0}
.funil-pilha{display:flex;flex-direction:column;gap:3px;width:100%;max-width:470px;margin:0 auto}
.funil-faixa{height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center}
.funil-faixa.ultima{justify-content:flex-start;padding-top:10px}
.funil-faixa span{font-size:13px;font-weight:500;line-height:1.2}
.funil-faixa b{font-size:19px;font-weight:800;line-height:1.2}
.funil-leg{gap:2px}
.funil-leg .item-leg{padding:10px 0;border-bottom:1px solid #eef2f4;font-size:14px;gap:12px}
.funil-leg .nome{font-weight:600}
.funil-leg .pct{color:var(--fg-faint);font-size:13px}
.funil-leg .val{min-width:90px;text-align:right;font-weight:700}
@media (max-width:760px){.funil-caixa{grid-template-columns:minmax(0,1fr);gap:16px}}


/* ===== Fluxo: cartão Metas e tetos, ao lado de Entradas × saídas ===== */
.fx-grade3:has(.fx-cartao-metas){grid-template-columns:minmax(0,1.25fr) minmax(0,1.3fr) minmax(250px,.75fr)}
.fx-cartao-metas[hidden]{display:none}
.fx-metas{display:flex;flex-direction:column;gap:20px;margin-top:6px}
.fx-meta-topo{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.fx-meta-topo span{font-weight:700;font-size:13px;color:var(--fx-suave)}
.fx-meta-barra{height:10px;border-radius:99px;background:rgba(127,140,148,.18);overflow:hidden;margin:8px 0 7px}
.fx-meta-barra u{display:block;height:100%;border-radius:99px;text-decoration:none;background:var(--fx-e);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.fx-meta-num{display:flex;justify-content:space-between;font-size:13px;font-variant-numeric:tabular-nums}
.fx-meta-num span:first-child{font-weight:700}
.fx-meta-num span:last-child{color:var(--fx-fraco)}
.fx-meta small{display:block;margin-top:5px;font-size:12.5px;color:var(--fx-suave)}
.fx-meta-baixo .fx-meta-barra u{background:#f0a23a}
.fx-meta-meio .fx-meta-barra u{background:#e0b83a}
.fx-meta-bom .fx-meta-barra u{background:var(--fx-e)}
.fx-meta-perto .fx-meta-barra u{background:#f0a23a}
.fx-meta-estourou .fx-meta-barra u{background:var(--fx-s)}
.fx-meta-estourou small{color:var(--fx-s);font-weight:600}
@media (max-width:1200px){.fx-grade3:has(.fx-cartao-metas){grid-template-columns:minmax(0,1fr)}}


/* ===== Onde está seus clientes: visual do desenho novo ===== */
.mapa-tela{padding:16px 24px 18px}
.mapa-titulo h1{font:800 24px/1.2 var(--font-display);letter-spacing:-.02em}
.mapa-filtros button{height:38px;padding:0 20px;font-size:14px;font-weight:600;background:#fff}
.mapa-filtros button[aria-pressed="true"]{background:#24c9b0;border-color:#24c9b0;color:#fff;font-weight:700}
.mapa-cartao{border-radius:16px;box-shadow:0 1px 3px rgba(31,50,60,.06)}
.mapa-lista{width:340px}
.mapa-lista-topo{padding:16px 16px 10px;border-bottom:0}
.mapa-lista-topo input{height:42px;border-radius:12px;font-size:14.5px}
.mapa-lista ul{padding:4px 10px 10px}
.mapa-lista-item{flex-direction:row;align-items:center;gap:14px;padding:11px 10px;border-radius:12px}
.mapa-av{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:15px;background:hsl(var(--h) 75% 90%);color:hsl(var(--h) 55% 24%)}
.mapa-it{display:flex;flex-direction:column;gap:2px;min-width:0}
.mapa-lista-item b{font-size:14.5px;font-weight:700;line-height:1.3}
.mapa-lista-item small{font-size:12.5px;text-transform:uppercase;letter-spacing:.02em}
.mapa-zoom button{border-radius:50%}
.mapa-rodape{padding:6px 2px 0;font-size:13.5px}

/* ===== Mais plugins: visual do desenho novo ===== */
.mais-titulo{font-size:24px;font-weight:800;margin:4px 0 14px}
.loja{background:transparent !important;border:0 !important;box-shadow:none !important;padding:4px 0 8px !important}
.loja-topo h2{font:700 12px/1 var(--font-body) !important;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft) !important;margin:0 0 8px}
.loja-topo p{color:var(--fg-soft) !important;font-size:14px;max-width:760px;line-height:1.5;margin:0 0 20px}
.loja-grade{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.loja-card{border-radius:16px !important;background:#fff !important;border:1px solid #e6ecee !important;box-shadow:0 1px 3px rgba(31,50,60,.06) !important;padding:22px !important;
  transition:box-shadow .2s,border-color .2s,transform .2s}
.loja-card:hover{transform:none !important;border-color:#bfe8e1 !important;box-shadow:0 12px 28px rgba(31,50,60,.12) !important}
.loja-card h3{color:var(--fg) !important;font-size:18px;letter-spacing:-.02em}
.loja-card p{color:var(--fg-soft) !important;font-size:13.5px}
.loja-card li{color:var(--fg) !important}
.loja-card li::before{background:#24c9b0 !important}
.loja-icone{background:#e3f7f3 !important;color:#0b7d6e !important;width:46px !important;height:46px !important;border-radius:13px !important}
.loja-icone.peq{width:30px !important;height:30px !important;border-radius:9px !important}
.loja-meta{color:var(--fg-faint) !important}
.loja-selo.disp{color:#0b7d6e !important;background:#e3f7f3 !important}
.loja-selo.breve,.loja-selo.espera{color:#a8680a !important;background:#fdf1dc !important}
.loja-btn{border-radius:99px !important;background:#24c9b0 !important;color:#fff !important;height:38px;padding:0 20px;font-weight:700}
.loja-btn:hover:not(:disabled){background:#1fb59e !important;box-shadow:none !important}
.loja-btn.sec{background:#fff !important;color:#0b7d6e !important;border:1px solid #d5dee2 !important;font-weight:600}
.loja-preco{color:var(--fg-faint) !important}
.mais-modulos{margin-top:26px}
.mais-modulos .mais-cartao{border-radius:16px;background:#fff;border:1px solid #e6ecee;box-shadow:0 1px 3px rgba(31,50,60,.06);padding:22px}
.mais-modulos .mais-cartao.incluso{background:#fff}
.mais-selo.ok{background:#e3f7f3;border-color:transparent;color:#0b7d6e;padding:5px 12px}
.chaves-eixo{background:#fff;border:1px solid #e6ecee;border-radius:16px;box-shadow:0 1px 3px rgba(31,50,60,.06);padding:24px 26px 14px}
.mais-corpo{padding:16px 24px 28px}
.mais-titulo{padding-left:24px}


/* ===== Celular: barra de baixo com o Mais redondo no meio, e a folha para personalizar ===== */
@media (max-width:760px){
  html.mob .mob-abas{align-items:flex-end}
  .mob-aba-mais{overflow:visible;color:var(--accent-forte)}
  .mob-mais-bola{
    display:grid;place-items:center;width:56px;height:56px;margin-top:-28px;border-radius:50%;
    background:#24c9b0;color:#fff;
    box-shadow:0 8px 18px -6px rgba(14,156,137,.75),0 0 0 5px var(--panel);
    transition:transform .15s;
  }
  .mob-aba-mais:active .mob-mais-bola{transform:scale(.94)}
  .mob-mais-bola svg{width:26px;height:26px}
  .mob-folha-dica{margin:0 2px 14px;font-size:14px;color:var(--fg-soft);line-height:1.4}
  .mob-folha-dica b{color:var(--fg)}
  .mob-conta{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:99px;background:var(--accent-dim);color:var(--accent-forte);font-weight:700;font-size:12.5px}
  .mob-tile.escolhido{border-color:#24c9b0;background:#e3f7f3;color:#0b7d6e}
  .mob-tile.escolhido::after{content:"";position:absolute;top:7px;right:8px;width:18px;height:18px;border-radius:50%;
    background:#24c9b0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
  .mob-folha-pe{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
  .mob-pe-btn{flex:1 1 auto;height:44px;padding:0 18px;border-radius:99px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
    border:1px solid var(--line-strong);background:var(--panel);color:var(--fg)}
  .mob-pe-btn.primario{background:#24c9b0;border-color:#24c9b0;color:#fff}
  .mob-pe-btn:disabled{opacity:.45;cursor:default}
}

/* Celular: o título da tela (com Kanban/Tabela, Filtros e os botões) rola junto com a página.
   Grudado no topo ele ocupava meia tela e ficava por cima da lista. */
@media (max-width:760px){
  html.mob .barra{position:static}
}
@media (max-width:760px){.mob-grade.editando .mob-badge{display:none}}

/* ===== Celular: acertos de espaço (fim da página, Athenas, mapa) ===== */
@media (max-width:760px){
  /* o fim da página sobe acima da barra de baixo e do botão da Athenas */
  html.mob body{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  /* a tela da Athenas cabe entre o título e a barra de baixo */
  html.mob .ia-tela{min-height:calc(var(--tela) - var(--topo) - 250px)}
  /* mapa: o título já está no alto da página; a lista fica em cima, o mapa embaixo */
  html.mob .mapa-titulo h1{display:none}
  html.mob .mapa-tela{padding:8px 14px 14px}
  html.mob .mapa-lista{width:100%;height:190px}
  html.mob .mapa-cartao{height:calc(var(--tela) - var(--topo) - 260px);min-height:440px}
}

@media (max-width:760px){
  /* a tela da Athenas termina acima da barra de baixo, para o microfone aparecer inteiro */
  html.mob .iaim{height:calc(var(--tela) - 215px);min-height:0;max-height:none}
}

/* Celular, Fluxo de Caixa claro: os botões só de ícone ficam redondos, sem esticar a linha toda. */
@media (max-width:760px){
  :root.mob:not([data-tema="escuro"]) .fx-acoes .fx-botao.fantasma{flex:0 0 38px}
}

/* Menu "Ir para" solto: ao abrir ele cobre 134px do que está à esquerda. Os botões da direita da barra
   (Ajustar layout, Personalizar, Nova...) ficavam por baixo dele; a barra reserva esse espaço. */
@media (min-width:1041px){
  :root[data-menu="recolhido"] .barra{padding-right:14px}
}


/* ===== Painéis: funil que leva ao pipeline, velocímetro, troca de gráfico, indicadores ===== */
.funil-clicavel{cursor:pointer}
.funil-faixa.funil-clicavel:hover{filter:brightness(1.08)}
.funil-faixa.funil-clicavel:focus-visible,.item-leg.funil-clicavel:focus-visible{outline:2px solid #10B981;outline-offset:2px}
.item-leg.funil-clicavel{border-radius:8px;transition:background .15s}
.item-leg.funil-clicavel:hover{background:var(--panel-2)}

.gauge{display:flex;flex-direction:column;align-items:center;padding:4px 0 2px}
.gauge svg{width:100%;max-width:320px;height:auto;overflow:visible}
.gauge-valor{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:-6px;color:var(--fg)}
.gauge-leg{font-size:13px;color:var(--fg-soft);text-align:center;margin-top:2px}

.cartao>header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cartao>header h2{margin-right:auto}
.tipos-grafico{display:inline-flex;gap:2px;background:var(--panel-2);border-radius:99px;padding:3px}
.tipos-grafico button{border:0;background:transparent;color:var(--fg-faint);font:inherit;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:99px;cursor:pointer}
.tipos-grafico button:hover{color:var(--fg)}
.tipos-grafico button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:0 1px 3px rgba(31,50,60,.14)}
.tipos-grafico button.sugerido:not([aria-pressed="true"])::after{content:" ★";color:#10B981;font-size:10px}
.rec-dica{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--fg-soft)}
.rec-dica button{border:1px solid #10B981;background:transparent;color:#0b7d6e;border-radius:99px;font:inherit;font-size:12px;
  font-weight:700;padding:3px 12px;cursor:pointer}
.rec-dica button:hover{background:#e3f7f3}

.kpis-escolha{margin-top:8px}
.kpis-escolha small{display:block;color:var(--fg-faint);margin-bottom:6px}
.kpis-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px}
.kpis-lista label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.kpis-lista input:disabled+*{opacity:.5}

/* ===== Conversa da tarefa: anexo esperando o Enter, e as ondas da gravação ===== */
.chat-anexos{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0}
.chat-anexos[hidden]{display:none}
.chat-anexo{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 6px 4px 10px;border-radius:99px;
  background:var(--panel-2);border:1px solid var(--line);font-size:12.5px;color:var(--fg)}
.chat-anexo button{border:0;background:transparent;color:var(--fg-faint);font-size:16px;line-height:1;cursor:pointer;
  width:20px;height:20px;border-radius:50%}
.chat-anexo button:hover{background:var(--line);color:var(--fg)}
.grav-linha.gravando{flex-wrap:nowrap;width:100%}
.grav-ondas{flex:1 1 auto;min-width:80px;width:100%;height:36px;display:block}


/* ===== Falar ou escrever para preencher o formulário ===== */
.iap{margin:0 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);padding:0 14px}
.iap>summary{cursor:pointer;list-style:none;padding:11px 0;font-weight:700;font-size:14px;color:var(--fg)}
.iap>summary::-webkit-details-marker{display:none}
.iap[open]>summary{padding-bottom:8px}
.iap-ico{color:#10B981;margin-right:4px}
.iap textarea{width:100%;resize:vertical;border-radius:10px}
.iap-barra{display:flex;gap:10px;align-items:center;margin-top:10px}
.iap-mic.ouvindo{border-color:#e5484d;color:#e5484d}
.iap-mic.ouvindo svg{animation:iap-pulso 1s ease-in-out infinite}
@keyframes iap-pulso{50%{opacity:.35}}
.iap-aviso{display:block;margin:8px 0 12px;color:var(--fg-faint);font-size:12.5px;line-height:1.45}

/* Filtros em duas colunas: os campos lado a lado; título, "Meus filtros" e os botões ocupam a linha toda. */
@media (min-width:621px){
  .painel-filtro{width:min(540px,92vw);display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-content:start}
  .painel-filtro>h3,.painel-filtro>.filtros-pers,.painel-filtro>.pe{grid-column:1/-1}
}

@media (min-width:621px){.painel-filtro>.linha-faixa{grid-column:1/-1}}


/* ===== Eixo Leads (baixar o programa) ===== */
.el-baixar{max-width:760px;margin:8px auto 40px;display:grid;gap:18px}
.el-cabeca{display:flex;gap:16px;align-items:center}
.el-cabeca h2{margin:0;font-size:22px}
.el-cabeca p{margin:4px 0 0;color:var(--fg-soft,#52525b);font-size:14.5px}
.el-logo{width:56px;height:56px;border-radius:16px;flex:none;background:#0b1f1c;border:1.5px solid #24C9B0;color:#24C9B0;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;letter-spacing:-.02em}
.el-logo::before{content:'EL'}
.el-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.el-lista li{display:grid;gap:2px;border:1px solid var(--borda,#d9e0df);border-radius:14px;padding:12px 14px}
.el-lista li span{color:var(--fg-soft,#52525b);font-size:13.5px;line-height:1.45}
.el-acao{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.el-versao{color:var(--fg-faint,#71717a);font-size:13px}
.el-passos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.el-passos li{display:flex;gap:12px;align-items:center;font-size:14px}
.el-passos b{width:26px;height:26px;border-radius:50%;background:#24C9B0;color:#0a0a0b;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:13px}
.el-nota{margin:0;color:var(--fg-faint,#71717a);font-size:12.5px}

.el-cartao{border:1px solid var(--borda,#d9e0df);border-radius:16px;padding:16px;display:grid;gap:10px}
.el-cartao h3{margin:0;font-size:16px}
.el-cartao p{margin:0;font-size:13.5px;line-height:1.5;color:var(--fg-soft,#52525b)}
.el-linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.el-chave{display:grid;gap:8px;border-top:1px dashed var(--borda,#d9e0df);padding-top:10px}
.el-chave input{flex:1;min-width:240px;border:1px solid var(--borda,#d9e0df);border-radius:10px;padding:9px 11px;font:13px ui-monospace,Consolas,monospace;background:transparent;color:inherit}

/* Painéis: prospecção do Eixo Leads */
.prosp-resumo{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--fg-soft,#52525b);margin:0 0 12px}
.prosp-resumo b{font-size:22px;color:var(--fg,#0a0a0b);margin-right:4px}
.prosp-lista{display:grid;gap:10px}
.prosp-linha{display:grid;grid-template-columns:minmax(90px,1fr) minmax(110px,2fr) auto;gap:12px;align-items:center;font-size:13.5px}
.prosp-nome{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prosp-barra{position:relative;height:10px;border-radius:6px;background:rgba(36,201,176,.18);overflow:hidden}
.prosp-barra u{position:absolute;inset:0 auto 0 0;background:rgba(36,201,176,.45)}
.prosp-barra i{position:absolute;inset:0 auto 0 0;background:#10B981}
.prosp-num{color:var(--fg-soft,#52525b);white-space:nowrap}
@media (max-width:620px){.prosp-linha{grid-template-columns:1fr}.prosp-num{white-space:normal}}

.el-prod{background:rgba(36,201,176,.1);border-radius:10px;padding:8px 12px}

.el-estado{font-weight:600;font-size:13.5px;padding:4px 12px;border-radius:999px;background:rgba(113,113,122,.15)}
.el-estado.on{background:rgba(16,185,129,.16);color:#0b7d6e}
.el-autoriza{max-width:560px;margin:20px auto}
.el-codigo{font:700 34px ui-monospace,Consolas,monospace !important;letter-spacing:.12em;text-align:center;padding:14px;border:2px dashed #24C9B0;border-radius:14px;color:var(--fg,#0a0a0b) !important}

.el-id{background:rgba(36,201,176,.1);border-radius:10px;padding:8px 12px}
.el-id b{font-size:16px;letter-spacing:.06em}
.el-id span{display:block;font-weight:400;color:var(--fg-soft,#52525b);font-size:12.5px;margin-top:2px}

/* Tutorial guiado e ajuda da Athenas (tour.js).
   Quatro faixas escurecem e desfocam tudo ao redor; o furo no meio fica nítido. */
.tour-camada{position:fixed;inset:0;z-index:99990;pointer-events:none}
.tour-sombra{position:fixed;background:rgba(6,10,14,.58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto;
  transition:left .38s var(--ease,ease),top .38s var(--ease,ease),width .38s var(--ease,ease),height .38s var(--ease,ease)}
.tour-furo{position:fixed;border-radius:12px;box-shadow:0 0 0 2px #24C9B0,0 0 0 6px rgba(36,201,176,.28);animation:tourPulso 1.8s ease-in-out infinite;
  transition:left .38s var(--ease,ease),top .38s var(--ease,ease),width .38s var(--ease,ease),height .38s var(--ease,ease),opacity .2s}
@keyframes tourPulso{50%{box-shadow:0 0 0 2px #24C9B0,0 0 0 11px rgba(36,201,176,.08)}}
.tour-camada.entrando .tour-sombra{animation:tourEntra .3s ease both}
.tour-camada.saindo{opacity:0;transition:opacity .2s}
@keyframes tourEntra{from{opacity:0}}
.tour-cartao{position:fixed;width:min(330px,calc(100vw - 16px));box-sizing:border-box;background:var(--panel,#fff);color:var(--fg,#15181e);border:1px solid var(--line-strong,#ddd);
  border-radius:16px;padding:14px 16px 14px;box-shadow:0 24px 60px rgba(0,0,0,.4);pointer-events:auto;transition:left .38s var(--ease,ease),top .38s var(--ease,ease)}
.tour-cartao.tour-entra h4,.tour-cartao.tour-entra p{animation:tourTexto .3s ease both}
@keyframes tourTexto{from{opacity:0;transform:translateY(4px)}}
.tour-topo{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tour-topo b{font-size:13px}
.tour-topo small{margin-left:auto;color:var(--fg-faint,#78818f);font-size:12px}
.tour-x{border:0;background:none;color:var(--fg-faint,#78818f);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.tour-x:hover{color:var(--fg,#15181e)}
.tour-rosto{display:inline-block;width:28px;height:28px;border-radius:50%;background-size:cover;background-position:50% 20%;background-color:#0a0a0b;flex:none}
.tour-rosto.grande{width:48px;height:48px}
.tour-cartao h4{margin:0 0 4px;font-size:16px;letter-spacing:-.01em}
.tour-cartao p{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--fg-soft,#4c5563)}
.tour-pontos{display:flex;gap:4px;margin:0 0 12px}
.tour-pontos i{width:6px;height:6px;border-radius:50%;background:var(--line-strong,#ddd)}
.tour-pontos i.on{background:#24C9B0;width:16px;border-radius:4px}
.tour-acoes{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.tour-acoes button{border:0;border-radius:9px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.tour-prox{background:#24C9B0;color:#06241f}
.tour-voltar,.tour-pular{background:none;color:var(--fg-soft,#4c5563)}
.tour-voltar:hover,.tour-pular:hover{background:var(--panel-2,#f2f4f7)}
.tour-pular{margin-right:auto}
/* o botão do topo: só o rosto, redondo */
.tour-ajuda-botao{padding:0}
.tour-ajuda-botao .tour-rosto{width:26px;height:26px}
.tour-ajuda-botao{display:inline-flex;align-items:center;justify-content:center}
/* a janela de ajuda */
.tour-ajuda-topo{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.tour-ajuda-topo p{margin:0;font-size:14px;line-height:1.45}
.tour-ajuda-form{display:flex;gap:8px;margin-bottom:12px}
.tour-ajuda-form input{flex:1;min-width:0}
.tour-ajuda-caixa{background:var(--panel-2,#f2f4f7);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.tour-ajuda-caixa h5{margin:0 0 4px;font-size:14px}
.tour-ajuda-caixa p{margin:0 0 8px;font-size:14px;line-height:1.5}
.tour-ajuda-lista h5{margin:4px 0 8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-faint,#78818f)}
.tour-chip{display:inline-block;margin:0 6px 6px 0;padding:6px 11px;border-radius:999px;border:1px solid var(--line-strong,#ddd);background:var(--panel,#fff);color:var(--fg,#15181e);font:inherit;font-size:13px;cursor:pointer}
.tour-chip:hover{border-color:#24C9B0}
.tour-pronta-botoes{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
@media (prefers-reduced-motion:reduce){.tour-sombra,.tour-furo,.tour-cartao{transition:none;animation:none}.tour-camada.entrando .tour-sombra{animation:none}}


/* Conversa do caso: relogio de resposta (10 min) e de atualizacao (24 h), historico com hora do servidor. */
.cc{margin:6px 0 14px}
.cc-relogio{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:14px;background:var(--panel-2);position:relative}
.cc-anel{width:72px;height:72px;flex:none}
.cc-fundo{fill:none;stroke:var(--line-strong);stroke-width:7}
.cc-arco{fill:none;stroke:#24C9B0;stroke-width:7;stroke-linecap:round;transition:stroke .3s}
.cc-relogio[data-estado="atencao"] .cc-arco{stroke:#e8a317}
.cc-relogio[data-estado="estourou"] .cc-arco{stroke:#e5484d}
.cc-relogio[data-estado="fechado"] .cc-arco{stroke:var(--fg-faint)}
.cc-tempo{position:absolute;left:14px;top:12px;width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.cc-relogio[data-estado="estourou"] .cc-tempo{color:#e5484d}
.cc-quem{display:grid;gap:2px}
.cc-quem b{font-size:15px}
.cc-quem span{font-size:13px;color:var(--fg-soft)}
.cc-relogio[data-estado="estourou"] .cc-quem b{color:#e5484d}
.cc-resumo{margin:10px 2px 0;font-size:13px;color:var(--fg-soft)}
.cc-ruim{color:#e5484d}
.cc-lista{display:grid;gap:8px;margin:12px 0;max-height:300px;overflow-y:auto;padding-right:4px}
.cc-item{padding:10px 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.cc-item.cc-equipe{background:rgba(36,201,176,.10);border-color:rgba(36,201,176,.35)}
.cc-item.cc-sla{background:rgba(229,72,77,.08);border-color:rgba(229,72,77,.35)}
.cc-item.cc-situacao{background:transparent;border-style:dashed}
.cc-cab{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.cc-tag{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint)}
.cc-cab time{margin-left:auto;font-size:12px;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.cc-texto{margin-top:4px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.cc-selo{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.cc-selo.bom{background:rgba(36,201,176,.18);color:#0a6e5f}
.cc-selo.ruim{background:rgba(229,72,77,.15);color:#c0262b}
.cc-anexos{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cc-anexos a{font-size:12.5px;padding:3px 9px;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none}
.cc-form{display:grid;gap:8px}
.cc-form textarea{width:100%;resize:vertical;min-height:64px}
.cc-acoes{display:flex;gap:8px;justify-content:space-between;align-items:center}
.cc-chips{display:flex;gap:6px;flex-wrap:wrap}
.cc-chip{display:inline-flex;gap:6px;align-items:center;padding:3px 4px 3px 10px;border:1px solid var(--line-strong);border-radius:999px;font-size:12.5px}
.cc-chip button{border:0;background:none;cursor:pointer;color:var(--fg-faint);font-size:15px;line-height:1}
.cc-nota{font-size:13px;color:var(--fg-faint)}
@media (prefers-reduced-motion:reduce){.cc-arco{transition:none}}

/* Vendas da Athenas */
.vv-op{display:flex;gap:8px;align-items:flex-start;margin:10px 0;font-size:14px;cursor:pointer}
.vv-op input{margin-top:3px}
.vv-corpo .iaf-aprende-lista{max-height:50vh}

/* Mini busca de dentro das telas */
.mini-busca{position:relative;max-width:560px;margin:10px 18px 0}
.mini-busca input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit;font:inherit;font-size:14px}
.mini-busca-res{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:30;max-height:60vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px 8px}
.mini-busca-res h4{margin:8px 4px 2px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.65}
.mini-busca-item{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)!important}
.mini-busca-item em{font-style:normal;opacity:.7;font-size:13px;text-align:right}
.mini-busca-vazio{margin:8px 4px;opacity:.7;font-size:14px}
.mini-busca-todos{display:block;margin:6px 4px 4px;font-size:13px}

/* Conectores */
.cx-pagina{max-width:880px;margin:0 auto;padding:18px}
.cx-topo h1{margin:0 0 4px;font-size:24px}
.cx-topo p{margin:0 0 16px;opacity:.7}
.cx-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.cx-cartao{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--panel);display:flex;flex-direction:column;gap:10px}
.cx-cartao header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cx-cartao h3{margin:0;font-size:17px}
.cx-cartao p{margin:0;font-size:14px;line-height:1.5}
.cx-selo{font-size:12px;padding:2px 9px;border-radius:99px;border:1px solid var(--line);opacity:.8}
.cx-selo.on{border-color:#2fd6bd;color:#0f8f7d;opacity:1}
.cx-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto}
.cx-url{flex:1 1 220px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:inherit;font:inherit;font-size:13px}
.cx-agenda-url{display:flex;flex-wrap:wrap;gap:8px}
.cx-agenda-url input{flex:1 1 220px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:inherit;font:inherit;font-size:12px}
.cx-agenda-url small{flex:1 0 100%;opacity:.7}

.vv-grade{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.vv-linha{display:flex;align-items:center;gap:8px;font-size:14px}
.vv-linha span{flex:1}
.vv-linha input[type=number]{width:74px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:inherit}
.vv-config textarea,.vv-config input[type=text]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:inherit;font:inherit;font-size:14px;margin:6px 0}
.vv-config h4{margin:16px 0 4px}
.vv-tipo{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:inherit;font:inherit;margin:6px 0}

/* ===== Celular: o + do meio abre o velocímetro de criação; o fim da barra é o Mais (três pontinhos) ===== */
.mob-velo{display:none}
@media (max-width:760px){
  html.mob .mob-velo{display:block;position:fixed;inset:0;z-index:59;font-family:'Manrope',system-ui,sans-serif;background:rgba(8,10,12,.0);color:var(--fg);transition:background .2s}
  html.mob .mob-velo[hidden]{display:none}
  html.mob .mob-velo.aberto{background:rgba(8,10,12,.58);backdrop-filter:blur(3px)}
  .mob-velo-op{position:absolute;transform:translate(-50%,-50%) scale(.3);opacity:0;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;color:#fff;font:inherit;cursor:pointer;transition:transform .22s cubic-bezier(.2,1.3,.4,1),opacity .18s;width:76px}
  .mob-velo.aberto .mob-velo-op{transform:translate(-50%,-50%) scale(1);opacity:1}
  .mob-velo-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--panel);color:var(--accent-forte);box-shadow:0 8px 20px -6px rgba(0,0,0,.5)}
  .mob-velo-ico svg{width:24px;height:24px}
  .mob-velo-op:active .mob-velo-ico{background:var(--accent-dim)}
  .mob-velo-rot{font-size:12px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6)}
  .mob-velo-arco{color:#fff}
  .mob-aba-criar .mob-mais-bola{transition:transform .2s}
  .mob-aba-criar.aberto .mob-mais-bola{transform:rotate(45deg)}
  .mob-aba-pontos{color:var(--fg-faint)}
}
@media (prefers-reduced-motion:reduce){.mob-velo-op,.mob-velo{transition:none!important}}

/* Escolha do modelo de fluxo de caixa */
.fx-modelo{max-width:900px;margin:0 auto;padding:18px}
.fx-modelo h1{margin:0 0 4px;font-size:24px}
.fx-modelo header p{margin:0 0 16px;opacity:.7}
.fx-modelo-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.fx-modelo-cartao{position:relative;border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);display:flex;flex-direction:column;gap:10px}
.fx-modelo-cartao.recomendado{border:2px solid #24c9b0}
.fx-modelo-cartao h2{margin:0;font-size:18px}
.fx-modelo-cartao p{margin:0;font-size:14px;line-height:1.5}
.fx-modelo-cartao ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6;opacity:.85}
.fx-modelo-cartao .botao{margin-top:auto;text-align:center;text-decoration:none}
.fx-modelo-selo{align-self:flex-start;font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;background:#24c9b0;color:#fff}
.fx-modelo-linha{margin:8px 18px 0;font-size:13px;opacity:.75}

/* Celular: o formulário de tarefa cabe na tela, em duas colunas e com menos respiro */
@media (max-width:760px){
  .janela .tarefa-corpo{gap:10px}
  .tarefa-meta{grid-template-columns:1fr 1fr!important;gap:8px 10px!important}
  .tarefa-meta>.meta,.tarefa-meta>.caixa{margin-top:0!important}
  .tarefa-meta>:nth-child(1),.tarefa-meta>:nth-child(4),.tarefa-meta>:nth-child(5),.tarefa-meta>:nth-child(6),
  .tarefa-meta>:nth-child(9),.tarefa-meta>:nth-child(14),.tarefa-meta>.largo{grid-column:1/-1}
  .tarefa-meta .meta>label,.tarefa-meta .meta>.rotulo{font-size:10px;letter-spacing:.9px}
  .tarefa-meta select,.tarefa-meta input,.tarefa-meta .entrada{padding:7px 9px;font-size:14px;min-height:0}
  .tarefa-meta .dica,.tarefa-meta small{font-size:11px;line-height:1.3}
  .tarefa-centro .meta{margin-top:8px}
  .tarefa-titulo-caixa input{font-size:20px}
  .tarefa-chat{max-height:170px;overflow:auto}
}
@media (max-width:760px){
  .janela header .autosave{display:none}
  .janela header .formatos{display:none}
  .janela header h2{font-size:18px;white-space:nowrap}
}

/* Celular: o painel de filtros ocupa a largura, acima da barra de baixo, em duas colunas */
@media (max-width:760px){
  html.mob .painel-filtro{
    position:fixed!important;left:10px!important;right:10px!important;top:auto!important;
    bottom:calc(78px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;
    max-height:calc(100dvh - 150px);overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:14px;
    border-radius:16px;box-shadow:0 -10px 34px rgba(0,0,0,.28);z-index:200
  }
  html.mob .painel-filtro>h3,html.mob .painel-filtro>.linha-faixa,html.mob .painel-filtro>.filtros-pers,html.mob .painel-filtro>.pe{grid-column:1/-1}
  html.mob .painel-filtro .linha-campo{margin:0;min-width:0}
  html.mob .painel-filtro select,html.mob .painel-filtro input{width:100%;min-width:0;padding:7px 9px;font-size:14px}
  html.mob .painel-filtro .linha-faixa{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
  html.mob .painel-filtro .linha-faixa input{flex:1 1 100px}
  html.mob .painel-filtro .filtros-pers{margin:0}
  html.mob .painel-filtro .pe{position:sticky;bottom:-14px;background:var(--panel);padding:8px 0 0;margin:0}
}
@media (max-width:760px){
  html.mob .painel-filtro .linha-faixa>label,html.mob .painel-filtro .linha-faixa>span{flex:1 0 100%;text-align:left}
}
@media (max-width:760px){
  html.mob:has(.caixa-filtro button[aria-expanded="true"]) .mob-athenas{display:none}
}

/* Celular: faixas de abas rolam de lado em vez de alargar a página; nada passa da largura da tela */
@media (max-width:760px){
  html.mob .abas{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html.mob .abas::-webkit-scrollbar{display:none}
  html.mob .abas>*{flex:0 0 auto}
  html.mob #palco{max-width:calc(100vw / var(--escala,1));overflow-x:clip}
}
@media (max-width:760px){
  .busca-grade{grid-template-columns:minmax(0,1fr)!important}
  .busca-corpo{grid-template-columns:minmax(0,1fr)!important}
  .busca-bloco{min-width:0}
}

/* Celular: a Athenas é só uma bolinha que se arrasta; arrastar para o alto mostra o X que a esconde */
@media (max-width:760px){
  html.mob .mob-athenas.mob-bola{
    width:56px;height:56px;padding:0;gap:0;justify-content:center;border-radius:50%;
    right:14px;bottom:calc(88px + env(safe-area-inset-bottom));touch-action:none;user-select:none;-webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s
  }
  html.mob .mob-athenas.mob-bola.arrastando{transform:scale(1.12);transition:none;box-shadow:0 14px 30px -8px rgba(5,33,43,.8),0 0 26px rgba(43,208,224,.45)}
  .mob-bola .mob-athenas-av{width:46px;height:46px}
  .mob-bola .mob-athenas-tx{display:none}
  html.mob .mob-bola-xis{position:fixed;left:50%;top:calc(66px + env(safe-area-inset-top));transform:translateX(-50%);z-index:210;width:56px;height:56px;border-radius:50%;
    display:grid;place-items:center;background:rgba(10,12,14,.82);color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .15s,background .15s}
  html.mob .mob-bola-xis[hidden]{display:none}
  html.mob .mob-bola-xis svg{width:24px;height:24px}
  html.mob .mob-bola-xis.pronto{background:#e5484d;transform:translateX(-50%) scale(1.2);border-color:#fff}
}
.mob-bola-xis{display:none}

/* Celular: a lista de "últimas empresas com movimento" ocupa a largura e deixa ler o nome inteiro */
@media (max-width:760px){
  html.mob .achados{position:fixed;left:10px;right:10px;top:calc(62px + env(safe-area-inset-top));max-height:calc(100dvh - 150px);border-radius:16px;z-index:120}
  html.mob .achados button{flex-wrap:wrap;gap:4px 10px;padding:13px 14px}
  html.mob .achados .nome{order:1;flex:1 1 100%;font-size:17px;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip}
  html.mob .achados .selo{order:2}
  html.mob .achados .valor{order:3;margin-left:auto;font-size:13.5px}
  html.mob .achados-rotulo{padding:12px 14px 6px;font-size:11.5px}
}

/* Alertas urgentes: o + do meio pulsa em vermelho; no velocímetro a opção com pendência pisca */
@keyframes mob-pulsa-vermelho{
  0%{box-shadow:0 8px 18px -6px rgba(14,156,137,.75),0 0 0 5px var(--panel),0 0 0 5px rgba(229,72,77,.85)}
  70%{box-shadow:0 8px 18px -6px rgba(14,156,137,.75),0 0 0 5px var(--panel),0 0 0 20px rgba(229,72,77,0)}
  100%{box-shadow:0 8px 18px -6px rgba(14,156,137,.75),0 0 0 5px var(--panel),0 0 0 5px rgba(229,72,77,0)}
}
@keyframes mob-pisca-borda{0%,100%{border-color:#e5484d;box-shadow:0 0 0 0 rgba(229,72,77,.8)}50%{border-color:rgba(229,72,77,.15);box-shadow:0 0 0 9px rgba(229,72,77,0)}}
@media (max-width:760px){
  html.mob .mob-aba-criar.urgente .mob-mais-bola{animation:mob-pulsa-vermelho 1.3s ease-out infinite;outline:2px solid #e5484d;outline-offset:3px}
  .mob-velo-ico{position:relative;border:3px solid transparent}
  .mob-velo-op.piscando .mob-velo-ico{border-color:#e5484d;animation:mob-pisca-borda .9s ease-in-out infinite}
  .mob-velo-n{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#e5484d;color:#fff;font:700 11.5px/20px 'Figtree',system-ui,sans-serif;font-style:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html.mob .mob-aba-criar.urgente .mob-mais-bola{animation:none}
  .mob-velo-op.piscando .mob-velo-ico{animation:none}
}
.dev-alertas{display:flex;flex-direction:column;gap:10px;max-width:560px}
.dev-alerta-linha{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.dev-alerta-linha>span{flex:1;display:flex;flex-direction:column}
.dev-alerta-linha small{opacity:.7;font-size:12.5px}
.dev-alerta-linha input[type=number]{width:84px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:inherit}

/* Tutorial: letras maiores e a mesma fonte do CRM (o quadro mora na <html>, fora da fonte do corpo) */
.tour-camada{font-family:'Manrope',system-ui,sans-serif}
.tour-cartao{width:min(420px,calc(100vw - 16px));padding:18px 20px}
.tour-topo b{font-size:16px}
.tour-topo small{font-size:14px}
.tour-cartao h4{font-size:22px;margin:0 0 8px;line-height:1.2}
.tour-cartao p{font-size:17px;line-height:1.5;margin:0 0 14px}
.tour-pontos{gap:5px;margin:0 0 14px}
.tour-pontos i{width:8px;height:8px}
.tour-pontos i.on{width:20px}
.tour-acoes button{font-size:15px;padding:9px 16px;border-radius:10px}
.tour-x{font-size:24px}
@media (max-width:520px){.tour-cartao h4{font-size:20px}.tour-cartao p{font-size:16px}}

/* Central do tutorial: os blocos */
.tour-central-ajuda{margin:0 0 14px;font-size:15px;opacity:.8}
.tour-blocos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:10px}
.tour-bloco{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;width:100%;padding:14px 16px;border:1px solid var(--line-strong,#ddd);border-radius:14px;background:var(--panel,#fff);color:inherit;font:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.tour-bloco:hover{border-color:#24C9B0;transform:translateY(-1px)}
.tour-bloco span{display:flex;flex-direction:column;gap:3px;min-width:0}
.tour-bloco b{font-size:16px}
.tour-bloco b em{font-style:normal;font-size:11.5px;font-weight:600;color:#0f8f7d;border:1px solid #24C9B0;border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.tour-bloco small{font-size:13.5px;opacity:.75;line-height:1.35}
.tour-bloco i{font-style:normal;font-size:13px;font-weight:700;color:#0f8f7d;white-space:nowrap}
.tour-bloco-geral{background:#0a0a0b;color:#fff;border-color:#0a0a0b}
.tour-bloco-geral i{color:#2ee6c5}

/* A bolinha da Athenas no computador: solta na tela, arrasta, e o X no alto tira */
.pc-bola{position:fixed;right:84px;bottom:26px;z-index:58;width:60px;height:60px;padding:0;border:1px solid rgba(43,208,224,.45);border-radius:50%;
  background:#05212b;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 12px 28px -8px rgba(5,33,43,.7),0 0 20px rgba(43,208,224,.28);transition:transform .15s,box-shadow .15s;display:grid;place-items:center}
.pc-bola[hidden]{display:none!important}
.pc-bola:hover{transform:scale(1.06)}
.pc-bola.arrastando{cursor:grabbing;transform:scale(1.12);transition:none;box-shadow:0 16px 34px -8px rgba(5,33,43,.8),0 0 30px rgba(43,208,224,.5)}
.pc-bola-av{display:block;width:52px;height:52px;border-radius:50%;padding:2px;box-sizing:border-box;
  background:conic-gradient(from 0deg,#2bd0e0,#7c5cff,#ff7ab6,#ffc857,#2bd0e0);animation:mob-gira 6s linear infinite}
.pc-bola-av img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #05212b;animation:mob-gira 6s linear infinite reverse;pointer-events:none}
.pc-bola-xis{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:210;display:flex;flex-direction:column;align-items:center;gap:6px;
  width:76px;height:76px;justify-content:center;border-radius:50%;background:rgba(10,12,14,.84);color:#fff;border:2px solid rgba(255,255,255,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.4);transition:transform .15s,background .15s}
.pc-bola-xis[hidden]{display:none}
.pc-bola-xis svg{width:26px;height:26px}
.pc-bola-xis small{position:absolute;top:84px;white-space:nowrap;font:600 12.5px 'Figtree',system-ui,sans-serif;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.7)}
.pc-bola-xis.pronto{background:#e5484d;transform:translateX(-50%) scale(1.15);border-color:#fff}
html.mob .pc-bola,html.mob .pc-bola-xis{display:none!important}
@media (prefers-reduced-motion:reduce){.pc-bola-av,.pc-bola-av img{animation:none}}

/* Cor própria da situação (área do desenvolvedor) */
.cor-situacao{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-soft,#4c5563);white-space:nowrap}
.cor-situacao input[type=color]{width:34px;height:30px;padding:0;border:1px solid var(--line-strong,#ddd);border-radius:8px;background:none;cursor:pointer}
.cor-situacao-limpa{border:0;background:none;color:var(--fg-faint,#78818f);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.cor-situacao-limpa:hover{color:var(--fg,#15181e)}

/* Janelinha da IA: a opcao da bolinha */
.iaf-bola-pop{position:absolute;top:58px;right:10px;z-index:5;width:min(270px,calc(100% - 20px));background:var(--panel,#fff);color:var(--fg,#15181e);border:1px solid var(--line-strong,#ddd);border-radius:14px;padding:14px 16px;box-shadow:0 14px 34px rgba(0,0,0,.25)}
.iaf-bola-pop p{margin:0 0 8px;font-size:14.5px;line-height:1.4}
.iaf-bola-pop .iaf-bola-dica{font-size:12.5px;opacity:.7}
.iaf-bola-chave{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.iaf-bola-chave input{position:absolute;opacity:0;pointer-events:none}
.iaf-bola-trilho{width:40px;height:22px;border-radius:99px;background:#c4c9d1;position:relative;transition:background .2s;flex:none}
.iaf-bola-trilho::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.iaf-bola-chave input:checked + .iaf-bola-trilho{background:#24C9B0}
.iaf-bola-chave input:checked + .iaf-bola-trilho::after{transform:translateX(18px)}
.iaf-bola-chave input:focus-visible + .iaf-bola-trilho{outline:2px solid #24C9B0;outline-offset:2px}
/* Conectores: o logo de cada ferramenta */
.cx-cartao header{gap:10px}
.cx-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--panel-2,#f2f4f7);flex:none;color:var(--fg,#15181e)}
.cx-logo svg{width:26px;height:26px}
.cx-cartao header h3{flex:1}
/* Vendas de hoje: botao ao lado de Nova oportunidade */
.vv-botao{position:relative}
.vv-n{font-style:normal;font-weight:700;font-size:11.5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#e5484d;color:#fff;display:inline-block;text-align:center;line-height:18px;margin-left:6px}
.vv-n[hidden]{display:none}

/* Bolinha de presença: verde = online, vermelha = ausente (como no Teams) */
.avatar{position:relative}
.avatar-troca .avatar{overflow:visible}
.presenca{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:#c4c9d1;border:2px solid var(--panel,#fff);box-sizing:content-box;pointer-events:none;transition:background .2s}
.presenca:not(.on):not(.off){display:none}
.presenca.on{background:#22c55e}
.presenca.off{background:#e5484d}
.avatar.g .presenca{width:12px;height:12px;right:0;bottom:0}
.mp-avatar .presenca{width:22px;height:22px;border-width:4px;right:6px;bottom:6px}

.tour-ia{background:#0a0a0b!important;color:#2ee6c5!important}

/* ---------- Fluxo de Caixa: planilha digital ---------- */
.fx-modelo-botoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.fx-modelo-botoes .botao{flex:1;text-align:center;text-decoration:none;margin-top:0}
.fp{max-width:100%;padding:16px 18px 28px}
.fp h1{margin:0;font-size:22px;font-family:var(--font-display)}
.fp-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fp .fx-sub{margin:4px 0 0;font-size:13px;color:var(--fg-soft)}
.fp .fp-botoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fp .fx-botao.fantasma{background:var(--panel);border-color:var(--line-strong);color:var(--fg)}
.fp .fx-botao.fantasma:hover:not(:disabled){background:var(--panel-2)}
.fp .fx-botao.primario{color:var(--sobre-accent);background:var(--accent);box-shadow:none}
.fp .fx-ctl{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel)}
.fp .fx-ctl button{border:0;background:none;color:var(--fg);font:inherit;font-size:16px;padding:6px 12px;cursor:pointer}
.fp-ano-rot{min-width:48px;text-align:center;font-weight:600}
.fp-frase{display:flex;gap:8px}
.fp-frase input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--fg);font:inherit}
.fp-dica{margin:6px 0 10px;font-size:12.5px;color:var(--fg-faint)}
.fp-cartao{border:1px solid var(--accent);background:var(--accent-dim);border-radius:12px;padding:12px 14px;margin:0 0 10px}
.fp-cartao p{margin:0 0 8px}
.fp-cartao-acoes{display:flex;gap:8px;flex-wrap:wrap}
.fp-exemplos{margin:0 0 10px;padding-left:18px;columns:2;font-size:13px;color:var(--fg-soft)}
.fp-aviso{min-height:20px;margin:0 0 6px;font-size:13px;color:var(--fg-soft)}
.fp-lanc{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:10px 14px;margin:0 0 12px}
.fp-lanc summary{cursor:pointer;font-weight:600}
.fp-form-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.fp-form-grade label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--fg-soft)}
.fp-form-grade input,.fp-form-grade select{padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--fg);font:inherit;font-size:14px}
.fp-f-nota{grid-column:span 2}
.fp-etq-solto{padding:8px 0;font-weight:600;color:var(--fg)}
.fp-saldo-rot{margin:0 0 6px;font-size:13px;color:var(--fg-soft)}
.fp-rolagem{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.fp-tab{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}
.fp-tab th,.fp-tab td{padding:3px 6px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel)}
.fp-tab thead th{position:sticky;top:0;z-index:3;background:var(--panel-3);font-weight:600;font-size:12px;color:var(--fg-soft);text-align:right}
.fp-tab thead tr:nth-child(2) th{top:29px}
.fp-tab th.fp-mes{text-align:center;background:var(--accent-dim);color:var(--accent-forte);border-left:1px solid var(--line)}
.fp-tab th.fp-ano,.fp-tab td.fp-ano{background:var(--panel-2)}
.fp-rot{position:sticky;left:0;z-index:2;min-width:290px;max-width:290px;text-align:left !important;background:var(--panel)}
.fp-tab thead .fp-rot{z-index:4;background:var(--panel-3)}
.fp-sec td{background:var(--accent-dim) !important;color:var(--accent-forte);font-weight:700}
.fp-sec .fp-rot{display:flex;justify-content:space-between;align-items:center;max-width:none;position:sticky;left:0}
.fp-sec span{font-weight:700}
.fp-nome{overflow:hidden;text-overflow:ellipsis}
.fp-rot{overflow:hidden;text-overflow:ellipsis}
.fp-etq{margin-left:6px;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--panel-3);color:var(--fg-soft)}
.fp-etq.inv{background:var(--accent-dim);color:var(--accent-forte)}
.fp-acoes{float:right;opacity:0;transition:opacity .12s}
.fp-tab tr:hover .fp-acoes,.fp-acoes:focus-within{opacity:1}
.fp-mini,.fp-x{border:0;background:none;color:var(--fg-faint);cursor:pointer;font-size:14px;padding:0 4px}
.fp-mini:hover,.fp-x:hover{color:var(--st-perdido)}
.fp-n{text-align:right;font-variant-numeric:tabular-nums;min-width:92px}
.fp-n input{width:100%;min-width:84px;text-align:right;font:inherit;font-size:13px;padding:3px 6px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--fg)}
.fp-n input:hover{border-color:var(--line-strong)}
.fp-n input:focus{border-color:var(--accent);background:var(--panel-2);outline:0}
.fp-n input::placeholder{color:var(--fg-faint)}
.fp-real input{font-weight:600}
.fp-extrato input{color:var(--accent-forte)}
.fp-p{text-align:right;min-width:44px;color:var(--fg-faint);font-size:12px}
.fp-total td{font-weight:700}
.fp-total td,.fp-total .fp-rot{background:var(--panel-2)}
.fp-t-e td,.fp-t-s td{background:var(--panel-3)}
.fp-t-f td{background:var(--accent-dim);color:var(--accent-forte)}
.fp-t .neg,.fp-total .neg,.fp-n.neg{color:var(--st-perdido)}
.fp-rodape{margin:12px 2px 0;font-size:12.5px;color:var(--fg-faint)}
@media (max-width:640px){.fp{padding:10px 8px 24px}.fp-rot{min-width:170px;max-width:170px}.fp-frase{flex-direction:column}.fp-exemplos{columns:1}}

/* Planner no celular: Mês, Semana e Dia agrupados (abre e fecha com animação) e o card que o toque numa
   tarefa atrasada leva a achar no kanban. */

.abas-grupo{display:inline-flex;gap:2px;overflow:hidden;border-radius:99px}
.abas-grupo button{
  max-width:8rem;opacity:1;white-space:nowrap;overflow:hidden;
  transition:max-width .24s ease,opacity .2s ease,padding .24s ease;
}
.abas-grupo:not(.aberto) button:not([data-atual]){max-width:0;opacity:0;padding-left:0;padding-right:0;pointer-events:none}
.abas-grupo:not(.aberto) button[data-atual]::after{
  content:"";width:6px;height:6px;margin-left:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.7;
}
.card-alvo{animation:card-alvo 2.4s ease-out 1;outline:2px solid var(--st-perdido);outline-offset:2px}
@keyframes card-alvo{0%,60%{box-shadow:0 0 0 6px color-mix(in srgb,var(--st-perdido) 35%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){
  .abas-grupo button{transition:none}
  .card-alvo{animation:none}
}

/* Planner no celular: título e abas em cima; filtros e "+ Nova tarefa" juntos na linha de baixo, nas duas pontas. */
.barra-quebra{display:none}
@media (max-width:760px){
  html.mob #barra .barra-quebra{display:block;flex:0 0 100%;height:0;margin:0}
  html.mob #barra:has(.barra-quebra) .caixa-filtro{margin-right:auto}
  html.mob #barra:has(.barra-quebra) .barra-fim{margin-left:auto;margin-right:0}
  html.mob #barra:has(.barra-quebra) .barra-fim .botao{min-height:32px}
}

/* Tutorial: a bolinha da IA no canto superior direito de cada bloco. */
.tour-bloco-caixa{position:relative}
.tour-bolinha{position:absolute;top:-7px;right:-7px;width:26px;height:26px;padding:0;border:2px solid var(--panel,#fff);border-radius:50%;
  background:#2b6cb8;cursor:pointer;display:grid;place-items:center;
  transition:transform .15s,box-shadow .15s}
.tour-bolinha i{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
.tour-bolinha:hover{transform:scale(1.12);box-shadow:0 0 0 4px color-mix(in srgb,#2b6cb8 25%,transparent)}
@media (prefers-reduced-motion:reduce){.tour-bolinha{transition:none}}

/* Oportunidades (prévia da conta): colunas Oportunidade, Serviço, Fase, Valor e Criada em. */
.servico-cab,.servico > button:has(.servico-nome){
  display:grid;grid-template-columns:14px minmax(100px,1fr) minmax(130px,1.5fr) minmax(86px,auto) minmax(78px,auto) 74px;
  align-items:center;column-gap:10px;
}
.servico-cab{padding:0 10px 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint)}
.servico-cab .num{text-align:right}
.servico-nome{min-width:0;font-size:13px;color:var(--fg-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.servico-data{font-size:12.5px;color:var(--fg-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.servico > button:has(.servico-nome) .preco{text-align:right}
.servico > button:has(.servico-nome) .selo{justify-self:start}
.link-previa:has(.servico-cab){width:min(740px,calc(100vw - 24px))}

/* WhatsApp no rodapé: o ícone no meio e o painel de conversas embaixo, à esquerda, até a metade da altura. */
.rodape-crm{position:relative}
.rodape-whats{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);
  color:#1faa59;display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .15s,transform .15s,border-color .15s;
}
.rodape-whats:hover,.rodape-whats.aberto{background:color-mix(in srgb,#25d366 14%,var(--panel));border-color:#25d366}
.rodape-whats-n{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:#e5484d;color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;line-height:1;
}
.wd{
  position:fixed;left:14px;bottom:56px;z-index:70;width:372px;height:calc(var(--tela) / 2);max-height:calc(var(--tela) - 120px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--sombra-alta);
  animation:wd-entra .16s var(--ease);
}
@keyframes wd-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wd{animation:none}}
.wd-topo{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.wd-topo b{font-size:14px}
.wd-icone{color:#1faa59;display:inline-flex}
.wd-fechar{margin-left:auto;border:0;background:transparent;color:var(--fg-faint);cursor:pointer;padding:4px;border-radius:6px;display:inline-flex}
.wd-fechar:hover{background:var(--panel-3);color:var(--fg)}
.wd-vista{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.wd-vista[hidden]{display:none}
.wd-filtros{display:flex;gap:6px;padding:10px 12px 0}
.wd-filtros button{border:1px solid var(--line);background:transparent;color:var(--fg-faint);font:inherit;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:99px;cursor:pointer}
.wd-filtros button i{font-style:normal;margin-left:4px;opacity:.8}
.wd-filtros button[aria-pressed="true"]{background:var(--panel-3);color:var(--fg);border-color:var(--line-strong)}
.wd-busca{margin:10px 12px;width:auto}
.wd-itens{flex:1 1 auto;overflow:auto;padding:0 6px 8px}
.wd-sub{margin:8px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint)}
.wd-vazio{margin:14px 12px;color:var(--fg-faint);font-size:13px}
.wd-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:9px}
.wd-item:hover{background:var(--panel-3)}
.wd-av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.wd-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.wd-txt b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-txt small{font-size:12px;color:var(--fg-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-quando{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11.5px;color:var(--fg-faint);white-space:nowrap}
.wd-quando em{font-style:normal;font-weight:700;color:#b45309}
.wd-item.aguardando .wd-txt b{color:var(--fg)}
.wd-cab{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.wd-voltar{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--fg-faint);padding:0 6px}
.wd-nome{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-quem{margin-left:auto;max-width:150px;font-size:12px}
.wd-msgs{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:10px 12px}
.wd-escrever{display:flex;gap:8px;align-items:flex-end;padding:8px 10px;border-top:1px solid var(--line)}
.wd-escrever textarea{flex:1 1 auto;resize:none;font:inherit;font-size:13px}
html.mob .rodape-whats{display:none}

/* Links rápidos: borda transparente (teste pedido pelo Ariel em 04/11/2026; para voltar, apague este bloco). */
.link-caixa,.link-caixa:hover,html .link-caixa{border-color:transparent !important}

/* Conta: informações da empresa em três colunas, e o bloco de links rápidos um pouco mais largo. */
.pares.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.pares.tres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.pares.tres{grid-template-columns:minmax(0,1fr)}}
.conta-grade{grid-template-columns:minmax(0,1fr) 470px}
@media (max-width:1100px){.conta-grade{grid-template-columns:minmax(0,1fr) 390px}}
@media (max-width:900px){.conta-grade{grid-template-columns:minmax(0,1fr)}}

/* Conta pai: o símbolo de hierarquia antes do texto. */
.conta-pai-chip{display:inline-flex;align-items:center;gap:7px}
.conta-pai-ico{display:inline-flex;flex:0 0 auto;opacity:.85}

/* A bolinha da IA ao lado do X nas janelas com formulário, e o painel de ajuda. */
.janela{position:relative}
.ia-bolinha{color:#fff;background:#2b6cb8;border-color:#2b6cb8;border-radius:50%}
.ia-bolinha:hover,.ia-bolinha.aberto{background:#1f5a9f;border-color:#1f5a9f;color:#fff}
.ia-ajuda{
  position:absolute;top:58px;right:14px;z-index:5;width:min(380px,calc(100% - 28px));max-height:calc(100% - 90px);overflow:auto;
  display:flex;flex-direction:column;gap:9px;padding:14px;background:var(--panel);
  border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--sombra-alta);
}
.ia-ajuda[hidden]{display:none}
.iaa-topo{display:flex;align-items:center;gap:8px;font-size:13.5px}
.iaa-bola{width:10px;height:10px;border-radius:50%;background:#2b6cb8;flex:0 0 auto}
.iaa-saida:empty{display:none}
.iaa-texto{margin:0;font-size:13.5px;line-height:1.5;white-space:pre-wrap;color:var(--fg)}
.iaa-custo,.iaa-aviso{font-size:11.5px;color:var(--fg-faint)}
.iaa-espera{margin:0;font-size:13px;color:var(--fg-faint)}
.iaa-erro{margin:0;font-size:13px;color:var(--st-perdido,#b42318)}
.ia-ajuda textarea{font:inherit;font-size:13px;resize:vertical}
.ia-ajuda .iap{margin:0}

/* A bolinha da IA (computador e celular): o símbolo EX da eixo, em círculo escuro com anel verde. */
.pc-bola-av.logo-ia,.mob-athenas-av.logo-ia{background:#2ee6c5;animation:none}
.logo-ia-in{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#05212b;color:#2ee6c5}
.logo-ia-in svg{width:62%;height:auto;display:block}

/* WhatsApp no rodapé: ícone maior e o nome ao lado. */
.rodape-whats{width:auto;height:46px;padding:0 18px 0 12px;border-radius:99px;display:flex;align-items:center;gap:9px;font:inherit}
.rodape-whats-nome{font-size:14px;font-weight:700;color:var(--fg)}
.rodape-whats-n{top:-4px;right:-4px}

/* Mensalidade do CRM (só no CRM da eixo). */
.mens-corpo{display:grid;gap:14px}
.mens-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:end}
.mens-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--fg-faint)}
.mens-form label span{font-weight:600;letter-spacing:.03em}
.mens-largo{grid-column:1 / -1}
.mens-ativa{flex-direction:row !important;align-items:center;gap:8px !important;font-size:13px !important;color:var(--fg) !important}
.mens-lista{display:grid;gap:8px}
.mens-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px;background:var(--panel-2)}
.mens-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px}
.mens-cab b{font-size:13.5px}
.mens-acoes{display:flex;gap:8px}
.mens-acoes input{flex:1 1 auto;min-width:0}
.mens-canais{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px}
.mens-canais label{display:inline-flex;align-items:center;gap:6px}
.mens-nota,.mens-vazio{margin:0;font-size:13px;color:var(--fg-faint)}

/* Celular: a barra de baixo vira uma pílula branca flutuante. O item atual ganha um fundo verde claro, o Mais fica
   no meio (claro, como os outros) e o + de Criar vai para a ponta. */
@media (max-width:760px){
  html.mob .mob-abas{
    left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:7px;gap:2px;align-items:stretch;
    border:0;border-radius:28px;background:#fff;backdrop-filter:none;
    box-shadow:0 12px 32px -10px rgba(15,35,40,.30),0 2px 8px rgba(15,35,40,.08);
  }
  html.mob .mob-aba{border-radius:21px;padding:8px 2px 7px;gap:4px;color:var(--fg-faint);transition:background .2s,color .2s}
  html.mob .mob-aba-ico{width:auto;height:auto;border-radius:0;background:none}
  html.mob .mob-aba.atual{background:color-mix(in srgb,var(--accent) 24%,#fff);color:#0b3d36}
  html.mob .mob-aba.atual .mob-aba-ico{background:none}
  html.mob .mob-aba-pontos{color:var(--fg-faint)}
  html.mob .mob-aba-mais{color:var(--fg-faint)}
  html.mob .mob-mais-bola{width:30px;height:30px;margin-top:0;box-shadow:none;background:#24c9b0;color:#fff}
  html.mob .mob-mais-bola svg{width:17px;height:17px}
  html.mob body{padding-bottom:calc(98px + env(safe-area-inset-bottom))}
  html.mob .mob-athenas{bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* Hub da empresa: página mais larga e letras um pouco maiores (a pedido do Ariel, 04/11/2026). */
.hub-corpo{max-width:1480px}
.hub-corpo .pares dt{font-size:12px}
.hub-corpo .pares dd{font-size:16px}

/* Informações da empresa (conta): uma linha embaixo de cada campo e o lápis de editar sempre visível. */
.pares.tres .par{padding-bottom:10px;border-bottom:1px solid var(--line)}
.pares.tres .par.editavel .lapis{opacity:1;color:var(--fg-soft)}
.pares.tres .par.editavel .lapis:hover{color:var(--accent-forte)}

/* Links rápidos: a sombra suave verde (a do item apontado) em todos, o tempo todo. */
.link-caixa,.link-caixa:hover,html .link-caixa{box-shadow:0 6px 16px rgba(14,140,125,.10) !important}

/* Painel do WhatsApp: maior e colado na borda de cima do rodapé (a base é posta por JS), sem encostar no rodapé por cima. */
.wd{left:0;bottom:0;width:480px;height:calc(var(--tela) * .66);max-height:calc(var(--tela) - 90px);border-radius:14px 14px 0 0;border-bottom:0;border-left:0}
@media (max-width:520px){.wd{width:100%}}

/* Botão do WhatsApp no rodapé: sem borda (a pedido do Ariel, 04/11/2026). */
.rodape-whats,.rodape-whats:hover,.rodape-whats.aberto{border:0}

/* Tela da IA (ia.html): sem a borda colorida em volta (só desta tela; a janelinha da IA e a bolinha mantêm a deles). */
.iaim::after{display:none !important}
/* O seletor "Athenas / Cronos" saiu da tela da IA. */
.iaim .persona-seta,.iaim .persona-nota{display:none}

/* Busca do topo: um ícone por tipo de resultado (empresa verde, oportunidade laranja...). */
.achados .busca-ico{flex:0 0 auto;display:inline-flex;color:var(--ic,#16a34a)}
.achados .busca-ico svg{width:18px;height:18px}

/* Busca do topo: ao clicar, a caixa cresce da esquerda para a direita, com animação (só no computador). */
@media (min-width:761px){
  html:not(.mob) .topo-meio{justify-content:flex-start}
  html:not(.mob) .busca{
    flex:0 0 auto;width:340px;max-width:none;margin-left:max(0px,calc(50% - 170px));z-index:55;
    transition:width .4s cubic-bezier(.22,.61,.36,1),border-color .16s var(--ease),background .16s var(--ease),box-shadow .25s var(--ease);
  }
  html:not(.mob) .busca:focus-within{width:min(620px,calc(100vw - 520px));box-shadow:0 10px 26px -12px rgba(15,35,40,.30)}
}
@media (prefers-reduced-motion:reduce){html:not(.mob) .busca{transition:none}}

/* A lixeira do CRM. */
.lixeira-filtro{margin:4px 0 10px;max-width:260px}
.lixeira-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lixeira-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.lixeira-nome{flex:1 1 auto;min-width:0;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lixeira-item small{color:var(--fg-faint);white-space:nowrap}
.lixeira-botao svg{width:17px;height:17px}

/* Aniversariantes: pessoas (roxo) e empresas (verde), em abas separadas. */
.aniv-botao{position:relative}
.aniv-n{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#e5484d;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
.aniv-abas{display:flex;gap:6px;margin-bottom:8px}
.aniv-abas button{border:1px solid var(--line);background:transparent;color:var(--fg-faint);font:inherit;font-size:13px;font-weight:600;padding:5px 12px;border-radius:99px;cursor:pointer}
.aniv-abas button i{font-style:normal;margin-left:5px;opacity:.8}
.aniv-abas button[aria-pressed="true"]{background:var(--panel-3);color:var(--fg);border-color:var(--line-strong)}
.aniv-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.aniv-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.aniv-item.hoje{border-color:#8b5cf6;background:color-mix(in srgb,#8b5cf6 8%,var(--panel-2))}
.aniv-ico{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:0 0 auto;color:#fff}
.aniv-ico.pessoa{background:#8b5cf6}
.aniv-ico.empresa{background:#16a34a}
.aniv-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.aniv-txt b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aniv-txt small,.aniv-dia small{color:var(--fg-faint);font-size:12px}
.aniv-dia{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}

/* Busca pequena e dinâmica, filtro à direita e rodapé sempre à vista (05/11/2026). */
.mini-linha{display:flex;align-items:center;gap:12px;margin:10px 18px 20px}
.mini-linha .mini-busca{flex:0 1 auto;width:260px;max-width:none;margin:0;transition:width .22s ease}
.mini-linha .mini-busca:focus-within{width:min(430px,60%)}
.mini-linha .mini-busca input{padding:7px 12px;font-size:13.5px}
.mini-linha .caixa-filtro{margin-left:auto}
.mini-linha .painel-filtro{left:auto;right:0}
html.mob .mini-linha{margin:8px 12px 12px}
html.mob .mini-linha .mini-busca,html.mob .mini-linha .mini-busca:focus-within{width:100%}
/* O rodapé é FIXO na parte de baixo da tela inteira, e o menu da direita passa por cima dele. */
.palco-geral .rodape-crm{position:fixed;left:0;right:0;bottom:0;z-index:35;margin:0;padding-right:calc(var(--lateral) + 18px);box-sizing:border-box}
.palco-geral > div:first-child{padding-bottom:64px}
.palco-geral .lateral{z-index:50}
@media (max-width:1040px){.palco-geral .rodape-crm{padding-right:18px}}
html.mob .palco-geral > div:first-child{padding-bottom:0}

/* Hinter: a nova cara das conversas integradas (antes "WhatsApp"). Lista no estilo dos aplicativos de mensagem. */
.wd{width:380px;border-radius:16px;border:0;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.wd-topo{background:#0f8a70;border-bottom:0;padding:14px 14px 6px;color:#fff}
.wd-topo b{font-size:20px;font-weight:700;letter-spacing:.2px;color:#fff}
.wd-topo .wd-icone{color:#fff}
.wd-topo .selo{background:rgba(255,255,255,.18);border-color:transparent;color:#fff;font-size:10.5px}
.wd-topo .wd-fechar{color:#fff;opacity:.85}
.wd-topo .wd-fechar:hover{background:rgba(255,255,255,.18);color:#fff;opacity:1}
.wd-filtros{background:#0f8a70;padding:0 8px;gap:0}
.wd-filtros button{flex:1 1 0;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:rgba(255,255,255,.72);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:10px 6px 9px}
.wd-filtros button[aria-pressed="true"]{background:transparent;color:#fff;border-color:#fff}
.wd-filtros button i{background:rgba(255,255,255,.22);border-radius:99px;padding:1px 7px;margin-left:6px;font-size:11px;opacity:1}
.wd-busca{margin:10px 12px 6px;border-radius:99px;border:0;background:var(--panel-3);padding:9px 14px}
.wd-itens{padding:0 0 8px}
.wd-item{gap:13px;padding:11px 16px;border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.wd-av{width:48px;height:48px;font-size:15px}
.wd-txt b{font-size:15.5px}
.wd-txt small{font-size:13.5px}
.wd-quando{align-self:flex-start;margin-top:3px;font-size:12px}
.wd-item.aguardando .wd-quando{color:#0f8a70;font-weight:700}
.wd-quando em{font-style:normal;background:#19c37d;color:#fff;border-radius:99px;padding:2px 8px;font-size:11px;font-weight:700}
.wd-item.aguardando .wd-txt small{color:var(--fg)}
.wd-cab{background:#0f8a70;border-bottom:0;color:#fff}
.wd-cab .wd-voltar{color:#fff}
.wd-cab .wd-nome{color:#fff;font-size:15px}

/* Marketing (05/11/2026): o Criador de landing pages é o principal. Anexos e pedido ficam no mesmo quadro. */
.mkt-pagina{max-width:1040px;margin:0 auto;padding:18px 18px 90px;display:flex;flex-direction:column;gap:16px}
.mkt-topo h1{font-size:24px;margin:0}
.mkt-topo p{margin:4px 0 0;color:var(--fg-soft)}
.mkt-abas{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.mkt-aba{border:0;background:transparent;color:var(--fg-faint);font:inherit;font-weight:600;padding:9px 14px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.mkt-aba:hover{color:var(--fg)}
.mkt-aba[aria-selected="true"]{color:var(--fg);border-color:var(--accent)}
.mkt-landing{display:flex;flex-direction:column;gap:22px}
.mkt-aviso{margin:0;align-self:flex-start;background:var(--panel-2);color:var(--fg-soft);border-radius:8px;padding:6px 11px;font-size:13px}
.mkt-quadro{background:var(--panel);border:1px solid var(--line-strong,var(--line));border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 6px 24px rgba(10,30,34,.07)}
.mkt-rot{display:flex;align-items:baseline;gap:10px}
.mkt-rot h2{font-size:15.5px;margin:0}
.mkt-rot small{color:var(--fg-faint);font-size:12.5px}
.mkt-anexos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:520px}
.mkt-slot{position:relative;aspect-ratio:16/10;border:1.5px dashed var(--line-strong,var(--line));border-radius:12px;background:var(--panel-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:8px;cursor:pointer;overflow:hidden;color:var(--fg-soft);transition:border-color .15s,background .15s}
.mkt-slot:hover,.mkt-slot:focus-within{border-color:var(--accent);background:var(--accent-dim)}
.mkt-slot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.mkt-slot b{font-size:13px;color:var(--fg)}
.mkt-slot span{font-size:11.5px;color:var(--fg-faint);line-height:1.25}
.mkt-slot svg{width:20px;height:20px;color:var(--accent)}
.mkt-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mkt-slot .tira{position:absolute;right:6px;top:6px;z-index:2;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:none}
.mkt-slot.cheio .tira{display:block}
.mkt-slot .nome{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:3px 7px;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-hub{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.mkt-hub:focus-within{border-color:var(--accent)}
.mkt-hub textarea{width:100%;border:0;outline:0;resize:none;background:transparent;color:inherit;font:inherit;font-size:15px;min-height:70px}
.mkt-hub-pe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mkt-qtd{display:inline-flex;align-items:center;gap:6px;color:var(--fg-soft);font-size:13px}
.mkt-qtd button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong,var(--line));background:var(--panel);color:var(--fg);font-size:15px;line-height:1;cursor:pointer}
.mkt-qtd output{min-width:20px;text-align:center;font-weight:700;color:var(--fg)}
.mkt-enviar{margin-left:auto}
.mkt-enviar:disabled{opacity:.45;cursor:not-allowed}
.mkt-modelos{display:flex;flex-direction:column;gap:12px}
.mkt-onde{display:flex;flex-wrap:wrap;gap:8px}
.mkt-chip{height:32px;padding:0 13px;border-radius:99px;border:1px solid var(--line-strong,var(--line));background:var(--panel);color:var(--fg-soft);font:inherit;font-size:13px;cursor:pointer}
.mkt-chip:hover{border-color:var(--accent);color:var(--fg)}
.mkt-chip[aria-pressed="true"]{background:var(--fg);color:var(--panel);border-color:var(--fg)}
.mkt-chip i{font-style:normal;opacity:.65;font-size:11.5px;margin-left:4px}
.mkt-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.mkt-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:9px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,transform .15s}
.mkt-card:hover{border-color:var(--line-strong,var(--line));transform:translateY(-2px)}
.mkt-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.mkt-card .ok{position:absolute;right:15px;top:15px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--sobre-accent);display:none;place-items:center;font-size:13px;font-weight:700;z-index:2}
.mkt-card[aria-pressed="true"] .ok{display:grid}
.mkt-card b{font-size:13.5px}
.mkt-card small{color:var(--fg-faint);font-size:11.5px}
.mkt-th{position:relative;aspect-ratio:4/5;border-radius:9px;background:var(--panel-2);overflow:hidden;padding:9px;display:flex;flex-direction:column;gap:6px}
.mkt-th.alto{aspect-ratio:9/16}
.mkt-th i{display:block;border-radius:3px;background:var(--line-strong,#c6d3d4)}
.mkt-th .t{height:9px;width:78%}.mkt-th .t2{height:9px;width:52%}
.mkt-th .p{height:5px;width:90%}.mkt-th .p2{height:5px;width:66%}
.mkt-th .bt{height:13px;width:46%;border-radius:99px;background:var(--accent)}
.mkt-th .im{flex:1 1 auto;min-height:20px;background:var(--fg-faint);opacity:.35;border-radius:6px}
.mkt-th .cx{height:26px;border-radius:5px}
.mkt-th.c{align-items:center;text-align:center}.mkt-th.c i{margin-inline:auto}
.mkt-th .duas{display:flex;gap:6px;flex:1 1 auto}.mkt-th .duas>div{flex:1;display:flex;flex-direction:column;gap:6px}
.mkt-th .duas>i{flex:1;min-height:0}
.mkt-th .preco{width:44px;height:44px;border-radius:50%;background:var(--accent);opacity:.9;align-self:center}
.mkt-th .tres{display:flex;gap:5px}.mkt-th .tres i{flex:1;height:34px;border-radius:5px}
.mkt-th .aspas{font-size:28px;line-height:1;color:var(--fg-faint)}
.mkt-vazio{padding:24px;border:1.5px dashed var(--line-strong,var(--line));border-radius:14px;color:var(--fg-faint);text-align:center;grid-column:1/-1}
.mkt-barra{position:sticky;bottom:64px;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 14px;box-shadow:0 -6px 20px rgba(10,30,34,.08)}
.mkt-resumo{font-size:13.5px;color:var(--fg-soft)}
.mkt-resumo b{color:var(--fg)}
.mkt-breve{border:1.5px dashed var(--line-strong,var(--line));border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mkt-breve h2{margin:0;font-size:18px}.mkt-breve p{margin:0;color:var(--fg-soft);max-width:60ch}
@media (max-width:640px){.mkt-anexos{max-width:none}.mkt-slot{aspect-ratio:1;padding:5px}.mkt-slot span{display:none}.mkt-grade{grid-template-columns:repeat(2,minmax(0,1fr))}.mkt-enviar{width:100%;margin-left:0}}

/* Fluxos (05/11/2026): lista e editor de quadradinhos, fundo branco quadriculado. */
.flx-pagina{max-width:1080px;margin:0 auto;padding:18px 18px 90px;display:flex;flex-direction:column;gap:16px}
.flx-topo{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.flx-topo h1{font-size:24px;margin:0}
.flx-topo p{margin:4px 0 0;color:var(--fg-soft);max-width:62ch}
.flx-topo-acoes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.flx-vazio{border:1.5px dashed var(--line-strong,var(--line));border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:10px}
.flx-vazio h2{margin:0;font-size:18px}.flx-vazio p{margin:0;color:var(--fg-soft)}
.flx-modelos{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.flx-modelo{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;border:1px solid var(--line-strong,var(--line));background:var(--panel);border-radius:12px;padding:12px 14px;font:inherit;color:inherit;cursor:pointer;max-width:290px}
.flx-modelo:hover{border-color:var(--accent)}
.flx-modelo span{font-size:12.5px;color:var(--fg-faint)}
.flx-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.flx-cartao{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.flx-cartao.ligado{border-color:var(--accent)}
.flx-c-topo{display:flex;align-items:flex-start;gap:10px}
.flx-c-topo h2{font-size:15.5px;margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.flx-c-gat{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-soft)}
.flx-c-gat svg{color:var(--accent);flex:none}
.flx-c-meta{margin:0;font-size:12.5px;color:var(--fg-faint)}
.flx-c-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.flx-liga{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;color:var(--fg-soft);flex:none}
.flx-liga input{position:absolute;opacity:0;width:0;height:0}
.flx-trilho{width:34px;height:20px;border-radius:99px;background:var(--line-strong,#c8d4d5);position:relative;transition:background .15s;flex:none}
.flx-trilho i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.flx-liga input:checked + .flx-trilho{background:var(--accent)}
.flx-liga input:checked + .flx-trilho i{transform:translateX(14px)}
.flx-liga input:focus-visible + .flx-trilho{outline:2px solid var(--accent);outline-offset:2px}
.flx-liga input:disabled + .flx-trilho{opacity:.5}
.flx-passos ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.flx-hist{display:flex;flex-direction:column;gap:10px}
.flx-h-item{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:9px 12px;display:flex;flex-direction:column;gap:3px}
.flx-h-item.atencao{border-left-color:#d9822b}
.flx-h-item small{color:var(--fg-faint)}
.flx-h-item ul{margin:2px 0 0;padding-left:18px;font-size:13px;color:var(--fg-soft)}
/* o editor */
.flx-editor{display:flex;flex-direction:column;height:calc(var(--tela) - var(--topo) - 64px);min-height:460px}
.flx-barra{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.flx-nome{flex:1;min-width:0;font:inherit;font-size:16px;font-weight:600;border:1px solid transparent;border-radius:8px;padding:6px 10px;background:transparent;color:inherit}
.flx-nome:hover,.flx-nome:focus{border-color:var(--line-strong,var(--line));background:var(--panel-2)}
.flx-corpo{flex:1;min-height:0;display:grid;grid-template-columns:210px minmax(0,1fr) 290px}
.flx-paleta,.flx-config{background:var(--panel);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.flx-paleta{border-right:1px solid var(--line)}
.flx-config{border-left:1px solid var(--line)}
.flx-paleta h2,.flx-config h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin:6px 0 0}
.flx-config h2{text-transform:none;letter-spacing:0;font-size:15px;color:var(--fg)}
.flx-dica{margin:0 0 4px;font-size:12px;color:var(--fg-faint);line-height:1.4}
.flx-item{display:flex;align-items:flex-start;gap:8px;text-align:left;border:1px solid var(--line-strong,var(--line));background:var(--panel);color:var(--fg);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;cursor:pointer}
.flx-item svg{flex:none;margin-top:1px;color:var(--accent)}
.flx-item:hover{border-color:var(--accent);background:var(--accent-dim)}
.flx-item.gat svg{color:#d9822b}
.flx-area{position:relative;overflow:auto;background-color:#fff;
  background-image:linear-gradient(#e4eaeb 1px,transparent 1px),linear-gradient(90deg,#e4eaeb 1px,transparent 1px);background-size:20px 20px}
html[data-tema="escuro"] .flx-area{background-color:#0f171a;background-image:linear-gradient(#1c2a2e 1px,transparent 1px),linear-gradient(90deg,#1c2a2e 1px,transparent 1px)}
.flx-tela{position:relative;min-width:100%;min-height:100%}
.flx-setas{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.flx-seta{fill:none;stroke:#6f8386;stroke-width:2}
.flx-ponta{fill:#6f8386}
.flx-tira{pointer-events:all;cursor:pointer}
.flx-tira circle{fill:#fff;stroke:#c2362b;stroke-width:1.5}
.flx-tira path{stroke:#c2362b;stroke-width:1.8;fill:none;stroke-linecap:round}
.flx-no{position:absolute;box-sizing:border-box;background:#fff;color:#0f1a1c;border:1.5px solid #b9c7c9;border-left:5px solid var(--accent);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:3px;cursor:grab;touch-action:none;box-shadow:0 2px 8px rgba(10,30,34,.1);user-select:none}
.flx-no.gatilho{border-left-color:#d9822b;background:#fff8ef}
.flx-no.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim),0 2px 8px rgba(10,30,34,.1)}
.flx-no.ligando{border-color:#2b6cb8;box-shadow:0 0 0 3px rgba(43,108,184,.25)}
.flx-no-t{display:flex;align-items:center;gap:6px;font-size:12px;color:#4a5b5e;text-transform:uppercase;letter-spacing:.06em}
.flx-no-t svg{color:var(--accent)}.flx-no.gatilho .flx-no-t svg{color:#d9822b}
.flx-no-r{font-size:13px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.flx-porta{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:1.5px solid #6f8386;background:#fff;color:#4a5b5e;font-size:12px;line-height:1;padding:0;display:grid;place-items:center}
.flx-porta.ent{left:-13px}
.flx-porta.sai{right:-13px;cursor:pointer}
.flx-porta.sai:hover{border-color:var(--accent);color:var(--accent)}
.flx-ligando{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#2b6cb8;color:#fff;font-size:13px;padding:6px 14px;border-radius:99px;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.flx-campo{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--fg-soft)}
.flx-campo input,.flx-campo select,.flx-campo textarea{font:inherit;font-size:14px;color:var(--fg);background:var(--panel);border:1px solid var(--line-strong,var(--line));border-radius:8px;padding:7px 9px;width:100%;resize:vertical}
.flx-campo small{color:var(--fg-faint)}
.flx-fichas{display:flex;flex-wrap:wrap;gap:5px}
.flx-ficha{border:1px solid var(--line-strong,var(--line));background:var(--panel-2);border-radius:99px;padding:3px 9px;font:inherit;font-size:12px;cursor:pointer;color:var(--fg)}
.flx-ficha:hover{border-color:var(--accent)}
.flx-passo-a-passo{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--fg-soft)}
@media (max-width:900px){
  .flx-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(280px,1fr) auto}
  .flx-paleta{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);max-height:150px}
  .flx-paleta h2,.flx-paleta .flx-dica{flex-basis:100%}
  .flx-config{border-left:0;border-top:1px solid var(--line);max-height:260px}
  .flx-editor{height:auto}
}

/* O fluxo que a IA propôs, dentro da conversa. */
.iaf-fluxo,.iaim-cartao .iaf-fluxo{border:1px solid var(--line-strong,var(--line));border-left:4px solid var(--accent);border-radius:10px;background:var(--panel);padding:10px 12px;margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.iaf-fluxo ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px;color:var(--fg-soft)}
.iaf-fluxo small{color:var(--fg-faint)}
.iaf-fluxo .botao{align-self:flex-start}

/* Busca do topo mais para a esquerda: logo à esquerda, a caixa logo depois dela (antes ficava no meio da tela). Só no computador. */
@media (min-width:761px){
  html:not(.mob) .topo{grid-template-columns:auto minmax(0,1fr) auto}
  html:not(.mob) .topo-meio{justify-content:flex-start;padding-left:26px}
  html:not(.mob) .busca{margin-left:0}
  html:not(.mob) .busca:focus-within{width:min(620px,calc(100vw - 640px))}
}

/* Busca do topo um pouco maior (computador): mais larga, mais alta e com letra maior. */
@media (min-width:761px){
  html:not(.mob) .busca{width:440px;height:38px;padding:0 14px 0 6px}
  html:not(.mob) .busca input{font-size:14.5px}
  html:not(.mob) .busca .busca-escopo{font-size:14px}
  html:not(.mob) .busca:focus-within{width:min(700px,calc(100vw - 640px))}
}

/* A prévia ao passar o mouse num resultado da busca do topo (empresa, contato, oportunidade, contrato). */
.busca-previa{position:fixed;z-index:70;width:350px;max-height:calc(100vh - 80px);overflow:hidden;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--raio-g);box-shadow:var(--sombra-alta);animation:previa-entra .13s var(--ease)}
.busca-previa > header{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.busca-previa > header b{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.busca-previa .bp-corpo{padding:10px 13px;display:flex;flex-direction:column;gap:9px;overflow:auto}
.busca-previa h4{margin:0 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}
.busca-previa h4 i{font-style:normal;background:var(--panel-3);border-radius:99px;padding:0 7px;margin-left:4px;letter-spacing:0}
.busca-previa ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.busca-previa li{display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.busca-previa li span{font-size:12px;color:var(--fg-faint)}
.busca-previa li.mais{font-size:12px;color:var(--fg-faint)}
.busca-previa .bp-foco{border:1px solid var(--accent);background:var(--accent-dim);border-radius:10px;padding:8px 10px}
.busca-previa .bp-foco p{margin:0;font-size:13px;overflow-wrap:anywhere}
.busca-previa .bp-meta{margin:0;font-size:12.5px;color:var(--fg-soft)}
.busca-previa > footer{display:flex;gap:14px;padding:9px 13px;border-top:1px solid var(--line);font-size:13px}
.busca-previa > footer a{color:var(--accent-forte);font-weight:600}
html.mob .busca-previa{display:none}

/* ===== Relatórios (rel-) ===== */
.rel-pagina{max-width:1240px;margin:0 auto;padding:18px 18px 90px;display:flex;flex-direction:column;gap:14px}
.rel-topo h1{font-size:24px;margin:0}
.rel-topo p{margin:4px 0 0;color:var(--fg-soft);max-width:70ch}
.rel-abas{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.rel-aba{border:0;background:none;color:var(--fg-faint);font-weight:600;font-size:14px;font-family:inherit;padding:10px 16px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.rel-aba[aria-selected="true"]{color:var(--fg);border-color:var(--accent)}
.rel-painel[hidden],.rel-per[hidden],.rel-aside[hidden],.rel-pop[hidden],.rel-menu[hidden]{display:none}
.rel-cartao{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.rel-per{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:9px 14px}
.rel-rot{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}
.rel-chips{display:flex;gap:6px;flex-wrap:wrap}
.rel-chip{border:1px solid var(--line-strong);background:var(--panel);color:var(--fg-soft);border-radius:99px;padding:5px 12px;font-weight:500;font-size:13px;font-family:inherit;cursor:pointer}
.rel-chip:hover{border-color:var(--accent)}
.rel-chip[aria-pressed="true"]{background:var(--fg);color:var(--panel);border-color:var(--fg)}
.rel-custom{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--fg-soft);flex-wrap:wrap}
.rel-custom[hidden]{display:none}
.rel-per select,.rel-custom input,.rel-campo select,.rel-campo input,.rel-aside select,.rel-aside input[type=search],.rel-janela-corpo input[type=text]{font:inherit;font-size:13.5px;color:var(--fg);background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;padding:6px 9px}
.rel-res{margin-left:auto;font-size:12.5px;color:var(--fg-faint)}
.rel-barra{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.rel-nome{font-weight:700;font-size:15px}
.rel-esp{flex:1}
.rel-seg{display:flex;gap:6px}
.rel-exp{position:relative}
.rel-menu{position:absolute;right:0;top:100%;margin-top:4px;z-index:30;min-width:190px;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column}
.rel-menu button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:8px;font:inherit;font-size:13.5px;color:var(--fg);cursor:pointer}
.rel-menu button:hover{background:var(--accent-dim)}
.rel-rapidos{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.rel-campo{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--fg-soft)}
.rel-grade{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;align-items:start}
.rel-aside{display:flex;flex-direction:column;gap:10px}
.rel-aside h4,.rel-zona h4{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin:0}
.rel-cols{display:flex;flex-wrap:wrap;gap:5px}
.rel-fch{border:1px solid var(--line-strong);border-radius:99px;padding:3px 10px;font:inherit;font-size:12.5px;background:var(--panel);cursor:grab;user-select:none;color:var(--fg)}
.rel-fch.med{border-style:dashed}
.rel-fch:hover{border-color:var(--accent)}
.rel-zona{border:1.5px dashed var(--line-strong);border-radius:10px;padding:8px;min-height:56px;display:flex;flex-direction:column;gap:6px}
.rel-zona.sobre{border-color:var(--accent);background:var(--accent-dim)}
.rel-zona-itens{display:flex;flex-direction:column;gap:5px}
.rel-vazio-z{font-size:12px;color:var(--fg-faint)}
.rel-zi{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:8px;padding:3px 6px 3px 10px;font-size:12.5px;background:var(--panel)}
.rel-zi b{flex:1 1 100px;min-width:0;font-weight:500}
.rel-zi select{font:inherit;font-size:12px;border:1px solid var(--line-strong);border-radius:6px;padding:1px 4px;background:var(--panel);color:var(--fg)}
.rel-zi button{border:0;background:none;cursor:pointer;color:var(--fg-faint);font-size:14px;padding:0 4px}
.rel-zi button:hover{color:var(--fg)}
.rel-pop{position:fixed;z-index:80;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.25);padding:10px;max-width:260px;max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.rel-pop label{display:flex;gap:6px;align-items:center;font-size:13px}
.rel-pop input[type=number]{width:100%;font:inherit;border:1px solid var(--line-strong);border-radius:8px;padding:6px 8px;background:var(--panel);color:var(--fg)}
.rel-cks{display:flex;flex-direction:column;gap:4px;font-size:13px;max-height:260px;overflow:auto}
.rel-cks label{display:flex;gap:6px;align-items:center}
.rel-tab-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;max-height:520px}
.rel-tab-wrap table{border-collapse:collapse;width:100%;font-size:13px}
.rel-tab-wrap th,.rel-tab-wrap td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.rel-tab-wrap th{position:sticky;top:0;background:var(--panel-2);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);cursor:pointer}
.rel-tab-wrap th.ord::after{content:' ▲'}
.rel-tab-wrap th.ord.dec::after{content:' ▼'}
.rel-tab-wrap td.n,.rel-tab-wrap th.n{text-align:right;font-variant-numeric:tabular-nums}
.rel-tab-wrap tr.tot td{font-weight:700;background:var(--accent-dim)}
.rel-barras{display:flex;flex-direction:column;gap:7px}
.rel-barras .l{display:grid;grid-template-columns:170px minmax(0,1fr) 90px;gap:8px;align-items:center;font-size:13px}
.rel-barras .b{height:18px;border-radius:5px;background:var(--accent)}
.rel-nada{padding:22px;color:var(--fg-faint);text-align:center}
.rel-msg{margin-top:8px;font-size:12.5px;color:var(--fg-soft);min-height:18px}
.rel-topolista{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;margin-bottom:8px;font-size:13px;color:var(--fg-soft)}
.rel-topolista b{color:var(--fg);font-size:15px}
.rel-aviso-corte{margin:0 0 8px;padding:8px 12px;border-radius:10px;background:var(--panel-2);font-size:12.5px;color:var(--fg-soft)}
.rel-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rel-modelo{display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:13px;cursor:pointer;font:inherit;color:inherit}
.rel-modelo:hover{border-color:var(--accent)}
.rel-modelo h3{font-size:14.5px;margin:0}
.rel-modelo p{margin:0;color:var(--fg-soft);font-size:12.5px}
.rel-modelo small{color:var(--fg-faint);font-size:11.5px}
.rel-etq{align-self:flex-start;font-size:11px;font-weight:600;background:var(--accent-dim);border-radius:99px;padding:2px 9px;color:var(--fg)}
.rel-meus{margin-bottom:16px}
.rel-meus h3{font-size:15px;margin:0 0 8px}
.rel-meu{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rel-meu b{flex:1;min-width:140px}
.rel-meu small{color:var(--fg-faint)}
.rel-funil{display:flex;flex-direction:column;gap:6px}
.rel-etapa{display:grid;grid-template-columns:140px minmax(0,1fr) 190px;gap:10px;align-items:center}
.rel-etapa .b{height:34px;border-radius:7px;background:var(--accent);display:flex;align-items:center;padding-left:10px;color:var(--sobre-accent);font-weight:700;min-width:44px}
.rel-etapa .conv{font-size:12.5px;color:var(--fg-soft)}
.rel-etapa.queda .b{background:var(--st-perdido)}
.rel-etapa.queda .conv{color:var(--st-perdido);font-weight:700}
.rel-duas{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:start}
.rel-diag{border:1px solid var(--accent);background:var(--accent-dim);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.rel-diag h3{font-size:15px;margin:0}
.rel-diag h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin:4px 0 0}
.rel-diag ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.rel-hip{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:3px}
.rel-hip b{font-size:13.5px}
.rel-hip small{color:var(--fg-faint)}
.rel-sel{display:inline-block;font-size:11px;font-weight:700;border-radius:99px;padding:1px 8px;margin-right:6px}
.rel-sel.dado{background:var(--accent-dim);color:var(--st-ganho)}
.rel-sel.fora{background:var(--panel-2);color:var(--st-espera)}
@media (max-width:900px){.rel-grade,.rel-duas{grid-template-columns:minmax(0,1fr)}.rel-etapa{grid-template-columns:90px minmax(0,1fr) 120px}.rel-barras .l{grid-template-columns:100px minmax(0,1fr) 70px}}

/* Menu da direita com barra de rolagem: em tela baixa os últimos itens (Mais, a IA) ficavam cortados e sem como chegar neles. */
.lateral{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}
.lateral > *{flex:none}
.lateral::-webkit-scrollbar{width:8px}
.lateral::-webkit-scrollbar-track{background:transparent}
.lateral::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.lateral::-webkit-scrollbar-thumb:hover{background:var(--fg-faint)}

/* Marketing: o "?" no canto direito do topo */
.mkt-topo{position:relative;padding-right:48px}
.mkt-ajuda{position:absolute;right:0;top:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--fg);font:700 16px inherit;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mkt-ajuda:hover{border-color:var(--accent);color:var(--accent-forte)}
.mkt-ajuda:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mkt-ajuda-texto h3{font-size:15px;margin:0 0 6px}
.mkt-ajuda-texto h3:not(:first-child){margin-top:14px}
.mkt-ajuda-texto ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.mkt-ajuda-texto p{margin:0 0 8px;color:var(--fg-soft)}
.mkt-ajuda-nota{font-size:13px;background:var(--panel-2);border-radius:10px;padding:8px 12px}


/* Fluxo de Caixa: botoes secundarios do topo juntos no menu "Mais" */
.fx-opcoes{position:relative}
.fx-opcoes-menu{position:absolute;right:0;top:100%;margin-top:6px;z-index:40;min-width:200px;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:2px}
.fx-opcoes-menu[hidden]{display:none}
.fx-opcoes-menu .fx-botao{justify-content:flex-start;width:100%;text-align:left;border:0;background:none;border-radius:8px}
.fx-opcoes-menu .fx-botao:hover{background:var(--accent-dim)}

/* Fluxo de Caixa: o menu "Mais" no tema claro (as regras antigas deixavam todo botão fantasma como círculo sem texto) */
:root:not([data-tema="escuro"]) .fx-opcoes{order:3;margin-left:auto;display:block}
:root:not([data-tema="escuro"]) .fx-acoes .fx-opcoes #fx-opcoes-btn.fx-botao.fantasma{font-size:14px;gap:6px;padding:0 16px;width:auto;height:38px;border-radius:99px}
:root:not([data-tema="escuro"]) .fx-acoes .fx-opcoes-menu .fx-botao.fantasma{font-size:14px;gap:8px;padding:9px 12px;width:100%;height:auto;justify-content:flex-start;border-radius:8px;border:0;background:none;white-space:nowrap}
:root:not([data-tema="escuro"]) .fx-acoes .fx-opcoes-menu .fx-botao.fantasma:hover{background:var(--accent-dim)}
.fx-opcoes{order:3;margin-left:auto}

/* Hinter: o painel é uma peça só com o rodapé. Encosta na borda de cima do rodapé (o JS acerta a altura), sem canto
   arredondado embaixo e sem sombra caindo em cima do rodapé. */
.wd{left:0;width:380px;border-radius:16px 16px 0 0;border:1px solid var(--line-strong);border-bottom:0;border-left:0;box-shadow:0 -10px 32px rgba(0,0,0,.16)}

/* Divisória do Planner com a palavra no meio, onde as duas linhas terminam */
.sessao-linha.com-rotulo{height:auto;background:none;display:flex;align-items:center;justify-content:space-between}
.sessao-linha.com-rotulo::before,.sessao-linha.com-rotulo::after{content:'';flex:0 0 38%;height:1px;background:rgba(136,136,146,.34)}
.sessao-linha.com-rotulo span{flex:1 1 auto;text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
:root[data-tema="escuro"] .sessao-linha.com-rotulo::before,:root[data-tema="escuro"] .sessao-linha.com-rotulo::after{background:rgba(170,170,180,.26)}

/* Menu: a IA ficou só com as letras no lugar do ícone */
.lateral a .icone-so-ia{flex:0 0 16px;width:16px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:0;line-height:1;opacity:.9}
.lateral a .iaico{flex:0 0 auto}

/* Relatórios: as categorias numa peça só, em forma de pílula, separadas por | */
.rel-pilula{display:inline-flex;flex-wrap:nowrap;align-items:center;max-width:100%;overflow-x:auto;border:1px solid var(--line-strong);background:var(--panel-2);border-radius:99px;padding:3px}
.rel-pilula .rel-chip{border:0;background:transparent;border-radius:99px;padding:6px 14px;white-space:nowrap;flex:none;position:relative}
.rel-pilula .rel-chip + .rel-chip{margin-left:12px}
.rel-pilula .rel-chip + .rel-chip::before{content:'|';position:absolute;left:-9px;top:50%;transform:translateY(-52%);color:var(--line-strong);font-weight:400}
.rel-pilula .rel-chip[aria-pressed="true"]{background:var(--fg);color:var(--panel)}
.rel-pilula .rel-chip[aria-pressed="true"]::before,.rel-pilula .rel-chip[aria-pressed="true"] + .rel-chip::before{visibility:hidden}
.rel-pilula .rel-chip:hover:not([aria-pressed="true"]){color:var(--fg)}

/* Relatórios: matriz por setor (título do setor em cima, os relatórios embaixo) */
.rel-galeria{margin:0}
.rel-setor{margin-bottom:26px}
.rel-setor h2{font-size:17px;margin:0 0 10px;display:flex;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.rel-setor h2 small{font-size:12.5px;font-weight:500;color:var(--fg-faint)}


/* Relatórios: faixa vermelha transparente que aparece ao arrastar um relatório (soltar = tirar da tela) */
.rel-lixo{position:fixed;bottom:0;width:100px;z-index:75;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(220,38,38,.16);border:2px dashed rgba(220,38,38,.5);color:#b91c1c;transition:background .12s}
.rel-lixo b{font-size:34px;line-height:1;font-weight:700}
.rel-lixo span{font-size:12px;font-weight:600;text-align:center;padding:0 6px}
.rel-lixo.sobre{background:rgba(220,38,38,.34)}
.rel-lixo-esq{border-left:0}
.rel-lixo-dir{border-right:0}
.rel-modelo[draggable="true"]{cursor:grab}
.rel-ajuste h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin:14px 0 6px}
.rel-aj-item{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:14px}
.rel-aj-item input{accent-color:var(--accent)}


/* Barra de rolagem fina e sem setinhas em TODAS as telas (pedido do Ariel, 07/11/2026).
   As propriedades padrão (scrollbar-color/width) faziam o Chrome do Windows trocar para a barra antiga, com setas;
   por isso saíram, e o estilo vem só do webkit. O Firefox, que não tem o webkit, usa a versão padrão fina. */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}}


/* Planner: mini calendário do botão Hoje (dias, 12 meses, anos) */
.mcal{position:absolute;top:100%;margin-top:8px;z-index:60;width:272px;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.2);padding:10px 12px 8px}
.mcal-cab{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.mcal-titulo{flex:1;text-align:left;border:0;background:none;font:inherit;font-weight:700;font-size:14.5px;color:var(--fg);padding:6px 8px;border-radius:8px;cursor:pointer}
.mcal-titulo:hover:not(:disabled){background:var(--accent-dim)}
.mcal-titulo:disabled{cursor:default}
.mcal-seta{width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--fg-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mcal-seta:hover{background:var(--panel-2);color:var(--fg)}
.mcal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mcal-sem{font-size:11px;font-weight:700;color:var(--fg-faint);padding:4px 0}
.mcal-dia{aspect-ratio:1;border:0;border-radius:50%;background:none;font:inherit;font-size:13px;color:var(--fg);cursor:pointer}
.mcal-dia:hover{background:var(--accent-dim)}
.mcal-dia.hoje{box-shadow:inset 0 0 0 1.5px var(--accent)}
.mcal-dia.atual{background:var(--accent);color:var(--sobre-accent);font-weight:700}
.mcal-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mcal-cel{padding:14px 4px;border:0;border-radius:10px;background:var(--panel-2);font:inherit;font-size:13.5px;font-weight:600;color:var(--fg);cursor:pointer}
.mcal-cel:hover{background:var(--accent-dim)}
.mcal-cel.hoje{box-shadow:inset 0 0 0 1.5px var(--accent)}
.mcal-cel.atual{background:var(--accent);color:var(--sobre-accent)}
.mcal-hoje{display:block;width:100%;margin-top:8px;padding:7px;border:0;border-top:1px solid var(--line);background:none;font:inherit;font-size:13px;font-weight:600;color:var(--accent-forte);cursor:pointer;border-radius:0 0 8px 8px}
.mcal-hoje:hover{background:var(--accent-dim)}


/* Tarefa: "tem prazo?" embaixo da data (pequeno, itálico, cor de link) */
.meta[hidden],.link-prazo[hidden]{display:none}
.link-prazo{display:inline-block;margin-top:6px;padding:0;border:0;background:none;font-family:inherit;font-style:italic;font-size:12.5px;line-height:1.3;color:var(--accent-forte);cursor:pointer}
.link-prazo:hover{text-decoration:underline}

/* Tarefa em painel lateral: cada campo numa linha, rótulo à esquerda e o valor ao lado (como nas listas de propriedades) */
.janela.gaveta .tarefa-lado .meta,.janela.gaveta .meta{display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 12px;align-items:center}
.janela.gaveta .meta > label{margin:0;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-faint);font-weight:600;align-self:center}
.janela.gaveta .meta > div,.janela.gaveta .meta > select,.janela.gaveta .meta > input{min-width:0}
.janela.gaveta .meta .dica{grid-column:2}


/* Rodapé da janela: botões "centro" ficam no meio, entre o que está à esquerda e Cancelar/Salvar à direita */
.janela > footer .centro:first-child{margin-left:auto}
.janela > footer .botao:not(.centro) + .centro{margin-left:auto}
.janela > footer .centro + .botao:not(.centro){margin-left:auto}


/* A ajuda da tela, com a cara e o chat da Athenas */
.ia-ajuda.iaa-chat{padding:0;gap:0;width:min(390px,calc(100% - 24px));max-height:calc(100% - 80px);overflow:hidden;border-radius:22px;border:1px solid #e4e4e7;box-shadow:0 24px 60px -12px rgba(0,0,0,.4)}
.iaa-chat .iaa-topo{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.iaa-rosto{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #24C9B0;flex:none}
.iaa-quem{display:flex;flex-direction:column;gap:1px;min-width:0}
.iaa-quem b{font-size:15.5px}
.iaa-quem small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-soft)}
.iaa-chat .iaa-bola{width:9px;height:9px;border-radius:50%;background:#25D366;display:inline-block}
.iaa-conv{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:9px}
.iaa-msg{max-width:88%;padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.iaa-msg.bot{align-self:flex-start;background:#eef4f3;color:var(--fg);border-bottom-left-radius:5px}
.iaa-msg.eu{align-self:flex-end;background:#0a0a0b;color:#fff;border-bottom-right-radius:5px}
.iaa-msg .iaa-texto{white-space:pre-wrap}
.iaa-cartao{max-width:100%;width:100%;padding:8px}
.iaa-cartao .iap{margin:0}
.iaa-chips{display:flex;flex-wrap:wrap;gap:6px}
.iaa-chip{border:1.5px solid #24C9B0;background:var(--panel);color:var(--fg);border-radius:999px;padding:7px 14px;font:600 13px inherit;font-family:inherit;cursor:pointer}
.iaa-chip:hover:not(:disabled){background:#24C9B0}
.iaa-chip:disabled{opacity:.6;cursor:wait}
.iaa-escrever{display:flex;align-items:flex-end;gap:8px;padding:8px 12px;border-top:1px solid var(--line);background:var(--panel)}
.iaa-escrever textarea{flex:1;min-width:0;border:1.5px solid var(--line-strong);border-radius:20px;padding:9px 14px;font:inherit;font-size:13.5px;resize:none;max-height:96px;background:var(--panel);color:var(--fg)}
.iaa-escrever textarea:focus{outline:2px solid #24C9B0;outline-offset:1px}
.iaa-enviar{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:#24C9B0;color:#02201a;font-size:20px;font-weight:700;cursor:pointer;line-height:1}
.iaa-enviar:hover:not(:disabled){filter:brightness(.95)}
.iaa-enviar:disabled{opacity:.55;cursor:wait}
.iaa-chat .iaa-aviso{display:block;padding:2px 16px 11px;text-align:center;color:var(--fg-faint);font-size:11.5px}
.iaa-chat .iaa-escrever textarea{height:40px;min-height:40px;line-height:20px;padding:9px 14px;box-sizing:border-box;overflow-y:auto}
.iaa-chat .iaa-msg .iaa-erro{margin:0;color:#b42318}

/* Divisória do Planner: as duas linhas chegam perto da palavra */
.sessao-linha.com-rotulo{justify-content:center}
.sessao-linha.com-rotulo::before,.sessao-linha.com-rotulo::after{flex:1 1 0}
.sessao-linha.com-rotulo span{flex:none;padding:0 14px}

/* Hinter: botão <> para mover para o lado (continua preso ao rodapé) */
.wd-mover{margin-left:auto;border:0;background:transparent;color:#fff;opacity:.85;cursor:grab;padding:4px 6px;border-radius:6px;display:inline-flex;touch-action:none}
.wd-mover:hover{background:rgba(255,255,255,.18);opacity:1}
.wd-mover + .wd-fechar{margin-left:2px}
.wd.wd-movendo{transition:none;user-select:none}
.wd.wd-movendo .wd-mover{cursor:grabbing}
.wd.wd-solto{border-left:1px solid var(--line-strong);border-radius:16px 16px 0 0}
@media (max-width:520px){.wd-mover{display:none}}


/* Tutorial: o chat da Athenas dentro do cartão */
.tour-quem{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:2px 8px 2px 2px;border-radius:999px;cursor:pointer;color:inherit;font:inherit}
.tour-quem:hover{background:var(--panel-2,#f2f4f7)}
.tour-quem b{font-size:13px}
.tour-quem em{font-style:normal;font-size:11px;font-weight:700;color:#06241f;background:#24C9B0;border-radius:999px;padding:2px 8px}
.tour-cartao.tour-chat{display:flex;flex-direction:column;gap:8px}
.tour-chat .tour-topo{margin:0}
.tc-quem{display:flex;flex-direction:column;min-width:0}
.tc-quem b{font-size:13px}
.tc-quem small{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--fg-faint,#78818f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-quem small i{width:7px;height:7px;border-radius:50%;background:#25D366;flex:none}
.tc-voltar{margin-left:auto;border:0;background:none;color:var(--fg-soft,#4c5563);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:7px}
.tc-voltar:hover{background:var(--panel-2,#f2f4f7)}
.tour-chat .tour-x{margin-left:0}
.tc-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:2px 2px 4px}
.tc-msg{max-width:90%;padding:8px 11px;border-radius:13px;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.tc-msg.bot{align-self:flex-start;background:#eef4f3;color:#15181e;border-bottom-left-radius:4px}
.tc-msg.eu{align-self:flex-end;background:#0a0a0b;color:#fff;border-bottom-right-radius:4px}
.tc-custo{display:block;margin-top:4px;font-size:11px;opacity:.65}
.tc-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;flex:none}
.tc-chips .tour-chip{flex:none;margin:0;white-space:nowrap;font-size:12px;padding:5px 10px;border-color:#24C9B0}
.tc-anexo{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-soft,#4c5563);background:var(--panel-2,#f2f4f7);border-radius:9px;padding:5px 9px}
.tc-anexo[hidden]{display:none}
.tc-anexo button{margin-left:auto;border:0;background:none;cursor:pointer;font-size:16px;color:inherit}
.tc-escrever{display:flex;align-items:flex-end;gap:6px;flex:none}
.tc-escrever textarea{flex:1;min-width:0;height:36px;max-height:72px;border:1.5px solid var(--line-strong,#ddd);border-radius:18px;padding:8px 12px;font:inherit;font-size:13px;line-height:18px;resize:none;box-sizing:border-box;background:var(--panel,#fff);color:inherit}
.tc-escrever textarea:focus{outline:2px solid #24C9B0;outline-offset:1px}
.tc-ic{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--panel-2,#f2f4f7);color:var(--fg-soft,#4c5563);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tc-ic:hover{background:#dff5f1}
.tc-ic.on{background:#e5484d;color:#fff}
.tc-enviar{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:#24C9B0;color:#02201a;font-size:18px;font-weight:700;cursor:pointer;line-height:1}
.tour-cartao .tc-msg{margin:0}


/* Tarefa: o chat só aparece atrás do botão de balão, ocupando a tela inteira */
.tarefa-corpo[data-chatvis="fechado"]{grid-template-columns:minmax(0,1fr) !important}
.tarefa-corpo[data-chatvis="fechado"] .tarefa-chat{display:none}
.tarefa-chat-topo{display:none}
.tarefa-corpo[data-chatvis="aberto"] .tarefa-chat{position:fixed;inset:0;z-index:100200;background:var(--panel);padding:0;border:0;display:flex;flex-direction:column}
.tarefa-corpo[data-chatvis="aberto"] .tarefa-puxa{display:none}
.tarefa-corpo[data-chatvis="aberto"] .tarefa-chat-topo{display:flex;align-items:center;gap:12px;padding:16px 28px;border-bottom:1px solid var(--line);flex:none}
.tarefa-chat-topo b{font-size:18px}
.tarefa-chat-sub{color:var(--fg-faint);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarefa-chat-x{margin-left:auto;border:0;background:transparent;color:var(--fg-soft);cursor:pointer;padding:6px;border-radius:8px;display:inline-flex}
.tarefa-chat-x:hover{background:var(--panel-3)}
.tarefa-corpo[data-chatvis="aberto"] .tarefa-conversa{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:min(980px,100%);margin:0 auto;padding:0 28px 20px;box-sizing:border-box}
.tarefa-corpo[data-chatvis="aberto"] .tarefa-conversa .tarefa-sub{display:none}
.tarefa-corpo[data-chatvis="aberto"] .conversa-lista{flex:1 1 auto;max-height:none;min-height:0}

/* Responsável: a opção "Time inteiro" na lista */
.pessoa-time .avatar.time{font-size:8px;letter-spacing:-1px;background:var(--accent-soft,#dff5f1);color:var(--accent-ink,#0b6b5c)}

/* Gaveta: o campo fica mais perto do rótulo */
.janela.gaveta .tarefa-lado .meta,.janela.gaveta .meta{grid-template-columns:96px minmax(0,1fr);gap:4px 8px}
.janela.gaveta .meta > label{font-size:11px;letter-spacing:.04em}
.tour-cartao .tc-escrever textarea{min-height:36px;height:36px;padding:8px 12px}


/* Janelinha da IA: botão do microfone, ao lado do "+" */
.iaf-mic{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);cursor:pointer;display:grid;place-items:center;padding:0;flex:none}
.iaf-mic svg{width:17px;height:17px}
.iaf-mic:hover{border-color:var(--accent)}
.iaf-mic.ouvindo{background:#e5484d;border-color:#e5484d;color:#fff;animation:iafMic 1.2s ease-in-out infinite}
.iaf-mic.indisponivel{opacity:.45;cursor:help}
.iaim .iaf-mic{border-color:rgba(140,180,255,.35);background:rgba(20,40,90,.35);color:#9dbfff}
.iaim .iaf-mic.ouvindo{background:#e5484d;color:#fff}
.iaf-rodape{gap:6px}
.iaf-rodape .iaf-medidor{margin-right:auto}
@keyframes iafMic{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}50%{box-shadow:0 0 0 7px rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){.iaf-mic.ouvindo{animation:none}}


/* Rodapé do CRM: o botão "Chat com IA", ao lado do Hinter */
.rodape-ia{position:absolute;top:50%;left:calc(50% + 96px);transform:translateY(-50%);display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 14px;border:1px solid var(--line-strong);border-radius:99px;background:var(--panel);color:var(--fg-soft);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.rodape-ia.so{left:50%;transform:translate(-50%,-50%)}
.rodape-ia:hover{border-color:#9b72f2;background:color-mix(in srgb,#9b72f2 8%,var(--panel));color:var(--fg)}
.rodape-ia svg{flex:none;display:block}
html.mob .rodape-ia{display:none}


/* Topo do CRM: "Chat com IA" ao lado da busca */
.topo-meio{display:flex;align-items:center;gap:10px}
.topo-ia{flex:none;display:inline-flex;align-items:center;gap:7px;height:31px;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:99px;background:var(--panel-2);color:var(--fg-soft);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.topo-ia:hover{border-color:#9b72f2;background:color-mix(in srgb,#9b72f2 8%,var(--panel));color:var(--fg)}
.topo-ia svg{flex:none;display:block}
html.mob .topo-ia span{display:none}
html.mob .topo-ia{padding:0 9px}


/* Janelinha da IA: alterações em lote e aviso de custo */
.iaf-amostra{margin:6px 0 0;font-size:12.5px;color:var(--fg-soft);line-height:1.4}
.iaf-aviso-custo p{margin:6px 0 0;font-size:13px;line-height:1.45}
.iaf-alteracao .iaf-mudanca-acoes,.iaf-aviso-custo .iaf-mudanca-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Planner: os setores ficam no meio da barra de cima */
.barra-meio{flex:1 1 0;min-width:0;display:flex;justify-content:center;overflow-x:auto;scrollbar-width:none}
.barra-meio::-webkit-scrollbar{display:none}
.barra-meio .abas-setor{margin:0;padding:0;flex-wrap:nowrap;white-space:nowrap}
@media(max-width:900px){.barra-meio{flex:1 1 100%;order:5;justify-content:flex-start}}

/* Planner: boas-vindas com frase do dia, a cada 5 segundos */
.saudacao{display:flex;align-items:center;min-height:48px;padding:10px 16px;font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--fg);font-family:var(--font-display,inherit)}
.saudacao.atraso{cursor:pointer}
.saudacao.atraso .saudacao-txt{color:var(--st-perdido)}
.saudacao-txt.entra{animation:saudacaoEntra .45s ease both}
@keyframes saudacaoEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.saudacao-txt.entra{animation:none}}

/* Prévia da busca: nome da empresa e do contato são links */
.bp-nome{color:inherit;text-decoration:none}
.bp-nome:hover{color:var(--verde,#24C9B0);text-decoration:underline}

/* Frase do Planner digitada letra por letra */
.saudacao-txt.digitando::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.12em;background:currentColor;animation:saudacaoCursor .7s steps(1) infinite}
@keyframes saudacaoCursor{50%{opacity:0}}
.saudacao-txt.entra{animation:none}
.saudacao.clicavel{cursor:pointer}

/* Fluxos: a lista dos padrões do CRM (só dono e gestor) */
.flx-padroes{margin:6px 0 26px}
.flx-padroes>h2,.flx-meus{font-size:20px;font-weight:800;margin:6px 0 4px}
.flx-p-sub{margin:0 0 14px;color:var(--fg-soft);max-width:900px;line-height:1.5}
.flx-p-grupo{margin:18px 0}
.flx-p-grupo h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-soft);margin:0 0 8px;display:flex;gap:8px;align-items:center}
.flx-p-grupo h3 span{background:var(--panel-2,#eef2f3);border-radius:99px;padding:1px 8px;font-size:11px;letter-spacing:0}
.flx-p-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.flx-p-cartao{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.flx-p-cartao p{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:var(--fg-soft)}
.flx-p-cartao p b{color:var(--fg)}
.flx-p-topo{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.flx-p-topo h4{margin:0;font-size:15px;font-weight:700;line-height:1.3}
.flx-p-sel{flex:none;font-size:11px;font-weight:700;border-radius:99px;padding:2px 9px;background:var(--panel-2,#eef2f3);color:var(--fg-soft)}
.flx-p-sel.fixo{background:#e4f6f1;color:#0b6b57}
.flx-p-sel.escolha{background:#e8eefb;color:#2149a8}
.flx-p-onde{color:var(--fg)!important}

/* Conta pai: só o símbolo, sem texto e sem a seta */
.conta-pai-chip{padding-left:12px;padding-right:12px}
.conta-pai-chip::after{display:none !important}

/* A marca da eixo, verde, sem fundo e meio transparente, bem no meio da conversa da Athenas (pedido do Ariel, 09/11/2026) */
.iaf-mensagens{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22520%20740%20980%20540%22%20fill%3D%22%2324C9B0%22%20fill-opacity%3D%220.16%22%3E%3Cpolygon%20points%3D%22907.7%20750.92%20906.32%20806.58%20894.53%20821.1%20609.13%20821.1%20609.13%20970.22%201136.03%20970.22%20951.61%20751.01%201053.22%20759.07%201259.3%201000.93%201044.44%201260.31%20951.52%201263.98%201136.03%201040.39%20609.13%201040.39%20609.13%201198.28%20916.49%201198.28%20916.49%201268.46%20543.27%201268.46%20530.09%201255.3%20530.09%20750.92%20907.7%20750.92%22%2F%3E%3Cpath%20d%3D%22M1302.71%2C1040.44l184.53%2C227.97c-3.59%2C2.99-82.36-2.41-92.3-8.23-41.18-24.11-94.61-128.04-140.81-158.63l-2.69-11.38c1.71-12.6%2C37.25-59.68%2C51.27-49.72Z%22%2F%3E%3Cpath%20d%3D%22M1478.47%2C750.97c3.94%2C15.18-6.28%2C17.53-13.07%2C26.33-16.55%2C21.45-151.81%2C174.71-162.6%2C180.28-17.55%2C9.05-57.54-30.98-48.62-48.52%2C7.3-14.36%2C119.72-143.01%2C131.64-149.85%2C27.95-16.03%2C61.63-5.91%2C92.64-8.25Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 52% auto}

/* Relatórios: 4 colunas por setor, para não ficar tudo numa coluna só (pedido do Ariel, 09/11/2026) */
.rel-setor .rel-galeria{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.rel-setor .rel-galeria{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.rel-setor .rel-galeria{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.rel-setor .rel-galeria{grid-template-columns:1fr}}

/* Dashboard sob demanda (dashboard.html) */
.dash-pagina{max-width:1280px;margin:0 auto;padding:22px 20px 60px}
.dash-topo{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.dash-etq{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde,#24c9b0);font-weight:700}
.dash-topo h1{margin:4px 0 4px;font-size:28px;letter-spacing:-.02em;font-weight:800}
.dash-topo p{margin:0;color:var(--fg-soft)}
.dash-nivel{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.dash-nivel small{color:var(--fg-faint);font-size:12px}
.dash-nivel-bt{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel)}
.dash-nivel-bt button{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border:0;background:none;color:var(--fg-soft);cursor:pointer}
.dash-nivel-bt button[aria-pressed="true"]{background:var(--fg);color:var(--panel)}
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.dash-kpi{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--cor,var(--cat-1));border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.dash-kpi span{font-size:12.5px;color:var(--fg-soft);font-weight:600}
.dash-kpi b{font-size:24px;letter-spacing:-.02em;line-height:1.1}
.dash-kpi small{color:var(--fg-faint);font-size:12px}
.dash-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
@media (max-width:900px){.dash-grade{grid-template-columns:1fr}}
.dash-cartao{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px;min-width:0}
.dash-grade .dash-cartao{margin-bottom:0}
.dash-cartao h3{margin:0 0 12px;font-size:16px;display:flex;flex-direction:column;gap:2px}
.dash-cartao h3 small{font-weight:500;font-size:12.5px;color:var(--fg-faint)}
.dash-abas{display:flex;gap:6px;margin:6px 0 16px;border-bottom:1px solid var(--line)}
.dash-abas button{font:inherit;font-weight:600;font-size:14px;padding:10px 16px;border:0;background:none;color:var(--fg-soft);border-bottom:3px solid transparent;cursor:pointer;margin-bottom:-1px}
.dash-abas button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--verde,#24c9b0)}
.dash-tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.dash-tabela th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);padding:6px 8px;border-bottom:1px solid var(--line)}
.dash-tabela td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.dash-tabela td small{color:var(--fg-faint)}
.dash-filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.dash-filtros input{font:inherit;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);min-width:200px}
.dash-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.dash-chips button{font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg-soft);cursor:pointer}
.dash-chips button i{font-style:normal;opacity:.6;margin-left:3px}
.dash-chips button[aria-pressed="true"]{background:var(--fg);color:var(--panel);border-color:var(--fg)}
.dash-excel{font:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);cursor:pointer}
.dash-nada{margin:8px 0;color:var(--fg-faint);font-size:13.5px}

/* Planner: os setores ficam parados quando o seletor Mês, Semana, Dia abre ao passar o mouse (pedido do Ariel, 09/11/2026).
   Antes eles eram centralizados e andavam com a largura do seletor; agora ficam presos ao lado direito da barra, que não muda. */


/* "+" no alto da coluna e cartão de criação rápida de tarefa (pedido do Ariel, 09/11/2026) */
.coluna-topo{position:relative}
.coluna-mais{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:9px;border:1px solid var(--line-strong);background:var(--panel);color:var(--fg-soft);font:inherit;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.coluna-mais:hover{background:var(--accent);border-color:var(--accent);color:var(--sobre-accent)}
.novo-rapido{background:var(--panel);border:1.5px solid var(--accent);border-radius:14px;padding:12px 12px 8px;box-shadow:0 8px 22px rgba(17,20,26,.10);display:flex;flex-direction:column;gap:6px}
.nr-topo{display:flex;align-items:center;gap:8px}
.nr-titulo{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;font-weight:600;color:var(--fg);padding:2px 0}
.nr-titulo::placeholder{color:var(--fg-faint);font-weight:500}
.nr-salvar{flex:none;border:0;border-radius:8px;background:var(--accent);color:var(--sobre-accent);font:inherit;font-size:13px;font-weight:700;padding:7px 12px;cursor:pointer}
.nr-salvar:hover{background:var(--accent-forte)}
.nr-salvar:disabled{opacity:.6;cursor:wait}
.nr-onde{font-size:12.5px;color:var(--fg-faint)}
.nr-opcoes{display:flex;flex-direction:column;margin-top:4px}
.nr-opcao{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;color:var(--fg-soft);font:inherit;font-size:14px;padding:9px 4px;border-radius:8px;cursor:pointer}
.nr-opcao:hover{background:var(--panel-2);color:var(--fg)}
.nr-icone{display:flex;color:var(--fg-faint);flex:none}
.nr-linha.escolhida .nr-opcao{color:var(--fg);font-weight:600}
.nr-linha.escolhida .nr-icone{color:var(--accent)}
.nr-controle{padding:2px 4px 8px 34px}
.nr-controle[hidden]{display:none}
.nr-controle select,.nr-controle input{width:100%;font:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--fg)}


/* Planner: setores e números no centro da barra; o seletor Mês, Semana, Dia reserva o próprio espaço (ver planejador.js) */
.barra-centro{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:14px}
.barra-centro .barra-meio{flex:0 1 auto}
.barra-centro .resumo{border-right:0;border-left:1px solid var(--line);padding:0 0 0 16px;margin:0}
.abas-grupo{transition:margin-right .24s ease}
.abas-grupo.aberto{margin-right:0 !important}
@media(max-width:900px){.barra-centro{flex:1 1 100%;order:5;justify-content:flex-start}.barra-centro .barra-meio{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.abas-grupo{transition:none}}

.novo-rapido .nr-titulo{border:0;background:transparent;box-shadow:none;padding:2px 0;height:auto;border-radius:0}
.novo-rapido .nr-titulo:focus{box-shadow:none;outline:0}