/* ===========================================================================
   Hub in situ del restaurante  --  /resto/{slug}

   Recreacion de .MaquetasMatias/design_handoff_chak_dotnet. Los valores salen
   de design-tokens.css del handoff; el prototipo los traia como estilos
   inline y aca estan como clases para poder mantenerlos.

   La pantalla es de telefono: el frame de diseno es 390x844 y en produccion
   queda centrada con max-width 480px sobre el fondo exterior.
   =========================================================================== */

:root {
	/* superficies */
	--rh-bg: #eadfcb;
	--rh-bg-outer: #d9ccb4;
	--rh-surface: #f4ecdd;
	--rh-surface-2: #faf6ee;
	--rh-surface-hover: #efe3cf;
	--rh-tint: #e9dcc4;
	--rh-disabled: #e2d6c1;
	/* texto */
	--rh-text: #2a2118;
	--rh-text-muted: rgba(42, 33, 24, .66);
	--rh-text-soft: rgba(42, 33, 24, .6);
	--rh-text-faint: rgba(42, 33, 24, .5);
	--rh-on-dark: #fbf6ec;
	/* lineas */
	--rh-border: rgba(42, 33, 24, .18);
	--rh-border-soft: rgba(42, 33, 24, .08);
	/* marca */
	--rh-forest: #1f3d2a;
	--rh-green: #2f5a3f;
	--rh-cta-from: #6f8f76;
	--rh-cta-to: #86a38b;
	--rh-terracotta: #b5403a;
	--rh-loyalty: #c98a78;
	/* pasteles */
	--rh-sage-bg: #dde6d8;  --rh-sage-fg: #4a6352;
	--rh-sand-bg: #eee2cc;  --rh-sand-fg: #7d6440;
	--rh-blush-bg: #f2dcd5; --rh-blush-fg: #8e4f43;
	--rh-mist-bg: #dfe4e3;  --rh-mist-fg: #526164;
	--rh-clay-bg: #ecd9cc;  --rh-clay-fg: #85553f;
	/* tipografia */
	--rh-font: 'Inter', system-ui, sans-serif;
	/* radios */
	--rh-r-pill: 999px;
	--rh-r-box: 18px;
	--rh-r-banner: 14px;
	--rh-r-card: 13px;
	--rh-r-control: 12px;
	--rh-r-chip: 10px;
	/* sombras */
	--rh-shadow-sheet: 0 -20px 50px rgba(60, 40, 20, .18);
	--rh-shadow-banner: 0 10px 26px rgba(60, 40, 20, .18);
	--rh-shadow-cta: 0 8px 22px rgba(31, 61, 42, .18);
	/* movimiento */
	--rh-ease-sheet: cubic-bezier(.22, 1, .36, 1);
	--rh-dur-sheet: 280ms;
}

/*
   box-sizing para todo el hub.

   Sin esto, un elemento con width:100% y padding lateral termina midiendo mas
   que su contenedor: las filas de Horario y Direccion daban 380px dentro de un
   espacio de 346 y se salian por la derecha. A los <button> no les pasaba
   porque el navegador ya les pone border-box, asi que el mismo estilo se veia
   bien o mal segun la etiqueta -- justo el tipo de diferencia que no se nota
   hasta abrirlo en un telefono.
*/
.rh-body, .rh-body *, .rh-body *::before, .rh-body *::after { box-sizing: border-box; }

@keyframes rhScrIn   { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes rhSheetIn { from { transform: translateY(100%) }             to { transform: none } }
@keyframes rhToastIn { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translate(-50%, 0) } }
@keyframes rhSpin    { to { transform: rotate(360deg) } }

/* Quien prefiere menos movimiento no ve ninguna de las tres. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------- armazon */

.rh-body {
	margin: 0;
	background: var(--rh-bg-outer);
	font-family: var(--rh-font);
	color: var(--rh-text);
	-webkit-font-smoothing: antialiased;
}

.rh-app {
	max-width: 480px;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 auto;
	background: var(--rh-bg);
	background-image:
		radial-gradient(420px 300px at 18% -4%, rgba(31, 61, 42, .13) 0%, rgba(31, 61, 42, 0) 68%),
		radial-gradient(360px 260px at 96% 6%, rgba(181, 64, 58, .11) 0%, rgba(181, 64, 58, 0) 64%);
	position: relative;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

.rh-pantalla { animation: rhScrIn .3s ease both; }

/*
   En el hub la animacion de entrada va en el contenido y NO en la pantalla.
   La foto de fondo es absoluta y tiene que medirse contra .rh-app para pasar
   por debajo de la barra superior; con la animacion (que mueve con transform)
   puesta en la pantalla, la pantalla pasa a ser su bloque contenedor y la foto
   arranca 44px mas abajo, justo donde termina la barra.
*/
#PantallaHub { animation: none; }
#PantallaHub > .rh-scroll { animation: rhScrIn .3s ease both; }
.rh-oculto   { display: none !important; }

/* La foto del local detras del encabezado, desvanecida hacia abajo. */
.rh-fondo,
.rh-fondo-velo {
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: 0;
	height: 380px;
	pointer-events: none;
}

.rh-fondo {
	background-size: cover;
	background-position: center 40%;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, 0) 100%);
}

/*
   El velo crema sobre la foto. Va mas fuerte que en el prototipo porque ahi la
   foto era una terraza oscura elegida a mano, y aca la de fondo es la que el
   restaurante tenga cargada en su galeria: sobre una foto clara, el nombre y el
   tagline (que son texto oscuro) quedaban ilegibles.
*/
.rh-fondo-velo {
	background: linear-gradient(180deg,
		rgba(234, 223, 203, .45) 0%,
		rgba(234, 223, 203, .72) 55%,
		rgba(234, 223, 203, .92) 85%,
		rgba(234, 223, 203, 0) 100%);
}

