/* Vista 3D del pabellón. Usa las mismas variables de color que expo.css. */
:root{--scene:#DDE3E0;--floor:#C9D0CD}
@media (prefers-color-scheme: dark){:root{--scene:#141A19;--floor:#2A3230}}
html,body{height:100%}
body.v3d{background:var(--scene);overflow:hidden;padding:0}
#stage{position:fixed;inset:0;touch-action:none}
#stage canvas{display:block;width:100%;height:100%}
.v3d .hud{position:fixed;left:0;right:0;top:0;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 0;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-start;pointer-events:none}
.v3d .hud > *{pointer-events:auto}
.v3d .glass{background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.v3d .brand{padding:10px 14px}
.v3d .brand h1{font-size:1.3rem}
.v3d .tools{display:flex;gap:8px;align-items:center;padding:8px;min-width:0}
.v3d .tools input,.v3d .tools select{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-width:0}
.v3d .tools input{width:200px}
.v3d .legend{padding:8px 12px}
.v3d .cams{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;padding:6px}
.v3d .cams button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600;font-size:.84rem}
.v3d .cams button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.v3d .hint{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:8px 12px;font-size:.8rem;color:var(--muted);max-width:340px}
.v3d .detail{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:330px;padding:16px;display:flex;flex-direction:column;gap:12px}
.v3d .detail .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-right:30px}
.v3d .detail h2{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:1.8rem;margin:0;line-height:1}
.v3d .detail .btn.primary{width:100%;padding:11px}
.v3d .close{position:absolute;right:10px;top:10px;border:0;background:none;font-size:1.3rem;cursor:pointer;color:var(--muted);width:32px;height:32px;border-radius:6px}
.v3d .toast{top:calc(90px + env(safe-area-inset-top,0px));bottom:auto}
.v3d .loading{position:fixed;inset:0;display:grid;place-items:center;color:var(--muted)}
@media (max-width:720px){
  .v3d .brand{flex:1 1 100%}
  .v3d .brand h1{font-size:1.1rem}
  .v3d .brand .btn{padding:6px 10px}
  .v3d .tools{flex:1 1 100%}
  .v3d .tools input{width:auto;flex:1}
  .v3d .tools select{max-width:46%}
  .v3d .legend,.v3d .hint{display:none}
  .v3d .detail{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .v3d .cams{flex-direction:row;right:12px;left:12px;justify-content:center}
  .v3d .detail:not([hidden]) ~ .cams{display:none}
}