/* ============================================================
   PAINEL BRX — folha de estilo do layout
   Alto relevo, dois temas, paleta tirada da logo.

   Como usar
   ---------
   1. Inclua este arquivo e a imagem brx-logo-128.png ao lado dele.
   2. Ponha .brx-app no elemento que envolve o painel.
      Para o tema escuro, acrescente .escuro nesse mesmo elemento:

        <div class="brx-app">          → claro
        <div class="brx-app escuro">   → escuro

   3. Copie a marcação das telas em desktop/*.html e mobile/*.html.

   Todo o CSS está escopado em .brx-app — nada aqui vaza para o
   resto do projeto, mesmo que você já tenha uma classe .card.
   No celular, o mesmo elemento recebe também a classe .mob.

   A fonte é Inter Tight (Google Fonts). Se preferir outra, troque
   no seletor .brx-app; nada mais depende dela.
   ============================================================ */

/* ── carregamento ── */
@keyframes shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
.brx-app .sk{background:linear-gradient(100deg,rgba(124,58,237,.10) 30%,rgba(255,255,255,.75) 48%,rgba(124,58,237,.10) 66%);
  background-size:280% 100%;animation:shimmer 1.35s linear infinite;border-radius:8px;display:block}
.brx-app .sk.r{border-radius:999px}
@media (prefers-reduced-motion:reduce){.brx-app .sk{animation:none}}
.brx-app .sk-kpi{background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--edge);
  border-radius:var(--r);padding:17px 18px;box-shadow:var(--up)}
.brx-app .sk-card{background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--edge);
  border-radius:var(--r);padding:20px 22px;box-shadow:var(--up)}

/* ── entrada do conteúdo ── */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.brx-app .da-body > *{animation:riseIn .38s cubic-bezier(.22,.9,.3,1) both}
.brx-app .da-body > *:nth-child(2){animation-delay:.05s}
.brx-app .da-body > *:nth-child(3){animation-delay:.1s}
.brx-app .da-body > *:nth-child(4){animation-delay:.15s}
.brx-app .da-body > *:nth-child(5){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){.brx-app .da-body > *{animation:none}}

/* ── barras verticais animadas + reflexo ── */
.brx-app .chartwrap{position:relative}
.brx-app .chartwrap svg .bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);
  transition:transform .6s cubic-bezier(.2,.85,.3,1)}
.brx-app .chartwrap.on svg .bar{transform:scaleY(1)}
.brx-app .chartwrap svg .refl{transform-box:fill-box;transform-origin:top;transform:scaleY(0);
  transition:transform .6s cubic-bezier(.2,.85,.3,1)}
.brx-app .chartwrap.on svg .refl{transform:scaleY(1)}
.brx-app .chartwrap svg .col{cursor:pointer}
.brx-app .chartwrap svg .col:hover .bar,.brx-app .chartwrap svg .col.hot .bar{filter:brightness(1.08)}
.brx-app .chartwrap svg .hit{fill:transparent}
.brx-app .chartwrap svg .glow{opacity:0;transition:opacity .18s}
.brx-app .chartwrap svg .col:hover .glow,.brx-app .chartwrap svg .col.hot .glow{opacity:1}
@media (prefers-reduced-motion:reduce){
  .brx-app .chartwrap svg .bar,.brx-app .chartwrap svg .refl{transform:scaleY(1);transition:none}
}

/* ── linha desenhada ── */
.brx-app .drawline{transition:stroke-dashoffset 1.05s cubic-bezier(.3,.8,.35,1)}
.brx-app .dot-end{opacity:0;transition:opacity .3s .85s}
.brx-app .chartwrap.on .dot-end{opacity:1}

/* ── arco segmentado ── */
.brx-app .arcwrap{position:relative;width:124px;height:124px;flex:0 0 auto}
.brx-app .arcwrap svg{display:block}
.brx-app .arcwrap .seg{stroke-dasharray:0 999;transition:stroke-dasharray .9s cubic-bezier(.25,.9,.3,1),
  stroke-width .22s, opacity .22s;cursor:pointer}
/* --da é escrita pelo JS quando um pedaço do arco é destacado;
   sem ele o arco fica no estado normal, com os valores inline do SVG */
.brx-app .arcwrap.on .seg{stroke-dasharray:var(--da)}
.brx-app .arcwrap .seg:hover,.brx-app .arcwrap .seg.hot{stroke-width:17}
.brx-app .arcwrap.dim .seg:not(.hot){opacity:.28}
.brx-app .arc-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none}
.brx-app .arc-center b{font-size:24px;font-weight:800;letter-spacing:-.04em;color:var(--tx);
  font-variant-numeric:tabular-nums;line-height:1;transition:.16s}
.brx-app .arc-center span{font-size:10px;color:var(--tx3);font-weight:700;margin-top:3px;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.brx-app .arcwrap .seg{transition:none}}

