/*
 * TuVendes Reseñas: tarjeta de invitación (v1.2).
 *
 * Decisiones de diseño:
 * - Aparece abajo a la izquierda y sin fondo oscuro: el chat de Tidio vive abajo a la derecha
 *   y la invitación no debe tapar la página ni competir con él.
 * - Colores del sitio: el naranja del botón "Publicar propiedad" (#ff5a3c) en la franja superior, y un
 *   naranja apenas más oscuro (#d43f1f) en los botones, para que el texto blanco se lea bien (contraste 4,6:1).
 * - Hereda la tipografía del tema para no verse ajena.
 */

.tvr {
	--tvr-ink: #14213d;
	--tvr-muted: #556070;
	--tvr-brand: #d43f1f;
	--tvr-brand-dark: #b3341a;
	--tvr-accent: #ff5a3c;
	--tvr-focus: #00457a;
	--tvr-line: #dfe4ec;
	--tvr-star: #f5a524;
	--tvr-star-off: #c8cfda;
	--tvr-error: #b42318;

	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 99990;
	box-sizing: border-box;
	width: min(23rem, calc(100vw - 2rem));
	padding: 1.25rem 1.25rem 1.125rem;
	background: #fff;
	color: var(--tvr-ink);
	border: 1px solid var(--tvr-line);
	border-top: 3px solid var(--tvr-accent);
	border-radius: 0.75rem;
	box-shadow: 0 14px 34px rgba(20, 33, 61, 0.18);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: center;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.tvr[hidden],
.tvr [hidden] {
	display: none !important;
}

.tvr.is-open {
	opacity: 1;
	transform: none;
}

.tvr *,
.tvr *::before,
.tvr *::after {
	box-sizing: border-box;
}

/* En celular: versión compacta y un poco más arriba para no tapar el botón del chat. */
@media (max-width: 480px) {
	.tvr {
		left: 0.75rem;
		bottom: 5.25rem;
		width: min(21rem, calc(100vw - 1.5rem));
		padding: 1rem 1rem 0.875rem;
		font-size: 0.875rem;
	}
	.tvr .tvr__text {
		margin-bottom: 0.5rem;
	}
	.tvr .tvr__hint {
		display: none;
	}
}

.tvr .tvr__title {
	margin: 0 1.5rem 0.375rem;
	padding: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tvr-ink);
	letter-spacing: 0;
	text-transform: none;
}

.tvr .tvr__title:focus {
	outline: none;
}

.tvr .tvr__text {
	margin: 0 0 1rem;
	color: var(--tvr-muted);
}

.tvr .tvr__check {
	display: block;
	margin: 0 auto 0.5rem;
}

/* Cerrar */
.tvr .tvr__close {
	position: absolute;
	top: 0.625rem;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--tvr-muted);
	cursor: pointer;
}

.tvr .tvr__close:hover {
	background: #eef1f6;
	color: var(--tvr-ink);
}

/* Botones */
.tvr .tvr__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.75rem;
}

.tvr .tvr__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	margin: 0;
	border: 0;
	border-radius: 0.5rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tvr .tvr__btn--primary {
	background: var(--tvr-brand);
	color: #fff;
}

.tvr .tvr__btn--primary:hover,
.tvr .tvr__btn--primary:focus-visible {
	background: var(--tvr-brand-dark);
	color: #fff;
}

.tvr .tvr__btn--primary[disabled] {
	opacity: 0.65;
	cursor: progress;
}

.tvr .tvr__btn--ghost {
	background: transparent;
	color: var(--tvr-muted);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.tvr .tvr__btn--ghost:hover {
	color: var(--tvr-ink);
	text-decoration: underline;
}

.tvr .tvr__btn:focus-visible,
.tvr .tvr__close:focus-visible,
.tvr textarea:focus-visible {
	outline: 2px solid var(--tvr-focus);
	outline-offset: 2px;
}

/* Estrellas de la invitación: se iluminan al pasar el cursor y un clic elige la calificación.
   El orden en el HTML es 5 a 1 y row-reverse las muestra de 1 a 5, así "hover ~" ilumina las de su izquierda. */
.tvr .tvr__pick {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: center;
	margin: 0.125rem 0 0;
}

.tvr .tvr__starbtn {
	margin: 0;
	padding: 0.125rem 0.3125rem;
	background: transparent;
	border: 0;
	border-radius: 0.375rem;
	box-shadow: none;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--tvr-star-off);
	cursor: pointer;
	transition: color 0.12s ease, transform 0.12s ease;
}

.tvr .tvr__starbtn:hover,
.tvr .tvr__starbtn:hover ~ .tvr__starbtn,
.tvr .tvr__starbtn:focus-visible,
.tvr .tvr__starbtn:focus-visible ~ .tvr__starbtn {
	color: var(--tvr-star);
	background: transparent;
}

.tvr .tvr__starbtn:hover {
	transform: scale(1.12);
}

.tvr .tvr__hint {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--tvr-muted);
}

/* Aviso cuando vuelve con su cuenta y su reseña ya está escrita */
.tvr .tvr__note {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	background: #eaf6ef;
	color: #14532d;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Formulario */
.tvr .tvr__form {
	margin: 0;
}

.tvr .tvr__rating {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.tvr .tvr__label {
	display: block;
	margin: 0 0 0.25rem;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--tvr-ink);
}

/* Estrellas: el orden en el HTML es 5 a 1 y row-reverse las muestra de 1 a 5,
   así "input:checked ~ label" ilumina la elegida y todas las anteriores. */
.tvr .tvr__stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.125rem;
}

.tvr .tvr__stars input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.tvr .tvr__stars label {
	margin: 0;
	padding: 0 0.0625rem;
	font-size: 2rem;
	line-height: 1;
	color: var(--tvr-star-off);
	cursor: pointer;
	transition: color 0.12s ease, transform 0.12s ease;
}

.tvr .tvr__stars label:hover,
.tvr .tvr__stars label:hover ~ label,
.tvr .tvr__stars input:checked ~ label {
	color: var(--tvr-star);
}

.tvr .tvr__stars input:focus-visible + label {
	outline: 2px solid var(--tvr-focus);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.tvr textarea {
	display: block;
	width: 100%;
	min-height: 7.5rem;
	margin: 0 0 0.25rem;
	text-align: left;
	padding: 0.625rem 0.75rem;
	background: #fff;
	color: var(--tvr-ink);
	border: 1px solid #b9c2d0;
	border-radius: 0.5rem;
	font: inherit;
	resize: vertical;
}

.tvr .tvr__count {
	margin: 0 0 0.75rem;
	text-align: right;
	font-size: 0.75rem;
	color: var(--tvr-muted);
}

.tvr .tvr__error {
	margin: 0 0 0.75rem;
	color: var(--tvr-error);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Texto solo para lectores de pantalla */
.tvr .tvr__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Campo trampa para bots, fuera de la vista */
.tvr .tvr__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Aviso dentro de la ventana de inicio de sesión y registro del sitio (fuera de la tarjeta) */
.tvr-account-note {
	margin: 0 0 1rem;
	padding: 0.625rem 0.75rem;
	background: #fff4ef;
	border: 1px solid #ffd3c6;
	border-left: 4px solid #ff5a3c;
	border-radius: 0.375rem;
	color: #7a2a14;
	font-size: 0.875rem;
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.tvr,
	.tvr .tvr__stars label,
	.tvr .tvr__starbtn,
	.tvr .tvr__btn {
		transition: none;
	}
	.tvr .tvr__starbtn:hover {
		transform: none;
	}
}