/* ============================================================
   AKDMY · Aula Virtual
   Paleta y tipografía heredadas del sitio: #5857D5 violeta de
   marca, #ff00be magenta, #FFC000 ámbar, #0C0C1D fondo profundo.
   Todo el sitio se compone en Inter, así que el módulo también.
   ============================================================ */

@import url("fuentes/fuentes.css");

:root {
  --violeta:     #5857d5;
  --violeta-alt: #7d7cff;
  --magenta:     #ff00be;
  --ambar:       #ffc000;
  --tinta:       #0c0c1d;
  --gris:        #64647a;
  --linea:       rgba(12, 12, 29, .11);
  --papel:       #f6f6fb;
  --tipo: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sombra: 0 18px 40px -22px rgba(12, 12, 29, .42);
  --cab-alto: 103px;

  /* --- neón, heredado del rediseño de AKDMY --- */
  --magenta-alt: #ff4fd8;
  --azul-hondo:  #1f3bb3;
  --cristal:     rgba(255, 255, 255, .045);
  --cristal-borde: rgba(255, 255, 255, .12);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cab-alto) + 16px);
}

body {
  margin: 0;
  background: #fff;
  color: var(--tinta);
  font-family: var(--tipo);
  font-size: 18px;
  line-height: 1.56;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--tipo);
  font-weight: 500;
  line-height: 1.11;
  letter-spacing: -.02em;
  margin: 0;
}

.shell { width: min(1184px, 92vw); margin-inline: auto; }

/* ============================================================
   Cabecera — misma rejilla que la de index.html (tres columnas,
   logotipo centrado, 24px arriba y abajo), pero SUPERPUESTA a la
   portada, que es como se comporta en index: el hero lleva
   "combineWithHeader" y la barra va encima, sin fondo propio.

   Esto además resuelve un problema real: el logotipo de AKDMY es
   blanco (87% de sus píxeles opacos lo son) sobre transparencia,
   así que sobre una barra blanca desaparece. Aquí flota sobre la
   portada oscura y, al bajar, la barra se vuelve cristal oscuro
   en vez de blanca, de modo que el logotipo se lee siempre.
   ============================================================ */

.cab {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: transparent;
  color: #fff;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.cab[data-fijada] {
  background: rgba(9, 9, 20, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -30px #000;
}

.cab__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: 24px 48px;
}

/* Sin salto de línea: index mide 103px de alto (24 + logo 55 + 24) y si el
   menú se parte en dos filas la cabecera crece y deja de coincidir. */
/* Mismo efecto que el menú del rediseño: píldora de cristal al pasar por
   encima y un subrayado en degradado que crece de izquierda a derecha. */
