:root {
    --radio-button-padding: 0.60em;
}

/* Quita el fondo del radio button en hover/active/focus/selected */
.sph-radio-buttons-component .dx-radiobutton .dx-radiobutton-icon,
.sph-radio-buttons-component .dx-radiobutton.dx-state-hover .dx-radiobutton-icon,
.sph-radio-buttons-component .dx-radiobutton.dx-state-active .dx-radiobutton-icon,
.sph-radio-buttons-component .dx-radiobutton.dx-state-focused .dx-radiobutton-icon {
    background-color: transparent !important;
}

/* Si el “fondo” lo ves en el contenedor (la fila/caja clicable) */
.sph-radio-buttons-component .dx-radiobutton,
.sph-radio-buttons-component .dx-radiobutton.dx-state-hover,
.sph-radio-buttons-component .dx-radiobutton.dx-state-active,
.sph-radio-buttons-component .dx-radiobutton.dx-state-focused {
    background-color: transparent !important;
}

/* Evita el highlight azul/gris de tap/click en móviles */
.sph-radio-buttons-component .dx-radiobutton {
    -webkit-tap-highlight-color: transparent;
}

/* Items del dxRadioGroup */
.sph-radio-buttons-component .dx-radiogroup .dx-item,
.sph-radio-buttons-component .dx-radiogroup .dx-item.dx-state-hover,
.sph-radio-buttons-component .dx-radiogroup .dx-item.dx-state-active,
.sph-radio-buttons-component .dx-radiogroup .dx-item.dx-state-focused,
.sph-radio-buttons-component .dx-radiogroup .dx-item.dx-state-selected {
    background-color: transparent !important;
}

/* Sobreescribir el padding y margin despues del texto de cada RadioButton */
.sph-radio-buttons-component .dx-radiogroup-horizontal .dx-radiobutton {
    padding-right: calc(var(--radio-button-padding) * 3);
    margin-right: 0;
}

/* Quitar padding y margin del ultimo RadioButton */
.sph-radio-buttons-component .dx-radiogroup-horizontal .dx-radiobutton:last-child {
    padding-right: 0em;
    margin-right: 0em;
}

/* Sobreescribir el padding y margin despues del boton de cada RadioButton */
.sph-radio-buttons-component .dx-radio-value-container {
    padding-right: var(--radio-button-padding);
}