/**
 * Estilos del bloque `ipropanel/site-header` (desktop + mobile).
 *
 * Tokens de theme.json — no se hardcodean colores/spacing/tipografía
 * fuera de lo que Figma (nodo 393:88 desktop, 393:378 y 156:4333
 * mobile) documenta como valor propio del componente (ej. altura 88/68,
 * radio del botón pill). Breakpoint único del proyecto: 768px, desktop-first
 * (primer responsive del tema, sin precedente ni frame de tablet en
 * Figma — ver docs/TECHNICAL.md S2.2).
 */

/*
 * Header superpuesto (no ocupa espacio propio: el hero pasa por debajo)
 * y siempre visible en ambos breakpoints — NO hide-on-scroll.
 *
 * ESTADO ÚNICO (decisión V12, S4.8): el archivo congelado documenta un
 * solo estado de header — `Scroll position = Sticky` + el scrim del
 * `Rectangle 8` (393:60 desktop rgba(0,0,0,0.3) / 393:355 mobile
 * rgba(0,0,0,0.2)) + el efecto glass + la sombra. NO existe ningún
 * frame ni variante de "header scrolleado opaco": la mecánica
 * `.is-scrolled` + centinela + IntersectionObserver que vivía aquí se
 * eliminó por completo. Ver docs/QA-RECONCILIACION.md §2 (D-04, A-07).
 *
 * `top` con offset del admin bar.
 */
.ipropanel-site-header {
	position: fixed;
	top: var( --wp-admin--admin-bar--height, 0px );
	left: 0;
	right: 0;
	z-index: 40;
	background-color: var( --wp--custom--color--header-scrim );
	backdrop-filter: var( --wp--custom--effect--glass-blur );
	box-shadow: var( --wp--preset--shadow--shadow-header );
}

/* `is-menu-open` (view.js, panel hamburguesa mobile): con el panel
   abierto la barra del header lee sólida independientemente del scroll
   (verificado S4.6 contra Figma 156:4333, barra `bg-black` en ese
   estado). */
.ipropanel-site-header.is-menu-open {
	background-color: var( --wp--preset--color--neutral-black );
}

/* Medidas del frame desktop (393:88, leído vía MCP): alto total 88 =
   padding-top 32 + fila de contenido 40 (el CTA, 137×40 en x=1023 y=32)
   + padding-bottom 16. El padding lateral de 120 lo aporta el token
   `section-padding-inline`, cuyo máximo es exactamente 120px. */
.ipropanel-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--card-gap );
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--section-padding-inline );
	padding-block: 32px 16px;
	min-height: 88px;
}

.ipropanel-site-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.ipropanel-site-header__logo img {
	display: block;
	height: 26px;
	width: auto;
}

