/* Oficina virtual · mapa: lienzo, HUD flotante, ascensor, puerta, joystick. Estilo oscuro de cristal. */
#mapa-cont.oficina { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.of-lienzo { position: absolute; inset: 0; display: block; cursor: default; outline: none; }
.of-error { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tx2); }

.of-chip, .of-zona { position: absolute; z-index: 2; background: var(--glass); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--line2); box-shadow: var(--sh); color: var(--tx); pointer-events: none; }
.of-planta { top: 14px; left: 14px; padding: 7px 13px; border-radius: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .1px; max-width: calc(100vw - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-zona { top: 14px; left: 50%; transform: translate(-50%, -8px); padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .25s, transform .25s; white-space: nowrap; max-width: calc(100vw - 40px); overflow: hidden; text-overflow: ellipsis; }
.of-zona.visible { opacity: 1; transform: translate(-50%, 0); }

.of-accion { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 18px;
  background: var(--glass2); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(var(--acc-rgb),.45); border-radius: 16px; box-shadow: var(--sh2);
  color: var(--tx); font-size: 13.5px; font-weight: 500; cursor: pointer; animation: aparece .2s ease-out; }
.of-accion[hidden] { display: none; }
.of-accion:hover { background: rgba(var(--p3-rgb),.96); }
.of-accion kbd { font: 600 12px var(--f); min-width: 26px; text-align: center; padding: 4px 8px; border-radius: 8px; background: var(--acc); color: var(--acc-tx); box-shadow: 0 2px 0 rgba(0,0,0,.25); }

.of-zoom { position: absolute; right: 14px; bottom: 90px; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.of-zoom button { width: 32px; height: 32px; border-radius: 9px; font-size: 18px; line-height: 1; color: var(--tx2); }
.of-zoom button:hover { background: rgba(var(--tx-rgb),.1); color: var(--tx); }
.of-zoom button.txt { font-size: 10.5px; font-weight: 700; letter-spacing: .2px; }
.of-zoom .of-sep { height: 1px; margin: 2px 6px; background: var(--line2); }
.of-zoom .solo3d, .of-zoom .of-sep { display: none; }
#mapa-cont.tres .of-zoom .solo3d, #mapa-cont.tres .of-zoom .of-sep { display: block; }

/* botón para volver a centrar la vista en uno mismo (solo cuando la cámara está despegada) */
.of-centrar { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 3; padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--tx);
  background: var(--glass); border: 1px solid var(--line2); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--sh); animation: aparece .2s ease-out; }
.of-centrar:hover { background: rgba(var(--tx-rgb),.12); }
.of-centrar[hidden] { display: none; }

/* pantalla de carga: progreso real hasta que la escena está entera; se retira con fundido */
.of-carga { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: radial-gradient(900px 600px at 50% 35%, rgba(var(--acc-rgb),.10), transparent 70%), radial-gradient(900px 600px at 50% 40%, var(--p2), var(--bg0) 75%); transition: opacity .7s ease; }
.of-carga.fuera { opacity: 0; pointer-events: none; }
.of-carga-caja { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(260px, 70vw); }
.of-carga-logo { display: block; height: 40px; width: auto; margin-bottom: 6px; }
.of-carga-barra { width: 100%; height: 3px; border-radius: 999px; background: rgba(var(--tx-rgb),.1); overflow: hidden; }
.of-carga-barra i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--acc), var(--acc-l)); transition: transform .25s ease-out; }
.of-carga-txt { font-size: 12.5px; color: var(--tx2); min-height: 16px; }

