/* ============================= */
/* VARIABLES GLOBALES Y RESET    */
/* ============================= */
:root {
	--bg-main: #121212;
	--bg-sidebar: #1e1e1e;
	--bg-card: #242424;
	--text-primary: #ffffff;
	--text-secondary: #a0a0a0;
	--color-positive: #4caf50;
	--color-negative: #f44336;
	--accent: #3b82f6;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;
	background-color: var(--bg-main);
	color: var(--text-primary);
	height: 100vh;
	overflow: hidden;
}

/* ============================= */
/* LAYOUT PRINCIPAL              */
/* ============================= */
.layout {
	display: flex;
	height: 100vh;
}

.content {
	flex: 1;
	padding: 40px;
	overflow-y: auto;
}

.content header {
	margin-bottom: 40px;
}

/* ============================= */
/* HEADER Y BOTÓN EXPORTAR       */
/* ============================= */
.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.export-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: var(--accent);
	color: #ffffff;
	border: none;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: bold;
	cursor: pointer;
	transition:
		background-color 0.2s,
		opacity 0.2s;
}

.export-btn:hover {
	background-color: #2563eb;
}

.export-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}