/**
 * Rio360 — Componentes front-end.
 *
 * Clases limpias tipo BEM, sin estilos inline.
 *
 * Personalización rápida desde el shortcode:
 *   [rio360_whatsapp bg="#7000FF" color="#fff" size="18px" radius="8px"]
 *   [rio360_name color="#00F0FF" font="Poppins" weight="700"]
 *   [rio360_open_now padding="12px 20px" margin="10px 0" shadow="0 4px 12px rgba(0,0,0,.25)"]
 *
 * Atributos disponibles en todos los shortcodes:
 * bg, color, size, font, radius, padding, margin,
 * width, height, gap, border, shadow, weight, align, class.
 *
 * Cada atributo se convierte en una variable CSS
 * (--rio360-*) que estas reglas consumen con un
 * valor por defecto.
 */

/* Variables genéricas aplicables a cualquier componente.
   Las reglas específicas posteriores refinan defaults. */

.rio360-logo,
.rio360-cover,
.rio360-name,
.rio360-category,
.rio360-description,
.rio360-verified,
.rio360-featured,
.rio360-status,
.rio360-address,
.rio360-phone,
.rio360-email,
.rio360-website,
.rio360-whatsapp,
.rio360-social-link,
.rio360-price,
.rio360-amenities,
.rio360-hours,
.rio360-special-hours,
.rio360-rating,
.rio360-reviews-count {
	color: var( --rio360-color, inherit );
	font-size: var( --rio360-size, inherit );
	font-family: var( --rio360-font, inherit );
	font-weight: var( --rio360-weight, inherit );
	margin: var( --rio360-margin, 0 );
	text-align: var( --rio360-align, inherit );
	box-shadow: var( --rio360-shadow, none );
}

/* Identidad */

.rio360-logo {
	display: block;
	max-width: 100%;
	width: var( --rio360-width, auto );
	height: var( --rio360-height, auto );
	border-radius: var( --rio360-radius, 0 );
}

.rio360-cover {
	display: block;
	width: var( --rio360-width, 100% );
	height: var( --rio360-height, auto );
	object-fit: cover;
	border-radius: var( --rio360-radius, 0 );
}

.rio360-name {
	font-weight: var( --rio360-weight, 700 );
}

.rio360-category {
	display: inline-block;
	padding: var( --rio360-padding, 2px 12px );
	border-radius: var( --rio360-radius, 999px );
	background: var( --rio360-bg, rgba( 0, 0, 0, 0.06 ) );
	border: var( --rio360-border, none );
	font-size: var( --rio360-size, 0.85em );
}

.rio360-verified,
.rio360-featured {
	display: inline-flex;
	align-items: center;
	gap: var( --rio360-gap, 4px );
	padding: var( --rio360-padding, 2px 10px );
	border-radius: var( --rio360-radius, 999px );
	border: var( --rio360-border, none );
	font-size: var( --rio360-size, 0.85em );
	font-weight: var( --rio360-weight, 600 );
}

