html, body{
	margin: 0;
 	padding: 0% 0% 0% 0%;
 /* padding: 0.5%;*/
	height: 100%;
	width: 100%;
	font-family: 'Roboto', sans-serif;
	/*flex-basis: 70%;*/

 /* background-color: red;*/
}

*{
      /* font-family:'Helvetica Neue','Helvetica','Arial','sans-serif';*/
      /*  font-family: 'Tangerine', serif;
        font-family: 'Tangerine', serif;*/
      /* font-family:'Arial';*/
      /*font-family: 'Comfortaa';*/
      font-family: 'Tahoma';



       
      /*  font-size: 48px;*/
}


@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  /*src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);*/
  src: url(/Subpag/fonts/password.ttf);
  font-style: normal;
  font-weight: normal;
}


/*{
        font-family: 'SansationNegra';
   }*/




/*{
       font-family:Roboto,sans-serif;
       font-weight:300;*/
       /* font-weight: lighter;*/
      /* -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;*/
  /*  }*/

div.areaTitulo{
	   /* height: 50px;*/
      
	    width: 100%;
     /* height: 12vh;*/
	    height: 15vh;
      font-size: 2.6em; /*300%;*/
	    text-align: left;
      color: white;
      /*background-color: rgba(6, 130, 206);*/ /*#2E2E2E; /* #898686; */
      background-color: rgba(46, 46, 46); /*#2E2E2E; /* #898686; */
      font-family: 'Roboto', sans-serif;
      /*padding: 5px;*/
      float:left;
    /*  border-radius: 2px;*/
	
      /*  font-family:verdana;*/
	
}



div.areaLogo{
    width: 15%;
    height: 100%;
    float:left;
/*    margin-top: 2vh;
    margin-left: 3vW;*/
    /*background-color: violet;*/
    background-color: rgba(46,46,46);
}   


img.logo_saper{
  margin-top:5%;
  margin-left: 8%;
  width:80%;
  height:80%;
  border:transparent;
  float:left;
}


div.areaTituloSistema{
     /* height: 50px;*/
      
     /* width: 85%;*/
      width: 72%;
      height: 10vh;
      font-size: 2.0vw; /*300%;*/
      text-align: left;
      color: white;
      /*background-color: rgba(6, 130, 206);*/ /*#2E2E2E; /* #898686; */
     /* background-color: rgba(46, 46, 46); */
      font-family: 'Roboto', sans-serif;
      /*padding: 5px;*/
      float:left;
    /*  border-radius: 2px;*/
  
      /*  font-family:verdana;*/
   /*   background-color: violet;*/
  
}

div.areaTituloSistema p{
    margin-top: 4vh;
    margin-left: 2vW;


}

div.areaTituloLogin{
     /* height: 50px;*/
      
      width: 10%;
      height: 100%;
      font-size: 1.0vw; /*300%;*/
      text-align: left;
      color: white;
      /*background-color: rgba(6, 130, 206);*/ /*#2E2E2E; /* #898686; */
      background-color: rgba(46, 46, 46); /*#2E2E2E; /* #898686; */
      font-family: 'Roboto', sans-serif;
      /*padding: 5px;*/
      float:left;
    /*  border-radius: 2px;*/
  
      /*  font-family:verdana;*/
    /*  background-color: yellow;*/
  
}




button#botonAcceso{
    margin-top: 2.6vh;
    width: 10vw;
    height: 10vh;
    background-color: rgba(203, 222, 18);
    color: rgba(131, 131, 129 ); /*white;*/
    border: transparent;
    font-size: 1.5vw;
    border-radius: 1px;

}

div#areaLogin{
    float:left;
    margin-top: 10vh;
    width: 50vw;
    height: 70vh;
    margin-left: 20vw;
    background-color: white; /*blue;*/
    display: none;

  }


div#areaLogin button#botonCerrar{
   width: 60px; 
   height: 30px;
  /* margin-top: 0px;*/
   padding-top: 0px;
   float: right;
  /* background-color: #eee; /* #33A8FF;*/
   color: black;
   font-size: 20px;
    border:transparent;
 /*   background-color: red;*/
}

button#botonCerrar:hover {
    background-color: red;
}



div#LoginUsuario{
    margin-top: 16vh;
    margin-left: 20vw;
    width: 20vw;
    height: 11vh;
    float:left;
    background-color: rgba(230,230,230); /*pink;*/

}

div#LoginUsuario label{
  /*  margin-top: 2vh;*/
   /* margin-left: 2vw;*/
    width: 20vw;
    height: 3vh;
    float:left;
    font-size: 0.8vw;
    color:rgba(140,140,140);
 /*   background-color: green;*/

}



