/*
 * El recorrido interactivo (`/recorrido`) y la vitrina pública (`/conozca`).
 *
 * Solo variables del tema (`--bs-*`): el modo oscuro las redefine y una tarjeta con un color escrito a mano saldría
 * blanca sobre fondo oscuro. Lo que se ve en modo presentador cuelga de `.lhm-rec-presentando`, que pone
 * `lhm-recorrido.js` en el contenedor `[data-recorrido]`.
 */

/* ── El recorrido dentro de la aplicación ─────────────────────────────────────────────────────────────────────── */
.lhm-rec-hero { border-left: 4px solid var(--bs-primary); }
.lhm-rec-intro { flex: 1 1 320px; min-width: 0; }
.lhm-rec-avance { flex: 0 0 240px; max-width: 100%; }
.lhm-rec-barra { width: 0; transition: width .3s ease; }

.lhm-rec-cap { scroll-margin-top: 90px; transition: box-shadow .2s ease, outline-color .2s ease; outline: 2px solid transparent; }
.lhm-rec-cap:focus { outline: 2px solid var(--bs-primary); }
.lhm-rec-cap.lhm-rec-hecho { border-top: 3px solid var(--bs-success); }
.lhm-rec-pendiente { border-style: dashed; }
.lhm-rec-pendiente .avatar-title { filter: grayscale(1); opacity: .7; }

.lhm-rec-cifra {
  padding: .55rem .75rem; border-radius: .375rem; border-left: 3px solid var(--bs-success);
  /* Más suave que `--bs-success-bg-subtle`, que en este tema es un verde menta que pesa más que el texto. */
  background: rgba(var(--bs-success-rgb), .08); color: var(--bs-body-color);
}
.lhm-rec-cifra .bx { color: var(--bs-success); }

.lhm-rec-videos { display: flex; flex-wrap: wrap; gap: .4rem; }
.lhm-rec-videos .btn { text-align: left; }

/* La nota de quien presenta: oculta salvo en modo presentador. */
.lhm-rec-nota {
  display: none; padding: .6rem .75rem; border-radius: .375rem;
  background: var(--bs-warning-bg-subtle); border-left: 3px solid var(--bs-warning);
}
.lhm-rec-presentando .lhm-rec-nota { display: block; }
.lhm-rec-presentando .lhm-rec-cap.lhm-rec-actual { box-shadow: 0 0 0 3px var(--bs-primary); }

/* Las flechas del modo presentador: abajo a la derecha, por encima del pie. */
.lhm-rec-flechas {
  display: none; position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
  align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 2rem;
  background: var(--bs-body-bg); box-shadow: 0 .5rem 1.25rem rgba(17, 24, 35, .2);
}
.lhm-rec-flechas .btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.lhm-rec-presentando .lhm-rec-flechas { display: flex; }

@media (max-width: 575.98px) {
  .lhm-rec-avance { flex-basis: 100%; }
  .lhm-rec-flechas { right: .75rem; bottom: .75rem; }
}

/* ── La vitrina pública ───────────────────────────────────────────────────────────────────────────────────────── */
.lhm-vit { min-height: 100vh; background: var(--bs-secondary-bg); }
.lhm-vit-cab { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.lhm-vit-titulo { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); line-height: 1.2; }

/* La portada y las miniaturas son BOTONES (abren el reproductor): sin el aspecto de botón del navegador. */
.lhm-vit-portada, .lhm-vit-mini {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 16 / 9; overflow: hidden; background: #111823;
}
.lhm-vit-portada { border-radius: .5rem; box-shadow: 0 .75rem 2rem rgba(17, 24, 35, .25); }
.lhm-vit-mini { border-radius: .375rem .375rem 0 0; }
.lhm-vit-portada img, .lhm-vit-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lhm-vit-play {
  /* Abajo a la derecha y en un círculo: el póster lleva su título a la izquierda, y un icono centrado lo tapaba. */
  position: absolute; right: 1rem; bottom: 1rem; width: 4rem; height: 4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 3rem; background: rgba(17, 24, 35, .55); transition: transform .15s ease;
}
.lhm-vit-portada:hover .lhm-vit-play, .lhm-vit-portada:focus-visible .lhm-vit-play { transform: scale(1.06); }
.lhm-vit-portada:focus-visible, .lhm-vit-mini:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; }

/* Ganchos de `lhm-recorrido.js` que también se estilan (la regla 11 exige que toda clase de una vista exista). */
.lhm-rec { position: relative; }
.lhm-rec-visto { white-space: nowrap; }
.lhm-vit-hero { padding: 1rem 0 .5rem; }