/*
 * El MODO MAPA del recorrido inmersivo (`lhm-inmersivo-mapa.js`, 24-oct-2026): capítulos → pantallas → el detalle de
 * una pantalla. Portado del recorrido de la plataforma de GPA (`legacy/css/gpa_recorrido.css`, «El mapa»).
 *
 * Los colores, los de `lhm-inmersivo.css` (`--inm-*`, que salen del tema de cada cliente), y lo que el detalle comparte
 * con la escena «Cómo» —el marco de navegador, las marcas sobre la captura, los pasos, la cifra, la nota de quien
 * presenta— usa SUS clases: un segundo dibujo del mismo marco acabaría distinto.
 *
 *   - ≥ 992 px: tres columnas, como un mapa mental, unidas por las líneas que dibuja el JS (`.lhm-map-lineas`). Cada
 *     columna se desplaza sola.
 *   - < 992 px: una columna a la vez —la más honda abierta—, con «Volver».
 */

/* 🔴 `[hidden]` con `!important`: un `display` de una hoja gana al atributo, y el mapa (o las escenas) seguirían a la vista. */
.lhm-map[hidden], .lhm-inm-escenas[hidden] { display: none !important; }
.lhm-inm[data-modo="mapa"] .lhm-inm-riel, .lhm-inm[data-modo="mapa"] .lhm-inm-barra { display: none; }

.lhm-map {
  min-height: 100vh; min-height: 100svh; padding: calc(var(--inm-cab) + 1.2rem) 1rem 2rem;
  background: radial-gradient(100% 80% at 10% 0%, var(--inm-panel), var(--inm-fondo) 60%);
}
.lhm-map-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-bottom: .5rem; }
.lhm-map-titulo { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; color: #fff; margin: 0; outline: none; }
.lhm-map-titulo .bx { color: var(--inm-oro); }
.lhm-map-buscar { position: relative; flex: 1 1 16rem; max-width: 28rem; display: flex; align-items: center; margin: 0; }
.lhm-map-buscar .bx { position: absolute; left: .8rem; color: #5a6274; pointer-events: none; font-size: 1.1rem; }
.lhm-map-buscar .form-control { height: 44px; padding-left: 2.3rem; border-radius: .6rem; background: #fff; color: #1b2337; border-color: transparent; }
.lhm-map-buscar .form-control::placeholder { color: #5a6274; opacity: 1; }
.lhm-map-buscar .form-control:focus { box-shadow: 0 0 0 3px rgba(var(--lhm-acento-rgb, 196, 162, 92), .55); }
.lhm-map-avance { margin: 0; color: var(--inm-tenue); font-size: .9rem; }
.lhm-map-avance strong { color: var(--inm-oro); }
.lhm-map-ayuda { color: var(--inm-tenue); font-size: .85rem; margin-bottom: 1rem; max-width: 60rem; }

.lhm-map-columnas { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.lhm-map-lineas { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.lhm-map-lineas path { fill: none; stroke: rgba(var(--lhm-acento-rgb, 196, 162, 92), .6); stroke-width: 1.6; }
.lhm-map-col { position: relative; z-index: 1; min-width: 0; background: rgba(17, 24, 35, .78); border: 1px solid var(--inm-linea); border-radius: .9rem; padding: .9rem; }
.lhm-map-col-titulo { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .3rem; outline: none; line-height: 1.3; }
.lhm-map-col-sub { color: var(--inm-tenue); font-size: .84rem; margin-bottom: .7rem; }
.lhm-map-volver { display: none; margin-bottom: .6rem; }
.lhm-map-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.lhm-map-vacio { color: var(--inm-tenue); font-size: .9rem; padding: .5rem; }

.lhm-map-nodo {
  display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 48px; padding: .55rem .7rem; text-align: left; font: inherit;
  border-radius: .65rem; border: 1px solid var(--inm-linea); background: rgba(243, 239, 230, .04); color: var(--inm-crema); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lhm-map-nodo:hover { background: rgba(243, 239, 230, .1); border-color: rgba(var(--lhm-acento-rgb, 196, 162, 92), .5); }
.lhm-map-nodo:focus-visible { outline: 2px solid var(--inm-oro); outline-offset: 2px; }
.lhm-map-nodo > .bx:first-child { color: var(--inm-oro); font-size: 1.25rem; width: 1.5rem; text-align: center; flex: 0 0 auto; }
.lhm-map-nodo-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.lhm-map-nodo-titulo { font-weight: 600; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.lhm-map-nodo-sub { color: var(--inm-tenue); font-size: .78rem; line-height: 1.3; }
.lhm-map-flecha { color: var(--inm-tenue); flex: 0 0 auto; }
.lhm-map-nodo-visto { color: #a9dcb5; font-size: 1rem; flex: 0 0 auto; }
.lhm-map-sel { background: rgba(var(--lhm-acento-rgb, 196, 162, 92), .16); border-color: var(--inm-oro); }
.lhm-map-sel .lhm-map-flecha { color: var(--inm-oro); }

/* El detalle: el marco y las marcas son los de la escena «Cómo» (`lhm-inmersivo.css`). */
.lhm-map-detalle .lhm-map-col-titulo { font-size: 1.25rem; }
.lhm-map-marco { margin: .3rem 0 .4rem; }
.lhm-map-marco .lhm-inm-marca-num { pointer-events: none; }
.lhm-map-detalle .lhm-inm-pasos { margin-top: 0; }
.lhm-map-rotulo { color: var(--inm-oro); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 1rem 0 .45rem; }
.lhm-map-texto { color: var(--inm-crema); font-size: .93rem; line-height: 1.5; margin-bottom: .4rem; }
.lhm-map-detalle .lhm-inm-cifra { margin: .6rem 0; font-size: .92rem; }
.lhm-map-videos { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.lhm-map-videos .btn, .lhm-map-acciones .btn { display: inline-flex; align-items: center; gap: .35rem; text-align: left; white-space: normal; }
.lhm-map-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.lhm-map-fuente { color: var(--inm-tenue); font-size: .78rem; margin: .7rem 0 0; }

@media (min-width: 768px) {
  .lhm-map { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 992px) {
  /* El riel no está en el mapa: el contenido no necesita su margen. Tres columnas, cada una con su desplazamiento. */
  .lhm-map-columnas { grid-template-columns: minmax(15rem, .85fr) minmax(16rem, 1fr) minmax(22rem, 1.35fr); gap: 3rem; align-items: start; }
  .lhm-map-col { max-height: calc(100vh - var(--inm-cab) - 10rem); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 991.98px) {
  /* Una columna a la vez: la más honda abierta, con «Volver». */
  .lhm-map-columnas[data-nivel="1"] [data-col="0"], .lhm-map-columnas[data-nivel="2"] [data-col="0"],
  .lhm-map-columnas[data-nivel="2"] [data-col="1"] { display: none; }
  .lhm-map-volver { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .lhm-map-nodo { transition: none; }
}