/*
 * Selector de idioma (Español / English).
 *
 * Tres paginas ofrecen el cambio de idioma — la landing, el login y Configuración — y las dos
 * ultimas comparten este componente. Vive en su propia hoja y no en `login.css` ni en
 * `configuracion.css` porque esas dos tienen su mapa de colores congelado byte a byte por
 * `tests/estilosExtraidos.test.js` y `tests/migracionHojasLimpias.test.js`: el chrome nuevo entra
 * como hoja nueva, igual que en su dia entro `sidebar_module.css`.
 *
 * La opcion activa la marca `idioma.js` con `aria-pressed`, asi que el estado no necesita una
 * clase ni una segunda fuente de verdad. Cada variante toma los tokens de su pagina y trae su
 * respaldo, para que la hoja sirva aunque se enlace sola.
 */

.login-lang {
	position: absolute;
	top: 20px;
	right: 68px;
	z-index: 10;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--metro-surface, #ffffff);
	border: 1px solid var(--metro-border, #e5e7eb);
	border-radius: var(--metro-radius, 2px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.login-lang button {
	padding: 4px 9px;
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--metro-text-muted, #6b7280);
	background: transparent;
	border: none;
	border-radius: var(--metro-radius, 2px);
	cursor: pointer;
	transition: all 0.15s;
}

.login-lang button:hover {
	color: var(--metro-violet, #7c3aed);
}

.login-lang button[aria-pressed="true"] {
	color: var(--on-grad, #ffffff);
	background: var(--metro-violet, #7c3aed);
}

.cfg-lang {
	display: flex;
	gap: 8px;
}

.cfg-lang button {
	flex: 1;
	padding: 8px;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--cfg-texto, #374151);
	background: var(--cfg-superficie, #ffffff);
	border: 1px solid var(--cfg-borde, #d1d5db);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s;
}

.cfg-lang button:hover {
	border-color: var(--cfg-borde-hover, #6366f1);
}

.cfg-lang button[aria-pressed="true"] {
	color: var(--cfg-acento-texto, #3730a3);
	background: var(--cfg-acento-fondo, #eef2ff);
	border-color: var(--cfg-acento, #4f46e5);
}