/* =========================================================================
   Rumo · Funil de vendas com IA (demo dentro do site pessoal)
   -------------------------------------------------------------------------
   Identidade PRÓPRIA, de produto (app de trabalho), diferente do site:
     site  = editorial, papel quente, serifa, muito respiro
     Rumo  = ferramenta, azul-noite + lima "sinal da IA", sem serifa, denso
   A única ponte visual é a barra .ponte no topo (cores e fonte do site).
   Prefixo das variáveis: --c- (cor), --t- (texto), --e- (espaço).
   ========================================================================= */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --c-fundo: #F2F4F7;
  --c-superficie: #FFFFFF;
  --c-superficie-2: #E9EDF2;
  --c-texto: #0B1220;          /* 18.7:1 sobre branco */
  --c-texto-2: #4B5568;        /* 7.5:1 */
  --c-linha: #DDE2E9;          /* decorativa */
  --c-borda: #7D8797;          /* controles: 3.6:1 */
  --c-marca: #14213D;          /* azul-noite: marca e botão primário */
  --c-sobre-marca: #FFFFFF;    /* 16:1 */
  --c-ia: #C5F23A;             /* lima: tudo que a IA fez. Sempre com texto escuro */
  --c-sobre-ia: #0B1220;       /* 14.4:1 sobre a lima */
  --c-ia-texto: #4A6600;       /* lima escurecida para texto: 6.6:1 */
  --c-perigo: #B42318;
  --c-foco: #2F5BEA;

  /* Cor de cada etapa: só em ponto, barra e texto de selo (todas ≥ 4.5:1) */
  --etapa-novo: #5F6B7A;
  --etapa-qualificado: #1D4ED8;
  --etapa-proposta: #6D28D9;
  --etapa-negociacao: #8F5200;
  --etapa-ganho: #146C36;
  --etapa-perdido: #B42318;

  --f-ui: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-num: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --f-ponte: "IBM Plex Mono", Consolas, monospace;

  --t-xs: .75rem;  --t-sm: .8125rem; --t-base: .875rem; --t-md: 1rem;
  --t-lg: 1.25rem; --t-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); --t-kpi: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);

  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.25rem; --e-6: 1.5rem; --e-7: 2rem;

  --raio-p: 6px; --raio: 10px; --raio-g: 14px;
  --sombra-1: 0 1px 2px rgba(11, 18, 32, .06), 0 1px 1px rgba(11, 18, 32, .04);
  --sombra-2: 0 12px 32px -12px rgba(11, 18, 32, .28), 0 2px 6px rgba(11, 18, 32, .06);

  --rapido: 140ms; --medio: 240ms; --curva: cubic-bezier(.2, .8, .2, 1);

  --altura-ponte: 2.25rem;
  --largura-lateral: 14.5rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-fundo: #0A0F1A; --c-superficie: #111827; --c-superficie-2: #1A2333;
    --c-texto: #E7ECF3; --c-texto-2: #98A3B5; --c-linha: #243045; --c-borda: #5E6B82;
    --c-marca: #E7ECF3; --c-sobre-marca: #0B1220;
    --c-ia-texto: #C5F23A; --c-perigo: #FF8A80; --c-foco: #7AA7FF;
    --etapa-novo: #9AA5B4; --etapa-qualificado: #7AA7FF; --etapa-proposta: #B39DFA;
    --etapa-negociacao: #F0B44C; --etapa-ganho: #5BD98A; --etapa-perdido: #FF8A80;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-2: 0 16px 40px -12px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-fundo: #0A0F1A; --c-superficie: #111827; --c-superficie-2: #1A2333;
  --c-texto: #E7ECF3; --c-texto-2: #98A3B5; --c-linha: #243045; --c-borda: #5E6B82;
  --c-marca: #E7ECF3; --c-sobre-marca: #0B1220;
  --c-ia-texto: #C5F23A; --c-perigo: #FF8A80; --c-foco: #7AA7FF;
  --etapa-novo: #9AA5B4; --etapa-qualificado: #7AA7FF; --etapa-proposta: #B39DFA;
  --etapa-negociacao: #F0B44C; --etapa-ganho: #5BD98A; --etapa-perdido: #FF8A80;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-2: 0 16px 40px -12px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--c-fundo);
  color: var(--c-texto);
  font: var(--t-base)/1.5 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
svg { display: block; }
[hidden] { display: none !important; }   /* o atributo hidden sempre vence o display do componente */
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; border-radius: var(--raio-p); }
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: var(--e-3); top: -4rem; z-index: 100;
  padding: var(--e-2) var(--e-3); background: var(--c-marca); color: var(--c-sobre-marca);
  border-radius: var(--raio-p); text-decoration: none; font-weight: 600;
}
.pular:focus { top: calc(var(--altura-ponte) + var(--e-2)); }

