/* VENDEV Hub — Central de Promoções re-skin (identity ported from the Lovable
   "Command Center" remix, 05/08). EVERY rule is scoped under .promo-shell so the
   other views sharing hub.css are untouched. Fonts stay local (no Google Fonts:
   the Hub never loads third-party origins); mono uses Cascadia/Consolas which
   ship with Windows and read close to JetBrains Mono. */
.promo-shell{
  --promo-primary:hsl(263 85% 65%);
  --promo-primary-soft:hsl(263 60% 15%);
  --promo-card:hsl(260 25% 6%);
  --promo-panel2:hsl(260 20% 12%);
  --promo-border:hsl(260 20% 15%);
  --promo-grad:linear-gradient(135deg,hsl(263 85% 65%),hsl(285 80% 70%));
  --promo-grad-surface:linear-gradient(180deg,hsl(263 40% 10%),hsl(260 25% 4%));
  --promo-shadow:0 20px 60px -20px hsl(263 85% 40% / .5);
  --promo-shadow-soft:0 2px 20px -8px hsl(0 0% 0% / .5);
  --promo-radius:1rem;
  --promo-mono:'Cascadia Mono','JetBrains Mono',Consolas,ui-monospace,monospace;
  letter-spacing:-.02em;
}
/* ---------- surfaces ---------- */
.promo-shell .card{
  background:var(--promo-card);border:1px solid var(--promo-border);
  border-radius:var(--promo-radius);box-shadow:var(--promo-shadow-soft);
  transition:border-color .2s,box-shadow .2s,transform .15s;
}
.promo-shell .card:hover{border-color:hsl(263 40% 28%)}
.promo-shell .card[onclick]:hover,.promo-shell .card[style*="cursor:pointer"]:hover{
  transform:translateY(-1px);box-shadow:var(--promo-shadow)}
.promo-shell .card .lbl{letter-spacing:.8px}
.promo-shell .card .val{letter-spacing:-.03em}
/* featured/selected card: the remix's violet identity instead of the green hero */
.promo-shell .khero{
  background:var(--promo-grad-surface);border-color:hsl(263 50% 35%);
  box-shadow:var(--promo-shadow)}