/* ---------------------------------------------------------- barra superior */

.rh-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 18px 0;
	flex: none;
	position: relative;
	z-index: 6;
}

.rh-top-acciones { display: flex; align-items: center; gap: 10px; }

/* La bandera acompana a la sigla, no la reemplaza: un idioma no es un pais y
   el par bandera-idioma es una decision que se toma en la vista (es->Mexico,
   pt->Brasil). Con la sigla al lado, elegir mal una bandera es un detalle y no
   deja al visitante sin saber que esta tocando. */
.rh-lang {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 27px;
	padding: 0 10px;
	border-radius: var(--rh-r-pill);
	border: 1px solid rgba(42, 33, 24, .16);
	/* Blanco y no transparente: arriba de la foto de fondo del local, un
	   boton transparente se pierde en la imagen. */
	background: #fff;
	color: var(--rh-text);
	font: 500 10px var(--rh-font);
	letter-spacing: .04em;
	cursor: pointer;
}
.rh-lang:hover { border-color: var(--rh-forest); }
.rh-lang i { font-size: 10px; color: rgba(42, 33, 24, .55); }

/* Los SVG de Metronic dibujan la bandera sobre un lienzo CUADRADO de 512x512,
   no en su proporcion real. Sin object-fit: cover, una bandera de bandas
   verticales como la de Mexico sale estirada a lo alto. El cover recorta
   arriba y abajo por igual, que es donde no hay nada que perder. */
.rh-lang-bandera {
	width: 20px;
	height: 14px;
	flex: none;
	display: block;
	border-radius: 3px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(42, 33, 24, .10);
}

/* En el boton va mas chica: el pill mide 27px de alto. */
.rh-lang .rh-lang-bandera { width: 16px; height: 11px; border-radius: 2px; }

.rh-lang-caja { position: relative; }

.rh-lang-menu {
	position: absolute;
	top: 33px;
	left: 0;
	z-index: 5;
	/* 200 y no 170: la bandera mas su separacion suman 30px, y "Português" es
	   el nombre mas largo de los cuatro. */
	min-width: 200px;
	padding: 6px;
	border-radius: var(--rh-r-control);
	background: var(--rh-surface-2);
	box-shadow: 0 0 0 1px var(--rh-border-soft), 0 14px 34px rgba(60, 40, 20, .18);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rh-lang-item {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	border: 0;
	background: transparent;
	color: var(--rh-text);
	font: 500 12.5px var(--rh-font);
	cursor: pointer;
	text-align: left;
	text-decoration: none;
}
.rh-lang-item:hover { background: var(--rh-tint); }
.rh-lang-item .rh-lang-sigla  { width: 26px; letter-spacing: .04em; }
.rh-lang-item .rh-lang-nombre { flex: 1; color: var(--rh-text-soft); font-weight: 400; }
.rh-lang-item i { font-size: 13px; color: var(--rh-forest); }
.rh-lang-item[aria-current="true"] { background: var(--rh-tint); }

.rh-icono-btn {
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	padding: 0;
	border: 1px solid rgba(42, 33, 24, .16);
	/* Mismo motivo que .rh-lang. Con foto de usuario no se nota: la imagen
	   lo tapa entero. */
	background: #fff;
	color: var(--rh-text);
	cursor: pointer;
	display: grid;
	place-items: center;
}
.rh-icono-btn:hover { border-color: var(--rh-forest); }
.rh-icono-btn i { font-size: 16px; }
.rh-icono-btn .rh-iniciales { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--rh-forest); }

/* La foto del usuario se superpone a las iniciales en vez de reemplazarlas en
   el marcado. El nombre del archivo vive en la sesion y el archivo en disco:
   que haya nombre no garantiza que el archivo exista. Con este orden, el
   onerror saca la imagen y lo que queda debajo es la inicial, no un hueco.
   Sirve para el boton de 34px de la barra y para el avatar de 52px del sheet,
   que son los dos unicos lugares donde aparece. */
.rh-avatar-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* El punto rojo de la campana: se apaga solo cuando no quedan sin leer. */
.rh-punto {
	position: absolute;
	top: 6px;
	right: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rh-terracotta);
	box-shadow: 0 0 0 1.5px var(--rh-bg);
}

/* ------------------------------------------------------------ encabezado */

.rh-scroll {
	position: relative;
	z-index: 1;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
	padding-bottom: 26px;
}
.rh-scroll::-webkit-scrollbar { display: none; }

.rh-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4px 22px 0;
}

.rh-logo-anillo {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	padding: 2px;
	box-shadow: 0 0 0 1px rgba(31, 61, 42, .45), 0 0 34px rgba(31, 61, 42, .16);
}

.rh-logo {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--rh-surface);
}

.rh-nombre {
	font-size: 23.5px;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 500;
	margin-top: 16px;
	text-align: center;
}

.rh-tagline {
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rh-text-muted);
	margin-top: 8px;
	text-align: center;
}

/* La chapita de la mesa, cuando se entro por el QR de una mesa. */
.rh-mesa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	height: 24px;
	padding: 0 11px;
	border-radius: var(--rh-r-pill);
	background: var(--rh-forest);
	color: var(--rh-on-dark);
	font-size: 10.5px;
	font-weight: 500;
}
.rh-mesa i { font-size: 12px; }

/* ------------------------------------------------------- botones y cards */

.rh-acciones {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 22px 0;
}

