@charset "utf-8";
/* CSS Document */
/* COLORES 
-AZUL: #1D3365
-FUCSIA: #EF1166
-VIOLETA: #742EFF
-VERDE AGUA: #27F6CA
-BLANCO: #FFFFFF  */

*{margin: 0; padding: 0%;}
body{ font-family: 'Roboto', sans-serif; font-weight: 500; background: #8B00FF; font-size:18px;}

/* Centrado de pagina */
.pagina{ max-width: 48rem; margin: 0 auto;  background: #020646;}

nav {background-color:#8B00FF;}

nav ul li{
    color: white;
    text-decoration: none;
	list-style-type:none;
	height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
	font-size:18px;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);
	}
	
nav ul li a{
    color: white;
    text-decoration: none;}
	
nav ul li a:hover {color:#27F6CA;}

.topmenu{color: #27F6CA;
    font-size:18px;
	height: 10%;
	display: flex;
    justify-content: space-between;
	padding-right:10px;
    align-items: center;}

/* opcionverde2 es para cuando son 3 opciones verdes */
.opcionverde{
	background-color:#27F6CA;
	color: white;
	font-size:18px;
    text-decoration: none;
	height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionverde ul li{list-style-type:none;}
.opcionverde ul li a{color:#1D3365;text-decoration: none; }
.opcionverde ul li a:hover {color: #fff;}

/* opcionverde2 es para cuando son 5 opciones verdes */
.opcionverde1{
	background-color:#27F6CA;
	color: white;
	font-size:18px;
    text-decoration: none;
	height: 18%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionverde1 ul li{list-style-type:none;}
.opcionverde1 ul li a{color:#1D3365;text-decoration: none; }
.opcionverde1 ul li a:hover {color: #fff;}

/* opcionverde2 es para cuando son 4 opciones verdes */
.opcionverde2{
	background-color:#27F6CA;
	color: white;
	font-size:18px;
    text-decoration: none;
	height: 22.5%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionverde2 ul li{list-style-type:none;}
.opcionverde2 ul li a{color:#1D3365;text-decoration: none; }
.opcionverde2 ul li a:hover {color: #fff;}

.subtituloverde{
	background-color:#27F6CA;
	color: #1D3365;
	font-size:18px;
    text-decoration: none;
	height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
	
/* opcionblanca2 es para cuando son 2 opciones blancas */
.opcionblanca2{
	background-color:#fff;
	color: #EF1166;
	font-size:18px;
	text-decoration: none;
	height: 41%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionblanca2 a{text-decoration: none;}
.opcionblanca2:hover {background-color: #EF1166; color:#fff;}

/* opcionblanca3 es para cuando son 3 opciones blancas */
.opcionblanca3{
	background-color:#fff;
	color: #EF1166;
	font-size:18px;
	text-decoration: none;
	height: 27.33%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionblanca3 a{text-decoration: none;}
.opcionblanca3:hover {background-color: #EF1166; color:#fff;}

/* opcionblanca4 es para cuando son 4 opciones blancas */
.opcionblanca4{
	background-color:#fff;
	color: #EF1166;
	font-size:18px;
	text-decoration: none;
	height: 20.5%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionblanca4 a{text-decoration: none;}
.opcionblanca4:hover {background-color: #EF1166; color:#fff;}

/* opcionblanca es para cuando son 5 o + opciones blancas */
.opcionblanca{
	background-color:#fff;
	font-size:18px;
	text-decoration: none;
	height: 18%;
    display: flex;
    justify-content: center;
    align-items: center;
	color:#EF1166;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}

.opcionblanca:hover {background-color: #EF1166; color:#fff; width:100%;}



.contador{background-color:#EF1166;
	color: #fff;

	height: 82%;
	 display: flex;
    justify-content: flex-end;
    align-items: flex-end;

	}
.contadorenter{
	bottom: 0;
	color: #fff;
	font-size:60px;
	padding-right: 20px;
	padding-bottom: 10px;
	}
.contadorenter a{
	color: #fff;
	}

.formularioformato{background:#EF1166;
	color: #fff;
	font-size:36px;
	height: 41%;
    display: flex;
    justify-content: center;
    align-items: center;
	border: 0; padding: 0.5rem;
	}
.formulario .btn{ background: #EF1166; border: 0; padding: 1rem; color: #fff; 
font-family: 'Roboto', sans-serif; font-weight: 500; font-size:18px;}
.formulario .numeros{ background: #742EFF; border: 0; padding: 1rem; color: #27F6CA; 
font-family: 'Roboto', sans-serif; font-weight: 300; font-size:18px;}


.librerias{
	background-color:#fff;
	text-decoration: none;
	height: 18%;
    display: flex;
	align-content: center;
	position: relative;
    justify-content: left;
	padding-top: 1rem;
    min-height: 100px;
	box-shadow: 0px 12px 50px 0px rgba(0,0,0,1);}
	
 
.librerias h1 a{
	margin-top: 5px;
	padding-left: 10%;
	text-decoration: none; 
	color: #1D3365;
	font-size:18px;
	 position: absolute;
	 z-index: 2;

	}
	
.librerias p{
	top: 3rem;
	padding-left: 10%;
	text-decoration: none; 
	color: #1D3365;
	font-size:13px;
	 position: absolute;
	 z-index: 1;
	 font-weight:300;
	}

.librerias a:hover {color:#27F6CA;}

.historial{
	background-color:#1D3365;
	color: #fff;
	font-size:36px;
	height: 90%;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	}
	
.historial h1 {
	color: #27F6CA;
	font-weight:400;
	font-size:2rem;
	max-width:100%;
	height:auto;
	}
.historial  i {
	display:block;
	color: #27F6CA;
	font-size:5rem;
	max-width:100%;
	height:auto;
	}
.historial  i:hover {
	color: #fff;
   
	}
.fechahistorial{
	background-color:#1D3365;
	color: #fff;
	height: 90%;
    justify-content: center;
    align-items: center;
	}
.fecha {
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 2%;
    padding-top: 2%; 
	display: flex;
	flex-direction:row;
	text-decoration: none;
	list-style-type: none;
	justify-content:  space-between;
	align-items: center;
	
	}
.fecha li {

}
	
.fechahistorial h1 {
	color: #fff;
	font-weight:400;
	font-size:1.5rem;
	max-width:100%;
	height:auto;
	}
	
.fechahistorial h2 {
	color: #fff;
	font-weight:400;
	font-size:1.5rem;
	max-width:100%;
	height:auto;
	}
	
.fechahistorial  i {
	
	color: #27F6CA;
	font-size:3rem;
	max-width:100%;
	height:auto;
	}
.fechahistorial  i:hover {
	color: #fff;
   
	}
hr {

width: 90%;
margin:auto;	
}

/*pagina de iniciar sesion*/
.iniciarsesion{
	background-color:#27F6CA;
	color:#fff;
	height:45%;
	 display: flex;
    justify-content: center;
    align-items: center;
	text-decoration:none;}

.iniciarsesion2{
	background-color:#27F6CA;
	color:#fff;
	height:15%;
	 display: flex;
    justify-content: center;
    align-items: center;
	text-decoration:none;}
.iniciarsesion2 h4 { color:#1D3365; font-weight: 300;font-style: italic;}
.iniciarsesion2 h4 a{text-decoration:none;color:#1D3365}
.iniciarsesion2 h4 a:hover{color:#EF1166;}
	
.forminiciarsesion .campo{ 
padding: 0.5rem; 
border-left: none;
border-top: none; 
border-right: none;
background-color:transparent;
border-bottom-color:#Fff;
align-items: center;
display: flex;
justify-content: center;}
.forminiciarsesion .boton{ background: #000; border: 0; padding: 1rem;  color: #fff;}

.subirarchivo{
    background-color:#EF1166;
	color: white ;
	font-size:18px;
	text-decoration: none;
	height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.subirarchivo i{
	margin: auto;
	color: white ;
	font-size:3rem;
	text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;
}


.subirarchivo a {
    text-decoration: none;
    color: white;
}

li {
    list-style: none}

.subirarchivoimg{
    display: block;
	margin-left: auto;
	margin-right: auto } 


	


.historial  a {
	text-decoration: none;
	}

.containerhistorial{
	background-color:#1D3365;
	height: 90%;

	}
		
	
.comprahistorial{
    display: flex;
	flex-direction: column;
    justify-content: flex-start;
    align-items: center;
	padding-top: 30px;
	padding-bottom: 30px;
	}
.comprahistorial2 ul{
    display: flex;
	flex-direction: row;
    justify-content: space-between;
	margin: auto;
	width: 80%;
    align-items: center;
	padding-top: 30px;
	padding-bottom: 30px;
	}
.comprahistorial2 p{
color: #fff;
font-weight:300;
font-size:18px;
	}
ul .total{
font-weight:700;
font-size:18px;
	}
	
.comprahistorial3 {
color: #fff;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
padding-right: 20px;
	}
.comprahistorial3 p{
color: #fff;
font-weight:300;
font-size:30px;
margin-right: 10px;
	}
.comprahistorial3 i{
color: #27F6CA;
font-size:50px;
margin-right: 10px;
	}
.comprahistorial3 i:hover{
color: #fff;

	}
	
	
.comprahistorial h1 {
	color: #27F6CA;
	font-weight:400;
	font-size:2.5rem;
	max-width:100%;
	height:auto;
	}
	
.comprahistorial h2 {
	color: #fff;
	font-weight:400;
	font-size:1.5rem;
	max-width:100%;
	height:auto;
	
	}
	
.comprahistorial  i {
	
	color: #27F6CA;
	font-size:3rem;
	max-width:100%;
	height:auto;
	}
.comprahistorial  i:hover {
	color: #fff;
   
	}