/* IdeasCenter — extensiones del LMS
 * ==================================================================
 * Componentes que la academia necesita y el design system NO tiene:
 * barra de progreso, acordeon de modulos, item de leccion, visor de PDF.
 *
 * REGLA: aqui solo se escriben clases con prefijo .lms-, y solo con
 * tokens var(--ic-*). Prohibido un hex, un px de marca o un escalon
 * tipografico nuevo. Si necesitas un valor intermedio, usa el escalon
 * mas cercano del sistema.
 *
 * Los componentes que se estabilicen aqui se devuelven al design
 * system remoto (ver docs/ds/SYNC.md, "Devolver componentes").
 * ==================================================================
 */

/* ======================================================================
 * Barra de progreso del curso
 * El amarillo es escaso en la marca, pero aqui gana: el progreso es LA
 * senal de avance del estudiante y merece el color de acento.
 * ==================================================================== */
.lms-progreso {
  display: flex;
  flex-direction: column;
  gap: var(--ic-espacio-2xs);
}

.lms-progreso__barra {
  height: var(--ic-espacio-xs);
  background: var(--ic-color-borde);
  border-radius: var(--ic-radio-pill);
  overflow: hidden;
}

.lms-progreso__relleno {
  height: 100%;
  background: var(--ic-amarillo);
  border-radius: var(--ic-radio-pill);
  transition: width .3s ease;
}

.lms-progreso__texto {
  font-size: var(--ic-texto-micro);
  font-weight: var(--ic-peso-semibold);
  color: var(--ic-color-texto-suave);
}

/* Curso terminado: el relleno pasa a azul, que en esta marca es el color
   de lo consolidado. El amarillo señala "en marcha", el azul "hecho". */
.lms-progreso--completo .lms-progreso__relleno {
  background: var(--ic-color-primario);
}

/* ======================================================================
 * Acordeon de modulos — barra lateral de la sala de clases
 * ==================================================================== */
.lms-temario {
  display: flex;
  flex-direction: column;
  gap: var(--ic-espacio-xs);
}

.lms-modulo {
  border: 1px solid var(--ic-color-borde-suave);
  border-radius: var(--ic-radio-md);
  overflow: hidden;
  background: var(--ic-color-superficie);
}

.lms-modulo__cabecera {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--ic-espacio-sm);
  padding: var(--ic-espacio-md) var(--ic-espacio-ml);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--ic-fuente);
  font-size: var(--ic-texto-pequeno);
  font-weight: var(--ic-peso-bold);
  color: var(--ic-color-texto);
  text-align: left;
}

.lms-modulo__cabecera:hover {
  background: var(--ic-color-borde-suave);
}

.lms-modulo__cabecera:focus-visible {
  outline: 3px solid var(--ic-amarillo);
  outline-offset: -3px;
}

.lms-modulo__contador {
  font-size: var(--ic-texto-micro);
  font-weight: var(--ic-peso-regular);
  color: var(--ic-color-texto-tenue);
  margin-left: auto;
}

/* Flecha del acordeon. Gira al abrir; el giro lo dispara Alpine. */
.lms-modulo__flecha {
  width: var(--ic-espacio-sm);
  height: var(--ic-espacio-sm);
  border-right: 2px solid var(--ic-color-texto-tenue);
  border-bottom: 2px solid var(--ic-color-texto-tenue);
  transform: rotate(-45deg);
  transition: transform .2s ease;
  flex-shrink: 0;
}

.lms-modulo__flecha--abierta {
  transform: rotate(45deg);
}

.lms-modulo__lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ic-color-borde-suave);
}

/* ======================================================================
 * Item de leccion
 * ==================================================================== */