.rh-cta {
	height: 52px;
	border-radius: var(--rh-r-card);
	border: 0;
	background: linear-gradient(100deg, var(--rh-cta-from) 0%, var(--rh-cta-to) 100%);
	color: var(--rh-on-dark);
	font: 500 15px var(--rh-font);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: var(--rh-shadow-cta);
	width: 100%;
}
.rh-cta:hover { filter: brightness(1.12); }
.rh-cta i { font-size: 18px; }

.rh-fila {
	min-height: 60px;
	border-radius: var(--rh-r-card);
	border: 1px solid var(--rh-border);
	background: var(--rh-surface);
	color: var(--rh-text);
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 16px;
	text-align: left;
	width: 100%;
	text-decoration: none;
}
.rh-fila:hover { border-color: var(--rh-forest); }

.rh-fila-chip {
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: var(--rh-sage-bg);
}
.rh-fila-chip i { font-size: 22px; color: var(--rh-sage-fg); }

.rh-fila-texto { flex: 1; min-width: 0; }
.rh-fila-titulo { display: block; font-size: 14px; font-weight: 500; }
.rh-fila-sub    { display: block; font-size: 11px; color: var(--rh-text-muted); margin-top: 3px; }
.rh-fila-flecha { font-size: 14px; color: var(--rh-text-faint); }

.rh-banner {
	display: block;
	margin: 12px 22px 0;
	border-radius: var(--rh-r-banner);
	overflow: hidden;
	position: relative;
	cursor: pointer;
	aspect-ratio: 1630 / 195;
	background: var(--rh-text);
	box-shadow: var(--rh-shadow-banner);
	border: 0;
	padding: 0;
	width: calc(100% - 44px);
}
.rh-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------- lealtad */

.rh-box {
	margin: 12px 16px 0;
	padding: 18px 14px 14px;
	border-radius: var(--rh-r-box);
	background: linear-gradient(160deg,
		rgba(31, 61, 42, .07) 0%,
		rgba(31, 61, 42, .06) 50%,
		rgba(181, 64, 58, .07) 100%);
	border: 1px solid rgba(31, 61, 42, .22);
}

.rh-box-titulo {
	font-size: 19.5px;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 500;
	text-wrap: balance;
}
.rh-box-titulo span { color: var(--rh-terracotta); }

.rh-box-sub {
	font-size: 12px;
	color: var(--rh-text-muted);
	margin-top: 6px;
	margin-bottom: 14px;
}

.rh-wallet {
	width: 100%;
	height: 60px;
	margin-bottom: 10px;
	border-radius: var(--rh-r-card);
	border: 0;
	background: var(--rh-loyalty);
	color: var(--rh-on-dark);
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 0 16px;
	text-align: left;
	box-shadow: 0 8px 22px rgba(142, 58, 46, .18);
}
.rh-wallet:hover { filter: brightness(1.25); }
.rh-wallet .rh-fila-sub { color: rgba(251, 246, 236, .7); }
.rh-wallet .rh-fila-titulo { font-size: 13.5px; }

/* El icono de wallet: cinco franjas pastel apiladas, como en el diseno. */
.rh-wallet-icono {
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: var(--rh-r-chip);
	background: var(--rh-surface);
	position: relative;
	overflow: hidden;
}
.rh-wallet-icono span { position: absolute; left: 6px; right: 6px; height: 9px; border-radius: 2.5px; }
.rh-wallet-icono span:nth-child(1) { top: 7px;  background: var(--rh-sage-bg); }
.rh-wallet-icono span:nth-child(2) { top: 11px; background: var(--rh-sand-bg); }
.rh-wallet-icono span:nth-child(3) { top: 15px; background: var(--rh-blush-bg); }
.rh-wallet-icono span:nth-child(4) { top: 19px; background: var(--rh-mist-bg); }
.rh-wallet-icono span:nth-child(5) {
	left: 4px; right: 4px; top: 23px; bottom: 5px; height: auto;
	border-radius: 3px; background: #e3d4bd;
	box-shadow: 0 -1px 0 rgba(42, 33, 24, .12);
}

.rh-wallet-punto { height: 30px; width: auto; display: block; flex: none; }

/* La card ancha con foto a la izquierda (la promo del trago). */
.rh-promo {
	width: 100%;
	margin-bottom: 10px;
	border-radius: var(--rh-r-card);
	border: 1px solid var(--rh-border);
	background: var(--rh-surface-2);
	cursor: pointer;
	font-family: inherit;
	color: var(--rh-text);
	text-align: left;
	padding: 0;
	display: flex;
	align-items: stretch;
	overflow: hidden;
}
.rh-promo:hover { border-color: var(--rh-forest); }
.rh-promo img { width: 104px; flex: none; object-fit: cover; display: block; background: var(--rh-tint); }
.rh-promo-texto {
	flex: 1;
	min-width: 0;
	padding: 13px 14px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}
.rh-promo-titulo { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; text-wrap: pretty; }
.rh-promo-pie { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--rh-text-muted); }
.rh-promo-pie span.rh-chip-mini {
	width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
	background: var(--rh-blush-bg);
}
.rh-promo-pie i { font-size: 15px; color: var(--rh-blush-fg); }

.rh-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rh-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 22px 0; }

.rh-beneficio {
	border-radius: var(--rh-r-card);
	border: 1px solid var(--rh-border);
	cursor: pointer;
	font-family: inherit;
	color: var(--rh-text);
	text-align: left;
	padding: 13px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 104px;
	justify-content: space-between;
}
.rh-beneficio:hover { border-color: var(--rh-forest); background: var(--rh-surface-hover) !important; }

