@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
	/* --- PALETA DE COLORES (HSL para transparencias) --- */
	--h-primary: 221;
	--s-primary: 83%;
	--l-primary: 53%;
	--h-sec: 262;
	--s-sec: 83%;
	--l-sec: 58%;
	--color-primary: hsl(var(--h-primary), var(--s-primary), var(--l-primary));
	--color-secondary: hsl(var(--h-sec), var(--s-sec), var(--l-sec));
	--color-primary-light: hsla(var(--h-primary), var(--s-primary), var(--l-primary), 0.1);
	--color-secondary-light: hsla(var(--h-sec), var(--s-sec), var(--l-sec), 0.1);
	--bg-base: #f8f9fc;
	--bg-surface: #ffffff;
	--bg-surface-alt: #f1f5f9;
	--text-head: #0f172a;
	--text-body: #334155;
	--text-muted: #64748b;
	--border-subtle: rgba(148, 163, 184, 0.15);
	--border-focus: rgba(37, 99, 235, 0.4);
	/* --- SOMBRAS DINÁMICAS MEJORADAS --- */
	--shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.02);
	--shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.03), 0 2px 4px -1px rgba(0,0,0,0.02);
	--shadow-md: 0 12px 24px -6px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.01);
	--shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
	--shadow-xl: 0 35px 60px -15px rgba(15, 23, 42, 0.2);
	--shadow-glow: 0 0 20px rgba(37, 99, 235, 0.25);
	--shadow-glow-secondary: 0 0 20px rgba(124, 58, 237, 0.25);
	/* --- MEDIDAS FLUIDAS --- */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 9999px;
	--container-width: 1140px;
	--header-height: 70px;
	/* --- TRANSICIONES --- */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================
   ANIMACIONES MEJORADAS
   ========================= */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% center;
	}

	100% {
		background-position: 200% center;
	}
}

@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
	}

	50% {
		box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
	}
}

@keyframes gradient-shift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* =========================
   RESET MEJORADO
   ========================= */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	background-color: var(--bg-base);
	color: var(--text-body);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.04) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(124, 58, 237, 0.04) 0%, transparent 40%);
	background-size: 200% 200%;
	animation: gradient-shift 15s ease infinite;
}

/* =========================
   2. TYPOGRAPHY MEJORADA
   ========================= */
h1, h2, h3, h4 {
	color: var(--text-head);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	position: relative;
}

h1 {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	margin-bottom: 1.5rem;
}

h2 {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	margin-bottom: 1.25rem;
}

h3 {
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	margin-bottom: 1rem;
}

p {
	margin-bottom: 1rem;
}

a {
	text-decoration: none;
	color: inherit;
	transition: all var(--transition-base);
	position: relative;
}


	a:not(.btn-primary):not(.login-btn):not(.admin-btn):not(.admin-delete)::after {
		content: '';
		position: absolute;
		width: 0;
		height: 2px;
		bottom: -2px;
		left: 0;
		background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
		transition: width var(--transition-base);
		border-radius: 2px;
	}

	a:not(.btn-primary):not(.login-btn):not(.admin-btn):not(.admin-delete):hover::after {
		width: 100%;
	}

/* =========================
   3. HEADER & NAV MEJORADO
   ========================= */
