/* ============================================================================
   Delta Finanças — folha de estilo única
   A linguagem visual vem do painel de exemplo (nexcpa): tokens em CSS vars,
   cards de raio 24px, números em mono, acento laranja da marca, rail que
   expande no hover e barra inferior no mobile.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */
:root {
  --void: #f0f0f3;
  --base: #f0f0f3;
  --surface: #ffffff;
  --raised: #fafafa;

  --t1: #15151a;
  --t2: #6c6c78;
  --t3: #82828d;
  --t4: #9b9ba6;

  --b1: rgba(0, 0, 0, 0.07);
  --b2: rgba(0, 0, 0, 0.10);
  --b3: rgba(0, 0, 0, 0.14);

  --fill-1: rgba(0, 0, 0, 0.025);
  --fill-2: rgba(0, 0, 0, 0.045);
  --fill-3: rgba(0, 0, 0, 0.07);
  --input: #ffffff;

  --brand: #e00b1b;
  --brand-2: #ff3340;
  --brand-dim: rgba(224, 11, 27, 0.09);
  --brand-border: rgba(224, 11, 27, 0.26);

  --profit: #3f9b1e;
  --azul: #1273a8;
  --profit-dim: #e3f7c6;
  --profit-border: #bfe895;

  --loss: #dc2626;
  --loss-dim: #fde8e4;
  --loss-border: rgba(220, 38, 38, 0.22);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 26px rgba(0, 0, 0, 0.05);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 48px rgba(0, 0, 0, 0.10);

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --rail: 76px;
  --rail-aberto: 248px;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);

  /* a forma: cada tema tem o seu raio e a sua fonte de destaque */
  --raio-card: 24px;
  --raio-bt: 12px;
  --display: var(--sans);
  --display-tt: none;
  --display-ls: -0.035em;
  --display-peso: 900;

  /* o fundo quadriculado e o que ele faz sob o cursor */
  --grade: 44px;
  --grade-linha: rgba(0, 0, 0, 0.045);
  --grade-viva: rgba(0, 0, 0, 0.10);
  --glow-1: rgba(224, 11, 27, 0.10);
  --glow-2: rgba(255, 51, 64, 0.08);
  --facho: rgba(224, 11, 27, 0.05);
  --rede-on: 1;
  --mancha-op: 0.28;

  /* o que acontece quando o ponteiro chega */
  --card-sobe: -3px;
  --borda-viva: rgba(224, 11, 27, 0.26);
  --sombra-viva: 0 2px 8px rgba(0, 0, 0, 0.05), 0 20px 46px -18px rgba(224, 11, 27, 0.28);
  --lustro: rgba(255, 255, 255, 0.55);
  --lustro-bt: rgba(255, 255, 255, 0.4);
  --fio-h: 0px;

  color-scheme: light;
}

/* o noir: mesmo desenho, tokens trocados — nada de regra duplicada */
html[data-tema="noir"] {
  --void: #060607;
  --base: #0a0a0c;
  --surface: #15151a;
  --raised: #1d1d23;

  --t1: #ffffff;
  --t2: rgba(255, 255, 255, 0.62);
  --t3: rgba(255, 255, 255, 0.48);
  --t4: rgba(255, 255, 255, 0.34);

  --b1: rgba(255, 255, 255, 0.09);
  --b2: rgba(255, 255, 255, 0.13);
  --b3: rgba(255, 255, 255, 0.18);

  --fill-1: rgba(255, 255, 255, 0.03);
  --fill-2: rgba(255, 255, 255, 0.06);
  --fill-3: rgba(255, 255, 255, 0.10);
  --input: #1a1a20;

  --profit: #7bd650;
  --azul: #3fb6e8;
  --profit-dim: rgba(123, 214, 80, 0.12);
  --profit-border: rgba(123, 214, 80, 0.3);

  --loss: #ff6b5e;
  --loss-dim: rgba(255, 107, 94, 0.12);
  --loss-border: rgba(255, 107, 94, 0.28);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 26px rgba(0, 0, 0, 0.35);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.45);

  --grade-linha: rgba(255, 255, 255, 0.035);
  --grade-viva: rgba(255, 255, 255, 0.11);
  --glow-1: rgba(224, 11, 27, 0.20);
  --glow-2: rgba(255, 51, 64, 0.13);
  --facho: rgba(255, 51, 64, 0.07);
  --mancha-op: 0.34;

  --borda-viva: rgba(255, 51, 64, 0.34);
  --sombra-viva: 0 2px 8px rgba(0, 0, 0, 0.45), 0 22px 50px -20px rgba(224, 11, 27, 0.5);
  --lustro: rgba(255, 255, 255, 0.07);
  --lustro-bt: rgba(255, 255, 255, 0.18);

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   O tema DELTA: o visual do deltacpa.centralcart.ai — Chakra Petch em caixa
   alta, carmim #e60f1d sobre #f4f5fa, cantos quase retos e a grade de 48px
   bem visível, com os cards subindo e acendendo um fio de luz no pé.
   ------------------------------------------------------------------------ */
html[data-tema="delta"] {
  --void: #eceef5;
  --base: #f4f5fa;
  --surface: #ffffff;
  --raised: #f7f8fc;

  --t1: #0c0e16;
  --t2: #41465c;
  --t3: #5c6278;
  --t4: #878da6;

  --b1: rgba(12, 14, 22, 0.10);
  --b2: rgba(12, 14, 22, 0.15);
  --b3: rgba(12, 14, 22, 0.22);

  --fill-1: rgba(12, 14, 22, 0.025);
  --fill-2: rgba(12, 14, 22, 0.045);
  --fill-3: rgba(12, 14, 22, 0.08);
  --input: #ffffff;

  --brand: #e60f1d;
  --brand-2: #f93f10;
  --brand-dim: rgba(230, 15, 29, 0.08);
  --brand-border: rgba(230, 15, 29, 0.42);

  --profit: #0f8a3c;
  --azul: #1273a8;
  --profit-dim: rgba(15, 138, 60, 0.10);
  --profit-border: rgba(15, 138, 60, 0.3);

  --loss: #e60f1d;
  --loss-dim: rgba(230, 15, 29, 0.09);
  --loss-border: rgba(230, 15, 29, 0.26);

  --sombra-1: 0 1px 2px rgba(12, 14, 22, 0.05), 0 10px 30px -14px rgba(12, 14, 22, 0.18);
  --sombra-2: 0 2px 8px rgba(12, 14, 22, 0.08), 0 28px 60px -22px rgba(12, 14, 22, 0.3);

  /* a forma muda: canto curto e tipografia de painel técnico */
  --raio-card: 10px;
  --raio-bt: 6px;
  --display: "Chakra Petch", var(--sans);
  --display-tt: uppercase;
  --display-ls: 0.03em;
  --display-ls-bt: 0.05em;
  --display-peso: 700;

  --grade: 48px;
  --grade-linha: rgba(12, 14, 22, 0.05);
  --grade-viva: rgba(230, 15, 29, 0.16);
  --glow-1: rgba(230, 15, 29, 0.16);
  --glow-2: rgba(249, 63, 16, 0.10);
  --facho: rgba(230, 15, 29, 0.06);
  --mancha-op: 0.3;

  /* a assinatura do tema: o card sobe mais e acende o fio de 3px */
  --card-sobe: -7px;
  --borda-viva: rgba(230, 15, 29, 0.6);
  --sombra-viva: 0 0 0 1px rgba(230, 15, 29, 0.25), 0 24px 50px -22px rgba(230, 15, 29, 0.7);
  --lustro: rgba(255, 255, 255, 0.65);
  --lustro-bt: rgba(255, 255, 255, 0.32);
  --fio-h: 3px;

  color-scheme: light;
}

/* ------------------------------------------------------------------- base */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--base);
  color: var(--t1);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

body { min-height: 100vh; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: var(--brand-dim); color: var(--t1); }

/* barras de rolagem discretas, como no painel do exemplo */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--fill-3); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--b3); }

/* número é sempre mono, apertado e pesado */
.num {
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.positivo { color: var(--profit); }
.negativo { color: var(--loss); }
.azul { color: var(--azul); }

.rotulo {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t4);
}

/* ------------------------------------------------------------ layout app */
.app { display: flex; align-items: stretch; min-height: 100vh; }

.conteudo {
  flex: 1;
  min-width: 0;
  margin-left: var(--rail);
  padding: 30px 34px 60px;
  transition: margin-left 0.26s var(--curva);
}

.faixa { max-width: 1320px; margin: 0 auto; }

/* --------------------------------------------------------------- sidebar */
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 240;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px;
  background: var(--surface);
  border-right: 1px solid var(--b1);
  overflow: hidden;
  transition: width 0.26s var(--curva);
}

.rail:hover, .rail.aberta { width: var(--rail-aberto); }

.rail .sb-label {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.18s;
}
.rail:hover .sb-label, .rail.aberta .sb-label { opacity: 1; }
.rail:not(:hover):not(.aberta) .sb-label { display: none; }

.rail-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 6px 2px;
  min-height: 46px;
}
.rail:not(:hover):not(.aberta) .rail-topo { justify-content: center; }

.marca {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: 0 8px 22px rgba(224, 11, 27, 0.32);
  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* A placa deixou de abrigar a letra Δ e passou a emoldurar o símbolo. O
   tamanho vem do próprio SVG, não de um padding na placa: padding em
   porcentagem resolve contra a LARGURA DO PAI, e num contêiner flex largo
   isso inflava a placa de 38px para mais de cem.

   `aspect-ratio` em vez de `height: 100%` pelo mesmo tipo de motivo: a placa
   é uma grade, e altura percentual dentro dela resolveria contra uma linha de
   altura automática — ou seja, zero. O traço vem de `currentColor`, então o
   símbolo acompanha a cor da placa. */
.marca-svg { width: 64%; aspect-ratio: 1; display: block; }
.marca::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.28), transparent 60%);
}

.marca-txt { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.marca-txt b {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.marca-txt small {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--t4);
}

.selo {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  padding: 3px 7px;
  border-radius: 20px;
  line-height: 1;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: 0 4px 12px rgba(224, 11, 27, 0.38);
}

.rail nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 -2px;
}
.rail nav::-webkit-scrollbar { width: 4px; }

.grupo { display: flex; flex-direction: column; gap: 2px; }

/* o risco que separa um grupo do outro. Antes só aparecia com o menu
   recolhido, no lugar do nome do grupo; agora é ele sozinho em todos os
   estados — o nome saiu. */
.grupo-risco {
  height: 1px;
  margin: 8px 12px 9px;
  background: var(--b1);
}

.item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t3);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.rail:not(:hover):not(.aberta) .item { justify-content: center; padding: 10px 0; }

.item svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.18s ease; }
.item:hover { background: var(--fill-2); color: var(--t1); }
.item:hover svg { transform: scale(1.08); }

.item[aria-current="page"] {
  background: var(--raised);
  color: var(--t1);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand);
}
.item[aria-current="page"] svg { color: var(--brand); }

.item-sino {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--brand-dim);
  color: var(--brand);
  border: 1px solid var(--brand-border);
}
.rail:not(:hover):not(.aberta) .item-sino { display: none; }

.rail-pe { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--b1); padding-top: 12px; }

.pulso {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--fill-1);
  font-size: 11.5px;
  color: var(--t3);
  font-weight: 600;
}
.rail:not(:hover):not(.aberta) .pulso { justify-content: center; padding: 8px 0; }
.pulso i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--profit);
  flex-shrink: 0;
  animation: pulsar 2.4s ease-in-out infinite;
}

/* -------------------------------------------------- gatilho / barra mobile */
.rail-gatilho {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 250;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--b1);
  background: var(--surface);
  color: var(--t1);
  box-shadow: var(--sombra-1);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rail-veu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 235;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  animation: surgir 0.2s ease;
}
.rail-veu.on { display: block; }

.barra-app {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 230;
  background: var(--surface);
  border-top: 1px solid var(--b1);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.28);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns: 1fr 1fr 84px 1fr 1fr;
  align-items: end;
}

.barra-app .bb {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 6px 2px;
  border-radius: 14px;
  color: var(--t3);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.16s ease, transform 0.16s ease;
}
.barra-app .bb:active { transform: scale(0.94); }
.barra-app .bb[aria-current="page"] { color: var(--t1); }
.barra-app .bb span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.barra-app .bb[aria-current="page"] .bb-ico { position: relative; }
.barra-app .bb[aria-current="page"] .bb-ico::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-2);
  transform: translateX(-50%);
}

/* o botão do centro: elevado, redondo, na cor da marca */
.barra-app .bb-centro {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: -30px auto 0;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px var(--surface), 0 12px 30px rgba(224, 11, 27, 0.45);
  transition: transform 0.16s ease;
}
.barra-app .bb-centro:active { transform: scale(0.93); }
.barra-app .bb-centro svg { width: 28px; height: 28px; stroke-width: 2.6; }

/* ----------------------------------------------------------------- cabeça */
.cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
/* o texto cede espaço primeiro; os botões nunca encolhem — eles quebram linha */
.cabeca > :first-child { flex: 1 1 300px; min-width: 0; }
.cabeca .acoes { flex-shrink: 0; max-width: 100%; }
.cabeca h1 {
  font-size: 27px;
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  text-transform: var(--display-tt);
  margin: 0;
}
.cabeca p { font-size: 13px; color: var(--t3); margin: 6px 0 0; max-width: 62ch; }

/* o quadro "Em 1º lugar" do Painel do Premium */
.lider-linha { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.lider-ava {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: 16px; color: #fff;
  border: 2px solid #d9a441;
}
.lider-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lider-txt b { font-size: 14px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lider-txt .num { font-size: 18px; font-weight: 800; }
.lider-coroa { color: #d9a441; display: grid; }

/* a saudação do Painel: a foto de quem entrou ao lado do "Olá" */
.saudacao { display: flex; align-items: center; gap: 14px; }
.saudacao-txt { min-width: 0; }
.saudacao-ava {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: 21px; color: #fff;
  border: 2px solid var(--b1); cursor: pointer; padding: 0;
  box-shadow: var(--sombra-1);
  transition: transform .18s, border-color .18s;
}
.saudacao-ava:hover { transform: scale(1.05); border-color: var(--brand); }
.saudacao-ava:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) { .saudacao-ava { width: 44px; height: 44px; font-size: 17px; } }

/* ------------------------------------------------------------------ cards */
.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-1);
  padding: 22px;
}

.card-tit {
  font-size: 14.5px;
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  text-transform: var(--display-tt);
  margin: 0;
  color: var(--t1);
}
.card-sub { font-size: 12px; color: var(--t3); margin: 5px 0 0; }

.card-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* o bento: a grade que o exemplo usa pra misturar tamanhos de card */
.bento { display: grid; gap: 14px; }
.bento-5 { grid-template-columns: repeat(5, 1fr); }
.bento-4 { grid-template-columns: repeat(4, 1fr); }
.bento-3 { grid-template-columns: repeat(3, 1fr); }
.bento-2 { grid-template-columns: repeat(2, 1fr); }
.bento-21 { grid-template-columns: 1.9fr 1fr; }
.bento-12 { grid-template-columns: 1fr 1.6fr; }
.bento + .bento, .bento + .card, .card + .bento, .card + .card { margin-top: 14px; }

/* ...mas não DENTRO do bento: ali quem separa é o `gap`. A regra acima é para
   cards empilhados no fluxo normal; numa grade ela acerta todos menos o
   primeiro, e aí a linha fica 14px mais alta que os cards. O primeiro, sem
   margem, estica para preencher — e parecia maior que os vizinhos.
   É o mesmo tratamento que a grade de 12 colunas já fazia. */
.bento > * { margin: 0 !important; min-width: 0; }

/* ------------------------------------------------------------------- kpi */
.kpi { min-height: 148px; display: flex; flex-direction: column; }
.kpi-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kpi-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--fill-2);
  color: var(--t2);
  flex-shrink: 0;
}
.kpi-ico svg { width: 17px; height: 17px; }
.kpi-ico.marca { background: var(--brand-dim); color: var(--brand); box-shadow: none; }
.kpi-ico.lucro { background: var(--profit-dim); color: var(--profit); }
.kpi-ico.perda { background: var(--loss-dim); color: var(--loss); }

.kpi-nome { font-size: 12.5px; color: var(--t3); font-weight: 600; margin: 0; }
.kpi-valor { font-size: 27px; font-weight: 900; letter-spacing: -0.035em; font-family: var(--mono); margin: 0; }
.kpi-pe { font-size: 11.5px; color: var(--t4); margin: 8px 0 0; }
.kpi-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: auto; }

.delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid transparent;
}
.delta.sobe { background: var(--profit-dim); color: var(--profit); border-color: var(--profit-border); }
.delta.desce { background: var(--loss-dim); color: var(--loss); border-color: var(--loss-border); }
.delta.neutro { background: var(--fill-2); color: var(--t3); border-color: var(--b1); }