.rh-beneficio-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rh-beneficio-icono { width: 34px; height: 34px; border-radius: var(--rh-r-chip); display: grid; place-items: center; }
.rh-beneficio-icono i { font-size: 19px; }
.rh-beneficio-titulo { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.rh-beneficio-sub { display: block; font-size: 10.5px; color: var(--rh-text-soft); margin-top: 4px; }

/* Las marcas en SVG (Google, Tripadvisor) se pintan con currentColor, asi que
   el color lo pone el contexto y un mismo archivo sirve en los dos lugares
   donde aparecen. Por defecto, la tinta del hub. */
.rh-marca { display: block; flex: none; color: var(--rh-text); }

/* En el boton de "Iniciar sesion con Google" la maqueta la pinta en arena, no
   en tinta. flex-none + el gap del boton la separan del texto. */
.rh-btn-claro .rh-marca { color: var(--rh-sand-fg); }

/* Cada punto del programa se dibuja en un rectangulo verde. */
.rh-puntos { display: flex; align-items: center; gap: 4px; }
.rh-punto-ficha {
	width: 18px;
	height: 26px;
	border-radius: 5px;
	background: var(--rh-forest);
	display: grid;
	place-items: center;
	color: var(--rh-on-dark);
	font-size: 11px;
	font-weight: 600;
}
.rh-punto-ficha img { height: 20px; width: auto; display: block; }

.rh-hecho {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 0 9px;
	border-radius: var(--rh-r-pill);
	background: var(--rh-forest);
	color: var(--rh-on-dark);
	font-size: 10.5px;
	font-weight: 500;
}
.rh-hecho i { font-size: 12px; }

.rh-pendiente {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 0 9px;
	border-radius: var(--rh-r-pill);
	background: var(--rh-sand-bg);
	color: var(--rh-sand-fg);
	font-size: 10.5px;
	font-weight: 500;
}
.rh-pendiente i { font-size: 12px; }

.rh-beneficio-foto {
	border-radius: var(--rh-r-card);
	border: 1px solid var(--rh-border);
	overflow: hidden;
	min-height: 104px;
	position: relative;
	background: #e3d4bd;
}
.rh-beneficio-foto img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 60%; display: block;
}

.rh-tile {
	border-radius: var(--rh-r-card);
	border: 1px solid var(--rh-border-soft);
	background: var(--rh-surface);
	cursor: pointer;
	font-family: inherit;
	color: var(--rh-text);
	text-align: left;
	padding: 13px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 92px;
	text-decoration: none;
}
.rh-tile:hover { border-color: var(--rh-forest); background: var(--rh-surface-hover); }

/* ------------------------------------------------------------ bottom sheet */

