/*!
 * Pagina de resena. Se ve casi siempre en un movil sujeto con una mano y con
 * prisa, asi que: una sola columna, botones grandes y nada que distraiga.
 */

.rt-rev {
	--rt-accent: #1a73e8;
	background: var(--rt-surface);
	min-height: 100vh;
	min-height: 100svh;
}

/* svh, no dvh: dvh crece cuando Safari esconde su barra, y entonces el alto del
   documento pasa del alto visible y la pagina se puede arrastrar. svh es
   siempre el hueco mas pequenno, con la barra a la vista, asi que nunca sobra
   nada que deslizar y el logo no se puede ir por arriba.                     */
.rt-rev__screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(1.5rem, 6vw, 3rem) 1.25rem 2rem;
}

/* Centrado con margenes automaticos y no con justify-content: si algun dia el
   contenido no cabe, esto lo deja pegado arriba en vez de cortarle la cabeza. */
.rt-rev__card { margin-block: auto; }

.rt-rev__card {
	width: 100%;
	max-width: 26rem;
	padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1.25rem, 5vw, 2rem) 2rem;
	border-radius: 1.5rem;
	background: var(--rt-bg);
	box-shadow: 0 18px 50px hsl(24 9% 7% / .08), 0 2px 6px hsl(24 9% 7% / .04);
	text-align: center;
}

.rt-rev__logo {
	width: 5.5rem;
	height: 5.5rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--rt-surface-2);
}

.rt-rev__name {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: 0;
	font-size: clamp(1.35rem, 5vw, 1.6rem);
	line-height: 1.2;
}
.rt-rev__tick {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	padding: .18rem;
	border-radius: 50%;
	background: var(--rt-accent);
	color: #fff;
	stroke-width: 3;
}
.rt-rev__addr { margin: .5rem 0 0; font-size: .92rem; color: var(--rt-muted); line-height: 1.45; }
.rt-rev__addr span { display: block; }

/* ------------------------------------------------------ tarjeta de Google */

.rt-gcard {
	margin: 1.5rem 0;
	padding: 1.15rem 1rem 1.25rem;
	border: 1px solid var(--rt-line);
	border-radius: 1.1rem;
	background: var(--rt-bg);
	box-shadow: 0 6px 18px hsl(24 9% 7% / .05);
}
.rt-gcard__g { display: block; width: 1.7rem; height: 1.7rem; margin: 0 auto; }
.rt-gcard .rt-ratestars { margin: .55rem 0 .6rem; font-size: 1.5rem; }
.rt-gcard__line { margin: 0; font-size: .98rem; color: var(--rt-ink); }
.rt-gcard__line strong { font-weight: 700; }

