/* ==========================================================================
   CATÁLOGO DE CURSOS + AULA VIRTUAL

   Solo lo que componentes.css no tenía. Todo lo demás (.wrap, .card, .list/.li,
   .pb, .btn, .empty, .kpis, .tabs, .chips, .tag, .plan…) se reutiliza tal cual.

   Ni un hex ni un color literal: todo sale de tokens.css, así el tema oscuro
   funciona sin escribir una sola regla para él.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rejilla del catálogo
   -------------------------------------------------------------------------- */
.cgrid { display: grid; gap: var(--sp-4); margin-top: 22px; }
@media (min-width: 640px) { .cgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cgrid { grid-template-columns: repeat(3, 1fr); } }

.cc {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  min-width: 0;
}
.cc:hover { border-color: var(--azure); }

/* Portada: si no hay imagen queda el degradado de marca con el isotipo. */
.cc-img {
  aspect-ratio: 16 / 9;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .6);
  position: relative;
}
.cc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-img .etq {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--card);
  color: var(--blue-txt);
  font-size: .7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.cc-b { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: grid; gap: 10px; flex: 1; align-content: start; }
.cc-b h3 { font-size: 1.1rem; line-height: 1.3; }
.cc-b p { font-size: .86rem; }

/* Fichitas de nivel / duración / módulos. */
.cc-meta { display: flex; flex-wrap: wrap; gap: 6px var(--sp-3); font-size: .78rem; color: var(--muted); }
.cc-meta span { display: inline-flex; align-items: center; gap: 4px; }