/* los paneles del HUD del mapa (acción, tarjetas de puerta, ascensor) van por debajo de las ventanas flotantes de la app (#ventanas: 20) */
/* ───────── escena 3D (oficina3d.js) ───────── */
.of3-lienzo { background: #cfd5dd; }
.of3-capa { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.of3-nombre { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(var(--bg0-rgb),.86); border: 1px solid rgba(var(--tx-rgb),.14); color: var(--tx); font: 600 12px/1.3 var(--f); box-shadow: 0 2px 8px rgba(0,0,0,.25); will-change: transform; }
.of3-nombre i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.of3-sala { position: absolute; left: 0; top: 0; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: rgba(var(--tx-rgb),.84); border: 1px solid rgba(18,19,22,.10); color: var(--grafito);
  font: 600 11px/1.3 var(--f); letter-spacing: .2px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(18,19,22,.12); will-change: transform; }
.of3-velo { position: absolute; inset: 0; background: var(--bg0); opacity: 0; pointer-events: none; z-index: 2; transition: opacity .12s linear; }
#mapa-cont.tres .of-planta, #mapa-cont.tres .of-zona, #mapa-cont.tres .of-zoom, #mapa-cont.tres .of-joy, #mapa-cont.tres .of-centrar { z-index: 3; }

/* tarjetas: alguien llama a tu puerta */
.of-tarjetas { position: fixed; top: 14px; right: 14px; z-index: 15; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.of-tarjeta { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-width: 300px; max-width: 92vw; background: var(--glass2); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--sh2); animation: aparece .22s ease-out; transition: opacity .25s, transform .25s; }
.of-tarjeta.fuera { opacity: 0; transform: translateX(14px); }
.of-t-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.of-t-tx b { font-size: 13px; }
.of-t-tx span { font-size: 12px; color: var(--tx2); }

/* ascensor */
.of-ascensor { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; background: rgba(var(--bg0-rgb),.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.of-ascensor[hidden] { display: none; }
.of-asc-caja { width: min(340px, 92vw); padding: 18px; background: var(--glass2); border: 1px solid var(--line2); border-radius: 20px; box-shadow: var(--sh2); display: flex; flex-direction: column; gap: 8px; animation: aparece .2s ease-out; }
.of-asc-caja h4 { font-size: 15px; margin: 0 2px 6px; }
.of-asc-caja button[data-p] { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 11px 14px; border-radius: 13px; background: var(--p3); border: 1px solid var(--line); transition: background .15s, border-color .15s; }
.of-asc-caja button[data-p] b { font-size: 15px; color: var(--acc-l); }
.of-asc-caja button[data-p] span { font-size: 13.5px; font-weight: 500; }
.of-asc-caja button[data-p] small { font-size: 11.5px; color: var(--tx3); }
.of-asc-caja button[data-p]:not(:disabled):hover { background: var(--acc-s); border-color: rgba(var(--acc-rgb),.5); }
.of-asc-caja button[data-p]:disabled { opacity: .5; cursor: default; }
.of-asc-caja button.aqui { border-color: rgba(var(--acc-rgb),.4); }
.of-asc-caja .of-asc-x { margin-top: 4px; padding: 9px; border-radius: 12px; color: var(--tx2); font-size: 13px; }
.of-asc-caja .of-asc-x:hover { background: rgba(var(--tx-rgb),.07); color: var(--tx); }

/* joystick virtual (móvil) */
.of-joy { position: absolute; left: 22px; bottom: 96px; width: 124px; height: 124px; z-index: 3; border-radius: 50%; touch-action: none;
  background: radial-gradient(circle, rgba(var(--tx-rgb),.05), rgba(var(--tx-rgb),.12)); border: 1px solid var(--line2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; }
.of-joy[hidden] { display: none; }
.of-joy i { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--acc-l), var(--acc)); box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: transform .06s; pointer-events: none; }

@media (max-width: 700px) {
  .of-planta { top: 10px; left: 10px; font-size: 11.5px; padding: 6px 11px; }
  .of-zona { top: 48px; font-size: 12px; }
  .of-zoom { bottom: 88px; right: 10px; }
  .of-accion { bottom: 80px; font-size: 13px; }
  .of-centrar { bottom: 236px; font-size: 12px; }
  .of-tarjeta { min-width: 0; width: calc(100vw - 20px); }
  .of-tarjetas { right: 10px; top: 10px; }
}

/* ───────── audio y vídeo (rtc.js) ───────── */
#rtc-raiz { position: fixed; inset: 0; pointer-events: none; z-index: 58; }
#rtc-raiz > * { pointer-events: none; }
.rtc-tira { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; max-width: calc(100vw - 24px); justify-content: center; flex-wrap: wrap; }
.rtc-tira[hidden] { display: none; }
.rtc-tile { position: relative; width: 168px; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--p2); border: 1px solid var(--line2); box-shadow: var(--sh); pointer-events: auto; transition: box-shadow .2s, border-color .2s; }
.rtc-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; background: #000; }
.rtc-tile.con-video video { opacity: 1; }
.rtc-tile.yo video { transform: scaleX(-1); }
.rtc-tile.pantalla video { object-fit: contain; }
.rtc-av { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--p3), var(--p1)); }
.rtc-tile.con-video .rtc-av { display: none; }
.rtc-nom { position: absolute; left: 8px; bottom: 7px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(var(--bg0-rgb),.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rtc-mudo { position: absolute; right: 7px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--bad-rgb),.9); color: #fff; }
.rtc-mudo[hidden] { display: none; }
.rtc-mudo .ico { width: 12px; height: 12px; }
.rtc-mudo::after { content: ""; position: absolute; width: 16px; height: 1.8px; background: #fff; transform: rotate(-45deg); }
.rtc-tile.hablando { border-color: rgba(var(--ok-rgb),.9); box-shadow: 0 0 0 2px rgba(var(--ok-rgb),.35), var(--sh); }
.rtc-tira.cuadricula { top: 64px; width: min(980px, calc(100vw - 24px)); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; padding: 10px; border-radius: 22px; background: var(--glass); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); border: 1px solid var(--line2); box-shadow: var(--sh2); }
.rtc-tira.cuadricula .rtc-tile { width: auto; }
/* con Mensajes abierto (sin maximizar) los vídeos de cerca pasan a una columna a la derecha para no tapar la ventana */
body:has(.ventana.abierta:not(.max)) .rtc-tira:not(.cuadricula) { top: 72px; left: auto; right: 14px; transform: none; flex-direction: column; flex-wrap: nowrap; }
body:has(.ventana.abierta:not(.max)) .rtc-tira:not(.cuadricula) .rtc-tile { width: 132px; }
@media (max-width: 700px) { body:has(.ventana.abierta) .rtc-tira:not(.cuadricula) .rtc-tile { width: 92px; } }
.rtc-tira.cuadricula .rtc-tile.pantalla { grid-column: 1 / -1; aspect-ratio: 16 / 8; }

/* llamada entrante */
#rtc-entrantes { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.rtc-entrante { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 330px; max-width: 94vw; background: var(--glass2); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border: 1px solid rgba(var(--acc-rgb),.5); border-radius: 20px; box-shadow: var(--sh2), 0 0 0 4px rgba(var(--acc-rgb),.12); animation: rtcSuena 1.6s ease-in-out infinite, aparece .25s ease-out; transition: opacity .25s, transform .25s; }
.rtc-entrante.fuera { opacity: 0; transform: translateY(-10px); }
@keyframes rtcSuena { 50% { box-shadow: var(--sh2), 0 0 0 9px rgba(var(--acc-rgb),.05); } }
.rtc-e-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.rtc-e-tx b { font-size: 14px; }
.rtc-e-tx span { font-size: 12.5px; color: var(--tx2); }

/* panel de llamada y burbuja minimizada */
#rtc-llamada { position: absolute; right: 16px; bottom: 90px; z-index: 3; pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 14px;
  background: var(--glass2); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); border: 1px solid var(--line2); border-radius: 22px; box-shadow: var(--sh2); animation: aparece .2s ease-out; }