div#LoginUsuario input#usuario{
    margin-top: 1vh;
   /* margin-left: 2vw;*/
    width: 20vw;
    height: 6vh;
    float:left;
    font-size: 1.5vw;
   /* border-right: 0px;
    border-top: 0px;
    border-left: 0px;*/
    border:0;
    outline: none;
    border-bottom: 2px solid black;
    border-radius: 0px; 
    background-color: rgba(230,230,230);/*yellow;*/

}


div#LoginPassword{
    margin-top: 2vh;
    margin-left: 20vw;
    width: 20vw;
    height: 11vh;
    float:left;
    background-color: rgba(230,230,230); /*pink;*/
}

div#LoginPassword label{
  /*  margin-top: 2vh;*/
   /* margin-left: 2vw;*/
    width: 20vw;
    height: 3vh;
    float:left;
    font-size: 0.8vw;
    color:rgba(140,140,140);
  /*  background-color: green;*/

}


div#LoginPassword input#password{
    
    font-family: 'password';
    margin-top: 1vh;
   /* margin-left: 20vw;*/
    width: 20vw;
    height: 6vh;
    float:left;
    font-size: 1.5vw;
   /* border-right: 2px solid yellow;
    border-top: 0px;
    border-left: 0px;*/
    border:0;
    outline: none;
    border-bottom: 2px solid black;
  /*  border-radius: 0px; */
    background-color: rgba(230,230,230);/*violet;*/

}

div#areaLogin button#botonContinuar{
    margin-top: 5vh;
    margin-left: 30vw;
    width: 10vw;
    height: 8vh;
    border:transparent;
    border-radius: 2px;
    background-color:rgba( 6, 130, 216);
    color: white;

}

/* inicio g*/

/* ========================================================
   DISEÑO RESPONSIVO PARA MÓVILES (Celulares)
   ======================================================== */
@media screen and (max-width: 768px) {
    
    /* --- CABECERA --- */
    div.areaTitulo {
        height: auto;
        min-height: 12vh;
        display: flex; /* Flexbox ayuda a alinear mejor en móviles */
        align-items: center;
        padding: 5px;
    }
    
    div.areaLogo {
        width: 25%;
        margin: 0;
    }
    
    img.logo_saper {
        width: 100%;
        height: auto;
        margin: 0;
    }

    div.areaTituloSistema {
        width: 50%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    div.areaTituloSistema p {
        font-size: 18px; /* Quitamos el 'vw' para que sea legible */
        margin: 0;
        text-align: center;
    }

    div.areaTituloLogin {
        width: 25%;
        height: auto;
    }

    button#botonAcceso {
        width: 100%;
        height: auto;
        padding: 10px 5px;
        font-size: 14px; /* Quitamos el 'vw' */
        margin: 0;
    }

    /* --- FORMULARIO DE LOGIN --- */
    div#areaLogin {
        width: 90vw; /* Ocupará el 90% del ancho del celular */
        margin-left: 5vw; /* Centrado en la pantalla */
        height: auto;
        padding-bottom: 30px; /* Espacio extra al fondo */
    }

    div#LoginUsuario, div#LoginPassword {
        width: 80%;
        margin-left: 10%; /* Centrado dentro del cuadro blanco */
        height: auto;
        margin-top: 30px;
    }

    div#LoginUsuario label, div#LoginPassword label {
        width: 100%;
        font-size: 14px; /* Quitamos el 'vw' */
    }

    div#LoginUsuario input#usuario, div#LoginPassword input#password {
        width: 100%;
        font-size: 18px; /* Texto más grande para escribir cómodo */
        height: 40px;
    }

    div#areaLogin button#botonContinuar {
        width: 50%;
        margin-left: 25%; /* Centrado */
        height: 45px;
        font-size: 16px;
        margin-top: 40px;
    }
    
    div#areaLogin button#botonCerrar {
        width: 40px;
        height: 40px;
    }
}


/* fin g*/

/* Tamaños legibles y controles táctiles para celulares. */
@media screen and (max-width: 768px) {
    html, body {
        font-size: 22px;
    }

    div.areaTituloSistema p {
        font-size: clamp(24px, 6.5vw, 32px);
        line-height: 1.25;
    }

    button#botonAcceso {
        min-height: 56px;
        padding: 14px 6px;
        font-size: 22px;
        font-weight: 600;
    }

    div#LoginUsuario label,
    div#LoginPassword label {
        height: auto;
        font-size: 20px;
        line-height: 1.4;
    }

    div#LoginUsuario input#usuario,
    div#LoginPassword input#password {
        height: 56px;
        font-size: 24px;
    }

    div#areaLogin button#botonContinuar {
        min-height: 56px;
        font-size: 22px;
        font-weight: 600;
    }

    div#areaLogin button#botonCerrar {
        width: 56px;
        height: 56px;
        font-size: 26px;
    }
}