*{
    font-family: 'Google Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html{
    /* comentar el ancho una vez comprobado que es paso a porcentaje es correcto debido a resolucion y así hacer responsive*/
    /*width: 1520.8px; /* tamaño fijo para traducir a porcentaje con referencia */
    background-color: rgb(255, 221, 197);
}

body{
    width: 98.949894792214623882167280378748%; /* caja padre: html   1504.83 x 100 / 1520.8 = 98.949894792214623882167280378748 */
    /*margin: 0.52%; /* 8 x 100 /1520.8 = 0.52603892688058916359810625986323*/
    background-color: chocolate;
}

form{

    box-sizing: content-box; /* es el por defecto, si quiero probar los cambios pongo border-box */

    /* anterior

    width: 900px; Ancho real 943.2 px --> 2px 20px 900px 20px 2px
    padding: 20px;
    border: 2px solid black;
    margin: 0px 280.4px;

    */

    /* objetivo del form: 900px de espacio util, 20px padding, 2px de borde  = 944px total*/

    width: 59.807420107254640059009987839158%; /* caja padre: body  900 x 100 / 1504.83 =  59.807420107254640059009987839158 */
    padding: 1.3290537801612142235335552853146%; /* 20 x 100 / 1504.83 = 1.3290537801612142235335552853146 */ /* VER SI DA PROBLEMA % EN HEIGHT*/
    border: 2px solid black; /* no se puede controlar en el borde con %, pero seria equivalente a: 2 x 100 / 1504.83 = 0.13*/
    margin: 0 auto; /* 204.4 x 100 / 1504.83 = 13.58*/ /* el margin es mejor ponerlo auti para centrar, es menos tedioso y evitamos errores*/
    
    background-color: bisque;
}

h1{
    text-align: center;
}

/* Para poder controlar que la caja no sea más pequeña que el contenido se aplicaría medias query*/

/* caja padre 900px*/
#labelAsignatura{
    display: inline-block;
    width: 10%; /* 90 x 100 / 900 = 10% */
}

#labelInterface{
    display: inline-block;
    width: 12.222222222222221%; /* 110 x 100 / 900 = 12.222222222222221% */
}

#labelCliente{
    display: inline-block;
    width: 9.777777777777779%; /* 88 x 100 / 900 = 9.777777777777779% */
}

#labelDespliegue{
    display: inline-block;
    width: 13.111111111111110%; /* 118 x 100 / 900 = 13.111111111111110% */
}

#labelProfesores{
    display: inline-block;
    width: 7.333333333333333%; /* 66 x 100 / 900 = 7.333333333333333% */
}

#selectProfesor{
    width: 7.777777777777778%; /* 70 x 100 / 900 = 7.777777777777778% */
}

#labelHoras{
    display: inline-block;
    width: 5.222222222222222%; /* 47 x 100 / 900 = 5.222222222222222% */
}

#hora{
    width: 18.888888888888889%; /* 170 x 100 / 900 = 18.888888888888889% */
    padding: 0px 0px 0px 0.5555555555555556%; /* 5 x 100 / 900 = 0.5555555555555556% */
}

#labelInformacion{
    display: inline-block;
    width: 16.333333333333332%; /* 147 x 100 / 900 = 16.333333333333332% */
}

#informacion{
    width: 17.444444444444443%; /* 157 x 100 / 900 = 17.444444444444443% */
}