/**
 * Valoraciones y opiniones de usuarios.
 */

/* ============================================================
   Estrellas
   ============================================================
   Dos capas superpuestas: el fondo con las cinco estrellas apagadas y
   encima el relleno recortado al porcentaje. Permite medias estrellas
   sin necesidad de un icono por cada fracción. */

.lz-estrellas {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	/* La fuente del sistema dibuja el glifo ★ de forma consistente. */
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 2px;
}

.lz-estrellas__fondo { color: var(--lz-line); }

.lz-estrellas__relleno {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	overflow: hidden;
	color: var(--lz-star);
}

.lz-estrellas--sm { font-size: 14px; }
.lz-estrellas--md { font-size: 20px; }
.lz-estrellas--lg { font-size: 28px; }

/* ---- Nota en la cabecera de la ficha ---- */

.lz-ficha__nota {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px var(--lz-space-3);
	font-size: var(--lz-text-xs);
	color: var(--lz-heading);
	background: var(--lz-surface-sunken);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-sm);
	text-decoration: none;
}

.lz-ficha__nota:hover { border-color: var(--lz-accent); }

.lz-ficha__nota-total { color: var(--lz-muted); }

/* ============================================================
   Resumen de valoraciones
   ============================================================ */

.lz-ficha__opiniones {
	margin-top: var(--lz-space-12);
	padding-top: var(--lz-space-9);
	border-top: 1px solid var(--lz-line);
	/* El ancla no debe quedar bajo la cabecera pegajosa. */
	scroll-margin-top: calc(72px + var(--lz-space-5));
}

.lz-valoraciones {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--lz-space-8);
	align-items: center;
	margin-bottom: var(--lz-space-8);
	padding: var(--lz-space-6);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
}

.lz-valoraciones__media {
	text-align: center;
	padding-inline-end: var(--lz-space-8);
	border-inline-end: 1px solid var(--lz-line);
}

.lz-valoraciones__nota {
	font-family: var(--lz-font-display);
	font-size: 3rem;
	line-height: 1;
	color: var(--lz-heading);
	margin: 0 0 var(--lz-space-2);
}

.lz-valoraciones__total {
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
	margin: var(--lz-space-2) 0 0;
}

/* ---- Reparto por estrellas ---- */

.lz-valoraciones__reparto {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.lz-reparto {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 32px;
	align-items: center;
	gap: var(--lz-space-3);
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
}

.lz-reparto + .lz-reparto { margin-top: 6px; }

.lz-reparto__n {
	color: var(--lz-muted);
	font-variant-numeric: tabular-nums;
}

.lz-reparto__barra {
	height: 8px;
	background: var(--lz-surface-sunken);
	border-radius: 4px;
	overflow: hidden;
}

.lz-reparto__relleno {
	display: block;
	height: 100%;
	background: var(--lz-star);
	border-radius: 4px;
}

.lz-reparto__total {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   Lista de opiniones
   ============================================================ */

.lz-comentarios__title {
	font-size: var(--lz-text-lg);
	/* Separa el listado del formulario que ahora lo precede. */
	margin: var(--lz-space-8) 0 var(--lz-space-5);
}

.lz-comentarios__lista {
	list-style: none;
	/* El listado va debajo del formulario: el margen sobra arriba. */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lz-space-4);
}

.lz-comentarios__lista .children {
	list-style: none;
	margin: var(--lz-space-4) 0 0;
	padding: 0 0 0 var(--lz-space-6);
	border-inline-start: 2px solid var(--lz-line);
}

.lz-opinion__cuerpo {
	padding: var(--lz-space-5);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
}

.lz-opinion__head {
	display: flex;
	align-items: center;
	gap: var(--lz-space-3);
	margin-bottom: var(--lz-space-3);
}

.lz-opinion__img { border-radius: 50%; }

.lz-opinion__meta {
	min-width: 0;
	flex: 1 1 auto;
}

.lz-opinion__autor {
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-base);
	color: var(--lz-heading);
	margin: 0;
	overflow-wrap: anywhere;
}

.lz-opinion__fecha {
	font-size: var(--lz-text-xs);
	color: var(--lz-faint);
	margin: 0;
}

.lz-opinion__nota { flex-shrink: 0; }

.lz-opinion__texto {
	color: var(--lz-ink);
	font-size: var(--lz-text-base);
	line-height: 1.65;
}

.lz-opinion__texto p { margin: 0 0 var(--lz-space-3); }
.lz-opinion__texto p:last-child { margin-bottom: 0; }

.lz-opinion__pendiente {
	margin: var(--lz-space-3) 0 0;
	padding: var(--lz-space-2) var(--lz-space-3);
	font-size: var(--lz-text-xs);
	color: var(--lz-heading);
	background: var(--lz-accent-surface);
	border: 1px solid var(--lz-accent-border);
	border-radius: var(--lz-radius-sm);
}

