[hidden]{display:none!important}
:root{--fondo:#0b1411;--panel:#0d1915e8;--linea:#2c463c;--tinta:#eef4ef;--suave:#a9bdb3;--verde:#00e293;--ambar:#ffcf7a;--sb:#00704a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--tinta);font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}
#sc{position:relative;height:calc(100dvh - var(--xs-bar-h,46px));min-height:520px;overflow:hidden}
#lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:grab}
#lienzo:active{cursor:grabbing}
button,select,.boton{font:inherit;color:#0e2a20;background:#e4ece6;border:0;border-radius:7px;padding:7px 11px;cursor:pointer;text-decoration:none;display:inline-block}
button[aria-pressed="true"],button[aria-selected="true"]{background:var(--verde);color:#00180f}
button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
.ficha{position:absolute;left:16px;top:14px;width:min(370px,calc(100% - 32px));max-height:calc(100% - 150px);overflow:auto;padding:12px 16px 14px;background:var(--panel);border:1px solid var(--linea);border-radius:10px;backdrop-filter:blur(6px)}
.centros{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.centros button{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;padding:6px 10px}
.centros small{font-size:10px;opacity:.75;font-family:ui-monospace,Menlo,monospace}
.eyebrow{margin:0;font:700 10px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--verde)}
h1{margin:2px 0 6px;font-size:21px;line-height:1.2}
.identidad{margin:0 0 10px;color:var(--suave);font-size:12.5px}
.botones{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.grupo{display:inline-flex;gap:2px;background:#ffffff12;border-radius:9px;padding:2px}
.grupo button{padding:6px 10px;background:transparent;color:var(--tinta)}
.grupo button[aria-pressed="true"]{background:var(--verde);color:#00180f}
.referencia{margin:0 0 8px;font-size:12px}.referencia a{color:var(--ambar)}
.detalle h2{margin:10px 0 4px;font:700 13px ui-monospace,Menlo,monospace;color:var(--verde)}
.detalle dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:12.5px}
.detalle dt{color:var(--suave)}.detalle dd{margin:0}
.suave{color:var(--suave);font-size:12.5px;margin:6px 0 0}
.pantallas{position:absolute;right:16px;top:14px;width:min(330px,40%);padding:10px 12px;background:var(--panel);border:1px solid var(--linea);border-radius:10px}
.pantallas h2{margin:0 0 6px;font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--suave)}
.pantallas ol{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.pantallas li{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:12px}
.pantallas li:hover,.pantallas li.sel{background:#ffffff14}
.pantallas li b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 11px ui-monospace,Menlo,monospace;background:#1d2f28;position:relative}
.pantallas li b::after{content:"";position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:#7a8a83;border:2px solid #0d1915}
.pantallas li.reproduciendo b::after{background:var(--verde)}.pantallas li.listo b::after{background:#7fd6ff}
.pantallas li.esperando b::after,.pantallas li.cargando b::after{background:var(--ambar)}.pantallas li.error b::after{background:#ff6b5e}
.pantallas li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pantallas li em{font-style:normal;color:var(--ambar);font-family:ui-monospace,Menlo,monospace}
.reproductor{position:absolute;left:16px;right:16px;bottom:14px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"mandos linea" "estado estado" "fuente fuente" "avisos avisos";gap:4px 14px;align-items:center;padding:10px 14px;background:var(--panel);border:1px solid var(--linea);border-radius:10px}
.mandos{grid-area:mandos;display:flex;gap:6px;align-items:center;min-width:0}
.mandos button{width:38px;height:34px;padding:0;font-size:15px}
.mandos select{max-width:260px;padding:7px 8px}
.linea{grid-area:linea;position:relative;height:24px}
.tramos{display:flex;gap:2px;height:100%}
.tramo{display:flex;align-items:center;padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:4px;font-size:11px;color:#cfe3d9;background:#1a2e26;min-width:0}
.tramo.mural{background:#163a2d}.tramo.activo{background:var(--sb);color:#fff}
.cabezal{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ambar);box-shadow:0 0 6px var(--ambar);pointer-events:none}
.estado{grid-area:estado;margin:0;font-size:13px}.estado span{color:var(--suave);font-family:ui-monospace,Menlo,monospace;margin-left:6px}
.fuente{grid-area:fuente;margin:0;font:11px ui-monospace,Menlo,monospace;color:var(--suave)}
.avisos{grid-area:avisos;margin:0;color:#ff9a8f;font-size:12px}.avisos:empty{display:none}
.aviso{position:absolute;left:50%;top:14px;transform:translateX(-50%);margin:0;padding:7px 12px;background:#000c;border:1px solid var(--linea);border-radius:8px;font-size:12.5px;max-width:min(520px,calc(100% - 32px))}
.gesto{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 22px;font-size:17px;background:var(--verde);color:#00180f;box-shadow:0 8px 30px #0008}
.enlace{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));padding:18px 20px;background:var(--panel);border:1px solid var(--linea);border-radius:12px}
.enlace h2{margin:0 0 6px}.enlace p{margin:0 0 10px;color:var(--suave)}.enlace .pendiente{color:var(--ambar)}.enlace .boton{background:var(--verde);color:#00180f}
[data-escena="matrix"] .ficha,[data-escena="matrix"] .pantallas,[data-escena="matrix"] .reproductor{border-color:#0f5c40;background:#020d08e6}
[data-escena="matrix"] .tramo.activo{background:#00a86b}
@media (max-width:820px){
  .pantallas{display:none}
  .ficha{max-height:44%;padding:10px 12px}
  h1{font-size:17px}.identidad{display:none}
  .reproductor{left:8px;right:8px;bottom:8px;grid-template-columns:1fr;grid-template-areas:"mandos" "linea" "estado" "avisos";padding:8px 10px}
  .reproductor>*{min-width:0}.mandos select{flex:1;min-width:0;max-width:none}.estado{font-size:12px}.tramo{font-size:10px;padding:0 5px}
  .detalle dl{font-size:12px}
  .fuente{display:none}
  .ficha{left:8px;top:8px;width:calc(100% - 16px)}
}
#sc.con-enlace #lienzo{filter:brightness(.35) saturate(.6)}#sc.con-enlace .pantallas,#sc.con-enlace .reproductor{opacity:.35;pointer-events:none}
/* Matrix con la foto 360 del local (panorama.mjs): las vistas de cámara del 3D no aplican. */
[data-panorama="1"] .grupo[aria-label="Vista"]{display:none}
[data-panorama="1"] #lienzo{cursor:grab}
[data-panorama="1"] #lienzo:active{cursor:grabbing}
/* Ventanas (ventanas.mjs): barra para arrastrar, esquina para redimensionar, × para cerrar y dock para reabrir. */
.vent{overflow:auto;min-width:220px;min-height:70px}
.vent-esquina{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;touch-action:none;z-index:2;background:linear-gradient(135deg,transparent 0 55%,var(--suave) 55% 62%,transparent 62% 72%,var(--suave) 72% 79%,transparent 79%);opacity:.8}
.vent-esquina:hover{opacity:1}
.vent.vent-cerrada{display:none!important}
.vent-barra{display:flex;align-items:center;gap:8px;margin:-6px -8px 8px;padding:4px 6px 4px 8px;border-bottom:1px solid var(--linea);cursor:move;user-select:none;touch-action:none}
.vent-asa{color:var(--suave);font-size:13px;letter-spacing:-1px}
.vent-titulo{flex:1;min-width:0;font:700 10px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vent-cerrar{flex:none;width:24px;height:24px;padding:0;border-radius:6px;background:transparent;color:var(--tinta);font-size:17px;line-height:1}
.vent-cerrar:hover{background:#ffffff1f}
.reproductor .vent-barra{grid-column:1/-1}
.vent-dock{position:absolute;left:16px;top:14px;z-index:60;display:flex;flex-wrap:wrap;gap:6px}
.vent-dock .vent-abrir{padding:6px 10px;background:var(--panel);color:var(--tinta);border:1px solid var(--linea);font-size:12px}
.vent-dock .vent-abrir:hover{border-color:var(--verde)}
.reproductor{grid-template-areas:"barra barra" "mandos linea" "estado estado" "fuente fuente" "avisos avisos"}
.reproductor .vent-barra{grid-area:barra}
@media (max-width:820px){.reproductor{grid-template-areas:"barra" "mandos" "linea" "estado" "avisos"}}
/* El visor es oscuro también con marca blanca: la hoja de la marca cambia --panel en :root (blanco con
   Starbucks) y los textos del visor son claros. Los colores del visor se fijan en #sc. */
#sc{--panel:#0d1915e8;--linea:#2c463c;--tinta:#eef4ef;--suave:#a9bdb3;color:var(--tinta)}
/* Interfaz limpia por defecto (assets/interfaz-limpia.js): sólo la barra de arriba y la escena; H o ☰ ▤ ⌘ la abren. */
html.ui-limpia #sc .vent,html.ui-limpia #sc .vent-dock{display:none!important}
/* El quiosco de pedidos (kiosko.mjs): vertical como el tótem de Paseo de Gràcia; ✕, Esc o fuera lo cierran. */
.sc-kiosko{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}
.sc-kiosko[open]{display:flex}
.sc-kiosko::backdrop{background:transparent}
.sc-kiosko-marco{position:relative;height:min(90vh,calc(92vw*16/9));aspect-ratio:9/16;border:14px solid #111;border-radius:30px;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.sc-kiosko-marco iframe{width:100%;height:100%;border:0;border-radius:16px;background:#1E3932}
.sc-kiosko-x{position:absolute;top:-18px;right:-18px;width:40px;height:40px;border-radius:50%;border:2px solid #fff;background:#111;color:#fff;font-size:18px;cursor:pointer}
.sc-kiosko-abrir{position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);white-space:nowrap;color:#fff;font:600 14px system-ui,sans-serif;text-decoration:none;background:#00704A;padding:7px 14px;border-radius:999px}
.sc-kiosko-config{position:absolute;z-index:2;top:8px;left:8px;max-width:calc(100% - 16px);padding:8px;border-radius:10px;background:#112d25;color:#fff;font:13px system-ui,sans-serif}
.sc-kiosko-config summary{cursor:pointer;font-weight:700}.sc-kiosko-config[open]{width:calc(100% - 16px);box-sizing:border-box}.sc-kiosko-config input{box-sizing:border-box;width:100%;margin:8px 0;padding:10px;background:#fff;color:#111;font:inherit;border:1px solid #8acbb0;border-radius:6px}.sc-kiosko-config button{padding:10px;border:1px solid #8acbb0;border-radius:6px;background:#00704a;color:#fff;font:inherit;cursor:pointer}.sc-kiosko-config p{margin:8px 0}
/* El mando del TPV (mando-tpv.mjs): el de Paseo de Gràcia (music-remote.mjs) en una ventana; ✕, Esc o fuera la cierran. */
.sc-mando{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:16px;border:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;box-sizing:border-box}
.sc-mando[open]{display:flex}
.sc-mando::backdrop{background:transparent}
.sc-mando-caja{width:min(440px,100%);max-height:min(86vh,720px);overflow:auto;background:#0d1915f2;color:#eef4ef;border:1px solid #2c463c;border-radius:14px;padding:12px 14px 14px;box-shadow:0 18px 50px rgba(0,0,0,.5);font:13px/1.4 system-ui,sans-serif}
.sc-mando-caja header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.sc-mando-caja header strong{font-size:15px}
.sc-mando-x{width:32px;height:32px;border-radius:50%;border:1px solid #8dcab18c;background:#12392e;color:#fff;cursor:pointer}
.sc-mando .music-remote{font:13px/1.4 system-ui,sans-serif;color:#eafff6}
.sc-mando .music-remote summary{cursor:pointer;font-size:11px;font-weight:750;letter-spacing:.04em;padding:5px 0}
.sc-mando .music-remote-body{display:grid;gap:8px;padding-top:6px}
.sc-mando .music-remote-body p{margin:0;white-space:normal;overflow-wrap:anywhere}
.sc-mando .music-remote-body p:first-child{font-size:11px;color:#b5d1c7}
.sc-mando .music-remote-controls{display:flex;gap:6px}
.sc-mando .music-remote button,.sc-mando .music-remote select,.sc-mando .context-playlist-editor input,.sc-mando .context-playlist-editor button{font:inherit;min-height:32px;border:1px solid #8dcab18c;border-radius:6px;background:#12392e;color:#fff;padding:4px 8px}
.sc-mando .music-remote select{width:100%;min-width:0;text-overflow:ellipsis}
.sc-mando .music-remote-controls button{flex:1}
.sc-mando .music-remote button:disabled{opacity:.45}
/* Foco del mando: ◎ pequeño a la izquierda del título; con foco, el TPV queda en el centro y el mando se aparta. */
.sc-mando-caja header strong{flex:1;min-width:0}
.sc-mando-foco{width:28px;height:28px;flex:0 0 28px;border-radius:50%;border:1px solid #8dcab18c;background:#12392e;color:#9dffd6;font:700 15px/1 system-ui,sans-serif;cursor:pointer;padding:0}
.sc-mando-foco[aria-pressed="true"]{background:#00704a;color:#fff;border-color:#9dffd6}
.sc-mando-foco[hidden]{display:none}
.sc-mando.sc-mando--foco{background:transparent;justify-content:flex-end;align-items:center}
.sc-mando.sc-mando--foco .sc-mando-caja{width:min(380px,40vw);max-height:86vh}
@media (max-width:720px){
  .sc-mando.sc-mando--foco{justify-content:center;align-items:flex-end;padding:8px}
  .sc-mando.sc-mando--foco .sc-mando-caja{width:100%;max-height:42vh}
}
/* La caja (caja-tpv.mjs): el muffin y el agua de la vitrina se cogen de la foto y se sueltan en el TPV de la cesta. */
.sc-productos{position:absolute;inset:0;pointer-events:none;z-index:3}
.sc-producto{position:absolute;pointer-events:auto;border:2px dashed #9dffd6cc;border-radius:10px;background:transparent;cursor:grab;touch-action:none;padding:0}
.sc-producto::after{content:attr(data-icono);position:absolute;top:-12px;left:-12px;width:24px;height:24px;border-radius:50%;background:#00704a;color:#fff;font:14px/24px system-ui,sans-serif;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sc-producto:hover,.sc-producto:focus-visible{border-color:#9dffd6;background:#00704a33;box-shadow:0 0 0 3px #00704a55}
.sc-producto[hidden]{display:none}
.sc-producto-fantasma{position:fixed;z-index:2147483000;width:86px;height:86px;object-fit:contain;transform:translate(-50%,-60%) rotate(-6deg);pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));transition:transform .12s}
.sc-producto-fantasma.sobre-caja{transform:translate(-50%,-60%) scale(1.15);filter:drop-shadow(0 0 12px #00e293)}
.sc-cesta-lineas{list-style:none;margin:8px 0;padding:0}
.sc-cesta-lineas li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid #2c463c}
.sc-cesta-lineas button,.sc-cesta .music-remote-controls button{font:inherit;min-height:32px;border:1px solid #8dcab18c;border-radius:6px;background:#12392e;color:#fff;padding:4px 10px;cursor:pointer}
.sc-cesta .music-remote-controls{display:flex;gap:6px;margin:8px 0}.sc-cesta .music-remote-controls button{flex:1}
.sc-cesta-vacia,.sc-cesta-nota{margin:6px 0;color:#b5d1c7;font-size:12px}
html.ui-limpia .sc-producto{border-color:#9dffd699}
/* Ventanas del mando y la cesta (movible.mjs): se arrastran por la cabecera y cambian de tamaño por la esquina. */
.sc-mando-caja{position:relative}
.sc-mando-caja header.sc-asa{cursor:grab;touch-action:none;user-select:none}
.sc-mando-caja header.sc-asa:active{cursor:grabbing}
.sc-mando-caja .vent-esquina{z-index:3}
/* La playlist del hilo musical: quitar cada canción con la papelera a su izquierda. */
.sc-mando .context-playlist-editor li{display:flex!important;align-items:center;gap:8px}
.sc-mando .context-playlist-editor li>button[data-playlist-remove]{order:-1;flex:0 0 32px;width:32px;min-height:32px;padding:0;font-size:0;line-height:0;display:grid;place-items:center;border-radius:8px}
.sc-mando .context-playlist-editor li>button[data-playlist-remove]::before{content:"🗑";font-size:15px;line-height:1}
.sc-mando .context-playlist-editor li>button[data-playlist-remove]:hover:not(:disabled){background:#7a1d1d;border-color:#ff9b9b}
/* Quiosco e iPad (kiosko.mjs, ipad-cola.js): el asa encima del marco para moverlos; la esquina, para el tamaño. */
.sc-ventana-asa{position:absolute;left:50%;top:-34px;transform:translateX(-50%);z-index:4;white-space:nowrap;padding:5px 14px;border-radius:999px;background:#0d1915f0;color:#eef4ef;border:1px solid #2c463c;font:600 13px system-ui,sans-serif;cursor:grab;touch-action:none;user-select:none;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.sc-ventana-asa:active{cursor:grabbing}
.sc-kiosko-marco .vent-esquina,#ipadColaModal .wrap .vent-esquina{z-index:5;right:-6px;bottom:-6px;width:22px;height:22px;background-color:#0d1915cc;border-radius:6px}
.sc-kiosko-marco.sc-movida{aspect-ratio:9/16}
#ipadColaModal .wrap.sc-movida{aspect-ratio:4/3}
.sc-mando-editar{font-size:12px;color:#b5d1c7}.sc-mando-editar a{color:#9dffd6;font-weight:600}