/* =========================================================
   Oficina Espacial · APP UI (oficina + admin)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --bg1:#0a0f17; --bg2:#0e1420;
  --grid:rgba(255,255,255,.045);
  --line:rgba(120,200,255,.28);
  --panel:rgba(12,18,30,.86);
  --pill:rgba(18,24,38,.94);
  --accent:#76d2ff;
  --accent2:#8ef0c5;
  --muted:#cfe9ff;
  --shadow:0 20px 36px rgba(0,0,0,.5);
  --radius-lg:16px;
}

/* ---------- Reseteo básico ---------- */

html,body{
  margin:0; background:var(--bg1);
  color:#eaf3ff; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  height:100%;
}
*, *::before, *::after{ box-sizing:border-box; }
input,button,textarea,select{ font:inherit; }

/* ===== Fix mobile zoom y selección de texto ===== */
input, textarea, button, select {
  font-size: 16px; /* evita zoom automático en iOS */
}

html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* sin menú copiar/pegar */
}

button, input, textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

* {
  -webkit-tap-highlight-color: transparent; /* sin highlight azul */
}

/* =========================================================
   Viewport / Mapa
   ========================================================= */
#viewport{ position:fixed; inset:0; overflow:hidden; z-index:0; }
#mapa{
  position:absolute; top:0; left:0; /* contenedor posicionado para hijos absolutos */
  background:
    linear-gradient(0deg, var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  background-size:60px 60px,60px 60px,100% 100%;
  transition: transform .05s linear;
}
body.no-grid #mapa{
  background:
    linear-gradient(135deg, var(--bg1), var(--bg2));
}

/* Capas del lienzo */
.room{ z-index:100; }
.label{ z-index:120; }
.door{ z-index:150; }
.obj{  z-index:180; }

/* ======= FIX transmisión ======= */
/* Forzamos posicionamiento absoluto para respetar left/top que define tu JS */
.cast, .cast-remote{
  position:absolute;
  left:0; top:0;
  transform:translate(-50%, -50%);
  width:260px; height:160px;           /* valores por defecto; el JS puede sobreescribir */
  background:rgba(0,0,0,.7);
  border:3px solid rgba(120,200,255,.45);
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  overflow:hidden;
  pointer-events:auto;
}
.cast-remote{
  border-color: rgba(142,240,197,.45);
}
.cast video, .cast-remote video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.live-badge{
  position:absolute; left:10px; top:10px;
  font-size:11px; background:rgba(220,38,38,.9);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:2px 8px; border-radius:999px;
  letter-spacing:.3px;
}
/* =============================== */

.doorPrompt{ z-index:300; }
.avatar,.me{ z-index:400; }
#topbar,#chat,#adminBar,.panel-toggle{ z-index:1100; }
.modal{ z-index:3000; }
.bg-layer{ pointer-events:none; z-index:0; }

/* =========================================================
   Salas / Puertas / Objetos
   ========================================================= */