.cc-pie {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.precio { font-family: var(--font-d); font-weight: 700; font-size: 1.3rem; line-height: 1.1; }
.precio s { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); font-family: var(--font-b); }
.precio.chico { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Ficha del curso
   -------------------------------------------------------------------------- */
.ficha { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 960px) { .ficha { grid-template-columns: 1.5fr .9fr; } }

/* align-content: start o las secciones se reparten el hueco que deja la columna
   de compra cuando esta es más alta, y quedan separadas por medio metro. */
.ficha-cuerpo { min-width: 0; display: grid; gap: var(--sp-5); align-content: start; }
.ficha-cuerpo > h2 { font-size: 1.35rem; }
.prosa p { margin-bottom: var(--sp-3); }

/* Columna de compra: se queda pegada arriba en pantalla ancha. */
.compra { display: grid; gap: var(--sp-4); }
@media (min-width: 960px) { .compra { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }

.compra-caja { border: 1.5px solid var(--blue); border-radius: 22px; padding: var(--sp-5); background: var(--card); display: grid; gap: var(--sp-3); box-shadow: var(--sh-plan); }
.compra-caja .pr { font-family: var(--font-d); font-weight: 700; font-size: 2.1rem; line-height: 1; }
.compra-caja .pr s { font-size: .9rem; font-weight: 500; color: var(--muted); font-family: var(--font-b); margin-left: 8px; }
.compra-caja ul { list-style: none; display: grid; gap: var(--sp-2); font-size: .88rem; }
.compra-caja li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.compra-caja li .icono { color: var(--teal-txt); flex: none; margin-top: 2px; }

.sueltos { display: grid; gap: 10px; }
.suelto {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg2);
  display: grid;
  gap: var(--sp-2);
}
.suelto b { font-size: .92rem; }
.suelto .fila { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* Nota del cobro sin conectar: tiene que verse, no esconderse. */
.nota-cobro {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted);
  background: var(--bg2);
  border: 1px dashed var(--border);
  border-radius: var(--rs);
  padding: 10px var(--sp-3);
}
.nota-cobro .icono { color: var(--amber); flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Temario (ficha pública) y lista de módulos (aula)
   -------------------------------------------------------------------------- */
.temario { display: grid; gap: 10px; }

.mod {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
}
.mod > summary { cursor: pointer; list-style: none; padding: var(--sp-4); display: grid; gap: 6px; }
.mod > summary::-webkit-details-marker { display: none; }
.mod-top { display: flex; align-items: center; gap: var(--sp-3); }
.mod-top .n {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--bg3); color: var(--blue-txt);
  font-family: var(--font-d); font-weight: 700; font-size: .9rem;
}
.mod-top .t { flex: 1; min-width: 0; }
.mod-top .t b { display: block; font-size: 1rem; line-height: 1.3; }
.mod-top .t span { font-size: .76rem; color: var(--muted); }
.mod-top .icono.fl { color: var(--muted); transition: transform .2s; flex: none; }
/* El precio del módulo bloqueado, a la derecha del título y sin encogerse. */
.mod-top .precio { flex: none; line-height: 1.2; }
.mod[open] .mod-top .icono.fl { transform: rotate(180deg); }
.mod-cuerpo { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: 8px; }
.mod-cuerpo > p { font-size: .85rem; }

/* Módulo bloqueado: se ve, no se esconde. Es lo que invita a comprarlo. */
.mod.bloq { border-style: dashed; background: var(--bg2); }
.mod.bloq .mod-top .n { background: var(--bg3); color: var(--muted); }

.cerrado {
  display: grid;
  gap: var(--sp-3);
  border-top: 1px dashed var(--border);
  padding-top: var(--sp-3);
}
.cerrado .txt { display: flex; gap: var(--sp-2); font-size: .84rem; color: var(--muted); align-items: flex-start; }
.cerrado .txt .icono { color: var(--muted); flex: none; margin-top: 2px; }
.cerrado .fila { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Clase dentro de un módulo
   -------------------------------------------------------------------------- */
.clase {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px var(--sp-3);
  border-radius: var(--rs);
  border: 1px solid var(--border);
  background: var(--bg2);
  min-width: 0;
}
a.clase:hover { border-color: var(--azure); background: var(--card); }
.clase .ic { color: var(--muted); display: grid; place-items: center; }
.clase.vista .ic { color: var(--teal-txt); }
.clase .t { min-width: 0; }
.clase .t b { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.clase .t span { display: block; font-size: .74rem; color: var(--muted); }
.clase.vista .t b { color: var(--muted); }
.clase .r { font-size: .74rem; color: var(--muted); white-space: nowrap; text-align: right; }

/* Marca de «se ve gratis»: el gancho del catálogo. */
.libre {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 700;
  color: var(--teal-txt);
  border: 1px solid var(--teal-txt);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Barra de avance con su etiqueta
   -------------------------------------------------------------------------- */
.avance { display: grid; gap: 6px; }
.avance .cab { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: .76rem; color: var(--muted); }
.avance .cab b { font-family: var(--font-d); color: var(--text); }

/* --------------------------------------------------------------------------
   Aula: tarjeta de curso
   -------------------------------------------------------------------------- */
.mis-cursos { display: grid; gap: var(--sp-4); }
.mc { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.mc-top { display: flex; gap: var(--sp-4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.mc-top h3 { font-size: 1.2rem; line-height: 1.25; }
.mc-top p { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.mc-acciones { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   La clase: reproductor, en vivo, materiales, navegación
   -------------------------------------------------------------------------- */
.clase-pg { display: grid; gap: var(--sp-5); }

.migas { font-size: .8rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.migas a { color: var(--blue-txt); font-weight: 600; }
.migas .icono { flex: none; }

.repro { border-radius: var(--r-lg); overflow: hidden; background: var(--ink); }
.repro video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; background: var(--ink); }

/* Clase en vivo: tarjeta oscura con la cuenta atrás. Los colores on-dark no
   dependen del tema, igual que .sim y .upsell. */
.vivo { background: var(--ink); color: var(--on-dark-text); border-radius: var(--r-lg); padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.vivo h2, .vivo h3 { color: var(--on-dark-text); }
.vivo p { color: var(--on-dark-muted); font-size: .9rem; }
.vivo .cuando { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--on-dark-muted); }
.vivo .btn-outline { background: transparent; color: var(--on-dark-text); border-color: var(--on-dark-line-2); }
.vivo .reloj { display: flex; gap: 10px; flex-wrap: wrap; }
.vivo .reloj div {
  background: var(--on-dark-fill-2);
  border: 1px solid var(--on-dark-line);
  border-radius: 14px;
  padding: 10px 14px;
  text-align: center;
  min-width: 62px;
}
.vivo .reloj b { display: block; font-family: var(--font-d); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.vivo .reloj small { font-size: .68rem; color: var(--on-dark-faint); }
.vivo .emitiendo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; color: var(--mint); }
.vivo .emitiendo i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(45, 212, 160, .25); }

.marcar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.marcar .estado { font-size: .8rem; color: var(--muted); }
.marcar[aria-busy="true"] .btn { opacity: .55; pointer-events: none; }

.nav-clase { display: grid; gap: 10px; }
@media (min-width: 560px) { .nav-clase { grid-template-columns: 1fr 1fr; } }
.nav-clase a {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--border); border-radius: 14px;
  padding: var(--sp-3) var(--sp-4); background: var(--card); min-width: 0;
}
.nav-clase a:hover { border-color: var(--azure); }
.nav-clase a.sig { justify-content: flex-end; text-align: right; }
.nav-clase small { display: block; font-size: .72rem; color: var(--muted); }
.nav-clase b { font-size: .88rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-clase .icono { color: var(--muted); flex: none; }
.nav-clase span.hueco { display: none; }

/* --------------------------------------------------------------------------
   Horario
   -------------------------------------------------------------------------- */
.dia { margin-bottom: var(--sp-5); }
.dia > h3 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--azure-txt);
  margin-bottom: 10px;
}
.dia .hora { font-family: var(--font-d); font-weight: 700; color: var(--blue-txt); font-size: 1rem; min-width: 58px; }
.dia .li { grid-template-columns: auto 1fr auto; }

/* --------------------------------------------------------------------------
   Nada de scroll horizontal a 390 px: lo único que puede desbordar son los
   títulos largos y las cajas con precio, y aquí se les pone freno.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .cc-pie, .suelto .fila, .cerrado .fila { flex-direction: column; align-items: stretch; }
  .cc-pie .btn, .suelto .btn, .cerrado .btn { width: 100%; }
  .clase { grid-template-columns: 24px 1fr; }
  /* Con dos columnas el distintivo baja a la segunda fila, y sin esto el
     autoposicionamiento lo mete en la columna del icono: la píldora «Gratis»
     quedaba estrujada en 24 px con el borde cortando la palabra. Va por
     posición y no por clase para que valga igual para «Gratis», «En emisión»
     y los minutos. */
  .clase > :nth-child(3) { grid-column: 2; justify-self: start; text-align: left; }
  .mod-top .t b { overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Transmisión en vivo dentro del aula
   -------------------------------------------------------------------------- */
/* `aspect-ratio` y no un alto fijo: la caja reserva su sitio antes de que
   llegue el vídeo, así la página no da un salto al empezar la emisión. */
.emision-hls,
.emision-marco {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r); overflow: hidden;
  background: #000; margin: var(--sp-4) 0 var(--sp-3);
}
.emision-hls video,
.emision-marco iframe { width: 100%; height: 100%; display: block; border: 0; }

.emision-aviso {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 100%; padding: var(--sp-4); margin: 0;
  color: var(--on-dark-faint); font-size: .88rem; text-align: center;
}
.emision-aviso a { color: var(--mint); font-weight: 600; }
.emision-hls:has(.emision-aviso:not([hidden])) video { display: none; }

.emision-pie { font-size: .82rem; color: var(--muted); margin: 0; }
.emision-pie a { color: var(--blue-txt); font-weight: 600; }

/* --------------------------------------------------------------------------
   Horario del alumno: estados y calendario
   -------------------------------------------------------------------------- */

.horario-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
  font-size: .86rem; color: var(--muted);
}

/* La fila de una clase: franja horaria · qué es · en qué punto está. */
.clase-horario { grid-template-columns: auto minmax(0, 1fr) auto; }
.clase-horario .franja {
  display: grid; text-align: center; min-width: 52px;
  padding-right: var(--sp-3); border-right: 1px solid var(--border);
}
.clase-horario .franja b { font-family: var(--font-d); font-size: 1rem; color: var(--blue-txt); }
.clase-horario .franja small { font-size: .72rem; color: var(--muted); }
.acciones-clase { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); justify-content: flex-end; }

.estado-clase {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--r-pill);
}
.estado-clase.vivo { color: var(--rojo-txt); background: color-mix(in srgb, var(--rojo-txt) 12%, transparent); }
/* El punto que late: es lo que distingue «ahora» de «hoy» sin leer nada. */
.estado-clase.vivo i {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .estado-clase.vivo i { animation: none } }
.estado-clase.prox { color: var(--muted); background: var(--bg2); }
.estado-clase.fin { color: var(--teal-txt); background: color-mix(in srgb, var(--mint) 18%, transparent); }

/* En móvil el estado y el botón bajan a su propia línea: con tres columnas, el
   título de la clase se quedaba en dos palabras por renglón. */
@media (max-width: 559px) {
  .clase-horario { grid-template-columns: auto minmax(0, 1fr); }
  .clase-horario .acciones-clase { grid-column: 1 / -1; justify-content: flex-start; margin-top: var(--sp-2); }
}

/* --- Calendario mensual --- */
.cal-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.cal-barra h2 { font-size: 1.15rem; margin: 0; min-width: 0; }
.cal-total { margin-left: auto; font-size: .84rem; color: var(--muted); }

.calendario {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.cal-cabecera {
  background: var(--bg2); padding: 8px 6px; text-align: center;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
}
.cal-dia {
  background: var(--card); min-height: 96px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.cal-dia.otro-mes { background: var(--bg2); }
.cal-dia.otro-mes .cal-numero { opacity: .45; }
.cal-dia.hoy { background: var(--bg3); }
.cal-numero { font-size: .76rem; font-weight: 600; color: var(--muted); }
.cal-numero small {
  margin-left: 4px; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  color: var(--blue-txt);
}

.cal-clase {
  display: grid; gap: 1px; padding: 4px 6px; border-radius: 7px;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--text); font-size: .7rem; min-width: 0;
}
.cal-clase b { font-family: var(--font-d); font-size: .72rem; color: var(--blue-txt); }
/* Dos líneas y corta: en una celda de calendario no cabe un título entero, y
   dejarlo crecer descuadraría toda la rejilla. */
.cal-clase span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.25;
}
.cal-clase:hover { background: color-mix(in srgb, var(--blue) 24%, transparent); }
.cal-clase.vivo { background: color-mix(in srgb, var(--rojo-txt) 16%, transparent); }
.cal-clase.vivo b { color: var(--rojo-txt); }
.cal-clase.fin { opacity: .6; }

.cal-vacio { margin-top: var(--sp-4); text-align: center; color: var(--muted); font-size: .88rem; }
.cal-vacio a { color: var(--blue-txt); font-weight: 600; }

/* Por debajo de 700 px una rejilla de siete columnas deja celdas de 40 px:
   el calendario se convierte en una lista de días con contenido. */
@media (max-width: 699px) {
  .calendario { grid-template-columns: minmax(0, 1fr); }
  .cal-cabecera { display: none; }
  .cal-dia { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  /* Los días sin clase no aportan nada en una lista. */
  .cal-dia:not(:has(.cal-clase)) { display: none; }
  .cal-numero { flex: 0 0 56px; padding-top: 4px; }
  .cal-clase { flex: 1 1 200px; font-size: .78rem; }
  .cal-clase span { -webkit-line-clamp: 1; }
}