@charset "utf-8";
/* ============================================================
   modulos/videos.css

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: todo lo común (tarjetas, botones, campos, cifras, tablas,
   avisos, cabecera de pantalla) ya viene de ahí.

   Dos pantallas de la academia:
     · Vídeos (`videoteca.js`) → la página «Vídeos» del sitio: el vídeo en su
       `.marco-video` de 16:9 y el pie debajo, sin caja alrededor.
     · En vivo (`vivo.js`)     → la agenda como un `.bloque` de panel, una fila
       por clase con la fecha en cifras tabulares, y la sala debajo.

   El mando de velocidad del reproductor (`.tk-vel`) no se dibuja aquí: es la
   misma pieza de las lecciones y los audios, y tiene que verse igual en todas.
   ============================================================ */

/* ============================================================
   0. Lo común a las dos
   ============================================================ */

:is(.tk-videoteca, .tk-vivo) .tk-carga { display: grid; gap: var(--e-4); }
:is(.tk-videoteca, .tk-vivo) .tk-carga .cargando {
  display: block; width: 100%; height: 5.5rem; border-radius: var(--panel-radio);
}
/* En la videoteca el esqueleto tiene la forma de lo que viene: miniaturas. */
.tk-videoteca .tk-carga .cargando { height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg); }

/* `app.css` separa un icono del texto que le sigue con `.tk-icono + *`. Dentro
   de una fila con `gap` ese margen se suma al hueco y descuadra. */
:is(.tk-videoteca, .tk-vivo, .tk-vp) :is(.tk-vivo-pie > span, .tk-vivo-nota, .tk-vp-aviso) > .tk-icono + * {
  margin-left: 0;
}
/* El fallo de una llamada (`.fallo` con su botón de reintentar a 44 px) es
   pieza común de app.css (§13). */

/* ============================================================
   1. Vídeos
   ============================================================ */

/* ---------- la tira de niveles ----------
   El control segmentado común (`.segmentado .segmentado-filas`, app.css §12),
   el mismo del filtro de nivel de Mirar: eran siete píldoras sueltas con la
   elegida rellena de color, y en la misma academia el mismo «elige un nivel»
   se dibujaba de dos maneras. Cada nivel lleva su `.n-*`, así que el filo de
   «B1» es el azul de B1; debajo de cada nivel, en `<small>`, cuántos vídeos
   tiene. Aquí solo va el aire que lo separa de la lista. */
.tk-vt-filtro { margin-bottom: var(--e-6); }

/* ---------- cada nivel ---------- */
.tk-vt-nivel { margin-bottom: var(--e-7); }
.tk-vt-nivel-cab {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  margin-bottom: var(--e-4); padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--linea);
}
/* La clave del nivel, igual que la de la tabla de «Programa»: el color del
   escalón con su tinta encima. */
.tk-vt-clave {
  display: inline-grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm);
  background: var(--seccion); color: var(--sobre-seccion);
  font-family: var(--display); font-size: var(--t-md); font-weight: 700;
}
.tk-vt-nivel-nombre { font-size: var(--t-xl); min-width: 0; }
.tk-vt-nivel-dato { margin-left: auto; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.tk-vt-rejilla {
  display: grid; gap: var(--e-5) var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* ---------- la tarjeta ---------- */
.tk-vt-card { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }

/* La tapa ES el marco de vídeo de la plantilla: mismo filo, mismo radio, mismo
   fondo oscuro mientras llega la miniatura. */
.tk-vt-tapa {
  position: relative; display: block; width: 100%; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .15s ease;
}
.tk-vt-tapa:hover { border-color: var(--seccion); }
.tk-vt-tapa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-vt-tapafondo {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--seccion-lavado); color: var(--seccion-tinta);
  font-family: var(--display); font-size: var(--t-2xl); font-weight: 700;
}
.tk-vt-play {
  position: absolute; inset: 0; margin: auto;
  width: 3.25rem; height: 3.25rem; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--seccion); color: var(--sobre-seccion);
  transition: transform .15s ease;
}
.tk-vt-play svg { width: 1.5rem; height: 1.5rem; margin-left: 2px; }
.tk-vt-tapa:hover .tk-vt-play { transform: scale(1.06); }
/* La miniatura del programa lleva la frase de la lección escrita en el centro,
   y un círculo encima la tapaba. Con ratón, el botón aparece al acercarse; en
   una pantalla táctil no hay «acercarse» y se queda siempre a la vista. */
@media (hover: hover) {
  .tk-vt-play { opacity: 0; transition: opacity .15s ease, transform .15s ease; }
  .tk-vt-tapa:hover .tk-vt-play, .tk-vt-tapa:focus-visible .tk-vt-play { opacity: 1; }
}

