/* Painel no estilo Apple: cores e materiais do sistema, fonte do sistema, títulos grandes,
   cápsulas, resposta no toque e movimento que respeita as preferências de acessibilidade. */

/* ---------- Tokens (cores do sistema da Apple, claro e escuro) ---------- */
:root {
  color-scheme: light;
  --fundo: #f2f2f7;                       /* systemGroupedBackground */
  --superficie: #ffffff;                  /* secondarySystemGroupedBackground */
  --superficie-2: #f7f7fa;
  --preenchimento: rgba(118, 118, 128, .12); /* tertiarySystemFill: fundo de campo e de selo */
  --preenchimento-2: rgba(118, 118, 128, .08);
  --linha: rgba(60, 60, 67, .14);         /* separator, mais leve */
  --linha-forte: rgba(60, 60, 67, .29);
  --texto: #1d1d1f;
  --texto-2: rgba(60, 60, 67, .85);
  --suave: rgba(60, 60, 67, .6);          /* secondaryLabel */
  --marca: #248a3d;                       /* systemGreen acessível (texto branco legível) */
  --marca-forte: #1e7a35;
  --marca-viva: #34c759;                  /* systemGreen, para pontos e ícones */
  --marca-fundo: rgba(52, 199, 89, .14);
  --marca-texto: #ffffff;
  --azul: #007aff;
  --perigo: #ff3b30;
  --perigo-texto: #d70015;
  --perigo-fundo: rgba(255, 59, 48, .12);
  --aviso: #c93400;
  --aviso-fundo: rgba(255, 149, 0, .14);
  --info: #0066cc;
  --info-fundo: rgba(0, 122, 255, .12);
  --neutro-fundo: rgba(118, 118, 128, .12);
  --material: rgba(250, 250, 252, .72);   /* barra lateral, topo e abas translúcidas */
  --material-forte: rgba(255, 255, 255, .82);
  --borda-material: rgba(255, 255, 255, .6);
  --sombra: 0 1px 1px rgba(0, 0, 0, .03), 0 2px 8px rgba(0, 0, 0, .04);
  --sombra-alta: 0 24px 60px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .06);
  --raio: 18px;
  --raio-pequeno: 11px;
  /* Gráficos: par validado para daltonismo (claro) */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --grade: rgba(60, 60, 67, .1);
  /* Mola criticamente amortecida (sem ricochete), aproximada em CSS */
  --mola: cubic-bezier(.22, 1, .36, 1);
  --segmento-ativo: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo: #000000; --superficie: #1c1c1e; --superficie-2: #232326; --preenchimento: rgba(118, 118, 128, .24);
    --preenchimento-2: rgba(118, 118, 128, .16); --linha: rgba(84, 84, 88, .45); --linha-forte: rgba(84, 84, 88, .75);
    --texto: #f5f5f7; --texto-2: rgba(235, 235, 245, .82); --suave: rgba(235, 235, 245, .6);
    --marca: #30d158; --marca-forte: #4cd964; --marca-viva: #30d158; --marca-fundo: rgba(48, 209, 88, .16); --marca-texto: #000000;
    --azul: #0a84ff; --perigo: #ff453a; --perigo-texto: #ff6961; --perigo-fundo: rgba(255, 69, 58, .16);
    --aviso: #ffb340; --aviso-fundo: rgba(255, 159, 10, .16); --info: #409cff; --info-fundo: rgba(10, 132, 255, .18);
    --neutro-fundo: rgba(118, 118, 128, .24); --material: rgba(28, 28, 30, .7); --material-forte: rgba(36, 36, 38, .82);
    --borda-material: rgba(255, 255, 255, .08); --sombra: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-alta: 0 24px 60px rgba(0, 0, 0, .6); --serie-1: #3987e5; --serie-2: #d95926; --grade: rgba(235, 235, 245, .1); --segmento-ativo: #636366;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #000000; --superficie: #1c1c1e; --superficie-2: #232326; --preenchimento: rgba(118, 118, 128, .24);
  --preenchimento-2: rgba(118, 118, 128, .16); --linha: rgba(84, 84, 88, .45); --linha-forte: rgba(84, 84, 88, .75);
  --texto: #f5f5f7; --texto-2: rgba(235, 235, 245, .82); --suave: rgba(235, 235, 245, .6);
  --marca: #30d158; --marca-forte: #4cd964; --marca-viva: #30d158; --marca-fundo: rgba(48, 209, 88, .16); --marca-texto: #000000;
  --azul: #0a84ff; --perigo: #ff453a; --perigo-texto: #ff6961; --perigo-fundo: rgba(255, 69, 58, .16);
  --aviso: #ffb340; --aviso-fundo: rgba(255, 159, 10, .16); --info: #409cff; --info-fundo: rgba(10, 132, 255, .18);
  --neutro-fundo: rgba(118, 118, 128, .24); --material: rgba(28, 28, 30, .7); --material-forte: rgba(36, 36, 38, .82);
  --borda-material: rgba(255, 255, 255, .08); --sombra: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-alta: 0 24px 60px rgba(0, 0, 0, .6); --serie-1: #3987e5; --serie-2: #d95926; --grade: rgba(235, 235, 245, .1); --segmento-ativo: #636366;
}

