/* ============================================================================
   oVendedor · linguagem visual do Drivi (que veio do BetaID), com cor própria.

   Inter para interface, Poppins só nos títulos de tela e de seção, JetBrains
   Mono para número, hora e dinheiro (número em fonte proporcional não alinha).
   A cor do oVendedor é o VIOLETA: ação, seleção e "a vendedora está agindo".
   Verde é venda/saudável, azul é a IA lendo, âmbar é "precisa de você",
   vermelho é falha. Cada cor com um trabalho só.
   ========================================================================== */

:root {
  /* papel e superfície: a tela é uma cor, o que está dentro dela é outra */
  --papel: #f1f0f6;
  --papel-claro: #f6f5fa;
  --papel-sutil: #fbfafd;
  --superficie: #ffffff;

  --tinta: #1d1a2e;
  --tinta-forte: #130f29;
  --tinta-media: #4f4b68;
  --tinta-fraca: #6f6b86;

  --borda: #e4e1ee;
  --divisoria: #efedf5;
  --borda-forte: #cbc6db;

  /* ação: o violeta do oVendedor */
  --acao: #6a4cf5;
  --acao-escura: #5232d8;
  --acao-fundo: #eeeafe;
  --acao-botao: #6a4cf5;
  --acao-brilho: rgba(106, 76, 245, 0.35);

  /* o ouro do ponto da marca e da venda fechada */
  --ouro: #f2b233;
  /* "conversando": cor própria, para não se confundir com "abordado" (violeta) */
  --conversa: #d9488f;

  --ok: #12a37f;
  --ok-forte: #08705a;
  --ok-fundo: #e2f6ef;
  --ok-borda: #b9e3d5;
  --ia: #2b8fd6;
  --ia-texto: #17699e;
  --ia-fundo: #e7f3fc;
  --ia-borda: #b5daf3;
  --alerta: #d08f12;
  --alerta-texto: #85560a;
  --alerta-fundo: #fef4e2;
  --alerta-borda: #f1d6a6;
  --erro: #e5484d;
  --erro-texto: #a6262b;
  --erro-fundo: #fdeced;
  --erro-borda: #f0bcbe;

  /* séries dos gráficos: ordem fixa, a cor acompanha a coisa medida */
  --serie-1: #6a4cf5; /* saíram */
  --serie-2: #0ea5a0; /* chegaram */
  --serie-3: #e8613f; /* custo */

  /* bolhas da conversa */
  --bolha-lead: #ffffff;
  --bolha-ia: #eeeafe;
  --bolha-voce: #fdf1d9;

  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Poppins', 'Inter', system-ui, sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  /* único token de elevação: só para o que abre POR CIMA */
  --sombra-flutuante: 0 8px 20px -6px rgba(19, 15, 41, 0.18);
  --sombra-cartao: 0 1px 2px rgba(19, 15, 41, 0.07);

  --chega: cubic-bezier(0.16, 1, 0.3, 1);
  --desenha: cubic-bezier(0.65, 0, 0.35, 1);

  --lateral: 248px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --papel: #0b0a14; --papel-claro: #110f1d; --papel-sutil: #161427; --superficie: #151325;
    --tinta: #e7e5f2; --tinta-forte: #f5f4fb; --tinta-media: #aaa6c2; --tinta-fraca: #8d89a6;
    --borda: #26223d; --divisoria: #1d1a31; --borda-forte: #3a355a;
    --acao: #9b86ff; --acao-escura: #b8a8ff; --acao-fundo: #221c45; --acao-botao: #6a4cf5; --acao-brilho: rgba(155, 134, 255, 0.35);
    --ok: #34c79c; --ok-forte: #6fdcbb; --ok-fundo: #12302a; --ok-borda: #1f5446;
    --ia: #4aa8ea; --ia-texto: #8ccaf3; --ia-fundo: #122a3d; --ia-borda: #1e4d6b;
    --alerta: #e0a63d; --alerta-texto: #ebc27f; --alerta-fundo: #33281a; --alerta-borda: #4d3b1d;
    --erro: #f06b6f; --erro-texto: #f4a3a5; --erro-fundo: #341b1d; --erro-borda: #55282b;
    --serie-1: #8d75ff; --serie-2: #2cc2bc; --serie-3: #f07b5c; --conversa: #ec6aa8;
    --bolha-lead: #1b1830; --bolha-ia: #221c45; --bolha-voce: #33281a;
    --sombra-flutuante: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
    --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --papel: #0b0a14; --papel-claro: #110f1d; --papel-sutil: #161427; --superficie: #151325;
  --tinta: #e7e5f2; --tinta-forte: #f5f4fb; --tinta-media: #aaa6c2; --tinta-fraca: #8d89a6;
  --borda: #26223d; --divisoria: #1d1a31; --borda-forte: #3a355a;
  --acao: #9b86ff; --acao-escura: #b8a8ff; --acao-fundo: #221c45; --acao-botao: #6a4cf5; --acao-brilho: rgba(155, 134, 255, 0.35);
  --ok: #34c79c; --ok-forte: #6fdcbb; --ok-fundo: #12302a; --ok-borda: #1f5446;
  --ia: #4aa8ea; --ia-texto: #8ccaf3; --ia-fundo: #122a3d; --ia-borda: #1e4d6b;
  --alerta: #e0a63d; --alerta-texto: #ebc27f; --alerta-fundo: #33281a; --alerta-borda: #4d3b1d;
  --erro: #f06b6f; --erro-texto: #f4a3a5; --erro-fundo: #341b1d; --erro-borda: #55282b;
  --serie-1: #8d75ff; --serie-2: #2cc2bc; --serie-3: #f07b5c; --conversa: #ec6aa8;
  --bolha-lead: #1b1830; --bolha-ia: #221c45; --bolha-voce: #33281a;
  --sombra-flutuante: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--papel-claro); color: var(--tinta);
  font: 400 13px/1.6 var(--fonte); -webkit-font-smoothing: antialiased; text-wrap: pretty;
  display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr);
  transition: grid-template-columns 0.2s var(--chega);
}
body.encolhida { --lateral: 72px; }
h1, h2, h3, b, strong { font-weight: 500; }
a { color: var(--acao-escura); text-underline-offset: 3px; }
code { font: 12px var(--fonte-mono); background: var(--papel); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 5px; }
::selection { background: var(--acao-fundo); color: var(--acao-escura); }
input, textarea { caret-color: var(--acao); }
:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; border-radius: 4px; }
::placeholder { color: var(--tinta-fraca); font-style: italic; opacity: 0.8; }
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 99px; border: 3px solid var(--papel-claro); }
.num { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }
.svg-ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pular-para { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--acao-botao); color: #fff; padding: 8px 12px; border-radius: var(--r-md); transform: translateY(-150%); transition: transform 0.18s var(--chega); }
.pular-para:focus { transform: none; }

