/* ──────────────────────────────────────────────────────────
   accesos-sistema.css — Accesos a los sistemas internos
   Componente compartido (views/partials/accesos-sistema.ejs):
     · .accesos--hero → cápsulas flotantes de la portada (escritorio);
                        su ubicación está en hero-showcase.css
     · .accesos--menu → bloque compacto del menú móvil del navbar
   Los tamaños son tokens (--acc-*): cada contexto o breakpoint solo
   redefine tokens, nunca las reglas del componente.
   Se carga en todas las páginas porque el navbar es global.
   ────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   1. CONTENEDOR + TOKENS DE TAMAÑO
   ════════════════════════════════════════════════════════════ */
.accesos {
  --acc-h: 68px;                 /* alto de la cápsula: ≥ icono + padding vertical + 3px de borde */
  --acc-pad: 8px 18px 8px 8px;
  --acc-gap: 12px;               /* separación interna */
  --acc-icon: 48px;              /* círculo del icono */
  --acc-icon-svg: 23px;
  --acc-title: clamp(0.86rem, 0.85vw, 0.95rem);
  --acc-sub: 0.7rem;
  --acc-arrow: 19px;
  --acc-stack-gap: clamp(12px, 1.8vh, 18px);   /* separación entre cápsulas */

  display: flex;
  flex-direction: column;
  gap: var(--acc-stack-gap);
}
.accesos__item { position: relative; }

/* ════════════════════════════════════════════════════════════
   2. CÁPSULA
   ════════════════════════════════════════════════════════════ */
.acceso {
  /* Colores de la variante en r, g, b: degradado, halo y tono profundo */
  --acc-from: 22, 70, 196;
  --acc-to:   47, 116, 238;
  --acc-glow: 82, 150, 255;
  --acc-deep: 8, 34, 110;

  position: relative;
  display: flex;
  align-items: center;
  gap: var(--acc-gap);
  min-height: var(--acc-h);
  padding: var(--acc-pad);
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.46);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 46%, rgba(255,255,255,0) 72%),
    linear-gradient(100deg, rgba(var(--acc-from), 0.93) 0%, rgba(var(--acc-to), 0.9) 100%);
  color: #fff;
  box-shadow:
    0 0 0 4px rgba(var(--acc-glow), 0.20),
    0 0 22px rgba(var(--acc-glow), 0.45),
    0 20px 34px -20px rgba(var(--acc-deep), 0.95),
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -8px 18px rgba(var(--acc-deep), 0.22);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
button.acceso {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* Brillo que cruza la cápsula una sola vez al pasar el mouse */
.acceso::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  background-position: 100% 0;
  pointer-events: none;
}

/* Filo luminoso sobre el borde superior */
.acceso::after {
  content: '';
  position: absolute;
  top: -1.5px;
  left: 24%;
  width: 44%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,255,255,0));
  box-shadow: 0 0 10px rgba(var(--acc-glow), 0.9);
  pointer-events: none;
}

.acceso__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--acc-icon);
  height: var(--acc-icon);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.26), rgba(255,255,255,0) 62%),
    rgba(var(--acc-deep), 0.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30), 0 8px 16px -8px rgba(var(--acc-deep), 0.9);
}
.acceso__icon svg {
  width: var(--acc-icon-svg);
  height: var(--acc-icon-svg);
}

.acceso__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.acceso__text strong {
  color: inherit;   /* main.css pinta todo <strong> en navy */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--acc-title);
  line-height: 1.1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(var(--acc-deep), 0.5);
}
.acceso__text span {
  font-size: var(--acc-sub);
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(var(--acc-deep), 0.45);
}

.acceso__arrow {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  transition: transform var(--t-fast);
}
.acceso__arrow svg {
  width: var(--acc-arrow);
  height: var(--acc-arrow);
}

/* Trazos luminosos junto al borde derecho (solo en la portada) */
.acceso__sparks {
  position: absolute;
  top: 50%;
  right: -22px;
  width: 14px;
  height: 26px;
  margin-top: -16px;
  color: rgb(var(--acc-glow));
  filter: drop-shadow(0 0 4px rgba(var(--acc-glow), 0.85));
  pointer-events: none;
}

.acceso:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 5px rgba(var(--acc-glow), 0.26),
    0 0 30px rgba(var(--acc-glow), 0.6),
    0 26px 40px -20px rgba(var(--acc-deep), 1),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -8px 18px rgba(var(--acc-deep), 0.22);
}
.acceso:hover::before {
  background-position: 0 0;
  transition: background-position 0.9s var(--ease-out);
}
.acceso:hover .acceso__arrow { transform: translateX(4px); }
.acceso:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* Variantes (cada `variante` de config/accesos.js necesita la suya) */
.acceso--azul {
  --acc-from: 22, 70, 196;
  --acc-to:   47, 116, 238;
  --acc-glow: 82, 150, 255;
  --acc-deep: 8, 34, 110;
}
.acceso--verde {
  --acc-from: 15, 122, 53;
  --acc-to:   34, 169, 77;
  --acc-glow: 74, 222, 128;
  --acc-deep: 5, 70, 30;
}
.acceso--naranja {
  --acc-from: 208, 98, 0;
  --acc-to:   240, 146, 12;
  --acc-glow: 255, 183, 51;
  --acc-deep: 130, 56, 0;
}

