/**
 * MARF Reacciones — estilos del front.
 *
 * Mismas reglas de juego que en los comentarios:
 *
 * 1. Ni tipografía ni tamaño de letra propios: se heredan de la sección.
 * 2. La paleta sale de `currentColor`, así el bloque funciona igual sobre
 *    blanco, sobre negro o sobre una foto.
 * 3. Todo va prefijado con `.marf-r` y con reset propio, porque los temas y
 *    Elementor pisan `button` sin piedad.
 */

/* ---------------------------------------------------------- 1. Raíz */

.marf-r {
	--marf-r-size: 56px;
	--marf-r-gap: 14px;
	--marf-r-accent: currentColor;

	/* Reserva para navegadores sin color-mix. */
	--marf-r-muted: rgba(128, 128, 128, .95);
	--marf-r-surface: rgba(128, 128, 128, .1);
	--marf-r-border: rgba(128, 128, 128, .28);

	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.4;
	margin-block: 1.5em;
	width: 100%;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.marf-r {
		--marf-r-muted: color-mix(in srgb, currentColor 62%, transparent);
		--marf-r-surface: color-mix(in srgb, currentColor 8%, transparent);
		--marf-r-border: color-mix(in srgb, currentColor 16%, transparent);
	}
}

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

/* ---------------------------------------------------------- 2. Cabecera */

.marf-r__title {
	color: var(--marf-r-muted);
	font-size: .95em;
	font-weight: 600;
	letter-spacing: .01em;
	margin: 0 0 .85em;
}

.marf-r--align-center .marf-r__title,
.marf-r--align-center .marf-r__total,
.marf-r--align-center .marf-r__msg {
	text-align: center;
}

.marf-r--align-right .marf-r__title,
.marf-r--align-right .marf-r__total,
.marf-r--align-right .marf-r__msg {
	text-align: right;
}

/* ---------------------------------------------------------- 3. Lista */

.marf-r__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--marf-r-gap);
}

.marf-r--align-center .marf-r__list {
	justify-content: center;
}

.marf-r--align-right .marf-r__list {
	justify-content: flex-end;
}

/* En rejilla las cuatro reacciones reparten el ancho a partes iguales. */
.marf-r--layout-grid .marf-r__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------------------------------------------------------- 4. Botón */

.marf-r__btn {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 12px;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: .35em;
	line-height: 1.2;
	margin: 0;
	min-width: 0;
	padding: .5em .6em;
	position: relative;
	text-align: center;
}

/* Blindaje contra los estilos de botón del tema.
 *
 * Casi todos los temas pintan `button:hover` y `button:focus` con su color de
 * marca. Aquí eso sale doblemente mal: el recuadro de color tapa el emoji, y
 * al cambiar `color` envenena la paleta, que se calcula con `currentColor`
 * — el gris de la etiqueta pasa a ser blanco translúcido y desaparece.
 *
 * Va con !important a propósito: es una hoja de tema contra otra, y el tema
 * suele ganar por orden de carga. Se incluye `:focus` porque tras el clic el
 * botón se queda enfocado y el fondo se quedaría pegado para siempre.
 */
.marf-r__btn,
.marf-r__btn:hover,
.marf-r__btn:focus,
.marf-r__btn:focus-visible,
.marf-r__btn:active,
.marf-r__btn[disabled],
.marf-r__btn[disabled]:hover,
.marf-r__btn[disabled]:focus {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	filter: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

/* Nada de recuadro al pulsar. El contorno solo se deja para `:focus-visible`,
   que es el foco de teclado; con ratón o con el dedo no aparece. Y el
   resaltado propio de los navegadores móviles se apaga aparte, porque no es
   un contorno sino una capa encima. */
.marf-r__btn {
	-webkit-tap-highlight-color: transparent;
}

.marf-r__btn,
.marf-r__btn:hover,
.marf-r__btn:focus:not(:focus-visible),
.marf-r__btn:active,
.marf-r__btn[disabled],
.marf-r__btn[disabled]:hover,
.marf-r__btn[disabled]:focus {
	outline: none !important;
}

/* El foco de teclado sí se marca, pero con contorno, que no tapa nada. */
.marf-r__btn:focus-visible {
	outline: 2px solid var(--marf-r-accent) !important;
	outline-offset: 2px;
}

/* Icono: siempre a color. El gris llega solo cuando ya hay una elegida, y
   solo para las que no son. */
/* El tamaño del panel es un tope, no una medida fija: donde la columna sea
   más estrecha que el icono, manda la columna. Así el bloque encoge solo en
   un móvil o dentro de una columna estrecha de Elementor, sin un punto de
   corte por cada ancho.
   Va con `max-width` y no con `width: min(...)` a propósito: en la fila
   flexible los botones se miden por su contenido, y un porcentaje dentro de
   `width` se mide ahí contra un ancho que todavía no existe. */
.marf-r__icon {
	display: block;
	height: auto;
	max-width: 100%;
	width: var(--marf-r-size);
}

/* Cuadrado siempre. Con `aspect-ratio` donde lo haya, y por las medidas
   width/height del propio <img> en el resto. */
.marf-r__icon img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: contain;
	transition: filter .18s ease, opacity .18s ease, transform .18s ease;
	width: 100%;
}

