/* Salón en vivo. Pensado para una TV, que también se vea bien en el celular. */
.sv{--esc:1}
@media (min-width:1600px){.sv{--esc:1.14}}
@media (min-width:2400px){.sv{--esc:1.4}}

.sv-cima{padding:16px 20px 4px;display:grid;gap:10px}
.sv-cifras{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sv-cifra{background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:10px 14px;min-width:0}
.sv-cifra b{display:block;font:650 calc(30px*var(--esc))/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-cifra span{display:block;font-size:calc(13.5px*var(--esc));color:var(--suave)}
.sv-cifra.apr b{color:var(--apr)} .sv-cifra.hum b{color:var(--hum)} .sv-cifra.sis b{color:var(--sis)}
@media (max-width:760px){
  .sv-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-cifra:last-child{grid-column:1/-1}
  .sv-cifra b{font-size:24px}
}

.sv-ritmo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:calc(14.5px*var(--esc));color:var(--suave)}
.sv-sem{display:inline-flex;align-items:center;gap:7px}
.sv-sem::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--suave);flex:none}
.sv-sem.sis::before{background:var(--sis);box-shadow:0 0 8px var(--sis)}
.sv-sem.hum::before{background:var(--hum);box-shadow:0 0 8px var(--hum)}
.sv-sem.mal::before{background:var(--mal);box-shadow:0 0 8px var(--mal)}
.sv-sem b{color:var(--txt);font-weight:600}

.sv-mesas{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(340px*var(--esc))),1fr));gap:12px;padding:12px 20px 16px;align-content:start}
@media (max-width:520px){.sv-cima,.sv-mesas{padding-inline:12px}}
.sv-vacio{padding:40px 20px;text-align:center;color:var(--tenue);font-size:calc(17px*var(--esc))}

.sv-mesa{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--linea2);border-radius:16px;padding:12px 14px;cursor:pointer;min-width:0;transition:border-color .3s,box-shadow .3s}
.sv-mesa:hover{border-color:var(--suave)}
.sv-mesa.llama{border-color:rgba(255,180,94,.6);box-shadow:inset 0 0 0 1px rgba(255,180,94,.25)}
.sv-mesa.alerta{border-color:rgba(255,107,107,.75);box-shadow:inset 0 0 0 1px rgba(255,107,107,.35),0 0 24px -10px var(--mal)}
.sv-mesa.entra{animation:sv-entra .5s ease-out}
.sv-mesa>header{display:flex;align-items:center;gap:10px;min-width:0}
.sv-id{display:flex;flex-direction:column;min-width:0}
.sv-num{font-size:calc(22px*var(--esc));line-height:1.1;white-space:nowrap}
.sv-zona{font:11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.sv-total{margin-left:auto;font:600 calc(17px*var(--esc))/1 var(--mono);white-space:nowrap}
.sv-mesa>header .sv-total{flex:none}

.sv-est{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 11px;font-size:calc(13.5px*var(--esc));font-weight:600;line-height:1.15;border:1px solid var(--linea2);color:var(--suave);background:rgba(255,255,255,.02);min-width:0}
.sv-est.sis{color:var(--sis);border-color:rgba(197,255,62,.45);background:rgba(197,255,62,.07)}
.sv-est.apr{color:var(--apr);border-color:rgba(99,212,255,.45);background:rgba(99,212,255,.07)}
.sv-est.hum{color:var(--hum);border-color:rgba(255,180,94,.5);background:rgba(255,180,94,.08)}
.sv-est.mal{color:var(--mal);border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.08)}

.sv-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:calc(13.5px*var(--esc));color:var(--suave)}
.sv-meta .hum{color:var(--hum);font-weight:600}
.sv-meta .apr{color:var(--apr)}

.sv-alertas:empty{display:none}
.sv-alertas{display:grid;gap:4px}
.sv-alerta{font-size:calc(14px*var(--esc));font-weight:600;padding:6px 10px;border-radius:9px;border:1px solid rgba(255,107,107,.5);background:rgba(255,107,107,.1);color:var(--mal)}
.sv-alerta.hum{border-color:rgba(255,180,94,.5);background:rgba(255,180,94,.1);color:var(--hum)}
.sv-mesa.alerta .sv-alerta.mal{animation:sv-late 2.4s ease-in-out infinite}

.sv-coms{display:flex;flex-wrap:wrap;gap:5px}
.sv-com{font:600 calc(11.5px*var(--esc))/1 var(--mono);letter-spacing:.04em;padding:5px 8px;border-radius:7px;border:1px solid var(--linea2);color:var(--suave)}
.sv-com.apr{color:var(--apr);border-color:rgba(99,212,255,.4)}
.sv-com.sis{color:var(--sis);border-color:rgba(197,255,62,.4)}
.sv-com.hum{color:var(--hum);border-color:rgba(255,180,94,.45)}

