/* =====================================================================
   DESIGN SYSTEM do CRM. UMA folha para todas as telas (padrao da casa).
   Sem framework, sem CDN: CSP 'self', nada inline. Regras fixas do dono:
   sem gradiente, icone sempre SVG, paleta azul.

   Camadas: 1 fonte, 2 tokens (cor/elevacao/raio/espaco/movimento), 3 base,
   4 casca, 5 componentes, 6 telas, 7 movimento e estados (fim do arquivo).
   Componente novo consome os tokens; nao inventar valor solto.
   ===================================================================== */

/* 1) Fontes: par tipografico self-hosted em /fonts (CSP font-src 'self'; CDN quebraria).
   Plus Jakarta Sans = titulos e numeros de destaque; Manrope = texto e UI; Inter fica de
   fallback. Todas variaveis: um arquivo por familia cobre todos os pesos. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/jakarta-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
}

/* 2) Tokens. Os NOMES antigos continuam validos (--sombra, --raio, --borda...):
   as regras legadas herdam o refinamento sozinhas, sem reescrever cada uma. */
:root {
  /* tipografia */
  --fonte-texto: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-titulo: 'Plus Jakarta Sans', 'Manrope', 'Inter', system-ui, sans-serif;

  /* cor: MUITO branco de fundo, elementos em azul bebe. Texto sobre preenchimento
     bebe e sempre a tinta (--azul-tinta), nunca branco: pastel com branco nao le. */
  --azul: #6db6f2;
  --azul-escuro: #3f9be6;
  --azul-tinta: #0e3a5f;
  --fundo: #fbfdff;
  --superficie: #ffffff;
  --superficie-2: #f2f8ff;
  --borda: #e1ecf8;
  --borda-forte: #c3d9ef;
  --texto: #17202b;
  --texto-suave: #5a6675;
  --texto-fraco: #8b95a5;
  --ok: #1c7d4d;
  --erro: #c0392b;
  --aviso: #b7791f;

  /* elevacao: sombras em camadas, suaves; --sombra e o alias legado (nivel 1) */
  --sombra-1: 0 1px 2px rgba(23, 32, 58, 0.05), 0 1px 1px rgba(23, 32, 58, 0.04);
  --sombra-2: 0 2px 6px rgba(23, 32, 58, 0.06), 0 10px 24px rgba(23, 32, 58, 0.07);
  --sombra-3: 0 6px 16px rgba(23, 32, 58, 0.09), 0 24px 48px rgba(23, 32, 58, 0.12);
  --sombra: var(--sombra-1);

  /* raio */
  --raio-sm: 8px;
  --raio: 12px;
  --raio-lg: 16px;
  --raio-cheio: 999px;

  /* espaco: escala de 4px para componentes novos */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* movimento */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* foco: anel acessivel unico do sistema */
  --anel-foco: 0 0 0 3px color-mix(in srgb, var(--azul) 28%, transparent);

  /* Barras de rolagem: polegar derivado do texto suave, acompanha o tema sozinho. */
  --barra-polegar: color-mix(in srgb, var(--texto-suave) 40%, transparent);
  --barra-polegar-hover: color-mix(in srgb, var(--texto-suave) 66%, transparent);
}

/* TEMA CLARO FIXO (decisao do dono): o app e branco mesmo com o sistema em modo
   escuro. Antes havia um @media (prefers-color-scheme: dark) aqui trocando os
   tokens, e quem usava Windows escuro nunca via o fundo branco. Um modo escuro
   OPCIONAL (por botao, via classe no html) pode voltar barato: e so redefinir os
   tokens sob a classe. O color-scheme abaixo forca ate os controles nativos
   (select, input, barra de rolagem) a renderizarem claros. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}

a { color: var(--azul); transition: color var(--dur-1) var(--ease); }
a:hover { color: var(--azul-escuro); }

/* Foco de teclado: um anel so para o sistema inteiro (segue o raio do elemento). */
:focus-visible { outline: none; box-shadow: var(--anel-foco); }
::selection { background: color-mix(in srgb, var(--azul) 24%, transparent); }

/* ---- Barras de rolagem (finas ~8px, trilho transparente, polegar na paleta do tema) ----
   scrollbar-width/color sao herdadas: definir no raiz cascateia para toda area rolavel do
   sistema (colunas do kanban, listas de coluna, timeline, tabela, arvore de cargos, modal,
   pagina). O WebKit nao herda, entao o seletor universal cobre os mesmos conteineres. */
html { scrollbar-width: thin; scrollbar-color: var(--barra-polegar) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--barra-polegar); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--barra-polegar-hover); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---- Estrutura app (mobile-first): montada por layout.js ----
   Base = celular: coluna unica, app bar sticky no topo, bottom nav fixa embaixo.
   Desktop (>=900px): volta a barra lateral e some a bottom nav. */
.app-grade { display: flex; flex-direction: column; min-height: 100vh; }

/* (A barra lateral foi aposentada: a navegacao vive no rodape em toda largura.) */

/* App bar (topo): marca a esquerda + usuario + sair. */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
  height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
}
.topo .marca-mobile { font-weight: 700; color: var(--azul); font-size: 1.05rem; margin-right: auto; }
.topo .usuario { color: var(--texto-suave); font-size: 0.9rem; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .usuario strong { color: var(--texto); }
.icone-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--texto-suave);
  padding: 6px; border-radius: 8px; cursor: pointer;
}
.icone-btn:hover { background: var(--fundo); color: var(--texto); }

main#conteudo {
  flex: 1 1 auto;
  padding: 18px 16px calc(78px + env(safe-area-inset-bottom, 0px));
}
main#conteudo h1 { margin: 0 0 4px; font-size: 1.4rem; }
main#conteudo h2 { margin: 26px 0 12px; font-size: 1.15rem; }
main#conteudo h3 { margin: 0 0 12px; font-size: 1rem; }
main#conteudo .sub { color: var(--texto-suave); margin: 0 0 20px; }

/* Bottom nav (mobile). */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around;
  background: var(--superficie); border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bn-item {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 7px 2px; min-height: 54px;
  color: var(--texto-suave); text-decoration: none;
  background: none; border: none; cursor: pointer; font: inherit;
}
.bn-rotulo { font-size: 0.64rem; font-weight: 600; }
.bn-item.ativo { color: var(--azul); }

/* Desktop: MESMA casca do celular (navegacao por icones no RODAPE, sem barra lateral),
   so com mais respiro e a barra de baixo centralizada para os icones nao esticarem na
   largura toda. */
@media (min-width: 900px) {
  .topo { padding: 0 clamp(20px, 3vw, 60px); }
  .topo .usuario { max-width: none; }
  main#conteudo { padding: 26px clamp(20px, 3vw, 60px) 96px; }
  .bottom-nav { justify-content: center; gap: 6px; }
  .bn-item { flex: 0 0 auto; min-width: 112px; border-radius: 10px; }
  .bn-item:hover { background: var(--fundo); color: var(--texto); }
  .bn-item.ativo, .bn-item.ativo:hover { color: var(--azul); }
  .bn-rotulo { font-size: 0.72rem; }
}