/* 3. PONTE COM O SITE ------------------------------------------------------ */
/* Cores e fonte do site pessoal, fixas: é o "selo" do portfólio */
.ponte {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--e-4);
  height: var(--altura-ponte);
  padding-inline: var(--e-4);
  background: #F4EFE6;
  color: #1B1915;
  border-bottom: 1px solid #CFC5B2;
  font: 500 .75rem/1 var(--f-ponte);
}
.ponte__voltar { text-decoration: none; display: inline-flex; gap: .4em; padding-block: .5rem; }
.ponte__voltar:hover { color: #9C3410; }
.ponte__voltar:focus-visible { outline-color: #B93D0E; }
.ponte__logo { color: #5C554B; }
.ponte__aviso { margin-left: auto; display: inline-flex; align-items: center; gap: .5em; color: #5C554B; }
.ponte__ponto { width: .45rem; height: .45rem; border-radius: 50%; background: #B93D0E; }
.ponte { white-space: nowrap; }
.ponte__curto { display: none; }
@media (max-width: 40rem) {
  .ponte { gap: var(--e-3); padding-inline: var(--e-3); }
  .ponte__logo, .ponte__longo { display: none; }
  .ponte__curto { display: inline; }
}

/* 4. ESTRUTURA DO APP ------------------------------------------------------ */
.app { display: grid; min-height: calc(100vh - var(--altura-ponte)); }
@media (min-width: 64rem) { .app { grid-template-columns: var(--largura-lateral) minmax(0, 1fr); } }

.lateral {
  display: flex; flex-direction: column; gap: var(--e-6);
  padding: var(--e-5) var(--e-4);
  background: var(--c-superficie);
  border-right: 1px solid var(--c-linha);
}
@media (min-width: 64rem) {
  .lateral { position: sticky; top: var(--altura-ponte); height: calc(100vh - var(--altura-ponte)); }
}
@media (max-width: 63.99rem) {
  /* No celular a lateral vira uma barra fina com a marca; o menu fica de fora da demo */
  .lateral { flex-direction: row; align-items: center; padding: var(--e-3) var(--e-4); border-right: 0; border-bottom: 1px solid var(--c-linha); }
  .lateral nav, .lateral .lateral__rodape { display: none; }
}

.marca { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; }
.marca__icone { width: 2rem; height: 2rem; }
.marca__nome { font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; }

.menu { list-style: none; padding: 0; display: grid; gap: 2px; }
.menu__link {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 2.5rem; padding: 0 var(--e-3);
  border-radius: var(--raio-p);
  color: var(--c-texto-2); text-decoration: none; font-weight: 500;
}
.menu__link svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.menu__link small { margin-left: auto; font-size: var(--t-xs); color: var(--c-texto-2); }
.menu__link[aria-current="page"] { background: var(--c-superficie-2); color: var(--c-texto); }
.menu__link[aria-current="page"] svg { stroke: var(--c-texto); }
.menu__link[aria-disabled="true"] { opacity: .65; cursor: default; }

.lateral__rodape { margin-top: auto; display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-sm); }
.lateral__rodape small { display: block; color: var(--c-texto-2); }
.avatar {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--c-marca); color: var(--c-sobre-marca); font-weight: 600; font-size: var(--t-sm);
}

.principal { min-width: 0; padding: var(--e-6) clamp(1rem, .5rem + 2vw, 2rem) var(--e-7); display: grid; gap: var(--e-5); align-content: start; }

.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); }
.cabecalho h1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.cabecalho p { color: var(--c-texto-2); max-width: 44rem; margin-top: var(--e-1); }
.cabecalho p strong { color: var(--c-texto); font-weight: 600; }
.cabecalho__acoes { display: flex; gap: var(--e-2); align-items: center; }

/* 5. COMPONENTES ----------------------------------------------------------- */

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 2.5rem; padding: 0 var(--e-4);
  border: 1px solid var(--c-borda); border-radius: var(--raio-p);
  background: var(--c-superficie); color: var(--c-texto);
  font-weight: 600; font-size: var(--t-base); white-space: nowrap;
  transition: background-color var(--rapido), border-color var(--rapido), transform var(--rapido) var(--curva);
}
.botao:hover { background: var(--c-superficie-2); }
.botao:active { transform: scale(.98); }
.botao[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.botao svg { width: 1rem; height: 1rem; fill: currentColor; }
.botao--p { min-height: 2.25rem; padding: 0 var(--e-3); font-size: var(--t-sm); }
.botao--primario { background: var(--c-marca); color: var(--c-sobre-marca); border-color: var(--c-marca); }
.botao--primario:hover { background: var(--c-marca); filter: brightness(1.15); }
/* Botão "IA": o único uso grande da lima, para ensinar que lima = IA */
.botao--ia { background: var(--c-ia); color: var(--c-sobre-ia); border-color: color-mix(in srgb, var(--c-ia) 60%, #000); }
.botao--ia:hover { background: var(--c-ia); filter: brightness(.95); }
.botao--perigo { color: var(--c-perigo); }
.botao--perigo:hover { border-color: var(--c-perigo); }

.icone {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--c-linha); border-radius: var(--raio-p); background: var(--c-superficie);
}
.icone:hover { border-color: var(--c-borda); }
.icone svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.icone .i-sol { display: none; }
:root[data-theme="dark"] .icone .i-sol { display: block; }
:root[data-theme="dark"] .icone .i-lua { display: none; }

/* KPIs */
.kpis { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 56rem) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi {
  display: grid; gap: 2px; padding: var(--e-4);
  background: var(--c-superficie); border: 1px solid var(--c-linha); border-radius: var(--raio);
}
.kpi__rotulo { font-size: var(--t-sm); color: var(--c-texto-2); font-weight: 500; }
.kpi__valor { font: 500 var(--t-kpi)/1.2 var(--f-num); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi__nota { font-size: var(--t-xs); color: var(--c-texto-2); }
.kpi--ia { border-color: color-mix(in srgb, var(--c-ia) 70%, var(--c-linha)); box-shadow: inset 3px 0 0 var(--c-ia); }

/* Filtros e busca */
.barra-filtros { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); }
.filtros { display: inline-flex; padding: 3px; gap: 2px; background: var(--c-superficie-2); border-radius: var(--raio); overflow-x: auto; max-width: 100%; }
.filtro {
  min-height: 2.25rem; padding: 0 var(--e-3); border: 0; border-radius: 7px; background: transparent;
  color: var(--c-texto-2); font-weight: 500; font-size: var(--t-sm); white-space: nowrap;
}
.filtro[aria-pressed="true"] { background: var(--c-superficie); color: var(--c-texto); box-shadow: var(--sombra-1); }
.busca {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 2.5rem; padding: 0 var(--e-3); min-width: min(100%, 18rem);
  background: var(--c-superficie); border: 1px solid var(--c-borda); border-radius: var(--raio-p);
}
.busca:focus-within { outline: 2px solid var(--c-foco); outline-offset: 1px; }
.busca svg { width: 1rem; height: 1rem; fill: none; stroke: var(--c-texto-2); stroke-width: 1.7; flex: none; }
.busca input { border: 0; background: transparent; outline: none; width: 100%; min-height: 2.25rem; }
.busca input::placeholder { color: var(--c-texto-2); }

/* Navegação por etapa (celular) */
.etapas-mobile { display: none; }
@media (max-width: 47.99rem) {
  .etapas-mobile { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * clamp(1rem, .5rem + 2vw, 2rem)); padding-inline: clamp(1rem, .5rem + 2vw, 2rem); }
  .etapas-mobile a {
    flex: none; display: inline-flex; align-items: center; gap: var(--e-2);
    min-height: 2.25rem; padding: 0 var(--e-3);
    border: 1px solid var(--c-linha); border-radius: 999px; background: var(--c-superficie);
    text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  }
  .etapas-mobile a[aria-current="true"] { border-color: var(--c-texto); }
}

/* QUADRO ------------------------------------------------------------------ */
.quadro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13.5rem, 1fr);
  gap: var(--e-3);
  overflow-x: auto;
  padding-bottom: var(--e-3);
  align-items: start;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
}
@media (max-width: 47.99rem) { .quadro { grid-auto-columns: 86%; } }
.quadro:focus { outline: none; }

