/* ══════════════════════════════════════════════════════════════
   ABC REAL — painel do clube de compras com indicação em 2 níveis
   Carrega DEPOIS do painel.css (reciclado da Multilave) e troca a
   paleta e acrescenta o que é só deste painel:

     --prim   ameixa — botões, abas, letra A
     --ouro   dourado dos folheados — letra B, destaques
     --verde  verde-esmeralda — letra C
   ══════════════════════════════════════════════════════════════ */
:root{
 --prim:#4B2A7B; --prim-esc:#371D5E; --prim-mid:#4B2A7B; --prim-2:#7F5FB8;
 --prim-claro:#F1ECF8; --prim-claro-2:#E2D7F2;
 --verm:#B8364A; --verm-esc:#982A3B; --verm-claro:#FBE8EB;
 --ouro:#C99A2E; --ouro-esc:#7A5A0B; --ouro-claro:#FBF2DC; --ouro-txt:#2A1D02;
 --verde:#14806A; --verde-bg:#DFF3EE;
 --tinta:#221634; --corpo:#4F4860; --suave:#857E95;
 --fundo:#F2F0F4; --campo:#F7F6F9;
 --linha:#E4E1EA; --linha-2:#EEECF2;
}
:root[data-tema="escuro"]{
 --tinta:#F1EDF8; --corpo:#C3BCD4; --suave:#8F87A3;
 --fundo:#0E0A16; --cartao:#181224; --foto:#221A33; --campo:#1F172E;
 --linha:#30264A; --linha-2:#251D39;
 --prim:#6E48B0; --prim-esc:#5A3797; --prim-mid:#C6B1F2; --prim-2:#9C7EDB;
 --prim-claro:#271C40; --prim-claro-2:#33255A;
 --ouro:#E0B54A; --ouro-esc:#F2CF7A; --ouro-claro:#33270E;
 --verde:#5FD3B4; --verde-bg:#11302A;
 --verm:#E06478; --verm-claro:#3A1820;
}
.bt:hover,.bt.h{box-shadow:0 16px 28px -16px rgba(75,42,123,.8)}

