/* ---------- RADIO BUTTONS ---------- */
.afr-radio {
    width: 24px; /* ancho del cuadrado */
    height: 24px; /* alto del cuadrado */
    appearance: none; /* elimina el estilo por defecto */
    border: 1px solid var(--color-borders);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-white);
}

    /* Cuando está seleccionado */
    .afr-radio:checked {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* Opcional: efecto hover */
    .afr-radio:hover {
        transform: scale(1.05);
    }