/* El hover agranda mientras se pueda elegir. No depende de «animar los
   iconos»: es la pista de que el botón se puede pulsar. */
.marf-r:not(.marf-r--chosen) .marf-r__btn:hover .marf-r__icon img,
.marf-r:not(.marf-r--chosen) .marf-r__btn:focus-visible .marf-r__icon img {
	transform: translateY(-3px) scale(1.12);
}

/* ------------------------------------------- 4.1 Ya hay una elegida */

/* La elección es definitiva, así que los botones dejan de ofrecerse: ni
   cursor de mano ni crecer al pasar por encima. */
.marf-r--chosen .marf-r__btn {
	cursor: default;
}

.marf-r--chosen .marf-r__btn:not(.is-active) .marf-r__icon img {
	filter: grayscale(1);
	opacity: .5;
}

/* Solo la cifra: la etiqueta se apaga y se enciende sola con el hover, y
   tocarle la opacidad aquí la dejaría medio visible siempre. */
.marf-r--chosen .marf-r__btn:not(.is-active) .marf-r__count {
	opacity: .7;
}

/* Latido al registrar la reacción. */
.marf-r--animate .marf-r__btn.is-pop .marf-r__icon img {
	animation: marf-r-pop .42s ease;
}

@keyframes marf-r-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.32) rotate(-6deg); }
	70% { transform: scale(.96); }
	100% { transform: scale(1); }
}

/* «Reducir movimiento»: excepción a propósito.
 *
 * Lo normal aquí sería apagar el latido, y así estuvo hasta la 1.7.2. Se
 * fuerza a petición expresa: el latido al elegir reacción se ve siempre, lo
 * tenga puesto el visitante o no.
 *
 * Lo que sí se respeta es el resto. La preferencia se activa por mareo,
 * migraña o vértigo, y lo que más molesta no es un aviso de medio segundo
 * que uno mismo ha provocado al tocar, sino el movimiento ambiental: cosas
 * que crecen y se mueven solas mientras se navega. Eso se queda apagado.
 *
 * Si algún día quieres volver a respetarlo del todo, cambia la animación de
 * `marf-r-pop` por `marf-r-aviso` en la regla de abajo — un parpadeo de
 * opacidad, sin movimiento — y añade sus fotogramas.
 */
@media (prefers-reduced-motion: reduce) {
	.marf-r__btn {
		transition: none;
	}

	/* El gris de las no elegidas entra fundido en vez de saltar de golpe.
	   Ni `filter` ni `opacity` mueven nada de sitio. */
	.marf-r__icon img {
		transition: filter .25s ease, opacity .25s ease;
	}

	/* Nada de crecer al pasar por encima: eso es movimiento ambiental, que
	   aparece sin que nadie lo haya pedido, y ahí la preferencia manda. */
	.marf-r:not(.marf-r--chosen) .marf-r__btn:hover .marf-r__icon img,
	.marf-r:not(.marf-r--chosen) .marf-r__btn:focus-visible .marf-r__icon img {
		animation: none;
		transform: none;
	}

	/* El latido, completo, como en cualquier otra pantalla. */
	.marf-r--animate .marf-r__btn.is-pop .marf-r__icon img {
		animation: marf-r-pop .42s ease;
	}

	/* El nombre sigue apareciendo, pero sin desplazarse. */
	.marf-r__label {
		transition: opacity .15s ease;
		transform: translate(-50%, 0);
	}
}

/* ---------------------------------------------------------- 5. Textos */

.marf-r__count {
	display: block;
	font-size: .95em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	min-height: 1.2em;
}

.marf-r__btn.is-active .marf-r__count {
	color: var(--marf-r-accent);
}

/* El nombre solo aparece al pasar por encima. Va en posición absoluta para
   que al mostrarse no empuje nada: si ocupara hueco, las cuatro columnas
   darían un salto cada vez que el ratón entra y sale. */
.marf-r__label {
	color: var(--marf-r-muted);
	font-size: .9em;
	left: 50%;
	letter-spacing: .02em;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	text-transform: uppercase;
	top: 100%;
	transform: translate(-50%, 3px);
	transition: opacity .15s ease, transform .15s ease;
	white-space: nowrap;
}

/* Solo mientras se pueda elegir: una vez elegida, el bloque queda inerte y
   el nombre de cada reacción se consulta con el title del navegador. */
