/**
 * Ventana con la ficha breve de un negocio sin página.
 *
 * Mismo lenguaje que el modal de categorías —panel oscuro, esquinas muy
 * redondeadas— para que se lea como parte del sitio y no como otra
 * cosa. Lo que cambia es el contenido: aquí no hay rejilla, hay una
 * ficha.
 */

.rio360-ficha {
	align-items: center;
	background: rgba( 12, 10, 8, 0.72 );
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 20px;
	position: fixed;
	transition: opacity 0.25s ease;

	/*
	 * Por encima de todo lo que la puede abrir: el modal de categorías
	 * y, sobre todo, la lista del buscador, que se pinta casi en el
	 * techo de las capas. Con una por debajo, la ficha se creaba, se
	 * leía en el documento y no se veía: quedaba tapada por lo mismo
	 * que la había lanzado.
	 */
	z-index: 2147483100;
}

.rio360-ficha.is-open {
	opacity: 1;
}

.rio360-ficha__panel {
	background: #1c1b22;
	border-radius: 22px;
	color: #fff;
	max-height: calc( 100vh - 40px );
	max-width: 460px;
	overflow: hidden auto;
	transform: translateY( 10px );
	transition: transform 0.25s ease;
	width: 100%;
}

.rio360-ficha.is-open .rio360-ficha__panel {
	transform: translateY( 0 );
}

/* ---------- Cabecera ---------- */

.rio360-ficha__cabecera {
	position: relative;
}

.rio360-ficha__portada {
	background-position: center;
	background-size: cover;
	height: 130px;
}

/*
 * Un velo sobre la portada: el logo y el nombre van encima, y sin él
 * caen sobre una foto cualquiera que puede ser clara u oscura.
 */