/* ════════════════════════════════════════════════════════════
   3. DESPLEGABLE (Administrativos → Asisto / Tesorería)
      Por defecto se abre debajo de la cápsula; en la portada pasa
      a ser un panel lateral flotante (sección 5).
   ════════════════════════════════════════════════════════════ */
.acceso__menu {
  position: relative;
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding: 7px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.92);
  box-shadow:
    0 0 0 4px rgba(82,150,255,0.16),
    0 24px 46px -24px rgba(4,22,48,0.65);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
.accesos__item.is-open .acceso__menu {
  display: flex;
  animation: acceso-menu-in 220ms var(--ease-out);
}
/* Flecha que apunta al icono de la cápsula */
.acceso__menu::after {
  content: '';
  position: absolute;
  top: -7px;
  left: calc(var(--acc-icon) / 2 + 1px);
  width: 14px;
  height: 14px;
  background: inherit;
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.accesos__item.is-open > .acceso .acceso__arrow { transform: rotate(90deg); }

@keyframes acceso-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.acceso__sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 13px 8px 8px;
  border-radius: 15px;
  color: var(--primary);
  transition: background var(--t-fast);
}
.acceso__sub + .acceso__sub::before {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 56px;
  right: 13px;
  height: 1px;
  background: rgba(11,37,69,0.09);
}
.acceso__sub:hover {
  background: rgba(22,70,196,0.08);
  color: var(--primary);
}
.acceso__sub:focus-visible {
  outline: 2px solid rgb(22,70,196);
  outline-offset: 1px;
}

.acceso__sub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(22,70,196) 0%, rgb(47,116,238) 100%);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(8,34,110,0.85), inset 0 1px 0 rgba(255,255,255,0.35);
}

.acceso__sub-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.acceso__sub-text strong {
  color: inherit;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.acceso__sub-text span {
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-soft);
}

.acceso__sub-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  color: rgb(22,70,196);
  transition: transform var(--t-fast);
}
.acceso__sub:hover .acceso__sub-arrow { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════
   4. CONTEXTO: MENÚ MÓVIL DEL NAVBAR (≤1120px, mismo corte que
      la hamburguesa en components.css)
   ════════════════════════════════════════════════════════════ */
.navbar__accesos { display: none; }

@media (max-width: 1120px) {
  .navbar__accesos {
    display: block;
    padding: 14px 4px 6px;
  }
  .navbar__accesos-title {
    margin: 0 0 10px;
    color: var(--ink-mute);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .accesos--menu {
    --acc-h: 50px;                 /* ≥ icono 36 + 2·5 de padding + 3 de borde */
    --acc-pad: 5px 14px 5px 6px;
    --acc-gap: 10px;
    --acc-icon: 36px;
    --acc-icon-svg: 19px;
    --acc-title: 0.78rem;
    --acc-sub: 0.66rem;
    --acc-arrow: 17px;
    --acc-stack-gap: 8px;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  /* Sobre el fondo blanco del menú basta un halo discreto */
  .accesos--menu .acceso {
    box-shadow:
      0 0 0 3px rgba(var(--acc-glow), 0.16),
      0 10px 18px -12px rgba(var(--acc-deep), 0.9),
      inset 0 1px 0 rgba(255,255,255,0.45);
  }
  .accesos--menu .acceso:hover { transform: none; }
  .accesos--menu .acceso__sparks { display: none; }
  .accesos--menu .acceso__menu {
    margin-top: 10px;
    border-color: var(--line);
    background: var(--bg-soft);
    box-shadow: none;
  }
}
/* Tablet: fila de 3 dentro del menú desplegado */
@media (min-width: 760px) and (max-width: 1120px) {
  .accesos--menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════════
   5. CONTEXTO: PORTADA — el desplegable es un panel lateral a la
      izquierda de la cápsula, para no tapar Docentes ni Estudiantes.
      (El JS activa el hover solo cuando el panel es flotante.)
   ════════════════════════════════════════════════════════════ */
.accesos--hero .acceso__menu {
  display: flex;
  position: absolute;
  top: 0;
  right: calc(100% + 18px);
  width: max-content;
  min-width: 228px;
  max-width: 300px;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear 220ms;
}
.accesos--hero .accesos__item.is-open .acceso__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  animation: none;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s;
}
/* Puente invisible: el mouse cruza el hueco sin que el panel se cierre */
.accesos--hero .acceso__menu::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 20px;
}
.accesos--hero .acceso__menu::after {
  top: calc(var(--acc-h) / 2 - 7px);
  right: -7px;
  left: auto;
  border-radius: 0 3px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.accesos--hero .accesos__item.is-open > .acceso .acceso__arrow { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════
   6. MOVIMIENTO REDUCIDO
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .acceso,
  .acceso__arrow,
  .acceso__menu,
  .acceso__sub-arrow { transition: none; }
  .acceso:hover { transform: none; }
  .acceso:hover::before { transition: none; background-position: 100% 0; }
  .accesos__item.is-open .acceso__menu { animation: none; }
  .accesos--hero .acceso__menu { transform: none; }   /* solo fundido, sin desplazamiento */
}