/* =================================================================
   Switches y Checkboxes Mejorados
   Ícono de check cuando están activos
   ================================================================= */

/* Switch de Bootstrap - Mostrar ícono de check cuando está activo */
.form-check-input[type="checkbox"] {
    position: relative;
}

.form-check-input:checked[type="checkbox"]::after {
    content: '\F633'; /* Código del ícono bi-check-lg de Bootstrap Icons */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65em;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    display: block;
    z-index: 1;
}

/* Ajustar el tamaño del ícono según el tamaño del switch */
.form-check-input[style*="width: 2em"]:checked::after,
.form-check-input[style*="width: 2.5em"]:checked::after {
    font-size: 0.8em;
}

/* Switch más grande en chat */
.form-check-input[style*="width: 2.5em"]:checked::after {
    font-size: 0.9em;
}

/* Asegurar que el switch tenga espacio para el ícono */
.form-check-input[type="checkbox"] {
    background-position: center;
    background-size: contain;
}

/* Dark mode - Ajustar color del check si es necesario */
[data-theme="dark"] .form-check-input:checked[type="checkbox"]::after {
    color: #fff;
}

/* Animación suave del check */
.form-check-input:checked[type="checkbox"]::after {
    animation: checkFadeIn 0.2s ease-in-out;
}

@keyframes checkFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Asegurar que el ícono esté centrado correctamente */
.form-check-input.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Switches custom con colores específicos */
.form-check-input:checked.bg-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

.form-check-input:checked.bg-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.form-check-input:checked.bg-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* Checkbox normal - Mostrar check cuando está marcado */
.form-check-input[type="checkbox"]:checked:not(.form-switch)::after {
    content: '\F633'; /* bi-check-lg */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85em;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    animation: checkFadeIn 0.2s ease-in-out;
    display: block;
    z-index: 1;
}

/* Ajustar para checkboxes más pequeños */
.form-check-input[type="checkbox"]:not(.form-switch) {
    position: relative;
}

/* Asegurar que el fondo del checkbox esté detrás del ícono */
.form-check-input[type="checkbox"]:checked:not(.form-switch) {
    background-image: none !important;
}