.rio360-ficha__portada::after {
	background: linear-gradient( to bottom, rgba( 28, 27, 34, 0.1 ), #1c1b22 );
	content: '';
	inset: 0;
	position: absolute;
}

.rio360-ficha__cerrar {
	align-items: center;
	background: rgba( 0, 0, 0, 0.55 );
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 22px;
	height: 34px;
	justify-content: center;
	line-height: 1;
	padding: 0 0 2px;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 34px;
	z-index: 2;
}

.rio360-ficha__cerrar:hover {
	background: rgba( 0, 0, 0, 0.8 );
}

.rio360-ficha__identidad {
	align-items: center;
	display: flex;
	gap: 14px;
	padding: 0 24px;
	position: relative;
	z-index: 1;
}

/*
 * Sube sobre la portada, como en las fichas de siempre — pero solo si
 * hay portada.
 *
 * Antes esto se aplicaba siempre. En un negocio sin foto no había nada
 * sobre lo que montarse: el logo y el nombre se salían 34px por encima
 * del borde del panel, y como el panel recorta lo que se desborda, se
 * veían cortados por la mitad.
 */
.rio360-ficha__cabecera--con-portada .rio360-ficha__identidad {
	margin-top: -34px;
}

/*
 * Y sin portada, un respiro arriba: sin él el logo queda pegado al
 * borde y la ventana empieza de golpe.
 */
.rio360-ficha__cabecera:not( .rio360-ficha__cabecera--con-portada ) .rio360-ficha__identidad {
	padding-top: 24px;
}

.rio360-ficha__logo {
	align-items: center;
	background: #ffc637;
	border: 3px solid #1c1b22;
	border-radius: 18px;
	color: #16130f;
	display: flex;
	flex: none;
	font-size: 1.25rem;
	font-weight: 800;
	height: 68px;
	justify-content: center;
	overflow: hidden;
	width: 68px;
}

.rio360-ficha__logo img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.rio360-ficha__titulos {
	min-width: 0;
	padding-top: 24px;
}

/*
 * Clase doblada y !important: el sitio declara el tamaño de los h2 y
 * los h3 con !important, así que una regla normal pierde y el nombre
 * salía a tamaño de titular, partido en dos renglones dentro de una
 * ventana de 460 px.
 */
.rio360-ficha .rio360-ficha__nombre.rio360-ficha__nombre {
	font-size: 1.25rem !important;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.rio360-ficha .rio360-ficha__subtitulo.rio360-ficha__subtitulo {
	font-size: 0.8125rem !important;
}

.rio360-ficha .rio360-ficha__categoria,
.rio360-ficha .rio360-ficha__texto,
.rio360-ficha .rio360-ficha__datos dd,
.rio360-ficha .rio360-ficha__horarios dd {
	color: inherit;
}

.rio360-ficha__categoria {
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 0.8125rem;
	margin: 2px 0 0;
	text-transform: uppercase;
}

/* ---------- Cuerpo ---------- */

.rio360-ficha__cuerpo {
	padding: 20px 24px 26px;
}

.rio360-ficha__estado {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 14px;
}

.rio360-ficha__texto {
	color: rgba( 255, 255, 255, 0.78 );
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 18px;
}

.rio360-ficha__subtitulo {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	margin: 22px 0 10px;
	opacity: 0.6;
	text-transform: uppercase;
}

.rio360-ficha__datos,
.rio360-ficha__horarios {
	display: grid;
	gap: 6px 16px;
	grid-template-columns: auto 1fr;
	margin: 0;
}

.rio360-ficha__datos dt,
.rio360-ficha__horarios dt {
	color: rgba( 255, 255, 255, 0.55 );
	font-size: 0.875rem;
}

.rio360-ficha__datos dd,
.rio360-ficha__horarios dd {
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0;
	text-align: right;
}

/* ---------- Sello, WhatsApp y cómo llegar ---------- */

.rio360-ficha__sello {
	align-items: center;
	background: #1d9bf0;
	border-radius: 50%;
	display: inline-flex;
	height: 20px;
	justify-content: center;
	margin-left: 8px;
	vertical-align: 2px;
	width: 20px;
}

.rio360-ficha__sello svg {
	fill: #fff;
	height: 14px;
	width: 14px;
}

.rio360-ficha__acciones {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	margin: 0 0 20px;
}

/*
 * Dos columnas, y el que queda solo en su fila va a lo ancho: con dos
 * WhatsApp, «Cómo llegar» cierra abajo en vez de dejar media fila vacía.
 */
.rio360-ficha__acciones > :last-child:nth-child( odd ) {
	grid-column: 1 / -1;
}

/* Clase doblada e !important: el tema pinta los enlaces con su color. */
.rio360-ficha .rio360-ficha__btn.rio360-ficha__btn {
	align-items: center;
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 999px;
	color: #fff !important;
	display: flex;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1;
	padding: 13px 16px;
	text-decoration: none !important;
	transition: background 0.2s ease;
}

.rio360-ficha .rio360-ficha__btn.rio360-ficha__btn:hover {
	background: rgba( 255, 255, 255, 0.18 );
}

.rio360-ficha .rio360-ficha__btn--whatsapp.rio360-ficha__btn--whatsapp {
	background: #25d366;
	color: #062b14 !important;
}

.rio360-ficha .rio360-ficha__btn--whatsapp.rio360-ficha__btn--whatsapp:hover {
	background: #1fbe5b;
}

.rio360-ficha__btn svg {
	flex: none;
}

/*
 * El día de hoy no se resalta a propósito: habría que decidirlo en el
 * servidor y la página va a la caché, así que mañana estaría marcando
 * el día equivocado. El cartel de arriba ya dice si está abierto.
 */

@media ( max-width: 600px ) {

	.rio360-ficha {
		padding: 0;
	}

	.rio360-ficha__panel {
		border-radius: 22px 22px 0 0;
		max-height: 88vh;
		margin-top: auto;
		max-width: none;
	}

	.rio360-ficha {
		align-items: flex-end;
	}
}

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

	.rio360-ficha,
	.rio360-ficha__panel {
		transition: none;
	}

	.rio360-ficha__panel {
		transform: none;
	}
}