/* Contenedor para cada fila de rol (checkbox + slider) */
.role-item {
    display: flex;
    justify-content: space-between; /* Alinea los elementos a los extremos */
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
/* Evita la línea divisoria en el último elemento para un look más limpio */
.role-item:last-child {
    border-bottom: none;
}

/* El label del checkbox ocupa el espacio disponible */
.role-item > .form-control {
    flex-grow: 1;
    margin-bottom: 0; /* Anula el margen por defecto de .form-control */
}

/* Contenedor para el slider de cantidad y su valor */
.role-quantity-control {
    display: flex;
    align-items: center;
}

/* Ajusta el slider para que no ocupe todo el ancho y no tenga márgenes verticales */
.role-quantity-control input[type="range"] {
    width: clamp(100px, 30vw, 140px); /* Ancho adaptable para mejor usabilidad */
    margin: 0;
}