/* ------------------------------------------------------------- progresso */
.trilha {
  height: 8px;
  border-radius: 5px;
  background: var(--fill-2);
  overflow: hidden;
  position: relative;
}
.trilha > i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  width: 0;
  transition: width 0.9s var(--curva);
  position: relative;
  overflow: hidden;
}
/* o brilho que corre por cima da barra */
.trilha > i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44%;
  left: -100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progShimmer 2.4s ease-in-out infinite;
}
.trilha.verde > i { background: linear-gradient(90deg, var(--profit), color-mix(in srgb, var(--profit) 70%, #000)); }
.trilha.vermelha > i { background: linear-gradient(90deg, var(--loss), color-mix(in srgb, var(--loss) 72%, #000)); }
.trilha.fina { height: 6px; }

.barra-item { display: flex; flex-direction: column; gap: 7px; }
.barra-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.barra-topo b { font-family: var(--mono); font-weight: 800; letter-spacing: -0.02em; }

/* --------------------------------------------------------------- heatmap */
.heat { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; }
.heat > span {
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  background: var(--fill-2);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.heat > span:hover { transform: scale(1.18); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); z-index: 2; }

.heat-legenda {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 10.5px;
  color: var(--t4);
}
.heat-legenda i { width: 11px; height: 11px; border-radius: 3px; display: block; }

/* ------------------------------------------------------------- a conta
   saque − depósito + salário = lucro. Aparece no painel, em Ajustes e em
   cada cartão de Operador: a mesma peça, só em tamanhos diferentes. */
.conta-linha {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.conta-parte {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.conta-sinal {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 800;
  font-style: normal;
  color: var(--t4);
  line-height: 1;
}
.conta-total {
  margin-left: auto;
  padding: 12px 18px;
  border-radius: calc(var(--raio-card) - 10px);
  background: var(--fill-1);
  border: 1px solid var(--b1);
}
/* a cabeça das seções do Faturamento. A página deixou de ter abas: estes
   títulos são o que separa o fechamento da evolução e do histórico. */
.fat-secao {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 30px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--b1);
}
.fat-secao:first-of-type { margin-top: 24px; }
.fat-secao-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--b1);
  background: var(--fill-1);
  color: var(--brand);
}
.fat-secao h2 {
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  text-transform: var(--display-tt);
  font-size: 17px;
  margin: 0;
}
.fat-secao p { font-size: 12.5px; color: var(--t3); margin: 3px 0 0; }

.conta-linha.compacta {
  gap: 11px;
  padding: 12px;
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--fill-1);
  border: 1px solid var(--b1);
}
.conta-linha.compacta .conta-parte { gap: 11px; }
.conta-linha.compacta .conta-sinal { font-size: 14px; }
.conta-linha.compacta .conta-total {
  margin-left: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* a prévia dentro do formulário de operação: a conta se refaz ao digitar */
.previa-lucro {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--fill-1);
  border: 1px dashed var(--b2);
}
.previa-conta {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 14px;
}
.previa-conta i {
  font-style: normal;
  font-weight: 800;
  color: var(--t4);
  font-family: var(--mono);
}
.previa-conta b { font-size: 18px; }
.previa-lucro .campo-dica { margin-top: 8px; }

/* ============================================================================
   As peças da operação: abas, metas, sala ao vivo, chaves, slots e trilhas
   ========================================================================== */

/* ------------------------------------------------------------------ abas */
.abas {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 20px;
  padding: 4px;
  border-radius: calc(var(--raio-bt) + 4px);
  background: var(--fill-1);
  border: 1px solid var(--b1);
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 0 auto;
  justify-content: center;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--raio-bt);
  background: transparent;
  color: var(--t3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}
.aba:hover { color: var(--t1); background: var(--fill-2); }
.aba[aria-selected="true"] {
  background: var(--surface);
  color: var(--t1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
.aba-ico { display: inline-flex; opacity: 0.75; }
.aba-conta {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--fill-2);
  color: var(--t3);
}
.aba[aria-selected="true"] .aba-conta { background: var(--brand-dim); color: var(--brand); }

/* o selo PARCEIRO no item do menu */
.item-selo {
  margin-left: auto;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--brand-dim);
  color: var(--brand);
}

/* --------------------------------------------------------- selos e status */
.selo-status {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
}
.selo-vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--loss-dim);
  color: var(--loss);
}
.selo-vivo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulsar 1.6s ease-in-out infinite;
}
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ------------------------------------------------------------ cartão meta */
.meta-card.parada { border-color: color-mix(in srgb, var(--loss) 32%, var(--b1)); }
.meta-titulo {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.meta-titulo b { font-size: 14.5px; font-weight: 750; color: var(--t1); }
.meta-titulo:hover b { color: var(--brand); }
.aviso-parada {
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--loss);
}

/* a fita de metas em andamento */
.metas-fita {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.meta-fita {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 14px;
  border-radius: calc(var(--raio-card) - 12px);
  border: 1px solid var(--b1);
  border-left: 3px solid var(--c, var(--brand));
  background: var(--fill-1);
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.meta-fita:hover { transform: translateY(-2px); background: var(--fill-2); }
.meta-fita.parada { border-color: color-mix(in srgb, var(--loss) 30%, var(--b1)); }
.meta-fita-rede {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t4);
}
.meta-fita b { font-size: 13px; font-weight: 700; color: var(--t1); }
.meta-fita-sub { font-size: 11px; color: var(--t3); }
.meta-fita .num { font-size: 13.5px; margin-top: 4px; }

/* ----------------------------------------------------------- sala ao vivo */
.ciclo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.ciclo-passo {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border-radius: calc(var(--raio-card) - 12px);
  border: 1px solid var(--b1);
  background: var(--fill-1);
}
.ciclo-passo b { display: block; font-size: 13px; color: var(--t3); }
.ciclo-passo small { display: block; font-size: 11px; color: var(--t4); margin-top: 2px; }
.ciclo-bola {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 800;
  background: var(--fill-3);
  color: var(--t4);
}
.ciclo-passo.feito { border-color: color-mix(in srgb, var(--profit) 30%, var(--b1)); }
.ciclo-passo.feito .ciclo-bola { background: var(--profit); color: #fff; }
.ciclo-passo.feito b { color: var(--t2); }
.ciclo-passo.agora {
  border-color: color-mix(in srgb, var(--c) 45%, var(--b1));
  background: color-mix(in srgb, var(--c) 8%, var(--fill-1));
}
.ciclo-passo.agora .ciclo-bola { background: var(--c); color: #fff; }
.ciclo-passo.agora b { color: var(--t1); }

/* o formulário em passos */
.passos-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.passo-bt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 20px;
  border: 1px solid var(--b1);
  background: transparent;
  color: var(--t3);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.passo-bt:hover { color: var(--t1); background: var(--fill-2); }
.passo-bt.agora {
  background: var(--brand-dim);
  border-color: var(--brand-border);
  color: var(--brand);
}
.passo-n {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fill-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
}
.passo-bt.agora .passo-n { background: var(--brand); color: #fff; }

.passo-corpo { display: flex; flex-direction: column; gap: 16px; }
.campo-rot {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 7px;
}

.resumo-celula {
  padding: 13px 14px;
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--fill-1);
  border: 1px solid var(--b1);
}
.resumo-linhas { display: flex; flex-direction: column; }
.resumo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--b1);
  font-size: 12.5px;
  color: var(--t3);
}
.resumo-linha:last-child { border-bottom: 0; }
.resumo-linha b { color: var(--t1); font-weight: 650; text-align: right; }

/* o histórico de remessas */
.remessas { display: flex; flex-direction: column; }
.remessa-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--b1);
  flex-wrap: wrap;
}
.remessa-linha:last-child { border-bottom: 0; }
.remessa-n {
  font-size: 11px;
  font-weight: 800;
  color: var(--t4);
  min-width: 34px;
}
.remessa-linha b { font-size: 13px; color: var(--t1); font-weight: 650; }
.remessa-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 11px;
  color: var(--t4);
}
.remessa-valores {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  color: var(--t3);
  text-align: right;
}

/* ------------------------------------------------------------ chaves PIX */
.tipos-pix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.tipo-pix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-radius: calc(var(--raio-card) - 12px);
  border: 1px solid var(--b1);
  background: var(--fill-1);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.tipo-pix:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--b1)); }
.tipo-pix.escolhido {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, var(--fill-1));
}
.tipo-nome { font-size: 11.5px; font-weight: 700; color: var(--t3); }
.tipo-pix b { font-size: 17px; color: var(--t1); }

.chaves { display: flex; flex-direction: column; }
.chave {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--b1);
  flex-wrap: wrap;
}
.chave:last-child { border-bottom: 0; }
.chave.invalida .chave-valor { color: var(--loss); text-decoration: line-through; }
.chave-tipo {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  white-space: nowrap;
}
.chave-valor { font-size: 12.5px; color: var(--t1); word-break: break-all; }

/* ----------------------------------------------------------------- slots */
.slots-fita {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-height: 220px;
  overflow-y: auto;
}
.slot-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 20px;
  border: 1px solid var(--b1);
  background: var(--fill-1);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.slot-chip:hover { background: var(--fill-2); }
.slot-chip.escolhido { border-color: var(--brand-border); background: var(--brand-dim); }
.slot-prov {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--t4);
}
.slot-nome { font-size: 12px; font-weight: 650; color: var(--t2); }
.slot-vol {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
}
.slot-vol.alta { background: var(--profit-dim); color: var(--profit); }
.slot-vol.media { background: var(--brand-dim); color: var(--brand); }
.slot-vol.baixa { background: var(--fill-2); color: var(--t4); }

.vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
/* uma categoria da vitrine: o provedor e os slots dele, dentro de um quadro
   cuja borda tem a cor que o Dono escolheu (--cp); sem cor, a borda neutra */
.slot-categoria {
  margin-top: 22px;
  padding: 16px;
  border: 1.5px solid var(--b1);
  border-radius: var(--raio-card);
  background: var(--fill-1);
}
.slot-categoria.com-cor {
  border-color: var(--cp);
  background: color-mix(in srgb, var(--cp) 5%, var(--fill-1));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cp) 18%, transparent),
    0 0 22px color-mix(in srgb, var(--cp) 14%, transparent);
}
.slot-categoria.com-cor .slot-categoria-cabeca { border-bottom-color: color-mix(in srgb, var(--cp) 40%, var(--b1)); }
.slot-categoria.com-cor .slot-categoria-cabeca h2 { color: var(--cp); }
.slot-categoria-cor { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.slot-categoria-cor label { cursor: pointer; gap: 6px; }
.slot-categoria-cor input[type="color"] {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--b1);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.slot-categoria-cor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.slot-categoria-cor input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.slot-categoria-cor input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
.slot-categoria-cabeca {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--b1);
}
.slot-categoria-cabeca h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--t1);
}
.slot-categoria-cabeca span { font-size: 12px; color: var(--t4); }

.slot-card {
  border: 1px solid var(--b1);
  border-radius: var(--raio-card);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.slot-card:hover { transform: translateY(-3px); }
.slot-card.favorito { border-color: var(--brand-border); }
.slot-capa {
  position: relative;
  height: 86px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 11px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c) 26%, var(--fill-2)),
    color-mix(in srgb, var(--c) 6%, var(--fill-1)));
}
.slot-prov-grande {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  color: color-mix(in srgb, var(--c) 72%, var(--t1));
  opacity: 0.55;
}
.slot-fav {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--b1);
  background: var(--surface);
  color: var(--t4);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.slot-fav[aria-pressed="true"] { color: var(--brand); border-color: var(--brand-border); }

/* a logo que o Dono escolheu: ocupa a capa inteira */
.slot-capa.com-logo { height: 120px; }
.slot-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* o pé do cartão: selos de provedor e volatilidade, e o copiar nome */
.slot-pe {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;   /* empurra o pé para a borda de baixo do cartão */
  padding-top: 10px;
  border-top: 1px solid var(--b1);
}
/* Os selos podem encolher; o botão não. Um provedor de nome comprido
   (DRAGONSOFT) cortaria o "Copiar" para fora do cartão — agora é o nome que
   cede, com reticências, e o nome inteiro fica no title do selo. */
.slot-selos { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.slot-selos .slot-prov {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--fill-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot-selos .slot-vol { flex-shrink: 0; }
.slot-copiar { padding-inline: 8px; flex-shrink: 0; white-space: nowrap; }
/* cartão estreito: o botão fica só com o ícone (o title diz o que ele faz),
   e sobra espaço para o nome do provedor */
@container (max-width: 190px) {
  .slot-copiar span { display: none; }
  .slot-copiar { padding-inline: 6px; }
}

/* a grade estica os cartões de uma linha à mesma altura: o corpo cresce e o
   pé desce até a borda de baixo, em vez de deixar um vão embaixo da faixa */
.slot-card { display: flex; flex-direction: column; }
.slot-corpo { flex: 1; display: flex; flex-direction: column; }
.slot-corpo > p:last-of-type { margin-bottom: 10px; }

/* provedor com cor escolhida pelo Dono: o pé do cartão vira uma faixa nessa
   cor, de ponta a ponta (as margens negativas desfazem o padding do corpo) */
.slot-card.com-cor .slot-pe {
  margin: auto -14px -14px;
  padding: 9px 14px 10px;
  border-top-color: color-mix(in srgb, var(--cp) 55%, transparent);
  background: color-mix(in srgb, var(--cp) 16%, var(--surface));
}
.slot-card.com-cor .slot-selos .slot-prov {
  background: color-mix(in srgb, var(--cp) 30%, transparent);
  color: color-mix(in srgb, var(--cp) 55%, var(--t1));
}
.slot-card.com-cor .slot-copiar { color: color-mix(in srgb, var(--cp) 45%, var(--t1)); }
.slot-fav, .slot-editar { z-index: 2; }

.slot-editar {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--b1);
  background: var(--surface);
  color: var(--t3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.slot-card:hover .slot-editar,
.slot-editar:focus-visible { opacity: 1; }
.slot-editar:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (hover: none) { .slot-editar { opacity: 1; } }

.slot-logo-previa {
  display: grid;
  place-items: center;
  height: 160px;
  margin-bottom: 14px;
  border: 1px dashed var(--b2, var(--b1));
  border-radius: 12px;
  background: var(--fill-1);
  overflow: hidden;
}
.slot-logo-previa img { width: 100%; height: 100%; object-fit: contain; }
.slot-logo-vazia { display: grid; gap: 6px; text-align: center; padding: 0 16px; }
.slot-logo-vazia b { font-size: 14px; color: var(--t2); }
.slot-logo-vazia .campo-dica { margin: 0; }
.slot-corpo { padding: 13px 14px 14px; }
.slot-corpo b { display: block; font-size: 13px; color: var(--t1); }
.slot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--fill-1);
  border: 1px solid var(--b1);
}
.slot-top b { font-size: 13px; color: var(--t1); }

/* ------------------------------------------------------------- premiações */
/* ===========================================================================
   PREMIAÇÕES — a escada de ranks

   Tudo nesta seção se pinta por `--c`, a cor do elo, posta no elemento pelo
   JS. Assim um elo novo entra na lista sem tocar em CSS nenhum.
   ========================================================================= */

.rank-emblema {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  /* o emblema é uma pedra: claro em cima, escuro embaixo, e um anel de luz na
     borda. Cor chapada deixava os quinze com cara de etiqueta. */
  background:
    radial-gradient(120% 120% at 32% 22%,
      color-mix(in srgb, var(--c) 100%, #fff 45%) 0%,
      var(--c) 46%,
      color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 14px color-mix(in srgb, var(--c) 35%, transparent);
}
/* os três últimos elos acendem sozinhos: é o que faz o topo da escada parecer
   um lugar aonde se quer chegar */
.rank-coluna:nth-last-child(-n+3) .rank-emblema {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 26px color-mix(in srgb, var(--c) 55%, transparent),
    0 4px 14px color-mix(in srgb, var(--c) 35%, transparent);
}
/* e o último é uma pedra de quina arredondada, não um disco */
.rank-coluna:last-child .rank-emblema { border-radius: 16px; }

.rank-emblema.grande {
  border-radius: 26px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 10px 30px color-mix(in srgb, var(--c) 40%, transparent);
}

/* ------------------------------------------------------- o cartão do topo */
.rank-topo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rank-topo-linha { display: flex; align-items: center; gap: 10px; }
.rank-chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; }

.rank-nome {
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  margin: 4px 0 6px;
  color: var(--t1);
}
.rank-sub { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; color: var(--t3); }
.rank-ponto { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }

.rank-prox-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 8px;
  font-size: 13px;
}
.rank-falta { font-size: 12px; color: var(--t2); }

.trilha.rank-barra { height: 9px; }
.trilha.rank-barra > i { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, transparent), var(--c)); }

.rank-escala {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--t4);
}
.rank-pct { color: var(--t2); }

.rank-proximos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.rank-prox {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--b1);
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--fill-1);
  min-width: 0;
}
/* só o PRÓXIMO elo ganha a cor; os outros dois esperam a vez. A classe não
   pode se chamar `mira`: esse nome já é dos cantos de mira do tema delta, e
   o cartão vinha com um ângulo vermelho desenhado por cima. */
.rank-prox.alvo { border-color: color-mix(in srgb, var(--c) 48%, var(--b1)); }
.rank-prox.alvo b { color: var(--c); }
.rank-prox b { display: block; font-size: 13px; color: var(--t2); }
.rank-prox small { display: block; font-size: 11px; color: var(--t4); margin-top: 1px; }

/* ----------------------------------------------------------- a escada */
.rank-selo-atual {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--b1);
  border-radius: 999px;
  background: var(--fill-1);
}
.rank-selo-atual b { display: block; font-size: 13px; color: var(--t1); }
.rank-voce { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; }

/* a escada rola na horizontal quando não cabe: espremer quinze colunas até
   caberem deixaria os emblemas do tamanho de um ponto */
.rank-escada-caixa {
  overflow-x: auto;
  padding: 10px 2px 2px;
  border-radius: calc(var(--raio-card) - 10px);
  background: var(--fill-1);
  border: 1px solid var(--b1);
}
.rank-escada {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(66px, 1fr);
  align-items: end;
  gap: 4px;
  min-width: 1040px;
  /* o respiro de cima é onde mora a etiqueta "VOCÊ", que flutua acima do
     nome do elo — sem ele a etiqueta encostaria no nome */
  padding: 46px 10px 14px;
}

