/*  ██╗  ██╗ █████╗ ██████╗ ██╗████████╗ █████╗  */
/*  ██║  ██║██╔══██╗██╔══██╗██║╚══██╔══╝██╔══██╗ */
/*  ███████║███████║██████╔╝██║   ██║   ███████║ */
/*  ██╔══██║██╔══██║██╔══██╗██║   ██║   ██╔══██║ */
/*  ██║  ██║██║  ██║██████╔╝██║   ██║   ██║  ██║ */
/*  ╚═╝  ╚═╝╚═╝  ╚═╝╚═════╝ ╚═╝   ╚═╝   ╚═╝  ╚═╝ */

/*
==================================================
Descripcion:
  Estilos de la habitacion y el parallax.
================================================== */

@import url(../base/fuentes.css);

/* == EVITAR SELECCION DE TEXTO EN LA ILUSTRACION == */

#contenedor-ilustracion,
#contenedor-ilustracion * {
  user-select: none;
  -webkit-user-select: none;
}



/* == DEBUG — MOSTRAR HITBOXES == */

.zona-clic.debug-hitbox {
  outline: 2px dashed #efb810 !important;
  background: rgba(239, 184, 16, 0.15) !important;
}


/* ======================== */
/* == H A B I T A C I O N == */
/* ======================== */


/* == FONDO GENERAL == */

.fondo {
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}


/* == VENTANA CONTENEDORA == */

.ventana {
  /* Dimensiones fijas (1000x1000) aplicadas por renderizatron2000 */
  position: relative;
  overflow: hidden;

  transform-style: preserve-3d;
  will-change: transform;

  background-color: var(--color-fondo, #1a1a1a);
  border-radius: var(--radio-esquina, 6px);

  transition: transform 0.15s ease-out;
}


/* == ESCALADOR (wrapper de escalado del Renderizatron2000) == */

.escalador {
  display: inline-block;
  overflow: visible;
}


/* == SISTEMA DE PANTALLAS == */

.pantalla-modulo {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  display: none;
}

.pantalla-modulo.activa {
  display: block;
}


/* == CONTENEDOR DE ILUSTRACION (reemplaza a .habitacion) == */

#contenedor-ilustracion {
  width: 100%;
  height: 100%;

  position: relative;

  /* La distancia del ojo a la escena: cuanto MENOR, mas agresiva es la
     proyeccion de las capas con translateZ (mas deformacion en general). */
  perspective: 1800px;

  /* El punto de fuga = la altura del ojo. Lo que coincide con el origen
     no se deforma NADA por mucha Z que tenga; la deformacion crece al
     alejarse de el. Antes estaba en "bottom center" y por eso el suelo
     era la zona muerta: toda la deformacion se iba al techo. Al 40% de
     altura queda a la altura del horizonte pintado en la foto (el paisaje
     de la ventana), que es donde estaba la camara real de la maqueta:
     ahora el suelo, que queda lejos del origen, es lo que mas trapecio
     recibe. Subir el segundo valor = mas deformacion abajo. */
  perspective-origin: 50% 40%;
}


/* == CAPAS DE PROFUNDIDAD == */

.capa {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  object-fit: contain;
  pointer-events: none;
  will-change: transform;
}

.capa-paisaje        { transform: translateZ(0px); }
.capa-base           { transform: translateZ(5px); }
.capa-objeto         { transform: translateZ(10px); }
.capa-cerca          { transform: translateZ(20px); }
.capa-interactiva    { transform: translateZ(30px); }
.capa-primer-plano   { transform: translateZ(60px); }

/* == SUELO DEFORMABLE == */
/* Copia del fondo recortada a su franja inferior, la del suelo. El
   parallax la detecta por esta clase y la cizalla (skew/scale) en vez de
   trasladarla — ver moverCapas() en parallax.js.

   Las dos declaraciones estan acopladas: el inset recorta lo que se ve
   y el transform-origin clava el eje de la deformacion JUSTO en ese
   corte, la costura donde el suelo toca la pared (65% desde arriba =
   35% desde abajo, ajustado a ojo sobre la foto). Asi el desplazamiento
   es cero en la costura y crece hacia el borde inferior: el suelo
   "abre" sin despegarse de la pared.
   Si el corte se mueve, hay que mover los DOS valores a la vez.

   Debajo queda el fondo completo sin recortar (.capa-base), pintado con
   los mismos pixeles: lo que la cizalla descubre por los bordes lo tapa
   el propio fondo, y nunca se ve una grieta. */
