.baml-lang-switcher {
	position: relative;
	display: inline-block;
	font-size: 0.8em;
	line-height: 1;
	/* Cuando se inserta vía shortcode junto a otro elemento (ej. el grupo
	   de iconos del header, insertado como flex-sibling en el mismo
	   contenedor), asegura que quede centrado verticalmente con él sin
	   depender de qué layout use ese contenedor: align-self resuelve el
	   caso flex/grid (no tiene efecto si el padre no lo es), vertical-align
	   resuelve el caso inline/inline-block (idem, sin efecto si no aplica). */
	align-self: center;
	vertical-align: middle;
}

/* En mobile (<=768px, mismo breakpoint que el menú hamburguesa de
   GeneratePress, filtro generate_mobile_media_query) el switcher queda en
   la posición natural del hook (junto al logo) — no hay espacio para
   moverlo sin pelear contra el flex-wrap que GP ya fuerza en esa fila. */
.baml-lang-switcher {
	margin-left: 0.75em;
}

/* generate_not_mobile_menu_media_query, mismo breakpoint que usa
   GeneratePress para "no es mobile" (inc/css-output.php). Acá el switcher
   se separa del logo y se manda al final de la fila del header — después
   del menú principal, en el extremo derecho, el mismo lugar donde iría un
   futuro grupo de iconos (búsqueda/cuenta/carrito). Requiere que el padre
   flex (.inside-header) no reordene esto por su cuenta; no toca el resto
   del layout de GP, solo la posición de este elemento dentro de él. */
@media (min-width: 769px) {
	.baml-lang-switcher {
		order: 1;
		margin-left: 1.5em;
	}
}

.baml-lang-current {
	display: flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.4em 0.75em;
	border: 1px solid currentColor;
	border-radius: 999px;
	opacity: 0.75;
	cursor: pointer;
	user-select: none;
	list-style: none; /* Firefox: oculta el triángulo nativo del <summary>. */
	margin-bottom: 0.5em;
}

/* Chrome/Safari: el triángulo nativo del <summary> no se oculta con
   list-style, necesita este selector propio del motor WebKit/Blink. */
.baml-lang-current::-webkit-details-marker {
	display: none;
}

.baml-lang-current::after {
	content: '\25BE'; /* ▾ */
	font-size: 0.85em;
}

.baml-lang-switcher:hover .baml-lang-current,
.baml-lang-switcher[open] .baml-lang-current {
	opacity: 1;
}

/* Respaldo (ver class-baml-public.php::render_lang_switcher_fallback()):
   solo se imprime si 'generate_after_header_content' nunca dispara, en
   'wp_footer' — ahí ya no hay ningún contenedor del header como padre, así
   que en vez de flujo normal (quedaría suelto después de todo el
   contenido) se fija con position:fixed a una esquina de la ventana. Misma
   posición en mobile y desktop a propósito: a diferencia del switcher
   normal (que al vivir en el header sí tiene una "posición natural" junto
   al logo en mobile), acá no existe tal cosa de la que depender. */
.baml-lang-switcher--fallback {
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index: 9999;
	background: #fff;
	color: #111;
	padding: 0.15em;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* El desplegable por default abre hacia abajo (`top: calc(100% + ...)`) —
   con el pill ya pegado al borde inferior de la ventana, eso lo mandaría
   fuera de la pantalla. Se abre hacia arriba en su lugar. */
.baml-lang-switcher--fallback .baml-lang-menu {
	top: auto;
	bottom: calc(100% + 0.4em);
}

.baml-lang-menu {
	position: absolute;
	top: calc(100% + 0.4em);
	right: 0;
	z-index: 50; /* Por encima del submenu del <nav> principal de GP. */
	display: flex;
	flex-direction: column;
	min-width: 8em;
	padding: 0.4em 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.4em;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.baml-lang-link {
	padding: 0.5em 1em;
	text-decoration: none;
	white-space: nowrap;
}

.baml-lang-link:hover {
	background: rgba(0, 0, 0, 0.04);
}

.baml-lang-link--active {
	font-weight: 700;
}