/* LastroPay — painel: telas de afiliados (s/afiliados e a/afiliados). Usa os tokens de painel.css.
   Paleta das séries: esmeralda/volt (marca) primeiro, depois informação, ouro e oliva; "outros" e "venda direta" em neutro. */
:root{
  --af-0:#0E6A4B; --af-1:#2F5D8A; --af-2:#C98A12; --af-3:#6E8B2E; --af-4:#A7B0A9; --af-d:#E3E6DF; --af-e:#C2402E;
}
:root[data-tema="escuro"]{
  --af-0:#5ECB98; --af-1:#7FB2E5; --af-2:#F2B13C; --af-3:#5BD08F; --af-4:#4A5650; --af-d:#26302B; --af-e:#FF7A66;
}
.af-f0{fill:var(--af-0);background:var(--af-0)} .af-f1{fill:var(--af-1);background:var(--af-1)} .af-f2{fill:var(--af-2);background:var(--af-2)}
.af-f3{fill:var(--af-3);background:var(--af-3)} .af-f4{fill:var(--af-4);background:var(--af-4)} .af-fd{fill:var(--af-d);background:var(--af-d)} .af-fe{fill:var(--af-e);background:var(--af-e)}
.legenda i.af-leg{width:10px;height:10px;border-radius:2px}
/* .legenda i (painel.css) pinta tudo de --grafico: aqui cada amostra volta a ter a cor da série */
.legenda i.af-f0{background:var(--af-0)} .legenda i.af-f1{background:var(--af-1)} .legenda i.af-f2{background:var(--af-2)}
.legenda i.af-f3{background:var(--af-3)} .legenda i.af-f4{background:var(--af-4)} .legenda i.af-fd{background:var(--af-d);box-shadow:inset 0 0 0 1px var(--linha-2)} .legenda i.af-fe{background:var(--af-e)}
.legenda i.af-r-normal{background:var(--af-0)} .legenda i.af-r-atencao{background:var(--aviso)} .legenda i.af-r-alto{background:var(--erro)} .legenda i.af-r-bloq{background:var(--ter)}
.dica i.af-leg{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:2px}
.graf .af-cursor{fill:var(--texto);opacity:.05}
.graf .af-linha{fill:none;stroke:var(--texto);stroke-width:1.4;stroke-dasharray:4 4;opacity:.55}
.graf .af-b{transition:opacity .12s}

