/* ==========================================================================
   lab.css — marco, foco, overlay, globos y flechas del recorrido guiado.

   Las medidas del marco NO se escriben aquí: las emite generar_recorrido.py en
   marco.gen.css como --marco-w/--marco-h y --ovl-w/--ovl-h. Si se repitieran a
   mano y difirieran, el recorte de la capa nítida caería donde no debe y el
   interior del rectángulo saldría borroso: un fallo que parece de blur y es de
   aritmética. El generador aborta si encuentra esos valores aquí.
   ========================================================================== */

/* --- El lienzo: la captura dentro de un marco de medidas fijas ------------ */

.rec-lienzo {
  position: absolute;
  overflow: hidden;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

.rec-lienzo.modo-foco    { width: var(--marco-w); height: var(--marco-h); }
.rec-lienzo.modo-mapa    { background: #fff; }  /* el ancho lo fija el generador */
.rec-lienzo.modo-overlay { width: var(--ovl-w);   height: var(--ovl-h); }

/* Las dos capas son la MISMA imagen en la MISMA posición. La de arriba va
   nítida y recortada al rectángulo; la de abajo, difuminada y atenuada. */
.rec-lienzo .rec-capa {
  position: absolute !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  image-rendering: auto;
}

.rec-lienzo .rec-borrosa {
  filter: blur(3.2px) saturate(0.55) brightness(1.06);
  opacity: 0.92;
}

/* El rectángulo nítido: mismo encuadre, sin filtro, recortado con clip-path. */
.rec-lienzo .rec-nitida { filter: none; }

/* El filete naranja que enmarca la zona de la que se está hablando. */
.rec-foco-borde {
  position: absolute;
  border: 3px solid #e07a1f;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75),
              0 8px 22px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

/* --- Globos de texto dentro de la imagen (modo overlay) ------------------- */

.rec-globo {
  position: absolute;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #b9c3d6;
  border-left: 5px solid #e07a1f;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 16.5px;
  line-height: 1.28;
  color: #2b3444;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.rec-globo b, .rec-globo strong { color: #151f6d; font-weight: 700; }
.rec-globo code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 15px; color: #002663;
  background: #eef1f8; padding: 0 4px; border-radius: 3px;
}

/* La flecha se dibuja en un SVG que cubre el lienzo entero. La punta es un
   polígono, no un marker-end: con el trazo punteado el marcador cae a veces en
   un hueco del guion y desaparece. */
.rec-flechas {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
}

/* --- Caja de texto al pie (modo foco) ------------------------------------ */

.rec-caja {
  position: absolute;
  box-sizing: border-box;
  background: #f7f9fc;
  border: 1px solid #c7d0e0;
  border-left: 6px solid #1e50dc;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 19px;
  line-height: 1.32;
  color: #3a4152;
}

.rec-caja.naranja { border-left-color: #e07a1f; background: #fdf7f0; }
.rec-caja b, .rec-caja strong { color: #151f6d; }
.rec-caja p { margin: 0 0 6px 0; }
.rec-caja p:last-child { margin-bottom: 0; }

/* --- Marca de paso «1 de 3» ---------------------------------------------- */

.rec-paso {
  position: absolute;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7c879b;
  text-transform: uppercase;
}

/* La captura de la app es un recorte de una página con scroll: al llegar al
   borde del marco, el corte a media fila parece un defecto de maqueta. Un
   desvanecido de 22 px lo lee como «esto continúa hacia abajo». */
.rec-lienzo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 92%);
  pointer-events: none;
}