/**
 * Estilos del selector de idioma.
 *
 * Regla de oro: aquí va SOLO lo estructural — cómo se colocan las piezas y cómo se abre y
 * cierra el panel. Nada de tipografía, color ni fondo: eso lo pone el usuario desde la
 * pestaña de Diseño con los controles de Divi, y si este archivo lo fijara, esos controles
 * dejarían de funcionar y parecería un fallo del módulo. Es el error que tiene el selector
 * que había instalado: estilos propios cerrados que no se dejan tocar.
 */

.pdi-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	position: relative;
}

.pdi-idioma {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	text-decoration: none;
	/* `color: inherit` para que el color salga del grupo de fuente del módulo y no del
	   estilo de enlace del tema. Sin esto, el selector de color de Divi no haría nada. */
	color: inherit;
}

/* El tamaño sale de una variable: por defecto va atado al tamaño del texto (`1.25em`), y
   si el usuario fija uno en el panel, el módulo escribe la variable y manda ese. Una sola
   fuente de verdad para las dos formas. */
.pdi-bandera-caja {
	display: block;
	flex: 0 0 auto;
	width: var( --pdi-bandera-tam, 1.25em );
	line-height: 0;
}

.pdi-bandera {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Círculo ────────────────────────────────────────────────────────────────
 * La caja es la que redondea y RECORTA; la imagen de dentro se amplía hasta cubrirla.
 *
 * ☠ NO BASTA CON `object-fit: cover` SOBRE LA IMAGEN. Medido en las banderas que sirve
 * wpLingua: el archivo es de 72×72 pero **la bandera solo ocupa 72×52**, con 10 px
 * transparentes arriba y abajo. Como esas bandas son parte de la imagen, `cover` las
 * recorta junto al dibujo y el círculo queda con aire: no se rellena. Por eso el zoom.
 *
 * Y el zoom va en la IMAGEN, no en la caja: escalando la caja se escala también su
 * `border-radius` y lo que crece es el círculo entero.
 *
 * El 1.4 no es a ojo: 72/52 = 1.385, lo justo para que el dibujo cubra el alto. Se deja un
 * pelo de más para que no asome el borde por un redondeo. */
.pdi-bandera--circulo {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
}

.pdi-bandera--circulo .pdi-bandera {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale( 1.4 );
}

.pdi-separador {
	opacity: 0.45;
	user-select: none;
}

/* ── Desplegable ────────────────────────────────────────────────────────────
   El disparador es un <button> de verdad (tabulador, Enter, barra espaciadora, y los
   lectores de pantalla lo anuncian como botón). Se le quita el aspecto de botón del
   navegador, no su comportamiento. */
/* Lo mínimo para que el panel se lea, y NADA MÁS.
 *
 * ☠ SIN SOMBRA POR DEFECTO. La tenía puesta y Hugo señaló el fallo: para QUITAR una sombra
 * no hay valor que ponerle en el panel de ajustes —elegir «sin sombra» no emite CSS—, así
 * que la mía se habría quedado clavada para siempre. Mi argumento de «la pongo con poca
 * especificidad y el usuario la sobrescribe» solo vale para lo que se cambia por otro
 * valor (un color, un tamaño), no para lo que se quita. La sombra la pone él si la quiere,
 * desde Diseño → Panel del desplegable.
 *
 * El fondo sí se queda: un panel flotante sin fondo se lee encima del contenido de debajo,
 * y ese sí se puede cambiar por otro color —incluido transparente, que emite CSS y por
 * tanto gana—. Va con la especificidad más baja posible (una sola clase) para que el CSS
 * que genera Divi, que lleva el selector del módulo delante, se imponga sin `!important`. */
.pdi-panel {
	background: #fff;
	padding: 0.6em 0.8em;
}

.pdi-disparador {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	line-height: inherit;
}

.pdi-flecha {
	width: 0;
	height: 0;
	border-left: 0.3em solid transparent;
	border-right: 0.3em solid transparent;
	border-top: 0.3em solid currentColor;
	transition: transform 160ms ease;
}

.pdi-desplegable .pdi-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-width: 100%;

	/* Cerrado: invisible, sin ocupar sitio en el flujo y —lo importante— **no
	   enfocable**. Con `visibility: hidden` el tabulador se salta los enlaces de dentro;
	   con solo `opacity: 0` seguirían siendo alcanzables y el foco se perdería en un panel
	   que no se ve. */
	visibility: hidden;
	opacity: 0;
	transform: translateY( -0.25em );
	transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

/* Abierto: por clic (la clase la pone el JS) o por teclado (`:focus-within`).
 *
 * ☠ NADA DE `:hover`. Lo tenía puesto «por si el JS falla» y creaba un fallo peor: con el
 * puntero encima del selector, el segundo clic quitaba la clase pero el panel SEGUÍA
 * abierto por el hover. Medido con clics reales: `abierto: false` y `visibility: visible`
 * a la vez. Para el usuario, un desplegable que no se cierra.
 * Abrir por hover y cerrar por clic son dos formas de mandar sobre lo mismo, y siempre
 * gana la que el usuario no eligió. Se queda el clic, que es el que él controla — y el
 * teclado, que sigue funcionando aunque el JS no cargue. */
/* ☠ Y el `:focus-within` va en el PANEL, no en el contenedor. En el contenedor incluye al
 * botón, y como pulsarlo lo deja enfocado, el panel se quedaba abierto por el foco después
 * de que el clic le quitara la clase: ni el segundo clic ni Escape lo cerraban (un clic
 * fuera sí, porque ahí el botón perdía el foco). Es el mismo error que el `:hover`, con
 * otra cara — dos cosas mandando sobre lo mismo. En el panel solo sirve para lo que hace
 * falta: que no se cierre mientras se recorren sus enlaces con el tabulador. */
.pdi-desplegable.pdi-abierto .pdi-panel,
.pdi-desplegable .pdi-panel:focus-within {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.pdi-desplegable.pdi-abierto .pdi-flecha {
	transform: rotate( 180deg );
}

/* Quien tenga «menos movimiento» activado no necesita que esto se deslice. */
@media ( prefers-reduced-motion: reduce ) {
	.pdi-desplegable .pdi-panel,
	.pdi-flecha {
		transition: none;
	}
}