.coluna {
  scroll-snap-align: start;
  display: grid; grid-template-rows: auto 1fr; gap: var(--e-2);
  background: var(--c-superficie-2);
  border-radius: var(--raio-g);
  padding: var(--e-2);
  min-height: 20rem;
  transition: background-color var(--rapido), box-shadow var(--rapido);
}
.coluna.is-alvo { box-shadow: inset 0 0 0 2px var(--cor-etapa); background: color-mix(in srgb, var(--cor-etapa) 8%, var(--c-superficie-2)); }
.coluna__topo { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-1); }
.coluna__topo h2 { font-size: var(--t-base); font-weight: 600; }
.coluna__ponto { width: .625rem; height: .625rem; border-radius: 3px; background: var(--cor-etapa); flex: none; }
.coluna__qtd {
  font: 500 var(--t-xs)/1 var(--f-num); padding: 3px 6px; border-radius: 999px;
  background: var(--c-superficie); color: var(--c-texto-2);
}
.coluna__total { margin-left: auto; font: 500 var(--t-xs)/1 var(--f-num); color: var(--c-texto-2); }
.coluna__lista { list-style: none; padding: 0; display: grid; gap: var(--e-2); align-content: start; min-height: 4rem; }
.coluna__vazia {
  padding: var(--e-5) var(--e-3); text-align: center; font-size: var(--t-sm); color: var(--c-texto-2);
  border: 1px dashed var(--c-borda); border-radius: var(--raio);
}
.coluna__grupo { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--c-texto-2); padding: var(--e-2) var(--e-2) 0; }