.promo-shell .khero .lbl{color:hsl(263 85% 80%)}
.promo-shell .khero .val{
  background:var(--promo-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
/* ---------- tables ---------- */
.promo-shell table{
  background:var(--promo-card);border:1px solid var(--promo-border);
  border-radius:var(--promo-radius)}
.promo-shell th{background:var(--promo-panel2);letter-spacing:.7px}
.promo-shell td{border-top:1px solid var(--promo-border)}
.promo-shell tr:hover td{background:hsl(263 30% 11%)}
/* ---------- chips & pills ---------- */
.promo-shell .chip{background:var(--promo-card);border-color:var(--promo-border);border-radius:12px}
.promo-shell .chip:not(.on):not(.off):hover{border-color:var(--promo-primary);color:var(--tx)}
.promo-shell .chip.on{
  background:var(--promo-grad);border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 4px 14px -4px hsl(263 85% 55% / .55)}
.promo-shell .pill{border-radius:8px}
.promo-shell .p-roxo{background:var(--promo-primary-soft);color:hsl(263 85% 78%)}
/* ---------- buttons: approve stays GREEN (money semantics), task/neutral goes violet ---------- */
.promo-shell .btn{border-radius:10px}
.promo-shell .b-task{
  background:var(--promo-grad);color:#fff;
  box-shadow:0 4px 14px -6px hsl(263 85% 55% / .6)}
/* ---------- info banner: violet accent bar, keeps the readable blue-ish text ---------- */
.promo-shell .aviso{
  background:hsl(263 45% 10% / .8);border:1px solid hsl(263 45% 24%);
  border-left:3px solid var(--promo-primary);color:hsl(255 60% 88%);
  border-radius:12px}
/* ---------- inputs ---------- */
.promo-shell input[type=text],.promo-shell input:not([type]),.promo-shell select,.promo-shell textarea{
  background:var(--promo-panel2);border:1px solid var(--promo-border);border-radius:10px;
  color:var(--tx);padding:8px 12px;font-size:.82rem;font-family:inherit}
.promo-shell input:focus,.promo-shell select:focus,.promo-shell textarea:focus{
  outline:1px solid var(--promo-primary);border-color:var(--promo-primary)}
/* ---------- identity helpers (used by the new sub-tabs) ---------- */
.promo-shell .promo-mono{font-family:var(--promo-mono);font-size:.72rem;letter-spacing:0}
.promo-shell .promo-grad-txt{
  background:var(--promo-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800}
/* section header with the remix's gradient icon tile */
.promo-shell .promo-head{display:flex;gap:12px;align-items:center;margin:4px 0 14px}
.promo-shell .promo-head .ico{
  width:40px;height:40px;border-radius:12px;background:var(--promo-grad);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  box-shadow:0 6px 18px -6px hsl(263 85% 55% / .6);flex-shrink:0}
.promo-shell .promo-head h2{font-size:1.02rem;letter-spacing:-.03em}
.promo-shell .promo-head .sub{font-size:.72rem;color:var(--tx2)}
/* status badge trio (remix StatusBadge): ok=active, beta=amber, mut=placeholder/blocked */
.promo-shell .promo-badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;
  font-size:.64rem;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.promo-shell .promo-badge::before{content:'●';font-size:.5rem}
.promo-shell .promo-badge.ok{background:hsl(150 70% 45% / .18);color:hsl(150 70% 55%)}
.promo-shell .promo-badge.beta{background:hsl(38 95% 55% / .18);color:hsl(38 95% 60%)}
.promo-shell .promo-badge.mut{background:hsl(260 10% 60% / .15);color:hsl(260 10% 70%)}
.promo-shell .promo-badge.bad{background:hsl(0 84% 60% / .16);color:hsl(0 84% 68%)}
/* participação/elegíveis progress bar (Por Campanha) */
.promo-shell .promo-track{
  height:8px;border-radius:5px;background:var(--promo-panel2);overflow:hidden;
  border:1px solid var(--promo-border)}
.promo-shell .promo-fill{
  height:100%;border-radius:5px;background:var(--promo-grad);transition:width .5s;min-width:2px}
/* criteria chips (Cenários): one guardrail = one chip, pass/fail colorable */
.promo-shell .promo-crit{
  display:inline-flex;gap:5px;align-items:center;padding:3px 10px;border-radius:8px;
  font-size:.68rem;background:var(--promo-primary-soft);color:hsl(263 85% 80%);
  border:1px solid hsl(263 50% 28%);white-space:nowrap}
.promo-shell .promo-crit b{font-variant-numeric:tabular-nums}
.promo-shell .promo-crit.vazio{background:var(--promo-panel2);color:var(--tx2);border-color:var(--promo-border)}
/* review dialog (Aprovações) — overlay + panel in the remix's dialog style */
.promo-shell .promo-overlay{
  position:fixed;inset:0;background:hsl(260 25% 2% / .72);z-index:70;
  display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;
  backdrop-filter:blur(2px)}
.promo-shell .promo-dialog{
  background:var(--promo-card);border:1px solid var(--promo-border);
  border-radius:calc(var(--promo-radius) + 4px);box-shadow:var(--promo-shadow);
  width:min(680px,100%);max-height:88vh;overflow-y:auto;position:relative}
.promo-shell .promo-dialog::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--promo-grad);border-radius:99px 99px 0 0}
.promo-shell .promo-dialog .body{padding:18px 20px}
.promo-shell .promo-dialog h3{font-size:.95rem;letter-spacing:-.03em;margin-bottom:2px}
/* key→value grid used inside the dialog (promotion snapshot) */
.promo-shell .promo-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.promo-shell .promo-kv .k{font-size:.62rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.6px}
.promo-shell .promo-kv .v{font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums}
/* collapsible raw payload */
.promo-shell details.promo-raw{margin-top:10px}
.promo-shell details.promo-raw summary{cursor:pointer;font-size:.7rem;color:var(--tx2)}
.promo-shell details.promo-raw pre{
  background:hsl(260 25% 4%);border:1px solid var(--promo-border);border-radius:10px;
  padding:10px;font-family:var(--promo-mono);font-size:.66rem;overflow:auto;max-height:260px;margin-top:6px}