/* Estilos para la sección del carrusel de estudiantes */
.student-carousel-section {
  background-color: #f8fafc; /* Un fondo claro para diferenciar la sección */
}

body.theme-dark .student-carousel-section {
  background-color: #1a1d2c; /* Fondo para el modo oscuro */
}

.student-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.student-card:hover {
  transform: translateY(-5px);
}

/* LA MAGIA PARA LA FOTO CUADRADA */
.student-photo-square {
  aspect-ratio: 1 / 1; /* Esto fuerza a que el contenedor sea siempre un cuadrado */
  border-radius: 12px; /* Esquinas redondeadas */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.student-photo-square img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen llene el cuadrado sin deformarse */
  object-position: top; /* Prioriza la parte superior de la foto (rostro) */
}

/* Estilos para los controles del carrusel para que se vean mejor */
#studentCarousel .carousel-control-prev-icon,
#studentCarousel .carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 1.2rem;
  background-size: 50%;
}
.student-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 300px; /* Ancho fijo y más grande para la tarjeta */
  margin: 0 auto; /* Centra la tarjeta horizontalmente */
}

#studentCarousel .carousel-item {
  padding-bottom: 2rem; /* Añade espacio inferior en cada slide */
}