[data-etapa="NovoContato"] { --cor-etapa: var(--etapa-novo); }
[data-etapa="Qualificado"] { --cor-etapa: var(--etapa-qualificado); }
[data-etapa="Proposta"] { --cor-etapa: var(--etapa-proposta); }
[data-etapa="Negociacao"] { --cor-etapa: var(--etapa-negociacao); }
[data-etapa="Fechado"] { --cor-etapa: var(--etapa-ganho); }
[data-etapa="Perdido"] { --cor-etapa: var(--etapa-perdido); }

/* CARTÃO DO LEAD */
.cartao {
  position: relative;
  display: grid; gap: var(--e-2);
  padding: var(--e-3);
  background: var(--c-superficie);
  border: 1px solid var(--c-linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  cursor: grab;
  transition: border-color var(--rapido), box-shadow var(--rapido), transform var(--medio) var(--curva), opacity var(--rapido);
}
.cartao:hover { border-color: var(--c-borda); }
.cartao:has(.cartao__abrir:focus-visible) { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.cartao.is-arrastando { opacity: .4; }
.cartao.is-chegou { animation: chegou 1.4s var(--curva); }
.cartao.is-ativo { border-color: var(--c-texto); }
.cartao--sugestao { border-color: color-mix(in srgb, var(--c-ia) 80%, var(--c-borda)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-ia) 35%, transparent); }
.cartao--perdido { opacity: .72; }

.cartao__linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
.cartao__empresa { font-weight: 600; font-size: var(--t-base); line-height: 1.3; }
/* Um botão esticado cobre o cartão inteiro: um só alvo para teclado e leitor de tela */
.cartao__abrir { all: unset; cursor: pointer; }
.cartao__abrir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cartao__valor { font: 500 var(--t-sm)/1 var(--f-num); white-space: nowrap; }
.cartao__contato { font-size: var(--t-sm); color: var(--c-texto-2); }
.cartao__resumo {
  font-size: var(--t-sm); color: var(--c-texto-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cartao__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--c-texto-2); }
.cartao__tempo { margin-left: auto; font-family: var(--f-num); }

.selo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  font: 600 var(--t-xs)/1.4 var(--f-ui);
  border: 1px solid var(--c-linha); color: var(--c-texto-2); background: var(--c-superficie);
}
.selo--ia { background: var(--c-ia); color: var(--c-sobre-ia); border-color: transparent; }
.selo--ia::before { content: "✦"; font-size: .7rem; }
.selo--etapa { color: var(--cor-etapa); border-color: color-mix(in srgb, var(--cor-etapa) 40%, transparent); background: color-mix(in srgb, var(--cor-etapa) 8%, var(--c-superficie)); }
.selo--ganho { --cor-etapa: var(--etapa-ganho); }
.selo--perdido { --cor-etapa: var(--etapa-perdido); }
.selo-ia {
  flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 7px; background: var(--c-ia); color: var(--c-sobre-ia); font: 700 var(--t-xs)/1 var(--f-num);
}

/* PAINEL DO LEAD ---------------------------------------------------------- */
.veu { position: fixed; inset: 0; z-index: 49; background: rgba(11, 18, 32, .35); }
@media (min-width: 64rem) { .veu { display: none; } }
.painel {
  position: fixed; z-index: 50;
  top: var(--altura-ponte); right: 0; bottom: 0;
  width: min(100%, 27rem);
  display: flex; flex-direction: column;
  background: var(--c-superficie);
  border-left: 1px solid var(--c-linha);
  box-shadow: var(--sombra-2);
  animation: entrar-direita var(--medio) var(--curva);
}
.painel[hidden] { display: none; }
.painel__topo { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-5) var(--e-5) var(--e-3); }
.painel__topo h2 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; }
.painel__topo h2:focus { outline: none; }
.painel__etapa { margin-bottom: var(--e-1); }
.painel__sub { color: var(--c-texto-2); font-size: var(--t-sm); }
.painel__corpo { flex: 1; overflow-y: auto; padding: var(--e-4) var(--e-5) var(--e-6); }

.sugestao-fechar {
  margin: 0 var(--e-5) var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--c-ia) 22%, var(--c-superficie));
  border: 1px solid color-mix(in srgb, var(--c-ia) 70%, var(--c-borda));
  font-size: var(--t-sm);
}
.sugestao-fechar__acoes { display: flex; gap: var(--e-2); margin-top: var(--e-3); }

