/* ==========================================================================
   Selector de idioma
   --------------------------------------------------------------------------
   Todo se apoya en cuatro clases del contenedor — variante, tamaño, modo de
   visualización y forma de la bandera — para que cambiar de aspecto no exija
   volver a generar el marcado. Es lo que permite la vista previa en vivo del
   panel, y lo que mantiene una sola fuente de verdad para los dos.
   ========================================================================== */

.wms-switcher {
	--wms-accent: #0b6e5f;
	--wms-accent-ink: #ffffff;
	--wms-radius: 4px;

	--wms-font: 14px;
	--wms-flag-w: 20px;
	--wms-pad-y: 6px;
	--wms-pad-x: 10px;
	--wms-gap: 6px;

	display: inline-block;
	max-width: 100%;
	font-size: var(--wms-font);
	line-height: 1.4;
}

.wms-switcher--sm { --wms-font: 12.5px; --wms-flag-w: 17px; --wms-pad-y: 4px; --wms-pad-x: 8px; --wms-gap: 5px; }
.wms-switcher--lg { --wms-font: 15.5px; --wms-flag-w: 24px; --wms-pad-y: 9px; --wms-pad-x: 14px; --wms-gap: 8px; }

.wms-switcher__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wms-switcher__item { margin: 0; }

.wms-switcher__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wms-gap);
	padding: var(--wms-pad-y) var(--wms-pad-x);
	min-height: 32px;
	color: inherit;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 6px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

a.wms-switcher__link { cursor: pointer; }

.wms-switcher__link:focus-visible {
	outline: 2px solid var(--wms-accent);
	outline-offset: 2px;
}

.wms-switcher__item.is-current .wms-switcher__link { cursor: default; font-weight: 600; }

.wms-switcher__item.is-unavailable .wms-switcher__link {
	opacity: .42;
	cursor: not-allowed;
}

/* --------------------------------------------------------------- banderas */

.wms-switcher__flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--wms-flag-w);
	height: calc(var(--wms-flag-w) * 0.6667);
	overflow: hidden;
	border-radius: var(--wms-radius);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* Sobre el color de acento hace falta un aro claro: una bandera con verde
   o azul en el borde se funde con el relleno del idioma activo. */
.wms-switcher__item.is-current .wms-switcher__link .wms-switcher__flag,
.wms-switcher__toggle .wms-switcher__flag {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(0, 0, 0, .12);
}

.wms-switcher--minimal .wms-switcher__item.is-current .wms-switcher__link .wms-switcher__flag,
.wms-switcher--underline .wms-switcher__item.is-current .wms-switcher__link .wms-switcher__flag {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.wms-flag__svg { display: block; width: 100%; height: 100%; }

.wms-switcher--shape-circle .wms-switcher__flag {
	width: var(--wms-flag-w);
	height: var(--wms-flag-w);
	border-radius: 999px;
}

/* La bandera se recorta a un círculo, así que se amplía para que el recorte
   caiga sobre el dibujo y no deje franjas vacías arriba y abajo. */
.wms-switcher--shape-circle .wms-flag__svg { transform: scale(1.5); }

/* Sin dibujo para ese país: un chip con las letras se lee, y nunca parece
   una imagen que no cargó. El gris es neutro a propósito, para no competir
   con el color de acento ni depender del tema. */
.wms-flag__fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(127, 127, 127, .26);
	color: inherit;
	font-size: calc(var(--wms-font) * 0.68);
	font-weight: 700;
	letter-spacing: .01em;
}

/* --------------------------------------------------- modos de visualización */

.wms-switcher__label,
.wms-switcher__code { white-space: nowrap; }

.wms-switcher--d-flag .wms-switcher__label,
.wms-switcher--d-flag .wms-switcher__code,
.wms-switcher--d-flag_text .wms-switcher__code,
.wms-switcher--d-flag_code .wms-switcher__label,
.wms-switcher--d-text .wms-switcher__flag,
.wms-switcher--d-text .wms-switcher__code,
.wms-switcher--d-code .wms-switcher__flag,
.wms-switcher--d-code .wms-switcher__label { display: none; }

.wms-switcher--d-code .wms-switcher__code,
.wms-switcher--d-flag_code .wms-switcher__code {
	font-weight: 600;
	letter-spacing: .04em;
}

.wms-switcher--d-flag .wms-switcher__link { padding-inline: calc(var(--wms-pad-x) * 0.6); }

/* --------------------------------------------------------------- variantes */

/* Botones: cada idioma en su propia caja. */
.wms-switcher--buttons .wms-switcher__link {
	border-color: currentColor;
	border-radius: 7px;
	opacity: .78;
}

.wms-switcher--buttons a.wms-switcher__link:hover { opacity: 1; }

.wms-switcher--buttons .wms-switcher__item.is-current .wms-switcher__link {
	background: var(--wms-accent);
	border-color: var(--wms-accent);
	color: var(--wms-accent-ink);
	opacity: 1;
}

.wms-switcher--buttons .wms-switcher__item.is-unavailable .wms-switcher__link { opacity: .32; }