.rank-coluna {
  /* é um <button>: zera a pele do navegador e devolve o cursor de clique */
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 2px;
  font: inherit;
  cursor: pointer;
  border-radius: 12px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
  /* os que ainda não foram alcançados ficam de lado, sem sumir: a escada
     inteira precisa ser legível, é ela que mostra o caminho */
  opacity: 0.62;
  transition: opacity 0.2s var(--curva), transform 0.22s var(--curva);
}
.rank-coluna.feito, .rank-coluna.aqui, .rank-coluna.escolhida { opacity: 1; }
.rank-coluna:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* --- o hover: a coluna se levanta -------------------------------------- */
.rank-coluna { transform: translateY(0); }
.rank-coluna:hover, .rank-coluna:focus-visible {
  opacity: 1;
  transform: translateY(-7px);
}
.rank-coluna .rank-emblema {
  transition: transform 0.22s var(--curva), box-shadow 0.22s var(--curva);
}
.rank-coluna:hover .rank-emblema, .rank-coluna:focus-visible .rank-emblema {
  transform: scale(1.14) translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 26px color-mix(in srgb, var(--c) 60%, transparent);
}
.rank-coluna:hover .rank-tubo, .rank-coluna:focus-visible .rank-tubo {
  border-color: color-mix(in srgb, var(--c) 60%, var(--b1));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent),
              0 12px 26px color-mix(in srgb, var(--c) 28%, transparent);
}
.rank-coluna:hover .rank-coluna-nome, .rank-coluna:focus-visible .rank-coluna-nome { color: var(--c); }
.rank-coluna:hover .rank-coluna-n, .rank-coluna:focus-visible .rank-coluna-n { color: var(--t1); }
.rank-coluna:active { transform: translateY(-3px); }

/* quem prefere a tela parada continua com tudo legível: só o movimento sai */
@media (prefers-reduced-motion: reduce) {
  .rank-coluna, .rank-coluna .rank-emblema, .rank-tubo > i { transition: none; }
  .rank-coluna:hover, .rank-coluna:focus-visible { transform: none; }
  .rank-coluna:hover .rank-emblema, .rank-coluna:focus-visible .rank-emblema { transform: none; }
}

/* a coluna aberta no rodapé: fundo na cor do elo e o número em destaque. É o
   único jeito de saber, olhando a escada, de quem o rodapé está falando. */
.rank-coluna.escolhida {
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent);
}
.rank-coluna.escolhida .rank-coluna-n { color: var(--t1); font-weight: 800; }
.rank-coluna.escolhida .rank-coluna-nome { color: var(--c); }

.rank-coluna-nome {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t4);
  white-space: nowrap;
}
.rank-coluna.feito .rank-coluna-nome, .rank-coluna.aqui .rank-coluna-nome { color: var(--c); }

.rank-aqui {
  position: absolute;
  top: -26px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: var(--surface);
  border: 1px solid var(--b2);
  color: var(--t1);
  white-space: nowrap;
}

/* o tubo é o degrau: quanto DESTE elo já foi andado.

   O tubo inteiro já é da cor do elo, só que APAGADA — é o que dá o aspecto de
   coluna cheia. O trecho conquistado acende por cima. Assim a escada fica
   colorida de ponta a ponta sem mentir sobre progresso: a diferença entre o
   aceso e o apagado é que conta a história. */
.rank-tubo {
  width: 34px;
  border-radius: 11px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 6%, var(--fill-2)),
    color-mix(in srgb, var(--c) 22%, var(--fill-2)));
  border: 1px solid color-mix(in srgb, var(--c) 20%, var(--b1));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  transition: border-color 0.2s var(--curva), box-shadow 0.2s var(--curva);
}
.rank-tubo > i {
  display: block;
  width: 100%;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 85%, #fff),
    var(--c) 45%,
    color-mix(in srgb, var(--c) 62%, #000));
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent);
  transition: height 0.5s var(--curva);
}
/* o traço do progresso real, quando ele sobe acima do piso de desenho */
.rank-marca {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  opacity: 0.85;
  text-decoration: none;
}
.rank-tubo { position: relative; }

.rank-coluna.aqui .rank-tubo,
.rank-coluna.escolhida .rank-tubo { border-color: color-mix(in srgb, var(--c) 55%, var(--b1)); }

.rank-coluna-n { font-size: 12px; color: var(--t3); }
.rank-coluna-rot {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t4);
}
.rank-coluna-min { font-size: 11.5px; color: var(--t2); }

/* --------------------------------------------------------- o topo da escada */
/* o rodapé se pinta com a cor do elo ESCOLHIDO — por isso `--c` vem do JS a
   cada clique, e não de uma cor fixa da marca */
.card.rank-apex {
  border-color: color-mix(in srgb, var(--c, var(--brand)) 28%, var(--b1));
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--c, var(--brand)) 10%, transparent), transparent 60%),
    var(--surface);
  transition: border-color 0.2s var(--curva), background 0.2s var(--curva);
}
.rank-apex-linha { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.rank-apex-nome {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  font-size: 19px;
  margin: 0 0 3px;
  color: var(--c, var(--brand));
}
.rank-apex-nums { display: flex; gap: 26px; flex-wrap: wrap; }
.rank-dado b { display: block; font-size: 14px; color: var(--t1); margin-top: 4px; }

@media (max-width: 860px) {
  .rank-proximos { grid-template-columns: 1fr; }
  .rank-apex-nums { gap: 16px; }
}

/* ---------------------------------------------------------------- pódio */
.destaque-equipe {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--fill-1);
  border: 1px solid var(--b1);
  flex-wrap: wrap;
}
.podio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.podio-lugar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--fill-1);
  border: 1px solid var(--b1);
  text-align: center;
}
.podio-lugar b { font-size: 12.5px; color: var(--t1); }
.podio-lugar .num { font-size: 13.5px; }
.podio-n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--t4);
}
.lugar-1 { border-color: color-mix(in srgb, #f0b429 45%, var(--b1)); }
.lugar-1 .podio-n { color: #f0b429; }
.lugar-2 { border-color: color-mix(in srgb, #9aa0ab 45%, var(--b1)); }
.lugar-3 { border-color: color-mix(in srgb, #c97c3a 45%, var(--b1)); }

/* --------------------------------------------------------------- network */
/* A Network desce até o fim da janela em vez de parar numa altura fixa e
   deixar meia tela vazia. A corrente de alturas vem de cima: `.app` já tem
   100vh e estica `.conteudo`, então basta abrir o caminho em coluna até o
   mural — sem calc nem número mágico, que quebraria quando o cabeçalho
   mudasse de tamanho. */
.conteudo:has(.network) { display: flex; flex-direction: column; }
/* a altura precisa ser FECHADA, não só mínima: `min-height: 100vh` lá no `.app`
   deixa a coluna crescer com o conteúdo, e aí o mural empurrava a página em vez
   de rolar por dentro. Só no desktop — no celular a tela empilha e uma altura
   travada espremeria a conversa. */
@media (min-width: 861px) { .conteudo:has(.network) { height: 100dvh; } }
.conteudo:has(.network) #pagina {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* `.faixa` centraliza com `margin: 0 auto`. Numa coluna flex, margem auto no
     eixo transversal CANCELA o esticar e encolhe a caixa até o conteúdo — era
     isso que estreitava a página inteira. `width: 100%` devolve a largura, e o
     `max-width` de `.faixa` continua centralizando. */
  width: 100%;
  min-width: 0;
  min-height: 0;
}
/* a página vem embrulhada: o roteador planta o `div` que a tela devolve dentro
   do `#pagina`. Esse embrulho precisa virar coluna também, senão a corrente de
   alturas morre nele e a Network volta a parar na altura do conteúdo. */
.conteudo:has(.network) #pagina > * {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.network {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 16px;
  margin-bottom: 20px;
  flex: 1;
  /* `min-height: 0` é o que deixa o filho encolher e rolar por dentro; sem
     ele o padrão `auto` faz o mural empurrar a página inteira. */
  min-height: 0;
}
.canais { display: flex; flex-direction: column; gap: 8px; }
.canal {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: calc(var(--raio-card) - 12px);
  border: 1px solid var(--b1);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.canal:hover { background: var(--fill-1); }
.canal.escolhido { border-color: var(--brand-border); background: var(--brand-dim); }
.canal b { display: block; font-size: 13px; color: var(--t1); }
.canal small { display: block; font-size: 10.5px; color: var(--t4); margin-top: 2px; }
.canal-ico { font-size: 15px; flex-shrink: 0; }
.canal-conta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--t4);
}

.mural {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--b1);
  border-radius: var(--raio-card);
  background: var(--surface);
  overflow: hidden;
  min-height: 420px;
}
/* no desktop o mural ocupa a linha inteira do grid; os 420px acima viram só
   o piso de quando a janela é baixa demais */
@media (min-width: 861px) { .mural { height: 100%; } }
.mural-topo {
  padding: 14px 18px;
  border-bottom: 1px solid var(--b1);
  background: var(--fill-1);
}
.mural-topo b { font-size: 13.5px; color: var(--t1); display: block; }
.mural-corpo {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  /* a rolagem é aqui dentro, não na página: o campo de escrever fica sempre
     visível no pé, por mais longa que a conversa fique */
  min-height: 0;
}
.fala { display: flex; gap: 11px; align-items: flex-start; }
.fala-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fala-topo b { font-size: 12.5px; color: var(--t1); }
.fala-texto {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--t2);
  line-height: 1.55;
  word-break: break-word;
}
.fala.minha .fala-texto { color: var(--t1); }
.mural-pe {
  display: flex;
  gap: 9px;
  padding: 14px 18px;
  border-top: 1px solid var(--b1);
  background: var(--fill-1);
}
.mural-pe input { flex: 1; }

/* o atalho para o grupo do WhatsApp, flutuando no canto da Network. Fica
   abaixo dos avisos (10100) e acima da barra do celular (230). */
.zap-grupo {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 260;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #25d366;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s var(--curva), box-shadow 0.18s var(--curva);
  animation: zap-chama 2.8s ease-out infinite;
}
.zap-grupo:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5), 0 2px 6px rgba(0, 0, 0, 0.25); }
.zap-grupo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes zap-chama {
  0% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 0 0 14px rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) { .zap-grupo { animation: none; } }
@media (max-width: 768px) {
  /* no celular a barra de baixo ocupa o canto: o botão sobe acima dela */
  .zap-grupo {
    right: 16px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
  }
}

/* o pé de um canal de mão única: ocupa o mesmo lugar do campo de escrever,
   para o mural não mudar de altura ao trocar de canal */
.mural-so-leitura {
  align-items: center;
  margin: 0;
  font-size: 12.5px;
  color: var(--t3);
}
.mural-cadeado { display: inline-flex; color: var(--t4); }

/* ----------------------------------------------------- faixas e listas */
.faixa-parceiro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  margin-bottom: 20px;
  border-radius: calc(var(--raio-card) - 10px);
  border: 1px dashed var(--b2);
  background: var(--fill-1);
}
.faixa-parceiro p {
  margin: 0;
  font-size: 12px;
  color: var(--t3);
  line-height: 1.55;
}
.selo-parceiro {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--brand-dim);
  color: var(--brand);
}
.cartao-dica { border-style: dashed; }

.plano { position: relative; }
.plano-selo {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--brand);
  color: #fff;
}
.plano-lista {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.plano-lista li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--t2);
}
.plano-lista li > span:first-child { color: var(--profit); display: inline-flex; margin-top: 1px; }

/* --------------------------------------------------- a Loja e os produtos */
/* O card do produto é o card da casa com uma capa em cima: a imagem vem da
   loja, no mesmo corte 16/9 que ela usa, e o resto obedece aos tokens daqui —
   assim a vitrine entra no painel sem parecer um pedaço colado de outro site. */
/* a vitrine é de cinco colunas — com o catálogo de hoje, três fileiras de
   cinco. Em tela larga a faixa cresce até 1780px e um `auto-fill` abriria
   sete; aqui o número manda, e a largura do card é que cede. */
.vitrine-grade { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1250px) { .vitrine-grade { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .vitrine-grade { grid-template-columns: repeat(3, 1fr); } }

.produto { display: flex; flex-direction: column; padding: 14px; }
/* a capa é o banner do card: sangra até a borda e o próprio card arredonda o
   canto de cima (ele já é overflow:hidden) */
.produto-capa {
  position: relative;
  margin: -14px -14px 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fill-2);
  border-bottom: 1px solid var(--b1);
}
.produto-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produto-sem-capa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--t4);
}
.produto-off {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--brand);
  color: #fff;
}
/* o lápis da arte: fica no canto do banner, discreto, e só aparece de vez
   quando o ponteiro entra no card — no toque ele está sempre visível, porque
   lá não existe hover */
.produto-editar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.produto:hover .produto-editar,
.produto-editar:focus-visible { opacity: 1; }
.produto-editar:hover { background: var(--brand); border-color: var(--brand); }
@media (hover: none) { .produto-editar { opacity: 1; } }

/* o botão de esconder divide a quina com o de trocar a imagem */
.produto-ocultar {
  position: absolute;
  top: 8px;
  right: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s var(--curva), background 0.18s var(--curva);
}
.produto:hover .produto-ocultar,
.produto-ocultar:focus-visible { opacity: 1; }
.produto-ocultar:hover { background: var(--brand); border-color: var(--brand); }
@media (hover: none) { .produto-ocultar { opacity: 1; } }

/* um produto fora da vitrine: só Dono e Gerente chegam a vê-lo, e precisa
   ficar claro à distância que aquilo ali a equipe não enxerga. O selo fica
   sempre visível — ao contrário dos botões, que só aparecem no hover. */
.produto.oculto { opacity: 0.58; }
.produto.oculto:hover { opacity: 1; }
.produto.oculto .produto-capa img { filter: grayscale(1); }
.produto-oculto-selo {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(10, 10, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* a prévia do formulário: os quatro resultados finais lado a lado, já com a
   herança aplicada — o que herda fica apagado pra diferença saltar */
/* a linha de colar, no pé do formulário de arte */
.banner-colar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--b1);
}
.banner-colar .campo-dica { margin: 0; flex: 1; min-width: 180px; }

