/* Estilos del módulo de usuarios.
   Archivo aparte porque el proyecto prohíbe estilos inline en Blade. */

/* El acento tiñe la franja lateral y el icono de cada indicador. */
.usuarios-card-total     { --acento: #7b1e3a; }
.usuarios-card-activos   { --acento: #246257; }
.usuarios-card-inactivos { --acento: #6c757d; }
.usuarios-card-sinrol    { --acento: #f3aa2d; }

/* Una cuenta desactivada debe distinguirse de un vistazo en el listado. */
.usuarios-fila-inactiva > td {
    background-color: #fafafb;
    color: #8a909b;
}

.usuarios-badge-rol {
    background-color: #6c757d;
    font-weight: 600;
    margin-right: 3px;
}

/* Mismos colores que RolesPermisosSeeder; un rol nuevo usa el neutro. */
.usuarios-badge-rol.rol-admin      { background-color: #7b1e3a; }
.usuarios-badge-rol.rol-supervisor { background-color: #403e68; }
.usuarios-badge-rol.rol-capturista { background-color: #246257; }

/* Cada rol es una opción seleccionable completa, no solo la casilla. */
.usuarios-rol-opcion {
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    padding: 10px 12px 10px 36px;
    height: 100%;
    transition: border-color var(--transicion), background-color var(--transicion);
}

.usuarios-rol-opcion:hover {
    border-color: var(--dorado);
    background-color: #fdfbf9;
}

.usuarios-rol-opcion:has(.form-check-input:checked) {
    border-color: var(--guinda);
    background-color: var(--guinda-suave);
}

.usuarios-rol-opcion .form-check-input {
    margin-left: -24px;
    margin-top: 0.25rem;
}

.usuarios-rol-opcion .form-check-label {
    cursor: pointer;
}