#rtc-llamada[hidden] { display: none; }
.rtc-p-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rtc-p-avs { display: flex; }
.rtc-p-avs .avatar { margin-left: -8px; border: 2px solid var(--p2); }
.rtc-p-avs .avatar:first-child { margin-left: 0; }
.rtc-p-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rtc-p-tx b { font-size: 13px; white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.rtc-p-tx span { font-family: var(--fm); font-size: 11.5px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.rtc-p-botones { display: flex; gap: 6px; }
.rtc-b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--p3); border: 1px solid var(--line2); color: var(--tx); transition: background .15s, transform .15s; flex: none; pointer-events: auto; }
.rtc-b:hover { background: var(--p4); transform: translateY(-1px); }
.rtc-b.on { background: var(--acc-s); color: var(--acc-l); border-color: rgba(var(--acc-rgb),.5); }
.rtc-b.rojo { background: var(--bad); border-color: transparent; color: #fff; }
.rtc-b.rojo:hover { background: var(--bad-h); }
.rtc-b.verde { background: var(--ok); border-color: transparent; color: #08210f; }
.rtc-b.verde:hover { background: var(--ok-h); }
#rtc-llamada.min { padding: 7px 8px 7px 10px; gap: 8px; border-radius: 999px; }
#rtc-llamada.min .rtc-p-tx b { max-width: 110px; }
#rtc-llamada.min [data-a=mic], #rtc-llamada.min [data-a=cam], #rtc-llamada.min [data-a=pantalla] { display: none; }
#rtc-llamada.min .rtc-b { width: 34px; height: 34px; }

@media (max-width: 700px) {
  .rtc-tile { width: 112px; }
  #rtc-llamada { left: 10px; right: 10px; bottom: 84px; justify-content: space-between; }
  .rtc-p-tx b { max-width: 100px; }
  .rtc-entrante { min-width: 0; width: calc(100vw - 20px); }
  .rtc-tira.cuadricula { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); top: 52px; }
}