/* ── pontos do scatter ── */
.brx-app .pt{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);
  transition:opacity .4s, transform .5s cubic-bezier(.2,1.2,.4,1)}
.brx-app .chartwrap.on .pt{opacity:.9;transform:scale(1)}

/* ── tooltip ── */
.brx-app .tip{position:absolute;pointer-events:none;background:rgba(255,255,255,.82);border-radius:12px;
  padding:9px 13px;backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(76,29,149,.2);
  font-size:11.5px;color:var(--tx2);
  opacity:0;transform:translate(-50%,-108%) scale(.96);transition:opacity .14s, transform .14s;
  white-space:nowrap;z-index:9;font-weight:600;line-height:1.4}
.brx-app .tip.on{opacity:1;transform:translate(-50%,-116%) scale(1)}
.brx-app .tip b{display:block;color:var(--tx);font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.brx-app .tip i{font-style:normal;color:var(--tx3);font-size:10.5px}

/* ── barras horizontais animadas ── */
.brx-app .tl .bar i, .brx-app .task .bar i{transition:width .7s cubic-bezier(.2,.85,.3,1)}
.brx-app .tl .it{cursor:default}
.brx-app .tl .it:hover .bar i{filter:brightness(1.06)}

/* ── número contando ── */
.brx-app .kpi .v{transition:none}


/* ═══════════════════════════════════════════════════════════
   O APP — alto relevo, gradiente roxo → magenta
   Superfície e fundo são a MESMA cor; o que separa é a sombra:
   escura de um lado, clara do outro. Quem recebe toque afunda.
   ═══════════════════════════════════════════════════════════ */
.brx-app{
  /* claro */
  --bg:#E9EAEF;
  --sd:#C4C5CE;        /* sombra */
  --sl:#FFFFFF;        /* luz */
  --tx:#2B2A38; --tx2:#69677D; --tx3:#9997AB;
  --acc:#7A05D6; --acc2:#C40265;
  --acc-grad:linear-gradient(135deg,#8905F3 0%,#C104B4 52%,#F90276 100%);
  --acc-s:rgba(137,5,243,.12);
  --ok:#0D8F66; --ok-s:rgba(13,143,102,.14); --ok-grad:linear-gradient(135deg,#12B27F,#0D8F66);
  --wt:#9A6100; --wt-s:rgba(154,97,0,.14); --wt-grad:linear-gradient(135deg,#E9A62B,#C98400);
  --dn:#C32B49; --dn-s:rgba(195,43,73,.12);
  --off:#8A889C; --off-s:rgba(138,136,156,.16);
  --bar-neutro:#C9C6D6; --track:rgba(43,42,56,.07);
  --edge:transparent; --edge-2:rgba(43,42,56,.07);
  --glass:var(--bg); --glass-2:var(--bg); --glass-3:var(--bg);
  --r:22px; --r-s:15px;
  --up:7px 7px 15px var(--sd), -7px -7px 15px var(--sl);
  --up-s:4px 4px 9px var(--sd), -4px -4px 9px var(--sl);
  --up-h:10px 10px 22px var(--sd), -9px -9px 20px var(--sl);
  --in:inset 5px 5px 10px var(--sd), inset -5px -5px 10px var(--sl);
  --in-s:inset 3px 3px 7px var(--sd), inset -3px -3px 7px var(--sl);
  --glow:rgba(180,4,180,.34);
  --blur:none;
  background:var(--bg); color:var(--tx);
  font-family:"Inter Tight","Helvetica Neue",sans-serif;
  font-size:13px; line-height:1.45;
  display:grid; grid-template-columns:216px 1fr; height:calc(100vh - 78px); overflow:hidden;
}
.brx-app.escuro{
  --bg:#2C2C34;
  --sd:#212127;
  --sl:#373742;
  --tx:#ECEBF2; --tx2:#A3A1B6; --tx3:#79778D;
  --acc:#C77DFF; --acc2:#FF5CA8;
  --acc-grad:linear-gradient(135deg,#8905F3 0%,#C104B4 52%,#F90276 100%);
  --acc-s:rgba(199,125,255,.16);
  --ok:#2FD39B; --ok-s:rgba(47,211,155,.15); --ok-grad:linear-gradient(135deg,#2FD39B,#17A87A);
  --wt:#F5B335; --wt-s:rgba(245,179,53,.15); --wt-grad:linear-gradient(135deg,#F5B335,#D8930F);
  --dn:#F76A85; --dn-s:rgba(247,106,133,.15);
  --off:#8A889C; --off-s:rgba(138,136,156,.18);
  --bar-neutro:#4A4A58; --track:rgba(0,0,0,.22);
  --edge-2:rgba(255,255,255,.05);
  --glow:rgba(220,4,160,.42);
  color-scheme:dark;
}
.brx-app.mob{grid-template-columns:1fr;min-height:720px;position:relative}
.brx-app.plain{grid-template-columns:1fr}

/* ── barra lateral ── */
.brx-app .da-side{background:var(--bg);padding:20px 14px;display:flex;flex-direction:column;gap:18px;
  height:100%;overflow-y:auto;box-shadow:9px 0 20px -14px var(--sd);z-index:2}
.brx-app .da-brand{display:flex;align-items:center;gap:11px;padding:2px 6px 0}
.brx-app .da-brand .mk{width:38px;height:38px;border-radius:12px;background-image:url('brx-logo-128.png');background-size:116%;background-position:center;background-repeat:no-repeat;background-color:#000;color:transparent;font-size:0;
  box-shadow:0 6px 18px var(--glow)}
.brx-app .da-brand b{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.brx-app .da-nav{display:flex;flex-direction:column;gap:7px}
.brx-app .da-nav .gl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);
  padding:14px 12px 4px;font-weight:800;margin:0}
.brx-app .da-nav button{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-s);
  color:var(--tx2);font-size:12.5px;font-weight:600;border:0;background:transparent;width:100%;
  text-align:left;cursor:pointer;font-family:inherit;transition:.18s}
.brx-app .da-nav button:hover{color:var(--tx);box-shadow:var(--up-s)}
.brx-app .da-nav button:active{box-shadow:var(--in-s)}
.brx-app .da-nav button .ic{width:30px;height:30px;border-radius:11px;display:grid;place-items:center;
  font-size:12px;box-shadow:var(--up-s);flex:0 0 auto;color:var(--tx3);transition:.18s}
.brx-app .da-nav button.on{color:var(--tx);box-shadow:var(--in-s)}
.brx-app .da-nav button.on .ic{background:var(--acc-grad);color:#fff;box-shadow:0 5px 14px var(--glow)}
.brx-app .da-nav .cnt{margin-left:auto;background:var(--acc-grad);color:#fff;border-radius:99px;
  font-size:9.5px;font-weight:800;padding:2px 7px}
.brx-app .da-side .btm{margin-top:auto;display:flex;align-items:center;gap:11px;font-size:11.5px;
  color:var(--tx3);line-height:1.35;cursor:pointer;padding:12px;border-radius:var(--r-s);
  box-shadow:var(--up-s)}
.brx-app .da-side .btm:hover{box-shadow:var(--in-s)}
.brx-app .da-side .btm .av{width:32px;height:32px;border-radius:50%;background:var(--acc-grad);flex:0 0 auto;
  box-shadow:0 4px 12px var(--glow)}

/* ── topo ── */
.brx-app .da-main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.brx-app .da-top{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:16px 24px;background:var(--bg);
  z-index:2;flex-wrap:wrap;box-shadow:0 9px 18px -16px var(--sd)}
.brx-app .da-top h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.03em}
.brx-app .da-top .sub{font-size:11.5px;color:var(--tx3)}
.brx-app .da-top .rt{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.brx-app .da-body{padding:20px 24px 34px;min-width:0;overflow-y:auto;flex:1}

/* ── átomos ── */
.brx-app .pill{border:0;border-radius:999px;padding:9px 16px;font-size:11.5px;font-weight:700;color:var(--tx2);
  background:var(--bg);white-space:nowrap;cursor:pointer;font-family:inherit;
  box-shadow:var(--up-s);transition:.16s}
.brx-app .pill:hover{color:var(--tx)}
.brx-app .pill:active{box-shadow:var(--in-s)}
.brx-app .pill.on{color:#fff;background:var(--acc-grad);
  box-shadow:0 6px 16px var(--glow), inset 0 1px 0 rgba(255,255,255,.26)}
.brx-app select.pill{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),
                   linear-gradient(135deg,var(--tx3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 15px,calc(100% - 13px) 15px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;color:var(--tx2)}
.brx-app select.pill option{background:#2C2C34;color:#ECEBF2}
.brx-app:not(.escuro) select.pill option{background:#E9EAEF;color:#2B2A38}

.brx-app .btn{border-radius:999px;padding:10px 18px;font-size:11.5px;font-weight:800;white-space:nowrap;
  border:0;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;transition:.16s}
.brx-app .btn.p{background:var(--acc-grad);color:#fff;
  box-shadow:0 7px 18px var(--glow), inset 0 1px 0 rgba(255,255,255,.26)}
.brx-app .btn.p:hover{box-shadow:0 10px 24px var(--glow), inset 0 1px 0 rgba(255,255,255,.3);transform:translateY(-1px)}
.brx-app .btn.p:active{transform:translateY(0);box-shadow:inset 3px 3px 9px rgba(0,0,0,.30)}
.brx-app .btn.s{background:var(--bg);color:var(--tx2);box-shadow:var(--up-s);font-weight:700}
.brx-app .btn.s:hover{color:var(--tx)}
.brx-app .btn.s:active{box-shadow:var(--in-s)}
.brx-app .btn.t{color:var(--acc);font-weight:700;padding:9px 6px;background:transparent}
.brx-app .btn.t:hover{filter:brightness(1.15)}

.brx-app .inp{border:0;border-radius:999px;padding:10px 18px;font-size:11.5px;color:var(--tx);
  background:var(--bg);font-family:inherit;min-width:210px;box-shadow:var(--in-s)}
.brx-app .inp::placeholder{color:var(--tx3)}
.brx-app .inp:focus{outline:0;box-shadow:var(--in-s), 0 0 0 2px var(--acc)}

.brx-app .bell{position:relative;width:38px;height:38px;border-radius:50%;border:0;background:var(--bg);
  display:grid;place-items:center;font-size:13px;color:var(--tx2);cursor:pointer;box-shadow:var(--up-s)}
.brx-app .bell:hover{color:var(--acc)} .brx-app .bell:active{box-shadow:var(--in-s)}
.brx-app .bell .n{position:absolute;top:-2px;right:-2px;background:var(--acc-grad);color:#fff;border-radius:99px;
  font-size:9px;font-weight:800;padding:1px 5px;box-shadow:0 3px 8px var(--glow)}
.brx-app .fresh{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tx3)}
.brx-app .fresh i{width:7px;height:7px;border-radius:50%;background:var(--ok);font-style:normal;
  box-shadow:0 0 8px var(--ok)}

.brx-app .chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 12px;
  font-size:10.5px;font-weight:800;white-space:nowrap;box-shadow:var(--in-s)}
.brx-app .chip small{font-weight:600;opacity:.85}
.brx-app .chip.ok{background:var(--ok-s);color:var(--ok)}
.brx-app .chip.wt{background:var(--wt-s);color:var(--wt)}
.brx-app .chip.of{background:var(--off-s);color:var(--tx2)}
.brx-app .chip.cn{background:var(--off-s);color:var(--tx3)}
.brx-app .chip.pu{background:var(--acc-s);color:var(--acc)}
.brx-app .chip.dn{background:var(--dn-s);color:var(--dn)}

/* ── cartões ── */
.brx-app .card{background:var(--bg);border:0;border-radius:var(--r);padding:20px 22px;box-shadow:var(--up)}
.brx-app .card > h4{margin:0 0 3px;font-size:14px;font-weight:800;letter-spacing:-.02em}
.brx-app .card > .hint{margin:0 0 14px;font-size:11px;color:var(--tx3);line-height:1.5}
.brx-app .card > .hint b{color:var(--tx2)}

.brx-app .kpis{display:grid;gap:18px;margin-bottom:20px}
.brx-app .kpis.k5{grid-template-columns:repeat(5,1fr)}
.brx-app .kpis.k4{grid-template-columns:repeat(4,1fr)}
.brx-app .kpi{background:var(--bg);border-radius:var(--r);padding:18px 19px;box-shadow:var(--up);transition:.22s}
.brx-app .kpi:hover{box-shadow:var(--up-h);transform:translateY(-2px)}
.brx-app .kpi .lb{font-size:10px;letter-spacing:.11em;color:var(--tx3);text-transform:uppercase;
  font-weight:800;margin:0 0 12px}
.brx-app .kpi .rowv{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-width:0}
.brx-app .kpi .rowv .chartwrap{flex:0 0 auto}
.brx-app .kpi .v{font-size:23px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  line-height:1;white-space:nowrap}
.brx-app .kpi .v small{font-size:12px;color:var(--tx3);font-weight:700}
.brx-app .kpi .dl{font-size:10.5px;font-weight:700;margin:11px 0 0}
.brx-app .kpi .dl.up{color:var(--ok)} .brx-app .kpi .dl.dn{color:var(--dn)} .brx-app .kpi .dl.n{color:var(--tx3);font-weight:600}

.brx-app .g3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:18px;margin-bottom:18px}
.brx-app .g2b{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:18px}
.brx-app .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.brx-app .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}

.brx-app .legend{display:flex;gap:16px;font-size:10.5px;color:var(--tx2);margin-bottom:10px}
.brx-app .legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px;font-style:normal}

