/* ============================================================
   NEGATOSCOPIO — mesa de luz de referencias (Carne y metal).
   Marco negro (frame de RX) con panel retroiluminado dentro.
   Las placas (imágenes) se arrastran sobre una mesa infinita
   que se paneables con el dedo. El scroll de la página está
   BLOQUEADO: sólo se mueve la mesa, nunca la pantalla.

   La mesa NO nace encendida: arranca en negro y se ENCIENDE
   con un destello de tubo fluorescente (ver rx.js → .is-on).
   ============================================================ */

/* Página en negro y scroll bloqueado: la pantalla queda quieta,
   la mesa se explora arrastrando (rx.js). position:fixed congela
   el viewport; la foliación sigue viva en los bordes. */
html:has(body[data-page="referencias-rx"]) { background: #000; }
body[data-page="referencias-rx"] {
  background: #000;
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;              /* nada de scroll/zoom del navegador */
  user-select: none;               /* nada de selección de texto/imágenes */
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* --- FOLIACIÓN: por FUERA del marco negro, con resplandor -----
   Las columnas van pegadas al canto de la pantalla; el marco
   arranca más adentro, así que los números quedan fuera de él.
   Sobre negro salen blancos (blend difference) y les damos halo. */
body[data-page="referencias-rx"] .foliation span {
  opacity: 0;                       /* apagados: encienden con la luz */
  transition: opacity 1.1s ease;
  text-shadow:
    0 0 10px rgba(255,255,255,.45),
    0 0  3px rgba(255,255,255,.75);
}
body[data-page="referencias-rx"].is-encendido .foliation span { opacity: 1; }

/* El header (JORG ADOT) enciende con la luz, igual que los números.
   z-index por encima del negatoscopio (que va a z-index 1) para que no
   lo recorte el panel de la mesa. */
body[data-page="referencias-rx"] .cabecera {
  opacity: 0;
  z-index: 5;
  transition: opacity 1.1s ease;
}
/* Fuera la banda de fondo del header (móvil y escritorio). */
body[data-page="referencias-rx"] .cabecera::before { display: none; }
/* Letra en blanco plano, sin el blend invertido de la portada. */
body[data-page="referencias-rx"] .brand {
  mix-blend-mode: normal;
  color: #fff;
}
body[data-page="referencias-rx"].is-encendido .cabecera { opacity: 1; }
body[data-page="referencias-rx"] .foliation span.is-active {
  text-shadow:
    0 0 16px rgba(255,255,255,.85),
    0 0  4px rgba(255,255,255,1);
}

/* --- MARCO NEGRO (el frame del negatoscopio) -----------------
   Inset lo bastante para dejar la foliación fuera: arranca más
   allá de la columna de foliación (--col-fol) y su gutter. */
.rx-caja {
  position: fixed;
  z-index: 1;
  top:    20px;
  bottom: 20px;
  left:   20px;
  right:  20px;
  background: #050505;
  border-radius: 10px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;                /* las placas se meten bajo el canto */
}

/* --- PANEL RETROILUMINADO (la superficie de luz) -------------
   Inset dentro del marco: deja el borde negro visible alrededor.
   Nace en NEGRO; al encender pasa al blanco radiante + halo. */
.rx-panel {
  position: absolute;
  inset: 32px 14px 12px;           /* borde superior alto para el header */
  border-radius: 3px;
  overflow: hidden;                /* recorta las placas contra el marco */
  cursor: grab;
  touch-action: none;
  background: #000;                /* apagada */
  box-shadow: none;
  transition:
    background 1.5s ease .1s,       /* retroiluminación gradual tras el flash */
    box-shadow 1.5s ease .1s;
}
.rx-panel.is-grabbing { cursor: grabbing; }

/* Encendida: superficie de luz + resplandor que se derrama fuera. */
.rx-caja.is-on .rx-panel {
  background:
    radial-gradient(72% 62% at 50% 44%,
      #ffffff 0%, #f5f5f2 60%, #dcdcd6 100%);
  box-shadow:
    0 0 120px 30px rgba(255,255,255,.42),
    0 0 40px 8px rgba(255,255,255,.30),
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 0 70px rgba(0,0,0,.12);
}

/* Destello de encendido: parpadeo de tubo fluorescente. */
.rx-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
/* Flechas cardinales de exploración: pequeñas, en los bordes del panel.
   Indican que queda mesa por explorar en esa dirección; cada una se
   desvanece al llegar al borde correspondiente (rx.js les pone .off). */
.rx-nav { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.rx-flecha {
  position: absolute; display: flex; color: #000; opacity: .55;
  transition: opacity .35s ease;
  animation: rxLateFlecha 2.2s ease-in-out infinite;
}
.rx-flecha.off { opacity: 0; }
.rx-flecha--u { top: 10px;    left: 50%; transform: translateX(-50%); }
.rx-flecha--d { bottom: 10px; left: 50%; transform: translateX(-50%); }
.rx-flecha--l { left: 10px;   top: 50%;  transform: translateY(-50%); }
.rx-flecha--r { right: 10px;  top: 50%;  transform: translateY(-50%); }
@keyframes rxLateFlecha { 0%,100% { opacity: .42; } 50% { opacity: .16; } }
.rx-flecha.off { animation: none; }

.rx-caja.is-on .rx-flash { animation: rxDestello 1600ms ease-out 0s 1; }
@keyframes rxDestello {
  0%   { opacity: 0; }
  4%   { opacity: 1; }     /* FLASHAZO: blanco total, deja ciego */
  14%  { opacity: 1; }
  100% { opacity: 0; }     /* se retira despacio: retroilumina gradual */
}

/* --- MESA INFINITA: se arrastra por debajo del panel ---------- */
.rx-mesa {
  position: absolute;
  left: 0; top: 0;
  width: 2020px;
  height: 2200px;
}

/* --- PLACAS (las radiografías / imágenes) --------------------
   Película translúcida en escala de grises. mix-blend multiply:
   al solapar dos, la intersección se DENSIFICA (superposición),
   como placas apiladas sobre la mesa de luz. */
.rx-placa {
  position: absolute;
  cursor: grab;
  touch-action: none;
  opacity: 0;                       /* nace invisible: emerge del blanco */
  mix-blend-mode: multiply;
  /* Look radiográfico: blancos subidos, algo lavado y un pelín difuso,
     con un halo tenue como luz atravesando la película. */
  filter: grayscale(1) brightness(1.32) contrast(.88) blur(.4px)
          drop-shadow(0 0 6px rgba(255,255,255,.5));
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 6px;               /* esquinas redondeadas */
  overflow: hidden;
  background: #efefee center/cover no-repeat;
  will-change: transform, left, top, opacity;
  transition: opacity 1.5s ease;        /* recuperación tipo flashbang */
}
.rx-placa.revelada { opacity: .74; }   /* lavadas en blanco → opacidad real */
.rx-placa.is-grabbing { cursor: grabbing; }
.rx-placa img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.rx-placa figcaption {
  position: absolute;
  bottom: 6px; left: 7px;
  font: 10px/1 var(--f-mono);
  letter-spacing: .04em;
  color: #111;
  mix-blend-mode: normal;          /* el pie se lee siempre */
  pointer-events: none;
}

/* Rótulo sobre el marco, abajo a la derecha (fuera del panel). */
.rx-rotulo {
  position: absolute;
  z-index: 3;
  right: 18px; bottom: 14px;
  font: 10px/1 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rx-caja.is-on .rx-flash { animation: none; }
  .rx-panel, .rx-mesa { transition: none; }
}