html
{
    box-sizing: border-box;
    font-size: 62.5%; /*reset para rems -62.5%=10px de 16px*/
}
*, *:before, *:after
{
    box-sizing:inherit;
}

body
{
    font-family: 'Lato', sans-serif;
    font-size:1.6rem;
    /*line-height:2;*/
    background-color: #fefdc4;
}




.fontBold
{
    font-weight: bold;
}
.font18
{
    font-size:1.8rem;
}
.font17
{
    font-size:1.7rem;
}
.font16
{
    font-size:1.6rem;
}
.font15
{
    font-size:1.5rem;
}
.font14
{
    font-size:1.4rem;
}
.font13
{
    font-size:1.3rem;
}
.font12
{
    font-size:1.2rem;
}
.font11
{
    font-size:1.1rem;
}
.font10
{
    font-size:1.0rem;
}

/* ELEMENTOS globales PARA TODO */

h2
{
    margin:0px;
}
h3
{
    margin:0px;
}
h4
{
    margin:0px;
}
h5
{
    margin:0px;
}
h6
{
    margin:0px;
}
img
{
    max-width:100%;
}

.boton
{
    color:#ffffff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.7rem;
    /*margin-top: 0.5rem;*/
    padding: 0.5rem 0.5rem;
    display: inline-block; /* para que se convierte en block pero con tamaño de inline OJO enlaces x defecto son inLine */
    border: none;
    border-radius: 0.5rem;
}
.boton:hover
{
    cursor: pointer;
}

input:not([type="submit"]),
textarea,
select
{
    padding: 0.6rem;  /* mas espacio desde adentro */
    display: block;  /* para darle tamaño*/
    width: 100%;      /* todo el espacio toda el area*/
    background-color: white; /*#f1efef;*/
    /* border: none;   sin borde las cajas */
    border-radius: 0.5rem;
    /*height:3rem;*/
    margin-top:0.3rem;
    /*margin-bottom: 1rem;    */
}

/*@media (min-width: 760px) 
{
    input:not([type="submit"]),
    textarea,
    select 
    {
        width: 80%; 
    }
}*/

input[type="date"]
{
    width: 15rem;
}

.bloqueEnlinea
{
    display:inline-block!important;
}


.bordeGris
{
    padding:0.4rem 0.4rem;
    border:2px solid rgba(6, 21, 22, 0.2);
    border-radius: 10px;
}
.bordeAzul
{
    padding:0.4rem 0.4rem;
    border:1px solid rgba(39, 95, 99, 0.74);
    border-radius: 8px;
}
.colFonAma /* color fondo amarillo */
{
    background-color: #E08709;
}

.colFonVer /* color fondo verde */
{
    background-color: #035a09;
}
.colFonRoj
{
    background-color:#ba0505;
}
.colFonVerCla
{
    background-color:#55b928;
}
.colFonGri
{
    background-color:#f1efef;
}
.colFonNar
{
    background-color: #f84e0d;
}
.colFonAzu
{
    background-color: #060c72;
}

.colVerdeOscuro
{
    color:#014b05;
}
.colNegro
{
    color:#000000;
}
.colBlanco
{
    color:#fefdc4;
}

.principal  /*YAP*/
{
    max-width: 100%; /*120rem;   este tiene la parte diseño */
    margin-left:auto;  /* el espacio a la izquierda automatico*/
    margin-right:auto; /* espacio a la derecha automatico */
                       /* margin: 0 auto 0 auto; esto reemplaza a los dos anteriores p1 arriba p2 derecha p3 abajo p4 izquierda */
                       /* margin: 0 auto; como son valores iguales asi se puede simplificar mas */
    display:flex;
    justify-content:center;
}
.cajaDatos
{
    width:98%;
}
@media (min-width: 700px)   /*YAP*/
{
    .cajaDatos
    {
        width:50%;
    }
}

.datos
{
    width:100%;
    /*margin-bottom:0.5rem;*/
}
.datosCentrados 
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    /*margin-bottom: 0.5rem;*/
}

/* --->>>>>>>>> de el otro lado vienen <<<<<<<<------ */
.darleFlexCentro
{
    display: flex;
    justify-content: space-around;
}