.topbar {
	background: linear-gradient(90deg, var(--color-#1e293b), var(--color-#1e293b));
	color: white;
	text-align: center;
	padding: 10px 0;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	position: relative;
	overflow: hidden;
}

	.topbar::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
		animation: shimmer 3s infinite;
	}

.site-header {
	height: var(--header-height);
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid var(--border-subtle);
	padding: 0 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: all var(--transition-base);
}

	.site-header.scrolled {
		height: calc(var(--header-height) - 10px);
		background: rgba(255, 255, 255, 0.95);
		box-shadow: var(--shadow-md);
	}

	.site-header img {
		height: 40px;
		transition: transform var(--transition-base);
	}

		.site-header img:hover {
			transform: scale(1.05);
		}

	.site-header nav {
		display: flex;
		align-items: center;
		gap: 4px;
	}

		.site-header nav a, .site-header nav span {
			font-size: 0.9rem;
			font-weight: 600;
			color: var(--text-muted);
			padding: 10px 18px;
			border-radius: var(--radius-pill);
			transition: all var(--transition-base);
			position: relative;
			overflow: hidden;
		}

			.site-header nav a::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
				transition: left 0.5s;
			}

			.site-header nav a:hover::before {
				left: 100%;
			}

			.site-header nav a:hover {
				color: var(--color-primary);
				background: var(--color-primary-light);
				transform: translateY(-2px);
			}

			/* Botón Logout mejorado */
			.site-header nav a[id*="btnLogout"] {
				margin-left: 10px;
				background: linear-gradient(135deg, #fee2e2, #fecaca);
				color: #dc2626;
				padding: 10px 22px;
				border: 1px solid rgba(220, 38, 38, 0.1);
				box-shadow: 0 4px 6px rgba(239, 68, 68, 0.1);
			}

				.site-header nav a[id*="btnLogout"]:hover {
					background: linear-gradient(135deg, #ef4444, #dc2626);
					color: white;
					box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
					transform: translateY(-2px);
				}

/* =========================
   4. LAYOUT & HERO MEJORADO
   ========================= */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.hero {
	padding: 160px 0 120px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

	.hero::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		background: radial-gradient(circle at center, hsla(var(--h-primary), var(--s-primary), var(--l-primary), 0.08) 0%, hsla(var(--h-sec), var(--s-sec), var(--l-sec), 0.05) 30%, transparent 70%);
		z-index: -1;
	}

	.hero h1 {
		background: linear-gradient(135deg, var(--text-head) 30%, var(--color-primary) 70%, var(--color-secondary) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		margin-bottom: 1.5rem;
		animation: fadeInUp 0.8s ease-out;
	}

	.hero p {
		font-size: 1.25rem;
		color: var(--text-muted);
		max-width: 650px;
		margin: 0 auto 3rem;
		animation: fadeInUp 0.8s ease-out 0.2s backwards;
	}

/* =========================
   5. CARDS & SECTIONS MEJORADAS
   ========================= */
.section {
	padding: 100px 0;
	position: relative;
}

.section-title {
	text-align: center;
	margin-bottom: 3rem;
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
	color: #ffffff;
	background: transparent;
}


	.section-title::after {
		content: '';
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 4px;
		background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
		border-radius: 2px;
	}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 32px;
	margin-top: 40px;
}

.card {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	padding: 40px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	position: relative;
	transition: all var(--transition-base);
	overflow: hidden;
	animation: fadeInUp 0.6s ease-out;
	animation-fill-mode: both;
}

	.card:nth-child(2) {
		animation-delay: 0.1s;
	}

	.card:nth-child(3) {
		animation-delay: 0.2s;
	}

	.card:nth-child(4) {
		animation-delay: 0.3s;
	}

	.card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
		opacity: 0;
		transition: opacity var(--transition-base);
	}

	.card::after {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
		transition: left 0.5s;
	}

	.card:hover {
		transform: translateY(-12px) scale(1.02);
		box-shadow: var(--shadow-xl);
		border-color: rgba(37, 99, 235, 0.1);
	}

		.card:hover::before {
			opacity: 1;
		}

		.card:hover::after {
			left: 100%;
		}

.card-icon {
	font-size: 2.5rem;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

/* =========================
   6. FORMS & INPUTS MEJORADOS
   ========================= */
.admin-form, .login-card {
	background: var(--bg-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border-subtle);
	position: relative;
	overflow: hidden;
}

	.admin-form::before, .login-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	}

.form-group {
	position: relative;
	margin-bottom: 1.5rem;
}

input[type="text"], input[type="password"], input[type="email"], select, textarea {
	width: 100%;
	padding: 18px 20px;
	border: 2px solid #e2e8f0;
	border-radius: var(--radius-md);
	background-color: var(--bg-surface-alt);
	font-size: 0.95rem;
	color: var(--text-head);
	font-weight: 500;
	transition: all var(--transition-base);
	outline: none;
	font-family: 'Inter', sans-serif;
}

	input:hover, select:hover, textarea:hover {
		background-color: white;
		border-color: #cbd5e1;
		transform: translateY(-2px);
	}

	input:focus, select:focus, textarea:focus {
		background-color: white;
		border-color: var(--color-primary);
		box-shadow: 0 0 0 4px var(--color-primary-light), var(--shadow-sm);
		transform: translateY(-2px);
	}

.form-label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--text-head);
	font-weight: 600;
	font-size: 0.9rem;
}

