/**
 * @name header.css
 * @version 2.6
 * @date 2026-06-06
 * @owner TAEC / Slim
 * @status Activo
 * @vigencia Revisión trimestral
 *
 * @description Estilos para header sticky, nav desktop y nav móvil. (Issue #387)
 *
 * Changelog:
 *   v2.6 (2026-06-06) — Autor: Antigravity
 *     - [UX] Agregar transiciones CSS suaves para el menú móvil y submenús (Issue #387)
 *   v2.5 (2026-03-18) — Autor: Antigravity
 *     - [REFACTOR] Extraído de los HTML en Fase 1
 */

/* ── HEADER ── */
header {
	position: sticky;
	top: 0;
	z-index: 9999;
	background: var(--white);
	border-bottom: 1px solid var(--border);
	padding: 0 5%;
}
.header-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
	gap: 24px;
}
.logo-link {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.logo-link img {
	height: 38px;
	width: auto;
}

/* ── NAV DESKTOP ── */
.header-inner nav {
	display: flex;
	gap: 2px;
	align-items: center;
}
.header-inner nav > a,
.nav-link {
	font-size: 14px;
	font-weight: 500;
	color: var(--dark);
	padding: 6px 12px;
	border-radius: 6px;
	transition:
		background 0.15s,
		color 0.15s;
	display: flex;
	align-items: center;
	gap: 3px;
	cursor: pointer;
	white-space: nowrap;
	background: none;
	border: none;
	font-family: inherit;
}
.header-inner nav > a:hover,
.nav-link:hover,
.nav-item:hover > .nav-link {
	background: var(--light);
	color: var(--blue);
}
.nav-link svg {
	width: 13px;
	height: 13px;
	transition: transform 0.2s;
	flex-shrink: 0;
}
.nav-item:hover > .nav-link svg {
	transform: rotate(180deg);
}
.nav-item {
	position: relative;
}

/* ── MEGA MENU (Soluciones) ── */
.mega-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
	padding: 24px 20px;
	padding-top: 10px;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px 24px;
	min-width: 1000px;
	z-index: 1000000;
}
.nav-item:hover .mega-menu {
	display: grid;
}
.mega-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mega-head {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0 8px;
	margin-bottom: 6px;
	margin-top: 4px;
}
.mega-col > a {
	font-size: 13px;
	font-weight: 600;
	color: var(--dark);
	padding: 6px 8px;
	border-radius: 6px;
	transition:
		background 0.15s,
		color 0.15s;
	display: flex;
	align-items: center;
	gap: 6px;
}
.mega-col > a:hover {
	background: var(--light);
	color: var(--blue);
}
.mega-sub {
	padding-left: 12px;
	border-left: 2px solid var(--border);
	margin: 2px 0 8px 12px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.mega-sub a {
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	padding: 4px 8px;
	border-radius: 5px;
	transition:
		background 0.15s,
		color 0.15s;
	display: flex;
	align-items: center;
	gap: 5px;
}
.mega-sub a:hover {
	background: var(--light);
	color: var(--blue);
}
.badge-saas {
	font-size: 9px;
	font-weight: 700;
	background: rgba(168, 219, 217, 0.3);
	color: var(--navy);
	padding: 1px 5px;
	border-radius: 3px;
	flex-shrink: 0;
}
.badge-new {
	font-size: 9px;
	font-weight: 700;
	background: var(--orange);
	color: var(--white);
	padding: 1px 5px;
	border-radius: 3px;
	flex-shrink: 0;
}
.badge-teams {
	font-size: 9px;
	font-weight: 700;
	background: #dbeafe;
	color: #1d4ed8;
	padding: 1px 5px;
	border-radius: 3px;
	flex-shrink: 0;
}
.mega-divider {
	height: 1px;
	background: var(--border);
	margin: 8px 4px;
}

.mega-bottom-action {
	grid-column: 1 / -1;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--blue);
	background: var(--light);
	padding: 12px;
	border-radius: 8px;
	margin-top: 6px;
	transition:
		background 0.15s,
		color 0.15s;
}
.mega-bottom-action:hover {
	background: #e0f2fe;
	color: var(--articulate-blue);
}

