/* Painel Monte Sua Dieta · mesma identidade da página de vendas */
:root{
  --bg:#0a0a0a; --bg2:#141414; --card:rgba(30,30,30,.65); --border:#3a3a3a;
  --texto:#fff; --suave:#c9c9c9; --fraco:#8a8a8a; --rotulo:#b4b4b4;
  --laranja:#F76D00; --roxo:#BC40FF; --lime:#E0FC00;
  --verde:#1BE52F; --vermelho:#ff4141; --raio:14px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--texto);
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:15px;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Sora",sans-serif; margin:0; line-height:1.2}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* grade sutil no fundo, igual à página. A imagem de atmosfera (quando existir) entra por baixo. */
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:#0a0a0a url("../assets/bg-painel.webp") center/cover no-repeat; opacity:.5}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 63px,rgba(255,255,255,.03) 63px 64px),
    repeating-linear-gradient(90deg,transparent 0 63px,rgba(255,255,255,.03) 63px 64px);
  -webkit-mask:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%);
          mask:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%)}
body > *{position:relative; z-index:1}

/* ── topo */
.topo{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:16px clamp(16px,3vw,32px); border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(188,64,255,.10),transparent)}
.topo__marca{display:flex; gap:14px; align-items:center}
.topo__marca img{width:104px; height:auto}
.topo__marca strong{display:block; font-family:"Sora",sans-serif; font-size:1rem}
.topo__marca span{font-size:.76rem; color:var(--fraco)}
.topo__ctrl{display:flex; gap:10px; flex-wrap:wrap}
.seg{display:flex; background:var(--bg2); border:1px solid var(--border); border-radius:40px; padding:3px}
.seg button{border:0; background:none; color:var(--suave); cursor:pointer; padding:7px 14px;
  border-radius:40px; font-family:"Poppins",sans-serif; font-size:.8rem; transition:background .2s,color .2s}