.lms-leccion {
  display: flex;
  align-items: center;
  gap: var(--ic-espacio-sm);
  padding: var(--ic-espacio-sm) var(--ic-espacio-ml);
  font-size: var(--ic-texto-pequeno);
  font-weight: var(--ic-peso-light);
  color: var(--ic-color-texto-cuerpo);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.lms-leccion:hover {
  background: var(--ic-color-borde-suave);
  color: var(--ic-color-texto);
}

.lms-leccion:focus-visible {
  outline: 3px solid var(--ic-amarillo);
  outline-offset: -3px;
}

/* La leccion que se esta viendo: borde amarillo y peso mayor. */
.lms-leccion--activa {
  background: var(--ic-color-borde-suave);
  border-left-color: var(--ic-amarillo);
  font-weight: var(--ic-peso-semibold);
  color: var(--ic-color-texto);
}

/* Bloqueada por no tener acceso: se ve, no se entra. Que exista y se
   vea es parte del gancho comercial. */
.lms-leccion--bloqueada {
  color: var(--ic-color-texto-tenue);
  cursor: not-allowed;
}

.lms-leccion__titulo {
  flex: 1;
  min-width: 0;
}

.lms-leccion__meta {
  font-size: var(--ic-texto-micro);
  color: var(--ic-color-texto-tenue);
  flex-shrink: 0;
}

/* Marca de estado a la izquierda del titulo. */
.lms-leccion__marca {
  width: var(--ic-espacio-ml);
  height: var(--ic-espacio-ml);
  border-radius: var(--ic-radio-pill);
  border: 1.5px solid var(--ic-color-borde);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lms-leccion__marca--completada {
  background: var(--ic-color-primario);
  border-color: var(--ic-color-primario);
}

/* Palomita dibujada con bordes: sin iconos externos ni fuente de iconos. */
.lms-leccion__marca--completada::after {
  content: '';
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--ic-blanco);
  border-bottom: 2px solid var(--ic-blanco);
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ======================================================================
 * Portada de curso — foto real dentro de ic-tarjeta__media
 * El Card del DS dimensiona __media para su degradado de marca (120px
 * fijos), no para una foto subida por el admin. En una grilla con pocas
 * tarjetas esa caja se estira mucho más ancha que alta y una portada
 * 16:9 queda recortada a una franja delgada. No se toca ic-tarjeta__media
 * (regla de estilo, ver AGENT_RULES.md §6): se añade este modificador
 * solo para cuando SÍ hay foto, y solo aquí.
 * ==================================================================== */
.lms-tarjeta__media--foto {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ======================================================================
 * Banner de portada — ficha del curso
 * Mismo problema de fondo que la tarjeta: el DS no tiene un componente de
 * cabecera con foto grande, solo el degradado de marca. Se usa ese
 * degradado como respaldo cuando el curso no tiene portada.
 * ==================================================================== */
.lms-banner-curso {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  border-radius: var(--ic-radio-xl);
  overflow: hidden;
  background: var(--ic-degradado-azul);
  box-shadow: var(--ic-sombra-panel);
}

.lms-banner-curso__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degradado hacia el azul profundo de marca, no un negro/rgba suelto:
   el texto necesita contraste sobre cualquier foto sin inventar un color
   fuera de los tokens. */
.lms-banner-curso::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--ic-azul-profundo) 0%, transparent 75%);
}

.lms-banner-curso__contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ic-espacio-2xs);
  padding: var(--ic-espacio-xl);
}

/* ======================================================================
 * Reproductor
 * ==================================================================== */
.lms-reproductor {
  border-radius: var(--ic-radio-lg);
  overflow: hidden;
  background: var(--ic-azul-profundo);
}

/* VideoPress se embebe en un iframe, y un iframe no tiene proporcion propia:
   sin esto colapsa a la altura por defecto (150px). Plyr no lo necesita
   porque calcula la suya. */
.lms-reproductor--marco {
  position: relative;
  aspect-ratio: 16 / 9;
}

.lms-reproductor--marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Plyr trae sus propios colores; se alinean con la marca. */
.lms-reproductor .plyr {
  --plyr-color-main: var(--ic-amarillo);
  --plyr-video-background: var(--ic-azul-profundo);
  --plyr-font-family: var(--ic-fuente);
}

/* ======================================================================
 * Visor de PDF — material de apoyo, solo lectura
 * ==================================================================== */
.lms-visor {
  display: flex;
  flex-direction: column;
  gap: var(--ic-espacio-sm);
  border: 1px solid var(--ic-color-borde);
  border-radius: var(--ic-radio-md);
  overflow: hidden;
  background: var(--ic-color-fondo);
}

.lms-visor__barra {
  display: flex;
  align-items: center;
  gap: var(--ic-espacio-sm);
  padding: var(--ic-espacio-xs) var(--ic-espacio-md);
  background: var(--ic-color-superficie);
  border-bottom: 1px solid var(--ic-color-borde-suave);
}

