#app{height:100vh;flex-direction:column;height:100dvh;display:flex}.layout{flex:1;grid-template-columns:minmax(0,1fr) clamp(320px,28vw,420px);min-height:0;display:grid}#viewport{min-width:0;min-height:0;position:relative;overflow:hidden}#canvas{position:absolute;inset:0}#canvas canvas{touch-action:none;display:block}.floor-switch{border-radius:calc(var(--radius) + 2px);background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scrollbar-width:none;z-index:3;gap:6px;max-height:calc(100% - 140px);padding:6px;display:grid;position:absolute;top:50%;left:14px;overflow-y:auto;transform:translateY(-50%)}.floor-switch button{border-radius:calc(var(--radius) * .75);background:var(--surface);border:1px solid #0000;align-content:center;justify-items:center;gap:1px;width:76px;min-height:50px;padding:6px 4px;display:grid}.floor-switch b{font-family:var(--font-display);color:var(--text-strong);font-size:17px;font-weight:800;line-height:1.1}.floor-switch small{color:var(--muted);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;-webkit-line-clamp:2;text-align:center;-webkit-box-orient:vertical;max-width:70px;font-size:9.5px;line-height:1.15;display:-webkit-box;overflow:hidden}.floor-switch button.active{background:var(--accent);box-shadow:var(--glow)}.floor-switch button.active b,.floor-switch button.active small{color:var(--on-accent)}.view-tools{pointer-events:none;z-index:3;flex-wrap:wrap;align-items:flex-end;gap:8px;display:flex;position:absolute;bottom:14px;left:14px;right:14px}.view-tools>*{pointer-events:auto}.kiosk-pill{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;border-radius:999px;align-items:center;gap:8px;max-width:100%;padding:5px 5px 5px 14px;font-size:13px;font-weight:600;display:inline-flex}.kiosk-pill .you{background:var(--you);width:10px;height:10px;box-shadow:0 0 0 4px color-mix(in srgb, var(--you) 35%, transparent);border-radius:50%;flex:none}.kiosk-pill select{background:var(--surface);border:0;border-radius:999px;min-width:0;max-width:220px;padding:6px 10px;font-weight:600}.view-tools .chip-btn{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.caption{border-radius:calc(var(--radius) + 2px);background:var(--panel-solid);border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);width:max-content;max-width:min(760px,100% - 200px);box-shadow:var(--shadow), var(--glow);font-family:var(--font-display);color:var(--text-strong);z-index:4;align-items:center;gap:14px;padding:12px 20px;font-size:clamp(15px,1.4vw,20px);font-weight:700;animation:.3s cap-in;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.caption .si{color:var(--accent);font-size:1.3em}@keyframes cap-in{0%{opacity:0;transform:translate(-50%,-10px)}}.present-badge{background:color-mix(in srgb, var(--bad) 16%, var(--panel-solid));border:1px solid color-mix(in srgb, var(--bad) 55%, transparent);color:var(--text-strong);letter-spacing:.3px;z-index:3;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;position:absolute;bottom:14px;right:14px}.present-badge.paused{background:var(--panel-solid);border-color:var(--line)}body.presenting .lockable{pointer-events:none;opacity:.55;filter:saturate(.7)}body.presenting #directory.lockable{opacity:1;filter:none}body.presenting #dir-count{visibility:hidden}body.presenting #directory:after{content:"Modo presentación";letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:700;position:absolute;top:16px;right:16px}#directory{border-left:1px solid var(--line);background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);flex-direction:column;gap:10px;min-height:0;padding:16px 16px 14px;display:flex;position:relative;overflow:hidden auto}#directory>*{flex:none}.dir-head{justify-content:space-between;align-items:baseline;display:flex}.dir-head h2{font-family:var(--font-display);letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:0;font-size:12px}.dir-head span{color:var(--muted);font-size:12px}#mall-name{font-family:var(--font-display);color:var(--text-strong);white-space:nowrap;text-overflow:ellipsis;margin:-6px 0 0;font-size:21px;font-weight:800;line-height:1.3;overflow:hidden}.search{position:relative}.search input{border-radius:calc(var(--radius) * .85);border:1px solid var(--line);background:var(--surface);outline:none;width:100%;padding:11px 40px 11px 42px;font-size:15px}.search input::placeholder{color:var(--muted)}.search input:focus{border-color:color-mix(in srgb, var(--accent) 60%, transparent);background:var(--surface-2)}.search input::-webkit-search-cancel-button{appearance:none}.search:before{content:"⌕";color:var(--muted);font-size:20px;position:absolute;top:50%;left:14px;transform:translateY(-52%)}.search button{color:var(--muted);background:0 0;border:0;padding:6px 10px;font-size:18px;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.cats{scrollbar-width:none;gap:6px;padding-bottom:2px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000);mask-image:linear-gradient(90deg,#000 85%,#0000)}.cats::-webkit-scrollbar{display:none}.cat{--c:var(--muted);border:1px solid var(--line);color:var(--muted);background:0 0;border-radius:999px;flex:none;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex}.cat i{background:var(--c);border-radius:50%;width:8px;height:8px}.cat.active{color:var(--text-strong);border-color:var(--c);background:color-mix(in srgb, var(--c) 18%, transparent)}.cat[data-cat=""].active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 15%, transparent)}.wheel{perspective:900px;-webkit-user-select:none;user-select:none;touch-action:none;cursor:grab;outline:none;height:clamp(190px,36vh,380px);position:relative;-webkit-mask-image:linear-gradient(#0000 0%,#000 16% 84%,#0000 100%);mask-image:linear-gradient(#0000 0%,#000 16% 84%,#0000 100%)}.wheel:active{cursor:grabbing}.wheel-track{transform-style:preserve-3d;position:absolute;inset:0}.wheel-frame{border-radius:calc(var(--radius) + 2px);border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));height:72px;box-shadow:var(--shadow), var(--glow);pointer-events:none;margin-top:-36px;position:absolute;top:50%;left:2px;right:2px}.wheel:focus-visible .wheel-frame{border-color:var(--accent-2)}.wheel-item{backface-visibility:hidden;will-change:transform, opacity;transform-origin:50%;border-radius:14px;align-items:center;gap:14px;height:64px;margin-top:-32px;padding:0 12px;display:flex;position:absolute;top:50%;left:10px;right:10px}.wheel-item .wi-text{min-width:0;display:grid}.wheel-item b{font-family:var(--font-display);color:var(--text-strong);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:700;transition:font-size .15s;overflow:hidden}.wheel-item small{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.wheel-item.is-current b{font-size:18px}.wheel-item .wi-warn{color:var(--warn);border:1px solid;border-radius:50%;flex:none;place-items:center;width:20px;height:20px;margin-left:auto;font-size:12px;font-style:normal;font-weight:800;display:grid}.wheel.empty:after{content:"Sin resultados";color:var(--muted);place-items:center;display:grid;position:absolute;inset:0}.card{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);gap:10px;padding:14px;animation:.25s card-in;display:grid}@keyframes card-in{0%{opacity:.4}}.card-head{align-items:center;gap:12px;min-width:0;display:flex}.card-head>div{min-width:0}.card h3{font-family:var(--font-display);color:var(--text-strong);text-overflow:ellipsis;margin:0;font-size:19px;overflow:hidden}.card-head p{color:var(--muted);margin:2px 0 0;font-size:13.5px}.card .desc{color:var(--text);margin:0;font-size:14px;line-height:1.45}.card .warn{margin:0;font-size:14px}.card-actions{gap:8px;display:grid}.card-extra{gap:8px;display:flex}.tags{flex-wrap:wrap;gap:6px;display:flex}.tag{--c:var(--muted);color:var(--text-strong);background:color-mix(in srgb, var(--c) 30%, transparent);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;text-decoration:none}.tag.plain{background:var(--surface-2);color:var(--text);font-weight:600}.route-panel{flex-direction:column;gap:8px;min-height:140px;display:flex;flex:auto!important}.route-head{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}#route-summary{font-size:15px;line-height:1.5}#route-summary b{font-family:var(--font-display);color:var(--accent);font-size:20px}#route-summary small{color:var(--muted)}.route-actions{gap:6px;display:flex}#route-steps{flex:1;align-content:start;gap:6px;min-height:0;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}#route-steps li{background:var(--surface);border-radius:12px;align-items:center;gap:12px;padding:9px 12px;font-size:14px;line-height:1.35;transition:background .2s,color .2s;display:flex}#route-steps li .si{background:var(--surface-2);border-radius:8px;flex:none;place-items:center;width:28px;height:28px;font-weight:800;display:grid}#route-steps li.active{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--text-strong);font-weight:600}#route-steps li.active .si{background:var(--accent);color:var(--on-accent)}#route-steps li.done{color:var(--muted)}body.has-route .wheel{height:clamp(150px,22vh,230px)}body.has-route .card .desc,body.has-route .card .tags{display:none}.shop-overlay{z-index:60;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#02061799;place-items:center;padding:2vh 2vw;animation:.2s card-in;display:grid;position:fixed;inset:0}.shop-overlay iframe{border:1px solid var(--line);border-radius:calc(var(--radius) * 1.2);background:var(--bg);width:min(1200px,100%);height:100%;box-shadow:0 30px 80px #00000080}@media (max-height:820px) and (orientation:landscape){#directory{gap:8px;padding:12px 14px 10px}#mall-name{font-size:18px}.card{gap:8px;padding:12px}.card .desc{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.btn-primary{padding:11px 16px;font-size:15px}.logo.big{width:46px;height:46px;font-size:16px}}@media (max-height:680px) and (orientation:landscape){#mall-name,.dir-head{display:none}.wheel{height:clamp(150px,30vh,230px)}body.has-route .wheel,.card .desc,.card .tags,.floor-switch small{display:none}.floor-switch button{width:48px;min-height:40px}}@media (max-width:1250px){.topbar .chip-btn .lbl{display:none}.topbar .chip-btn{padding:8px 11px}}@media (max-aspect-ratio:4/5),(max-width:900px) and (orientation:portrait){.layout{grid-template-rows:minmax(0,52%) minmax(0,48%);grid-template-columns:1fr}#directory{border-left:0;border-top:1px solid var(--line);gap:8px;padding:10px 12px}.wheel,body.has-route .wheel{height:clamp(150px,24vh,300px)}#mall-name,.card .desc{display:none}.caption{max-width:calc(100% - 24px);padding:9px 14px;font-size:14px;top:auto;bottom:58px}.floor-switch{max-height:calc(100% - 70px);top:8px;left:8px;transform:none}.floor-switch small{display:none}.floor-switch button{width:46px;min-height:40px}.view-tools{bottom:8px;left:8px;right:8px}.view-tools .chip-btn .lbl,.topbar .chip-btn .lbl,body.has-route .search,body.has-route .cats,body.has-route .wheel,body.has-route .dir-head{display:none}body.has-route .card{gap:8px;padding:10px 12px}body.has-route .card #btn-go{display:none}.shop-overlay{padding:0}.shop-overlay iframe{border:0;border-radius:0}}@media (max-width:560px){.brand small,.brand>span:last-child{display:none}.select{max-width:150px}.topbar{gap:6px;padding:6px 8px}.kiosk-pill{gap:6px;padding-left:10px;font-size:0}.kiosk-pill select{max-width:170px;font-size:13px}}@media (max-height:500px) and (orientation:landscape){#app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.topbar{gap:8px;min-height:0;padding:5px 10px}.brand small,.brand>span:last-child,.topbar .chip-btn .lbl{display:none}.layout{grid-template-columns:minmax(0,1fr) clamp(280px,42vw,360px)}#directory{gap:6px;padding:8px 10px}.wheel{height:clamp(120px,40vh,200px)}.card{gap:8px;padding:10px 12px}.caption{width:-moz-fit-content;width:fit-content;max-width:none;margin-inline:auto;padding:8px 12px;font-size:14px;animation-name:cap-in-flat;top:8px;left:140px;right:8px;transform:none}.floor-switch{max-height:calc(100% - 66px);top:8px;left:8px;transform:none}.view-tools{bottom:8px;left:8px;right:8px}.view-tools .chip-btn .lbl{display:none}.kiosk-pill select{max-width:170px}}.sheet-handle{display:none}.ui-sheet .layout{display:block;position:relative}.ui-sheet #viewport{position:absolute;inset:0}.ui-sheet #directory{z-index:10;height:50%;padding-top:0;padding-bottom:calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg-2);overscroll-behavior:contain;border-radius:20px 20px 0 0;transition:height .28s cubic-bezier(.2,.8,.2,1);position:absolute;bottom:0;left:0;right:0;box-shadow:0 -12px 32px #00000059}.ui-sheet[data-sheet=peek] #directory{overflow:hidden}.ui-sheet .sheet-handle{z-index:4;background:var(--bg-2);touch-action:none;cursor:grab;border:0;border-radius:20px 20px 0 0;justify-content:center;align-items:center;height:30px;margin:0 -12px -4px;padding:0;display:flex;position:sticky;top:0}.sheet-handle span{background:color-mix(in srgb, var(--text-strong) 32%, transparent);border-radius:3px;width:44px;height:5px}.ui-sheet .dir-head{touch-action:none}.ui-sheet .view-tools{bottom:calc(var(--sheet-h,50%) + 8px)}.ui-sheet .caption{bottom:calc(var(--sheet-h,50%) + 58px)}.ui-sheet .floor-switch{max-height:calc(100% - var(--sheet-h,50%) - 70px)}.ui-sheet body.has-route .floor-switch{max-height:calc(100% - var(--sheet-h,50%) - 140px)}.ui-sheet :is(.view-tools,.caption,.floor-switch){transition:bottom .28s cubic-bezier(.2,.8,.2,1),opacity .2s}.ui-sheet.sheet-dragging :is(#directory,.view-tools,.caption,.floor-switch){transition:none}.ui-sheet[data-sheet=full] :is(.view-tools,.caption,.floor-switch){opacity:0;pointer-events:none}.ui-sheet[data-sheet=full] .wheel{height:clamp(220px,42vh,420px)}@keyframes cap-in-flat{0%{opacity:0;transform:translateY(-10px)}}