.banner-previa {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.banner-previa-item {
  position: relative;
  border: 1px solid var(--b1);
  border-radius: 10px;
  overflow: hidden;
  background: var(--fill-2);
}
.banner-previa-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  opacity: 0.55;
}
.banner-previa-item.proprio { border-color: var(--brand-border); }
.banner-previa-item.proprio img { opacity: 1; }
.banner-previa-item .produto-sem-capa { position: static; aspect-ratio: 16 / 9; }
.banner-previa-item p {
  margin: 0;
  padding: 5px 7px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--t3);
  text-align: center;
  border-top: 1px solid var(--b1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner-previa-item.proprio p { color: var(--brand); }

.produto-nome {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.35;
  /* nome de produto varia muito: duas linhas e corta, pra grade não dançar */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.produto .card-sub { margin-top: 3px; font-size: 11px; }
.produto-preco { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.produto-preco s { font-size: 11.5px; color: var(--t4); }
.produto-preco .num { font-size: 20px; color: var(--t1); }
.produto-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.produto-selos .chip { padding: 3px 8px; font-size: 10.5px; }
.produto-acoes { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.produto-acoes .bt { flex: 1; justify-content: center; }
/* em cinco colunas o card é estreito: o atalho de cadastrar fica só no ícone
   (o title e o aria-label continuam dizendo o que ele faz) */
.produto-acoes .bt.nu { flex: 0 0 auto; padding-inline: 11px; }
.produto-acoes .bt.nu span { display: none; }

/* A loja aberta na página toda: uma régua fina com o voltar e o nome, e
   embaixo a loja ocupando toda a altura que sobra da janela (a conta é feita
   no JS, que mede onde o quadro começa). */
.loja-tela { display: flex; flex-direction: column; gap: 14px; }
/* nesta tela o respiro do pé da página vira altura de loja: o quadro já
   termina onde a janela termina, e sobrar 60px embaixo só parece desperdício */
.conteudo:has(.loja-tela) { padding-bottom: 20px; }
.loja-regua {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: calc(var(--raio-card) - 8px);
  border: 1px solid var(--b1);
  background: var(--surface);
  box-shadow: var(--sombra-1);
}
.loja-voltar { flex-shrink: 0; }
.loja-regua-texto { min-width: 0; flex: 1; }
.loja-regua-nome {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  text-transform: var(--display-tt);
  font-size: 15px;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loja-regua-sub { margin: 3px 0 0; font-size: 12px; color: var(--t3); }
.loja-regua .acoes { flex-shrink: 0; }

.loja-moldura {
  position: relative;
  height: 70vh;   /* o JS corrige assim que a tela entra; isto é só o ponto de partida */
  border-radius: calc(var(--raio-card) - 8px);
  overflow: hidden;
  border: 1px solid var(--b1);
  background: var(--fill-1);
  box-shadow: var(--sombra-1);
}
.loja-quadro { width: 100%; height: 100%; border: 0; display: block; }
.loja-quadro-espera { position: absolute; inset: 0; pointer-events: none; }

/* No celular a régua vira duas linhas e o quadro encosta nas bordas: cada
   pixel de largura conta pra loja não abrir com barra de rolagem lateral. */
@media (max-width: 760px) {
  /* no celular dois produtos lado a lado ainda leem bem e poupam rolagem */
  .vitrine-grade { grid-template-columns: repeat(2, 1fr); }
  /* o card estreito não comporta o preço no corpo grande: ele encolhe e, se
     ainda assim não couber com o "de" do lado, quebra a linha */
  .produto { padding: 12px; }
  .produto-capa { margin: -12px -12px 0; }
  .produto-preco { flex-wrap: wrap; gap: 3px 8px; }
  .produto-preco .num { font-size: 17px; }
  /* dois botões em 140px de card: o de comprar aperta o respiro lateral em
     vez de vazar pela borda */
  .produto-acoes { gap: 6px; }
  .produto-acoes .bt { min-width: 0; padding-inline: 10px; }
  .produto-acoes .bt.nu { padding-inline: 9px; }
  /* a barra de baixo é fixa e cobre o conteúdo: o respiro aqui é a altura dela */
  .conteudo:has(.loja-tela) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .loja-regua { flex-wrap: wrap; gap: 10px; }
  .loja-regua-texto { flex: 1 0 60%; }
  .loja-regua .acoes { width: 100%; }
  .loja-regua .acoes .bt { flex: 1; justify-content: center; }
  /* não cabem dois rótulos longos em 375px: "abrir em outra aba" fica só no
     ícone (o aria-label e o title continuam dizendo o que é) */
  .loja-aba { flex: 0 0 auto !important; padding-inline: 13px; }
  .loja-aba span { display: none; }
  .loja-moldura {
    margin-inline: -16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

.passos-lista {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.6;
}
.passos-lista code {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--fill-2);
  color: var(--t1);
}

/* -------------------------------------------------------------- tutorial */
.checklist { display: flex; flex-direction: column; }
.passo-item { border-bottom: 1px solid var(--b1); }
.passo-item:last-child { border-bottom: 0; }
.passo-cabeca { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.passo-titulo {
  all: unset;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.passo-titulo b { font-size: 13.5px; color: var(--t1); font-weight: 650; }
.passo-item.feito .passo-titulo b { color: var(--t4); text-decoration: line-through; }
.passo-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--t4);
}
.passo-texto {
  margin: 0 0 14px 44px;
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.65;
}

.formula {
  padding: 16px;
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--fill-1);
  border: 1px solid var(--b1);
}
.formula b {
  display: block;
  font-size: 13.5px;
  color: var(--brand);
  word-break: break-word;
}

/* ------------------------------------------------------------- no celular */
@media (max-width: 860px) {
  .network { grid-template-columns: 1fr; }
  /* no celular a tela empilha e a altura volta a ser do conteúdo; sem um teto
     aqui uma conversa longa jogaria o campo de escrever para fora da tela */
  .mural-corpo { max-height: 60vh; }
  .canais { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .canais::-webkit-scrollbar { display: none; }
  .canal { flex: 1 0 auto; min-width: 180px; }
  .conta-total { margin-left: 0; width: 100%; }
  .remessa-valores { flex-direction: row; gap: 12px; }
}

/* --------------------------------------------------------------- gráficos */
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .eixo { stroke: var(--b1); stroke-width: 1; }
.grafico .rotulo-eixo { fill: var(--t4); font-size: 10px; font-family: var(--mono); }
.grafico .barra { transition: opacity 0.15s ease; cursor: pointer; }
.grafico .barra:hover { opacity: 0.78; }
.grafico .linha { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.semana-eixo {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--t4);
  text-align: center;
}

.legenda { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); font-weight: 600; }
.legenda i { width: 11px; height: 11px; border-radius: 3px; display: block; }

/* o anel de meta */
.anel { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.anel svg { transform: rotate(-90deg); }
.anel circle { fill: none; stroke-linecap: round; }
.anel .trilho { stroke: var(--fill-2); }
/* O arco pintava-se com `url(#gradAnel)`, um gradiente que não existe em
   lugar nenhum do projeto. Referência de pintura quebrada em SVG não tem
   recuo: vira "sem pintura", e o arco ficava invisível em todo o app — e o
   parâmetro `cor` de anel() não valia nada, porque o CSS ganha do atributo.
   Sem a linha do stroke, cada chamada pinta o seu arco como pediu. */
.anel .arco { transition: stroke-dashoffset 1s var(--curva); }
.anel-centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.anel-centro b { font-family: var(--mono); font-size: 22px; font-weight: 900; letter-spacing: -0.04em; display: block; }
.anel-centro small { font-size: 10px; color: var(--t4); }

/* --------------------------------------------------------------- tabelas */
.tabela-caixa {
  overflow-x: auto;
  margin: 0 -22px -22px;
  padding: 0 0 2px;
}
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t4);
  border-bottom: 1px solid var(--b1);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.tabela thead th:first-child { padding-left: 22px; }
.tabela thead th:last-child { padding-right: 22px; }
.tabela thead th:hover { color: var(--t2); }
.tabela thead th[data-ordem]::after {
  content: " ↑";
  color: var(--brand);
}
.tabela thead th[data-ordem="desc"]::after { content: " ↓"; }
.tabela thead th.sem-ordem { cursor: default; }
.tabela thead th.sem-ordem:hover { color: var(--t4); }

.tabela tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--b1);
  color: var(--t2);
  vertical-align: middle;
}
.tabela tbody td:first-child { padding-left: 22px; }
.tabela tbody td:last-child { padding-right: 22px; }
.tabela tbody tr { transition: background 0.13s ease; }
.tabela tbody tr:hover { background: var(--fill-1); }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela td.dir { text-align: right; }
.tabela td.forte { color: var(--t1); font-weight: 600; }

/* o rodapé soma a coluna: fica preso embaixo quando a tabela rola */
.tabela tfoot td {
  position: sticky;
  bottom: 0;
  padding: 13px 14px;
  background: var(--raised);
  border-top: 1px solid var(--b2);
  color: var(--t1);
  font-weight: 700;
}
.tabela tfoot td:first-child { padding-left: 22px; }
.tabela tfoot td:last-child { padding-right: 22px; }

.tabela .celula-edit {
  cursor: text;
  border-radius: 7px;
  padding: 3px 6px;
  margin: -3px -6px;
  transition: background 0.13s, box-shadow 0.13s;
}
.tabela .celula-edit:hover { background: var(--fill-2); }
.tabela .celula-edit:focus {
  outline: none;
  background: var(--input);
  box-shadow: 0 0 0 2px var(--brand-border);
}

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--fill-2);
  color: var(--t2);
  border: 1px solid var(--b1);
  white-space: nowrap;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.pilula {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: calc(var(--raio-bt) + 2px);
  padding: 5px;
  width: fit-content;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pilula button {
  padding: 7px 15px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--display-ls-bt, 0.01em);
  text-transform: var(--display-tt);
  background: transparent;
  color: var(--t3);
  transition: background 0.18s, color 0.18s;
}
.pilula button:hover { color: var(--t1); }
.pilula button[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 12px rgba(224, 11, 27, 0.3);
}

/* ----------------------------------------------------------------- botões */
.bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--raio-bt);
  border: 1px solid var(--b1);
  background: var(--surface);
  color: var(--t1);
  font-size: 13px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: var(--display-ls-bt, 0.01em);
  text-transform: var(--display-tt);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  /* o Chrome calcula mal a largura intrínseca de um <button display:flex>:
     sem isto o rótulo é espremido a poucos pixels dentro de um flex pai */
  width: max-content;
  max-width: 100%;
  transition: background 0.16s, border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.bt svg { width: 16px; height: 16px; flex-shrink: 0; }
.bt:hover { background: var(--fill-2); border-color: var(--b2); }
.bt:active { transform: scale(0.97); }

.bt.marca {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(224, 11, 27, 0.3);
}
.bt.marca:hover { box-shadow: 0 10px 28px rgba(224, 11, 27, 0.42); }

.bt.nu { background: transparent; border-color: transparent; color: var(--t3); }
.bt.nu:hover { background: var(--fill-2); color: var(--t1); }
.bt.perigo { color: var(--loss); border-color: var(--loss-border); background: var(--loss-dim); }
.bt.pequeno { padding: 7px 12px; font-size: 12px; border-radius: 10px; }
.bt.icone { padding: 8px; border-radius: 10px; }

.acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- campos */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.campo > label em { color: var(--brand); font-style: normal; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--raio-bt);
  border: 1px solid var(--b1);
  background: var(--input);
  color: var(--t1);
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--t3); opacity: 1; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
.campo input.mono, .campo .mono { font-family: var(--mono); }
.campo-dica { font-size: 11px; color: var(--t4); }

.busca { position: relative; flex: 1; min-width: 180px; }
.busca svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--t3);
  pointer-events: none;
}
.busca input { padding-left: 38px; }

.grade-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grade-campos .largo { grid-column: 1 / -1; }

/* PIX: o quadro de importar estica até a altura da carteira ao lado. Quem
   cresce para ocupar a sobra é a caixa das chaves — assim não fica vão
   vazio no meio nem no fundo do quadro */
.importar-pix { display: flex; flex-direction: column; }
.importar-pix-chaves { flex: 1; display: flex; flex-direction: column; }
.importar-pix-chaves textarea { flex: 1; min-height: 110px; }
.importar-pix-pe { padding-top: 14px; }
.importar-pix-bts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- modal */
.veu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.veu.on { display: flex; animation: surgir 0.18s ease; }

.modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: calc(var(--raio-card) + 2px);
  box-shadow: var(--sombra-2);
  padding: 26px;
  animation: subir 0.26s var(--curva);
}
.modal-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.modal-cabeca h2 {
  font-size: 19px;
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  text-transform: var(--display-tt);
  margin: 0;
}
.modal-cabeca p { font-size: 12.5px; color: var(--t3); margin: 5px 0 0; }
.modal-pe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ----------------------------------------------------------------- avisos */
.avisos {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 10100;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
}

.aviso {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border-radius: calc(var(--raio-bt) + 4px);
  background: var(--surface);
  border: 1px solid var(--b1);
  box-shadow: var(--sombra-2);
  animation: entrar-lado 0.3s var(--curva);
}
.aviso.saindo { animation: sair-lado 0.26s var(--curva) forwards; }
.aviso i {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--fill-2);
  color: var(--t2);
}
.aviso.ok i { background: var(--profit-dim); color: var(--profit); }
.aviso.erro i { background: var(--loss-dim); color: var(--loss); }
.aviso.ok { border-color: var(--profit-border); }
.aviso.erro { border-color: var(--loss-border); }
.aviso p { margin: 0; font-size: 13px; font-weight: 600; color: var(--t1); }
.aviso small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--t3); font-weight: 400; }

/* ------------------------------------------------------------------ vazio */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 4px;
}
.vazio-ico {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--fill-2);
  color: var(--t3);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.vazio-ico svg { width: 26px; height: 26px; }
.vazio b {
  font-size: 14.5px;
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  text-transform: var(--display-tt);
}
.vazio p { font-size: 12.5px; color: var(--t3); margin: 2px 0 0; max-width: 42ch; }

/* ---------------------------------------------------- brilho e decoração */
.brilho {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 32% 12%, rgba(255, 255, 255, 0.14), transparent 58%);
}

.destaque {
  background: linear-gradient(135deg, var(--brand), #b32a13);
  border-color: transparent;
  color: #fff;
}
.destaque .kpi-nome, .destaque .kpi-pe, .destaque .card-sub { color: rgba(255, 255, 255, 0.72); }
.destaque .kpi-valor, .destaque .card-tit { color: #fff; }
.destaque .trilha { background: rgba(255, 255, 255, 0.24); }
.destaque .trilha > i { background: #fff; }
.destaque .kpi-ico { background: rgba(255, 255, 255, 0.18); color: #fff; }
/* sobre o vermelho da marca, a pílula de variação precisa de cor própria:
   o verde/vermelho dela desaparece contra o fundo */
.destaque .delta {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
.destaque .chip { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); color: #fff; }

.malha {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.5;
  animation: mesh-pulse 14s ease-in-out infinite;
}

/* ------------------------------------------------------------- animações */
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--profit) 50%, transparent); }
  60% { box-shadow: 0 0 0 7px transparent; }
}

@keyframes progShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes surgir {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes subir {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes entrar-lado {
  from { opacity: 0; transform: translateX(26px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes sair-lado {
  to { opacity: 0; transform: translateX(26px) scale(0.96); }
}

@keyframes mesh-pulse {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  33% { transform: translate(40px, -30px) scale(1.1); opacity: 0.7; }
  66% { transform: translate(-30px, 20px) scale(0.95); opacity: 0.4; }
}

@keyframes respirar {
  0%, 100% { transform: scale(1); box-shadow: var(--sombra-1); }
  50% { transform: scale(1.008); box-shadow: 0 0 30px var(--brand-dim), var(--sombra-1); }
}
.respira { animation: respirar 4.2s ease-in-out infinite; }

/* entrada em cascata: o card nasce 10px abaixo e sobe */
.nasce { opacity: 0; animation: nascer 0.5s var(--curva) forwards; }
@keyframes nascer {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.esqueleto {
  background: linear-gradient(90deg, var(--fill-2) 25%, var(--fill-3) 37%, var(--fill-2) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
}

/* ---------------------------------------------------------- responsivo */
@media (max-width: 1400px) {
  /* cinco cards de KPI numa fileira ficam estreitos demais antes disso */
  .bento-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  .bento-4, .bento-5 { grid-template-columns: 1fr 1fr; }
  .bento-21, .bento-12, .bento-3 { grid-template-columns: 1fr; }
  .heat { grid-template-columns: repeat(10, 1fr); }
}

@media (max-width: 768px) {
  .rail {
    width: var(--rail-aberto);
    transform: translateX(-100%);
    transition: transform 0.26s var(--curva);
  }
  .rail.aberta { transform: none; box-shadow: var(--sombra-2); }
  .rail .sb-label { opacity: 1; display: inline !important; }
  .rail-gatilho { display: flex; }
  .barra-app { display: grid; }
  .conteudo {
    margin-left: 0;
    padding: 70px 16px calc(96px + env(safe-area-inset-bottom));
  }
  .bento-4, .bento-5, .bento-2 { grid-template-columns: 1fr; }
  .cabeca h1 { font-size: 22px; }
  .card { border-radius: 20px; padding: 18px; }
  .tabela-caixa { margin: 0 -18px -18px; }
  .tabela thead th:first-child, .tabela tbody td:first-child { padding-left: 18px; }
  .tabela thead th:last-child, .tabela tbody td:last-child { padding-right: 18px; }
  .grade-campos { grid-template-columns: 1fr; }
}

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

/* --------------------------------------------------------------- impressão */
@media print {
  .rail, .barra-app, .rail-gatilho, .avisos, .acoes, .pilula { display: none !important; }
  .conteudo { margin: 0; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
}


/* ============================================================================
   GENTE — a porta de entrada, o perfil no rail e o seletor de escopo.
   ========================================================================== */

/* ------------------------------------------------------------- a porta */
/* o rail e a barra usam display:flex/grid, que ganha do [hidden] do navegador */
.rail[hidden], .barra-app[hidden], .rail-gatilho[hidden] { display: none !important; }

body.deslogado .conteudo { margin-left: 0; padding: 0; }
body.deslogado .faixa { max-width: none; }

.porta {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
}

.porta-marca {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 56px clamp(28px, 6vw, 84px);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

/* a emenda entre as duas colunas. Era uma borda de --b1, que sumia sob a
   folha holográfica; agora é um fio próprio, apagado nas pontas e aceso na
   cor da marca no meio — por isso vem antes do conteúdo, mas acima do canvas. */
.porta-marca::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--b2) 14%,
    var(--brand) 50%,
    var(--b2) 86%,
    transparent
  );
}
.porta-marca::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-1), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
}
.porta-marca > * { position: relative; z-index: 1; }

/* a folha holográfica (holo.js) forra a coluna inteira, atrás do conteúdo.
   O canvas também é filho direto, então precisa sair da regra de cima. */
.porta-marca > .porta-holo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* o canvas nasce apagado e acende quando o primeiro quadro já foi */
  animation: holo-entra 900ms var(--curva) both;
}

@keyframes holo-entra { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .porta-marca > .porta-holo { animation: none; }
}

.porta-marca-topo { display: flex; align-items: center; gap: 12px; }
.porta-marca-topo .marca-txt { opacity: 1; }

.porta-marca h1 {
  font-family: var(--display);
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  text-transform: var(--display-tt);
  line-height: 1.1;
  margin: 0;
  max-width: 16ch;
}

/* o título da porta é branco com contorno preto: o degradê vermelho sumia
   contra o holograma da coluna. `paint-order` desenha o traço ANTES do
   preenchimento — sem isso o contorno fica centrado na borda da letra e come
   metade do branco, deixando a fonte visivelmente mais magra. */
.porta-marca h1.txt-grad {
  background-image: none;
  animation: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
}
.porta-marca > p { font-size: 14px; color: var(--t2); line-height: 1.65; margin: 0; max-width: 46ch; }

/* o que a porta promete: ícone à esquerda, título e frase empilhados. Em
   linha os títulos teriam larguras muito diferentes e as frases sairiam
   escalonadas — empilhado, a coluna fica reta. */
.porta-vantagens { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.porta-vantagens li { display: flex; align-items: flex-start; gap: 11px; }
.porta-vantagens .vt-ico {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--b1);
  background: var(--fill-1);
}
.porta-vantagens .vt-txt { display: block; }
.porta-vantagens b { display: block; color: var(--t1); font-size: 13px; }
.porta-vantagens .vt-txt > span { display: block; font-size: 12.5px; color: var(--t3); line-height: 1.5; margin-top: 2px; max-width: 42ch; }

.porta-modo { margin: 8px 0 0; }

.porta-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 56px clamp(24px, 5vw, 64px);
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.porta-form h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  text-transform: var(--display-tt);
  margin: 0;
}
.porta-sub { font-size: 13px; color: var(--t3); margin: 7px 0 22px; line-height: 1.55; }

.porta-campos { display: flex; flex-direction: column; gap: 15px; }

.porta-convite {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--raio-bt);
  border: 1px solid var(--b1);
  background: var(--fill-1);
  margin-bottom: 4px;
}
.porta-convite p { margin: 0; font-size: 12.5px; color: var(--t2); line-height: 1.55; }
.porta-convite.ok { border-color: var(--profit-border); background: var(--profit-dim); }
.porta-convite.ok > span { color: var(--profit); }
.porta-convite.ruim { border-color: var(--loss-border); background: var(--loss-dim); }
.porta-convite.ruim > span { color: var(--loss); }

.porta-troca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--t3);
}

