/**
 * El aviso de «usar como app» y la hoja con los pasos.
 *
 * Flota justo encima del menú flotante, del mismo ancho, para leerse
 * como parte de esa misma barra y no como un anuncio que tapa la
 * página.
 */

.rio360-app-aviso {
	--rio360-app-rojo: #ef4444;

	align-items: center;
	background: #fff;
	border: 1px solid rgba( 22, 19, 15, 0.08 );
	border-radius: 22px;
	bottom: calc( var( --rio360-fm-offset, 14px ) + 84px + env( safe-area-inset-bottom, 0px ) );
	box-shadow: 0 14px 38px rgba( 20, 20, 28, 0.22 );
	box-sizing: border-box;
	color: #16130f;
	display: grid;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	gap: 12px;

	/*
	 * El botón va en su propia fila, a lo ancho, en todos los tamaños.
	 *
	 * Al lado del texto, «Cómo instalarla» se comía la mitad del aviso
	 * y dejaba el texto en una columna de cinco líneas. Y como el aviso
	 * no pasa de 420 px —el ancho del menú flotante—, ni en tablet hay
	 * sitio para la fila: ahí salía igual de apretado.
	 */
	grid-template-areas:
		'icono textos'
		'boton boton';
	grid-template-columns: auto 1fr;
	left: 50%;
	max-width: 420px;
	opacity: 0;
	overflow: hidden;
	padding: 14px 14px 16px;
	pointer-events: none;
	position: fixed;
	transform: translate( -50%, 18px );
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier( 0.2, 0.9, 0.3, 1.2 );
	width: calc( 100% - 28px );
	z-index: 99996;
}

.rio360-app-aviso.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate( -50%, 0 );
}

/*
 * En Rio360Ya el carrito es una franja fija abajo. Con carrito a la
 * vista el aviso sube un poco más para no quedar pegado encima.
 */
body:has( .rio360-ya-carrito:not( [hidden] ) ) .rio360-app-aviso {
	bottom: calc( 96px + env( safe-area-inset-bottom, 0px ) );
}

.rio360-app-aviso__icono {
	background: #fdf8f0;
	grid-area: icono;
	border-radius: 13px;
	box-shadow: 0 2px 8px rgba( 20, 20, 28, 0.12 );
	display: block;
	height: 48px;
	object-fit: cover;
	width: 48px;
}

.rio360-app-aviso__textos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	grid-area: textos;
	min-width: 0;

	/* A la derecha deja sitio para la equis, que va encima. */
	padding-right: 30px;
}

.rio360-app-aviso__titulo {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
}

.rio360-app-aviso__texto {
	color: #6b6760;
	font-size: 0.8125rem;
	line-height: 1.35;
}

/* Selector doble: el tema le pone su propio estilo a los botones. */
.rio360-app-aviso .rio360-app-aviso__boton {
	background: var( --rio360-app-rojo );
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	grid-area: boton;
	margin: 0;
	padding: 12px 14px;
	text-transform: none;
	white-space: nowrap;
	width: 100%;
}

.rio360-app-aviso .rio360-app-aviso__cerrar {
	align-items: center;
	background: rgba( 22, 19, 15, 0.06 );
	border: 0;
	border-radius: 50%;
	box-sizing: border-box;
	color: #6b6760;
	cursor: pointer;
	display: flex;
	height: 28px;
	justify-content: center;
	margin: 0;
	padding: 0 !important;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 28px;
}

.rio360-app-aviso__cerrar:focus-visible,
.rio360-app-aviso__boton:focus-visible {
	outline: 2px solid var( --rio360-app-rojo );
	outline-offset: 2px;
}

/* La barrita que se vacía durante los segundos que dura. */
.rio360-app-aviso__tiempo {
	background: var( --rio360-app-rojo );
	bottom: 0;
	height: 3px;
	left: 0;
	opacity: 0.85;
	position: absolute;
	transform-origin: left center;
	width: 100%;
}

.rio360-app-aviso.is-visible .rio360-app-aviso__tiempo {
	animation: rio360AppTiempo var( --rio360-app-duracion, 30s ) linear forwards;
}

/* Mientras la persona lo toca, la cuenta se detiene y la barra también. */
.rio360-app-aviso.is-pausado .rio360-app-aviso__tiempo {
	animation-play-state: paused;
}

