:root {
	--cona-blue: #16385D;
	--cona-blue-deep: #16385D;
	--cona-orange: #F47A34;
	--cona-orange-deep: #EB6420;
	--cona-white: #FFFFFF;

	--hd-bg: var(--cona-blue);
	--hd-border: rgba(255, 255, 255, 0.10);
	--hd-shadow: rgba(19, 43, 74, 0.24);

	--logo-bg: rgba(255, 255, 255, 0.14);
	--logo-text: var(--cona-white);
	--brand-title: var(--cona-white);
	--brand-sub: rgba(255, 255, 255, 0.80);

	--link-text: rgba(255, 255, 255, 0.92);
	--link-hover-bg: rgba(255, 255, 255, 0.12);
	--link-hover-text: var(--cona-white);
	--pill-border: rgba(255, 255, 255, 0.22);

	--active-bg: rgba(255, 255, 255, 0.16);
	--active-border: rgba(255, 255, 255, 0.30);

	--cta-bg: linear-gradient(135deg, var(--cona-orange), var(--cona-orange-deep));
	--cta-bg-hover: linear-gradient(135deg, #ff8b49, var(--cona-orange-deep));

	--danger-bg: rgba(255, 255, 255, 0.12);
	--danger-text: #FFD1D1;
	--danger-border: rgba(255, 150, 150, 0.35);

	--switch-bg: rgba(255, 255, 255, 0.14);
	--switch-icon: var(--cona-white);
}

/* ===========================
   Header base
=========================== */
header {
	width: 100%;
	margin: 0;
	padding: 12px 28px;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid var(--hd-border);
	background: var(--hd-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	box-shadow: 0 6px 20px var(--hd-shadow);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* BRAND */
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.brand-title {
	color: var(--brand-title);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.brand-sub {
	color: var(--brand-sub);
	font-size: 0.78rem;
}

/* LOGO */
.brand-logo {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--logo-bg);
	border: 1px solid rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--logo-text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* NAV */
nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* LINKS */
.nav__link,
.nav-pill,
.nav-cta {
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: 0.22s ease;
	font-size: 0.85rem;
	color: var(--link-text);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-weight: 600;
}

/* Hover */
.nav__link:hover,
.nav-pill:hover {
	background: var(--link-hover-bg);
	color: var(--link-hover-text) !important;
	border-color: var(--pill-border);
	transform: translateY(-1px);
}

/* Pill */
.nav-pill {
	border-color: var(--pill-border);
}

/* CTA */
.nav-cta {
	background: var(--cta-bg) !important;
	color: var(--cona-white) !important;
	font-weight: 700;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow: 0 8px 20px rgba(244, 122, 52, 0.35);
}

.nav-cta:hover {
	background: var(--cta-bg-hover) !important;
	color: var(--cona-white) !important;
	box-shadow: 0 10px 26px rgba(244, 122, 52, 0.45);
	transform: translateY(-1px);
}

/* Cerrar sesión */
.nav__link--danger {
	background: var(--danger-bg);
	color: var(--danger-text) !important;
	border: 1px solid var(--danger-border);
	font-weight: 700;
}

.nav__link--danger:hover {
	background: #D80000 !important;
	color: white !important;
	border-color: #D80000 !important;
	box-shadow: 0 8px 18px rgba(216, 0, 0, 0.45);
	transform: translateY(-1px);
}

/* Active */
.nav__link.active,
.nav-pill.active,
.nav-cta.active {
	background: var(--active-bg);
	border: 1px solid var(--active-border);
	color: var(--cona-white) !important;
	font-weight: 700;
}

/* Switch */
.theme-switch {
	display: flex;
	align-items: center;
}

.checkbox {
	opacity: 0;
	position: absolute;
}

.checkbox-label {
	background: var(--switch-bg);
	width: 50px;
	height: 26px;
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	position: relative;
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--switch-icon);
	font-size: 13px;
}

.ball {
	width: 20px;
	height: 20px;
	background: var(--cona-white);
	border-radius: 50%;
	position: absolute;
	left: 3px;
	top: 3px;
	transition: transform .3s ease;
}

.checkbox:checked+.checkbox-label .ball {
	transform: translateX(24px);
}

/* Responsive */
@media (max-width: 900px) {
	header {
		flex-direction: column;
		align-items: flex-start;
		padding: 12px 18px;
		gap: 10px;
	}

	nav {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 8px;
		width: 100%;
	}
}

@media (max-width: 480px) {
	header {
		padding: 10px 14px;
	}

	.brand-title {
		font-size: 0.92rem;
	}

	.brand-sub {
		display: none;
	}
}