/* ============================================================
   Formulario
   ============================================================ */

/* Abre la sección: invitar a opinar es lo primero, leer lo de otros
   viene después. Se eleva sobre la superficie para que destaque. */
.lz-form-comentario {
	padding: var(--lz-space-6);
	background: var(--lz-surface-raised);
	border: 1px solid var(--lz-accent-border);
	border-radius: var(--lz-radius-md);
}

.lz-form-comentario .comment-reply-title {
	font-size: var(--lz-text-lg);
	margin: 0 0 var(--lz-space-4);
}

.lz-form-comentario__aviso {
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
	margin: 0 0 var(--lz-space-5);
}

.lz-campo { margin: 0 0 var(--lz-space-4); }

.lz-campo label {
	display: block;
	margin-bottom: var(--lz-space-2);
	font-size: var(--lz-text-sm);
	color: var(--lz-heading);
}

.lz-campo :is(input, textarea) {
	width: 100%;
	padding: var(--lz-space-3) var(--lz-space-4);
	font-size: var(--lz-text-base);
	color: var(--lz-search-ink);
	background: var(--lz-search-bg);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-sm);
}

.lz-campo :is(input, textarea):focus {
	outline: none;
	border-color: var(--lz-accent);
}

/* Nombre y correo comparten fila: son campos cortos. */
.lz-form-comentario .comment-form-author,
.lz-form-comentario .comment-form-email {
	display: inline-block;
	width: calc(50% - var(--lz-space-2));
	vertical-align: top;
}

.lz-form-comentario .comment-form-author { margin-inline-end: var(--lz-space-3); }

.lz-form-comentario .form-submit { margin: var(--lz-space-4) 0 0; }

/* ---- Selector de estrellas ----
   Radios reales en orden inverso: funciona sin JavaScript, es
   accesible con teclado y el CSS ilumina las anteriores con el
   selector de hermanos. */

.lz-valorar {
	margin-bottom: var(--lz-space-5);
	padding-bottom: var(--lz-space-5);
	border-bottom: 1px solid var(--lz-line-soft);
}

.lz-valorar__label {
	display: block;
	margin-bottom: var(--lz-space-2);
	font-size: var(--lz-text-sm);
	color: var(--lz-heading);
}

.lz-valorar__estrellas {
	display: inline-flex;
	/* Invertido para que el selector ~ alcance a las de menor valor. */
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
}

.lz-valorar__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.lz-valorar__estrella {
	font-size: 32px;
	line-height: 1;
	color: var(--lz-line);
	cursor: pointer;
	transition: color .15s ease;
}

/* La marcada y todas las de menor valor. */
.lz-valorar__radio:checked ~ .lz-valorar__estrella,
.lz-valorar__estrellas:hover .lz-valorar__estrella:hover,
.lz-valorar__estrella:hover ~ .lz-valorar__estrella {
	color: var(--lz-star);
}

/* Al apuntar, se apaga la selección previa para ver la nueva. */
.lz-valorar__estrellas:hover .lz-valorar__radio:checked ~ .lz-valorar__estrella {
	color: var(--lz-line);
}

.lz-valorar__estrellas:hover .lz-valorar__estrella:hover,
.lz-valorar__estrellas:hover .lz-valorar__estrella:hover ~ .lz-valorar__estrella {
	color: var(--lz-star);
}

.lz-valorar__radio:focus-visible + .lz-valorar__estrella {
	outline: 2px solid var(--lz-accent);
	outline-offset: 2px;
	border-radius: var(--lz-radius-sm);
}

.lz-comentarios__cerrado {
	padding: var(--lz-space-4);
	color: var(--lz-muted);
	background: var(--lz-surface-sunken);
	border-radius: var(--lz-radius-sm);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 767px) {
	.lz-valoraciones {
		grid-template-columns: 1fr;
		gap: var(--lz-space-5);
		padding: var(--lz-space-5);
	}

	.lz-valoraciones__media {
		padding-inline-end: 0;
		padding-bottom: var(--lz-space-5);
		border-inline-end: 0;
		border-bottom: 1px solid var(--lz-line);
	}

	.lz-opinion__cuerpo { padding: var(--lz-space-4); }

	.lz-opinion__head {
		flex-wrap: wrap;
		gap: var(--lz-space-2) var(--lz-space-3);
	}

	.lz-form-comentario { padding: var(--lz-space-5) var(--lz-space-4); }

	/* Apilados: a media anchura no caben las etiquetas. */
	.lz-form-comentario .comment-form-author,
	.lz-form-comentario .comment-form-email {
		display: block;
		width: 100%;
		margin-inline-end: 0;
	}

	.lz-comentarios__lista .children { padding-inline-start: var(--lz-space-4); }
}