/* ---------- Base e tipografia (espaçamento entre letras conforme o tamanho) ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-size: 15px; line-height: 1.47; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; color: var(--texto); }
h1 { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.017em; }
h3 { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; letter-spacing: 0; }
code { background: var(--preenchimento); padding: 1px 6px; border-radius: 6px; }
pre { background: var(--preenchimento-2); border-radius: var(--raio-pequeno); padding: 11px 13px; white-space: pre-wrap; word-break: break-all; margin: 8px 0 0; }
.suave { color: var(--suave); font-size: 13px; letter-spacing: -.003em; }
.erro { color: var(--perigo-texto); }
.ok { color: var(--marca); }
.falta { color: var(--perigo-texto); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rotulo-pequeno { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }

/* ---------- Botões: cápsulas com resposta no toque ---------- */
button, .botao {
  font: inherit; font-weight: 500; font-size: 14px; letter-spacing: -.01em; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 980px; padding: 8px 16px; cursor: pointer; border: 0; text-decoration: none !important; min-height: 34px;
  background: var(--marca); color: var(--marca-texto);
  transition: transform 120ms ease-out, background-color .2s, color .2s, box-shadow .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button:hover, .botao:hover { background: var(--marca-forte); }
button:active, .botao:active { transform: scale(.97); transition-duration: 60ms; }
button:focus-visible, .botao:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 55%, transparent); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; transform: none; }
button.secundario, button.leve, .botao.leve { background: var(--preenchimento); color: var(--texto); }
button.secundario:hover, button.leve:hover, .botao.leve:hover { background: color-mix(in srgb, var(--preenchimento) 100%, var(--linha-forte) 40%); }
button.fantasma { background: transparent; color: var(--azul); }
button.fantasma:hover { background: var(--preenchimento-2); }
button.perigo { background: transparent; color: var(--perigo-texto); }
button.perigo:hover { background: var(--perigo-fundo); }
button.dialogo-perigo { background: var(--perigo); color: #fff; }
button.dialogo-perigo:hover { background: color-mix(in srgb, var(--perigo) 88%, #000); }
button.mini, button.pequeno { padding: 5px 12px; font-size: 13px; min-height: 28px; }
button.largo { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; }

/* ---------- Campos no estilo iOS: preenchidos, sem borda ---------- */
input, select, textarea {
  font: inherit; letter-spacing: -.01em; color: var(--texto); background: var(--preenchimento); border: 1px solid transparent; border-radius: var(--raio-pequeno);
  padding: 8px 12px; min-height: 36px; transition: background-color .2s, box-shadow .2s, border-color .2s;
}
select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; background-color: var(--superficie); border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 22%, transparent); }
input::placeholder, textarea::placeholder { color: var(--suave); }
input[type="checkbox"], input[type="radio"] { min-height: auto; accent-color: var(--marca-viva); width: 18px; height: 18px; }
label { display: inline-flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
label > input, label > select, label > textarea { font-weight: 400; font-size: 15px; }
.marcar { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--texto); font-size: 15px; font-weight: 400; }
.marcar input { margin-top: 2px; }
.campo-icone { position: relative; display: flex; align-items: center; }
.campo-icone .ic { position: absolute; left: 11px; color: var(--suave); width: 16px; height: 16px; pointer-events: none; }
.campo-icone input { padding-left: 34px; width: 100%; }

/* ---------- Entrada ---------- */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(900px 520px at 15% 0%, color-mix(in srgb, var(--marca-viva) 22%, transparent), transparent 60%),
              radial-gradient(800px 500px at 100% 100%, color-mix(in srgb, var(--azul) 16%, transparent), transparent 60%), var(--fundo); }
.entrada-cartao { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; background: var(--material-forte); border: 1px solid var(--borda-material);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-radius: 26px; padding: 34px 30px; box-shadow: var(--sombra-alta);
  animation: materializar .5s var(--mola) both; }
.entrada-cartao h1 { font-size: 28px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.marca img { border-radius: 9px; box-shadow: var(--sombra); }
.marca.grande { font-size: 19px; margin-bottom: 6px; }

/* ---------- Estrutura: barra lateral em material translúcido ---------- */
.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 20px; padding: 22px 14px; z-index: 5; isolation: isolate; border-right: 1px solid var(--linha); }
/* O material fica numa camada à parte: desfoque no próprio elemento prenderia a barra de abas
   (position: fixed) dentro dele no celular. */
.lateral::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); }
.lateral .marca { padding: 0 10px; }
.seletor-empresa { display: flex; flex-direction: column; gap: 7px; padding: 12px; background: var(--preenchimento-2); border-radius: 14px; }
.seletor-empresa select { width: 100%; font-weight: 600; background-color: var(--superficie); }
.seletor-empresa button { justify-content: flex-start; padding-left: 8px; }
.navegacao { display: flex; flex-direction: column; gap: 2px; }
.navegacao button { justify-content: flex-start; gap: 11px; background: transparent; color: var(--texto); font-weight: 500; font-size: 14.5px; padding: 8px 12px; border-radius: 10px; min-height: 36px; }
.navegacao button .ic { color: var(--azul); }
.navegacao button:hover { background: var(--preenchimento-2); }
.navegacao button.ativa { background: var(--preenchimento); font-weight: 600; }
.navegacao button.ativa .ic { color: var(--marca-viva); }
.lateral-rodape { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 0; border-top: 1px solid var(--linha); }
.principal { min-width: 0; padding: 0 40px 56px; display: flex; flex-direction: column; gap: 20px; }
/* Título grande que fica preso no topo com desfoque, no lugar de uma linha dura */
.cabecalho { position: sticky; top: 0; z-index: 4; margin: 0 -40px; padding: 34px 40px 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  background: linear-gradient(to bottom, var(--fundo) 55%, color-mix(in srgb, var(--fundo) 0%, transparent)); }
@supports (backdrop-filter: blur(1px)) {
  .cabecalho { background: color-mix(in srgb, var(--fundo) 72%, transparent); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); }
}
.cabecalho .suave { margin-top: 4px; font-size: 15px; }
.conteudo { display: flex; flex-direction: column; gap: 18px; animation: surgir .35s var(--mola) both; }

/* ---------- Filtros ---------- */
.periodo { display: flex; gap: 10px; }
.busca { flex: 1 1 220px; }

/* ---------- Cartões e listas agrupadas ---------- */
.cartao { background: var(--superficie); border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra); }
.cartao > h2:first-child, section.cartao > h2 { margin-bottom: 4px; }
.cartao > .suave { margin-bottom: 14px; font-size: 14px; }
.formulario { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 10px; }
.formulario textarea { min-width: 280px; min-height: 80px; resize: vertical; }
.acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cartao > .acoes { margin-top: 16px; }
.config { display: flex; flex-direction: column; gap: 18px; }
.alerta { display: block; background: var(--aviso-fundo); color: var(--texto); padding: 11px 15px; border-radius: var(--raio-pequeno); margin: 8px 0; font-size: 14px; }
.vazio { text-align: center; padding: 56px 20px; color: var(--suave); }
.vazio .ic { width: 44px; height: 44px; color: var(--linha-forte); margin-bottom: 12px; stroke-width: 1.3; }
.vazio h3 { margin-bottom: 4px; }