.marf-r:not(.marf-r--chosen) .marf-r__btn:hover .marf-r__label,
.marf-r:not(.marf-r--chosen) .marf-r__btn:focus-visible .marf-r__label {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Un nombre largo se sale de su columna; que quede por encima del vecino y
   no por debajo. */
.marf-r:not(.marf-r--chosen) .marf-r__btn:hover,
.marf-r:not(.marf-r--chosen) .marf-r__btn:focus-visible {
	z-index: 2;
}

/* Hueco reservado abajo para el nombre flotante. */
.marf-r--labels .marf-r__list {
	padding-bottom: 1.5em;
}

/* En pantallas táctiles no hay hover que dispare nada, así que el nombre se
   queda puesto debajo, como una línea más del botón. Vuelve al flujo, y con
   él las reglas de partición que necesita para caber en su columna. */
@media (hover: none) {
	.marf-r__label {
		display: block;
		left: auto;
		opacity: 1;
		position: static;
		top: auto;
		transform: none;
		transition: none;
		white-space: normal;
		/* Ligado al ancho de pantalla y con tope, para que la palabra más
		   larga («SORPRENDE») entre en su columna sin partirse en un móvil
		   estrecho y siga creciendo en una tablet. Sin separación entre
		   letras, que en una palabra de nueve son dos píxeles de más. */
		font-size: clamp(9px, 3.35vw, 1em);
		letter-spacing: 0;
	}

	/* Una palabra por línea: «ME» arriba y «GUSTA» abajo. Con las cuatro
	   etiquetas partidas en el mismo sitio, las columnas ocupan siempre dos
	   líneas y quedan parejas, sin depender de dónde parta el navegador.
	   El nowrap es lo que impide que una palabra larga añada una tercera
	   línea y descuadre la fila: antes vale que asome un pelo de más. */
	.marf-r__word {
		display: block;
		white-space: nowrap;
	}

	.marf-r--labels .marf-r__list {
		padding-bottom: 0;
	}

	.marf-r--chosen .marf-r__btn:not(.is-active) .marf-r__label {
		opacity: .7;
	}
}

.marf-r--no-labels .marf-r__label {
	display: none;
}

.marf-r__total {
	color: var(--marf-r-muted);
	font-size: .85em;
	margin: .9em 0 0;
}

.marf-r__msg {
	color: var(--marf-r-muted);
	font-size: .85em;
	margin: .5em 0 0;
	min-height: 0;
}

.marf-r__msg:empty {
	display: none;
}

.marf-r__msg.is-error {
	color: #d63638;
}

/* ---------------------------------------------------------- 6. Estados */

/* Mientras el JS trae el estado real detrás de la caché, atenuamos las
   cifras para que no se lea un número que va a cambiar en un instante. */
.marf-r.is-syncing .marf-r__count {
	opacity: .45;
}

.marf-r.is-busy .marf-r__list {
	pointer-events: none;
}

/* ---------------------------------------------------------- 7. Móvil */

/* Una fila de cuatro columnas iguales, y todo lo que puede encoger, encoge.
 *
 * Ojo con las variables: los ajustes del panel se inyectan en una hoja que
 * carga DESPUÉS de esta, con el mismo peso (`.marf-r`), así que redefinir
 * aquí --marf-r-gap o --marf-r-size no serviría de nada: ganaría siempre el
 * valor del panel. Por eso el recorte se hace donde se usa la variable, con
 * min(), tratando el ajuste como un máximo.
 */
@media (max-width: 600px) {
	.marf-r__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		/* El hueco pasa a ser una parte del ancho del bloque. En rejilla el
		   porcentaje se mide contra el propio bloque, no contra la pantalla,
		   así que también se ajusta dentro de una columna estrecha. */
		gap: min(var(--marf-r-gap), 4%);
	}

	/* Sin relleno lateral: el hueco entre iconos lo pone el gap, y aquí cada
	   píxel que se le quite al botón se lo queda el emoji. */
	.marf-r__btn {
		padding: .4em 0;
	}

	.marf-r__count {
		font-size: min(.95em, 3.6vw);
	}

	/* El tamaño de la etiqueta no se toca aquí: en pantalla táctil lo fija el
	   clamp del bloque (hover: none), y en una ventana de escritorio estrecha
	   la etiqueta sigue siendo un globo de una línea que no necesita encoger. */
}

/* Pantallas de verdad estrechas (320-360 px y los plegables cerrados). El
   hueco no se toca: ahí el emoji ya lo limita su columna, y apretarlo más
   solo serviría para juntarlos, que es justo lo que se quiere evitar. Lo
   que sí sobra es titular. */
@media (max-width: 360px) {
	.marf-r__title {
		font-size: .9em;
		margin-bottom: .7em;
	}
}

/* Aviso del editor de Elementor. */
.marf-r-editor-note {
	background: rgba(128, 128, 128, .12);
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 10px;
	padding: 10px 12px;
	text-align: center;
}