.room{
  position:absolute; border-radius:24px; box-sizing:border-box;
  background:
    radial-gradient(120% 100% at 50% 70%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(135deg, #111a2a, #0d1523);
  box-shadow:0 0 0 2px rgba(255,255,255,.05) inset, var(--shadow);
}
.label{
  position:absolute; top:-26px; left:12px; font-size:13px; color:#cfe9ff;
  background:rgba(10,18,30,.9); padding:4px 10px; border-radius:999px; border:1px solid var(--line);
  white-space:nowrap; pointer-events:none;
}
.wall{ position:absolute; background:transparent; }

.door{
  position:absolute; display:flex; align-items:center; justify-content:center;
  background:rgba(120,200,255,.16); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 0 18px rgba(120,200,255,.55); color:#cfe9ff; font-size:11px;
  pointer-events:auto; padding:2px 6px; cursor:grab;
}
.doorPrompt{
  position:absolute; transform:translate(-50%,-90%); pointer-events:none;
  background:var(--pill); border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; font-size:12px; color:#cfe9ff; white-space:nowrap; display:none;
}

/* Objetos */
.obj{
  position:absolute; display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(255,255,255,.35); border-radius:10px; background:rgba(255,255,255,.06); color:#cfe9ff;
  cursor:grab; width:48px; height:48px;
}
.obj img{
  width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; border-radius:10px;
}
.obj[data-type="image-banner"] img{ object-fit:cover; }
.obj .badge{
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-size:11px; background:rgba(0,0,0,.55); padding:2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
}

/* Filtro visual de búsqueda */
.is-dim{ opacity:.35; filter:saturate(.3); }
.is-hit{ outline:2px solid rgba(120,200,255,.6); outline-offset:2px; }

/* Handles / selección */
.handle{
  position:absolute; width:10px; height:10px; background:#fff; border-radius:2px; border:1px solid #000; display:none;
}
.selected{ outline:2px dashed rgba(120,200,255,.65); outline-offset:2px; }
.selected .handle{ display:block; }

/* =========================================================
   Avatares
   ========================================================= */
.avatar,.me{
  position:absolute; width:100px; height:100px; transform:translate(-50%,-50%);
  border-radius:50%; border:4px solid #fff; background:#000; overflow:hidden;
  box-shadow:0 10px 20px rgba(0,0,0,.45);
}
.avatar video,.me video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.tag{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  font-size:12px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:2px 8px; white-space:nowrap;
}

/* =========================================================
   Topbar
   ========================================================= */
#topbar{
  position:fixed; top:12px; right:12px; left:auto; bottom:auto;
  display:flex; gap:10px; align-items:center;
  background:transparent; border:none; border-radius:0; padding:0;
  pointer-events:none;
}
#topbar button{
  pointer-events:auto;
  width:42px; height:42px; border-radius:50%;
  background:rgba(15,20,30,.7); color:#e9f2ff; border:1px solid rgba(255,255,255,.15);
  padding:0; cursor:pointer; font-size:16px; touch-action:manipulation;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
#topbar button:hover{ border-color:var(--accent); }

/* =========================================================
   Chat
   ========================================================= */
#chat{
  position:fixed; right:12px; bottom:12px; width:360px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:0;
  backdrop-filter: blur(6px); overflow:hidden;
}
#msgs{
  max-height:40vh; height:auto; overflow:auto; font-size:13px; background:rgba(0,0,0,.22);
  border-bottom:1px solid rgba(255,255,255,.15); padding:10px; scroll-behavior:smooth;
}
#chat form{ display:flex; gap:6px; padding:8px; }
#chat input{
  flex:1; padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#e9f2ff;
}
#chat button{
  padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12); color:#e9f2ff; cursor:pointer;
}
#chat button:hover{ border-color:var(--accent2); }
#chat .chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:12px; opacity:.9;
}
#chat .chat-head .actions{ display:flex; gap:6px; }
#chat .chat-head button{ width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; }
#chat.is-collapsed{ height:auto; max-height:none; }
#chat.is-collapsed #msgs{ display:none; }
#chat.on-left{ right:auto; left:12px; }

/* FAB chat (móvil) */
.chat-fab{
  position:fixed; left:14px; bottom:18px;
  width:52px; height:52px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#eaf3ff;
  border:1px solid rgba(255,255,255,.25);
  font-size:22px; z-index:1201; cursor:pointer;
  backdrop-filter: blur(6px);
}
.chat-fab:active{ transform:scale(.98); }
#chat.is-hidden{ display:none; }

/* =========================================================
   Admin Sidebar 2.5 (con búsqueda y acordeones)
   ========================================================= */
#adminBar{
  position:fixed; left:0; top:0; bottom:0;
  display:flex; flex-direction:column;
  width:320px; min-width:320px; max-width:360px;
  background:rgba(10,14,22,.94);
  border-right:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow: 8px 0 24px rgba(0,0,0,.35);
  transition: transform .25s ease;
}

/* Header */
.ab-header{
  position:sticky; top:0; z-index:4;
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(12,18,30,.96), rgba(12,18,30,.88));
  display:grid; gap:10px;
}
.ab-title-main{ display:flex; align-items:center; gap:8px; font-size:14px; color:#e9f2ff; }
.ab-title-main .dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent);
}
.ab-subtitle-main{ font-size:12px; color:var(--muted); opacity:.8; }

/* Búsqueda contextual */
.ab-search{ display:grid; grid-template-columns:1fr auto; gap:6px; }
.ab-search input{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:8px 10px; color:#e9f2ff;
}
.ab-icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#e9f2ff; cursor:pointer;
}