.abas { display: flex; gap: var(--e-4); padding: 0 var(--e-5); border-bottom: 1px solid var(--c-linha); }
.aba {
  min-height: 2.5rem; padding: 0; border: 0; background: none;
  color: var(--c-texto-2); font-weight: 600; font-size: var(--t-sm);
  box-shadow: inset 0 -2px 0 transparent;
}
.aba[aria-selected="true"] { color: var(--c-texto); box-shadow: inset 0 -2px 0 var(--c-texto); }
.aba-painel:focus-visible { outline-offset: 4px; }
.aba-painel { display: grid; gap: var(--e-5); align-content: start; }

.resumo-ia { display: flex; gap: var(--e-3); padding: var(--e-3); border-radius: var(--raio); background: var(--c-superficie-2); }
.resumo-ia p { font-size: var(--t-sm); }

.dados { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); font-size: var(--t-sm); }
.dados dt { color: var(--c-texto-2); }
.dados dd { font-weight: 500; overflow-wrap: anywhere; }
.dados dd.vazio { color: var(--c-texto-2); font-weight: 400; font-style: italic; }

.mover { display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--c-linha); }
.mover label { font-weight: 600; font-size: var(--t-sm); }
.mover__linha { display: flex; gap: var(--e-2); }
.mover select {
  flex: 1; min-height: 2.25rem; padding: 0 var(--e-2);
  border: 1px solid var(--c-borda); border-radius: var(--raio-p); background: var(--c-superficie);
}
.mover__dica { font-size: var(--t-xs); color: var(--c-texto-2); }
.painel__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Conversa (transcrição) */
.transcricao { list-style: none; padding: 0; display: grid; gap: var(--e-3); align-content: start; } /* mensagens coladas no topo, sem esticar */
.fala { display: grid; gap: 2px; max-width: 88%; }
.fala__quem { font-size: var(--t-xs); color: var(--c-texto-2); font-weight: 600; }
.fala__texto { padding: var(--e-2) var(--e-3); border-radius: 12px; font-size: var(--t-sm); }
.fala--visitante { justify-self: start; }
.fala--visitante .fala__texto { background: var(--c-superficie-2); border-bottom-left-radius: 4px; }
.fala--assistente { justify-self: end; text-align: left; }
.fala--assistente .fala__quem { text-align: right; }
.fala--assistente .fala__texto { background: var(--c-marca); color: var(--c-sobre-marca); border-bottom-right-radius: 4px; }
.fala--sistema { justify-self: center; max-width: 100%; }
.fala--sistema .fala__texto { background: none; padding: 0; font-size: var(--t-xs); color: var(--c-texto-2); text-align: center; }

/* Linha do tempo de movimentos */
.linha-tempo { list-style: none; padding: 0; display: grid; }
.mov { position: relative; display: grid; gap: var(--e-1); padding: 0 0 var(--e-5) var(--e-6); }
.mov::before { content: ""; position: absolute; left: .4rem; top: .5rem; bottom: 0; width: 1px; background: var(--c-linha); }
.mov:last-child::before { display: none; }
.mov::after {
  content: ""; position: absolute; left: 0; top: .2rem; width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--c-superficie); border: 2px solid var(--c-borda);
}
.mov--ia::after { background: var(--c-ia); border-color: color-mix(in srgb, var(--c-ia) 60%, #000); }
.mov--desfeito { opacity: .6; }
.mov--desfeito .mov__passo { text-decoration: line-through; }
.mov__topo { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.mov__passo { font-weight: 600; font-size: var(--t-sm); }
.mov__motivo { font-size: var(--t-sm); color: var(--c-texto-2); }
.mov__quando { font: var(--t-xs)/1.4 var(--f-num); color: var(--c-texto-2); }
.confianca { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-xs)/1 var(--f-num); color: var(--c-texto-2); }
.confianca__barra { width: 3rem; height: 4px; border-radius: 2px; background: var(--c-superficie-2); overflow: hidden; }
.confianca__barra i { display: block; height: 100%; background: var(--c-ia-texto); }

/* SIMULADOR DE VISITANTE -------------------------------------------------- */
.visitante {
  position: fixed; z-index: 60;
  inset: auto auto var(--e-4) calc(var(--largura-lateral) + var(--e-4));
  width: min(100% - 2rem, 23rem);
  max-height: min(36rem, calc(100vh - var(--altura-ponte) - 2rem));
  margin: 0; padding: 0;
  display: none; flex-direction: column;
  background: var(--c-superficie); color: var(--c-texto);
  border: 1px solid var(--c-borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra-2);
}
.visitante[open] { display: flex; animation: subir var(--medio) var(--curva); }
@media (max-width: 63.99rem) {
  .visitante { inset: var(--altura-ponte) 0 0 0; width: 100%; max-height: none; height: auto; border-radius: 0; border: 0; }
}
.visitante__topo {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--c-linha);
}
.visitante__topo h2 { font-size: var(--t-md); font-weight: 700; }
.visitante__rotulo { font: 500 var(--t-xs)/1.2 var(--f-num); color: var(--c-ia-texto); }
.consentimento { display: grid; gap: var(--e-4); padding: var(--e-4); font-size: var(--t-sm); }
.check { display: flex; gap: var(--e-3); align-items: flex-start; cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; margin-top: 2px; accent-color: var(--c-marca); flex: none; }
.visitante__chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.visitante__chat[hidden] { display: none; }
.transcricao--viva { flex: 1; overflow-y: auto; padding: var(--e-4); min-height: 10rem; }
.transcricao--viva .fala--visitante { justify-self: end; }
.transcricao--viva .fala--visitante .fala__quem { text-align: right; }
.transcricao--viva .fala--visitante .fala__texto { background: var(--c-marca); color: var(--c-sobre-marca); border-radius: 12px 12px 4px 12px; }
.transcricao--viva .fala--assistente { justify-self: start; }
.transcricao--viva .fala--assistente .fala__quem { text-align: left; }
.transcricao--viva .fala--assistente .fala__texto { background: var(--c-superficie-2); color: var(--c-texto); border-radius: 12px 12px 12px 4px; }
.roteiro { list-style: none; display: flex; gap: var(--e-2); overflow-x: auto; padding: var(--e-2) var(--e-4); border-top: 1px solid var(--c-linha); scrollbar-width: thin; }
.roteiro button {
  white-space: nowrap; min-height: 2.25rem; padding: 0 var(--e-3);
  border: 1px dashed var(--c-borda); border-radius: 999px; background: none; font-size: var(--t-xs); color: var(--c-texto-2);
}
.roteiro button:hover { color: var(--c-texto); border-style: solid; }
.visitante__form { display: flex; gap: var(--e-2); padding: var(--e-3) var(--e-4) var(--e-4); }
.visitante__form input {
  flex: 1; min-width: 0; min-height: 2.25rem; padding: 0 var(--e-3);
  border: 1px solid var(--c-borda); border-radius: var(--raio-p); background: var(--c-superficie);
}
.digitando { display: inline-flex; gap: 4px; padding: var(--e-2) var(--e-3); }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-texto-2); animation: pontos 1.1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }

/* AVISOS (toasts) */
.avisos {
  position: fixed; z-index: 70; right: var(--e-4); bottom: var(--e-4);
  display: grid; gap: var(--e-2); width: min(100% - 2rem, 24rem); pointer-events: none;
}
.aviso {
  pointer-events: auto;
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3) var(--e-4);
  background: var(--c-marca); color: var(--c-sobre-marca);
  border-radius: var(--raio); box-shadow: var(--sombra-2); font-size: var(--t-sm);
  animation: subir var(--medio) var(--curva);
}
.aviso .selo-ia { width: 1.5rem; height: 1.5rem; }
.aviso button { margin-left: auto; background: none; border: 0; color: inherit; text-decoration: underline; font-weight: 600; font-size: var(--t-sm); padding: 0; min-height: 1.5rem; }
@media (max-width: 63.99rem) { .avisos { left: var(--e-4); right: var(--e-4); width: auto; bottom: auto; top: calc(var(--altura-ponte) + 4.5rem); } }

/* 6. MOVIMENTO ------------------------------------------------------------- */
@keyframes entrar-direita { from { transform: translateX(24px); opacity: 0; } }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } }
@keyframes pontos { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@keyframes chegou {
  0% { transform: scale(.96); box-shadow: 0 0 0 0 var(--c-ia); }
  30% { transform: scale(1.02); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-ia) 70%, transparent); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   ADIÇÕES DO MVC: páginas que o protótipo não tinha
   (chat público, privacidade, entrada do quadro real, alertas)
   ========================================================================= */

/* Página de uma coluna centralizada (atendimento, privacidade) */
.pagina-simples {
  min-height: calc(100vh - var(--altura-ponte));
  display: grid; place-items: start center;
  padding: var(--e-7) var(--e-4);
}

/* O chat do visitante como página (no quadro ele é um <dialog> flutuante) */
.visitante--pagina {
  position: static; display: flex;
  width: min(100%, 34rem);
  height: min(42rem, calc(100vh - var(--altura-ponte) - 4rem));
  max-height: none;
  border-radius: var(--raio-g); border: 1px solid var(--c-linha);
  animation: none;
}
.visitante--pagina h1 { font-size: var(--t-lg); font-weight: 700; }
@media (max-width: 40rem) {
  .pagina-simples { padding: 0; }
  .visitante--pagina { width: 100%; height: calc(100vh - var(--altura-ponte)); border: 0; border-radius: 0; }
}

/* Política de privacidade */
.texto-legal { width: min(100%, 42rem); display: grid; gap: var(--e-4); line-height: 1.6; font-size: var(--t-md); }
.texto-legal h1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; }
.texto-legal h2 { font-size: var(--t-lg); font-weight: 600; margin-top: var(--e-4); }
.texto-legal ul { padding-left: 1.2em; display: grid; gap: var(--e-2); }
.texto-legal .botao { justify-self: start; }


