html,
body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;

    background:#d8dde8;

    font-family:Calibri;

    overflow:hidden;

}

/*------------------------------------------------*/
/* Distribución general                           */
/*------------------------------------------------*/

body{

    display:flex;

    flex-direction:row;

}

/*------------------------------------------------*/
/* Panel                                           */
/*------------------------------------------------*/

#panel{

    width:340px;
    min-width:340px;

    height:100vh;

    background:#d8dde8;

    padding:20px;

    box-sizing:border-box;

    overflow-y:auto;
    overflow-x:hidden;

}

h2{

    margin-top:0;

}

/*------------------------------------------------*/
/* Etiquetas                                       */
/*------------------------------------------------*/

label{

    display:block;

    margin-top:15px;

    font-size:18px;

    line-height:1.3;

}

/*------------------------------------------------*/
/* Controles                                       */
/*------------------------------------------------*/

input,
select{

    width:100%;

    box-sizing:border-box;

    font-size:18px;

}

button{

    width:100%;

    box-sizing:border-box;

    margin-top:10px;

    padding:10px;

    font-size:17px;

    font-family:Calibri;

    cursor:pointer;

    white-space:nowrap;

}

/*------------------------------------------------*/
/* Parte derecha                                   */
/*------------------------------------------------*/

#zonaCanvas{

    flex:1;

    min-width:0;
    min-height:0;

    height:100vh;

    overflow-y:auto;
    overflow-x:hidden;

    background:#d8dde8;

    -webkit-overflow-scrolling:touch;

}

/*------------------------------------------------*/
/* Canvas                                          */
/*------------------------------------------------*/

canvas{

    display:block;

    width:100%;

    height:95vh;

    cursor:crosshair;

    touch-action:none;

}

/*------------------------------------------------*/
/* Texto inferior                                  */
/*------------------------------------------------*/

#infoGrupo{

    background:#d8dde8;

    color:black;

    padding:25px;

    box-sizing:border-box;

    font-size:18px;

    line-height:1.6;

}

/*------------------------------------------------*/
/* Móvil vertical                                  */
/*------------------------------------------------*/

@media (orientation:portrait){

    html,
    body{

        overflow:auto;

    }

    body{

        display:block;

    }

    #zonaCanvas{

        width:100%;
        height:auto;

        overflow:visible;

    }

    canvas{

        width:100%;
        height:60vh;

    }

    #panel{

        width:100%;
        min-width:0;

        height:auto;

        overflow:visible;

    }

}

/*------------------------------------------------*/
/* Horizontal (ordenador y móvil horizontal)       */
/*------------------------------------------------*/

@media (orientation:landscape){

    #zonaCanvas{

        flex:1;

        height:100vh;

        overflow-y:auto;

        position:relative;

    }

    canvas{

        width:calc(100% - 50px);

        margin-right:50px;

        height:95vh;

    }

}





    #zonaCanvas{

        flex:1;

        height:100vh;

        overflow-y:auto;


        padding-right:20px;

    }

    canvas{

        height:95vh;

    }

}



.visorGaleria{

    text-align:center;

    margin-top:20px;

}

.visorGaleria img{

    max-width:100%;

    max-height:70vh;

    border:1px solid gray;

    background:black;

}

.controlesGaleria{

    margin-top:10px;

}

.controlesGaleria button{

    width:70px;

    display:inline-block;

    margin:5px;

}




.visorGaleria p{

    font-size:20px;

    margin-top:10px;

}