/* ----------- Pie de página / Footer ----------- */
/* Delgado a propósito (padding mínimo): así queda más alto de pantalla para el
   contenido, que es lo que el usuario viene a ver. */
footer {
  background-color: #0d6efd;
  color: #fff;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  opacity: 0.8;
}

body.dark-mode footer {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* ----------- Accesos rápidos del estudiante -----------
   En pantalla grande van en fila y CENTRADOS (se veían desbalanceados pegados
   a la izquierda). En móvil cada uno toma la misma porción y juntos ocupan
   todo el ancho. */
.footer-accesos {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  padding: 0.35rem 0;
}

/* El "Regresar" es un <button>: se le quita el aspecto de botón para que se vea
   igual que los accesos (que son enlaces). */
.footer-acceso-regresar {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.footer-acceso {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
  padding: 0.3rem 0.55rem;
  border-radius: 0.6rem;
  transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.footer-acceso i { font-size: 1.15rem; }

.footer-acceso:hover,
.footer-acceso:focus {
  color: inherit;
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

/* Móvil: repartidos por igual, ocupando todo el ancho. */
@media (max-width: 575.98px) {
  .footer-accesos {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
  }
  .footer-acceso {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.3rem 0.15rem;
  }
  .footer-acceso span { font-size: 0.62rem; }
}