/* ============================================================
   DIMENSIAN · EL LABORATORIO — estilos compartidos
   ============================================================ */
:root{
  --fondo:#030608; --cian:#7fd8e8; --ambar:#e8b23f; --rojo:#e8574a;
  --verde:#84e8a0; --texto:#c9d6dd; --apagado:#5f7482;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fondo);color:var(--texto);
  font:14px/1.5 "Consolas","Courier New",monospace;overflow:hidden}
button{font:inherit}

/* ── EL HUB: la mesa del laboratorio ── */
#escena{position:fixed;inset:0;overflow:hidden;background:#000}
#mesaImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:50% 50%;transition:transform 2.4s cubic-bezier(.55,.05,.35,1), filter 2.4s ease;
  filter:brightness(.96)}
#mesaImg.viajando{filter:brightness(.55) blur(2px)}
#videoViaje{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
  background:#000;display:none;z-index:40}
#velo{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;
  transition:opacity .9s ease;z-index:50}
#velo.negro{opacity:1}

/* scanlines + viñeta ambiente */
#crt{position:fixed;inset:0;pointer-events:none;z-index:30;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.11) 0 2px, transparent 2px 4px)}

/* puntos calientes */
.aparato{position:absolute;z-index:20;border:0;background:transparent;cursor:pointer;
  border-radius:10px;padding:0}
.aparato .halo{position:absolute;inset:0;border:1px solid rgba(127,216,232,0);
  border-radius:10px;transition:.35s;box-shadow:0 0 0 rgba(127,216,232,0)}
.aparato:hover .halo{border-color:rgba(127,216,232,.55);
  box-shadow:0 0 22px rgba(127,216,232,.16), inset 0 0 24px rgba(127,216,232,.06)}
.aparato .rotulo{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
  white-space:nowrap;color:var(--cian);letter-spacing:.28em;font-size:11px;
  opacity:0;transition:.35s;text-shadow:0 0 12px rgba(127,216,232,.7)}
.aparato:hover .rotulo{opacity:1;bottom:-26px}
.aparato.cerrado:hover .halo{border-color:rgba(232,178,63,.45)}
.aparato.cerrado .rotulo{color:var(--ambar)}

#titulo{position:fixed;top:24px;left:0;right:0;text-align:center;z-index:22;
  color:#8fa8b5;letter-spacing:.5em;font-size:12px;opacity:.8;pointer-events:none}
#pieHub{position:fixed;bottom:16px;left:0;right:0;text-align:center;z-index:22;
  color:var(--apagado);letter-spacing:.2em;font-size:10.5px;pointer-events:none}

/* aviso sin foto */
#sinFoto{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  z-index:10;color:var(--apagado);text-align:center;line-height:2}

/* ── LA INTRO (portada + vídeo + estática) ──
   va por debajo del CRT (z30) para que las scanlines bañen también el vídeo */
#intro{position:fixed;inset:0;z-index:25;background:#000;opacity:1;
  transition:opacity 1s ease}
#intro.fuera{opacity:0;pointer-events:none}
#introPortada{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px}
.marcaIntro{color:#8fa8b5;letter-spacing:.65em;font-size:13px;opacity:.75;
  text-indent:.65em}
#btnEntrar{background:transparent;color:var(--cian);cursor:pointer;
  border:1px solid rgba(127,216,232,.4);border-radius:4px;padding:14px 34px;
  letter-spacing:.34em;font-size:13px;text-indent:.34em;transition:.35s}
#btnEntrar:hover{border-color:rgba(127,216,232,.9);
  box-shadow:0 0 26px rgba(127,216,232,.22), inset 0 0 18px rgba(127,216,232,.07);
  text-shadow:0 0 12px rgba(127,216,232,.8)}