/* ---------- Indicadores ---------- */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.indicador { background: var(--superficie); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.indicador-topo { display: flex; align-items: center; justify-content: space-between; color: var(--suave); font-size: 13px; font-weight: 500; }
.indicador-icone { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--preenchimento); color: var(--azul); }
.indicador-icone .ic { width: 16px; height: 16px; }
.indicador .valor { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.1; overflow-wrap: anywhere; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.indicador .detalhe { font-size: 13px; color: var(--suave); }
.indicador.destaque { background: linear-gradient(150deg, color-mix(in srgb, var(--marca-viva) 20%, var(--superficie)), var(--superficie) 72%); }
.indicador.destaque .indicador-icone { background: var(--marca-viva); color: #fff; }

/* ---------- Tabelas ---------- */
.tabela { overflow-x: auto; background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 13px 16px; vertical-align: top; }
td { border-top: 1px solid var(--linha); }
th { color: var(--suave); font-weight: 600; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
tbody tr { transition: background-color .15s; }
tbody tr:hover { background: var(--preenchimento-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pessoa { display: flex; gap: 12px; align-items: flex-start; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; letter-spacing: 0;
  color: #fff; background: linear-gradient(180deg, #a1a1a6, #8e8e93); }
.pessoa b { display: block; font-weight: 600; }
.pessoa .suave { display: block; }
.quando { font-size: 12px; color: var(--suave); margin: 2px 0 4px; }
td.col-pessoa { min-width: 200px; }
td.col-campanha { min-width: 210px; }
td.col-acoes { width: 1%; }
td.col-acoes .acoes { flex-direction: column; align-items: stretch; width: 124px; }
td.col-acoes .acoes button[data-apagar-lead] { align-self: flex-end; padding: 4px 6px; color: var(--suave); }
.campanha { font-weight: 500; }
.mensagem { color: var(--suave); font-size: 13px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#mais { display: flex; justify-content: center; }

/* ---------- Selos ---------- */
.etiqueta, .selo, .etapa { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 980px; white-space: nowrap; color: var(--texto-2); background: var(--preenchimento); letter-spacing: 0; }
.etapa { font-weight: 600; }
.etapa::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etapa.novo { color: var(--texto-2); }
.etapa.qualificado { background: var(--info-fundo); color: var(--info); }
.etapa.venda { background: var(--marca-fundo); color: var(--marca); }
.etapa.perdido { background: var(--perigo-fundo); color: var(--perigo-texto); }
.selo { font-weight: 600; }
.selo.ok, .etiqueta.enviado { background: var(--marca-fundo); color: var(--marca); }
.selo.erro, .etiqueta.erro { background: var(--perigo-fundo); color: var(--perigo-texto); }
.selo.aviso, .etiqueta.provavel { background: var(--aviso-fundo); color: var(--aviso); }
.etiqueta.ignorado { color: var(--suave); }
.etiqueta.auto { background: var(--info-fundo); color: var(--info); }
.eventos { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 7px; }
.valor-venda { display: block; font-weight: 700; font-size: 16px; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }

/* ---------- Tempo de resposta e variação ---------- */
.resposta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 980px; margin: 2px 0 4px; }
.resposta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.resposta.ok { background: var(--marca-fundo); color: var(--marca); }
.resposta.atencao { background: var(--aviso-fundo); color: var(--aviso); }
.resposta.ruim { background: var(--perigo-fundo); color: var(--perigo-texto); }
.variacao { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.variacao span { font-weight: 400; color: var(--suave); }
.variacao.bom { color: var(--marca); }
.variacao.ruim { color: var(--perigo-texto); }
.variacao.neutro { color: var(--texto-2); }
.titulo-secao { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.atendimento .resumo { margin-top: 2px; }
.atendimento .indicador { box-shadow: none; background: var(--preenchimento-2); }

/* ---------- Controle segmentado, quadro e etapas ---------- */
.segmentado { display: inline-flex; gap: 2px; padding: 2px; background: var(--preenchimento); border-radius: 10px; }
.segmentado button { background: transparent; color: var(--texto); border-radius: 8px; padding: 5px 14px; min-height: 28px; font-size: 13px; }
.segmentado button:hover { background: transparent; }
.segmentado button.ativa { background: var(--segmento-ativo); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); font-weight: 600; }
.barra-visao { display: flex; justify-content: flex-end; }
.mini-seletor { min-height: 28px; padding: 3px 28px 3px 10px; font-size: 13px; border-radius: 980px; }
.quadro { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; align-items: flex-start; }
.coluna { flex: 0 0 272px; scroll-snap-align: start; background: var(--preenchimento-2); border-radius: var(--raio); padding: 12px; transition: background-color .15s, box-shadow .15s; }
.coluna.alvo { background: color-mix(in srgb, var(--azul) 10%, var(--preenchimento-2)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--azul) 45%, transparent); }
.coluna header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px 10px; }
.coluna-cartoes { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.coluna-vazia { text-align: center; padding: 18px 8px; }
.card-lead { background: var(--superficie); border-radius: 14px; padding: 12px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; cursor: grab;
  transition: transform 120ms ease-out, box-shadow .2s, opacity .2s; }
.card-lead:active { cursor: grabbing; }
.card-lead.arrastando { opacity: .5; transform: scale(.98); }
.card-lead .avatar { width: 30px; height: 30px; font-size: 12px; }
.card-lead .mini-seletor { align-self: flex-start; margin-top: 2px; }
.lista-etapas { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.linha-etapa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--preenchimento-2); border-radius: 12px; }
.linha-etapa input { flex: 1 1 180px; }
.linha-etapa select { flex: 1 1 240px; }
.numero-etapa { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-viva); color: #fff; font-size: 12px; font-weight: 700; }

/* ---------- Gráficos ---------- */
.graficos { display: grid; grid-template-columns: minmax(280px, 2fr) 3fr; gap: 18px; }
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico text { fill: var(--texto-2); font-size: 12px; font-family: inherit; }
.grafico .rotulo-eixo { fill: var(--suave); font-size: 11px; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .base { stroke: var(--linha-forte); stroke-width: 1; }
.funil-etapa { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; align-items: center; margin: 10px 0; font-size: 14px; }
.funil-barra { height: 28px; background: var(--preenchimento-2); border-radius: 8px; overflow: hidden; }
.funil-barra span { display: block; height: 100%; background: var(--serie-1); border-radius: 0 6px 6px 0; min-width: 2px; transform-origin: left; animation: crescer .6s var(--mola) both; }
.funil-etapa b { font-variant-numeric: tabular-nums; }
.funil-taxa { font-size: 12px; color: var(--suave); margin: -6px 0 0 112px; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--texto-2); margin: 6px 0 6px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dica { position: absolute; pointer-events: none; background: var(--material-forte); border: 1px solid var(--borda-material); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--sombra-alta); border-radius: 12px; padding: 9px 12px; font-size: 13px; color: var(--texto); min-width: 180px; z-index: 5; }
.dica b { display: block; margin-bottom: 4px; }
.dica div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.dica i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* ---------- Conexões ---------- */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.passo { display: flex; flex-direction: column; gap: 3px; padding: 15px 17px; border-radius: var(--raio); background: var(--superficie); color: var(--texto); text-decoration: none !important; box-shadow: var(--sombra);
  transition: transform 120ms ease-out, box-shadow .2s; }
.passo:active { transform: scale(.98); }
.passo span { color: var(--suave); font-size: 13px; }
.passo.feito { background: linear-gradient(150deg, color-mix(in srgb, var(--marca-viva) 16%, var(--superficie)), var(--superficie) 75%); }
.passo.feito b { color: var(--marca); }
.numeros { display: flex; flex-direction: column; gap: 0; margin: 12px 0; background: var(--preenchimento-2); border-radius: 14px; overflow: hidden; }
.numeros > .suave { padding: 14px; }
.cartao-numero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 15px; }
.cartao-numero + .cartao-numero { border-top: 1px solid var(--linha); }
.novo { margin: 10px 0; }
.novo summary, .ajuda summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.novo summary::-webkit-details-marker, .ajuda summary::-webkit-details-marker { display: none; }
.novo summary { padding: 8px 0; color: var(--azul); }
.escolha { border: 0; background: var(--preenchimento-2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; max-width: 600px; margin: 0; }
.escolha legend { font-size: 13px; color: var(--suave); padding: 0; float: left; margin-bottom: 4px; }
.ajuda { margin-top: 14px; border-top: 1px solid var(--linha); padding-top: 12px; }
.ajuda summary { color: var(--azul); font-weight: 500; font-size: 14.5px; }
.ajuda summary::after { content: "›"; margin-left: 2px; font-size: 18px; line-height: 1; transition: transform .25s var(--mola); }
.ajuda[open] summary::after { transform: rotate(90deg); }
.ajuda ol, .ajuda ul { margin: 10px 0 4px; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; color: var(--texto-2); }
.conectar { background: var(--superficie-2); border-radius: var(--raio); padding: 20px; margin: 12px 0; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--marca-viva) 55%, transparent); animation: materializar .4s var(--mola) both; }
.conectar-topo { display: flex; justify-content: space-between; align-items: center; }
/* Controle segmentado */
.abas-conexao { display: inline-flex; gap: 2px; margin: 14px 0; padding: 2px; background: var(--preenchimento); border-radius: 10px; }
.abas-conexao button { background: transparent; color: var(--texto); border-radius: 8px; padding: 6px 14px; min-height: 30px; font-size: 13px; }
.abas-conexao button.ativa { background: var(--segmento-ativo); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); font-weight: 600; }
.conectar-corpo { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.conectar-corpo ol { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 410px; color: var(--texto-2); }
.qr { min-width: 260px; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.qr img { background: #fff; padding: 12px; border-radius: 16px; box-shadow: var(--sombra-alta); }
.codigo { font: 600 32px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 5px; padding: 14px 20px; border-radius: 14px; background: var(--superficie); box-shadow: var(--sombra); }
.verificacao { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; background: var(--preenchimento-2); border-radius: 14px; overflow: hidden; }
.verificacao li { padding: 11px 15px; }
.verificacao li + li { border-top: 1px solid var(--linha); }
a.botao { margin-left: 8px; }
section.cartao { scroll-margin-top: 110px; }
.codigo-anuncio { border-radius: 14px; padding: 13px 15px; margin-top: 10px; background: var(--preenchimento-2); }
.acoes-relatorio { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Conversa (balões como no Mensagens) ---------- */
.linha-conversa:hover { background: transparent !important; }
.conversa { display: flex; flex-direction: column; gap: 4px; max-height: 400px; overflow-y: auto; padding: 14px; background: var(--superficie-2); border-radius: 14px; }
.balao { max-width: 75%; padding: 8px 13px; border-radius: 18px; display: flex; flex-direction: column; gap: 2px; white-space: pre-wrap; animation: surgir .3s var(--mola) both; }
.balao small { font-size: 11px; opacity: .65; }
.balao.entrada { align-self: flex-start; background: var(--preenchimento); color: var(--texto); border-bottom-left-radius: 6px; }
.balao.saida { align-self: flex-end; background: var(--marca-viva); color: #fff; border-bottom-right-radius: 6px; }

/* ---------- Janela e aviso: materializam e saem pelo mesmo caminho ---------- */
.dialogo { border: 1px solid var(--borda-material); border-radius: 22px; padding: 0; width: min(420px, calc(100% - 32px)); color: var(--texto);
  background: var(--material-forte); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: var(--sombra-alta); }
.dialogo[open] { animation: materializar .32s var(--mola) both; }
.dialogo.saindo { animation: desmaterializar .2s ease-in both; }
.dialogo::backdrop { background: rgba(0, 0, 0, .32); }
.dialogo[open]::backdrop { animation: escurecer .3s ease-out both; }
.dialogo.saindo::backdrop { animation: clarear .2s ease-in both; }
.dialogo form { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.dialogo h2 { font-size: 20px; }
.dialogo label input { width: 100%; }
.dialogo-acoes { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; margin-top: 8px; }
#aviso { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); color: var(--texto); padding: 12px 18px; border-radius: 980px; margin: 0;
  max-width: min(520px, calc(100% - 32px)); font-size: 14px; font-weight: 500; z-index: 20; text-align: center;
  background: var(--material-forte); border: 1px solid var(--borda-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--sombra-alta); animation: aviso-entra .4s var(--mola) both; }
#aviso:empty { display: none; }

@keyframes materializar { from { opacity: 0; transform: scale(.94); filter: blur(6px); } }
@keyframes desmaterializar { to { opacity: 0; transform: scale(.96); filter: blur(4px); } }
@keyframes escurecer { from { background: rgba(0, 0, 0, 0); } }
@keyframes clarear { to { background: rgba(0, 0, 0, 0); } }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } }
@keyframes crescer { from { transform: scaleX(0); } }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } }

/* ---------- Barra lateral: grupos e conta (como no Mac) ---------- */
.navegacao-grupo { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--suave); padding: 14px 12px 4px; }
.navegacao-grupo:first-child { padding-top: 0; }
.lateral-rodape { flex-direction: column; align-items: stretch; gap: 4px; }
.lateral-rodape #sair { align-self: flex-start; color: var(--suave); }
button.conta { justify-content: flex-start; gap: 10px; background: transparent; color: var(--texto); padding: 8px; border-radius: 12px; text-align: left; min-height: 48px; }
button.conta:hover { background: var(--preenchimento-2); }
button.conta .ic { margin-left: auto; color: var(--marca-viva); }
.conta-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.conta-texto b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-texto small { font-size: 12px; color: var(--suave); font-weight: 400; }
.avatar.pequeno { width: 30px; height: 30px; font-size: 13px; }
.avatar.grande { width: 72px; height: 72px; font-size: 30px; }

/* ---------- Barra de ferramentas dos leads ---------- */
.barra-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barra-ferramentas .busca { flex: 1 1 240px; }
.barra-ferramentas .busca input { min-height: 36px; border-radius: 10px; }
.barra-ferramentas .segmentado button { min-height: 30px; padding: 5px 12px; gap: 5px; }
.barra-ferramentas .segmentado .ic { width: 14px; height: 14px; }
.barra-ferramentas .periodo { display: flex; align-items: center; gap: 6px; animation: surgir .25s var(--mola) both; }
.barra-ferramentas .periodo input { min-height: 32px; padding: 4px 10px; font-size: 14px; }
select.menu { min-height: 32px; padding: 4px 30px 4px 12px; font-size: 14px; font-weight: 500; border-radius: 980px; background-color: var(--preenchimento); }
.filtros-acoes { display: flex; gap: 6px; margin-left: auto; }
button.icone { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; background: var(--preenchimento); color: var(--azul); }
button.icone:hover { background: color-mix(in srgb, var(--preenchimento) 100%, var(--linha-forte) 40%); }

/* ---------- Ajustes: grupos com título fora, linhas dentro e explicação embaixo ---------- */
.ajustes { display: flex; flex-direction: column; gap: 26px; }
.ajustes, .conteudo > .grupo, .indice { width: 100%; max-width: 780px; }
.conteudo:has(.ajustes) { gap: 26px; }
.grupo { scroll-margin-top: 170px; }
.grupo-titulo { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--suave); text-transform: none; margin: 0 16px 7px; }
.lista { background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra); overflow: hidden; }
.linha { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 10px 16px; position: relative; width: 100%; }
/* Separador que começa depois do recuo, como nas listas do iOS */
.linha + .linha, .lista > * + .linha, .lista > .linha + *, #auditoria > .linha + .linha { box-shadow: inset 0 .5px 0 var(--linha); }
.linha-rotulo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.linha-rotulo > span { font-size: 15px; color: var(--texto); }
.linha-rotulo > span:has(.icone-ajuste) { display: inline-flex; align-items: center; gap: 10px; }
.linha-rotulo small { font-size: 13px; color: var(--suave); line-height: 1.35; }
.linha-controle { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.linha-controle input:not([type="checkbox"]) { text-align: right; background: transparent; min-height: 32px; }
.linha-controle input:not([type="checkbox"]):focus { text-align: left; background: var(--preenchimento); }
.linha-controle input[type="number"] { width: 110px; }
.linha-coluna { flex-direction: column; align-items: stretch; }
.linha-coluna textarea { width: 100%; min-height: 96px; resize: vertical; }
.linha-coluna .formulario { margin-top: 4px; }
.linha-coluna .formulario input { flex: 1 1 180px; }
button.linha-botao { background: transparent; color: var(--texto); border-radius: 0; font-weight: 400; text-align: left; }
button.linha-botao:hover { background: var(--preenchimento-2); }
button.linha-botao:active { transform: none; background: var(--preenchimento); }
.seta { color: var(--linha-forte); width: 16px; height: 16px; }
.grupo-rodape { font-size: 13px; color: var(--suave); line-height: 1.4; margin: 7px 16px 0; }
.icone-ajuste { width: 29px; height: 29px; border-radius: 7px; display: inline-grid; place-items: center; color: #fff; flex: none; }
.icone-ajuste .ic { width: 17px; height: 17px; stroke-width: 2; }
.lista-etapas { margin: 4px 0; }
.lista .linha-etapa { background: var(--preenchimento-2); }

/* Interruptor (o "switch" do iOS) no lugar da caixinha de marcar */
input.interruptor, .marcar input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 51px; height: 31px; min-height: 31px; margin: 0; padding: 0; flex: none; border: 0; border-radius: 980px; cursor: pointer;
  background: var(--preenchimento); position: relative; transition: background-color .25s var(--mola);
}
input.interruptor::after, .marcar input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .3s var(--mola), width .15s ease;
}
input.interruptor:checked, .marcar input[type="checkbox"]:checked { background: var(--marca-viva); }
input.interruptor:checked::after, .marcar input[type="checkbox"]:checked::after { transform: translateX(20px); }
/* Ao apertar, a bolinha alarga para o lado em que vai, como no iPhone */
input.interruptor:active::after, .marcar input[type="checkbox"]:active::after { width: 33px; }
input.interruptor:checked:active::after, .marcar input[type="checkbox"]:checked:active::after { transform: translateX(14px); }
input.interruptor:focus, .marcar input[type="checkbox"]:focus { border: 0; box-shadow: none; background-color: var(--preenchimento); }
input.interruptor:checked:focus, .marcar input[type="checkbox"]:checked:focus { background-color: var(--marca-viva); }
.marcar:has(input[type="checkbox"]) { flex-direction: row-reverse; justify-content: space-between; align-items: center; width: 100%; }
.marcar input[type="checkbox"] { margin-top: 0; }

