/* ============================================================
   TEMA — Vupi (vupi.bet.br, marca irmã da EstrelaBet)
   Painel branco (design system da Tap); a identidade da casa vive na marca.
   Extraído do site real em 14/09/2026:
     fundo #111111 · lavanda #B8A3FF (botões e links) · texto branco · fonte Inter
   A lavanda pura não tem contraste em fundo branco, então botões/texto usam um
   violeta mais fechado da mesma família; a lavanda fica nos realces (heatmap,
   chips, fundo suave) e no botão da logo.
   ============================================================ */
:root{
  --marca:#B8A3FF;          /* lavanda Vupi (realces) */
  --marca-forte:#5B43D6;    /* 6.4:1 sobre branco — botões e links */
  --marca-hover:#4632B3;    /* 8.6:1 */
  --marca-suave:rgba(184,163,255,.16);
  --marca-contraste:#ffffff;

  --logo-a:#111111;         /* fundo escuro do site */
  --logo-b:#B8A3FF;

  --sombra-marca:0 8px 16px 0 rgba(91,67,214,.24);
}

/* ---------- marca Vupi ----------
   O wordmark oficial é branco. Em fundo branco sumiria, então vai dentro de um
   badge escuro (#111) — exatamente como a casa se apresenta no site. */
.marca,.logo.marca{display:flex;align-items:center;gap:10px}
.marca img,.logo img{
  background:var(--logo-a);
  border-radius:8px;padding:8px 12px;box-sizing:content-box;
  height:20px;width:auto;
}
.sidebar .marca{flex-direction:column;align-items:flex-start;gap:8px}
.caixa-login .marca{flex-direction:column;align-items:center;gap:10px}
.caixa-login .marca img{height:26px}
.marca .sufixo{margin-top:0}

/* o wordmark é SVG com fill=currentColor: pinta de branco via CSS */
.marca img{color:#fff}

/* ---- semáforo do custo por FTD ---- */
.cartao.metrica.bom  { border-color: rgba(34,197,94,.55); }
.cartao.metrica.bom  .valor { color: #22c55e; }
.cartao.metrica.ruim { border-color: rgba(220,38,38,.55); }
.cartao.metrica.ruim .valor { color: #DC2626; }