/**
 * Panel del dueño y formularios de cuenta.
 *
 * Sigue el lenguaje visual real del sitio: fondo crema, tarjetas
 * blancas sólidas, esquinas muy redondeadas, botones tipo píldora y
 * acentos amarillo y coral. Nada translúcido: el panel se monta sobre
 * páginas con ilustraciones de fondo y el contenido tiene que leerse.
 *
 * Las variables de Core (--rio360-primary y compañía) guardan hoy una
 * paleta oscura que no corresponde a lo construido en Divi, así que
 * NO se usan aquí. Los colores viven en este bloque y se cambian en un
 * solo sitio.
 */

.rio360-acc,
.rio360-panel {
	--acc-bg: #fdf8f0;
	--acc-card: #ffffff;
	--acc-text: #16130f;
	--acc-muted: #6b6560;
	--acc-border: #ece5d9;

	/* Amarillo de las llamadas a la acción, con tinta oscura encima. */
	--acc-primary: #ffc637;
	--acc-on-primary: #16130f;

	--acc-dark: #1b1917;
	--acc-coral: #ff5a5f;
	--acc-green: #14b858;

	--acc-radius: 22px;
	--acc-radius-sm: 14px;
	--acc-shadow: 0 2px 8px rgba( 22, 19, 15, 0.04 ), 0 12px 32px rgba( 22, 19, 15, 0.06 );
	--acc-transition: all 0.2s ease;

	background: var( --acc-bg );
	border-radius: var( --acc-radius );
	box-sizing: border-box;
	color: var( --acc-text );
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 1.55;
	margin: 24px auto;

	/*
	 * Da para cuatro tarjetas de plan en una fila, que es como se
	 * comparan de verdad. Con 1080 la cuarta caía sola a la siguiente
	 * línea y parecía un error de maquetación.
	 */
	max-width: 1240px;
	padding: 32px;
	width: 100%;
}

.rio360-acc *,
.rio360-acc *::before,
.rio360-acc *::after,
.rio360-panel *,
.rio360-panel *::before,
.rio360-panel *::after {
	box-sizing: border-box;
}

/*
 * El color se hereda de la tarjeta, siempre.
 *
 * El panel se monta dentro de una página de Divi, y ahí los elementos
 * de texto que no declaran color acaban tomando el que el tema tenga
 * puesto —blanco, en varias plantillas—, porque la herencia pierde
 * ante cualquier regla que apunte al elemento. El resultado es texto
 * blanco sobre crema: invisible.
 *
 * Con `inherit` cada texto toma el color de su contenedor, que es lo
 * que uno espera: oscuro dentro de una tarjeta clara y claro dentro de
 * una oscura, sin tener que escribir dos reglas por elemento.
 *
 * Va con :where() para que no pese nada: cualquier clase nuestra que
 * quiera gris apagado o coral sigue ganando.
 *
 * Solo texto corrido. Los botones y las etiquetas quedan fuera a
 * propósito: los pintan sus propias clases, y meterlos aquí les borró
 * el texto a los botones de los planes, que van en blanco sobre fondo
 * oscuro y pasaron a heredar el color de la tarjeta.
 */
.rio360-acc :where( p, li, strong, b, em, small, td, th, dt, dd, figcaption ),
.rio360-panel :where( p, li, strong, b, em, small, td, th, dt, dd, figcaption ) {
	color: inherit;
}

/* ------------------------------------------------------------------ */
/* Superficie común                                                    */
/* ------------------------------------------------------------------ */

.rio360-acc__card,
.rio360-panel__group,
.rio360-hours__day,
.rio360-special__row {
	background: var( --acc-card );
	border: 1px solid var( --acc-border );
	border-radius: var( --acc-radius );
	box-shadow: var( --acc-shadow );
}

/* ------------------------------------------------------------------ */
/* Tarjetas de cuenta (ingreso, registro, avisos)                      */
/* ------------------------------------------------------------------ */

.rio360-acc {
	max-width: 560px;
}

.rio360-acc__card {
	margin: 0 auto;
	max-width: 460px;
	padding: 36px 32px;
}

/*
 * El panel del cliente, ancho como el del negocio.
 *
 * Los 460 px son para entrar y registrarse —dos campos en columna
 * estrecha se leen mejor—, pero aquí dentro van pedidos, direcciones
 * y puntos: en un escritorio quedaba una tirita en el centro con media
 * pantalla vacía a los lados.
 *
 * Y menos aire arriba: el saludo empezaba casi a mitad de pantalla.
 */
.rio360-acc--panel {
	margin-top: 8px;
	max-width: 1000px;
}

.rio360-acc--panel .rio360-acc__card {
	max-width: none;
	padding: 28px 32px 32px;
}

.rio360-acc--panel .rio360-acc__title {
	margin-bottom: 14px;
}

@media ( max-width: 600px ) {

	.rio360-acc--panel {
		margin-top: 0;

		/*
		 * El marco de afuera casi desaparece.
		 *
		 * Son dos cajas, una dentro de otra, y cada una traía su
		 * relleno: 22 px de la de afuera más 20 de la de adentro son
		 * 42 px de aire a cada lado en una pantalla de 390. Aquí el
		 * ancho es lo que falta, no el aire.
		 */
		padding: 8px;
	}

	.rio360-acc--panel .rio360-acc__card {
		padding: 20px 16px 24px;
	}

	.rio360-acc--panel .rio360-acc__title {
		font-size: 1.4rem;
	}
}

.rio360-acc__title {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 8px;
}

.rio360-acc__intro {
	color: var( --acc-muted );
	margin: 0 0 28px;
}