/* ── barras: trilho afundado, preenchimento em relevo ── */
.brx-app .tl{display:flex;flex-direction:column;gap:12px}
.brx-app .tl .it{display:grid;grid-template-columns:64px 1fr 82px;gap:12px;align-items:center;font-size:11.5px}
.brx-app .tl .d{color:var(--tx3);font-variant-numeric:tabular-nums;font-weight:600}
.brx-app .tl .bar{height:11px;border-radius:99px;background:var(--bg);box-shadow:var(--in-s);overflow:hidden}
.brx-app .tl .bar i{display:block;height:100%;border-radius:99px;background:var(--wt-grad);
  transition:width .55s cubic-bezier(.2,.85,.3,1)}
.brx-app .tl .bar i.p{background:linear-gradient(90deg,var(--bar-neutro),var(--bar-neutro))}
.brx-app .tl .bar i.g{background:var(--ok-grad)}
.brx-app .tl .a{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tx)}
.brx-app .tl .it.best .d,.brx-app .tl .it.best .a{color:var(--acc)}
.brx-app .tl .it.best .bar i{background:var(--acc-grad);box-shadow:0 0 12px var(--glow)}
.brx-app .tl .a em{font-style:normal;color:var(--tx3);font-size:10px;margin-left:5px;font-weight:600}