/* avatares coloridos, mesmo desenho do .av */
.af-av{color:#fff;border:0}
.af-c0{background:#0E6A4B} .af-c1{background:#2F5D8A} .af-c2{background:#8A5A00} .af-c3{background:#4F6420} .af-c4{background:#5E6862}
:root[data-tema="escuro"] .af-av{color:#07090A}
:root[data-tema="escuro"] .af-c0{background:#5ECB98} :root[data-tema="escuro"] .af-c1{background:#7FB2E5} :root[data-tema="escuro"] .af-c2{background:#F2B13C}
:root[data-tema="escuro"] .af-c3{background:#5BD08F} :root[data-tema="escuro"] .af-c4{background:#94A099}

.metricas.af-m6{grid-template-columns:repeat(6,minmax(0,1fr))}
.af-erro{color:var(--erro)} .af-aviso{color:var(--aviso)}
.af-acoes{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.icone-btn.peq{width:28px;height:28px}
.icone-btn.peq svg{width:14px;height:14px}
.af-nota{font-size:12px;margin:10px 0 0}

/* ranking */
.af-tab td{white-space:nowrap}
.af-tab th,.af-tab td{padding-left:9px;padding-right:9px}
.af-tab th:first-child,.af-tab td:first-child{padding-left:16px}
.af-tab th:last-child,.af-tab td:last-child{padding-right:16px}
.af-tab .pessoa b{max-width:140px}
.af-tab .af-pct.peq{width:62px}
.af-tab tr.af-aberta td{background:var(--sup-2)}
.af-bar{display:flex;align-items:center;gap:8px}
.af-bar .barra-linha{min-width:40px}
.af-bar .num{width:70px;text-align:right}
.grade.af-g{align-items:start}
.af-pct{height:30px;padding:0 8px;width:84px;justify-content:flex-end}
.af-pct.peq{height:28px;width:70px}
.af-pct input{width:100%;text-align:right;font-variant-numeric:tabular-nums}
.af-medalha{width:26px;height:26px;border-radius:2px;display:inline-grid;place-items:center;font:700 12px/1 var(--mono);border:1px solid var(--linha-2);flex:none}
.af-medalha.peq{width:22px;height:22px;font-size:11px}
.af-p0 .af-medalha,.af-medalha.af-p0{background:var(--tinta);color:var(--volt);border-color:var(--tinta)}
.af-p1 .af-medalha,.af-medalha.af-p1{background:var(--sup-2);color:var(--texto)}
.af-p2 .af-medalha,.af-medalha.af-p2{background:color-mix(in srgb,var(--ouro) 18%,transparent);color:#7a5200;border-color:color-mix(in srgb,var(--ouro) 45%,transparent)}
:root[data-tema="escuro"] .af-p0 .af-medalha,:root[data-tema="escuro"] .af-medalha.af-p0{background:var(--volt);color:#07090A;border-color:var(--volt)}
:root[data-tema="escuro"] .af-medalha.af-p2,:root[data-tema="escuro"] .af-p2 .af-medalha{color:var(--ouro)}
.af-bloq{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px}
.af-bloq .texto-in{flex:1;min-width:220px;width:auto}
.af-det{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;padding:16px 18px;white-space:normal}
.af-det .spark{width:100%;height:46px}
.af-link{font-size:11.5px;word-break:break-all}

/* pódio e comissões */
.af-podio{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.af-podio li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--linha);border-radius:var(--r-s)}
.af-podio li.af-p0{border-color:var(--linha-2);background:var(--sup-2)}
.af-p-val{font-size:16px;font-weight:700;letter-spacing:-.02em}
.af-regras{display:grid;gap:6px}
.af-regra{display:flex;align-items:center;gap:10px;font-size:13px}
.af-regra>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-regra:first-child>span:first-child{font-weight:600}

/* convite */
.af-convite{margin-bottom:14px;border-color:var(--linha-2)}
.af-previa{display:flex;gap:12px;align-items:center;margin-top:14px;padding:10px 12px;border:1px dashed var(--linha-2);border-radius:var(--r-s);font-size:13px;flex-wrap:wrap}
.af-previa b{color:var(--sinal)}
.af-pend .linhas li{gap:12px}

/* ── admin: faixa da rede (tinta + volt nos dois temas: é a assinatura da Lastro) ── */
.af-hero{--h-txt:#EFE8D8;--h-sec:rgba(239,232,216,.6);--h-ter:rgba(239,232,216,.38);--h-linha:rgba(239,232,216,.1);--h-volt:#E3AE48;--h-ruim:#FF7A66;
  background:#15130E;color:var(--h-txt);border-radius:var(--r);overflow:hidden}
:root[data-tema="escuro"] .af-hero{background:#0B0F0D;border:1px solid var(--linha-2)}
.af-hero h2{font-size:13px;font-weight:700;margin:0;letter-spacing:-.01em;color:var(--h-txt)}
.af-hero-k{display:grid;grid-template-columns:1.35fr repeat(5,minmax(0,1fr));border-bottom:1px solid var(--h-linha)}
.af-k{padding:18px 18px 16px;border-left:1px solid var(--h-linha);display:flex;flex-direction:column;gap:6px;min-width:0}
.af-k:first-child{border-left:0;padding-left:22px}
.af-k-rot{font:500 12.5px/1.3 var(--sans);letter-spacing:0;color:var(--h-sec);display:flex;align-items:center;gap:7px;cursor:help}
.af-pixel{width:7px;height:7px;border-radius:2px;background:var(--h-volt);flex:none}
.af-k b{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.af-k-pri b{font-size:30px;color:var(--h-volt)}
.af-k b small{font-size:13px;font-weight:600;color:var(--h-sec);letter-spacing:0;margin-left:4px}
.af-k b.af-k-ruim{color:var(--h-ruim)}
.af-d{font-size:11.5px;color:var(--h-sec)}
.af-d.bom{color:var(--h-volt)} .af-d.ruim{color:var(--h-ruim)}
.af-d em{font-style:normal;color:var(--h-ter)}
.af-ativ,.af-conc{display:block;height:4px;border-radius:2px;background:var(--h-linha);overflow:hidden}
.af-ativ i,.af-conc i{display:block;height:100%;background:var(--h-volt)}
.af-conc i{background:var(--h-txt)}
.af-hero-g{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.af-hero-graf{padding:16px 20px 12px 22px;min-width:0}
.af-hero-cab{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.af-hero-cab>span{font-size:12px;color:var(--h-sec);display:inline-flex;align-items:center;gap:6px}
.af-hero-cab .seg{margin-left:auto;background:transparent;border-color:rgba(238,242,236,.16)}
.af-hero-cab .seg button{color:var(--h-sec)}
.af-hero-cab .seg button[aria-pressed=true]{background:rgba(238,242,236,.08);color:var(--h-txt);box-shadow:inset 0 0 0 1px rgba(238,242,236,.14)}
.af-tracejado{display:inline-block;width:16px;border-top:1.5px dashed var(--h-sec)}
.af-h-svg .af-h-grade{stroke:var(--h-linha)}
.af-h-svg .af-h-eixo{font:500 10.5px var(--mono);fill:var(--h-ter)}
.af-h-svg .af-h-linha{fill:none;stroke:var(--h-volt);stroke-width:2.2;stroke-linejoin:round}
.af-h-svg .af-h-area{fill:rgba(197,255,61,.07)}
.af-h-svg .af-h-ant{fill:none;stroke:rgba(238,242,236,.38);stroke-width:1.4;stroke-dasharray:4 4}
.af-h-svg .af-h-cursor{stroke:rgba(238,242,236,.22)}
.af-h-svg .af-h-ponto{fill:#15130E;stroke:var(--h-volt);stroke-width:2.2}
.af-funil{padding:16px 22px 16px 20px;border-left:1px solid var(--h-linha)}
.af-funil ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px}
.af-f-lin{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--h-sec)}
.af-f-lin b{font-size:17px;color:var(--h-txt);letter-spacing:-.02em}
.af-f-bar{display:block;height:8px;border-radius:2px;background:var(--h-linha);margin-top:6px;overflow:hidden}
.af-f-bar i{display:block;height:100%;background:var(--h-volt)}
.af-funil li:last-child .af-f-bar i{background:var(--h-txt)}
.af-f-conv{display:block;font-size:10.5px;color:var(--h-ter);margin-top:4px}
.af-f-nota{font-size:11px;color:var(--h-ter);margin:14px 0 0}

/* ── admin: ranking ── */
.af-rank-cab{padding-bottom:12px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.af-abas{display:flex;gap:2px}
.af-abas button{border:0;background:none;padding:6px 2px;margin-right:14px;font-weight:700;font-size:14px;color:var(--ter);cursor:pointer;border-bottom:2px solid transparent}
.af-abas button[aria-selected=true]{color:var(--texto);border-bottom-color:var(--texto)}
:root[data-tema="escuro"] .af-abas button[aria-selected=true]{border-bottom-color:var(--volt)}
.af-chips{display:flex;gap:6px}
.af-chips button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--r-s);border:1px solid var(--linha-2);background:var(--sup);font-size:12.5px;font-weight:600;color:var(--sec);cursor:pointer}
.af-chips button span{font-size:11px;color:var(--ter)}
.af-chips button[aria-pressed=true]{background:var(--acao);color:var(--acao-txt);border-color:var(--acao)}
.af-chips button[aria-pressed=true] span{color:inherit;opacity:.7}
.af-rank .af-loja{display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.af-gmv{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.af-share{display:block;width:96px;height:3px;border-radius:2px;background:var(--linha);overflow:hidden}
.af-share i{display:block;height:100%;background:var(--grafico)}
.af-spark-c .spark{width:90px;height:24px}
.af-novo{font:500 11px/1 var(--mono);color:var(--sinal);background:var(--sinal-fundo);padding:3px 6px;border-radius:4px}
.af-det-a{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);align-items:start}
.af-mini-funil{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.af-mini-funil li{flex:1;border:1px solid var(--linha);border-radius:var(--r-s);padding:10px 12px;background:var(--sup);display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--sec)}
.af-mini-funil b{font-size:17px;color:var(--texto)}
.af-mini-funil em{font-style:normal;font-size:11px;color:var(--sinal)}

@media (max-width:1180px){
  .af-hero-k{grid-template-columns:repeat(3,minmax(0,1fr))}
  .af-k:nth-child(4){border-left:0;padding-left:22px}
  .af-k:nth-child(n+4){border-top:1px solid var(--h-linha)}
  .af-hero-g{grid-template-columns:1fr}
  .af-funil{border-left:0;border-top:1px solid var(--h-linha)}
  .af-det{grid-template-columns:1fr}
}