/* Píldoras: un grupo continuo con el actual relleno. */
.wms-switcher--pills .wms-switcher__list {
	gap: 2px;
	padding: 3px;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.wms-switcher--pills .wms-switcher__link {
	border-radius: 999px;
	opacity: .72;
}

.wms-switcher--pills a.wms-switcher__link:hover { opacity: 1; }

.wms-switcher--pills .wms-switcher__item.is-current .wms-switcher__link {
	background: var(--wms-accent);
	color: var(--wms-accent-ink);
	opacity: 1;
}

/* Mínima: solo texto, con separadores finos. */
.wms-switcher--minimal .wms-switcher__list { gap: 0; }

.wms-switcher--minimal .wms-switcher__link {
	padding-inline: calc(var(--wms-pad-x) * 0.75);
	opacity: .7;
}

.wms-switcher--minimal a.wms-switcher__link:hover { opacity: 1; }
.wms-switcher--minimal .wms-switcher__item.is-current .wms-switcher__link { opacity: 1; }

.wms-switcher--minimal .wms-switcher__item + .wms-switcher__item {
	position: relative;
	padding-left: 1px;
}

.wms-switcher--minimal .wms-switcher__item + .wms-switcher__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 13px;
	margin-top: -6.5px;
	background: currentColor;
	opacity: .3;
}

/* Subrayada: el idioma actual lleva una línea de acento. */
.wms-switcher--underline .wms-switcher__list { gap: 2px; }

.wms-switcher--underline .wms-switcher__link {
	border-radius: 0;
	border-bottom: 2px solid transparent;
	padding-bottom: calc(var(--wms-pad-y) - 1px);
	opacity: .7;
}

.wms-switcher--underline a.wms-switcher__link:hover {
	opacity: 1;
	border-bottom-color: currentColor;
}

.wms-switcher--underline .wms-switcher__item.is-current .wms-switcher__link {
	opacity: 1;
	border-bottom-color: var(--wms-accent);
}

/* Desplegable: <details>, para que abra sin JavaScript. */
.wms-switcher--dropdown { position: relative; }

.wms-switcher__details { position: relative; display: inline-block; }

.wms-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wms-gap);
	padding: var(--wms-pad-y) var(--wms-pad-x);
	min-height: 32px;
	border: 1px solid currentColor;
	border-radius: 7px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.wms-switcher__toggle::-webkit-details-marker { display: none; }
.wms-switcher__toggle::marker { content: ""; }

.wms-switcher__toggle:focus-visible {
	outline: 2px solid var(--wms-accent);
	outline-offset: 2px;
}

.wms-switcher__caret {
	width: 0;
	height: 0;
	margin-left: 1px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .7;
	transition: transform .15s ease;
}

.wms-switcher__details[open] .wms-switcher__caret { transform: rotate(180deg); }

.wms-switcher--dropdown .wms-switcher__list {
	position: absolute;
	z-index: 999;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 0;
	padding: 4px;
	background: #fff;
	color: #1f2933;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 8px;
	box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .35);
}

.wms-switcher--dropdown .wms-switcher__link {
	width: 100%;
	border-radius: 5px;
}

.wms-switcher--dropdown a.wms-switcher__link:hover { background: rgba(0, 0, 0, .06); }

.wms-switcher--dropdown .wms-switcher__item.is-current .wms-switcher__link {
	background: var(--wms-accent);
	color: var(--wms-accent-ink);
}

/* El desplegable pinta su propio panel, así que fija su esquema de color en
   vez de heredar el del tema, que podría dejar texto claro sobre claro. */
@media (prefers-color-scheme: dark) {
	.wms-switcher--dropdown .wms-switcher__list {
		background: #1b242f;
		color: #e6ecf2;
		border-color: rgba(255, 255, 255, .14);
	}

	.wms-switcher--dropdown a.wms-switcher__link:hover { background: rgba(255, 255, 255, .08); }
}

/* ------------------------------------------------------------ colocación */

/* Dentro de un menú del tema. */
li.wms-menu-item { display: flex; align-items: center; }
li.wms-menu-item > .wms-switcher { margin-inline-start: 6px; }

/* Franja sobre la cabecera del tema. */
.wms-bar {
	width: 100%;
	background: rgba(127, 127, 127, .08);
	border-bottom: 1px solid rgba(127, 127, 127, .18);
}

.wms-bar__inner {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	padding: 6px 16px;
}

.wms-bar--left  .wms-bar__inner { justify-content: flex-start; }
.wms-bar--center .wms-bar__inner { justify-content: center; }
.wms-bar--right .wms-bar__inner { justify-content: flex-end; }

/* Esquina fija, para temas sin un hook aprovechable. */
.wms-float {
	position: fixed;
	z-index: 9998;
	padding: 7px 9px;
	background: #fff;
	color: #1f2933;
	border-radius: 10px;
	box-shadow: 0 6px 22px -10px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .08);
}

.wms-float--tl { top: 16px; left: 16px; }
.wms-float--tr { top: 16px; right: 16px; }
.wms-float--bl { bottom: 16px; left: 16px; }
.wms-float--br { bottom: 16px; right: 16px; }

@media (prefers-color-scheme: dark) {
	.wms-float { background: #1b242f; color: #e6ecf2; box-shadow: 0 6px 22px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); }
}

/* --------------------------------------------------------------- respuesta */

@media (max-width: 600px) {
	.wms-switcher--in-bar .wms-switcher__label,
	.wms-switcher--in-float .wms-switcher__label { display: none; }

	.wms-bar__inner { padding-inline: 12px; }
	.wms-float--tl, .wms-float--tr { top: 10px; }
	.wms-float--bl, .wms-float--br { bottom: 10px; }
	.wms-float--tl, .wms-float--bl { left: 10px; }
	.wms-float--tr, .wms-float--br { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.wms-switcher__link,
	.wms-switcher__caret { transition: none; }
}