/* ---- SECCION CARRITO ---- */
.carrito_compras {
	margin: auto;
	width: 80%;
	font-family: Arial, Helvetica, sans-serif;
	display: grid;
	grid-row-gap: 0;
	grid-column-gap: 4%;
	grid-template-rows: auto;
	grid-template-columns: 58% 38%;
	grid-template-areas:
		"titulo titulo"
		"titulo_productos titulo_formulario"
		"carrito_productos formulario_compras"
		"carrito_botonera formulario_botonera";
	margin-top: 40px;
	margin-bottom: 50px;
}
.titulo {
	grid-area: titulo;
	/* border: 1px solid black; */
	text-align: center;
	font-size: 2em;
	margin: 0 0 10px 0;
}

.titulo_productos {
	grid-area: titulo_productos;
}
.titulo_formulario {
	grid-area: titulo_formulario;
}

.titulo_productos,
.titulo_formulario {
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	background-color: rgba(0, 0, 0, 0.1);
	font-size: 1.8em;
	margin: 0;
	text-align: center;
	height: 50px;
	line-height: 50px;
	letter-spacing: 1.2px;
}

.carrito_productos {
	grid-area: carrito_productos;
	height: 100%;
	/* border: 1px solid slategray; */
	overflow-x: auto;
}
.eliminar-btn {
	background-color: transparent;
	border: none;
	cursor: pointer;
}
.formulario_compras {
	grid-area: formulario_compras;
	height: 100%;
	/* border: 1px solid blue; */
	padding-top: 25px;
}

.formulario_compra {
	grid-area: formulario_compra;
}

.carrito_botonera {
	grid-area: carrito_botonera;
}
.formulario_botonera {
	grid-area: formulario_botonera;
}

/* ---- CSS INPUT ANIMADO ----*/

/* ---- reposo ---- */
div.div_frm {
	margin-bottom: 15px;
	padding-top: 0px;
}

input:focus {
	border: none;
	outline: none;
}

span,
input {
	/* font: 24px/24px Verdana; */
	font-size: 1.5em;
	padding: 0;
}

label.lbl_frm {
	display: block;
	width: 100%;
	/* border: 1px solid silver; */
	border: 1px solid var(--color-productos-fondo-lista);
	padding: 10px 10px;
	position: relative;
	box-sizing: border-box;
	border-radius: 4px;
	transition: 0.25s;
}

label input {
	display: block;
	width: 100%;
	border: none;
	background-color: transparent;
	outline: none;
	padding: 5px 0 5px 0;
}

label span {
	color: silver;
	position: absolute;
	top: 8px;
	left: 10px;
	transition: 0.25s;
}

textarea {
	resize: none;
	width: 100%;
	border: none;
	background-color: transparent;
	outline: none;
	font: 24px/24px Verdana;
}

/* ---- focus ---- */
label.focus {
	/* border-color: #b7905a; */
	border-color: var(--color-separador);
}

label span.focus {
	/* color: #b7905a; */
	color: var(--color-separador);
}

/* ---- top ---- */
label span.top {
	left: 2px;
	top: -15px;
	font-size: 20px;
	background-color: var(--color-fondo-body);
	padding: 0 5px;
}

/* ----- BTN ENVIAR ------- */
.div_frm {
	text-align: center;
}
#btn_comprar,
#btn_reiniciar {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	background-color: var(--color-fondo-hover);
	color: var(--color-letra-hover);
	font-size: 1.7em;
	border-radius: 16px;
	border: none;
	padding: 10px 20px 10px 20px; /* top - right- abajo- left */
	letter-spacing: 5px;
	display: block;
	width: 100%;
	font-weight: bolder;
	text-transform: uppercase;
	height: 50px;
	transition: 0.25s all;
}

#btn_comprar {
	background-image: url("../img/btn_send.png");
	background-repeat: no-repeat;
	background-position: left 15% center;
}
#btn_comprar:hover {
	background-color: green;
	color: white;
}

#btn_reiniciar {
	background-image: url("../img/btn_remove2.png");
	background-repeat: no-repeat;
	background-position: left 25% center;
}

#btn_reiniciar:hover {
	background-color: orangered;
	color: white;
}

#cart-container {
	max-width: 500px;
	margin: auto;
}

/* Estilo para el encabezado de la tabla */
#tablaPedido thead th {
	background-color: #212121;
	/* Color de fondo */
	border: none;
	/* Eliminar bordes */
	padding: 8px 12px;
	/* Espaciado interno */
	text-align: left;
	/* Alineación del texto */
	font-weight: bold;
	/* Negrita */
	font-size: 1.25em;
}

/* Ocultar las flechas de ordenamiento */
.sorting,
.sorting_asc,
.sorting_desc {
	background-image: none !important;
}

/* Estilo para el encabezado de la tabla */
#tablaPedido thead tr th {
	background-color: rgba(0, 0, 0, 0.775); /* Color de fondo negro */
	color: rgb(255, 255, 255); /* Color de texto blanco */
	border: none; /* Eliminar bordes */
	padding: 8px 12px; /* Espaciado interno */
	text-align: left; /* Alineación del texto */
	font-weight: bold; /* Negrita */
}