/* marca em texto (o cliente ainda não mandou logo) */
.marca{gap:12px}
.emblema{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;white-space:nowrap;
 background:linear-gradient(140deg,var(--prim) 0%,#7A4FB8 100%);color:#fff;font:800 14px/1 var(--titulo);letter-spacing:.02em;
 box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 10px 22px -12px rgba(75,42,123,.8)}
.emblema i{font-style:normal;color:#F2CF7A}
.marca-t b{display:block;font:800 18px/1.1 var(--titulo);color:var(--tinta);letter-spacing:-.02em}
.marca-t span{font-size:11.5px;color:var(--suave)}
.marca-cel{display:none;align-items:center;gap:8px}
.marca-cel .emblema{width:36px;height:36px;border-radius:11px;font-size:11.5px}

/* ── as três letras ───────────────────────────────────────── */
.le{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;font:800 13px/1 var(--titulo);flex:none}
.le.a{background:var(--prim-claro);color:var(--prim-mid)}
.le.b{background:var(--ouro-claro);color:var(--ouro-esc)}
.le.c{background:var(--verde-bg);color:var(--verde)}
.le.off{background:transparent;color:var(--linha);box-shadow:inset 0 0 0 1.5px var(--linha)}
.le.g{width:34px;height:34px;border-radius:10px;font-size:16px}
.les{display:inline-flex;gap:4px}
.papel{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:700}
.papel.pat{background:var(--ouro-claro);color:var(--ouro-esc)}
.papel.con{background:var(--campo);color:var(--suave)}
.papel svg{width:13px;height:13px}
.rede-n{font-size:12.5px;color:var(--corpo)}
.rede-n b{color:var(--tinta)}
.rede-n em{font-style:normal;color:var(--suave)}
.de-quem{display:flex;flex-wrap:wrap;gap:4px;max-width:340px;white-space:normal}
.de-quem span{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;background:var(--campo);font-size:11.5px;color:var(--corpo)}
.de-quem span.mais{background:transparent;color:var(--suave)}
.ok-t{color:var(--ok);font-weight:700}

/* ── sorteio do mês ───────────────────────────────────────── */
.sorteio-top{display:grid;grid-template-columns:330px 1fr;gap:18px;margin-bottom:18px}
.roleta-c{padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center;
 background:radial-gradient(120% 90% at 50% 0%,#5E3797 0%,#2E1952 70%);color:#fff}
:root[data-tema="escuro"] .roleta-c{background:radial-gradient(120% 90% at 50% 0%,#4A2B7A 0%,#1A0F2E 75%)}
.roleta-c .rot{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#F2CF7A}
.roleta-c h3{color:#fff;font-size:20px;margin-top:6px}
.roleta-c p{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:3px}
.roleta{position:relative;width:136px;height:136px;margin:18px 0;border-radius:34px;display:grid;place-items:center;
 background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);font:800 78px/1 var(--titulo);color:#fff}
.roleta.gira{animation:balanca .14s ease infinite alternate}
.roleta.saiu{background:#F2CF7A;color:#2A1D02;box-shadow:0 0 0 8px rgba(242,207,122,.18),0 20px 50px -14px rgba(242,207,122,.7);animation:saiu .7s var(--mola)}
.roleta.saiu.a{background:#fff;color:var(--prim)}
.roleta.saiu.c{background:#7FE3C6;color:#08362C}
@keyframes balanca{from{transform:translateY(-2px) rotate(-2deg)}to{transform:translateY(2px) rotate(2deg)}}
@keyframes saiu{0%{transform:scale(.7)}60%{transform:scale(1.08)}100%{transform:none}}
.roleta-c .bts{display:flex;flex-direction:column;gap:8px;width:100%}
.roleta-c .bt{background:#F2CF7A;color:#2A1D02;width:100%}
.roleta-c .bt:hover{background:#FFDD8E}
.roleta-c .bt-o{border-color:rgba(255,255,255,.3);color:#fff;width:100%}
.roleta-c .bt-o:hover{border-color:#fff;color:#fff}
.roleta-c .bt[disabled]{opacity:.5;pointer-events:none}
.roleta-c .feito{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:99px;background:rgba(127,227,198,.16);color:#9FF0D6;font-weight:700;font-size:13px}
.roleta-c .feito svg{width:16px;height:16px}

.letras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.letra-c{position:relative;text-align:left;padding:20px;border-radius:var(--r);background:var(--cartao);box-shadow:var(--sombra);
 border:2px solid transparent;display:flex;flex-direction:column;gap:6px;min-width:0;
 transition:border-color .3s ease,transform .4s var(--mola),box-shadow .3s ease,background .5s ease}
.letra-c:hover{transform:translateY(-3px)}
.letra-c .le{width:52px;height:52px;border-radius:16px;font-size:28px;margin-bottom:8px}
.letra-c b{color:var(--tinta);font:700 16px/1.2 var(--titulo)}
.letra-c .regra{font-size:12.5px;color:var(--suave);line-height:1.45}
.letra-c .num-l{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;border-top:1px solid var(--linha-2)}
.letra-c .num-l strong{font:800 24px/1 var(--titulo);color:var(--tinta)}
.letra-c .num-l span{font-size:12px;color:var(--suave)}
.letra-c .num-l em{margin-left:auto;font-style:normal;font-weight:800;color:var(--tinta);font-size:14px}
.letra-c .marcador{position:absolute;top:16px;right:16px;height:24px;padding:0 10px;border-radius:99px;font-size:11px;font-weight:700;
 display:none;align-items:center;gap:5px}
.letra-c.on .marcador{display:inline-flex}
.letra-c.a.on{border-color:var(--prim)}  .letra-c.a .marcador{background:var(--prim-claro);color:var(--prim-mid)}
.letra-c.b.on{border-color:var(--ouro)}  .letra-c.b .marcador{background:var(--ouro-claro);color:var(--ouro-esc)}
.letra-c.c.on{border-color:var(--verde)} .letra-c.c .marcador{background:var(--verde-bg);color:var(--verde)}
.letra-c.sorteada::after{content:'Sorteada';position:absolute;top:-10px;left:18px;height:20px;padding:0 9px;border-radius:99px;
 background:#F2CF7A;color:#2A1D02;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:grid;place-items:center}
.cab-letra{display:flex;align-items:center;gap:12px}
.regras-l{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.regras-l .linha-chave{padding:8px 12px;gap:10px}
.regras-l .linha-chave b{font-size:12.5px}
.tabela tr.pago-l td{background:linear-gradient(90deg,var(--ok-bg),transparent 70%)}

/* ── rede de indicação ────────────────────────────────────── */
.rede-lay{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.arv{padding:22px}
.arv-pai{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--suave);margin-bottom:10px}
.arv-pai button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 4px;border-radius:99px;background:var(--campo);color:var(--tinta);font-weight:600}
.arv-pai .avatar{width:26px;height:26px;font-size:10px}
.arv-pai .seta-c{width:16px;height:16px;rotate:180deg;color:var(--suave)}
.arv-eu{display:flex;align-items:center;gap:16px;padding:18px;border-radius:18px;background:var(--prim-claro);flex-wrap:wrap}
.arv-eu .avatar{width:56px;height:56px;font-size:18px}
.arv-eu h3{font-size:20px}
.arv-eu p{font-size:12.5px;color:var(--suave)}
.arv-eu .dir{margin-left:auto;display:flex;align-items:center;gap:10px}
.arv-rot{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-size:13px;color:var(--corpo)}
.arv-rot b{color:var(--tinta)}
.arv-ramos{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding-left:18px}
.arv-ramos::before{content:'';position:absolute;left:4px;top:-6px;bottom:18px;width:2px;border-radius:2px;background:var(--linha)}
.ramo{position:relative;border:1px solid var(--linha);border-radius:16px;padding:12px;min-width:0;background:var(--cartao)}
.ramo::before{content:'';position:absolute;left:-15px;top:26px;width:14px;height:2px;background:var(--linha)}
.ramo>button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-width:0}
.ramo>button>div{min-width:0}
.ramo>button b{display:block;color:var(--tinta);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ramo>button span{font-size:11.5px;color:var(--suave)}
.ramo .avatar{width:34px;height:34px;font-size:12px}
.ramo>button .le{margin-left:auto}
.filhos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--linha)}
.filhos button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 4px;border-radius:99px;background:var(--verde-bg);color:var(--verde);font-size:12px;font-weight:600}
.filhos button .avatar{width:20px;height:20px;font-size:8.5px}
.filhos .nada{font-size:11.5px;color:var(--suave)}
.arv .vazio{padding:28px 0;grid-column:auto}
.explica{padding:20px 22px}
.explica h3{font-size:17px;margin-bottom:4px}
.explica>p{font-size:12.5px;color:var(--suave);margin-bottom:14px}
.ex-l{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--linha-2)}
.ex-l b{display:block;color:var(--tinta);font-size:13.5px}
.ex-l span{font-size:12.5px;color:var(--corpo);line-height:1.5}
.escolhe{padding:18px 18px 10px;margin-top:18px}
.escolhe h3{font-size:15px;margin-bottom:10px}
.escolhe .busca{width:100%;margin-bottom:6px}
.escolhe-l button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:12px;text-align:left;transition:background .25s ease}
.escolhe-l button:hover,.escolhe-l button.on{background:var(--campo)}
.escolhe-l button.on b{color:var(--prim-mid)}
.escolhe-l .avatar{width:30px;height:30px;font-size:11px}
.escolhe-l b{display:block;color:var(--tinta);font-size:13px}
.escolhe-l span{font-size:11.5px;color:var(--suave)}
.escolhe-l em{margin-left:auto;font-style:normal;font-size:12px;color:var(--suave);white-space:nowrap}

/* ── ficha do cliente (gaveta) ────────────────────────────── */
.letra-l{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--linha-2)}
.letra-l:first-of-type{border-top:0;padding-top:0}
.letra-l b{display:block;color:var(--tinta);font-size:13.5px}
.letra-l span{font-size:12px;color:var(--suave)}
.letra-l em{font-style:normal;font-weight:800;color:var(--tinta);font-size:13.5px;text-align:right}
.letra-l em small{display:block;font-weight:500;font-size:11px;color:var(--suave)}
.letra-l.off b{color:var(--suave)}
.mini-rede{display:flex;flex-wrap:wrap;gap:6px}
.mini-rede button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 4px;border-radius:99px;background:var(--campo);color:var(--tinta);font-size:12.5px;font-weight:600}
.mini-rede button .avatar{width:22px;height:22px;font-size:9px}
.mini-rede .nada{font-size:12.5px;color:var(--suave)}
.sub-h{font-size:12px;font-weight:700;color:var(--corpo);margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.sub-h:first-child{margin-top:0}
.compra-l{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--linha-2)}
.compra-l:first-of-type{border-top:0}
.compra-l b{display:block;color:var(--tinta);font-size:13px}
.compra-l span{font-size:11.5px;color:var(--suave)}
.compra-l em{font-style:normal;font-weight:700;color:var(--tinta);font-size:13px}
.cat-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--prim-claro);color:var(--prim-mid);flex:none}
.cat-ic svg{width:18px;height:18px}
.cat-ic.roupa{background:var(--azul-bg);color:var(--azul)}
.cat-ic.calc{background:var(--roxo-bg);color:var(--roxo)}
.cat-ic.fol{background:var(--ouro-claro);color:var(--ouro-esc)}
.produto-c{display:flex;align-items:center;gap:10px}
.produto-c b{display:block;color:var(--tinta);font-size:13px;font-weight:600}
.produto-c span{font-size:11.5px;color:var(--suave)}
.top-i .avatar{width:44px;height:44px;font-size:14px}
.grade-kpi .kpi-ic.o{background:var(--ouro-claro);color:var(--ouro-esc)}
.grade-kpi .kpi-ic.v{background:var(--verde-bg);color:var(--verde)}
.prox-s{padding:6px 22px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.prox-s>div{padding:14px;border-radius:14px;background:var(--campo);display:flex;flex-direction:column;gap:4px;min-width:0}
.prox-s b{font:800 20px/1.1 var(--titulo);color:var(--tinta);margin-top:6px}
.prox-s span{font-size:11.5px;color:var(--suave)}
.data-s{display:flex;align-items:center;gap:12px;margin:0 22px;padding:12px 14px;border-radius:14px;background:var(--prim-claro);color:var(--prim-mid);font-size:13px}
.data-s b{color:var(--prim-mid)}
.data-s .bt{margin-left:auto}
.mais-l{display:flex;justify-content:center;padding:14px}

@media (max-width:1200px){
 .sorteio-top{grid-template-columns:1fr}
 .roleta-c{flex-direction:row;flex-wrap:wrap;text-align:left;gap:4px 22px;justify-content:center}
 .rede-lay{grid-template-columns:1fr}
}
@media (max-width:1000px){
 .marca-cel{display:flex}
}
@media (max-width:760px){
 .letras{grid-template-columns:1fr;gap:10px}
 .letra-c{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:14px 16px}
 .letra-c .le{grid-row:1/3;width:44px;height:44px;font-size:23px;margin:0}
 .letra-c .regra{font-size:12px}
 .letra-c .num-l{grid-column:1/-1;padding-top:10px;margin-top:8px}
 .letra-c .marcador{top:12px;right:12px}
 .roleta-c{flex-direction:column;text-align:center}
 .roleta{width:110px;height:110px;font-size:62px;margin:14px 0;border-radius:28px}
 .prox-s{grid-template-columns:1fr;padding:6px 16px 16px}
 .data-s{margin:0 16px;flex-wrap:wrap}
 .data-s .bt{margin-left:0;width:100%}
 .arv{padding:16px}
 .arv-ramos{grid-template-columns:1fr}
 .regras-l{width:100%}
 .regras-l .linha-chave{width:100%}
 /* tabelas em cartões */
 .t-mem tr{grid-template-areas:"cli les" "pat gasto" "rede ult"}
 .t-mem td:nth-child(1){grid-area:cli}
 .t-mem td:nth-child(2){grid-area:pat;font-size:12px}
 .t-mem td:nth-child(3){grid-area:les;justify-self:end}
 .t-mem td:nth-child(4){grid-area:rede}
 .t-mem td:nth-child(5){grid-area:gasto;justify-self:end}
 .t-mem td:nth-child(6){grid-area:ult;justify-self:end;font-size:12px}
 .t-mem td:nth-child(7){display:none}
 .t-gan tr{grid-template-areas:"cli val" "de st"}
 .t-gan td:nth-child(1){grid-area:cli}
 .t-gan td:nth-child(2){grid-area:de}
 .t-gan td:nth-child(3){grid-area:val;justify-self:end}
 .t-gan td:nth-child(4){grid-area:st;justify-self:end}
 .t-his tr{grid-template-areas:"mes le" "gan tot"}
 .t-his td:nth-child(1){grid-area:mes}
 .t-his td:nth-child(2){grid-area:le;justify-self:end}
 .t-his td:nth-child(3){grid-area:gan}
 .t-his td:nth-child(4){grid-area:tot;justify-self:end}
 .t-his td:nth-child(5){display:none}
 .t-cmp tr{grid-template-areas:"prod val" "cli quando"}
 .t-cmp td:nth-child(1){grid-area:prod}
 .t-cmp td:nth-child(2){grid-area:cli}
 .t-cmp td:nth-child(3){grid-area:val;justify-self:end}
 .t-cmp td:nth-child(4){display:none}
 .t-cmp td:nth-child(5){grid-area:quando;justify-self:end;font-size:12px}
 .t-novo tr{grid-template-areas:"cli les" "pat quando"}
 .t-novo td:nth-child(1){grid-area:cli}
 .t-novo td:nth-child(2){grid-area:pat;font-size:12px}
 .t-novo td:nth-child(3){grid-area:les;justify-self:end}
 .t-novo td:nth-child(4){grid-area:quando;justify-self:end;font-size:12px}
 .de-quem{max-width:none}
}

/* ajustes */
.avatar,.cli .avatar,.ramo .avatar,.escolhe-l .avatar{color:#fff!important;font-weight:700}
.cli .avatar{font-size:12px}
.le.off{color:var(--suave);opacity:.4;box-shadow:inset 0 0 0 1.5px var(--suave)}
.roleta-c .bt-o{background:transparent}
.escolhe-l em{display:flex;gap:4px;align-items:center}
.escolhe-l em .le{width:auto;min-width:22px;height:20px;padding:0 6px;font-size:10.5px;border-radius:6px;gap:3px}
@media (max-width:760px){
 .prox-s{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .prox-s>div{padding:12px 10px}
 .prox-s b{font-size:15px}
 .prox-s span{font-size:10.5px;line-height:1.35}
}

/* ── ranking ──────────────────────────────────────────────── */
.rank-lay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.rank-filtros{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px 0}
.podio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;padding:18px 22px 6px}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 10px 14px;border-radius:18px;background:var(--campo);min-width:0;
 transition:transform .4s var(--mola)}
.pod:hover{transform:translateY(-3px)}
.pod.p1{padding-top:26px;background:linear-gradient(180deg,var(--ouro-claro),var(--campo));box-shadow:inset 0 0 0 1.5px var(--ouro)}
.pod .avatar{width:46px;height:46px;font-size:15px;margin-bottom:4px}
.pod.p1 .avatar{width:58px;height:58px;font-size:18px;box-shadow:0 0 0 3px var(--cartao),0 0 0 5px var(--ouro)}
.pod b{color:var(--tinta);font-size:13px;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod strong{font:800 17px/1.1 var(--titulo);color:var(--tinta)}
.pod.p1 strong{font-size:20px}
.pod strong small{font:600 11px var(--titulo);color:var(--suave)}
.pod>span:last-child{font-size:11px;color:var(--suave)}
.pod .med{position:absolute;top:-9px;left:50%;translate:-50% 0;height:20px;padding:0 9px;border-radius:99px;background:var(--prim);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center}
.pod.p1 .med{background:var(--ouro);color:var(--ouro-txt)}
.vazio-p{background:transparent}
.rank-l{padding:6px 14px 16px}
.rk{display:grid;grid-template-columns:30px 36px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;padding:9px 8px;border-radius:12px;transition:background .25s ease}
.rk:hover{background:var(--campo)}
.rk .pos{font:800 13px var(--titulo);color:var(--suave);text-align:center}
.rk .avatar{width:34px;height:34px;font-size:12px}
.rk b{display:block;color:var(--tinta);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk span{font-size:11px;color:var(--suave);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .barra{height:5px;border-radius:5px;background:var(--campo);margin-top:5px;overflow:hidden}
.rk:hover .barra{background:var(--cartao)}
.rk .barra i{display:block;height:100%;border-radius:5px;background:var(--prim-2);width:0;transition:width 1.2s var(--mola)}
.rk em{font-style:normal;font-weight:800;color:var(--tinta);font-size:14px;white-space:nowrap}
.rk em small{font-weight:500;font-size:11px;color:var(--suave)}

/* ── afiliados ────────────────────────────────────────────── */
.cod-af{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:var(--ouro-claro);color:var(--ouro-esc);
 font:700 12.5px/1 ui-monospace,'Cascadia Mono',Consolas,monospace;letter-spacing:.04em;transition:filter .2s ease}
.cod-af:hover{filter:brightness(.95)}
.cod-af svg{width:13px;height:13px;opacity:.7}
.pend-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:16px 22px 22px}
.pend{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;border:1px solid var(--linha);background:var(--cartao)}
.pend>.cli{text-align:left;width:100%}
.pend .motivo{font-size:12.5px;color:var(--corpo);font-style:italic;line-height:1.45;flex:1}
.pend-d{display:flex;justify-content:space-between;font-size:12px;color:var(--suave);padding-top:8px;border-top:1px dashed var(--linha)}
.pend-d b{color:var(--tinta)}
.pend-bt{display:flex;gap:8px}
.pend-bt>*{flex:1}
.pend.sai{animation:toastOut .4s ease forwards}
.af-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.af-box>div:first-child{flex:1;min-width:200px}
.af-box b{display:block;color:var(--tinta);font-size:13.5px}
.af-box span{font-size:12.5px;color:var(--suave)}
.af-link{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:12px;background:var(--campo);flex-wrap:wrap}
.af-link span{flex:1;min-width:0;font:500 12.5px ui-monospace,Consolas,monospace;color:var(--corpo);overflow-wrap:anywhere}
.af-link b{color:var(--ouro-esc)}
.kpi.pisca .kpi-v{animation:pisca .9s ease}

@media (max-width:1200px){
 .rank-lay{grid-template-columns:1fr}
}
@media (max-width:760px){
 .rank-filtros{padding:12px 16px 0}
 .podio{padding:18px 12px 6px;gap:6px}
 .pod{padding:14px 6px 12px}
 .pod strong{font-size:14px}
 .pod.p1 strong{font-size:16px}
 .pod b{font-size:12px}
 .rank-l{padding:6px 6px 12px}
 .rk{grid-template-columns:24px 32px minmax(0,1fr) auto;gap:8px}
 .pend-l{padding:12px 14px 16px;grid-template-columns:1fr}
 .t-af tr{grid-template-areas:"cli cod" "ind vend" "st chave"}
 .t-af td:nth-child(1){grid-area:cli}
 .t-af td:nth-child(2){grid-area:cod;justify-self:end}
 .t-af td:nth-child(3){grid-area:ind}
 .t-af td:nth-child(4){grid-area:vend;justify-self:end}
 .t-af td:nth-child(5){display:none}
 .t-af td:nth-child(6){grid-area:st}
 .t-af td:nth-child(7){grid-area:chave;justify-self:end}
}
.rk .avatar{display:grid;place-items:center;font-size:12px;color:#fff;overflow:visible;white-space:normal}

/* ── painel do cliente / afiliado ─────────────────────────── */
html.modo-af .topo .busca{visibility:hidden}
.af-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;padding:24px;align-items:center}
.af-eu{display:flex;gap:18px;align-items:flex-start}
.af-eu>.avatar{width:64px;height:64px;font-size:21px}
.af-eu h2{font-size:24px}
.af-eu p{font-size:13px;color:var(--suave)}
.af-nota{font-size:12.5px;color:var(--corpo);line-height:1.5}
.af-nota b{color:var(--tinta)}
.af-acao{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;background:var(--campo)}
.af-acao .ag-t{margin:0}
.af-acao .af-link{background:var(--cartao)}
.af-acao .bt-wa{height:40px;justify-content:center}
.af-acao .bt{align-self:flex-start}
.escolhe .af-acao{padding:0;background:none}
.pai-n{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 4px;border-radius:99px;background:var(--campo);color:var(--tinta);font-weight:600}
.pai-n .avatar{width:26px;height:26px;font-size:10px}
.ramo-c{display:flex;align-items:center;gap:10px;min-width:0}
.ramo-c>div{min-width:0;flex:1}
.ramo-c b{display:block;color:var(--tinta);font-size:13.5px}
.ramo-c span{font-size:11.5px;color:var(--suave)}
.ramo-c i{font-style:normal}
.ramo-c .avatar{width:34px;height:34px;font-size:12px}
.filhos .f{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 4px;border-radius:99px;background:var(--verde-bg);color:var(--verde);font-size:12px;font-weight:600}
.filhos .f .avatar{width:20px;height:20px;font-size:8.5px}
#barra-cel #bt-sair-cel{color:var(--vermelho)}
@media (max-width:1000px){
 .af-hero{grid-template-columns:1fr;padding:18px;gap:16px}
}
@media (max-width:760px){
 .af-eu{gap:12px}
 .af-eu>.avatar{width:48px;height:48px;font-size:16px}
 .af-eu h2{font-size:19px}
 .t-meus tr{grid-template-areas:"mes le" "por val"}
 .t-meus td:nth-child(1){grid-area:mes}
 .t-meus td:nth-child(2){grid-area:le;justify-self:end}
 .t-meus td:nth-child(3){grid-area:por;font-size:12px}
 .t-meus td:nth-child(4){grid-area:val;justify-self:end}
}

/* ── letras "acesas" (pedido do cliente, 19/10) ───────────── */
.les .le.a,.letra-l .le.g.a,.ex-l .le.g.a{background:var(--prim);color:#fff;box-shadow:0 0 0 3px var(--prim-claro),0 4px 12px -4px var(--prim)}
.les .le.b,.letra-l .le.g.b,.ex-l .le.g.b{background:var(--ouro);color:var(--ouro-txt);box-shadow:0 0 0 3px var(--ouro-claro),0 4px 12px -4px var(--ouro)}
.les .le.c,.letra-l .le.g.c,.ex-l .le.g.c{background:var(--verde);color:#fff;box-shadow:0 0 0 3px var(--verde-bg),0 4px 12px -4px var(--verde)}
.les{gap:7px}
.letreiro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;max-width:420px}
.lt-l{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.lt-l span{width:100%;aspect-ratio:1/1;max-width:86px;border-radius:22px;display:grid;place-items:center;font:800 40px/1 var(--titulo);
 background:var(--campo);color:var(--suave);opacity:.55;box-shadow:inset 0 0 0 2px var(--linha);transition:all .5s var(--mola)}
.lt-l small{font-size:11px;color:var(--suave);line-height:1.3}
.lt-l.acesa span{opacity:1;animation:acende 1.2s var(--mola) both}
.lt-l.acesa small{color:var(--tinta);font-weight:600}
.lt-l.a.acesa span{background:var(--prim);color:#fff;box-shadow:0 0 0 4px var(--prim-claro),0 10px 30px -6px var(--prim)}
.lt-l.b.acesa span{background:var(--ouro);color:var(--ouro-txt);box-shadow:0 0 0 4px var(--ouro-claro),0 10px 30px -6px var(--ouro)}
.lt-l.c.acesa span{background:var(--verde);color:#fff;box-shadow:0 0 0 4px var(--verde-bg),0 10px 30px -6px var(--verde)}
.lt-l.b.acesa span{animation-delay:.15s}.lt-l.c.acesa span{animation-delay:.3s}
@keyframes acende{0%{filter:brightness(.6) saturate(.2);transform:scale(.9)}60%{filter:brightness(1.25)}100%{filter:none;transform:none}}
@media (max-width:760px){
 .lt-l span{font-size:30px;border-radius:16px}
}

/* ── tutorial (modo demonstração) ─────────────────────────── */
.abertura .emblema{width:132px;height:132px;border-radius:38px;font-size:40px;margin:0 auto;opacity:0;transform:translateY(16px);transition:all 1s var(--mola) .1s;
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 30px 60px -20px rgba(75,42,123,.7)}
.abertura.mostra .emblema{opacity:1;transform:none}
.abertura .ln{background:linear-gradient(90deg,var(--prim),var(--ouro),var(--verde))}
.legenda-demo .n{background:var(--prim)}
@media (max-width:640px){ .abertura .emblema{width:96px;height:96px;font-size:29px;border-radius:28px} }