.cab__nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; min-width: 0; }
.cab__nav a {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
  padding: 11px 15px;
  border-radius: 99px;
  transition: color .25s, background-color .25s;
}
.cab__nav a::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, var(--violeta-alt), var(--magenta-alt));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.cab__nav a:hover { color: #fff; background-color: rgba(255, 255, 255, .06); }
.cab__nav a:hover::after { transform: scaleX(1); }
.cab__nav a[aria-current] { color: #fff; font-weight: 500; }
.cab__nav a[aria-current]::after { transform: scaleX(1); }
.cab__nav--movil { display: none; }

@media (prefers-reduced-motion: reduce) { .cab__nav a::after { transition: none; } }

.cab__logo { justify-self: center; }
.cab__logo img { width: 176px; height: 55px; object-fit: contain; }

.cab__fin { justify-self: end; display: flex; align-items: center; gap: 20px; }

/* Mismos iconos sociales que el resto del sitio. */
.cab__redes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cab__redes a {
  display: block;
  color: rgba(255, 255, 255, .78);
  transition: color .2s, transform .2s;
}
.cab__redes a:hover { color: #fff; transform: translateY(-1px); }
.cab__redes svg { width: 26px; height: 26px; display: block; }

/* Píldora redondeada. */
.cab__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.cab__cta:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .06);
  transform: translateY(-1px);
}

.cab__burger { display: none; justify-self: end; padding: 8px; border-radius: 8px; }
.cab__burger svg { width: 26px; height: 26px; display: block; }
.cab__burger:hover { background: rgba(255, 255, 255, .12); }

/* Por debajo de 1300px el menú de cinco entradas ya no cabe junto al
   logotipo centrado, así que se pasa al botón de hamburguesa. */
@media (max-width: 1300px) {
  :root { --cab-alto: 87px; }
  .cab__in { grid-template-columns: auto 1fr; gap: 16px; padding: 16px 5vw; }
  .cab__logo { justify-self: start; order: -1; }
  .cab__logo img { width: 140px; height: 44px; }
  .cab__fin { display: none; }
  .cab__burger { display: block; }
  .cab__nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(9, 9, 20, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 24px 40px -26px #000;
    padding: 8px 5vw 20px;
    display: none;
  }
  .cab__nav[data-abierto] { display: flex; }
  .cab__nav a { padding: 14px 0; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .cab__nav a:hover { background-color: transparent; }
  /* En la lista desplegable el subrayado sobra: ya hay separadores. */
  .cab__nav a::after { display: none; }
  .cab__nav a[aria-current] { border-bottom-color: var(--magenta-alt); }
  .cab__nav--movil { display: block; }
}

/* ------------------------------------------ barra de desplazamiento
   La misma del rediseño: riel oscuro y pulgar en degradado. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #07070f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--violeta), #d203ab);
  border-radius: 99px;
  border: 3px solid #07070f;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--violeta-alt), var(--magenta-alt));
}
::-webkit-scrollbar-corner { background: #07070f; }

/* ============================================================
   Portada
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #05050c;
  color: #fff;
  /* La cabecera va fija encima, así que la portada reserva su alto. */
  padding: calc(var(--cab-alto) + clamp(2.6rem, 5vw, 4.4rem)) 0 clamp(3.6rem, 8vw, 6rem);
}

/* ------------------------------------------- fondo animado
   Auroras que derivan, malla de rejilla y grano de película.
   Todo decorativo y sin eventos de ratón: el contenido va por
   encima en su propia capa. */

.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.aurora {
  position: absolute;
  width: 62vw; height: 62vw;
  min-width: 420px; min-height: 420px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .5;
  will-change: transform;
}
.aurora.a {
  background: radial-gradient(circle, var(--violeta), transparent 62%);
  top: -28%; left: -12%;
  animation: deriva1 22s ease-in-out infinite;
}
.aurora.b {
  background: radial-gradient(circle, var(--magenta), transparent 62%);
  top: 18%; right: -18%;
  animation: deriva2 27s ease-in-out infinite;
}
.aurora.c {
  background: radial-gradient(circle, var(--azul-hondo), transparent 62%);
  bottom: -34%; left: 26%;
  animation: deriva3 31s ease-in-out infinite;
}

@keyframes deriva1 { 0%,100% { transform: translate3d(0,0,0) scale(1); }   50% { transform: translate3d(14%, 12%, 0) scale(1.18); } }
@keyframes deriva2 { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-16%, -10%, 0) scale(.92); } }
@keyframes deriva3 { 0%,100% { transform: translate3d(0,0,0) scale(1); }   50% { transform: translate3d(10%, -14%, 0) scale(1.22); } }

.grid-mesh {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, #000 35%, transparent 78%);
}

.grain {
  position: absolute; inset: -200%;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 7s steps(6) infinite;
}
@keyframes grano {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 4%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -4%); }
  80% { transform: translate(4%, 2%); }
}

#constelacion {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .5;
}

#foco {
  position: absolute;
  z-index: 1;
  top: 0; left: 0;
  width: 620px; height: 620px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(125,124,255,.15), transparent 62%);
  transition: opacity .4s;
  opacity: 0;
  will-change: transform;
}

/* Dos columnas: el argumento a la izquierda, la puerta de entrada
   a la derecha. En cuanto no caben cómodas se apilan, y entonces el
   cuadro de acceso va primero: quien llega desde el móvil casi
   siempre viene a entrar, no a leer. */
.hero__in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1180px;
}