/* ---- Componentes ---- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
}
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

button, .botao {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--azul);
  background: var(--azul);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--raio-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
button:hover, .botao:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); box-shadow: var(--sombra-1); }
button:active, .botao:active { transform: translateY(1px); box-shadow: none; }
button.secundario {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borda-forte);
}
button.secundario:hover { background: var(--superficie-2); border-color: var(--azul); color: var(--azul); box-shadow: none; }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

label { display: block; font-size: 0.8rem; font-weight: 550; color: var(--texto-suave); margin-bottom: 6px; letter-spacing: 0.01em; }
input, select {
  font: inherit;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
input::placeholder { color: var(--texto-fraco); }
input:focus, select:focus { outline: none; border-color: var(--azul); box-shadow: var(--anel-foco); }
.campo { margin-bottom: 16px; }

table { border-collapse: collapse; width: 100%; background: var(--superficie); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); font-size: 0.9rem; }
th { color: var(--texto-suave); font-weight: 600; background: var(--fundo); position: sticky; top: 0; }
.rolagem-x { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); }

.selo { display: inline-block; font-size: 0.7rem; padding: 2px 7px; border-radius: 10px; background: var(--borda); color: var(--texto-suave); vertical-align: middle; }

/* ---- Login (tela publica, sem barra lateral) ---- */
.login-tela { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-cartao { width: 100%; max-width: 380px; }
.login-cartao h1 { font-size: 1.3rem; margin: 0 0 4px; }
.login-cartao .sub { color: var(--texto-suave); margin: 0 0 22px; font-size: 0.9rem; }
.login-cartao .rodape { margin-top: 16px; text-align: center; font-size: 0.85rem; }
.link-btn { background: none; border: none; color: var(--azul); padding: 0; font: inherit; cursor: pointer; text-decoration: underline; font-weight: 500; }

/* ---- Mensagens ---- */
.aviso-caixa { padding: 10px 12px; border-radius: 6px; font-size: 0.88rem; margin-bottom: 14px; }
.aviso-caixa.erro { background: color-mix(in srgb, var(--erro) 12%, transparent); color: var(--erro); border: 1px solid color-mix(in srgb, var(--erro) 30%, transparent); }
.aviso-caixa.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }

/* Toast flutuante (App.ui.toast) */
#toasts { position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--texto); color: var(--superficie); padding: 10px 14px; border-radius: 6px; box-shadow: var(--sombra); font-size: 0.88rem; max-width: 340px; }
.toast.erro { background: var(--erro); color: #fff; }
.toast.ok { background: var(--ok); color: #fff; }

/* Utilitarios. Uso classe em vez de style="" inline porque o CSP e style-src 'self'
   (sem unsafe-inline): atributo style inline seria bloqueado. */
.cheio { width: 100%; }
.pilha { display: flex; flex-direction: column; gap: 4px; }
.linha-acoes { display: flex; gap: 8px; align-items: center; margin: 16px 0; flex-wrap: wrap; }
.espaco-topo { margin-top: 20px; }

[hidden] { display: none !important; }

/* =====================================================================
   Componentes do nucleo comercial (leads, oportunidades, kanban, funil).
   ===================================================================== */

:root {
  --frio: #3b82c4; --morno: #b7791f; --quente: #c0392b;
  --sev-critica: #b3261e; --sev-alta: #d97706; --sev-media: #b7791f; --sev-baixa: #64748b;
}

/* Cabecalho de pagina com acoes a direita */
.pg-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.pg-cabecalho h1 { margin: 0 0 2px; }
.pg-acoes { display: flex; gap: 8px; align-items: center; }
/* Sem teto de largura: o conteudo preenche a largura util do monitor (o respiro fica no
   padding em clamp acima), em vez de travar num bloco estreito e deixar faixa cinza a direita. */
main#conteudo { max-width: none; }

/* Barra de filtros */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 8px 0 18px; }
.filtros .campo { margin: 0; }
.filtros label { margin-bottom: 3px; }
.filtros input, .filtros select { padding: 7px 10px; min-width: 150px; }
.filtros .busca { min-width: 220px; }
.filtros .campo-mini { min-width: 0; }
/* A busca cresce para a linha de filtros ocupar a largura, empurrando o "Limpar" para a
   direita, em vez de tudo amontoar num canto. */
.filtros .campo-mini:has(> .busca) { flex: 1 1 240px; }

/* Tiles de metrica */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; min-width: 0; }
/* Valor com fonte FLUIDA: "R$ 3.506,29" em coluna estreita estourava a caixa com o
   1.5rem fixo (o card "engolia" o proprio numero). O clamp encolhe so o necessario, e o
   overflow-wrap garante que numero comprido quebre em vez de vazar pela borda. */
.tile .valor {
  font-size: clamp(1.15rem, 4.2vw, 1.5rem); font-weight: 700; color: var(--texto);
  letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.tile .rotulo { font-size: 0.78rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; line-height: 1.25; overflow-wrap: anywhere; }
.tile.destaque .valor { color: var(--azul); }

/* Tabela de lista clicavel */
.tabela-lista tbody tr { cursor: pointer; }
.tabela-lista tbody tr:hover { background: color-mix(in srgb, var(--azul) 5%, transparent); }
.tabela-lista td .principal { font-weight: 600; color: var(--texto); }
.tabela-lista td .secundario { font-size: 0.8rem; color: var(--texto-suave); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; }

/* Badges de status e temperatura */
.badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; border: 1px solid transparent; }
.badge-cinza { background: var(--borda); color: var(--texto-suave); }
.badge-azul { background: color-mix(in srgb, var(--azul) 14%, transparent); color: var(--azul); }
.badge-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.badge-erro { background: color-mix(in srgb, var(--erro) 14%, transparent); color: var(--erro); }
.badge-aviso { background: color-mix(in srgb, var(--aviso) 16%, transparent); color: var(--aviso); }
.temp { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; }
.temp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-suave); }
.temp-frio::before { background: var(--frio); }
.temp-morno::before { background: var(--morno); }
.temp-quente::before { background: var(--quente); }

/* Estado vazio / carregando */
.vazio { text-align: center; color: var(--texto-suave); padding: 40px 20px; border: 1px dashed var(--borda); border-radius: var(--raio); background: var(--superficie); }
.carregando { color: var(--texto-suave); padding: 20px 0; }

/* Paginacao simples */
.paginacao { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 14px; font-size: 0.88rem; color: var(--texto-suave); }

/* =========================== KANBAN =========================== */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 16px; align-items: flex-start; }
/* A coluna cabe INTEIRA na altura util (antes passava da borda de baixo da janela, e o
   ultimo card aparecia cortado pela beira da tela). O que sobra rola dentro da .kanban-lista,
   agora com a barra estilizada, deixando claro que ha mais para baixo. */
.kanban-col { flex: 0 0 260px; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); display: flex; flex-direction: column; max-height: calc(100vh - 290px); }
.kanban-col.col-alvo { outline: 2px dashed var(--azul); outline-offset: -2px; background: color-mix(in srgb, var(--azul) 6%, var(--fundo)); }
.kanban-col-cab { padding: 10px 12px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--fundo); border-radius: var(--raio) var(--raio) 0 0; }
.kanban-col-cab .nome { font-weight: 600; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kanban-col-cab .cont { background: var(--borda); color: var(--texto-suave); border-radius: 20px; padding: 1px 9px; font-size: 0.75rem; font-weight: 600; }
.kanban-col-cab .soma { font-size: 0.78rem; color: var(--texto-suave); margin-top: 3px; }
/* scroll-snap 'proximity' (suave, nao forcado): ao parar a rolagem, o fim de um card encosta
   no fim da coluna, entao o corte cai ENTRE cards, nao no meio de um. */
.kanban-lista { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; min-height: 40px; scroll-snap-type: y proximity; }
.kanban-card { background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--azul); border-radius: 7px; padding: 10px 11px; box-shadow: var(--sombra); cursor: grab; scroll-snap-align: end; }
.kanban-card:active { cursor: grabbing; }
.kanban-card.arrastando { opacity: 0.5; }
.kanban-card .titulo { font-weight: 600; font-size: 0.86rem; margin-bottom: 5px; line-height: 1.25; }
.kanban-card .linha { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--texto-suave); gap: 8px; }
.kanban-card .valor { font-weight: 600; color: var(--texto); }
.kanban-card .rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--borda); font-size: 0.74rem; color: var(--texto-suave); }
.kanban-card.card-atrasado { border-left-color: var(--erro); }
.kanban-card .sla-alerta { color: var(--erro); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.kanban-card .avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--azul); color: #fff; font-size: 0.65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* =========================== TIMELINE =========================== */
.timeline { position: relative; margin: 8px 0 0; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: var(--borda); }
.tl-item { position: relative; padding: 0 0 20px 8px; }
.tl-item::before { content: ""; position: absolute; left: -21px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--texto-suave); border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda); }
.tl-atividade::before { background: var(--azul); }
.tl-reuniao::before { background: var(--aviso); }
.tl-etapa::before { background: var(--ok); }
.tl-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tl-titulo { font-weight: 600; font-size: 0.9rem; }
.tl-data { font-size: 0.76rem; color: var(--texto-suave); white-space: nowrap; }
.tl-detalhe { font-size: 0.85rem; color: var(--texto-suave); margin-top: 2px; }
.tl-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }

/* =========================== FUNIL =========================== */
.funil-barras { display: flex; flex-direction: column; gap: 8px; }
/* O rotulo encolhe ate 96px e o trilho tem `minmax(0, 1fr)`: com as tres colunas fixas
   de antes (170px + 1fr + 130px), numa tela de 400px sobravam DOIS pixels para a barra,
   e o funil virava um risco. */
.funil-etapa { display: grid; grid-template-columns: minmax(96px, 170px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.funil-etapa .rot { font-size: 0.86rem; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.funil-etapa .trilho { background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; height: 30px; overflow: hidden; position: relative; }
/* Cor solida (sem gradiente, regra da casa). */
/* Sem `min-width`: etapa zerada nao desenha barra nenhuma (o piso antigo virava um toco
   azul que fingia movimento onde nao havia). */
.funil-etapa .barra { height: 100%; background: var(--azul); border-radius: 5px 0 0 5px; display: flex; align-items: center; padding-left: 10px; color: #fff; font-size: 0.8rem; font-weight: 600; transition: width var(--dur-2) var(--ease); }
/* Quantidade fora da barra, quando ela e curta demais para caber o numero dentro. */
.funil-etapa .qtd-fora { position: absolute; left: 10px; top: 0; height: 100%; display: flex; align-items: center; font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); }
.funil-etapa .trilho.vazio { background: var(--superficie-2); border-style: dashed; }
.funil-etapa.etapa-vazia .rot { color: var(--texto-suave); }
.funil-etapa .lado { font-size: 0.82rem; color: var(--texto-suave); white-space: nowrap; text-align: right; min-width: 130px; }
.funil-etapa .lado.sem { color: var(--texto-fraco); font-style: italic; }

/* Celular: rotulo e valor dividem a primeira linha e a barra ocupa a largura inteira
   embaixo. Tres colunas em 375px nao cabem sem espremer alguma delas. */
@media (max-width: 620px) {
  .funil-etapa {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'rot lado' 'trilho trilho';
    gap: 6px 10px; padding: 8px 6px;
  }
  .funil-etapa .rot { grid-area: rot; }
  .funil-etapa .lado { grid-area: lado; min-width: 0; }
  .funil-etapa .trilho { grid-area: trilho; height: 26px; }
}
.funil-etapa .conv { color: var(--ok); font-weight: 600; }

/* Resumo da etapa no hover/clique: a linha vira alvo e um popover flutuante mostra o detalhe. */
.funil-etapa { cursor: pointer; border-radius: 6px; transition: background 0.12s; }
.funil-etapa:hover { background: color-mix(in srgb, var(--azul) 7%, transparent); }
.funil-etapa:focus { outline: 2px solid color-mix(in srgb, var(--azul) 40%, transparent); outline-offset: 1px; }
.funil-etapa:focus:not(:focus-visible) { outline: none; }
/* pointer-events:none: o card e so visual (hover puro), nunca intercepta o mouse nem o clique
   que dispara o atalho na barra embaixo. */
.fpop { position: fixed; z-index: 60; pointer-events: none; min-width: 246px; max-width: 320px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28); padding: 12px 14px; }
.fpop-tit { font-weight: 700; font-size: 0.98rem; margin-bottom: 9px; }
.fpop dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; }
.fpop dt { color: var(--texto-suave); font-size: 0.84rem; }
.fpop dd { margin: 0; font-weight: 600; font-size: 0.86rem; text-align: right; font-variant-numeric: tabular-nums; }
.fpop-nota { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--borda); font-size: 0.76rem; color: var(--texto-suave); line-height: 1.35; }

/* Cards de consultor (diagnostico) */
.consultores { display: flex; flex-direction: column; gap: 14px; }
.consultor-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 18px; }
.consultor-card .topo-c { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.consultor-card .nome-c { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.consultor-card .avatar-c { width: 32px; height: 32px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.mini-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px 16px; margin-bottom: 4px; }
.mini-metricas .m { min-width: 0; }
/* Mesma correcao do tile: valor de moeda ("R$ 425 mil") nao cabia em coluna de 90px. */
.mini-metricas .m .v { font-weight: 700; font-size: clamp(0.98rem, 3.4vw, 1.1rem); line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mini-metricas .m .l { font-size: 0.72rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.25; margin-top: 2px; overflow-wrap: anywhere; }
.diagnosticos { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.diag { border-left: 3px solid var(--sev-media); background: var(--fundo); border-radius: 6px; padding: 9px 12px; }
.diag.sev-critica { border-left-color: var(--sev-critica); }
.diag.sev-alta { border-left-color: var(--sev-alta); }
.diag.sev-media { border-left-color: var(--sev-media); }
.diag.sev-baixa { border-left-color: var(--sev-baixa); }
.diag .diag-cab { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.88rem; }
.diag .sev-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; color: #fff; letter-spacing: 0.03em; }
.diag.sev-critica .sev-tag { background: var(--sev-critica); }
.diag.sev-alta .sev-tag { background: var(--sev-alta); }
.diag.sev-media .sev-tag { background: var(--sev-media); }
.diag.sev-baixa .sev-tag { background: var(--sev-baixa); }
.diag .diag-obs { font-size: 0.84rem; color: var(--texto-suave); margin-top: 4px; }
.diag .diag-rec { font-size: 0.84rem; margin-top: 4px; }
.diag .diag-rec strong { color: var(--texto); }
.saudavel { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: 0.9rem; }

/* =========================== MODAL =========================== */
.modal-fundo { position: fixed; inset: 0; background: rgba(10, 18, 30, 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 40; overflow-y: auto; }
.modal-cartao { background: var(--superficie); border-radius: var(--raio); box-shadow: 0 10px 40px rgba(0,0,0,0.25); width: 100%; max-width: 560px; }
.modal-cab { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.modal-cab h2 { margin: 0; font-size: 1.15rem; }
.modal-corpo { padding: 20px; }
.modal-rodape { padding: 14px 20px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; gap: 8px; }
.grade-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grade-form .col-2 { grid-column: 1 / -1; }
.fechar-x { background: none; border: none; color: var(--texto-suave); font-size: 1.3rem; cursor: pointer; padding: 0 4px; line-height: 1; }
.fechar-x:hover { color: var(--texto); background: none; }

/* Detalhe / ficha */
.ficha-topo { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.ficha-dados dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 0; font-size: 0.9rem; }
.ficha-dados dt { color: var(--texto-suave); }
.ficha-dados dd { margin: 0; font-weight: 500; }
.voltar { font-size: 0.85rem; color: var(--texto-suave); text-decoration: none; display: inline-block; margin-bottom: 10px; }
.voltar:hover { color: var(--azul); }
@media (max-width: 860px) { .ficha-topo { grid-template-columns: 1fr; } .grade-form { grid-template-columns: 1fr; } }
.ficha-col { display: grid; gap: 20px; }
.ficha-captacao h3 { margin: 0 0 12px; font-size: 1rem; }
.ficha-captacao h4 { margin: 16px 0 6px; font-size: 0.75rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.cap-respostas { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 0.9rem; }
.cap-respostas .cap-r-perg { color: var(--texto-suave); }
.cap-respostas .cap-r-val { font-weight: 600; }

/* Tela estreita: a lateral encolhe, os filtros ocupam a linha inteira sem min-width e as
   acoes do cabecalho quebram, para nada empurrar a pagina na horizontal. A tabela ja tem
   rolagem propria (.rolagem-x), entao ela nao entra nessa conta. */
@media (max-width: 560px) {
  .pg-acoes { flex-wrap: wrap; }
  .filtros .campo-mini, .filtros .campo-mini:has(> .busca) { flex: 1 1 100%; }
  .filtros input, .filtros select, .filtros .busca { min-width: 0; }
}

/* =========================== CARGOS + ARVORE DE ACESSOS =========================== */
.cargos-lista { display: flex; flex-direction: column; gap: 10px; }
.cargo-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 18px; flex-wrap: wrap; }
.cargo-nome { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }

.modal-cartao.modal-largo { max-width: 700px; }
.arv-container { margin-top: 6px; }

.arv-wrap { max-height: 56vh; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio); padding: 2px 10px; margin-top: 6px; }
.arv-head { display: grid; grid-template-columns: 1fr 68px 68px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--borda); font-size: 0.7rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.arv-cc { text-align: center; }
.arv-row { display: grid; grid-template-columns: 1fr 68px 68px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--borda); }
.arv-master { border-bottom: 2px solid var(--borda); }
.arv-master .arv-name { font-weight: 700; }
.arv-grupo { background: var(--fundo); }
.arv-grupo .arv-name { font-weight: 600; }
.arv-lbl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.arv-filho { padding-left: 24px; }
.arv-caret { background: none; border: none; cursor: pointer; color: var(--texto-suave); font-size: 0.8rem; padding: 0 2px; line-height: 1; }
.arv-caret.aberto { color: var(--texto); }
.arv-spacer { width: 16px; display: inline-block; flex: none; }
.arv-name { font-size: 0.9rem; color: var(--texto); }
.arv-desc { font-size: 0.74rem; color: var(--texto-suave); margin-top: 1px; }
.arv-cell { display: flex; justify-content: center; align-items: center; }
.arv-cell input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--azul); }
.arv-dash { color: var(--texto-suave); }
.arv-kids[hidden] { display: none; }

/* =====================================================================
   Reforma mobile-first: icones, pills de etapa, cards de lead, rosca do
   painel, blocos do dashboard, FAB e folha de filtro. Paleta azul mantida,
   cores das etapas solidas (sem gradiente).
   ===================================================================== */
.icone { flex: none; vertical-align: middle; }

/* Utilitarios de visibilidade por largura. */
.so-desktop { display: none; }
@media (min-width: 900px) { .so-desktop { display: revert; } .so-mobile { display: none; } }

/* Cabecalho de tela compacto. */
.tela-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tela-cab h1 { margin: 0; }

/* ---- Pills de etapa (filtro/segmento) ---- */
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 14px; }
.pill {
  flex: none; padding: 7px 13px; border-radius: 20px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto-suave); font-size: 0.84rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center;
}
.pill:hover { border-color: var(--azul); color: var(--texto); }
.pill.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.pill .cont { font-size: 0.72rem; background: color-mix(in srgb, var(--texto-suave) 18%, transparent); border-radius: 10px; padding: 0 6px; }
.pill.ativo .cont { background: rgba(255, 255, 255, 0.28); }

