/* Plataforma AXIS, rodada 5, frente 20: DRE para o dono (portal do cliente). Tudo escopado em .r20 e nos tokens --ax-*. */

.r20{--r20-g1:#8436FE;--r20-g2:#1F9A8C;--r20-g3:#C8841A;--r20-g4:#D4507A;--r20-g5:#3B5BDB;--r20-g6:#6F9A1F;
  --r20-ok:var(--ax-ok,#15805A);--r20-cr:var(--ax-erro,#C0392B);--r20-at:var(--ax-alerta,#C8841A);
  display:flex;flex-direction:column;gap:22px;max-width:1180px;margin:0 auto;font-variant-numeric:tabular-nums;color:var(--ax-texto)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .r20{--r20-g1:#A66FFE;--r20-g2:#2A9E90;--r20-g3:#B8842A;--r20-g4:#D45E84;--r20-g5:#5F79E6;--r20-g6:#6F9A2A}}
:root[data-theme="dark"] .r20{--r20-g1:#A66FFE;--r20-g2:#2A9E90;--r20-g3:#B8842A;--r20-g4:#D45E84;--r20-g5:#5F79E6;--r20-g6:#6F9A2A}
.r20 h1,.r20 h2,.r20 h3,.r20 p{margin:0}
.r20-ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- cabeçalho ---------- */
.r20-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.r20-selo{display:inline-flex;align-items:center;gap:8px;font:600 10px/1 var(--ax-fonte-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ax-acento);
  background:var(--ax-acento-suave);padding:6px 11px;border-radius:var(--ax-raio-pilula);margin-bottom:12px}
.r20-selo i{width:6px;height:6px;border-radius:50%;background:var(--ax-acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--ax-acento) 25%,transparent)}
.r20-cab h1{font-size:var(--ax-t-titulo,28px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.r20-sub{margin-top:8px;color:var(--ax-texto-mudo);font-size:var(--ax-t-corpo,14px);line-height:1.5;max-width:620px}
.r20-ac{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.r20-mes{display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--ax-raio-m);background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.r20-mes-sel{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:34px;min-width:168px;padding:0 10px;border-radius:8px;
  font-size:13.5px;font-weight:600;color:var(--ax-texto);cursor:pointer;transition:background var(--ax-dur-1) var(--ax-curva)}
.r20-mes-sel:hover{background:var(--ax-superficie-3)}
.r20-mes-sel .r20-ic{color:var(--ax-texto-mudo)}
.r20-mes-sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;font-size:16px}
.r20-mes-sel:focus-within{box-shadow:inset 0 0 0 1px var(--ax-acento),var(--ax-foco)}
.r20-mb{display:grid;place-items:center;width:32px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--ax-texto-mudo);cursor:pointer;
  transition:background var(--ax-dur-1) var(--ax-curva),color var(--ax-dur-1)}
.r20-mb:hover{background:var(--ax-superficie-3);color:var(--ax-texto)}
.r20-mb:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--ax-acento),var(--ax-foco)}

/* ---------- resumo: entrou, saiu, sobrou ---------- */
.r20-hero{position:relative;overflow:hidden;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:22px;
  background:radial-gradient(900px 300px at 100% -40%,color-mix(in srgb,var(--ax-roxo) 13%,transparent),transparent 60%),
    linear-gradient(180deg,var(--ax-superficie-1),var(--ax-superficie-2));
  box-shadow:var(--ax-anel),var(--ax-sombra-2),inset 0 1px 0 rgba(255,255,255,.5)}
.r20-hero::after{content:"";position:absolute;left:26px;right:45%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ax-roxo) 70%,transparent),transparent)}
.r20-qs{display:grid;grid-template-columns:1fr auto 1fr auto 1.08fr;align-items:stretch;gap:12px}
.r20-op{align-self:center;font-size:12px;color:var(--ax-texto-mudo);letter-spacing:.02em}
.r20-q{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 18px 16px;border-radius:var(--ax-raio-l);cursor:help;outline:none;
  background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1);
  transition:transform var(--ax-dur-2) var(--ax-curva),box-shadow var(--ax-dur-2) var(--ax-curva)}