/* Índice das seções, preso logo abaixo do título */
/* Encosta embaixo do título (que também fica preso) numa faixa de material, para o conteúdo passar por baixo sem misturar */
.indice { position: sticky; top: 104px; z-index: 3; display: flex; gap: 6px; overflow-x: auto; margin: -8px -40px 0; padding: 8px 40px 10px; scrollbar-width: none; max-width: none !important; width: auto !important;
  background: color-mix(in srgb, var(--fundo) 80%, transparent); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
.indice::-webkit-scrollbar { display: none; }
.indice a { flex: none; font-size: 13px; font-weight: 500; color: var(--texto); padding: 6px 13px; border-radius: 980px; background: var(--material-forte); border: .5px solid var(--borda-material);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); text-decoration: none !important; transition: background-color .2s, transform 120ms ease-out; }
.indice a:hover { background: var(--preenchimento); }
.indice a:active { transform: scale(.96); }

/* Salvar sempre à mão, numa barra de material no pé da tela */
.barra-salvar { position: sticky; bottom: 16px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px;
  border-radius: 980px; background: var(--material-forte); border: .5px solid var(--borda-material); box-shadow: var(--sombra-alta);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); }
.barra-salvar button { padding: 8px 22px; }

/* ---------- Folha de segurança (Senha e Segurança do iPhone) ---------- */
.dialogo.folha { padding: 0; width: min(480px, calc(100% - 32px)); background: color-mix(in srgb, var(--fundo) 88%, transparent); max-height: min(720px, calc(100vh - 48px)); overflow: hidden; }
.dialogo.folha[open] { display: flex; flex-direction: column; }
.folha-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 14px 10px; border-bottom: .5px solid var(--linha); }
.folha-topo h2 { font-size: 17px; font-weight: 600; text-align: center; }
.folha-topo button { justify-self: end; font-weight: 600; }
.folha-corpo { padding: 18px 18px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.folha-corpo .grupo { scroll-margin-top: 0; }
.perfil { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 4px 0 2px; }
.perfil b { font-size: 20px; letter-spacing: -.02em; margin-top: 6px; }
.campo-codigo { width: 112px; text-align: center !important; font: 600 17px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .2em; background: var(--preenchimento) !important; }
/* QR code no centro, como no iPhone: a imagem em cima, a instrução embaixo */
.linha-qr { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 20px 20px 16px; }
.qr-instrucao { font-size: 15px; color: var(--texto); max-width: 320px; line-height: 1.4; }
.qr-chave { font-size: 13px; color: var(--suave); }
.qr-chave summary { cursor: pointer; color: var(--azul); list-style: none; }
.qr-chave summary::-webkit-details-marker { display: none; }
.qr-chave code { display: block; margin-top: 8px; padding: 8px 10px; letter-spacing: .08em; word-break: break-all; user-select: all; }
#qr-2fa { margin: 0; flex: none; }
#qr-2fa img { display: block; width: 200px; height: 200px; border-radius: 16px; background: #fff; padding: 10px; box-shadow: var(--sombra); }

@media (max-width: 860px) {
  .navegacao-grupo { display: none; }
  .lateral-rodape { flex-direction: row; align-items: center; }
  button.conta { width: 34px; height: 34px; min-height: 34px; padding: 0; justify-content: center; border-radius: 50%; background: var(--preenchimento); }
  button.conta .conta-texto, button.conta .ic { display: none; }
  button.conta .avatar { width: 34px; height: 34px; }
  .barra-ferramentas .busca { flex-basis: 100%; }
  .barra-ferramentas .segmentado { flex: 1; }
  .barra-ferramentas .segmentado button { flex: 1; padding: 5px 6px; }
  .indice { top: 56px; margin: 0 -16px; padding: 8px 16px 10px; }
  .linha { flex-wrap: wrap; }
  .linha-controle { flex: 1 1 auto; }
  .barra-salvar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .barra-salvar .suave { display: none; }
  .barra-salvar button { width: 100%; }
  .dialogo.folha { max-height: 92vh; width: 100%; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .graficos { grid-template-columns: 1fr; }
}

/* ---------- Leads em lista de cartões até 1200 px ---------- */
@media (max-width: 1200px) {
  .tabela.leads thead { display: none; }
  .tabela.leads table, .tabela.leads tbody { display: block; }
  #corpo-leads tr:not(.linha-conversa) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 18px; padding: 16px 18px; }
  #corpo-leads tr:not(.linha-conversa) + tr { border-top: 1px solid var(--linha); }
  #corpo-leads td { border: 0; padding: 0; min-width: 0; }
  #corpo-leads td.col-acoes { grid-column: 1 / -1; width: auto; }
  #corpo-leads td.col-acoes .acoes { flex-direction: row; width: auto; }
  #corpo-leads .acoes button[data-apagar-lead] { margin-left: auto; align-self: center; }
  .linha-conversa { display: block; }
  .linha-conversa td { border: 0; }
}

/* ---------- Celular: topo e abas em material translúcido, como no iPhone ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .lateral .marca span { display: none; }
  .seletor-empresa { flex-direction: row; align-items: center; padding: 0; background: transparent; flex: 1; min-width: 0; }
  .seletor-empresa .rotulo-pequeno { display: none; }
  .seletor-empresa select { min-width: 0; flex: 1; }
  .seletor-empresa button, .lateral-rodape button { font-size: 0; gap: 0; padding: 7px; min-height: 34px; width: 34px; background: var(--preenchimento); color: var(--azul); }
  .seletor-empresa button .ic, .lateral-rodape button .ic { width: 18px; height: 18px; }
  .lateral-rodape { margin: 0; padding: 0; border: 0; }
  .lateral-rodape #quem { display: none; }
  .navegacao { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; flex-direction: row; justify-content: space-around; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-top: 1px solid var(--linha); }
  .navegacao button { flex: 1; flex-direction: column; gap: 2px; padding: 5px 2px; font-size: 10.5px; font-weight: 500; border-radius: 10px; color: var(--suave); background: transparent; letter-spacing: 0; }
  .navegacao button .ic { width: 24px; height: 24px; color: inherit; }
  .navegacao button.ativa, .navegacao button.ativa .ic { background: transparent; color: var(--marca-viva); }
  .principal { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
  .cabecalho { position: static; margin: 0 -16px; padding: 22px 16px 4px; background: none; backdrop-filter: none; mask-image: none; -webkit-mask-image: none; }
  h1 { font-size: 30px; }
  .periodo { width: 100%; }
  .periodo input { width: 100%; }
  #aviso { bottom: calc(84px + env(safe-area-inset-bottom)); border-radius: 18px; }
  .cartao { padding: 18px; }
  .resumo { grid-template-columns: 1fr 1fr; gap: 12px; }
  .indicador .valor { font-size: 24px; }
  #corpo-leads tr:not(.linha-conversa) { grid-template-columns: 1fr; padding: 15px; }
  #corpo-leads .acoes button { padding: 9px 12px; font-size: 14px; flex: 1; min-height: 38px; }
  #corpo-leads .acoes button[data-apagar-lead] { flex: 0; }
  .conectar-corpo { flex-direction: column; }
  .funil-etapa { grid-template-columns: 86px 1fr auto; }
  .funil-taxa { margin-left: 98px; }
  /* No celular, a janela vira folha que sobe de baixo e desce pelo mesmo caminho */
  .dialogo { margin: auto 0 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .dialogo[open] { animation: folha-sobe .38s var(--mola) both; }
  .dialogo.saindo { animation: folha-desce .24s ease-in both; }
}
@keyframes folha-sobe { from { transform: translateY(100%); } }
@keyframes folha-desce { to { transform: translateY(100%); } }

/* ---------- Acessibilidade ---------- */
/* Menos movimento: troca deslizes e escalas por esmaecimento curto. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .dialogo[open], .entrada-cartao, #aviso { animation: esmaecer .2s ease both !important; }
  .dialogo.saindo { animation: esmaecer-sai .15s ease both !important; }
  button:active, .botao:active, .passo:active { transform: none; }
}
@keyframes esmaecer { from { opacity: 0; } }
@keyframes esmaecer-sai { to { opacity: 0; } }
/* Menos transparência: materiais viram superfícies sólidas. */
@media (prefers-reduced-transparency: reduce) {
  .lateral::before, .navegacao, .entrada-cartao, .dialogo, #aviso, .dica, .cabecalho { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--superficie) !important; mask-image: none !important; -webkit-mask-image: none !important; }
}
/* Mais contraste: bordas definidas e texto secundário mais forte. */
@media (prefers-contrast: more) {
  :root { --suave: var(--texto-2); --linha: var(--linha-forte); }
  .cartao, .indicador, .tabela, .lista, .passo { box-shadow: none; border: 1px solid var(--linha-forte); }
  input, select, textarea { border-color: var(--linha-forte); }
}

/* Busca com a lupa dentro do campo */
.barra-ferramentas label.busca { flex-direction: row; align-items: center; }
.barra-ferramentas label.busca .ic { position: absolute; left: 11px; }
.barra-ferramentas label.busca input { padding-left: 34px; width: 100%; }
.filtros-acoes { align-items: center; }
.dialogo.folha .grupo-titulo { font-size: 13px; font-weight: 600; color: var(--suave); letter-spacing: 0; }
/* As linhas que são formulário não herdam a coluna dos formulários de janela */
.dialogo.folha form.linha { flex-direction: row; align-items: center; padding: 10px 16px; gap: 14px; }
@media (max-width: 860px) {
  /* No celular, os dois menus dividem a linha e os botões ficam juntos na seguinte */
  #filtro-etapa, #filtro-numero { flex: 1 1 140px; min-width: 0; }
  #filtro-etapa select, #filtro-numero select { width: 100%; }
  .filtros-acoes { flex: 1 1 100%; justify-content: flex-end; }
  #slot-visao { margin-right: auto; }
  .barra-ferramentas > .segmentado { flex: 1 1 100%; }
  .segmentado button { white-space: nowrap; }
}

/* ---------- Aparência: as três miniaturas dos Ajustes do iPhone ---------- */
.aparencias { justify-content: space-around; padding: 16px 12px 14px; gap: 8px; }
button.aparencia { flex-direction: column; gap: 8px; background: transparent; color: var(--texto); padding: 4px; border-radius: 14px; font-size: 14px; font-weight: 500; min-height: 0; }
button.aparencia:hover { background: transparent; }
.miniatura { position: relative; width: 66px; height: 110px; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 14px 8px;
  box-shadow: 0 0 0 1px var(--linha), var(--sombra); transition: box-shadow .2s var(--mola), transform 120ms ease-out; }
.miniatura i { display: block; height: 10px; border-radius: 4px; }
.miniatura i:first-child { height: 14px; width: 70%; }
.miniatura.claro { background: #f2f2f7; }
.miniatura.claro i { background: #ffffff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06); }
.miniatura.claro i:first-child { background: #1d1d1f; height: 8px; }
.miniatura.escuro { background: #000000; }
.miniatura.escuro i { background: #1c1c1e; }
.miniatura.escuro i:first-child { background: #f5f5f7; height: 8px; }
/* Automático: metade clara, metade escura, como no iPhone */
.miniatura.auto { background: linear-gradient(90deg, #f2f2f7 50%, #000000 50%); }
.miniatura.auto i { background: linear-gradient(90deg, #ffffff 50%, #1c1c1e 50%); }
.miniatura.auto i:first-child { background: linear-gradient(90deg, #1d1d1f 50%, #f5f5f7 50%); height: 8px; }
button.aparencia:active .miniatura { transform: scale(.96); }
button.aparencia[aria-checked="true"] .miniatura { box-shadow: 0 0 0 2.5px var(--azul), var(--sombra); }
.marca-escolha { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linha-forte); display: grid; place-items: center; transition: background-color .2s, box-shadow .2s; }
button.aparencia[aria-checked="true"] .marca-escolha { background: var(--azul); box-shadow: none; }
button.aparencia[aria-checked="true"] .marca-escolha::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* Troca de tema suave: as cores passam de uma para a outra em vez de piscar */
.trocando-tema, .trocando-tema *, .trocando-tema *::before, .trocando-tema *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease, stroke .35s ease !important;
}

/* ---------- Quadro: navegação no topo, no lugar da barra nativa lá embaixo ---------- */
.quadro { scrollbar-width: none; }
.quadro::-webkit-scrollbar { display: none; }
.quadro-topo { position: sticky; top: 104px; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 10px;
  padding: 8px 10px 10px; margin-bottom: 2px; border-radius: 18px; background: var(--material-forte); border: .5px solid var(--borda-material); box-shadow: var(--sombra);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); }
.quadro-topo button.icone { width: 30px; height: 30px; min-height: 30px; }
.quadro-topo button.icone:disabled { opacity: .35; }
.seta-esq { transform: rotate(180deg); }
.quadro-etapas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.quadro-etapas::-webkit-scrollbar { display: none; }
.quadro-etapas button { flex: none; scroll-snap-align: start; background: transparent; color: var(--texto-2); font-size: 13px; font-weight: 500; padding: 5px 12px; min-height: 30px; gap: 6px; }
.quadro-etapas button span { font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.quadro-etapas button:hover { background: var(--preenchimento-2); }
.quadro-etapas button.visivel { background: var(--preenchimento); color: var(--texto); font-weight: 600; }
/* Trilho fino com o polegar: mostra quanto do quadro está à vista e arrasta junto com o dedo */
.quadro-trilho { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 980px; background: var(--preenchimento-2); cursor: pointer; touch-action: none; transition: height .15s ease; }
.quadro-trilho:hover, .quadro-trilho.pegando { height: 10px; }
.quadro-polegar { position: absolute; top: 0; left: 0; height: 100%; border-radius: 980px; background: var(--linha-forte); will-change: transform; transition: background-color .15s; }
.quadro-trilho:hover .quadro-polegar, .quadro-trilho.pegando .quadro-polegar { background: var(--azul); }
.quadro-topo.sem-rolagem .quadro-trilho, .quadro-topo.sem-rolagem button.icone { display: none; }
.quadro-topo.sem-rolagem { grid-template-columns: minmax(0, 1fr) auto; }
#dialogo-etapas { width: min(620px, calc(100% - 32px)); }
@media (max-width: 860px) {
  .quadro-topo { top: 56px; grid-template-columns: minmax(0, 1fr) auto; }
  .quadro-topo button.icone { display: none; }
}
.folha-topo > :first-child { justify-self: start; }
@media (max-width: 860px) { #dialogo-etapas { width: 100%; } }

/* ---------- Início ---------- */
.boas-vindas { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 28px; color: var(--texto);
  background: radial-gradient(600px 260px at 0% 0%, color-mix(in srgb, var(--marca-viva) 26%, transparent), transparent 70%),
              radial-gradient(500px 240px at 100% 100%, color-mix(in srgb, var(--azul) 20%, transparent), transparent 70%), var(--superficie);
  box-shadow: var(--sombra); animation: surgir .4s var(--mola) both; }
.boas-vindas h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.022em; font-weight: 700; margin: 4px 0 8px; }
.boas-vindas p:last-child { font-size: 16px; color: var(--texto-2); max-width: 640px; }
.boas-vindas .rotulo-pequeno { text-transform: none; font-size: 13px; letter-spacing: 0; }
.boas-vindas .rotulo-pequeno::first-letter { text-transform: uppercase; }
.inicio-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; align-items: start; }
.inicio-grade > .grupo, .inicio-grade > .cartao { max-width: none; }
.inicio-funil { padding: 18px 20px; }
.inicio-funil .titulo-secao { margin-bottom: 4px; align-items: center; }
.inicio-grade .grupo-rodape { margin-top: 4px; }
.numero-linha { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.linha-rotulo > span:has(.avatar) { display: inline-flex; align-items: center; gap: 10px; }
.linha-rotulo > span .etiqueta { margin-right: 4px; }
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
button.atalho { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; min-height: 0; border-radius: 16px; text-align: left;
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); font-weight: 400; }
button.atalho:hover { background: var(--superficie-2); }
button.atalho .icone-ajuste { width: 34px; height: 34px; border-radius: 9px; margin-bottom: 4px; }
button.atalho b { font-size: 15px; font-weight: 600; }
button.atalho span:last-child { font-size: 13px; color: var(--suave); }
@media (max-width: 1100px) { .inicio-grade { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .boas-vindas { padding: 20px; }
  .boas-vindas h2 { font-size: 24px; }
  .atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* Fora dos leads só há o período e o Atualizar: cabem na mesma linha */
  .so-periodo > .segmentado { flex: 1 1 auto; }
  .so-periodo .filtros-acoes { flex: 0 0 auto; }
}
@media (max-width: 860px) {
  /* Na lista de atenção, o botão fica ao lado do texto, como nos Ajustes */
  #inicio-atencao .linha, .inicio-grade .linha { flex-wrap: nowrap; align-items: center; }
  #inicio-atencao .linha-controle, .inicio-grade .linha-controle { flex: none; }
}