/* ============================================================
   AKDMY · la sala del aula virtual

   La capa a pantalla completa donde va la videollamada: su barra,
   el marco de Jitsi, la placa con el logotipo y el velo de carga.

   Vivía dentro de aula.css, que es la hoja de la portada del
   login. La sala se abre también dentro de los paneles de
   profesor y alumno, que no cargan esa hoja: por eso va aparte, y
   la cargan los tres. Una sola copia.

   Para no depender de la portada, las variables de color llevan
   de reserva el mismo valor que define aula.css —en el login
   mandan las de allí—, los botones llevan su propio reinicio y el
   punto de «En vivo» su propia regla.
   ============================================================ */

.aula {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  flex-direction: column;
  background: var(--tinta, #0c0c1d);
}
.aula[data-abierta] { display: flex; }
body[data-aula-abierta] { overflow: hidden; }

.aula__barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem clamp(.9rem, 3vw, 1.6rem);
  background: #07070f;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: #fff;
  flex: none;
}
.aula__id { min-width: 0; }
.aula__id strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aula__id span { font-size: .8rem; color: rgba(255, 255, 255, .5); }

.aula__estado {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .32rem .7rem;
  border-radius: 999px;
  background: var(--magenta, #ff00be);
  color: #fff;
  flex: none;
}
/* El punto de «En vivo». En la portada también lo pinta la regla
   general .punto de aula.css; aquí va con nombre propio para que
   la sala no dependa de ella en los paneles. */
.aula__estado .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.aula__acciones { margin-left: auto; display: flex; gap: .5rem; }
.aula__btn {
  /* El reinicio de botones de la portada no existe en los paneles:
     la sala lleva el suyo. Va PRIMERO a propósito: «font» es un
     atajo que devuelve el tamaño y el grosor a los heredados, y
     puesto detrás de font-size y font-weight los anularía. */
  font: inherit;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .52rem .9rem;
  border-radius: 8px;
  font-size: .87rem;
  font-weight: 500;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  white-space: nowrap;
  transition: background-color .2s;
}
.aula__btn:hover { background: rgba(255, 255, 255, .2); }
.aula__btn--salir { background: #d8324a; }
.aula__btn--salir:hover { background: #ef3d56; }
.aula__btn svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 780px) {
  .aula__btn span { display: none; }
  .aula__btn { padding: .55rem .7rem; }
  .aula__estado { display: none; }
}

.aula__marco { position: relative; flex: 1; min-height: 0; background: var(--tinta, #0c0c1d); }
.aula__marco iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------- logotipo de AKDMY
   En meet.jit.si las banderas SHOW_JITSI_WATERMARK y compañía se
   ignoran: el servidor es de 8x8 y mantiene su marca. Como el
   aula va dentro de un iframe de otro dominio, no se puede entrar
   a quitarla; lo que sí se puede es cubrirla desde esta página.

   La marca de Jitsi es un enlace de 71x32 anclado en (32, 32),
   igual en escritorio y en móvil, así que esta placa la tapa por
   completo con margen de sobra. Al llevar fondo propio, no queda
   como un parche sino como la marca de AKDMY en la sala.

   Cuando AKDMY monte su propio servidor esto sobra: allí las
   banderas sí funcionan y el logotipo se cambia en el archivo
   watermark.svg de la instalación. Por eso solo se muestra
   cuando el aula corre sobre el servidor público. */
.aula__marca {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: none;
  align-items: center;
  height: 48px;
  padding: 0 15px;
  border-radius: 12px;
  background: rgba(9, 9, 20, .82);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px #000;
}
.aula[data-abierta] .aula__marca[data-visible] { display: flex; }
.aula__marca i {
  display: block;
  width: 86px;
  height: 27px;
  background: url("logo-akdmy.png") center / contain no-repeat;
}

/* El velo de carga va por encima de la placa: mientras conecta,
   la pantalla se ve limpia. */
.aula__cargando { z-index: 3; }

.aula__cargando {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  color: rgba(255, 255, 255, .75);
  padding: 2rem;
}
.aula__cargando[hidden] { display: none; }
.aula__cargando p { margin: 0; font-size: .95rem; }
.aula__cargando small { color: rgba(255, 255, 255, .45); font-size: .84rem; max-width: 46ch; }
.aula__cargando a { color: var(--violeta-alt, #7d7cff); text-decoration: underline; }

.giro {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .16);
  border-top-color: var(--magenta, #ff00be);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------ la tarjeta que crece

   La animación la hace el navegador (View Transitions): la tarjeta del
   curso y la sala comparten el nombre «ak-aula», y el navegador
   interpola tamaño y posición entre las dos. Aquí solo se le dan el
   tiempo, la curva y el recorte; y se acorta el fundido del resto de la
   página para que no compita con el gesto. */
::view-transition-group(ak-aula) {
  animation-duration: .46s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* La tarjeta y la sala no tienen la misma proporción: las dos fotos se
   ajustan a la caja que anima, sin franjas, y el borde conserva la
   curva de la tarjeta mientras dura. */
::view-transition-image-pair(ak-aula) { overflow: hidden; border-radius: 20px; }
::view-transition-old(ak-aula),
::view-transition-new(ak-aula) { height: 100%; object-fit: cover; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------ aula minimizada

   La sala en una ventanita abajo a la derecha, para usar el panel sin
   salir de la clase. Solo cambia la caja: el iframe de Jitsi sigue en su
   sitio, así que la llamada no se recarga.

   El botón solo existe cuando la sala la abrió un panel (data-con-mini):
   en la página del aula no hay nada debajo que usar. */
#aula-mini { display: none; }
.aula[data-con-mini] #aula-mini { display: inline-flex; }

.aula[data-mini] {
  inset: auto 20px 20px auto;
  width: min(400px, calc(100vw - 40px));
  height: min(270px, calc(100vh - 40px));
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .85);
}
.aula[data-mini] .aula__barra { gap: .5rem; padding: .45rem .6rem; }
.aula[data-mini] .aula__id strong { font-size: .86rem; }
.aula[data-mini] .aula__btn { padding: .42rem .62rem; font-size: .8rem; }

/* Lo que no cabe en la ventanita: se recupera al ampliar. */
.aula[data-mini] .aula__estado,
.aula[data-mini] .aula__id span,
.aula[data-mini] #aula-copiar,
.aula[data-mini] #aula-pantalla { display: none; }

/* Con la sala minimizada la página vuelve a desplazarse. */
body[data-aula-abierta][data-aula-mini] { overflow: auto; }

@media (max-width: 520px) {
  .aula[data-mini] {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    height: 230px;
  }
}