:root{
  /* Paleta Universal (amostrada do site) */
  --red:#AE1F21;
  --red2:#8F1719;
  --green:#16a34a;
  --blue:#2563eb;
  --amber:#f59e0b;

  /* Tema CLARO (default) – calibrado p/ TV 5–10m */
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#f1f5f9;
  --ink:#0f172a;       /* texto principal */
  --muted:#1f2937;     /* textos secundários */
  --muted2:#475569;    /* rótulos */
  --line:rgba(15,23,42,.12);
  --shadow:0 10px 26px rgba(2,6,23,.10);
  --ease:cubic-bezier(.2,.9,.2,1);

  --ok:rgba(22,163,74,.95);
  --warn:rgba(245,158,11,.95);
  --bad:rgba(239,68,68,.95);
}

/* Tema ESCURO */
html[data-theme="dark"]{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel2:#111c33;
  --ink:#e5e7eb;
  --muted:#d1d5db;
  --muted2:#3a3636;
  --line:rgba(148,163,184,.18);
  --shadow:0 14px 36px rgba(0,0,0,.35);
}


*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{
  background: radial-gradient(1200px 700px at 15% 0%, #ffffff 0%, var(--bg) 55%, rgba(241,245,249,.9) 100%);
  color:var(--ink);
  overflow:hidden;
}
html[data-theme="dark"] body{
  background: radial-gradient(1200px 700px at 15% 0%, rgba(255,255,255,.06) 0%, var(--bg) 60%, rgba(0,0,0,.0) 100%);
}

.topbar{
  height:92px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom:3px solid var(--red);
  box-shadow: var(--shadow);
}
.brand{display:flex;align-items:center;gap:12px;min-width:360px}
.logo-main{height:44px;width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));}
.brand-title{font-weight:1000;letter-spacing:.10em}
.brand-sub{color:var(--muted2);font-weight:800;font-size:12px;margin-top:2px}


.brand-carousels{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center; /* centraliza os carrosseis na barra */
  gap:14px;
  min-width:420px;
}
.brand-carousels .mini-carousel{
  width:260px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%, #f6f7f9 100%);
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.brand-carousels .brand-img{
  max-height:52px;
  max-width:230px;
  opacity:1;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
}
@media (min-width: 1600px){
  .brand-carousels .mini-carousel{ width:280px; height:78px; }
  .brand-carousels .brand-img{ max-height:60px; max-width:255px; }
}

.mini-carousel{
  width:220px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}
.brand-img{max-height:28px;max-width:200px;opacity:.85;transition:opacity .45s var(--ease);}

.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  margin-left:auto;
}
.now{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border:1px solid rgba(255,255,255,.10);
  border-radius:12px;background:rgba(255,255,255,.04);
}
.now .lbl{font-size:11px;color:var(--muted2);font-weight:900;letter-spacing:.12em}
.now .val{font-size:16px;font-weight:1000}

.btn-audio{
  cursor:pointer;
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border:1px solid rgba(255,255,255,.10);
  border-radius:12px;background:rgba(255,255,255,.04);
  color:var(--ink);
}
.btn-audio .lbl{font-size:11px;color:var(--muted2);font-weight:900;letter-spacing:.12em}
.btn-audio .val{font-size:12px;font-weight:1000}

.pill{
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-weight:900;
}
.pill.ok{border-color:rgba(22,163,74,.35); color:var(--green); background:rgba(22,163,74,.08);}
.pill.err{border-color:rgba(239,68,68,.35); color:rgb(185,28,28); background:rgba(239,68,68,.08);}

.board{height: calc(100vh - 74px); padding:12px 14px;}

.hdr{
  display:grid;
  grid-template-columns: 270px 1.35fr 1.25fr 220px 270px;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  margin-bottom:10px;
}
.h{color:var(--muted2);font-weight:1000;letter-spacing:.10em;font-size:12px;text-transform:uppercase;}

.rows{
  height: calc(100% - 72px);
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:6px;
}

.row{
  display:grid;
  grid-template-columns: 270px 1.35fr 1.25fr 220px 270px;
  gap:10px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  background: var(--panel);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.row.leader{
  border-color:rgba(214,180,90,.55);
  box-shadow:0 22px 70px rgba(214,180,90,.12), 0 18px 60px rgba(0,0,0,.35);
  transform:translateY(-1px);
}
.row.hit100{
  border-color:rgba(214,180,90,.42);
  background:linear-gradient(90deg, rgba(214,180,90,.10), rgba(15,23,42,.86) 35%);
}
.row.attention{ animation: pulseGlow 1.2s ease-in-out infinite; }

@keyframes pulseGlow{
  0%{ box-shadow:0 22px 70px rgba(214,180,90,.10), 0 18px 60px rgba(0,0,0,.35); }
  50%{ box-shadow:0 26px 90px rgba(214,180,90,.22), 0 18px 60px rgba(0,0,0,.35); }
  100%{ box-shadow:0 22px 70px rgba(214,180,90,.10), 0 18px 60px rgba(0,0,0,.35); }
}

/* vendedor */
.user{display:flex;align-items:center;gap:12px;min-width:0;}
.avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--panel2);
  border:1px solid var(--line);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.initials{font-weight:1000;color:var(--ink)}
.crown{
  position:absolute; top:-11px; left:50%;
  transform:translateX(-50%);
  font-size:18px;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));
  display:none;
}
.row.leader .crown{display:block;}
.name{font-weight:1100;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.code{color:var(--muted2);font-weight:900;font-size:12px}
.metaBadge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--muted);
  font-weight:1000;
  font-size:12px;
  margin-top:6px;
}