/* Faixa de alerta (IA sem chave) */
.faixa-alerta {
  padding: var(--e-3) var(--e-4); border-radius: var(--raio);
  border: 1px solid color-mix(in srgb, var(--c-perigo) 40%, transparent);
  background: color-mix(in srgb, var(--c-perigo) 8%, var(--c-superficie));
  font-size: var(--t-sm);
}

/* Aviso de erro dentro da conversa do visitante */
.fala--erro .fala__texto { background: color-mix(in srgb, var(--c-perigo) 10%, var(--c-superficie)); color: var(--c-texto); border: 1px solid color-mix(in srgb, var(--c-perigo) 40%, transparent); }
.fala--erro button { margin-top: var(--e-2); }
.visitante__form [disabled] { opacity: .5; cursor: not-allowed; }

/* Proposta gerada pela IA: um "documento" dentro da conversa, com o selo lima (é coisa da IA) */
.fala--proposta { max-width: 100%; justify-self: stretch; }
.fala--proposta .fala__quem { color: var(--c-ia-texto); font-weight: 600; text-align: left; }
.fala--proposta .fala__texto,
.transcricao--viva .fala--proposta .fala__texto {
  white-space: pre-line;            /* respeita as quebras de linha do texto da IA */
  background: var(--c-superficie);
  color: var(--c-texto);
  border: 1px solid color-mix(in srgb, var(--c-ia) 70%, var(--c-borda));
  box-shadow: inset 3px 0 0 var(--c-ia);
  border-radius: var(--raio);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* O chat público dentro do layout com a barra lateral */
.principal > .visitante--pagina { justify-self: start; width: min(100%, 40rem); height: min(40rem, calc(100vh - var(--altura-ponte) - 11rem)); }
.cabecalho p a { color: inherit; font-weight: 600; }
@media (max-width: 40rem) { .principal > .visitante--pagina { height: calc(100vh - var(--altura-ponte) - 12rem); border: 1px solid var(--c-linha); border-radius: var(--raio-g); } }

/* NOTIFICAÇÕES: "precisa de ação humana" ------------------------------------
   Âmbar (cor de atenção), nunca lima: lima é só para o que a IA fez. */
:root { --c-alerta: #8F5200; }
:root[data-theme="dark"] { --c-alerta: #F0B44C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-alerta: #F0B44C; } }

.sino { position: relative; }
.sino__botao { position: relative; }
.sino__contador {
  position: absolute; top: -4px; right: -4px;
  min-width: 1.15rem; height: 1.15rem; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--c-perigo); color: #fff;
  font: 600 .6875rem/1 var(--f-num);
}
.sino__painel {
  position: absolute; z-index: 80; right: 0; top: calc(100% + var(--e-2));
  width: min(92vw, 24rem); max-height: 26rem; overflow-y: auto;
  background: var(--c-superficie); border: 1px solid var(--c-linha);
  border-radius: var(--raio-g); box-shadow: var(--sombra-2);
}
.sino__topo {
  position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); background: var(--c-superficie); border-bottom: 1px solid var(--c-linha);
}
.sino__topo h2 { font-size: var(--t-md); font-weight: 700; }
.sino__lista { list-style: none; padding: 0; }
.sino__vazio { padding: var(--e-5) var(--e-4); color: var(--c-texto-2); font-size: var(--t-sm); }
.notificacao {
  display: grid; gap: var(--e-1); padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--c-linha); box-shadow: inset 3px 0 0 var(--c-alerta);
}
.notificacao--lida { box-shadow: none; opacity: .65; }
.notificacao__texto { all: unset; cursor: pointer; font-size: var(--t-sm); line-height: 1.45; }
.notificacao__texto:hover { text-decoration: underline; }
.notificacao__texto:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.notificacao__meta { font: var(--t-xs)/1.4 var(--f-num); color: var(--c-texto-2); }
.notificacao__lida {
  justify-self: start; background: none; border: 0; padding: 0; min-height: 1.75rem;
  font-size: var(--t-xs); font-weight: 600; color: var(--c-texto-2); text-decoration: underline;
}

.selo--alerta { color: var(--c-alerta); border-color: color-mix(in srgb, var(--c-alerta) 45%, transparent); background: color-mix(in srgb, var(--c-alerta) 10%, var(--c-superficie)); }
.selo--alerta::before { content: "!"; font-weight: 700; }
.cartao--alerta { box-shadow: inset 3px 0 0 var(--c-alerta), var(--sombra-1); }

/* Resumo da proposta no painel do lead */
.proposta-resumo {
  display: grid; gap: var(--e-2); padding: var(--e-3);
  border: 1px solid color-mix(in srgb, var(--c-ia) 70%, var(--c-borda)); border-radius: var(--raio);
}
.proposta-resumo .selo { justify-self: start; }

