/* ============================================================
   Academia — lo propio del editor de contenido.
   Todo lo demás sale de styles.css (mismo sistema que el admin).
   ============================================================ */

/* — Entrada — */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(380px, 100%); }
.login-card h1 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 4px; }
.login-card .sub { color: var(--on-surface-variant); font-size: .9rem; margin-bottom: 18px; }

/* — Barra superior — */
.aula-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--outline-variant); position: sticky; top: 0; z-index: 10;
}
.aula-top .marca { font-family: var(--font-display); font-weight: 800; color: var(--primary); }
.aula-top .quien { font-size: .82rem; color: var(--on-surface-variant); }
.aula-main { max-width: 820px; margin: 0 auto; padding: 18px 16px 60px; }

/* — Módulos y clases — */
.modulo { margin-bottom: 14px; }
.modulo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modulo-head h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; }
.modulo.solo-lectura { opacity: .72; }

.clase-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 2px;
  border-bottom: 1px solid var(--surface-container-high);
}
.clase-row:last-child { border-bottom: 0; }
.clase-row .t { flex: 1; min-width: 0; }
.clase-row .t b { display: block; font-weight: 600; }
.clase-row .t small { color: var(--on-surface-variant); }
.clase-row .acciones { display: flex; gap: 6px; flex: none; }

/* — Estado de publicación: que se lea de un vistazo — */
.estado { font-size: .72rem; padding: 3px 9px; border-radius: var(--r-full); font-weight: 600; flex: none; }
.estado.borrador { background: var(--warning-container); color: var(--on-warning-container); }
.estado.publicada { background: var(--success-container); color: var(--on-success-container); }

/* — Vista previa del video — */
.video-prev { aspect-ratio: 16/9; width: 100%; border: 0; border-radius: var(--r-md); background: var(--surface-container); }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; }
.campo .ayuda { font-size: .76rem; color: var(--on-surface-variant); margin-top: 4px; }
.fila { display: flex; gap: 10px; }
.fila > * { flex: 1; }

@media (max-width: 520px) {
  .fila { flex-direction: column; }
  /* En el teléfono el título va solo en su renglón: si comparte fila con el
     estado y los botones, termina partido en tres líneas y no se lee. */
  .clase-row { flex-wrap: wrap; row-gap: 8px; }
  .clase-row .t { flex: 1 0 100%; }
  .clase-row .estado { order: 2; }
  .clase-row .acciones { order: 3; margin-left: auto; }
}

/* Flecha de "entrar" en una fila de lista */
.rot180 { transform: rotate(180deg); color: var(--outline); }