@media (max-width: 900px) {
  .porta { grid-template-columns: 1fr; }
  .porta-marca { padding: 40px 22px 32px; }
  /* empilhado, a emenda deita: o fio atravessa o pé da coluna */
  .porta-marca::before {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      var(--b2) 14%,
      var(--brand) 50%,
      var(--b2) 86%,
      transparent
    );
  }
  .porta-marca h1 { max-width: none; }
  .porta-vantagens { display: none; }
  .porta-form { padding: 32px 22px 56px; }
}

/* ------------------------------------------------------ perfil no rail */
#rail-perfil { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--b1); }

.perfil {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: var(--raio-bt);
  min-width: 0;
  /* é um botão: abre o quadro "meu perfil" */
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s;
}
.perfil:hover { background: var(--surface-2, rgba(255,255,255,.05)); }
.perfil:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rail:not(:hover):not(.aberta) .perfil { justify-content: center; padding: 8px 0; }

.perfil-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}
.perfil-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.perfil-txt b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perfil-txt small { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }

/* ------------------------------------------------ o quadro "meu perfil" */
.modal-perfil { padding: 0; overflow-x: hidden; }
.modal-perfil > .modal-cabeca { display: none; }
.modal-perfil > .modal-corpo { padding: 0; }

.mp { position: relative; padding: 0 22px 22px; }
.mp-capa {
  height: 84px;
  margin: 0 -22px;
  background: linear-gradient(120deg, #ff3340, #e00b1b 55%, #8a0510);
  position: relative;
}
.mp-fechar {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer; color: #fff;
  background: rgba(0, 0, 0, .28);
  transition: background .18s;
}
.mp-fechar:hover { background: rgba(0, 0, 0, .45); }

.mp-topo { display: flex; align-items: flex-end; gap: 12px; margin-top: -46px; }
.mp-ava-caixa { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.mp-ava {
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: 34px; color: #fff;
  border: 4px solid var(--surface);
  box-shadow: var(--sombra-1);
}
.mp-camera {
  position: absolute; right: -2px; bottom: 2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 3px solid var(--surface); cursor: pointer; color: #fff;
  background: var(--brand);
  transition: transform .18s;
}
.mp-camera:hover { transform: scale(1.08); }
.mp-tirar {
  border: 0; background: none; padding: 0 0 6px; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--t3);
  text-decoration: underline; text-underline-offset: 2px;
}
.mp-tirar:hover { color: var(--t1); }
.mp-tirar[hidden] { display: none; }

.mp-nome {
  margin: 14px 0 6px;
  font-family: var(--display); font-weight: var(--display-peso, 800);
  font-size: 19px; color: var(--t1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-papel {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.mp-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.mp-form .campo > label { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.mp-form textarea { resize: vertical; min-height: 72px; }
.mp-senha { display: flex; flex-direction: column; gap: 12px; }
.mp-senha-abrir {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--t2);
}
.mp-senha-abrir:hover, .mp-senha-abrir[aria-expanded="true"] { color: var(--brand); }
.mp-senha-caixa {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border: 1px solid var(--b1); border-radius: var(--raio-bt);
}
.mp-senha-caixa[hidden] { display: none; }
.mp-senha-bt { align-self: flex-end; }
.mp-salvar { width: 100%; justify-content: center; margin-top: 4px; padding-block: 13px; }

/* --------------------------------------------------- seletor de escopo */
#faixa-escopo[hidden] { display: none; }

.escopo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 9px 14px;
  border: 1px dashed var(--b2);
  border-radius: var(--raio-bt);
  background: var(--fill-1);
}
.escopo .rotulo { margin: 0; }
.escopo select { cursor: pointer; font-weight: 700; }

/* ---------------------------------------------------------- as opções
   A lista que abre é desenhada pelo navegador, e ele não herda do nosso CSS o
   que vai atrás do texto: sem declarar o par fundo/cor aqui, a opção aparecia
   lavada, composta sobre a cor do sistema. `--surface` e `--t1` são sólidos
   nos três temas, então a lista nasce legível em todos.

   Vale para TODO select do app, não só o do escopo: o problema é do widget,
   não desta tela. */
select option {
  background-color: var(--surface);
  color: var(--t1);
  font-weight: 600;
}
select option:checked { background-color: var(--raised); }

@media (max-width: 768px) {
  .escopo { margin-bottom: 14px; }
}


/* ============================================================================
   GRADE DE 12 COLUNAS
   As telas que precisam caber de uma vez (Painel e Relatórios) usam esta
   grade: cada card diz quantas colunas ocupa e o arranjo sai disso. A classe
   `.tela-densa` no topo aperta espaçamentos e alturas — as outras páginas
   continuam respirando.
   ========================================================================== */

/* em telas largas a faixa deixa de ser uma coluna estreita no meio */
@media (min-width: 1400px) {
  .faixa { max-width: min(1780px, 95vw); }
}

.grade-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  align-content: start;
}

/* o painel respira menos nas bordas: é a tela que precisa caber de uma vez */
.conteudo:has(.tela-densa) { padding-top: 14px; padding-bottom: 16px; }
/* no painel a barra "Vendo:" é uma faixa fina, não um bloco */
.conteudo:has(.tela-densa) .escopo { padding: 4px 10px; margin-bottom: 8px; gap: 7px; }
.conteudo:has(.tela-densa) .escopo .bt { padding: 5px 9px; font-size: 11.5px; }

/* dentro da grade quem manda é o `gap`, não a margem dos blocos soltos */
.grade-12 > * { margin: 0 !important; min-width: 0; }

.g3  { grid-column: span 3; }
.g4  { grid-column: span 4; }
.g5  { grid-column: span 5; }
.g6  { grid-column: span 6; }
.g7  { grid-column: span 7; }
.g8  { grid-column: span 8; }
.g9  { grid-column: span 9; }
.g12 { grid-column: span 12; }

/* o card estica até o fim da própria linha, para a grade não ficar dentada */
.grade-12 > .card { display: flex; flex-direction: column; }
.grade-12 > .card > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------- modo compacto */
.tela-densa .card { padding: 14px 16px; }
.tela-densa .card-cabeca { margin-bottom: 12px; }
.tela-densa .card-sub { font-size: 11px; }
.tela-densa .kpi { min-height: 0; }
.tela-densa .kpi-topo { margin-bottom: 8px; }
.tela-densa .kpi-ico { width: 30px; height: 30px; border-radius: 9px; }
.tela-densa .kpi-valor { font-size: 21px; }
.tela-densa .kpi-pe { margin-top: 4px; font-size: 10.5px; }
.tela-densa .cabeca { margin-bottom: 14px; }
.tela-densa .cabeca h1 { font-size: 23px; }
.tela-densa .cabeca p { font-size: 12px; margin-top: 4px; }
.tela-densa .fita { margin: 0 0 12px; padding: 7px 0; }
.tela-densa .tabela tbody td { padding: 8px 12px; }
/* uma tabela de 12 meses esticaria a página inteira: ela rola por dentro */
.tela-densa .tabela-caixa { max-height: 196px; overflow-y: auto; }
.tela-densa .tabela thead th { position: sticky; top: 0; z-index: 2; }
.tela-densa .tabela thead th { padding: 7px 12px; }
.tela-densa .vazio { padding: 10px 12px; }
.tela-densa .vazio-ico { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 7px; }
.tela-densa .vazio-ico svg { width: 19px; height: 19px; }
.tela-densa .vazio b { font-size: 13px; }
.tela-densa .vazio p { font-size: 11.5px; }
.tela-densa .card-tit { font-size: 13.5px; }
.tela-densa .rotulo { font-size: 9px; }
.tela-densa .conta-linha { gap: 12px; }
.tela-densa .conta-parte { gap: 12px; }
.tela-densa .grafico { max-height: 140px; }
.tela-densa .anel { width: 108px; height: 108px; }
.tela-densa .barra-item { gap: 5px; }
.tela-densa .heat > span { border-radius: 5px; }
.tela-densa .legenda { margin-top: 6px; gap: 12px; }
.tela-densa .legenda span { font-size: 11px; }
.tela-densa .heat-legenda { margin-top: 9px; }

/* ----------------------------------------------------------- respostas */
/* abaixo de 1400px já não cabem 4 cards por fileira sem apertar demais */
@media (max-width: 1400px) {
  .g3 { grid-column: span 4; }
  .g4, .g5 { grid-column: span 6; }
  .g7, .g8, .g9 { grid-column: span 12; }
}

/* ---------------------------------------------------------------------------
   Telas baixas: o painel aperta o cinto para continuar cabendo de uma vez.
   São as únicas regras por ALTURA do app — e só valem no painel.
   ------------------------------------------------------------------------ */
@media (max-height: 1120px) {
  .grade-12 { gap: 8px; }
  .tela-densa .card { padding: 12px 14px; }
  .tela-densa .card-cabeca { margin-bottom: 9px; }
}

@media (max-height: 1045px) {
  /* o letreiro e o subtítulo são os primeiros a sair: o que eles dizem já
     está nos cards logo abaixo */
  .tela-densa .fita { display: none; }
  .tela-densa .cabeca p { display: none; }
  .tela-densa .cabeca { margin-bottom: 10px; }
  .tela-densa .card { padding: 11px 13px; }
  .tela-densa .tabela-caixa { max-height: 168px; }
}

@media (max-width: 1100px) {
  .g3, .g4, .g5, .g6 { grid-column: span 6; }
}

@media (max-width: 768px) {
  .grade-12 { gap: 12px; }
  .grade-12 > * { grid-column: span 12 !important; }
}


/* ============================================================================
   O HERÓI E AS PARCELAS
   O resultado do mês com a conta embutida, e três mostradores quietos ao lado.
   ========================================================================== */

.resultado { justify-content: space-between; }
.resultado-rotulo { margin: 0 0 10px; color: rgba(255, 255, 255, 0.7); }

.resultado-linha {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.resultado-valor {
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}

/* a conta em uma linha: 606 − 600 + 120 */
.resultado-conta {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.conta-termo { display: flex; align-items: flex-end; gap: 14px; }
.conta-termo > span { display: flex; flex-direction: column; gap: 2px; }
.conta-termo small {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.conta-termo .num { font-size: 14px; color: #fff; }
.conta-op {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
}

.resultado-pe {
  margin: 12px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------------------------------------- parcelas */
.parcela { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.parcela .rotulo { margin: 0; }
.parcela-valor { font-size: 19px; letter-spacing: -0.03em; color: var(--t1); }
.parcela .delta { align-self: flex-start; }
.parcela-pe { margin: 0; font-size: 10.5px; color: var(--t4); }

/* ------------------------------------------------------- leitura do mês */
.leitura { display: flex; gap: 10px; align-items: baseline; }
.leitura-marca {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  transform: translateY(-2px);
}

/* ============================================================================
   O PAINEL LIMPO

   A regra, emprestada de painéis que envelhecem bem (Linear, Stripe, Vercel):
   base quase monocromática, UM acento, e tudo que não é essencial some —
   não encolhe, some. Verde e vermelho ficam reservados a uma única tarefa:
   dizer se o número é lucro ou prejuízo. Nenhum outro elemento usa cor.
   ========================================================================== */

.painel-limpo .grade-12 { gap: 14px; }

/* o cartão perde a moldura chamativa: borda fina, sem sombra, sem brilho */
.painel-limpo .card {
  box-shadow: none;
  background: var(--surface);
  border-color: var(--b1);
}
.painel-limpo .card::before,
.painel-limpo .card::after { display: none; }   /* varredura e fio: fora */
.painel-limpo .card:hover {
  transform: none;
  border-color: var(--b2);
  box-shadow: none;
}

/* o rótulo de cada bloco: pequeno, maiúsculo, recuado */
.painel-limpo .rotulo {
  margin: 0 0 10px;
  color: var(--t4);
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------- herói */
.heroi { justify-content: center; min-height: 132px; }

.heroi-linha { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.heroi-valor {
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--t1);
}

/* a tendência é texto, não pílula: um sinal e um número, sem caixa */
.tendencia {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tendencia.sobe  { color: var(--profit); }
.tendencia.desce { color: var(--loss); }

.heroi-pe {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--t3);
  line-height: 1.5;
}

/* ------------------------------------------------------------ medidores */
.medidor { justify-content: center; min-height: 132px; }

.medidor-valor {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t1);
  display: block;
}

.medidor-pe {
  margin: 9px 0 0;
  font-size: 11px;
  color: var(--t4);
  line-height: 1.45;
}

/* ------------------------------------------------- metas em andamento */
.andamento { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.andamento-item {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px;
  margin: 0 -11px;
  border-radius: var(--raio-bt);
  transition: background 0.14s ease;
}
.andamento-item:hover { background: var(--fill-1); }

.andamento-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.andamento-topo b {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.andamento-topo .num { font-size: 12.5px; flex-shrink: 0; }

.andamento-pe {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--t4);
  font-family: var(--mono);
}
/* "parada" é um aviso, e aviso tem cor — mas em texto, não em caixa */
.andamento-pe em { font-style: normal; color: var(--loss); font-weight: 700; }

/* ------------------------------------------------------- leitura do mês */
.leituras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.leituras li {
  display: flex;
  gap: 11px;
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.55;
}
/* um traço de 2px à esquerda no lugar do círculo com ícone: mesma informação,
   um terço do peso visual */
.leituras li::before {
  content: '';
  flex-shrink: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--b3);
  align-self: stretch;
}
.leituras .leitura-bom::before  { background: var(--profit); }
.leituras .leitura-ruim::before { background: var(--loss); }

/* --------------------------------------------------------- os gráficos */
/* eixos e grade recuam para o fundo: quem fala é a barra */
.painel-limpo .grafico .eixo { stroke: var(--b1); }
.painel-limpo .grafico .rotulo-eixo { fill: var(--t4); font-size: 9.5px; }

/* a barra fina, com a ponta arredondada ancorada na linha do zero */
.painel-limpo .grafico .barra { animation: none; }

/* a trilha some quando não há o que mostrar */
.painel-limpo .trilha { background: var(--fill-2); }
.painel-limpo .trilha > i::after { display: none; }   /* sem o brilho correndo */

@media (max-width: 1400px) {
  .heroi, .medidor { min-height: 0; }
}

/* a situação das metas, enxuta: o total como contexto e cinco barras sem
   legenda de rodapé — o que cada status quer dizer está no title */
.painel-limpo .situacao-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}
.painel-limpo .situacao-topo .num { font-size: 27px; letter-spacing: -0.02em; }
.painel-limpo .situacao-topo span + span {
  font-size: 12px;
  color: var(--t3);
  font-weight: 600;
}
.painel-limpo .situacao-barras {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* ---------------------------------------------------------------------------
   O painel limpo tem apenas duas composições de fileira — 6+2+2+2 e 8+4 — e
   as duas continuam legíveis até ~1180px. A quebra geral de `max-width:1400px`
   foi escrita para as grades de quatro cards das outras telas; aqui ela
   transformava a fileira do gráfico em duas e estourava a altura da janela.
   ------------------------------------------------------------------------ */
@media (min-width: 1180px) {
  .painel-limpo .g2 { grid-column: span 2; }
  .painel-limpo .g4 { grid-column: span 4; }
  .painel-limpo .g6 { grid-column: span 6; }
  .painel-limpo .g8 { grid-column: span 8; }
}

/* notebooks de 768px de altura: aperta o cinto sem tirar nada da tela */
@media (max-height: 940px) {
  .painel-limpo .grafico { max-height: 118px; }
  .painel-limpo .heroi-valor { font-size: clamp(28px, 2.8vw, 38px); }
  .painel-limpo .heroi-pe { margin-top: 6px; }
  .painel-limpo .situacao-topo { margin-bottom: 10px; }
  .painel-limpo .situacao-topo .num { font-size: 23px; }
  .painel-limpo .situacao-barras { gap: 8px; }
  .painel-limpo .andamento { gap: 7px; }
}

@media (max-height: 820px) {
  .painel-limpo .grade-12 { gap: 8px; }
  .painel-limpo .card { padding: 9px 13px; }
  .painel-limpo .card-cabeca { margin-bottom: 8px; }
  /* o número acima do gráfico é o que mais cresceu: ele encolhe antes do
     desenho, que é o que a fileira existe para mostrar */
  .painel-limpo .grafico-topo { margin-bottom: 6px; }
  .painel-limpo .grafico-valor { font-size: 21px; }
  .painel-limpo .grafico { max-height: 104px; }
  .painel-limpo .leituras li { padding: 6px 0; }
  .painel-limpo .situacao-barras { gap: 6px; }
  .painel-limpo .linha-medida { gap: 5px; }
  .painel-limpo .situacao-topo { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------------------
   Área trancada — o que um Usuário comum vê ao chegar numa área do Premium.
   Deliberadamente sóbria: não é um erro nem uma vitrine de venda, é um aviso
   de que falta permissão e de quem a concede.
   ------------------------------------------------------------------------ */
.trancada {
  max-width: 520px;
  margin: 8vh auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trancada-ico {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: var(--premium, #d9a441);
  background: color-mix(in srgb, var(--premium, #d9a441) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--premium, #d9a441) 28%, transparent);
}
.trancada h2 {
  font-size: 19px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.trancada p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t2);
  max-width: 42ch;
}
.trancada .trancada-pe {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--t3);
}
.trancada .bt { margin-top: 20px; }

/* ---------------------------------------------------------------------------
   Controle por Ciclos — a caixa de registro rápido.
   ------------------------------------------------------------------------ */
.caixa-ciclo {
  border: 1px solid var(--b1);
  border-radius: var(--raio-card);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 14px;
}
.corpo-ciclo { padding: 18px; }

.rotulo-ciclo {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 7px;
}

/* natureza à esquerda, plataforma à direita */
.topo-ciclo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
.linha-tipo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.linha-tipo .rotulo-ciclo { margin: 0; line-height: 1.6; }
.linha-tipo .campo-dica { max-width: 260px; }
@media (max-width: 720px) {
  .topo-ciclo { grid-template-columns: 1fr; gap: 16px; }
}

.campo-ciclo label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 7px;
}
.campo-ciclo .campo-ico { display: inline-flex; color: var(--t3); }
.campo-ciclo .campo-opcional {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t3);
}
.campo-valor.entrada .campo-ico { color: var(--profit); }
.campo-valor.saida .campo-ico { color: var(--loss); }

/* os quatro valores em destaque: cada um com a cor do que ele é — depósito
   sai (vermelho), retirada entra (verde), baú dourado, salário azul */
.campo-valor { --acento: var(--t3); }
/* a plataforma, ao lado da natureza, ganha o mesmo destaque na cor da marca */
.topo-ciclo .campo-ciclo { --acento: var(--brand); }
.topo-ciclo .campo-ciclo .campo-ico { color: var(--acento); }
.topo-ciclo .campo-ciclo label { color: var(--t1); }
.campo-valor.saida { --acento: var(--loss); }
.campo-valor.entrada { --acento: var(--profit); }
.campo-valor.bau { --acento: #d9a441; }
.campo-valor.salario { --acento: #1d9bd1; }
.campo-valor.bau .campo-ico, .campo-valor.salario .campo-ico { color: var(--acento); }
.campo-valor label { color: var(--t1); }

.campo-valor input,
.topo-ciclo .campo-ciclo input {
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  background: var(--surface-2, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--acento) 35%, var(--b1));
  border-left: 4px solid var(--acento);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  transition: border-color .18s, box-shadow .18s;
}
.campo-valor input::placeholder,
.topo-ciclo .campo-ciclo input::placeholder { color: var(--t3); font-weight: 600; }
.campo-valor input:hover,
.topo-ciclo .campo-ciclo input:hover { border-color: color-mix(in srgb, var(--acento) 60%, var(--b1)); }
.campo-valor input:focus,
.topo-ciclo .campo-ciclo input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

/* quatro valores por fileira; quebram em dois antes de ficarem estreitos */
.grade-valores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px) { .grade-valores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grade-valores { grid-template-columns: 1fr; } }

.previa-ciclo {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--t2);
}
.previa-ciclo b { font-size: 14px; }

.bt-registrar {
  width: 100%;
  max-width: none;
  justify-content: center;
  margin-top: 16px;
  padding: 13px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* as duas leituras do topo */
.ciclo-leitura-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ciclo-leitura-valor { font-size: 25px; letter-spacing: -0.02em; }

/* o histórico, fechado por padrão */
.historico-ciclo {
  border: 1px solid var(--b1);
  border-radius: var(--raio-card);
  background: var(--surface);
  overflow: hidden;
}
.historico-cabeca {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.historico-cabeca:hover { background: var(--raised); }
.historico-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.historico-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.historico-seta { color: var(--t3); transition: transform 0.18s ease; }
.historico-cabeca[aria-expanded="true"] .historico-seta { transform: rotate(90deg); }

/* `.tabela-caixa` nasce com margem negativa para sangrar até a borda de um
   `.card`, que tem 22px de folga. Aqui o container não tem folga nenhuma: a
   margem jogava a tabela 22px para fora da moldura dos dois lados e 22px para
   baixo, onde o `overflow: hidden` cortava a última linha. Sem folga, sem
   margem — e o recuo das pontas passa a ser da célula, alinhado ao cabeçalho. */
.historico-ciclo .tabela-caixa { margin: 0; }
.historico-ciclo .tabela thead th:first-child,
.historico-ciclo .tabela tbody td:first-child { padding-left: 18px; }
.historico-ciclo .tabela thead th:last-child,
.historico-ciclo .tabela tbody td:last-child { padding-right: 18px; }

/* o medidor que corresponde ao filtro em vigor */
/* o quadro que corresponde ao filtro de natureza em vigor */
.painel-limpo .quadro.aceso {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--b1));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

/* ---------------------------------------------------------------------------
   O ciclo da operação, compacto. A fita antiga empilhava nome e legenda e
   carregava cabeça de card com subtítulo: quatro linhas para dizer em que
   passo a meta está. Agora é uma fita só.
   ------------------------------------------------------------------------ */
.ciclo-caixa { padding: 12px 14px; }
.ciclo-caixa > .rotulo { margin-bottom: 9px; }

.ciclo-fino { gap: 8px; }
.ciclo-fino .ciclo-passo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  min-width: 0;
}
.ciclo-fino .ciclo-bola {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 10.5px;
}
.ciclo-fino b {
  font-size: 12.5px;
  white-space: nowrap;
}
/* a legenda ocupa o resto da linha e corta com reticências em vez de quebrar */
.ciclo-fino small {
  font-size: 11px;
  color: var(--t3);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* abaixo de 1100px a fita vira duas colunas em vez de espremer quatro */
@media (max-width: 1100px) {
  .ciclo-fino { flex-wrap: wrap; }
  .ciclo-fino .ciclo-passo { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 620px) {
  .ciclo-fino .ciclo-passo { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   O "Resultado por dia" em duas colunas: o progresso das contas à esquerda,
   o gráfico e os números à direita. Empilhado, este card esticava para a
   fileira inteira e chegava a 500px de altura mostrando três coisas pequenas.
   Lado a lado ele volta ao tamanho que tinha quando eram dois cards.
   ------------------------------------------------------------------------ */
.resultado-duplo {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 2fr;
  gap: 26px;
  align-items: stretch;
  /* o card cresce para baixo: com o formulário à direita e a leitura inteira
     da meta à esquerda, apertar as duas colunas dava aquele aspecto de coisa
     espremida na borda de cima */
  min-height: 300px;
}
.resultado-registro {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* só leitura: uma coluna, sem a divisória que separava do formulário */
.resultado-duplo.so-leitura {
  grid-template-columns: 1fr;
  min-height: 0;
}


/* o progresso: anel e números empilhados e centrados na coluna dele */
.progresso-contas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* sem divisória: desde que o registro virou um quadro com borda própria,
     a linha daqui ficava a dez pixels da dele — duas riscas paralelas para
     separar a mesma coisa */
}
/* numa coluna estreita os três indicadores empilham em vez de espremer */
@media (max-width: 1250px) {
}
/* o título do card, agora dentro da coluna que ele descreve */
.progresso-titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.progresso-titulo b {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: var(--display-ls);
}
.progresso-titulo span { font-size: 11.5px; color: var(--t3); }

/* o anel e a contagem numa linha só: círculo à esquerda, números à direita */
.progresso-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.progresso-dados {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Sem espaço para duas colunas, uma embaixo da outra. O bloco da esquerda
   continua EMPILHADO — ele tem três partes agora (anel, contas, indicadores)
   e virá-lo de lado desalinharia a linha que separa os indicadores. A borda
   que dividia as colunas passa a dividir na horizontal. */
@media (max-width: 900px) {
  .resultado-duplo { grid-template-columns: 1fr; gap: 18px; min-height: 0; }
  .progresso-contas {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--b1);
  }
}
@media (max-width: 560px) {
  .progresso-topo { flex-direction: column; gap: 14px; }
  .progresso-dados { gap: 22px; }
}

/* ---------------------------------------------------------------------------
   Registro de operação na Sala: três valores e um botão, no lugar onde antes
   só havia o aviso de "sem remessa ainda". Compacto de propósito — ele divide
   a coluna com o gráfico e não pode devolver altura ao card.
   ------------------------------------------------------------------------ */
/* Um quadro, não um rodapé. Antes era só uma linha no alto e o conteúdo
   centrado na coluna, o que deixava um vão vazio acima dele. Agora ele tem
   borda em volta e cresce para ocupar a altura inteira da coluna, com os
   campos centrados por dentro. */
.form-operacao {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* o conteúdo começa no ALTO. Centralizar aqui abria quase noventa pixels
     de nada acima do rótulo, num quadro cujo próprio tamanho já é dado pela
     coluna ao lado — o vão não era espaço de respiro, era desperdício. */
  justify-content: flex-start;
  padding: 18px;
  border: 1px solid var(--b1);
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--raised);
}
.form-operacao > .rotulo { margin-bottom: 11px; }

.operacao-campos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.campo-operacao label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 5px;
}
.campo-operacao .campo-ico { display: inline-flex; }
.campo-operacao input { padding: 8px 10px; font-size: 13px; }

.operacao-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* `auto` empurra a prévia e o botão para a base: com os campos no alto e
     isto embaixo, o quadro se preenche de ponta a ponta */
  margin-top: auto;
  padding-top: 14px;
  flex-wrap: wrap;
}
.operacao-previa { font-size: 12px; color: var(--t3); }
.operacao-previa b { font-size: 13.5px; }

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

/* ---------------------------------------------------------------------------
   A caixa de registro da Sala, com a barra de modelos em cima.
   ------------------------------------------------------------------------ */
.caixa-registro {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--b1);
  border-radius: calc(var(--raio-card) - 12px);
  background: var(--raised);
  overflow: hidden;
}
.abas-registro {
  margin: 0;
  border-bottom: 1px solid var(--b1);
  flex: 0 0 auto;
}
/* dentro da caixa, o formulário perde a borda própria — quem a tem agora é
   a caixa, e duas bordas aninhadas viravam moldura dupla */
.caixa-registro .form-operacao {
  border: 0;
  border-radius: 0;
  background: none;
}

/* ------------------------------------------------------- modelo planilha */
.planilha-grade {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.planilha-corpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.planilha-cabeca,
.planilha-linha {
  display: grid;
  grid-template-columns: 24px repeat(3, 1fr) 88px;
  /* só espaçamento horizontal: `gap` sozinho criaria também vão de linha
     dentro da grade de uma linha só */
  column-gap: 8px;
  align-items: center;
}
.planilha-cabeca {
  padding-bottom: 2px;
}
.planilha-rotulo,
.planilha-total-rot {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
}
.planilha-total-rot { justify-content: flex-end; }

.planilha-n {
  font-size: 11px;
  color: var(--t4);
  text-align: center;
}
.planilha-linha input {
  padding: 5px 9px;
  font-size: 12.5px;
  line-height: 1.3;
  width: 100%;
}
/* as setinhas do type=number roubam largura e não servem para nada aqui:
   seta para cima e para baixo passaram a andar entre as linhas */
.planilha-linha input::-webkit-outer-spin-button,
.planilha-linha input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.planilha-linha input[type="number"] { appearance: textfield; }

.planilha-total {
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}
.planilha-total.sem-valor { color: var(--t4); }

/* A linha que já virou lançamento. Ela fica — o que estava escrito continua
   escrito — mas precisa dizer que está no banco, senão não dá para saber o
   que ainda falta gravar. Marca discreta na coluna do número e um fundo de
   nada; mexer na linha troca a marca por âmbar, de pendente. */
.planilha-linha.salva .planilha-n,
.planilha-linha.pendente .planilha-n {
  position: relative;
}
.planilha-linha.salva .planilha-n::after,
.planilha-linha.pendente .planilha-n::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 2px;
}
.planilha-linha.salva .planilha-n::after { background: var(--profit); }
.planilha-linha.pendente .planilha-n::after { background: var(--brand); }

/* O preenchimento da linha conta outra história que o traço: se ela já foi
   CONTABILIZADA. A ordem destas três regras é o que decide os empates —
   apurada ganha de andamento, e pendente ganha das duas, porque edição por
   gravar é o aviso mais urgente dos três.

   em andamento — depósito feito, retorno ainda não: cinza, esperando
   apurada     — teve retirada ou baú, entrou na soma: verde
   pendente    — mexida e ainda não gravada: a cor da marca */
.planilha-linha.andamento input {
  background: var(--fill-1);
  border-color: var(--b2);
  color: var(--t2);
}
.planilha-linha.apurada input {
  background: var(--profit-dim);
  border-color: var(--profit-border);
  color: var(--t1);
}
/* linha apurada no vermelho: a conta fechou, e fechou abaixo de zero. Mesma
   especificidade da verde, porque as duas classes são exclusivas — e as duas
   vêm antes de `pendente`, que precisa continuar ganhando de ambas. */
.planilha-linha.prejuizo input {
  background: var(--loss-dim);
  border-color: var(--loss-border);
  color: var(--t1);
}
.planilha-linha.pendente input {
  background: var(--brand-dim);
  border-color: var(--brand-border);
  color: var(--t1);
}

/* O estado da gravação, no lugar que era do botão "Registrar tudo". Sem botão,
   é a única prova de que o que foi digitado chegou ao banco — então o erro
   grita (cor da perda e o caminho manual de volta) e o resto fala baixo. */
.planilha-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--t3);
  white-space: nowrap;
}
.planilha-estado-ico { display: inline-flex; }
.planilha-estado.salvando { color: var(--t2); }
.planilha-estado.salvando .planilha-estado-ico { animation: pulsa-salvando 1s ease-in-out infinite; }
.planilha-estado.ok { color: var(--profit); }
.planilha-estado.ruim { color: var(--loss); font-weight: 600; }
.planilha-estado .bt { margin-left: 4px; }

@keyframes pulsa-salvando {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .planilha-estado.salvando .planilha-estado-ico { animation: none; opacity: 0.7; }
}

.previa-salvas {
  margin-left: 6px;
  color: var(--t3);
}

.planilha-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .planilha-cabeca { display: none; }
  .planilha-linha {
    grid-template-columns: 22px repeat(3, 1fr);
    gap: 6px;
  }
  .planilha-linha .planilha-total {
    grid-column: 2 / -1;
    text-align: left;
  }
}

/* o botão de dividir, no pé do bloco de progresso */
.dividir-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--b1);
  width: 100%;
}
.bt-dividir:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===========================================================================
   Painel — o conteúdo dentro dos quadros da metade de baixo.
   A grade de cards não mudou: o que mudou foi o que mora dentro deles.
   ========================================================================= */

/* ----------------------------------------------- o gráfico do período --- */
/* o número grande vem ANTES do desenho: quem olha quer saber quanto deu, e
   só depois como foi a forma do período */
.painel-limpo .grafico-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.painel-limpo .grafico-valor {
  display: block;
  font-size: 25px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.painel-limpo .grafico-rotulo {
  font-size: 11px;
  color: var(--t3);
}
.painel-limpo .grafico-melhor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.painel-limpo .grafico-melhor b { font-size: 14px; }

/* a linha do zero é a única que pode aparecer; as outras ficam no fundo */
.grafico .eixo-zero {
  stroke: var(--b2);
  stroke-width: 1;
}
.grafico .area-alvo { cursor: default; }

/* ------------------------------------------- as listas medidas ---------- */
/* o mesmo desenho em "Situação das metas" e "Metas em andamento": ponto,
   nome, valor à direita e um trilho fino embaixo */
.painel-limpo .linha-medida {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.painel-limpo .linha-medida-topo {
  display: flex;
  align-items: center;
  gap: 9px;
}
.painel-limpo .linha-medida-nome {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.painel-limpo .linha-medida-valor { font-size: 14px; }

.ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
}

/* o `space-between` do desenho antigo tinha dois filhos; com o ponto na
   frente ele passou a jogar o NOME para o meio. O nome é que ocupa a folga. */
.painel-limpo .andamento-topo { gap: 9px; justify-content: flex-start; }
.painel-limpo .andamento-topo b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.painel-limpo .andamento-topo .ponto { flex: 0 0 7px; }
.painel-limpo .andamento-pct {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--t3);
}
.painel-limpo .andamento-pe { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------- o que os números dizem */
.painel-limpo .leituras li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
}
.painel-limpo .leituras li::before { content: none; }
.painel-limpo .leitura-ico {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  margin-top: 1px;
  background: var(--fill-2);
  color: var(--t3);
}
.painel-limpo .leitura-bom .leitura-ico {
  color: var(--profit);
  background: color-mix(in srgb, var(--profit) 14%, transparent);
}
.painel-limpo .leitura-ruim .leitura-ico {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 14%, transparent);
}
.painel-limpo .leitura-txt {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t2);
}

/* ===========================================================================
   A onda dentro dos cards de número — o traço que define o visual de
   referência. Ela sangra até as bordas do card e fica ATRÁS do conteúdo.
   ========================================================================= */
.painel-limpo .heroi,
.painel-limpo .medidor {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* `.card > *` já declara `position: relative` e tem especificidade maior que
   uma classe sozinha — por isso o seletor aqui precisa do pai junto */
.painel-limpo .heroi > .onda-caixa,
.painel-limpo .medidor > .onda-caixa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  z-index: 0;
  pointer-events: none;
}
.onda-caixa .onda {
  display: block;
  width: 100%;
  height: 100%;
}
/* o conteúdo sobe por cima da onda */
.painel-limpo .heroi > :not(.onda-caixa),
.painel-limpo .medidor > :not(.onda-caixa) {
  position: relative;
  z-index: 1;
}
/* no herói a onda é mais alta e mais presente: é o card que manda na tela */
.painel-limpo .heroi .onda-caixa { height: 70%; }

/* o pé do card ganha um véu para o texto não disputar com a cor da onda */
.painel-limpo .heroi::after,
.painel-limpo .medidor::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 54%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--surface) 86%);
  opacity: 0.55;
}
.painel-limpo .heroi-pe,
.painel-limpo .medidor-pe { position: relative; }