.brx-app .split{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brx-app .split .lgd{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--tx2);flex:0 1 300px;min-width:0}
.brx-app .split .lgd .r{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:12px;transition:.18s}
.brx-app .split .lgd .r:hover,.brx-app .split .lgd .r.hot{box-shadow:var(--in-s)}
.brx-app .split .lgd .r i{width:11px;height:11px;border-radius:4px;font-style:normal;flex:0 0 auto}
.brx-app .split .lgd .r b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--tx);font-weight:800}
.brx-app .split .lgd .r span.pc{color:var(--tx3);font-size:10.5px;font-weight:700;min-width:34px;text-align:right}

/* ── tabela ── */
.brx-app .tblhd{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.brx-app .tblhd h4{margin:0;font-size:14px;font-weight:800;letter-spacing:-.02em}
.brx-app .tblhd .rt{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.brx-app .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-s)}
.brx-app table.t{width:100%;border-collapse:collapse;font-size:11.5px}
.brx-app.mob table.t{min-width:520px}
.brx-app table.t th{text-align:left;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx3);font-weight:800;padding:0 12px 11px}
.brx-app table.t td{padding:12px;border-top:1px solid var(--edge-2);vertical-align:middle;color:var(--tx2)}
.brx-app table.t .grp td{background:var(--track);font-size:10.5px;color:var(--tx2);font-weight:800;padding:8px 12px}
.brx-app table.t .pd{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.brx-app table.t .pd small{display:block;color:var(--tx3);font-size:10px}
.brx-app table.t .num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tx)}
.brx-app table.t .me td{background:var(--acc-s)}
.brx-app table.t tr.hi td{background:var(--acc-s)}
.brx-app table.t tr:hover td{background:var(--track)}
.brx-app table.t .me:hover td{background:var(--acc-s)}
.brx-app .pag{display:flex;align-items:center;gap:9px;padding-top:16px;font-size:11px;color:var(--tx3);flex-wrap:wrap}
.brx-app .pag button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:0;
  background:var(--bg);font-size:11px;color:var(--tx2);cursor:pointer;font-family:inherit;
  box-shadow:var(--up-s);font-weight:700}
