/* ============================================================
   Just Ball · Command Center (God Mode), 21/10/2026. js/comando.js
   Prefixo cmd- em tudo. Botões, chips, kick e .ld vêm do design system
   (css/app.css, css/checkin.css); aqui só o que é desta tela.
   Mora no document.body, por cima do palco inteiro; a coluna de leitura
   fica na largura do celular mesmo no computador.
   ============================================================ */
.cmd{position:fixed;inset:0;z-index:600;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:
    radial-gradient(70% 40% at 50% 0%,rgba(3,199,63,.16),transparent 70%),
    radial-gradient(50% 30% at 50% 0%,rgba(197,255,26,.07),transparent 70%),
    var(--ink);
  color:var(--paper);font-family:var(--body);opacity:0;transform:translateY(14px);transition:opacity .26s var(--e),transform .34s var(--e)}
.cmd.is-on{opacity:1;transform:none}
.cmd::after{content:"";position:fixed;inset:0;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:.1;mix-blend-mode:overlay}
.cmd__in{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom))}
.cmd__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.cmd__h{font-family:var(--disp);font-weight:900;font-size:clamp(38px,11vw,48px);line-height:.9;text-transform:uppercase;margin-top:6px}
.cmd__h em{font-style:normal;color:var(--lime)}
.cmd__x{width:44px;height:44px;flex:none}
.cmd__x:active{transform:scale(.95)}

/* contadores */
.cmd-cnt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:26px}
.cmd-cnt__i{display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line)}
.cmd-cnt__i b{font-size:28px;font-weight:700;line-height:1;color:var(--paper)}
.cmd-cnt__i small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.3}
.cmd-cnt__i.is-on{border-color:rgba(197,255,26,.5);background:radial-gradient(100% 120% at 0% 0%,rgba(197,255,26,.14),transparent 60%),var(--ink-3)}
.cmd-cnt__i.is-on b{color:var(--lime)}

.cmd-msg{margin:-10px 0 18px;padding:10px 14px;border-radius:12px;background:var(--lime-dim);border:1px solid rgba(197,255,26,.35);font-size:13px;color:var(--paper)}

/* seções */
.cmd-sec{margin-bottom:26px}
.cmd-sec__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.cmd-sec__t{font-family:var(--disp);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.cmd-sec__d{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--mute);margin-left:6px}
.cmd-sec__n{font-size:12px;color:var(--mute)}
.cmd-sec__k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:-4px 0 8px}
.cmd-vazio{padding:14px 16px;border-radius:var(--r);border:1px dashed var(--line);font-size:12.5px;color:var(--mute)}

.cmd-l{list-style:none;display:grid;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.cmd-p{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--line-2);min-height:56px}
.cmd-p:first-child{border-top:0}
.cmd-p__b{min-width:0;display:flex;flex-direction:column;gap:2px}
.cmd-p__n{font-weight:700;font-size:14.5px;line-height:1.25;overflow-wrap:anywhere}
.cmd-p__s{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--mute);display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.cmd-p__c{font-size:12px;color:#bdbdbd;overflow-wrap:anywhere}
.cmd-tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--lime);color:#0a0a0a;border-radius:var(--rp);padding:2px 7px}

.cmd-av{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none;font-size:13px;font-weight:800;color:#0a0a0a}
.cmd-av--f{color:transparent}
.cmd-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* pedido: botões embaixo do nome no celular, pra o nome inteiro caber */
.cmd-p--ped{grid-template-columns:auto minmax(0,1fr);align-items:start}
.cmd-acts{grid-column:2;display:flex;gap:8px;margin-top:4px}
.cmd-acts .btn{min-height:44px;flex:1;font-size:14px}
.cmd-acts .btn:active{transform:scale(.97)}
.cmd-acts .btn.is-arm{box-shadow:0 0 0 2px var(--lime)}
.cmd-acts .btn--ghost.is-arm{border-color:#ff8a7a;color:#ff8a7a;box-shadow:none}

/* hoje: um bloco por horário */
.cmd-ss+.cmd-ss{margin-top:12px}
.cmd-ss__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cmd-ss__h b{font-family:var(--mono);font-size:12px;color:var(--lime);letter-spacing:.04em}
.cmd-ss__h span{font-family:var(--mono);font-size:11px;color:var(--mute)}

.cmd-ld{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0;text-align:center;font-size:13px;color:var(--mute)}
.cmd-painel{margin-top:6px;min-height:52px;text-decoration:none;color:var(--paper)}
.cmd-painel:active{transform:scale(.97)}

@media (hover:hover) and (pointer:fine){
  .cmd-painel:hover{border-color:rgba(197,255,26,.5)}
}
@media (prefers-reduced-motion:reduce){
  .cmd{transform:none;transition:opacity .12s linear}
}