/* Campus FOCUS · lo propio del campus real (el resto es copia de campus/css/ del prototipo) */

/* Mientras carga, antes de pintar la primera pantalla */
.arrancando { min-height: 100vh; display: grid; place-items: center; color: var(--text-3); font-size: 14.5px; }

/* El reproductor de VdoCipher va en un iframe */
.reproductor iframe { width: 100%; height: 100%; border: 0; display: block; }
.reproductor__estado { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 16px; text-align: center; color: var(--text-2); font-size: 14.5px; }
.reproductor__estado .btn { justify-self: center; margin-top: 4px; }

/* Modo cine (Joan, 31/10): sin pantalla completa, el vídeo se amplía dentro de la página y la marca de agua sigue encima */
.cine { position: relative; min-width: 0; }
.cine__barra { display: flex; justify-content: flex-end; margin-top: -6px; }
.cine__salir { display: none; }
html.con-cine, html.con-cine body { overflow: hidden; }
html.con-cine .tostadas { z-index: 50; }

@media (max-width: 899.98px) {
  .leccion__cuerpo--cine .cine { position: fixed; inset: 0; z-index: 40; background: #000; }
  .leccion__cuerpo--cine .reproductor {
    position: absolute; top: 50%; left: 50%; translate: -50% -50%;
    width: min(100dvw, calc(100dvh * 16 / 9)); border: 0; border-radius: 0;
  }
  .leccion__cuerpo--cine .cine__salir {
    position: absolute; z-index: 1; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
    background: rgba(0, 0, 0, .65); color: #fff; font-size: 14px; font-weight: 700;
  }
  .leccion__cuerpo--cine .cine__salir[hidden] { display: none; }
  .leccion__cuerpo--cine .cine__barra { display: none; }
}

/* En vertical se gira para que llene el móvil, sin tener que girarlo si tiene bloqueada la rotación */
@media (max-width: 899.98px) and (orientation: portrait) {
  .leccion__cuerpo--cine .reproductor { width: min(100dvh, calc(100dvw * 16 / 9)); rotate: 90deg; }
  .leccion__cuerpo--cine .cine__salir {
    top: auto; right: 0; bottom: max(44px, calc(env(safe-area-inset-bottom) + 34px)); rotate: 90deg;
  }
}

@media (min-width: 900px) {
  html.con-cine, html.con-cine body { overflow: visible; }
  /* Lo que dé la ventana, sin el ancho máximo de la página: crece y encoge con ella y el vídeo siempre se ve entero */
  html.con-cine .main { max-width: none; }
  html.con-cine .pagina.leccion { width: min(100%, calc((100dvh - 124px) * 16 / 9)); margin-inline: auto; }
  .leccion__cuerpo--cine { grid-template-columns: minmax(0, 1fr); }
}

/* Portada: en el móvil, los borradores de Joan van justo después de la lección por la que sigue */
.borradores { order: 1; }