/* ---- Busca com icone ---- */
.busca-mobile { position: relative; margin-bottom: 8px; }
.busca-mobile .icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; }
.busca-mobile input { padding-left: 40px; }

/* ---- Lista responsiva: cards no mobile, tabela no desktop. Os nomes genericos
   (.cards-mobile / .tabela-desktop) sao o padrao do sistema; .leads-* e o alias
   historico da primeira tela. ---- */
.leads-cards, .cards-mobile { display: flex; flex-direction: column; gap: 10px; }
.leads-tabela-wrap, .tabela-desktop { display: none; }
.lead-card { display: flex; align-items: center; gap: 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 11px 12px; cursor: pointer; }
.lead-card:hover { border-color: color-mix(in srgb, var(--azul) 35%, var(--borda)); }
.lead-card:active { background: color-mix(in srgb, var(--azul) 4%, var(--superficie)); }
.avatar-ini { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.92rem; color: #fff; background: var(--texto-suave); }
.avatar-ini.temp-frio { background: var(--frio); }
.avatar-ini.temp-morno { background: var(--morno); }
.avatar-ini.temp-quente { background: var(--quente); }
.lead-card .corpo { flex: 1 1 auto; min-width: 0; }
.lead-card .nome { font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-card .contato { font-size: 0.82rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.lead-card .meta { display: flex; gap: 6px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.lead-card .acoes { flex: none; display: flex; gap: 2px; align-items: center; }
/* Card de oportunidade: corpo a esquerda, VALOR a direita (sem avatar). */
.op-valor { flex: none; text-align: right; }
.op-valor .v { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.op-valor .p { font-size: 0.76rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---- Botao "novo" do mobile ----
   ESCOLHA DO DONO (sessao 12): ele NAO flutua preso na tela. Fica no fluxo, no fim do
   conteudo e encostado a direita, e sobe e desce junto com a lista como qualquer outro
   elemento. Assim nunca cobre botao nenhum (antes, fixo no canto, tapava o "Mostrar
   todos" da lista de leads). Nada de position: fixed aqui; nao reintroduzir. */
.fab {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  margin: 22px 0 4px auto; /* o `auto` a esquerda e o que encosta o botao na direita */
  background: var(--azul); color: #fff;
  box-shadow: 0 6px 18px rgba(20, 40, 80, 0.35); cursor: pointer;
}
.fab:hover { background: var(--azul-escuro); }

/* ---- Rosca do painel (relatorio do vendedor) ---- */
/* Graficos circulares do painel (publico/js/grafico-rosca.js). O TAMANHO do desenho vem
   do JS, medindo o container: escala 1:1, senao o texto do centro encolhe junto no
   celular. Aqui ficam forma, cor e a legenda. */
.circulares { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
.rosca-card, .medidor-card { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rosca-card h3, .medidor-card h3 { align-self: flex-start; margin: 0 0 12px; font-size: 0.98rem; }
.grafico-alvo { width: 100%; display: flex; flex-direction: column; align-items: center; }

.rosca-wrap { position: relative; display: inline-flex; }
.rosca-svg { display: block; }
.rosca-trilho { stroke: var(--borda); }
/* Cada fatia se desenha a partir de --comp (o proprio comprimento, calculado no JS).
   Igual a linha: valor final no elemento, animacao so por cima. */
.rosca-arco {
  cursor: pointer;
  animation: rosca-entra 620ms var(--ease) both;
  transition: opacity var(--dur-1) var(--ease), stroke-width var(--dur-1) var(--ease);
}
@keyframes rosca-entra { from { stroke-dashoffset: var(--comp, 0); } to { stroke-dashoffset: 0; } }
.medidor-arco { animation: medidor-entra 900ms var(--ease) 150ms both; }
@keyframes medidor-entra { from { stroke-dashoffset: var(--comp, 0); } to { stroke-dashoffset: var(--final, 0); } }
.rosca-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 18%; }
.rosca-centro .v { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.rosca-centro .l { font-size: 0.68rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; line-height: 1.2; }
.rosca-centro .p { font-size: 0.78rem; font-weight: 700; color: var(--azul-escuro); margin-top: 3px; }

/* Uma etapa por linha no celular; duas colunas quando ha largura (senao o cartao fica
   com meio metro de altura no desktop, com oito etapas). */
.rosca-legenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 2px 10px; margin-top: 16px; width: 100%; max-width: 460px; }
/* A legenda e clicavel: tocar num item acende a fatia e o centro passa a contar aquela
   etapa. No celular e mais facil acertar a legenda do que a fatia. */
button.leg-item {
  display: flex; align-items: center; gap: 9px; font-size: 0.84rem; min-width: 0; width: 100%;
  background: none; border: none; border-radius: var(--raio-sm); padding: 7px 8px; cursor: pointer; text-align: left;
}
button.leg-item:hover { background: var(--superficie-2); }
.leg-cor { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.leg-nome { color: var(--texto-suave); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.leg-pct { font-size: 0.76rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

.medidor-wrap { position: relative; display: inline-flex; }
.medidor-svg { display: block; }
.medidor-trilho { stroke: var(--borda); }
.medidor-centro { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.medidor-centro .v { font-family: var(--fonte-titulo); font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.medidor-centro .l { font-size: 0.78rem; color: var(--texto-suave); margin-top: 4px; }
.medidor-rotulo { margin: 10px 0 0; font-size: 0.78rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }

/* ---- Dashboard: perfil, atalhos, recentes ---- */
.painel-topo { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 8px; }
.perfil-bloco { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.perfil-bloco .avatar-ini { width: 52px; height: 52px; font-size: 1.05rem; background: var(--azul); }
.perfil-bloco .nome { font-weight: 700; font-size: 1.15rem; }
.perfil-bloco .papel { color: var(--texto-suave); font-size: 0.85rem; }
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.atalho { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); color: var(--texto); text-decoration: none; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.atalho:hover { border-color: var(--azul); color: var(--azul); }
.atalho .icone { color: var(--azul); }
.recentes { display: flex; flex-direction: column; }
.recente { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--borda); cursor: pointer; text-decoration: none; color: inherit; }
.recente:last-child { border-bottom: none; }
.recente .avatar-ini { width: 36px; height: 36px; font-size: 0.78rem; }
.recente .r-corpo { min-width: 0; flex: 1 1 auto; }
.recente .r-nome { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recente .r-sub { font-size: 0.78rem; color: var(--texto-suave); }

/* ---- Folha inferior (filtros no mobile) ---- */
.folha-fundo { position: fixed; inset: 0; background: rgba(10, 18, 30, 0.45); z-index: 40; display: flex; align-items: flex-end; }
.folha { background: var(--superficie); width: 100%; border-radius: 16px 16px 0 0; padding: 8px 18px 24px; max-height: 82vh; overflow-y: auto; }
.folha-alca { width: 40px; height: 4px; border-radius: 2px; background: var(--borda); margin: 8px auto 14px; }
.folha h3 { margin: 0 0 12px; }

/* Opcoes de contato na folha (WhatsApp ou ligacao comum). Linhas cheias, estilo quieto
   (sobrescreve o botao primario azul), icone na cor de acao. */
.opcoes-contato { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
button.opcao-contato {
  justify-content: flex-start;
  gap: 12px;
  padding: 13px 14px;
  background: var(--superficie);
  border-color: var(--borda);
  color: var(--texto);
}
button.opcao-contato:hover { background: var(--superficie-2); border-color: var(--azul); color: var(--azul); box-shadow: none; }
button.opcao-contato .icone { flex: none; color: var(--azul); }
button.opcao-contato .selo { margin-left: auto; }
button.opcao-contato.perigo-texto { color: var(--erro); }
button.opcao-contato.perigo-texto:hover { border-color: var(--erro); color: var(--erro); background: color-mix(in srgb, var(--erro) 8%, transparent); }

/* Botao de acao destrutiva (confirmacao de desqualificar). Cor solida, sem gradiente. */
button.perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
button.perigo:hover { background: color-mix(in srgb, var(--erro) 85%, #000); border-color: color-mix(in srgb, var(--erro) 85%, #000); }

/* ---- Agenda (grade fixa da manha: 3 slots de 1h30, seg a sex) ---- */
.agenda-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.agenda-avancar .icone { transform: scaleX(-1); }
.agenda-dia { display: flex; align-items: center; gap: 10px; min-width: 0; }
.agenda-dia strong { font-size: 1.02rem; }
.agenda-slot { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; margin-bottom: 12px; }
.agenda-hora { display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.agenda-corpo { display: flex; flex-direction: column; gap: 8px; }
.agenda-reuniao { border: 1px solid var(--borda); border-left: 3px solid var(--azul); border-radius: var(--raio-sm); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }
.agenda-reuniao .nome a { color: var(--texto); font-weight: 600; text-decoration: none; }
.agenda-reuniao .nome a:hover { color: var(--azul); }
.agenda-reuniao .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.agenda-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.agenda-acoes button { padding: 5px 10px; font-size: 0.8rem; }
button.agenda-marcar { background: transparent; border: 1px dashed var(--borda-forte); color: var(--texto-suave); justify-content: center; box-shadow: none; }
button.agenda-marcar:hover { border-color: var(--azul); color: var(--azul); background: transparent; box-shadow: none; }
.agenda-secao { margin: 16px 0 8px; font-size: 0.95rem; color: var(--texto-suave); }
.agenda-form .agenda-resultados { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 40vh; overflow-y: auto; }
button.agenda-lead-opcao { background: var(--superficie); border: 1px solid var(--borda); color: var(--texto); justify-content: flex-start; gap: 10px; padding: 9px 12px; box-shadow: none; }
button.agenda-lead-opcao:hover { border-color: var(--azul); background: var(--superficie-2); box-shadow: none; }
button.agenda-lead-opcao .principal { font-weight: 600; }
.agenda-escolhido { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* ---- Gestos no card do lead (specs/leads-gestos-card.md) ---- */
.lead-swipe { position: relative; }
.lead-swipe .lead-card { position: relative; z-index: 1; transition: transform var(--dur-2) var(--ease); }
.lead-swipe .lead-card.arrastando { transition: none; }
.swipe-intencao { position: absolute; inset: 0; border-radius: var(--raio); display: flex; align-items: center; gap: 8px; padding: 0 18px; color: #fff; font-weight: 700; font-size: 0.9rem; opacity: 0; }
.swipe-intencao.direita { justify-content: flex-start; background: var(--aviso); }
/* Esquerda BAIXA a temperatura (rev. 2): azul-frio, nao vermelho (desqualificar e no menu). */
.swipe-intencao.esquerda { justify-content: flex-end; background: var(--frio); }
.lead-swipe.vai-direita .swipe-intencao.direita { opacity: 1; }
.lead-swipe.vai-esquerda .swipe-intencao.esquerda { opacity: 1; }
/* Segurar (long-press) e gesto do app: o navegador nao deve selecionar texto nem abrir
   o menu de contexto proprio em cima do card. */
.lead-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media (min-width: 720px) {
  /* Os circulares agora sao DOIS cartoes (rosca + medidor) e ocupam a linha inteira;
     os tiles descem para baixo deles. Com `auto 1fr` os dois graficos ficavam
     espremidos numa coluna so. */
  .painel-topo { grid-template-columns: 1fr; align-items: stretch; }
}
@media (min-width: 900px) {
  .leads-cards, .cards-mobile { display: none; }
  .leads-tabela-wrap, .tabela-desktop { display: block; }
  .fab { display: none; }
}

/* =====================================================================
   7) MOVIMENTO E ESTADOS (design system v2). Camada aditiva por cima dos
   componentes: entrada de conteudo, hover/press, esqueleto de carregamento.
   Sem gradiente (regra da casa): profundidade vem de sombra, opacidade e
   transform. Tempos e curvas vem dos tokens --dur-* e --ease.
   ===================================================================== */

/* Entrada sutil do conteudo a cada tela. */
@keyframes ds-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main#conteudo { animation: ds-entra var(--dur-3) var(--ease) both; }

/* Sobreposicoes surgem, nao piscam. */
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-surge { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ds-sobe { from { transform: translateY(100%); } to { transform: none; } }
.modal-fundo { animation: ds-fade var(--dur-2) var(--ease) both; }
.modal-cartao { animation: ds-surge var(--dur-2) var(--ease) both; }
.folha-fundo { animation: ds-fade var(--dur-2) var(--ease) both; }
.folha { animation: ds-sobe var(--dur-3) var(--ease) both; }
.toast { animation: ds-surge var(--dur-2) var(--ease) both; }
.fpop { animation: ds-fade var(--dur-1) var(--ease) both; }

/* Barra do topo e do rodape translucidas, com desfoque do conteudo passando. */
.topo {
  background: color-mix(in srgb, var(--superficie) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bottom-nav {
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -8px 24px rgba(23, 32, 58, 0.06);
}

/* Itens interativos respondem ao toque (lift discreto + press). */
.cartao { transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.lead-card, .atalho, .recente, .tile {
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.lead-card:hover, .atalho:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.lead-card:active { transform: none; }
.tile:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-1); }
.recente:hover { background: var(--superficie-2); }
.tabela-lista tbody tr { transition: background var(--dur-1) var(--ease); }
.pill {
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.pill:active { transform: scale(0.97); }
.pill.ativo { box-shadow: var(--sombra-1); }
.icone-btn { transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.icone-btn:active { transform: scale(0.92); }
/* `transform` e `opacity` com a curva mais longa: o recolher/voltar do FAB tem que ser
   percebido como movimento, nao como um sumico seco. */
.fab { box-shadow: var(--sombra-3); transition: background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.fab:hover { transform: translateY(-2px); }
.fab:active { transform: scale(0.95); }
.kanban-card { transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.kanban-card:hover { box-shadow: var(--sombra-2); }

/* Bottom nav: indicador do item ativo desliza de cima, cor com transicao. */
.bn-item { position: relative; transition: color var(--dur-1) var(--ease); }
.bn-item::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--azul);
  transform: translateX(-50%) scaleX(0); transition: transform var(--dur-2) var(--ease);
}
.bn-item.ativo::before { transform: translateX(-50%) scaleX(1); }

/* Hierarquia: titulos mais firmes e juntos (a Inter variavel aceita pesos finos). */
main#conteudo h1 { font-weight: 700; letter-spacing: -0.02em; }
main#conteudo h2 { font-weight: 650; letter-spacing: -0.01em; }
/* Tamanho FLUIDO (esta regra vem depois e e a que vale). Fixo em 1.6rem, um valor
   como "R$ 3.506,29" nao cabia na coluna do celular e quebrava em duas linhas. */
.tile .valor { font-size: clamp(1.05rem, 5.4vw, 1.6rem); }
.tile .rotulo { letter-spacing: 0.06em; }
.rosca-centro .v { font-size: clamp(1.2rem, 5.4vw, 1.6rem); }
.perfil-bloco .nome { letter-spacing: -0.01em; }
.topo .marca-mobile { letter-spacing: -0.01em; }

/* Esqueleto de carregamento: pulso de opacidade (sem gradiente, regra da casa). */
@keyframes ds-pulsa { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.skeleton { background: var(--borda); border-radius: var(--raio-sm); animation: ds-pulsa 1.2s var(--ease) infinite; min-height: 14px; }
.carregando { color: var(--texto-fraco); animation: ds-pulsa 1.4s var(--ease) infinite; }

/* Login com cara de produto: marca com simbolo, cartao elevado surgindo. */
.login-cartao { padding: 28px 26px; box-shadow: var(--sombra-2); animation: ds-surge var(--dur-3) var(--ease) both; }
.login-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-marca h1 { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; }
.login-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--raio-sm); flex: none;
  background: color-mix(in srgb, var(--azul) 12%, transparent); color: var(--azul);
}

/* Painel de funil: barras no raio do sistema. */
.funil-etapa .trilho { border-radius: var(--raio-sm); }
.funil-etapa .barra { border-radius: var(--raio-sm) 0 0 var(--raio-sm); }

/* Acessibilidade: quem pediu menos movimento no sistema recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   8) IPHONE / iOS. As cascas usam viewport-fit=cover: a app bar e a bottom
   nav avancam sobre o notch e a barra de gesto com padding de AREA SEGURA.
   Mais: dvh contra o 100vh do Safari (que conta a barra recolhida), campo a
   16px (abaixo disso o Safari da zoom ao focar), alvo de toque confortavel
   e hover que nao gruda no dedo. Fora do iOS os env() valem 0 e nada muda.
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
/* Rolagem horizontal (pills, tabelas) nao dispara o gesto de voltar do navegador no
   Android; o retorno-para-dentro-do-app do iOS fica com a sentinela no layout.js. */
html, body { overscroll-behavior-x: none; }

/* Altura dinamica do Safari. Navegador que nao conhece dvh ignora e fica no vh. */
.app-grade { min-height: 100dvh; }
.login-tela { min-height: 100dvh; }
.folha { max-height: 82dvh; }
.arv-wrap { max-height: 56dvh; }

/* Campo a 16px: menor que isso o iOS Safari aproxima a tela inteira ao focar. */
input, select { font-size: 16px; }

/* Areas seguras: notch em cima, barra de gesto embaixo, cantos no landscape. */
.topo {
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
main#conteudo {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.bottom-nav {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* O botao "novo" nao e mais posicionado (saiu o position: fixed), entao `right` nao
   vale nada aqui. O respiro do entalhe lateral vira margem a direita. */
.fab { margin-right: max(0px, env(safe-area-inset-right, 0px)); }
.folha { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.login-tela {
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
#toasts { top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.modal-fundo { padding-top: max(40px, calc(env(safe-area-inset-top, 0px) + 16px)); }

/* No desktop os respiros largos continuam mandando (env vale 0 fora do iOS). */
@media (min-width: 900px) {
  .topo, main#conteudo {
    padding-left: max(clamp(20px, 3vw, 60px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(20px, 3vw, 60px), env(safe-area-inset-right, 0px));
  }
}

/* Alvo de toque confortavel (HIG ~44pt) e trilho de pills sem barra visivel. */
.icone-btn { min-width: 40px; min-height: 40px; }
.pill { min-height: 36px; }
.pills { scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.bn-item, .pill, .fab, .icone-btn { -webkit-user-select: none; user-select: none; }

/* Toque nao e hover: sem lift grudado depois do tap. */
@media (hover: none) {
  .lead-card:hover, .atalho:hover { transform: none; box-shadow: var(--sombra); }
  .tile:hover { box-shadow: none; border-color: var(--borda); }
  .fab:hover { transform: none; }
  .kanban-card:hover { box-shadow: var(--sombra); }
  button:hover, .botao:hover { box-shadow: none; }
}

/* =====================================================================
   9) PELE ATUAL: azul bebe sobre muito branco + par tipografico.
   Plus Jakarta Sans nos titulos e numeros de destaque, Manrope no texto.
   Sobre preenchimento azul bebe o texto e SEMPRE a tinta, nunca branco.
   ===================================================================== */
main#conteudo h1, main#conteudo h2, main#conteudo h3,
.topo .marca-mobile, .login-marca h1, .perfil-bloco .nome,
.tile .valor, .rosca-centro .v, .modal-cab h2, .folha h3 { font-family: var(--fonte-titulo); }

/* Texto azul (link, marca, icone de logo) usa o tom com mais corpo. */
a { color: var(--azul-escuro); }
a:hover { color: var(--azul-tinta); }
.link-btn { color: var(--azul-escuro); }
.topo .marca-mobile { color: var(--azul-escuro); }
.login-logo { color: var(--azul-escuro); }
.bn-item.ativo { color: var(--azul-escuro); }
.badge-azul { color: var(--azul-escuro); }
.tile.destaque .valor { color: var(--azul-escuro); }

/* Avatar com foto + perfil + area de usuarios. */
.avatar-ini { position: relative; overflow: hidden; }
.avatar-ini .avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.topo-perfil { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--texto); min-width: 0; }
.topo-perfil:hover { color: var(--azul-tinta); }
.topo-nome { font-size: 0.9rem; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .topo-nome { max-width: none; } }
.perfil-foto-wrap { position: relative; width: 96px; height: 96px; }
.perfil-foto-wrap .avatar-ini { background: var(--azul); color: var(--azul-tinta); }
.btn-camera {
  position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; min-width: 34px; min-height: 34px;
  border-radius: 50%; border: 2px solid var(--superficie); background: var(--azul); color: var(--azul-tinta);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.btn-camera:hover { background: var(--azul-escuro); }
.usuario-inativo { opacity: 0.55; }
.usuario-celula { display: flex; align-items: center; gap: 10px; }
/* Blocos da lista de leads: separacao visivel por temperatura, com ganhos e
   perdidos em listas proprias no fim. Ponto de cor solida, sem gradiente. */
.grupo-cab { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; }
.grupo-cab:first-of-type { margin-top: 4px; }
.g-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--texto-fraco); flex: none; }
.g-quente .g-ponto { background: var(--quente); }
.g-morno .g-ponto { background: var(--morno); }
.g-frio .g-ponto { background: var(--frio); }
.g-ganho .g-ponto { background: var(--ok); }
.g-perdido .g-ponto { background: var(--texto-fraco); }
.g-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.g-cont { font-size: 0.72rem; font-weight: 700; background: var(--borda); color: var(--texto-suave); border-radius: var(--raio-cheio); padding: 1px 8px; }
.g-perdido .g-titulo { color: var(--texto-suave); }

/* Toggle do grupo de perdidos (vem reduzido por padrao). Botao quieto, na linha do cabecalho. */
button.g-mostrar { margin-left: auto; background: transparent; border: 1px solid var(--borda-forte); color: var(--texto-suave); padding: 3px 10px; font-size: 0.78rem; box-shadow: none; }
button.g-mostrar:hover { background: var(--superficie-2); border-color: var(--azul); color: var(--azul); box-shadow: none; }

/* Lead perdido/desqualificado e CINZA e apagado: arquivo morto, nao alarme. */
.lead-card.perdido { opacity: 0.68; }
.lead-card.perdido .avatar-ini { background: var(--texto-fraco); }
.tabela-lista tr.linha-perdida { opacity: 0.62; }

/* Barra de taxa de fechamento (relatorios): cor solida sobre trilho claro. */
.taxa-trilho { height: 8px; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-cheio); overflow: hidden; margin-top: 12px; }
.taxa-barra { height: 100%; background: var(--azul); border-radius: var(--raio-cheio); }

/* Preenchimento azul bebe recebe texto tinta. */
button, .botao { color: var(--azul-tinta); }
button:hover, .botao:hover { color: var(--azul-tinta); }
button.secundario { color: var(--texto); }
button.secundario:hover { color: var(--azul-escuro); }
.fab { color: var(--azul-tinta); }
.funil-etapa .barra { color: var(--azul-tinta); }
.pill.ativo { color: var(--azul-tinta); }
.pill.ativo .cont { background: rgba(255, 255, 255, 0.5); color: var(--azul-tinta); }
.perfil-bloco .avatar-ini { color: var(--azul-tinta); }
.consultor-card .avatar-c { color: var(--azul-tinta); }
.kanban-card .avatar { color: var(--azul-tinta); }

/* ===========================================================================
   Base de conhecimento (specs/base-conhecimento.md)
   Reusa os tokens do tema; nada de cor solta. Duas telas de leitura (catalogo e
   estudo), duas de administracao (lista e editor) e o painel de acompanhamento.
   =========================================================================== */

/* --- utilitarios que faltavam e agora sao compartilhados --- */
.tela-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.cab-voltar { display: flex; align-items: flex-start; gap: 12px; }
.cab-voltar h1 { margin: 0; }
.botao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte); background: var(--superficie);
  color: var(--texto-suave); cursor: pointer; text-decoration: none; flex: 0 0 auto;
}
.botao-icone:hover { color: var(--azul-escuro); border-color: var(--azul); }
.botao-secundario, .botao-link {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 9px 14px; border-radius: var(--raio-sm); font-size: 0.86rem; font-weight: 600;
}
.botao-secundario { border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto-suave); }
.botao-secundario:hover { color: var(--azul-escuro); border-color: var(--azul); }
.botao-link { background: var(--azul); color: var(--azul-tinta); border: 1px solid var(--azul); }
.botao-link:hover { background: var(--azul-escuro); }
.link-perigo { background: none; border: none; color: var(--erro); font-size: 0.84rem; font-weight: 600; cursor: pointer; padding: 6px 8px; }
.link-perigo:hover { text-decoration: underline; }

.form-grade { display: grid; gap: 4px; }
.form-grade textarea { width: 100%; resize: vertical; }
.opcao-inline { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 0.88rem; color: var(--texto); font-weight: 500; }
.opcao-inline input { width: auto; margin: 0; }
.opcoes-lista { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.filtros-linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.campo-busca { flex: 1 1 220px; min-width: 180px; }
.bloco { margin: 26px 0; }
.bloco h2 { font-size: 1.05rem; margin: 0 0 10px; }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.tabela { width: 100%; border-collapse: collapse; min-width: 620px; }
.tile-ok .valor, .tile-ok .tile-valor { color: var(--ok); }
.tile-aviso .valor, .tile-aviso .tile-valor { color: var(--aviso); }
.tile-azul .valor, .tile-azul .tile-valor { color: var(--azul-escuro); }

/* --- barra de progresso --- */
.barra { height: 8px; border-radius: var(--raio-cheio); background: var(--borda); overflow: hidden; margin: 10px 0 6px; }
.barra-fina { height: 6px; margin: 2px 0; min-width: 90px; }
.barra-preenchida { display: block; height: 100%; background: var(--azul); border-radius: var(--raio-cheio); transition: width 120ms ease; }

/* --- catalogo do consultor --- */
.cursos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.curso-cartao {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px; box-shadow: var(--sombra-1); transition: box-shadow 120ms ease, border-color 120ms ease;
}
.curso-cartao:hover { box-shadow: var(--sombra-2); border-color: var(--borda-forte); }
.curso-topo { display: flex; gap: 10px; align-items: flex-start; }
.curso-topo h3 { margin: 0; font-size: 1rem; }
.curso-icone {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: var(--raio-sm);
  background: var(--superficie-2); color: var(--azul-escuro);
}
.curso-desc { margin: 4px 0 0; font-size: 0.85rem; color: var(--texto-suave); }
.curso-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.curso-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.curso-progresso { font-size: 0.8rem; color: var(--texto-suave); }
.curso-acao { font-size: 0.84rem; font-weight: 700; color: var(--azul-escuro); }

/* --- tela de estudo --- */
.curso-progresso-linha { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.curso-progresso-linha > div:first-child { flex: 1 1 auto; }
.curso-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.curso-indice {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px; max-height: calc(100vh - 260px); overflow-y: auto; position: sticky; top: 12px;
}
.indice-grupo { margin-bottom: 10px; }
.indice-secao { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-fraco); margin: 12px 6px 6px; }
.indice-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--raio-sm); padding: 9px 8px;
  color: var(--texto); font-size: 0.87rem; cursor: pointer;
}
.indice-item:hover { background: var(--superficie-2); }
.indice-item.atual { background: var(--superficie-2); font-weight: 650; box-shadow: inset 2px 0 0 var(--azul); }
.indice-item.feita .indice-titulo { color: var(--texto-suave); }
.indice-marca { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--borda); color: var(--texto-suave); flex: 0 0 auto; }
.indice-item.feita .indice-marca { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.indice-titulo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.curso-palco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; min-height: 320px; }
.palco-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.palco-cab h2 { margin: 6px 0 0; font-size: 1.15rem; }
.palco-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--raio-sm); overflow: hidden; }
.palco-video iframe, .palco-video-arquivo { width: 100%; height: 100%; border: 0; display: block; }
.palco-pdf { width: 100%; height: min(76vh, 900px); border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.palco-link, .palco-arquivo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px; background: var(--superficie-2); border-radius: var(--raio-sm); }
.palco-arquivo p { margin: 2px 0 0; }
.botao-concluir, .botao-concluido {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
  border-radius: var(--raio-sm); font-size: 0.86rem; font-weight: 650; cursor: pointer;
}
.botao-concluir { background: var(--azul); border: 1px solid var(--azul); color: var(--azul-tinta); }
.botao-concluir:hover { background: var(--azul-escuro); }
.botao-concluido { background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }

.artigo { line-height: 1.65; }
.artigo h2, .artigo h3, .artigo h4 { margin: 20px 0 8px; }
.artigo p { margin: 0 0 12px; }
.artigo ul { margin: 0 0 14px 20px; }
.anexos { margin-top: 22px; border-top: 1px solid var(--borda); padding-top: 14px; }
.anexos h3 { font-size: 0.95rem; margin: 0 0 10px; }
.anexo-item, .anexo-linha {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--raio-sm);
  background: var(--superficie-2); color: var(--texto); text-decoration: none; margin-bottom: 6px; font-size: 0.88rem;
}
.anexo-item:hover { background: var(--borda); }
.anexo-linha span:nth-child(2) { flex: 1 1 auto; }

/* --- administracao --- */
.kb-lista { display: flex; flex-direction: column; gap: 8px; }
.kb-linha {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px;
}
.kb-linha:hover { border-color: var(--azul); }
.kb-linha-corpo { flex: 1 1 auto; min-width: 0; }
.kb-linha-corpo p { margin: 2px 0 0; }
.kb-linha-marcas { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-grupo { margin-bottom: 22px; }
.kb-grupo-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kb-grupo-cab h3 { margin: 0; font-size: 0.98rem; }
.kb-grupo-acoes { display: flex; gap: 6px; align-items: center; }
.kb-aulas { display: flex; flex-direction: column; gap: 6px; }
.kb-aula {
  display: flex; align-items: center; gap: 10px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 10px 12px;
}
.kb-aula.arrastando { opacity: 0.5; border-style: dashed; }
.kb-arrasta { color: var(--texto-fraco); cursor: grab; display: inline-flex; }
.kb-aula-corpo { flex: 1 1 auto; min-width: 0; }
.kb-aula-corpo p { margin: 2px 0 0; }
.kb-aula-marcas { display: flex; gap: 6px; }
.kb-aula-acoes { display: flex; gap: 4px; align-items: center; }

@media (max-width: 900px) {
  .curso-layout { grid-template-columns: minmax(0, 1fr); }
  .curso-indice { position: static; max-height: 320px; }
  .kb-aula { flex-wrap: wrap; }
  .kb-aula-acoes { width: 100%; justify-content: flex-end; }
}

/* Folha "Mais" do rodape: LISTA vertical, um item por linha (antes as ancoras eram
   inline e os itens saiam colados, lado a lado, sem alvo de toque). Mesmo espirito
   das .opcoes-contato: linha cheia, icone a esquerda, seta a direita, 52px de altura
   minima para o polegar. */
.mais-lista { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.mais-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm);
  color: var(--texto); text-decoration: none; font-size: 0.95rem; font-weight: 550;
}
.mais-item:hover, .mais-item:focus-visible { background: var(--superficie-2); border-color: var(--azul); }
.mais-item.ativo { border-color: var(--azul); background: var(--superficie-2); font-weight: 700; }
.mais-icone { display: inline-flex; flex: none; color: var(--azul); }
.mais-titulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mais-seta { display: inline-flex; flex: none; color: var(--texto-fraco); }
.mais-item.ativo .mais-seta { color: var(--azul); }

/* Menu "Mais" como POPOVER ancorado no botao do rodape (pedido do dono): a janelinha
   nasce de onde foi tocada e recolhe no mesmo lugar, em vez de subir do rodape como
   folha. z-index 35 fica ACIMA da bottom nav (30) e ABAIXO de modal (40) e toasts (50).
   Posicao (left/bottom) vem do JS por CSSOM; aqui so a aparencia. */
.mais-pop {
  position: fixed; z-index: 35;
  width: min(264px, calc(100vw - 20px));
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-3);
  padding: 6px;
  transform-origin: bottom center;
  animation: ds-pop var(--dur-2) var(--ease) both;
}
.mais-pop.saindo { animation: ds-pop-sai var(--dur-1) var(--ease) both; }
@keyframes ds-pop { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes ds-pop-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.96); } }

/* Bico apontando para o botao. Quadrado girado, com so as duas bordas de baixo a
   mostra, para casar com a borda do cartao. */
.mais-bico {
  position: absolute; bottom: -7px; width: 12px; height: 12px;
  background: var(--superficie);
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  transform: rotate(45deg); border-bottom-right-radius: 3px;
}

/* Dentro do popover as linhas nao levam moldura propria (a caixa ja e a moldura):
   ficam mais leves e o alvo de toque continua grande. */
.mais-pop .mais-lista { gap: 2px; padding: 0; }
.mais-pop .mais-item { border: none; min-height: 46px; padding: 10px 12px; font-size: 0.92rem; }
.mais-pop .mais-item:hover, .mais-pop .mais-item:focus-visible { background: var(--superficie-2); }
.mais-pop .mais-item.ativo { background: var(--superficie-2); }

@media (prefers-reduced-motion: reduce) {
  .mais-pop, .mais-pop.saindo { animation: none; }
}

/* ===========================================================================
   Grafico de linhas (publico/js/grafico-linhas.js) e o painel do relatorio.
   Cores das series vem do JS por CSSOM (propriedade, passa no CSP); aqui ficam
   forma, tipografia, grade e animacao.
   =========================================================================== */
.painel-grafico {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  padding: clamp(16px, 2.4vw, 26px); margin-bottom: 26px; box-shadow: var(--sombra-1);
}
.g-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.g-titulo {
  font-family: var(--fonte-titulo); font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 600; letter-spacing: -0.03em; margin: 0; color: var(--texto);
}
.g-sub { color: var(--texto-suave); margin: 4px 0 0; font-size: 0.92rem; }
.g-pills { padding: 0; overflow: visible; }

.g-legenda { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0 4px; }
.g-legenda-item { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.g-legenda-cor { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.g-legenda-rotulo { color: var(--texto-suave); }
.g-legenda-valor { color: var(--texto); font-weight: 700; }

.g-area-svg { width: 100%; margin: 6px 0 4px; }
.g-svg { width: 100%; height: auto; display: block; overflow: visible; }

.g-grade { stroke: var(--borda); stroke-width: 1; }
/* O TAMANHO do texto vem do atributo font-size que o JS calcula (escala 1:1 com a
   largura real). Aqui so cor e peso: por o tamanho no CSS venceria o atributo e
   traria de volta o texto encolhido no celular. */
.g-eixo-y, .g-eixo-x { fill: var(--texto-fraco); font-weight: 500; }
.g-area { opacity: 0.14; animation: g-sobe var(--dur-3) var(--ease) both; }
/* O traco se desenha a partir de --comp (o comprimento real do caminho, medido no JS).
   Animacao DECLARATIVA de proposito: o estado final ja esta no elemento, entao aba em
   segundo plano perde a animacao, nunca o desenho. */
.g-linha { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: g-traco 1000ms var(--ease) both; }
@keyframes g-traco { from { stroke-dashoffset: var(--comp, 0); } to { stroke-dashoffset: 0; } }
.g-ponto { opacity: 0; animation: g-aparece var(--dur-2) var(--ease) both; transition: r var(--dur-1) var(--ease); }
.g-ponto-ativo { r: 6; }
.g-faixa { fill: transparent; cursor: pointer; }
.g-marcador { stroke: var(--borda-forte); stroke-width: 1; stroke-dasharray: 4 4; transition: opacity var(--dur-1) var(--ease); }
.g-balao { transition: opacity var(--dur-1) var(--ease); pointer-events: none; }
.g-balao-caixa { fill: var(--superficie); stroke: var(--borda-forte); stroke-width: 1; filter: drop-shadow(0 6px 16px rgba(23, 32, 58, 0.14)); }
.g-balao-titulo { fill: var(--texto); font-weight: 700; }
.g-balao-linha { fill: var(--texto-suave); }

@keyframes g-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 0.14; transform: none; } }
@keyframes g-aparece { from { opacity: 0; } to { opacity: 1; } }

.g-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.g-metrica {
  border: 1px solid var(--borda); border-left-width: 3px; border-radius: var(--raio);
  padding: 14px 16px; background: var(--superficie); display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.g-metrica-valor {
  font-family: var(--fonte-titulo); font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 700;
  letter-spacing: -0.02em; color: var(--texto); line-height: 1.2; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.g-metrica-rotulo { font-size: 0.78rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; overflow-wrap: anywhere; }
.g-metrica.tom-azul { border-left-color: var(--azul); }
.g-metrica.tom-ok { border-left-color: var(--ok); }
.g-metrica.tom-ok .g-metrica-valor { color: var(--ok); }
.g-metrica.tom-erro { border-left-color: var(--erro); }
.g-metrica.tom-erro .g-metrica-valor { color: var(--erro); }
.g-metrica.tom-cinza { border-left-color: var(--borda-forte); }

@media (max-width: 560px) {
  .g-cab { flex-direction: column; }
  .g-legenda { gap: 14px; }
  .g-metricas { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .g-area, .g-ponto { animation: none; opacity: 1; }
  .g-area { opacity: 0.14; }
  .g-linha { transition: none !important; stroke-dashoffset: 0 !important; }
}