#introNota{color:var(--apagado);font-size:10.5px;letter-spacing:.28em;opacity:.7}
#introVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:none;background:#000}
#btnSaltar{position:absolute;right:22px;bottom:20px;display:none;cursor:pointer;
  background:rgba(0,0,0,.35);color:var(--apagado);border:1px solid #22323e;
  border-radius:4px;padding:7px 16px;letter-spacing:.24em;font-size:10.5px}
#btnSaltar:hover{color:var(--cian);border-color:rgba(127,216,232,.5)}
#estatica{position:absolute;inset:0;width:100%;height:100%;display:none;
  image-rendering:pixelated;opacity:.9}

/* ── VIGILANCIA (PANAVIEW) ── */
#panaview{position:fixed;inset:0;display:flex;flex-direction:column;background:#05080b}
#pvCab{display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;border-bottom:1px solid #101c26;background:#070d12}
#pvCab .marca{letter-spacing:.4em;color:#93a8b3;font-size:13px}
#pvCab .rec{display:flex;align-items:center;gap:8px;color:var(--rojo);font-size:11.5px;letter-spacing:.2em}
#pvCab .rec i{width:9px;height:9px;border-radius:50%;background:var(--rojo);
  animation:parpadeo 1.4s steps(2,start) infinite}
@keyframes parpadeo{50%{opacity:.15}}
#pvReloj{color:var(--verde);font-size:13px;letter-spacing:.14em}

#pvRejilla{flex:1;display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);gap:3px;padding:3px;background:#020406}
.cam{position:relative;overflow:hidden;background:#070b0e;cursor:pointer;border:0;padding:0}
.cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) brightness(.92) contrast(1.05)}
.cam .sinsenal{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#31424e;letter-spacing:.3em;font-size:11px;
  background:repeating-linear-gradient(0deg,#05080b 0 2px,#0a1016 2px 4px)}
/* la etiqueta propia se oculta: las fotos reales ya traen "CAM 0X" grabado */
.cam .etiq{display:none;position:absolute;top:8px;left:10px;z-index:3;color:#dfe9ee;font-size:11.5px;
  letter-spacing:.14em;background:rgba(3,6,9,.72);padding:2px 8px;border-radius:2px}
.cam .ruido{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:screen}
.cam.glitch img{animation:sacudida .38s steps(2,end) 2}
@keyframes sacudida{25%{transform:translate(3px,-2px) scale(1.02)}75%{transform:translate(-3px,2px)}}
.cam .marcaAnom{position:absolute;inset:0;z-index:4;display:none}
.cam .marcaAnom.viva{display:block}

/* vista de una sola cámara */
#pvUna{position:fixed;inset:0;z-index:60;display:none;background:#000}
#pvUna img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:saturate(.55) brightness(.95)}
#pvUna .etiqGrande{position:absolute;top:18px;left:22px;color:#eef;letter-spacing:.2em;
  font-size:15px;background:rgba(3,6,9,.7);padding:4px 12px}
#pvUna .relojGrande{position:absolute;bottom:18px;right:22px;color:var(--verde);
  letter-spacing:.16em;font-size:15px;background:rgba(3,6,9,.7);padding:4px 12px}

#pvPie{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 18px;border-top:1px solid #101c26;background:#070d12}
#pvPie .grupo{display:flex;gap:7px;align-items:center}
.pvBtn{background:#0b141b;border:1px solid #1c2c38;color:#b9c8d1;border-radius:4px;
  padding:6px 11px;cursor:pointer;letter-spacing:.1em;font-size:11.5px;transition:.2s}
.pvBtn:hover{border-color:var(--cian);color:var(--cian)}
.pvBtn.on{border-color:var(--verde);color:var(--verde);box-shadow:0 0 10px rgba(132,232,160,.15)}
.pvBtn.num.on{border-color:var(--rojo);color:#ffd9d4}
#volver{color:var(--apagado);text-decoration:none;letter-spacing:.15em;font-size:11.5px}
#volver:hover{color:var(--cian)}
@media (max-width:820px){ #pvRejilla{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:1fr} }