/* =====================================================================
   crm-track — a interface do painel, não da landing.

   Conferido nos prints do aplicativo (Play Store): o produto real é
   GRAFITE NEUTRO, quase preto — nada de fundo azul. O azul #005AE3
   aparece só em botão de ação, toggle e link. Dinheiro em verde.

     fundo    #0c0d0f   grafite neutro
     superfí. #141518 / #1a1c20
     acento   #005AE3   SÓ em botão/link/foco — nunca em área grande
     dinheiro verde · alerta âmbar · perda vermelho
     fonte    Inter · raio 8/14 · pílula nos botões
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:        #0c0d0f;
  --bg-deep:   #0a0b0d;
  --surface:   #141518;
  --surface-2: #1a1c20;
  --hover:     #202329;
  --line:      rgba(255, 255, 255, .09);
  --line-2:    rgba(255, 255, 255, .06);

  --ink:   #ffffff;
  /* .68 -> .78 e .42 -> .58: a auditoria mediu texto auxiliar "tao discreto
     quanto metadados". Em tema escuro, opacidade baixa em texto que importa
     e o defeito de legibilidade mais comum. */
  --ink-2: rgba(255, 255, 255, .78);
  --ink-3: rgba(255, 255, 255, .58);
  /* Para o que e mesmo secundario (metadado, marca d'agua). */
  --ink-4: rgba(255, 255, 255, .40);

  --azul:      #005AE3;
  --azul-alto: #4a8dff;
  --azul-fraco: rgba(0, 90, 227, .18);
  /* O foco continua visivel, mas o "glow" deixa de competir com o conteudo:
     a auditoria registrou "botoes com brilho chamam mais atencao que o
     contexto". Vira anel de foco, nao ornamento permanente. */
  --azul-glow: 0 0 0 3px rgba(0, 90, 227, .25);
  --foco: 0 0 0 2px var(--bg), 0 0 0 4px var(--azul-alto);

  --ok:   #22d07a;
  --ok-dim: rgba(34, 208, 122, .14);
  --warn: #ffb020;
  --warn-dim: rgba(255, 176, 32, .14);
  --bad:  #ff5c7c;
  --bad-dim: rgba(255, 92, 124, .14);

  --r:    8px;
  --r-lg: 14px;
  --pill: 9999px;
  --sidebar: 62px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ---------------------------------------------- fundacao (Fase 1) --
     Escala tipografica. A auditoria mediu 39x 12px, 36x 11.5px, 23x 11px e
     30 declaracoes <=10px — corpo pequeno demais e hierarquia fraca.
     Aqui os degraus tem papel definido; nao sao mais numeros soltos. */
  --t-pagina:  26px;   /* titulo da tela      (era ~14) */
  --t-secao:   19px;   /* titulo de secao                */
  --t-card:    15.5px; /* titulo de card                 */
  --t-corpo:   14.5px; /* corpo e formulario  (era ~12)  */
  --t-ajuda:   13px;   /* texto de apoio      (era ~10.5)*/
  --t-rotulo:  12.5px; /* label e cabecalho de tabela    */
  --t-metrica: 30px;   /* numero grande                  */

  /* Espacamento em base 4/8, como a auditoria propoe. */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 40px;

  /* Altura unica de controle: inputs, selects e botoes param de variar. */
  --h-controle: 40px;
  --h-controle-mini: 32px;

  /* Sombras discretas — sem "vidro" nem brilho. */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .30);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, .34);
  --sombra-3: 0 12px 36px rgba(0, 0, 0, .42);

  /* Larguras de leitura (auditoria secao 8). */
  --w-form: 1080px;
  --w-texto: 900px;

  /* z-index nomeado, para parar de disputar numero magico. */
  --z-menu: 70; --z-capa: 60; --z-topo: 50;
  --z-drawer: 80; --z-modal: 90; --z-toast: 100;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font: 13px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul-alto); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--azul); color: #fff; }

.num, td.num, th.num, .stat b, .ficha .valor { font-variant-numeric: tabular-nums; }

#app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

/* ------------------------------------------------------------ sidebar */

#sidebar {
  background: var(--bg-deep); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow: hidden;   /* trava qualquer vazamento para a area de conteudo */
}
.marca {
  padding: 13px 0; font-weight: 800; font-size: 15px; text-align: center;
  letter-spacing: -0.03em; color: var(--ink);
}
.marca span { color: var(--azul-alto); }
.marca-completa { display: none; }
.marca-curta { display: inline; color: var(--ink) !important; }
.marca-curta span { color: var(--azul-alto); }

#nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
  min-height: 0;

  /* O menu ja rolava, mas nada dizia isso — itens ficavam escondidos atras do
     rodape sem nenhum indicio. As sombras aparecem so quando ha mais conteudo
     naquela direcao: sao dois gradientes fixos no viewport do scroll e dois
     que rolam junto e os cobrem nas pontas. */
  background:
    linear-gradient(var(--bg-deep) 30%, transparent) top / 100% 22px no-repeat,
    linear-gradient(transparent, var(--bg-deep) 70%) bottom / 100% 22px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .45), transparent) top / 100% 9px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .45), transparent) bottom / 100% 9px no-repeat;
  background-attachment: local, local, scroll, scroll;
}
#nav::-webkit-scrollbar { width: 6px; }
#nav::-webkit-scrollbar-track { background: transparent; }
#nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; }
#nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); }
#nav::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* O atributo hidden precisa vencer o display das classes e dos ids:
   sem isto um botao de menu com hidden segue aparecendo. */
[hidden] { display: none !important; }
#nav button {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
  padding: 6px 10px; border-radius: var(--pill); font: inherit;
  font-size: 0; font-weight: 500; text-align: left; margin-bottom: 3px;
  justify-content: center; min-height: 38px; padding: 8px;
  transition: background .12s, color .12s;
}
#nav button:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
#nav button[aria-current="page"] {
  background: rgba(255, 255, 255, .08); color: #fff; font-weight: 650;
  box-shadow: inset 2.5px 0 0 var(--azul);
}
#nav button .badge {
  margin-left: auto; background: var(--bad); color: #fff; font-size: 10px;
  font-weight: 700; padding: 0 6px; border-radius: var(--pill); min-width: 17px; text-align: center;
}
#nav button .badge.calmo { background: rgba(255, 255, 255, .12); color: var(--ink-2); }
#nav button[aria-current="page"] .badge.calmo { background: rgba(255, 255, 255, .22); color: #fff; }
#nav button .badge { display: none; }
.nav-avancado { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.nav-avancado > summary {
  cursor: pointer; list-style: none; color: var(--ink-3); padding: 9px;
  font-size: 0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
}
.nav-avancado > summary::-webkit-details-marker { display: none; }
.nav-avancado > summary::after { display: none; }
.nav-avancado:not([open]) button { display: none; }

.sidebar-pe {
  border-top: 1px solid var(--line); padding: 9px 12px;
  display: flex; align-items: center; gap: 7px; font-size: 11.5px;
  min-width: 0;
}
/* Um select com largura propria vazava da barra e cobria o conteudo em todas
   as telas. Ele cabe na barra, e a barra nao deixa nada escapar. */
.sidebar-pe select, .sidebar-pe .pe-linha {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.sidebar-pe button {
  margin-left: auto; background: none; border: 0; color: var(--ink-3);
  cursor: pointer; font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: var(--pill);
}
.sidebar-pe button:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.sidebar-pe { padding: 9px 8px; align-items: center; }
.sidebar-pe .quem-bloco, .sidebar-pe #statusMeta { display: none; }
.sidebar-pe .pe-linha { justify-content: center; }
.sidebar-pe button { margin-left: 0; font-size: 17px; padding: 4px 7px; }
#alternarSidebar { font-size: 22px; line-height: 1; }

@media (min-width: 901px) {
  body.menu-expandido { --sidebar: 186px; }
  body.menu-expandido .marca { padding: 13px 14px; text-align: left; }
  body.menu-expandido .marca-completa { display: inline; color: var(--ink) !important; }
  body.menu-expandido .marca-curta { display: none; }
  body.menu-expandido #nav button {
    justify-content: flex-start; min-height: 0; padding: 6px 10px;
    font-size: 13px; margin-bottom: 1px;
  }
  body.menu-expandido #nav button .badge { display: inline-block; }
  body.menu-expandido .nav-avancado > summary {
    justify-content: flex-start; gap: 7px; padding: 7px 10px; font-size: 10px;
  }
  body.menu-expandido .nav-avancado > summary::after {
    display: block; content: '›'; margin-left: auto; font-size: 15px;
    line-height: 10px; transition: transform .15s ease;
  }
  body.menu-expandido .nav-avancado[open] > summary::after { transform: rotate(90deg); }
  body.menu-expandido .sidebar-pe { padding: 9px 12px; align-items: stretch; }
  body.menu-expandido .sidebar-pe .quem-bloco,
  body.menu-expandido .sidebar-pe #statusMeta { display: inline-flex; }
  body.menu-expandido .sidebar-pe .pe-linha { justify-content: flex-start; }
  body.menu-expandido .sidebar-pe button { margin-left: auto; padding: 3px 9px; }
}

/* --------------------------------------------------------------- topo */

#conteudo, #conteudoPrincipal { min-width: 0; display: flex; flex-direction: column; }

#topo {
  display: flex; align-items: center; gap: 10px; height: 46px;
  padding: 0 16px; border-bottom: 1px solid var(--line);
  background: rgba(12, 13, 15, .82); backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 20;
}
#topo h1 { font-size: 14px; margin: 0; font-weight: 700; letter-spacing: -0.02em; }
#abrirMenu { display: none; background: none; border: 0; color: var(--ink); font-size: 17px; cursor: pointer; padding: 0; }

.busca { position: relative; margin-left: auto; }
.busca input { width: 250px; padding: 6px 12px 6px 28px; border-radius: var(--pill); font-size: 12.5px; }
.busca .lupa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); opacity: .45; font-size: 11px; }
.busca-res {
  position: absolute; top: calc(100% + 7px); right: 0; width: 370px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .6); overflow: hidden; max-height: 400px; overflow-y: auto;
}
.busca-res:empty { display: none; }
.busca-res .item { padding: 8px 13px; cursor: pointer; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.busca-res .item:hover { background: var(--hover); }
.busca-res .tit {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); padding: 8px 13px 4px; font-weight: 700;
}

main { padding: 14px 16px 44px; flex: 1; }
section[hidden] { display: none; }

h2 {
  font-size: 10px; margin: 18px 0 7px; color: var(--ink-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
h2:first-child { margin-top: 0; }

/* ---------------------------------------- assistente de primeiro acesso */
.onboarding {
  background: linear-gradient(135deg, rgba(0,90,227,.16), var(--surface) 48%);
  border: 1px solid rgba(74,141,255,.28); border-radius: var(--r-lg);
  padding: 15px 17px; margin-bottom: 14px;
}
.onboarding.pronto { background: linear-gradient(135deg, rgba(34,208,122,.11), var(--surface) 48%); border-color: rgba(34,208,122,.26); }
.onboarding-topo { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.onboarding-topo strong { font-size: 15px; }
.onboarding-topo p { color: var(--ink-2); margin: 3px 0 0; font-size: 12.5px; }
.onboarding-topo > span { color: var(--azul-alto); font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.onboarding.pronto .onboarding-topo > span { color: var(--ok); }
.onboarding-barra { height: 5px; margin: 11px 0; background: rgba(0,0,0,.32); border-radius: var(--pill); overflow: hidden; }
.onboarding-barra i { display: block; height: 100%; background: var(--azul-alto); border-radius: inherit; transition: width .25s; }
.onboarding.pronto .onboarding-barra i { background: var(--ok); }
.onboarding-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.onboarding-passo { display: flex; gap: 9px; align-items: flex-start; text-align: left; color: var(--ink); background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 10px; cursor: pointer; font: inherit; }
.onboarding-passo:hover { border-color: var(--azul-alto); background: var(--azul-fraco); }
.onboarding-passo.feito { opacity: .72; }
.onboarding-check { color: var(--azul-alto); font-size: 16px; line-height: 1; }
.onboarding-passo.feito .onboarding-check { color: var(--ok); }
.onboarding-passo strong, .onboarding-passo small { display: block; }
.onboarding-passo strong { font-size: 12.5px; }
.onboarding-passo small { color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.onboarding-alerta { margin-top: 10px; color: var(--bad); font-size: 12px; }
.onboarding-grupo { margin-top: 13px; }
.onboarding-grupo:first-of-type { margin-top: 12px; }
.onboarding-grupo h4 {
  font-size: 10px; margin: 0 0 7px; color: var(--ink-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.onboarding-nota { color: var(--ink-3); font-size: 11.5px; margin: -3px 0 7px; }
.onboarding-passo.grupo-recomendado, .onboarding-passo.grupo-opcional,
.onboarding-passo.grupo-inicio { background: rgba(0,0,0,.12); }
/* ONBOARD-2B: no estado inicial nenhum caminho tem precedência sobre outro. */
.onboarding-passo.grupo-inicio .onboarding-check { color: var(--ink-3); }
.onboarding-passo.grupo-recomendado .onboarding-check,
.onboarding-passo.grupo-opcional .onboarding-check { color: var(--ink-3); }
.onboarding-passo.feito .onboarding-check { color: var(--ok); }
/* ------------------------------------------ papel na integração --
   A escolha decide qual comissão é a da conta, então ela tem bloco
   próprio em vez do select que se perdia entre os botões. */
.papel-bloco {
  margin: 8px 0; padding: 11px 13px; border-radius: var(--r);
  background: rgba(0,0,0,.14); border: 1px solid var(--line);
}
.papel-bloco.pendente { border-color: var(--azul-alto); background: var(--azul-fraco); }
.papel-topo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.papel-topo strong { font-size: 13px; }
.papel-bloco .mini { margin: 5px 0 9px; color: var(--ink-3); }
.papel-opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.papel-opcao {
  flex: 1 1 150px; min-height: 38px; padding: 8px 14px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: 13px; font-weight: 500;
  transition: background .12s, border-color .12s;
}
.papel-opcao:hover { border-color: var(--azul-alto); background: var(--azul-fraco); }
.papel-opcao:focus-visible { outline: 2px solid var(--azul-alto); outline-offset: 2px; }
/* o estado escolhido não depende só de cor: ganha marca e peso */
.papel-opcao.ativa {
  border-color: var(--ok); background: var(--ok-dim);
  color: var(--ink); font-weight: 650;
}
.papel-opcao.ativa::before { content: "✓ "; color: var(--ok); font-weight: 700; }
/* Papel OPCIONAL: a integração manda a comissão já resolvida, então o papel
   é registro do usuário, não pendência. Mesmo bloco, sem cor de alerta. */
.papel-bloco.opcional { background: rgba(0,0,0,.10); border-style: dashed; }
.papel-bloco.opcional .papel-topo strong { color: var(--ink-2); font-weight: 600; }
.papel-bloco .papel-nota { margin: -4px 0 9px; font-size: 11px; opacity: .85; }

@media (max-width: 520px) { .papel-opcao { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .papel-opcao { transition: none; } }

/* o grupo essencial do assistente: mesmo desenho dos requisitos */
.onboarding-passo.grupo-essencial { background: rgba(0,0,0,.18); }

.onboarding-grupo.opcionais { border-top: 1px solid var(--line); padding-top: 11px; }
.onboarding-abrir {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 3px 0;
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  font: inherit; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.onboarding-abrir:hover { color: var(--ink-2); }
.onboarding-abrir:focus-visible { outline: 2px solid var(--azul-alto); outline-offset: 3px; border-radius: var(--r); }
.onboarding-seta { display: inline-block; transition: transform .18s; font-size: 14px; line-height: 1; }
.onboarding-grupo.aberto .onboarding-seta { transform: rotate(90deg); }
.onboarding-cont {
  background: rgba(0,0,0,.28); color: var(--ink-3); border-radius: var(--pill);
  padding: 0 6px; font-size: 10px; letter-spacing: 0; min-width: 16px; text-align: center;
}
.onboarding-grupo.opcionais .onboarding-grid { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .onboarding-seta { transition: none; } }
@media(max-width:850px){.onboarding-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.onboarding-grid{grid-template-columns:1fr}.onboarding-topo>span{font-size:18px}}
/* ONBOARD-2B: no celular o assistente compacta, mas continua orientando —
   o detalhe é o que explica para que serve o passo. Fonte e entrelinha mais
   justas, teto de 2 linhas; o texto permanece no DOM e acessível. */
@media (max-width: 520px) {
  .onboarding-grid { gap: 5px; }
  .onboarding-passo { padding: 8px 10px; gap: 8px; }
  .onboarding-passo strong { font-size: 12px; }
  .onboarding-passo small {
    font-size: 11px; line-height: 1.3; margin-top: 1px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .onboarding-grupo { margin-top: 10px; }
  .onboarding-nota { font-size: 11px; margin: -2px 0 6px; }
}

/* ------------------------------------------------------- barra de KPI */

.statbar {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  margin-bottom: 14px; overflow: hidden;
}
.stat { padding: 9px 16px; border-right: 1px solid var(--line-2); min-width: 100px; }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
.stat i {
  display: block; font-style: normal; font-size: 9.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-top: 2px;
}
.stat.good b { color: var(--ok); }
.stat.warn b { color: var(--warn); }
.stat.bad  b { color: var(--bad); }

/* ------------------------------------------------------------ tabelas */

.wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--line-2); }
th {
  color: var(--ink-3); font-weight: 700; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .11em;
  background: rgba(0, 0, 0, .22); position: sticky; top: 0; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, .045); }
td.num, th.num { text-align: right; }
td .sub { color: var(--ink-3); font-size: 11px; line-height: 1.3; }

/* -------------------------------------------------------------- pills */

.pill {
  display: inline-block; padding: 2px 9px; border-radius: var(--pill);
  font-size: 10.5px; font-weight: 650; white-space: nowrap;
}
.pill.ok   { background: var(--ok-dim);   color: var(--ok); }
.pill.mid  { background: var(--warn-dim); color: var(--warn); }
.pill.bad  { background: var(--bad-dim);  color: var(--bad); }
.pill.calm { background: rgba(255, 255, 255, .10); color: var(--ink-2); }
.pill.brand{ background: var(--azul-fraco); color: var(--azul-alto); }

code, .mono { font-family: var(--mono); font-size: 11.5px; }

/* ---------------------------------------------------------- controles */

button.act {
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--ink);
  padding: 5px 14px; border-radius: var(--pill); cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 550; transition: background .12s, border-color .12s;
}
button.act:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }
button.act.primary {
  background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 650;
  box-shadow: 0 3px 14px rgba(0, 90, 227, .42);
}
button.act.primary:hover { background: var(--azul-alto); border-color: var(--azul-alto); }
button.act.perigo:hover { background: var(--bad-dim); border-color: var(--bad); color: var(--bad); }
button.act.mini { padding: 3px 10px; font-size: 11.5px; }

input, select, textarea {
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line); color: var(--ink);
  padding: 6px 11px; border-radius: var(--r); font: inherit; font-size: 12.5px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: var(--azul-glow);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
select option { background: var(--surface); color: var(--ink); }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 11px; }
.spacer { margin-left: auto; }

/* ------------------------------------------------------ piloto de ROAS */
.piloto-card { display: flex; gap: 16px; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 15px; margin-bottom: 8px; }
.piloto-info p { margin: 5px 0 2px; color: var(--ink-2); }
.piloto-info > small { color: var(--ink-3); }
.piloto-acoes { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.piloto-ultima { margin-top: 8px; color: var(--ink-2); font-size: 11.5px; }
.piloto-ultima small { color: var(--ink-3); margin-left: 5px; }
.automacao-avancada { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 14px 14px; }
.automacao-avancada > summary { cursor: pointer; padding: 12px 0; color: var(--ink-2); font-weight: 650; }
@media(max-width:720px){.piloto-card{align-items:flex-start;flex-direction:column}.piloto-acoes{justify-content:flex-start}}

/* --------------------------------------------------------------- funil */

.funnel { display: grid; gap: 3px; margin-bottom: 14px; }
.funnel .step { display: grid; grid-template-columns: 132px 1fr 122px; gap: 10px; align-items: center; height: 20px; }
.funnel .step > small:first-child { color: var(--ink-2); font-size: 11.5px; }
.funnel .bar { height: 13px; background: rgba(0, 0, 0, .3); border-radius: var(--pill); overflow: hidden; }
.funnel .bar i {
  display: block; height: 100%; border-radius: var(--pill);
  background: rgba(255, 255, 255, .28);
}
.funnel .bar i.fim { background: linear-gradient(90deg, #13a35f, var(--ok)); }
.funnel .step > small:last-child { color: var(--ink-3); font-size: 11px; text-align: right; }

/* -------------------------------------------------------------- quadro */

.quadro { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.coluna {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  min-width: 216px; max-width: 216px; display: flex; flex-direction: column; max-height: 74vh;
}
.coluna-topo { padding: 8px 11px; border-bottom: 1px solid var(--line-2); }
.coluna-topo .sub { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.coluna-lista { padding: 7px; display: grid; gap: 6px; overflow-y: auto; }
.coluna.alvo { border-color: var(--azul); box-shadow: var(--azul-glow); }

.ficha {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-radius: var(--r); padding: 7px 9px; cursor: grab; font-size: 12px;
}
.ficha:hover { border-color: var(--azul); background: var(--azul-fraco); }
.ficha.arrastando { opacity: .35; }
.ficha .nome { font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha .meta { color: var(--ink-3); font-size: 10.5px; display: flex; gap: 6px; flex-wrap: wrap; }
.ficha .valor { color: var(--ok); font-weight: 700; }
.vazio-col { color: var(--ink-3); font-size: 11px; text-align: center; padding: 12px 6px; }

/* -------------------------------------------------------------- gaveta */

#gaveta {
  position: fixed; inset: 0 0 0 auto; width: min(530px, 100%); z-index: 60;
  background: var(--bg);
  border-left: 1px solid var(--line); box-shadow: -14px 0 44px rgba(0, 0, 0, .6);
  overflow-y: auto; transform: translateX(100%); transition: transform .18s ease;
}
#gaveta.aberta { transform: none; }
#gaveta .gaveta-topo {
  position: sticky; top: 0; background: rgba(12, 13, 15, .9); backdrop-filter: blur(12px);
  z-index: 2; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700;
}
#gaveta .gaveta-corpo { padding: 14px 16px 34px; }
#fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 50; backdrop-filter: blur(2px); }
#fundo[hidden], #gaveta[hidden] { display: none; }

.dados { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; font-size: 12.5px; margin: 0; }
.dados dt { color: var(--ink-3); font-size: 11.5px; }
.dados dd { margin: 0; word-break: break-word; }

.linha-tempo { display: grid; }
.linha-tempo .ev { display: grid; grid-template-columns: 11px 1fr; gap: 9px; padding-bottom: 10px; position: relative; }
.linha-tempo .ev::before { content: ''; position: absolute; left: 4.5px; top: 12px; bottom: 0; width: 1px; background: var(--line); }
.linha-tempo .ev:last-child::before { display: none; }
.linha-tempo .ponto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--azul-alto);
  margin-top: 5px; margin-left: 2px; box-shadow: 0 0 0 3px var(--azul-fraco);
}
.linha-tempo .quando { font-size: 10.5px; color: var(--ink-3); }

/* ----------------------------------------------------------- formulário */

.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 9px; }
form label, label.full {
  display: grid; gap: 4px; font-size: 9.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
label.full { margin-top: 9px; }
form input, form select, form textarea {
  text-transform: none; letter-spacing: normal; font-size: 12.5px; color: var(--ink); font-weight: 400;
}
form textarea { resize: vertical; font-family: inherit; }
label.inline {
  display: flex !important; align-items: center; gap: 7px; text-transform: none;
  letter-spacing: normal; font-size: 12.5px; color: var(--ink-2); cursor: pointer; font-weight: 400;
}
label.inline input { width: auto; accent-color: var(--azul); }

.emq { display: flex; align-items: center; gap: 10px; margin: 9px 0; flex-wrap: wrap; font-size: 12.5px; }
.emq .barra { flex: 1; height: 6px; background: rgba(0,0,0,.3); border-radius: var(--pill); overflow: hidden; max-width: 210px; min-width: 90px; }
.emq .barra i { display: block; height: 100%; background: var(--ok); border-radius: var(--pill); }
.emq .barra i.meio { background: var(--warn); }
.emq .barra i.ruim { background: var(--bad); }

/* ----------------------------------------------------------- diversos */

pre {
  background: rgba(0, 0, 0, .32); border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px; overflow: auto; font-family: var(--mono); font-size: 11px;
  max-height: 400px; margin: 0; line-height: 1.5; color: var(--ink-2);
}
.note {
  border-left: 3px solid var(--azul); background: var(--surface);
  padding: 9px 13px; border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2);
  font-size: 12.5px; margin: 11px 0; line-height: 1.55;
}
.note:first-child { margin-top: 0; }
.note.erro { border-color: var(--bad); }
.note.bom  { border-color: var(--ok); }
.empty { padding: 26px; text-align: center; color: var(--ink-3); font-size: 12px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
.split > div > h2:first-child { margin-top: 0; }

.painel-fonte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 11px 13px; margin-bottom: 9px;
}
.url-hook {
  display: flex; gap: 9px; align-items: center; background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px 11px;
  font-family: var(--mono); font-size: 11px; word-break: break-all; color: var(--ink-2);
}

/* ------------------------------------------------------- tela de acesso */

#acesso {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: grid; place-items: center; padding: 20px;
}
#acesso[hidden] { display: none; }

#caixaAcesso {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px; width: min(400px, 100%); display: grid; gap: 12px;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .55);
}
.acesso-marca { margin: 0; font-size: 22px; letter-spacing: -0.035em; font-weight: 800;
  text-transform: none; color: var(--ink); }
.acesso-marca span { color: var(--azul-alto); }
.acesso-sub { margin: -6px 0 4px; color: var(--ink-3); font-size: 12.5px; }
.acesso-p { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.55;
  text-transform: none; letter-spacing: normal; font-weight: 400; }
.acesso-p code { background: rgba(0, 0, 0, .3); padding: 1px 5px; border-radius: 4px; color: var(--azul-alto); }

.acesso-msg {
  border-left: 3px solid var(--bad); background: var(--bad-dim); color: var(--bad);
  padding: 8px 12px; border-radius: 0 6px 6px 0; font-size: 12.5px; line-height: 1.5;
}
.acesso-msg.bom { border-color: var(--ok); background: var(--ok-dim); color: var(--ok); }
.acesso-msg[hidden] { display: none; }

#caixaAcesso form { display: grid; gap: 11px; }
#caixaAcesso form[hidden] { display: none; }
#caixaAcesso input:not([type="checkbox"]) { width: 100%; padding: 8px 12px; }
#caixaAcesso button.primary { padding: 9px 14px; font-size: 13.5px; margin-top: 3px; }
#caixaAcesso small { color: var(--ink-3); font-size: 11.5px; text-transform: none;
  letter-spacing: normal; font-weight: 400; line-height: 1.5; }
.acesso-links { display: flex; gap: 8px; justify-content: center; }
.acesso-check {
  display: grid !important; grid-template-columns: 18px minmax(0, 1fr); align-items: start !important; gap: 8px !important;
  color: var(--ink-2) !important; font-size: 11.5px !important;
  text-transform: none !important; letter-spacing: normal !important; font-weight: 400 !important;
  line-height: 1.45; cursor: pointer;
}
.acesso-check input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--azul); }
.acesso-check span { min-width: 0; }
.acesso-trial { display: grid; gap: 4px; padding: 12px; border-left: 3px solid var(--ok); border-radius: 0 var(--r) var(--r) 0; background: var(--ok-dim); color: var(--ink); font-size: 12px; line-height: 1.45; }
.acesso-trial strong { color: var(--ok); font-size: 13px; }

/* ------------------------------------------------------- rodapé do menu */

.sidebar-pe { flex-direction: column; align-items: center; gap: 5px; }
.pe-linha { display: flex; align-items: center; gap: 7px; }
.quem {
  font-weight: 650; font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --------------------------------------------------------------- toasts */

#toasts {
  position: fixed; bottom: 16px; right: 16px; z-index: 130;
  display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px));
}
.toast {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--azul); border-radius: 8px;
  padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); white-space: pre-line;
  animation: toast-entra .18s ease;
}
.toast.bom  { border-left-color: var(--ok); }
.toast.erro { border-left-color: var(--bad); }
.toast.sumindo { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } }

/* ================================================================
   Redesign aprovado no canvas: ícones, KPIs com variação, gráfico,
   cartões do funil e navegação inferior no celular.
   ================================================================ */

/* .pill é inline-flex e vencia o atributo hidden: o badge de trial aparecia
   como um tracinho vazio ao lado do título */
#trialBadge[hidden] { display: none; }

/* ícones na sidebar */
#nav button svg { flex-shrink: 0; opacity: .85; }
#nav button[aria-current="page"] svg { opacity: 1; }

/* rodapé com avatar */
.avatar {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: rgba(0, 90, 227, .25); color: #7cabff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.quem-bloco { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.papel { font-size: 10.5px; color: var(--ink-3); }

/* KPIs em cartões, com variação vs período anterior */
.kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 13px 16px; min-width: 0;
}
.kpi .k { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.kpi .v { font-size: 23px; font-weight: 750; letter-spacing: -0.03em; margin-top: 4px; line-height: 1.15; }
.kpi .s { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.kpi.good .v { color: var(--ok); }
.kpi.warn .v { color: var(--warn); }
.kpi.bad  .v { color: var(--bad); }
.delta { padding: 1px 7px; border-radius: var(--pill); font-size: 10.5px; font-weight: 700; }
.delta.up   { background: var(--ok-dim);  color: var(--ok); }
.delta.down { background: rgba(255,255,255,.1); color: var(--ink-2); }
.delta.flat { background: rgba(255,255,255,.07); color: var(--ink-3); }

/* linha gráfico + funil */
.linha-grafico { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px 10px; display: flex; flex-direction: column; min-width: 0; }
.cartao-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cartao-titulo { font-size: 13px; font-weight: 700; }
.cartao-sub { font-size: 11.5px; color: var(--ink-3); }
.cartao-pe { border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 8px; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); }
.cartao .funnel { margin-bottom: 0; flex: 1; }

.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: 220px; }
.grafico .dica {
  position: absolute; pointer-events: none; transform: translate(-50%, -100%);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 11.5px; white-space: nowrap; display: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.grafico .dica b { display: block; font-size: 12.5px; }
.grafico .dica small { color: var(--ink-3); }

/* kanban: bolinha da coluna, idade e selo Purchase */
.coluna-topo .nome { display: flex; align-items: center; gap: 7px; }
.ponto-col { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.35); flex-shrink: 0; }
.ficha.entregue { border-left: 3px solid #17ae64; }
.ficha.saindo   { border-left: 3px solid var(--warn); }
.ficha .prod { color: var(--ink-3); font-size: 11.5px; margin-bottom: 3px; }

/* navegação inferior (celular) */
#navInferior { display: none; }
@media (max-width: 900px) {
  #navInferior {
    display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--bg-deep); border-top: 1px solid var(--line);
    padding: 0 6px calc(6px + env(safe-area-inset-bottom));
  }
  #navInferior button {
    flex: 1; background: none; border: 0; color: var(--ink-3); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font: inherit; font-size: 10px; font-weight: 600; padding: 8px 0 4px;
  }
  #navInferior button[aria-current="page"] { color: var(--azul-alto); }
  #navInferior button.fab {
    flex: 0 0 62px; padding: 0;
  }
  #navInferior button.fab svg {
    width: 50px; height: 50px; padding: 14px; border-radius: 999px; background: var(--azul);
    margin-top: -18px; box-shadow: 0 6px 18px rgba(0,90,227,.5); border: 3px solid var(--bg-deep);
  }
  main { padding-bottom: 92px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi .v { font-size: 20px; }
  .linha-grafico { grid-template-columns: 1fr; }
  .grafico svg { height: 150px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------ demo + primeiros passos + ajuda */


.primeiros {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--azul);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 16px;
}
.primeiros .mini { margin: 4px 0 0; }
.primeiros-lista { margin: 14px 0 0; padding: 0 0 0 22px; display: grid; gap: 10px; }
.primeiros-lista li { font-size: 13.5px; line-height: 1.45; }
.primeiros-lista li::marker { color: var(--azul-alto); font-weight: 700; }
.primeiros-lista a { color: var(--ink); }
.primeiros-lista a:hover strong { color: var(--azul-alto); }
.primeiros-lista span { display: block; color: var(--ink-3); font-size: 12px; }

.acesso-ajuda { display: block; margin-top: 10px; color: var(--ink-3); font-size: 11.5px; line-height: 1.45; text-align: center; }
.acesso-ajuda a { color: var(--azul-alto); }

/* ------------------------------------------------------- nossos produtos */

.produto {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr); gap: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 28px; margin-bottom: 14px; align-items: start;
}
.produto-marca { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-alto); font-weight: 700; }
.produto-tag { font-size: 22px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.2; margin: 8px 0 12px; }
.produto-desc { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0 0 14px; max-width: 60ch; }
.produto-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.produto-lista li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink-2); }
.produto-lista li::before {
  content: '✓'; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--ok-dim); color: var(--ok); font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.produto-oferta {
  background: rgba(34, 208, 122, .06); border: 1px solid rgba(34, 208, 122, .3);
  border-radius: var(--r-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
}
.produto-oferta .pill { align-self: flex-start; font-size: 11.5px; padding: 4px 11px; }
a.produto-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--pill); font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--ink);
  transition: background .12s, border-color .12s;
}
a.produto-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }
a.produto-btn.primary { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 650; box-shadow: 0 3px 14px rgba(0, 90, 227, .42); }
a.produto-btn.primary:hover { background: var(--azul-alto); border-color: var(--azul-alto); }
a.produto-btn.verde { background: var(--ok); border-color: var(--ok); color: #06210f; font-weight: 700; box-shadow: 0 3px 14px rgba(34, 208, 122, .3); }
a.produto-btn.verde:hover { filter: brightness(1.08); }
a.produto-btn.largo { width: 100%; margin-top: 4px; }
.produto-preco { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.produto-preco s { color: var(--ink-3); font-size: 15px; }
.produto-preco b { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; color: var(--ok); line-height: 1; }
.produto-preco span { color: var(--ink-3); font-size: 13px; }
.produto-oferta-titulo { font-size: 15px; font-weight: 700; }
.produto-oferta-texto { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 900px) {
  .produto { grid-template-columns: 1fr; padding: 20px; }
}

/* ----------------------------------------------------------------- ROAS */

tr.roas-filho.oculto { display: none; }
.roas-toggle {
  display: inline-block; width: 14px; text-align: center;
  color: var(--ink-3); text-decoration: none; font-size: 11px;
}
.roas-toggle:hover { color: var(--ink); text-decoration: none; }

/* --------------------------------------------------------- documentação */

.doc { max-width: 860px; }
.doc-bloco {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 18px; font-size: 13px; line-height: 1.65; color: var(--ink-2);
}
.doc-bloco ol, .doc-bloco ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.doc-bloco li strong, .doc-def dt { color: var(--ink); }
.doc-bloco code { background: rgba(0, 0, 0, .3); padding: 1px 5px; border-radius: 4px; color: var(--azul-alto); }
.doc-bloco pre { margin: 7px 0 0; }
.doc-def { margin: 0; display: grid; gap: 3px; }
.doc-def dt { font-weight: 650; margin-top: 9px; }
.doc-def dt:first-child { margin-top: 0; }
.doc-def dd { margin: 0 0 4px; }

/* -------------------------------------------------------------- mobile */

#capa-menu { display: none; }

@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 208px; z-index: 70;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .marca { padding: 13px 14px; text-align: left; }
  .marca-completa { display: inline; color: var(--ink) !important; }
  .marca-curta { display: none; }
  #nav button { justify-content: flex-start; min-height: 0; padding: 6px 10px; font-size: 13px; margin-bottom: 1px; }
  #nav button .badge { display: inline-block; }
  .nav-avancado > summary { justify-content: flex-start; gap: 7px; padding: 7px 10px; font-size: 10px; }
  .nav-avancado > summary::after { display: block; content: '›'; margin-left: auto; font-size: 15px; line-height: 10px; transition: transform .15s ease; }
  .nav-avancado[open] > summary::after { transform: rotate(90deg); }
  .sidebar-pe { padding: 9px 12px; align-items: stretch; }
  .sidebar-pe .quem-bloco, .sidebar-pe #statusMeta { display: inline-flex; }
  .sidebar-pe .pe-linha { justify-content: flex-start; }
  .sidebar-pe button { margin-left: auto; font-size: 11.5px; padding: 3px 9px; }
  #alternarSidebar { display: none; }
  #sidebar.aberta { transform: none; box-shadow: 14px 0 44px rgba(0, 0, 0, .6); }
  #capa-menu { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .6); }
  #capa-menu[hidden] { display: none; }
  #abrirMenu { display: block; }
  #topo { padding: 0 12px; height: 44px; }
  main { padding: 12px 12px 38px; }
  .busca input { width: 140px; }
  .busca-res { width: min(330px, calc(100vw - 24px)); }
  .split { grid-template-columns: 1fr; }
  .funnel .step { grid-template-columns: 100px 1fr 96px; }
  .dados { grid-template-columns: 88px 1fr; }
  .stat { min-width: 88px; padding: 8px 12px; }
  .stat b { font-size: 15px; }
}

/* ------------------------------------------ Meta: tutorial + qualidade */

.tutorial {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--azul);
  border-radius: var(--r-lg); padding: 18px 20px; margin: 4px 0 16px;
}
.tutorial-topo { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.tutorial-topo .mini { margin: 4px 0 0; }
.tutorial-progresso { min-width: 160px; text-align: right; }
.tutorial-progresso b { font-size: 13px; font-weight: 700; }
.tutorial-progresso i { display: block; height: 6px; background: rgba(0,0,0,.3); border-radius: var(--pill); margin-top: 6px; overflow: hidden; }
.tutorial-progresso i span { display: block; height: 100%; background: var(--ok); border-radius: var(--pill); transition: width .3s; }
.passos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.passo { display: flex; gap: 14px; padding: 12px 12px; border-radius: var(--r); border: 1px solid transparent; }
.passo.atual { background: var(--azul-fraco); border-color: rgba(0, 90, 227, .35); }
.passo.feito { opacity: .72; }
.passo-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: rgba(255,255,255,.08); color: var(--ink-2); border: 1px solid var(--line);
}
.passo.atual .passo-n { background: var(--azul); color: #fff; border-color: var(--azul); }
.passo.feito .passo-n { background: var(--ok-dim); color: var(--ok); border-color: rgba(34,208,122,.4); }
.passo-titulo { font-size: 14px; font-weight: 700; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.passo-texto { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.passo-texto code { background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 4px; color: var(--azul-alto); }
.passo-texto details { margin-top: 8px; }
.passo-texto summary { cursor: pointer; color: var(--azul-alto); font-size: 12.5px; }
.passo-texto details[open] summary { margin-bottom: 4px; }
.form-cred { display: grid; gap: 10px; margin-top: 8px; max-width: 560px; }
.form-cred label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-3); }
.form-cred label small { color: var(--ink-3); }
.form-cred input[type="text"], .form-cred input[type="password"], .form-cred input[type="email"], .form-cred input[type="url"], .form-cred input:not([type]) {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r);
  padding: 8px 10px; font: inherit; font-size: 13px;
}
.form-cred input:focus { outline: none; border-color: var(--azul); box-shadow: var(--azul-glow); }
.form-cred label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
.legal-aceite-caixa { width: min(540px, 100%); }
.legal-aceite-caixa h2 { margin: 0; color: var(--ink); font-size: 15px; letter-spacing: normal; text-transform: none; }
.legal-aceite-caixa .form-cred { max-width: none; }
.legal-config { max-width: 820px; }
.legal-config .grid-form { width: 100%; }
.legal-config .span-2 { grid-column: span 2; }
@media (max-width: 520px) { .legal-config .span-2 { grid-column: auto; } }
.credenciais-meta { margin: 12px 0 16px; }
.credenciais-meta > details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 18px 16px; }
.credenciais-meta summary { cursor: pointer; padding: 15px 0; font-weight: 700; color: var(--ink); }
.credenciais-meta summary span { margin-left: 8px; }
.credenciais-meta .mini { line-height: 1.5; }
.meta-acoes-principais { margin: 10px 0 2px; }
.bloco-avancado {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 0 18px 18px;
}
.bloco-avancado > summary { cursor: pointer; padding: 15px 0; font-weight: 700; color: var(--ink-2); }
.bloco-avancado > summary::marker { color: var(--ink-3); }
.alerta-teste {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid rgba(255, 184, 77, .45);
  background: var(--warn-dim); border-radius: var(--r-lg); margin: 10px 0;
}
.alerta-teste strong { display: block; color: var(--warn); margin-bottom: 2px; }
.alerta-teste p { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 600px) { .alerta-teste { align-items: flex-start; flex-direction: column; } }