@keyframes rio360AppTiempo {
	from { transform: scaleX( 1 ); }
	to   { transform: scaleX( 0 ); }
}

/* ------------------------------------------------------------------ */
/* La hoja con los pasos                                               */
/* ------------------------------------------------------------------ */

.rio360-app-hoja {
	align-items: flex-end;
	background: rgba( 20, 20, 28, 0.55 );
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	position: fixed;
	transition: opacity 0.25s ease;
	z-index: 2147483200;
}

.rio360-app-hoja.is-visible {
	opacity: 1;
}

.rio360-app-hoja__panel {
	background: #fff;
	border-radius: 26px 26px 0 0;
	box-sizing: border-box;
	color: #16130f;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	max-height: 90svh;
	max-width: 520px;
	overflow-y: auto;
	padding: 22px 20px calc( 20px + env( safe-area-inset-bottom, 0px ) );
	transform: translateY( 24px );
	transition: transform 0.3s cubic-bezier( 0.2, 0.9, 0.3, 1.1 );
	width: 100%;
}

.rio360-app-hoja.is-visible .rio360-app-hoja__panel {
	transform: translateY( 0 );
}

.rio360-app-hoja__cabeza {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 18px;
}

.rio360-app-hoja__icono {
	background: #fdf8f0;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba( 20, 20, 28, 0.12 );
	height: 52px;
	width: 52px;
}

.rio360-app-hoja .rio360-app-hoja__titulo {
	color: #16130f;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

.rio360-app-hoja__pasos {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.rio360-app-hoja__paso {
	align-items: center;
	background: #f7f5f1;
	border-radius: 16px;
	display: grid;
	gap: 12px;
	grid-template-columns: auto 1fr auto;
	margin: 0;
	padding: 12px 14px;
}

.rio360-app-hoja__numero {
	align-items: center;
	background: #16130f;
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-size: 0.8125rem;
	font-weight: 700;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.rio360-app-hoja__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.rio360-app-hoja__cuerpo strong {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.rio360-app-hoja__cuerpo span {
	color: #6b6760;
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* El ícono tal cual se ve en la pantalla del teléfono, en azul de sistema. */
.rio360-app-hoja__dibujo {
	align-items: center;
	background: #fff;
	border-radius: 11px;
	box-shadow: 0 1px 4px rgba( 20, 20, 28, 0.1 );
	color: #0a84ff;
	display: flex;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.rio360-app-hoja__final {
	color: #6b6760;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0 0 16px;
	text-align: center;
}

.rio360-app-hoja .rio360-app-hoja__listo {
	background: #16130f;
	border: 0;
	border-radius: 999px;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	padding: 14px;
	text-transform: none;
	width: 100%;
}

/* En un computador no aplica, aunque el guion ya lo evita. */
@media ( hover: hover ) and ( pointer: fine ) and ( min-width: 1025px ) {
	.rio360-app-aviso {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.rio360-app-aviso,
	.rio360-app-hoja,
	.rio360-app-hoja__panel {
		transition: none;
	}

	.rio360-app-aviso {
		transform: translate( -50%, 0 );
	}
}

/*
 * Contra el tema.
 *
 * Divi pinta los <strong> y los <h2> del sitio con su propio color y
 * tamaño, y en la página publicada ganaban: los pasos salían en letra
 * blanca sobre fondo claro —invisibles— y el título de la hoja en
 * tamaño de portada. Aquí sí hace falta imponerse, porque estos textos
 * no heredan nada del sitio: van sobre fondo propio.
 */
.rio360-app-aviso .rio360-app-aviso__titulo,
.rio360-app-hoja .rio360-app-hoja__cuerpo strong {
	color: #16130f !important;
	font-family: inherit !important;
}

.rio360-app-aviso .rio360-app-aviso__texto,
.rio360-app-hoja .rio360-app-hoja__cuerpo span,
.rio360-app-hoja .rio360-app-hoja__final {
	color: #6b6760 !important;
	font-family: inherit !important;
}

.rio360-app-hoja .rio360-app-hoja__titulo {
	color: #16130f !important;
	font-family: inherit !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	padding: 0 !important;
}