:root {
  --bg: #08090a;
  --panel: rgba(17, 19, 21, .72);
  --panel-strong: rgba(12, 13, 14, .88);
  --line: rgba(255,255,255,.13);
  --text: #fff;
  --muted: rgba(255,255,255,.62);
  --accent: #fff;
  --shadow: 0 18px 55px rgba(0,0,0,.34);
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body, #app, #panorama { width:100%; height:100%; margin:0; }
html, body { overflow:hidden; background:var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); }
button { font:inherit; }
button:focus-visible { outline:2px solid #fff; outline-offset:3px; }

#app { position:relative; background:#000; }
#panorama { position:absolute; inset:0; }
#panorama::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.32),transparent 25%,transparent 67%,rgba(0,0,0,.38)); z-index:2; }

.glass { background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }

.topbar { position:absolute; top:max(18px,env(safe-area-inset-top)); left:18px; right:18px; height:64px; z-index:20; border-radius:18px; display:flex; align-items:center; justify-content:space-between; padding:8px 10px 8px 8px; transition:.25s ease; }
.brand { display:flex; align-items:center; gap:11px; color:white; border:0; background:transparent; cursor:pointer; padding:0; text-align:left; }
.brand-mark { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:#fff; color:#111; font-size:13px; font-weight:900; letter-spacing:.07em; }
.brand-copy { display:flex; flex-direction:column; min-width:0; }
.brand-copy strong { font-size:12px; letter-spacing:.13em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(52vw,440px); }
.brand-copy small { margin-top:3px; color:var(--muted); font-size:12px; }
.top-actions { display:flex; gap:5px; }
.icon-btn, .close-btn { border:0; color:#fff; background:transparent; cursor:pointer; }
.icon-btn { width:43px; height:43px; border-radius:12px; font-size:20px; display:grid; place-items:center; transition:.15s ease; }
.icon-btn:hover { background:rgba(255,255,255,.1); }

.scene-panel, .map-panel { position:absolute; z-index:30; top:98px; right:18px; width:min(380px,calc(100vw - 36px)); max-height:calc(100vh - 190px); border-radius:22px; padding:16px; opacity:0; pointer-events:none; transform:translateX(24px) scale(.985); transition:.22s ease; overflow:hidden; }
.map-panel { width:min(390px,calc(100vw - 36px)); }
.scene-panel.open, .map-panel.open { opacity:1; pointer-events:auto; transform:none; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; padding:4px 4px 14px; }
.panel-head small { color:var(--muted); letter-spacing:.13em; font-size:10px; }
.panel-head h2 { margin:2px 0 0; font-size:22px; }
.close-btn { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); font-size:23px; line-height:1; }

.scene-list { display:grid; gap:9px; overflow:auto; max-height:calc(100vh - 285px); padding-right:2px; }
.scene-card { position:relative; min-height:96px; border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden; cursor:pointer; background:#1a1b1d; color:white; text-align:left; padding:0; }
.scene-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.52; filter:saturate(.8); transition:.25s ease; }
.scene-card::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.08)); }
.scene-card-content { position:relative; z-index:2; padding:20px; display:flex; flex-direction:column; justify-content:center; min-height:96px; }
.scene-card strong { font-size:15px; }
.scene-card small { color:rgba(255,255,255,.67); margin-top:3px; }
.scene-card:hover img, .scene-card.active img { transform:scale(1.035); opacity:.68; }
.scene-card.active { border-color:rgba(255,255,255,.65); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.scene-card.active .scene-card-content::before { content:"VIENDO"; font-size:9px; letter-spacing:.14em; margin-bottom:8px; color:rgba(255,255,255,.74); }

.map-canvas { position:relative; aspect-ratio:1.22; border-radius:16px; overflow:hidden; background:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px), #111315;
  background-size:22px 22px; border:1px solid rgba(255,255,255,.09); }
.room { position:absolute; border:2px solid rgba(255,255,255,.18); border-radius:9px; display:flex; align-items:flex-start; justify-content:center; padding-top:13px; color:rgba(255,255,255,.24); font-size:9px; letter-spacing:.14em; }
.room-a { left:8%; top:46%; width:34%; height:43%; transform:rotate(-4deg); }
.room-b { left:43%; top:42%; width:48%; height:45%; transform:rotate(3deg); }
.room-c { left:25%; top:8%; width:57%; height:34%; transform:rotate(-1deg); }
.map-node { position:absolute; width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.88); background:#23262a; color:#fff; cursor:pointer; transform:translate(-50%,-50%); box-shadow:0 6px 20px rgba(0,0,0,.35); transition:.18s ease; z-index:5; }
.map-node span { font-size:11px; font-weight:800; }
.map-node:hover { transform:translate(-50%,-50%) scale(1.12); }
.map-node.active { background:#fff; color:#111; box-shadow:0 0 0 7px rgba(255,255,255,.15),0 8px 24px rgba(0,0,0,.45); }
.map-legend { display:flex; align-items:center; gap:8px; padding:13px 4px 2px; color:var(--muted); font-size:11px; }
.legend-dot { width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.12); }

