/**
 * Selector de idioma de RobertML.
 *
 * Todo va en unidades relativas para que herede el tamaño del tema, y los
 * grises se construyen con rgba sobre currentColor para que funcionen igual
 * sobre fondo claro y sobre fondo oscuro.
 */

.robertml-switcher-block {
	--robertml-muted: rgba( 128, 128, 128, 0.95 );
	--robertml-line: rgba( 128, 128, 128, 0.25 );
	--robertml-wash: rgba( 128, 128, 128, 0.06 );
	margin: 2em 0;
}

.robertml-switcher-heading {
	margin: 0 0 0.6em;
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --robertml-muted );
}

.robertml-switcher {
	margin: 0;
	padding: 0;
	list-style: none;
}

.robertml-switcher .robertml-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.robertml-switcher a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	text-decoration: none;
	box-shadow: none;
}

.robertml-flag {
	flex: none;
	font-size: 0.95em;
	line-height: 1;
}

.robertml-sep {
	color: var( --robertml-muted );
}

/* Lista vertical y fila horizontal */

.robertml-switcher--list .robertml-item + .robertml-item {
	margin-top: 0.15em;
}

.robertml-switcher--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.1em;
	align-items: center;
}

.robertml-switcher .current-lang > a {
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Con el título del artículo
 * ------------------------------------------------------------------ */

.robertml-switcher--with-titles {
	font-size: 0.94em;
	line-height: 1.45;
}

.robertml-switcher--with-titles a {
	display: flex;
	align-items: baseline;
	gap: 0.55em;
	padding: 0.22em 0;
}

/* El idioma queda como etiqueta pequeña en columna: el titular es lo que se
   lee, el idioma solo orienta. */
.robertml-switcher--with-titles .robertml-name {
	flex: none;
	min-width: 5.2em;
	font-size: 0.76em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --robertml-muted );
}

.robertml-switcher--with-titles .robertml-sep {
	display: none;
}

.robertml-switcher--with-titles .robertml-title {
	text-decoration: none;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}

.robertml-switcher--with-titles a:hover .robertml-title,
.robertml-switcher--with-titles a:focus-visible .robertml-title {
	text-decoration: underline;
}

.robertml-switcher--with-titles .current-lang > a {
	font-weight: 400;
	color: inherit;
	cursor: default;
}

.robertml-switcher--with-titles .current-lang .robertml-title {
	font-weight: 600;
}

.robertml-switcher--with-titles.robertml-switcher--inline {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

@media ( max-width: 600px ) {
	.robertml-switcher--with-titles a {
		flex-wrap: wrap;
		gap: 0.15em 0.5em;
	}

	.robertml-switcher--with-titles .robertml-name {
		min-width: 0;
	}

	.robertml-switcher--with-titles .robertml-title {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------
 * Diseños
 * ------------------------------------------------------------------ */

.robertml-skin-rule {
	padding-top: 0.9em;
	border-top: 1px solid var( --robertml-line );
}

.robertml-skin-card {
	padding: 1em 1.2em 1.05em;
	background: var( --robertml-wash );
	border: 1px solid var( --robertml-line );
	border-radius: 10px;
}

.robertml-skin-aside {
	padding: 0.1em 0 0.1em 1em;
	border-left: 2px solid var( --robertml-line );
}

/* Desplegable */

.robertml-switcher--dropdown .robertml-select {
	max-width: 100%;
	font-size: 0.94em;
}

.robertml-switcher--dropdown noscript {
	display: none;
}

/* Insertado automáticamente en el contenido */

.robertml-auto-switcher > .robertml-switcher-block {
	margin-bottom: 0;
}

/* Elementos de idioma dentro de un menú de navegación */

.robertml-menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}