.rio360-verified {
	background: var( --rio360-bg, rgba( 0, 176, 240, 0.12 ) );
	color: var( --rio360-color, #0a6c8f );
}

.rio360-featured {
	background: var( --rio360-bg, rgba( 240, 180, 0, 0.14 ) );
	color: var( --rio360-color, #996b00 );
}

/* Estado abierto/cerrado (pill) */

.rio360-status {
	display: inline-flex;
	align-items: center;
	gap: var( --rio360-gap, 10px );
	padding: var( --rio360-padding, 10px 18px );
	border-radius: var( --rio360-radius, 12px );
	background: var( --rio360-bg, rgba( 23, 201, 100, 0.10 ) );
	border: var( --rio360-border, 1px solid rgba( 23, 201, 100, 0.35 ) );
	color: var( --rio360-color, inherit );
	font-weight: var( --rio360-weight, 600 );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
}

.rio360-status__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #17c964;
	flex-shrink: 0;
}

.rio360-status--closed {
	background-color:  rgba( 224,43,32,0.1 ) ;
	border: var( --rio360-border, 1px solid rgba( 240, 68, 68, 0.35 ) );
}

.rio360-status--closed .rio360-status__dot {
	background: #f04444;
}

.rio360-status--open {
    background-color:  rgba(23,201,100,0.1);
	border: var( --rio360-border, 1px solid #17c964 );
}

.rio360-status--closing_soon,
.rio360-status--opening_soon {
	background-color: rgba(240,180,0,0.1);
	border: var( --rio360-border, 1px solid rgba( 240, 180, 0, 0.35 ) );
}

.rio360-status--closing_soon .rio360-status__dot,
.rio360-status--opening_soon .rio360-status__dot {
	background: #f0b400;
}

/* Contacto */

.rio360-address,
.rio360-phone,
.rio360-email,
.rio360-website,
.rio360-whatsapp,
.rio360-social-link {
	display: inline-flex;
	align-items: center;
	gap: var( --rio360-gap, 6px );
	text-decoration: none;
}

.rio360-whatsapp {
	padding: var( --rio360-padding, 8px 18px );
	border-radius: var( --rio360-radius, 999px );
	background: var( --rio360-bg, #25d366 );
	border: var( --rio360-border, none );
	color: var( --rio360-color, #fff );
	font-weight: var( --rio360-weight, 600 );
}

/* Dos botones de WhatsApp, uno al lado del otro. */
.rio360-whatsapps {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rio360-whatsapp:hover {
	filter: brightness( 0.92 );
	color: var( --rio360-color, #fff );
}

/* Redes sociales */

.rio360-social-link {
	padding: var( --rio360-padding, 6px 14px );
	border-radius: var( --rio360-radius, 999px );
	background: var( --rio360-bg, rgba( 0, 0, 0, 0.06 ) );
	border: var( --rio360-border, none );
	font-weight: var( --rio360-weight, 600 );
}

/* Precio y amenidades */

.rio360-price {
	font-weight: var( --rio360-weight, 700 );
	letter-spacing: 1px;
}

.rio360-amenities {
	display: flex;
	flex-wrap: wrap;
	gap: var( --rio360-gap, 8px );
	list-style: none;
	padding: var( --rio360-padding, 0 );
}

.rio360-amenities__item {
	padding: 4px 12px;
	border-radius: var( --rio360-radius, 999px );
	background: var( --rio360-bg, rgba( 0, 0, 0, 0.06 ) );
	border: var( --rio360-border, none );
	font-size: 0.9em;
}

/* Horarios */

.rio360-hours,
.rio360-special-hours {
	width: var( --rio360-width, 100% );
	border-collapse: collapse;
}

.rio360-hours__name,
.rio360-special-hours__date {
	text-align: left;
	font-weight: 600;
	padding: 6px 12px 6px 0;
	vertical-align: top;
	white-space: nowrap;
}

.rio360-hours__value,
.rio360-special-hours__value {
	padding: 6px 0;
}

.rio360-hours__closed,
.rio360-special-hours__closed {
	color: #b32d2e;
}

.rio360-hours__all-day,
.rio360-special-hours__all-day {
	color: #1a7c2e;
}

.rio360-hours__shifts {
	display: inline-block;
	margin-right: 8px;
}

.rio360-special-hours__note {
	display: block;
	font-weight: 400;
	font-size: 0.85em;
	opacity: 0.7;
}

/* Reseñas: ★ 5.0 · 47 reseñas */

.rio360-rating {
	display: inline-flex;
	align-items: center;
	gap: var( --rio360-gap, 6px );
	font-weight: var( --rio360-weight, 600 );
}

.rio360-rating__star {
	color: #f0b400;
	font-size: 1.1em;
	line-height: 1;
}

.rio360-rating__sep {
	opacity: 0.5;
}

.rio360-rating__count {
	font-weight: 400;
	opacity: 0.85;
}

.rio360-reviews-count {
	font-size: var( --rio360-size, 0.9em );
	opacity: 0.85;
}

/*
 * Reseñas: para opinar hay que tener cuenta.
 *
 * Ocupa el sitio del formulario, así que se ve como una invitación y no
 * como un error: quien llega hasta aquí quería escribir algo y lo que
 * necesita es el enlace, no un regaño.
 */
.rio360-reviews__invitacion {
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px dashed rgba( 255, 255, 255, 0.18 );
	border-radius: 14px;
	margin: 0;
	padding: 18px 20px;
	text-align: center;
}

.rio360-reviews__invitacion a {
	color: #ffc637;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * «Vuelvo en un rato»: ámbar, entre el verde de abierto y el rojo de
 * cerrado. No está cerrado —vuelve hoy, en minutos— pero ahora mismo
 * no hay nadie, y el que va para allá necesita saberlo antes de salir.
 */
.rio360-status--away {
	background-color: rgba( 255, 149, 0, 0.12 );
	border: var( --rio360-border, 1px solid rgba( 255, 149, 0, 0.45 ) );
}

.rio360-status--away .rio360-status__dot {
	background: #ff9500;
}

/*
 * «Por agenda»: azul, ni verde ni rojo.
 *
 * No es abierto ni cerrado y por eso no puede llevar ninguno de esos
 * dos colores: quien pone uñas con cita no está abierta para que
 * entren, ni cerrada para que no la busquen. El azul dice «esto se
 * lee», que es justo lo que hace falta.
 */
.rio360-status--agenda {
	background-color: rgba( 10, 132, 255, 0.12 );
	border: var( --rio360-border, 1px solid rgba( 10, 132, 255, 0.45 ) );
}

.rio360-status--agenda .rio360-status__dot {
	background: #0a84ff;
}

/*
 * Próximamente: morado, ni verde ni rojo.
 *
 * El que todavía no abre no está cerrado —cerrado se lee como «hoy no»
 * y hace que lo descarten— ni abierto. Va en su propio color para que
 * se note que es otra cosa, y de paso se distingue del azul de agenda,
 * que también es «ni lo uno ni lo otro» pero significa lo contrario:
 * ahí sí atienden.
 */
.rio360-status--soon {
	background-color: rgba( 149, 92, 255, 0.12 );
	border: var( --rio360-border, 1px solid rgba( 149, 92, 255, 0.45 ) );
}

.rio360-status--soon .rio360-status__dot {
	background: #955cff;
}