/* -------------------------------------
Estilos del Formulario 
-------------------------------------*/
#diagnosticoForm {
    text-align: left;

    /* Cajita a form */
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px;
    padding: 30px;
    max-width: 70rem;
    margin: 0 auto;

}

.fieldset {
    margin-bottom: 2rem;
}

/* PREGUNTAS */
.question {
    font-size: var(--fs-h5);
    font-weight: 600;
    color: rgb(55, 65, 81);
    padding: 1rem 0;
}

/* RESPUESTAS */
.form-option {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.25rem; /* Genera una seccion del input donde no se selecciona la opcion */
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.form-option:hover {
    background-color: var(--lila-3)
}

.form-option input[type="radio"] {
    margin-right: 1rem;
    /* Ocultar el radio nativo para mejor control del diseño */
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid #94a3b8;
    transition: all 0.2s;
    position: relative;
}

.form-option input[type="radio"]:checked {
    border-color: var(--lila-1);
    background-color: var(--lila-1);
    border-width: 5px; /* Crea el punto interior */
}

.form-option:has(input[type="radio"]:checked) {
    background-color: var(--lila-3);
    border: 1px solid var(--lila-2);;
}

.form-option label {
    cursor: pointer;
    font-weight: 500;
    flex-grow: 1;
}

/* .list li {
    margin-bottom: 0.5rem;
} */