/* Início: faixa de métricas, receita por dia ao lado dos top produtos e o Ao vivo. Tokens e componentes em system.css. */
.home section{margin-top:28px}

/* resultados */
/* seletor de período em pílula (uma linha) */
.dp.dpp .dp-btn{min-width:0;width:auto;height:44px;padding:0 16px;gap:10px;border-radius:999px;border-color:var(--line);box-shadow:var(--lift)}
.dp.dpp .dp-btn small{display:none}
.dp.dpp .dp-btn b{font-size:15px;font-weight:500;white-space:nowrap}
.dp.dpp .dp-btn .ico{color:var(--text-2)}
.dp.dpp .dp-btn .chev{stroke:var(--text);width:17px;height:17px}
.dp.dpp .dp-pop{left:0;right:auto}
#dp2.dp.dpp .dp-pop{left:auto;right:0}


/* gráfico e top produtos: título pequeno, o número do período em destaque, sem ícones em círculo */
.hrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:16px}
.hrow .card{padding:20px 22px;margin:0}
.hchart{display:flex;flex-direction:column}
.hchart #chart{flex:1;min-height:0}
.htop .hchart svg.chart .cur{stroke-width:2.5}
.hchart svg.chart .prev{stroke:var(--line-2);stroke-width:2;stroke-dasharray:5 6;opacity:1}
.hchart svg.chart .grid{stroke:var(--line)}
.hchart svg.chart .dot{fill:var(--card);stroke:var(--accent);stroke-width:3}
.hchart svg.chart .guide{stroke:var(--line-2);stroke-width:1;opacity:1}
.chart-tip.compact{min-width:0;padding:9px 13px;border-radius:10px;background:var(--side-navy);line-height:1.3;white-space:nowrap}
.chart-tip.compact b{display:block;font-size:16px;font-weight:700}
.chart-tip.compact small{display:block;color:#b7bfd0;font-size:12.5px;margin-top:2px}
.chart-tip.compact small.pv{color:#8792a8}
/* top produtos: posição, foto, nome com a comissão, leads da semana e uma barra fina com o peso de cada um */
.tp{position:relative;display:grid;grid-template-columns:18px 44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0 13px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.tp:first-child{border-top:0}
.tp:after{content:"";position:absolute;left:74px;bottom:5px;height:3px;width:calc((100% - 74px) * var(--k, 0));border-radius:3px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent))}
.tp:hover .tp-t b{text-decoration:underline}
.tp-n{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.tp-img{width:44px;height:44px;border-radius:10px;background:var(--card-2);display:grid;place-items:center;overflow:hidden}
.tp-img img{max-width:86%;max-height:86%;object-fit:contain}
.tp-t{min-width:0}
.tp-t b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-t b em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--good);margin-left:4px}
.tp-t small{display:block;color:var(--muted);font-size:13px;margin-top:1px}
/* bandeira e comissão por entrega na mesma linha */
.tp-t small b{display:inline;font-size:inherit;font-weight:inherit}
.tp-v{text-align:right}
.tp-v b{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.tp-v small{color:var(--muted);font-size:12px}
.tp-empty{color:var(--muted);font-size:14px;padding:18px 0}

/* Ao vivo: um painel só, partes separadas por linhas finas */
.live-panel{padding:0;overflow:hidden}
.live-panel>.hstrip{margin:0;border-bottom:1px solid var(--line)}
.live-panel .live-card,.live-panel .live-lists{border:0;border-radius:0;box-shadow:none;margin:0;background:none}
.live-panel .live-lists{border-top:1px solid var(--line)}
.live-panel .lf-i{width:10px;height:10px;margin:0 10px;border-radius:50%;background:var(--line-2)}
.live-panel .lf{grid-template-columns:30px minmax(0,1fr) auto}
.live-panel .lf-checkout .lf-i{background:none;box-shadow:inset 0 0 0 2px var(--accent)}
.live-panel .lf-order .lf-i{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.live-panel .ll-tag{background:none;padding:0;margin-right:2px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text)}

/* telas menores */
@media(max-width:1700px){.hrow{grid-template-columns:minmax(0,1.75fr) minmax(340px,1fr)}}
@media(max-width:1100px){.hrow{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
  .hc-lg{display:none}
  .hc-tot b{font-size:24px}
}
@media(max-width:560px){.tp{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}.tp-n{display:none}.tp:after{left:54px;width:calc((100% - 54px) * var(--k, 0))}}