.capa-suelo {
  transform: translateZ(6px);
  clip-path: inset(65% 0 0 0);
  transform-origin: 50% 65%;
}


/* == ZONAS INTERACTIVAS == */

.capa-interactiva {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  pointer-events: none;
}

.zona-clic {
  position: absolute;

  pointer-events: auto;
  cursor: pointer;

  transition: all 0.2s;
}


/* == PANTALLA DE TRANSICION == */

#pantalla-transicion video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* == BOTON VOLVER == */

/* Flecha de vuelta, al estilo de la botonera del museo del CSS: un
   simple "<" pintado. El texto accesible va en el title/aria-label que
   pone navegacion.js, porque el glifo solo no dice adonde lleva. */

.boton-volver {
  position: absolute;
  top: -12px;
  left: 25px;
  z-index: var(--z-ventana, 100);

  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;

  font-family: hypermonosaturation;
  font-size: 7rem;
  line-height: 1;

  color: var(--color-graffiti, #ff6b1a);
  text-shadow: var(--sombra-graffiti, -6px 6px 0 #000);

  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.boton-volver:hover {
  transform: scale(1.15) rotate(-5deg);
  text-shadow: var(--sombra-graffiti-fuerte, -10px 10px 0 #000);
}


/* == IFRAME DEL ORDENADOR (pantalla completa) == */

.pantalla-ordenador-iframe.pantalla-completa-activo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-modal, 9999);
  transform: none;
  background-color: #000;
}

body.pantalla-completa-body {
  overflow: hidden;
}


/* == OVERLAY PANTALLA COMPLETA (sobre el iframe) == */

.pantalla-completa-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: calc(var(--z-modal, 9999) + 1);
  pointer-events: none;
}

.pantalla-completa-cerrar {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: calc(var(--z-modal, 9999) + 2);
  pointer-events: auto;

  border: none;
  border-radius: var(--radio-esquina, 6px);

  font-family: var(--fuente-base, serif);
  font-weight: bold;
  font-size: 14px;

  background-color: var(--color-destacar, #efb810);
  color: var(--color-texto-oscuro, #2b1d16);
  padding: 10px 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

  transition: all 0.2s ease;
}

.pantalla-completa-cerrar:hover {
  background-color: #f7cf43;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}


/* == VIDEOS HOVER (ocultos por defecto) == */

.hover-video {
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  object-fit: contain;
  transition: opacity 0.15s ease;
}


/* == EFECTO HOVER (DESTACAR) == */

.destacar-elemento {
  filter:
    drop-shadow(2px 0 0 var(--color-destacar, #efb810))
    drop-shadow(-2px 0 0 var(--color-destacar, #efb810))
    drop-shadow(0 2px 0 var(--color-destacar, #efb810))
    drop-shadow(0 -2px 0 var(--color-destacar, #efb810))
    brightness(1.1);

  transition: all 0.2s ease;
}


/* == TRIGGER DE APERTURA (ROTULO) == */

/* El disparador de publicacion y de dialogo: cuaderno ("LEER"), album
   ("LEER") y peluche ("Hablar"). Antes era un boton "+" redondo y
   amarillo; ahora es un rotulo pintado, igual para los tres.
   La caja NO tiene medidas: la marca el propio texto (width/height
   auto), asi que toda la palabra es clicable y no solo un cuadrado.
   El efecto graffiti es una copia negra de la palabra desplazada
   abajo y a la izquierda: text-shadow con blur 0, para que sea una
   silueta dura y no una sombra difuminada.
   Los lomos de la estanteria comparten esta clase y anulan casi todo
   esto en css/ilustraciones/estanteria.css. */

.abrir-publicacion {
  position: absolute;
  z-index: 15;

  width: auto;
  height: auto;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: hypermonosaturation;
  font-size: 80px;
  line-height: 1;
  color: var(--color-graffiti, #ff6b1a);

  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: var(--sombra-graffiti, -6px 6px 0 #000);

  cursor: pointer;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.abrir-publicacion:hover {
  transform: scale(1.15) rotate(-5deg);
  /* La copia negra se separa un poco mas: parece que la palabra
     se despega del papel al crecer */
  text-shadow: var(--sombra-graffiti-fuerte, -10px 10px 0 #000);
}

/* == ETIQUETA DE HOVER == */

/* Mismo rotulo pintado que los triggers de .abrir-publicacion: naranja
   con la copia negra desplazada abajo y a la izquierda. El giro no se
   fija aqui — lo sortea hover.js en cada aparicion, para que la etiqueta
   no caiga siempre con la misma inclinacion. */

.etiqueta-hover {
  position: fixed;
  z-index: var(--z-modal, 9999);

  padding: 6px 12px;

  background: none;
  color: var(--color-graffiti, #ff6b1a);
  font-family: hypermonosaturation;
  font-size: 2.2rem;
  font-weight: bold;
  white-space: nowrap;
  line-height: 1;

  text-shadow: var(--sombra-graffiti, -6px 6px 0 #000);

  pointer-events: none;
  user-select: none;

  opacity: 0;
  transition: opacity 0.15s ease;
}

/* La inicial, mas grande — como una capitular de cartel */
.etiqueta-hover::first-letter {
  font-size: 1.6em;
}

.etiqueta-hover.visible {
  opacity: 1;
}


/* == CARGANDO SPINNER == */

.cargando-spinner {
  display: none;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal, 9999);

  padding: 20px 32px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--color-destacar, #efb810);
  font-family: var(--fuente-base, serif);
  font-size: 1.2rem;
  border-radius: var(--radio-esquina, 6px);
  pointer-events: none;
}

.cargando-spinner.activo {
  display: block;
}

.cargando-spinner::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid var(--color-destacar, #efb810);
  border-top-color: transparent;
  border-radius: 50%;
  animation: giro 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes giro {
  to { transform: rotate(360deg); }
}


/* == BOTON DE AYUDA == */

/* Moneda de dos caras: la cara frontal es la "?" de siempre y el dorso
   dice "Guía". El giro (rotateY) lo lleva el span interior .boton-ayuda-giro
   en un bucle largo: casi todo el ciclo como "?", un volteo breve a "Guía"
   y vuelta. Al pasar el raton, el volteo se adelanta y se queda en "Guía".
   El boton en si solo flota suavemente (animacion sobre translate/rotate,
   las propiedades independientes, para no pisarse con el rotateY del giro). */

.boton-ayuda {
  position: fixed;
  /* Anclado a la esquina superior derecha de la VIÑETA, no de la
     pantalla: la ventana esta centrada y mide var(--medida-ventana)
     (min(90vw, 85vh, 1000px), espejo de las constantes del
     Renderizatron — ver css/base/variables.css). Su esquina queda a
     la mitad de esa medida desde el centro.

     A diferencia de .boton-volver (position:absolute DENTRO de la
     ventana, hereda su transform:scale gratis), este boton es
     position:fixed y vive fuera de la ventana escalada — por eso
     tanto su tamaño como su posicion se calculan aqui como fraccion
     de --medida-ventana en vez de en px/rem fijos: asi el "?" y su
     cara "Guia" encogen o crecen en la misma proporcion que la
     ilustracion o el Cuentotron en vez de quedarse siempre a 48px. */
  --tam-boton-ayuda: calc(var(--medida-ventana) * 0.048);
  left: calc(50% + (var(--medida-ventana) * 0.5) - (var(--tam-boton-ayuda) / 2));
  top: calc(50% - (var(--medida-ventana) * 0.5) - (var(--tam-boton-ayuda) / 2));
  z-index: var(--z-modal, 9999);

  width: var(--tam-boton-ayuda);
  height: var(--tam-boton-ayuda);

  background: none;
  color: var(--color-graffiti, #ff6b1a);
  font-family: hypermonosaturation;
  font-weight: bold;
  text-decoration: none;
  /* Se hereda a las dos caras, "?" y "Guia". Proporcional al boton en
     vez de var(--sombra-graffiti) fija, por la misma razon de arriba. */
  text-shadow: calc(var(--tam-boton-ayuda) * -0.125) calc(var(--tam-boton-ayuda) * 0.125) 0 #000;

  border: none;
  /* Sin fondo: no lleva ni sombra ni forma de moneda. Solo el rotulo. */

  /* Escenario 3D para el volteo del span interior */
  perspective: 320px;

  transition: all 0.2s ease;
  animation: flotar-ayuda 3.6s ease-in-out infinite alternate;
}

.boton-ayuda:hover {
  scale: 1.2;
  /* La flotacion se pausa para que el hover mande */
  animation: none;
}

.boton-ayuda-giro {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  /* 9s de ciclo: ~7s como "?", volteo, ~1s como "Guía", volteo de vuelta */
  animation: voltear-ayuda 9s ease-in-out infinite;
}

/* Al pasar el raton: se cancela el bucle y se voltea a "Guía" en el acto
   (la transition del transform hace el giro suave). Se fuerza tambien la
   opacidad de cada cara (ver abajo por que no basta backface-visibility) */
.boton-ayuda:hover .boton-ayuda-giro {
  animation: none;
  transform: rotateY(180deg);
}
.boton-ayuda:hover .boton-ayuda-frente { animation: none; opacity: 0; }
.boton-ayuda:hover .boton-ayuda-dorso  { animation: none; opacity: 1; }

.boton-ayuda-cara {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

/* backface-visibility solo NO basta: si el contexto 3D se aplana (pasa en
   algunos navegadores/combinaciones), la cara trasera deja de ocultarse y
   el "?" se transparenta sobre "Guía". Para que sea infalible, cada cara
   ademas se apaga (opacity:0) durante la fase en que le toca estar oculta.
   El apagado ocurre justo cuando la cara esta de canto (~90º del giro),
   asi que no se percibe ningun corte. Las tres animaciones (giro + estas
   dos) comparten el mismo periodo de 9s, asi que van sincronizadas. */
.boton-ayuda-frente {
  /* Proporcional a --tam-boton-ayuda (igual ratio que el 6.5rem/48px
     original) en vez de rem fijo, para escalar con la ventana. */
  font-size: calc(var(--tam-boton-ayuda) * 2.1667);
  animation: ayuda-frente-opacidad 9s ease-in-out infinite;
}

.boton-ayuda-dorso {
  /* Ídem, ratio original 3.5rem/48px */
  font-size: calc(var(--tam-boton-ayuda) * 1.1667);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: rotateY(180deg);
  animation: ayuda-dorso-opacidad 9s ease-in-out infinite;
}

@keyframes voltear-ayuda {
  0%, 76% { transform: rotateY(0deg); }
  82%, 94% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* Sincronizadas con voltear-ayuda: el "?" visible mientras la moneda esta
   de cara (0-76% y el retorno final), apagado durante la fase "Guía"; el
   dorso al reves. Los cortes (78-80% y 96-98%) caen donde la cara esta de
   canto en el giro. */
@keyframes ayuda-frente-opacidad {
  0%, 78% { opacity: 1; }
  80%, 96% { opacity: 0; }
  98%, 100% { opacity: 1; }
}

@keyframes ayuda-dorso-opacidad {
  0%, 78% { opacity: 0; }
  80%, 96% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

@keyframes flotar-ayuda {
  from { translate: 0 0; rotate: -2deg; }
  to { translate: 0 -6px; rotate: 3deg; }
}


/* == OVERLAY EL DOCUMENTO == */

.overlay-documento {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-documento-iframe {
  width: 95vw;
  height: 95vh;
  border: none;
  border-radius: 8px;
  background: #121214;
}