#main__day1{
    width: 100%;
    height: 80vh;
    padding: 0.5rem 0rem 0.5rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main__variables__container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.variable__comparacion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.variable__container{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0.25rem solid yellow;
    border-radius: 0.5rem;
    cursor: grab;
}

.dragging {
    cursor: grabbing !important; /* Cursor mientras se arrastra */
  }

.variable_nombre{
    color: yellow;
    font-size: 2rem;
    padding: 0.5rem;
}

.variable_tipo{
    color: white;
    font-size: 1.5rem;
    padding: 0.5rem;
}

.texto_signo{
    color: yellow;
    font-size: 4rem;
    font-weight: bold;
}

.main__day1__comparador{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
}

.main__day1__dropzones{
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.main__dropzone{
    width: 14rem;
    height: 7rem;
    padding: 0.50rem;
    border: 0.25rem solid yellow;
    border-radius: 0.5rem;
}

.main__dropzone:has(.dropped){
    width: fit-content;
    height: 7rem;
    .variable__container{
        width: auto;
        height: auto;
    }
}