/* Acciones rápidas */
.ab-quick{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.ab-primary, .ab-btn, .ab-danger{
  padding:10px; border-radius:12px; cursor:pointer; font-size:13px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#eaf3ff;
  transition:border-color .15s, transform .05s;
}
.ab-primary:hover, .ab-btn:hover{ border-color:var(--accent); }
.ab-danger{ border-color:#ff6b6b; color:#ffdcdc; }
.ab-primary:active, .ab-btn:active, .ab-danger:active{ transform:scale(.98); }

/* Tabs */
.ab-tabs{
  position:sticky; top:calc(12px + 10px + 14px + 10px + 38px + 10px + 38px + 10px); /* header aprox + search + quick */
  z-index:3; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  padding:10px 12px; margin:0; background:rgba(12,18,30,.92);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ab-tab{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:#eaf3ff; font-size:12px;
  transition: transform .05s ease, border-color .15s ease, background .15s ease;
}
.ab-tab span{ pointer-events:none; }
.ab-tab:hover{ border-color:var(--accent); }
.ab-tab.active{
  background:linear-gradient(180deg,#2563eb,#1e40af);
  border-color:#1d4ed8; box-shadow:0 6px 18px rgba(37,99,235,.28);
}

/* Body scrolleable */
.ab-body{ position:relative; flex:1 1 auto; overflow:auto; padding:12px; scroll-behavior:smooth; }
.ab-body::before, .ab-body::after{
  content:""; position:sticky; left:0; right:0; height:18px; z-index:2; pointer-events:none;
}
.ab-body::before{ top:0; background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0)); }
.ab-body::after{ bottom:0; background:linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,0)); }

/* Footer fijo con acciones */
.ab-footer{
  position:sticky; bottom:0; z-index:4;
  padding:10px 12px; border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(0deg, rgba(12,18,30,.96), rgba(12,18,30,.88));
  box-shadow:0 -8px 22px rgba(0,0,0,.28);
}
.ab-footer-actions{ display:flex; gap:10px; }
.ab-footer .ab-primary, .ab-footer .ab-danger{
  flex:1; padding:12px; border-radius:12px; cursor:pointer; font-size:14px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#eaf3ff;
}
.ab-footer .ab-primary{ border-color:var(--accent); }
.ab-footer .ab-danger{ border-color:#ff6b6b; color:#ffdcdc; }

/* Panels y secciones */
.ab-panel{ display:none; }
.ab-panel.active{ display:block; }

.ab-section{
  display:flex; flex-direction:column; gap:10px;
  padding:10px; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; background:rgba(255,255,255,.04);
  margin-bottom:12px;
}
.ab-section.single{ margin-bottom:0; }
.ab-section.compact .ab-form{ grid-template-columns:1fr 1fr; }

.ab-title{
  font-size:12px; color:#cfe9ff; opacity:.9; letter-spacing:.3px;
  text-transform:uppercase; display:flex; align-items:center; gap:6px;
}
.ab-title::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.ab-subtitle{ margin-top:2px; font-size:12px; color:#cfe9ff; opacity:.8; }

.ab-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ab-btn{ text-align:center; min-height:44px; }

.ab-form{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ab-form label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:#cfe9ff; }
.ab-form .inline{ display:flex; align-items:center; gap:8px; flex-direction:row; }

.ab-form input[type="text"],
.ab-form input[type="number"],
.ab-form input[type="color"],
.ab-form input[type="url"],
.ab-form input[type="file"],
.ab-form select{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:10px; padding:8px; color:#eaf3ff;
}

/* ---------- Botón hamburguesa (admin) ---------- */
body.is-admin .panel-toggle{
  position:fixed; left:12px; top:12px; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15); background:rgba(15,20,30,.92); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.25);
  cursor:pointer; z-index:1200; pointer-events:auto;
}

/* Viewport desplazado por sidebar */
body.is-admin #viewport{ left:320px; transition:left .25s ease; }
body.is-admin.sidebar-collapsed #adminBar{ transform: translateX(-100%); }
body.is-admin.sidebar-collapsed #viewport{ left:0; }

/* Forzar clics en panel */
#adminBar, #adminBar * { pointer-events:auto !important; }

/* ---------- Acordeón ---------- */
.ab-accordion{ display:block; }
.ab-acc-head{
  width:100%; text-align:left; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); color:#eaf3ff;
  padding:10px 12px; margin:0 0 6px 0; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.ab-acc-head i{
  width:10px; height:10px; border-right:2px solid #9fd4ff; border-bottom:2px solid #9fd4ff;
  transform:rotate(45deg); transition:transform .15s ease;
}
.ab-acc-head[aria-expanded="false"] i{ transform:rotate(-135deg); }
.ab-acc-body{ display:block; margin:0 0 10px 0; }

/* =========================================================
   Modal
   ========================================================= */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.dialog{
  background:#0c1422; border:1px solid var(--line); border-radius:16px;
  width:min(90vw, 1000px); height:min(90vh, 700px);
  display:flex; flex-direction:column; overflow:hidden;
}
.dialog header{
  position:sticky; top:0; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-bottom:1px solid var(--line);
  background:#0c1422;
}
.dialog header h3{ margin:0; font-size:16px; }
.dialog header .actions{ display:flex; gap:8px; align-items:center; }
.dialog header button{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  color:#e9f2ff; padding:8px 12px; border-radius:10px; cursor:pointer; font-size:14px;
}
.dialog .content{
  position:relative; flex:1 1 auto; overflow:hidden; padding:0;
}
.dialog .content > *{ position:absolute; inset:0; width:100%; height:100%; }
.dialog iframe{ width:100% !important; height:100% !important; border:0; }
.dialog textarea{
  width:100% !important; height:100% !important; box-sizing:border-box;
  margin:0; padding:12px; background:#0a101a; color:#e9f2ff;
  border:0; outline:0; resize:none; font-size:16px;
}

/* Whiteboard (index modal read-only) */
.wbWrap{ width:100% !important; height:100% !important; padding:12px; box-sizing:border-box; }
.wbRead{
  width:100% !important; height:100% !important; box-sizing:border-box; overflow:auto;
  color:#e9f2ff; white-space:pre-wrap;
  background:#0b1322; border:1px solid var(--line); border-radius:12px;
}

/* =========================================================
   Joystick móvil
   ========================================================= */
.joy{
  position:fixed; bottom:18px; right:18px; width:90px; height:90px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  display:none; touch-action:none; backdrop-filter: blur(6px);
}
.joy .stick{
  position:absolute; left:50%; top:50%; width:42px; height:42px; border-radius:50%;
  transform:translate(-50%,-50%); background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.35);
}