.ipropanel-site-header__menu-toggle {
	display: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: opacity var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

/* Estado `:active` (S11.1, 2026-08-11) — DECISIÓN PROVISIONAL, depende de
   `CD-A5` (abierta).

   Es el único control del tema que lleva `:active` y NO `:hover`, y no es un
   olvido: el botón vive dentro de `@media ( max-width: 767px )` —en desktop es
   `display: none`— así que un `:hover` suyo no tendría a quién responder. La
   opacidad es el mismo gesto de los `nav-link` que este botón despliega. */
.ipropanel-site-header__menu-toggle:active {
	opacity: 0.8;
}

/* `flex: 1` + `margin-inline: auto` en el `<nav>` reparten el aire
   sobrante en partes IGUALES a los dos lados de los enlaces (RD-01,
   S16.2). Es lo que declara el nodo `393:88`: `justify-between` sobre
   TRES hermanos —logo, `393:78` Navigation, `393:169` Button—, o sea
   dos huecos iguales. Acá el `<nav>` y el CTA viven dentro de un mismo
   wrapper (lo necesita el panel mobile, ver `render.php`), así que sin
   estas dos líneas `space-between` reparte entre DOS hijos y todo el
   sobrante cae del lado del logo: a 1280 no se nota —el nav va al
   límite y solo sobran 4,9px— pero a 1440 el hueco izquierdo mide 213
   contra 16 del derecho. Ese es el defecto que el diseñador reportó. */
.ipropanel-site-header__nav-wrapper {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var( --wp--preset--spacing--card-gap );
}

.ipropanel-site-header__nav {
	margin-inline: auto;
}

.ipropanel-site-header__backdrop {
	display: none;
}

.ipropanel-site-header__nav-list {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tamaño verificado vía MCP contra Figma 393:88: los ítems del nav
   desktop son 14px (no hay preset de ese slug, pero `footer-body` ya
   vale 0.875rem/14px — mismo criterio de S2.7, coincidencia de valor
   aunque el slug sea de otro contexto). Con `boton` (16px, tamaño real
   del CTA/dropdown mobile) "Diseños destacados" y "Recursos técnicos"
   wrapeaban a 2 líneas; en mobile (156:4333) el nav sí es 16px, ver
   override abajo. */
/* V9: "Diseños destacados"/"Servicios" pueden imprimirse como <button>
   en vez de <a> (abren el modal PDF) — reset de los estilos por defecto
   del navegador para que ambos elementos lean idénticos. */
button.ipropanel-site-header__nav-link {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
}

.ipropanel-site-header__nav-link {
	display: inline-block;
	padding: 4px;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--footer-body );
	line-height: 24px;
	font-weight: 400;
	color: var( --wp--preset--color--neutral-white );
	text-decoration: none;
	transition: opacity var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

/* `:active` añadido en S11.1: sin él el enlace no daba respuesta alguna al tap
   en tablet/mobile, que es lo que `INTERACTIONS.md` §4 exige. La guarda va
   sobre el `:hover` por el mismo motivo de siempre (ver `project-info`). */
@media ( hover: hover ) {
	.ipropanel-site-header__nav-link:hover {
		opacity: 0.8;
	}
}

.ipropanel-site-header__nav-link:active {
	opacity: 0.8;
}

.ipropanel-site-header__nav-link.is-active {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Selector de idioma (S10.3). El archivo NO dibuja este control —el nav de
   `393:88` y el panel de `156:4333` tienen 6 ítems y nada más—, así que se
   extiende el sistema en vez de inventar: los dos enlaces son
   `nav-link`, de donde heredan tipografía, color y el `is-active` que ya
   marca la sección en curso (bold + subrayado), y en mobile heredan también
   el override a 16px. Lo único propio es el separador. Pregunta #69 de
   docs/INTERACTIONS.md. */
/* `flex` y no `inline-flex`: como caja inline dentro del `<li>` genera una
   línea de texto propia, y el hueco de la línea base sumaba 16px al alto del
   header (88 → 104 medidos contra el baseline). El `<li>` ya es ítem flex de
   la lista, así que no hace falta que su contenido sea inline. */
.ipropanel-site-header__idiomas {
	display: flex;
	align-items: center;
}

/* Los enlaces son cajas flex y no `inline-block` como el resto de los ítems
   del nav: el separador de abajo, como caja **inline**, estiraba la línea del
   enlace a 56px y con ella el header entero (88 → 104 medidos contra el
   baseline). Como ítem flex no participa del cálculo de línea base y el
   enlace vuelve a medir sus 32px. */
.ipropanel-site-header__idioma {
	display: flex;
	align-items: center;
	/* Sin el padding horizontal de `nav-link` y sin encogerse. Los 4px
	   laterales salen del componente «Header links» del archivo, que este
	   control no es: a 1280 el nav ya iba al límite de ancho desde S4.7 —por
	   eso sus ítems son de 14px y no de 16—, y el switcher completo con
	   padding se pasaba ~12px, comprimiendo la lista hasta hacer que
	   «¿Quiénes somos?» envolviera a dos líneas y el header creciera de 88 a
	   104. El alto de 32px no cambia: el padding vertical se conserva. */
	padding-inline: 0;
	flex: 0 0 auto;
	white-space: nowrap;

	/* WCAG 2.2 AA 2.5.8 pide 24x24 de objetivo. «ES» medía 18,2 de ancho
	   («EN» ya daba 29,77). Se llega con `min-width` y NO con padding, que
	   es lo que el comentario de arriba deja documentado como imposible: el
	   padding horizontal del componente del archivo pasaba el nav ~12px de
	   su ancho a 1280 y hacía envolver «¿Quiénes somos?». `min-width`
	   cuesta 5,8px —solo lo que le falta a «ES»—, y esos 5,8 se pagan
	   estrechando el separador de abajo, que ocupaba 9px de los que ahora
	   usa 3. Medido: el header sigue en **88** y el switcher pasa de 47,97
	   a **48** — 0,03px de diferencia en todo el control. Sin la
	   compensación NO cabe: probado, el header se iba a **104**, que es
	   exactamente lo que predice el comentario de arriba. */
	min-width: 24px;
	justify-content: center;
}

/* El separador se pinta y no se escribe: como texto sería contenido que un
   lector de pantalla tendría que leer entre dos enlaces, y un string quemado
   más que traducir. Va dentro del segundo enlace por no agregar un nodo
   vacío al DOM; el precio es 9px de área de clic de más, sin consecuencia. */
.ipropanel-site-header__idioma + .ipropanel-site-header__idioma::before {
	content: "";
	width: 1px;
	height: 14px;
	/* Repartido a los dos lados y no solo a la derecha: sin el padding
	   horizontal del enlace, los 8px de un solo lado dejaban la barra pegada
	   al primer idioma. Bajan de 4 a 1 en S11.3 para pagar el `min-width`
	   de 24px que WCAG 2.5.8 le exige a «ES»: el nav no tiene ancho de
	   sobra a 1280 y el aire del separador es lo único que se le puede
	   quitar sin tocar los ítems de menú. El separador no queda pegado al
	   texto —el `min-width` deja 2,9px de aire propio a cada lado de «ES»,
	   así que la barra sigue a ~3,9px del primer idioma. */
	margin-inline: 1px;
	background-color: var( --wp--custom--color--border-light );
	flex: 0 0 auto;
}

.ipropanel-site-header__dropdown {
	position: relative;
}

.ipropanel-site-header__dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--footer-body );
	line-height: 24px;
	font-weight: 400;
	color: var( --wp--preset--color--neutral-white );
	transition: opacity var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

@media ( hover: hover ) {
	.ipropanel-site-header__dropdown-trigger:hover {
		opacity: 0.8;
	}
}

.ipropanel-site-header__dropdown-trigger:active {
	opacity: 0.8;
}

.ipropanel-site-header__dropdown-chevron {
	width: 17px;
	height: 8px;
	transition: transform var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

.ipropanel-site-header__dropdown-trigger[ aria-expanded='true' ] .ipropanel-site-header__dropdown-chevron {
	transform: rotate( 180deg );
}

.ipropanel-site-header__dropdown-panel {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
	padding: 8px;
	border-radius: var( --wp--custom--border-radius--md );
	background-color: var( --wp--custom--color--overlay-popup );
}

.ipropanel-site-header__dropdown-panel[ hidden ] {
	display: none;
}

.ipropanel-site-header__dropdown-option {
	display: block;
	width: 100%;
	padding: 8px;
	border: 0;
	border-radius: var( --wp--custom--border-radius--sm );
	background: transparent;
	cursor: pointer;
	text-align: left;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--boton );
	line-height: 24px;
	font-weight: 500;
	color: var( --wp--preset--color--neutral-white );
	white-space: nowrap;
}

@media ( hover: hover ) {
	.ipropanel-site-header__dropdown-option:hover {
		background-color: var( --wp--custom--color--hover-light );
	}
}

.ipropanel-site-header__dropdown-option:active {
	background-color: var( --wp--custom--color--hover-light );
}

.ipropanel-site-header__cta {
	flex-shrink: 0;
	/* Desde DT.10 el CTA es `<button>` o `<a>` según tenga destino configurado.
	   Un `<button>` centra su texto solo; un `<a>` con `height` no, así que las
	   tres declaraciones de abajo igualan las dos formas. `text-decoration` va
	   por lo mismo. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	/* Instancia desktop del `Button` (393:169, leída vía MCP): 137×40 con
	   `px-16 py-8`. El alto de 48 + padding 12/32 que había antes es la
	   instancia MOBILE (625:4261, panel del menú), y era la causa real de
	   que el header midiera 96 de contenido en vez de 88 — la fila del
	   header la define el CTA, que es el elemento más alto. */
	height: 40px;
	padding: 8px 16px;
	border: 0;
	border-radius: var( --wp--custom--border-radius--full );
	background-color: var( --wp--preset--color--primary-light-blue );
	box-shadow: var( --wp--preset--shadow--shadow-lg );
	cursor: pointer;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--boton );
	line-height: 24px;
	font-weight: 600;
	/* `RD-04` (S16.3, V22): blanco, que es lo que pinta el nodo. Este es **el
	   botón teal del header**, el caso que V22 nombró por adelantado: el par da
	   **3,00 : 1** contra el 4,5 que WCAG 2.2 AA 1.4.3 exige a 16px/600, o sea
	   que NO cumple. Se aplica igual porque una instrucción escrita y posterior
	   del diseñador prevalece (V22), y el número queda registrado y vuelve a
	   consulta. Revierte `D-62`, que había puesto `neutral-black` (6,99 : 1).
	   Fundamento completo en `blocks/project-info/style.css`. */
	color: var( --wp--preset--color--neutral-white );
	transition: background-color var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado ), color var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

/* Verificado vía MCP contra Figma (component set "Button" 257:50,
   variant Primary/Hover 393:493): el hover no es una opacidad, cambia
   fondo a amarillo + texto a negro. `:active` cubre tablet/mobile
   (INTERACTIONS.md §4: sin hover táctil, mismo look al presionar).
   Guarda `@media ( hover: hover )` y reglas separadas por S11.1 — el porqué,
   en la forma canónica de `blocks/project-info/style.css`. */
@media ( hover: hover ) {
	.ipropanel-site-header__cta:hover {
		background-color: var( --wp--preset--color--primary-yellow );
		color: var( --wp--preset--color--neutral-black );
	}
}

.ipropanel-site-header__cta:active {
	background-color: var( --wp--preset--color--primary-yellow );
	color: var( --wp--preset--color--neutral-black );
}

@media ( max-width: 767px ) {
	/* Scrim del symbol mobile (393:355), más suave que el desktop. */
	.ipropanel-site-header {
		background-color: var( --wp--custom--color--header-scrim-mobile );
	}

	/* Frame mobile 393:378: 414×68, padding 24/32. El alto es fijo en el
	   archivo y el contenido (logo 24, botón 40) se centra dentro — por
	   eso aquí solo se declara el alto y el padding lateral, y el
	   `align-items: center` de la regla base hace el resto. Declarar
	   además `padding-block: 24px` empujaría el alto a 88 y contradiría
	   el frame. */
	.ipropanel-site-header__inner {
		min-height: 68px;
		padding-block: 0;
	}

	/* Logo mobile 393:356: 103.343 × 24 (desktop 393:61 es 111.955 × 26). */
	.ipropanel-site-header__logo img {
		height: 24px;
	}

	.ipropanel-site-header__menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 8px;
	}

	.ipropanel-site-header__menu-icon {
		display: block;
		width: 24px;
		height: 24px;
	}

	.ipropanel-site-header__backdrop:not( [ hidden ] ) {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 100vh;
		background-color: var( --wp--custom--color--header-backdrop );
		z-index: 9;
	}

	.ipropanel-site-header__nav-wrapper[ hidden ] {
		display: none;
	}

	/* Panel del menú — frame `Menu` (156:4333, leído vía MCP): fill
	   `rgba(0,0,0,0.5)` + sombra `0 2px 8px rgba(0,0,0,0.3)` + efecto
	   glass. El `Navigation` interno (156:4292) confirma `px-30 py-24` y
	   `gap 32` — que es exactamente lo que ya había, así que el "inset
	   32" que reportaba el QA mobile no se sostiene y no se toca.
	   El panel se ancla al header con `top: 100%`, no a un valor
	   absoluto: al bajar el header de 128 a 68 se reubica solo.
	   `align-items: stretch` (override del `center` base): verificado
	   contra el mismo frame que el nav y el CTA ocupan el ancho completo
	   del panel — sin esto el `<nav>` se encoge y el `center` heredado
	   lo centra como bloque. */
	.ipropanel-site-header__nav-wrapper:not( [ hidden ] ) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		padding: 24px 30px;
		gap: 32px;
		background-color: var( --wp--custom--color--menu-panel-bg );
		backdrop-filter: var( --wp--custom--effect--glass-blur );
		box-shadow: var( --wp--preset--shadow--shadow-menu-panel );
	}

	/* El panel mobile es una columna a ancho completo: no hay aire
	   horizontal que repartir y el `margin-inline: auto` del desktop
	   centraría el `<nav>` como bloque. */
	.ipropanel-site-header__nav {
		margin-inline: 0;
	}

	.ipropanel-site-header__nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	/* Mobile (156:4333) sí usa 16px (`boton`) — el ajuste a 14px de
	   arriba es específico del nav desktop apretado en 1 fila.
	   `padding: 0`: en el archivo los ítems del panel son texto suelto
	   (16/24) sin caja propia, así que con el `gap: 16` de la lista el
	   pitch da los 40px del frame; el `padding: 4px` heredado del
	   desktop lo subía a 48 (hallazgo A-36). */
	.ipropanel-site-header__nav-link,
	.ipropanel-site-header__dropdown-trigger {
		font-size: var( --wp--preset--font-size--boton );
		padding: 0;
	}

	/* Instancia mobile del `Button` (625:4261): 48 de alto, padding
	   12/32 y ancho completo — distinta de la desktop (393:169, 40 /
	   8-16), que es la que declara la regla base. */
	.ipropanel-site-header__cta {
		height: 48px;
		padding: 12px 32px;
	}

	.ipropanel-site-header__dropdown-panel {
		position: static;
		min-width: 0;
		width: 100%;
		padding: 0;
		background-color: transparent;
	}

	.ipropanel-site-header__cta {
		width: 100%;
	}
}