/* Fondo animado de burbujas para login */
body.login-bg-anim {
	min-height: 100vh;
	background: linear-gradient(120deg, #f8fafc 0%, #e3e9f3 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-bubbles {
	position: fixed;
	top: 0; left: 0; width: 100vw; height: 100vh;
	z-index: 0;
	pointer-events: none;
}
.bg-bubbles span {
	position: absolute;
	display: block;
	width: 40px; height: 40px;
	background: rgba(106,130,251,0.18);
	border-radius: 50%;
	animation: bubble 18s linear infinite;
	bottom: -80px;
}
.bg-bubbles span:nth-child(1) { left: 10%; animation-duration: 20s; }
.bg-bubbles span:nth-child(2) { left: 20%; width: 60px; height: 60px; animation-duration: 17s; }
.bg-bubbles span:nth-child(3) { left: 25%; animation-duration: 22s; }
.bg-bubbles span:nth-child(4) { left: 40%; width: 80px; height: 80px; animation-duration: 19s; }
.bg-bubbles span:nth-child(5) { left: 55%; animation-duration: 16s; }
.bg-bubbles span:nth-child(6) { left: 70%; width: 60px; height: 60px; animation-duration: 23s; }
.bg-bubbles span:nth-child(7) { left: 80%; animation-duration: 18s; }
.bg-bubbles span:nth-child(8) { left: 90%; width: 50px; height: 50px; animation-duration: 21s; }
@keyframes bubble {
	0% { transform: translateY(0) scale(1); opacity: 0.5; }
	50% { opacity: 0.7; }
	100% { transform: translateY(-100vh) scale(1.2); opacity: 0; }
}

/* Glassmorphism para tarjetas */
.glass-card {
	background: rgba(255,255,255,0.85);
	box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
	border-radius: 2rem;
	border: 1px solid rgba(255,255,255,0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 2.5rem 2rem 2rem 2rem;
	z-index: 1;
	animation: fadeIn 0.7s;
}
.glass-card .avatar {
	width: 80px; height: 80px;
	background: linear-gradient(135deg, #6a82fb 0%, #fc5c7d 100%);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 1.2rem auto;
	box-shadow: 0 2px 16px rgba(106,130,251,0.13);
	color: #fff; font-size: 2.7rem;
}
.glass-card h2 {
	font-weight: 700;
	font-size: 2.1rem;
	letter-spacing: 1px;
	color: #6a82fb;
}
.glass-card .form-label { font-weight: 500; color: #555; }
.glass-card .input-group-text { background: #f0f4fa; border: none; color: #6a82fb; }
.glass-card .btn-primary {
	background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
	border: none;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 1px;
	box-shadow: 0 2px 8px rgba(106,130,251,0.08);
}
.glass-card .btn-primary:hover {
	background: linear-gradient(90deg, #fc5c7d 0%, #6a82fb 100%);
}
.glass-card .alert-danger {
	border-radius: 1rem;
	font-size: 1rem;
}
.glass-card .text-primary { color: #fc5c7d !important; }
.glass-card a { transition: color 0.2s; }
.glass-card a:hover { color: #6a82fb !important; }

/* Reset básico */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
	font-family: 'Segoe UI', Arial, sans-serif;
	background: linear-gradient(120deg, #f8fafc 0%, #e3e9f3 100%);
	color: #222;
	min-height: 100vh;
}

nav.navbar {
	background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
	box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

.card {
	border: none;
	border-radius: 1rem;
	box-shadow: 0 2px 16px rgba(80,80,120,0.08);
	background: #fff;
	transition: box-shadow 0.2s;
}
.card:hover {
	box-shadow: 0 4px 32px rgba(80,80,120,0.13);
}

.btn-primary, .btn-success, .btn-outline-primary {
	border-radius: 2rem;
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
}

.form-control {
	border-radius: 1.5rem;
	border: 1px solid #d1d5db;
	padding: 0.75rem 1.2rem;
	font-size: 1rem;
}

table.table {
	background: #fff;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 1px 8px rgba(80,80,120,0.06);
}
th, td {
	padding: 0.75rem 1rem;
}

.badge {
	border-radius: 1rem;
	font-size: 0.9em;
	padding: 0.4em 0.8em;
}

@media (max-width: 768px) {
	.container { padding: 1rem 0.3rem; }
	.card { margin-bottom: 1rem; }
	table, thead, tbody, th, td, tr { display: block; width: 100%; }
	th, td { padding: 0.5rem 0.5rem; }
}

/* Transiciones para feedback dinámico */
.fade-in {
	animation: fadeIn 0.5s;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Navbar glassmorphism moderno */
.navbar-glass {
	position: fixed;
	top: 0; left: 0; width: 100vw;
	background: linear-gradient(135deg, rgba(106,130,251,0.18) 0%, rgba(252,92,125,0.18) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
	border-radius: 0 0 2rem 2rem;
	border-bottom: 1px solid rgba(255,255,255,0.25);
	z-index: 200;
	animation: fadeInNavbar 0.7s;
}
.navbar-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.7rem 2rem;
}
.navbar-brand {
	font-size: 1.5rem;
	font-weight: bold;
	color: #6a82fb;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.navbar-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
}
.navbar-menu li {
	margin: 0;
}
.navbar-menu a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: #222;
	font-size: 1.08rem;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 1.2rem;
	transition: background 0.2s, color 0.2s;
}
.navbar-menu a:hover, .navbar-menu a:focus {
	background: linear-gradient(90deg, #6a82fb22 0%, #fc5c7d22 100%);
	color: #6a82fb;
}
.navbar-menu i {
	font-size: 1.2rem;
}
.navbar-menu.navbar-right {
	margin-left: 2rem;
}
@keyframes fadeInNavbar {
	from { opacity: 0; transform: translateY(-40px); }
	to { opacity: 1; transform: translateY(0); }
}
body {
	padding-top: 70px;
}
@media (max-width: 900px) {
	.navbar-container {
		flex-direction: column;
		align-items: flex-start;
		padding: 0.7rem 0.5rem;
	}
	.navbar-menu {
		gap: 0.5rem;
	}
	.navbar-brand {
		font-size: 1.1rem;
		gap: 0.2rem;
	}
}

/* Sidebar glassmorphism moderno */
.sidebar-glass {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: 220px;
	background: linear-gradient(135deg, rgba(106,130,251,0.18) 0%, rgba(252,92,125,0.18) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
	border-radius: 0 2rem 2rem 0;
	border-right: 1px solid rgba(255,255,255,0.25);
	z-index: 100;
	display: flex;
	flex-direction: column;
	padding: 2rem 1rem 1rem 1rem;
	animation: fadeInSidebar 0.7s;
}
.sidebar-header {
	margin-bottom: 2rem;
	text-align: center;
}
.sidebar-brand {
	font-size: 1.5rem;
	font-weight: bold;
	color: #6a82fb;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.sidebar-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1 1 auto;
}
.sidebar-menu li {
	margin-bottom: 1.2rem;
}
.sidebar-menu a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: #222;
	font-size: 1.08rem;
	text-decoration: none;
	padding: 0.7rem 1rem;
	border-radius: 1.2rem;
	transition: background 0.2s, color 0.2s;
}
.sidebar-menu a:hover, .sidebar-menu a:focus {
	background: linear-gradient(90deg, #6a82fb22 0%, #fc5c7d22 100%);
	color: #6a82fb;
}
.sidebar-menu i {
	font-size: 1.2rem;
}
@keyframes fadeInSidebar {
	from { opacity: 0; transform: translateX(-40px); }
	to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 900px) {
	.sidebar-glass {
		width: 60px;
		padding: 1rem 0.3rem;
	}
	.sidebar-menu a {
		font-size: 0.95rem;
		padding: 0.7rem 0.5rem;
		gap: 0.2rem;
	}
	.sidebar-brand {
		font-size: 1.1rem;
		gap: 0.2rem;
	}
	.sidebar-menu a span {
		display: none;
	}
}