/* Contenedor principal para que parezca una botonera de Bootstrap */
.pagination-container {
    display: flex;
    gap: 10px; /* Espacio entre números */
    margin-bottom: 20px;
}

/* Estilo para los números (enlaces) */
.pagination-container a, 
.pagination-container span {
    border-radius: 50px !important; /* Totalmente redondeado */
    border: none !important; /* Quitamos el borde para un look más limpio */
    padding: 8px 16px !important;
    min-width: 40px;
    text-align: center;
    background-color: #f8f9fa; /* Gris muy clarito de fondo */
    color: #157347;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* El número de página actual (el que no es link) */
.active-custom {
    background-color: var(--colorColegio) !important;
    color: var(--colorTextoMenuCabecera) !important;
    box-shadow: 0 4px 10px rgba(21, 115, 71, 0.3); /* Sombra suave */
}

/* Efecto hover para los demás números */
.pagination-container a:hover {
    background-color: #e2e6ea;
    transform: translateY(-2px); /* Pequeño salto hacia arriba */
}