.hero__texto { min-width: 0; }

@media (max-width: 980px) {
  .hero__in { grid-template-columns: 1fr; gap: 2.4rem; max-width: 620px; }
  .hero__acceso { order: -1; }
}

/* --------------------------------------- entrada escalonada
   El ocultado depende de [data-anima], que lo pone efectos.js nada
   más arrancar. Si ese archivo no carga o falla, el atributo nunca
   aparece y la portada se ve sin más: nunca puede quedarse en
   blanco por culpa de una animación. */
html.js .hero[data-anima] [data-rise] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
html.js .hero[data-anima] [data-rise].visto { opacity: 1; transform: none; }

/* ------------------------------------------------- eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 1.2rem;
  padding: 7px 17px 7px 13px;
  border-radius: 99px;
  background: var(--cristal);
  border: 1px solid var(--cristal-borde);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.eyebrow__punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--magenta-alt);
  box-shadow: 0 0 12px var(--magenta-alt);
  animation: latir 2s infinite;
}
@keyframes latir { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

/* ---------------------------------------------- titular neón */
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); font-weight: 500; }

.grad {
  font-style: normal;
  background: linear-gradient(105deg, #fff 8%, var(--violeta-alt) 42%, var(--magenta-alt) 72%, var(--ambar));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brillo 7s linear infinite;
}
@keyframes brillo { to { background-position: 220% center; } }

.neon { text-shadow: 0 0 26px rgba(125,124,255,.55), 0 0 68px rgba(210,3,171,.35); }

@media (prefers-reduced-motion: reduce) {
  .aurora, .grain, .grad, .eyebrow__punto { animation: none; }
}

/* Texto de portada con el icono multiplataforma al lado */
.hero__linea {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 1.5rem 0 0;
  max-width: 68ch;
}
.hero__linea p { margin: 0; font-size: clamp(1rem, 1.5vw, 1.16rem); color: rgba(255, 255, 255, .8); }

.dispositivos {
  flex: none;
  width: 78px;
  height: 52px;
  color: var(--violeta-alt);
}
.dispositivos svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 640px) {
  .hero__linea { flex-direction: column; align-items: flex-start; gap: .9rem; }
}

.hero__datos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem 1rem;
  border-radius: 999px;
  font-size: .88rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .9);
}
.pastilla svg { width: 16px; height: 16px; flex: none; opacity: .9; }

/* ============================================================
   Secciones
   ============================================================ */

.seccion { padding: clamp(3rem, 6vw, 4.8rem) 0; }
.seccion__cab { margin-bottom: 2.4rem; max-width: 68ch; }
.seccion__cab h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 500; }
.seccion__cab p { margin: .8rem 0 0; color: var(--gris); }
.seccion__cab .destacado { color: var(--tinta); font-weight: 500; }

.zona-horaria {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(88, 87, 213, .09);
  color: var(--violeta);
  font-size: .82rem;
  font-weight: 500;
}
.zona-horaria svg { width: 14px; height: 14px; }

/* ---------------------------------------------------- grupos */
.grupo { margin-bottom: 2.8rem; }
.grupo:last-child { margin-bottom: 0; }
.grupo__tit {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  padding-bottom: .7rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--linea);
}
.grupo__tit::before {
  content: "";
  width: 5px;
  height: 22px;
  border-radius: 99px;
  background: linear-gradient(var(--violeta), var(--magenta));
  flex: none;
}
.grupo__n {
  margin-left: auto;
  font-size: .8rem;
  font-weight: 400;
  color: var(--gris);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.15rem;
}

/* ---------------------------------------------------- fichas */
.ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 1.35rem;
  box-shadow: var(--sombra);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .25s;
}
.ficha:hover { transform: translateY(-3px); border-color: rgba(88, 87, 213, .45); }
.ficha[data-estado="vivo"] {
  border-color: rgba(255, 0, 190, .55);
  box-shadow: 0 0 0 3px rgba(255, 0, 190, .10), var(--sombra);
}