.brx-app .pag button:hover{color:var(--tx)}
.brx-app .pag button.on{background:var(--acc-grad);color:#fff;box-shadow:0 5px 14px var(--glow)}
.brx-app .pag button:disabled{opacity:.35;cursor:default;box-shadow:var(--in-s)}
.brx-app .pag .rt{margin-left:auto}

/* ── metas ── */
.brx-app .task{display:grid;grid-template-columns:36px 1fr 126px;gap:14px;align-items:center;padding:15px 0;
  border-top:1px solid var(--edge-2)}
.brx-app .task:first-of-type{border-top:0;padding-top:4px}
.brx-app .task .mk{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  font-weight:800;color:var(--tx2);box-shadow:var(--up-s)}
.brx-app .task .mk.done{background:var(--ok-grad);color:#fff;box-shadow:0 4px 12px rgba(13,143,102,.35)}
.brx-app .task h6{margin:0 0 3px;font-size:12.5px;font-weight:800;color:var(--tx)}
.brx-app .task p{margin:0;font-size:10.5px;color:var(--tx3);line-height:1.45}
.brx-app .task .st{text-align:right}
.brx-app .task .bar{height:9px;border-radius:99px;background:var(--bg);box-shadow:var(--in-s);
  overflow:hidden;margin-bottom:7px}
.brx-app .task .bar i{display:block;height:100%;border-radius:99px;background:var(--acc-grad);
  transition:width .55s cubic-bezier(.2,.85,.3,1)}
.brx-app .task .bar i.g{background:var(--ok-grad)}
.brx-app .task .st span{font-size:10.5px;color:var(--tx3);font-variant-numeric:tabular-nums;font-weight:700}
.brx-app .task .st span.ok{color:var(--ok)}
.brx-app .chk{width:24px;height:24px;border-radius:8px;background:var(--bg);border:0;cursor:pointer;
  display:grid;place-items:center;font-size:10px;color:#fff;box-shadow:var(--up-s)}
.brx-app .chk.on{background:var(--ok-grad);box-shadow:0 4px 12px rgba(13,143,102,.35)}

.brx-app .read{background:var(--bg);border-radius:var(--r-s);padding:14px 17px;margin-top:16px;
  font-size:11.5px;color:var(--tx2);line-height:1.6;box-shadow:var(--in-s);
  border-left:3px solid var(--acc)}
.brx-app .read b{color:var(--tx)}
.brx-app .read.g{border-left-color:var(--ok)} .brx-app .read.w{border-left-color:var(--wt)}

.brx-app .banner{background:var(--bg);border-radius:var(--r);padding:18px 20px;display:flex;align-items:center;
  gap:16px;margin-bottom:18px;box-shadow:var(--up)}
.brx-app .banner .ic{width:46px;height:46px;border-radius:50%;background:var(--acc-grad);display:grid;
  place-items:center;color:#fff;font-size:16px;flex:0 0 auto;box-shadow:0 7px 18px var(--glow)}
.brx-app .banner h5{margin:0 0 3px;font-size:13.5px;font-weight:800}
.brx-app .banner p{margin:0;font-size:11px;color:var(--tx3)}
.brx-app .banner .rt{margin-left:auto}

/* ── campanhas e produtos ── */
.brx-app .camp{background:var(--bg);border-radius:var(--r);padding:18px 19px;display:flex;flex-direction:column;
  gap:12px;cursor:pointer;box-shadow:var(--up);transition:.2s}
.brx-app .camp:hover{transform:translateY(-3px);box-shadow:var(--up-h)}
.brx-app .camp:active{transform:translateY(0);box-shadow:var(--in-s)}
.brx-app .camp .hd{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--tx3);font-weight:600}
.brx-app .camp h5{margin:0;font-size:13.5px;font-weight:800;letter-spacing:-.02em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.brx-app .camp .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.brx-app .camp .thumbs i{aspect-ratio:1;border-radius:10px;display:block;box-shadow:var(--in-s);opacity:.85}
.brx-app .camp .ft{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--edge-2);
  font-size:10.5px;color:var(--tx3);font-weight:600}
.brx-app .camp .ft .rt{margin-left:auto}

.brx-app .prod{background:var(--bg);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--up);transition:.2s}
.brx-app .prod:hover{transform:translateY(-3px);box-shadow:var(--up-h)}
.brx-app .prod .img{aspect-ratio:1.2;position:relative;margin:11px 11px 0;border-radius:var(--r-s);
  box-shadow:var(--in-s);opacity:.9}
.brx-app .prod .img .rk{position:absolute;top:10px;left:10px;background:var(--acc-grad);color:#fff;
  border-radius:99px;padding:3px 10px;font-size:10px;font-weight:800}
.brx-app .prod .img .gw{position:absolute;top:10px;right:10px;background:var(--ok-grad);color:#fff;
  border-radius:99px;padding:3px 10px;font-size:10px;font-weight:800}
.brx-app .prod .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.brx-app .prod h6{margin:0;font-size:11.5px;font-weight:700;line-height:1.4;color:var(--tx);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.brx-app .prod .meta{font-size:10.5px;color:var(--tx3)}
.brx-app .earn{display:flex;align-items:baseline;justify-content:space-between;padding-top:11px;
  border-top:1px solid var(--edge-2);margin-top:auto}
.brx-app .earn .l{font-size:10px;color:var(--tx3);font-weight:600}
.brx-app .earn .r{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ok);font-variant-numeric:tabular-nums}
.brx-app .prod .acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

.brx-app .res{background:var(--bg);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;
  gap:9px;box-shadow:var(--up);transition:.2s}
.brx-app .res:hover{transform:translateY(-2px);box-shadow:var(--up-h)}
.brx-app .res .ic{width:46px;height:46px;border-radius:50%;color:var(--acc);display:grid;place-items:center;
  font-size:16px;margin-bottom:4px;box-shadow:var(--up-s)}
.brx-app .res .tags{display:flex;gap:7px;flex-wrap:wrap}
.brx-app .res h5{margin:0;font-size:13.5px;font-weight:800;letter-spacing:-.02em}
.brx-app .res p{margin:0;font-size:11px;color:var(--tx3);line-height:1.55}
.brx-app .res .go{margin-top:6px}

.brx-app .notif{display:grid;grid-template-columns:46px 1fr 108px;gap:15px;align-items:center;padding:15px 17px;
  cursor:pointer;border-radius:var(--r-s);margin-bottom:9px;transition:.16s}
.brx-app .notif:hover{box-shadow:var(--up-s)}
.brx-app .notif.un{box-shadow:var(--in-s)}
.brx-app .notif .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:14px;
  box-shadow:var(--up-s)}
.brx-app .notif h6{margin:0 0 3px;font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:9px;color:var(--tx)}
.brx-app .notif h6 .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.brx-app .notif p{margin:0;font-size:10.5px;color:var(--tx3);line-height:1.5}
.brx-app .notif time{font-size:10.5px;color:var(--tx3);text-align:right;font-variant-numeric:tabular-nums}

.brx-app .tier{background:var(--bg);border-radius:var(--r);padding:19px;box-shadow:var(--up)}
.brx-app .tier.now{box-shadow:var(--up), 0 0 0 2px var(--acc)}

/* ── entrada ── */
.brx-app .login{display:grid;place-items:center;height:100%;background:var(--bg);padding:30px;overflow-y:auto}
.brx-app.mob .login{min-height:720px}
.brx-app .loginbox{width:100%;max-width:400px;background:var(--bg);border:0;border-radius:28px;
  padding:36px 34px 28px;box-shadow:12px 12px 26px var(--sd), -10px -10px 24px var(--sl)}
.brx-app .loginbox .brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.brx-app .loginbox .brand .mk{width:52px;height:52px;border-radius:15px;background-image:url('brx-logo-128.png');background-size:116%;background-position:center;background-repeat:no-repeat;background-color:#000;color:transparent;font-size:0;
  box-shadow:0 10px 26px var(--glow)}
.brx-app .loginbox .brand b{font-size:16px;font-weight:800;letter-spacing:-.02em}
.brx-app .loginbox h4{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:-.035em}
.brx-app .loginbox .cap{margin:0 0 24px;font-size:12.5px;color:var(--tx3)}
.brx-app .loginbox .fld{width:100%;border:0;border-radius:999px;padding:15px 21px;font-size:12.5px;
  color:var(--tx);margin-bottom:14px;background:var(--bg);font-family:inherit;box-shadow:var(--in-s)}
.brx-app .loginbox .fld:focus{outline:0;box-shadow:var(--in-s), 0 0 0 2px var(--acc)}
.brx-app .loginbox .sub{width:100%;background:var(--acc-grad);color:#fff;border:0;border-radius:999px;
  padding:16px;font-weight:800;font-size:13.5px;margin-top:8px;cursor:pointer;font-family:inherit;
  box-shadow:0 10px 24px var(--glow), inset 0 1px 0 rgba(255,255,255,.26)}
.brx-app .loginbox .sub:hover{transform:translateY(-1px);box-shadow:0 14px 30px var(--glow)}
.brx-app .loginbox .sub:active{transform:translateY(0);box-shadow:inset 4px 4px 10px rgba(0,0,0,.32)}
.brx-app .loginbox .help{text-align:center;font-size:11px;color:var(--tx3);margin:18px 0 0}

/* ── celular ── */
.brx-app.mob .da-top{position:static;padding:14px 16px}
.brx-app.mob .da-body{padding:16px 16px 26px}
.brx-app.mob .kpis.k5,.brx-app.mob .kpis.k4{grid-template-columns:1fr 1fr;gap:13px}
.brx-app.mob .g3,.brx-app.mob .g2b{grid-template-columns:1fr;gap:13px}
.brx-app.mob .g4,.brx-app.mob .g5{grid-template-columns:1fr 1fr;gap:13px}
.brx-app.mob .card{padding:17px 18px}
.brx-app.mob .kpi{padding:15px 16px;overflow:hidden}
.brx-app.mob .kpi .lb{margin-bottom:9px;font-size:9px;letter-spacing:.09em}
.brx-app.mob .kpi .rowv{flex-direction:column;align-items:stretch;gap:9px}
.brx-app.mob .kpi .v{font-size:19px;letter-spacing:-.045em}
.brx-app.mob .kpi .chartwrap{width:100%}
.brx-app.mob .kpi .chartwrap svg{width:100%;height:18px}
.brx-app.mob .kpi .dl{margin-top:9px;font-size:10px;line-height:1.35}
.brx-app.mob table.t .pd{max-width:150px}
.brx-app.mob .split{gap:14px;justify-content:center}
.brx-app.mob .split .lgd{flex:1 1 100%}
.brx-app.mob .arcwrap{margin:0 auto}
.brx-app.mob .tl .it{grid-template-columns:52px 1fr 68px;gap:9px;font-size:11px}
.brx-app.mob .task{grid-template-columns:30px 1fr;gap:11px}
.brx-app.mob .task .st{text-align:left;grid-column:2}
.brx-app.mob{display:flex;flex-direction:column}
.brx-app.mob .da-main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.brx-app .mtop{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--bg);
  box-shadow:0 8px 16px -14px var(--sd)}