/* Lo que va escrito encima de la imagen lleva fondo propio casi opaco: sobre
   una miniatura cualquiera no hay color de texto que se lea sin él. */
.tk-vt-durtapa, .tk-vt-reanudar {
  position: absolute; bottom: .625rem;
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4;
  padding: .125rem .5rem; border-radius: 6px;
}
.tk-vt-durtapa {
  right: .625rem;
  background: color-mix(in srgb, #000 78%, transparent);
  color: color-mix(in srgb, #fff 96%, transparent);
}
.tk-vt-reanudar { left: .625rem; background: var(--seccion); color: var(--sobre-seccion); }
.tk-vt-progreso {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: color-mix(in srgb, #000 45%, transparent);
}
.tk-vt-progreso i { display: block; height: 100%; background: var(--seccion); }

.tk-vt-tapa.bloqueada {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2);
  cursor: default; background: var(--papel-2); color: var(--tinta-2);
  font-size: var(--t-sm); font-weight: 600;
}
.tk-vt-tapa.bloqueada svg { width: 1.625rem; height: 1.625rem; margin: 0; }
.tk-vt-tapa.bloqueada .tk-icono + * { margin-left: 0; }

.tk-vt-cuerpo { display: grid; gap: var(--e-2); align-content: start; flex: 1; }
.tk-vt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.tk-vt-meta .chip { font-size: var(--t-xs); padding: .2rem .55rem; }
.tk-vt-dur { font-size: var(--t-xs); font-weight: 700; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* La voz sintética se declara SIEMPRE y a la vista, en el violeta de la
   academia: una etiqueta gris se lee como un detalle técnico que se puede
   saltar, y es justo lo que Google Play y App Store exigen que no lo sea. */
.tk-vt-ia {
  background: var(--premium-lavado); color: var(--premium-tinta);
  border-color: color-mix(in srgb, var(--premium) 35%, transparent);
  cursor: help;
}
.tk-vt-titulo { font-size: var(--t-md); line-height: 1.25; }
.tk-vt-desc { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.45; }
.tk-vt-pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  margin-top: auto; font-size: var(--t-xs); color: var(--tinta-3); min-height: 1.5rem;
}
.tk-vt-pie > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- el reproductor ---------- */
/* Sombra y velo aquí sí: es de lo poco que flota de verdad sobre la pantalla.
   El velo va en negro y no en `--tinta`, que de noche es casi blanca y
   convertiría la sala de cine en una niebla. */
.tk-vp {
  position: fixed; inset: 0; z-index: 85;
  display: grid; place-items: center; padding: var(--e-4);
  background: color-mix(in srgb, #000 64%, transparent);
  animation: tk-vp-entra .16s ease-out;
}
@keyframes tk-vp-entra { from { opacity: 0; } to { opacity: 1; } }
.tk-vp-caja {
  width: min(60rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto;
  display: grid; gap: var(--e-4);
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-xl);
  padding: var(--e-4) var(--e-5) var(--e-5);
  box-shadow: var(--sombra-alta);
}
.tk-vp-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.tk-vp-cab > div { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.tk-vp-cab b { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; line-height: 1.25; }
.tk-vp-cab .chip { flex: none; }
.tk-vp-marco { border-width: 0; }
.tk-vp-marco video { object-fit: contain; }

/* La frase que suena. Reserva su alto aunque esté vacía: si apareciera y
   desapareciera, empujaría la barra de abajo arriba y abajo en cada pausa. */
.tk-vp-ahora {
  min-height: 2.5rem; text-align: center;
  font-family: var(--display); font-size: var(--t-xl); font-weight: 600; line-height: 1.25;
  color: var(--tinta-3);
}
.tk-vp-ahora.activo { color: var(--seccion-tinta); }

.tk-vp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.tk-vp-barra:empty { display: none; }
.tk-vp-aviso {
  display: flex; align-items: flex-start; gap: var(--e-2);
  margin: 0; padding: var(--e-3) var(--e-4);
  background: var(--premium-lavado); color: var(--tinta);
  border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.45;
}
.tk-vp-aviso > svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .1rem; color: var(--premium-tinta); }
.tk-vp-trans { border-top: 1px solid var(--linea); }
.tk-vp-trans summary {
  min-height: 2.75rem; display: flex; align-items: center;
  cursor: pointer; font-weight: 700; font-size: var(--t-sm); color: var(--seccion-tinta);
}
.tk-vp-trans p { margin: 0; max-width: var(--medida); font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.6; }

@media (max-width: 30rem) {
  .tk-vp { place-items: end center; padding: 0; }
  .tk-vp-caja {
    border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
    padding: var(--e-3) var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom));
  }
  .tk-vp-marco { margin-inline: calc(-1 * var(--e-4)); border-radius: 0; }
}

/* ============================================================
   2. En vivo
   ============================================================ */

.tk-vivo-grupo > header .etiqueta { font-variant-numeric: tabular-nums; }
.tk-vivo-grupo.directo { border-color: color-mix(in srgb, var(--racha) 45%, transparent); }

.tk-vivo-grupo .vacio svg { width: 2rem; height: 2rem; color: var(--seccion-tinta); margin-bottom: var(--e-2); }
.tk-vivo-grupo .vacio .acciones { justify-content: center; margin-top: var(--e-4); }
.tk-vivo-grupo .vacio .acciones .btn { margin-top: 0; }

/* ---------- una clase ---------- */
.tk-vivo-clase {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--e-4); align-items: center;
  padding: var(--e-4);
}
.tk-vivo-clase + .tk-vivo-clase { border-top: 1px solid var(--linea-suave); }