.ficha__top { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .85rem; }
.ficha__nivel {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violeta);
  background: rgba(88, 87, 213, .10);
  padding: .32rem .6rem;
  border-radius: 6px;
}

.insignia {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .34rem .68rem;
  border-radius: 999px;
  white-space: nowrap;
}
.insignia--vivo       { background: var(--magenta); color: #fff; }
.insignia--pronto     { background: rgba(255, 192, 0, .2); color: #7d5c00; }
.insignia--programada { background: rgba(12, 12, 29, .06); color: var(--gris); }

.punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.insignia--vivo .punto { background: #fff; animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.ficha h4 { font-size: 1.22rem; font-weight: 600; }
.ficha__desc { margin: .45rem 0 0; font-size: .92rem; color: var(--gris); line-height: 1.5; }

.ficha__meta {
  margin: 1.05rem 0 1.2rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--linea);
  display: grid;
  gap: .45rem;
  font-size: .9rem;
}
.ficha__meta div { display: flex; align-items: center; gap: .55rem; color: var(--gris); }
.ficha__meta svg { width: 16px; height: 16px; flex: none; opacity: .55; }
.ficha__meta b { color: var(--tinta); font-weight: 600; }

.ficha__pie { margin-top: auto; }
.cuenta {
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  color: var(--gris);
  margin: 0 0 .7rem;
  min-height: 1.35em;
}
.cuenta b { color: var(--tinta); font-weight: 600; }

/* --------------------------------------------------- botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .82rem 1.2rem;
  border-radius: 10px;
  font-weight: 500;
  font-size: .96rem;
  transition: filter .2s, background-color .2s, color .2s;
}
.btn svg { width: 17px; height: 17px; }
.btn--primario { background: var(--violeta); color: #fff; }
.btn--primario:hover { filter: brightness(1.12); }
.btn--vivo {
  background: linear-gradient(92deg, var(--magenta), var(--violeta));
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(255, 0, 190, .8);
}
.btn--vivo:hover { filter: brightness(1.1); }
.btn--apagado { background: rgba(12, 12, 29, .05); color: var(--gris); cursor: not-allowed; }
.btn--auto { width: auto; }

.btn--crear {
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(92deg, var(--violeta), var(--magenta));
  box-shadow: 0 16px 34px -16px rgba(88, 87, 213, .9);
}
.btn--crear:hover { filter: brightness(1.1); }

.crear-sala {
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}
.crear-sala p { margin: 0; font-size: .93rem; color: var(--gris); max-width: 46ch; }

/* ------------------------------------------------------- pie */
/* Mismo pie que index: logotipo y copyright en una fila centrada, y
   debajo los enlaces junto a los iconos sociales. 80px arriba y abajo,
   48px entre las dos filas, todo centrado. */
.pie {
  background: var(--tinta);
  color: rgba(255, 255, 255, .72);
  padding: 80px 0;
  font-size: 16px;
}
.pie__in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  text-align: center;
}

.pie__marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
/* El logotipo ya es blanco con un acento magenta y el pie es oscuro:
   no necesita filtro, y ponerlo le quitaría el magenta de la marca. */
.pie__marca img { width: 176px; height: 55px; object-fit: contain; }

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.pie__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.pie__nav a { padding: 2px 0; transition: color .2s; }
.pie a:hover { color: #fff; }

.pie__redes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie__redes a { display: block; color: rgba(255, 255, 255, .72); transition: color .2s, transform .2s; }
.pie__redes a:hover { color: #fff; transform: translateY(-1px); }
.pie__redes svg { width: 32px; height: 32px; display: block; }

@media (max-width: 640px) {
  .pie { padding: 56px 0; }
  .pie__in { gap: 34px; }
  .pie__marca img { width: 150px; height: 47px; }
}

/* ============================================================
   Aula
   ============================================================ */

.aula {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  flex-direction: column;
  background: var(--tinta);
}
.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);
  color: #fff;
  flex: none;
}
.aula__acciones { margin-left: auto; display: flex; gap: .5rem; }
.aula__btn {
  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); }
.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); text-decoration: underline; }

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

