/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Oct 31 2025 | 00:59:21 */
:where(*) {
    box-sizing: border-box;
}

/* -- FASE 1: PREGUNTAS DEL TEST --*/

section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ocultar-elemento {
    display: none;
}

.contenedor-respuestas-test {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 43.75rem;
    min-height: 7.8rem;
    margin: 1rem 0;
    padding: 2.5rem 1.87rem 1.25rem;
    border: 1px solid #5073aa;
    border-radius: 8px;
    overflow: hidden;
}

/* Animación al inicio del test*/
@keyframes mostrarTest {
    from {
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 1s ease-out, transform 1s ease-out;
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.iniciar-test {
    animation: mostrarTest .5s ease-out;
}

.encabezado-test {
    margin: 0 0 1rem;
    text-align: center;
    color: #5073aa;
}

.texto-introduccion {
    text-align: center;
}

.boton-inicio-test {
    padding: .4rem 1rem;
    color: #fff;
    background-color: #5073aa;
    font-size: .8rem;
    letter-spacing: .06rem;
    border: .1rem solid #5073aa;
    border-radius: .4rem;
    cursor: pointer;
}

.contenedor-botones {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 1rem;
    margin-top: 1.5rem;
}

.contenedor-botones input[type="radio"] {
    display: none;
}

.contenedor-botones label {
    display: flex;
    align-items: center;
    gap: 0 .3rem;
    padding: .1rem .8rem;
    text-align: center;
    font-size: .8rem;
    border: 2px solid #5073aa;
    border-radius: 4px;
    color: #234470;
    cursor: pointer;
}

.contenedor-botones input[type="radio"]:checked + label {
    background-color: #5073aa;
    color: #fff;
}

.contenedor-botones label svg {
    width: 20px;
    height: 20px;
    color: #5073aa;
}

.contenedor-botones input[type="radio"]:checked + label svg {
    color: #fff;
}

.contenedor-botones input[disabled] + label {
    color: #5073aa;
    background-color: #dadada;
    border: 2px solid #dadada;
}

.contador-preguntas {
    margin-top: 4rem;
	font-size: .8rem;
    color: #828282;
}

.lista-emociones-seleccionadas {
    margin-top: 1.7rem;
    margin-bottom: 3.5rem;
    padding-left: .1rem;
}

.lista-emociones-seleccionadas li {
    margin-top: .5rem;
}

li::marker {
    color: #5073aa;
    font-size: 1.25rem;
}

.btn-ver-resultado-test {
    padding: .4rem 1rem;
	text-align: center;
    color: #fff;
    background-color: #5073aa;
    font-size: .8rem;
    letter-spacing: .07rem;
    border: .1rem solid #5073aa;
    border-radius: .4rem;
    cursor: pointer;
}

/* -- FASE 2: RESULTADO DEL TEST -- */

/*Animación para las emociones seleccionadas*/
@keyframes deslizamientoDesdeDer {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.resultado-emociones-selec {
    animation: deslizamientoDesdeDer .4s ease-out;
    opacity: 0;
}

.resultado-emociones-selec.mostrar {
    opacity: 1;
    transition: opacity .2s;
}

.lista-significado-emociones li {
    margin-top: .1rem;
}

.separador {
    width: 100%;
    height: .04rem;
    margin-top: 2rem;
    border: none;
    background-color: #5073aa;

}

.texto-entre-secciones {
    margin-top: -2.4rem;
    padding: 0 .8rem 0;
    color: #5073aa;
    background-color: #fff;
    font-weight: 600;
    text-align: left;
}

.aviso-test {
    margin-top: 2.5rem;
    padding: 0 1.5rem 0;
    font-size: .9rem;
    text-align: center;
    color: #626262;
}