.rh-overlay {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(42, 33, 24, .35);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.rh-sheet {
	width: 100%;
	max-width: 480px;
	max-height: 88vh;
	max-height: 88dvh;
	overflow-y: auto;
	background: var(--rh-surface);
	border-radius: 22px 22px 0 0;
	box-shadow: var(--rh-shadow-sheet);
	padding: 8px 22px calc(22px + env(safe-area-inset-bottom));
	animation: rhSheetIn var(--rh-dur-sheet) var(--rh-ease-sheet) both;
	scrollbar-width: none;
}
.rh-sheet::-webkit-scrollbar { display: none; }

/* La manija de arrastre de arriba del sheet. */
.rh-sheet-manija {
	width: 40px;
	height: 4px;
	border-radius: var(--rh-r-pill);
	background: var(--rh-border);
	margin: 6px auto 14px;
}

.rh-sheet-titulo { font-size: 19.5px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.rh-sheet-sub    { font-size: 12.5px; color: var(--rh-text-muted); margin-top: 6px; }

/* ---------------------------------------------------- formularios y botones */

.rh-input {
	width: 100%;
	height: 50px;
	border-radius: var(--rh-r-control);
	border: 1px solid var(--rh-border);
	background: var(--rh-surface-2);
	color: var(--rh-text);
	font: 400 14px var(--rh-font);
	padding: 0 14px;
	box-sizing: border-box;
}
.rh-input:focus {
	outline: none;
	border-color: var(--rh-forest);
	box-shadow: 0 0 0 3px rgba(31, 61, 42, .12);
}

/* Select del sheet de registro: mismos tokens que .rh-input, mas la flecha
   propia. appearance:none saca la flecha nativa, que en iOS y en Android se
   ven distintas y rompen la altura de 50px del resto de los campos. */
.rh-select {
	width: 100%;
	height: 50px;
	border-radius: var(--rh-r-control);
	border: 1px solid var(--rh-border);
	background: var(--rh-surface-2);
	color: var(--rh-text);
	font: 400 14px var(--rh-font);
	padding: 0 32px 0 14px;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b6b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.rh-select:focus {
	outline: none;
	border-color: var(--rh-forest);
	box-shadow: 0 0 0 3px rgba(31, 61, 42, .12);
}

/* Prefijo + numero en un solo renglon. El prefijo se queda chico y fijo: el
   numero es lo que se tipea y necesita el ancho. */
.rh-fila-movil {
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 10px;
}


.rh-btn {
	width: 100%;
	height: 48px;
	border-radius: var(--rh-r-control);
	border: 0;
	background: var(--rh-forest);
	color: var(--rh-on-dark);
	font: 500 14px var(--rh-font);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.rh-btn:hover:not(:disabled) { filter: brightness(1.15); }
.rh-btn:disabled { background: var(--rh-disabled); color: var(--rh-text-faint); cursor: default; }

.rh-btn-claro {
	background: var(--rh-surface-2);
	color: var(--rh-text);
	border: 1px solid var(--rh-border);
}
.rh-btn-claro:hover:not(:disabled) { border-color: var(--rh-forest); filter: none; }

.rh-btn-texto {
	background: transparent;
	border: 0;
	color: var(--rh-forest);
	font: 500 12.5px var(--rh-font);
	cursor: pointer;
	padding: 8px;
	width: 100%;
}
.rh-btn-texto:hover { color: var(--rh-terracotta); }

.rh-legal { font-size: 10.5px; color: var(--rh-text-faint); text-align: center; line-height: 1.5; }
.rh-legal a { color: var(--rh-forest); }

.rh-error { font-size: 11px; color: var(--rh-terracotta); margin-top: 6px; min-height: 14px; }

/* El separador "Con email" entre Google y el formulario. */
.rh-divisor {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	font-size: 11px;
	color: var(--rh-text-faint);
}
.rh-divisor::before,
.rh-divisor::after { content: ""; flex: 1; height: 1px; background: var(--rh-border); }

.rh-spinner {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba(251, 246, 236, .35);
	border-top-color: var(--rh-on-dark);
	animation: rhSpin .7s linear infinite;
}

/* --------------------------------------------------------------- el menu */

.rh-menu-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px 0;
	flex: none;
}

.rh-buscador { position: relative; padding: 14px 22px 0; }
.rh-buscador .rh-input { height: 44px; padding-left: 38px; }
.rh-buscador .rh-lupa {
	position: absolute;
	left: 36px;
	top: 28px;
	font-size: 15px;
	color: var(--rh-text-faint);
	pointer-events: none;
}
.rh-buscador .rh-limpiar {
	position: absolute;
	right: 34px;
	top: 24px;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 50%;
	background: var(--rh-tint);
	color: var(--rh-text-soft);
	cursor: pointer;
	display: grid;
	place-items: center;
}

/* Chips de dieta y tabs de categoria: los dos scrollean en horizontal. */
.rh-chips {
	display: flex;
	gap: 8px;
	padding: 12px 22px 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.rh-chips::-webkit-scrollbar { display: none; }

.rh-chip {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border-radius: var(--rh-r-pill);
	border: 1px solid var(--rh-border);
	background: transparent;
	color: var(--rh-text);
	font: 500 12px var(--rh-font);
	cursor: pointer;
}
.rh-chip i { font-size: 14px; }
.rh-chip[aria-pressed="true"] {
	background: var(--rh-forest);
	border-color: var(--rh-forest);
	color: var(--rh-on-dark);
}

.rh-tabs {
	display: flex;
	gap: 18px;
	padding: 14px 22px 0;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--rh-border-soft);
}
.rh-tabs::-webkit-scrollbar { display: none; }

.rh-tab {
	flex: none;
	border: 0;
	background: transparent;
	color: var(--rh-text-soft);
	font: 500 13px var(--rh-font);
	cursor: pointer;
	padding: 0 0 10px;
	border-bottom: 2px solid transparent;
}
.rh-tab[aria-selected="true"] { color: var(--rh-text); border-bottom-color: var(--rh-forest); }

.rh-seccion-titulo {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rh-text-muted);
	padding: 20px 22px 10px;
}

/* Carrusel de recomendados. */
.rh-carrusel {
	display: flex;
	gap: 10px;
	padding: 0 22px;
	overflow-x: auto;
	scrollbar-width: none;
}
.rh-carrusel::-webkit-scrollbar { display: none; }

/* Deslizar con el mouse: lo maneja habilitarArrastre() en resto-hub.js.
   El cursor es toda la pista que hay en escritorio de que la tira se corre,
   porque la barra de scroll esta oculta a proposito en las tres. */
.rh-carrusel,
.rh-chips,
.rh-tabs { cursor: grab; }

.rh-arrastrando,
.rh-arrastrando * {
	cursor: grabbing !important;
	/* Sin esto, arrastrar selecciona el nombre y el precio de las cards. */
	user-select: none;
	-webkit-user-select: none;
}

.rh-rec {
	flex: none;
	/* 156 y no 150: el padding del cuerpo subio de 11 a 14 por lado, asi que
	   la card crece lo mismo y el nombre sigue teniendo los 128px de ancho
	   util que tenia antes. Sin esto, el texto se parte en una linea mas. */
	width: 156px;
	border-radius: var(--rh-r-card);
	border: 1px solid var(--rh-border);
	background: var(--rh-surface);
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	text-align: left;
	font-family: inherit;
	color: var(--rh-text);
}
.rh-rec:hover { border-color: var(--rh-forest); }
.rh-rec img { width: 100%; height: 96px; object-fit: cover; display: block; background: var(--rh-tint); }

/* Plato sin foto propia: el color y el icono de su categoria, no la foto de otro. */
.rh-rec-sinfoto {
	width: 100%;
	height: 96px;
	display: grid;
	place-items: center;
	background: var(--rh-tint);
}
.rh-rec-sinfoto i { font-size: 30px; color: var(--rh-text-faint); }
/* El display:block se deja escrito aunque el marcado ya use <div>: si alguien
   vuelve a ponerle un <span>, el span sigue siendo inline y .rh-rec-pie, que
   es flex (o sea, nivel de bloque), se sale del padding lateral. El sintoma es
   que el nombre entra pero el precio y el + quedan pegados a los bordes, o sea
   un padding que parece no existir cuando en realidad existe a medias. */
.rh-rec-cuerpo { display: block; padding: 11px 14px 14px; }
.rh-rec-nombre { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.rh-rec-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }

/* El stepper ocupa mas del doble que el "+". En una card de 156px el que tiene
   que ceder es el precio, no el control: sin esto, agregar un plato desde el
   carrusel desbordaba la card. */
.rh-rec-accion { display: flex; align-items: center; flex: none; }
.rh-rec-precio {
	font-size: 12.5px;
	font-weight: 500;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Lista de platos. */
.rh-lista { padding: 0 22px; display: flex; flex-direction: column; }

.rh-item {
	display: flex;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--rh-border-soft);
	cursor: pointer;
	background: transparent;
	border-left: 0; border-right: 0; border-top: 0;
	text-align: left;
	font-family: inherit;
	color: var(--rh-text);
	width: 100%;
}
.rh-item:last-child { border-bottom: 0; }

/* La foto grande del detalle del plato. 4:3 recortada al centro: una foto
   vertical no estira el sheet hasta tapar los extras y el boton de agregar. */
.rh-plato-foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--rh-r-control);
	background: var(--rh-tint);
	margin: 4px 0 14px;
}