.r20-q:hover,.r20-q:focus-visible{transform:translateY(-2px);box-shadow:var(--ax-anel),var(--ax-sombra-3)}
.r20-q:focus-visible{box-shadow:inset 0 0 0 1px var(--ax-acento),var(--ax-foco),var(--ax-sombra-3)}
.r20-q-top{display:flex;align-items:center;gap:9px;color:var(--ax-texto-mudo)}
.r20-q-top small{flex:1;font-size:13px;font-weight:600;color:var(--ax-texto-2)}
.r20-q-top>.r20-ic:last-child{opacity:.55}
.r20-q-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--ax-acento);background:var(--ax-acento-suave);box-shadow:inset 0 0 0 1px var(--ax-acento-borda)}
.r20-q.sai .r20-q-ic{color:var(--r20-g5);background:color-mix(in srgb,var(--r20-g5) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r20-g5) 30%,transparent)}
.r20-q-v{font-size:clamp(24px,2.6vw,31px);font-weight:700;letter-spacing:-.025em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r20-q-v small{font-size:.58em;font-weight:600;opacity:.6;letter-spacing:0}
.r20-q-v.neg{color:var(--r20-cr)}
.r20-q-pe{display:flex;flex-wrap:wrap;gap:6px}
.r20-meta-b{display:block;height:5px;border-radius:9px;background:var(--ax-afundada);overflow:hidden;box-shadow:inset 0 1px 1px rgba(0,0,0,.06)}
.r20-meta-b i{display:block;height:100%;border-radius:9px;background:var(--r20-ok);transition:width .5s var(--ax-curva)}
.r20-meta-b i.at{background:var(--r20-at)} .r20-meta-b i.cr{background:var(--r20-cr)}
/* o que sobrou: peça escura nos dois temas, com luz roxa */
.r20-q.sob{color:#fff;background:radial-gradient(420px 200px at 100% 0%,rgba(132,54,254,.55),transparent 65%),linear-gradient(150deg,#1B1C4A 0%,#111233 75%);
  box-shadow:0 14px 34px rgba(17,18,51,.28),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.12)}
