* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; }
body { background:#0b1220; color:#e5e7eb; font-family:"Segoe UI",Roboto,Arial,sans-serif; font-size:1.3vw; cursor:none; }

.tela { height:100vh; display:flex; flex-direction:column; padding:1.2vw 1.6vw; gap:1vw; }
header { display:flex; justify-content:space-between; align-items:center; }
.titulo { font-size:2.2vw; font-weight:700; letter-spacing:.04em; color:#93c5fd; text-transform:uppercase; }
.relogio { font-size:2.6vw; font-weight:700; font-variant-numeric:tabular-nums; }

.stale { background:#7f1d1d; color:#fecaca; padding:.5vw 1vw; border-radius:.6vw; font-size:1.2vw; text-align:center; }
.stale[hidden] { display:none; }

.painel { flex:1; min-height:0; display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:auto minmax(0,1fr) minmax(0,1fr); gap:1vw; }
.vazio { color:#9ca3af; }
.vazio.grande { grid-column:1 / -1; text-align:center; font-size:2vw; padding-top:10vh; }

.box { background:#111a2e; border-radius:1vw; padding:1vw 1.4vw; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.box h2 { margin:0 0 .6vw; font-size:1.5vw; color:#9ca3af; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }

/* indicadores */
.kpis { grid-column:1 / -1; display:grid; grid-template-columns:2fr 1fr 1fr; gap:1vw; }
.kpi { background:#111a2e; border-radius:1vw; padding:.9vw 1.4vw; }
.kpi .rot { font-size:1.4vw; color:#9ca3af; text-transform:uppercase; letter-spacing:.06em; }
.kpi .num { font-size:3.4vw; font-weight:800; font-variant-numeric:tabular-nums; margin-top:.2vw; }
.kpi.principal .num { font-size:5.4vw; color:#4ade80; }
.kpi .sub { margin-top:.2vw; font-size:1.3vw; color:#9ca3af; }

/* caixas */
.caixas .lista { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:space-around; gap:.4vw; }
.cx { min-height:0; }
.cxtop { display:flex; justify-content:space-between; align-items:baseline; }
.cxnome { font-size:1.7vw; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }
.cxval { font-size:1.9vw; font-weight:800; color:#4ade80; font-variant-numeric:tabular-nums; }
.barra { background:#1f2a44; height:.7vw; border-radius:.4vw; overflow:hidden; margin:.2vw 0; }
.barra i { display:block; height:100%; background:#2563eb; border-radius:.4vw; }
.cxqtd { font-size:1.1vw; color:#9ca3af; }

/* mais vendidos */
.top1 { background:#0f2a1c; border:.15vw solid #166534; border-radius:.9vw; padding:.8vw 1.2vw; margin-bottom:.8vw; position:relative; }
.medalha { position:absolute; top:.6vw; right:1vw; font-size:1.6vw; font-weight:800; color:#facc15; }
.top1nome { font-size:2.3vw; font-weight:800; line-height:1.15; padding-right:4vw; max-height:5.4vw; overflow:hidden; }
.top1qtd { font-size:2.6vw; font-weight:800; color:#4ade80; margin-top:.3vw; font-variant-numeric:tabular-nums; }
.top1val { font-size:1.3vw; color:#9ca3af; }
.outros { margin:0; padding-left:2.2vw; font-size:1.5vw; }
.outros li { padding:.25vw 0; }
.outros li::marker { color:#9ca3af; }
.outros li { display:list-item; }
.on { display:inline-block; max-width:75%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.oq { float:right; font-weight:700; color:#e5e7eb; font-variant-numeric:tabular-nums; }

/* vendas por hora */
.horas { grid-column:1 / -1; }
.grafico { flex:1; min-height:0; display:flex; align-items:stretch; gap:.5vw; }
.col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; }
.cv { height:1.6vw; font-size:1vw; color:#cbd5e1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.colbar { flex:1; width:100%; display:flex; align-items:flex-end; min-height:0; }
.colbar i { display:block; width:100%; background:#2563eb; border-radius:.4vw .4vw 0 0; }
.col.agora .colbar i { background:#4ade80; }
.ch { font-size:1.3vw; font-weight:700; margin-top:.3vw; }
.col.agora .ch { color:#4ade80; }
.cq { height:1.3vw; font-size:1vw; color:#9ca3af; }

.rodape { position:fixed; right:1.6vw; bottom:.5vw; font-size:.95vw; color:#6b7280; }
.aviso-defasado { position:fixed; left:1.6vw; bottom:.5vw; font-size:1.1vw; color:#fca5a5; }