#totales {
	display: flex;
	justify-content: space-around;

	/* border-left: 1px solid black; */
	/* border-right: 1px solid black; */
	/* border-bottom: 1px solid black; */

	border: 1px solid black;

	height: 40px;

	p {
		margin: 0;
		font-size: 1.5em;
		font-style: italic;
		line-height: 40px;

		#cantidad_total,
		#importe_total {
			font-size: 1.1em;
		}
	}

	#reiniciar {
		text-decoration: none;
		font-family: Arial, Helvetica, sans-serif;
		color: white;
		font-size: 1.7em;
		/* background-color: #b7905a; */
		border-radius: 16px;
		border: none;
		padding: 10px 20px 10px 20px; /*top - right- abajo- left */
		letter-spacing: 5px;
		display: block;
		width: 30%;
		font-weight: bolder;
		text-transform: uppercase;
	}
}

footer {
	padding: 0;
}
/* ----- BTN ENVIAR ------- */

/* Media query para pantallas con una altura de 768px */
@media screen and (max-height: 768px) {
	/* Estilos específicos para pantallas con una altura de 768px */
	header {
		/* background-color: blue; */
	}
}

/* Media query para una resolución de 1440x900 */
@media screen and (max-width: 1600px) and (max-height: 900px) {
	header {
		/* background-color: violet; */
		height: 60px;
	}
	.contenedor-flex-1 {
		width: 80%;
		height: 70px;
	}
	.contenedor-flex-1 ul {
		height: 70px;
	}
	.contenedor-flex-1 li a {
		font-size: 1.6em;
		/* letter-spacing: 1.75px; */
		/* padding: 23px 20px 22px 20px; */
	}
	.carrito_compras {
		margin-top: 15px;
		margin-bottom: 15px;
		grid-column-gap: 4%;
		grid-template-columns: 58% 38%;
		width: 85%;
	}
}

/* Media query para una resolución de 1440x900 */
@media screen and (max-width: 1440px) and (max-height: 900px) {
	header {
		/* background-color: teal; */
		height: 60px;
	}
	.contenedor-flex-1 {
		width: 85%;
		height: 70px;
	}
	.contenedor-flex-1 ul {
		height: 70px;
	}
	.contenedor-flex-1 li a {
		font-size: 1.6em;
		/* letter-spacing: 1.75px; */
		/* padding: 23px 20px 22px 20px; */
	}
	.carrito_compras {
		margin-top: 15px;
		margin-bottom: 15px;
		grid-column-gap: 4%;
		grid-template-columns: 58% 38%;
		width: 85%;
	}
}

/* Media query para una resolución de 1280x768 */
@media screen and (max-width: 1366px) and (max-height: 768px) {
	header {
		/* background-color: yellow; */
		height: 60px;
	}
	.contenedor-flex-1 {
		width: 85%;
		height: 60px;
	}
	.contenedor-flex-1 ul {
		height: 60px;
	}
	.contenedor-flex-1 li a {
		font-size: 1.6em;
		/* letter-spacing: 1.75px; */
		/* padding: 23px 20px 22px 20px; */
	}
	.carrito_compras {
		grid-column-gap: 2%;
		grid-template-columns: 59% 39%;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 85%;
	}
}

/* Media query para una resolución de 1024x800 */
@media screen and (max-width: 1024px) and (max-height: 800px) {
	header {
		background-color: red;
		height: 60px;
	}
	.contenedor-flex-1 {
		width: 90%;
		height: 60px;
	}
	.contenedor-flex-1 ul {
		height: 60px;
	}
	.contenedor-flex-1 li a {
		font-size: 1.5em;
		/* letter-spacing: 1.75px; */
		/* padding: 23px 20px 22px 20px; */
	}
	.carrito_compras {
		grid-column-gap: 2%;
		grid-template-columns: 59% 39%;
		margin-top: 0px;
		margin-bottom: 25px;
		width: 90%;
	}
}

/* Media query para una resolución de 1280x768 */
@media screen and (max-width: 1024px) and (max-height: 600px) {
	header {
		/* background-color: green; */
		height: 60px;
	}
	.contenedor-flex-1 {
		width: 90%;
		height: 60px;
	}
	.contenedor-flex-1 ul {
		height: 60px;
	}
	.contenedor-flex-1 li a {
		font-size: 1.5em;
		/* letter-spacing: 1.75px; */
		/* padding: 23px 20px 22px 20px; */
	}
	.carrito_compras {
		grid-column-gap: 2%;
		grid-template-columns: 59% 39%;
		margin-top: 0px;
		margin-bottom: 25px;
		width: 90%;
	}
}

/* --------------------- MEDIA QUERYS ------------------- */
/* dispositivos medianos - pantallas menores a 768 */
@media screen and (max-width: 768px) {
	.carrito_compras {
		box-sizing: border-box;
		margin: auto;
		font-family: Arial, Helvetica, sans-serif;
		display: grid;
		grid-row-gap: 5px;
		grid-template-rows: auto;
		grid-template-columns: 1fr;
		grid-template-areas:
			"titulo"
			"titulo_productos"
			"carrito_productos"
			"carrito_botonera"
			"titulo_formulario"
			"formulario_compras"
			"formulario_botonera";
		margin-top: 40px;
		margin-bottom: 50px;
		width: 98%;
	}
	.carrito_botonera {
		padding-bottom: 25px;
	}

	#btn_comprar {
		background-position: left 5% center;
	}

	#btn_reiniciar {
		background-position: left 3% center;
	}
}