/* ============================================================
   AKDMY · el botón del Aula Virtual

   El mismo botón que ya salía en la cabecera de las páginas
   clonadas (index, cursos, contacto…), aquí como hoja de estilos
   para poder ponerlo también en las páginas propias —login,
   trabaja aquí, verificar…— y dentro del contenido.

   OJO: ApiCLASES/nav.js lleva una copia de estas mismas reglas
   bajo la clase .akdmy-aula-cta. Está duplicado a propósito: ese
   archivo se inyecta solo en las páginas del clon y se diseñó
   para poder quitarse borrando una sola etiqueta <script>, sin
   dejar estilos huérfanos. Si se cambia el aspecto del botón, hay
   que tocar los dos sitios.

   Cómo está hecho: un anillo de color que gira (un degradado
   cónico al que se le gira el elemento, en vez de animar el
   ángulo del degradado, que necesitaría @property y no está en
   todos los navegadores) y encima un relleno oscuro con un brillo
   que barre de izquierda a derecha.
   ============================================================ */

.ak-aula,
a.button[href*="clases.html"] {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 19px;
  border-radius: 11px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  align-self: center;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
  animation: akAulaPulso 2.8s ease-in-out infinite;
}

/* anillo giratorio */
.ak-aula::before,
a.button[href*="clases.html"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240%;
  height: 0;
  padding-bottom: 240%;
  transform: translate(-50%, -50%);
  background: conic-gradient(#5857D5, #ff4fd8, #ffc000, #35e5ff, #7d7cff, #5857D5);
  animation: akAulaGiro 3.2s linear infinite;
}

/* relleno oscuro con el brillo que barre */
.ak-aula::after,
a.button[href*="clases.html"]::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 9px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 36%,
                    rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(160deg, #191940, #0b0b1e);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: akAulaBrillo 3.2s linear infinite;
}

/* el icono y el texto, por encima de los dos seudoelementos */
.ak-aula > *,
a.button[href*="clases.html"] > * { position: relative; z-index: 1; }

.ak-aula svg,
a.button[href*="clases.html"] svg {
  width: 16px;
  height: 16px;
  flex: none;
  filter: drop-shadow(0 0 6px rgba(255, 79, 216, .8));
}

.ak-aula:hover,
a.button[href*="clases.html"]:hover { color: #fff; transform: translateY(-1px); }
.ak-aula:hover::before,
a.button[href*="clases.html"]:hover::before { animation-duration: 1.3s; }
.ak-aula:hover::after,
a.button[href*="clases.html"]:hover::after { background-size: 200% 100%, 100% 100%; }

@keyframes akAulaGiro {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes akAulaBrillo {
  from { background-position: -90% 0, 0 0; }
  to   { background-position: 190% 0, 0 0; }
}
@keyframes akAulaPulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 216, .0); }
  50%      { box-shadow: 0 0 22px -4px rgba(255, 79, 216, .55); }
}

/* Dentro del contenido va algo más grande que en una cabecera. */
.ak-aula--grande {
  padding: 15px 26px;
  font-size: 16px;
  border-radius: 13px;
}
.ak-aula--grande::after { border-radius: 11px; }
.ak-aula--grande svg { width: 19px; height: 19px; }

/* En el menú desplegable de móvil se comporta como un enlace más
   de la lista, no como una pastilla suelta. */
.cab__nav .ak-aula { align-self: stretch; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .ak-aula,
  .ak-aula::before,
  .ak-aula::after { animation: none; }
  .ak-aula:hover { transform: none; }
}

/* El enrutador escribe el borde en el atributo style del propio
   elemento, y eso gana a cualquier hoja: hay que insistir. También
   le quita el ancho completo que trae de serie en móvil, porque el
   botón vive al lado de "Entrar" y no debajo. */
a.button[href*="clases.html"] {
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  padding: 13px 24px !important;
  font-size: 15px !important;
  /* El clon lo redondea a 40px: se acepta la píldora y el relleno
     de dentro la sigue, en vez de pelearse por las esquinas. */
  border-radius: 999px !important;
}
a.button[href*="clases.html"]::after { border-radius: 999px; }

/* El enlace del menú móvil se anuncia como .cab__nav--movil, que
   está en display:none hasta 1300px. Como aquí se le pone
   inline-flex, hay que devolverle esa condición o aparece dos
   veces en escritorio: una a la izquierda y otra en la cabecera. */
.cab__nav--movil.ak-aula { display: none; }

@media (max-width: 1300px) {
  .cab__nav--movil.ak-aula { display: inline-flex; }
}