/* ============================================================================
   O PAINEL DE QUEM OPERA
   Operador, Usuário e Usuário Premium. Herda tudo de `.painel-limpo` — cartão
   de borda fina, sem sombra — e acrescenta só as peças que são daqui: o quadro
   com emblema, a meta do dia, a faixa de contagens e o movimento.
   ========================================================================== */

/* ------------------------------------------------- o quadro com emblema */
.painel-operacao .quadro,
.painel-operacao .meta-dia {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  justify-content: flex-start;
  min-height: 150px;
}

/* mesmo motivo do herói: `.card > *` vence uma classe sozinha */
/* A onda fica no ALTO, numa faixa de altura fixa, e TODO o texto do cartão
   vive abaixo dela: valor, rótulo e rodapé. Ao lado dela, à esquerda, só o
   emblema.

   A faixa é em pixels e não em porcentagem de propósito. `onda()` desenha o
   traço na parte de baixo do próprio quadro, então o traço acaba onde esta
   altura acaba — e é ela que o `margin-top` do número precisa ultrapassar.
   Em porcentagem as duas medidas se perseguiriam: um rótulo que quebra em
   duas linhas aumenta o cartão, a faixa cresce junto e a linha volta a cruzar
   o texto. */
.painel-operacao .quadro > .onda-caixa {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 92px;
  z-index: 0;
  pointer-events: none;
}