/* DASHBOARD ------------------------------------------------------------------ */
.kpis--painel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 56rem) { .kpis--painel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 90rem) { .kpis--painel { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi--alerta { box-shadow: inset 3px 0 0 var(--c-alerta); }
.cabecalho__acoes a.filtro { text-decoration: none; display: inline-flex; align-items: center; }

.graficos { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grafico {
  display: grid; gap: var(--e-3); align-content: start;
  padding: var(--e-5); background: var(--c-superficie);
  border: 1px solid var(--c-linha); border-radius: var(--raio-g);
}
.grafico--largo { grid-column: 1 / -1; }
.grafico h2 { font-size: var(--t-md); font-weight: 700; }
.grafico__nota { font-size: var(--t-sm); color: var(--c-texto-2); margin-top: calc(-1 * var(--e-2)); }
.grafico__vazio {
  padding: var(--e-5); text-align: center; font-size: var(--t-sm); color: var(--c-texto-2);
  border: 1px dashed var(--c-borda); border-radius: var(--raio);
}

/* Barras horizontais */
.barras { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
.barras__item { display: grid; grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; font-size: var(--t-sm); }
.barras__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras__trilho { height: .75rem; background: var(--c-superficie-2); border-radius: 999px; overflow: hidden; }
.barras__barra { display: block; height: 100%; border-radius: 999px; transition: width var(--medio) var(--curva); }
.barras__valor { font: 500 var(--t-xs)/1 var(--f-num); color: var(--c-texto-2); white-space: nowrap; }
@media (max-width: 30rem) { .barras__item { grid-template-columns: minmax(0, 1fr) auto; } .barras__trilho { grid-column: 1 / -1; grid-row: 2; } }

/* Funil centralizado */
.funil { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.funil__etapa { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 7.5rem; gap: var(--e-3); align-items: center; justify-items: center; font-size: var(--t-sm); }
.funil__nome { justify-self: start; font-weight: 600; }
.funil__barra {
  min-height: 2.25rem; display: grid; place-items: center; border-radius: var(--raio-p);
  color: #fff; font: 600 var(--t-sm)/1 var(--f-num);
}
:root[data-theme="dark"] .funil__barra { color: #0A0F1A; }
.funil__taxa { justify-self: end; font: var(--t-xs)/1.3 var(--f-num); color: var(--c-texto-2); text-align: right; }
@media (max-width: 40rem) { .funil__etapa { grid-template-columns: 6rem minmax(0, 1fr); } .funil__taxa { grid-column: 2; justify-self: start; } }

/* Rosca ganhos x perdidos */
.rosca-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5); }
.rosca { width: 9rem; height: 9rem; }
.rosca__texto { font: 700 16px var(--f-num); fill: var(--c-texto); }
.legenda { list-style: none; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.legenda li { display: flex; align-items: center; gap: var(--e-2); }
.legenda li::before { content: ""; width: .75rem; height: .75rem; border-radius: 3px; background: var(--cor); }

/* VALIDAÇÃO DA PROPOSTA (popup do "gerente") -------------------------------------- */
.validacao {
  width: min(100% - 2rem, 36rem); max-height: calc(100vh - 4rem); padding: 0;
  border: 1px solid var(--c-borda); border-radius: var(--raio-g);
  background: var(--c-superficie); color: var(--c-texto); box-shadow: var(--sombra-2);
}
.validacao::backdrop { background: rgba(11, 18, 32, .45); }
.validacao__topo { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-5) var(--e-5) var(--e-3); border-bottom: 1px solid var(--c-linha); }
.validacao__topo h2 { font-size: var(--t-lg); font-weight: 700; }
.validacao__corpo { display: grid; gap: var(--e-4); padding: var(--e-5); overflow-y: auto; font-size: var(--t-sm); }
.validacao__total { font: 600 var(--t-kpi)/1.1 var(--f-num); }
.validacao__escopo { padding-left: 1.2em; display: grid; gap: var(--e-1); }
.validacao__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: var(--e-4) var(--e-5) var(--e-5); border-top: 1px solid var(--c-linha); }
.validacao__acoes .botao--perigo { margin-left: auto; }
.validacao__nota { font-size: var(--t-xs); color: var(--c-texto-2); }
.status-proposta { justify-self: start; }

/* Anotações da IA no painel do lead */
.anotacoes { display: grid; gap: var(--e-4); }
.anotacoes h3 { font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--e-2); }
.anotacoes ul { padding-left: 1.1em; display: grid; gap: var(--e-1); font-size: var(--t-sm); }
.anotacoes .vazio { color: var(--c-texto-2); font-style: italic; font-size: var(--t-sm); }
.validacao { margin: auto; }  /* o reset "* { margin: 0 }" tiraria o centro do <dialog> */