/**
 * Positibe Google Reviews Pro — estilos del frontend.
 *
 * Sin frameworks ni dependencias. El carrusel es CSS scroll-snap puro, de modo
 * que el deslizamiento táctil en móvil lo resuelve el navegador de forma
 * nativa: sin listeners de touch y a 60 fps.
 *
 * Todo el color pasa por custom properties --ptgr-* para que el tema pueda
 * redefinirlas sin tocar este fichero.
 */

.ptgr {
	--ptgr-bg: transparent;
	--ptgr-card-bg: #ffffff;
	--ptgr-card-border: #e8eaed;
	--ptgr-text: #1f2328;
	--ptgr-muted: #5f6368;
	--ptgr-star: #fbbc04;
	--ptgr-star-empty: #dadce0;
	--ptgr-accent: #1a73e8;
	--ptgr-accent-contrast: #ffffff;
	--ptgr-shadow: 0 1px 2px rgba(60, 64, 67, .1), 0 4px 16px rgba(60, 64, 67, .08);
	--ptgr-shadow-hover: 0 2px 6px rgba(60, 64, 67, .14), 0 10px 28px rgba(60, 64, 67, .12);
	--ptgr-radius: 14px;
	--ptgr-gap: 18px;
	--ptgr-cols: 3;
	--ptgr-clamp: 6;

	box-sizing: border-box;
	position: relative;
	margin: 0 0 1.5rem;
	color: var(--ptgr-text);
	background: var(--ptgr-bg);
	font-family: var( --ptgr-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif );
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.ptgr *,
.ptgr *::before,
.ptgr *::after {
	box-sizing: inherit;
}

/* --- Tema oscuro ---------------------------------------------------------- */

.ptgr--theme-dark {
	--ptgr-card-bg: #1f2023;
	--ptgr-card-border: #33363b;
	--ptgr-text: #e8eaed;
	--ptgr-muted: #9aa0a6;
	--ptgr-star-empty: #45484d;
	--ptgr-accent: #8ab4f8;
	--ptgr-accent-contrast: #16181b;
	--ptgr-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .35);
	--ptgr-shadow-hover: 0 2px 6px rgba(0, 0, 0, .55), 0 10px 28px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
	.ptgr--theme-auto {
		--ptgr-card-bg: #1f2023;
		--ptgr-card-border: #33363b;
		--ptgr-text: #e8eaed;
		--ptgr-muted: #9aa0a6;
		--ptgr-star-empty: #45484d;
		--ptgr-accent: #8ab4f8;
		--ptgr-accent-contrast: #16181b;
		--ptgr-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .35);
		--ptgr-shadow-hover: 0 2px 6px rgba(0, 0, 0, .55), 0 10px 28px rgba(0, 0, 0, .45);
	}
}

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

.ptgr__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: var(--ptgr-gap);
}

.ptgr__business {
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.ptgr__score {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ptgr__average {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
}

.ptgr__count {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--ptgr-muted);
}

.ptgr__brand .ptgr-g {
	width: 30px;
	height: 30px;
	display: block;
}

/* --- Estrellas -------------------------------------------------------------- */

.ptgr-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
}

.ptgr-stars__bg,
.ptgr-stars__fg {
	display: flex;
	gap: 1px;
}

.ptgr-stars__fg {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	overflow: hidden;
	white-space: nowrap;
}

