/*************************** MONITOR  GRANDE ***********************************/
table {
	width: 80%;
	border: 0px solid red;
	margin: auto;
	margin-top: 10px;
}

table th,
table td {
	vertical-align: middle;
	padding: 12px 15px;
	border: 1px solid rgba(122, 162, 247, 0.15);
	font-family: 'Inter', Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #a9b1d6;
}


table th {
	text-align: center;
	background-color: #171b2a;
	color: #7aa2f7;
	border-radius: 8px;
	font-weight: 700;
}

table td {
	height: 50px;
	border-radius: 8px;
	background-color: #10131c;
}

table td:nth-child(1),
table th:nth-child(1) {
	text-align: center;
	background-color: #171b2a;
	color: #7aa2f7;
	width: 15%;
}

table th:nth-child(1) {
	color: #c0caf5;
}

table td:nth-child(2),
table th:nth-child(2) {
	text-align: center;
	color: #c0caf5;
	width: 30%;
}

table td:nth-child(3),
table th:nth-child(3) {
	text-align: center;
	color: #a9b1d6;
	width: 20%;
}

table td:nth-child(4),
table th:nth-child(4) {
	text-align: center;
	color: #a9b1d6;
	width: 15%;
}

table td:nth-child(5),
table th:nth-child(5) {
	text-align: center;
	color: #7aa2f7;
	width: 5%;
}

table td:nth-child(6),
table th:nth-child(6) {
	text-align: center;
	color: #7aa2f7;
	width: 5%;
}

table caption {
	color: white;
	font-size: 18px;
	font-weight: 700;
}

#contenedor-tabla-datos {
	border: solid 1px rgba(122, 162, 247, 0.2);
	margin-top: 10px;
	padding-bottom: 30px;
	width: 100%;
	border-radius: 16px;
	background-color: #12141d;
}

#conteo-registros {
	font-family: 'Inter', Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #f7768e;
	font-weight: bold;
}

#icono-eliminar {
	cursor: pointer;
	width: 30px;
	height: 30px;
	vertical-align: middle;
}

#selector-marcado {
	cursor: pointer;
}

#imagen-producto-celda {
	width: 45px;
	height: 45px;
	border: 1px solid rgba(122, 162, 247, 0.3);
	border-radius: 8px;
}


/**************************** TAMAÑO TABLET ************************************/
@media (max-width: 1000px) {
	table {
		width: 95%;
	}

	table th,
	table td {
		padding: 10px 12px;
		font-size: 14px;
	}
}

/**************************** TAMAÑO MÓVIL ************************************/
@media (max-width: 768px) {
	table {
		width: 100%;
		margin: 0;
		border-collapse: collapse;
	}

	/* ocultar cabecera en móvil - cada celda se explica sola */
	table thead {
		display: none;
	}

	/* cada fila es una tarjeta independiente */
	table tr {
		display: block;
		background-color: #1a1b26;
		border-radius: 12px;
		margin: 10px 0;
		padding: 10px;
		border: none;
	}

	/* celdas en línea de izquierda a derecha, con wrap */
	table td {
		display: inline-block;
		height: auto;
		width: auto;
		padding: 8px 10px;
		border: none;
		border-radius: 0;
		background: none;
		vertical-align: middle;
		font-size: 14px;
	}

	/* imagen: ocupa toda la primera línea */
	table td:nth-child(1) {
		display: block;
		width: 100%;
		text-align: center;
		background: none;
		padding-bottom: 6px;
	}

	/* nombre y descripción: ocupa el 60% */
	table td:nth-child(2) {
		width: 58%;
		text-align: center;
	}

	/* precio: ocupa el 38% y se alinea a la derecha */
	table td:nth-child(3) {
		width: 38%;
		text-align: center;
		font-size: 15px;
	}

	/* botón comprar: bloque completo debajo */
	table td:nth-child(4) {
		display: block;
		width: 100%;
		text-align: center;
		padding-top: 8px;
	}
}