/* VARIABLES */

:root {
	--black: #222222;
	--gray: #666666;
	--white: #eeeeee;	
	--green: #33dd33;
	--red: #dd3333;
	--headerh: 64px;
	--footerh: 64px;
	--mainh: calc(100vh - var(--headerh) - var(--footerh));
}

.green {
	color: var(--green);
}

.red {
	color: var(--red);
}

/* HEADER */
html, body {
	margin: 0; 
	height: 100vh; 
	overflow: hidden
}


header {
	position: fixed;
	top: 0;
	z-index: 9;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; 
	width: 100vw;
	height: var(--headerh);
	background-color: var(--black); 
	color: var(--white);
	text-transform: uppercase;
}

footer {
	position: fixed;
	bottom: 0;
	z-index: 9;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center; 
	width: 100vw;
	height: var(--footerh);
	background-color: var(--black); 
	color: var(--white);
	text-transform: uppercase;
	font-size: 32px;
}


main {
	position: fixed;
	top: var(--headerh);
	bottom: var(--footervh);
	height: var(--mainh);
	overflow-x: hidden;
	overflow-y: auto;	
}

section {
	min-height: var(--mainh);
	width: 100vw;
}

.page {
	display: none;
	flex-wrap: wrap;
	flex-direction: column;
} 

.active {
	display: flex;
}

/*
* MOVIMIENTOS
*/

.total {
	background-color: var(--white);
	color: var(--black);
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 32px;
	padding-bottom: 32px;
}

.listado .movimiento-item {
	background-color: #ffffff;
	color: var(--black);
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.listado .movimiento-item:hover {
	background-color: var(--white);
}
.listado .fecha {
	font-size: 8px;
}
.listado .cantidad {
	text-align: right;
}

.ver_mas {	
	background-color: var(--white);
	color: var(--black);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 16px;
	padding-bottom: 16px;
	text-transform: uppercase;
	margin-bottom: 92px;
}

/*
* SALDO, AUTH
*/

	#saldo,#auth,#bancos,#totales {
		padding: 16px;
	}
	label {
		text-transform: uppercase;
		text-align: center;
		margin-bottom: 10px;
	}
	input[type=number] {
		text-align: right;
	}

/*
* LOADER
*/
.aviso {
	display: none; 
	background-color: var(--gray);
	position: fixed;
	justify-content: center;
	align-items: center;
	z-index: 10;
	width: 92px;
	height: 92px;
	min-height: unset;
	top: calc(50% - 48px);
	left: calc(50% - 48px);
	border-radius: 10px;
}

#loader {
	background-color: #00000077;
}
/*
* HELP
*/

#help {
	width: 80vw;
	min-height: 10vh;
	top: 20vh;
	left: calc(50% - 40vw);
	color: var(--white);
	height: unset;
}

.resultado {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 32px;
} 

.resultado .icono {
	width: 92px;
	font-size: 48px;
}

.resultado .texto {
	width: calc(100% - 46px);
	font-size: 18px;
}

/*
* TOTALES
*/

.saldo {
	text-align: right;
}
#totales table {
	margin-bottom: 92px;
}