.tk-vivo-fecha {
  display: grid; justify-items: center; align-content: center;
  padding: var(--e-2) 0; border-radius: var(--r-md);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tk-vivo-dia { font-family: var(--display); font-size: var(--t-2xl); font-weight: 600; }
.tk-vivo-mes { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tk-vivo-hora { margin-top: .25rem; font-size: var(--t-sm); font-weight: 700; color: var(--tinta); }

.tk-vivo-info { display: grid; gap: .375rem; min-width: 0; }
.tk-vivo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.tk-vivo-meta .chip { font-size: var(--t-xs); padding: .2rem .55rem; }
.tk-vivo-cuando { display: inline-block; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); }
.tk-vivo-cuando::first-letter { text-transform: uppercase; }
.tk-vivo-titulo { font-size: var(--t-lg); line-height: 1.25; }
.tk-vivo-desc { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5; max-width: var(--medida); }
.tk-vivo-clase.terminada .tk-vivo-titulo { color: var(--tinta-2); }

.tk-vivo-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); font-size: var(--t-sm); color: var(--tinta-2); }
.tk-vivo-pie > span { display: inline-flex; align-items: center; gap: .375rem; }
.tk-vivo-pie svg { width: 1rem; height: 1rem; color: var(--tinta-3); }
.tk-vivo-profe { font-weight: 600; color: var(--tinta); }
.tk-vivo-dato { font-variant-numeric: tabular-nums; }
.tk-vivo-aforo .barra-pista { width: 3rem; height: .375rem; }
.tk-vivo-aforo .barra-pista > i { background: var(--seccion-tinta); }
.tk-vivo-aforo.lleno { color: var(--racha-tinta); font-weight: 700; }
.tk-vivo-aforo.lleno svg { color: currentColor; }
.tk-vivo-aforo.lleno .barra-pista > i { background: var(--racha-tinta); }

/* El punto de «En directo» late: es lo único de la pantalla que está pasando
   ahora. Quien pide menos movimiento lo ve quieto, y la palabra dice igual. */
.tk-vivo-punto::before { animation: tk-vivo-latido 1.6s ease-in-out infinite; }
@keyframes tk-vivo-latido { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tk-vivo-punto::before { animation: none; } }

.tk-vivo-accion { display: grid; justify-items: end; gap: var(--e-2); max-width: 16rem; text-align: right; }
/* El icono va dentro del renglón y no en una caja flexible al lado: con la
   columna alineada a la derecha y una nota de dos líneas («Esta clase es para
   suscriptores de Academia»), el candado se quedaba suelto a media altura y
   lejos de la frase. */
.tk-vivo-nota {
  display: block; margin: 0;
  font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.4;
}
.tk-vivo-nota svg { display: inline-block; width: 1rem; height: 1rem; margin-right: .375rem; vertical-align: -.1875rem; color: var(--tinta-3); }
/* «Cancelar la clase», que solo ve quien la programó. En texto y no con
   relleno: lo principal de la fila sigue siendo entrar. Con la tinta de
   racha porque borra, y con sus 44 px porque va sola en su renglón y no
   dentro de una frase. */