.brx-app .mtop .mk{width:34px;height:34px;border-radius:11px;background-image:url('brx-logo-128.png');background-size:116%;background-position:center;background-repeat:no-repeat;background-color:#000;color:transparent;font-size:0;
  box-shadow:0 5px 15px var(--glow)}
.brx-app .mtop h1{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.03em}
.brx-app .mtop .rt{margin-left:auto;display:flex;gap:8px;align-items:center}
.brx-app .mtab{flex:0 0 auto;background:var(--bg);display:grid;grid-template-columns:repeat(4,1fr);
  padding:11px 10px 16px;gap:6px;box-shadow:0 -8px 18px -14px var(--sd)}
.brx-app .mtab button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px;
  font-size:9.5px;color:var(--tx3);font-weight:700;border:0;background:transparent;cursor:pointer;
  font-family:inherit;position:relative;border-radius:var(--r-s)}
.brx-app .mtab button .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;box-shadow:var(--up-s);transition:.18s}
.brx-app .mtab button.on{color:var(--acc)}
.brx-app .mtab button.on .ic{background:var(--acc-grad);color:#fff;box-shadow:0 5px 14px var(--glow)}
.brx-app .mtab .badge{position:absolute;top:4px;right:24%;background:var(--acc-grad);color:#fff;
  border-radius:99px;font-size:8px;font-weight:800;padding:1px 5px;z-index:2}

/* ── perfil ── */
.brx-app .plist{background:var(--bg);border-radius:var(--r);overflow:hidden;box-shadow:var(--up);padding:7px}
.brx-app .plist button{display:flex;align-items:center;gap:14px;width:100%;padding:14px 15px;border:0;
  background:transparent;font-family:inherit;font-size:13px;color:var(--tx);font-weight:700;
  cursor:pointer;text-align:left;border-radius:var(--r-s)}
.brx-app .plist button:hover{box-shadow:var(--in-s)}
.brx-app .plist button .ic{width:40px;height:40px;border-radius:50%;color:var(--acc);display:grid;
  place-items:center;font-size:14px;box-shadow:var(--up-s)}
.brx-app .plist button .ar{margin-left:auto;color:var(--tx3);font-size:15px}
.brx-app .pcard{background:var(--bg);border-radius:var(--r);padding:22px;color:var(--tx);margin-bottom:16px;
  display:flex;align-items:center;gap:16px;box-shadow:var(--up)}
.brx-app .pcard .av{width:58px;height:58px;border-radius:50%;background:var(--acc-grad);
  box-shadow:0 7px 18px var(--glow)}
.brx-app .pcard .nm{font-size:18px;font-weight:800;letter-spacing:-.03em}
.brx-app .pcard .sb{font-size:12px;color:var(--tx3)}

/* ── esqueleto ── */
.brx-app .sk-kpi{background:var(--bg);border-radius:var(--r);padding:18px 19px;box-shadow:var(--up)}
.brx-app .sk-card{background:var(--bg);border-radius:var(--r);padding:20px 22px;box-shadow:var(--up)}
.brx-app .sk{background:linear-gradient(100deg,var(--track) 30%,var(--sl) 48%,var(--track) 66%)}

/* ── dica ── */
.brx-app .tip{background:var(--bg);border:0;box-shadow:6px 6px 14px var(--sd), -5px -5px 12px var(--sl)}

/* ── arco ── */
.brx-app .arcwrap{position:relative;width:124px;height:124px;flex:0 0 auto}
.brx-app .arcwrap svg{display:block}
.brx-app .arcwrap .seg{stroke-dasharray:0 999;
  transition:stroke-dasharray .9s cubic-bezier(.25,.9,.3,1), stroke-width .22s, opacity .22s;cursor:pointer}
/* --da é escrita pelo JS quando um pedaço do arco é destacado;
   sem ele o arco fica no estado normal, com os valores inline do SVG */
.brx-app .arcwrap.on .seg{stroke-dasharray:var(--da)}
.brx-app .arcwrap .seg:hover,.brx-app .arcwrap .seg.hot{stroke-width:17}
.brx-app .arcwrap.dim .seg:not(.hot){opacity:.28}
.brx-app .arc-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none}
.brx-app .arc-center b{font-size:24px;font-weight:800;letter-spacing:-.04em;color:var(--tx);
  font-variant-numeric:tabular-nums;line-height:1;transition:.16s}
.brx-app .arc-center span{font-size:10px;color:var(--tx3);font-weight:700;margin-top:3px;letter-spacing:.02em}

/* ── cores dos gráficos vêm do tema ── */
.brx-app .g-grid{stroke:var(--edge-2)}
.brx-app .g-neutro{fill:var(--bar-neutro)}
.brx-app .g-ok{fill:var(--ok)}
.brx-app .g-acc{fill:var(--acc)}
.brx-app .g-tx{fill:var(--tx)}
.brx-app .g-tx3{fill:var(--tx3)}
.brx-app .g-trend{stroke:var(--acc);opacity:.45}
.brx-app .g-track{stroke:var(--track)}