/*
 * Psicolaria - Reseñas. Carrusel e insignia.
 *
 * Colores de la paleta de Blocksy del sitio (--theme-palette-color-*), con los
 * de Psicolaria como respaldo. Tipografía: EB Garamond, la que los bloques de
 * Elementor de los tres sitios fijan uno a uno (no hay una variable global que
 * heredar). Para cambiarla basta con redefinir --psres-fuente. Se carga solo
 * en las páginas que pintan reseñas.
 */
.psres {
	--psres-fuente: "EB Garamond", Georgia, "Times New Roman", serif;
	--psres-acento: var(--theme-palette-color-1, #7456f1);
	--psres-acento-fuerte: var(--theme-palette-color-2, #5e3fde);
	--psres-texto: var(--theme-palette-color-3, #4d5d6d);
	--psres-titulos: var(--theme-palette-color-4, #102136);
	--psres-borde: var(--theme-palette-color-5, #e7ebee);
	--psres-fondo: var(--theme-palette-color-8, #fff);
	--psres-estrella: #f5b400;
	--psres-estrella-vacia: #d8dde3;
	--psres-gap: 20px;
	color: var(--psres-texto);
	font-family: var(--psres-fuente);
	font-size: 1.05rem;
	line-height: 1.55;
}

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

.psres p {
	margin: 0;
}

.psres-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Estrellas: una máscara repetida cinco veces; el degradado rellena la nota. */
.psres-estrellas {
	--psres-tam: 18px;
	display: inline-block;
	flex: none;
	width: calc(var(--psres-tam) * 5);
	height: var(--psres-tam);
	vertical-align: middle;
	background: linear-gradient(90deg, var(--psres-estrella) calc(var(--psres-nota, 5) / 5 * 100%), var(--psres-estrella-vacia) 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.9-5.2 4.9 1.3 7.1L12 17.8l-6.3 3.5L7 14.2 1.8 9.3l7.1-.9z'/%3E%3C/svg%3E") 0 0 / var(--psres-tam) var(--psres-tam) repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.9-5.2 4.9 1.3 7.1L12 17.8l-6.3 3.5L7 14.2 1.8 9.3l7.1-.9z'/%3E%3C/svg%3E") 0 0 / var(--psres-tam) var(--psres-tam) repeat-x;
}

.psres-estrellas-grandes {
	--psres-tam: 28px;
}

@media (forced-colors: active) {
	.psres-estrellas {
		forced-color-adjust: none;
	}
}

.psres-g {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

/* ─── Carrusel ─── */

.psres-carrusel {
	margin: 0 auto;
	max-width: 1200px;
}

.psres-titulo {
	margin: 0 0 12px;
	text-align: center;
	color: var(--psres-titulos);
}

.psres-cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 24px;
	text-align: center;
}

.psres-calificativo {
	color: var(--psres-acento-fuerte);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.2;
}

.psres-resumen {
	font-size: 0.95rem;
}

.psres-resumen strong {
	color: var(--psres-titulos);
}

.psres a {
	color: var(--psres-acento-fuerte);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.psres a:hover,
.psres a:focus-visible {
	color: var(--psres-titulos);
}

.psres-lista {
	display: grid;
	grid-auto-columns: calc((100% - 2 * var(--psres-gap)) / 3);
	grid-auto-flow: column;
	gap: var(--psres-gap);
	margin: 0;
	padding: 4px 4px 14px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	/*
	 * Sin barra, con JS o sin él: si el JS la ocultara al cargar, la lista
	 * perdería de golpe su alto y movería lo de abajo (CLS). Sin JS se
	 * desliza con el dedo, el panel táctil, Mayús + rueda o el teclado (la
	 * lista recibe el foco), y LiteSpeed carga el JS con el primer movimiento.
	 */
	scrollbar-width: none;
}

.psres-lista::-webkit-scrollbar {
	display: none;
}

.psres-lista:focus-visible {
	outline: 2px solid var(--psres-acento);
	outline-offset: 2px;
	border-radius: 18px;
}

.psres-item {
	display: flex;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.psres-item::before {
	content: none;
}

.psres-tarjeta {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 20px;
	background: var(--psres-fondo);
	border: 1px solid var(--psres-borde);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(16, 33, 54, 0.05);
}

.psres-tarjeta-cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
}

.psres-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.psres-tono-0 { background: #ede9fe; color: #4c33c4; }
.psres-tono-1 { background: #e0f2fe; color: #075985; }
.psres-tono-2 { background: #dcfce7; color: #166534; }
.psres-tono-3 { background: #fef3c7; color: #92400e; }
.psres-tono-4 { background: #fce7f3; color: #9d174d; }

.psres-quien {
	flex: 1;
	min-width: 0;
}

.psres-autor {
	overflow: hidden;
	color: var(--psres-titulos);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.psres-fecha {
	display: block;
	font-size: 0.85rem;
	opacity: 0.85;
}

.psres-texto {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.05rem;
	font-style: normal;
	quotes: none;
}

.psres-texto::before,
.psres-texto::after {
	content: none;
}

.psres-texto p + p {
	margin-top: 0.6em;
}

/* Recorte a 5 líneas solo en los textos largos; «Leer más» lo quita. */
.psres-larga .psres-texto {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
}

.psres-larga:has(.psres-leer[open]) .psres-texto {
	display: block;
	-webkit-line-clamp: unset;
}

.psres-leer summary {
	display: inline-block;
	color: var(--psres-acento-fuerte);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.psres-leer summary::-webkit-details-marker {
	display: none;
}

.psres-leer summary:focus-visible {
	outline: 2px solid var(--psres-acento);
	outline-offset: 2px;
	border-radius: 4px;
}

.psres-leer-menos,
.psres-leer[open] .psres-leer-mas {
	display: none;
}

.psres-leer[open] .psres-leer-menos {
	display: inline;
}

/* El JS lo marca cuando el texto cabe entero; visibility conserva su hueco. */
.psres-leer.psres-sin-recorte {
	visibility: hidden;
}

.psres-respuesta {
	margin-top: auto;
	padding: 10px 12px;
	background: var(--theme-palette-color-6, #f3f5f7);
	border-radius: 10px;
	font-size: 0.9rem;
}

.psres-respuesta-titulo {
	color: var(--psres-titulos);
	font-weight: 600;
}

/*
 * Invisibles hasta que el JS confirma que hay tarjetas fuera de la vista. Con
 * visibility (no display) su hueco está reservado desde el principio y
 * mostrarlas no desplaza nada.
 */
.psres-controles {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 6px;
	visibility: hidden;
}

.psres-desborda .psres-controles {
	visibility: visible;
}

.psres-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--psres-titulos);
	background: var(--psres-fondo);
	border: 1px solid var(--psres-borde);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.psres-boton:hover,
.psres-boton:focus-visible {
	color: var(--psres-acento-fuerte);
	border-color: var(--psres-acento);
}

.psres-boton:focus-visible {
	outline: 2px solid var(--psres-acento);
	outline-offset: 2px;
}

.psres-pie {
	margin-top: 14px;
	font-size: 1rem;
	text-align: center;
}

@media (max-width: 1024px) {
	.psres-lista {
		grid-auto-columns: calc((100% - var(--psres-gap)) / 2);
	}
}

/* En móvil asoma la tarjeta siguiente: invita a deslizar. */
@media (max-width: 640px) {
	.psres {
		--psres-gap: 12px;
	}

	.psres-lista {
		grid-auto-columns: 86%;
	}

	.psres-calificativo {
		font-size: 1.6rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.psres-lista {
		scroll-behavior: smooth;
	}
}

/* ─── Insignia ─── */

.psres-insignia-caja {
	display: flex;
	margin: 8px 0;
}

.psres-alinear-centro {
	justify-content: center;
}

.psres-alinear-derecha {
	justify-content: flex-end;
}

.psres .psres-insignia {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	color: var(--psres-texto);
	background: var(--psres-fondo);
	border: 1px solid var(--psres-borde);
	border-radius: 999px;
	font-size: 0.9rem;
	line-height: 1.2;
	text-decoration: none;
}

.psres a.psres-insignia:hover,
.psres a.psres-insignia:focus-visible {
	color: var(--psres-titulos);
	border-color: var(--psres-acento);
}

.psres-insignia .psres-estrellas {
	--psres-tam: 16px;
}

.psres-insignia-nota {
	color: var(--psres-titulos);
	font-size: 1rem;
}