.rio360-acc__form,
.rio360-acc__inline {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.rio360-acc__inline {
	border-top: 1px solid var( --acc-border );
	margin-top: 28px;
	padding-top: 24px;
}

.rio360-acc__field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.rio360-acc__field > span {
	color: var( --acc-muted );
	font-size: 0.8125rem;
	font-weight: 600;
}

.rio360-acc__field input,
.rio360-acc__field select,
.rio360-acc__field textarea,
.rio360-panel__switch select {
	background: #fbf8f3;
	border: 1px solid var( --acc-border );
	border-radius: var( --acc-radius-sm );
	color: var( --acc-text );
	font: inherit;
	padding: 13px 16px;
	transition: var( --acc-transition );
	width: 100%;
}

.rio360-acc__field input::placeholder,
.rio360-acc__field textarea::placeholder {
	color: #a8a19a;
}

.rio360-acc__field input:focus,
.rio360-acc__field select:focus,
.rio360-acc__field textarea:focus {
	background: var( --acc-card );
	border-color: var( --acc-dark );
	/* Halo en vez de outline: no descoloca el campo. */
	box-shadow: 0 0 0 3px rgba( 22, 19, 15, 0.08 );
	outline: none;
}

.rio360-acc__field input:disabled {
	color: var( --acc-muted );
	cursor: not-allowed;
	opacity: 0.7;
}

.rio360-acc__check {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 0.9375rem;
	gap: 10px;
}

.rio360-acc__check input[ type='checkbox' ] {
	accent-color: var( --acc-dark );
	height: 17px;
	width: 17px;
}

/*
 * «Atiendo con cita» va arriba y en su propia caja.
 *
 * Cambia el sentido de toda la semana que hay debajo: quien la marca
 * ya no tiene que llenar horarios. Ponerla como una casilla más entre
 * los días la habría dejado invisible justo para quien la necesita.
 */
.rio360-hours__agenda {
	align-items: flex-start;
	background: rgba( 10, 132, 255, 0.06 );
	border: 1px solid rgba( 10, 132, 255, 0.25 );
	border-radius: 12px;
	margin-bottom: 16px;
	padding: 14px 16px;
}

.rio360-hours__agenda input[ type='checkbox' ] {
	margin-top: 2px;
}

.rio360-hours__agenda small {
	color: var( --acc-muted, #6b7280 );
	display: block;
	font-size: 0.85rem;
	line-height: 1.4;
	margin-top: 3px;
}

/* ------------------------------------------------------------------ */
/* Botones                                                             */
/* ------------------------------------------------------------------ */

.rio360-acc__submit {
	background: var( --acc-primary );
	border: 0;
	border-radius: 999px;
	color: var( --acc-on-primary );
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 700;
	padding: 14px 30px;
	text-align: center;
	text-decoration: none;
	transition: var( --acc-transition );
}

.rio360-acc__submit:hover {
	box-shadow: 0 6px 18px rgba( 255, 198, 55, 0.4 );
	transform: translateY( -1px );
}

.rio360-acc__submit:focus-visible {
	outline: 3px solid var( --acc-dark );
	outline-offset: 2px;
}

/* Acción secundaria: píldora oscura, como en la portada. */
.rio360-acc__submit--dark {
	background: var( --acc-dark );
	color: #fff;
}

.rio360-acc__submit--dark:hover {
	box-shadow: 0 6px 18px rgba( 22, 19, 15, 0.25 );
}

.rio360-acc__link {
	background: none;
	border: 0;
	color: var( --acc-text );
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 8px 0;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: var( --acc-transition );
}

.rio360-acc__link:hover {
	color: var( --acc-coral );
}

/* El honeypot no debe verse nunca. */
.rio360-acc__trap {
	height: 1px;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

/* ------------------------------------------------------------------ */
/* Avisos                                                              */
/* ------------------------------------------------------------------ */

.rio360-acc__msg {
	border: 1px solid transparent;
	border-radius: var( --acc-radius-sm );
	font-size: 0.9375rem;
	font-weight: 500;
	margin-bottom: 22px;
	padding: 14px 18px;
}

.rio360-acc__msg--error {
	background: #fff1f1;
	border-color: #ffd0d1;
	color: #c0272d;
}

.rio360-acc__msg--ok {
	background: #eefaf2;
	border-color: #c3ecd3;
	color: #0f7a3d;
}

/*
 * El aviso se va solo pasados unos segundos. Se encoge además de
 * desvanecerse para que el contenido de abajo suba en el mismo gesto y
 * no dé un salto seco cuando desaparece.
 */
.rio360-acc__msg.is-yendose {
	margin-bottom: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding-bottom: 0;
	padding-top: 0;
	transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
}

/*
 * El aviso que cae en una página sin formulario —el inicio, tras
 * registrarse como visitante—. Flota arriba a la derecha en vez de
 * empujar el contenido: la portada es de Divi y no tiene un hueco donde
 * meterlo sin descuadrar nada.
 */
.rio360-acc--flotante {
	background: none;
	bottom: auto;
	left: auto;
	margin: 0;
	max-width: min( 420px, calc( 100vw - 32px ) );
	padding: 0;
	position: fixed;
	right: 16px;
	top: 16px;
	width: auto;
	z-index: 99997;
}

.rio360-acc--flotante .rio360-acc__msg {
	box-shadow: 0 8px 28px rgba( 22, 19, 15, 0.18 );
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Pantalla de carga                                                   */
/* ------------------------------------------------------------------ */

/*
 * Se pinta al enviar cualquier formulario que vaya al servidor. Cancelar
 * un plan o volver a activarlo tarda lo suyo, y sin esto la pantalla se
 * quedaba idéntica a como estaba antes de pulsar: lo natural ahí es
 * volver a pulsar, que en un formulario de cobro es justo lo que no
 * queremos.
 */
.rio360-cargando {
	align-items: center;
	background: rgba( 255, 252, 247, 0.93 );
	display: flex;
	flex-direction: column;
	gap: 16px;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 99999;
}

.rio360-cargando__rueda {
	animation: rio360-girar 0.7s linear infinite;
	border: 3px solid rgba( 0, 0, 0, 0.16 );
	border-radius: 50%;
	border-top-color: var( --acc-primary, #ffc637 );
	height: 44px;
	width: 44px;
}

.rio360-cargando__texto {
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
	opacity: 0.85;
}

@keyframes rio360-girar {
	to {
		transform: rotate( 360deg );
	}
}

/*
 * Quien pidió menos movimiento no ve girar nada: se queda el texto, que
 * es lo que de verdad informa.
 */
@media ( prefers-reduced-motion: reduce ) {

	.rio360-cargando__rueda {
		animation-duration: 2s;
	}

	.rio360-acc__msg.is-yendose {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Panel: cabecera                                                     */
/* ------------------------------------------------------------------ */

.rio360-panel__top {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
	margin-bottom: 26px;
}

.rio360-panel__id {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rio360-panel__hello {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.rio360-panel__plan {
	align-self: flex-start;
	background: var( --acc-dark );
	border-radius: 999px;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 5px 14px;
	text-transform: uppercase;
}

.rio360-panel__actions {
	align-items: center;
	display: flex;
	gap: 14px;
}

.rio360-panel__switch select {
	padding: 10px 14px;
	width: auto;
}

.rio360-panel__logout {
	color: var( --acc-muted );
	font-weight: 600;
	text-decoration: none;
	transition: var( --acc-transition );
}

.rio360-panel__logout:hover {
	color: var( --acc-coral );
}

/* ------------------------------------------------------------------ */
/* Panel: navegación                                                   */
/* ------------------------------------------------------------------ */

/* Se desplaza en móvil en vez de romper la página. */
.rio360-panel__nav {
	background: var( --acc-card );
	border: 1px solid var( --acc-border );
	border-radius: 999px;
	display: flex;
	gap: 4px;
	margin-bottom: 26px;
	overflow-x: auto;
	padding: 6px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.rio360-panel__nav::-webkit-scrollbar {
	display: none;
}

.rio360-panel__tab {
	align-items: center;
	border-radius: 999px;
	color: var( --acc-muted );
	display: flex;
	flex: 0 0 auto;
	font-weight: 600;
	gap: 8px;
	padding: 11px 20px;
	text-decoration: none;
	transition: var( --acc-transition );
	white-space: nowrap;
}

.rio360-panel__tab:hover {
	background: #f6f1e8;
	color: var( --acc-text );
}

.rio360-panel__tab.is-active {
	background: var( --acc-dark );
	color: #fff;
}

.rio360-panel__tab-icon {
	font-size: 1.05rem;
}

.rio360-panel__tab-text {
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ */
/* Panel: flechas de las pestañas                                      */
/* ------------------------------------------------------------------ */

.rio360-panel__nav-wrap {
	position: relative;
}

/*
 * El envoltorio hereda el margen que tenía el menú, y el menú lo
 * pierde: si no, la flecha —que se coloca contra el envoltorio— queda
 * centrada sobre el hueco de abajo en vez de sobre las pestañas.
 */
.rio360-panel__nav-wrap {
	margin-bottom: 26px;
}

.rio360-panel__nav-wrap .rio360-panel__nav {
	margin-bottom: 0;
}

.rio360-panel__flecha {
	align-items: center;
	background: var( --acc-card );
	border: 1px solid var( --acc-border );
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba( 22, 19, 15, 0.12 );
	color: var( --acc-text );
	cursor: pointer;
	display: flex;
	font-size: 20px;
	height: 32px;
	justify-content: center;
	line-height: 1;

	/* Escondidas mientras no haya nada a ese lado. */
	opacity: 0;
	padding: 0 0 2px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	transition: opacity 0.2s ease, background 0.15s ease;
	width: 32px;
	z-index: 2;
}

.rio360-panel__flecha--izq {
	left: -6px;
}

.rio360-panel__flecha--der {
	right: -6px;
}

.rio360-panel__nav-wrap.puede-izq .rio360-panel__flecha--izq,
.rio360-panel__nav-wrap.puede-der .rio360-panel__flecha--der {
	opacity: 1;
	pointer-events: auto;
}

.rio360-panel__flecha:hover {
	background: var( --acc-dark );
	color: #fff;
}

/*
 * Un degradado bajo cada flecha para que las pestañas se desvanezcan en
 * vez de quedar cortadas a cuchillo. Es lo que hace que se entienda que
 * hay más y no que algo se rompió.
 */
.rio360-panel__nav-wrap::before,
.rio360-panel__nav-wrap::after {
	border-radius: 999px;
	bottom: 1px;
	content: '';
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 1px;
	transition: opacity 0.2s ease;
	width: 46px;
	z-index: 1;
}

.rio360-panel__nav-wrap::before {
	background: linear-gradient( to right, var( --acc-card ) 35%, rgba( 255, 255, 255, 0 ) );
	left: 1px;
}

.rio360-panel__nav-wrap::after {
	background: linear-gradient( to left, var( --acc-card ) 35%, rgba( 255, 255, 255, 0 ) );
	right: 1px;
}

.rio360-panel__nav-wrap.puede-izq::before,
.rio360-panel__nav-wrap.puede-der::after {
	opacity: 1;
}

/*
 * En pantallas de dedo no se pintan: ahí se desliza con el dedo, que es
 * más cómodo que apuntar a un círculo de 32 píxeles, y las flechas solo
 * taparían pestañas.
 */
@media ( hover: none ) {

	.rio360-panel__flecha,
	.rio360-panel__nav-wrap::before,
	.rio360-panel__nav-wrap::after {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Panel: formularios                                                  */
/* ------------------------------------------------------------------ */

.rio360-panel__body {
	animation: rio360-panel-in 0.25s ease;
}

.rio360-panel__form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.rio360-panel__group {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px 28px;
}

.rio360-panel__group legend {
	font-size: 1.0625rem;
	font-weight: 700;
	padding: 0 8px;
}

.rio360-panel__row {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
}

.rio360-panel__choices {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
}

.rio360-panel__subtitle {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 26px 0 10px;
}

.rio360-panel__hint,
.rio360-panel__locked {
	color: var( --acc-muted );
	font-size: 0.875rem;
	margin: 0;
}

.rio360-panel__locked {
	background: #fffaeb;
	border: 1px solid #ffe6a3;
	border-radius: var( --acc-radius-sm );
	color: #8a6100;
	padding: 16px 18px;
}

.rio360-panel__form textarea {
	min-height: 130px;
	resize: vertical;
}

/* ------------------------------------------------------------------ */
/* Panel: horarios                                                     */
/* ------------------------------------------------------------------ */

.rio360-hours {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rio360-hours__day {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
	padding: 18px 24px;
}

/* Día apagado: se ve que los turnos ya no cuentan. */
.rio360-hours__day.is-off .rio360-hours__shifts {
	opacity: 0.4;
	pointer-events: none;
}

.rio360-hours__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.rio360-hours__name {
	font-weight: 700;
	min-width: 104px;
}

.rio360-hours__shifts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	transition: var( --acc-transition );
}

.rio360-hours__shift {
	align-items: center;
	display: flex;
	gap: 8px;
}

.rio360-hours__shift input,
.rio360-special__row input[ type='date' ],
.rio360-special__row input[ type='text' ] {
	background: #fbf8f3;
	border: 1px solid var( --acc-border );
	border-radius: 10px;
	color: var( --acc-text );
	font: inherit;
	padding: 9px 12px;
}

.rio360-hours__shift input:focus,
.rio360-special__row input:focus {
	border-color: var( --acc-dark );
	outline: none;
}

.rio360-special {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rio360-special__row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 18px;
}

.rio360-panel__embed {
	margin-top: 10px;
}

/*
 * Lo que se incrusta se viste como el panel.
 *
 * Reservas trae su propio diseño —verde, esquinas de 10 px, tipografía
 * del sistema— porque también vive fuera de aquí, en la página del
 * negocio. Dentro del panel eso se veía como un plugin pegado: dos
 * verdes distintos y dos redondeos en la misma pantalla.
 *
 * Se traducen sus variables a las del panel en vez de reescribir sus
 * reglas: el día que cambie el color del panel, cambia también lo
 * incrustado, sin tocar el otro plugin.
 */
/*
 * Sobre `.rio360-booking`, y con `!important`.
 *
 * Sobre el contenedor no sirve: el otro plugin las define en ese mismo
 * elemento y una variable puesta más cerca gana. Y el portal además
 * escribe el color y el redondeo en el atributo `style`, que le llega
 * de sus propios ajustes de apariencia; contra un estilo en línea solo
 * hay dos salidas, y la otra es que el panel le cambie los ajustes al
 * plugin de reservas para todo el sitio.
 */
.rio360-panel__embed .rio360-booking {
	--rio360-primary: var( --acc-dark ) !important;
	--rio360-primary-contrast: #fff !important;
	--rio360-surface: var( --acc-card ) !important;
	--rio360-bg-soft: var( --acc-bg ) !important;
	--rio360-border: var( --acc-border ) !important;
	--rio360-text: var( --acc-text ) !important;
	--rio360-muted: var( --acc-muted ) !important;
	--rio360-radius: var( --acc-radius-sm ) !important;
	--rio360-shadow: var( --acc-shadow ) !important;

	font-family: inherit;
}

/*
 * Y ocupa todo el ancho.
 *
 * El portal se limita a 720 px porque suelto en la página de un
 * negocio, a pantalla completa, una tabla de reservas de 1.400 px de
 * ancho no se lee. Aquí ya está dentro de una tarjeta que pone el
 * límite, y ese segundo tope dejaba el panel encogido a la mitad justo
 * al entrar a reservas.
 */
.rio360-panel__embed .rio360-portal {
	max-width: none;
}

@keyframes rio360-panel-in {

	from {
		opacity: 0;
		transform: translateY( 6px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Quien pidió menos movimiento, no lo recibe. */
@media ( prefers-reduced-motion: reduce ) {

	.rio360-panel__body {
		animation: none;
	}

	.rio360-acc__submit:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Móvil                                                               */
/* ------------------------------------------------------------------ */

@media ( max-width: 782px ) {

	.rio360-acc,
	.rio360-panel {
		border-radius: 0;
		margin: 0 auto;
		padding: 22px 16px;
	}

	.rio360-acc__card {
		padding: 26px 20px;
	}

	.rio360-panel__group {
		padding: 20px 18px;
	}

	.rio360-panel__top {
		flex-direction: column;
		gap: 14px;
	}

	.rio360-panel__hello {
		font-size: 1.5rem;
	}

	.rio360-hours__day {
		align-items: stretch;
		flex-direction: column;
		gap: 14px;
	}

	.rio360-hours__shifts {
		flex-direction: column;
	}

	.rio360-hours__shift input {
		flex: 1;
	}

	.rio360-panel__tab {
		padding: 10px 16px;
	}

	.rio360-panel__tab-text {
		font-size: 0.875rem;
	}
}

/* ------------------------------------------------------------------ */
/* Modal de confirmación                                               */
/* ------------------------------------------------------------------ */

/*
 * z-index alto y position fixed sobre <body>: el resto del sitio usa
 * 999999 para sus ventanas emergentes y esta debe quedar por encima
 * del menú flotante móvil.
 */
.rio360-modal-overlay {
	align-items: center;
	background: rgba( 22, 19, 15, 0.55 );
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 20px;
	position: fixed;
	z-index: 999999;
}

.rio360-modal {
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba( 22, 19, 15, 0.25 );
	color: #16130f;
	font-family: 'Outfit', sans-serif;
	max-width: 440px;
	padding: 30px 28px;
	width: 100%;
}

.rio360-modal__title {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}

.rio360-modal__body p {
	color: #4a453f;
	font-size: 0.9375rem;
	margin: 0 0 10px;
}

.rio360-modal__note {
	color: #6b6560 !important;
	font-size: 0.8125rem !important;
}

.rio360-modal__actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 22px;
}

.rio360-modal__cancel,
.rio360-modal__confirm {
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	padding: 12px 22px;
	transition: all 0.2s ease;
}

.rio360-modal__cancel {
	background: transparent;
	border: 1px solid #ece5d9;
	color: #6b6560;
}

.rio360-modal__cancel:hover {
	border-color: #1b1917;
	color: #16130f;
}

.rio360-modal__confirm {
	background: #1b1917;
	border: 0;
	color: #fff;
}

.rio360-modal__confirm:hover {
	box-shadow: 0 6px 18px rgba( 22, 19, 15, 0.25 );
}

@media ( max-width: 480px ) {

	.rio360-modal__actions {
		flex-direction: column-reverse;
	}

	.rio360-modal__cancel,
	.rio360-modal__confirm {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Imágenes del negocio                                                */
/* ------------------------------------------------------------------ */

.rio360-media {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
}

.rio360-media__slot,
.rio360-media__gallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rio360-media__label {
	color: var( --acc-muted );
	font-size: 0.8125rem;
	font-weight: 600;
}

.rio360-media__label em {
	font-style: normal;
	font-weight: 400;
}

.rio360-media__preview img {
	border: 1px solid var( --acc-border );
	border-radius: var( --acc-radius-sm );
	display: block;
	height: auto;
	max-width: 120px;
}

.rio360-media__preview--wide img {
	max-width: 100%;
}

.rio360-media input[ type='file' ],
.rio360-media__gallery input[ type='file' ] {
	background: #fbf8f3;
	border: 1px dashed var( --acc-border );
	border-radius: var( --acc-radius-sm );
	color: var( --acc-muted );
	font: inherit;
	font-size: 0.875rem;
	padding: 12px 14px;
	width: 100%;
}

.rio360-media__gallery {
	margin-top: 20px;
}

.rio360-media__grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat( auto-fill, minmax( 96px, 1fr ) );
}

.rio360-media__item {
	border-radius: var( --acc-radius-sm );
	display: block;
	overflow: hidden;
	position: relative;
}

.rio360-media__item img {
	border-radius: var( --acc-radius-sm );
	display: block;
	height: 96px;
	object-fit: cover;
	width: 100%;
}

/* La foto se quita al guardar: el aspa solo la marca. */
.rio360-media__remove {
	align-items: center;
	background: var( --acc-dark );
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 16px;
	height: 24px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 6px;
	top: 6px;
	width: 24px;
}

.rio360-media__item.is-removed {
	opacity: 0.35;
}

.rio360-media__item.is-removed .rio360-media__remove {
	background: var( --acc-coral );
}

/* El conmutador de negocio funciona sin JavaScript: lleva su botón. */
.rio360-panel__switch {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0;
}

.rio360-panel__switch label {
	margin: 0;
}

.rio360-panel__switch-go {
	background: var( --acc-dark );
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 10px 18px;
}


/* ------------------------------------------------------------------ */
/* Ancho dentro de Divi                                                */
/* ------------------------------------------------------------------ */

/*
 * Divi limita sus filas a 1080px, así que el panel no podía crecer por
 * su cuenta: la cuarta tarjeta de plan caía sola a la línea siguiente.
 *
 * Se ensancha SOLO la fila que contiene el panel, no todas las del
 * sitio. Si el navegador no entiende :has(), no pasa nada: el panel se
 * queda en 1080 y sigue viéndose bien, solo con los planes en dos
 * filas.
 */
@media ( min-width: 1100px ) {

	.et_pb_row:has( .rio360-panel ),
	.et_pb_row:has( .rio360-acc ) {
		max-width: 1300px;
		width: 92%;
	}
}

/* ------------------------------------------------------------------ */
/* Validación de formularios                                           */
/* ------------------------------------------------------------------ */

.rio360-acc__error {
	color: #c0392b;
	display: block;
	font-size: 0.78rem;
	margin-top: 5px;
}

.rio360-acc__field input[aria-invalid="true"] {
	border-color: #c0392b;
}

/*
 * El botón apagado tiene que verse apagado. Un botón que no responde y
 * se ve igual que uno que sí, se lee como una página rota.
 */
.rio360-acc__submit[disabled] {
	cursor: not-allowed;
	filter: grayscale( 0.6 );
	opacity: 0.5;
}

/* ------------------------------------------------------------------ */
/* Registro: tipo de cuenta                                            */
/* ------------------------------------------------------------------ */

/*
 * Dos opciones grandes en vez de dos puntitos.
 *
 * Es la pregunta que decide qué se le pide después y a dónde va al
 * terminar, así que tiene que verse como una decisión y no como una
 * casilla más del formulario.
 */
.rio360-acc__tipo {
	border: 0;
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.rio360-acc__tipo legend {
	color: var( --acc-muted );
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 8px;
	padding: 0;
}

.rio360-acc__opcion {
	align-items: flex-start;
	background: #fbf8f3;
	border: 1px solid var( --acc-border );
	border-radius: var( --acc-radius-sm );
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	transition: var( --acc-transition );
}

.rio360-acc__opcion:hover {
	border-color: #d8cfbf;
}

.rio360-acc__opcion input {
	accent-color: var( --acc-dark );
	flex: none;
	height: 18px;
	margin-top: 2px;
	width: 18px;
}

.rio360-acc__opcion:has( input:checked ) {
	background: var( --acc-card );
	border-color: var( --acc-dark );
	box-shadow: 0 0 0 3px rgba( 22, 19, 15, 0.07 );
}

.rio360-acc__opcion-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rio360-acc__opcion-texto strong {
	font-weight: 700;
}

.rio360-acc__opcion-texto small {
	color: var( --acc-muted );
	font-size: 0.8125rem;
	line-height: 1.4;
}

/*
 * Las notas de ayuda bajo un campo son notas, no párrafos.
 *
 * Sin esto heredan el tamaño del cuerpo y "Mínimo 8 caracteres" pesaba
 * lo mismo que la etiqueta del campo: la ayuda gritando más fuerte que
 * la pregunta.
 */
.rio360-acc__field small {
	color: var( --acc-muted );
	font-size: 0.8125rem;
	line-height: 1.45;
}

/* El <div> que envuelve cada opción no debe estorbar a la rejilla. */
.rio360-acc__tipo > div {
	display: contents;
}

/*
 * El texto de cada opción, en bloque.
 *
 * Va aquí y no solo en el contenedor porque el <strong> y el <small>
 * son elementos en línea: sin estilos salían en el mismo renglón, con
 * el título y la explicación pegados.
 */
.rio360-acc__opcion-texto strong,
.rio360-acc__opcion-texto small {
	display: block;
}

/* "(opcional)" al lado de la etiqueta, sin gritar. */
.rio360-acc__field em {
	font-style: normal;
	font-weight: 400;
	opacity: 0.7;
}

/* ------------------------------------------------------------------ */
/* Pie de las tarjetas de cuenta                                       */
/* ------------------------------------------------------------------ */

.rio360-acc__pie {
	border-top: 1px solid var( --acc-border );
	color: var( --acc-muted );
	font-size: 0.9375rem;
	margin: 22px 0 0;
	padding-top: 18px;
	text-align: center;
}

/*
 * El enlace, con la clase doblada: el tema pinta de su color todos los
 * enlaces dentro de un bloque de texto y esa regla le gana a la
 * nuestra por especificidad.
 */
.rio360-acc__pie a.rio360-acc__pie-enlace,
.rio360-acc__pie a {
	color: var( --acc-text );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rio360-acc__pie a:hover {
	color: var( --acc-coral );
}

.rio360-acc__hint {
	color: var( --acc-muted );
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Panel del visitante: pedir cuenta de negocio                        */
/* ------------------------------------------------------------------ */

.rio360-acc__negocio {
	border-top: 1px solid var( --acc-border );
	margin-top: 26px;
	padding-top: 22px;
}

.rio360-acc__subtitulo {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0 0 6px;
}

.rio360-acc__negocio .rio360-acc__hint {
	margin-bottom: 18px;
}

.rio360-acc__negocio textarea {
	resize: vertical;
}

/* ------------------------------------------------------------------ */
/* Botones bloqueados                                                  */
/* ------------------------------------------------------------------ */

/*
 * Un botón apagado tiene que verse apagado.
 *
 * El validador ya los bloqueaba, pero seguían con su color y su cursor
 * de mano: se veían idénticos a uno que funciona. Quien pulsaba
 * "Enviar enlace de recuperación" con el campo vacío no recibía ni el
 * correo ni una explicación, solo un botón que no hacía nada. Medido:
 * mismo color, opacidad 1 y cursor pointer en los dos estados.
 */
.rio360-acc__submit[ disabled ],
.rio360-acc__link[ disabled ] {
	cursor: not-allowed;
	opacity: 0.45;
}

.rio360-acc__submit[ disabled ]:hover {
	box-shadow: none;
	transform: none;
}

.rio360-acc__link[ disabled ] {
	text-decoration-style: dotted;
}

.rio360-acc__link[ disabled ]:hover {
	color: var( --acc-text );
}

/* ------------------------------------------------------------------ */
/* Desplegable de "publica tu negocio"                                 */
/* ------------------------------------------------------------------ */

/*
 * Cerrado se lee como una pregunta de una línea; abierto baja el
 * formulario. Casi nadie de los que entran a este panel tiene un
 * negocio, así que de partida no ocupa sitio.
 */
.rio360-acc__desplegable summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	padding: 4px 0;
}

/* La flechita que ponen Safari y Chrome, fuera: se pinta una propia. */
.rio360-acc__desplegable summary::-webkit-details-marker {
	display: none;
}

.rio360-acc__desplegable summary span {
	color: var( --acc-muted );
	font-size: 0.9375rem;
}

.rio360-acc__desplegable summary em {
	color: var( --acc-text );
	font-style: normal;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rio360-acc__desplegable summary::after {
	color: var( --acc-muted );
	content: '▾';
	font-size: 0.75rem;
	margin-left: auto;
	transition: transform 0.2s ease;
}

.rio360-acc__desplegable[ open ] summary::after {
	transform: rotate( 180deg );
}

.rio360-acc__desplegable summary:hover em {
	color: var( --acc-coral );
}

.rio360-acc__desplegable > .rio360-acc__hint {
	margin-top: 14px;
}

/* ==================================================================
 * Ver la contraseña
 * ================================================================== */

.rio360-acc__clave {
	position: relative;
	display: block;
}

/* Sitio para el botón, o el texto pasa por debajo del ojo. */
.rio360-acc__clave input {
	width: 100%;
	padding-right: 50px;
}

.rio360-acc__ojo {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --acc-muted );
	cursor: pointer;
	transition: var( --acc-transition );
}

.rio360-acc__ojo:hover {
	background: #f2ece1;
	color: var( --acc-text );
}

.rio360-acc__ojo:focus-visible {
	outline: 2px solid var( --acc-primary );
	outline-offset: 1px;
}

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

/* ==================================================================
 * Ventana de recuperar contraseña
 * ================================================================== */

.rio360-acc__olvide {
	margin: 14px 0 0;
	text-align: center;
	font-size: 0.875rem;
}

.rio360-acc__olvide a {
	color: var( --acc-muted );
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.rio360-acc__olvide a:hover {
	color: var( --acc-text );
	border-bottom-color: var( --acc-primary );
}

.rio360-acc__modal {
	position: fixed;
	inset: 0;
	z-index: 2147482000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba( 22, 19, 15, 0.55 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
}

/*
 * Sin JavaScript la ventana está escondida con [hidden] y solo se abre
 * por el ancla del enlace: así quien tenga el guion bloqueado también
 * puede recuperar su contraseña.
 */
.rio360-acc__modal:target {
	display: flex !important;
}

.rio360-acc__modal[ hidden ]:not( :target ) {
	display: none;
}

.rio360-acc__modal-caja {
	position: relative;
	width: 100%;
	max-width: 400px;
	padding: 30px 28px 28px;
	border-radius: var( --acc-radius );
	background: var( --acc-card );
	box-shadow: var( --acc-shadow );
	animation: rio360AccEntra 0.22s ease;
}

@keyframes rio360AccEntra {
	from { opacity: 0; transform: translateY( 10px ) scale( 0.98 ); }
	to   { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.rio360-acc__modal-caja { animation: none; }
}

.rio360-acc__modal-caja h3 {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
	color: var( --acc-text );
}

.rio360-acc__modal-texto {
	margin: 0 0 20px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --acc-muted );
}

.rio360-acc__modal-caja form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rio360-acc__modal-cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #f5f0e7;
	color: var( --acc-text );
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	transition: var( --acc-transition );
}

.rio360-acc__modal-cerrar:hover {
	background: var( --acc-primary );
}

/* Con la ventana abierta, la página de detrás no se desplaza. */
body.rio360-acc-abierto {
	overflow: hidden;
}

/* ==================================================================
 * Los enlaces de las pantallas de cuenta
 * ==================================================================
 *
 * Salían en blanco sobre la tarjeta blanca: invisibles. El tema pinta
 * los enlaces de esta sección en blanco desde un <style> dentro de la
 * propia página, o sea después de esta hoja, y al empatar en peso
 * ganaba el suyo.
 *
 * Se repite la clase del contenedor y se marca, que es lo único que
 * gana esa pelea sin ir a tocar los ajustes del constructor —donde
 * mañana alguien lo cambia sin saber que esto depende de ahí.
 * ================================================================== */

.rio360-acc .rio360-acc__olvide a,
.rio360-acc .rio360-acc__pie a,
.rio360-acc a.rio360-acc__link {
	color: var( --acc-text ) !important;
	font-weight: 700;
	text-decoration: none !important;
	border-bottom: 2px solid var( --acc-primary );
	padding-bottom: 1px;
	transition: var( --acc-transition );
}

.rio360-acc .rio360-acc__olvide a:hover,
.rio360-acc .rio360-acc__pie a:hover,
.rio360-acc a.rio360-acc__link:hover {
	color: var( --acc-text ) !important;
	border-bottom-color: var( --acc-text );
}

/*
 * El de "¿Olvidaste tu contraseña?" es más discreto: no compite con el
 * botón de entrar, que es lo que casi todo el mundo viene a hacer.
 */
.rio360-acc .rio360-acc__olvide a {
	font-weight: 600;
	border-bottom-width: 1px;
	border-bottom-color: rgba( 22, 19, 15, 0.2 );
}

.rio360-acc .rio360-acc__olvide a:hover {
	border-bottom-color: var( --acc-primary );
}

/* ------------------------------------------------------------------ */
/* Los títulos, con tinta propia                                       */
/* ------------------------------------------------------------------ */

/*
 * "Panel de tu negocio" estaba en la página, ocupando su sitio, y no se
 * veía: blanco sobre la tarjeta blanca.
 *
 * El contenedor ya declara `color: var(--acc-text)`, pero eso se hereda,
 * y la herencia pierde contra cualquier regla que apunte al elemento.
 * El tema tiene una que dice `h2 { color: var(--color-text) }`, y en
 * esta sección esa variable resuelve a blanco: gana por existir, no por
 * pesar más. El párrafo de debajo sí se veía porque lleva color propio,
 * y esa diferencia es justo la que se ve en la pantalla.
 *
 * Se le da tinta explícita a los seis niveles y no solo a los que hoy
 * se usan: la próxima plantilla que traiga un h4 no tiene por qué
 * volver a descubrir esto.
 *
 * Doblado y con !important, como los enlaces de más arriba: la regla
 * del tema vive en un <style> dentro de la propia página, o sea después
 * de esta hoja, y a igualdad de peso gana la última.
 */
.rio360-acc.rio360-acc h1,
.rio360-acc.rio360-acc h2,
.rio360-acc.rio360-acc h3,
.rio360-acc.rio360-acc h4,
.rio360-acc.rio360-acc h5,
.rio360-acc.rio360-acc h6,
.rio360-panel.rio360-panel h1,
.rio360-panel.rio360-panel h2,
.rio360-panel.rio360-panel h3,
.rio360-panel.rio360-panel h4,
.rio360-panel.rio360-panel h5,
.rio360-panel.rio360-panel h6 {
	color: var( --acc-text ) !important;
}


/* ------------------------------------------------------------------ */
/* Botón de guardar de las secciones                                   */
/* ------------------------------------------------------------------ */

/*
 * Lo usan varias secciones de otros plugins. Vive aquí y no en cada
 * una para que el botón de guardar sea el mismo en todas.
 */
.rio360-panel .rio360-submit {
	background: var( --acc-dark );
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	min-height: 48px;
	padding: 0 26px;
	transition: var( --acc-transition );
}

.rio360-panel .rio360-submit:hover,
.rio360-panel .rio360-submit:focus {
	background: var( --acc-primary );
	color: var( --acc-on-primary );
}

/* ------------------------------------------------------------------ */
/* Lo que hay dentro de un grupo                                       */
/* ------------------------------------------------------------------ */

/*
 * El segundo nivel de la navegación. Se ve más liviano que el primero
 * a propósito: el grupo es dónde estás y esto es qué miras dentro,
 * dos cosas de peso distinto.
 */
.rio360-panel__subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: -6px 0 22px;
}

/*
 * El color va forzado.
 *
 * Divi pinta los enlaces y gana por especificidad: las pestañas sin
 * seleccionar salían casi blancas sobre el fondo claro, ilegibles. Ya
 * nos pasó con los botones de los planes y con el aviso de cambiar de
 * negocio.
 */
.rio360-panel__subtab {
	align-items: center;
	background: transparent;
	border: 1px solid var( --acc-border );
	border-radius: 999px;
	color: var( --acc-muted ) !important;
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 7px;
	padding: 8px 16px;
	text-decoration: none !important;
	transition: var( --acc-transition );
	white-space: nowrap;
}

.rio360-panel__subtab:hover {
	background: #f6f1e8;
	color: var( --acc-text ) !important;
}

.rio360-panel__subtab.is-active {
	background: #f6f1e8;
	border-color: var( --acc-text );
	color: var( --acc-text ) !important;
}

@media ( max-width: 600px ) {

	/* En el celular se desplaza en fila, como las pestañas de arriba. */
	.rio360-panel__subnav {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.rio360-panel__subtab {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------------ */
/* Las pestañas de quien pide                                          */
/* ------------------------------------------------------------------ */

/*
 * Sus datos, sus direcciones y sus pedidos venían uno debajo de otro
 * en una tira larga donde todo pesaba lo mismo: el teléfono, la
 * contraseña y lo que compró. Cada cosa a lo suyo.
 */
.rio360-acc__pestanas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}

.rio360-acc__pestana {
	align-items: center;
	background: transparent;
	border: 1px solid var( --acc-border );
	border-radius: 999px;
	color: var( --acc-muted ) !important;
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 7px;
	padding: 9px 18px;
	text-decoration: none !important;
	transition: var( --acc-transition );
	white-space: nowrap;
}

.rio360-acc__pestana:hover {
	background: #f6f1e8;
	color: var( --acc-text ) !important;
}

.rio360-acc__pestana.is-active {
	background: var( --acc-dark, #1c1c1c );
	border-color: var( --acc-dark, #1c1c1c );
	color: #fff !important;
}

@media ( max-width: 600px ) {

	.rio360-acc__pestanas {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.rio360-acc__pestana {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------------ */
/* Otras sedes                                                         */
/* ------------------------------------------------------------------ */

.rio360-sedes__intro {
	color: var( --acc-muted );
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
}

.rio360-sedes__lista {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rio360-sedes__lista:empty {
	display: none;
}

.rio360-sede {
	background: rgba( 255, 255, 255, 0.03 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
}

.rio360-sede__cabeza {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.rio360-sede__titulo {
	font-size: 0.9375rem;
	font-weight: 700;
}

/*
 * La × del panel la pinta Divi en blanco sobre fondo claro y
 * desaparece; el color va marcado para que se vea siempre.
 */
.rio360-sede__quitar {
	background: transparent;
	border: 0;
	color: var( --acc-muted ) !important;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0 6px;
}

.rio360-sede__quitar:hover {
	color: #ff5a5f !important;
}

.rio360-sede__foto {
	border-radius: 10px;
	height: auto;
	margin-top: 8px;
	max-width: 96px;
}

.rio360-sedes__agregar {
	align-items: center;
	align-self: flex-start;
	background: transparent;
	border: 1px dashed rgba( 255, 255, 255, 0.28 );
	border-radius: 999px;
	color: inherit !important;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
}

.rio360-sedes__agregar:hover {
	border-color: rgba( 255, 255, 255, 0.5 );
}

.rio360-sedes__agregar[ hidden ] {
	display: none;
}

.rio360-sedes__tope {
	color: var( --acc-muted );
	font-size: 0.8125rem;
	margin: 0;
}

.rio360-sedes__tope[ hidden ] {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Salir un rato                                                       */
/* ------------------------------------------------------------------ */

.rio360-ausencia {
	background: var( --acc-card );
	border: 1px solid var( --acc-border );
	border-radius: var( --acc-radius );
	margin-bottom: 18px;
	padding: 20px 22px;
}

.rio360-ausencia__cabeza strong {
	display: block;
	font-size: 1.0625rem;
	margin-bottom: 4px;
}

.rio360-ausencia__cabeza small,
.rio360-ausencia__puesto small {
	color: var( --acc-muted );
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
}

.rio360-ausencia__ratos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

/* Cada rato va en su propio formulario: el flex no debe estirarlos. */
.rio360-ausencia__form {
	margin: 0;
}

.rio360-ausencia__rato {
	background: transparent;
	border: 1px solid var( --acc-border );
	border-radius: 999px;
	color: var( --acc-text ) !important;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	min-height: 44px;
	padding: 0 20px;
	transition: var( --acc-transition );
}

.rio360-ausencia__rato:hover {
	background: var( --acc-primary );
	border-color: var( --acc-primary );
}

/*
 * Ausente: ámbar, el mismo del distintivo que ve el cliente. Que el
 * dueño reconozca de un vistazo el color de lo que están viendo afuera.
 */
.rio360-ausencia__puesto {
	align-items: center;
	background: rgba( 255, 149, 0, 0.1 );
	border: 1px solid rgba( 255, 149, 0, 0.45 );
	border-radius: var( --acc-radius-sm );
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	padding: 16px 18px;
}

.rio360-ausencia__puesto strong {
	display: block;
	font-size: 1.0625rem;
	margin-bottom: 2px;
}

.rio360-ausencia__volvi {
	background: var( --acc-dark );
	border: 0;
	border-radius: 999px;
	color: #fff !important;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	min-height: 44px;
	padding: 0 22px;
}

.rio360-ausencia__volvi:hover {
	background: var( --acc-primary );
	color: var( --acc-on-primary ) !important;
}

/*
 * Las fichitas de «¿Qué ofreces?».
 *
 * Enseñan cómo quedó separado lo que el dueño escribió. Sin verlo, se
 * escriben frases enteras y el buscador guarda una pista que no
 * coincide con nada de lo que alguien buscaría.
 */
.rio360-acc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.rio360-acc__chip {
	background: rgba( 20, 184, 88, 0.12 );
	border: 1px solid rgba( 20, 184, 88, 0.35 );
	border-radius: 999px;
	color: #0f9648;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 6px 12px;
}