.viewer-controls { position:absolute; left:18px; top:99px; z-index:20; border-radius:14px; padding:5px; display:grid; }
.viewer-controls button { width:40px; height:40px; border:0; background:transparent; color:#fff; font-size:23px; cursor:pointer; border-radius:9px; }
.viewer-controls button:hover { background:rgba(255,255,255,.1); }
.viewer-controls span { height:1px; background:var(--line); margin:1px 7px; }

.drag-help { position:absolute; z-index:18; left:50%; bottom:104px; transform:translateX(-50%); border-radius:99px; padding:10px 15px; display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.82); font-size:11px; pointer-events:none; transition:.35s ease; }
.drag-help.hide { opacity:0; transform:translate(-50%,8px); }
.mouse-icon { font-size:16px; }

.bottom-scenes { position:absolute; z-index:20; bottom:max(18px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); max-width:calc(100vw - 36px); border-radius:18px; padding:6px; display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; }
.bottom-scenes::-webkit-scrollbar { display:none; }
.quick-scene { flex:0 0 auto; border:0; border-radius:12px; background:transparent; color:rgba(255,255,255,.64); padding:10px 14px; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.03em; transition:.15s ease; white-space:nowrap; }
.quick-scene:hover { background:rgba(255,255,255,.08); color:#fff; }
.quick-scene.active { background:#fff; color:#111; }

/* Pannellum customisation */
.pnlm-container { background:#050505; }
.pnlm-render-container { cursor:grab; }
.pnlm-render-container:active { cursor:grabbing; }
.pnlm-load-box, .pnlm-about-msg, .pnlm-controls-container, .pnlm-panorama-info { display:none !important; }
.pnlm-hotspot-base.scene-hotspot,
.pnlm-hotspot-base.info-hotspot { width:50px; height:50px; margin-left:-25px; margin-top:-25px; border-radius:50%; background:rgba(12,13,14,.72) !important; border:1px solid rgba(255,255,255,.8); box-shadow:0 8px 22px rgba(0,0,0,.38),0 0 0 7px rgba(255,255,255,.08); transition:.2s ease; }
.pnlm-hotspot-base.scene-hotspot::before { content:"↑"; position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:22px; font-weight:300; }
.pnlm-hotspot-base.info-hotspot::before { content:"i"; position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:19px; font-weight:800; font-family:Georgia,serif; }
.pnlm-hotspot-base.scene-hotspot:hover,
.pnlm-hotspot-base.info-hotspot:hover { transform:scale(1.08); background:rgba(255,255,255,.94) !important; }
.pnlm-hotspot-base.scene-hotspot:hover::before,
.pnlm-hotspot-base.info-hotspot:hover::before { color:#111; }
.pnlm-tooltip span { border-radius:10px !important; background:rgba(9,10,11,.88) !important; border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 35px rgba(0,0,0,.34); padding:9px 12px !important; font-size:11px !important; white-space:nowrap; }

.info-popover { position:fixed; z-index:60; left:50%; bottom:104px; transform:translateX(-50%); width:min(430px,calc(100vw - 36px)); padding:18px; border-radius:18px; background:rgba(11,12,13,.92); border:1px solid rgba(255,255,255,.15); box-shadow:0 20px 60px rgba(0,0,0,.46); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.info-popover .info-close { float:right; width:34px; height:34px; border:0; border-radius:9px; color:white; background:rgba(255,255,255,.08); cursor:pointer; font-size:20px; }
.info-popover small { color:var(--muted); letter-spacing:.12em; font-size:9px; }
.info-popover h3 { margin:5px 40px 8px 0; font-size:18px; }
.info-popover p { margin:0; color:rgba(255,255,255,.7); line-height:1.55; font-size:13px; }

.loading-screen { position:absolute; inset:0; z-index:100; background:#090a0b; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transition:.55s ease; }
.loading-screen.done { opacity:0; pointer-events:none; }
.loading-logo { width:72px; height:72px; border-radius:20px; background:#fff; color:#111; display:grid; place-items:center; font-weight:950; letter-spacing:.08em; }
.loading-line { width:170px; height:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.loading-line i { display:block; width:50%; height:100%; background:#fff; animation:loader 1.1s ease-in-out infinite; }
.loading-screen span { color:rgba(255,255,255,.48); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
@keyframes loader { 0% { transform:translateX(-105%); } 100% { transform:translateX(205%); } }

.fatal-error { position:absolute; z-index:110; inset:0; background:#0b0c0d; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; gap:8px; }
.fatal-error strong { font-size:18px; }
.fatal-error span { max-width:520px; color:var(--muted); font-size:13px; line-height:1.5; }

@media (max-width: 700px) {
  .topbar { top:12px; left:12px; right:12px; height:58px; border-radius:16px; }
  .brand-mark { width:42px; height:42px; border-radius:11px; }
  .brand-copy strong { max-width:40vw; font-size:10px; }
  .brand-copy small { font-size:11px; }
  .icon-btn { width:38px; height:38px; }
  .viewer-controls { left:12px; top:82px; }
  .scene-panel, .map-panel { top:82px; right:12px; width:calc(100vw - 24px); max-height:calc(100vh - 166px); }
  .drag-help { bottom:89px; }
  .bottom-scenes { bottom:12px; max-width:calc(100vw - 24px); }
  #fullscreenBtn { display:none; }
}

@media (max-width: 430px) {
  #projectName { display:none; }
  .brand-copy { min-width:90px; }
  .scene-list { max-height:calc(100vh - 255px); }
}