.qualidade { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 14px; }
.qualidade-grid { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: 22px; }
@media (max-width: 900px) { .qualidade-grid { grid-template-columns: 1fr; } }
.qualidade-num { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.qualidade-num small { font-size: 16px; color: var(--ink-3); font-weight: 600; letter-spacing: 0; }
.qualidade-num.ok { color: var(--ok); } .qualidade-num.mid { color: var(--warn); } .qualidade-num.bad { color: var(--bad); }
.qualidade-txt { margin: 8px 0 6px; font-size: 13px; color: var(--ink-2); }
.qualidade-nota .mini { line-height: 1.5; }
.sinal { display: grid; grid-template-columns: 150px 1fr 42px; align-items: center; gap: 10px; font-size: 12px; padding: 3px 0; }
.sinal-rotulo { color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }
.sinal-rotulo small { color: var(--ink-3); font-size: 10px; }
.sinal-barra { height: 7px; background: rgba(0,0,0,.3); border-radius: var(--pill); overflow: hidden; }
.sinal-barra b { display: block; height: 100%; border-radius: var(--pill); background: var(--ok); }
.sinal-barra b.mid { background: var(--warn); } .sinal-barra b.bad { background: var(--bad); }
.sinal-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.dicas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dica { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-2); padding: 8px 10px; border-radius: var(--r); background: var(--surface-2); }
.dica-nivel { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: var(--pill); margin-top: 2px; }
.dica.alto .dica-nivel { background: var(--bad-dim); color: var(--bad); }
.dica.medio .dica-nivel { background: var(--warn-dim); color: var(--warn); }
.dica.baixo .dica-nivel, .dica.info .dica-nivel { background: rgba(255,255,255,.08); color: var(--ink-2); }
.dica.ok .dica-nivel { background: var(--ok-dim); color: var(--ok); }

.mq { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-size: 12px; }
.mq i { display: inline-block; width: 54px; height: 6px; background: rgba(0,0,0,.3); border-radius: var(--pill); overflow: hidden; }
.mq i b { display: block; height: 100%; background: var(--ok); border-radius: var(--pill); }
.mq i.mid b { background: var(--warn); } .mq i.bad b { background: var(--bad); }
.params { font-variant-numeric: tabular-nums; font-weight: 600; }
.params small { color: var(--ink-3); font-weight: 500; margin-left: 4px; font-size: 10.5px; }

/* ------------------------------------------ política de dados enviados */

