/* Escena 7 — pantalla principal del test.
   Layout a doble columna a pantalla completa, sin panel flotante:
   izquierda = el vagón (fase/centro, ventana con parallax + ente,
   contador de respondidas); derecha = el cuestionario en sí
   (bloque, premisa, afirmaciones con deslizador, navegación).
   Referencia visual: mockup entregado por Luisa (bloque 01/12,
   "Centro visceral" / "Invasión de límites"). */

[data-scene="mainTest"]{
  background: var(--void-edge);
}

.test-layout{
  display: flex;
  min-height: 100%;
  align-items: stretch;
}

/* ================= Columna izquierda: el vagón ================= */
.train-column{
  flex: none;
  width: min(30vw, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2.6vh, 26px);
  padding: clamp(24px, 4vh, 44px) clamp(20px, 2.4vw, 32px);
  box-sizing: border-box;
  border-right: 1px solid rgba(237, 225, 201, 0.14);
}

.train-meta{
  text-align: center;
}

.train-meta__phase{
  margin: 0 0 6px;
  font-family: var(--font-utility);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

.train-meta__center{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--parchment);
}

.train-frame{
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1400 / 2096; /* misma proporción que marco-ventana.webp */
  flex: none;
}

/* Hueco de la ventana, medido directamente del canal alfa de la imagen
   del marco: x 19.95%–99.96%, y 30.75%–57.98% del recorte. */
.ventana-viewport{
  position: absolute;
  left: 19.95%;
  top: 30.75%;
  width: 80.01%;
  height: 27.23%;
  overflow: hidden;
  background: #0c111a;
  z-index: 1;
}

/* .parallax-layer / .parallax-layer--fondo ahora viven en
   css/components/parallax-layer.css (compartido con la escena de
   selección de paisaje) */

.marco-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* El ente se dibuja por encima del marco: sentado sobre el asiento
   izquierdo. Coordenadas medidas comparando escena_deseada.png contra
   el marco base (diferencia de píxeles → bounding box de la figura):
   x 0%–33.68%, y 53.85%–80.5% del recorte. Se usa la altura como
   referencia (26.65%) y aspect-ratio para el ancho, así nunca se
   estira la figura. */
.ente-slot{
  position: absolute;
  left: 0%;
  top: 53.85%;
  height: 23.65%;
  width: auto;
  z-index: 3;
  pointer-events: none;
}

.ente-slot #ente-canvas-main{
  height: 100%;
}

/* El brazo del sofá va DELANTE del ente — es lo que da la sensación de
   que está sentado dentro del asiento y no flotando encima. */
.brazo-sofa-overlay{
  position: absolute;
  left: 0.05%;
  top: 72.09%;
  width: 24.9%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.train-progress{
  width: 100%;
  max-width: 420px;
  padding-top: clamp(12px, 2vh, 18px);
  border-top: 1px solid rgba(198, 161, 91, 0.22);
}

.train-progress__row{
  display: flex;
  justify-content: space-between;
  font-family: var(--font-utility);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

.train-progress__row span:last-child{
  color: var(--brass-light);
}

.train-progress__hint{
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--parchment-dim);
}

/* ================= Columna derecha: el cuestionario ================= */
.test-column{
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(32px, 5.5vh, 64px) clamp(28px, 4.4vw, 76px);
}

.question-panel{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 4vh, 44px);
  /* Scroll funcional (rueda, trackpad, gesto táctil) sin barra visible,
     por si algún bloque tuviera más afirmaciones de las que caben. */
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.question-panel::-webkit-scrollbar{
  display: none;
}

/* ---------- Cabecera del bloque ---------- */
.test-block{
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.2vh, 34px);
}

.test-block-meta{
  margin: 0;
  font-family: var(--font-utility);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

.test-block-title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--ember);
}

/* ---------- Premisa ---------- */
.test-premise{
  display: flex;
  gap: clamp(14px, 2vw, 22px);
}

.test-premise__bar{
  flex: none;
  width: 2px;
  background: var(--brass);
  border-radius: 1px;
}

.test-premise__body{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.test-premise__eyebrow{
  margin: 0;
  font-family: var(--font-utility);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.test-premise__text{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.45;
  color: var(--parchment);
}

/* ---------- Afirmaciones ---------- */
.test-items{
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vh, 32px);
}

/* ---------- Preguntas "solas" (sin premisa) agrupadas ----------
   Más de 3/4 del banco (confirmación, alas, subtipo, dinámica,
   auditorías, estado) son preguntas sueltas que antes salían una por
   pantalla y se sentían muy vacías, sobre todo en escritorio. Se
   agrupan de hasta 3 en test-flow.js; aquí solo se listan con su
   propio nombre encima de cada una. */
.test-lonely-list{
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 40px);
}

.test-lonely-item{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: clamp(24px, 3.2vh, 36px);
  border-bottom: 1px solid rgba(198, 161, 91, 0.16);
}

.test-lonely-item:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.test-lonely-item__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--ember);
}