/* ── lateral escura: tokens re-escopados, a lateral é escura SEMPRE ───── */
.lateral {
  --superficie: #1b1433; --papel-claro: rgba(255, 255, 255, 0.07); --papel-sutil: rgba(255, 255, 255, 0.045);
  --tinta: #fff; --tinta-media: rgba(255, 255, 255, 0.82); --tinta-fraca: rgba(255, 255, 255, 0.66);
  --borda: rgba(255, 255, 255, 0.11); --borda-forte: rgba(255, 255, 255, 0.24);
  --acao-fundo: rgba(255, 255, 255, 0.12);
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px 14px; background: #1b1433; color: var(--tinta-media); overflow: hidden; z-index: 30;
}
:root[data-theme='dark'] .lateral { background: #120d24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lateral { background: #120d24; } }
.lateral * { scrollbar-width: none; }
.lateral > .marca { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 14px; }
.lateral > .marca a { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.lateral > .marca .logo { font: 600 18px/1 var(--fonte-titulo); letter-spacing: -0.02em; white-space: nowrap; display: inline-flex; align-items: baseline; }
.lateral > .marca .logo i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); margin-left: 2px; }
.lateral > .marca img { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.encolher { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-md); background: none; border: 0; color: var(--tinta-fraca); padding: 0; }
.encolher:hover { background: var(--papel-claro); color: #fff; }
.encolher .svg-ic { transition: transform 0.2s var(--chega); }
body.encolhida .encolher .svg-ic { transform: rotate(180deg); }
.rotulo-secao { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-fraca); padding: 14px 12px 6px; white-space: nowrap; }
#menu { display: grid; gap: 2px; }
.item-nav { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--r-md); color: var(--tinta-media); text-decoration: none; font-size: 14px; white-space: nowrap; transition: background-color 0.15s ease-out, color 0.15s ease-out; }
.item-nav:hover { background: var(--papel-claro); color: #fff; }
.item-nav.ativo { background: var(--acao-fundo); color: #fff; font-weight: 500; }
.item-nav.ativo::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #a996ff; }
.item-nav.ativo .svg-ic { animation: desenha 420ms var(--desenha) both; }
.item-nav .texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.contador:not(:empty) { font: 500 11px/1 var(--fonte-mono); min-width: 20px; padding: 3px 6px; border-radius: 99px; text-align: center; background: var(--alerta); color: #1b1433; }
.contador.pop { animation: pop 0.45s var(--chega); }
body.encolhida .item-nav .texto, body.encolhida .lateral > .marca .logo, body.encolhida .rotulo-secao, body.encolhida .vivo-lateral .linhas { display: none; }
body.encolhida .item-nav { justify-content: center; padding: 9px 0; }
body.encolhida .contador:not(:empty) { position: absolute; top: 2px; right: 6px; min-width: 16px; padding: 2px 4px; font-size: 10px; }
body.encolhida .lateral > .marca { flex-direction: column; gap: 10px; padding-bottom: 10px; }

.vivo-lateral { margin-top: auto; border-top: 1px solid var(--borda); padding: 12px 6px 0; display: grid; gap: 8px; font-size: 12px; }
.vivo-lateral .quem { display: flex; align-items: center; gap: 10px; color: #fff; }
.avatar { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--fonte-titulo); color: #fff; background: linear-gradient(140deg, #8b72ff, #5232d8); }
.avatar .estado { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #1b1433; background: #7a7690; }
.avatar .estado.on { background: #34d39e; }
.avatar .estado.on.agindo::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #34d39e; animation: onda 2s ease-out infinite; }
.vivo-lateral .linhas { display: grid; gap: 4px; color: var(--tinta-fraca); }
.vivo-lateral .linhas div { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vivo-lateral .linhas b { color: #ffd38a; font-weight: 500; white-space: normal; }
.ponto { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--erro); }
.ponto.ok { background: #34d39e; }
.ponto.alerta { background: var(--ouro); }

/* ── topo no celular ──────────────────────────────────────────────────── */
.topo { display: none; }
.veu { display: none; }

/* ── área de trabalho ─────────────────────────────────────────────────── */
main { min-width: 0; padding: 28px 32px 48px; width: 100%; }
/* linha de manchete: os números do dia numa frase, não em cartões de número */
.manchete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.manchete h2 { margin: 0; }
.manchete p, .manchete-linha { margin: 0; font-size: 13.5px; color: var(--tinta-media); }
.manchete b, .manchete-linha b { font: 500 15px var(--fonte-mono); color: var(--tinta-forte); }
.manchete-linha { margin: -4px 0 14px; }
.sep { color: var(--borda-forte); margin: 0 4px; }
.entra-tela { animation: entra-tela 280ms var(--chega) both; }
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabeca h1 { font: 600 22px/1.15 var(--fonte-titulo); letter-spacing: -0.01em; color: var(--tinta-forte); margin: 0 0 4px; }
.cabeca .sub { margin: 0; color: var(--tinta-media); max-width: 72ch; font-size: 13px; }
.cabeca .acoes { margin-left: auto; }
h2, .t-secao { font: 500 15px/1.3 var(--fonte-titulo); color: var(--tinta-forte); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
h2 .qtd, h2 .num-leve { font: 400 12px var(--fonte-mono); color: var(--tinta-fraca); }
.sub-cartao { margin: -6px 0 12px; font-size: 13px; color: var(--tinta-media); max-width: 70ch; }
.meta { font-size: 12px; color: var(--tinta-fraca); }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra-cartao); padding: 20px 22px; margin-bottom: 16px; }
.cartao.compacto { padding: 12px 14px; }
.cartao > h2:first-child { margin-top: -2px; }
.separa { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divisoria); }
.dois { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dois > .cartao { margin-bottom: 0; }
.dois + * { margin-top: 16px; }
.tres-um { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; margin-bottom: 16px; }
.tres-um > .cartao { margin-bottom: 0; }

/* ── botões · altura 36, raio 8, texto 13/500 ────────────────────────── */
button { font: 500 13px/1.2 var(--fonte); display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta-media); cursor: pointer; transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, transform 0.09s ease-out; }
button:hover:not(:disabled) { border-color: var(--borda-forte); background: var(--papel-sutil); color: var(--tinta); }
button:active:not(:disabled) { transform: translateY(1px); }
button.principal { background: var(--acao-botao); border-color: transparent; color: #fff; }
button.principal:hover:not(:disabled) { background: var(--acao-escura); color: #fff; border-color: transparent; }
:root[data-theme='dark'] button.principal:hover:not(:disabled) { background: #5232d8; }
button.perigo { border-color: var(--erro-borda); color: var(--erro-texto); }
button.perigo:hover:not(:disabled) { border-color: var(--erro); color: var(--erro-texto); background: var(--erro-fundo); }
button.texto { border-color: transparent; background: none; padding: 6px 8px; min-height: 0; }
button.texto:hover:not(:disabled) { background: var(--papel); }
button.mini { min-height: 26px; padding: 3px 9px; font-size: 12px; }
button:disabled { opacity: 0.55; cursor: progress; }
button.ocupado::after { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira 0.8s linear infinite; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes.fim { justify-content: flex-end; }
.acoes.entre { justify-content: space-between; }

/* ── campos ───────────────────────────────────────────────────────────── */
label { display: grid; gap: 5px; font-size: 13px; color: var(--tinta-media); margin-bottom: 14px; }
label.marcar { display: flex; align-items: center; gap: 9px; color: var(--tinta); cursor: pointer; }
label.marcar input { width: 16px; height: 16px; accent-color: var(--acao); margin: 0; }
.dica { font-size: 12px; color: var(--tinta-fraca); margin: -8px 0 14px; }
input, select, textarea { font: 400 13px/1.5 var(--fonte); color: var(--tinta); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-md); padding: 8px 11px; width: 100%; transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; }
input:hover, select:hover, textarea:hover { border-color: var(--borda-forte); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-fundo); }
textarea { resize: vertical; min-height: 92px; }
textarea.ficha { min-height: 460px; font: 12.5px/1.6 var(--fonte-mono); }
input[type='file'] { padding: 6px 7px; color: var(--tinta-media); cursor: pointer; }
input[type='file']::file-selector-button { font: 500 12px var(--fonte); border: 1px solid var(--borda); background: var(--papel-sutil); color: var(--tinta); border-radius: var(--r-sm); padding: 5px 10px; margin-right: 10px; cursor: pointer; }
.linha-form { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.busca { position: relative; }
.busca .svg-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-fraca); pointer-events: none; }
.busca input { padding-left: 34px; }

/* ── selos: fundo cheio só quando há ação pendente ───────────────────── */
.selo { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 2px 9px; border-radius: 99px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap; background: var(--papel-claro); color: var(--tinta-media); }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.selo.ok { background: var(--ok-fundo); color: var(--ok-forte); }
.selo.alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }
.selo.erro { background: var(--erro-fundo); color: var(--erro-texto); }
.selo.ia { background: var(--ia-fundo); color: var(--ia-texto); }
.selo.marca { background: var(--acao-fundo); color: var(--acao-escura); }
.selo.sem-ponto::before { display: none; }
.selo.vivo::before { animation: pulso 1.6s ease-in-out infinite; }

/* ── tabela ───────────────────────────────────────────────────────────── */
.tabela { border: 1px solid var(--borda); border-radius: var(--r-md); overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--tinta-fraca); font-weight: 500; font-size: 12px; padding: 9px 14px; background: var(--papel-sutil); border-bottom: 1px solid var(--borda); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--divisoria); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 0.15s ease-out; }
tbody tr:hover { background: var(--papel-sutil); }
td.num, th.num { text-align: right; }
td .meta { display: block; }
.linha-nome { color: var(--tinta-forte); text-decoration: none; font-weight: 500; }
.linha-nome:hover { color: var(--acao-escura); text-decoration: underline; }

/* ── estados vazios e avisos ──────────────────────────────────────────── */
.vazio { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 34px 24px; color: var(--tinta-media); border: 1px dashed var(--borda-forte); border-radius: var(--r-lg); background: var(--papel-sutil); }
.vazio .svg-ic { width: 26px; height: 26px; color: var(--tinta-fraca); stroke-width: 1.3; }
.vazio b { color: var(--tinta-forte); font-size: 14px; }
.vazio.leve { border: 0; background: none; padding: 22px; }
.faixa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--alerta-borda); background: var(--alerta-fundo); color: var(--alerta-texto); margin-bottom: 12px; font-size: 13px; }
.faixa .svg-ic { flex: none; }
.faixa .texto { flex: 1; min-width: 220px; }
.faixa b { color: inherit; }
.faixa.erro { border-color: var(--erro-borda); background: var(--erro-fundo); color: var(--erro-texto); }
.faixa.ia { border-color: var(--ia-borda); background: var(--ia-fundo); color: var(--ia-texto); }

/* ── "precisa de você": a primeira coisa do Início ─────────────────────── */
.pendencias { display: grid; gap: 8px; margin-bottom: 16px; }
.pendencia { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; background: var(--superficie); border: 1px solid var(--alerta-borda); border-radius: var(--r-lg); text-decoration: none; color: var(--tinta); transition: border-color 0.15s ease-out, transform 0.15s var(--chega); }
.pendencia:hover { border-color: var(--alerta); transform: translateX(2px); }
.pendencia .icone { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--alerta-fundo); color: var(--alerta-texto); flex: none; }
.pendencia .n { font: 500 20px/1 var(--fonte-mono); color: var(--alerta-texto); min-width: 26px; }
.pendencia .texto { flex: 1; }
.pendencia .texto small { display: block; color: var(--tinta-fraca); font-size: 12px; }
.pendencia > .svg-ic { color: var(--tinta-fraca); }

/* ── ESTEIRA AO VIVO · a assinatura do painel ────────────────────────────
   Cada contato é um ponto na etapa em que está. Quando o status muda, o
   ponto SALTA para a próxima etapa; quando uma mensagem entra ou sai, um
   cometa corre entre o ponto e o WhatsApp. Nada se mexe sem motivo: todo
   movimento aqui é um fato que acabou de acontecer. */
.esteira { position: relative; overflow: hidden; padding: 18px 22px 16px; }
.esteira-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.esteira-topo h2 { margin: 0; }
.agora { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-media); min-width: 0; }
.agora b { color: var(--tinta-forte); }
.agora .relogio { font-family: var(--fonte-mono); color: var(--acao-escura); }
.wa-no { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 6px; border-radius: 99px; border: 1px solid var(--borda); font-size: 12px; color: var(--tinta-media); background: var(--papel-sutil); }
.wa-no .bolinha { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fundo); color: var(--ok-forte); }
.wa-no .bolinha .svg-ic { width: 12px; height: 12px; stroke-width: 2; }
.wa-no.off .bolinha { background: var(--erro-fundo); color: var(--erro-texto); }
.wa-no.chegou { animation: chegou 0.6s var(--chega); }
.etapas { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.etapa { position: relative; padding: 0 10px 12px; min-height: 92px; display: flex; flex-direction: column; border-left: 1px dashed var(--borda); }
.etapa:first-child { border-left: 0; padding-left: 0; }
.etapa-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.etapa-cab span { font-size: 12px; color: var(--tinta-media); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapa-cab .n { font: 500 18px/1 var(--fonte-mono); color: var(--tinta-forte); }
.etapa.ganho .etapa-cab .n { color: var(--ok-forte); }
.etapa.vazia .etapa-cab .n { color: var(--tinta-fraca); }
.pontos-etapa { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.pontos-etapa.com-nomes { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 5px; }
/* a cor do ponto diz a etapa; o anel que pulsa diz o que está acontecendo com ele agora */
.lead-ponto { --cor: var(--borda-forte); position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--cor); display: block; flex: none; transition: transform 0.15s var(--chega), background-color 0.3s, border-color 0.15s; }
.lead-ponto:hover { transform: scale(1.35); z-index: 2; }
.lead-ponto.s-novo { --cor: color-mix(in srgb, var(--tinta-fraca) 50%, transparent); }
.lead-ponto.s-aprovar { --cor: var(--alerta); }
.lead-ponto.s-fila { --cor: color-mix(in srgb, var(--acao) 50%, var(--superficie)); }
.lead-ponto.s-abordado { --cor: var(--acao); }
.lead-ponto.s-conversa { --cor: var(--conversa); }
.lead-ponto.s-conta { --cor: var(--ok); }
/* ganho se distingue pela FORMA (losango), não só pela cor; "precisa de você" pelo anel âmbar */
.lead-ponto.s-ganho, .lead-ponto.com-nome.s-ganho .cor { --cor: var(--ouro); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.lead-ponto.s-ganho:not(.com-nome) { width: 16px; height: 16px; }
.lead-ponto.com-nome.s-ganho { clip-path: none; }
.lead-ponto.com-nome.s-ganho .cor { width: 11px; height: 11px; }
.lead-ponto.precisa:not(.com-nome), .lead-ponto.com-nome.precisa .cor { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--alerta); }
.lead-ponto.precisa::after, .lead-ponto.digitando::after, .lead-ponto.lendo::after,
.lead-ponto.com-nome.precisa .cor::after, .lead-ponto.com-nome.digitando .cor::after, .lead-ponto.com-nome.lendo .cor::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--alerta); animation: onda 1.8s ease-out infinite; }
.lead-ponto.digitando::after, .lead-ponto.com-nome.digitando .cor::after { border-color: var(--acao); animation-duration: 1.1s; }
.lead-ponto.lendo::after, .lead-ponto.com-nome.lendo .cor::after { border-color: var(--ia); animation-duration: 1.4s; }
.lead-ponto.com-nome { width: auto; height: auto; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 6px; border-radius: 99px; background: var(--papel-sutil); border: 1px solid var(--borda); color: var(--tinta); text-decoration: none; font-size: 12px; line-height: 1.3; }
.lead-ponto.com-nome::after { display: none; }
.lead-ponto.com-nome:hover { transform: translateX(2px); border-color: var(--borda-forte); }
.lead-ponto.com-nome .cor { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--cor); flex: none; }
/* o número inteiro é a identidade do lead: quebra a linha em vez de cortar */
.lead-ponto.com-nome span { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.lead-ponto.com-nome.digitando { border-color: color-mix(in srgb, var(--acao) 45%, var(--borda)); }
.lead-ponto.com-nome.precisa { border-color: var(--alerta-borda); background: var(--alerta-fundo); }
/* retorno agendado: conversa em pausa combinada, borda tracejada azul (a IA volta no dia) */
.lead-ponto.agendado:not(.com-nome), .lead-ponto.com-nome.agendado .cor { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3.5px var(--ia); }
.lead-ponto.com-nome.agendado { border-style: dashed; border-color: var(--ia-borda); }
.saidas { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--tinta-fraca); }
.saidas .lead-ponto { width: 9px; height: 9px; opacity: 0.55; }
/* o trilho: corre enquanto a esteira está ligada; parado quando não */
.trilho { position: relative; height: 2px; margin: 0 0 14px; border-radius: 99px; background: var(--divisoria); overflow: hidden; }
.trilho::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--acao) 50%, transparent 100%); background-size: 38% 100%; background-repeat: no-repeat; opacity: 0; transition: opacity 0.4s; }
/* corre só enquanto há mensagem passando (classe posta pelos cometas) */
.esteira.correndo .trilho::after { opacity: 0.8; animation: trilho 1.4s var(--desenha) 2; }
.legenda .lead-ponto { width: 10px; height: 10px; }
.legenda .lead-ponto.s-ganho { width: 11px; height: 11px; }
.legenda .lead-ponto:hover { transform: none; }
.legenda .lead-ponto::after { display: none; }
.cometa { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; z-index: 5; background: var(--acao); box-shadow: 0 0 0 4px var(--acao-brilho), 0 0 18px 4px var(--acao-brilho); }
.cometa.in { background: var(--serie-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--serie-2) 30%, transparent), 0 0 18px 4px color-mix(in srgb, var(--serie-2) 30%, transparent); }
.rastro { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; z-index: 4; background: var(--acao); opacity: 0.4; }
.rastro.in { background: var(--serie-2); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--tinta-fraca); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.balao { position: fixed; z-index: 90; pointer-events: none; padding: 6px 10px; border-radius: var(--r-md); background: var(--tinta-forte); color: var(--superficie); font-size: 12px; box-shadow: var(--sombra-flutuante); transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; animation: entra-flutuante 0.16s var(--chega); }
:root[data-theme='dark'] .balao { background: #f5f4fb; color: #130f29; }
.confete { position: fixed; z-index: 95; pointer-events: none; width: 7px; height: 9px; border-radius: 1px; animation: confete 1.1s var(--chega) forwards; }

/* ── hoje: medidor + colunas ──────────────────────────────────────────── */
.hoje { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.hoje .valor { font: 500 26px/1.1 var(--fonte-mono); color: var(--tinta-forte); letter-spacing: -0.02em; }
.hoje .valor small { font-size: 13px; color: var(--tinta-fraca); letter-spacing: 0; }
.hoje .rot { font-size: 12px; color: var(--tinta-media); margin-top: 2px; }
.medidor { height: 6px; border-radius: 99px; background: var(--divisoria); margin-top: 10px; overflow: hidden; }
.medidor i { display: block; height: 100%; border-radius: 99px; background: var(--acao); animation: revela-barra 0.7s var(--chega) both; }
.medidor.cheio i { background: var(--alerta); }
.grafico { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 8px; }
.grafico.largo { grid-template-columns: 62px minmax(0, 1fr); }
.grafico .eixo { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font: 400 10.5px var(--fonte-mono); color: var(--tinta-fraca); height: 132px; padding-bottom: 0; }
.colunas { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; height: 132px; align-items: end; border-bottom: 1px solid var(--borda); background: linear-gradient(var(--divisoria) 1px, transparent 1px) 0 0 / 100% 50%; }
.dia { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; position: relative; }
.barra { width: min(16px, 42%); border-radius: 4px 4px 1px 1px; background: var(--serie-1); min-height: 2px; animation: revela-coluna 0.6s var(--chega) both; animation-delay: calc(var(--i, 0) * 45ms); }
.barra.s2 { background: var(--serie-2); }
.barra.s3 { background: var(--serie-3); width: min(22px, 60%); }
.barra.zero { opacity: 0.35; }
.dia:hover .barra { filter: brightness(1.08); }
.dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; grid-column: 2; margin-top: 6px; font-size: 11px; color: var(--tinta-fraca); text-align: center; }
.dias .hoje-dia { color: var(--tinta-forte); font-weight: 500; }

/* ── eventos ao vivo ──────────────────────────────────────────────────── */
.eventos { display: grid; }
.evento { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--divisoria); font-size: 12.5px; }
.evento:first-child { border-top: 0; }
.evento .quando { font: 400 11px/1.9 var(--fonte-mono); color: var(--tinta-fraca); }
.evento .o-que { color: var(--tinta); }
.evento .o-que small { display: block; color: var(--tinta-fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entra-linha { animation: entra-linha 0.36s var(--chega) both; animation-delay: calc(min(var(--i, 0), 8) * 40ms); }
.realce { animation: realce 1.6s ease-out; }
/* atualização silenciosa (chegou novidade): a lista não se remonta na frente de quem lê */
.quieto .entra-linha, .quieto .barra, .quieto .medidor i { animation: none; }

/* ── aprovações ───────────────────────────────────────────────────────── */
.aprovacao { transition: opacity 0.25s ease-out, transform 0.3s var(--chega), max-height 0.35s var(--chega), margin 0.35s var(--chega), padding 0.35s var(--chega); max-height: 900px; }
.aprovacao.saindo { opacity: 0; transform: translateX(24px); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0; overflow: hidden; }
.aprovacao .quem { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.aprovacao .quem .meta { display: block; }
.ini { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 500 13px/1 var(--fonte-titulo); color: var(--acao-escura); background: var(--acao-fundo); }
.previa-msg { position: relative; background: var(--bolha-ia); border-radius: 12px 12px 4px 12px; padding: 2px; }
.previa-msg textarea { background: transparent; border-color: transparent; min-height: 86px; }
.previa-msg textarea:focus { background: var(--superficie); }

/* ── conversas ───────────────────────────────────────────────────────── */
.conversas { display: grid; grid-template-columns: clamp(220px, 22vw, 340px) minmax(0, 1fr); gap: 14px; height: calc(100dvh - 132px); min-height: 480px; }
.lista-conv { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); overflow: auto; }
.item-conv { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 11px; padding: 12px 14px; border-bottom: 1px solid var(--divisoria); cursor: pointer; transition: background-color 0.15s ease-out; text-align: left; width: 100%; background: none; border-width: 0 0 1px; border-radius: 0; font-weight: 400; color: var(--tinta); min-height: 0; }
.item-conv:hover { background: var(--papel-sutil); }
.item-conv.ativo { background: var(--acao-fundo); }
.item-conv .ini { grid-row: span 2; }
.ini.foto { overflow: hidden; background: var(--acao-fundo); }
.ini.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-conv .nome { font-weight: 500; color: var(--tinta-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.item-conv .nome .svg-ic { width: 14px; height: 14px; color: var(--alerta); }
.item-conv .hora { font: 400 11px var(--fonte-mono); color: var(--tinta-fraca); justify-self: end; }
.item-conv .ultima { grid-column: 2 / 4; font-size: 12px; color: var(--tinta-fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-conv .ultima.vivo { color: var(--acao-escura); font-style: italic; }
.item-conv .ultima.lendo { color: var(--ia-texto); font-style: italic; }
.item-conv .selos { grid-column: 2 / 4; display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.thread { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.thread header { padding: 10px 14px; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: nowrap; }
.thread header .quem { flex: 1; min-width: 0; }
.thread header .quem b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread header .acoes { flex-wrap: nowrap; flex: none; }
.thread header .quem { display: flex; align-items: center; gap: 11px; min-width: 0; }
.thread header .quem b { font-size: 14px; color: var(--tinta-forte); }
.thread header select { width: auto; max-width: 150px; }
.thread .faixa { margin: 12px 16px 0; }
.thread .faixa label { width: 100%; margin: 8px 0; color: inherit; }
.perfil-lead { margin: 8px 14px 0; font-size: 12px; color: var(--tinta-media); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.perfil-lead b { color: var(--acao-escura); font-weight: 600; }
.perfil-lead span { color: var(--tinta-fraca); }
.nota-ia { margin: 8px 14px 0; font-size: 12px; color: var(--tinta-fraca); display: flex; gap: 6px; cursor: pointer; }
/* anotação longa: 2 linhas; clique abre inteira (não rouba a altura da conversa) */
.nota-ia span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nota-ia.aberta span { -webkit-line-clamp: unset; }
.msgs { padding: 18px 18px 8px; overflow: auto; display: flex; flex-direction: column; gap: 6px; flex: 1; background: var(--papel-sutil); }
.msg { max-width: 72%; padding: 8px 12px 6px; border-radius: 12px 12px 12px 4px; background: var(--bolha-lead); border: 1px solid var(--borda); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5; }
.msg .txt a { color: var(--acao-escura); text-decoration: underline; text-underline-offset: 2px; }
.msg .txt code { font-family: var(--fonte-mono); font-size: 12.5px; background: color-mix(in oklab, var(--tinta) 7%, transparent); padding: 1px 4px; border-radius: 4px; }
.msg .txt code.bloco { display: block; padding: 6px 8px; margin: 2px 0; }
.msg .midia-rotulo { font-size: 12px; color: var(--tinta-media); font-style: italic; }
.msg .midia { display: block; margin: -2px -6px 6px; max-width: calc(100% + 12px); border-radius: 8px; }
.msg a.midia img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; object-fit: contain; background: color-mix(in oklab, var(--tinta) 5%, transparent); }
.msg audio.midia { width: 260px; max-width: 100%; margin: 0 0 6px; }
.msg video.midia { max-height: 320px; background: #000; }
.msg a.midia.doc { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: 12.5px; }
.msg a.midia.doc svg { width: 16px; height: 16px; }
.msg.out { align-self: flex-end; background: var(--bolha-ia); border-color: transparent; border-radius: 12px 12px 4px 12px; }
.msg.out.humano { background: var(--bolha-voce); }
.msg.sistema { align-self: center; background: none; border: 1px dashed var(--borda-forte); font-size: 12px; color: var(--tinta-media); }
.msg small { display: flex; justify-content: flex-end; gap: 6px; color: var(--tinta-fraca); font-size: 10.5px; margin-top: 3px; font-family: var(--fonte-mono); }
.msg small .autor { font-family: var(--fonte); margin-right: auto; }
.msg.out small .autor { color: var(--acao-escura); }
.msg.out.humano small .autor { color: var(--alerta-texto); }
.msg.nova { animation: msg-entra 0.42s var(--chega) both; }
.msg.out.nova { transform-origin: bottom right; }
.dia-sep { align-self: center; font-size: 11px; color: var(--tinta-fraca); background: var(--superficie); border: 1px solid var(--borda); border-radius: 99px; padding: 1px 10px; margin: 8px 0 4px; }
.digitando-bolha { align-self: flex-end; display: inline-flex; gap: 4px; padding: 11px 14px; border-radius: 12px 12px 4px 12px; background: var(--bolha-ia); }
.digitando-bolha.lendo { background: var(--ia-fundo); }
.digitando-bolha i { width: 6px; height: 6px; border-radius: 50%; background: var(--acao); animation: digita 1.2s ease-in-out infinite; }
.digitando-bolha.lendo i { background: var(--ia); }
.digitando-bolha i:nth-child(2) { animation-delay: 0.15s; }
.digitando-bolha i:nth-child(3) { animation-delay: 0.3s; }
.digitando-bolha span { font-size: 11px; color: var(--tinta-fraca); margin-left: 6px; }
.thread footer { padding: 12px 16px; border-top: 1px solid var(--borda); display: flex; gap: 8px; align-items: flex-end; }
.thread footer textarea { min-height: 44px; max-height: 180px; }
.thread footer.simular { border-top: 0; padding-top: 0; }
.thread footer.simular input { background: var(--papel-sutil); border-style: dashed; }
.voltar-lista { display: none; }

/* ── bastidores: você e a vendedora, ao lado da conversa com o lead ─────── */
.thread { container-type: inline-size; }
.thread-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.thread-corpo.com-bastidores { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.lado-lead { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.bastidores { display: none; flex-direction: column; min-height: 0; border-left: 1px solid var(--borda); background: var(--superficie); }
.com-bastidores .bastidores { display: flex; animation: entra-flutuante 0.22s var(--chega); }
.bastidores > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--divisoria); }
.bastidores > header b { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-forte); font-weight: 500; }
.bastidores > header .svg-ic { width: 15px; height: 15px; color: var(--acao); }
.falas { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--acao-fundo) 35%, var(--superficie)); }
.fala { max-width: 92%; padding: 8px 11px 9px; border-radius: 12px 12px 12px 4px; background: var(--superficie); border: 1px solid var(--borda); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.fala .txt { white-space: pre-wrap; }
.fala small { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--tinta-fraca); margin-bottom: 2px; white-space: normal; }
.fala small span:first-child { display: inline-flex; align-items: center; gap: 5px; color: var(--acao-escura); font-weight: 500; }
.fala small .svg-ic { width: 13px; height: 13px; }
.fala.dono { align-self: flex-end; background: var(--bolha-voce); border-color: transparent; border-radius: 12px 12px 4px 12px; }
.fala.dono small span:first-child { color: var(--alerta-texto); }
.fala.pedido { border-color: var(--alerta-borda); background: var(--alerta-fundo); }
.fala.pedido small span:first-child { color: var(--alerta-texto); }
.fala .ref { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--borda-forte); font-size: 12px; color: var(--tinta-media); }
.fala.nova { animation: msg-entra 0.42s var(--chega) both; }
.escolhas { display: grid; gap: 6px; margin-top: 8px; white-space: normal; }
.escolhas button { justify-content: flex-start; text-align: left; gap: 9px; padding: 7px 10px; min-height: 0; font-weight: 400; color: var(--tinta); line-height: 1.4; }
.escolhas button b { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--acao-fundo); color: var(--acao-escura); font-size: 11px; }
.escolhas button:hover:not(:disabled) { border-color: var(--acao); }
.bastidores > footer { padding: 10px 12px; border-top: 1px solid var(--divisoria); display: flex; gap: 8px; align-items: flex-end; }
.bastidores > footer textarea { min-height: 44px; max-height: 160px; }
.digitando-bolha.esquerda { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borda); }
#abrir-bastidores[aria-pressed='true'] { background: var(--acao-fundo); border-color: transparent; color: var(--acao-escura); }
#abrir-bastidores.alerta { border-color: var(--alerta-borda); background: var(--alerta-fundo); color: var(--alerta-texto); }
/* conversa estreita (ao lado do WhatsApp, celular): bastidores ocupam a conversa inteira enquanto abertos */
/* conversa estreita: os botões do topo viram só ícone, e as colunas continuam lado a lado */
@container (max-width: 760px) {
  .thread header .acoes .rotulo-btn { display: none; }
  .thread-corpo.com-bastidores { grid-template-columns: minmax(0, 1fr) minmax(240px, 46%); }
}
/* só quando não cabe mesmo (celular): bastidores ocupam a conversa enquanto abertos */
@container (max-width: 520px) {
  .thread-corpo.com-bastidores { grid-template-columns: minmax(0, 1fr); }
  .thread-corpo.com-bastidores .lado-lead { display: none; }
  .bastidores { border-left: 0; }
}

/* ── memória ─────────────────────────────────────────────────────────── */
.mem-item { border-top: 1px solid var(--divisoria); }
.mem-item:first-of-type { border-top: 0; }
details.mem-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 2px; }
details.mem-item > summary::-webkit-details-marker { display: none; }
details.mem-item > summary .svg-ic { width: 14px; height: 14px; color: var(--tinta-fraca); transition: transform 0.2s var(--chega); }
details.mem-item[open] > summary .svg-ic { transform: rotate(90deg); }
details.mem-item > summary b { flex: 1; color: var(--tinta-forte); }
details.mem-item > summary:hover b { color: var(--acao-escura); }
details.mem-item > .corpo { padding: 2px 0 14px 24px; animation: entra-linha 0.3s var(--chega) both; }
.mem-pendente { border: 1px solid var(--borda); border-radius: var(--r-md); padding: 12px 14px; margin-top: 10px; background: var(--papel-sutil); }
.mem-pendente .acoes.entre { margin-bottom: 8px; }
.mem-pendente input[data-c='titulo'], .mem-item input[data-c='titulo'] { font-weight: 500; }

/* ── aviso temporário ─────────────────────────────────────────────────── */
#aviso { position: fixed; bottom: 22px; right: 22px; z-index: 99; display: flex; align-items: center; gap: 10px; max-width: 440px; padding: 11px 16px; border-radius: var(--r-md); background: var(--tinta-forte); color: var(--superficie); box-shadow: var(--sombra-flutuante); font-size: 13px; opacity: 0; transform: translateY(8px) scale(0.985); transition: opacity 0.2s ease-out, transform 0.22s var(--chega); pointer-events: none; }
:root[data-theme='dark'] #aviso { background: #f5f4fb; color: #130f29; }
#aviso.mostrar { opacity: 1; transform: none; }
.novidade { position: fixed; top: 16px; left: 50%; z-index: 60; transform: translateX(-50%); }
.novidade button { box-shadow: var(--sombra-flutuante); border-radius: 99px; background: var(--acao-botao); color: #fff; border-color: transparent; animation: entra-flutuante 0.22s var(--chega); }

/* ── esqueleto ────────────────────────────────────────────────────────── */
.esq { border-radius: var(--r-md); background: linear-gradient(90deg, var(--papel) 0%, var(--papel-sutil) 50%, var(--papel) 100%); background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite; }

/* ── movimento ────────────────────────────────────────────────────────── */
@keyframes entra-tela { from { opacity: 0.45; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes entra-linha { from { opacity: 0.35; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes entra-flutuante { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; } }
@keyframes desenha { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes revela-barra { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes revela-coluna { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes onda { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes trilho { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes chegou { 0% { box-shadow: 0 0 0 0 var(--acao-brilho); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes realce { 0%, 100% { background-color: transparent; } 25% { background-color: var(--acao-fundo); } }
@keyframes msg-entra { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes digita { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes brilho { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes confete { 0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } 65% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--giro)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .cometa, .rastro, .confete { display: none; }
}

/* ── tela pequena: lateral vira gaveta ───────────────────────────────── */
@media (max-width: 1280px) {
  main { padding: 22px 20px 40px; }
  .etapa { padding: 0 7px 10px; }
}
@media (max-width: 860px) {
  body, body.encolhida { grid-template-columns: minmax(0, 1fr); --lateral: 280px; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(85vw, 300px); transform: translateX(-100%); transition: transform 0.26s var(--chega); }
  body.gaveta .lateral { transform: none; box-shadow: var(--sombra-flutuante); }
  body.gaveta .veu { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(19, 15, 41, 0.45); }
  body.encolhida .item-nav .texto, body.encolhida .lateral > .marca .logo, body.encolhida .rotulo-secao, body.encolhida .vivo-lateral .linhas { display: revert; }
  body.encolhida .item-nav { justify-content: flex-start; padding: 8px 12px; }
  .encolher { display: none; }
  .topo { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; height: 54px; padding: 0 12px; background: var(--superficie); border-bottom: 1px solid var(--borda); }
  .topo button { min-height: 36px; width: 36px; padding: 0; border-color: transparent; }
  .topo .titulo { font: 600 15px var(--fonte-titulo); color: var(--tinta-forte); flex: 1; }
  .topo .ponto { width: 9px; height: 9px; }
  main { padding: 20px 16px 56px; }
  .dois, .hoje { grid-template-columns: minmax(0, 1fr); }
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapa { border-left: 0; padding-left: 0; min-height: 0; }
  .conversas { grid-template-columns: minmax(0, 1fr); height: auto; }
  .conversas .lista-conv { max-height: none; }
  .conversas.com-thread .lista-conv { display: none; }
  .conversas:not(.com-thread) .thread { display: none; }
  .thread { height: calc(100dvh - 110px); }
  .voltar-lista { display: inline-flex; }
  .msg { max-width: 88%; }
  .cartao { padding: 16px; }
  .wa-no { margin-left: 0; }
  .cabeca { flex-wrap: nowrap; align-items: flex-start; }
  .cabeca .acoes { flex: none; }
}
@media (max-width: 640px) {
  /* tabela larga vira um bloco por linha, cada valor com o nome da coluna */
  .tabela.empilha thead { display: none; }
  .tabela.empilha table, .tabela.empilha tbody, .tabela.empilha tr, .tabela.empilha td { display: block; width: 100%; }
  .tabela.empilha tr { padding: 12px 16px; border-bottom: 1px solid var(--divisoria); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .tabela.empilha td { padding: 0; border: 0; text-align: left; }
  .tabela.empilha td:first-child, .tabela.empilha td.acao-linha { grid-column: 1 / -1; }
  .tabela.empilha td[data-rotulo]::before { content: attr(data-rotulo); display: block; font: 400 11px var(--fonte); color: var(--tinta-fraca); }
}

/* números: uma extensão por WhatsApp */
.numero-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.numero-topo h2 { margin: 0 0 2px; }
.numero-topo .sub { margin: 0; overflow-wrap: anywhere; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.novo-numero { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.novo-numero label { flex: 1 1 220px; margin: 0; }
.passos { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.numero-topo .erro-numero { color: var(--erro-texto); margin-bottom: 2px; }