* {
	box-sizing: border-box;
}

h1, h2, p {
	margin: 0;
}

button, input {
	outline: none;
	padding: 0;
}

body {
	margin: 0;
	font-family: Arial;
}

header {
	display: none;
	width: 100%;
	background-color: #EEEEEE;
	padding: 4px;
	margin-bottom: 16px;
	position: sticky;
	top: 0;
}

main {
	margin-bottom: 64px;
}

.recuento {
	width: 15%;
}

.recuento p {
	text-align: center;
	font-size: 1.2rem;
	position: relative;
	top: 10%;
}

.div_titulo {
	width: 70%;
	font-size: 0.6em;
}

@media screen and (min-width: 300px) {
	.div_titulo {
		font-size: 0.7em;
	}
}

@media screen and (min-width: 380px) {
	.div_titulo {
		font-size: 0.9em;
	}
}

.div_titulo h1{
	margin: 0;
	text-align: center;
	color: #444444;
}

/* PAGINA PRINCIPAL */

.div_boton_elim_comp {
	width: 15%;

	/*border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-right: 1px solid #666666;*/
}

.div_boton_elim_comp button {
	padding: 4px;
	background-color: #FF3333;
	color: white;
	border: none;
	width: 100%;
	height: 100%;
	font-size: 1rem;
}

.subtitulo {
	margin-top: 4px;
	margin-bottom: 4px;
	width: 100%;
	display: flex;
}

.subtitulo .div_espacio {
	width: 70%;
	position: relative;
	/*display: flex;
	background-color: #00AA00;
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-left: 1px solid #666666;*/
}

.div_cada_tienda {
	width: 50%;
	border-right: 1px solid #666666;

}

.div_cada_tienda button {
	text-align: center;
	color: white;
	width: 100%;
	background-color: #00AA00;
	border: none;
	height: 100%;
}

@media screen and (min-width: 380px) {
	.div_cada_tienda h2 {
		font-size: 1.5em;
	}
}



@media screen and (min-width:800px) {
	.subtitulo {
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
	main {
		max-width: 800px;
		margin: auto;
	}
}

.div_grupo {
	width: 100%;
}

.div_categoria {
	width: 100%;
	background-color: #AAAAFF;
	padding: 2px;
	user-select: none;
}

.div_categoria h2 {
	color: white;
	text-align: center;
	margin: 0;
}

.div_producto {
	display: flex;
	width: 100%;
	border-bottom: 1px solid #BBBBBB;
	padding-top: 6px;
	padding-bottom: 6px;
}

.comprado {
    color: #DDDDDD;
    text-decoration: line-through;
}

.div_cantidad {
	width: 10%;
}

.div_cantidad p {
	text-align: center;
	font-size: 1.5em;
}

.div_nombre_producto {
	width: 75%;
	user-select: none;
}

.div_nombre_producto p {
	font-size: 1.5em;
	padding-left: 4px;
}

.div_boton_edit {
	width: 15%;
}

.div_boton_edit button {
	width: 100%;
	height: 100%;
	background: none;
	border: none;
}

.div_boton_edit button i {
	font-size: 1.5em;
}

.div_boton_add {
	position: fixed;
	bottom: 10px;
	right: 10px;
}

.div_boton_add button {
	width: 100%;
	border: none;
	background: none;
}

.div_boton_add button i {
	color: #00FF00;
	font-size: 5em;

}


/* AÑADE PRODUCTOS */


.div_boton_rechazar {
	width: 15%;
}

.div_boton_rechazar button {
	width: 100%;
	background: none;
	border: none;
}

.div_boton_rechazar button i {
	color: #CC0000;
	font-size: 2.5em;
}

.div_boton_aceptar {
	width: 15%;
}

.div_boton_aceptar button {
	width: 100%;
	background: none;
	border: none;
}

.div_boton_aceptar button i {
	color: #00CC00;
	font-size: 2.5em;
}

.div_busca_producto {
	display: flex;
	width: 100%;
	margin-bottom: 8px;
}

@media screen and (min-width: 800px) {
	.div_busca_producto {
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
}

.div_input_busca_producto {
	width: 80%;
	padding: 4px;
}

.div_input_busca_producto input {
	width: 95%;
	border-top: none;
	border-left: none;
	border-right: none;
	font-size: 1.2em;
}

.div_button_busca_producto {
	width: 20%;
}

.div_button_busca_producto button {
	width: 95%;
	height: 100%;
	background-color: #6666FF;
	border: none;
	color: white;
}

.div_cantidad input {
	width: 100%;
	font-size: 1.4em;
	text-align: center;
}

.checkbox_seleccionado {
    background-color: #00FF00;
}

/* EDITA PRODUCTO */

.main_edit {
	padding: 4px;
}

.div_edit_nombre {
	width: 100%;
	margin-bottom: 10px;
}

.div_edit_label {
	width: 100%;
	font-size: 1.3em;
}

.div_edit_input {
	width: 90%;

}

.div_edit_input input {
	width: 100%;
	padding: 4px;
	font-size: 1.2em;
}

.div_edit_nombre .div_edit_input input {
	border-top: none;
	border-left: none;
	border-right: none;
}

.div_edit_cat {
	width: 100%;
	margin-bottom: 10px;
}

.div_edit_cantidad {
	width: 100%;
	margin-bottom: 10px;
}

.div_edit_cantidad .div_edit_input input {
	width: 30%;
	font-size: 1.2em;
	border-top: none;
	border-left: none;
	border-right: none;
}

.div_edit_cantidad .div_edit_input button {
	background-color: #EEEEEE;
	font-size: 1em;
}

.div_del_button {
	margin-top: 16px;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

.div_del_button button {
	width: 100%;
	background-color: #FF0000;
	color: white;
	padding: 4px;
	border: none;
	font-size: 1em;
}

#cats {
	font-size: 1.2em;
	margin-top: 0.2em;
}


.load_screen {
	display: flex;
	background-color: rgba(255,255,255,0.8);
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.load_screen i {
	color: #666666;
	font-size: 3rem;
	margin: auto;
	animation-name: spin;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}