/* ============================================================
   Modal
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(7, 7, 15, .72);
  backdrop-filter: blur(6px);
}
.modal[data-abierto] { display: flex; }
.modal__caja {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 1.9rem;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.modal__caja h2 { font-size: 1.42rem; font-weight: 600; }
.modal__caja > p { margin: .6rem 0 1.35rem; color: var(--gris); font-size: .94rem; }
.modal__caja label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .45rem;
}
.modal__caja input {
  width: 100%;
  padding: .82rem .95rem;
  border: 1px solid rgba(12, 12, 29, .18);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: #fff;
}
.modal__caja input:focus {
  outline: none;
  border-color: var(--violeta);
  box-shadow: 0 0 0 3px rgba(88, 87, 213, .16);
}
.modal__aviso { margin: .7rem 0 0; font-size: .84rem; color: #c02640; min-height: 1.25em; }
.modal__acciones { display: flex; gap: .6rem; margin-top: 1.4rem; }
.modal__acciones .btn { flex: 1; }
.btn--linea { border: 2px solid var(--violeta); color: var(--violeta); background: transparent; }
.btn--linea:hover { background: var(--violeta); color: #fff; }

/* ------------------------------------------------------ vacío */
.vacio {
  border: 1px dashed rgba(12, 12, 29, .2);
  border-radius: 16px;
  padding: 2.6rem 1.5rem;
  text-align: center;
  color: var(--gris);
}
.vacio h3 { color: var(--tinta); font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
.vacio code {
  background: rgba(12, 12, 29, .06);
  padding: .1rem .4rem;
  border-radius: 5px;
  font-size: .9em;
}

/* --- modal de inicio de sesión ------------------------------
   Reaprovecha .modal__caja. Solo añade lo que el de nombre no
   necesitaba: dos campos seguidos y un pie con los enlaces de
   registro y recuperación. */
.modal__caja form { margin: 0; }
.modal__caja input + label { margin-top: 1rem; }

.modal__pie {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(12, 12, 29, .1);
  font-size: .84rem;
  color: var(--gris);
  text-align: center;
}
.modal__pie a { color: var(--violeta); font-weight: 600; text-decoration: none; }
.modal__pie a:hover { text-decoration: underline; }

/* Mientras comprueba la contraseña. El botón no se deshabilita a
   secas: deshabilitado y girando son cosas distintas, y un botón
   apagado sin más parece roto. */
.btn[data-cargando] { cursor: progress; opacity: .75; }

/* ============================================================
   Tarjeta de acceso de la portada

   Cristal oscuro sobre el fondo animado, para que se lea como
   parte de la portada y no como un formulario pegado encima.
   ============================================================ */

.hero__acceso { min-width: 0; }

.acceso {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: 24px;
  background: rgba(12, 12, 29, .62);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .95),
              inset 0 1px 0 rgba(255, 255, 255, .09);
  color: #fff;
}

.acceso h2 { margin: 0; font-size: 1.32rem; font-weight: 600; letter-spacing: -.01em; }
.acceso__sub {
  margin: .45rem 0 1.5rem;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}

.acceso label {
  display: block;
  margin-bottom: .45rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.acceso input {
  width: 100%;
  padding: .82rem .95rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.acceso input::placeholder { color: rgba(255, 255, 255, .3); }
.acceso input:focus {
  outline: none;
  border-color: var(--violeta);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 3px rgba(88, 87, 213, .28);
}
.acceso input + label { margin-top: 1rem; }

.acceso__aviso {
  margin: .8rem 0 0;
  min-height: 1.2em;
  font-size: .83rem;
  line-height: 1.45;
  color: #ff9aa8;
}

.btn--bloque { width: 100%; justify-content: center; margin-top: 1.1rem; }

.acceso__pie {
  display: flex;
  gap: .55rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem;
  color: rgba(255, 255, 255, .4);
}
.acceso__pie a { color: #b9b8ff; font-weight: 600; text-decoration: none; }
.acceso__pie a:hover { color: #fff; text-decoration: underline; }

#acceso-quien { color: rgba(255, 255, 255, .78); }