/* spark bars */
.spark{
  display:flex;
  align-items:center;
  justify-content:center;
  height:88px;
  padding:8px 10px;
  border-radius:14px;
  background: var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
  max-width:560px; /* reduz o “compridão” */
}
.bar{
  width:8px;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg, rgba(0,200,255,.90), rgba(0,200,255,.20));
  transition:height .85s var(--ease), background .35s var(--ease);
}
.bar.over{ background:linear-gradient(180deg, rgba(214,180,90,.95), rgba(214,180,90,.25)); }
.bar.today{ outline:2px solid rgba(255,255,255,.20); }

/* metrics */
.metrics{
  display:flex;flex-direction:column;gap:8px;
  padding:10px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.metric{display:grid;grid-template-columns: 140px 1fr 52px;align-items:center;gap:10px;}
.mlbl{color:var(--muted2);font-weight:900;font-size:12px;letter-spacing:.06em}
.mbar{height:10px;border-radius:999px;background:rgba(15,23,42,.08);overflow:hidden;position:relative;}
.mfill{
  height:100%;width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(181,18,27,.80), rgba(255,255,255,.10));
  transition:width .85s var(--ease);
}
.mval{font-weight:1000;text-align:right;color:var(--ink);font-size:12px}
.metaLine{
  position:absolute; top:-4px; bottom:-4px;
  width:2px;
  background:rgba(243,225,164,.85);
  box-shadow:0 0 0 1px rgba(214,180,90,.20);
  opacity:.9;
}

/* gauge */
.gauge{
  height:88px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.gTxt{font-weight:1200;font-size:clamp(18px,1.1vw,26px);fill:var(--ink)}
.gSub{font-weight:900;font-size:11px;fill:var(--muted2);letter-spacing:.12em}

/* month */
.monthBox{
  height:88px;display:flex;flex-direction:column;justify-content:center;
  gap:6px;padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.monthPct{font-size:26px;font-weight:1200;letter-spacing:.02em;}
.monthVal{color:var(--muted);font-weight:1000;}
.monthPct.gold{color:var(--goldB); text-shadow:0 12px 30px rgba(214,180,90,.10);}

/* FX */
.fx{position:fixed; inset:0; pointer-events:none; z-index:9999;}
.flash{background:rgba(255,255,255,.90); opacity:0; transition:opacity .15s ease-out;}
.flash.on{opacity:1;}
.giroflex{opacity:0; transition:opacity .12s ease-out;}
.giroflex.on{
  opacity:1;
  background:
    linear-gradient(90deg, rgba(255,0,0,.55), rgba(255,0,0,0) 35%),
    linear-gradient(270deg, rgba(0,110,255,.55), rgba(0,110,255,0) 35%);
  animation: giro 140ms linear infinite;
}
@keyframes giro{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(20deg)}
}
.confetti{z-index:10000;}


html[data-theme="dark"] .topbar{background:rgba(15,23,42,.92); border-bottom-color:var(--red);}

html[data-theme="dark"] .badge100{color:#b9f6ca;}

/* Toggle tema */
.btn-theme{
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:2px solid rgba(193,15,26,.35);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color:var(--ink);
  font-weight:1000;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}
.btn-theme:hover{ transform:translateY(-1px); }
.btn-theme .ico{ font-size:18px; }
.btn-theme .ico{font-size:16px; line-height:1;}
.btn-theme .lbl{font-size:11px;color:var(--muted2);font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.btn-theme .val{font-size:12px;font-weight:1000}
html[data-theme="dark"] .btn-theme{
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:2px solid rgba(193,15,26,.35);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color:var(--ink);
  font-weight:1000;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}
.btn-theme:hover{ transform:translateY(-1px); }
.btn-theme .ico{ font-size:18px; } 


/* Score (label acima + donut) */
.scoreBox{
  height:88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:16px;
  background: var(--panel);
  border:1px solid var(--line);
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
  padding:8px 10px;
}
.scoreLbl{
  font-size:12px;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted2);
  line-height:1;
}
.scoreBox svg{ display:block; }

.brand-img.swap{opacity:0; transform:scale(.98);}

/* Daily chart (SVG) */
.dailyChart{width:100%; height:100%;}
.dailyChart text{font-family:inherit; fill:var(--muted2); font-weight:900;}
.dailyChart .axis{fill:var(--muted2); font-size:10px;}
.dailyChart .pct{fill:var(--ink); font-size:10px; font-weight:1000;}
.dailyChart .date{fill:var(--muted2); font-size:9px; font-weight:900;}
.dailyChart .grid{stroke:rgba(0,0,0,.08); stroke-width:1;}
.dailyChart .barLow{fill:rgba(239,68,68,.90);}
.dailyChart .barMid{fill:rgba(59,130,246,.92);}
.dailyChart .barOver{fill:rgba(34,197,94,.92);}

/* Score gauge (semicírculo com ponteiro) */
.scoreBox{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;}
.scoreLbl{font-weight:1100; letter-spacing:.14em; color:var(--muted2); font-size:12px; text-transform:uppercase;}
.scoreGauge{width:170px; height:92px; display:block;}
.scoreGauge .segRed{stroke:rgba(239,68,68,.92);}
.scoreGauge .segYel{stroke:rgba(245,158,11,.92);}
.scoreGauge .segGrn{stroke:rgba(34,197,94,.92);}
.scoreGauge .track{stroke:rgba(0,0,0,.10);}
.scoreGauge .needle{stroke:var(--ink); stroke-width:3; stroke-linecap:round;}
.scoreGauge .hub{fill:var(--ink);}
.scoreGauge .val{fill:var(--ink); font-weight:1200; font-size:22px;}