/* ── SIMPLE DROPDOWN (Capacitación / Recursos) ── */
.simple-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
	padding: 20px;
	padding-top: 10px;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	min-width: 380px;
	z-index: 1000000;
}
.nav-item:hover .simple-dropdown {
	display: grid;
}

/* ── ACCIONES DE HEADER ── */
.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.btn-tienda {
	font-size: 13px;
	font-weight: 600;
	color: var(--blue);
	border: 1.5px solid var(--blue);
	padding: 7px 16px;
	border-radius: 7px;
	transition:
		background 0.15s,
		color 0.15s;
}
.btn-tienda:hover {
	background: var(--blue);
	color: var(--white);
}
.btn-cta {
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
	background: var(--orange);
	padding: 8px 18px;
	border-radius: 7px;
	transition: background 0.15s;
}
.btn-cta:hover {
	background: #d97b0e;
}

/* ── HAMBURGER ── */
.hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 4px;
	background: none;
	border: none;
}
.hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--dark);
	border-radius: 2px;
	transition:
		transform 0.25s,
		opacity 0.25s;
}
.hamburger.open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
	opacity: 0;
}
.hamburger.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── NAV MÓVIL ── */
/* CHANGELOG: 05/06/2026 - Transiciones suaves (P4) + pointer-events — fix #387 */
.mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--white);
	padding: 12px 5% 24px;
	border-bottom: 1px solid var(--border);
	position: fixed;
	top: 68px;
	left: 0;
	right: 0;
	z-index: 999998;
	max-height: calc(100vh - 68px);
	overflow-y: auto;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	transform: translateY(-8px);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.22s ease, opacity 0.18s ease;

	/* Local CSS Variables for Accessibility and Color Differentiation */
	--brand: var(--blue);
	--gray-50: #f9fafb;
	--gray-300: #d1d5db;
	--gray-600: #4b5563;
}
.mobile-nav.open {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.mobile-nav > a {
	font-size: 15px;
	font-weight: 500;
	color: var(--dark);
	padding: 10px 12px;
	border-radius: 8px;
}
.mobile-nav > a:hover {
	background: var(--light);
	color: var(--blue);
}
.mobile-nav .btn-cta {
	text-align: center;
	margin-top: 8px;
}

/* Nivel 1 — Secciones principales */
.mob-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 700; /* Bold style */
	color: var(--dark);
	padding: 10px 12px;
	border-radius: 8px;
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	border-left: 4px solid transparent;
}
.mob-toggle:hover {
	background: var(--light);
}
.mob-toggle.open {
	background: var(--gray-50);
	color: var(--brand);
}
.mob-toggle svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s;
	flex-shrink: 0;
}
.mob-toggle.open svg {
	transform: rotate(180deg);
}
/* CHANGELOG: 05/06/2026 - Transiciones suaves max-height + opacity (P4) — fix #387 */
.mob-section {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: 0;
	margin-bottom: 4px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.28s ease, opacity 0.2s ease;
	flex-shrink: 0;
}
.mob-section.open {
	max-height: 2000px; /* Fix: changed 700px -> 2000px to avoid truncating submenus */
	opacity: 1;
}
.mob-cat {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #4b5563;
	padding: 8px 12px 4px;
}

