/*
 * Selector de moneda.
 *
 * Usa las custom properties del tema (tokens.css). Si el módulo se instalara con
 * otro tema que no las define, los valores de respaldo mantienen algo usable en
 * vez de romperse.
 *
 * Vive dentro de la cabecera, que es NEGRA: todos los colores de acá salen de la
 * familia inversa de tokens. Los respaldos también son claros, por si el módulo
 * cae en un tema sin esas variables.
 *
 * ES TEXTO, NO UN WIDGET. Tenía caja con borde, relleno rosa en la opción activa
 * y dos botones de 44px de ancho: al lado de cuatro íconos de trazo fino, era la
 * pieza más pesada de la barra y se leía como un control pegado encima, no como
 * parte del encabezado. El mismo criterio que ya tiene la tienda con el orden de
 * la grilla —"el select sin caja, como texto"— y con el CTA del hero, que es un
 * enlace subrayado y no un botón: en un clima, el rectángulo sólido delata.
 *
 * El estado activo no se apoya solo en el color: sube a blanco (18.88:1 contra
 * los 9.52:1 del gris, o sea también más claro, no solo distinto), engorda el
 * trazo y lleva un subrayado rosa pegado al texto. Y en el markup va
 * aria-pressed, que es lo que lee un lector de pantalla.
 */

.wesh-selector {
	display: inline-flex;
	align-items: center;
}

.wesh-selector__opcion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Alto de dedo completo, ancho el del texto: el área táctil no necesita
	   dibujarse para existir, y es lo que hacía ver grande al selector. */
	min-height: 44px;
	padding-inline: var(--esp-2xs, 0.5rem);
	background: none;
	border: 0;
	/* Era --color-texto-suave, que NO existe en tokens.css: caía siempre al
	   respaldo #707070, y ese gris sobre el negro de la cabecera da 3.8:1, por
	   debajo del 4.5:1 de AA. El token real para texto de servicio sobre oscuro
	   es este, que da 9.52:1. */
	color: var(--color-texto-secundario-inverso, #B8B8B8);
	font-family: inherit;
	/* 12px, el mismo cuerpo que la navegación: así entra en la voz tipográfica
	   de la barra en vez de competir con ella. El tracking es el de las migas y
	   no el de las versalitas: 0.18em sobre tres caracteres desarma la palabra. */
	font-size: var(--txt-xs, 0.75rem);
	font-weight: var(--peso-medio, 500);
	letter-spacing: 0.04em;
	line-height: 1;
	cursor: pointer;
	transition: color var(--transicion, 160ms ease-out);
}

.wesh-selector__opcion:hover {
	color: var(--color-texto-inverso, #FFFFFF);
}

/*
 * La moneda elegida.
 *
 * El subrayado va con text-decoration y no con un borde: un border-block-end en
 * un botón de 44px se dibuja en el borde de abajo del área táctil, a doce
 * píxeles del texto y flotando solo. Así queda pegado a la palabra, y el offset
 * lo mantiene despegado de la coma de "Gs.".
 */
.wesh-selector__opcion.esta-activo {
	color: var(--color-texto-inverso, #FFFFFF);
	font-weight: var(--peso-fuerte, 600);
	text-decoration: underline;
	text-decoration-color: var(--color-acento, #F7A7C4);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4em;
}

/* Mientras no hay JavaScript los precios ya están en guaraníes: no hay estado
   intermedio que ocultar ni salto visual que tapar. */