/* chat */
.sv-chat{display:flex;flex-direction:column;gap:5px;flex:1 1 0;min-height:calc(220px*var(--esc));overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:11px;background:var(--fondo);border:1px solid var(--linea);scrollbar-width:thin;margin-top:auto}
.sv-chat:empty::before{content:"Sin mensajes todavía";margin:auto;color:var(--tenue);font-size:13px}
.sv-chat.largo{flex:1 1 auto;min-height:200px}
.sv-b{max-width:88%;padding:6px 10px 4px;border-radius:12px;font-size:calc(14px*var(--esc));line-height:1.35;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:2px;flex:none}
.sv-b.cli{align-self:flex-end;background:#182408;border:1px solid rgba(197,255,62,.3);border-bottom-right-radius:4px}
.sv-b.bar{align-self:flex-start;background:var(--panel2);border:1px solid var(--linea);border-bottom-left-radius:4px}
.sv-b.avi{align-self:center;max-width:94%;text-align:center;font-size:calc(12.5px*var(--esc));color:var(--suave);border:1px dashed var(--linea2);background:transparent}
.sv-b.avi.sis{color:var(--sis);border-color:rgba(197,255,62,.3)}
.sv-b.avi.apr{color:var(--apr);border-color:rgba(99,212,255,.3)}
.sv-b.avi.hum{color:var(--hum);border-color:rgba(255,180,94,.35)}
.sv-b.avi.mal{color:var(--mal);border-color:rgba(255,107,107,.35)}
.sv-quien{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(197,255,62,.65)}
.sv-prods{font-size:.9em;color:var(--apr)}
.sv-tot{font:600 .92em/1.2 var(--mono)}
.sv-b time{align-self:flex-end;font:10.5px/1.3 var(--mono);color:var(--tenue)}
.sv-b.nueva{animation:sv-burbuja .45s cubic-bezier(.2,.8,.3,1)}

.sv-libres{padding:6px 20px 18px;font:calc(12.5px*var(--esc))/1.5 var(--mono);color:var(--tenue);letter-spacing:.04em;opacity:.75}

/* detalle */
.sv-modal{width:min(1100px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--linea2);border-radius:16px;background:var(--panel);color:var(--txt)}
.sv-modal::backdrop{background:rgba(3,5,8,.75);backdrop-filter:blur(2px)}
.sv-modal-in{display:flex;flex-direction:column;gap:10px;padding:16px 18px;max-height:calc(100dvh - 26px)}
.sv-modal header{display:flex;align-items:center;gap:12px;min-width:0}
.sv-modal header h2{flex:none}
.sv-modal header .sv-est{min-width:0}
.sv-modal h2{font-size:22px}
.sv-cerrar{margin-left:auto;flex:none;border:1px solid var(--linea2);background:transparent;border-radius:10px;width:42px;height:42px;font-size:26px;line-height:1;color:var(--suave)}
.sv-modal-meta{font-size:14px;color:var(--suave)}
.sv-modal-cuerpo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;min-height:0;flex:1;overflow:hidden}
.sv-modal-chat,.sv-modal-ped{display:flex;flex-direction:column;gap:8px;min-height:0}
.sv-modal-chat .sv-chat{overflow-y:auto;max-height:calc(100dvh - 190px)}
.sv-modal-ped>div{display:grid;gap:10px;overflow-y:auto;max-height:calc(100dvh - 190px);align-content:start}
.sv-ped{border:1px solid var(--linea);border-radius:12px;padding:10px 12px;display:grid;gap:8px;background:var(--panel2)}
.sv-ped header{display:flex;align-items:center;gap:8px}
.sv-ped header time{font:12px/1 var(--mono);color:var(--tenue)}
.sv-ped .sv-total{font-size:15px}
.sv-ped .btn{justify-self:start}
@media (max-width:760px){
  .sv-modal-cuerpo{grid-template-columns:1fr;overflow-y:auto}
  .sv-modal-chat .sv-chat,.sv-modal-ped>div{max-height:none;overflow:visible}
  .sv-chat.largo{max-height:55dvh;overflow-y:auto}
}

@keyframes sv-burbuja{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sv-entra{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes sv-late{50%{background:rgba(255,107,107,.22)}}
@media (prefers-reduced-motion:reduce){.sv-b.nueva,.sv-mesa.entra,.sv-mesa.alerta .sv-alerta.mal{animation:none}}