.lms-visor__lienzo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ic-espacio-md);
  padding: var(--ic-espacio-md);
  max-height: 70vh;
  overflow-y: auto;
}

.lms-visor__pagina {
  max-width: 100%;
  box-shadow: var(--ic-sombra-panel);
  border-radius: var(--ic-radio-sm);
}

/* El texto seleccionable de un PDF renderizado permite copiar y pegar el
   documento entero. Para material de apoyo de solo lectura, se bloquea. */
.lms-visor__lienzo {
  user-select: none;
  -webkit-user-select: none;
}

/* ======================================================================
 * Video de presentacion del curso — ficha publica
 * Sustituye al banner de portada cuando el curso tiene video. A diferencia
 * del reproductor del aula, aqui no hay Plyr: el video no guarda progreso,
 * asi que no hace falta la API del reproductor y basta un iframe.
 * El aspect-ratio lo fija el contenedor porque un iframe de otro origen no
 * sabe decir su propia altura.
 * ==================================================================== */
.lms-video-intro {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ic-radio-xl);
  overflow: hidden;
  background: var(--ic-azul-profundo);
  box-shadow: var(--ic-sombra-panel);
}

.lms-video-intro__marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ======================================================================
 * Navegacion de la cabecera: barra en escritorio, cajon en movil
 *
 * PRIMER PUNTO DE CORTE DEL PROYECTO. Hasta ahora el design system no tenia
 * ni una media query: todo era fluido con flex-wrap. Eso funciona con
 * tarjetas, pero una barra de navegacion no se "envuelve" con dignidad —
 * se parte en dos filas y pisa el logo, que es justo lo que pasaba.
 *
 * 900px es el ancho al que la barra en linea deja de caber con la sesion mas
 * cargada: Cursos, Membresia, Mi cuenta, Administrar y Salir. El mismo valor
 * esta en window.menuCabecera (layouts/app.blade.php); si se cambia uno hay
 * que cambiar el otro — CSS no deja usar var() dentro de una media query.
 * ==================================================================== */

.lms-nav-escritorio {
  display: flex;
  align-items: center;
  gap: var(--ic-espacio-md);
}

/* El boton solo existe por debajo del corte. */
.lms-nav-boton { display: none; }

@media (max-width: 899px) {
  .lms-nav-escritorio { display: none; }

  .lms-nav-boton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ic-espacio-3xs);
    margin-left: auto;
    /* 44px es el minimo tactil que recomienda la guia de accesibilidad de
       Apple y de Android; por debajo se falla el toque de forma constante. */
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--ic-radio-sm);
    cursor: pointer;
  }

  .lms-nav-boton:focus-visible {
    outline: 2px solid var(--ic-amarillo);
    outline-offset: 2px;
  }
}

/* Las tres barras. Se dibujan con CSS y se convierten en X al abrir: sin
   fuente de iconos, sin SVG, sin una peticion mas. */
.lms-nav-boton__linea {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  border-radius: var(--ic-radio-pill);
  background: var(--ic-color-primario);
  transition: transform .3s ease, opacity .2s ease;
}

.lms-nav-boton--abierto .lms-nav-boton__linea:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.lms-nav-boton--abierto .lms-nav-boton__linea:nth-child(2) {
  opacity: 0;
}
.lms-nav-boton--abierto .lms-nav-boton__linea:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------------------------------------------------------------- Velo --*/
.lms-nav-velo {
  position: fixed;
  inset: 0;
  z-index: 30;
  /* El azul profundo de marca en vez de un negro suelto: el velo tambien es
     superficie de marca, aunque casi no se mire. */
  background: var(--ic-azul-profundo);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}

.lms-nav-velo--visible {
  opacity: .45;
  visibility: visible;
}