/* =========================
   7. BOTONES MEJORADOS
   ========================= */
.btn-primary, .login-btn, .admin-btn {
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	color: white;
	border: none;
	padding: 16px 40px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
	transition: all var(--transition-base);
	position: relative;
	overflow: hidden;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	letter-spacing: 0.02em;
	gap: 8px;
}

	.btn-primary::before, .login-btn::before, .admin-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
		transition: left 0.5s;
	}

	.btn-primary:hover, .login-btn:hover, .admin-btn:hover {
		transform: translateY(-4px) scale(1.05);
		box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
	}

		.btn-primary:hover::before, .login-btn:hover::before, .admin-btn:hover::before {
			left: 100%;
		}

	.btn-primary:active, .login-btn:active, .admin-btn:active {
		transform: translateY(-1px) scale(1.02);
	}

.btn-secondary {
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	padding: 14px 36px;
}

	.btn-secondary:hover {
		background: var(--color-primary-light);
	}

/* =========================
   8. TABLAS MEJORADAS
   ========================= */
.tabla, .admin-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-top: 30px;
	background: var(--bg-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-subtle);
	overflow: hidden;
	animation: fadeInUp 0.6s ease-out;
}

	.tabla th, .admin-grid th {
		color: var(--text-muted);
		font-weight: 700;
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		padding: 20px 24px;
		text-align: left;
		border-bottom: 2px solid #e2e8f0;
		position: sticky;
		top: 0;
	}

	.admin-grid th {
		color: white;
		border-bottom: none;
	}

	.tabla td, .admin-grid td {
		padding: 20px 24px;
		color: var(--text-body);
		border-bottom: 1px solid #f1f5f9;
		font-size: 0.9rem;
		transition: background-color var(--transition-fast);
	}

	.tabla tr:last-child td, .admin-grid tr:last-child td {
		border-bottom: none;
	}

/* Botón Borrar mejorado */
.admin-delete {
	background: white;
	color: #ef4444;
	border: 2px solid #fecaca;
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all var(--transition-base);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

	.admin-delete:hover {
		background: linear-gradient(135deg, #ef4444, #dc2626);
		color: white;
		border-color: #ef4444;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
	}

/* =========================
   9. LOGIN PAGE MEJORADA
   ========================= */
#fields-container {
	display: flex;
	flex-flow: column;
	gap: 20px;
}

.login-container {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	position: relative;
	overflow: hidden;
}

	.login-container::before {
		content: '';
		position: absolute;
		width: 300px;
		height: 300px;
		border-radius: 50%;
		background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);
		top: -150px;
		right: -150px;
		animation: float 6s ease-in-out infinite;
	}

	.login-container::after {
		content: '';
		position: absolute;
		width: 200px;
		height: 200px;
		border-radius: 50%;
		background: radial-gradient(circle, var(--color-secondary-light) 0%, transparent 70%);
		bottom: -100px;
		left: -100px;
		animation: float 8s ease-in-out infinite reverse;
	}