/* a Meta do dia tem outro desenho — título em cima, trilha no pé — e por isso
   fica com a onda embaixo, atrás do progresso */
.painel-operacao .meta-dia > .onda-caixa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64%;
  z-index: 0;
  pointer-events: none;
}
.painel-operacao .quadro > :not(.onda-caixa),
.painel-operacao .meta-dia > :not(.onda-caixa) {
  position: relative;
  z-index: 1;
}

.quadro-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--fill-2);
  color: var(--t2);
}
.quadro-ico.lucro { background: var(--profit-dim); color: var(--profit); }
.quadro-ico.marca { background: var(--brand-dim); color: var(--brand); }

.quadro-num {
  display: block;
  /* um valor negativo não pode quebrar depois do sinal: "−" numa linha e o
     número na outra vira outro número */
  white-space: nowrap;
  /* 54 = os 92px da faixa da onda, menos a folga do cartão (14) e o emblema
     (34), mais um dedo de ar. É o que põe o valor — e tudo que vem depois
     dele — abaixo da linha. */
  margin-top: 54px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t1);
}
/* o número e a comparação com o período anterior na mesma linha de base. A
   margem que empurra o valor para baixo da onda passa para a linha — se ela
   ficasse no número, a tendência subiria junto e descolaria dele. */
.quadro-linha {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 54px;
}
.quadro-linha > .num { margin-top: 0; }

.quadro-num-grande {
  display: block;
  white-space: nowrap;
  margin-top: 54px;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--t1);
}

.quadro-rotulo {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--t3);
  line-height: 1.45;
}
.quadro-mono {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t4);
}
.quadro-trilha { margin-top: auto; padding-top: 12px; }

/* --------------------------------------------------------- meta do dia */
/* o único cartão colorido do painel: é o número que a pessoa persegue hoje */
.painel-operacao .meta-dia {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  border-color: transparent;
  color: #fff;
}
.painel-operacao .meta-dia:hover { border-color: transparent; }

.meta-dia-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.meta-dia-tit { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.meta-dia-pct { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.86); }
.meta-dia-linha { margin: 7px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.86); }

/* o alvo do dia é o número que a pessoa persegue: ele manda no cartão, como
   o lucro manda no herói ao lado */
.meta-dia-valor {
  margin: 10px 0 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}
.meta-dia-trilha { margin-top: auto; background: rgba(255, 255, 255, 0.22) !important; }
.meta-dia-trilha > i { background: #fff !important; }
.meta-dia-pe { margin: 10px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, 0.8); }
.meta-dia-bt {
  margin-top: auto;
  align-self: flex-start;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ------------------------------------------------------ a faixa do agora */
.faixa-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.faixa-item { padding-left: 16px; border-left: 1px solid var(--b1); }
.faixa-item:first-child { padding-left: 0; border-left: none; }
.faixa-item .rotulo { margin-bottom: 7px; }
.faixa-valor {
  display: block;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t1);
}
.faixa-pe { margin: 6px 0 0; font-size: 11px; color: var(--t4); }

/* ------------------------------------------------------ os quadros rasos */
.painel-operacao .quadro-raso { min-height: 128px; justify-content: flex-start; }

.quadro-raso-valor {
  display: block;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--t1);
}
.quadro-raso-pe {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--t4);
  line-height: 1.45;
}
.painel-operacao .quadro-raso .quadro-trilha { margin-top: auto; }

.constancia-linha { display: flex; align-items: baseline; gap: 8px; }
.constancia-unidade { font-size: 12px; font-weight: 600; color: var(--t3); }

/* dez pontos, um por dia: cheio quando a meta fechou no positivo */
.constancia-pontos { display: flex; gap: 6px; margin-top: 14px; }
.constancia-pontos i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fill-2);
  display: block;
}
.constancia-pontos i.aceso { background: var(--profit); }
.constancia-pontos i.perdido { background: var(--loss); }

/* ---------------------------------------------------- faixa da comunidade */
.painel-operacao .banner-com {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-direction: row;
}
.banner-ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--brand-dim);
  color: var(--brand);
}
.banner-txt { flex: 1 1 auto; min-width: 0; }
.banner-txt .rotulo { margin-bottom: 5px; }
.banner-txt b { font-size: 15px; font-weight: 700; color: var(--t1); display: block; }
.banner-sub { margin: 3px 0 0; font-size: 12px; color: var(--t3); }
.banner-bt { flex: 0 0 auto; text-decoration: none; }

/* a legenda de um ponto só, no canto do gráfico da semana */
.legenda-ponto { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t3); }
.legenda-ponto i { width: 8px; height: 8px; border-radius: 50%; display: block; }

/* ------------------------------------------------------------ respostas */
@media (max-width: 1100px) {
  .faixa-grade { grid-template-columns: repeat(2, 1fr); }
  .faixa-item:nth-child(3) { padding-left: 0; border-left: none; }
}

@media (max-width: 768px) {
  .faixa-grade { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* empilhados, os quadros não precisam da altura que os alinhava em fileira:
     o emblema deixa de empurrar o número para o fundo do cartão */
  .painel-operacao .quadro,
  .painel-operacao .meta-dia,
  .painel-operacao .quadro-raso { min-height: 0; }
  .quadro-ico { margin-bottom: 0; }
  /* no celular a faixa da onda é a mesma, então a folga do número também é */
  .quadro-num, .quadro-num-grande { margin-top: 54px; }
  .meta-dia-trilha, .meta-dia-bt, .painel-operacao .quadro-raso .quadro-trilha { margin-top: 12px; }
  .painel-operacao .banner-com { flex-wrap: wrap; }
  .banner-bt { width: 100%; justify-content: center; }
  /* o mapa de 30 dias nasce com as colunas no atributo `style`; só o
     `!important` alcança o inline para o mês caber em três fileiras */
  .painel-operacao .heat { grid-template-columns: repeat(10, 1fr) !important; }
}

/* ===========================================================================
   REDES — o comparativo entre plataformas.
   Peças próprias desta tela; o resto (card, kpi, trilha, tabela) é o do app.
   ========================================================================== */

/* a legenda do "de onde vem o lucro": uma coluna por rede, que quebra sozinha
   em vez de espremer os nomes quando a carteira tem muitas plataformas */
.redes-legenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 14px 18px;
  margin-top: 16px;
}
.redes-legenda > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.redes-legenda b { font-size: 17px; }
.redes-legenda .campo-dica { font-size: 11.5px; }

/* a saúde da carteira centra o anel e pendura os dois números embaixo */
.redes-saude { align-items: center; text-align: center; }
.redes-saude .anel { margin: 6px auto 4px; }
.redes-saude-pe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}
.redes-ficha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--b1);
  border-radius: var(--raio-bt);
  background: var(--fill-1);
}
.redes-ficha b { font-size: 19px; }

/* o pódio: o número grande à esquerda e a barra da rede à direita */
.redes-posto {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  border-top: 1px solid var(--b1);
}
.redes-posto:first-of-type { border-top: none; }
.redes-posto-n {
  font-size: 19px;
  font-weight: 800;
  color: var(--t4);
  min-width: 30px;
  text-align: center;
}
/* o primeiro lugar ganha moldura e a cor da marca — é o único destaque */
.redes-posto.primeiro {
  border: 1px solid var(--brand-border);
  background: var(--brand-dim);
  border-radius: var(--raio-bt);
  padding: 12px 13px;
  margin-bottom: 2px;
}
.redes-posto.primeiro .redes-posto-n { color: var(--brand); font-size: 24px; }

@media (max-width: 760px) {
  .redes-saude-pe { grid-template-columns: 1fr; }
  .redes-posto { gap: 9px; }
  .redes-posto-n { min-width: 24px; font-size: 16px; }
}

/* ===========================================================================
   ESCOLHEDOR — a lista longa que abre dentro do modal.
   Nasceu da plataforma: 27 opções num <select> nativo viram uma coluna que
   sai da caixa. Aqui a escolha acontece no lugar dos campos de baixo.
   ========================================================================== */

/* o gatilho se faz passar por campo: mesma altura, mesma borda, mesmo foco */
.escolhedor-gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--t1);
  background: var(--input);
  border: 1px solid var(--b2);
  border-radius: var(--raio-bt);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s var(--curva), box-shadow 0.18s var(--curva);
}
.escolhedor-gatilho:hover { border-color: var(--b3); }
.escolhedor-gatilho:focus-visible,
.escolhedor-gatilho.aberto {
  outline: none;
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
.escolhedor-atual { display: flex; align-items: center; gap: 8px; min-width: 0; }
.escolhedor-atual i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.escolhedor-atual span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escolhedor-seta { display: flex; color: var(--t3); flex-shrink: 0; }
.escolhedor-gatilho.aberto .escolhedor-seta { transform: rotate(180deg); }

/* o painel ocupa o espaço que os campos de baixo deixaram */
.escolhedor-painel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--b1);
  border-radius: var(--raio-card);
  background: var(--fill-1);
  animation: escolhedor-abre 0.22s var(--curva) both;
}
.escolhedor-painel[hidden] { display: none; }

@keyframes escolhedor-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.escolhedor-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.escolhedor-cabeca b { display: block; font-size: 13.5px; }
.escolhedor-cabeca .campo-dica { margin-top: 1px; }

.escolhedor-busca {
  width: 100%;
  margin-bottom: 12px;
  padding: 9px 12px;
  font-size: 13px;
}

/* a grade de opções: quantas couberem por linha, e rola quando passar da
   altura dos campos que ela substituiu */
.escolhedor-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}
.escolhedor-opcao {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t2);
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: var(--raio-bt);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s var(--curva), color 0.15s var(--curva), transform 0.15s var(--curva);
}
.escolhedor-opcao i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.escolhedor-opcao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escolhedor-opcao:hover { border-color: var(--b3); color: var(--t1); transform: translateY(-1px); }
.escolhedor-opcao.ativa {
  border-color: var(--brand-border);
  background: var(--brand-dim);
  color: var(--t1);
}

@media (max-width: 560px) {
  .escolhedor-grade { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); max-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .escolhedor-painel { animation: none; }
  .escolhedor-opcao:hover { transform: none; }
}

/* ===========================================================================
   TOUR — a visita guiada do Tutorial.
   Uma camada escura com um recorte de luz sobre o que está sendo explicado.
   ========================================================================== */

.tour { position: fixed; inset: 0; z-index: 900; pointer-events: none; }

/* a capa recebe o clique para sair; o escuro em si vem do recorte, com a
   sombra gigante — um elemento só, em vez de quatro painéis calculados */
.tour-capa { position: absolute; inset: 0; pointer-events: auto; }

.tour-recorte {
  position: fixed;
  border-radius: var(--raio-bt);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.66), 0 0 0 2px var(--brand);
  pointer-events: none;
  transition: left 0.2s var(--curva), top 0.2s var(--curva),
              width 0.2s var(--curva), height 0.2s var(--curva);
}

.tour-cartao {
  position: fixed;
  width: min(330px, calc(100vw - 28px));
  padding: 15px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--b2);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-2);
  pointer-events: auto;
  animation: tour-entra 0.22s var(--curva) both;
}
/* sem alvo para apontar, o cartão assume o meio da tela */
.tour-cartao.centro {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}

@keyframes tour-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.tour-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-conta {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}
.tour-x {
  display: flex;
  padding: 2px;
  color: var(--t3);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.tour-x:hover { color: var(--t1); background: var(--fill-2); }

.tour-trilha { height: 2px; margin: 9px 0 11px; background: var(--fill-3); border-radius: 2px; overflow: hidden; }
.tour-trilha > i { display: block; height: 100%; background: var(--brand); transition: width 0.3s var(--curva); }

.tour-titulo { display: flex; align-items: center; gap: 7px; font-size: 14.5px; }
.tour-ico { display: inline-flex; color: var(--brand); }
.tour-texto { margin: 7px 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--t2); }

.tour-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-pe-dir { display: flex; align-items: center; gap: 7px; }

/* o modal do app fica acima da visita: um passo que abre formulário continua
   utilizável, e o cartão não tapa o que ele mandou abrir */
.com-tour .veu { z-index: 950; }

@media (max-width: 560px) {
  /* na tela estreita o cartão vira uma faixa no pé: ao lado do alvo não cabe */
  .tour-cartao,
  .tour-cartao.centro {
    left: 14px !important;
    right: 14px;
    top: auto !important;
    bottom: 14px;
    width: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-cartao { animation: none; }
  .tour-recorte { transition: none; }
}

/* o conjunto de ícones não tem seta para a direita: a de voltar, espelhada */
.tour-avante { display: inline-flex; transform: scaleX(-1); }

/* a onda do período, no card que era da tabela de volume */
/* O card estica até a altura da fileira — o pódio ao lado é mais alto —, e o
   conteúdo ficava empilhado no topo com um vão morto embaixo. A onda cresce
   para ocupar o que sobra, e as fichas assentam no pé do card. */
.redes-onda {
  position: relative;
  margin-top: 6px;
  flex: 1 1 auto;
  min-height: 150px;
}
/* A onda é posicionada ABSOLUTA de propósito. Com `height: 100%` dentro de um
   pai de altura automática, o navegador cai na proporção intrínseca do SVG
   (320 de largura) e devolve um paredão de 580px — a altura do pai dependeria
   do filho e a do filho, do pai. Solta do fluxo, ela só obedece à caixa. */
.redes-onda svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* o rodapé não encolhe quando a onda cresce */
.redes-onda-pe {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 560px) {
  .redes-onda-pe { grid-template-columns: 1fr; }
}

/* a barra que fecha a onda: rótulo e porcentagem na mesma linha, trilha
   embaixo. Não encolhe quando a onda cresce — ela é informação, não enfeite */
.redes-meta { flex: 0 0 auto; margin-top: 14px; }
.redes-meta-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--t2);
}
.redes-meta-topo b { font-size: 13.5px; color: var(--t1); }
.redes-meta .campo-dica { display: block; margin-top: 7px; }

/* ===========================================================================
   MOVIMENTO — uma barra repartida: para onde foi cada real sacado.
   O card é verde porque é o único do painel que mostra movimento BRUTO, antes
   de qualquer apuração — a cor o separa dos vizinhos, que falam de lucro já
   fechado.
   ========================================================================== */

/* `.card.movimento`, e não só `.movimento`: o painel limpo tem uma regra
   `.painel-limpo .card` que repõe a superfície e, com especificidade maior,
   apagava o verde daqui. Com as duas classes a conta empata, e esta vence por
   vir depois. */
.card.movimento {
  /* o verde entra como um véu sobre a superfície do tema, não como cor fixa:
     assim o card continua claro no tema claro e escuro no noir, em vez de
     virar um bloco que destoa de um dos dois */
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--profit) 14%, transparent), transparent 62%),
    var(--surface);
  border-color: var(--profit-border);
}

.mov-hero { display: block; font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; }
.mov-sub { margin: 5px 0 15px; font-size: 11.5px; color: var(--t3); }

/* o vão de 2px entre as fatias é o que separa duas cinzas vizinhas sem
   precisar de uma terceira cor */
.mov-barra {
  display: flex;
  gap: 2px;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  /* a pista precisa de contraste contra o véu verde do card */
  background: var(--fill-3);
}
.mov-barra > span { display: block; min-width: 2px; transition: width 0.6s var(--curva); }

.mov-legenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px 14px;
  margin-top: 14px;
}
.mov-legenda > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* o valor usa tinta de texto: quem carrega a identidade é a bolinha do chip */
.mov-legenda b { font-size: 14px; color: var(--t1); }

.mov-pe { margin: 14px 0 0; font-size: 11px; color: var(--t4); }

@media (prefers-reduced-motion: reduce) {
  .mov-barra > span { transition: none; }
}

/* ===========================================================================
   ÁREA LIMPA — o gráfico sem eixo, com os dias em HTML embaixo.
   Os rótulos saíram de dentro do SVG porque ele é esticado na largura, e o
   que estica a linha estica também as letras.
   ========================================================================== */

.area-limpa { display: flex; flex-direction: column; }
.area-limpa .grafico { width: 100%; display: block; }

/* o primeiro na borda esquerda, o último na direita: a mesma repartição dos
   pontos no desenho acima */
.area-dias {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--t4);
}
.area-dias > span { flex: 0 0 auto; }

/* O selo da marca deixou de ser a versão e virou o sinal de verificado: o
   mesmo disco da marca, agora redondo, com o tique dentro. A espessura do
   traço vem daqui para os dois lugares que o desenham — o rail, em HTML
   estático, e a porta de entrada, pelo ico() — ficarem idênticos. */