.rt-gcard__faces {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: .9rem;
}
.rt-gcard__faces img,
.rt-gcard__more {
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 50%;
	border: 2px solid var(--rt-bg);
	object-fit: cover;
	background: var(--rt-surface-2);
}
.rt-gcard__faces img + img,
.rt-gcard__more { margin-left: -.6rem; }
.rt-gcard__more {
	display: grid;
	place-items: center;
	width: auto;
	min-width: 2.35rem;
	padding: 0 .5rem;
	border-radius: 999px;
	background: var(--rt-ink);
	color: var(--rt-bg);
	font-size: .7rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ la pregunta */

.rt-rev__step { display: none; }
.rt-rev__step.is-on { display: block; animation: rt-revin .25s ease both; }
@keyframes rt-revin { from { opacity: 0; } }

.rt-rev__q { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.rt-rev__lede { margin: 0 0 1.1rem; font-size: .92rem; color: var(--rt-muted); }

.rt-rev__choice { display: grid; gap: .75rem; margin-top: 1.25rem; }

.rt-rev__yes,
.rt-rev__no {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	padding: 1.05rem 1.25rem;
	border-radius: 999px;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 650;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease;
}
.rt-rev__yes {
	border: 0;
	background: var(--rt-accent);
	color: #fff;
	box-shadow: 0 10px 24px hsl(220 80% 45% / .28);
}
.rt-rev__no {
	border: 1px solid var(--rt-line);
	background: var(--rt-bg);
	color: var(--rt-muted);
}
.rt-rev__yes:active,
.rt-rev__no:active { transform: scale(.985); }
.rt-rev__yes .rt-icon,
.rt-rev__no .rt-icon { width: 1.15rem; height: 1.15rem; stroke-width: 2.4; }

/* ------------------------------------------------------- resena privada */

.rt-rate { display: flex; justify-content: center; gap: .15rem; margin: .25rem 0 .5rem; }
.rt-rate__star {
	border: 0;
	background: none;
	padding: .35rem;
	cursor: pointer;
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
	transition: transform .12s ease;
}
.rt-rate__star svg {
	width: 3.1rem;
	height: 3.1rem;
	fill: var(--rt-line);
	transition: fill .14s ease, transform .14s ease;
}
.rt-rate__star:active { transform: scale(.88); }
.rt-rate__star.is-on svg { fill: var(--rt-gold); }
/* Vacias parecen adorno. Con un poco de sombra y tamanno se leen como botones */
.rt-rate__star svg { filter: drop-shadow(0 1px 1px hsl(24 9% 7% / .12)); }

.rt-rate__word {
	margin: 0 0 .25rem;
	min-height: 1.35rem;
	font-size: .95rem;
	font-weight: 650;
	color: var(--rt-muted);
}

/* ------------------------------------------- una pregunta cada vez */

.rt-rev__screen.is-private .rt-gcard { display: none; }

.rt-rev__sub { display: none; }
.rt-rev__sub.is-on { display: block; animation: rt-revin .25s ease both; }

/* Una raya y nada mas: son tres preguntas, no hace falta contarlas. */
.rt-rev__rule {
	width: 100%;
	height: 0;
	margin: 1.35rem 0 1.2rem;
	border: 0;
	border-top: 1px solid var(--rt-line);
}

.rt-rev__input--soft { margin-top: .55rem; }

.rt-rev__skip,
.rt-rev__back {
	display: block;
	margin: .6rem auto 0;
	border: 0;
	background: none;
	padding: .4rem .6rem;
	font: inherit;
	font-size: .88rem;
	color: var(--rt-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.rt-rev__back { margin-top: 1rem; text-decoration: none; }
.rt-rev__back[hidden] { display: none; }

.rt-rev__text,
.rt-rev__input {
	width: 100%;
	padding: .85rem 1rem;
	border: 1px solid var(--rt-line);
	border-radius: var(--rt-r);
	background: var(--rt-bg);
	font: inherit;
	font-size: 1rem;
	color: var(--rt-ink);
	resize: vertical;
}
.rt-rev__text:focus,
.rt-rev__input:focus {
	border-color: var(--rt-accent);
	box-shadow: 0 0 0 3px hsl(220 90% 60% / .16);
	outline: none;
}
.rt-rev__fields { display: grid; gap: .6rem; margin-top: .6rem; }

.rt-rev__send {
	width: 100%;
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--rt-ink);
	color: var(--rt-bg);
	font: inherit;
	font-size: 1.02rem;
	font-weight: 650;
	cursor: pointer;
}
.rt-rev__send[disabled] { opacity: .6; cursor: default; }

.rt-rev__error {
	margin: .9rem 0 0;
	padding: .7rem 1rem;
	border-radius: var(--rt-r);
	background: var(--rt-bad-soft);
	color: var(--rt-bad);
	font-size: .9rem;
}

/* --------------------------------------------------------------- gracias */

.rt-rev__done { padding-top: .5rem; }
.rt-rev__mark {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--rt-good-soft);
	color: var(--rt-good);
}
.rt-rev__mark .rt-icon { width: 1.6rem; height: 1.6rem; stroke-width: 2.6; }

/* ------------------------------------------------------------ pie y redes */

.rt-rev__social {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rt-line-soft);
	font-size: .88rem;
}
.rt-rev__social a { color: var(--rt-muted); text-decoration: none; }
.rt-rev__social a:hover { color: var(--rt-ink); }

.rt-rev__by {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	padding-top: 1.5rem;
	text-decoration: none;
	opacity: .65;
	transition: opacity .16s ease;
}
.rt-rev__by:hover { opacity: 1; }
.rt-rev__by span {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rt-muted);
}
.rt-rev__by img { width: 7rem; height: auto; }

