/*.columna-prompt .wpas-radio-container{
	list-style: none;
    background-color: #ebf1f087;
    margin-bottom: 5px;
    border-radius: 10px;
    padding: 2px 10px;
    font-size: .9rem;
}
.columna-promt{
    list-style: none;
    background-color: #ebf1f087;
    margin-bottom: 5px;
    border-radius: 10px;
    padding: 2px 10px;
    font-size: .9rem;
}
.wpas-radio-container label {
    margin-left: 5px;
}
.columna-prompt .label-container label{
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 600;
}*/
.pastilla{
    position: absolute;
    top: 10px;
    left: 10px;
}
.pastilla img{
	max-height:40px;
	max-width:40px;
}
.pastilla-fuera .pastilla-level>span{
    background-color: #ffffff;
    border-radius: 50px;
    border: 1px solid #31323a;
    padding: 2px 10px;
    font-size: .8rem;
    margin-right:3px;
	font-weight: 600;
    width: fit-content;
}
.pastilla-fuera .pastilla-type>span{
    background-color: #ffffff;
    border-radius: 50px;
    border: 1px solid #31323a;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: 600;
	margin-right:3px;
    width: fit-content;
}
.pastilla-level>span:before {
    content: "Nivel: ";
}

/* 1. Mantenemos la estructura de botones/chips */
.wpas-radio-buttons.field-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.wpas-radio-container input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
}

/* 2. Estilo base del label */
.wpas-radio-container label {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    background-color: #f8f9fa !important;
    color: #555 !important;
    border: 1px solid #ddd !important;
    border-radius: 50px !important; /* Estilo píldora */
    cursor: pointer !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
}

/* 3. El "Check" invisible por defecto */
.wpas-radio-container label::before {
    content: '✓' !important;
    display: inline-block !important;
    width: 0 !important; /* Oculto inicialmente */
    margin-right: 0 !important;
    opacity: 0 !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
}

/* 4. Cuando está SELECCIONADO: Mostramos el Check y cambiamos estilo */
.wpas-radio-container input[type="radio"]:checked + label {
    background-color: #041F1E !important; 
    color: #fff !important;           
    border-color: #041F1E !important;
    font-weight: 600 !important;
}

.wpas-radio-container input[type="radio"]:checked + label::before {
    width: 18px !important; /* Aparece el espacio */
    opacity: 1 !important;  /* Aparece el símbolo */
    margin-right: 5px !important;
}

/* Efecto hover suave */
.wpas-radio-container label:hover {
    border-color: #041F1E !important;
    background-color: #041F1E !important;
	color:white;
}