/**
 * Rio360 — Menú flotante inferior (móvil).
 *
 * Pastilla oscura, baja y muy redondeada (estilo iOS),
 * sin borde de color, con un botón central destacado
 * dentro de un círculo del color de acento.
 */

.rio360-fm {
	position: fixed;
	left: 50%;
	bottom: calc( var( --rio360-fm-offset, 14px ) + env( safe-area-inset-bottom, 0px ) );
	transform: translateX(-50%);
	z-index: 99990;
	width: calc( 100% - 28px );
	max-width: 420px;
	border-radius: 26px;
	background: var( --rio360-fm-bg, #14141c );
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/*
 * Arranque de la página: mientras se ve la franja
 * superior (el menú del tema todavía está a la
 * vista) la barra se mantiene escondida.
 */
.rio360-fm.is-at-top {
	transform: translateX(-50%) translateY( calc( 100% + 24px ) );
	opacity: 0;
	pointer-events: none;
}

.rio360-fm__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	margin: 0;
	padding: 0 6px;
	list-style: none;
}

.rio360-fm__cell {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.rio360-fm__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	height: 52px;
	border: 0;
	text-decoration: none;
	color: var( --rio360-fm-icon, #9aa0b4 );
	-webkit-tap-highlight-color: transparent;
	transition: color 0.2s ease, transform 0.15s ease;
}

.rio360-fm__item:hover,
.rio360-fm__item:focus {
	color: var( --rio360-fm-icon-active, #fff );
	text-decoration: none;
}

.rio360-fm__item.is-active {
	color: var( --rio360-fm-icon-active, #fff );
}

.rio360-fm__item:active {
	transform: scale(0.94);
}

.rio360-fm__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.rio360-fm__icon svg {
	width: 22px;
	height: 22px;
}

.rio360-fm__label {
	font-size: 10px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.1px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Botón de la página actual: círculo de acento
 * levantado un poco sobre la barra. Sin borde de
 * color, para que se lea como un botón de iOS y no
 * como una pestaña.
 */
.rio360-fm__item.is-active {
	height: auto;
	gap: 3px;
}

.rio360-fm__item.is-active .rio360-fm__icon {
	width: 46px;
	height: 46px;
	margin-top: -14px;
	border-radius: 50%;
	background: var( --rio360-fm-accent, #EF4444 );
	color: var( --rio360-fm-accent-icon, #fff );
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

.rio360-fm__item.is-active .rio360-fm__icon svg {
	width: 24px;
	height: 24px;
}

/* Si el sello es el botón de la página actual, crece con su círculo. */
.rio360-fm__item.is-active .rio360-fm__marca {
	font-size: 12px;
	height: 24px;
	width: 33px;
}

.rio360-fm__item.is-active .rio360-fm__label {
	color: var( --rio360-fm-icon-active, #fff );
	margin-bottom: 6px;
}

/* ------------------------------------------------------------------ */
/* Al pasar el ratón                                                    */
/* ------------------------------------------------------------------ */

/*
 * Solo donde hay ratón de verdad.
 *
 * En una pantalla táctil el :hover se queda pegado después de tocar:
 * el globito y el círculo se quedarían puestos sobre el botón que
 * acabas de pulsar, mintiendo sobre en qué página estás. `hover: hover`
 * deja fuera a los dedos.
 */
@media (hover: hover) and (pointer: fine) {

	/*
	 * El botón bajo el cursor se levanta igual que el de la página
	 * actual. Es la misma promesa: "esto es lo que va a pasar si
	 * pulsas aquí".
	 *
	 * Nada de esto cambia el tamaño de la caja, y esa es la parte
	 * importante. La primera versión agrandaba el icono y lo subía con
	 * un margen: al acercar el cursor a un borde, el botón se movía,
	 * se escapaba de debajo del puntero, perdía el hover, volvía a su
	 * sitio, lo recuperaba... y titilaba. Un elemento no puede moverse
	 * como respuesta a estar bajo el ratón.
	 *
	 * Se dibuja con transform y con un círculo pintado detrás: los dos
	 * son cosméticos, la caja que recibe el ratón se queda quieta.
	 */
	.rio360-fm__icon::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 46px;
		height: 46px;
		margin: -23px 0 0 -23px;
		border-radius: 50%;
		background: var( --rio360-fm-accent, #EF4444 );
		box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.32 );
		opacity: 0;
		transform: scale( 0.5 );
		transition: transform 0.24s cubic-bezier( 0.34, 1.28, 0.64, 1 ), opacity 0.16s ease;
	}

	/*
	 * El icono, por encima del círculo.
	 *
	 * El sello «360» va aquí también, y no es un detalle: es lo único
	 * de la barra que no es un <svg>, así que sin nombrarlo se quedaba
	 * debajo del círculo rojo y al pasar el ratón el botón entero se
	 * veía como una mancha roja sin nada escrito.
	 */
	.rio360-fm__icon svg,
	.rio360-fm__icon .rio360-fm__marca,
	.rio360-fm__icon .rio360-fm__idioma {
		position: relative;
		z-index: 1;
	}

	.rio360-fm__icon {
		position: relative;
		transition: transform 0.24s cubic-bezier( 0.34, 1.28, 0.64, 1 ), color 0.18s ease;
	}

	.rio360-fm__item:hover .rio360-fm__icon,
	.rio360-fm__item:focus-visible .rio360-fm__icon {
		transform: translateY( -14px );
		color: var( --rio360-fm-accent-icon, #fff );
	}

	.rio360-fm__item:hover .rio360-fm__icon::before,
	.rio360-fm__item:focus-visible .rio360-fm__icon::before {
		opacity: 1;
		transform: scale( 1 );
	}

	/*
	 * El de la página actual ya tiene su círculo de verdad; no le hace
	 * falta el pintado, solo que no se mueva al pasarle por encima.
	 */
	.rio360-fm__item.is-active .rio360-fm__icon::before {
		content: none;
	}

	.rio360-fm__item.is-active:hover .rio360-fm__icon,
	.rio360-fm__item.is-active:focus-visible .rio360-fm__icon {
		transform: none;
	}

	/*
	 * El globito con el nombre.
	 *
	 * Se pinta con el atributo del enlace y no con el <span> del
	 * texto, porque ese span puede estar oculto para lectores de
	 * pantalla y no se puede mover de sitio sin romperlo.
	 */
	.rio360-fm__item::after {
		content: attr( data-rio360-fm-label );
		position: absolute;
		/*
		 * Los 20 px de más no son estéticos: el círculo se levanta
		 * catorce por encima de su propia caja, así que un globito
		 * pegado al 100% le caería encima.
		 */
		bottom: calc( 100% + 24px );
		left: 50%;
		transform: translateX( -50% ) translateY( 4px );
		padding: 5px 10px;
		border-radius: 8px;
		background: var( --rio360-fm-bg, #14141c );
		color: var( --rio360-fm-icon-active, #fff );
		font-size: 11px;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.28 );
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.18s ease, transform 0.24s cubic-bezier( 0.34, 1.28, 0.64, 1 );
	}

	.rio360-fm__item:hover::after,
	.rio360-fm__item:focus-visible::after {
		opacity: 1;
		transform: translateX( -50% ) translateY( 0 );
	}

	/*
	 * La puntita del globito.
	 *
	 * Es un cuadrado girado 45 grados, no un triángulo de bordes: así
	 * puede llevar la esquina redondeada como el resto del globo, y
	 * comparte el mismo color de fondo, de modo que la unión no se ve.
	 * Se solapa cinco píxeles con el globo para que no quede costura.
	 */
	.rio360-fm__item::before {
		content: "";
		position: absolute;
		bottom: calc( 100% + 19px );
		left: 50%;
		width: 10px;
		height: 10px;
		border-radius: 0 0 2px 0;
		background: var( --rio360-fm-bg, #14141c );
		opacity: 0;
		pointer-events: none;
		transform: translateX( -50% ) rotate( 45deg ) translateY( 4px );
		transition: opacity 0.18s ease, transform 0.24s cubic-bezier( 0.34, 1.28, 0.64, 1 );
	}

	.rio360-fm__item:hover::before,
	.rio360-fm__item:focus-visible::before {
		opacity: 1;
		transform: translateX( -50% ) rotate( 45deg ) translateY( 0 );
	}

	/*
	 * La celda ancla el globito. Sin esto se colocaría respecto a la
	 * barra entera y todos los nombres saldrían en el mismo sitio.
	 */
	.rio360-fm__item {
		position: relative;
	}

}

/* Con textos la pastilla necesita algo más de alto. */
.rio360-fm--labels .rio360-fm__item:not(.is-active) {
	height: 58px;
}

/*
 * Deja aire al final de la página para que la barra
 * no tape el último bloque de contenido.
 */

@media (max-width: 360px) {

	.rio360-fm__icon svg {
		width: 20px;
		height: 20px;
	}

	.rio360-fm__item.is-active .rio360-fm__icon {
		width: 42px;
		height: 42px;
	}

}

/* ------------------------------------------------------------------ */
/* El cambio de idioma                                                 */
/* ------------------------------------------------------------------ */

/*
 * Dos letras en vez de un icono.
 *
 * Una banderita dice de qué país es el idioma, no qué idioma es —el
 * inglés no es de una sola bandera y a nadie le sirve adivinar—, y un
 * globo terráqueo no dice a cuál va a cambiar. «EN» y «ES» se leen sin
 * pensar y ocupan lo mismo que un icono.
 */
.rio360-fm__idioma {
	align-items: center;
	border: 1.5px solid currentColor;
	border-radius: 7px;
	display: flex;
	font-size: 11px;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	letter-spacing: 0.02em;
	line-height: 1;
	width: 26px;
}

/*
 * El sello «360», para volver a Rio360 desde Rio360Ya.
 *
 * Mismo trato que «EN»: la marca escrita en vez de un dibujo. Se probó
 * dibujar al diablito y a 22 píxeles sale un conejo; su tridente, con
 * una sola línea, es igual que la psi de psicología. Tres cifras se
 * leen sin adivinar y no se parecen a nada más de la barra.
 */
.rio360-fm__marca {
	align-items: center;
	border: 1.5px solid currentColor;
	border-radius: 8px;
	display: flex;
	font-size: 11px;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	letter-spacing: 0.01em;
	line-height: 1;
	width: 30px;
}