.r20-q.sob:hover,.r20-q.sob:focus-visible{box-shadow:0 20px 44px rgba(17,18,51,.36),inset 0 0 0 1px rgba(167,119,255,.4)}
.r20-q.sob::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:16px 16px;-webkit-mask-image:linear-gradient(120deg,transparent 30%,#000);mask-image:linear-gradient(120deg,transparent 30%,#000)}
.r20-q.sob .r20-q-top,.r20-q.sob .r20-q-top small{color:#C9C6E8}
.r20-q.sob .r20-q-ic{color:#fff;background:rgba(167,119,255,.22);box-shadow:inset 0 0 0 1px rgba(167,119,255,.45)}
.r20-q.sob .r20-q-v.neg{color:#FF9B8E}
.r20-q.sob .r20-chip{background:rgba(255,255,255,.08);color:#D9D6F2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.r20-q.sob .r20-chip.ok{color:#7FE0B5} .r20-q.sob .r20-chip.cr{color:#FFA394} .r20-q.sob .r20-chip.at{color:#F4C77A}
.r20-q.sob .r20-meta-b{background:rgba(255,255,255,.1)}
.r20-frase p{font-size:16px;line-height:1.6;color:var(--ax-texto-2);max-width:860px}
.r20-frase p b{color:var(--ax-texto);font-weight:600}
.r20-frase .r20-frase-2{margin-top:4px;font-size:14px;color:var(--ax-texto-mudo)}

/* ---------- chips de comparação ---------- */
.r20-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--ax-raio-pilula);font-size:12px;white-space:nowrap;
  color:var(--ax-texto-mudo);background:var(--ax-superficie-2);box-shadow:inset 0 0 0 1px var(--ax-borda)}
.r20-chip b{font-weight:600}
.r20-chip span{opacity:.8}
.r20-chip svg{width:8px;height:8px;fill:currentColor}
.r20-chip.ok{color:var(--r20-ok);background:var(--ax-ok-suave);box-shadow:none}
.r20-chip.cr{color:var(--r20-cr);background:var(--ax-erro-suave);box-shadow:none}
.r20-chip.at{color:var(--r20-at);background:var(--ax-alerta-suave);box-shadow:none}

/* ---------- caixas ---------- */
.r20-box{border-radius:var(--ax-raio-l);padding:20px 22px;background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.r20-box>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.r20-box h2{font-size:var(--ax-t-destaque,15.5px);font-weight:650;letter-spacing:-.01em}
.r20-box>header p{font-size:13px;color:var(--ax-texto-mudo)}
.r20-duas{display:grid;grid-template-columns:1fr 1.25fr;gap:20px;align-items:start}

/* a cada R$ 100 */
.r20-barra{display:flex;gap:3px;height:22px;padding:3px;border-radius:12px;background:var(--ax-afundada);box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.r20-barra span{min-width:4px;border-radius:7px;background:linear-gradient(180deg,color-mix(in srgb,var(--r20-c) 82%,#fff),var(--r20-c));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.12);cursor:help;outline:none;transition:transform var(--ax-dur-1) var(--ax-curva),filter var(--ax-dur-1)}
.r20-barra span:hover,.r20-barra span:focus-visible{transform:scaleY(1.18);filter:brightness(1.06)}
.r20-barra span.sob{--r20-c:var(--r20-ok)}
.r20-cem-leg{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.r20-cem-leg li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ax-texto-mudo)}
.r20-cem-leg li i{width:10px;height:10px;border-radius:3px;background:var(--r20-c)}
.r20-cem-leg li.sob i{background:var(--r20-ok)}
.r20-cem-leg li b{color:var(--ax-texto);font-weight:650}

/* linhas */
.r20-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.r20-lin{width:100%;display:grid;grid-template-columns:1fr auto 18px;grid-template-areas:"n v car" "b b b" "c c c";align-items:center;gap:8px 12px;
  padding:12px 12px 12px 14px;border:0;border-radius:12px;text-align:left;font:inherit;color:inherit;cursor:pointer;background:transparent;
  box-shadow:inset 0 0 0 1px transparent;transition:background var(--ax-dur-1) var(--ax-curva),box-shadow var(--ax-dur-1)}
.r20-lin:hover{background:var(--ax-superficie-2);box-shadow:inset 0 0 0 1px var(--ax-borda)}
.r20-lin:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--ax-acento),var(--ax-foco)}
.r20-lin[aria-expanded="true"]{background:var(--ax-superficie-2);box-shadow:inset 0 0 0 1px var(--ax-acento-borda)}
.r20-lin-n{grid-area:n;display:flex;flex-direction:column;gap:2px;min-width:0}
.r20-lin-n b{font-size:14.5px;font-weight:600}
.r20-lin-n small{font-size:11.5px;color:var(--ax-texto-fraco);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r20-lin-v{grid-area:v;font-size:15px;font-weight:650;white-space:nowrap}
.r20-lin-v.neg{color:var(--r20-cr)}
.r20-lin-b{grid-area:b;height:7px;border-radius:9px;background:var(--ax-afundada);overflow:hidden}
.r20-lin-b i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,color-mix(in srgb,var(--r20-g1) 70%,#fff),var(--r20-g1));transition:width .5s var(--ax-curva)}
.r20-li.sai .r20-lin-b i{background:linear-gradient(90deg,color-mix(in srgb,var(--r20-g5) 70%,#fff),var(--r20-g5))}
.r20-lin-c{grid-area:c;display:flex;flex-wrap:wrap;gap:6px}
.r20-lin-car{grid-area:car;color:var(--ax-texto-fraco);display:grid;place-items:center;transition:transform var(--ax-dur-2) var(--ax-curva)}
.r20-lin[aria-expanded="true"] .r20-lin-car{transform:rotate(180deg);color:var(--ax-acento)}
.r20-det{margin:4px 4px 8px 14px;padding:14px 16px;border-radius:12px;background:var(--ax-superficie-2);box-shadow:inset 0 0 0 1px var(--ax-borda);animation:r20-entra var(--ax-dur-3) var(--ax-curva)}
@keyframes r20-entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.r20-det-txt{font-size:13.5px;line-height:1.55;color:var(--ax-texto-2)}
.r20-dl{margin:10px 0 0;display:flex;flex-direction:column;gap:7px}
.r20-dl div{display:grid;grid-template-columns:110px 1fr;gap:10px;font-size:13px;line-height:1.45}
.r20-dl dt{color:var(--ax-texto-mudo)}
.r20-dl dd{margin:0;color:var(--ax-texto)}
.r20-dl dd span{color:var(--ax-texto-mudo);margin-left:6px}
.r20-comp{margin-top:12px}
.r20-comp h3{font-size:12px;font-weight:600;color:var(--ax-texto-mudo);margin-bottom:6px}
.r20-comp ul{list-style:none;margin:0;padding:0}
.r20-comp li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 0;border-top:1px solid var(--ax-borda)}
.r20-comp li:first-child{border-top:0}
.r20-comp li span{display:flex;flex-direction:column;gap:2px;min-width:0}
.r20-comp li b{font-size:13.5px;font-weight:550}
.r20-comp li small{font-size:12px;color:var(--ax-texto-mudo);line-height:1.4}
.r20-comp li em{font-style:normal;font-size:13.5px;font-weight:600;white-space:nowrap}
.r20-comp li.mais span{font-size:12px;color:var(--ax-texto-mudo)}

/* balão de explicação */
.r20-pop{position:fixed;z-index:60;padding:14px 16px;border-radius:14px;background:var(--ax-flutuante);color:var(--ax-texto);pointer-events:none;
  box-shadow:var(--ax-anel),var(--ax-sombra-3);opacity:0;transform:translateY(4px);transition:opacity var(--ax-dur-2) var(--ax-curva),transform var(--ax-dur-2) var(--ax-curva)}
.r20-pop[data-em="cima"]{transform:translateY(-4px)}
.r20-pop.vis{opacity:1;transform:none;pointer-events:auto}
.r20-pop-t{display:block;font-size:14px;font-weight:650;margin-bottom:2px}
.r20-pop-tec{display:block;font-size:11.5px;color:var(--ax-texto-fraco);margin-bottom:6px}
.r20-pop .r20-det-txt{font-size:13px;margin-top:4px}
.r20-pop p{font-size:13px;line-height:1.5;color:var(--ax-texto-2)}
.r20-pop .r20-dl div{grid-template-columns:96px 1fr;font-size:12.5px}
.r20-pop-dica{display:block;margin-top:10px;font-size:11.5px;color:var(--ax-acento)}

.r20-graf #r20-g{min-height:280px}
.r20-nota{font-size:12.5px;color:var(--ax-texto-mudo);line-height:1.55}
.r20-nota a{color:var(--ax-acento)}

/* ---------- escuro ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .r20-hero{box-shadow:var(--ax-anel),var(--ax-sombra-2),inset 0 1px 0 rgba(255,255,255,.04)}}
:root[data-theme="dark"] .r20-hero{box-shadow:var(--ax-anel),var(--ax-sombra-2),inset 0 1px 0 rgba(255,255,255,.04)}

/* ---------- telas menores ---------- */
@media (max-width:1100px){.r20-duas{grid-template-columns:1fr}}
@media (max-width:900px){
  .r20-qs{grid-template-columns:1fr}
  .r20-op{justify-self:center;margin:-4px 0;font-size:11.5px}
}
@media (max-width:600px){
  .r20{gap:16px}
  .r20-cab h1{font-size:24px}
  .r20-ac{width:100%}
  .r20-mes{flex:1}
  .r20-mes-sel{flex:1;min-width:0;white-space:nowrap;padding:0 4px;font-size:13px}
  .r20-ac .btn{padding-left:12px;padding-right:12px}
  .r20-hero{padding:16px;border-radius:16px;gap:16px}
  .r20-q{padding:15px}
  .r20-box{padding:16px 14px}
  .r20-lin{padding:11px 10px}
  .r20-det{margin-left:6px;margin-right:0;padding:12px}
  .r20-dl div{grid-template-columns:1fr;gap:1px}
  .r20-frase p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.r20 *,.r20-pop{transition:none!important;animation:none!important}}