.seg button:hover{color:#fff}
.seg button.on{background:linear-gradient(180deg,var(--lime),var(--laranja)); color:#111; font-weight:600}
.seg--modo button.on{background:linear-gradient(150deg,var(--laranja),var(--roxo)); color:#fff}
.seg--lente button.on{background:linear-gradient(150deg,var(--roxo),var(--laranja)); color:#fff}

/* janela personalizada de datas */
.janela{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:12px clamp(16px,3vw,32px); border-bottom:1px solid var(--border);
  background:rgba(188,64,255,.07)}
.janela.oculto{display:none}
.janela label{display:flex; gap:8px; align-items:center; font-size:.8rem; color:var(--suave)}
.janela input{background:var(--bg2); border:1px solid var(--border); color:#fff; border-radius:9px;
  padding:7px 10px; font-family:"Poppins",sans-serif; font-size:.82rem; color-scheme:dark}
.janela button{border:0; border-radius:9px; padding:8px 16px; cursor:pointer; font-size:.8rem;
  font-family:"Poppins",sans-serif; font-weight:600; background:linear-gradient(180deg,var(--lime),var(--laranja)); color:#111}
.janela button.fantasma{background:none; border:1px solid var(--border); color:var(--suave); font-weight:400}

.aviso{margin:0; padding:9px clamp(16px,3vw,32px); font-size:.8rem; color:#f6d8b0;
  background:rgba(247,109,0,.12); border-bottom:1px solid rgba(247,109,0,.3)}
.aviso.oculto{display:none}

/* ── abas */
.abas{display:flex; gap:4px; padding:0 clamp(16px,3vw,32px); border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas a{padding:13px 16px; font-family:"Sora",sans-serif; font-size:.88rem; color:var(--suave);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .2s,border-color .2s}
.abas a:hover{color:#fff}
.abas a.on{color:#fff; border-bottom-color:var(--laranja)}

main{padding:clamp(18px,3vw,30px) clamp(16px,3vw,32px) 60px; max-width:1500px; margin:0 auto}
.carregando{color:var(--fraco); padding:60px 0; text-align:center}

/* ── KPIs: grade fixa de 4 colunas para nunca sobrar cartão órfão na última linha */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px}
.kpis--3{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--raio); padding:16px 18px;
  min-width:0}
.kpi h3{font-size:.72rem; font-weight:600; color:var(--rotulo); text-transform:uppercase;
  letter-spacing:.06em; font-family:"Poppins",sans-serif; margin-bottom:7px}
.kpi strong{font-family:"Sora",sans-serif; font-size:1.5rem; font-weight:700; display:block; line-height:1.15;
  overflow-wrap:anywhere}
.kpi small{font-size:.74rem; color:var(--fraco); display:block; margin-top:4px}
.kpi--bom strong{color:var(--verde)} .kpi--ruim strong{color:var(--vermelho)}
.kpi--destaque{border-color:var(--roxo); background:linear-gradient(180deg,rgba(188,64,255,.14),rgba(20,20,20,.7))}

.grade{display:grid; gap:16px; margin-bottom:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g23{grid-template-columns:2fr 1fr}
.painel{background:var(--card); border:1px solid var(--border); border-radius:var(--raio); padding:18px;
  min-width:0}
.painel h2{font-size:.95rem; margin-bottom:4px}
.painel p.sub{font-size:.76rem; color:var(--fraco); margin:0 0 12px}
.painel--ad{cursor:pointer; transition:border-color .2s,transform .2s}
.painel--ad:hover{border-color:var(--laranja); transform:translateY(-2px)}
.gr{width:100%; height:300px}
.gr--alto{height:440px}

/* ── miniatura do criativo */
.mini{position:relative; overflow:hidden; border-radius:10px; background:linear-gradient(150deg,#2a1140,#3d1c05);
  display:grid; place-items:center; flex:0 0 auto}
.mini img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.mini__letra{font-family:"Sora",sans-serif; font-weight:800; color:rgba(255,255,255,.5)}
.mini--p{width:34px; height:34px} .mini--p .mini__letra{font-size:.85rem}
.mini--m{width:52px; height:52px} .mini--m .mini__letra{font-size:1.1rem}
.mini--g{width:100%; aspect-ratio:1/1; border-radius:12px} .mini--g .mini__letra{font-size:2.4rem}
.cel-mini{display:flex; gap:10px; align-items:center; min-width:0}
.cel-mini span{overflow:hidden; text-overflow:ellipsis}
.cabeca-ad{display:flex; gap:16px; align-items:center; margin-bottom:18px}
.cabeca-ad .mini--g{width:86px; height:86px; aspect-ratio:auto}
.cabeca-ad h1{font-size:1.4rem}
.cabeca-ad .sub{font-size:.8rem; color:var(--fraco); margin:4px 0 0}

/* ── cards de criativo */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.card{background:rgba(16,16,16,.7); border:1px solid var(--border); border-radius:var(--raio);
  padding:12px; cursor:pointer; transition:border-color .2s,transform .2s; min-width:0}
.card:hover{border-color:var(--laranja); transform:translateY(-3px)}
.card__corpo{padding:11px 3px 2px}
.card h3{font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card__sub{font-size:.72rem; color:var(--fraco); margin:3px 0 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card__nums{display:flex; justify-content:space-between; gap:8px; font-size:.66rem; color:var(--fraco)}
.card__nums span{display:flex; flex-direction:column; gap:1px}
.card__nums b{font-family:"Sora",sans-serif; font-size:.95rem; color:#fff; font-weight:700}
.card__nums .bom b{color:var(--verde)} .card__nums .ruim b{color:var(--vermelho)}
.card__barra{height:4px; border-radius:4px; background:rgba(255,255,255,.07); margin-top:11px; overflow:hidden}
.card__barra i{display:block; height:100%; background:linear-gradient(90deg,var(--roxo),var(--lime))}

/* ── hotmap da página de vendas */
.hotmap{min-height:120px}
.hm__topo{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.hm__dica{font-size:.74rem; color:var(--fraco); margin:0; flex:1 1 240px}
.hm__corpo{display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:22px 26px; align-items:start}
.hm__rolar{grid-column:1/-1; margin:0 0 -8px; font-size:.7rem; color:var(--fraco)}
.hm__pagina{margin:0; border-radius:12px; border:1px solid var(--border);
  height:620px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin;
  scrollbar-color:var(--border) transparent}
.hm__folha{position:relative}
.hm__pagina img{width:100%; display:block; filter:grayscale(.55) brightness(.72)}
.hm__faixas{position:absolute; inset:0}
.hm__faixa{position:absolute; left:0; right:0; mix-blend-mode:screen; transition:filter .2s;
  border-top:1px solid rgba(10,10,10,.6)}
.hm__faixa.hm--on{filter:brightness(1.55)}
.hm__lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.hm__lista li{display:grid; grid-template-columns:10px 1fr repeat(3,84px); gap:12px; align-items:center;
  padding:7px 12px; border-radius:9px; font-size:.8rem; transition:background .2s}
.hm__lista li.hm--on{background:rgba(255,255,255,.06)}
.hm__cab{font-size:.66rem !important; color:var(--fraco); text-transform:uppercase;
  letter-spacing:.06em; border-bottom:1px solid var(--border); border-radius:0 !important; padding-bottom:9px !important}
.hm__cab .hm__valor{color:var(--fraco); font-weight:500}
.hm__cab .hm__valor--on{color:var(--laranja)}
.hm__ponto{width:10px; height:10px; border-radius:3px}
.hm__nome{color:var(--suave); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hm__valor{font-family:"Sora",sans-serif; font-weight:600; font-variant-numeric:tabular-nums;
  text-align:right; color:var(--fraco); font-size:.78rem}
.hm__valor--on{color:#fff; font-size:.88rem}

/* ── tabela */
.tabela{width:100%; border-collapse:collapse; font-size:.82rem}
.tabela th{text-align:left; font-family:"Sora",sans-serif; font-size:.72rem; color:var(--rotulo);
  text-transform:uppercase; letter-spacing:.05em; padding:9px 10px; border-bottom:1px solid var(--border);
  white-space:nowrap}
.tabela th.ord{cursor:pointer; user-select:none; transition:color .2s}
.tabela th.ord:hover{color:#fff}
.tabela th.ord i{font-style:normal; margin-left:5px; opacity:.4; font-size:.8em}
.tabela th.ord--on{color:#fff} .tabela th.ord--on i{opacity:1; color:var(--laranja)}
.tabela th.num{text-align:right}
.tabela td{padding:10px; border-bottom:1px solid rgba(255,255,255,.05); color:#e4e4e4}
.tabela tr:hover td{background:rgba(255,255,255,.03)}
.tabela tr.clicavel{cursor:pointer}
.num{text-align:right; font-variant-numeric:tabular-nums}
.bom{color:var(--verde)} .ruim{color:var(--vermelho)} .alerta{color:var(--laranja)}
.tag{display:inline-block; padding:2px 9px; border-radius:20px; font-size:.7rem; font-weight:600}
.tag--bom{background:rgba(27,229,47,.15); color:var(--verde)}
.tag--ruim{background:rgba(255,65,65,.15); color:var(--vermelho)}
.rolagem{overflow-x:auto}

.vazio{padding:40px 20px; text-align:center; color:var(--fraco); font-size:.86rem}
.vazio b{color:#fff; display:block; margin-bottom:6px; font-family:"Sora",sans-serif}

/* ── drill-down */
.voltar{display:inline-flex; align-items:center; gap:7px; color:var(--laranja); font-size:.82rem;
  margin-bottom:14px; cursor:pointer}
.rodape{padding:22px clamp(16px,3vw,32px); border-top:1px solid var(--border);
  color:var(--fraco); font-size:.74rem}

@media (max-width:1200px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .hm__corpo{grid-template-columns:minmax(0,260px) 1fr; gap:16px}
}
@media (max-width:1000px){
  .g3,.g23{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .hm__corpo{grid-template-columns:1fr}
  .hm__pagina{max-width:340px; margin:0 auto}
}
@media (max-width:860px){
  /* três colunas de métrica não cabem: fica só a da lente ativa, senão o nome da seção some */
  .hm__lista li{grid-template-columns:10px 1fr 88px}
  .hm__lista .hm__valor{display:none}
  .hm__lista .hm__valor--on{display:block}
}
@media (max-width:720px){
  .g2{grid-template-columns:1fr}
  .kpis,.kpis--3{grid-template-columns:repeat(2,1fr)}
  .topo{gap:12px} .topo__ctrl{width:100%}
  .gr{height:260px} .gr--alto{height:420px}
  .kpi strong{font-size:1.25rem}
}
@media (max-width:420px){ .cards{grid-template-columns:1fr} }