.rh-item-foto {
	width: 68px;
	height: 68px;
	flex: none;
	border-radius: var(--rh-r-chip);
	object-fit: cover;
	display: block;
	background: var(--rh-tint);
}
.rh-item-cuerpo { flex: 1; min-width: 0; }
.rh-item-nombre { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.rh-item-desc {
	font-size: 11.5px;
	color: var(--rh-text-muted);
	margin-top: 4px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rh-item-pie { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.rh-item-precio { font-size: 13px; font-weight: 500; }

.rh-tag-mini {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	display: grid;
	place-items: center;
	font-size: 11px;
}

.rh-item-accion { display: flex; align-items: center; flex: none; }

.rh-mas {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--rh-border);
	background: var(--rh-surface-2);
	color: var(--rh-forest);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 15px;
}
.rh-mas:hover { border-color: var(--rh-forest); }

.rh-stepper {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 30px;
	border-radius: var(--rh-r-pill);
	background: var(--rh-forest);
	color: var(--rh-on-dark);
	padding: 0 4px;
}
.rh-stepper button {
	width: 26px;
	height: 26px;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 14px;
	border-radius: 50%;
}
.rh-stepper span { min-width: 18px; text-align: center; font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------- mi pedido */

/* Barra flotante del carrito: se apoya sobre el borde inferior de la pantalla,
   respetando el area segura de los telefonos con gesto. */
.rh-carrito {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(14px + env(safe-area-inset-bottom));
	z-index: 30;
	width: min(calc(100% - 44px), 436px);
	height: 54px;
	border-radius: var(--rh-r-card);
	border: 0;
	background: var(--rh-green);
	color: var(--rh-on-dark);
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	box-shadow: 0 12px 30px rgba(31, 61, 42, .3);
}
.rh-carrito-contador {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(251, 246, 236, .2);
	display: grid;
	place-items: center;
	font-size: 12.5px;
	font-weight: 600;
	flex: none;
}
.rh-carrito-texto { flex: 1; text-align: left; font-size: 14px; font-weight: 500; }
.rh-carrito-total { font-size: 14px; font-weight: 600; }

.rh-linea {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 13px 0;
	border-bottom: 1px solid var(--rh-border-soft);
}
.rh-linea:last-of-type { border-bottom: 0; }
.rh-linea-foto {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: var(--rh-r-chip);
	object-fit: cover;
	display: block;
	background: var(--rh-tint);
}
.rh-linea-extras { font-size: 11px; color: var(--rh-text-muted); margin-top: 4px; line-height: 1.45; }

.rh-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-top: 1px solid var(--rh-border);
	font-size: 15px;
	font-weight: 600;
	margin-top: 4px;
}

/* --------------------------------------------------------- pasos y extras */

.rh-pasos { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rh-paso { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.rh-paso-num {
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 50%;
	background: var(--rh-forest);
	color: var(--rh-on-dark);
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 600;
}

.rh-extra {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid var(--rh-border-soft);
	cursor: pointer;
	font-size: 13px;
}
.rh-extra:last-child { border-bottom: 0; }
.rh-extra input { width: 18px; height: 18px; accent-color: var(--rh-forest); flex: none; }
.rh-extra-nombre { flex: 1; }
.rh-extra-precio { font-size: 12.5px; color: var(--rh-text-muted); }

.rh-ganas {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: var(--rh-r-control);
	background: var(--rh-surface-2);
	border: 1px solid var(--rh-border);
	font-size: 13px;
	font-weight: 500;
}

/* El codigo de promo que el cliente le muestra al mesero. */
/* Con la camara abierta, el sheet muestra SOLO la camara. Se conserva el
   titulo para no perder el contexto de que beneficio se esta haciendo; los
   pasos y los botones se esconden, porque apilados arriba de la vista en vivo
   dejaban un sheet larguisimo donde no se entendia que tocar. */
.rh-camara-abierta > *:not(.rh-camara):not(.rh-sheet-titulo) { display: none !important; }

/* 3/4 y no 9/16: el max-height evita que en un telefono bajo el obturador
   quede fuera de pantalla, y mantener la proporcion deja la vista centrada en
   vez de deformar la imagen. */
.rh-camara {
	position: relative;
	margin: 18px auto 0;
	border-radius: var(--rh-r-card);
	overflow: hidden;
	background: var(--rh-text);
	aspect-ratio: 3 / 4;
	max-height: 62vh;
}

.rh-camara-cerrar {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	background: rgba(42, 33, 24, .45);
	color: var(--rh-on-dark);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 15px;
	padding: 0;
}
.rh-camara-cerrar:hover { background: rgba(42, 33, 24, .65); }

/* Los dos caminos para el material: elegir del telefono o sacarla en el
   momento. Lado a lado porque son alternativas, no pasos. */
.rh-material-botones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 18px;
}

/* La vista previa de lo que se va a mandar. No es decoracion: es la unica
   forma de que el cliente sepa que esta por mandarle al restaurante. */
.rh-material {
	position: relative;
	margin-top: 12px;
	border-radius: var(--rh-r-card);
	border: 1px solid var(--rh-border);
	overflow: hidden;
	background: var(--rh-tint);
}

.rh-material img,
.rh-material video {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	display: block;
}

.rh-material-quitar {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 0;
	background: rgba(42, 33, 24, .55);
	color: var(--rh-on-dark);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 14px;
	padding: 0;
}
.rh-material-quitar:hover { background: rgba(42, 33, 24, .75); }

.rh-camara video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rh-obturador {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--rh-on-dark);
	/* El anillo separado del relleno es lo que lo hace leer como obturador y
	   no como un punto blanco cualquiera. */
	border: 3px solid rgba(251, 246, 236, .55);
	box-shadow: 0 0 0 2px rgba(42, 33, 24, .25), 0 6px 18px rgba(42, 33, 24, .35);
	cursor: pointer;
	padding: 0;
}
.rh-obturador:active { transform: translateX(-50%) scale(.94); }

/* El QR de la red WiFi, en el sheet. Fondo blanco a proposito: sobre el crema
   del sheet la camara lo lee peor. */
.rh-wifi-qr {
	width: 176px;
	margin: 14px auto 10px;
	padding: 10px;
	border-radius: var(--rh-r-control);
	background: #fff;
	border: 1px solid var(--rh-border);
}
.rh-wifi-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }

.rh-codigo {
	margin-top: 16px;
	padding: 16px;
	border-radius: var(--rh-r-control);
	border: 1px dashed var(--rh-forest);
	background: var(--rh-surface-2);
	text-align: center;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .08em;
}

/* Enlace de referido con su boton de copiar. */
.rh-referido {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 10px 10px 14px;
	border-radius: var(--rh-r-control);
	background: var(--rh-surface-2);
	border: 1px solid var(--rh-border);
}
.rh-referido span {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var(--rh-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------------------------------------------------------- tarjeta club */

.rh-tarjeta {
	border-radius: var(--rh-r-box);
	background: linear-gradient(145deg, var(--rh-forest) 0%, var(--rh-green) 100%);
	color: var(--rh-on-dark);
	padding: 20px;
	margin-top: 4px;
}
.rh-tarjeta-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rh-tarjeta-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.rh-tarjeta-saldo { font-size: 34px; font-weight: 600; line-height: 1; margin-top: 20px; }
.rh-tarjeta-pie { display: flex; justify-content: space-between; margin-top: 16px; font-size: 11px; opacity: .75; }

/* La tarjeta de sellos: un circulo por punto hasta el premio. */
.rh-sellos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
	gap: 10px;
	margin-top: 18px;
}
.rh-sello {
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .12);
	border: 1.5px dashed rgba(255, 255, 255, .4);
}
.rh-sello-hecho {
	color: var(--rh-forest);
	background: var(--rh-on-dark);
	border: 1.5px solid var(--rh-on-dark);
}
.rh-tarjeta-datos { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.rh-tarjeta-etiqueta { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.rh-tarjeta-valor { font-size: 22px; font-weight: 600; margin-top: 2px; line-height: 1.1; }
.rh-tarjeta-premio { font-size: 12px; opacity: .85; margin-top: 12px; }
.rh-tarjeta-chip {
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: var(--rh-r-pill);
	background: var(--rh-on-dark);
	color: var(--rh-forest);
	white-space: nowrap;
}
/* El QR de la tarjeta. Fondo blanco: sobre el crema la camara lo lee peor. */
.rh-tarjeta-qr {
	width: 188px;
	margin: 16px auto 10px;
	padding: 10px;
	border-radius: var(--rh-r-control);
	background: #fff;
	border: 1px solid var(--rh-border);
}
.rh-tarjeta-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }

.rh-progreso {
	height: 6px;
	border-radius: var(--rh-r-pill);
	background: var(--rh-tint);
	overflow: hidden;
	margin-top: 10px;
}
.rh-progreso i { display: block; height: 100%; background: var(--rh-forest); border-radius: inherit; }

/* ------------------------------------------------------- notificaciones */

.rh-notif {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 13px 0;
	border-bottom: 1px solid var(--rh-border-soft);
	cursor: pointer;
	background: transparent;
	border-left: 0; border-right: 0; border-top: 0;
	text-align: left;
	font-family: inherit;
	color: var(--rh-text);
	width: 100%;
}
.rh-notif-punto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rh-terracotta);
	flex: none;
	margin-top: 6px;
}
.rh-notif-punto.rh-leida { background: transparent; }
.rh-notif-titulo { font-size: 13px; font-weight: 500; }
.rh-notif-detalle { font-size: 11.5px; color: var(--rh-text-muted); margin-top: 3px; line-height: 1.4; }
.rh-notif-fecha { font-size: 10.5px; color: var(--rh-text-faint); margin-top: 5px; }