.ptgr-star {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.ptgr-stars__bg .ptgr-star {
	fill: var(--ptgr-star-empty);
}

.ptgr-stars__fg .ptgr-star {
	fill: var(--ptgr-star);
}

.ptgr-card .ptgr-stars {
	margin: 2px 0 10px;
}

/* --- Viewport y pista del carrusel ------------------------------------------- */

.ptgr__viewport {
	position: relative;
}

.ptgr__track {
	display: flex;
	gap: var(--ptgr-gap);
	/* El swipe táctil sale gratis: es scroll nativo con anclaje. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Espacio para que la sombra de las tarjetas no quede recortada. */
	padding: 6px 2px 14px;
	margin: -6px -2px -14px;
}

.ptgr__track::-webkit-scrollbar {
	display: none;
}

.ptgr__track:focus-visible {
	outline: 2px solid var(--ptgr-accent);
	outline-offset: 4px;
	border-radius: var(--ptgr-radius);
}

/* Rejilla y lista no llevan scroll. */
.ptgr--grid .ptgr__track {
	display: grid;
	grid-template-columns: repeat(var(--ptgr-cols), minmax(0, 1fr));
	overflow: visible;
}

.ptgr--list .ptgr__track {
	flex-direction: column;
	overflow: visible;
}

/* --- Tarjeta ------------------------------------------------------------------ */

.ptgr-card {
	display: flex;
	flex-direction: column;
	flex: 0 0 clamp(260px, 84%, 340px);
	scroll-snap-align: start;
	padding: 18px 20px 20px;
	background: var(--ptgr-card-bg);
	border: 1px solid var(--ptgr-card-border);
	border-radius: var(--ptgr-radius);
	box-shadow: var(--ptgr-shadow);
	transition: box-shadow .25s ease, transform .25s ease;
}

.ptgr-card:hover {
	box-shadow: var(--ptgr-shadow-hover);
	transform: translateY(-2px);
}

.ptgr--grid .ptgr-card,
.ptgr--list .ptgr-card {
	flex: 1 1 auto;
}

@media (min-width: 782px) {
	.ptgr--carousel .ptgr-card {
		flex-basis: calc((100% - (var(--ptgr-cols) - 1) * var(--ptgr-gap)) / var(--ptgr-cols));
	}
}

.ptgr-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.ptgr-card__meta {
	min-width: 0;
	flex: 1 1 auto;
}

.ptgr-card__author {
	display: block;
	font-weight: 600;
	font-size: 14.5px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

a.ptgr-card__author:hover {
	text-decoration: underline;
}

.ptgr-card__date {
	display: block;
	font-size: 12.5px;
	color: var(--ptgr-muted);
}

.ptgr-card__brand .ptgr-g {
	width: 20px;
	height: 20px;
	display: block;
}

.ptgr-card__body {
	font-size: 14.5px;
	color: var(--ptgr-text);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.ptgr-card.is-clamped .ptgr-card__body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ptgr-clamp);
	line-clamp: var(--ptgr-clamp);
	overflow: hidden;
}

.ptgr-card.is-expanded .ptgr-card__body {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}

.ptgr-card__more {
	align-self: flex-start;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ptgr-accent);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.ptgr-card__more:hover {
	text-decoration: underline;
}

.ptgr-card__more:focus-visible {
	outline: 2px solid var(--ptgr-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Avatar --------------------------------------------------------------------- */

.ptgr-avatar {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: hsl(var(--ptgr-avatar-hue, 210) 60% 92%);
}

.ptgr-avatar__initial {
	font-size: 17px;
	font-weight: 700;
	color: hsl(var(--ptgr-avatar-hue, 210) 45% 32%);
	user-select: none;
}

.ptgr-avatar__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Si Google devuelve 403 en el avatar, el JS marca la imagen y queda la inicial. */
.ptgr-avatar__img[data-ptgr-failed] {
	display: none;
}

/* --- Flechas -------------------------------------------------------------------- */

.ptgr__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ptgr-card-border);
	border-radius: 50%;
	background: var(--ptgr-card-bg);
	color: var(--ptgr-text);
	box-shadow: var(--ptgr-shadow);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s ease, box-shadow .2s ease;
}

.ptgr__nav svg {
	width: 20px;
	height: 20px;
}

.ptgr__nav--prev {
	inset-inline-start: -18px;
}

.ptgr__nav--next {
	inset-inline-end: -18px;
}

.ptgr__nav:hover {
	box-shadow: var(--ptgr-shadow-hover);
}

.ptgr__nav:focus-visible {
	outline: 2px solid var(--ptgr-accent);
	outline-offset: 2px;
}

.ptgr__nav[disabled] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* En móvil no hay flechas: se desliza con el dedo. */
@media (min-width: 782px) {
	.ptgr--carousel .ptgr__nav {
		display: grid;
	}
}

/* En pantallas justas, las flechas se meten dentro del área. */
@media (min-width: 782px) and (max-width: 1100px) {
	.ptgr__nav--prev {
		inset-inline-start: 2px;
	}

	.ptgr__nav--next {
		inset-inline-end: 2px;
	}
}

.ptgr--carousel .ptgr__nav svg {
	transform: scaleX(var(--ptgr-dir, 1));
}

[dir="rtl"] .ptgr {
	--ptgr-dir: -1;
}

/* --- Puntos ----------------------------------------------------------------------- */

.ptgr__dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 14px;
}

.ptgr__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ptgr-star-empty);
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}

.ptgr__dot[aria-selected="true"] {
	width: 22px;
	border-radius: 4px;
	background: var(--ptgr-accent);
}

.ptgr__dot:focus-visible {
	outline: 2px solid var(--ptgr-accent);
	outline-offset: 3px;
}

/* --- Llamadas a la acción ------------------------------------------------------------ */

.ptgr__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}

.ptgr__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.ptgr__btn-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.ptgr__btn--primary {
	background: var(--ptgr-accent);
	color: var(--ptgr-accent-contrast);
	box-shadow: var(--ptgr-shadow);
}

.ptgr__btn--primary:hover {
	box-shadow: var(--ptgr-shadow-hover);
	transform: translateY(-1px);
	color: var(--ptgr-accent-contrast);
}

.ptgr__btn--ghost {
	background: var(--ptgr-card-bg);
	color: var(--ptgr-text);
	border: 1px solid var(--ptgr-card-border);
}

.ptgr__btn--ghost:hover {
	box-shadow: var(--ptgr-shadow);
	color: var(--ptgr-text);
}

.ptgr__btn:focus-visible {
	outline: 2px solid var(--ptgr-accent);
	outline-offset: 3px;
}

/* --- Estados vacíos y avisos ----------------------------------------------------------- */

.ptgr__empty {
	margin: 0;
	padding: 24px;
	text-align: center;
	color: var(--ptgr-muted);
	border: 1px dashed var(--ptgr-card-border);
	border-radius: var(--ptgr-radius);
}

.ptgr-notice {
	padding: 14px 18px;
	border-inline-start: 4px solid #fbbc04;
	background: #fff8e1;
	color: #5f4b00;
	border-radius: 8px;
	font-size: 14px;
}

/* --- Accesibilidad --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ptgr__track {
		scroll-behavior: auto;
	}

	.ptgr-card,
	.ptgr__btn,
	.ptgr__dot,
	.ptgr__nav {
		transition: none;
	}

	.ptgr-card:hover,
	.ptgr__btn--primary:hover {
		transform: none;
	}
}