/* Nivel 2 — Columnas colapsables */
.mob-col-toggle {
	width: calc(100% - 12px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 600; /* Semibold style */
	color: var(--dark);
	padding: 8px 12px;
	margin-left: 12px; /* Indentación visual */
	border-radius: 6px;
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-left 0.15s;
	border-left: 3px solid transparent;
}
.mob-col-toggle:hover {
	background: var(--light);
}
.mob-col-toggle.open {
	color: var(--brand);
	background-color: rgba(49, 121, 194, 0.06);
	border-left: 3px solid var(--brand);
}
.mob-col-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s;
	flex-shrink: 0;
}
.mob-col-toggle.open svg {
	transform: rotate(180deg);
}
.mob-col-section {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: 0;
	margin-bottom: 4px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.28s ease, opacity 0.2s ease;
	flex-shrink: 0;
}
.mob-col-section.open {
	max-height: 1000px;
	opacity: 1;
}

/* Nivel 3 — Items con subItems colapsables */
.mob-item-toggle {
	width: calc(100% - 12px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 400; /* Regular style */
	color: var(--text);
	padding: 8px 12px;
	margin-left: 12px; /* Indentación visual */
	border-radius: 6px;
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-left 0.15s;
	border-left: 2px solid transparent;
}
.mob-item-toggle:hover {
	background: var(--light);
}
.mob-item-toggle.open {
	color: var(--brand);
	background-color: rgba(49, 121, 194, 0.06);
	border-left: 2px solid var(--gray-300);
}
.mob-item-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s;
	flex-shrink: 0;
}
.mob-item-toggle.open svg {
	transform: rotate(180deg);
}
.mob-item-section {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: 0;
	margin-bottom: 4px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.28s ease, opacity 0.2s ease;
	flex-shrink: 0;
}
.mob-item-section.open {
	max-height: 500px;
	opacity: 1;
}

/* Links planos / Hojas finales */
.mob-sub-link {
	font-size: 14px !important;
	color: var(--gray-600) !important;
	font-weight: 400;
	border-radius: 7px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	padding-left: 24px !important; /* Indentación visual de 24px */
	transition: background 0.15s, color 0.15s;
}
.mob-sub-link:hover {
	background: var(--light);
	color: var(--brand) !important;
}

/* Screen Readers / Keyboard Focus Styles (WCAG AA) */
.mobile-nav button:focus-visible,
.mobile-nav a:focus-visible {
	outline: 2px solid var(--brand) !important;
	outline-offset: 2px !important;
	border-radius: 6px !important;
}

/* Preferencias del Sistema de Alto Contraste */
@media (prefers-contrast: more) {
	.mob-toggle.open { border-left: 4px solid currentColor; }
	.mob-col-toggle.open { border-left: 3px solid currentColor; }
	.mob-item-toggle.open { border-left: 2px solid currentColor; }
	.mob-sub-link { color: #000 !important; }
}

/* ── ACTIVE NAV (ficha de cardex) ── */
header .nav-link.active,
header a.nav-link.active,
header button.nav-link.active {
	background: #111827 !important;
	color: #ffffff !important;
	border-radius: 8px;
	padding: 5px 14px;
	font-weight: 700;
}
header a.active {
	background: #111827 !important;
	color: #ffffff !important;
	border-radius: 8px;
	padding: 5px 14px;
	font-weight: 700;
	text-decoration: none;
}

/* ── DROPDOWN CLICK-OPEN (añadido por nav.js) ── */
.nav-item.open > .mega-menu {
	display: grid !important;
}
.nav-item.open > .simple-dropdown {
	display: grid !important;
}

/* ── RESPONSIVE HEADER ── */
@media (max-width: 768px) {
	.header-inner nav {
		display: none;
	}
	.header-actions .btn-tienda,
	.header-actions .btn-cta {
		display: none;
	}
	.hamburger {
		display: flex;
	}
}

/* ── FIX #69 · Touch targets WCAG 2.5.5 (min 44px) ── */
/* Nav dropdown triggers */
.mega-menu-trigger,
.simple-dropdown-trigger,
nav button {
	min-height: 44px;
	padding-block: 8px;
}

/* Links tipo 'Saber más →' */
.saber-mas-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 11px;
}