.menuUno
{
    line-height:1.3;
    background-color:darkcyan;
    color:white;
    font-size:1.5rem;
    box-shadow: 3px 2px 3px rgba(39, 95, 99, 0.74);
    margin-bottom:0.2rem;
    padding:0.2rem;   
}
@media (min-width: 700px)   /*YAP*/
{
    .menuUno
    {
        line-height:1.5;
        border-radius: 8px;
        font-size:1.6rem;
        margin-bottom:0.4rem;
        padding:0.4rem;   
    }
}
.cuadroMenuUno
{
    width:45%;
    background-color:#ffffff;
    padding:0.8rem;
    border-radius: 8px;
    box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.2);
}
@media (min-width: 700px)   /*YAP*/
{
    .cuadroMenuUno
    {
        width:40%;
        padding:1.2rem;
        border-radius: 10px;
        
    }
}
.detalleMenuUno
{
    line-height:0.8;
}

/* de el otro lado vienen  */


.salAnt03
{
    margin-top:0.3rem;
}
.salAnt05
{
    margin-top:0.5rem;
}
.salAnt10
{
    margin-top:1.0rem;
}
.salAnt15
{
    margin-top:1.5rem;
}
.salAnt20
{
    margin-top:2.0rem;
}
.salAnt25
{
    margin-top:2.5rem;
}
.salAnt30
{
    margin-top:3.0rem;
}

.salDes03
{
    margin-bottom:0.3rem;
}
.salDes05
{
    margin-bottom: 0.5rem;
}
.salDes10
{
    margin-bottom: 1.0rem;
}
.salDes15
{
    margin-bottom: 1.5rem;
}
.salDes20
{
    margin-bottom: 2.0rem;
}
.salDes25
{
    margin-bottom: 2.5rem;
}
.salDes30
{
    margin-bottom: 3.0rem;
}

.datin0
{
    width:0%;
}

.datin5
{
    width:5%;
}
.datin10
{
    width:10%;
}
.datin20
{
    width:20%;
}
.datin25
{
    width:25%;
}
.datin30
{
    width:30%;
}
.datin33
{
    width:33%;
}
.datin35
{
    width:35%;
}
.datin40
{
    width:40%;
}
.datin45
{
    width:45%;
}
.datin50
{
    width:50%;
}
.datin60
{
    width:60%;
}
.datin70
{
    width:70%;
}
.datin80
{
    width:80%;
}
.datin90
{
    width:90%;
}
.datin95
{
    width:95%;
}
.datin100
{
    width:100%;
}




.inLine
{
    display:inline!important;
}
.centrar
{
    text-align:center;
}
.izquierda
{
    text-align:right;
}
.derecha
{
    text-align:right;
}
.bloqueDerecha
{
    display:flex;
    justify-content:flex-end;
}
.bloqueCentro
{
    display:flex;
    justify-content:center;
}
.bloqueIzquierda
{
    display:flex;
    justify-content:flex-start;
}
.aLaDerecha
{
    text-align:right;
}



.colorCabeza    /*YAP*/
{
    background-color:#000023;
}
.cajaCabeza     /*YAP*/
{
    width:99%;
    display:flex;
    text-align:center;
    justify-content:space-around;
    border:4px solid rgba(6, 73, 69, 0.1);
}
@media (min-width: 700px)   /*YAP*/
{
    .cajaCabeza
    {
        width:70%;
    }
}

.cajaCabezaLogo   /*YAP*/
{
    max-width:35%;
}
.cajaCabezaLogo img   /*YAP*/
{
    max-height:12rem;
}

.cajaCabezaNutri   /*YAP*/
{
    width:65%;
}

.cajaNombreNutri    /*YAP*/
{
    width:100%;
    display:block;
}
.cajaMenu   /*YAP*/
{
    width:100%;
    display:block;
}
.cajaPersonal /*YAP*/
{
    width:100%;
}


.menudeo a  /*YAP*/
{
    margin-top:0;
    color: #023405;
    text-decoration:none;   /* quitarle subrayado a las opciones*/
    font-size:2rem;         /* tamaño de fuente */
    margin-right:0.5rem;      /* a la derecha de cada opcion espacio de 20px */
    padding:0.2rem 0.4rem;
    background-color:rgb(255, 255, 255);
    border-radius: 10px;
}
@media (min-width: 700px)   /*YAP*/
{
    .menudeo a
    {
        margin-right:2rem;      /* a la derecha de cada opcion espacio de 20px */
        padding:0.4rem 0.8rem;
    }
}
.menudeo a:hover         /*YAP su el mouse esta encima */
{
    color:white;
    background-color:navy;
}

.menudeo a:last-of-type  /*YAP referido a la ultima opcion quitarle el espacio a la derecha */
{
    margin:0px;
}

.cajaAcceso
{
    width:90%;
    margin:auto;  /* este es el hijo debe tener margin:auto para que este centrado en el padre*/
}
@media (min-width: 700px)   /*YAP*/
{
    .cajaAcceso
    {
        width:25%;
    }
}