.selo-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  vertical-align: middle;
  /* azul, e não o vermelho da marca: verificado é um selo de autenticidade,
     uma convenção que o olho já lê sem legenda. No vermelho da casa ele viraria
     mais um enfeite da identidade. O tom é o mesmo azul que o app já usa. */
  background: linear-gradient(135deg, #3fb6e8, #1d9bd1);
  box-shadow: 0 4px 12px rgba(29, 155, 209, 0.38);
}
.selo-ok svg { width: 11px; height: 11px; stroke-width: 3.2; }


/* ============================================================================
   A LISTA DO RANKING — a tabela do período em meia coluna

   Ao lado do gráfico de barras não cabe uma tabela de oito colunas sem
   rolagem lateral. Cada operador vira um bloco: a pessoa em cima, com posição
   e lucro, e os números dela embaixo em pares rotulados.
   ========================================================================== */

.rk-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* a lista acompanha a altura do gráfico ao lado; passando disso, rola */
  max-height: 460px;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 6px;
}

.rk-item { padding: 11px 0; border-top: 1px solid var(--b1); }
.rk-item:first-child { border-top: none; padding-top: 2px; }

.rk-topo { display: flex; align-items: center; gap: 9px; }
.rk-n { font-size: 11px; color: var(--t4); flex: 0 0 auto; }
.rk-nome {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk-lucro { font-size: 13.5px; white-space: nowrap; }

.rk-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 7px 12px;
  margin-top: 9px;
  padding-left: 35px;   /* alinha com o nome, não com o número da posição */
}
.rk-nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-rotulo {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t4);
}
.rk-nums b { font-size: 12.5px; color: var(--t2); }

@media (max-width: 1100px) {
  .rk-lista { max-height: none; }
  .rk-nums { padding-left: 0; }
}


/* ============================================================================
   RANKING EM COLUNAS — quem se saiu melhor, em pé

   Uma coluna por operador. O detalhe não cabe embaixo de cada uma, então
   aparece num quadro flutuante ao passar o mouse (ou ao chegar pelo teclado,
   que é por onde quem não usa mouse chega).
   ========================================================================== */

.col-caixa { padding-top: 6px; }

.col-plot { position: relative; }

/* as linhas de referência, bem apagadas, atrás das colunas */
.col-grade { position: absolute; inset: 0 0 auto 0; pointer-events: none; }
.col-grade > i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--b1);
}
.col-grade > i.col-zero { background: var(--b3); }

.col-trilho {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  /* muita gente no período: rola de lado em vez de espremer as colunas até
     elas virarem riscos */
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 2px;
}

/* cada coluna é um botão: clicar nela troca o painel do dia logo abaixo */
.col-grupo {
  position: relative;
  flex: 1 1 0;
  min-width: 66px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.14s;
}
.col-grupo:hover { background: var(--fill-1); }
.col-grupo.aceso { background: var(--fill-2); }
.col-grupo.aceso .col-nome { color: var(--t1); }
.col-grupo:focus-visible { outline: 2px solid var(--brand-border); outline-offset: 2px; }

/* a coluna do dia aberto é a única cheia; as outras recuam um passo */
.col-grupo:not(.aceso) .col-barra { opacity: 0.55; }

.col-barras {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

/* A coluna do lucro ocupa quase toda a largura do grupo; a do que se paga
   fica encostada nela, à direita. Larguras em porcentagem para o grupo mandar
   e um teto em pixels para que, com dois ou três operadores, as colunas não
   virem lajes. */
.col-barra {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 64%;
  max-width: 72px;
  border-radius: 6px 6px 2px 2px;
  transition: filter 0.16s, opacity 0.16s;
}
/* o prejuízo desce do zero em vez de subir */
.col-barra.perdeu { transform: translateY(100%); border-radius: 2px 2px 6px 6px; }

.col-grupo:hover .col-barra,
.col-grupo:focus-visible .col-barra { filter: brightness(1.18); opacity: 1; }

.col-pe { display: flex; flex-direction: column; gap: 2px; text-align: center; min-width: 0; }
.col-nome {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-sub { font-family: var(--mono); font-size: 9px; color: var(--t4); }

.col-grupo:hover .col-nome { color: var(--t1); }

/* ----------------------------------------------- o painel do dia escolhido */
/* O detalhe não é mais um balão flutuante: sete balões seriam sete coisas
   escondidas, e o que se quer ao olhar um dia é a LISTA de quem produziu
   nele. Clicar numa coluna troca este painel, logo abaixo do gráfico. */
.sem-detalhe { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--b1); }

.sem-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.sem-cabeca b { font-size: 13px; color: var(--t1); }
.sem-cabeca .num { font-size: 14px; }

.sem-vazio { margin: 0; font-size: 12px; color: var(--t4); }

.sem-lista { display: flex; flex-direction: column; gap: 2px; }
.sem-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--b1);
}
.sem-item:first-child { border-top: none; }
.sem-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sem-quem b {
  font-size: 12.5px;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sem-valor { font-size: 13px; white-space: nowrap; }


/* ============================================================================
   A COMISSÃO DOS OPERADORES — a engrenagem do cartão "A pagar"
   ========================================================================== */

/* A engrenagem mora no canto SUPERIOR DIREITO do cartão, fora do caminho do
   número. O seletor precisa do pai junto: `.card > *` declara
   `position: relative` e, com só a classe do botão, vencia o `absolute` —
   a engrenagem caía no fluxo, no pé do cartão. */
.mini-kpi { position: relative; }
.mini-kpi > .mini-engrenagem {
  position: absolute;
  top: 10px;
  right: 10px;
  /* acima de 3: é o `z-index` que `efeitos.css` dá a TODO filho de `.card`.
     Com 2, a primeira linha do cartão — o ícone e o nome, que atravessam a
     largura inteira — ficava por cima e engolia o clique. */
  z-index: 4;
}

/* as opções do modelo: cartões clicáveis, não uma pílula apertada — cada um
   precisa do seu exemplo embaixo para a escolha não virar adivinhação */
.comissao-opcoes { display: grid; gap: 8px; }
.comissao-op {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--b1);
  border-radius: 13px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.comissao-op:hover { border-color: var(--b3); background: var(--fill-1); }
.comissao-op.aceso { border-color: var(--brand-border); background: var(--brand-dim); }

.comissao-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--fill-2);
  color: var(--t2);
}
.comissao-op.aceso .comissao-ico { background: var(--brand-dim); color: var(--brand); }

.comissao-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comissao-txt b { font-size: 13px; color: var(--t1); }


/* ============================================================================
   O CARTÃO DA COMISSÃO — ao lado da conta da folha

   O número grande é a combinação; o modelo vem logo abaixo, em uma linha, e o
   pé explica sobre o que ele incide. O cartão estica para acompanhar a altura
   da conta ao lado, e o conteúdo fica centrado nessa altura em vez de encolher
   num canto.
   ========================================================================== */

.folha-comissao { display: flex; flex-direction: column; }

.comissao-cartao {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.comissao-selo {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--brand-dim);
  border: 1px solid var(--brand-border);
}
.comissao-selo.apagado {
  color: var(--t4);
  background: var(--fill-2);
  border-color: var(--b1);
}

.comissao-leitura { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.comissao-valor {
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--t1);
  white-space: nowrap;
}
/* combinação misturada ou ainda sem valor: o número não é um número */
.comissao-valor.fraco { font-size: 20px; color: var(--t3); }

.comissao-modelo {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.comissao-base {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--b1);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--t4);
}


/* ============================================================================
   A FOLHA — colunas estreitas e a marca do que já foi acertado
   ========================================================================== */

/* com dez colunas, o respiro das células precisa encolher para a tabela
   caber sem rolar de lado */
.tabela-folha thead th,
.tabela-folha tbody td { padding-left: 10px; padding-right: 10px; }

/* o que já foi zerado continua dito na linha: um "A pagar" em zero, sozinho,
   pareceria "não produziu" */
.folha-quitado {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--t4);
}


/* ============================================================================
   AS CORES DO DINHEIRO NA FOLHA

   As mesmas do formulário de Ciclos, onde a pessoa digitou esses valores:
   depósito sai (vermelho), saque entra (verde), bônus dourado como o baú.
   Repetir a cor é o que faz a tabela ser lida como a continuação daquele
   formulário, e não como outra coisa.
   ========================================================================== */

.cor-deposito { color: var(--loss); }
.cor-saque    { color: var(--profit); }
.cor-bonus    { color: #d9a441; }

/* no cabeçalho a cor entra apagada: ela marca a coluna sem competir com os
   números, que são o que se lê */
.tabela thead th.cor-deposito { color: color-mix(in srgb, var(--loss) 62%, var(--t4)); }
.tabela thead th.cor-saque    { color: color-mix(in srgb, var(--profit) 62%, var(--t4)); }
.tabela thead th.cor-bonus    { color: color-mix(in srgb, #d9a441 62%, var(--t4)); }

/* `.tabela tbody td` é mais específico que uma classe sozinha e venceria a
   cor — o mesmo motivo que já obriga o `.positivo` do lucro a ir no filho */
.tabela tbody td.cor-deposito,
.tabela tfoot td.cor-deposito { color: var(--loss); }
.tabela tbody td.cor-saque,
.tabela tfoot td.cor-saque { color: var(--profit); }
.tabela tbody td.cor-bonus,
.tabela tfoot td.cor-bonus { color: #d9a441; }

/* ===========================================================================
   O CARTÃO DE PERFIL — quem é a pessoa que falou no mural
   ========================================================================= */

.pp { display: flex; flex-direction: column; gap: 4px; }

.pp-cabeca { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; }

/* o anel em volta da foto é da cor do ELO: é a primeira coisa que se vê, e
   diz de cara em que degrau a pessoa está */
.pp-ava-anel {
  width: 104px;
  height: 104px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 4px;
  background: conic-gradient(from 210deg,
    var(--c), color-mix(in srgb, var(--c) 35%, transparent), var(--c));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--c) 32%, transparent);
}
.pp-ava {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 34px;
  color: #fff;
  border: 3px solid var(--surface);
}

.pp-nome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  font-size: 22px;
  margin: 2px 0 0;
  color: var(--t1);
}
.pp-papel { margin: 0; }
.pp-papel .chip { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; }
.pp-bio {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--t2);
  max-width: 42ch;
}

.pp-contatos { display: flex; gap: 9px; justify-content: center; margin: 16px 0 4px; flex-wrap: wrap; }
.pp-contatos .bt { text-decoration: none; }
/* o botão do Instagram usa o degradê da própria rede: é o atalho que a pessoa
   procura primeiro, e o olho acha por cor antes de ler */
.pp-insta {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(95deg, #f0b429, #e5391f 45%, #8b5cf6);
}
.pp-sem-contato { text-align: center; margin: 16px 0 4px; }

.pp-secao { margin: 22px 0 9px; }

/* números informados pelo Dono: o aviso tem de ser visto, não achado */
.pp-declarado {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--b1));
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  font-size: 12px;
  color: var(--t2);
}
.pp-declarado svg { flex-shrink: 0; color: var(--brand); }
.pp-secao-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pp-secao-linha .pp-secao { margin-bottom: 9px; }

/* ----------------------------------------------------------------- o elo */
.pp-elo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: calc(var(--raio-card) - 10px);
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--b1));
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--c) 12%, transparent), transparent 65%),
    var(--fill-1);
}
/* acima de Esmeralda: borda que gira, um reflexo que atravessa e um brilho
   que respira. Os elos escuros (Obsidiana, Imortal) somem num brilho só da
   cor deles, por isso a borda mistura a cor com branco. */
@property --pp-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.pp-elo-alto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  animation: pp-elo-respira 3.2s ease-in-out infinite;
}
.pp-elo-alto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--pp-ang),
    color-mix(in srgb, var(--c) 25%, transparent),
    color-mix(in srgb, var(--c) 60%, #fff) 18%,
    color-mix(in srgb, var(--c) 25%, transparent) 36%,
    color-mix(in srgb, var(--c) 25%, transparent) 64%,
    color-mix(in srgb, var(--c) 60%, #fff) 82%,
    color-mix(in srgb, var(--c) 25%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: pp-elo-gira 4s linear infinite;
  pointer-events: none;
}
.pp-elo-alto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%,
    color-mix(in srgb, var(--c) 30%, rgba(255, 255, 255, 0.22)) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: pp-elo-reflexo 4.5s ease-in-out infinite;
  pointer-events: none;
}
.pp-elo-alto .pp-elo-nome {
  text-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent);
}
/* Lendário para cima: tudo mais rápido e mais aceso */
.pp-elo-lenda { animation-duration: 2.4s; }
.pp-elo-lenda::before { padding: 2px; animation-duration: 2.6s; }
.pp-elo-lenda::after { animation-duration: 3.2s; }
.pp-elo-lenda .pp-elo-nome {
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pp-elo-nome 3s linear infinite;
}
@keyframes pp-elo-gira { to { --pp-ang: 360deg; } }
@keyframes pp-elo-reflexo {
  0%, 55% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes pp-elo-respira {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); }
  50% { box-shadow: 0 0 22px -2px color-mix(in srgb, var(--c) 45%, transparent); }
}
@keyframes pp-elo-nome { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .pp-elo-alto, .pp-elo-alto::before, .pp-elo-alto::after,
  .pp-elo-lenda .pp-elo-nome { animation: none; }
  .pp-elo-alto::after { display: none; }
}
.pp-elo-topo { display: flex; align-items: center; gap: 9px; }
.pp-elo-chip { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; }
.pp-elo-nome {
  font-family: var(--display);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-ls);
  font-size: 26px;
  line-height: 1.1;
  margin: 3px 0 2px;
  color: var(--c);
}
.pp-elo-pe { margin: 8px 0 0; font-size: 11.5px; color: var(--t4); }

/* ------------------------------------------------------------- as fichas */
.pp-fichas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pp-ficha {
  padding: 12px 11px;
  border-radius: calc(var(--raio-card) - 14px);
  border: 1px solid var(--b1);
  background: var(--fill-1);
  min-width: 0;
}
.pp-ficha b {
  display: block;
  font-size: 16px;
  color: var(--t1);
  /* um valor longo não pode estourar a coluna nem quebrar depois do sinal */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-ficha .rotulo { display: block; margin-top: 5px; }

/* --------------------------------------------------------- as conquistas */
.pp-conquistas { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-medalha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--b1);
  background: var(--fill-1);
  font-size: 12px;
  /* a não conquistada continua na tela, apagada: é ela que mostra o que
     ainda dá para buscar */
  color: var(--t4);
  opacity: 0.6;
}
.pp-medalha.feita {
  opacity: 1;
  color: var(--t1);
  border-color: color-mix(in srgb, var(--c, var(--brand)) 40%, var(--b1));
  background: color-mix(in srgb, var(--c, var(--brand)) 10%, var(--fill-1));
}
.pp-medalha.feita svg { color: var(--c, var(--brand)); }

/* ------------------------------------------- o gatilho dentro do mural */
.fala-ava, .fala-nome {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.fala-nome {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t1);
  border-radius: 5px;
}
.fala-nome:hover { color: var(--brand); text-decoration: underline; }
.fala-ava { border-radius: 999px; display: inline-flex; transition: transform 0.18s var(--curva); }
.fala-ava:hover { transform: scale(1.08); }
.fala-nome:focus-visible, .fala-ava:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------------------------------------- o interruptor do meu perfil */
.mp-opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--b1);
  border-radius: calc(var(--raio-card) - 14px);
  background: var(--fill-1);
  cursor: pointer;
}
.mp-opcao input { margin-top: 2px; flex: 0 0 auto; }
.mp-opcao b { display: block; font-size: 13px; color: var(--t1); }
.mp-opcao small { display: block; font-size: 11px; color: var(--t4); margin-top: 2px; line-height: 1.45; }


/* ------------------------------------------- a vitrine de slots do perfil */
.pp-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pp-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px;
  border-radius: calc(var(--raio-card) - 14px);
  border: 1px solid var(--b1);
  background: var(--fill-1);
  text-align: center;
  min-width: 0;
}
.pp-slot-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--fill-2);
  border: 1px solid var(--b1);
}
.pp-slot-logo img { width: 100%; height: 100%; object-fit: cover; }
.pp-slot-sigla { font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--t3); }
.pp-slot b {
  font-size: 11.5px;
  color: var(--t1);
  line-height: 1.3;
  /* nome longo de slot não pode empurrar as três colunas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp-slot small { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--t4); }

/* ------------------------------------- o escolhedor, dentro de Meu perfil */
.mp-vitrine {
  border: 1px solid var(--b1);
  border-radius: calc(var(--raio-card) - 14px);
  background: var(--fill-1);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mp-vitrine-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mp-vitrine-topo b { display: block; font-size: 13px; color: var(--t1); }
.mp-vitrine-topo small { display: block; font-size: 11px; color: var(--t4); margin-top: 2px; }
.mp-vitrine .campo-dica { white-space: nowrap; }

/* a lista rola por dentro: o catálogo tem dezenas, e o modal não pode virar
   uma página de rolagem só por causa dela */
.mp-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 7px;
  max-height: 184px;
  overflow-y: auto;
  padding-right: 3px;
}
.mp-slot {
  appearance: none;
  cursor: pointer;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--b1);
  background: var(--surface);
  min-width: 0;
  transition: border-color 0.16s var(--curva), background 0.16s var(--curva);
}
.mp-slot:hover { border-color: var(--b2); }
.mp-slot.dentro {
  border-color: var(--brand-border);
  background: var(--brand-dim);
}
.mp-slot-nome {
  display: block;
  font-size: 12px;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-slot-prov { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--t4); margin-top: 2px; }

@media (max-width: 520px) {
  .pp-fichas { grid-template-columns: repeat(2, 1fr); }
  .pp-slots { grid-template-columns: repeat(2, 1fr); }
}