.sdm-toggle-container {
    display: inline-block;
    line-height: 0;
    vertical-align: middle; /* Alineación mejorada */
}

.sdm-toggle-container .sdm-checkbox {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.sdm-toggle-container .sdm-label {
    background-color: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    height: 16px;
    width: 33px;
    transform: scale(1.2);
    /* Agregamos transform a la transición del label también por si acaso */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: block;
    margin: 0 !important;
}

.sdm-toggle-container .sdm-label .sdm-ball {
    background-color: #333333 !important;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 9px;
    width: 9px;
    
    /* CORRECCIÓN 1: Definir el punto de partida explícito */
    transform: translateX(0); 
    
    /* Aseguramos que la transición cubra el transform */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.3s ease !important;
}

/* Estado ACTIVADO (Dark Mode) */
.sdm-toggle-container .sdm-checkbox:checked + .sdm-label {
    background-color: #1a1a1a !important;
    border-color: #444 !important;
}

.sdm-toggle-container .sdm-checkbox:checked + .sdm-label .sdm-ball {
    /* CORRECCIÓN 2: Forzar el movimiento con !important */
    transform: translateX(16px) !important; 
    
    background-color: #ffffff !important;
}

/* Tus estilos de Elementor siguen igual... */
body.dark-mode.elementor-kit-5 {
    --e-global-color-e2e07ba: #ECECEC!important;
    --e-global-color-7fd45b1: #131414!important;
    --e-global-color-3f18094:#0F0F0F!important;
}
body.dark-mode .elementor-15 .elementor-element.elementor-element-56d037a {
    --divider-color: white !important;
}