.login-card {
	width: 100%;
	max-width: 440px;
	padding: 50px;
	text-align: center;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	animation: fadeInUp 0.8s ease-out;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-logo {
	width: 100px;
	margin-bottom: 2rem;
	transition: transform var(--transition-base);
}

	.login-logo:hover {
		transform: scale(1.1) rotate(5deg);
	}

.login-subtitle {
	color: var(--text-muted);
	margin-bottom: 2.5rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* =========================
   10. ADMIN LAYOUT MEJORADO
   ========================= */
.admin-container {
	max-width: 1200px;
	margin: 60px auto;
	padding: 0 24px;
	animation: fadeInUp 0.6s ease-out;
}

.admin-form {
	padding: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
	align-items: end;
	margin-bottom: 50px;
}

.admin-actions {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: flex-end;
	margin-top: 20px;
}

/* =========================
   11. FOOTER MEJORADO
   ========================= */
.site-footer {
	margin-top: auto;
	background: var(--bg-surface);
	color: var(--text-muted);
	padding: 60px 0 40px;
	text-align: center;
	font-size: 0.9rem;
	border-top: 1px solid var(--border-subtle);
	position: relative;
}

	.site-footer::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	}

.footer-content {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin: 2rem 0;
}

	.footer-links a {
		color: var(--text-body);
		font-weight: 500;
	}

		.footer-links a:hover {
			color: var(--color-primary);
		}

/* =========================
   12. UTILITY CLASSES
   ========================= */
.text-gradient {
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.glass-effect {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.hover-lift {
	transition: transform var(--transition-base);
}

	.hover-lift:hover {
		transform: translateY(-4px);
	}

.shadow-hover {
	transition: box-shadow var(--transition-base);
}

	.shadow-hover:hover {
		box-shadow: var(--shadow-lg);
	}

/* =========================
   13. RESPONSIVE MEJORADO
   ========================= */
@media (max-width: 1024px) {
	.cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.admin-form {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.site-header {
		padding: 15px;
		height: auto;
		flex-direction: column;
		gap: 20px;
		padding: 20px;
	}

		.site-header nav {
			flex-wrap: wrap;
			justify-content: center;
			gap: 8px;
		}

			.site-header nav a, .site-header nav span {
				padding: 8px 16px;
				font-size: 0.85rem;
			}

	.hero {
		padding: 100px 0 60px;
	}

	.cards {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.admin-form {
		grid-template-columns: 1fr;
		padding: 30px;
	}

	.tabla, .admin-grid {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.footer-links {
		flex-direction: column;
		gap: 16px;
	}

	.login-card {
		padding: 30px;
		margin: 20px;
	}
}

@media (max-width: 480px) {
	:root {
		--header-height: 60px;
	}

	h1 {
		font-size: clamp(2rem, 5vw, 2.5rem);
	}

	h2 {
		font-size: clamp(1.5rem, 4vw, 2rem);
	}

	.card {
		padding: 30px 20px;
	}

	.btn-primary, .login-btn, .admin-btn {
		padding: 14px 30px;
		width: 100%;
	}

	.admin-actions {
		flex-direction: column;
		gap: 12px;
	}
}

/* =========================
   14. DARK MODE SUPPORT
   ========================= */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-base: #0f172a;
		--bg-surface: #1e293b;
		--bg-surface-alt: #334155;
		--text-head: #f1f5f9;
		--text-body: #cbd5e1;
		--text-muted: #94a3b8;
		--border-subtle: rgba(148, 163, 184, 0.1);
	}

	body {
		background-image: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.08) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(124, 58, 237, 0.08) 0%, transparent 40%);
	}

	.site-header {
		background: rgba(30, 41, 59, 0.9);
	}

	.card, .admin-form, .login-card, .tabla, .admin-grid {
		background: var(--bg-surface);
		border-color: var(--border-subtle);
	}

	input, select, textarea {
		background-color: var(--bg-surface-alt);
		border-color: #475569;
		color: var(--text-body);
	}

		input:focus, select:focus, textarea:focus {
			background-color: var(--bg-surface);
		}
}

/* =========================
   15. SCROLLBAR PERSONALIZADO
   ========================= */

section section-title {
	color: #1e293b;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-surface-alt);
	border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	border-radius: var(--radius-pill);
}

	::-webkit-scrollbar-thumb:hover {
		background: linear-gradient(135deg, hsl(var(--h-primary), var(--s-primary), 45%), hsl(var(--h-sec), var(--s-sec), 50%));
	}
/* =========================
   LOADING SCREEN EDUCATIVO
   ========================= */

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-base);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

	#page-loader.hide {
		opacity: 0;
		visibility: hidden;
	}

.loader-content {
	text-align: center;
	animation: fadeIn 0.6s ease-out;
}

.loader-logo {
	width: 90px;
	margin-bottom: 1.5rem;
	animation: float 3s ease-in-out infinite;
}

.loader-text {
	font-size: 1rem;
	color: var(--text-muted);
	margin-bottom: 1.2rem;
	font-weight: 500;
}

.loader-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}

	.loader-dots span {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
		animation: loaderBounce 1.4s infinite ease-in-out both;
	}

		.loader-dots span:nth-child(1) {
			animation-delay: -0.32s;
		}

		.loader-dots span:nth-child(2) {
			animation-delay: -0.16s;
		}

@keyframes loaderBounce {
	0%, 80%, 100% {
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}
main {
	animation: fadeIn 0.5s ease;
}
nav a {
	transition: 0.3s ease;
}

	nav a:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
	}
#btnLogout {
	transition: 0.3s ease;
}

	#btnLogout:hover {
		transform: scale(1.08);
		box-shadow: 0 8px 20px rgba(255, 0, 0, 0.25);
	}