/* ---------------------------------------------------------------- toast */

.rh-toast {
	position: fixed;
	left: 50%;
	bottom: calc(80px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: calc(100% - 44px);
	padding: 12px 16px;
	border-radius: var(--rh-r-control);
	background: var(--rh-surface-hover);
	box-shadow: 0 0 0 1px var(--rh-forest), 0 12px 30px rgba(60, 40, 20, .2);
	font-size: 12.5px;
	font-weight: 500;
	animation: rhToastIn .2s ease both;
}
.rh-toast i { font-size: 15px; color: var(--rh-forest); }

/* -------------------------------------------------------------- vacios */

.rh-vacio {
	padding: 40px 22px;
	text-align: center;
	color: var(--rh-text-faint);
	font-size: 12.5px;
}
.rh-vacio i { display: block; font-size: 28px; margin-bottom: 10px; opacity: .6; }

/* ---------------------------------------------------- sheet de horarios */

.rh-horario-lista {
	margin-top: 14px;
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-r-card);
	overflow: hidden;
}
.rh-horario-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 14px;
	border-bottom: 1px solid var(--rh-border);
	background: var(--rh-surface);
}
.rh-horario-fila:last-child { border-bottom: 0; }

.rh-horario-dia {
	font: 400 14px var(--rh-font);
	color: var(--rh-text);
}
.rh-horario-horas {
	font: 400 14px var(--rh-font);
	color: var(--rh-text-soft);
	text-align: right;
	white-space: nowrap;
}

