/* Bingo Medina — estilos globales de layout */
.wrap { max-width: 900px; width: 100%; margin: 0 auto; }
.nav-pills { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:28px 20px 0; }
.pill {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	border:1px solid var(--border, rgba(255,255,255,0.14));
	background:rgba(0,0,0,0.25);
	padding:10px 14px;
	border-radius:999px;
	color:rgba(232,232,232,0.9);
	font-size:0.9rem;
	text-decoration:none;
	backdrop-filter:blur(10px);
	transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pill:hover {
	transform:translateY(-1px);
	background:rgba(255,255,255,0.06);
	border-color:rgba(255,255,255,0.22);
}

.pill.active-page { border-color:var(--accent); color:var(--accent); background:rgba(0,167,255,0.08); }

/* Header global de usuario */
.site-nav {
	position: relative;
	z-index: 10;
	width: 100%;
	margin-bottom: 8px;
}

.site-nav-inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	flex-wrap: wrap;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 16px;
	background: rgba(8, 20, 38, 0.72);
	backdrop-filter: blur(10px);
}

.site-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.site-logo {
	width: auto;
	height: 36px;
	object-fit: contain;
}

.site-nav-links,
.site-nav-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.site-nav-links .pill,
.site-nav-tools .pill {
	padding: 8px 12px;
	font-size: 0.88rem;
}

.site-nav-links { justify-content: flex-start; }
.site-nav-tools { justify-content: flex-end; }

.nav-bell {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.nav-bell-icon { line-height: 1; }

.nav-count {
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 184, 0, 0.22);
	border: 1px solid rgba(255, 184, 0, 0.5);
	color: var(--yellow);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0 6px;
}

.nav-logout {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	color: rgba(232,232,232,0.75);
	transition: color .2s;
}
.nav-logout:hover {
	color: var(--danger, #ff6b6b);
	border-color: rgba(255,107,107,0.45);
}

.nav-admin .nav-bell.has-pending {
	border-color: rgba(255, 184, 0, 0.55);
	background: rgba(255, 184, 0, 0.08);
}

.nav-admin .nav-bell.ring {
	animation: navBellRing 0.9s ease;
}

@keyframes navBellRing {
	0% { transform: rotate(0deg); }
	15% { transform: rotate(10deg); }
	30% { transform: rotate(-8deg); }
	45% { transform: rotate(7deg); }
	60% { transform: rotate(-5deg); }
	75% { transform: rotate(4deg); }
	100% { transform: rotate(0deg); }
}

@media (max-width: 900px) {
	.site-logo-link,
	.nav-desktop-only,
	.nav-bell-text {
		display: none !important;
	}

	.site-nav-inner {
		padding: 8px 8px 0;
		gap: 8px;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	.site-nav-links,
	.site-nav-tools {
		flex: 1 1 100%;
		justify-content: center;
		gap: 8px;
	}

	.site-nav-links {
		order: 1;
	}

	.site-nav-tools {
		order: 2;
	}
}