/* --------------------------------------------------------------- Cajon --*/
.lms-nav-cajon {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 31;
  height: 100dvh;               /* dvh y no vh: cuenta la barra del navegador movil */
  width: min(20rem, 82vw);
  display: flex;
  flex-direction: column;
  background: var(--ic-color-superficie);
  box-shadow: var(--ic-sombra-panel);
  /* Fuera de pantalla, no display:none: asi la vuelta se anima igual que la
     ida. `visibility` ademas lo saca del orden de tabulacion mientras esta
     cerrado — si no, se puede tabular a enlaces invisibles. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility .32s;
}

.lms-nav-cajon--abierto {
  transform: translateX(0);
  visibility: visible;
}

.lms-nav-cajon__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ic-espacio-md);
  padding: var(--ic-espacio-ml) var(--ic-espacio-lg);
  border-bottom: 1px solid var(--ic-color-borde);
}

.lms-nav-cajon__cerrar {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ic-texto-titulo);
  line-height: 1;
  color: var(--ic-color-texto-suave);
  background: none;
  border: 0;
  border-radius: var(--ic-radio-sm);
  cursor: pointer;
}

.lms-nav-cajon__cerrar:hover { color: var(--ic-color-texto); }
.lms-nav-cajon__cerrar:focus-visible {
  outline: 2px solid var(--ic-amarillo);
  outline-offset: 2px;
}

.lms-nav-cajon__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--ic-espacio-sm);
  padding: var(--ic-espacio-lg);
  overflow-y: auto;
}

/* En el cajon los botones van a lo ancho y alineados a la izquierda: en una
   columna estrecha, un boton centrado y estrecho se lee como un boton suelto,
   no como una opcion de menu. */
.lms-nav-cajon__enlace {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

/* Mientras el cajon esta abierto, la pagina de detras no se mueve. */
.lms-sin-scroll { overflow: hidden; }

/* Quien pide menos movimiento recibe el cajon igual, pero sin deslizamiento:
   la funcionalidad no se recorta, solo la animacion. */
@media (prefers-reduced-motion: reduce) {
  .lms-nav-cajon,
  .lms-nav-velo,
  .lms-nav-boton__linea {
    transition-duration: .01ms;
  }
}

/* ======================================================================
 * ADAPTACION A MOVIL Y TABLETA
 *
 * El design system no traia media queries: los diseños se apoyaban en
 * flex-wrap y en rejillas `auto-fit`, que se adaptan solas. Lo que NO se
 * adapta solo es una rejilla de columnas fijas, y habia dos: la ficha del
 * curso y el aula.
 *
 * Por que aqui y no en el `style=` de cada vista: un estilo en linea gana a
 * cualquier regla de hoja, asi que una media query no lo puede pisar sin
 * !important. La forma limpia es sacar el diseño a una clase con nombre.
 *
 * Los cortes son dos y responden a algo, no a modelos de telefono:
 *   1024px  la barra lateral deja de tener sitio comodo -> una columna
 *    640px  el relleno de pagina y de panel se come el contenido
 * ==================================================================== */

/* ------------------------------------------- Contenido + barra lateral --*/
.lms-columnas {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--ic-espacio-xl);
  align-items: start;
}

/* El aula da mas sitio al temario: es una lista larga con la que se navega,
   no una tarjeta de resumen. */
.lms-columnas--aula {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

@media (max-width: 1023px) {
  .lms-columnas,
  .lms-columnas--aula {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------ Relleno de la pagina --*/
.lms-pagina {
  max-width: var(--ic-ancho-contenido);
  margin: 0 auto;
  padding: var(--ic-espacio-4xl) var(--ic-espacio-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ic-espacio-3xl);
}

.lms-cabecera__interior {
  max-width: var(--ic-ancho-contenido);
  margin: 0 auto;
  padding: var(--ic-espacio-ml) var(--ic-espacio-xl);
  display: flex;
  align-items: center;
  gap: var(--ic-espacio-xl);
}

.lms-pie {
  margin-top: var(--ic-espacio-6xl);
  padding: var(--ic-espacio-3xl) var(--ic-espacio-xl);
  border-top: 1px solid var(--ic-color-borde);
}

@media (max-width: 639px) {
  /* A 360px de pantalla, 24px de relleno por lado dejan 312px; dentro de un
     .ic-panel (32px por lado) quedan 248px. Con eso no cabe una etiqueta y su
     campo en la misma linea. Bajando ambos se recuperan ~50px utiles. */
  .lms-pagina {
    padding: var(--ic-espacio-xl) var(--ic-espacio-ml);
    gap: var(--ic-espacio-xl);
  }

  .lms-cabecera__interior { padding: var(--ic-espacio-sm) var(--ic-espacio-ml); }
  .lms-pie { margin-top: var(--ic-espacio-4xl); padding: var(--ic-espacio-xl) var(--ic-espacio-ml); }

  /* DIVERGENCIA CONSCIENTE respecto al design system remoto. No se edita
     _ds_bundle.css (§6: el remoto manda); se ajusta desde aqui y queda
     anotado en docs/ds/SYNC.md. El componente no cambia de aspecto, solo
     respira menos donde no hay sitio. */
  .ic-panel { padding: var(--ic-espacio-lg); }

  /* Un titulo largo en 248px se sale de la caja si no se le deja partir. */
  .ic-seccion, .ic-titulo, .ic-tarjeta__titulo { overflow-wrap: break-word; }
}

/* ------------------------------------------------------------ Generales --*/

/* Nada debe provocar barra horizontal en el documento: si algo se desborda,
   que se vea recortado y no que mueva la pagina entera. */
html, body { overflow-x: hidden; }

/* Correos, URLs y codigos de certificado son cadenas largas sin espacios:
   sin esto empujan el ancho de su contenedor y desmontan el diseño. */
.ic-cuerpo, .ic-tarjeta__texto, .ic-campo__ayuda { overflow-wrap: anywhere; }

/* Una imagen sin tope se lleva por delante cualquier columna. */
img { max-width: 100%; height: auto; }

/* Los <input> no heredan la familia tipografica por defecto, y Safari en iOS
   hace zoom automatico sobre cualquier campo con letra menor de 16px — el
   salto de escala al tocar un campo es una de las cosas que peor se sienten
   en un movil. */
@media (max-width: 639px) {
  .ic-campo__input { font-size: 16px; }
}

/* --------------------------------------- Retoques finos de tacto/ancho --*/

/* La barra del visor de PDF es una fila sin envolver: en pantalla estrecha,
   los botones de pagina se salian de la caja. */
.lms-visor__barra { flex-wrap: wrap; }

@media (max-width: 639px) {
  /* OTRA DIVERGENCIA CONSCIENTE respecto al design system (ver ds/SYNC.md).
     El .ic-btn no fija altura: la deja al relleno de cada modificador, y
     .ic-btn--texto queda por debajo de los 44px que Apple y Android dan como
     minimo tactil. Por debajo de eso se falla el toque de forma constante, y
     el menu y el panel estan llenos de botones de texto. No cambia el aspecto
     en escritorio: la regla solo existe aqui. */
  .ic-btn { min-height: 44px; }

  /* Un boton dentro de una tarjeta estrecha se lee mejor a lo ancho que
     centrado y flotando en medio de la caja. */
  .ic-panel > .ic-btn { width: 100%; }
}

/* ======================================================================
 * Estado del certificado dentro de la tarjeta de curso
 *
 * Tres estados con el mismo esqueleto y distinto acento en el borde:
 *   pendiente    gris   — el curso no esta completo, la opcion se ve apagada
 *   por_pagar    amarillo — se gano el certificado, falta pagar el PDF
 *   descargable  azul   — listo
 *
 * El amarillo señala "hay algo que hacer" y el azul "hecho", igual que en la
 * barra de progreso. Borde y no relleno: el amarillo no es fondo de bloque
 * (AGENT_RULES §6).
 * ==================================================================== */
.lms-certificado {
  display: flex;
  align-items: center;
  gap: var(--ic-espacio-md);
  flex-wrap: wrap;
  padding-top: var(--ic-espacio-md);
  border-top: 1px solid var(--ic-color-borde-suave);
  border-left: 3px solid var(--ic-color-borde);
  padding-left: var(--ic-espacio-md);
}

.lms-certificado--por_pagar   { border-left-color: var(--ic-amarillo); }
.lms-certificado--descargable { border-left-color: var(--ic-color-primario); }

.lms-certificado__texto {
  flex: 1 1 14rem;
  font-size: var(--ic-texto-micro);
  color: var(--ic-color-texto-suave);
}

.lms-certificado__texto strong { color: var(--ic-color-texto); }

/* Un boton deshabilitado tiene que PARECER deshabilitado: si no, el
   estudiante lo pulsa, no pasa nada y cree que el sitio esta roto. */
.lms-certificado .ic-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}