/* Pagina en pausa por impago: se dice sin drama y sin enlaces a ningun sitio */
.rt-rev__paused .rt-rev__q { margin-top: 1rem; }
.rt-rev__paused .rt-rev__lede { margin-bottom: 0; }

/* ------------------------------------------------- pantallas bajas

   Casi nadie llega aqui con el movil en la mano y ganas de deslizar: acercan
   la etiqueta, miran y tocan. Si la tarjeta no cabe, el navegador la deja a
   medias y lo primero que se pierde es el logo de arriba. Asi que en cuanto la
   pantalla es baja se aprieta todo hasta que entra de una vez.                */

@media (max-height: 780px) {
	.rt-rev__screen {
		gap: .75rem;
		padding-top: .75rem;
		padding-bottom: 1rem;
	}
	.rt-rev__card { padding: 1.25rem 1.25rem 1.5rem; }

	.rt-rev__logo {
		width: 3.75rem;
		height: 3.75rem;
		margin-bottom: .6rem;
	}
	.rt-rev__name { font-size: 1.2rem; }
	.rt-rev__addr { margin-top: .35rem; font-size: .84rem; }

	.rt-gcard { margin: .9rem 0; padding: .8rem .9rem .9rem; }
	.rt-gcard__g { width: 1.4rem; height: 1.4rem; }
	.rt-gcard .rt-ratestars { margin: .4rem 0 .45rem; font-size: 1.25rem; }
	.rt-gcard__line { font-size: .92rem; }
	.rt-gcard__faces { margin-top: .6rem; }
	.rt-gcard__faces img { width: 1.9rem; height: 1.9rem; }
	/* el contador lleva texto dentro: se le fija el alto, nunca el ancho */
	.rt-gcard__more { width: auto; min-width: 1.9rem; height: 1.9rem; }

	.rt-rev__q { font-size: 1.1rem; }
	.rt-rev__choice { gap: .6rem; margin-top: .9rem; }
	.rt-rev__yes,
	.rt-rev__no { padding: .85rem 1.25rem; font-size: 1rem; }
}

@media (max-height: 660px) {
	.rt-rev__screen { gap: .5rem; padding-top: .5rem; }
	.rt-rev__card { padding: 1rem 1.1rem 1.25rem; }
	.rt-rev__logo { width: 3rem; height: 3rem; margin-bottom: .45rem; }
	.rt-rev__name { font-size: 1.08rem; }
	.rt-rev__addr { font-size: .8rem; }

	/* las caritas son adorno: lo primero que sobra cuando falta sitio */
	.rt-gcard__faces { display: none; }
	.rt-gcard { margin: .7rem 0; padding: .7rem .8rem .75rem; }
	.rt-gcard .rt-ratestars { font-size: 1.1rem; }

	.rt-rev__q { font-size: 1.02rem; }
	.rt-rev__yes,
	.rt-rev__no { padding: .75rem 1.15rem; }
}

/* El paso de la resena privada tambien tiene que caber: si no, al tocar el
   campo el teclado empuja y vuelve a comerse el logo.                        */

@media (max-height: 780px) {
	.rt-rate { margin-bottom: .7rem; }
	.rt-rate__star svg { width: 2.7rem; height: 2.7rem; }
	.rt-rev__lede { margin-bottom: .8rem; font-size: .86rem; }
	.rt-rev__text { min-height: 5rem; }
	.rt-rev__text,
	.rt-rev__input { padding: .7rem .9rem; font-size: .95rem; }
}

@media (max-height: 660px) {
	.rt-rate__star svg { width: 2.4rem; height: 2.4rem; }
	.rt-rev__text { min-height: 4rem; }
}