/* En pantallas grandes, más aire entre afirmaciones — a petición de
   Luisa, para que el bloque no se sienta apretado ahora que la
   valoración ya no ocupa una barra ancha. */
@media (min-width: 761px){
  .test-items{
    gap: 44px;
  }

  .test-item{
    padding-bottom: 30px;
  }

  .test-lonely-list{
    gap: 48px;
  }

  .test-lonely-item{
    padding-bottom: 34px;
  }
}

.test-item{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: clamp(18px, 2.4vh, 26px);
  border-bottom: 1px solid rgba(198, 161, 91, 0.16);
}

.test-item:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.test-item__head{
  display: flex;
  gap: clamp(12px, 1.6vw, 18px);
  align-items: baseline;
}

.test-item__index{
  flex: none;
  font-family: var(--font-utility);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--brass);
  padding-top: 3px;
}

.test-statement{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.5;
  color: var(--parchment);
}

/* ---------- Valoración 1–5: botones redondos ----------
   Sustituye al deslizador anterior — con muchas afirmaciones seguidas,
   arrastrar con el ratón en pantallas grandes resultaba pesado. Un
   clic sobre el número es más rápido tanto en ratón como en táctil.
   Mismo lenguaje visual que .brass-btn (borde y degradado de latón). */
.test-rate-wrap{
  padding-left: calc(0.72rem + clamp(12px, 1.6vw, 18px)); /* alinea bajo el texto, no bajo el número */
}

.test-rate{
  display: flex;
  gap: clamp(8px, 1vw, 14px);
}

.test-rate-btn{
  appearance: none;
  width: clamp(34px, 2.6vw, 40px);
  height: clamp(34px, 2.6vw, 40px);
  border-radius: 50%;
  border: 1.5px solid var(--brass);
  background: linear-gradient(180deg, rgba(198, 161, 91, 0.14), rgba(0, 0, 0, 0.2));
  color: var(--parchment-dim);
  font-family: var(--font-utility);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.test-rate-btn:hover,
.test-rate-btn:focus-visible{
  border-color: var(--brass-light);
  box-shadow: 0 0 12px rgba(198, 161, 91, 0.4);
}

.test-rate-btn:active{
  transform: scale(0.94);
}

.test-rate-btn.is-selected{
  background: var(--brass);
  border-color: var(--brass-light);
  color: var(--void);
  font-weight: bold;
  box-shadow: 0 0 16px rgba(198, 161, 91, 0.55);
}

/* ---------- Pie: navegación + leyenda de escala ---------- */
.test-footer{
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 20px);
  flex: none;
}

.test-nav{
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

/* El botón "Anterior" es el mismo brass-btn que "Continuar", solo con
   otro texto — no lleva variante propia. Cuando no hay pregunta previa
   simplemente se oculta. */
.test-nav__prev.is-hidden{
  visibility: hidden;
}

.test-scale-legend{
  margin: 0;
  font-family: var(--font-utility);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  padding-top: clamp(12px, 2vh, 18px);
  border-top: 1px solid rgba(198, 161, 91, 0.16);
}

/* =====================================================================
   Responsive — el vagón NUNCA desaparece, tampoco en móvil: el
   recorrido pasa a ser vertical (primero el vagón completo, deslizando
   se llega al cuestionario). A partir de la segunda pregunta, cada vez
   que se avanza o se retrocede, test-flow.js ancla la pantalla al
   inicio del bloque de preguntas (ver anchorToQuestions() en
   js/test/test-flow.js) para que el usuario no tenga que volver a
   deslizar sobre el vagón en cada respuesta.

   En pantallas pequeñas, fase y centro se reordenan para aparecer
   justo encima de ese punto de anclaje (después de la ventana y del
   contador), así siguen visibles como referencia cuando la vista se
   ancla más abajo. ========================================== */
@media (max-width: 760px){
  [data-scene="mainTest"]{
    overflow-y: auto;
  }

  .test-layout{
    flex-direction: column;
    min-height: auto;
  }

  .train-column{
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(237, 225, 201, 0.14);
    padding: clamp(24px, 7vw, 36px) clamp(18px, 6vw, 28px);
  }

  /* Reordenado: ventana → contador → fase/centro (pegado al punto de
     anclaje del cuestionario, que viene justo después en el flujo). */
  .train-frame{ order: 1; margin: 0 auto; }
  .train-progress{ order: 2; max-width: none; }
  .train-meta{ order: 3; }

  .test-column{
    width: 100%;
    padding: clamp(28px, 7vw, 40px) clamp(18px, 6vw, 28px) 64px;
    scroll-margin-top: clamp(16px, 4vw, 28px); /* deja aire al anclar */
  }

  .question-panel{
    height: auto;
    justify-content: flex-start;
    overflow-y: visible; /* el scroll lo lleva la escena entera */
  }

  .test-rate-wrap{
    padding-left: 0; /* en móvil el número va encima, no al lado */
  }
}