/* Contenedor opcional para la imagen de perfil */
.profile-pic-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;  /* Asegura que la imagen se recorte dentro del contenedor circular */
}

/* Estilo de la imagen de perfil */
.profile-pic {
    width: 100px;       /* Fuerza el tamaño de la imagen */
    height: 100px;      /* Fuerza el tamaño de la imagen */
    object-fit: cover;  /* Recorta la imagen si no tiene una relación de aspecto 1:1 */
    border-radius: 50% !important; /* Hace la imagen circular */
}

.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.user-item {
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.user-item img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 15px;
}

.user-item h3 {
    margin: 0 0 10px;
}

.user-item p {
    margin: 0;
    font-size: 14px;
    color: #555;
}


.position-filters {
    margin-bottom: 15px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap; /* Permite que los checkboxes se ajusten en varias filas si es necesario */
    gap: 10px; /* Espacio entre los checkboxes */
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 5px; /* Espacio entre el checkbox y la etiqueta de texto */
}