.politica { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 14px; }
.pol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pol-grupo { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px 14px; }
.pol-grupo-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 8px; }
.pol-grupo-titulo small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pol-item { display: grid; grid-template-columns: 1fr auto 78px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-2); cursor: pointer; }
.pol-item:first-of-type { border-top: 0; }
.pol-item.sensivel { background: linear-gradient(90deg, rgba(255,176,32,.07), transparent 60%); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--r); }
.pol-rotulo { font-size: 13px; }
.pol-rotulo small { display: block; color: var(--ink-3); font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
.pol-estado { font-size: 11.5px; color: var(--ink-3); text-align: right; }
.switch { position: relative; width: 38px; height: 22px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; background: rgba(255,255,255,.14); border-radius: var(--pill); transition: background .15s; }
.switch i::after { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + i { background: var(--ok); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:disabled + i { opacity: .5; }
.pol-valor { margin-top: 14px; }
.pol-valor-opcoes, .pol-fallback { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; padding: 4px 0; }
.pol-fallback { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 10px; color: var(--ink-2); }
.radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pol-fixo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; }
.pol-fixo input { width: 90px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r); padding: 5px 8px; font: inherit; font-size: 13px; }
.pol-previa { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.previa-topo { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.previa-linha { display: grid; grid-template-columns: 220px 130px 1fr; gap: 10px; align-items: baseline; font-size: 13px; padding: 3px 0; }
.previa-linha b.ok { color: var(--ok); font-size: 15px; } .previa-linha b.bad { color: var(--bad); }
.previa-linha small { color: var(--ink-3); }
@media (max-width: 700px) { .previa-linha { grid-template-columns: 1fr; gap: 2px; } }

/* matriz disponível × permite × enviado */
.matriz .sim { color: var(--ok); font-weight: 600; } .matriz .nao { color: var(--ink-3); }
.matriz tr.est-bloqueado td { background: rgba(255,176,32,.05); }
.matriz tr.est-invalido td { background: rgba(255,92,124,.05); }
.sinal.desligado .sinal-rotulo { color: var(--ink-3); }
.sinal-barra b.off { background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px); }
.dica.config .dica-nivel { background: var(--azul-fraco); color: var(--azul-alto); }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-caixa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); width: min(860px, 100%); max-height: 90vh; overflow: auto; padding: 16px 18px; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.modal-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.modal pre { max-height: 320px; overflow: auto; }

/* ------------------------------------------------------- rastreamento */
.rastreio-como { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 14px; }
.opcao { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; }
.opcao:hover { background: var(--surface-2); }
.opcao input { margin-top: 3px; }
.opcao span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.opcao small { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.opcao input:checked ~ span strong { color: var(--azul-alto); }
.rastreio-painel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.wa-link { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; }
.landing-builder { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); gap: 20px; align-items: start; margin-top: 16px; }
.landing-form { max-width: none; margin: 0; }
.landing-form-grupo { display: grid; gap: 9px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.landing-form-grupo > strong { font-size: 12px; color: var(--ink); }
.landing-form .span-2 { grid-column: span 2; }
.landing-form textarea { min-height: 70px; }
.landing-form-acoes { margin: 2px 0 0; }
.landing-logo-upload { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.landing-logo-upload input[type="file"] { min-width: 0; flex: 1 1 260px; padding: 6px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font-size: 12px; }
.landing-logo-upload input[type="file"]::file-selector-button { margin-right: 9px; padding: 7px 10px; border: 0; border-radius: 7px; background: var(--azul); color: #fff; font-weight: 750; cursor: pointer; }
.campo-cor { display: flex; align-items: center; min-height: 35px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 4px 8px; gap: 8px; }
.campo-cor input { width: 40px !important; height: 25px; padding: 0 !important; border: 0 !important; background: transparent !important; cursor: pointer; }
.campo-cor output { font-family: var(--mono); color: var(--ink-2); font-size: 11px; text-transform: lowercase; }
.landing-preview-wrap { position: sticky; top: 62px; display: grid; gap: 9px; }
.landing-preview-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; }
.landing-preview-top span { color: var(--ink-3); font-size: 10.5px; }
.landing-phone { width: min(330px, 100%); margin: 0 auto; padding: 9px; background: #050607; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; box-shadow: 0 22px 54px rgba(0,0,0,.35); }
.landing-phone::before { content: ''; display: block; width: 72px; height: 6px; border-radius: 999px; background: #24272c; margin: 2px auto 8px; }
.landing-mini { --lp:#16a36a; min-height: 560px; border-radius: 20px; overflow: hidden; padding: 24px 19px; background: #090d12; color: #fff; position: relative; }
.landing-mini::after { content: ''; position: absolute; width: 210px; height: 210px; border-radius: 50%; filter: blur(60px); background: var(--verde); opacity: .17; right: -105px; top: -80px; pointer-events: none; }
.landing-mini-head { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.landing-mini-logo { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--verde); color: #fff; font-size: 12px; overflow: hidden; }
.landing-mini-logo.has-logo { padding: 3px; background: #fff; border: 1px solid #dfe8e2; }
.landing-mini-logo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.landing-mini-kicker { display: inline-block; position: relative; z-index: 1; margin-top: 27px; border: 1px solid color-mix(in srgb,var(--verde) 42%,transparent); background: color-mix(in srgb,var(--verde) 11%,transparent); color: color-mix(in srgb,var(--verde) 55%,white); border-radius: 999px; padding: 5px 8px; font-size: 8.5px; font-weight: 750; }
.landing-mini h3 { position: relative; z-index: 1; margin: 11px 0 10px; font-size: 29px; line-height: 1.03; letter-spacing: -.045em; color: inherit; text-transform: none; }
.landing-mini p { position: relative; z-index: 1; margin: 0; color: #aab8c7; font-size: 11px; line-height: 1.55; }
.landing-mini-price { position: relative; z-index: 1; margin-top: 15px; font-size: 19px; font-weight: 850; letter-spacing: -.03em; }
.landing-mini-lead { position: relative; z-index: 1; margin-top: 17px; }
.landing-mini-lead b { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 9px; padding: 10px 9px; background: var(--verde); color: #fff; text-align: center; font-size: 9px; }
.landing-mini-lead small { display: block; margin-top: 6px; color: #7f8c99; text-align: center; font-size: 7.5px; }
.landing-mini-product { position: relative; z-index: 1; margin-top: 20px; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(3,7,10,.45); }
.landing-mini-product b { display: block; font-size: 13px; margin-bottom: 10px; }
.landing-mini-product ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; color: #c4d0da; font-size: 9.5px; }
.landing-mini-product li { display: flex; gap: 7px; }
.landing-mini-product li::before { content: '✓'; color: var(--verde); font-weight: 900; }
.landing-mini.clean { background: #f4f7fa; color: #17212b; }
.landing-mini.clean p { color: #5c6b79; }
.landing-mini.clean .landing-mini-lead small { color: #71808d; }
.landing-mini.clean .landing-mini-product { background: #fff; border-color: #dce5ec; }
.landing-mini.clean .landing-mini-product ul { color: #566675; }
.landing-mini.premium { background: #0e0b07; }
.landing-mini.premium .landing-mini-product { border-color: rgba(218,180,91,.22); background: #090705; }
.landing-mini { min-height: 610px; padding: 0; background: #eef3ef; color: #14251f; border: 1px solid #dfe8e2; }
.landing-mini::after { width: 170px; height: 170px; opacity: .1; right: -85px; top: 35px; }
.landing-mini-top { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; background: #fff; border-bottom: 1px solid #dfe8e2; position: relative; z-index: 2; }
.landing-mini-head { color: #14251f; }
.landing-mini-online { color: #60716a; font-size: 7.5px; font-weight: 700; }
.landing-mini-online::first-letter { color: #22b573; }
.landing-mini-stage { min-height: 215px; display: grid; place-items: center; position: relative; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb,var(--verde) 8%,#f4f7f5), #fff); }
.landing-mini-card { width: 126px; min-height: 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 11px; border-radius: 19px; background: linear-gradient(145deg,#fff,color-mix(in srgb,var(--verde) 5%,#f7f8f6)); box-shadow: 0 17px 36px rgba(25,55,43,.16); transform: rotate(1.5deg); position: relative; }
.landing-mini-card::after { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb,var(--verde) 12%,transparent); border-radius: 14px; }
.landing-mini-card small { position: relative; z-index: 1; color: #60716a; font-size: 5.8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.landing-mini-card strong { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; margin: 11px 0 9px; border-radius: 15px; background: var(--verde); color: #fff; font-size: 20px; box-shadow: 0 9px 20px color-mix(in srgb,var(--verde) 27%,transparent); overflow: hidden; }
.landing-mini-card strong.has-logo { padding: 5px; background: #fff; border: 1px solid #dfe8e2; box-shadow: 0 9px 20px rgba(25,55,43,.12); }
.landing-mini-card strong img { width: 100%; height: 100%; display: block; object-fit: contain; }
.landing-mini-card b { position: relative; z-index: 1; max-width: 98px; color: #14251f; text-align: center; font-size: 8.5px; line-height: 1.15; }
.landing-mini-media { position: relative; z-index: 1; width: 154px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 17px 36px rgba(25,55,43,.18); transform: rotate(1deg); }
.landing-mini-media img, .landing-mini-media video { display: block; width: 100%; aspect-ratio: 4 / 5; background: #090d0b; }
.landing-mini-media img { object-fit: cover; }
.landing-mini-media video { object-fit: contain; }
.landing-mini-media span { display: block; padding: 8px 9px 9px; overflow: hidden; color: #14251f; font-size: 8px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.landing-mini-stage em { position: absolute; right: 14px; bottom: 18px; padding: 6px 8px; border-radius: 8px; background: #fff; color: #223c32; box-shadow: 0 8px 18px rgba(25,55,43,.12); font-size: 6.5px; font-style: normal; font-weight: 800; }
.landing-mini-body { padding: 17px 15px 20px; background: #fff; position: relative; z-index: 1; }
.landing-mini-kicker { margin-top: 0; color: color-mix(in srgb,var(--verde) 75%,#183027); background: color-mix(in srgb,var(--verde) 9%,white); border-color: color-mix(in srgb,var(--verde) 22%,white); }
.landing-mini h3 { margin: 9px 0 7px; color: #14251f; font-size: 24px; }
.landing-mini p { color: #60716a; font-size: 9.5px; }
.landing-mini-benefits { display: grid; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; color: #263d35; font-size: 8px; font-weight: 650; }
.landing-mini-benefits li { display: flex; align-items: flex-start; gap: 6px; }
.landing-mini-benefits li::before { content: '✓'; flex: none; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb,var(--verde) 11%,white); color: var(--verde); font-size: 7px; font-weight: 900; }
.landing-mini-price { color: #14251f; }
.landing-mini-lead b { min-height: 42px; border-radius: 11px; font-size: 9.5px; box-shadow: 0 9px 22px color-mix(in srgb,var(--verde) 25%,transparent); }
.landing-mini.clean { background: #f2f5f9; color: #13233a; border-color: #e1e7ee; }
.landing-mini.clean .landing-mini-head, .landing-mini.clean h3, .landing-mini.clean .landing-mini-card b, .landing-mini.clean .landing-mini-price { color: #13233a; }
.landing-mini.clean .landing-mini-body, .landing-mini.clean .landing-mini-top { background: #fff; }
.landing-mini.clean .landing-mini-stage { background: linear-gradient(180deg,color-mix(in srgb,var(--verde) 7%,#f4f7fb),#fff); }
.landing-mini.premium { background: #181612; color: #f8f3e9; border-color: #312d25; }
.landing-mini.premium .landing-mini-top, .landing-mini.premium .landing-mini-body { background: #181612; border-color: #312d25; }
.landing-mini.premium .landing-mini-head, .landing-mini.premium h3, .landing-mini.premium .landing-mini-card b, .landing-mini.premium .landing-mini-price { color: #f8f3e9; }
.landing-mini.premium .landing-mini-online, .landing-mini.premium p, .landing-mini.premium .landing-mini-card small { color: #aaa294; }
.landing-mini.premium .landing-mini-stage { background: linear-gradient(180deg,color-mix(in srgb,var(--verde) 10%,#211e18),#181612); }
.landing-mini.premium .landing-mini-card { background: linear-gradient(145deg,#242019,#15130f); box-shadow: 0 17px 36px rgba(0,0,0,.3); }
.landing-mini.premium .landing-mini-media { background: #211e18; box-shadow: 0 17px 36px rgba(0,0,0,.3); }
.landing-mini.premium .landing-mini-media span { color: #f8f3e9; }
.landing-mini.premium .landing-mini-stage em { background: #211e18; color: #f8f3e9; }
.landing-mini.premium .landing-mini-benefits { color: #ded6c8; }
.wa-link .url-hook { margin-top: 8px; }
.wa-link-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 960px) { .landing-builder { grid-template-columns: 1fr; } .landing-preview-wrap { position: static; } }
@media (max-width: 560px) { .landing-form .span-2 { grid-column: auto; } .landing-preview-top { flex-direction: column; } .landing-phone { width: 100%; max-width: 340px; } }
/* ================================================================
   Painel — KPIs em três níveis.

   Antes: oito cartões idênticos numa fileira de 8 colunas. Todos com o
   mesmo peso visual, então nenhum tinha peso nenhum — a pessoa lia os
   oito ou não lia nenhum.

   Agora a fileira vira três grupos, e cada um responde uma pergunta:
     .kpi-dinheiro   quanto entrou           (grande, verde, à esquerda)
     .kpi-operacao   como está a operação    (quatro números iguais, 2x2)
     .kpi-saude      o rastreio está de pé?  (menor, à direita)

   Mantém .kpi/.k/.v/.s do sistema atual — os cartões de operação são os
   mesmos de antes, só reagrupados. Nada aqui é cor nova.
   ================================================================ */

.kpis-3 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 2fr) minmax(0, 1.5fr);
  gap: 12px;
  margin-bottom: 14px;
}

/* ---------------------------------------------------- dinheiro */

.kpi-dinheiro {
  background: var(--surface);
  border: 1px solid rgba(34, 208, 122, .22);
  border-radius: var(--r-lg);
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.kpi-dinheiro .k {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.kpi-dinheiro .v {
  font-size: 38px; font-weight: 750; letter-spacing: -0.04em;
  margin-top: 6px; line-height: 1.05; color: var(--ok);
}
.kpi-dinheiro .s {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 11px; color: var(--ink-3);
}
.kpi-dinheiro-pe {
  border-top: 1px solid var(--line-2); margin-top: 14px; padding-top: 10px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.kpi-dinheiro-pe span { font-size: 11.5px; color: var(--ink-3); }
.kpi-dinheiro-pe b { font-size: 14px; font-weight: 700; }

/* --------------------------------------------------- operação */

.kpi-operacao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

/* ----------------------------------------------- saúde técnica */

.kpi-saude {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.kpi-saude > .k {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.saude-linha {
  display: flex; align-items: center; gap: 10px;
}
.saude-linha + .saude-linha,
.saude-bloco {
  border-top: 1px solid var(--line-2); padding-top: 10px;
}
.saude-linha .rot { font-size: 12px; color: var(--ink-2); }
.saude-linha .val {
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-top: 1px;
}
.saude-linha .val small { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.saude-bloco .topo {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px;
}
.saude-bloco .topo span { font-size: 12px; color: var(--ink-2); }
.saude-bloco .topo b { font-size: 12px; font-weight: 700; }
.saude-barra {
  height: 6px; background: rgba(0, 0, 0, .3); border-radius: var(--pill); overflow: hidden;
}
.saude-barra i { display: block; height: 100%; background: var(--ok); border-radius: var(--pill); }
.saude-barra i.mid { background: var(--warn); }
.saude-barra i.bad { background: var(--bad); }

/* ------------------------------------------------------ mobile */

@media (max-width: 1240px) and (min-width: 901px) {
  .kpis-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .kpi-saude { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; }
  .kpi-saude > .k { flex: none; }
  .saude-linha + .saude-linha, .saude-bloco {
    border-top: 0; border-left: 1px solid var(--line-2); padding-top: 0; padding-left: 18px;
  }
  .saude-bloco { flex: 1; min-width: 140px; }
}

@media (max-width: 900px) {
  .kpis-3 { grid-template-columns: 1fr; gap: 10px; }
  .kpi-dinheiro .v { font-size: 30px; }
  .kpi-operacao { gap: 10px; }
  .kpi-saude { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .kpi-saude > .k { flex-basis: 100%; }
  .saude-linha + .saude-linha, .saude-bloco {
    border-top: 0; border-left: 1px solid var(--line-2); padding-top: 0; padding-left: 14px;
  }
  .saude-bloco { flex: 1; min-width: 130px; }
}

/* ============================================================ Tutoriais
   Grade de vídeos curtos. O cartão funciona com ou sem vídeo: sem `data-video`
   ele mostra "em breve" no mesmo espaço, então a página nunca fica quebrada
   enquanto a gravação não sai. */
.tut-intro { max-width: 62ch; margin-bottom: 18px; }
.tut-intro h2 { font-size: 17px; margin: 0 0 6px; }
.tut-intro p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }

.tut-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.tut-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .16s ease, transform .16s ease;
}
.tut-card:hover { border-color: rgba(74, 141, 255, .38); transform: translateY(-2px); }

/* 16:9 preservado sem depender de altura fixa */
.tut-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-2);
}
.tut-video iframe,
.tut-video .tut-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tut-embreve {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  color: var(--ink-3);
  background: repeating-linear-gradient(115deg, transparent 0 12px, rgba(255,255,255,.016) 12px 24px);
}
.tut-embreve span { font-size: 11.5px; letter-spacing: .02em; }

.tut-play {
  cursor: pointer; padding: 0;
  background-color: var(--bg-deep);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
}
.tut-play::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.28); transition: background .16s ease; }
.tut-play:hover::after { background: rgba(0,0,0,.12); }
.tut-play-icone {
  position: relative; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: #fff; font-size: 15px; padding-left: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}
.tut-play:focus-visible { outline: 2px solid var(--azul-alto); outline-offset: -3px; }

.tut-corpo { display: flex; gap: 11px; padding: 13px 14px 4px; flex: 1; }
.tut-num {
  flex: none; width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(74, 141, 255, .13); color: var(--azul-alto);
  font-size: 11.5px; font-weight: 700;
}
.tut-texto h3 { font-size: 13.5px; margin: 1px 0 5px; }
.tut-texto p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }

.tut-pe {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px 12px; font-size: 11.5px;
}
.tut-dur { color: var(--ink-3); }
.tut-pe a { color: var(--azul-alto); text-decoration: none; }
.tut-pe a:hover { text-decoration: underline; }

.tut-rodape {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-2);
}
.tut-rodape strong { display: block; color: var(--ink); margin-bottom: 3px; font-size: 12.5px; }
.tut-rodape a { color: var(--azul-alto); }

@media (max-width: 560px) {
  .tut-grade { grid-template-columns: 1fr; }
}

/* ================================================== blocos dobráveis (ROAS)
   Ação ocasional não precisa ficar aberta o tempo todo empurrando o conteúdo
   principal para baixo: o que já existe aparece primeiro, conectar e criar
   regras ficam a um clique. */
.bloco-dobra {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin: 10px 0 16px;
  overflow: hidden;
}
.bloco-dobra > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; list-style: none;
}
.bloco-dobra > summary::-webkit-details-marker { display: none; }
.bloco-dobra > summary::before {
  content: '\203A'; color: var(--ink-3); font-size: 15px; line-height: 1;
  transition: transform .15s ease; flex: none;
}
.bloco-dobra[open] > summary::before { transform: rotate(90deg); }
.bloco-dobra > summary:hover { background: var(--hover); }
.dobra-titulo { font-size: 13px; font-weight: 700; }
.dobra-dica { font-size: 11.5px; color: var(--ink-3); }
.dobra-corpo {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--line-2);
  display: grid; gap: 12px;
}
.dobra-corpo > .note:first-child { margin-top: 12px; }

/* grupos do formulário de automação: cada bloco responde uma pergunta */
.grupo-campos { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.grupo-campos + .grupo-campos { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.grupo-campos > legend {
  padding: 0; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.linha-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.linha-acoes .spacer { flex: 1; }

/* ============================================== abas de campanhas (ROAS)
   O Gerenciador de Anuncios separa os niveis em abas, nao em arvore: e o
   vocabulario que quem anuncia ja conhece. */
.abas-ads {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 0; padding: 0 2px;
}
.aba-ads {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 9px 13px; cursor: pointer; margin-bottom: -1px;
}
.aba-ads:hover { color: var(--ink-2); }
.aba-ads.ativa { color: var(--ink); border-bottom-color: var(--azul-alto); }
.aba-cont {
  background: rgba(255, 255, 255, .08); color: var(--ink-3);
  border-radius: var(--pill); padding: 1px 7px; font-size: 10.5px; font-weight: 700;
}
.aba-ads.ativa .aba-cont { background: var(--azul-fraco); color: var(--azul-alto); }

/* chip do filtro, como o "1 selecionado" do Gerenciador */
.filtro-ads {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--azul-fraco); color: var(--azul-alto);
  border-radius: var(--pill); padding: 4px 8px 4px 12px; font-size: 11.5px; font-weight: 600;
}
.filtro-ads button {
  background: none; border: 0; color: inherit; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1; padding: 0 3px; opacity: .7;
}
.filtro-ads button:hover { opacity: 1; }

/* veiculação: o ponto diz o estado antes de a pessoa ler o texto */
.veic { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; }
.veic::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.veic.on { color: var(--ok); }
.veic.on::before { background: var(--ok); box-shadow: 0 0 7px rgba(34, 208, 122, .7); }
.veic.off { color: var(--ink-3); }
.veic.alerta { color: var(--warn); }
.veic.alerta::before { background: var(--warn); }

/* nome clicável: leva ao nível de baixo, como no Gerenciador */
.nome-ads { color: var(--azul-alto); cursor: pointer; }
.nome-ads:hover { text-decoration: underline; }
.pai-ads { color: var(--ink-3); font-size: 11px; }

/* ------------------------------------------- edicao inline de campanhas
   Reaproveita o .switch da pagina de politica, em escala de tabela. */
.mini-switch { width: 30px; height: 17px; vertical-align: middle; margin-right: 7px; }
.mini-switch i::after { width: 12px; height: 12px; left: 2.5px; top: 2.5px; }
.mini-switch input:checked + i::after { transform: translateX(13px); }

/* valor que se edita ao clicar: parece dado, comporta-se como botao */
.editar-ads {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, .25);
}
.editar-ads:hover { color: var(--azul-alto); border-bottom-color: var(--azul-alto); text-decoration: none; }

/* ------------------------------------------------- selecao em massa (ROAS) */
.col-sel { width: 34px; padding-right: 0; }
.col-sel input { cursor: pointer; accent-color: var(--azul); width: 15px; height: 15px; }
tr.linha-marcada > td { background: rgba(0, 90, 227, .09); }

.barra-selecao {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--azul-fraco); border: 1px solid rgba(0, 90, 227, .3);
  border-radius: var(--r); padding: 7px 10px; margin: 10px 0 -4px;
}
.conta-selecao { font-size: 12px; font-weight: 700; color: var(--azul-alto); margin-right: 4px; }
.barra-selecao .act { background: var(--surface); }
.barra-sep { width: 1px; height: 18px; background: rgba(255,255,255,.14); margin: 0 2px; }

/* ------------------------------------------- popup de criar campanha */
#formCriarCampanha textarea { width: 100%; box-sizing: border-box; }
.campo-imagem { display: grid; gap: 6px; margin-top: 12px; }
.rot-imagem { font-size: 12px; color: var(--ink-2); }
.campo-imagem input[type=file] { font-size: 12px; color: var(--ink-2); }
#criarImagemPreview img {
  max-width: 220px; border-radius: var(--r); border: 1px solid var(--line); margin-top: 8px; display: block;
}
#criarAviso { margin-top: 12px; }

/* ==================================================================
   FLUXO DE CRIACAO DE CAMPANHA
   Quatro etapas num modal largo. Tudo aqui usa os tokens do projeto —
   nenhuma cor, fonte ou raio novo foi inventado.
   ================================================================== */

/* ---------------------------------------------------------- stepper */
.fluxo-topo {
  padding: 14px 18px 0;
  border-bottom: 1px solid var(--line);
  flex: none;
}

/* ---------------------------------------------------------- corpo */
.fluxo-corpo {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
/* etapa do anuncio: formulario + previa lado a lado */
.fluxo-corpo.com-previa { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }

.fluxo-pe {
  flex: none; padding: 11px 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; background: var(--bg-deep);
}
.fluxo-pe .spacer { flex: 1; }

/* --------------------------------------------------- secoes dobraveis */
/* `overflow: hidden` fazia a secao cortar o proprio miolo quando o espaco
   apertava. O canto arredondado passa a vir do summary, que e quem encosta
   na borda de cima. */
.secao {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.secao > summary { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.secao:not([open]) > summary { border-radius: var(--r-lg); }
.secao > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 14px; list-style: none; font-size: 13px; font-weight: 700;
}
.secao > summary::-webkit-details-marker { display: none; }
.secao > summary::before {
  content: '\203A'; color: var(--ink-3); font-size: 15px; line-height: 1;
  transition: transform .15s ease; flex: none;
}
.secao[open] > summary::before { transform: rotate(90deg); }
.secao > summary:hover { background: var(--hover); }
.secao-dica { font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.secao-corpo { padding: 4px 14px 14px; border-top: 1px solid var(--line-2); display: grid; gap: 12px; }
.secao.erro { border-color: var(--bad); }
.secao > summary .pill { margin-left: auto; }

/* ------------------------------------------------- escolha em cartoes */
.escolhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.escolha {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 14px; cursor: pointer; background: var(--bg-deep);
  display: grid; gap: 4px; text-align: left; font-family: inherit; color: inherit;
}
.escolha:hover { border-color: rgba(255, 255, 255, .2); }
.escolha.ativa { border-color: var(--azul); background: var(--azul-fraco); }
.escolha-titulo { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.escolha-sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.escolha .marca {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1.6px solid var(--ink-3); display: grid; place-items: center;
}
.escolha.ativa .marca { border-color: var(--azul-alto); }
.escolha.ativa .marca::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--azul-alto);
}

/* objetivos: grade menor, com icone */
.escolhas.objetivos { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.escolhas.objetivos .escolha { padding: 11px 12px; }
.escolhas.objetivos .escolha-titulo { font-size: 12.5px; }

/* ------------------------------------------------------ campos */
.campo { display: grid; gap: 5px; min-width: 0; }
.campo > span, .campo > label { font-size: 11.5px; color: var(--ink-2); }
.campo .ajuda { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-color: var(--bad); }
.campo-erro { font-size: 11px; color: var(--bad); }
.campo-erro:empty { display: none; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tripla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.prefixo { display: flex; align-items: center; gap: 0; }
.prefixo span {
  padding: 6px 9px; background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line); border-right: 0;
  border-radius: var(--r) 0 0 var(--r); font-size: 12px; color: var(--ink-3);
}
.prefixo input { border-radius: 0 var(--r) var(--r) 0; flex: 1; min-width: 0; }

/* ------------------------------------------------------ fichas (chips) */
.fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .07); border-radius: var(--pill);
  padding: 3px 6px 3px 10px; font-size: 11.5px;
}
.ficha.exclui { background: var(--bad-dim); color: var(--bad); }
.ficha button {
  background: none; border: 0; color: inherit; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1; padding: 0 2px; opacity: .65;
}
.ficha button:hover { opacity: 1; }
.fichas-vazio { font-size: 11.5px; color: var(--ink-3); }

/* --------------------------------------------- posicionamentos */
.grupo-posic { border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; }
.grupo-posic > .titulo {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  font-weight: 700; margin-bottom: 8px;
}
.opcoes-posic { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px 12px; }
.op-check { display: flex; align-items: center; gap: 7px; font-size: 12px; cursor: pointer; }
.op-check input { accent-color: var(--azul); width: 14px; height: 14px; }

/* ------------------------------------------------------ previa */
.previa-caixa { position: sticky; top: 0; display: grid; gap: 10px; }
.previa-abas { display: flex; gap: 4px; flex-wrap: wrap; }
.previa-aba {
  background: rgba(255, 255, 255, .06); border: 0; border-radius: var(--pill);
  color: var(--ink-3); font: inherit; font-size: 11px; padding: 4px 10px; cursor: pointer;
}
.previa-aba.ativa { background: var(--azul-fraco); color: var(--azul-alto); font-weight: 600; }
.previa-tela {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.previa-topo { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.previa-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--azul-fraco); color: var(--azul-alto);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.previa-nome { font-size: 12px; font-weight: 600; }
.previa-patro { font-size: 10.5px; color: var(--ink-3); }
.previa-texto { padding: 0 12px 10px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.previa-midia {
  aspect-ratio: 1 / 1; background: var(--bg-deep);
  display: grid; place-items: center; color: var(--ink-3); font-size: 11.5px;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.previa-midia.vertical { aspect-ratio: 9 / 16; }
.previa-midia img, .previa-midia video { width: 100%; height: 100%; object-fit: cover; }
.previa-rodape {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255, 255, 255, .03);
}
.previa-rodape .destino { flex: 1; min-width: 0; }
.previa-rodape .dominio { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.previa-rodape .titulo { font-size: 12px; font-weight: 600; }
.previa-cta {
  background: rgba(255, 255, 255, .1); border-radius: var(--r);
  padding: 6px 11px; font-size: 11.5px; font-weight: 600; flex: none;
}

/* ------------------------------------------------------ carrossel */
.cards-carrossel { display: grid; gap: 10px; }
.card-carrossel { border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 8px; }
.card-carrossel-topo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }

/* ------------------------------------------------------ revisao */
.revisao { display: grid; gap: 12px; }
.rev-bloco { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.rev-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-2);
}
.rev-topo .cartao-titulo { flex: 1; }
.rev-linhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px 20px; padding: 12px 14px; }
.rev-item { display: grid; gap: 2px; min-width: 0; }
.rev-rot { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.rev-val { font-size: 12.5px; word-break: break-word; }
.rev-val.vazio { color: var(--ink-3); }

/* lista de erros da validacao final */
.lista-erros { display: grid; gap: 5px; margin: 6px 0 0; padding-left: 18px; }
.lista-erros li { font-size: 12px; }
.lista-erros button {
  background: none; border: 0; color: var(--azul-alto); cursor: pointer;
  font: inherit; font-size: 12px; padding: 0; text-decoration: underline;
}

/* ------------------------------------------------ arvore lateral */
.fluxo-arvore { display: grid; gap: 3px; font-size: 12px; }
.arvore-item { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: var(--r); }
.arvore-item.nivel-2 { margin-left: 14px; }
.arvore-item.nivel-3 { margin-left: 28px; }
.arvore-item.atual { background: var(--azul-fraco); color: var(--azul-alto); font-weight: 600; }

/* ------------------------------------------- telas menores (notebook) */
@media (max-height: 900px) {
  .modal { padding: 10px; }
  .fluxo-corpo { padding: 12px 14px; gap: 10px; }
  .secao-corpo { padding: 4px 12px 12px; gap: 10px; }
}
@media (max-width: 1100px) {
  .fluxo-corpo.com-previa { grid-template-columns: 1fr; }
  .previa-caixa { position: static; max-width: 360px; }
}

/* ==================================================================
   FLUXO EM TELA CHEIA
   Criar campanha ocupa a tela inteira: sao dezenas de campos, e um
   modal flutuante deixaria metade deles fora do alcance.
   ================================================================== */
.tela-cheia {
  position: fixed; inset: 0; z-index: 70;
  background: var(--bg);
  display: grid; grid-template-rows: auto 1fr auto;
}
.tela-cheia[hidden] { display: none; }

/* ------------------------------------------------------------ topo */
.tc-topo {
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px 0 20px; height: 54px;
  border-bottom: 1px solid var(--line); background: var(--bg-deep);
}
.tc-marca { display: grid; gap: 1px; flex: none; }
.tc-titulo { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.tc-sub { font-size: 11px; color: var(--ink-3); }
.tc-fechar {
  background: none; border: 0; color: var(--ink-3);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.tc-fechar:hover { color: var(--ink); }

/* ------------------------------------------------------------ meio */
.tc-meio { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 0; }

.tc-lado {
  border-right: 1px solid var(--line); background: var(--bg-deep);
  padding: 12px; overflow-y: auto; display: grid; gap: 10px;
  align-content: start;
}
.tc-busca { position: relative; display: flex; align-items: center; }
.tc-busca .lupa { position: absolute; left: 9px; color: var(--ink-3); font-size: 13px; }
.tc-busca input {
  width: 100%; padding: 6px 10px 6px 26px; font-size: 12px;
  border-radius: var(--pill);
}

/* ------------------------------------------------------- a árvore */
.fluxo-arvore { display: grid; gap: 2px; align-content: start; }
.arvore-grupo { display: grid; gap: 2px; }
.arvore-item {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: var(--r); cursor: pointer;
  font-size: 12px; color: var(--ink-2); border: 0; background: none;
  font-family: inherit; text-align: left; width: 100%; min-width: 0;
}
.arvore-item:hover { background: var(--hover); }
.arvore-item.atual { background: var(--azul-fraco); color: var(--azul-alto); font-weight: 600; }
.arvore-item .nome {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.arvore-item .ic { flex: none; opacity: .75; display: grid; place-items: center; }
.arvore-item.nivel-2 { padding-left: 20px; }
.arvore-item.nivel-3 { padding-left: 36px; }
.arvore-item.incompleto .nome::after {
  content: '•'; color: var(--warn); margin-left: 6px; font-size: 15px; line-height: 0;
}
.arvore-add {
  font-size: 11.5px; color: var(--azul-alto); background: none; border: 0;
  cursor: pointer; padding: 5px 8px; text-align: left; font-family: inherit;
  border-radius: var(--r);
}
.arvore-add:hover { background: var(--hover); }
.arvore-add.nivel-2 { padding-left: 20px; }
.arvore-add.nivel-3 { padding-left: 36px; }
.arvore-secao {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; padding: 8px 8px 2px;
}
.arvore-vazio { font-size: 11.5px; color: var(--ink-3); padding: 8px; }

/* --------------------------------------------------------- corpo */
/* Empilhar em FLEX, nao em grid: um grid com mais conteudo que espaco encolhe
   as linhas proporcionalmente, e ai scrollHeight = clientHeight e a barra de
   rolagem nunca aparece — os campos somem sem aviso. Em flex-column cada
   secao mantem a altura que pede e a rolagem passa a existir de verdade. */
.tela-cheia .fluxo-corpo {
  overflow-y: auto; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 0;              /* essencial dentro do grid de .tc-meio */
}
.tela-cheia .fluxo-corpo > * { flex: 0 0 auto; }

/* Com a previa, volta a ser grid — mas de duas colunas de verdade. */
.tela-cheia .fluxo-corpo.com-previa {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start; align-content: start;
}
/* A barra de acoes atravessa as duas colunas. Sem isto ela ocupa a primeira
   celula, empurra o formulario para a coluna de 360px e joga a previa para a
   linha de baixo — deixando ~700px de tela em branco. */
.tela-cheia .fluxo-corpo.com-previa > .linha-acoes { grid-column: 1 / -1; }

/* o formulario nao precisa de 1600px de largura para ser lido */
.tela-cheia .fluxo-corpo > div:first-child { max-width: 980px; }
.tela-cheia .fluxo-corpo.com-previa > div:first-child { max-width: none; }

/* ------------------------------------------------------------- pé */
.tc-pe {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 56px;
  border-top: 1px solid var(--line); background: var(--bg-deep);
}

/* ----------------------------------------------- telas menores */
@media (max-height: 800px) {
  .tc-topo { height: 48px; }
  .tc-pe { height: 50px; }
  .tela-cheia .fluxo-corpo { padding: 14px 16px; gap: 10px; }
}
@media (max-width: 1280px) {
  .tela-cheia .fluxo-corpo.com-previa { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1080px) {
  .tc-meio { grid-template-columns: 1fr; }
  .tc-lado { display: none; }
  .tela-cheia .fluxo-corpo.com-previa { grid-template-columns: 1fr; }
  .tc-topo .tc-marca { display: none; }
}

/* ==================================================================
   TRILHA DO TOPO
   No lugar de "etapa 1 de 4": onde voce esta e o tamanho do que ja
   existe abaixo (3 conjuntos, 6 anuncios).
   ================================================================== */
.fluxo-trilha { display: flex; align-items: center; gap: 2px; min-width: 0; }
.trilha-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: var(--r);
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--ink-2);
  max-width: 300px; min-width: 0;
}
.trilha-item:hover:not(:disabled) { background: var(--hover); }
.trilha-item:disabled { cursor: not-allowed; opacity: .45; }
.trilha-item.atual { background: var(--azul-fraco); color: var(--azul-alto); font-weight: 600; }
.trilha-item .ic { flex: none; opacity: .8; display: grid; place-items: center; }
.trilha-item .txt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trilha-seta { color: var(--ink-3); font-size: 15px; flex: none; }

/* -------------------------------------- interruptor de status no topo */
.tc-status { font-size: 11.5px; color: var(--ink-3); }
.tc-liga { position: relative; width: 34px; height: 19px; flex: none; cursor: pointer; }
.tc-liga input { position: absolute; opacity: 0; width: 0; height: 0; }
.tc-liga-pino {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--line-2); transition: background .15s;
}
.tc-liga-pino::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); transition: transform .15s;
}
.tc-liga input:checked + .tc-liga-pino { background: var(--ok); }
.tc-liga input:checked + .tc-liga-pino::after { transform: translateX(15px); }
.tc-liga input:focus-visible + .tc-liga-pino { outline: 2px solid var(--azul-alto); outline-offset: 2px; }

/* ------------------------------------------- botao de recolher a lateral */
.tc-recolher {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  padding: 5px; border-radius: var(--r); display: grid; place-items: center;
  flex: none;
}
.tc-recolher:hover { background: var(--hover); color: var(--ink); }
.tela-cheia.sem-lado .tc-meio { grid-template-columns: minmax(0, 1fr); }
.tela-cheia.sem-lado .tc-lado { display: none; }

@media (max-width: 1080px) {
  .trilha-item .txt { display: none; }
  .trilha-item { padding: 6px; }
}

/* ==================================================================
   DELEGAÇÃO — produtores com acesso e campanhas de afiliados
   ================================================================== */
.item-acesso {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.item-acesso:last-child { border-bottom: 0; }
.item-acesso .quem { display: grid; gap: 2px; min-width: 0; }
.item-acesso .quem strong { font-size: 13.5px; }

/* O código que o afiliado digita: precisa ser lido em voz alta sem erro. */
.codigo-grande {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; padding: 7px 12px;
  background: var(--surface-2); border-radius: var(--r);
  border: 1px dashed var(--line-2);
  /* Chave e snippet sao longos: quebram em vez de vazar para fora do cartao. */
  word-break: break-all; line-height: 1.5;
}

/* Exemplo com mais de uma linha: sem isto tudo vira um paragrafo so, e o
   integrador copia algo diferente do que esta escrito. */
.codigo-grande.multi {
  white-space: pre; word-break: normal; overflow-x: auto; font-size: 13px;
}

/* O acento da plataforma e verde; o azul nativo do navegador destoava. */
#fonteDetalhe .opcao input[type="checkbox"] { accent-color: var(--verde); }

/* Publicar na conta errada é caro. Enquanto o produtor cria para outra
   pessoa, o topo diz de quem é a conta. */
.tc-status.delegado {
  color: var(--warn); font-weight: 600;
  background: var(--warn-dim); padding: 3px 9px; border-radius: var(--pill);
}

.tabela tr.falhou td { opacity: .7; }

@media (max-width: 720px) {
  .item-acesso { align-items: flex-start; }
  .item-acesso .spacer { display: none; }
  .item-acesso select, .item-acesso button { flex: 1 1 auto; }
}

/* ==================================================================
   NOVIDADES — o changelog
   Tres andares em ordem de atencao: a funcao em destaque, as outras
   da leva, e o historico — que vira uma linha so.
   ================================================================== */
#novidades { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }

/* A faixa que separa "esta semana" de "antes disso". */
.nov-faixa { display: flex; align-items: baseline; gap: 10px; }
.nov-faixa span {
  font-size: 10px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .12em;
}
.nov-faixa i { flex: 1; height: 1px; background: var(--line-2); }

/* --------------------------------------------------- o destaque */
.nov-destaque {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.nov-destaque h3 {
  margin: 0; font-size: 19px; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.25; text-wrap: balance;
}
.nov-destaque .nov-corpo { font-size: 13.5px; }
.nov-acao { padding-top: 2px; gap: 10px; }

/* O selo do tipo. */
.nov-selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; padding: 3px 9px 3px 7px;
  border-radius: var(--pill);
}
.nov-selo.ok   { background: var(--ok-dim);   color: var(--ok); }
.nov-selo.warn { background: var(--warn-dim); color: var(--warn); }
.nov-selo.bad  { background: var(--bad-dim);  color: var(--bad); }
.nov-selo svg { width: 11px; height: 11px; }

/* A faixa de atencao: para o que evita um susto caro. */
.nov-atencao {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--warn-dim); border-radius: var(--r); padding: 10px 12px;
  color: var(--warn);
}
.nov-atencao svg { flex: none; margin-top: 1px; }
.nov-atencao p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* --------------------------------------------------- as outras */
.nov-lista { display: flex; flex-direction: column; gap: 10px; }
.nov-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 15px 18px;
  display: flex; gap: 14px; align-items: flex-start;
}
.nov-icone {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
}
.nov-icone.ok   { background: var(--ok-dim);   color: var(--ok); }
.nov-icone.warn { background: var(--warn-dim); color: var(--warn); }
.nov-icone.bad  { background: var(--bad-dim);  color: var(--bad); }
.nov-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nov-texto h3 { margin: 0; font-size: 14px; font-weight: 600; }

.nov-corpo {
  margin: 0; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-2); max-width: 68ch;
}

/* Um atalho, nao um botao: leva para a tela e sai da frente. */
.nov-link {
  align-self: flex-start; background: none; border: 0; padding: 2px 0;
  color: var(--azul-alto); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.nov-link:hover { color: var(--ink); background: none; }

/* --------------------------------------------------- o historico */
.nov-historico { display: flex; flex-direction: column; }
.nov-linha {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--line-2);
  font-size: 13px; color: var(--ink-2);
}
.nov-linha:last-child { border-bottom: 0; }
.nov-linha > span:first-child { flex: 1; min-width: 0; }

/* O contador do menu chama atencao — mas so ate a pessoa abrir a pagina. */
#nav button .badge#badgeNovidades { background: var(--azul); color: #fff; }

@media (max-width: 720px) {
  .nov-destaque h3 { font-size: 17px; }
  .nov-item { padding: 13px 14px; gap: 11px; }
}

/* ===== PRÉVIA: vídeo em tela cheia =================================
   Espelha o modo imersivo da landing real (src/routes/track.js). Só vale
   com .imersivo, que o app.js aplica quando existe vídeo ou foto — sem
   mídia a prévia continua sendo o cartão de produto de antes.
   Vem no fim do arquivo de propósito: assim vence as regras de
   .landing-mini-* acima sem precisar reescrevê-las. */
.landing-mini.imersivo { padding: 0; background: #050706; border-color: #050706; position: relative; }
.landing-mini.imersivo::after { display: none; }

/* A barra da marca flutua SOBRE o vídeo, sem roubar altura dele. */
.landing-mini.imersivo .landing-mini-top { position: absolute; z-index: 3; top: 0; left: 0; right: 0; min-height: 0; padding: 11px 13px; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); border-bottom: 0; }
.landing-mini.imersivo .landing-mini-head { color: #fff; }
.landing-mini.imersivo .landing-mini-online { color: rgba(255,255,255,.82); }

/* O palco deixa de ser uma faixa e passa a ser a tela toda. */
.landing-mini.imersivo .landing-mini-stage { position: absolute; inset: 0; min-height: 0; display: block; background: #050706; }
.landing-mini.imersivo .landing-mini-media { position: absolute; inset: 0; width: auto; border-radius: 0; transform: none; box-shadow: none; background: #050706; overflow: hidden; }
/* cover = preenche sem tarja, cortando o que sobra. */
.landing-mini.imersivo .landing-mini-media img,
.landing-mini.imersivo .landing-mini-media video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
/* O véu é o que mantém o texto branco legível sobre QUALQUER vídeo,
   inclusive um claro. Sem ele a copy some. */
.landing-mini.imersivo .landing-mini-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 34%, rgba(0,0,0,.72) 76%, rgba(4,7,6,.94) 100%); }

/* O texto fica ancorado embaixo, por cima do gradiente. */
.landing-mini.imersivo .landing-mini-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 15px 15px 18px; background: transparent; }
.landing-mini.imersivo h3 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.landing-mini.imersivo p { color: rgba(255,255,255,.82); }
.landing-mini.imersivo .landing-mini-price { color: #fff; }
.landing-mini.imersivo .landing-mini-benefits { color: rgba(255,255,255,.9); }
.landing-mini.imersivo .landing-mini-benefits li::before { background: rgba(255,255,255,.16); color: #fff; }
.landing-mini.imersivo .landing-mini-kicker { color: #fff; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.28); }
.landing-mini.imersivo .landing-mini-lead small { color: rgba(255,255,255,.62); }

/* ===== Escolha do modelo da landing ================================
   Cartões com miniatura do layout: o usuário reconhece a estrutura pelo
   desenho antes de ler o nome. Usa os tokens já existentes da tela. */
.landing-ajuda { margin: 4px 0 12px; color: var(--muted, #60716a); font-size: 11px; line-height: 1.5; }

.modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.modelo-card { position: relative; display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line, #dfe8e2); border-radius: 14px; background: var(--surface, #fff); cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.modelo-card:hover { border-color: var(--lp, #16a36a); }
.modelo-card:active { transform: scale(.995); }
/* O radio some, mas continua sendo ele quem guarda o estado e recebe o
   teclado — por isso opacity/position, nunca display:none. */
.modelo-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.modelo-card:focus-within { outline: 2px solid var(--lp, #16a36a); outline-offset: 2px; }
.modelo-card.escolhido { border-color: var(--lp, #16a36a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp, #16a36a) 15%, transparent); }
.modelo-nome { font-size: 12px; font-weight: 800; }
.modelo-desc { color: var(--muted, #60716a); font-size: 10.5px; line-height: 1.45; }

/* A miniatura: um retângulo com blocos que imitam o layout real. */
.modelo-arte { position: relative; display: block; height: 62px; border-radius: 9px; overflow: hidden; background: linear-gradient(160deg, #223, #111); }
.modelo-arte i, .modelo-arte b, .modelo-arte u { position: absolute; display: block; border-radius: 3px; }
/* vídeo + botão: vídeo cheio, botão embaixo */
.modelo-arte--video-botao i { inset: 0; background: linear-gradient(160deg, #6d4aff, #f0913a); }
.modelo-arte--video-botao b { left: 12%; right: 12%; bottom: 9px; height: 11px; background: var(--lp, #16a36a); }
/* vídeo + texto: vídeo cheio, linhas de texto e botão */
.modelo-arte--video-texto i { inset: 0; background: linear-gradient(160deg, #6d4aff, #f0913a); }
.modelo-arte--video-texto u { left: 12%; width: 52%; bottom: 26px; height: 5px; background: rgba(255,255,255,.9); }
.modelo-arte--video-texto b { left: 12%; right: 12%; bottom: 9px; height: 11px; background: var(--lp, #16a36a); }
/* informativo: duas colunas */
.modelo-arte--informativo { background: #f1f5f2; }
.modelo-arte--informativo i { left: 8%; top: 16%; width: 36%; bottom: 16%; background: linear-gradient(160deg, #cfe0d6, #9fc3ae); }
.modelo-arte--informativo b { right: 8%; top: 30%; width: 36%; height: 9px; background: var(--lp, #16a36a); }
/* quizz: opções empilhadas */
.modelo-arte--quizz i { inset: 0; background: linear-gradient(160deg, #6d4aff, #f0913a); }
.modelo-arte--quizz u { left: 14%; right: 14%; top: 30%; height: 8px; background: rgba(255,255,255,.92); }
.modelo-arte--quizz b { left: 14%; right: 14%; top: 52%; height: 8px; background: rgba(255,255,255,.65); }

/* ===== Editor de perguntas do quizz ================================ */
.quizz-editor { display: grid; gap: 12px; }
.quizz-edit-bloco { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line, #dfe8e2); border-radius: 13px; background: color-mix(in srgb, var(--lp, #16a36a) 3%, var(--surface, #fff)); }
.quizz-edit-topo { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; }
.quizz-edit-opcao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: end; }
.quizz-edit-opcao .act, .quizz-edit-topo .act { min-height: 38px; }
@media (max-width: 700px) { .quizz-edit-opcao { grid-template-columns: 1fr; } }

/* ===== Prévia: modelos ============================================= */
/* Sem texto na prévia do "só botão", a caixa encolhe para o botão. */
.landing-mini.so-botao .landing-mini-body { background: transparent; }
.landing-mini.imersivo.so-botao .landing-mini-body { padding-bottom: 18px; }
.landing-mini-quizz { display: grid; gap: 6px; }
.landing-mini-quizz strong { font-size: 13px; font-weight: 850; line-height: 1.15; }
.landing-mini-quizz span { padding: 8px 10px; border: 1px solid var(--line, #dfe8e2); border-radius: 9px; font-size: 8.5px; font-weight: 700; }
.landing-mini.imersivo .landing-mini-quizz strong { color: #fff; }
.landing-mini.imersivo .landing-mini-quizz span { border-color: rgba(255,255,255,.32); background: rgba(10,14,12,.55); color: #fff; }

/* ===== Landing pages: cabeçalho da lista e do editor =============== */
.lp-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-topo .cartao-titulo { margin-bottom: 4px; }
.lp-topo .mini { margin: 0; max-width: 62ch; }
.lp-topo .act { flex: none; }
@media (max-width: 560px) { .lp-topo { flex-direction: column; } .lp-topo .act { width: 100%; } }

/* ===== Assistente de etapas — criar landing page ===================
   Só aparece ao CRIAR. Ao editar, .lp-passos e .lp-nav ficam hidden e
   todas as etapas abrem de uma vez. */
.lp-passos[hidden], .lp-nav[hidden], .lp-etapa[hidden] { display: none !important; }

.lp-passos { display: grid; gap: 10px; margin-bottom: 4px; }
.lp-trilha { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.lp-passo {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--pill);
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--ink-3);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lp-passo i {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-2);
  font-style: normal; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.lp-passo:hover:not(:disabled) { background: var(--hover); color: var(--ink-2); }
/* Etapa à frente é inalcançável: evita pular para o fim sem preencher. */
.lp-passo:disabled { cursor: default; opacity: .4; }
.lp-passo.atual { background: var(--azul-fraco); color: var(--azul-alto); font-weight: 650; }
.lp-passo.atual i { background: var(--azul); border-color: var(--azul); color: #fff; }
/* Etapa já visitada: o ✓ substitui o número — sinal de progresso. */
.lp-passo.feito { color: var(--ink-2); }
.lp-passo.feito i { background: var(--ok-dim); border-color: transparent; color: var(--ok); font-size: 0; }
.lp-passo.feito i::after { content: '✓'; font-size: 11px; }

.lp-barra { height: 4px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.lp-barra span { display: block; width: 25%; height: 100%; border-radius: 99px; background: var(--azul); transition: width .3s ease; }

.lp-etapa { display: grid; gap: 12px; }

.lp-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--line-2);
}
.lp-conta { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
/* O Voltar some na primeira etapa, mas o espaço fica: sem isto o "Continuar"
   pula de lado ao avançar. */
.lp-nav #lpVoltar[hidden] { display: block !important; visibility: hidden; }

@media (max-width: 560px) {
  .lp-passo span { display: none; }
  .lp-passo { padding: 6px; }
  .lp-nav { flex-wrap: wrap; }
  .lp-conta { order: -1; width: 100%; text-align: center; }
  .lp-nav .act { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-passo, .lp-barra span { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   FASE 1 — FUNDAÇÃO VISUAL                      (reforma noturna, 06/09)
   Direção B: operacional/CRM moderno — grafite + azul funcional.

   Este bloco é ADITIVO e fica no fim do arquivo de propósito: vence pela
   ordem da cascata sem precisar reescrever as 2007 linhas anteriores.
   Para reverter a fase inteira, basta apagar deste marcador ao fim.

   Regra que se aplica a tudo abaixo: nenhum seletor renomeia id, name ou
   data-* consumido pelo JS. Só apresentação.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- tipografia --
   O problema medido não era "fonte feia", era hierarquia: título de página
   a 14px não se distingue do corpo. Aqui cada nível ganha peso próprio. */
body { font-size: var(--t-corpo); line-height: 1.5; }

#tituloPagina {
  font-size: var(--t-pagina);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--ink);
}

main h2, .cartao-titulo {
  font-size: var(--t-secao);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--ink);
}
main h3 { font-size: var(--t-card); font-weight: 650; letter-spacing: -.01em; }

/* Texto de apoio: sobe de ~10.5px para 13px e ganha contraste. Era o
   "texto auxiliar crucial tão discreto quanto metadados" da auditoria. */
main .mini, main small, .note, .landing-ajuda, .ajuda {
  font-size: var(--t-ajuda);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Labels e cabeçalhos de tabela: a auditoria pediu "sem caixa alta
   excessiva". Mantenho o caixa-alta (é a identidade da casa) mas com
   tamanho e contraste que se leem. */
main label, main th, .grid-form > label {
  font-size: var(--t-rotulo);
  color: var(--ink-2);
  letter-spacing: .02em;
}

/* Dinheiro e contagem alinhados na vertical. */
.metrica, .metrica-valor, td, .num, .valor, .lp-conta {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ controles --
   Altura única. A auditoria registrou "inputs escuros/translúcidos; alguns
   mais claros e altos" e "selects com tamanhos variáveis". */
main input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
main select,
main textarea {
  min-height: var(--h-controle);
  padding: 9px 12px;
  font-size: var(--t-corpo);
  border-radius: var(--r);
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
main textarea { min-height: 88px; line-height: 1.5; padding-top: 10px; }

main input:hover:not(:disabled), main select:hover:not(:disabled) { border-color: rgba(255,255,255,.16); }
main input:focus, main select:focus, main textarea:focus {
  outline: none;
  border-color: var(--azul-alto);
  box-shadow: var(--azul-glow);
}
main input:disabled, main select:disabled, main textarea:disabled {
  opacity: .55; cursor: not-allowed; background: var(--surface);
}
/* Placeholder legível — mas claramente distinto de valor preenchido. */
main ::placeholder { color: var(--ink-4); opacity: 1; }

/* Foco visível em TUDO que recebe teclado. Requisito de acessibilidade:
   nunca remover outline sem colocar outro no lugar. */
main a:focus-visible, main button:focus-visible,
main [tabindex]:focus-visible, #nav button:focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: var(--r);
}

/* -------------------------------------------------------------- botões --
   Um primário por seção. O glow vira sombra discreta: a auditoria mediu
   que o brilho competia com o conteúdo. */
main .act, main button.act {
  min-height: var(--h-controle);
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 650;
  border-radius: var(--r);
  letter-spacing: 0;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
main .act.mini { min-height: var(--h-controle-mini); padding: 0 11px; font-size: 12.5px; }
main .act.primary {
  background: var(--azul);
  border-color: var(--azul);
  box-shadow: var(--sombra-1);
}
main .act.primary:hover:not(:disabled) { background: #0a68f5; border-color: #0a68f5; }
main .act:active:not(:disabled) { transform: translateY(1px); }
main .act:disabled { opacity: .5; cursor: not-allowed; }

/* Ação destrutiva PRECISA parecer destrutiva. A auditoria: "Eliminar,
   Remover token, Cancelar minha conta têm apresentação semelhante a ações
   neutras". Cor sozinha não basta — vem com borda própria. */
main .act.perigo, main .act.danger, main .act[data-perigo] {
  color: var(--bad);
  border-color: rgba(255, 92, 124, .42);
  background: var(--bad-dim);
}
main .act.perigo:hover:not(:disabled) { background: rgba(255,92,124,.22); border-color: var(--bad); }

/* --------------------------------------------------------------- cards --
   Padding e gap consistentes; altura pelo conteúdo, não fixa. */
main .card, main .cartao {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--e-5);
  box-shadow: none;   /* profundidade vem da borda, não de sombra */
}

/* -------------------------------------------------------------- badges --
   Nunca só cor: a auditoria exige que estado não dependa de cor sozinha.
   O peso e a borda dão o segundo canal. */
main .pill, main .badge, main .tag {
  font-size: 12px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  letter-spacing: .01em;
}
main .pill.ok,  main .badge.ok  { background: var(--ok-dim);  color: var(--ok);  border-color: rgba(34,208,122,.30); }
main .pill.warn,main .badge.warn{ background: var(--warn-dim);color: var(--warn);border-color: rgba(255,176,32,.30); }
main .pill.bad, main .badge.bad { background: var(--bad-dim); color: var(--bad); border-color: rgba(255,92,124,.30); }

/* -------------------------------------------------------------- alertas --
   Título, causa e próximo passo — como a auditoria pediu. */
main .note {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r);
  border: 1px solid var(--line);
  border-left-width: 3px;
  background: var(--surface-2);
}
main .note.bom  { border-left-color: var(--ok);   background: var(--ok-dim); }
main .note.aviso{ border-left-color: var(--warn); background: var(--warn-dim); }
main .note.erro { border-left-color: var(--bad);  background: var(--bad-dim); }
main .note strong { color: var(--ink); font-weight: 650; }

/* -------------------------------------------------------------- tabelas --
   Densidade média: linhas respiram, cabeçalho se lê, número alinha. */
main table { font-size: var(--t-corpo); border-collapse: collapse; width: 100%; }
main th {
  font-size: var(--t-rotulo);
  font-weight: 650;
  color: var(--ink-2);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
main td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); }
main tbody tr:hover { background: var(--hover); }
main tbody tr:last-child td { border-bottom: 0; }

/* Tabela larga rola dentro do próprio container — a página nunca rola
   de lado. A auditoria confirmou overflow de 847px em 364px de área. */
main .tabela-rolagem, main .table-wrap { overflow-x: auto; max-width: 100%; }

/* --------------------------------------------------------- formulários --
   O achado mais concreto: `.grid-form` com minmax(186px,1fr) produzia até
   DEZ colunas em tela larga — o "formulário comprimido" da auditoria.
   Duas colunas no máximo, como recomendado. */
main .grid-form {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e-4);
  max-width: var(--w-form);
}
main .grid-form > label { display: grid; gap: 6px; align-content: start; }
main .grid-form .span-2 { grid-column: 1 / -1; }

@media (min-width: 1100px) {
  /* Trava em 2 colunas mesmo com espaço sobrando: 3+ colunas de formulário
     viram tabela de digitação, não formulário. */
  main .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------- estado vazio --
   "Contexto + motivo + próxima ação segura; reduzir espaço exagerado." */
main .empty, main .vazio {
  padding: var(--e-6) var(--e-5);
  text-align: center;
  color: var(--ink-2);
  font-size: var(--t-ajuda);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: transparent;
}

/* ------------------------------------------------------------ movimento --
   Sem animação decorativa, e respeito a quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FASE 2 — SHELL DA PLATAFORMA
   Sidebar, cabeçalho, contexto de conta, rodapé e navegação mobile.
   ══════════════════════════════════════════════════════════════════════ */

/* -------------------------------------------------------- sidebar 240px --
   Estava em 186px: "Configurar e administrar" e "Produtores com acesso"
   quebravam em duas linhas (confirmado no screenshot do baseline).
   A auditoria pede 232–248px; 240 é o meio, e cabe em notebook 1366. */
@media (min-width: 981px) {
  body.menu-expandido { --sidebar: 240px; }
}

#sidebar { background: var(--bg-deep); }

/* A marca ganha ar e para de disputar com o primeiro item do menu. */
.marca { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

/* ------------------------------------------------------- itens do menu --
   Alvo de toque maior, nome inteiro em uma linha, ativo sem brilho. */
#nav button, #nav summary {
  min-height: 38px;
  border-radius: var(--r);
  letter-spacing: 0;
}
/* MENU-1: o tamanho da fonte vale só no menu expandido. Recolhido, o rótulo
   é escondido por `font-size: 0` lá em cima — declarar um tamanho aqui, sem
   qualificar o estado, fazia o texto reaparecer e estourar os 62px. */
body.menu-expandido #nav button,
body.menu-expandido #nav summary { font-size: 13.5px; }
body.menu-expandido #nav button > span,
body.menu-expandido #nav button {
  white-space: nowrap;      /* nome do menu nunca quebra em duas linhas */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Item ativo: barra azul + fundo discreto. Antes era só o azul saturado —
   a auditoria pediu "ativo azul discreto", sem glow. */
#nav button[aria-current="page"] {
  background: var(--azul-fraco);
  color: var(--ink);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--azul-alto);
}

/* Título do grupo administrativo: legível, sem quebrar. */
#nav summary {
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-3);
  white-space: nowrap;
}
/* Mesmo motivo: "Configurar e administrar" não cabe em 62px. */
body.menu-expandido #nav summary { font-size: 11.5px; }

/* Rede de segurança do estado recolhido: qualquer texto que escape de um
   `font-size: 0` futuro fica contido na barra em vez de rolar para o lado. */
#sidebar #nav { overflow-x: hidden; }
body:not(.menu-expandido) #nav button,
body:not(.menu-expandido) #nav summary { white-space: nowrap; overflow: hidden; }

/* ------------------------------------------------------------- topo --
   O cabeçalho só trazia título e busca. A auditoria classificou a baixa
   saliência do contexto de conta como risco — especialmente em suporte,
   antes de ações com efeito externo. */
#topo {
  min-height: 60px;
  padding: 0 var(--e-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  gap: var(--e-4);
}

/* Busca com altura de controle padrão. */
#topo input[type=search], #topo input {
  min-height: var(--h-controle-mini);
  font-size: 13.5px;
}

/* ------------------------------------------------- contexto da conta --
   Fica no rodapé da sidebar (como já era), mas agora legível: era um
   bloco comprimido que truncava o nome da conta. */
.sidebar-pe {
  border-top: 1px solid var(--line);
  padding: var(--e-3);
  gap: 6px;
  font-size: 12.5px;
}
.sidebar-pe .quem-bloco { min-width: 0; }
.sidebar-pe .quem-bloco > * {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.menu-expandido .sidebar-pe select {
  min-height: var(--h-controle-mini);
  font-size: 12.5px;
  width: 100%;
  box-sizing: border-box;
}

/* ------------------------------------------------------- modo suporte --
   Quando o operador está DENTRO da conta de outra pessoa, isso não pode
   ser sutil: é o estado em que confundir a conta significa mexer na
   operação alheia.
   `#faixaSuporte` já existe no topo como `.pill.bad` e o JS controla o
   `hidden` — não toco nisso. Só aumento a saliência de quem já aparece. */
#faixaSuporte:not([hidden]) {
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-color: var(--bad);
  /* Segundo canal além da cor, como exige a regra de acessibilidade. */
  box-shadow: inset 0 0 0 1px rgba(255, 92, 124, .35);
}

/* ------------------------------------------------------- área principal --
   Largura de leitura: a auditoria registrou "faixas estreitas" em
   Configurações/Documentação e listas largas demais em Campanhas. */
main { padding: var(--e-5); }
main > section { max-width: 1440px; }

/* ---------------------------------------------------------- responsivo -- */
@media (max-width: 980px) {
  main { padding: var(--e-4); }
  #topo { padding: 0 var(--e-4); min-height: 54px; }
  #tituloPagina { font-size: 20px; }
}

@media (max-width: 560px) {
  main { padding: var(--e-3); }
  #tituloPagina { font-size: 18px; }
  /* Formulário em uma coluna — já funcionava bem, a auditoria elogiou. */
  main .grid-form { grid-template-columns: 1fr; gap: var(--e-3); }
  /* Alvo de toque confortável no celular. */
  main .act { min-height: 44px; }
  main input:not([type=checkbox]):not([type=radio]), main select { min-height: 44px; font-size: 16px; }
}

/* Navegação inferior no mobile: a auditoria a elogiou; aqui só o alvo
   de toque e o contraste do ativo. */
#navInferior button { min-height: 48px; font-size: 11px; }
#navInferior button[aria-current="page"] { color: var(--azul-alto); }

/* ─── FASE 2 · correções após inspeção visual ─────────────────────────
   Dois erros meus, achados no screenshot e confirmados no código:

   1. `#topo h1` (0,1,1) vencia `#tituloPagina` (0,1,0), e `#topo` tinha
      `height: 46px` fixo — o título continuava a 14px.

   2. Neste código `h2` NÃO é título de seção: é uma sobrancelha de 10px
      em caixa alta ("POR INTEGRAÇÃO", "PERDAS"). Minha regra a promoveu a
      19px e explodiu o dashboard. Reverto o h2 e trato só o que é título
      de verdade.
   ──────────────────────────────────────────────────────────────────── */

/* 1 — o título da página, com especificidade suficiente */
#topo h1#tituloPagina {
  font-size: var(--t-pagina);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.15;
}
#topo { height: auto; min-height: 60px; }

/* 2 — h2 volta a ser a sobrancelha que sempre foi.
   Só ganha o contraste que faltava (10px/42% era ilegível) e um degrau
   de tamanho, mantendo a identidade de label. */
main h2 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: var(--e-5) 0 var(--e-2);
}
main h2:first-child { margin-top: 0; }

/* Título de card continua sendo `.cartao-titulo` — esse sim é título. */
.cartao-titulo { font-size: var(--t-card); font-weight: 700; letter-spacing: -.01em; text-transform: none; }

@media (max-width: 980px) { #topo h1#tituloPagina { font-size: 20px; } }
@media (max-width: 560px) { #topo h1#tituloPagina { font-size: 18px; } }

/* ─── FASE 2 · correção de overflow (achado pelo teste, não a olho) ───
   O harness mediu 120px de rolagem horizontal em Configurações @768px.

   Causa: minha própria regra da Fase 1. `minmax(280px, 1fr)` obriga cada
   coluna a ter 280px; dentro de um container estreito, duas colunas +
   gap passam de 768px e a PÁGINA rola de lado — o defeito que a auditoria
   registrou na tabela Clientes e que eu não podia reintroduzir.

   `min(280px, 100%)` mantém as duas colunas quando há espaço e deixa a
   coluna encolher quando não há. É a correção de raiz, não um remendo. */
main .grid-form {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Rede de segurança: nada dentro do conteúdo pode estourar a largura.
   Vale para tabela larga, <pre> de payload e imagem sem max-width. */
#conteudo, main, main > section { min-width: 0; max-width: 100%; }
main pre, main code { max-width: 100%; overflow-x: auto; }
main img { max-width: 100%; height: auto; }

/* Tabela continua podendo ser larga — mas rola DENTRO do próprio quadro,
   nunca empurrando a página. */
main table { display: block; overflow-x: auto; white-space: nowrap; }
main table thead, main table tbody { white-space: normal; }
@media (min-width: 981px) {
  main table { display: table; white-space: normal; }
}

/* ─── FASE 2 · overflow, causa raiz ──────────────────────────────────
   A medição mostrou `.grid-form` com 1080px dentro de um viewport de
   390px — exatamente o valor de `--w-form`.

   O erro foi meu: `max-width: 1080px` só limita quando o pai tem largura
   definida. Aqui o grid está dentro de um `<form>` sem restrição, dentro
   de uma section que eu deixei em `max-width: 1440px`; sem `width: 100%`
   o auto-fit resolveu pelo conteúdo e estourou.

   Também reverto a tabela em `display: block` + `nowrap` que eu tinha
   acabado de introduzir: ela piorou o overflow de 120px para 328px. A
   rolagem da tabela tem de ficar num WRAPPER, não na própria tabela.
   ──────────────────────────────────────────────────────────────────── */

main .grid-form {
  width: 100%;
  max-width: var(--w-form);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Desfaz o experimento ruim: a tabela volta a ser tabela. */
main table {
  display: table;
  white-space: normal;
  width: 100%;
  table-layout: auto;
}

/* A rolagem horizontal mora no wrapper. Onde não existe wrapper, a
   própria section contém a rolagem, e a PÁGINA nunca rola de lado. */
main .tabela-rolagem, main .table-wrap, main .tabela {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
main > section { overflow-x: hidden; }

/* Palavra longa (URL, hash, e-mail) não pode empurrar a coluna. */
main td, main th, main .note, main .mini { overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════════════
   FASE 3 — DASHBOARD (Operação)

   DIVERGÊNCIA DA AUDITORIA, registrada de propósito:
   O Astra descreveu "oito cartões idênticos numa fileira de 8 colunas" e
   pediu a separação em resultado / operação / saúde. Ao inspecionar o
   código VIVO, essa reforma JÁ EXISTE: `.kpis-3` com `.kpi-dinheiro`,
   `.kpi-operacao` e `.kpi-saude` — exatamente as três camadas pedidas,
   publicadas depois da captura do Astra.

   Regra do briefing: quando a auditoria conflita com o estado atual,
   vale o atual. Então NÃO refaço a grade de KPIs. A Fase 3 fica com o
   que de fato continua pendente: o onboarding concluído dominando a
   tela, a legibilidade dos rótulos e o vazio do gráfico.
   ══════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------- onboarding concluído --
   O achado que continua válido: "ocupa ~480px antes do filtro e da
   primeira métrica" no celular. Concluído vira faixa; não some, porque
   quem ainda configura precisa dele. */
.onboarding.pronto {
  /* O gradiente verde comunicava resultado comercial. Era estado de setup. */
  background: var(--surface);
  border-color: rgba(34, 208, 122, .22);
  border-left: 3px solid var(--ok);
  padding: var(--e-3) var(--e-4);
}
.onboarding.pronto .onboarding-topo > span { font-size: 15px; }
.onboarding.pronto .onboarding-topo strong { font-size: 13.5px; }
.onboarding.pronto .onboarding-topo p { font-size: 12.5px; margin-top: 2px; }
/* Concluído não precisa de barra de progresso nem dos seis passos. */
.onboarding.pronto .onboarding-barra,
.onboarding.pronto .onboarding-grid { display: none; }

/* ONBOARD-2: pronto deixou de significar "nada mais a mostrar" — as
   recomendações e os opcionais vivem justamente nesse estado. Onde há
   grupos, o cartão volta a empilhar e os grids reaparecem. */
.onboarding.pronto:has(.onboarding-grupo) { display: block; }
.onboarding.pronto .onboarding-grupo .onboarding-grid { display: grid; }

/* Enquanto NÃO está pronto, mantém todo o destaque — é a tarefa do momento. */
.onboarding:not(.pronto) { padding: var(--e-5); }
.primeiros { padding: var(--e-4) var(--e-5); }

/* ------------------------------------------------------ rótulos de KPI --
   `.kpi .k` estava em 10px/uppercase/42% de opacidade: o rótulo que diz o
   que o número significa era o texto menos legível do card. */
.kpi .k, .kpi-dinheiro .k, .kpi-saude .k {
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.kpi .s, .kpi-dinheiro .s {
  font-size: 12px;
  color: var(--ink-3);
}
/* O `.s` tinha `white-space: nowrap` + `overflow: hidden`: em card estreito
   a comparação "vs. período anterior" era cortada no meio. */
.kpi .s { white-space: normal; overflow: visible; line-height: 1.35; }

/* Números do dinheiro alinhados na vertical. */
.kpi .v, .kpi-dinheiro .v, .kpi-dinheiro-pe b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- gráfico vazio --
   "O gráfico totalmente zerado ocupa uma área ampla, sem orientação de
   vazio." Estado vazio explícito em vez de retângulo mudo. */
.grafico:empty {
  display: grid;
  place-items: center;
  min-height: 120px;
}
.grafico:empty::after {
  content: 'Sem receita entregue no período selecionado.';
  color: var(--ink-3);
  font-size: var(--t-ajuda);
}

/* ------------------------------------------------------- camada técnica --
   "Por integração", "Por campanha" e "Perdas" ficam depois do resultado,
   com peso de seção. A tabela rola dentro do próprio quadro. */
.split { gap: var(--e-5); }
main #painel .wrap { overflow-x: auto; max-width: 100%; }
main #painel table th { font-size: 12px; letter-spacing: .01em; padding: 9px 11px; }
main #painel table td { padding: 9px 11px; }

/* ---------------------------------------------------------- responsivo -- */
@media (max-width: 1100px) {
  /* Três colunas de KPI não cabem: dinheiro em cima, o resto embaixo. */
  .kpis-3 { grid-template-columns: minmax(0, 1fr); }
  .kpi-operacao { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .kpi-operacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-dinheiro .v { font-size: 32px; }
  .onboarding.pronto { padding: var(--e-2) var(--e-3); }
}

/* ══════════════════════════════════════════════════════════════════════
   FASE 5 — LANÇAR VENDA
   Os 21 campos ganham grupos com título: Cliente · Venda · Entrega ·
   Origem. Continua UM formulário e UMA página — o parecer diz que não
   precisa virar wizard. Nenhum `name` mudou.
   ══════════════════════════════════════════════════════════════════════ */
.bloco-venda {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-4);
  max-width: var(--w-form);
}
/* O h2 aqui é título de grupo, não sobrancelha de dashboard. */
.bloco-venda > h2 {
  font-size: var(--t-card);
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -.01em;
  margin: 0 0 var(--e-1);
}
.bloco-venda > .mini { margin: 0 0 var(--e-3); }
.bloco-venda > h2 + .grid-form { margin-top: var(--e-3); }

/* A observação e as ações ficam fora dos grupos: são a revisão final. */
#formLancar > label.full { display: block; max-width: var(--w-form); margin-bottom: var(--e-3); }
#formLancar > label.full textarea { width: 100%; }
#formLancar > .row { max-width: var(--w-form); gap: var(--e-3); flex-wrap: wrap; align-items: center; }

@media (max-width: 560px) {
  .bloco-venda { padding: var(--e-3); }
}

/* ─── FASE 5 · duas colunas de verdade ────────────────────────────────
   No screenshot o grupo saiu com TRÊS colunas: o `--w-form` de 1080px
   dividido por `minmax(280px,1fr)` cabe três. A auditoria é explícita:
   "formulários com máximo de duas colunas". Três colunas de campos com
   ajuda embaixo voltam a virar a tabela de digitação que eu vim corrigir. */
.bloco-venda .grid-form {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  max-width: 760px;
}
@media (min-width: 900px) {
  .bloco-venda .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Campo largo (URL de checkout, observação) ocupa a linha inteira. */
.bloco-venda .grid-form > label[id="campoPageUrl"] { grid-column: 1 / -1; }

/* ══════════════════════════════════════════════════════════════════════
   FASE 7 — CLIENTES, PEDIDOS E TABELAS

   A auditoria confirmou overflow real: "Tabela Clientes tem overflow
   interno confirmado: ~847px para 364px de área."

   Não reescrevo as colunas (são montadas em JS e mexer nelas seria mexer
   em comportamento). Trato o que é apresentação: prioridade de coluna no
   mobile, densidade e rolagem contida — como o briefing pede, sem
   "reduzir fonte até ficar ilegível".
   ══════════════════════════════════════════════════════════════════════ */

/* A rolagem mora no wrapper `.wrap`, que já existe no HTML das listas. */
main .wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: var(--r);
}

/* Linha com alvo de clique confortável e separador discreto. */
main .wrap table { width: 100%; min-width: 0; }
main .wrap td { vertical-align: middle; }

/* Dinheiro e contagem alinhados; nome nunca quebra no meio. */
main .wrap td .num, main .wrap td:has(.num) { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- prioridade --
   No celular, coluna secundária sai da vista em vez de espremer todas.
   Aqui vale a regra do briefing: prioridade de coluna, não fonte menor.
   `Cidade` é a 6ª coluna de Clientes — a auditoria propõe movê-la para o
   detalhe, que já existe na gaveta. */
@media (max-width: 700px) {
  main #tabelaLeads th:nth-child(6),
  main #tabelaLeads td:nth-child(6) { display: none; }
  main .wrap th, main .wrap td { padding: 10px 9px; }
  /* 13px ainda é legível — não é o "encolher até sumir" que o briefing veta. */
  main .wrap table { font-size: 13px; }
}

/* Telefone é PII: em tela compartilhada, menos exposição por padrão.
   Só apresentação — o dado continua no DOM e nas ações de sempre. */
main #tabelaLeads td .fone { letter-spacing: .02em; }

/* ------------------------------------------------------------- filtros --
   "novo fora do filtro"; os controles de busca ganham a altura padrão. */
main .filtros, main .row.filtros { gap: var(--e-2); flex-wrap: wrap; align-items: center; }
main .filtros input, main .filtros select { min-height: var(--h-controle-mini); }

/* --------------------------------------------------------------- gaveta --
   A auditoria elogiou a gaveta de cliente com histórico: preservar.
   Só a zona de risco ganha separação visual, como pedido. */
.gaveta .zona-risco, .drawer .zona-risco {
  border-top: 1px solid var(--line);
  margin-top: var(--e-5);
  padding-top: var(--e-4);
}

/* ══════════════════════════════════════════════════════════════════════
   TEMA CLARO · VERDE COMO AÇÃO — modelo aprovado por Antony em 06/09
   Referência: canvas "Trackeamento ADS — Sistema visual" (Meta / CAPI).

   Camada ADITIVA no fim do arquivo, como as fases da madrugada. Ela faz
   duas coisas:
     1. remapeia os tokens do :root — como todo o CSS lê var(--bg),
        var(--surface), var(--ink)…, isso vira o app inteiro de uma vez;
     2. corrige as cores FIXAS que o remapeamento não alcança (branco em
        rgba, #fff, hex escuro), que eu inventariei antes de escrever:
        38 blocos com rgba(255,255,255), 15 com #fff, 12 com hex escuro.

   O que NÃO muda de propósito: a prévia da landing (.landing-mini*) — ela
   reproduz a página pública do cliente, que é escura por design.
   Nenhum id, name, data-* ou classe lida pelo JS é tocado.
   Para reverter o tema inteiro: apagar deste marcador ao fim.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #F5F6F7;   /* fundo da página */
  --bg-deep:   #FFFFFF;   /* sidebar */
  --surface:   #FFFFFF;   /* cartão */
  --surface-2: #F1F4F7;   /* bloco sutil, hover de linha */
  --hover:     #F5F6F7;
  --line:      #E9EAEB;
  --line-2:    #EEF0F2;

  --ink:   #1C1E21;
  --ink-2: #1C2B33;
  --ink-3: rgba(28, 43, 51, .62);
  --ink-4: rgba(28, 43, 51, .45);

  /* O "azul" do sistema é o token da AÇÃO. No modelo aprovado a ação é
     verde — então o token vira verde, e tudo que era botão primário, item
     ativo e link acompanha sem eu caçar regra por regra. */
  --azul:       #0A5A43;
  --azul-alto:  #006B4E;
  --azul-fraco: #E7F3EA;
  --azul-glow:  0 0 0 3px rgba(0, 107, 78, .20);
  --foco:       0 0 0 2px #FFFFFF, 0 0 0 4px #006B4E;

  --ok:       #006B4E;  --ok-dim:   #E7F3EA;
  --warn:     #8A6508;  --warn-dim: #FDF3D8;   /* #8A6508 lê em AA sobre o fundo âmbar */
  --bad:      #A20C17;  --bad-dim:  #FBE9EA;

  --r:    8px;
  --r-lg: 12px;
  --h-controle: 36px;
  --h-controle-mini: 30px;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .06);
  --sombra-2: 0 2px 12px rgba(0, 0, 0, .10);
  --sombra-3: 0 12px 36px rgba(0, 0, 0, .14);
}

body {
  /* Roboto onde existir (Android, alguns Windows); Segoe UI no resto.
     Sem webfont externa — regra da plataforma. */
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
::selection { background: var(--azul-fraco); color: var(--ink); }
* { scrollbar-color: #C9CED4 transparent; }

/* ------------------------------------------------------------ sidebar -- */
#sidebar { background: #FFFFFF; border-right: 1px solid var(--line); }

.marca { text-align: left; padding: 14px 16px 10px; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.marca span { color: var(--ink); }
.marca-completa::before {
  content: ''; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--azul-fraco);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006B4E' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 19v-6M12 19V6M18 19v-9'/%3E%3C/svg%3E");
  background-size: 15px; background-position: center; background-repeat: no-repeat;
  display: inline-block; vertical-align: middle; margin-right: 2px;
}
body:not(.menu-expandido) .marca { justify-content: center; padding: 14px 0 10px; }

#nav { scrollbar-color: #C9CED4 transparent; }
#nav button { color: var(--ink-2); font-weight: 400; }
#nav button:hover { background: var(--hover); color: var(--ink); }
#nav button[aria-current="page"] {
  background: var(--azul-fraco); color: var(--azul-alto); font-weight: 500;
  box-shadow: none;
}
#nav button .badge.calmo { background: var(--surface-2); color: var(--ink-2); }
#nav button[aria-current="page"] .badge.calmo { background: rgba(0, 107, 78, .14); color: var(--azul-alto); }
#nav summary { color: var(--ink-3); }
#nav summary:hover { background: var(--hover); }
.nav-avancado { border-top-color: var(--line); }

.sidebar-pe { border-top-color: var(--line); }
/* Avatar do rodapé: círculo verde cheio com as iniciais, como no modelo.
   A regra original usa azul em cor fixa, por isso o token não a alcançava. */
.avatar { background: #0A5A43; color: #FFFFFF; border: 0; }
.sidebar-pe .quem { color: var(--ink); font-weight: 500; }
.sidebar-pe .papel { color: var(--ink-3); }
.sidebar-pe button { color: var(--ink-2); }
.sidebar-pe button:hover { background: var(--hover); color: var(--ink); }

/* ------------------------------------------------------------- topo -- */
#topo {
  background: rgba(245, 246, 247, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
#topo h1#tituloPagina { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
#abrirMenu { color: var(--ink); }
.busca input {
  background: #FFFFFF; border: 1px solid var(--line); color: var(--ink);
}
.busca input::placeholder { color: var(--ink-4); }
.busca .lupa { color: var(--ink-4); }
#faixaSuporte:not([hidden]) { background: var(--bad-dim); color: var(--bad); border-color: #F0C7CA; box-shadow: none; }

/* ------------------------------------------------------------ botões -- */
button.act, main .act {
  background: #FFFFFF; border: 1px solid #CBD2D9; color: var(--ink-2);
  font-weight: 500; box-shadow: none;
}
button.act:hover:not(:disabled), main .act:hover:not(:disabled) { background: var(--surface-2); border-color: #CBD2D9; }
main .act.primary, button.act.primary {
  background: #0A5A43; border-color: #0A5A43; color: #FFFFFF;
}
main .act.primary:hover:not(:disabled), button.act.primary:hover:not(:disabled) { background: #084B38; border-color: #084B38; }
main .act.perigo, main .act.danger, main .act[data-perigo], button.act.perigo {
  background: var(--bad-dim); border-color: #F0C7CA; color: var(--bad);
}
main .act.perigo:hover:not(:disabled) { background: #F6D9DB; border-color: var(--bad); }
a.produto-btn.verde { background: #0A5A43; color: #FFFFFF; }

/* ------------------------------------------------------------- campos -- */
main input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
main select, main textarea,
.form-cred input[type="text"], .form-cred input[type="password"], .form-cred input[type="email"],
.form-cred input[type="url"], .form-cred input:not([type]) {
  background: #FFFFFF; border: 1px solid #CBD2D9; color: var(--ink);
}
main input:hover:not(:disabled), main select:hover:not(:disabled) { border-color: #B5BEC7; }
main input:focus, main select:focus, main textarea:focus, .form-cred input:focus {
  border-color: var(--azul-alto); box-shadow: 0 0 0 2px rgba(0, 107, 78, .18);
}
main input:disabled, main select:disabled, main textarea:disabled { background: var(--surface-2); }

/* Rótulos em sentence case, 13px — como o modelo. Era caixa alta miúda. */
main label, main .grid-form > label, .form-cred label, .lbl {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--ink);
}
main label small, .form-cred label small { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
main ::placeholder { color: var(--ink-4); }

/* Interruptores */
.switch i { background: #CBD2D9; }
.switch i::after { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.switch input:checked + i { background: var(--ok); }
.tc-liga-pino { background: #CBD2D9; }
.tc-liga input:checked + .tc-liga-pino { background: var(--ok); }
.mini-switch input:checked + i { background: var(--ok); }

/* ------------------------------------------------------------- cartões -- */
.cartao, .kpi, .kpi-saude, .bloco-venda, .landing-form-grupo, .primeiros,
.card, .card-carrossel, .quizz-edit-bloco, .modelo-card, .escolha, .ficha, .onboarding {
  background: #FFFFFF; border-color: var(--line); box-shadow: none;
}
.onboarding { background: #FFFFFF; }
.onboarding.pronto { background: #FFFFFF; border-color: var(--line); border-left: 3px solid var(--ok); }
.onboarding-topo > span { color: var(--azul-alto); }
.onboarding-barra { background: var(--surface-2); }
.primeiros { border-left: 3px solid var(--azul-alto); }

/* O cartão de dinheiro é o único em verde cheio — é o resultado. */
.kpi-dinheiro { background: linear-gradient(135deg, #12805F 0%, #0A5A43 100%); border-color: transparent; color: #FFFFFF; }
.kpi-dinheiro .k { color: rgba(255, 255, 255, .78); }
.kpi-dinheiro .v { color: #FFFFFF; }
.kpi-dinheiro .s, .kpi-dinheiro-pe span { color: rgba(255, 255, 255, .82); }
.kpi-dinheiro-pe { border-top-color: rgba(255, 255, 255, .25); }
.kpi-dinheiro-pe b { color: #FFFFFF; }
.kpi-dinheiro .delta, .kpi-dinheiro .delta.down, .kpi-dinheiro .delta.flat { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.kpi .k, .kpi-saude .k { color: var(--ink-3); }
.kpi .v { color: var(--ink); }

.escolha:hover { background: var(--surface-2); border-color: #B5BEC7; }
.escolha.ativa { background: var(--azul-fraco); border-color: var(--azul-alto); }
.ficha:hover { background: var(--azul-fraco); border-color: var(--azul-alto); }
.ficha.entregue { background: var(--ok-dim); border-color: rgba(0, 107, 78, .30); }
.modelo-card:hover { border-color: var(--azul-alto); }
.modelo-card.escolhido { border-color: var(--azul-alto); box-shadow: 0 0 0 3px var(--azul-fraco); }
.modelo-card:focus-within { outline: 2px solid var(--azul-alto); outline-offset: 2px; }
.quizz-edit-bloco { background: var(--surface-2); }

/* --------------------------------------------------------------- pílulas -- */
.pill, main .pill, main .badge, main .tag { font-weight: 500; border: 0; }
.pill.calm { background: var(--surface-2); color: var(--ink-2); }
.pill.mid  { background: var(--warn-dim); color: var(--warn); }
.pill.brand{ background: var(--azul-fraco); color: var(--azul-alto); }
.delta.down, .delta.flat { background: var(--surface-2); color: var(--ink-2); }
.dica-nivel, .dica.baixo .dica-nivel, .dica.info .dica-nivel { background: var(--surface-2); color: var(--ink-2); }
.aba-cont { background: var(--surface-2); color: var(--ink-2); }
.barra-sep { background: var(--line); }
.sinal-barra b.off { background: var(--line); }
.ponto-col { background: #CBD2D9; }
.prefixo span { background: var(--surface-2); color: var(--ink-3); }
.tut-embreve { background: var(--surface-2); color: var(--ink-2); }
.tut-play-icone { background: rgba(255, 255, 255, .92); color: var(--ink); }

/* --------------------------------------------------------------- avisos -- */
.note, main .note {
  background: #FFFFFF; border: 1px solid var(--line); border-left: 3px solid var(--azul-alto);
  color: var(--ink-2);
}
main .note.bom  { border-left-color: var(--ok);   background: var(--ok-dim); }
main .note.aviso{ border-left-color: var(--warn); background: var(--warn-dim); }
main .note.erro { border-left-color: var(--bad);  background: var(--bad-dim); }
.toast { background: #FFFFFF; border-color: var(--line); border-left: 3px solid var(--azul-alto); box-shadow: var(--sombra-2); color: var(--ink); }

/* --------------------------------------------------------------- tabelas -- */
th, main th {
  background: #FFFFFF; color: var(--ink); font-weight: 700; font-size: 12px;
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid #CBD2D9;
}
main td { border-bottom-color: var(--line); }
main tbody tr:hover { background: var(--hover); }
.wrap { border: 1px solid var(--line); border-radius: var(--r); background: #FFFFFF; }
main .empty, main .vazio { border-color: #CBD2D9; color: var(--ink-3); background: #FFFFFF; }

/* ----------------------------------------------------------------- funil -- */
.funnel .bar { background: var(--surface-2); }
.funnel .bar i { background: #B9DCCB; }
.funnel .bar i.fim { background: #0A5A43; }
.funnel .step > small:first-child { color: var(--ink-2); }

/* ------------------------------------------------------------- passos -- */
.passo-n { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.passo.atual .passo-n { background: var(--azul); color: #FFFFFF; border-color: var(--azul); }
.lp-passo { color: var(--ink-3); }
.lp-passo i { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
.lp-passo.atual { background: var(--azul-fraco); color: var(--azul-alto); }
.lp-passo.atual i { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }
.lp-passo.feito i { background: var(--ok-dim); color: var(--ok); }
.lp-barra { background: var(--line); }
.lp-barra span { background: var(--azul); }
.lp-nav { border-top-color: var(--line); }
.trilha-item.atual { background: var(--azul-fraco); color: var(--azul-alto); }
.trilha-item:hover:not(:disabled) { background: var(--hover); }

/* -------------------------------------------------------------- gaveta -- */
#gaveta { background: #FFFFFF; border-left: 1px solid var(--line); box-shadow: var(--sombra-3); }
#capa-menu, .capa { background: rgba(28, 43, 51, .35); }

/* -------------------------------------------------------- navegação mobile -- */
#navInferior { background: #FFFFFF; border-top: 1px solid var(--line); }
#navInferior button { color: var(--ink-3); }
#navInferior button[aria-current="page"] { color: var(--azul-alto); }
#sidebar.aberta { box-shadow: 14px 0 44px rgba(0, 0, 0, .18); }

/* --------------------------------------------- sobrancelhas e títulos -- */
main h2 { color: var(--ink-3); }
.cartao-titulo, .bloco-venda > h2 { color: var(--ink); }
main .mini, main small, .landing-ajuda, .ajuda { color: var(--ink-3); }
.cartao-sub { color: var(--ink-3); }

/* ----------------------------------------------------------- foco geral -- */
main a:focus-visible, main button:focus-visible, main [tabindex]:focus-visible, #nav button:focus-visible {
  box-shadow: none; outline: 2px solid var(--azul-alto); outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   MODELO APROVADO — ESTRUTURA DO SHELL E DO DASHBOARD
   Faz a tela seguir o canvas: título dentro do conteúdo, busca centrada,
   cinco cartões em linha com ícone, saúde como faixa, gráfico em verde,
   tabelas em cartão. Aditivo, no fim do arquivo.
   ══════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------- topo -- */
#topo { height: 54px; min-height: 54px; padding: 0 20px; gap: 12px; justify-content: center; }
#topo .busca { margin-left: 0; flex: 0 1 460px; }
#topo .busca input { width: 100%; height: 34px; border-radius: 9999px; background: #FFFFFF; border: 1px solid var(--line); font-size: 12.5px; padding-left: 32px; }
#topo .busca .lupa { left: 12px; }
#topo #faixaSuporte, #topo #trialBadge { order: -1; }
#topo #abrirMenu { position: absolute; left: 16px; }
#topo .avatar-topo {
  position: absolute; right: 20px; width: 30px; height: 30px; border-radius: 50%;
  background: #0A5A43; color: #FFFFFF; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; margin: 0;
}
#topo { position: sticky; }

/* ------------------------------------------------- cabeçalho da página -- */
.pagina-cabecalho { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 14px; min-height: 48px; max-width: 62%; }
.pagina-cabecalho h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0; color: var(--ink); }
.pagina-sub { font-size: 12px; color: var(--ink-3); margin: 0; line-height: 1.4; }
.pagina-sub:empty { display: none; }

/* No dashboard o filtro de período sobe para a direita do cabeçalho, como
   no modelo. Só em tela larga: no celular ele volta ao fluxo normal. */
@media (min-width: 981px) {
  #painel > .row:first-child { justify-content: flex-end; margin-top: -58px; margin-bottom: 14px; }
}
#painel > .row:first-child select, #painel > .row:first-child .act { height: 36px; min-height: 36px; }
#painel > .row:first-child select { background: #FFFFFF; border: 1px solid #CBD2D9; border-radius: 8px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--ink-2); width: 168px; }

/* ------------------------------------------------- faixa "operação pronta" -- */
.onboarding.pronto { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; margin-bottom: 14px; border-radius: 12px; }
/* ONBOARD-2: com grupos na tela, a faixa horizontal viraria uma linha só
   e empurraria os opcionais para fora — volta a empilhar. */
.onboarding.pronto:has(.onboarding-grupo) { display: block; padding: 15px 17px; }
.onboarding.pronto:has(.onboarding-grupo) .onboarding-topo { align-items: flex-start; }
.onboarding.pronto .onboarding-topo { flex: 1; align-items: center; }
.onboarding.pronto .onboarding-topo strong { font-size: 12px; font-weight: 700; }
.onboarding.pronto .onboarding-topo p { font-size: 12px; margin: 0; }
.onboarding.pronto .onboarding-topo > span {
  font-size: 10.5px; font-weight: 500; color: var(--ok); background: var(--ok-dim);
  padding: 3px 9px; border-radius: 9999px;
}

/* ------------------------------------------------------- cinco em linha -- */
/* `.kpi-operacao` vira transparente para a grade: seus quatro cartões
   passam a ser irmãos do de dinheiro, e a fileira fica com cinco. */
.kpis-3 { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.kpi-operacao { display: contents; }
.kpi-saude { grid-column: 1 / -1; }

.kpi-dinheiro { padding: 14px 16px; border-radius: 12px; justify-content: center; gap: 4px; }
.kpi-dinheiro .k { font-size: 10px; letter-spacing: .08em; font-weight: 500; }
.kpi-dinheiro .v { font-size: 26px; margin-top: 2px; }
.kpi-dinheiro .s { font-size: 11px; margin-top: 4px; }
.kpi-dinheiro-pe { margin-top: 8px; padding-top: 8px; font-size: 11px; }
.kpi-dinheiro-pe span { font-size: 11px; }
.kpi-dinheiro-pe b { font-size: 12.5px; }

/* Cartão branco com ícone à esquerda, valor grande e legenda em caixa alta. */
.kpi-operacao .kpi {
  display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 12px; min-height: 76px;
}
.kpi-operacao .kpi::before {
  content: ''; grid-row: 1 / span 3; width: 30px; height: 30px; border-radius: 8px;
  background-color: var(--surface-2); background-size: 16px; background-position: center; background-repeat: no-repeat;
}
.kpi-operacao .kpi .v { order: -1; grid-column: 2; font-size: 20px; font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: -.01em; }
.kpi-operacao .kpi .k { grid-column: 2; font-size: 10px; letter-spacing: .08em; font-weight: 500; margin-top: 2px; }
.kpi-operacao .kpi .s { grid-column: 2; font-size: 11px; margin-top: 2px; white-space: normal; overflow: visible; }
.kpi-operacao .kpi .delta { font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 9999px; }
/* 1 Entregues · 2 Taxa de entrega · 3 Na esteira · 4 Chegaram no WhatsApp */
.kpi-operacao .kpi:nth-child(1)::before { background-color: #E7F3EA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006B4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E"); }
.kpi-operacao .kpi:nth-child(2)::before { background-color: #E7F3EA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006B4E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 20a8 8 0 1 1 8-8'/%3E%3Cpath d='M12 12l4-4'/%3E%3C/svg%3E"); }
.kpi-operacao .kpi:nth-child(3)::before { background-color: #FDF3D8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6508' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.kpi-operacao .kpi:nth-child(4)::before { background-color: #E7F3EA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006B4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.kpi-operacao .kpi.bad::before { background-color: #FBE9EA; }
.kpi-operacao .kpi.warn::before { background-color: #FDF3D8; }

/* Saúde do rastreio vira uma faixa horizontal abaixo dos cinco cartões:
   continua toda a informação, sem ocupar uma coluna inteira. */
.kpi-saude { flex-direction: row; align-items: center; gap: 28px; padding: 12px 16px; border-radius: 12px; }
.kpi-saude > .k { flex: none; font-size: 10px; letter-spacing: .08em; font-weight: 500; }
.kpi-saude .saude-linha, .kpi-saude .saude-bloco { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
.kpi-saude .saude-linha .rot { font-size: 11px; }
.kpi-saude .saude-linha .val { font-size: 15px; font-weight: 700; }

/* ------------------------------------------------------- gráfico em verde -- */
/* CSS vence atributo de apresentação em SVG: recolore o gráfico existente
   sem tocar no JS que o desenha. */
.grafico svg line { stroke: #E9EAEB; }
.grafico svg line#gCursor { stroke: #CBD2D9; }
.grafico svg text { fill: rgba(28, 43, 51, .6); }
.grafico svg polyline { stroke: #0A5A43; }
.grafico svg circle { fill: #0A5A43; stroke: #FFFFFF; }
.grafico svg stop:first-child { stop-color: #0A5A43; stop-opacity: .22; }
.grafico svg stop:last-child { stop-color: #0A5A43; stop-opacity: .02; }
.grafico .dica { background: #FFFFFF; border: 1px solid var(--line); color: var(--ink); box-shadow: var(--sombra-2); }
.linha-grafico .cartao { border-radius: 12px; padding: 18px 20px; }
.cartao-titulo { font-size: 15px; }

/* Funil: barras verdes com trilho claro (o de "fim" mais escuro). */
.funnel .step { font-size: 12px; }
.funnel .bar { height: 7px; }

/* ------------------------------------------------------- tabelas em cartão -- */
#painel .split > div, #painel > h2 + .wrap {
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px;
}
#painel .split > div > h2, #painel > h2 {
  font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink);
  margin: 0; padding: 12px 12px 10px; border-bottom: 1px solid #CBD2D9;
}
#painel .split > div > .wrap, #painel > h2 + .wrap { border: 0; border-radius: 0; background: transparent; }
#painel .split { gap: 14px; margin-top: 0; }
/* "Perdas" fica fora do .split: vira cartão com o mesmo título dentro. */
#painel > h2 { background: #FFFFFF; border: 1px solid var(--line); border-bottom: 1px solid #CBD2D9; border-radius: 12px 12px 0 0; margin-top: 14px; }
#painel > h2 + .wrap { border-radius: 0 0 12px 12px; border-top: 0; margin-top: 0; }
#painel table th { border-bottom: 1px solid var(--line); font-size: 12px; }
#painel table td { height: 34px; }
#painel table td:first-child { color: var(--azul-alto); font-weight: 500; }

/* ---------------------------------------------------------- responsivo -- */
@media (max-width: 1240px) {
  .kpis-3 { grid-template-columns: 1.3fr 1fr 1fr; }
  .kpi-dinheiro { grid-row: span 2; }
}
@media (max-width: 980px) {
  .pagina-cabecalho { max-width: 100%; margin: 4px 0 12px; }
  .pagina-cabecalho h1 { font-size: 20px; }
  #topo { padding: 0 16px 0 52px; }
  #topo .busca { flex: 1; }
  .kpis-3 { grid-template-columns: 1fr 1fr; }
  .kpi-dinheiro { grid-column: 1 / -1; grid-row: auto; }
  .kpi-saude { flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 560px) {
  .pagina-cabecalho h1 { font-size: 18px; }
  .kpis-3 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-operacao .kpi { padding: 12px; min-height: 0; }
  .kpi-operacao .kpi .v { font-size: 18px; }
  #topo .avatar-topo { display: none; }
}

/* ─── Comissões recebidas no cartão verde ─────────────────────────────
   Linha própria, com peso maior que o ticket médio: para quem opera por
   comissão, é o número que interessa. A segunda linha do rodapé não repete
   a borda de cima. */
/* Duas linhas: rótulo + variação em cima, valor grande embaixo. Assim o
   rótulo nunca quebra no meio, mesmo no cartão estreito. */
.kpi-dinheiro-pe.comissao { margin-top: 10px; padding-top: 10px; flex-direction: column; align-items: flex-start; gap: 3px; }
.kpi-dinheiro-pe.comissao + .kpi-dinheiro-pe { border-top: 0; margin-top: 6px; padding-top: 0; }
.kpi-dinheiro-pe.comissao span { display: flex; align-items: center; gap: 8px; font-size: 11.5px; white-space: nowrap; }
.kpi-dinheiro-pe.comissao b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kpi-dinheiro-pe.comissao .delta { font-size: 10px; padding: 1px 6px; }

/* ─── Botão "Suporte" no rodapé da sidebar ────────────────────────────
   O seletor de conta do modo suporte sai da vista; fica um botão pequeno
   com a carinha de robô. Clicou, a caixa com o seletor aparece embaixo. */
#peSuporte { flex-direction: column; align-items: stretch; gap: 8px; }
.btn-suporte {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  height: 28px; padding: 0 10px; border-radius: 9999px;
  border: 1px solid #CBD2D9; background: #FFFFFF; color: var(--ink-2);
  font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer;
}
.btn-suporte svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-suporte:hover { background: var(--surface-2); }
.btn-suporte[aria-expanded="true"] { background: var(--azul-fraco); border-color: var(--azul-alto); color: var(--azul-alto); }
.suporte-caixa[hidden] { display: none !important; }
.suporte-caixa select { width: 100%; box-sizing: border-box; min-height: 32px; font-size: 12px; }
/* Na barra recolhida (só ícones) o botão vira só a carinha. */
body:not(.menu-expandido) .btn-suporte { padding: 0; width: 28px; justify-content: center; font-size: 0; align-self: center; }
body:not(.menu-expandido) .btn-suporte svg { width: 16px; height: 16px; }

/* botao Suporte encostado a esquerda, como o resto do rodape */
#peSuporte .btn-suporte { align-self: flex-start; margin-right: auto; }

/* ══════════════════════════════════════════════════════════════════════
   TELA META / CAPI — no modelo aprovado
   Cartões de status em linha, abas em pílula, qualidade com anel e
   barras à esquerda, "Como melhorar sua nota" à direita.
   ══════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------- cartões de status -- */
#metaStatus .statbar { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 12px; margin: 0 0 14px; background: transparent; border: 0; padding: 0; }
#metaStatus .stat {
  display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: center;
  min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-right: 1px solid var(--line);
  border-radius: 12px; background: #FFFFFF;
}
#metaStatus .stat::before {
  content: ''; grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 8px;
  background-color: var(--surface-2); background-size: 16px; background-position: center; background-repeat: no-repeat;
}
#metaStatus .stat b { grid-column: 2; font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#metaStatus .stat i { grid-column: 2; font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
#metaStatus .stat.warn b { color: var(--warn); }
#metaStatus .stat.bad  b { color: var(--bad); }
/* 1 envio · 2 conjunto de dados · 3 qualidade · 4 fila */
#metaStatus .stat:nth-child(1)::before { background-color: #E7F3EA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006B4E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 14c2-6 5-8 8-2s5 6 7 0c-2 6-5 8-8 2s-5-6-7 0z'/%3E%3C/svg%3E"); }
#metaStatus .stat:nth-child(2)::before { background-color: #E7F3EA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006B4E' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8.5' r='3.2'/%3E%3Cpath d='M3.5 19c.8-3 3-4.5 5.5-4.5s4.7 1.5 5.5 4.5'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.4'/%3E%3C/svg%3E"); }
#metaStatus .stat:nth-child(3)::before { background-color: #FDF3D8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6508' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 20a8 8 0 1 1 8-8'/%3E%3Cpath d='M12 12l4-4'/%3E%3C/svg%3E"); }
#metaStatus .stat:nth-child(4)::before { background-color: #E7F3EA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006B4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E"); }
/* Conectado = o primeiro cartão em verde cheio, como no modelo. */
#metaStatus .stat:first-child.good { background: linear-gradient(135deg, #12805F 0%, #0A5A43 100%); border-color: transparent; }
#metaStatus .stat:first-child.good b { color: #FFFFFF; font-size: 22px; }
#metaStatus .stat:first-child.good i { color: rgba(255,255,255,.78); }
#metaStatus .stat:first-child.good::before { background-color: rgba(255,255,255,.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 14c2-6 5-8 8-2s5 6 7 0c-2 6-5 8-8 2s-5-6-7 0z'/%3E%3C/svg%3E"); }
#metaStatus .stat:first-child.warn { border-left: 3px solid var(--warn); }

/* ------------------------------------------------------- abas em pílula -- */
.abas-meta {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin: 2px 0 14px;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 9999px; max-width: 100%; overflow-x: auto;
}
.aba-meta {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 0; border-radius: 9999px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.aba-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aba-meta:hover { background: var(--surface-2); }
.aba-meta.atual { background: #0A5A43; color: #FFFFFF; }
.aba-meta:focus-visible { outline: 2px solid var(--azul-alto); outline-offset: 2px; }
.painel-meta[hidden] { display: none !important; }

/* Título de painel dentro do cartão (junta o h2 ao bloco abaixo). */
.painel-meta > h2 {
  font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink);
  margin: 0; padding: 16px 20px 0; background: #FFFFFF; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0;
}
.painel-meta > h2 + .mini { margin: 6px 0 0; padding: 0 20px 12px; background: #FFFFFF; border: 1px solid var(--line); border-top: 0; border-bottom: 0; }
.painel-meta > .politica, .painel-meta > .qualidade { border-radius: 0 0 12px 12px; }
.painel-meta[data-painel-meta="diagnostico"] > h2 { margin-top: 14px; }
.painel-meta[data-painel-meta="diagnostico"] > .wrap { border-radius: 0 0 12px 12px; border-top: 0; }
.painel-meta[data-painel-meta="conexao"] .meta-acoes-principais { margin: 0 0 12px; }

/* ------------------------------------------------ qualidade: duas colunas -- */
.painel-meta[data-painel-meta="visao"] > h2 { border: 0; background: transparent; padding: 0 0 10px; border-radius: 0; }
#qualidadeMeta.qualidade {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 14px;
  background: transparent; border: 0; padding: 0; border-radius: 0;
}
#qualidadeMeta > .qualidade-grid {
  grid-column: 1; grid-row: 1 / span 2;
  grid-template-columns: 200px minmax(0, 1fr); gap: 28px;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px;
}
#qualidadeMeta > .dicas-titulo {
  grid-column: 2; grid-row: 1; margin: 0; padding: 18px 20px 10px;
  background: #FFFFFF; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0;
  font-size: 15px; font-weight: 700;
}
#qualidadeMeta > ul.dicas {
  grid-column: 2; grid-row: 2; margin: 0; padding: 0 20px 18px; list-style: none;
  background: #FFFFFF; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px;
  display: grid; gap: 14px; align-content: start;
}
#qualidadeMeta > .note, #qualidadeMeta > .cartao-titulo:not(.dicas-titulo), #qualidadeMeta > .wrap, #qualidadeMeta > details { grid-column: 1 / -1; }
#qualidadeMeta > .cartao-titulo:not(.dicas-titulo) { margin: 4px 0 -8px; }

/* Anel da nota: conic-gradient com a nota em --pct (o JS a escreve). */
.qualidade-nota { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.qualidade-num {
  position: relative; width: 150px; height: 150px; display: grid; place-items: center;
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); --cor: #0A5A43;
}
.qualidade-num.mid { --cor: #E0A526; color: var(--ink); }
.qualidade-num.bad { --cor: #A20C17; color: var(--ink); }
.qualidade-num.ok  { --cor: #0A5A43; color: var(--ink); }
.qualidade-num::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--cor) calc(var(--pct, 0) * 1%), #F1F4F7 0);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%); mask: radial-gradient(circle, transparent 55%, #000 56%);
}
.qualidade-num small { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.qualidade-txt { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.qualidade-txt strong { display: block; color: var(--ink); font-weight: 500; font-size: 12px; }
.qualidade-nota .mini { font-size: 11px; text-align: left; margin-top: 10px; }

.qualidade-sinais .cartao-titulo { font-size: 12px; font-weight: 700; margin: 0 0 8px; }
.qualidade-sinais .cartao-sub { font-weight: 400; color: var(--ink-3); font-size: 11.5px; }
.sinal { grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 12px; padding: 4px 0; font-size: 11.5px; }
.sinal-rotulo { color: var(--ink-2); }
.sinal-rotulo small { color: var(--ink-3); font-size: 10.5px; }
.sinal-barra { height: 6px; background: #F1F4F7; }
.sinal-barra b { background: #0A5A43; }
.sinal-barra b.mid { background: #E0A526; }
.sinal-barra b.bad { background: #A20C17; }
.sinal-barra b.off { background: repeating-linear-gradient(90deg, #E9EAEB 0 6px, transparent 6px 10px); }
.sinal-pct { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.sinal.desligado .sinal-pct { color: var(--ink-3); font-weight: 400; }

/* Dicas como no modelo: etiqueta + texto. */
.dica { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); padding: 0; border: 0; background: transparent; }
.dica-nivel {
  display: inline-flex; justify-content: center; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; background: #F1F4F7; color: #1C2B33; white-space: nowrap;
}
.dica.alto .dica-nivel { background: #FBE9EA; color: #A20C17; }
.dica.medio .dica-nivel { background: #E7F3EA; color: #006B4E; }
.dica.ok .dica-nivel { background: #E7F3EA; color: #006B4E; }

/* ------------------------------------------------------------ responsivo -- */
@media (max-width: 1100px) {
  #metaStatus .statbar { grid-template-columns: 1fr 1fr; }
  #qualidadeMeta.qualidade { grid-template-columns: 1fr; }
  #qualidadeMeta > .qualidade-grid { grid-column: 1; grid-row: auto; }
  #qualidadeMeta > .dicas-titulo, #qualidadeMeta > ul.dicas { grid-column: 1; grid-row: auto; }
}
@media (max-width: 700px) {
  #qualidadeMeta > .qualidade-grid { grid-template-columns: 1fr; gap: 16px; }
  .sinal { grid-template-columns: 110px minmax(0, 1fr) 36px; }
  .abas-meta { border-radius: 12px; }
}
@media (max-width: 560px) {
  #metaStatus .statbar { grid-template-columns: 1fr; }
}

/* ─── Meta / CAPI · ajustes vistos no screenshot ────────────────────
   1) "62" e "/100" na mesma linha dentro do anel.
   2) a coluna das dicas: linha 1 = só o título; o resto vai para a lista.
      Sem isto a grade dividia a altura do cartão da esquerda em duas
      partes iguais e abria um vão entre título e lista. */
.qualidade-num { display: flex; align-items: baseline; justify-content: center; }
#qualidadeMeta.qualidade { grid-template-rows: auto 1fr; }
#qualidadeMeta > ul.dicas { align-content: start; }

/* anel: numero e "/100" lado a lado, centrados na vertical */
.qualidade-num { display: grid; grid-auto-flow: column; align-items: baseline; justify-content: center; align-content: center; column-gap: 2px; }

/* ─── Convite por link (produtor ↔ afiliado) ─────────────────────────── */
.convite-link { display: flex; flex-direction: column; gap: 10px; }
.convite-link-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.convite-link-topo .cap { font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.convite-link-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.convite-url {
  width: 100%; min-height: 36px; padding: 0 12px; border-radius: 8px; box-sizing: border-box;
  border: 1px solid #CBD2D9; background: var(--surface-2); color: var(--ink);
  font-family: var(--mono); font-size: 12px; text-overflow: ellipsis;
}
.convite-link-linha a.act { text-decoration: none; }
@media (max-width: 700px) { .convite-link-linha { grid-template-columns: 1fr; } }

.convite-aceite {
  margin-top: 12px; padding: 16px 18px; border: 1px solid rgba(0,107,78,.30); border-radius: 12px;
  background: #FFFFFF; display: flex; flex-direction: column; gap: 12px;
}
.convite-aceite-topo { display: flex; align-items: center; gap: 12px; }
.convite-aceite-topo > div { display: flex; flex-direction: column; line-height: 1.25; }
.convite-aceite-topo strong { font-size: 15px; font-weight: 700; }
.avatar-produtor {
  width: 40px; height: 40px; border-radius: 50%; background: #0A5A43; color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none;
}
.convite-perm { display: grid; gap: 6px; font-size: 13px; max-width: 360px; }
.convite-aceite .row { gap: 8px; }

/* ==================================================== CENTRAL DE AVISOS ==
   Sino no cabecalho e gaveta propria. Sem token novo e sem cor nova: tudo
   sai da paleta ja publicada (--warn/--warn-dim para atencao, --bad/--bad-dim
   para critico, --azul-alto para acao). As variantes .badge.warn/.bad ja
   existem, mas estao escopadas em `main` — o sino vive no #topo, entao a
   mesma regra e repetida aqui com os MESMOS tokens, nao com cores novas.
   ======================================================================== */

#sino {
  position: relative;
  flex: none;
  width: var(--h-controle-mini);
  height: var(--h-controle-mini);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}
#sino:hover { background: var(--surface-2); color: var(--ink); }
#sino:focus-visible { outline: none; box-shadow: var(--foco); }
#sino[hidden] { display: none; }

#sino .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--bg-deep);
  background: var(--warn-dim);
  color: var(--warn);
}
#sino .badge.bad { background: var(--bad-dim); color: var(--bad); }
#sino .badge[hidden] { display: none; }

/* -------------------------------------------------------- a gaveta */

#fundoAvisos {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .28); backdrop-filter: blur(2px);
}
#fundoAvisos[hidden] { display: none; }

#gavetaAvisos {
  position: fixed; inset: 0 0 0 auto; z-index: 60;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: var(--sombra-3);
  transform: translateX(100%);
  transition: transform .18s ease;
}
#gavetaAvisos.aberta { transform: none; }
#gavetaAvisos[hidden] { display: none; }

/* As regras de layout de .gaveta-topo estao escopadas em #gaveta — a gaveta
   de cliente —, entao esta aqui NAO as herda. Repetidas com os MESMOS valores,
   sem cor nova, para o cabecalho ter altura e respiro iguais. */
#gavetaAvisos .gaveta-topo {
  flex: none;
  height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
#gavetaAvisos .gaveta-topo .spacer { margin-left: auto; }
#gavetaAvisos .gaveta-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 16px 28px;
}
.avisos-resumo {
  flex: none;
  margin: 0;
  padding: 10px 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12.5px;
}
.avisos-resumo:empty { display: none; }

/* --------------------------------------------------------- secoes */

.aviso-secao { margin-top: 18px; }
.aviso-secao h3 {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.aviso-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.aviso-item.sev-critico       { border-left-color: var(--bad); }
.aviso-item.sev-atencao       { border-left-color: var(--warn); }
.aviso-item.sev-recomendacao  { border-left-color: var(--azul-alto); }
.aviso-item.sev-proximo_passo { border-left-color: var(--line-2); }

.aviso-sev {
  grid-column: 1;
  align-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-2);
}
.sev-critico .aviso-sev      { background: var(--bad-dim);  color: var(--bad); }
.sev-atencao .aviso-sev      { background: var(--warn-dim); color: var(--warn); }
.sev-recomendacao .aviso-sev { background: var(--azul-fraco); color: var(--azul-alto); }

.aviso-texto { grid-column: 2; min-width: 0; }
.aviso-texto strong {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}
.aviso-texto p {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.aviso-comp { color: var(--ink-3) !important; }

.aviso-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px;
}
.aviso-origem { font-size: 11.5px; color: var(--ink-3); }
.aviso-ir { margin-left: auto; }

.aviso-vazio {
  display: grid; gap: 4px;
  padding: 26px 16px;
  text-align: center;
}
.aviso-vazio strong { font-size: 13.5px; color: var(--ink); }
.aviso-vazio span { font-size: 12.5px; color: var(--ink-3); }

/* --------------------------------------------------------- mobile */

/* O avatar do topo e `position: absolute; right: 20px`, e o #topo usa
   `justify-content: center`. Sem reservar espaco, o sino — que e um item
   normal do flex — caia exatamente embaixo do avatar: medi 344-374 contra
   340-370 em 390px, praticamente empilhados, com as areas clicaveis se
   sobrepondo.

   A correcao e estrutural e usa o que ja existe: o sino ganha `margin-left:
   auto` para encostar na direita e uma margem que RESERVA a faixa do avatar
   absoluto. Nada de esconder controle, trocar icone ou posicionar o sino no
   absoluto tambem — os dois seguem sendo botoes separados e clicaveis. */

/* ==========================================================================
   REDESIGN 2026-09 — a pele nova do Trackeamento ADS
   ==========================================================================

   O que esta camada faz, e por que está no fim do arquivo:

   O CSS da plataforma já nasceu em duas camadas — o tema escuro original
   (:root da linha 17) e uma camada clara que o sobrescreve inteiro. Esta é a
   terceira, e segue a mesma disciplina: nenhum seletor existente é apagado,
   nenhuma classe é renomeada, nenhum id muda. O JavaScript continua achando
   exatamente o que achava antes — 201 ids, 111 onclick e 317 funções globais
   seguem intactos, porque a pele é trocada por TOKEN, não por reescrita.

   O que muda de fato:

   1. O verde. O anterior (#0A5A43 escuro, #E7F3EA quase branco) produzia o
      defeito que o brief manda eliminar: item ativo apagado, card sem vida,
      "plataforma parece desativada". Aqui o verde é esmeralda vivo #00A868
      para ação e floresta #04563B para contraste — o par do modelo aprovado.

   2. Marca de terceiro tem a cor do terceiro. Verde é a identidade DESTA
      plataforma; a Meta é azul, a Hyppe é roxa, a PaguePay é laranja. Pintar
      tudo de verde apaga a informação que a cor carrega.

   3. Hover nunca apaga. Nenhuma regra daqui usa `opacity` no container como
      efeito de hover, e as três regras antigas que faziam isso são
      neutralizadas nominalmente mais abaixo.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- superfícies */
  --bg:        #F7F9F8;   /* branco levemente frio, com um sopro de verde */
  --bg-deep:   #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F2F6F4;
  --hover:     #EFF5F2;
  --line:      #E2E8E5;
  --line-2:    #EDF1EF;

  /* --------------------------------------------------------------- texto
     Azul-marinho quase preto: alto contraste, sem o cinza que some. */
  --ink:   #0E1F1A;
  --ink-2: #2B3B36;
  --ink-3: #5A6B65;   /* sólido, não rgba: texto auxiliar que continua legível */
  --ink-4: #7B8B85;

  /* ------------------------------------------------------- verde da ação
     `--azul` é, historicamente, o token da AÇÃO neste CSS. Mantenho o nome
     (renomear quebraria centenas de regras) e troco o valor. */
  --azul:       #00A868;   /* esmeralda vivo — ação, seleção, sucesso */
  --azul-alto:  #04563B;   /* floresta — texto sobre verde claro, hover forte */
  --azul-fraco: #E4F5EC;   /* tint de apoio */
  --azul-glow:  0 0 0 3px rgba(0, 168, 104, .22);
  --foco:       0 0 0 2px #FFFFFF, 0 0 0 4px #00A868;

  /* nomes próprios, para quem for ler o CSS depois */
  --verde:        #00A868;
  --verde-vivo:   #12C47C;
  --verde-fundo:  #04563B;
  --verde-escuro: #063D2B;
  --verde-suave:  #E4F5EC;
  --verde-tint:   #F1FAF5;
  --verde-linha:  #BFE5D2;

  /* ------------------------------------------------------------- dourado
     Só recomendação, essencial, conquista e destaque premium. */
  --ouro:        #B8860B;
  --ouro-forte:  #8A6508;
  --ouro-suave:  #FCF4DF;
  --ouro-linha:  #EBD9A3;

  /* --------------------------------------------------------- semânticas */
  --ok:       #00875A;  --ok-dim:   #E4F5EC;
  --warn:     #8A6508;  --warn-dim: #FDF4DE;
  --bad:      #B3261E;  --bad-dim:  #FCEAE9;
  --info:     #0081FB;  --info-dim: #E7F2FE;   /* azul da Meta */

  /* -------------------------------------------------------------- forma */
  --r:     10px;
  --r-lg:  14px;
  --r-sm:  8px;
  --pill:  9999px;

  --h-controle:      38px;
  --h-controle-mini: 30px;

  --sombra-1: 0 1px 2px rgba(14, 31, 26, .05);
  --sombra-2: 0 4px 14px rgba(14, 31, 26, .07);
  --sombra-3: 0 16px 40px rgba(14, 31, 26, .12);
  --sombra-verde: 0 4px 14px rgba(0, 168, 104, .18);

  --transicao: .15s cubic-bezier(.4, 0, .2, 1);
}

/* Cor de marca de cada integração. Só a cor e a inicial — nenhuma logo
   reproduzida, como o brief exige. */
:root {
  --m-logzz:    #00A651;   /* verde */
  --m-hyppe:    #7C6BF5;   /* roxo-azulado */
  --m-coinzz:   #8B15E8;   /* violeta */
  --m-paguepay: #F26522;   /* laranja */
  --m-scalacode:#0EA5A5;   /* turquesa */
  --m-meta:     #0081FB;   /* azul da Meta */
  --m-whatsapp: #25D366;
  --m-generico: #64748B;
}

html, body { background: var(--bg); color: var(--ink); }

/* ============================================================== sidebar ==
   Item ativo em verde sólido com texto branco — o ponto que estava apagado.
   Hover em tint verde com texto escuro, nunca reduzindo contraste. */
#sidebar { background: #FFFFFF; border-right: 1px solid var(--line); }

#nav button, #nav summary { border-radius: var(--r-sm); transition: background var(--transicao), color var(--transicao); }
#nav button { color: var(--ink-2); font-weight: 500; }
#nav button svg { opacity: 1; }

#nav button:hover:not([aria-current="page"]) {
  background: var(--verde-suave);
  color: var(--verde-fundo);
}
#nav button:hover:not([aria-current="page"]) svg { color: var(--verde-fundo); }

#nav button[aria-current="page"] {
  background: var(--verde-fundo);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: var(--sombra-1);
}
#nav button[aria-current="page"] svg { color: #FFFFFF; opacity: 1; }
#nav button[aria-current="page"]:hover { background: var(--verde-escuro); color: #FFFFFF; }
#nav button[aria-current="page"] .badge.calmo { background: rgba(255, 255, 255, .22); color: #FFFFFF; }

#nav summary { color: var(--ink-3); font-weight: 700; }
#nav summary:hover { background: var(--verde-suave); color: var(--verde-fundo); }
.nav-avancado { border-top-color: var(--line); }

.marca { color: var(--ink); font-weight: 700; }
.marca-completa::before { background-color: var(--verde-suave); }

.sidebar-pe { border-top-color: var(--line); }
.avatar { background: var(--verde-fundo); color: #FFFFFF; border: 0; font-weight: 600; }
.sidebar-pe button:hover { background: var(--verde-suave); color: var(--verde-fundo); }

/* ================================================================ topo == */
#topo {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
#topo h1#tituloPagina { color: var(--ink); font-weight: 700; letter-spacing: -.015em; }

.busca input {
  background: #FFFFFF; border: 1px solid var(--line); color: var(--ink);
  height: var(--h-controle); border-radius: var(--pill);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca input:hover { border-color: var(--verde-linha); }
.busca input:focus { border-color: var(--verde); box-shadow: var(--azul-glow); }
.busca .lupa { color: var(--ink-4); }

/* o sino e o avatar do topo */
#topo .act, #topo button.icone { border-radius: var(--pill); }

/* ============================================================== botões ==
   Primário verde sólido, secundário branco com borda, ambos com texto que
   nunca perde contraste no hover. */
button.act, main .act {
  background: #FFFFFF;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 550;
  border-radius: var(--r-sm);
  box-shadow: none;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
button.act:hover:not(:disabled), main .act:hover:not(:disabled) {
  background: var(--verde-tint);
  border-color: var(--verde-linha);
  color: var(--verde-fundo);
}
button.act:active:not(:disabled), main .act:active:not(:disabled) { background: var(--verde-suave); }
button.act:focus-visible, main .act:focus-visible { outline: none; box-shadow: var(--foco); }
button.act:disabled, main .act:disabled { background: var(--surface-2); color: var(--ink-4); border-color: var(--line); cursor: not-allowed; }

main .act.primary, button.act.primary {
  background: var(--verde-fundo); border-color: var(--verde-fundo); color: #FFFFFF;
  box-shadow: var(--sombra-1);
}
main .act.primary:hover:not(:disabled), button.act.primary:hover:not(:disabled) {
  background: var(--verde-escuro); border-color: var(--verde-escuro); color: #FFFFFF;
  box-shadow: var(--sombra-verde);
}
main .act.primary:disabled, button.act.primary:disabled { background: #9DBDB0; border-color: #9DBDB0; color: #FFFFFF; }

/* Premium/recomendação — dourado discreto */
main .act.premium, button.act.premium, .act[data-premium] {
  background: var(--ouro-suave); border-color: var(--ouro-linha); color: var(--ouro-forte); font-weight: 600;
}
main .act.premium:hover:not(:disabled) { background: #F8ECCC; border-color: var(--ouro); color: var(--ouro-forte); }

main .act.perigo, main .act.danger, main .act[data-perigo], button.act.perigo {
  background: var(--bad-dim); border-color: #F0C9C6; color: var(--bad);
}
main .act.perigo:hover:not(:disabled) { background: #F9DAD8; border-color: var(--bad); color: var(--bad); }

a.produto-btn.verde { background: var(--verde-fundo); color: #FFFFFF; }
a.produto-btn.verde:hover { background: var(--verde-escuro); color: #FFFFFF; }

/* ============================================================== campos == */
main input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
main select, main textarea,
.form-cred input[type="text"], .form-cred input[type="password"], .form-cred input[type="email"],
.form-cred input[type="url"], .form-cred input:not([type]) {
  background: #FFFFFF; border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
main input:hover:not(:disabled), main select:hover:not(:disabled), main textarea:hover:not(:disabled) {
  border-color: var(--verde-linha);
}
main input:focus, main select:focus, main textarea:focus, .form-cred input:focus {
  border-color: var(--verde); box-shadow: var(--azul-glow); outline: none;
}
main input::placeholder, main textarea::placeholder { color: var(--ink-4); }
main input:disabled, main select:disabled, main textarea:disabled {
  background: var(--surface-2); color: var(--ink-3); cursor: not-allowed;
}
main label { color: var(--ink-2); font-weight: 550; }

/* =============================================================== cards == */
.card, .painel-fonte, .secao, .ficha, .bloco, .kpi, .stat,
.modelo-card, .escolha, .painel-meta, .onboarding, .dica {
  border-radius: var(--r);
}
.card, .secao, .painel-fonte {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-1);
}

/* KPI: tile de ícone colorido + número forte, como no modelo */
.kpi, .kpi-operacao, .kpi-saude {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sombra-1);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.kpi:hover, .kpi-operacao:hover { border-color: var(--verde-linha); box-shadow: var(--sombra-2); }

/* O card de dinheiro é o destaque da tela: verde profundo, texto branco */
.kpi-dinheiro, .kpi-dinheiro-pe {
  background: linear-gradient(150deg, var(--verde-fundo) 0%, var(--verde-escuro) 100%);
  border: 1px solid var(--verde-fundo);
  color: #FFFFFF;
  box-shadow: var(--sombra-2);
}
.kpi-dinheiro *, .kpi-dinheiro-pe * { color: #FFFFFF; border-color: rgba(255, 255, 255, .22); }
.kpi-dinheiro .rotulo, .kpi-dinheiro-pe .rotulo { color: rgba(255, 255, 255, .82); }

/* ============================================================== tabelas == */
main table { border-color: var(--line); }
main thead th, main table th {
  background: var(--verde-tint); color: var(--ink-2);
  font-weight: 650; border-bottom: 1px solid var(--verde-linha);
}
main tbody tr { transition: background var(--transicao); }
main tbody tr:hover { background: var(--verde-tint); }
main tbody td { border-bottom: 1px solid var(--line-2); color: var(--ink); }

/* =============================================================== pills == */
.pill {
  border-radius: var(--pill); font-weight: 600;
  border: 1px solid transparent;
}
.pill.ok    { background: var(--ok-dim);   color: var(--ok);    border-color: var(--verde-linha); }
.pill.warn, .pill.atencao { background: var(--warn-dim); color: var(--warn); border-color: var(--ouro-linha); }
.pill.bad, .pill.erro     { background: var(--bad-dim);  color: var(--bad);  border-color: #F0C9C6; }
.pill.brand { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.pill.calm  { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
.pill.premium, .pill.ouro, .pill.essencial {
  background: var(--ouro-suave); color: var(--ouro-forte); border-color: var(--ouro-linha);
}
.pill.info { background: var(--info-dim); color: #0069CC; border-color: #BEDDFB; }

/* ========================================================== onboarding ==
   Configuração principal = verde. Recomendado/essencial = dourado.
   Opcional = neutro elegante, nunca com cara de erro. */
.onboarding, .onboarding-grupo { background: var(--surface); border-color: var(--line); }
.onboarding-passo {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.onboarding-passo:hover { border-color: var(--verde-linha); background: var(--verde-tint); box-shadow: var(--sombra-1); }
/* o passo concluído continua legível: marca verde em vez de apagar o bloco */
.onboarding-passo.feito { opacity: 1; background: var(--verde-tint); border-color: var(--verde-linha); }
.onboarding-passo.grupo-essencial { background: var(--ouro-suave); border-color: var(--ouro-linha); }
.onboarding-passo.grupo-essencial:hover { background: #F8ECCC; border-color: var(--ouro); }

/* ================================================================ funil ==
   Cada etapa com a própria cor: a cor É a informação. */
.funnel, .kanban { background: transparent; }
.ficha {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sombra-1);
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.ficha:hover { border-color: var(--verde-linha); background: var(--surface); box-shadow: var(--sombra-2); }
/* arrastando: o cartão precisa continuar LEGÍVEL enquanto é movido */
.ficha.arrastando { opacity: 1; border-color: var(--verde); box-shadow: var(--sombra-3); transform: rotate(-1deg); }
.ficha button:hover { opacity: 1; color: var(--verde-fundo); }

/* ======================================================== integrações ==
   Círculo + inicial, com a cor da marca. Nenhuma logo reproduzida. */
.fonte-avatar {
  flex: none; width: 38px; height: 38px; border-radius: var(--pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #FFFFFF;
  background: var(--m-generico);
  box-shadow: var(--sombra-1);
  text-transform: uppercase; user-select: none;
}
.fonte-avatar[data-m="logzz"]     { background: var(--m-logzz); }
.fonte-avatar[data-m="hyppe"]     { background: var(--m-hyppe); }
.fonte-avatar[data-m="coinzz"]    { background: var(--m-coinzz); }
.fonte-avatar[data-m="paguepay"]  { background: var(--m-paguepay); }
.fonte-avatar[data-m="braip"]     { background: #7055b8; }
.fonte-avatar[data-m="scalacode"] { background: var(--m-scalacode); }
.fonte-avatar[data-m="manual"]    { background: var(--m-generico); }
/* Coinzz Afterpay e a mesma marca da Coinzz: o avatar pinta pelo slug quando
   o adapter e generico (). So cor — a source, o token e o webhook
   continuam totalmente independentes. */
.fonte-avatar[data-m="coinzz-after"] { background: var(--m-coinzz); }

.painel-fonte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sombra-1);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.painel-fonte:hover { border-color: var(--verde-linha); box-shadow: var(--sombra-2); }

.url-hook {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink-2);
}

/* papel: essencial em dourado, opcional em neutro — nunca vermelho */
.papel-bloco { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.papel-bloco.pendente { background: var(--ouro-suave); border-color: var(--ouro-linha); }
.papel-bloco.opcional { background: var(--surface-2); border-color: var(--line); border-style: dashed; }
.papel-opcao {
  background: #FFFFFF; border: 1px solid var(--line); color: var(--ink-2);
  border-radius: var(--r-sm); font-weight: 550;
}
.papel-opcao:hover { border-color: var(--verde-linha); background: var(--verde-tint); color: var(--verde-fundo); }
.papel-opcao.ativa { border-color: var(--verde); background: var(--verde-suave); color: var(--verde-fundo); font-weight: 650; }
.papel-opcao.ativa::before { color: var(--verde-fundo); }
.papel-opcao:focus-visible { outline: none; box-shadow: var(--foco); }

/* ============================================================ Meta/CAPI ==
   A Meta é azul. Verde aqui seria pintar a marca de outra empresa. */
#meta .tabs button[aria-selected="true"], .painel-meta .tab-ativa {
  color: var(--ink); border-bottom-color: var(--verde);
}
.meta-marca, .meta-logo {
  color: var(--m-meta); background: var(--info-dim); border-radius: var(--r-sm);
}
.pill.meta, .badge-meta { background: var(--info-dim); color: #0069CC; border: 1px solid #BEDDFB; }

/* ================================================================ abas ==
   A plataforma tem tres familias de aba, cada uma com a propria classe de
   estado: .aba-meta.atual, .aba-ads.ativa e [aria-selected]. Estilizo as
   tres pelo mesmo padrao, sem renomear nenhuma. */
.abas-meta, .abas-ads, main [role="tablist"] { border-bottom: 1px solid var(--line); }

.aba-meta, .aba-ads, .aba-cont, main [role="tab"] {
  color: var(--ink-3); font-weight: 550; border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.aba-meta:hover, .aba-ads:hover, .aba-cont:hover, main [role="tab"]:hover {
  color: var(--verde-fundo); border-bottom-color: var(--verde-linha); background: var(--verde-tint);
}
.aba-meta.atual, .aba-ads.ativa, .aba-cont.ativa,
main [role="tab"][aria-selected="true"] {
  color: var(--verde-fundo); border-bottom-color: var(--verde); font-weight: 650; background: transparent;
}
.aba-meta:focus-visible, .aba-ads:focus-visible, main [role="tab"]:focus-visible {
  outline: none; box-shadow: var(--foco);
}

/* ============================================================== toggles == */
.switch input:checked + span, .switch [data-on="1"] { background: var(--verde); }

/* ============================================================== gráfico == */
.grafico { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.sinal-barra { background: var(--verde); }

/* ============================== §6 hover nunca apaga: as regras antigas ==
   Três lugares reduziam opacity no hover ou no estado. Aqui elas são
   neutralizadas nominalmente, sem apagar a regra original. */
.filtro-ads button { opacity: 1; }
.filtro-ads button:hover { opacity: 1; background: var(--verde-tint); color: var(--verde-fundo); }

/* ========================================================= acessibilidade */
:focus-visible { outline: none; box-shadow: var(--foco); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   REDESIGN — segunda passada: os componentes que já existem, revividos
   ==========================================================================
   Nada aqui inventa elemento. Cada regra abaixo mira um seletor que a
   plataforma já usa — os tiles de ícone do KPI, as barras do funil, o gráfico,
   a saúde do rastreio — e troca só a cor/forma para a paleta nova. O verde
   antigo (#E7F3EA sobre #006B4E) era o que dava a aparência apagada.
   ========================================================================== */

/* ---------------------------------------------------- KPI: tiles de ícone
   Os quatro tiles já vinham desenhados em CSS; só a cor era pálida.
   Cada um ganha a cor do que ele mede — e não tudo verde. */
.kpi-operacao .kpi::before { border-radius: 10px; }

/* 1 Entregues — verde (é conclusão) */
.kpi-operacao .kpi:nth-child(1)::before {
  background-color: var(--verde-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304563B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
}
/* 2 Taxa de entrega — a cor vem do estado, tratado abaixo */
.kpi-operacao .kpi:nth-child(2)::before {
  background-color: var(--verde-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304563B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 20a8 8 0 1 1 8-8'/%3E%3Cpath d='M12 12l4-4'/%3E%3C/svg%3E");
}
/* 3 Na esteira — âmbar: é dinheiro em trânsito, não concluído */
.kpi-operacao .kpi:nth-child(3)::before {
  background-color: var(--ouro-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6508' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}
/* 4 WhatsApp — a cor do WhatsApp, porque é a marca dele */
.kpi-operacao .kpi:nth-child(4)::before {
  background-color: #E3F9EC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128C4A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
}
.kpi-operacao .kpi.bad::before  { background-color: var(--bad-dim); }
.kpi-operacao .kpi.warn::before { background-color: var(--ouro-suave); }

.kpi-operacao .kpi .v { color: var(--ink); font-weight: 700; }
.kpi-operacao .kpi .k { color: var(--ink-3); font-weight: 600; }
.kpi-operacao .kpi .s { color: var(--ink-3); }
.kpi-operacao .kpi.bad .v  { color: var(--bad); }
.kpi-operacao .kpi.warn .v { color: var(--warn); }

/* o delta: sobe verde, desce vermelho, igual neutro */
.delta { font-weight: 650; }
.delta.up   { background: var(--verde-suave); color: var(--verde-fundo); }
.delta.down { background: var(--bad-dim);     color: var(--bad); }
.delta.flat { background: var(--surface-2);   color: var(--ink-3); }

/* ------------------------------------------------ saúde do rastreio */
.kpi-saude { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-1); }
.kpi-saude > .k { color: var(--ink-3); }
.kpi-saude .saude-linha .val { color: var(--ink); }

/* ------------------------------------------------------------ barras
   A barra é informação: cheia em verde vivo, trilho claro e visível. */
.sinal-barra { background: var(--surface-2); border: 1px solid var(--line-2); height: 7px; }
.sinal-barra b        { background: var(--verde); }
.sinal-barra b.ok     { background: var(--verde); }
.sinal-barra b.mid    { background: var(--ouro); }
.sinal-barra b.bad    { background: var(--bad); }
.sinal-barra b.off    { background: var(--line); }

/* ------------------------------------------------------------ gráfico */
.grafico { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-1); }
.grafico svg path[stroke]:not([stroke="none"]) { stroke: var(--verde); }
.grafico svg circle { fill: var(--verde); }
.grafico .eixo, .grafico text { fill: var(--ink-3); }

/* --------------------------------------------------------- funil agora
   Cada etapa é uma etapa diferente: a cor carrega essa informação, em vez
   de cinco tons do mesmo verde. */
.funnel .rot, .funil-linha .rot { color: var(--ink-2); }
.funnel .val, .funil-linha .val { color: var(--ink); font-weight: 650; }
.funnel-perdas, .funil-perdas { color: var(--bad); font-weight: 650; }

/* ------------------------------------------------------------- tabelas
   Cabeçalho com tint verde suave; linha com hover legível. */
.tabela-simples th, table.simples th { background: var(--verde-tint); color: var(--ink-2); }
main tbody tr:hover td { background: transparent; }

/* --------------------------------------------------------------- notas */
.note { border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.note.erro { background: var(--bad-dim); border-color: #F0C9C6; color: var(--bad); }
.note.ok   { background: var(--verde-suave); border-color: var(--verde-linha); color: var(--verde-fundo); }
.note.aviso, .note.warn { background: var(--ouro-suave); border-color: var(--ouro-linha); color: var(--ouro-forte); }
.dica { background: var(--verde-tint); border: 1px solid var(--verde-linha); color: var(--ink-2); border-radius: var(--r-sm); }

/* ------------------------------------------------------------ toasts */
.toast { border-radius: var(--r-sm); box-shadow: var(--sombra-3); }
.toast.bom  { background: var(--verde-fundo); color: #FFFFFF; }
.toast.erro { background: var(--bad); color: #FFFFFF; }

/* --------------------------------------------------- onboarding: grupos */
.onboarding { border-left: 3px solid var(--verde); background: var(--surface); }
.onboarding .rotulo-grupo, .onboarding h4 { color: var(--ink-3); font-weight: 700; letter-spacing: .08em; }
.onboarding-passo .titulo, .onboarding-passo strong { color: var(--ink); }
.onboarding-passo .detalhe, .onboarding-passo small { color: var(--ink-3); }
.onboarding-passo.feito .titulo, .onboarding-passo.feito strong { color: var(--verde-fundo); }

/* ----------------------------------------------------- estados vazios */
.vazio, .empty, .sem-dados {
  background: var(--surface-2); border: 1px dashed var(--line);
  border-radius: var(--r); color: var(--ink-3);
}

/* ==========================================================================
   REDESIGN — terceira passada: Meta/CAPI, tabelas e telas restantes
   ==========================================================================
   A escala ok/mid/bad das barras e do anel é REGRA DE NEGÓCIO — 73% é "média"
   e por isso fica âmbar. Não mudo o limiar, só faço as três cores serem as
   três cores do sistema, legíveis sobre branco.
   ========================================================================== */

/* ------------------------------------------------------ Meta: faixa de status
   A faixa é a identidade da tela. O primeiro bloco (ligado/desligado) é o
   estado da plataforma, então verde; os demais são informativos. */
.statbar .stat.good, .statbar .stat:first-child { color: var(--ink); }
.statbar .stat b, .statbar .stat strong { color: var(--ink); }

/* ------------------------------------------------------- Meta: anel da nota */
.qualidade-num.ok  { --cor: var(--verde);  color: var(--ink); }
.qualidade-num.mid { --cor: var(--ouro);   color: var(--ink); }
.qualidade-num.bad { --cor: var(--bad);    color: var(--ink); }
.qualidade-num small { color: var(--ink-3); }

/* --------------------------------------------------------- Meta: sinais */
.sinal-rotulo { color: var(--ink-2); }
.sinal-rotulo small { color: var(--ink-4); }
.sinal-pct { color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- Meta: dicas */
.dica-nivel, .nivel { border-radius: var(--pill); font-weight: 700; }
.dica .nivel.alto, .nivel.alto   { background: var(--bad-dim);   color: var(--bad); }
.dica .nivel.medio, .nivel.medio { background: var(--ouro-suave); color: var(--ouro-forte); }
.dica .nivel.baixo, .nivel.baixo { background: var(--verde-suave); color: var(--verde-fundo); }

/* ------------------------------------------------------- números em tabela
   Dinheiro e porcentagem alinham por dígito: coluna que se lê de relance. */
main td.num, main th.num, .num, .sinal-pct, .kpi .v {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- Campanhas */
.aba-ads.ativa { color: var(--verde-fundo); border-bottom-color: var(--verde); }
.filtro-ads button.ativo, .filtro-ads button[aria-pressed="true"] {
  background: var(--verde-fundo); color: #FFFFFF; border-color: var(--verde-fundo);
}

/* ------------------------------------------------------------------ funil
   Cada coluna do kanban tem a cor da própria etapa: é assim que se lê um
   kanban de relance. As classes já existem — só ganham cor. */
.col-funil, .kanban-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.col-funil > header, .kanban-col > header { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
.col-funil[data-status="initiated"] > header,
.kanban-col[data-status="initiated"] > header { box-shadow: inset 0 3px 0 #14B8A6; }
.col-funil[data-status="paid"] > header,
.kanban-col[data-status="paid"] > header { box-shadow: inset 0 3px 0 #0081FB; }
.col-funil[data-status="scheduled"] > header,
.kanban-col[data-status="scheduled"] > header { box-shadow: inset 0 3px 0 var(--ouro); }
.col-funil[data-status="shipped"] > header,
.kanban-col[data-status="shipped"] > header { box-shadow: inset 0 3px 0 var(--verde-vivo); }
.col-funil[data-status="delivered"] > header,
.kanban-col[data-status="delivered"] > header { box-shadow: inset 0 3px 0 var(--verde-fundo); }

/* ----------------------------------------------------- escolha / seleção
   Cards de escolha (rastreamento, modelos de landing): selecionado em verde
   sólido na borda, nunca só um tom mais claro. */
.escolha { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.escolha:hover { border-color: var(--verde-linha); background: var(--verde-tint); }
.escolha.ativa, .escolha[aria-pressed="true"], .escolha.sel {
  border-color: var(--verde); background: var(--verde-suave); box-shadow: var(--sombra-1);
}
.escolha.ativa .titulo, .escolha.sel .titulo { color: var(--verde-fundo); }
.modelo-card { border-radius: var(--r); border: 1px solid var(--line); }
.modelo-card:hover { border-color: var(--verde-linha); box-shadow: var(--sombra-2); }
.modelo-card.ativa, .modelo-card.sel { border-color: var(--verde); box-shadow: var(--sombra-verde); }

/* ------------------------------------------------------------- LGPD/legal
   Ações destrutivas isoladas em vermelho, o resto neutro: o brief pede que
   vermelho seja só para o que é mesmo destrutivo. */
.zona-perigo, .perigo-bloco {
  border: 1px solid #F0C9C6; background: var(--bad-dim); border-radius: var(--r);
}
.zona-perigo h3, .zona-perigo strong { color: var(--bad); }

/* ------------------------------------------------------------ formulários */
.form-cred { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
fieldset { border: 1px solid var(--line); border-radius: var(--r); }
legend { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------------------ modais */
.modal, dialog { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sombra-3); }

/* ------------------------------------------------------------- responsivo
   O brief pede layout responsivo real, não escala. Nas larguras estreitas os
   grids de KPI e de cartão passam a uma coluna, e a tabela rola dentro do
   próprio container — nunca a página. */
main table { width: 100%; }
.tabela-rolagem, .tabela-wrap { overflow-x: auto; }

@media (max-width: 1024px) {
  .kpi-operacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .kpi-operacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-saude { flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 560px) {
  .kpi-operacao { grid-template-columns: 1fr; }
  .papel-opcoes { flex-direction: column; }
}

/* ==========================================================================
   REDESIGN — quarta passada: os três estouros que a medição achou
   ==========================================================================
   Medido em iframe do tamanho exato (o Chrome headless não abre janela abaixo
   de ~500px, e medir 390 numa janela de 500 acusa overflow falso):

     painel@1024  → .step do onboarding + <small> sem espaço para quebrar
     meta@390     → as 5 abas em linha, os SVG e a tabela .matriz
     roas@390     → o formulário em grade de 2 colunas fixas

   Cada correção mira o elemento que a medição apontou; nada é escondido.
   ========================================================================== */

/* ------------------------------------------------------- painel @ 1024 */
@media (max-width: 1100px) {
  /* o passo do onboarding precisa poder quebrar a linha do detalhe */
  .onboarding-passo, .step { min-width: 0; }
  .onboarding-passo small, .step small,
  .onboarding-passo .detalhe, .step .detalhe {
    display: block; min-width: 0;
    overflow-wrap: anywhere; white-space: normal;
  }
  .onboarding-grid, .onboarding-grupo > div { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ------------------------------------------------------------ meta @ 390
   As cinco abas passam a rolar em faixa própria — continuam todas presentes
   e clicáveis, o que rola é a faixa, nunca a página. */
@media (max-width: 560px) {
  .abas-meta, .abas-ads, main [role="tablist"] {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .aba-meta, .aba-ads, main [role="tab"] { flex: none; white-space: nowrap; }

  /* os gráficos SVG acompanham a largura do container */
  main svg { max-width: 100%; height: auto; }

  /* a matriz de campos rola dentro do próprio quadro */
  .matriz, table.matriz { display: block; overflow-x: auto; max-width: 100%; }
  .matriz > * { min-width: max-content; }
}

/* ------------------------------------------------------------ roas @ 390
   Formulário em duas colunas vira uma; os campos param de forçar largura. */
@media (max-width: 560px) {
  .grid-form, .grupo-campos, fieldset .grid { grid-template-columns: 1fr !important; }
  .grid-form > *, .grupo-campos > * { min-width: 0; }
  main input, main select, main textarea { max-width: 100%; }
  main label { min-width: 0; overflow-wrap: anywhere; }
  .note, .dica { overflow-wrap: anywhere; }
}

/* ------------------------------------------------- salvaguarda geral 390
   Nada da área de conteúdo pode empurrar a página para o lado. Isto não
   esconde informação: apenas obriga o conteúdo largo a rolar no próprio
   container, que é o que o brief pede. */
@media (max-width: 560px) {
  main, main section { min-width: 0; max-width: 100%; }
  main table { display: block; overflow-x: auto; }
  main pre, main code { overflow-x: auto; max-width: 100%; }
  .url-hook { overflow-wrap: anywhere; }
}

/* ---------------------------------------------- funil agora: o valor à direita
   A grade era `132px 1fr 122px`; em telas médias o rótulo do valor
   ("90 · R$ 15.037,00") passa dos 122px e transborda o cartão. Dar `minmax`
   à coluna e deixar o meio encolher resolve sem esconder nada. */
.funnel .step { grid-template-columns: minmax(0, 132px) minmax(0, 1fr) minmax(112px, auto); }
.funnel .step > small { min-width: 0; }
.funnel .step > small:last-child { white-space: nowrap; }
@media (max-width: 1200px) {
  .funnel .step { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) minmax(104px, auto); }
  .funnel .step > small:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------------------------------------------------------------- pills
   O pill dentro de um container em coluna esticava para a linha inteira; ele
   é um selo, não uma faixa. E "recomendado" é recomendação — dourado, pela
   regra de status do lote, não verde de sucesso. */
.pill { display: inline-flex; align-items: center; width: auto; align-self: flex-start; }
.escolha .pill, label .pill { flex: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   OPERAÇÃO — o modelo aprovado no canvas
   Só forma: nenhum passo novo, nenhum número novo, nenhum controle a mais.
   O que a tela mostra continua saindo de carregarPainel() e de
   pintarAssistenteInicial().
   ═════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- ícones dos KPIs
   Cada tile passa a desenhar a coisa que o número mede. O check genérico, a
   ampulheta e o balão quadrado diziam pouco lado a lado. */

/* 1 Entregues — a caixa com o selo de conferida */
.kpi-operacao .kpi:nth-child(1)::before {
  background-color: var(--verde-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304563B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 11.2V7.7L12 3.3 3.6 7.7v8.6L12 20.7l2.4-1.3'/%3E%3Cpath d='M3.6 7.7 12 12.1l8.4-4.4M12 12.1v8.6'/%3E%3Cpath d='m15.9 18.2 1.9 1.9 3.6-3.9'/%3E%3C/svg%3E");
  background-size: 17px;
}

/* 2 Taxa de entrega — o percentual, que é o que ela é. A cor segue o estado. */
.kpi-operacao .kpi:nth-child(2)::before {
  background-color: var(--verde-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304563B' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M18.6 5.4 5.4 18.6'/%3E%3Ccircle cx='7.9' cy='7.9' r='2.9'/%3E%3Ccircle cx='16.1' cy='16.1' r='2.9'/%3E%3C/svg%3E");
  background-size: 17px;
}
.kpi-operacao .kpi.warn:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6508' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M18.6 5.4 5.4 18.6'/%3E%3Ccircle cx='7.9' cy='7.9' r='2.9'/%3E%3Ccircle cx='16.1' cy='16.1' r='2.9'/%3E%3C/svg%3E");
}
.kpi-operacao .kpi.bad:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M18.6 5.4 5.4 18.6'/%3E%3Ccircle cx='7.9' cy='7.9' r='2.9'/%3E%3Ccircle cx='16.1' cy='16.1' r='2.9'/%3E%3C/svg%3E");
}

/* 3 Na esteira — o caminhão: é dinheiro a caminho, não tempo passando */
.kpi-operacao .kpi:nth-child(3)::before {
  background-color: var(--ouro-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6508' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.6h11.2v9.8H2.5z'/%3E%3Cpath d='M13.7 10.1h3.6l3.2 3.4v2.9h-6.8z'/%3E%3Ccircle cx='6.8' cy='18.4' r='1.9'/%3E%3Ccircle cx='16.8' cy='18.4' r='1.9'/%3E%3C/svg%3E");
  background-size: 17px;
}

/* 4 Chegaram no WhatsApp — o balão de conversa, na cor do WhatsApp */
.kpi-operacao .kpi:nth-child(4)::before {
  background-color: #E3F9EC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128C4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 11.9c0 3.9-3.9 7.1-8.6 7.1-1.1 0-2.1-.16-3-.45L4 20.7l1.6-3.5a6.7 6.7 0 0 1-2.2-5.3c0-3.9 3.9-7.1 8.6-7.1s8.6 3.2 8.6 7.1z'/%3E%3C/svg%3E");
  background-size: 17px;
}

/* ------------------------------------------- os dois tiles do cartão escuro
   Receita e Comissões estavam sem ícone nenhum enquanto os quatro vizinhos
   tinham. Cédula e carteira, no mesmo desenho de 34px do modelo. */
.kpi-dinheiro > div:first-child {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center;
}
.kpi-dinheiro > div:first-child::before {
  content: ''; grid-row: 1 / span 3; width: 34px; height: 34px; border-radius: 9px;
  background-color: rgba(255, 255, 255, .16);
  background-repeat: no-repeat; background-position: center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 9V7.2A2.2 2.2 0 0 0 17.8 5H5.4A2.4 2.4 0 0 0 3 7.4v9.2A2.4 2.4 0 0 0 5.4 19h12.4a2.2 2.2 0 0 0 2.2-2.2V15'/%3E%3Cpath d='M21.5 9.4v5.2h-4a2.6 2.6 0 0 1 0-5.2z'/%3E%3C/svg%3E");
}
.kpi-dinheiro > div:first-child > * { grid-column: 2; }

.kpi-dinheiro-pe.comissao {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 12px;
  align-items: center; row-gap: 3px;
}
.kpi-dinheiro-pe.comissao::before {
  content: ''; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 9px;
  background-color: rgba(255, 255, 255, .16);
  background-repeat: no-repeat; background-position: center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.2' width='19' height='11.6' rx='2.2'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3Cpath d='M6.1 12h.01M17.9 12h.01'/%3E%3C/svg%3E");
}
.kpi-dinheiro-pe.comissao > * { grid-column: 2; }

/* ------------------------------------------------ o assistente vira coluna
   No modelo ele não é uma faixa no topo: é a coluna da direita, ao lado do
   gráfico, do funil e das tabelas. Só em tela larga — abaixo disso volta a
   ocupar a linha inteira, como hoje. */
@media (min-width: 1180px) {
  #painel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: start;
  }
  /* cada filho ganha a sua linha: "Primeiros passos" fica oculto quase sempre
     e, sem posição fixa, o gráfico caía na linha vaga lá em cima */
  #painel > * { grid-column: 1; min-width: 0; }
  #painel > #primeirosPassos { grid-column: 1 / -1; grid-row: 1; }
  #painel > .row             { grid-column: 1 / -1; grid-row: 2; }
  #painel > #kpis            { grid-column: 1 / -1; grid-row: 3; }
  #painel > .linha-grafico   { grid-row: 4; }
  #painel > .split           { grid-row: 5; }
  #painel > h2               { grid-row: 6; }
  #painel > h2 + .wrap       { grid-row: 7; }

  #painel > #assistenteInicial {
    grid-column: 2; grid-row: 4 / 8;
    width: 316px; align-self: start;
  }
  #painel > #assistenteInicial:empty { display: none; }

  /* numa coluna de 316px os passos não cabem em três colunas */
  #painel > #assistenteInicial .onboarding-grid { grid-template-columns: 1fr; }
  #painel > #assistenteInicial .onboarding,
  #painel > #assistenteInicial .onboarding.pronto { display: block; padding: 15px 16px; margin-bottom: 0; }
  #painel > #assistenteInicial .onboarding-topo { align-items: flex-start; }
  #painel > #assistenteInicial .onboarding.pronto .onboarding-barra { display: block; }

  /* o gráfico e o funil dividem a coluna que sobrou */
  #painel > .linha-grafico { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* ------------------------------------------------- filtro de período
   styles.css:3116 desenha esse controle com `#painel > .row:first-child`,
   mas o primeiro filho de #painel é o assistente — a regra nunca casou e o
   select ficou com a aparência crua do navegador. Mesmo desenho, seletor que
   de fato alcança. */
#painel > .row select, #painel > .row .act { height: 36px; min-height: 36px; }
#painel > .row select {
  background: #FFFFFF; border: 1px solid #CBD2D9; border-radius: 8px;
  padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--ink-2); width: 168px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUNIL — o cartão estava sendo cortado
   `.ficha` batiza duas coisas diferentes: o cartão do quadro (styles.css:494)
   e o chip do fluxo de campanha (styles.css:1567). O chip vem depois no
   arquivo, então o `display:inline-flex` dele vencia e deitava o cartão: nome,
   produto, valor e cidade iam para a mesma linha, o cartão media 290px dentro
   de uma coluna de 214px e o resto sumia na borda ("R$ 149,0", "hypp",
   "Purcha"). Sem renomear classe — o app.js fica intocado.
   ═════════════════════════════════════════════════════════════════════════ */
/* a lista é grid: sem isso as linhas ficam do tamanho da maior e o cartão
   baixo sobra espaço enquanto o alto tem o rodapé cortado */
.coluna-lista { grid-auto-rows: min-content; align-content: start; }
.coluna-lista > .ficha {
  display: block; align-items: initial; gap: initial;
  border-radius: var(--r-sm); padding: 8px 10px; font-size: 12px;
  max-width: 100%; overflow-x: hidden; height: auto; min-height: 0;
}
.coluna-lista > .ficha .prod,
.coluna-lista > .ficha .meta { min-width: 0; max-width: 100%; }
.coluna-lista > .ficha .prod {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coluna-lista > .ficha .meta { flex-wrap: wrap; row-gap: 4px; }
.coluna-lista > .ficha .meta > .pill { flex: none; max-width: 100%; }

/* ███████████████████████████████████████████████████████████████████████████
   FRONTEND-REDESIGN-CONTINUACAO — layout das telas restantes
   Regra do lote: o mockup empresta estrutura, hierarquia e espaçamento.
   O que a tela mostra e faz vem do código. Nenhum controle some, nenhum
   controle nasce. Tudo aqui é CSS: o app.js e o index.html não são tocados.
   ███████████████████████████████████████████████████████████████████████████ */

/* ═══════════════════════════════════════════════════ cabeçalho de tela ════
   No mockup toda tela abre com título à esquerda e a barra de ações à
   direita, na mesma altura. Aqui a barra é a `.row` que já existe. */
@media (min-width: 1100px) {
  #roas > .row:first-of-type,
  #leads > .row:first-of-type,
  #pedidos > .row:first-of-type,
  #funil > .row:first-of-type {
    margin-top: -58px; justify-content: flex-end; margin-bottom: 16px;
  }
}

/* controles de filtro: no mockup são pílulas brancas de 36px, não campos crus */
#roas > .row select, #leads > .row select, #pedidos > .row select,
#funil > .row select, #integracoes > form.row select,
#roas > .row input, #leads > .row input, #pedidos > .row input,
#integracoes > form.row input {
  height: 36px; min-height: 36px; background: var(--surface);
  border: 1px solid #CBD2D9; border-radius: 8px; padding: 0 12px;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
}
#roas > .row .act, #leads > .row .act, #pedidos > .row .act,
#funil > .row .act, #integracoes > form.row .act { height: 36px; min-height: 36px; }

/* ═════════════════════════════════════════════════════ abas em cartão ════
   O mockup desenha as abas como um cartão com a aba ativa em relevo. As abas
   reais (Campanhas / Conjuntos / Anúncios) continuam as mesmas. */
.abas-ads {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px 12px 0 0; border-bottom: 0; padding: 6px 6px 0; gap: 2px;
}
.aba-ads {
  border-radius: 9px 9px 0 0; padding: 10px 16px; font-size: 13px;
  font-weight: 600; color: var(--ink-3); border: 1px solid transparent; border-bottom: 0;
}
.aba-ads:hover { color: var(--ink); background: var(--verde-tint); }
.aba-ads.ativa {
  background: var(--surface); color: var(--verde-fundo);
  border-color: var(--line); box-shadow: 0 -2px 0 var(--verde) inset;
}
.aba-cont {
  background: var(--surface-2); color: var(--ink-3); border-radius: 999px;
  padding: 1px 7px; font-size: 10.5px; font-weight: 700; margin-left: 6px;
}
.aba-ads.ativa .aba-cont { background: var(--verde-suave); color: var(--verde-fundo); }
/* a tabela encosta nas abas, como no modelo */
#roas .abas-ads + .barra-selecao,
#roas .abas-ads + .wrap,
#roas .barra-selecao + .wrap {
  border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0;
}

/* ══════════════════════════════════════ blocos lado a lado em Campanhas ══
   "Contas de anúncio" e "Piloto automático" são dois blocos irmãos: no
   mockup ficam lado a lado. Ambos existem de verdade — o piloto tem
   endpoint /ads/autopilot com os modos monitor/active/off. */
/* Tentei pôr "Contas de anúncio" e "Piloto automático" lado a lado só com
   CSS, mas eles são irmãos soltos de #roas (sem container), e usar seletor de
   irmãos `~` para agrupá-los espalhou os blocos em linhas erradas: o aviso do
   piloto descolou do título e a nota do monitoramento voltou à largura cheia.
   Agrupar de verdade exigiria envolver cada bloco num <div> no index.html.
   Não vale mexer no HTML por um arranjo de duas colunas: fica empilhado,
   que é legível e correto. Registrado como diferença aceita do mockup. */
#roas > h2 { margin-top: 22px; }


/* ═══════════════════════════════════════════════════════ INTEGRAÇÕES ════
   Mockup: "Criar nova integração" num cartão próprio, e as fontes numa
   grade de dois. Os controles do cartão (novo token, ligar/desligar, papel,
   copiar) são os reais e continuam todos. */
#integracoes > form.row {
  background: var(--surface); border: 1px solid var(--verde-linha);
  border-radius: 12px; padding: 16px 18px; gap: 12px; align-items: flex-end;
  box-shadow: var(--sombra-1); margin-bottom: 16px;
}
#integracoes > form.row .act.primary { margin-left: auto; }

#listaFontes { display: grid; gap: 14px; }
@media (min-width: 1180px) {
  #listaFontes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
#listaFontes > .painel-fonte { margin-bottom: 0; }
.painel-fonte { padding: 16px 18px; }
/* a linha de selos quebra em vez de espremer o nome da integração */
.painel-fonte > .row:first-child { flex-wrap: wrap; row-gap: 6px; }
.painel-fonte .url-hook {
  background: var(--verde-tint); border: 1px solid var(--verde-linha);
  border-radius: 9px; padding: 9px 11px; margin-top: 10px;
  display: flex; align-items: center; gap: 10px;
}
.painel-fonte .url-hook > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--ink-2);
}

#integracoes .braip-config {
  margin-top: 12px; padding: 0; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2);
}
#integracoes .braip-config summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 13px; cursor: pointer; list-style: none;
}
#integracoes .braip-config summary::-webkit-details-marker { display: none; }
#integracoes .braip-config .braip-config-acao { margin-left: auto; color: var(--verde); font-weight: 650; }
#integracoes .braip-config[open] .braip-config-acao { display: none; }
#integracoes .braip-config-corpo { padding: 0 13px 13px; }
#integracoes .braip-config .row { gap: 8px; align-items: center; flex-wrap: wrap; }
#integracoes .braip-config strong { color: var(--ink); }
#integracoes .braip-config p { margin: 7px 0 10px; max-width: 72ch; line-height: 1.5; }
#integracoes .braip-config input[type="password"] { flex: 1 1 220px; max-width: 420px; min-width: 0; }
#integracoes #novaBraipChaveBloco { flex: 1 1 220px; min-width: 0; font-weight: 600; }
#integracoes #novaBraipChave { display: block; width: 100%; margin-top: 4px; }

/* ═══════════════════════════════════════════════════ tabelas de listagem ══
   Clientes e Pedidos: no mockup a tabela é um cartão fechado, com o
   cabeçalho em faixa clara e a linha inteira clicável. */
#leads > .wrap, #pedidos > .wrap, #payloads .wrap, #acessos .wrap, #equipe .wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--sombra-1); overflow: hidden;
}
#leads table th, #pedidos table th {
  background: var(--verde-tint); border-bottom: 1px solid var(--verde-linha);
  font-size: 11.5px; font-weight: 650; color: var(--ink-2);
  position: sticky; top: 0; z-index: 1;
}
#leads table tr:hover td, #pedidos table tr:hover td { background: var(--verde-tint); }

/* ═════════════════════════════════════════════════════════ estados vazios ══
   O mockup dá ao vazio um bloco centrado com respiro, em vez de uma linha
   solta de texto. */
.vazio, .vazio-col, td.vazio, .lista-vazia {
  text-align: center; color: var(--ink-3); font-size: 12.5px;
}
#roas .wrap:has(> table:empty), #leads .wrap:has(> table:empty) { min-height: 120px; }

/* ═══════════════════════════════════════════════════════════ formulários ══
   Lançar venda e Configurações: rótulo acima, campo de 38px, blocos em
   cartão — a mesma métrica do mockup. */
#lancar label, #configuracoes label, #equipe label, #landings label {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
#lancar input, #lancar select, #lancar textarea,
#configuracoes input, #configuracoes select, #configuracoes textarea {
  min-height: 38px; border-radius: 8px; border: 1px solid #CBD2D9;
  background: var(--surface); font-size: 13px;
}
#lancar input:focus, #lancar select:focus, #configuracoes input:focus {
  border-color: var(--verde); outline: 2px solid var(--verde-suave); outline-offset: 0;
}

/* ═══════════════════════════════════════ BUGS PRÉ-EXISTENTES DE OVERFLOW ══
   Medidos com o navegador em 1440/1366/1024/768/390, não a olho. */

/* Configurações vazava +159px em 1024 e +345px em 768: `.legal-config
   .grid-form` tem `width:100%` (styles.css:926) dentro de um `.form-cred`
   que já é estreito — largura fixa não encolhe. */
main .legal-config .grid-form,
main .legal-config { width: auto; max-width: 100%; min-width: 0; }
main .form-cred, main .form-cred > * { min-width: 0; max-width: 100%; }

/* Meta/CAPI em 390: `.abas-meta` é inline-flex, então cresce com as 5 abas
   e ignora o próprio overflow-x. Vira flex de largura limitada e rola. */
.abas-meta { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.aba-meta { flex: none; }

/* Integrações em 390: a linha de selos e botões do cartão não quebrava. */
@media (max-width: 720px) {
  .painel-fonte { padding: 13px 14px; min-width: 0; max-width: 100%; }
  .painel-fonte > .row { flex-wrap: wrap; row-gap: 7px; min-width: 0; }
  .painel-fonte > .row > .spacer { margin-left: 0; flex-basis: 100%; }
  .painel-fonte .url-hook { flex-wrap: wrap; row-gap: 8px; }
  .painel-fonte .url-hook > span { white-space: normal; overflow-wrap: anywhere; flex-basis: 100%; }
}

/* Documentação em 390: <li>, <em> e <a> longos (URLs e nomes de campo)
   empurravam a lista para fora. */
#docs, #docs li, #docs p, #docs dd, #docs dt { min-width: 0; overflow-wrap: anywhere; }
#docs a, #docs code, #docs em, #docs strong { overflow-wrap: anywhere; }

/* o bloco de papel acompanha o cartão da integração */
.painel-fonte > .papel-bloco { margin-left: 0; margin-right: 0; }


/* ███████████████████████████████████████████████████████████████████████████
   CLIENTES — o layout dos dois mockups, com as funções reais da plataforma.

   Descartado por não existir no código (provado por busca, não por screenshot):
     · os 4 KPIs do topo (Leads/Agendados/Pagos/Enviados) — não há endpoint de
       contagem por estágio; `/leads` devolve `total` e `rows`, mais nada;
     · paginação numerada — `carregarLeads()` pede `limit=100` fixo e nunca usa
       `offset`, embora a rota aceite;
     · "Filtrar" e "Mais filtros" — os filtros reais são busca + estágio;
     · a máscara de PII do mockup (telefone `9****-1234`, e-mail `cli****01@`)
       — a plataforma mostra o dado real, e é dele que o operador precisa para
       atender. Mascarar seria mudar a plataforma para caber no desenho.

   Preservado por existir: busca, filtro de estágio, total, as 7 colunas, o
   botão Abrir, e na gaveta o WhatsApp, Exportar dados, Parar de trackear,
   Eliminar, Dados, Pedidos, Origem do anúncio, Linha do tempo e Anotações.
   ███████████████████████████████████████████████████████████████████████████ */

/* ───────────────────────────────────────────────── a barra de filtros ──
   No mockup a busca e o filtro moram num cartão próprio, acima da tabela. */
#leads > .row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--sombra-1); padding: 14px 16px; gap: 12px;
  align-items: center; margin-bottom: 16px;
}
/* Um lote anterior sobe a `.row` de algumas telas para a direita do título
   (margin-top:-58px). Aqui ela virou um cartão de largura cheia: subir faria
   ela passar POR BAIXO do cabeçalho. Volta ao fluxo. */
@media (min-width: 1100px) {
  #leads > .row:first-of-type { margin-top: 0; justify-content: flex-start; }
}
#leads > .row #buscaLead { flex: 1 1 320px; }
/* o total vira selo à direita, como o "Mostrando 1 a 8 de..." do modelo */
#leads > .row #totalLeads { margin-left: auto; flex: none; }

/* a lupa do mockup, sem tocar no HTML */
#leads > .row #buscaLead {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8B85' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 16px;
  padding-left: 36px;
}

/* ─────────────────────────────────────────────────────── a listagem ──
   Linha alta, avatar com a inicial, nome e contato empilhados. */
#leads table td { padding: 12px 16px; vertical-align: middle; }
#leads table td:first-child { min-width: 220px; }
#leads table td a strong { font-size: 13px; color: var(--ink); }
#leads table tbody tr { cursor: default; }

/* o círculo com a inicial, à esquerda do nome — puro CSS, sem markup novo */
#leads table tbody td:first-child {
  display: flex; align-items: center; gap: 11px; min-height: 46px;
}
#leads table tbody td:first-child::before {
  content: ''; flex: none; width: 34px; height: 34px; border-radius: 999px;
  background: var(--verde-suave); border: 1px solid var(--verde-linha);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304563B' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='3.4'/%3E%3Cpath d='M5.5 20c0-3.6 3-5.6 6.5-5.6s6.5 2 6.5 5.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 18px;
}

/* o botão Abrir some do texto e vira o chevron do modelo, à direita */
#leads table td:last-child { width: 56px; text-align: right; }
#leads table td:last-child .act.mini {
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  color: transparent; overflow: hidden; position: relative;
  border: 1px solid var(--line); background: var(--surface);
}
#leads table td:last-child .act.mini::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304563B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}
#leads table td:last-child .act.mini:hover {
  background: var(--verde-tint); border-color: var(--verde-linha);
}

/* ────────────────────────────────────────────────────────── a gaveta ──
   O modelo mostra a ficha em blocos-cartão, com as ações no topo. */
#gaveta { width: min(620px, 100%); }
#gaveta .gaveta-topo {
  padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
}
#gaveta .gaveta-topo #gavetaTitulo { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
#gaveta .gaveta-corpo { padding: 16px 20px 40px; background: var(--bg); }

/* a fila de ações vira a barra do topo do modelo */
#gaveta .gaveta-corpo > .row:first-of-type {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; gap: 8px; margin-bottom: 16px; box-shadow: var(--sombra-1);
  flex-wrap: wrap;
}
/* "Eliminar" é destrutivo: fica separado das demais, à direita */
#gaveta .gaveta-corpo > .row:first-of-type .act.perigo { margin-left: auto; }

/* cada <h2> abre um bloco, e o conteúdo seguinte é o cartão dele */
#gaveta .gaveta-corpo h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2);
  margin: 18px 0 8px; display: flex; align-items: center; gap: 8px;
}
#gaveta .gaveta-corpo h2::before {
  content: ''; width: 4px; height: 15px; border-radius: 3px; background: var(--verde);
}
#gaveta .gaveta-corpo .dados,
#gaveta .gaveta-corpo .wrap,
#gaveta .gaveta-corpo .linha-tempo,
#gaveta .gaveta-corpo form.row {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--sombra-1);
}
#gaveta .gaveta-corpo .dados { padding: 14px 16px; grid-template-columns: 104px 1fr; gap: 9px 14px; }
#gaveta .gaveta-corpo .dados dt { font-weight: 600; }
#gaveta .gaveta-corpo .wrap { overflow: hidden; }
#gaveta .gaveta-corpo .wrap table td { padding: 11px 14px; }
#gaveta .gaveta-corpo .linha-tempo { padding: 14px 16px; }
#gaveta .gaveta-corpo form.row { padding: 12px 14px; gap: 10px; margin-bottom: 10px; }

/* o LTV é o número que o modelo destaca */
#gaveta .gaveta-corpo .dados dd strong { color: var(--verde-fundo); font-size: 14px; }

/* ─────────────────────────────────────────────────────────── celular ──
   Abaixo de 720px a linha volta a ser lista: sem avatar e sem chevron
   ocupando largura que o nome precisa. */
@media (max-width: 720px) {
  #leads > .row { flex-wrap: wrap; }
  #leads > .row #buscaLead { flex: 1 1 100%; }
  #leads > .row #totalLeads { margin-left: 0; }
  #leads table tbody td:first-child::before { width: 28px; height: 28px; background-size: 15px; }
  #gaveta { width: 100%; }
  #gaveta .gaveta-corpo > .row:first-of-type .act.perigo { margin-left: 0; }
}

/* "Abrir no WhatsApp" é um <a class="act primary">: o preenchimento do
   .primary não alcança âncora dentro da gaveta. É a ação principal da ficha
   no modelo, então volta a ser sólida — e ganha o verde do WhatsApp, que é a
   marca dele, pela mesma regra dos avatares de integração. */
#gaveta .gaveta-corpo > .row:first-of-type a.act.primary {
  background: var(--m-whatsapp, #128C4A); border-color: transparent; color: #FFFFFF;
  font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
}
#gaveta .gaveta-corpo > .row:first-of-type a.act.primary:hover { filter: brightness(.93); }
#gaveta .gaveta-corpo > .row:first-of-type a.act.primary::before {
  content: ''; width: 15px; height: 15px; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 11.9c0 3.9-3.9 7.1-8.6 7.1-1.1 0-2.1-.16-3-.45L4 20.7l1.6-3.5a6.7 6.7 0 0 1-2.2-5.3c0-3.9 3.9-7.1 8.6-7.1s8.6 3.2 8.6 7.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px;
}


/* ═══════════════════════════════════════════════════ paginação de Clientes ══
   Rodapé da listagem, no mesmo desenho da tela: cartão branco, verde para a
   página atual, cinza para o resto. Em tela estreita os números somem e fica
   só "Página 2 de 7" entre Anterior e Próxima — 15 números espremidos não
   servem a ninguém no celular. */
.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 12px 16px; margin-top: -1px;
  box-shadow: var(--sombra-1);
}
.paginacao:empty { display: none; }
.pag-conta { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pag-controles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pag-nums { display: flex; align-items: center; gap: 4px; }

.pag-passo, .pag-n {
  min-height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 500;
  transition: background .12s, border-color .12s, color .12s;
}
.pag-n { min-width: 32px; padding: 0 9px; font-variant-numeric: tabular-nums; }
.pag-passo:hover:not(:disabled), .pag-n:hover:not(.atual) {
  background: var(--verde-tint); border-color: var(--verde-linha); color: var(--verde-fundo);
}
.pag-passo:disabled { opacity: .45; cursor: not-allowed; }
/* a página atual não se distingue só pela cor: ganha peso e contorno */
.pag-n.atual {
  background: var(--verde-fundo); border-color: var(--verde-fundo);
  color: #FFFFFF; font-weight: 700; cursor: default;
}
.pag-passo:focus-visible, .pag-n:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 2px;
}
.pag-gap { color: var(--ink-4); padding: 0 2px; font-size: 12.5px; user-select: none; }

/* em tela larga, quem manda são os números; a forma curta fica escondida */
.pag-curta { display: none; font-size: 12.5px; color: var(--ink-2); font-weight: 600; padding: 0 4px; }
@media (max-width: 720px) {
  .paginacao { justify-content: center; }
  .pag-nums { display: none; }
  .pag-curta { display: inline; }
  .pag-conta { flex-basis: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .pag-passo, .pag-n { transition: none; } }


/* ███████████████████████████████████████████████████████████████████████████
   ETAPA A — Operação, Central de avisos, Suporte e Filtro de período.

   Referência: os 4 mockups novos. Regra mantida: o mockup empresta forma; o
   que a tela mostra e faz continua vindo do código.

   Descartado (já provado por busca, e nada mudou):
     · intervalo "10 mai – 08 jun" — app.js:595 só monta "últimos N dias";
     · sparkline por KPI — zero ocorrência de sparkline/mini-grafico;
     · "Ver todas integrações/campanhas" — zero ocorrência;
     · linha Total nas tabelas — tabela() (app.js:281) não tem rodapé;
     · colunas e métricas de Funil inventadas — as reais vêm de d.funnel;
     · "Dados em tempo real" — rótulo sem estado por trás.
   ███████████████████████████████████████████████████████████████████████████ */

/* ═══════════════════════════════════════════ 1 · FILTRO DE PERÍODO ══
   No mockup é uma pílula com ícone de calendário e a seta à direita, ao lado
   de um "Atualizar" secundário. Os períodos continuam sendo os três reais
   (7 / 30 / 90) — o <select> nativo abre a lista do próprio sistema, com o
   check de selecionado que o mockup mostra. */
#painel > .row select#periodo,
#funil > .row select#periodoQuadro,
#roas > .row select#roasDias {
  appearance: none; -webkit-appearance: none;
  height: 38px; min-height: 38px; padding: 0 34px 0 38px;
  background-color: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; width: auto; min-width: 178px;
  box-shadow: var(--sombra-1);
  /* calendário à esquerda, seta à direita — as duas em background */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304563B' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3.5v3M16 3.5v3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B65' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 13px center, right 12px center;
  background-size: 16px, 14px;
}
#painel > .row select#periodo:hover,
#funil > .row select#periodoQuadro:hover,
#roas > .row select#roasDias:hover {
  border-color: var(--verde-linha); background-color: var(--verde-tint);
}
#painel > .row select#periodo:focus-visible,
#funil > .row select#periodoQuadro:focus-visible,
#roas > .row select#roasDias:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 2px;
}

/* "Atualizar" é a ação secundária ao lado da pílula, com o ícone de recarga */
#painel > .row .act,
#funil > .row .act {
  height: 38px; min-height: 38px; border-radius: 999px; padding: 0 18px;
  font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
#painel > .row .act::before,
#funil > .row .act::before {
  content: ''; width: 15px; height: 15px; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304563B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 11a8 8 0 1 0-.9 4.5'/%3E%3Cpath d='M20 5.5V11h-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px;
}

/* ═══════════════════════════════════════════ 2 · CENTRAL DE AVISOS ══
   O mockup organiza a Central em: cabeçalho limpo, um estado de destaque no
   topo e cards abaixo. O conteúdo continua saindo de desenharAvisos(). */
#gavetaAvisos { width: min(430px, 100%); }
#gavetaAvisos .gaveta-topo {
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
#gavetaAvisos .gaveta-topo strong { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
/* o "Fechar" vira o × do modelo, sem perder o rótulo para leitor de tela */
#gavetaAvisos .gaveta-topo .act.mini {
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  color: transparent; position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
#gavetaAvisos .gaveta-topo .act.mini::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B65' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}
#gavetaAvisos .gaveta-topo .act.mini:hover { background: var(--verde-tint); border-color: var(--verde-linha); }

.avisos-resumo {
  padding: 12px 20px; margin: 0; font-size: 12.5px; color: var(--ink-3);
  background: var(--verde-tint); border-bottom: 1px solid var(--verde-linha);
}
#gavetaAvisos .gaveta-corpo { padding: 16px 18px 32px; background: var(--bg); }

/* "Tudo em dia": o estado sem pendência ganha o círculo verde do modelo.
   O texto continua sendo o que o app.js escreve — nada inventado aqui. */
.aviso-vazio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 30px 22px 26px;
  background: var(--surface); border: 1px solid var(--verde-linha);
  border-radius: 14px; box-shadow: var(--sombra-1);
}
.aviso-vazio::before {
  content: ''; width: 62px; height: 62px; border-radius: 999px; margin-bottom: 6px;
  background-color: var(--verde-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A868' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.4 2.6 2.6L16 9.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 34px;
}
.aviso-vazio strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.aviso-vazio span { font-size: 12.5px; color: var(--ink-3); max-width: 30ch; }

/* as seções e os cards de aviso, quando existem */
.aviso-secao { margin-bottom: 16px; }
.aviso-secao h3 {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px 2px;
}

/* ═══════════════════════════════════════════════════ 3 · SUPORTE ══
   O mockup mostra o seletor de conta como um painel: título, campo de busca
   e a conta atual marcada. A busca do mockup não existe no nosso seletor
   (é um <select> nativo, que já filtra digitando), então fica de fora — o
   que entra é o enquadramento em painel. */
.btn-suporte {
  width: 100%; justify-content: flex-start; gap: 9px;
  min-height: 36px; border-radius: 10px; padding: 0 12px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
}
.btn-suporte:hover { background: var(--verde-tint); border-color: var(--verde-linha); color: var(--verde-fundo); }
.btn-suporte[aria-expanded="true"] {
  background: var(--verde-fundo); border-color: var(--verde-fundo); color: #FFFFFF;
}
.suporte-caixa {
  margin-top: 8px; padding: 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--verde-linha);
  box-shadow: var(--sombra-2);
}
/* o rótulo do painel, como no modelo — texto de interface, não dado */
.suporte-caixa::before {
  content: 'Visualizar conta'; display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.suporte-caixa select {
  min-height: 38px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); font-size: 12.5px; color: var(--ink); padding: 0 10px;
}
.suporte-caixa select:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════ 4 · OPERAÇÃO ══
   Revisão de composição sobre o que já existe. */

/* a faixa "Configuração principal pronta" volta a abrir a tela, como nos
   mockups 2, 3 e 4 — largura cheia, acima dos KPIs */
@media (min-width: 1180px) {
  #painel > #assistenteInicial {
    grid-column: 1 / -1; grid-row: 1; width: auto; margin-bottom: 2px;
  }
  #painel > #primeirosPassos { grid-row: 2; }
  #painel > .row  { grid-row: 3; }
  #painel > #kpis { grid-row: 4; }
  #painel > .linha-grafico { grid-row: 5; grid-column: 1 / -1; }
  #painel > .split         { grid-row: 6; grid-column: 1 / -1; }
  #painel > h2             { grid-row: 7; grid-column: 1 / -1; }
  #painel > h2 + .wrap     { grid-row: 8; grid-column: 1 / -1; }
  /* sem coluna reservada: a tela volta a ser de uma coluna só */
  #painel { grid-template-columns: minmax(0, 1fr); }

  /* Em faixa cheia os passos voltam a caber lado a lado. A camada anterior
     forçava 1 coluna porque o assistente era uma coluna de 316px; aqui ele
     ocupa a tela toda, então 2 colunas (como no mockup) é o certo. */
  #painel > #assistenteInicial .onboarding-grid,
  #painel > #assistenteInicial .onboarding .onboarding-grupo .onboarding-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px;
  }
  #painel > #assistenteInicial .onboarding { padding: 18px 20px; }
}
@media (min-width: 1500px) {
  #painel > #assistenteInicial .onboarding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* o cartão do assistente com a borda de destaque do modelo */
#painel > #assistenteInicial .onboarding {
  border-radius: 14px; border-left: 3px solid var(--verde);
}
#painel > #assistenteInicial .onboarding-topo strong { font-size: 15px; }

/* os KPIs ganham ar: cartões um pouco mais altos e tile maior, como no modelo */
.kpi-operacao .kpi { min-height: 92px; padding: 16px 18px; border-radius: 14px; }
.kpi-operacao .kpi::before { width: 38px; height: 38px; border-radius: 11px; background-size: 20px; }
.kpi-operacao .kpi { grid-template-columns: 38px 1fr; column-gap: 14px; }
.kpi-operacao .kpi .v { font-size: 23px; }
.kpi-dinheiro { border-radius: 14px; }

/* Saúde do rastreio: faixa própria, com respiro */
.kpi-saude { border-radius: 14px; padding: 14px 18px; }

/* gráfico, funil e tabelas com o mesmo raio dos KPIs */
.linha-grafico .cartao, #painel .split > div, #painel > h2, #painel > h2 + .wrap {
  border-radius: 14px;
}
#painel > h2 { border-radius: 14px 14px 0 0; }
#painel > h2 + .wrap { border-radius: 0 0 14px 14px; }

@media (max-width: 720px) {
  #painel > .row select#periodo { width: 100%; min-width: 0; }
  #gavetaAvisos { width: 100%; }
}


/* ███████████████████████████████████████████████████████████████████████████
   NOVIDADES — o visual do mockup sobre a estrutura real da tela.

   O que o mockup traz e NÃO existe (provado por busca, e por isso descartado):
     · filtros "Todos / Novos recursos / Melhorias / Correções" — zero
       ocorrência de filtro nesta tela; os tipos reais são três
       (novidade / correcao / aviso) e não há UI de filtragem;
     · painel lateral "Nesta atualização" e "Destaque da atualização" — não
       existem no app.js nem no conteudo.js;
     · tags coloridas por item ("Landing pages", "Organização", "Envios") —
       uma novidade tem data, tipo, titulo, corpo, atencao, acao e detalhe;
       não há campo de tags;
     · data no topo direito ("07 set 2026") — a data é por item, não da tela;
     · linha do tempo com bolinhas à esquerda — decoração sem estado real;
     · "3 dias atrás / 7 dias atrás" ao lado da data — dataNovidade() já
       resolve o formato; não há um segundo campo relativo.

   O que existe e recebe o visual novo: o cartão de destaque, a lista, o
   histórico, os três selos por tipo, o ícone por tipo, o bloco de atenção,
   o botão de ação e as faixas "Esta semana" / "Antes disso".
   ███████████████████████████████████████████████████████████████████████████ */

/* ────────────────────────────────────────────── cabeçalho da tela ──
   No mockup a intro tem o ícone grande ao lado do título. A nossa vem da
   `.note` que já existe: ela ganha o enquadramento, sem virar outra coisa. */
#novidades > .note {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface); border: 1px solid var(--verde-linha);
  border-left: 3px solid var(--verde); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--sombra-1);
  font-size: 13px; color: var(--ink-2);
}
#novidades > .note::before {
  content: ''; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background-color: var(--verde-fundo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h3l4 4V6L7 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6'/%3E%3Cpath d='M19 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 24px;
}

/* ────────────────────────────────────────────────── faixas do tempo ──
   "Esta semana" / "Antes disso": rótulo em caixa alta, com a régua ao lado. */
.nov-faixa { margin: 24px 0 12px; }
.nov-faixa:first-child { margin-top: 4px; }
.nov-faixa span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.nov-faixa i { background: var(--line); }

/* ───────────────────────────────────────────────── cartão de destaque ──
   No mockup o item principal tem contorno verde e mais respiro. */
.nov-destaque {
  background: var(--surface); border: 1.5px solid var(--verde-linha);
  border-radius: 16px; padding: 22px 24px; box-shadow: var(--sombra-2);
  display: flex; flex-direction: column; gap: 12px;
}
.nov-destaque h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -.015em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.nov-destaque .nov-corpo { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.nov-destaque > .row:first-child { align-items: center; }
.nov-destaque .mini { font-size: 12px; color: var(--ink-3); font-weight: 500; }

/* o botão de ação, sólido, com a seta que o mockup mostra */
.nov-acao .act.primary {
  height: 38px; border-radius: 999px; padding: 0 20px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}

/* ─────────────────────────────────────────────────────────── selos ──
   Os três tipos reais. A cor continua sendo a que o app.js escolhe. */
.nov-selo {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.nov-selo.ok   { background: var(--verde-suave); color: var(--verde-fundo); }
.nov-selo.warn { background: var(--ouro-suave);  color: var(--ouro-forte); }
.nov-selo.bad  { background: var(--bad-dim);     color: var(--bad); }

/* ───────────────────────────────────────────── bloco de atenção ──
   Já existe no conteúdo (campo `atencao`): ganha a cor de recado do lote. */
.nov-atencao {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--ouro-suave); border: 1px solid var(--ouro-linha);
  border-radius: 11px; padding: 12px 14px;
}
.nov-atencao svg { color: var(--ouro-forte); }
.nov-atencao p { font-size: 12.5px; color: var(--ink-2); }

/* ────────────────────────────────────────────────── itens da lista ──
   Cartão branco, ícone quadrado colorido à esquerda, chevron à direita. */
.nov-lista { gap: 12px; }
.nov-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; gap: 15px;
  box-shadow: var(--sombra-1);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.nov-item:hover { border-color: var(--verde-linha); box-shadow: var(--sombra-2); }
.nov-icone {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nov-icone.ok   { background: var(--verde-suave); color: var(--verde-fundo); }
.nov-icone.warn { background: var(--ouro-suave);  color: var(--ouro-forte); }
.nov-icone.bad  { background: var(--bad-dim);     color: var(--bad); }
.nov-item .nov-texto h3 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.nov-item .nov-corpo { font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.nov-item .mini { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.nov-link {
  align-self: flex-start; padding: 0; font-size: 12.5px;
  font-weight: 600; color: var(--verde-fundo);
}
.nov-link:hover { color: var(--verde); background: none; }

/* ──────────────────────────────────────────────────────── histórico ──
   O "Antes disso" vira um cartão fechado, com as linhas separadas. */
.nov-historico {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; box-shadow: var(--sombra-1);
}
.nov-linha {
  padding: 13px 18px; border-bottom: 1px solid var(--line-2);
  font-size: 13px; color: var(--ink-2);
}
.nov-linha:hover { background: var(--verde-tint); }
.nov-linha .mini { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

@media (max-width: 720px) {
  #novidades > .note { padding: 15px 16px; gap: 12px; }
  #novidades > .note::before { width: 38px; height: 38px; background-size: 21px; }
  .nov-destaque { padding: 18px 17px; }
  .nov-destaque h3 { font-size: 17px; }
  .nov-item { padding: 15px 16px; gap: 12px; }
  .nov-icone { width: 38px; height: 38px; }
}


/* ███████████████████████████████████████████████████████████████████████████
   CAMPANHAS (ROAS) + FLUXO DE CRIAÇÃO — o visual dos 5 mockups novos sobre a
   estrutura real da tela.

   Descartado por não existir (provado por busca no código):
     · KPIs "Campanhas ativas / Investimento hoje / Receita hoje / ROAS hoje"
       — zero ocorrência; a tela tem a tabela por nível, não cartões de topo;
     · cartão "Conexão de contas" no cabeçalho — zero ocorrência;
     · "Resumo do conjunto" (alcance estimado, resultados diários, custo por
       resultado, medidor de definição de público) — zero ocorrência; viria da
       API de delivery estimate da Meta, que não chamamos;
     · toggle liga/desliga do piloto e slider de horários — o piloto real tem
       modos monitor/active/off por /ads/autopilot, e o horário é campo de
       formulário, não régua;
     · "Ver todas as prévias", contadores de curtidas/comentários na prévia —
       decoração sem dado real.

   Recebe o visual novo (tudo existe): abas por nível, filtros e ações do topo,
   "+ Criar campanha", estado vazio, contas de anúncio, piloto automático,
   regras de automação, o fluxo de 4 etapas (trilha, árvore, rodapé) e a
   prévia do anúncio com as abas de posicionamento.
   ███████████████████████████████████████████████████████████████████████████ */

/* ─────────────────────────────────────────── barra de ações do topo ──
   No mockup os controles são pílulas alinhadas à direita do título, com a
   ação primária em verde sólido no fim. São os controles reais. */
#roas > .row select {
  height: 38px; min-height: 38px; border-radius: 999px;
  padding: 0 34px 0 14px; font-size: 12.5px; font-weight: 600;
  background-color: var(--surface); border: 1px solid var(--line);
  color: var(--ink); box-shadow: var(--sombra-1); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B65' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
#roas > .row select:hover { border-color: var(--verde-linha); background-color: var(--verde-tint); }
#roas > .row .act {
  height: 38px; min-height: 38px; border-radius: 999px; padding: 0 18px;
  font-size: 12.5px; font-weight: 600;
}
#roas > .row .act.primary { box-shadow: var(--sombra-1); }
#roas > .row #roasQuando { margin-left: auto; }

/* ───────────────────────────────────────────────────── estado vazio ──
   O mockup dá ao vazio um bloco centrado, com respiro. O texto continua
   sendo o que o app.js escreve. */
#roas .wrap td.empty, #roas .empty {
  padding: 54px 24px; text-align: center;
  font-size: 14px; color: var(--ink-2); font-weight: 500;
}
#roas .wrap td.empty::before, #roas .empty::before {
  content: ''; display: block; width: 78px; height: 78px; margin: 0 auto 16px;
  border-radius: 999px; background-color: var(--verde-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A868' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M17 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 34px;
}

/* ────────────────────────────────────── contas de anúncio / piloto ──
   Os dois blocos ganham o enquadramento de cartão do mockup. Continuam
   empilhados: agrupá-los em duas colunas exigiria envolver cada um num
   <div> no index.html, e o ganho é só de arranjo. */
#roas > h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 26px 0 10px; background: none; border: 0; padding: 0;
}
#roas > .note, #roas > #listaContasAds, #roas > .bloco-dobra, #roas > #avisoAutopilot {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sombra-1);
}
#roas > .note { border-left: 3px solid var(--verde); padding: 15px 18px; }
#roas > .bloco-dobra { padding: 0; overflow: hidden; }
#roas > .bloco-dobra > summary { padding: 15px 18px; cursor: pointer; }
#roas > .bloco-dobra .dobra-corpo { padding: 0 18px 18px; }

/* ═══════════════════════════════════════ FLUXO DE CRIAR CAMPANHA ══ */

/* a trilha do topo, como o stepper Campanha › Conjunto › Anúncio */
.tc-topo { padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.fluxo-trilha { gap: 4px; }
.fluxo-trilha button, .fluxo-trilha a, .fluxo-trilha .etapa {
  border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  color: var(--ink-3);
}
.fluxo-trilha .atual, .fluxo-trilha [aria-current="step"], .fluxo-trilha .ativa {
  color: var(--verde-fundo); background: var(--verde-suave);
}

/* a árvore da esquerda: "Estrutura da campanha" */
.tc-lado { background: var(--surface); border-right: 1px solid var(--line); padding: 14px; }
.tc-busca { margin-bottom: 12px; }
.tc-busca input {
  min-height: 36px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); font-size: 12.5px; width: 100%;
}
.tc-busca input:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.fluxo-arvore { gap: 4px; font-size: 12.5px; }
.fluxo-arvore button, .fluxo-arvore .no {
  border-radius: 9px; padding: 9px 11px; min-height: 36px;
  border: 1px solid transparent; color: var(--ink-2); font-weight: 500;
}
.fluxo-arvore .ativo, .fluxo-arvore .atual, .fluxo-arvore [aria-current] {
  background: var(--verde-suave); border-color: var(--verde-linha);
  color: var(--verde-fundo); font-weight: 650;
}
.fluxo-arvore button:hover { background: var(--verde-tint); }

/* o corpo do formulário: blocos em cartão, como no mockup 3 */
.tela-cheia .fluxo-corpo { background: var(--bg); padding: 20px 22px 28px; gap: 16px; }
.tela-cheia .fluxo-corpo .secao,
.tela-cheia .fluxo-corpo > div > .secao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sombra-1);
}

/* os cards de objetivo (Reconhecimento, Tráfego, Leads, Vendas…) */
.escolha {
  border-radius: 14px; padding: 16px 15px; min-height: 92px;
  border: 1.5px solid var(--line); background: var(--surface);
  transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.escolha:hover { border-color: var(--verde-linha); background: var(--verde-tint); box-shadow: var(--sombra-1); }
.escolha.ativa {
  border-color: var(--verde); background: var(--verde-tint);
  box-shadow: 0 0 0 3px var(--verde-suave);
}
.escolha-titulo { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.escolha.ativa .escolha-titulo { color: var(--verde-fundo); }
.escolha-sub { font-size: 12px; color: var(--ink-3); line-height: 1.45; }

/* o rodapé: Fechar à esquerda, Publicar em verde à direita */
.tc-pe {
  padding: 14px 20px; background: var(--surface); border-top: 1px solid var(--line);
  gap: 10px;
}
.tc-pe .act { height: 40px; min-height: 40px; border-radius: 999px; padding: 0 20px; font-weight: 600; }
.tc-pe .act.primary { padding: 0 26px; box-shadow: var(--sombra-1); }
.tc-pe .mini { color: var(--ink-3); }

/* o seletor pausada/ativa do topo */
.tc-status {
  border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 650;
  background: var(--ouro-suave); color: var(--ouro-forte); border: 1px solid var(--ouro-linha);
}

/* ─────────────────────────────────────────── prévia do anúncio ──
   Já existe (.previa-caixa). Ganha o enquadramento e as abas do mockup 4. */
.previa-caixa {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; box-shadow: var(--sombra-1); gap: 12px;
}
.previa-abas {
  gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.previa-aba {
  border-radius: 8px 8px 0 0; padding: 8px 12px; font-size: 12px;
  font-weight: 600; color: var(--ink-3); border: 0; background: none;
}
.previa-aba:hover { color: var(--ink); background: var(--verde-tint); }
.previa-aba.ativa {
  background: var(--surface); color: var(--verde-fundo);
  box-shadow: 0 -2px 0 var(--verde) inset;
}
.previa-tela {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface);
}
.previa-cta {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 13px; font-size: 11.5px;
  font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em;
}
.previa-caixa .ajuda { font-size: 11px; color: var(--ink-4); text-align: center; }

@media (max-width: 720px) {
  #roas > .row select, #roas > .row .act { width: 100%; }
  .tc-pe { flex-wrap: wrap; }
  .tc-pe .act { flex: 1 1 auto; }
}


/* ███████████████████████████████████████████████████████████████████████████
   FUNIL — o visual do mockup sobre o quadro real.

   Descartado por não existir (provado por busca no código):
     · botão "Exportar" — zero ocorrência no #funil;
     · menu "⋮" por cartão — a ficha abre o cliente no clique, não tem menu;
     · e-mail e "Pedido 0001" no cartão — a ficha real traz nome, produto,
       valor, origem, cidade e idade; não há e-mail nem número formatado;
     · aviso "Mover para Entregue envia o evento à Meta" no canto superior
       direito — esse texto já existe, e é a `.note` no topo da tela;
     · estado vazio ilustrado com botão "Saiba mais" — o vazio real é a
       linha "vazio" que o app.js escreve;
     · "Ver mais 86" como botão — o real é "+ N não mostrados", um aviso de
       corte, não um controle de paginação.

   Recebe o visual novo: as colunas por etapa (com a cor da própria etapa no
   topo, como no modelo), contagem e valor, os cartões, o "+N não mostrados",
   o alvo de arrastar, o filtro de período e o "esconder etapas vazias".
   ███████████████████████████████████████████████████████████████████████████ */

/* ────────────────────────────────────────────── a barra de controles ──
   No mockup: período à esquerda, checkbox ao lado. São os controles reais. */
#funil > .row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; gap: 16px; align-items: center;
  box-shadow: var(--sombra-1); margin-bottom: 16px;
}
#funil > .row .inline { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }

/* ─────────────────────────────────────────────────────── as colunas ──
   O modelo dá a cada etapa uma faixa de cor no topo do cartão. As cores
   vêm da posição no funil, que é a ordem real de STATUS_ORDER. */
.quadro { gap: 14px; padding-bottom: 14px; align-items: stretch; }
.coluna {
  min-width: 268px; max-width: 268px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sombra-1);
  max-height: 76vh; overflow: hidden;
}
.coluna-topo {
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line-2);
  background: var(--surface); position: relative;
}
/* a faixa de cor da etapa, no topo da coluna */
.coluna-topo::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 14px 14px 0 0; background: var(--ink-4);
}
.coluna[data-status="initiated"]        .coluna-topo::before { background: #3B82F6; }
.coluna[data-status="abandoned"]        .coluna-topo::before { background: #94A3B8; }
.coluna[data-status="pending_payment"]  .coluna-topo::before { background: var(--ouro); }
.coluna[data-status="analysis"]         .coluna-topo::before { background: #8B5CF6; }
.coluna[data-status="paid"]             .coluna-topo::before { background: #2563EB; }
.coluna[data-status="scheduled"]        .coluna-topo::before { background: var(--ouro); }
.coluna[data-status="shipped"]          .coluna-topo::before { background: #14B8A6; }
.coluna[data-status="out_for_delivery"] .coluna-topo::before { background: var(--warn); }
.coluna[data-status="delivered"]        .coluna-topo::before { background: var(--verde); }
.coluna[data-status="lead"]             .coluna-topo::before { background: #64748B; }

.coluna-topo .nome { gap: 9px; }
.coluna-topo .nome > span:last-child { font-size: 13.5px !important; letter-spacing: -.01em; }
.coluna-topo .sub { font-size: 11.5px; margin-top: 5px; font-weight: 600; color: var(--ink-2); }
.ponto-col { width: 9px; height: 9px; }
.coluna[data-status="initiated"]        .ponto-col { background: #3B82F6; }
.coluna[data-status="pending_payment"]  .ponto-col { background: var(--ouro); }
.coluna[data-status="analysis"]         .ponto-col { background: #8B5CF6; }
.coluna[data-status="paid"]             .ponto-col { background: #2563EB; }
.coluna[data-status="scheduled"]        .ponto-col { background: var(--ouro); }
.coluna[data-status="shipped"]          .ponto-col { background: #14B8A6; }

.coluna-lista { padding: 12px; gap: 10px; }

/* ──────────────────────────────────────────────────────── o cartão ──
   Mais respiro e hierarquia: nome em destaque, produto abaixo, valor e
   origem na base. O conteúdo é o mesmo que o app.js escreve. */
.coluna-lista > .ficha {
  padding: 13px 14px; border-radius: 12px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--sombra-1); cursor: pointer;
}
.coluna-lista > .ficha:hover {
  border-color: var(--verde-linha); box-shadow: var(--sombra-2);
  transform: translateY(-1px);
}
.coluna-lista > .ficha .nome {
  font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 5px;
}
.coluna-lista > .ficha .prod {
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 8px;
}
.coluna-lista > .ficha .meta { font-size: 11px; }
.coluna-lista > .ficha .valor { font-size: 13px; font-weight: 700; color: var(--verde-fundo); }
.coluna-lista > .ficha .meta .pill { font-size: 10px; padding: 2px 8px; }

/* o cartão entregue: o único em verde, porque ali o dinheiro existe */
.coluna-lista > .ficha.entregue {
  background: var(--verde-tint); border-color: var(--verde-linha);
}
.coluna-lista > .ficha.saindo { border-left: 3px solid var(--warn); }

/* arrastar: alvo e cartão em movimento */
.coluna.alvo {
  border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave);
  background: var(--verde-tint);
}
.coluna-lista > .ficha.arrastando {
  border-color: var(--verde); box-shadow: var(--sombra-3); transform: rotate(-1.5deg);
}

/* "vazio" e "+N não mostrados" */
.vazio-col {
  font-size: 11.5px; color: var(--ink-4); padding: 18px 8px;
  border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2);
}

@media (prefers-reduced-motion: reduce) {
  .coluna-lista > .ficha:hover { transform: none; }
  .coluna-lista > .ficha.arrastando { transform: none; }
}
@media (max-width: 720px) {
  #funil > .row { flex-wrap: wrap; gap: 12px; }
  .coluna { min-width: 232px; max-width: 232px; }
}


/* ███████████████████████████████████████████████████████████████████████████
   PEDIDOS — o visual do mockup sobre a tela real.

   Descartado por não existir (provado por busca no código):
     · os 5 KPIs do topo (Total geral / Agendados / Pagos / Enviados /
       Checkouts) — zero ocorrência; /orders devolve `total` e `rows`, e não
       há endpoint de contagem por status;
     · abas por status (Todos/Agendados/Pagos/Enviados/Entregues) — o filtro
       real é o <select> #filtroStatus, com TODOS os status do catálogo;
     · "Limpar filtros" — zero ocorrência;
     · botão "Detalhes"/olho por pedido — não existe `abrirPedido`; a ação
       real da linha é o nome do cliente, que abre a ficha dele;
     · paginação — o front pede limit=100 fixo (a rota aceita offset, mas
       usar isso seria função nova; fica registrado como melhoria futura).

   Aplicado com dado REAL: filtros em cartão, tabela com cabeçalho em faixa,
   status em badge, valor em destaque, Comissão (campo que já vinha na
   resposta) e Origem com a cor da marca.
   ███████████████████████████████████████████████████████████████████████████ */

/* ───────────────────────────────────────────── a barra de filtros ──
   No mockup os filtros moram num cartão, com rótulo acima de cada um.
   Aqui são os três reais: busca, status e integração. */
#pedidos > .row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; gap: 14px; align-items: center;
  box-shadow: var(--sombra-1); margin-bottom: 16px; flex-wrap: wrap;
}
/* Um lote anterior sobe a `.row` de algumas telas para a direita do título
   (margin-top:-58px). Aqui ela é um cartão de largura cheia: subir a colocava
   POR BAIXO do cabeçalho (topo 86px contra base 130px). Volta ao fluxo. */
@media (min-width: 1100px) {
  #pedidos > .row:first-of-type { margin-top: 0; justify-content: flex-start; }
}
#pedidos > .row #buscaPedido {
  flex: 1 1 320px; min-height: 40px; border-radius: 10px;
  border: 1px solid #CBD2D9; background: var(--surface); font-size: 13px;
  padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8B85' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; background-size: 16px;
}
#pedidos > .row select {
  min-height: 40px; border-radius: 10px; border: 1px solid #CBD2D9;
  background-color: var(--surface); font-size: 13px; font-weight: 500;
  color: var(--ink-2); padding: 0 34px 0 13px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B65' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
#pedidos > .row select:hover { border-color: var(--verde-linha); background-color: var(--verde-tint); }
#pedidos > .row select:focus-visible,
#pedidos > .row #buscaPedido:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
/* "Buscar" é a ação principal do bloco, como no mockup */
#pedidos > .row .act {
  min-height: 40px; border-radius: 10px; padding: 0 22px;
  font-size: 13px; font-weight: 600;
  background: var(--verde-fundo); border-color: var(--verde-fundo); color: #FFFFFF;
  display: inline-flex; align-items: center; gap: 8px;
}
#pedidos > .row .act::before {
  content: ''; width: 15px; height: 15px; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px;
}
#pedidos > .row .act:hover { filter: brightness(1.08); }
#pedidos > .row #totalPedidos { margin-left: auto; }

/* ───────────────────────────────────────────────────────── a tabela ──
   Cartão fechado, cabeçalho em faixa clara, linhas com respiro e hover. */
#pedidos > .wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sombra-1); overflow: auto;
}
#pedidos table th {
  background: var(--verde-tint); border-bottom: 1px solid var(--verde-linha);
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  letter-spacing: .02em; padding: 13px 16px; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
#pedidos table td { padding: 13px 16px; vertical-align: middle; font-size: 12.5px; }
#pedidos table tbody tr { transition: background var(--transicao); }
#pedidos table tbody tr:hover td { background: var(--verde-tint); }

/* nº do pedido em destaque, produto abaixo — a hierarquia do mockup */
#pedidos table td code {
  font-size: 12.5px; font-weight: 650; color: var(--verde-fundo);
  background: none; padding: 0;
}
#pedidos table td .sub { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
/* o cliente é link para a ficha dele — a ação real da linha */
#pedidos table td a { font-weight: 600; color: var(--ink); }
#pedidos table td a:hover { color: var(--verde-fundo); text-decoration: underline; }
/* valor e comissão alinhados e tabulares */
#pedidos table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
#pedidos table td.num strong { font-size: 13px; color: var(--ink); }

/* status em badge — os status REAIS, com a cor do que cada um significa */
#pedidos table td .pill {
  border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 650;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}

/* origem com a cor da marca, reusando o selo de Integrações */
.origem-cel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.origem-cel .fonte-avatar {
  width: 24px; height: 24px; font-size: 11px; box-shadow: none;
}

@media (max-width: 900px) {
  #pedidos > .row { gap: 10px; }
  #pedidos > .row #buscaPedido { flex-basis: 100%; }
  #pedidos > .row select { flex: 1 1 auto; }
  #pedidos > .row #totalPedidos { margin-left: 0; }
  /* a tabela rola dentro do próprio cartão, sem estourar o documento */
  #pedidos > .wrap { overflow-x: auto; }
  #pedidos table { min-width: 900px; }
}


/* ███████████████████████████████████████████████████████████████████████████
   RASTREAMENTO — o visual do mockup sobre a tela real.

   Descartado por não existir (provado por busca no código):
     · o fluxo de 4 passos com "Captura ativada / Rastreando / Redirecionando
       / Atribuição ativa" — zero ocorrência desses estados em todo o src/;
       seriam status funcionais fictícios;
     · "Ver instruções de instalação" e "Ver exemplo com UTM" — zero
       ocorrência; a instrução real aponta para a Documentação, que já existe.

   Aplicado com função REAL: os 3 modos viram cards selecionáveis (rádios de
   verdade, com o onchange="rastreioModo()" intocado), o "recomendado" é o
   .pill.premium que já estava no HTML, o painel de cada modo vira bloco,
   "Abrir Landing pages" ganha destaque, e o código de instalação e o link de
   redirecionamento — que montarInstrucoesRastreio() gera com a chave real
   da conta — ganham a caixa de código do mockup com os botões copiar.
   ███████████████████████████████████████████████████████████████████████████ */

/* ────────────────────────────────────────────── cabeçalho da tela ── */
#rastreio > .cartao-titulo:first-child { font-size: 20px !important; font-weight: 700; letter-spacing: -.01em; }
#rastreio > .mini { font-size: 13px; color: var(--ink-3); }

/* ─────────────────────────────────────────── os 3 modos em cards ──
   O mockup mostra três cartões lado a lado, o selecionado em verde. São os
   MESMOS rádios: só a apresentação muda. */
.rastreio-como {
  background: transparent; border: 0; padding: 0; margin-bottom: 18px;
}
.rastreio-como > .cartao-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
@media (min-width: 980px) {
  .rastreio-como { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .rastreio-como > .cartao-titulo { grid-column: 1 / -1; margin-bottom: 0; }
}
.rastreio-como .opcao {
  position: relative; align-items: flex-start; gap: 13px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 17px 18px; box-shadow: var(--sombra-1);
  transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.rastreio-como .opcao:hover {
  border-color: var(--verde-linha); background: var(--verde-tint);
  box-shadow: var(--sombra-2);
}
/* o cartão do modo escolhido: verde, com anel — o check do mockup */
.rastreio-como .opcao:has(input:checked) {
  border-color: var(--verde); background: var(--verde-tint);
  box-shadow: 0 0 0 3px var(--verde-suave);
}
.rastreio-como .opcao:has(input:checked) strong { color: var(--verde-fundo); }
.rastreio-como .opcao:focus-within { outline: 2px solid var(--verde); outline-offset: 2px; }

/* o rádio vira o círculo de seleção do modelo, sem deixar de ser um rádio */
.rastreio-como .opcao input {
  appearance: none; -webkit-appearance: none; margin: 2px 0 0;
  width: 20px; height: 20px; flex: none; border-radius: 999px;
  border: 2px solid #CBD2D9; background: var(--surface); cursor: pointer;
  position: relative; transition: border-color var(--transicao), background var(--transicao);
}
.rastreio-como .opcao input:checked { border-color: var(--verde); background: var(--verde); }
.rastreio-como .opcao input:checked::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}
.rastreio-como .opcao strong { font-size: 14px; font-weight: 650; color: var(--ink); }
.rastreio-como .opcao small { font-size: 12.5px; line-height: 1.5; margin-top: 4px; }
/* o selo "recomendado" já existe no HTML — só ganha lugar próprio */
.rastreio-como .opcao .pill.premium { align-self: flex-start; margin-top: 5px; }

/* ──────────────────────────────────────────── o painel de cada modo ── */
.rastreio-painel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; box-shadow: var(--sombra-1);
}
.rastreio-painel[hidden] { display: none !important; }
.rastreio-painel > .cartao-titulo {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px; margin-bottom: 4px;
}
.rastreio-painel > .cartao-titulo::before {
  content: ''; width: 4px; height: 17px; border-radius: 3px; background: var(--verde);
}
.rastreio-painel > .mini { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }

/* "Abrir Landing pages" é o CTA real do painel do WhatsApp */
#rastreioWhatsapp .note {
  background: var(--verde-tint); border: 1px solid var(--verde-linha);
  border-left: 3px solid var(--verde); border-radius: 12px; padding: 16px 18px;
}
#rastreioWhatsapp .act.primary {
  height: 40px; border-radius: 10px; padding: 0 20px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
#rastreioWhatsapp .act.primary::after {
  content: ''; width: 14px; height: 14px; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}

/* ─────────────────────────── código de instalação e link de redirect ──
   Os dois são reais: montarInstrucoesRastreio() gera o snippet com a chave
   da conta e o /t/go. Aqui eles ganham a caixa de código do mockup. */
#rastreioSiteInstalar { display: grid; gap: 6px; }
#rastreioSiteInstalar > div > strong { font-size: 13.5px; color: var(--ink); }
#rastreioSiteInstalar pre {
  background: #0E1F1A; color: #D7E8E0; border: 1px solid var(--ink-2);
  border-radius: 11px; padding: 14px 16px; margin: 8px 0 10px;
  font-size: 12px; line-height: 1.6; overflow-x: auto;
  white-space: pre-wrap; word-break: break-all;
}
#rastreioSiteInstalar code {
  background: var(--verde-suave); color: var(--verde-fundo);
  padding: 1px 6px; border-radius: 5px; font-weight: 600;
}
#rastreioSiteInstalar .act.mini {
  height: 34px; min-height: 34px; border-radius: 9px; padding: 0 14px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 7px;
}
#rastreioSiteInstalar .act.mini::before {
  content: ''; width: 14px; height: 14px; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304563B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}
#rastreioSiteInstalar .act.mini:hover {
  background: var(--verde-tint); border-color: var(--verde-linha); color: var(--verde-fundo);
}

/* ───────────────────────────────────────── cartões de landing (WA) ──
   Existem de verdade: rótulo, ativo/desligado, número, visitas e cliques. */
.wa-link {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 17px; box-shadow: var(--sombra-1);
}
.wa-link:hover { border-color: var(--verde-linha); box-shadow: var(--sombra-2); }
.wa-link .url-hook {
  background: var(--verde-tint); border: 1px solid var(--verde-linha);
  border-radius: 9px; padding: 9px 11px; margin-top: 10px;
}

/* o painel "só registrar vendas" */
#rastreioNenhum .note {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-4); border-radius: 12px; padding: 16px 18px;
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
}

@media (max-width: 720px) {
  .rastreio-painel { padding: 16px 15px; }
  .rastreio-como .opcao { padding: 14px 15px; }
  #rastreioSiteInstalar pre { font-size: 11px; padding: 12px 13px; }
}


/* ███████████████████████████████████████████████████████████████████████████
   META / CAPI — o visual dos 5 mockups sobre as 5 abas reais.

   Descartado por não existir (provado por busca no código):
     · sparkline e "taxa de sucesso" por provider — zero ocorrência de
       `sparkline`/`taxa_sucesso`; a cobertura real traz eventos, score e a
       % por sinal (ph/em/fn/zp/fbc/fbp), não série temporal;
     · checklist da conexão (Dataset / Token / Permissões / Primeiro evento
       com "Concluído/Pendente") — não existe esse estado; quem cumpre esse
       papel é o Tutorial guiado, que JÁ marca os 6 passos sozinho;
     · seletor "Ambiente: Produção" na fila — zero ocorrência; o modo vem do
       backend e é exibido na coluna "Modo" do log;
     · "Última verificação: agora" — não há timestamp de verificação; o que
       existe é o "Quando" de cada chamada no log.

   Aplicado com dado REAL: os 4 KPIs do topo (status, dataset, qualidade,
   fila), a nota /100 com anel, os sinais em barra com peso, as dicas por
   nível, a cobertura por provider, a política (toggles, valor, gatilho,
   histórico), as credenciais, a fila com filtro, os logs com fbtrace_id,
   "Forçar envio da fila" e o tutorial de 6 passos com barra de progresso.
   ███████████████████████████████████████████████████████████████████████████ */

/* ────────────────────────────────────────────────── os KPIs do topo ──
   O mockup mostra quatro blocos com ícone quadrado à esquerda. A `.statbar`
   já traz exatamente esses quatro dados. */
#meta .statbar {
  background: var(--surface); border: 1px solid var(--verde-linha);
  border-radius: 16px; padding: 6px; box-shadow: var(--sombra-1);
  margin-bottom: 18px;
}
#meta .statbar > * {
  padding: 16px 18px; border-radius: 12px;
}
#meta .statbar > * + * { border-left: 1px solid var(--line-2); }

/* ───────────────────────────────────────────────────────── as abas ──
   Pílula clara, aba ativa em verde sólido — como nos mockups. */
.abas-meta {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px; gap: 3px; margin: 2px 0 18px;
  box-shadow: var(--sombra-1);
}
.aba-meta { height: 36px; padding: 0 16px; font-size: 12.5px; font-weight: 600; }
.aba-meta:hover { background: var(--verde-tint); color: var(--verde-fundo); }
.aba-meta.atual { background: var(--verde-fundo); color: #FFFFFF; }
.aba-meta.atual svg { stroke: #FFFFFF; }

/* ───────────────────────────────────────── painéis: blocos em cartão ── */
.painel-meta > h2 {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  display: flex; align-items: center; gap: 9px; margin: 22px 0 8px;
}
.painel-meta > h2::before {
  content: ''; width: 4px; height: 17px; border-radius: 3px; background: var(--verde);
}
.painel-meta > h2:first-child { margin-top: 0; }
.painel-meta > .mini { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }

/* ═════════════════════════════════════════════ 1 · VISÃO GERAL ══
   Nota, cobertura e recomendações em três cartões, como no mockup. */
.qualidade-grid {
  display: grid; gap: 14px; align-items: start;
}
@media (min-width: 1100px) {
  .qualidade-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.qualidade-grid > * {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; box-shadow: var(--sombra-1);
}
.qualidade-nota { text-align: center; display: grid; gap: 8px; justify-items: center; }
.qualidade-num { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.qualidade-num small { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.qualidade-num.ok  { color: var(--verde-fundo); }
.qualidade-num.mid { color: var(--ouro-forte); }
.qualidade-num.bad { color: var(--bad); }
.qualidade-txt strong { font-size: 13.5px; color: var(--ink); }
.qualidade-nota .mini { font-size: 11.5px; line-height: 1.5; text-align: left; }

/* as barras de cobertura por sinal */
.sinal { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; padding: 5px 0; }
.sinal-rotulo { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.sinal-rotulo small { display: block; font-size: 10.5px; color: var(--ink-4); font-weight: 400; }
.sinal-barra { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sinal-barra b { display: block; height: 100%; border-radius: 999px; }
.sinal-barra b.ok  { background: var(--verde); }
.sinal-barra b.mid { background: var(--ouro); }
.sinal-barra b.bad { background: var(--bad); }
.sinal-barra b.off { background: var(--line); }
.sinal-pct { font-size: 12px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.sinal.desligado .sinal-rotulo, .sinal.desligado .sinal-pct { color: var(--ink-4); }

/* as recomendações ("Como melhorar" no mockup) */
.dica {
  list-style: none; display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  border-bottom: 1px solid var(--line-2);
}
.dica:last-child { border-bottom: 0; }
.dica-nivel {
  flex: none; border-radius: 999px; padding: 2px 9px; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-2); color: var(--ink-3);
}
.dica.alto  .dica-nivel { background: var(--verde-suave); color: var(--verde-fundo); }
.dica.medio .dica-nivel { background: var(--ouro-suave);  color: var(--ouro-forte); }
.dica.ok    .dica-nivel { background: var(--verde-suave); color: var(--verde-fundo); }

/* cobertura por provider — tabela real, com as colunas que existem */
#meta table.matriz { width: 100%; }
#meta table.matriz th {
  background: var(--verde-tint); border-bottom: 1px solid var(--verde-linha);
  font-size: 11px; font-weight: 700; color: var(--ink-2); padding: 11px 13px; white-space: nowrap;
}
#meta table.matriz td { padding: 11px 13px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#meta table.matriz tbody tr:hover td { background: var(--verde-tint); }

/* ═══════════════════════════════════════════ 2 · POLÍTICA DE ENVIO ══
   Blocos numerados em cartão, toggles verdes — a semântica é intocada. */
.politica { display: grid; gap: 14px; }
.politica > fieldset, .politica > .bloco, .politica > section {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; box-shadow: var(--sombra-1); margin: 0;
}
.politica legend, .politica h3 {
  font-size: 13.5px; font-weight: 700; color: var(--ink); padding: 0;
}
/* o interruptor: verde quando ligado, cinza quando não */
.politica input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 38px; height: 22px; border-radius: 999px; flex: none;
  background: #CBD2D9; border: 0; cursor: pointer; position: relative;
  transition: background var(--transicao);
}
.politica input[type="checkbox"]::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(14,31,26,.3); transition: transform var(--transicao);
}
.politica input[type="checkbox"]:checked { background: var(--verde); }
.politica input[type="checkbox"]:checked::after { transform: translateX(16px); }
.politica input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.politica input[type="checkbox"]:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* rádio do gatilho e da estratégia de valor */
.politica input[type="radio"] {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none;
  border: 2px solid #CBD2D9; border-radius: 999px; background: var(--surface); cursor: pointer;
  position: relative; transition: border-color var(--transicao);
}
.politica input[type="radio"]:checked { border-color: var(--verde); border-width: 5px; }
.politica input[type="radio"]:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* o aviso de dado sensível, quando o próprio código marca */
.politica .perigo, .politica .sensivel {
  background: var(--bad-dim); border: 1px solid rgba(179,38,30,.22); border-radius: 11px;
}

/* ═══════════════════════════════════ 3 · CONEXÃO E CREDENCIAIS ══ */
.meta-acoes-principais { gap: 10px; margin-bottom: 16px; }
.meta-acoes-principais .act {
  height: 40px; min-height: 40px; border-radius: 10px; padding: 0 18px;
  font-size: 13px; font-weight: 600;
}
.credenciais-meta {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; box-shadow: var(--sombra-1);
}
.credenciais-meta code, .credenciais-meta input[readonly] {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 11px; font-size: 12.5px; color: var(--ink-2);
}

/* ═══════════════════════════════════════ 4 · DIAGNÓSTICO E FILA ══ */
.painel-meta[data-painel-meta="diagnostico"] > .row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 15px; gap: 10px; box-shadow: var(--sombra-1); margin-bottom: 16px;
}
.painel-meta[data-painel-meta="diagnostico"] > .row .act {
  height: 38px; min-height: 38px; border-radius: 9px; padding: 0 16px;
  font-size: 12.5px; font-weight: 600;
}
.painel-meta[data-painel-meta="diagnostico"] > .row select {
  min-height: 38px; border-radius: 9px; border: 1px solid #CBD2D9;
  background: var(--surface); font-size: 12.5px; padding: 0 12px;
}
.painel-meta[data-painel-meta="diagnostico"] .wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sombra-1); overflow: auto;
}
#meta #tabelaFila th, #meta #tabelaMetaLog th {
  background: var(--verde-tint); border-bottom: 1px solid var(--verde-linha);
  font-size: 11px; font-weight: 700; color: var(--ink-2);
  padding: 11px 13px; white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
#meta #tabelaFila td, #meta #tabelaMetaLog td { padding: 11px 13px; font-size: 12.5px; }
#meta #tabelaFila tbody tr:hover td, #meta #tabelaMetaLog tbody tr:hover td { background: var(--verde-tint); }
#meta #tabelaFila code, #meta #tabelaMetaLog code {
  font-size: 11.5px; color: var(--verde-fundo); background: none; padding: 0;
}

/* ═════════════════════════════════════════════ 5 · TUTORIAL GUIADO ══
   Os 6 passos reais, com a barra de progresso que já existe. */
.tutorial {
  background: var(--surface); border: 1px solid var(--verde-linha);
  border-radius: 14px; padding: 20px 22px; box-shadow: var(--sombra-1);
}
.tutorial-topo { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.tutorial-topo .cartao-titulo { font-size: 15px; font-weight: 700; }
.tutorial-progresso { margin-left: auto; min-width: 170px; text-align: right; }
.tutorial-progresso b { font-size: 13px; font-weight: 700; color: var(--verde-fundo); }
.tutorial-progresso i {
  display: block; height: 7px; border-radius: 999px; margin-top: 7px;
  background: var(--surface-2); overflow: hidden;
}
.tutorial-progresso i span { display: block; height: 100%; background: var(--verde); border-radius: 999px; }
.passos { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: passo; }
.passos > li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 17px; display: grid; grid-template-columns: 30px 1fr; gap: 13px;
  align-items: start;
}
.passos > li::before {
  counter-increment: passo; content: counter(passo);
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.passos > li.feito { background: var(--verde-tint); border-color: var(--verde-linha); }
.passos > li.feito::before { background: var(--verde); color: #FFFFFF; }

@media (max-width: 900px) {
  #meta .statbar { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  #meta .statbar > * + * { border-left: 0; }
  .abas-meta { border-radius: 14px; }
  .painel-meta[data-painel-meta="diagnostico"] > .row { flex-wrap: wrap; }
  .tutorial-progresso { margin-left: 0; text-align: left; }
}


/* ███████████████████████████████████████████████████████████████████████████
   OPERAÇÃO — segunda revisão, pelos mockups mais recentes.

   A Etapa A já pôs o assistente em faixa cheia, o período em pílula, a
   Central com estado vazio circular e o suporte em painel. O que estes
   mockups trazem de novo, e que ainda não estava:

     · os passos do onboarding em DUAS colunas de verdade (as regras da
       Etapa A não venciam a especificidade em todos os grupos);
     · a barra "Saúde do rastreio" com os três números separados por divisor;
     · o funil com o valor ao lado da contagem, alinhado à direita;
     · as tabelas inferiores com cabeçalho em faixa e hover;
     · o cartão de dinheiro com hierarquia mais forte.

   Descartado por não existir (busca no código, nada mudou desde a Etapa A):
     · "Dados em tempo real" / "Tempo real" — rótulo sem estado por trás;
     · intervalo de datas "10 mai – 08 jun" — app.js:595 monta só
       "últimos N dias"; a API devolve `d.days`, não as datas;
     · sparkline por KPI — zero ocorrência de sparkline/mini-grafico;
     · "Ver todas integrações/campanhas" — zero ocorrência;
     · linha "Total" nas tabelas — tabela() não tem rodapé;
     · "Taxa de conversão (pago)" e "Receita gerada" no funil — o funil real
       vem de d.funnel, com contagem e valor por estágio;
     · banner "Você está na conta X" — a informação existe no modo suporte,
       mas não há componente de faixa; o seletor já diz a conta aberta.
   ███████████████████████████████████████████████████████████████████████████ */

/* ─────────────────────────────────────── onboarding: 2 colunas de fato ──
   A Etapa A tentou isso, mas `.onboarding-grid` tem repeat(3,...) numa regra
   mais específica em alguns grupos. Aqui a regra alcança todos os casos. */
@media (min-width: 1180px) {
  #painel > #assistenteInicial .onboarding-grid,
  #painel > #assistenteInicial .onboarding-grupo .onboarding-grid,
  #painel > #assistenteInicial .onboarding.pronto .onboarding-grupo .onboarding-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
}
/* o passo ganha respiro, como nos mockups */
#painel > #assistenteInicial .onboarding-passo {
  padding: 14px 15px; border-radius: 12px; gap: 12px;
}
#painel > #assistenteInicial .onboarding-passo strong { font-size: 13.5px; }
#painel > #assistenteInicial .onboarding-passo small { font-size: 12px; line-height: 1.45; }
/* o rótulo de grupo, em caixa alta discreta */
#painel > #assistenteInicial .onboarding-grupo h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}

/* ──────────────────────────────────── cartão de dinheiro: hierarquia ──
   Receita em destaque, comissões e ticket como apoio — como no modelo. */
.kpi-dinheiro .v { font-size: 28px; letter-spacing: -.02em; }
.kpi-dinheiro-pe.comissao b { font-size: 19px; }
.kpi-dinheiro-pe { border-top-color: rgba(255,255,255,.28); }

/* ───────────────────────────────────────────── saúde do rastreio ──
   No mockup os três números ficam separados, com divisor entre eles. */
.kpi-saude { gap: 0; }
.kpi-saude > .k {
  padding-right: 22px; font-size: 10.5px; letter-spacing: .09em; font-weight: 700;
}
.kpi-saude .saude-linha, .kpi-saude .saude-bloco {
  padding: 0 22px; border-left: 1px solid var(--line-2);
}
.kpi-saude .saude-linha .rot {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.kpi-saude .saude-linha .val { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.kpi-saude .saude-barra { height: 8px; border-radius: 999px; }

/* ─────────────────────────────────────────────────── funil agora ──
   Barra mais grossa, contagem e valor à direita, como no mockup. */
#funilBarras > div { padding: 7px 0; }
#funilBarras .trilho, #funilBarras .barra { height: 8px; border-radius: 999px; }
#painel .linha-grafico .cartao .cartao-pe {
  border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 12px;
}

/* ─────────────────────────────────────────── tabelas inferiores ──
   Cabeçalho em faixa verde-clara e hover, como no resto da plataforma. */
#painel .split table th, #painel > h2 + .wrap table th {
  background: var(--verde-tint); border-bottom: 1px solid var(--verde-linha);
  font-size: 11.5px; font-weight: 700; color: var(--ink-2); padding: 12px 15px;
}
#painel .split table td, #painel > h2 + .wrap table td { padding: 12px 15px; font-size: 12.5px; }
#painel .split table tbody tr:hover td,
#painel > h2 + .wrap table tbody tr:hover td { background: var(--verde-tint); }
#painel .split table td:first-child { font-weight: 600; color: var(--ink); }

/* ────────────────────────────────────────── gráfico com mais ar ── */
#painel .linha-grafico .cartao { padding: 20px 22px; }
#painel .linha-grafico .cartao-titulo { font-size: 14.5px; font-weight: 700; }

/* ─────────────────────────────────────────── Central de avisos ──
   Segunda passada: cards internos e ícone por severidade. */
.aviso-secao h3 {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin: 0 0 9px 2px;
}
#gavetaAvisos .gaveta-corpo > .aviso-secao + .aviso-secao { margin-top: 18px; }

/* Em tela estreita os divisores e o padding de 22px somavam mais que a
   largura: o bloco estourava 20px. Sem divisor e sem padding lateral. */
@media (max-width: 900px) {
  .kpi-saude { flex-wrap: wrap; gap: 12px; }
  .kpi-saude .saude-linha, .kpi-saude .saude-bloco {
    border-left: 0; padding: 0; min-width: 0; flex-basis: 100%;
  }
  .kpi-saude > .k { flex-basis: 100%; padding-right: 0; }
  /* O `min-width` na tabela empurrava o <h2> e o .wrap de Perdas, que NÃO
     rolam — o vazamento saltou de 20px para 72px. A tabela rola sozinha
     dentro do cartão; nada de largura mínima. */
  #painel .split > div > .wrap, #painel > h2 + .wrap { overflow-x: auto; min-width: 0; }
  #painel .split > div, #painel > h2, #painel > h2 + .wrap { min-width: 0; max-width: 100%; }
  #painel .split table th, #painel .split table td,
  #painel > h2 + .wrap table th, #painel > h2 + .wrap table td { padding: 10px 11px; }
}


/* ═══════════════════════════════ assistente da Operação: recolhido ══
   Com 100% o bloco vira uma faixa; um clique abre os grupos. O botão é o
   mesmo padrão de "Recursos opcionais": <button>, aria-expanded e hidden. */
.onboarding-alternar {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.onboarding-alternar:hover {
  background: var(--verde-tint); border-color: var(--verde-linha); color: var(--verde-fundo);
}
.onboarding-alternar:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.onboarding-alternar .onboarding-seta {
  display: inline-block; font-size: 14px; line-height: 1; transition: transform .18s;
}
.onboarding.aberto .onboarding-alternar .onboarding-seta { transform: rotate(90deg); }

/* recolhido: a faixa fica compacta, sem o respiro de um bloco aberto */
.onboarding.pronto:not(.aberto) { padding: 14px 18px; }
.onboarding.pronto:not(.aberto) .onboarding-barra { margin: 10px 0 0; }
#onboardingCorpo[hidden] { display: none !important; }
#onboardingCorpo > .onboarding-grupo:first-child { margin-top: 14px; }

@media (max-width: 720px) {
  .onboarding-alternar { margin-left: 0; margin-top: 8px; }
  .onboarding-alternar-txt { display: none; }
  .onboarding-alternar { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-alternar, .onboarding-alternar .onboarding-seta { transition: none; }
}

#topo #sino { margin-left: auto; margin-right: 42px; }

@media (max-width: 560px) {
  /* Abaixo de 560px o tema ja esconde `.avatar-topo` (regra do lote
     anterior), entao nao ha o que reservar: o sino usa a borda inteira. */
  #topo #sino { margin-right: 0; }

  /* Tela cheia, e ACIMA da navegacao inferior (#navInferior tem z-index 60):
     um drawer que ficasse embaixo dela cortaria o botao de fechar. */
  #gavetaAvisos { width: 100%; z-index: 80; }
  #fundoAvisos { z-index: 79; }
  .aviso-item { grid-template-columns: 1fr; }
  .aviso-sev { grid-column: 1; justify-self: start; margin-bottom: 2px; }
  .aviso-texto { grid-column: 1; }
  .aviso-ir { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #gavetaAvisos { transition: none; }
}

/* ═══════════════════════ RECURSOS ADICIONAIS DA LANDING ═══════════════════
   O formulario de rastreamento nao e um quinto MODELO: e um recurso que
   convive com qualquer um deles. Por isso fica num bloco separado, com
   aparencia de card selecionavel, mas fora do grupo exclusivo dos modelos.

   Sem cor literal: tudo sai dos tokens que o tema ja define. */

.recursos-extras { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.recursos-extras > strong { display: block; margin-bottom: 8px; color: var(--ink-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

.recurso-card { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .15s ease; }
.recurso-card:hover { border-color: var(--verde); }
.recurso-card:has(input:checked) { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 6%, var(--surface)); }
.recurso-card input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--verde); }
.recurso-corpo { display: grid; gap: 4px; }
.recurso-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 800; font-size: 13.5px; }
.recurso-titulo .selo { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); }
.recurso-card small { color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }

/* Campos do formulario: lista de caixas, uma por linha, sem virar tabela. */
.form-campos { display: grid; gap: 7px; margin: 8px 0 4px; }
.form-campos label { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 650; }
.form-campos input { accent-color: var(--verde); }
.form-campos input:disabled + span { color: var(--ink-3); }
.form-campos small { font-weight: 500; color: var(--ink-3); }

/* Estado real da politica, dentro da etapa do formulario. */
.bloco-politica { margin-top: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.bloco-politica > strong { display: block; margin-bottom: 6px; font-size: 12.5px; }
.bloco-politica ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.bloco-politica p { margin: 0 0 6px; }
.bloco-politica .act { margin-top: 10px; }


/* ── formulario dentro da PREVIA (apenas visual, sem comportamento) ── */
.landing-mini-form { margin: 8px 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: grid; gap: 5px; text-align: left; }
.landing-mini-form > strong { font-size: 10.5px; line-height: 1.25; }
.landing-mini-form > p { margin: 0; font-size: 8px; line-height: 1.35; color: var(--ink-3); }
.landing-mini-form label { display: grid; gap: 2px; font-size: 8px; font-weight: 700; color: var(--ink-2); }
.landing-mini-form label i { font-style: normal; font-weight: 500; color: var(--ink-3); }
.landing-mini-form .campo-fake { min-height: 16px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--ink-4); font-size: 8px; line-height: 1.3; }
.landing-mini-form .mini-form-acao { margin-top: 3px; padding: 6px 8px; border-radius: 7px; background: var(--lp, var(--verde)); color: var(--surface); font-size: 9px; font-weight: 800; text-align: center; }
.landing-mini-form .mini-form-pular { font-size: 7.5px; text-align: center; color: var(--ink-3); text-decoration: underline; }

/* ── estados da politica dentro da etapa Formulario ── */
.pol-grupo { margin: 10px 0; }
.pol-grupo > strong { display: block; margin-bottom: 4px; }
.pol-grupo ul { margin: 0; padding-left: 16px; display: grid; gap: 2px; }
.pol-on { font-style: normal; font-weight: 800; color: var(--ok); }
.pol-off { font-style: normal; font-weight: 800; color: var(--ink-3); }
.pol-aviso { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--verde); border-radius: 8px; background: var(--surface-2); }
.pol-aviso p { margin: 5px 0 0; }
.pol-outros { margin-top: 10px; }
.pol-outros summary { cursor: pointer; font-weight: 700; }
.pol-outros ul { margin: 6px 0; padding-left: 16px; display: grid; gap: 2px; }

/* ── explicacao do recurso, em tres passos ── */
.form-explica { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.form-explica > strong { display: block; margin-bottom: 6px; font-size: 12.5px; }
.form-explica p { margin: 0 0 7px; }
.form-passos { display: grid; gap: 7px; margin-top: 10px; }
.form-passo { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; }
.form-passo b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); font-size: 10px; }
.form-passo span { font-size: 11.5px; line-height: 1.45; }
.form-porque { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--verde); border-radius: 8px; background: var(--surface); }
.form-porque > strong { display: block; margin-bottom: 4px; font-size: 11.5px; }

/* ------------------------------------------------------------------ planos */
/* O botão segue o mesmo desenho do Suporte, que já vive neste rodapé. */
.btn-planos {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 10px; font: inherit; font-size: 13px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.btn-planos svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.btn-planos:hover { background: var(--surface-2); }
/* Menu recolhido: sobra só o ícone, como os demais botões do rodapé. */
body:not(.menu-expandido) .btn-planos {
  padding: 0; width: 28px; justify-content: center; font-size: 0; align-self: center;
}

.planos-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin: 14px 0;
}
.plano-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px;
  background: var(--surface); display: flex; flex-direction: column; gap: 10px;
}
/* O plano contratado ganha destaque — é a informação que o usuário procura. */
.plano-card.atual { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
.plano-card h3 { margin: 0; font-size: 16px; }
.plano-preco { font-size: 24px; font-weight: 700; color: var(--ink); }
.plano-preco small { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.plano-card .plano-desc { color: var(--ink-2); font-size: 13px; margin: 0; }
.plano-card ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.plano-card ul li { margin: 3px 0; }
.plano-card .act { margin-top: auto; }
.lista-simples { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.lista-simples li { margin: 4px 0; }

/* --------------------------------------------------- postback / S2S */
.postback-s2s { margin: 8px 0 0; border-top: 1px solid var(--line-2); padding-top: 8px; }
.postback-s2s > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.postback-s2s > summary:hover { color: var(--ink); }
.postback-s2s h4 { margin: 14px 0 6px; font-size: 13px; color: var(--ink); }
/* Duas colunas quando cabe; uma no celular. */
.grade-mapa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;
}
.grade-mapa label { display: block; font-size: 12px; color: var(--ink-2); }
.grade-mapa input, .grade-mapa select { width: 100%; }
.grade-mapa small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11px; }
.postback-s2s textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
/* "não salvo" tem de ser visível sem ser alarme. */
.aviso-sujo { color: var(--warn); }

/* ------------------------------------------------------ guia do cliente */
.modal-guia { max-width: 900px; width: 92vw; }
/* O guia é longo: rola dentro da janela, não na página. */
.guia-corpo { max-height: 70vh; overflow-y: auto; padding-right: 6px; }
.guia-corpo h2, .guia-corpo h3 { margin: 18px 0 6px; color: var(--ink); }
.guia-corpo h4, .guia-corpo h5 { margin: 14px 0 4px; color: var(--ink); font-size: 13px; }
.guia-corpo p { margin: 6px 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.guia-corpo li { margin: 3px 0 3px 18px; color: var(--ink-2); font-size: 13px; }
.guia-corpo code { font-family: var(--mono); font-size: 12px; }
/* Bloco de código com rolagem própria: a janela nunca rola de lado. */
.guia-code {
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; font-size: 12px; margin: 8px 0;
}
.guia-corpo hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.guia-corpo table { font-size: 12px; }

/* ─────────────────────────── IMPORTAR PLANILHA (B) ───────────────────────

   Defeito visto na captura de celular (390px): a tabela de mapeamento tem duas
   colunas — o campo e o <select> da coluna da planilha — e não cabe. O select
   ficava cortado na direita, e a última linha era atropelada pelo botão
   flutuante. O `.wrap` com overflow-x escondia o problema atrás de uma rolagem
   lateral que ninguém procura numa tela de formulário.

   No celular a linha empilha: o que a plataforma precisa em cima, a coluna
   escolhida embaixo, as duas em largura cheia. Mesmo breakpoint que o resto do
   painel usa para empilhar (520px). */

#impMapa select,
#impFormato select { max-width: 100%; }

#impFormato label { flex: 1 1 200px; min-width: 0; }

/* o rodapé flutuante do celular não pode cobrir o último passo */
@media (max-width: 900px) {
  #importar { padding-bottom: 96px; }
}

@media (max-width: 520px) {
  /* a tabela do mapeamento vira uma lista de blocos */
  #impMapa,
  #impMapa tbody,
  #impMapa tr,
  #impMapa td { display: block; width: 100%; }

  #impMapa thead { display: none; }             /* o cabeçalho perde sentido empilhado */

  #impMapa tr {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  #impMapa td { border: 0; padding: 2px 0; }

  #impMapa td:last-child { padding-top: 8px; }
  #impMapa select { width: 100%; }

  /* as tabelas de conferência e relatório rolam dentro do próprio quadro */
  #impPrevia, #impRelatorio, #impHistorico { font-size: 12px; }
}

/* Destinos da importação: lista curta, nome + motivo. Cada linha diz se o
   destino recebe ou por que ficou de fora — não é decoração, é diagnóstico. */
#impDestinos .imp-destinos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
#impDestinos .imp-destinos li { display: flex; align-items: center; gap: 8px; }

/* ═══════════════ ORGANIZAÇÃO: grupos da sidebar e hubs ═══════════════════

   O rótulo de grupo é um separador de leitura, não um item clicável: ele
   organiza a lista sem acrescentar um nível de clique. Some quando a sidebar
   está recolhida, porque ali só há espaço para os ícones. */
.nav-grupo-rotulo {
  padding: 14px 12px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  opacity: .75; pointer-events: none;
}
.nav-grupo-rotulo:first-child { padding-top: 6px; }
body:not(.menu-expandido) .nav-grupo-rotulo { display: none; }

/* Os cards do hub: mesma altura por linha, ação sempre no rodapé do card —
   é o que deixa a grade legível quando os textos têm tamanhos diferentes. */
.hub-faixa { margin: 22px 0 2px; font-size: 15px; }
.hub-faixa:first-child { margin-top: 4px; }
.hub-grade {
  display: grid; gap: 12px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.hub-card { display: flex; flex-direction: column; gap: 6px; }
.hub-card > p { flex: 1; margin: 0; }
.hub-card > button { align-self: flex-start; margin-top: 4px; }
.hub-card-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.hub-detalhe { color: var(--ink-3); }

/* No celular a grade vira uma coluna: dois cards lado a lado em 390px
   deixariam o texto ilegível. */
@media (max-width: 560px) {
  .hub-grade { grid-template-columns: 1fr; }
  .hub-card > button { align-self: stretch; }
}

/* ══════════ ORGANIZAÇÃO, 2ª PARTE: jornadas, editor no contexto, diagnóstico

   Só tokens que já existem. Nenhuma cor, fonte, raio ou sombra nova — a
   identidade é a atual, e estes componentes se encaixam nela em vez de trazer
   um segundo sistema visual. */

/* ── a trilha de volta ─────────────────────────────────────────────────── */
.trilha {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 6px 0 0; font-size: var(--t-ajuda);
}
.trilha-passo {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  color: var(--azul-alto); font: inherit; text-decoration: none;
}
.trilha-passo:hover { text-decoration: underline; }
.trilha-passo:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r); }
.trilha-sep { color: var(--ink-4); }
.trilha-aqui { color: var(--ink-3); }

/* A central fica marcada como CONTEXTO PAI enquanto se está numa das telas
   dela. É diferente de `aria-current`, que continua sendo só da tela aberta:
   sem esta marca, a barra parecia dizer que se havia saído de Integrações. */
#nav button.pai-atual:not([aria-current="page"]) {
  /* SEM `color`. A barra tem paleta própria — o tema Rottads a pinta em verde
     escuro com texto claro — e `--ink` é o texto da superfície
     CLARA: forçá-lo aqui dava letra quase preta sobre verde escuro, que foi o
     que apareceu nas capturas.

     `currentColor` é a cor que a própria barra já escolheu para aquele botão,
     então o indicador contrasta em qualquer tema sem inventar cor nova. O peso
     reforça sem depender de cor. `aria-current` segue sendo só da tela aberta. */
  box-shadow: inset 3px 0 0 currentColor;
  font-weight: 650;
}

/* ── as duas famílias de entrada, como abas ────────────────────────────── */
.familia-abas { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.familia-aba {
  flex: 1 1 240px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font: inherit;
}
.familia-aba small { color: var(--ink-3); font-size: var(--t-ajuda); }
.familia-aba:hover { background: var(--hover); }
.familia-aba.atual {
  background: var(--azul-fraco); border-color: var(--azul-alto); color: var(--ink);
}
.familia-aba:focus-visible { outline: none; box-shadow: var(--foco); }

/* ── a fonte escolhida dentro da família ───────────────────────────────── */
.fonte-escolha {
  display: grid; gap: 8px; margin: 8px 0;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.fonte-item {
  text-align: left; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2);
}
.fonte-item small { color: var(--ink-3); font-size: var(--t-ajuda); }
.fonte-item:hover { background: var(--hover); }
.fonte-item.atual { border-color: var(--azul-alto); color: var(--ink); }
.fonte-item:focus-visible { outline: none; box-shadow: var(--foco); }

/* O editor montado no contexto da rede. A borda mais marcada existe para
   deixar claro que aquele bloco é a configuração de UMA fonte, e não da tela. */
.editor-contexto { margin: 10px 0; border: 1px solid var(--azul-fraco); }

/* ── o cartão da plataforma: resumo, não formulário ────────────────────── */
.resumo-destinos {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.resumo-destino {
  padding: 10px 12px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.resumo-destino-topo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.resumo-destino p { margin: 0 0 8px; color: var(--ink-3); }

/* ── as jornadas do Meta ───────────────────────────────────────────────── */
.jornada { padding: 0; overflow: hidden; margin-bottom: 10px; }
.jornada-topo {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: none; border: 0; cursor: pointer;
  color: var(--ink); font: inherit; text-align: left;
}
.jornada-topo:hover { background: var(--hover); }
.jornada-topo:focus-visible { outline: none; box-shadow: var(--foco); }
.jornada-topo small { display: block; color: var(--ink-3); font-size: var(--t-ajuda); }
.jornada-marca {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--pill);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  background: var(--azul-fraco); color: var(--azul-alto);
}
/* Aberta: o mesmo acento fraco, com um anel por dentro. Texto branco
   sobre o azul cheio e a convencao do projeto em `.act.primary`, mas ela
   usa literal -- e dois testes proibem hex novo no fim deste arquivo, com
   razao. Nenhum token serviria no lugar: `--ink` vira escuro nos temas
   claros. O anel distingue sem cor nova. */
.jornada.aberta .jornada-marca {
  background: var(--azul-fraco); color: var(--azul-alto);
  box-shadow: inset 0 0 0 2px var(--azul-alto);
}
.jornada-topo > span:nth-child(2) { flex: 1; min-width: 0; }
.jornada-seta { color: var(--ink-3); }
.jornada-corpo { padding: 0 14px 14px; border-top: 1px solid var(--line-2); }
.jornada-titulo { margin: 14px 0 6px; font-size: var(--t-card); }
.jornada-passos { margin: 10px 0; padding-left: 20px; color: var(--ink-2); }
.jornada-passos li { margin-bottom: 6px; }
.jornada-lista { display: flex; flex-direction: column; gap: 10px; }
.jornada-item {
  padding: 10px 12px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.jornada-bifurcacao {
  display: grid; gap: 10px; margin: 10px 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ── o diagnóstico: abas de destino, fichas, filtros, páginas ──────────── */
.diag-abas {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px;
  border-bottom: 1px solid var(--line-2); padding-bottom: 8px;
}
.diag-aba {
  cursor: pointer; font: inherit; padding: 7px 14px;
  border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
}
.diag-aba:hover { background: var(--hover); }
.diag-aba.atual {
  background: var(--azul-fraco); border-color: var(--azul-alto);
  color: var(--azul-alto); font-weight: 650;
}
.diag-aba:focus-visible { outline: none; box-shadow: var(--foco); }

.diag-fichas { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.diag-ficha {
  cursor: pointer; font: inherit; font-size: var(--t-ajuda);
  padding: 5px 10px; border-radius: var(--pill);
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-3);
}
.diag-ficha strong { color: var(--ink); margin-left: 4px; }
.diag-ficha:hover { background: var(--hover); }
.diag-ficha.atual { border-color: var(--azul-alto); color: var(--ink-2); }
.diag-ficha:focus-visible { outline: none; box-shadow: var(--foco); }

.diag-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0; }
.diag-filtros label { display: block; }
.diag-paginas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2);
}
.diag-paginas .mini { color: var(--ink-3); }

/* ── os dois contratos de API, lado a lado ─────────────────────────────── */
.contratos {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* ── FALHA DE LEITURA tem cor própria ──────────────────────────────────────
   Um detalhe cinza dizendo "não consegui ler" se parece com um detalhe cinza
   dizendo "nenhum envio ainda", e os dois significam coisas opostas: um é uma
   afirmação sobre a conta, o outro é a ausência de qualquer afirmação. */
.hub-falha { color: var(--warn); }

/* ── celular ───────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .familia-abas { flex-direction: column; }
  .familia-aba { flex: 1 1 auto; }
  .fonte-escolha,
  .resumo-destinos,
  .jornada-bifurcacao,
  .contratos { grid-template-columns: 1fr; }
  .diag-filtros { flex-direction: column; align-items: stretch; }
  .diag-filtros label select { width: 100%; }
  .diag-abas { overflow-x: auto; flex-wrap: nowrap; }
  .diag-aba { white-space: nowrap; }
  .jornada-topo { padding: 10px; gap: 8px; }
  .jornada-corpo { padding: 0 10px 10px; }
}


/* ── legibilidade da tabela de entregas ──────────────────────────────────
   "purchase" estava quebrando em "purcha / se": nome de evento e chave são
   identificadores, e identificador partido ao meio não se lê. Eles param de
   quebrar; o que pode ser longo (erro, avisos) ganha espaço e quebra onde deve. */
.diag-tabela td.col-evento,
.diag-tabela td.col-chave code { white-space: nowrap; }
.diag-tabela td.col-evento { font-weight: 550; }
.diag-tabela td.col-quando { white-space: nowrap; }
/* PISO DE LARGURA NA COLUNA DOS ATALHOS.
   `main td { overflow-wrap: anywhere }` deixa o navegador calcular a largura
   mínima de uma coluna como um caractere. Sem piso, a coluna dos atalhos ficou
   com 73px, os três botões empilharam quebrando letra a letra, e a linha
   passou a ter 385px de altura. Aquela regra geral não é tocada — ela vale
   para as outras tabelas da plataforma. */
/* ANCORADA A DIREITA. A tabela e larga (chave, evento, estado, tentativas e
   tres datas) e a acao principal da tela vive na ultima coluna. Sem isto, ela
   caia fora da area visivel e so aparecia depois de rolar de lado -- e nao se
   descobre uma acao que nao esta na tela. O resto das colunas continua
   alcancavel pela rolagem. */
.diag-tabela td:last-child,
.diag-tabela th:last-child {
  position: sticky; right: 0; min-width: 232px;
  background: var(--surface);
  box-shadow: inset 1px 0 0 var(--line);
}
.diag-tabela th:last-child { background: var(--surface-2); }
.diag-atalhos { display: flex; flex-wrap: wrap; gap: 4px; }
.diag-atalhos > button,
.diag-atalhos > span { white-space: nowrap; }

/* O espaço extra é reservado para o TEXTO DO ERRO, não para o número de
   tentativas: antes eram 180px fixos para caber um "0". */
.diag-tabela td.col-erro { min-width: 56px; }
.diag-tabela td.col-erro .hub-falha { display: block; min-width: 170px; max-width: 300px; }
.diag-tabela td.col-avisos { min-width: 150px; max-width: 320px; }
.diag-tabela td.col-avisos details summary { cursor: pointer; color: var(--azul-alto); }
.diag-tabela td.col-avisos pre {
  white-space: pre-wrap; word-break: break-word; margin: 6px 0 0;
  font-size: var(--t-ajuda); color: var(--ink-2);
}

/* O pedido para onde o diagnóstico levou, destacado por alguns segundos. */
tr.pedido-alvo > td {
  background: var(--azul-fraco);
  box-shadow: inset 3px 0 0 var(--azul-alto);
  transition: background .3s ease;
}

/* A ajuda que guarda o detalhe técnico, fora do caminho de quem só quer agir. */
.ajuda-detalhe { margin: 8px 0; }
.ajuda-detalhe > summary {
  cursor: pointer; color: var(--azul-alto); font-size: var(--t-ajuda);
}
.ajuda-detalhe > div { padding: 8px 0 0; color: var(--ink-3); font-size: var(--t-ajuda); }
.ajuda-detalhe ul { margin: 6px 0 0 18px; }

/* ─────────────────────────── CONTRATAÇÃO ───────────────────────────────────
   Duas classes, e só. Tudo o mais que a tela usa (cartao, note, pill, mini,
   act, campo, plano-card) já existe — reaproveitar é o que mantém a tela nova
   parecida com o resto do painel em vez de um enxerto.

   NENHUMA cor literal: a bateria proíbe hex novo depois de `#topo #sino`, e a
   proibição é boa — cor literal é como o tema claro ganha um texto invisível.
   Só tokens já definidos.                                                    */

/* A linha rótulo→valor do resumo. Colunas, para os valores alinharem entre si
   mesmo quando o rótulo tem tamanhos diferentes. */
.resumo-linha {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.resumo-linha:last-of-type { border-bottom: 0; }
.resumo-linha > span:first-child {
  color: var(--ink);
  opacity: .72;
  font-size: 13px;
}
.resumo-linha strong { font-variant-numeric: tabular-nums; }

/* No celular a coluna dupla aperta demais o valor; empilha. */
@media (max-width: 560px) {
  .resumo-linha { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
}

/* O erro de um campo, logo abaixo dele. `--bad` é o token de erro do tema. */
.erro-campo {
  display: block;
  margin-top: 4px;
  color: var(--bad);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

/* O campo que ainda falta preencher: marca discreta na borda, para a pessoa
   achar a pendência sem que a tela vire um campo de erros vermelhos. */
.campo.pendente > input,
.campo.pendente > select {
  border-color: var(--azul);
  box-shadow: inset 2px 0 0 var(--azul);
}

/* A escolha da forma de pagamento. `.opcao` já existe — só o agrupamento é novo. */
.forma-pagamento {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.forma-pagamento .cartao-sub { margin-bottom: 6px; }
.forma-pagamento .opcao { border: 1px solid var(--line); margin-bottom: 8px; }
.forma-pagamento .opcao:has(input:checked) {
  border-color: var(--azul);
  background: var(--surface-2);
}

/* A linha de conferência do endereço resolvido pelo CEP. */
.endereco-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  margin: 6px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 13.5px;
}
.endereco-resumo[hidden] { display: none; }

/* O modal da contratação é mais estreito que o padrão: é um formulário curto,
   e 860px deixaria os campos largos demais para ler. */
.modal-contratacao { width: min(560px, 100%); }
.modal-contratacao .cartao { border: 0; padding: 0; background: none; }

/* O aviso de vencimento leva aos planos — então precisa parecer clicável. */
#trialBadge[role="button"] { cursor: pointer; }
#trialBadge[role="button"]:hover { filter: brightness(1.08); }
#trialBadge[role="button"]:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Múltiplos conjuntos Meta — componentes da tela nativa. */
.multi-meta-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px;border:1px solid var(--line);border-radius:12px;margin:0 0 18px;background:var(--bg-2,var(--bg));}
.multi-meta-toolbar small{display:block;color:var(--ink-3);margin-top:5px;}
.multi-meta-toolbar select{min-width:240px;max-width:100%;}
.multi-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px;align-items:start;}
.multi-meta-card{padding:18px;border:1px solid var(--line);border-radius:14px;min-width:0;background:var(--bg-2,var(--bg));}
.multi-meta-card h3{margin:0 0 9px;overflow-wrap:anywhere;}
.multi-meta-card .form-cred{display:grid;grid-template-columns:1fr;gap:12px;}
.multi-meta-card input,.multi-meta-card select,.multi-hooks input,.multi-hooks select{width:100%;min-width:0;}
.multi-meta-card label.check{display:flex;align-items:center;gap:8px;}
.multi-meta-card label.check input,.multi-hooks label.check input{width:auto;}
.multi-meta-card .row{flex-wrap:wrap;margin-top:12px;gap:8px;}
.multi-meta-card.locked{border-style:dashed;color:var(--ink-3);}
.multi-meta-message{font-size:13px;overflow-wrap:anywhere;}
.multi-hooks{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;}
.multi-hook-row{padding:12px 0;border-bottom:1px solid var(--line);}
.multi-hook-row form,.multi-hook-new form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:12px;align-items:end;}
.multi-hook-row label,.multi-hook-new label{display:block;font-size:13px;}
.multi-hook-row .multi-meta-message,.multi-hook-new .multi-meta-message{grid-column:1/-1;}
.multi-hook-row .url-hook{margin:8px 0;}.multi-hook-row .url-hook>span{overflow-wrap:anywhere;min-width:0;}
.multi-hook-new{padding-top:14px;}.multi-hook-new summary{cursor:pointer;font-weight:600;}
.multi-origin{flex-wrap:wrap;margin-top:10px;gap:8px;}
#multiManualDestino select,#multiCsvDestino select{width:100%;max-width:100%;}
@media(max-width:600px){.multi-meta-toolbar{align-items:stretch;}.multi-meta-toolbar select{min-width:0;width:100%;}.multi-meta-card{padding:14px;}.multi-hooks .url-hook{display:grid;gap:8px;}.multi-hooks .spacer{margin-left:0;}}

.multi-hooks .url-hook button{white-space:nowrap;flex:0 0 auto;min-width:108px;overflow-wrap:normal;}
.multi-hook-row>strong{display:inline-block;margin-right:8px;}