:root {
	--page-bg-color: #F8F9FA;
	--card-bg-color: #FFFFFF;
	--border-color: #DEE2E6;
	--text-primary-color: #212529;
	--text-secondary-color: #495057;
	--accent-primary-color: #007BFF;
	--header-text-color: #343A40;
	--table-border-color: #E9ECEF;
	--table-header-bg-color: #F1F3F5;
	--table-row-even-bg-color: #F8F9FA;
	--table-row-hover-bg-color: #E6F2FF; /* Ejemplo si el acento es azul */

	--border-radius: 0.375rem; /* aprox 6px */
	--spacing-unit: 1rem; /* aprox 16px */
	--card-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#machine-main-container {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	background: var(--page-bg-color);
	padding: 2rem;
	width: 100%;
	height: 100%;
	scroll-snap-type: y mandatory;
}

#machine-main-container h3 {
	color: var(--header-text-color);
}

#machine-main-container button {
	background: var(--accent-primary-color);
	box-shadow: none;
}

#machine-main-container .controls-container,
#machine-main-container .table-machines {
	background: var(--card-bg-color);
	padding: 1.6rem;
	border-radius: 0.8rem;
	border: 1px solid var(--border-color);
	box-shadow: var(--card-shadow);
}

#machine-main-container .table-machines {
	padding: 2rem;	
	height: 100vh;
	scroll-snap-align: start;
}

#machine-main-container table {
	width: 100%;
	border-collapse: collapse;
}

#machine-main-container table th {
	background: var(--table-header-bg-color);
	color: var(--text-secondary-color);
	padding: 1.2rem 1.6rem;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid var(--border-color);
}

#machine-main-container table td {
	padding: 0.8rem 1.6rem;
	border-bottom: 1px solid var(--table-border-color);
	color: var(--text-primary-color);
	cursor: default;
}

#machine-main-container tbody tr:hover {
	background: var(--table-row-hover-bg-color);
}

#machine-main-container tbody tr:nth-child(even) {
	background: var(--table-row-even-bg-color);
}

#machine-main-container table tr.row-selected td {
	background: var(--accent-primary-color);
	color: #FFFFFF;
}