*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
body{
    & nav{
        display:flex;
        width:100dvw;
        height:4vh;
        margin-top:10dvh;
        align-items:center;
        justify-content:center;
        gap:5dvw;
        & input{
            width:10%;
            height:100%;
            background-color:#1e5631;
            color:white;
            border-radius:10px;
            font-weight:900;
        }
        & input:hover{
            cursor:pointer;
        }
    }
    & h2:nth-of-type(1){
        position:absolute;
        left:50%;
        bottom:57dvh;
        transform:translate(-50%,0%);
    }
    & #Imagen {
        position:absolute;
        width:70dvw;
        height:14dvh;
        left:50%;
        bottom:63dvh;
        border:2px solid black;
        border-radius:10px;
        transform:translate(-50%,0%);
        overflow-x:scroll;
        & #InteriorImagen{
            border-radius:10px;
            padding-top:12px;
            padding-left:30px;
            & #tablaImagen{
                display:grid;
                grid-template-rows:repeat(2,1fr);
                height:10dvh;
                font-size:1.3rem;
                & #trValor{
                    display:flex;
                }
                & #trPosicion,& #trValor{
                    height:5dvh;
                    align-items:center;
                    & p{
                        width:6dvw;
                        border:1px solid black;
                        padding-top:1dvh;
                        padding-bottom:1dvh;
                        text-align:center;
                        font-weight:700;
                    }
                    & .celda{
                        display:flex;
                        width:6dvw;
                        padding-top:1dvh;
                        padding-right:2dvw;
                        padding-left:2dvw;
                        padding-bottom:1dvh;
                        border:1px solid black;
                        align-items:center;
                        justify-content:center;
                        overflow:hidden;
                    }
                }
            }
        }
    }
    & #Salida{
        position:absolute;
        width:70dvw;
        height:12dvh;
        left:50%;
        bottom:44dvh;
        border:2px solid black;
        padding-top:10px;
        padding-left:30px;
        padding-bottom:30px;
        border-radius:10px;
        line-height:25px;
        transform:translate(-50%,0%);
        font-family:Verdana,Geneva,Tahoma,sans-serif;
        overflow-y:scroll;
    }
    & #Pregunta{
        position:absolute;
        width:42dvw;
        height:20dvh;
        background-color:#F7DF1E;
        border:1px solid black;
        padding-top:20px;
        top:50%;
        left:50%;
        border-radius:10px;
        text-align:center;
        font-weight:700;
        font-size:1.3rem;
        transform:translate(-50%,-50%);
        & #spanClave{
            position:absolute;
            top:30%;
            left:10%;
        }
        & #spanValor{
            position:absolute;
            left:10.5%;
        }
        & .spanSinMapa{
            top:42%;
        }
        & .spanConMapa{
            top:54%;
        }
        & #DatosClave,#DatosValor{
            position:absolute;
            width:30%;
            height:18%;
            left:37%;
            border-radius:10px;
            font-size:1.2rem;
            transform:translate(-50%,-50%);
        }
        & #DatosClave{
            top:37%;
        }
        & .inputSinMapa{
            top:48%;
        }
        & .inputConMapa{
            top:60%;
        }
        & #Continuar{
            position:absolute;
            width:40%;
            height:18%;
            background-color:lime;
            top:75%;
            left:50%;
            border-radius:10px;
            transform:translate(-50%,0%);
        }
        & #ErrorClave,#ErrorValor{
            position:absolute;
            width:60%;
            color:red;
            left:75%;
            transform:translate(-50%,0%);
        }
        & #ErrorClave{
            top:30%;
        }
        & .ErrorSinMapa{
            top:42%;
        }
        & .ErrorConMapa{
            top:54%;
        }
    }
    #tablaBotones{
        position:absolute;
        width:85dvw;
        height:30dvh;
        top:56.5%;
        left:50%;
        transform:translate(-50%,0%);
        & #Botones{
            width:60dvw;
            & tr td:nth-of-type(2){
                width:15%;
                height:4dvh;
            }
            & tr td:nth-of-type(3){
                gap:10px
            }
            & input{
                height:100%;
                margin-right:2px;
                border-radius:10px;
                font-size:1.2rem;
            }
            & .Obligatorio{
                background-color:yellow;
            }
            & .Opcional{
                background-color:white;
            }
            & .Error{
                width:35%;
                color:red;
            }
        }
    }
    .Solo{
        grid-row:2/3;
        height:5dvh !important;
    }
    .Doble{
        grid-row:1/3;
        height:10dvh !important;
    }
    .Invisible{
        display:none;
    }
    .Visible{
        display:block;
    }
    .VisibleFlex{
        display:flex;
    }
    .VisibleGrid{
        display:grid;
    }
    .Boton{
        width:100%;
        height:100%;
        background-color:#1e5631;
        color:white;
        border-radius:10px;
        font-weight:900;
    }
    .Boton:hover{
        cursor:pointer;
    }
}