/* =========================================================
   Accesibilidad / Focus
   ========================================================= */
input:focus,textarea:focus,button:focus,select:focus{
  outline:2px solid rgba(120,200,255,.4); outline-offset:2px;
}

/* =========================================================
   Media queries
   ========================================================= */
/* Tablet */
@media (max-width: 1200px){
  #topbar{ top:12px; right:12px; gap:10px; }
  #topbar button{ font-size:16px; padding:10px 12px; border-radius:12px; }
  #chat{ top:12px; left:12px; right:12px; bottom:auto; width:auto; max-width:none; }
  #msgs{ height:28vh; }
  #chat input{ font-size:16px; padding:12px 14px; }
  .chat-fab{ display:flex; }
  .dialog{ width:88vw; height:82vh; max-width:88vw; max-height:82vh; border-radius:14px; }
}

/* Móvil */
@media (max-width: 900px){
  #msgs{ height:32vh; }
  #topbar{ top:12px; right:12px; gap:8px; }
  #topbar button{ font-size:16px; padding:10px 12px; border-radius:12px; }
  #chat{ top:12px; left:12px; right:12px; bottom:auto; width:auto; max-width:none; }
  #chat input{ font-size:16px; padding:12px 14px; }

  .cast, .cast-remote{ width:180px; height:110px; border-width:2px; } /* mantiene posición absoluta */
  .live-badge{ font-size:10px; padding:2px 6px; }

  .joy{ right:18px; bottom:18px; display:block; z-index:1200; }

  /* Sidebar compacta en móvil: ocúltala por defecto */
  body.is-admin #viewport{ left:0; }
  #adminBar{ transform:translateX(-100%); }
  body.is-admin:not(.sidebar-collapsed) #adminBar{ transform:none; }
}

/* Ultra compacto */
@media (max-width: 380px){
  #topbar{ gap:6px; }
  #topbar button{ padding:8px 10px; }
}