.tk-vivo-cancelar {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.75rem; font-size: var(--t-sm); color: var(--racha-tinta);
  /* `.btn-texto` nace para enlaces y solo declara el filo de abajo: en un
     <button> quedaban los otros tres del navegador, en negro. */
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.tk-vivo-cancelar:hover { background: var(--racha-lavado); }
.tk-vivo-cancelar svg { width: 1rem; height: 1rem; }
.tk-vivo-cancelar > .tk-icono + * { margin-left: 0; }

@media (max-width: 40rem) {
  .tk-vivo-clase { grid-template-columns: 3.75rem minmax(0, 1fr); align-items: start; padding: var(--e-4) var(--e-3); }
  .tk-vivo-dia { font-size: var(--t-xl); }
  .tk-vivo-accion { grid-column: 2 / -1; justify-items: start; text-align: left; max-width: none; }
}

/* ---------- la sala ---------- */
.tk-vivo-sala { overflow: hidden; }
.tk-vivo-sala .tk-vivo-cabecera { align-items: center; flex-wrap: nowrap; }
.tk-vivo-sala .tk-vivo-cabecera > div { min-width: 0; }
.tk-vivo-sala .tk-vivo-cabecera h2 {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.015em;
  margin: .375rem 0 .125rem;
}
.tk-vivo-sala .tk-vivo-cabecera p { width: auto; }
.tk-vivo-sala .tk-vivo-cabecera .btn { flex: none; }
@media (max-width: 30rem) {
  .tk-vivo-sala .tk-vivo-cabecera { flex-wrap: wrap; }
}

.tk-vivo-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.tk-vivo-cuerpo.con-chat { grid-template-columns: minmax(0, 1fr) 20rem; }
@media (max-width: 56rem) { .tk-vivo-cuerpo.con-chat { grid-template-columns: minmax(0, 1fr); } }

.tk-vivo-video { display: grid; min-height: 22rem; background: var(--papel-2); }
.tk-vivo-marco { display: block; width: 100%; height: 100%; min-height: 26rem; border: 0; }
@media (max-width: 40rem) {
  .tk-vivo-video { min-height: 0; }
  .tk-vivo-marco { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
}

.tk-vivo-aviso, .tk-vivo-fuera {
  display: grid; justify-items: center; align-content: center; gap: var(--e-3);
  padding: var(--e-6) var(--e-5); text-align: center;
}
.tk-vivo-aviso svg, .tk-vivo-fuera svg { width: 2rem; height: 2rem; color: var(--seccion-tinta); }
.tk-vivo-aviso strong, .tk-vivo-fuera strong { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; line-height: 1.25; max-width: 30rem; }
.tk-vivo-aviso span, .tk-vivo-fuera span { font-size: var(--t-sm); color: var(--tinta-2); max-width: 30rem; line-height: 1.55; }
.tk-vivo-fuera small { font-size: var(--t-xs); color: var(--tinta-3); }
.tk-vivo-fuera .btn { margin-top: var(--e-2); }

/* ---------- el chat ---------- */
.tk-vivo-chat {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 22rem; max-height: 32rem;
  border-left: 1px solid var(--linea);
}
@media (max-width: 56rem) {
  .tk-vivo-chat { border-left: 0; border-top: 1px solid var(--linea); max-height: 24rem; min-height: 16rem; }
}
.tk-vivo-chat-tit {
  margin: 0; padding: var(--e-3) var(--e-4);
  font-family: var(--texto); font-size: var(--p-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3); border-bottom: 1px solid var(--linea-suave);
}
.tk-vivo-chat-hilo { overflow-y: auto; padding: var(--e-3) var(--e-4); display: grid; gap: var(--e-3); align-content: start; }
.tk-vivo-msg { display: grid; gap: 2px; font-size: var(--t-sm); }
.tk-vivo-msg b { font-size: var(--t-xs); font-weight: 700; color: var(--tinta-2); }
.tk-vivo-msg b span {
  margin-left: .25rem; padding: 0 .375rem; border-radius: var(--r-full);
  background: var(--seccion-lavado); color: var(--seccion-tinta); font-weight: 700;
}
.tk-vivo-msg p { margin: 0; line-height: 1.5; color: var(--tinta); overflow-wrap: anywhere; }
.tk-vivo-msg time { font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tk-vivo-msg.propio p { color: var(--marca-tinta); }
/* Lo que dice el profesor se distingue por el fondo, no por una raya de
   color a un lado. */
.tk-vivo-msg.profe { background: var(--seccion-lavado); border-radius: var(--r-sm); padding: .375rem .5rem; }
.tk-vivo-chat-vacio { margin: 0; font-size: var(--t-sm); color: var(--tinta-3); }
.tk-vivo-aviso-chat { margin: 0; font-size: var(--t-xs); font-weight: 600; color: var(--racha-tinta); }

.tk-vivo-chat-form { display: flex; gap: var(--e-2); padding: var(--e-3); border-top: 1px solid var(--linea-suave); }
.tk-vivo-chat-form input { flex: 1; min-width: 0; }
.tk-vivo-chat-form .btn { min-height: 2.75rem; padding: 0 1rem; }

.tk-vivo-error p { margin-top: var(--e-1); font-size: var(--p-sm); }
.tk-vivo-error-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.tk-vivo-error-acciones .btn-panel { margin-top: 0; min-height: 2.75rem; }