/* El dia de hoy lo marca el JS con la fecha DEL NAVEGADOR, no la del
   servidor: el cliente esta sentado en el local, asi que su reloj es el que
   corresponde al horario que esta leyendo. */
.rh-horario-fila.rh-horario-hoy {
	background: var(--rh-surface-2);
}
.rh-horario-hoy .rh-horario-dia {
	font-weight: 600;
}
.rh-horario-hoy .rh-horario-horas {
	color: var(--rh-text);
	font-weight: 600;
}

/* ------------------------------------------------------ sheet de cuenta */

/* Encabezado con el titulo a la izquierda y la X a la derecha. Los otros
   sheets se cierran tocando el fondo; este ademas trae la X porque es el
   unico que se abre desde el icono de arriba, lejos del borde. */
.rh-cuenta-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.rh-cuenta-head-izq {
	display: flex;
	align-items: center;
	gap: 9px;
}
.rh-cuenta-cerrar {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--rh-border);
	background: transparent;
	color: var(--rh-text-soft);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 13px;
}

.rh-cuenta-usuario {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 16px;
}
.rh-cuenta-avatar {
	/* relative para que .rh-avatar-foto se apoye acá y no en el sheet. */
	position: relative;
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--rh-sage-bg);
	color: var(--rh-forest);
	font: 600 17px var(--rh-font);
}
.rh-cuenta-nombre { font: 500 16px var(--rh-font); color: var(--rh-text); }
.rh-cuenta-email {
	font: 400 11.5px var(--rh-font);
	color: var(--rh-text-soft);
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La tarjeta verde del saldo. */
.rh-cuenta-saldo {
	margin-top: 16px;
	border-radius: 14px;
	background: var(--rh-forest);
	color: var(--rh-on-dark);
	padding: 16px;
}
.rh-cuenta-saldo-titulo {
	font: 400 10px var(--rh-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .7;
}
.rh-cuenta-saldo-linea {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 8px;
}
.rh-cuenta-saldo-numero { font: 500 34px var(--rh-font); letter-spacing: -.02em; line-height: 1; }
.rh-cuenta-saldo-unidad { font: 400 12px var(--rh-font); opacity: .8; }
.rh-cuenta-barra {
	height: 6px;
	border-radius: 999px;
	background: rgba(251, 246, 236, .2);
	margin-top: 14px;
	overflow: hidden;
}
.rh-cuenta-barra > i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--rh-sand-bg);
}
.rh-cuenta-meta { font: 400 11.5px var(--rh-font); opacity: .85; margin-top: 8px; }

/* Actividad */
.rh-cuenta-titulo {
	font: 400 10px var(--rh-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rh-text-soft);
	margin: 18px 0 6px;
}
.rh-cuenta-mov {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--rh-border);
}
.rh-cuenta-mov:last-child { border-bottom: 0; }
.rh-cuenta-mov-texto { flex: 1; min-width: 0; font: 400 12.5px var(--rh-font); }
.rh-cuenta-mov-fecha { font: 400 11px var(--rh-font); color: var(--rh-text-faint); margin-top: 2px; }
.rh-cuenta-mov-puntos { font: 500 12px var(--rh-font); color: var(--rh-forest); white-space: nowrap; }
.rh-cuenta-vacio { font: 400 12px var(--rh-font); color: var(--rh-text-soft); padding: 6px 0; }

/* Los dos botones del pie, en un solo renglon. */
.rh-cuenta-pie { display: flex; gap: 9px; margin-top: 18px; }
.rh-cuenta-pie > .rh-btn { margin-top: 0; }

/* --------------------------------------------------- sheet de ubicacion */

/* El iframe de Maps va con aspect-ratio y no con alto fijo: en un telefono
   angosto un alto de 200px deja el mapa achatado y no se ve la calle. */
.rh-mapa {
	margin-top: 16px;
	border-radius: var(--rh-r-card);
	overflow: hidden;
	border: 1px solid var(--rh-border);
	aspect-ratio: 16 / 10;
	background: var(--rh-surface-2);
}
.rh-mapa iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.rh-ubic-dato {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 0;
	border-bottom: 1px solid var(--rh-border-soft);
}
.rh-ubic-dato:last-of-type { border-bottom: 0; }

.rh-ubic-label {
	font: 400 10px var(--rh-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rh-text-soft);
}
.rh-ubic-valor {
	font: 400 13.5px var(--rh-font);
	color: var(--rh-text);
	line-height: 1.45;
}