/* =============================================================
   BOTÓN "ACCESO ALUMNOS" — Lic. Zeta  (handoff de Claude Design)
   Pastilla doble línea · cápsula grande que gira apenas al hover
   ============================================================= */

.lz-portal{
  --lz-bg: linear-gradient(150deg, #1F255E, #37429D);  /* fondo de la cápsula */
  --lz-accent: #9AA1E0;                                 /* texto chico de arriba */
  --lz-fg: #F2EFE9;                                     /* texto principal + barras (crema) */

  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:7px 7px 7px 24px;
  text-decoration:none;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--lz-bg);
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(31,37,94,.34), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .26s;
  -webkit-tap-highlight-color:transparent;
}

/* textura sutil (papel/tela) — da el aire "editorial" */
.lz-portal::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(228,221,232,.22), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px);
}

.lz-portal:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(31,37,94,.46), inset 0 1px 0 rgba(255,255,255,.16);
}
.lz-portal:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* texto en dos líneas */
.lz-portal__txt{
  display:flex; flex-direction:column; line-height:1.18;
  padding-right:18px; text-align:left;
  position:relative; z-index:2;
}
.lz-portal__txt small{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--lz-accent);
}
.lz-portal__txt b{
  font-size:15px; font-weight:600; color:var(--lz-fg);
}

/* cápsula (más grande) que gira apenas al hover */
.lz-portal__cap{
  width:48px; height:48px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  position:relative; z-index:2;
  background:rgba(245,240,232,.16);
  transition:background .22s, transform .3s cubic-bezier(.22,.61,.36,1);
}
.lz-portal:hover .lz-portal__cap{
  transform:rotate(-8deg);
  background:rgba(245,240,232,.26);
}

/* barras (motivo de biblioteca / progreso) */
.lz-portal__bars{
  display:flex; align-items:flex-end; gap:2.5px; height:17px;
}
.lz-portal__bars i{
  width:2.5px; border-radius:3px; background:var(--lz-fg);
  transform-origin:bottom; display:block;
}
.lz-portal__bars i:nth-child(1){ height:46%; }
.lz-portal__bars i:nth-child(2){ height:100%; }
.lz-portal__bars i:nth-child(3){ height:64%; }
.lz-portal__bars i:nth-child(4){ height:84%; }
.lz-portal__bars i:nth-child(5){ height:38%; }

/* animación de las barras al hover (ecualizador suave) */
.lz-portal:hover .lz-portal__bars i{ animation:lz-eq 1.05s cubic-bezier(.22,.61,.36,1) infinite; }
.lz-portal:hover .lz-portal__bars i:nth-child(2){ animation-delay:.08s; }
.lz-portal:hover .lz-portal__bars i:nth-child(3){ animation-delay:.16s; }
.lz-portal:hover .lz-portal__bars i:nth-child(4){ animation-delay:.24s; }
.lz-portal:hover .lz-portal__bars i:nth-child(5){ animation-delay:.32s; }
@keyframes lz-eq{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.5); } }

/* compacto: en el nav conviene una versión un poco más chica */
.nav .lz-portal{ padding:5px 5px 5px 18px; }
.nav .lz-portal__cap{ width:40px; height:40px; }
.nav .lz-portal__txt b{ font-size:14px; }

/* respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .lz-portal, .lz-portal__cap, .lz-portal__bars i{ transition:none; animation:none !important; }
  .lz-portal:hover{ transform:none; }
}