/**
 * Malu Pops — tabla nutricional de la ficha de producto (patrón
 * ficha-nutricion y bloque malupops/tabla-nutricional), según el concepto
 * single-product-section2.
 *
 * Se carga con la clase .mp-nutricion del patrón o con el bloque.
 *
 * - Sección a todo el ancho con el fondo del cliente abajo: la mancha azul, la
 *   melocotón y la ola lavanda que la separa de «Ingredientes» (su crema pasó
 *   a transparencia, así se asienta sobre el fondo del tema). Escala con el
 *   ancho de la pantalla, sin bajar de 60rem: en móvil se ve su centro.
 * - Antetítulo, titular con «nutricional» en morado y entradilla: los de
 *   ficha-secciones.css. Solo aquí, el personaje rosa de la marca acompaña
 *   al titular, mirando hacia el texto, sin tocarlo y sin sombra.
 * - Píldoras lavanda con la porción, las porciones por envase y el contenido
 *   neto, y la tabla en una tarjeta blanca: la columna de nutrientes y dos por
 *   sabor (100 g y porción), cada sabor con su color.
 * - Por debajo de 48em la tabla se desplaza de lado dentro de la tarjeta, con
 *   la columna de nutrientes fija.
 */

.mp-nutricion {
	/* El hueco de abajo deja la ola del fondo (entre el 6,5 % y el 12,5 % de su ancho, contando desde abajo) justo bajo la tabla. */
	padding-block: var(--wp--preset--spacing--60) clamp(4rem, 8vw, 9rem);
	background: url("../../img/ficha/nutricion-fondo.webp") center bottom / max(100%, 60rem) auto no-repeat;

	& .mp-ficha-seccion__titulo {
		--mp-personaje-ancho: clamp(3.25rem, 1.05em, 7.5rem);
		--mp-personaje-separacion: 0.18em;

		/* Se centra el conjunto y se reserva sitio para el personaje también en móvil. */
		box-sizing: border-box;
		max-inline-size: 100%;
		padding-inline-end: calc(var(--mp-personaje-ancho) + var(--mp-personaje-separacion));

		&::after {
			content: none;
		}

		/* Acompaña a «nutricional» incluso cuando el titular ocupa dos líneas. */
		& mark {
			position: relative;
			display: inline-block;

			&::after {
				content: "";
				position: absolute;
				inset-block-end: -0.015em;
				inset-inline-start: calc(100% + var(--mp-personaje-separacion));
				inline-size: var(--mp-personaje-ancho);
				aspect-ratio: 959.08 / 1004.53;
				background: url("../../svg/personaje-rosa-senalando.svg") center / contain no-repeat;
				scale: -1 1;
				pointer-events: none;
			}
		}
	}

	& .mp-tabla-nutricional {
		margin-block: clamp(1.25rem, 1rem + 0.8vw, 1.75rem) 0;
	}
}

/* --- Bloque: píldoras y tabla -------------------------------------------- */

.mp-tabla-nutricional {
	--mp-tabla-lavanda: #efeefd;
	--mp-tabla-filete: color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent);
	--mp-tabla-valor: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, var(--wp--preset--color--blanco));

	/* Iconos de las píldoras, en máscara para que tomen el color: tazón (Tabler), caja (Lucide) y báscula (Hugeicons, con trazo de 2). */
	--mp-tazon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7a2 2 0 0 1 2 2v.5c0 1.694-2.247 5.49-3.983 6.983l-.017.013V17a2 2 0 0 1-1.85 1.995L16 19H8a2 2 0 0 1-2-2v-.496l-.065-.053c-1.76-1.496-3.794-4.965-3.928-6.77L2 9.5V9a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	--mp-caja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");
	--mp-bascula: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M19 15v3.889C19 21.114 18.264 22 15.889 22H8.11C5.886 22 5 21.264 5 18.889V15a7 7 0 1 1 14 0Z'/%3E%3Cpath d='M16 15a4 4 0 0 0-8 0m4 2 1-2m3.312-10H7.688c-.884 0-1.326 0-1.715-.152a2 2 0 0 1-.368-.187c-.35-.22-.595-.568-1.085-1.263-.382-.541-.573-.812-.507-1.033a.5.5 0 0 1 .107-.19C4.28 2 4.624 2 5.313 2h13.376c.689 0 1.033 0 1.192.175q.075.084.107.19c.066.221-.125.492-.507 1.033-.49.695-.735 1.042-1.085 1.263a2 2 0 0 1-.368.187C17.637 5 17.196 5 16.312 5ZM14 8V5m-4 3V5'/%3E%3C/svg%3E");

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
	text-align: start;

	& > * {
		margin: 0;
	}
}

/* Tres en fila; si no caben, dos y la tercera centrada debajo; en móvil, una por fila. */
.mp-tabla-nutricional .mp-tabla-nutricional__envase {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem clamp(1rem, 0.5rem + 1.2vw, 1.6rem);
	inline-size: 100%;
	max-inline-size: 62rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.mp-tabla-nutricional .mp-tabla-nutricional__dato {
	box-sizing: border-box;
	flex: 1 1 15rem;
	max-inline-size: 21rem;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: center;
	align-items: center;
	column-gap: clamp(0.85rem, 0.6rem + 0.7vw, 1.25rem);
	min-block-size: 4.25rem;
	margin: 0;
	padding: 0.7rem 1.5rem 0.7rem clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem);
	border-radius: var(--wp--preset--border-radius--pildora);
	background-color: var(--mp-tabla-lavanda);
	font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem);
	font-weight: 500;
	line-height: 1.3;

	&::before {
		content: "";
		grid-row: 1 / span 2;
		inline-size: clamp(2rem, 1.7rem + 0.9vw, 2.5rem);
		aspect-ratio: 1;
		background-color: var(--wp--preset--color--morado);
		-webkit-mask: var(--mp-icono) center / contain no-repeat;
		mask: var(--mp-icono) center / contain no-repeat;
	}
}

.mp-tabla-nutricional .mp-tabla-nutricional__dato--porcion {
	--mp-icono: var(--mp-tazon);
}

.mp-tabla-nutricional .mp-tabla-nutricional__dato--porciones {
	--mp-icono: var(--mp-caja);
}

.mp-tabla-nutricional .mp-tabla-nutricional__dato--contenido {
	--mp-icono: var(--mp-bascula);
}

.mp-tabla-nutricional .mp-tabla-nutricional__etiqueta {
	color: var(--wp--preset--color--morado);
}

.mp-tabla-nutricional .mp-tabla-nutricional__valor {
	color: var(--wp--preset--color--contrast);
}

/*
 * La tarjeta: se desplaza de lado si la tabla no cabe (en móvil). Relativa,
 * para que los textos ocultos de la cabecera (posición absoluta) se queden
 * dentro y no ensanchen la página.
 */
.mp-tabla-nutricional .mp-tabla-nutricional__marco {
	position: relative;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 72.5rem;
	margin-inline: auto;
	padding: clamp(0.5rem, 0.25rem + 0.7vw, 1rem);
	overflow-x: auto;
	border-radius: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
	background-color: var(--wp--preset--color--blanco);
	box-shadow: 0 1.5rem 3rem -1.75rem rgb(28 11 69 / 0.28), 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	overscroll-behavior-x: contain;
	scrollbar-width: thin;

	&:focus-visible {
		outline-offset: 4px;
	}
}

/*
 * Cada sabor, con su color: el de la cabecera y uno más claro en sus celdas.
 * Un sabor sin color propio va en lavanda.
 */
.mp-tabla-nutricional .mp-sabor {
	--mp-sabor-cabecera: #eceafd;
	--mp-sabor-celda: #f8f7fe;
}

.mp-tabla-nutricional .mp-sabor--vainilla {
	--mp-sabor-cabecera: #fef3de;
	--mp-sabor-celda: #fefaf1;
}

.mp-tabla-nutricional .mp-sabor--chocolate {
	--mp-sabor-cabecera: #ecd5c9;
	--mp-sabor-celda: #faf2f0;
}

/*
 * En móvil, columnas de 5,75rem y la de nutrientes de 8,25rem: a 390 px se
 * ven dos columnas y asoma la tercera, que invita a desplazar la tabla. El
 * número de columnas de valores lo pone render.php (--mp-columnas).
 */
.mp-tabla-nutricional .mp-tabla-nutricional__tabla {
	inline-size: 100%;
	min-inline-size: calc(8.25rem + var(--mp-columnas, 4) * 5.75rem);
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	color: var(--mp-tabla-valor);
	font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.1875rem);
	line-height: 1.25;

	& :is(th, td) {
		padding: 0.5rem 0.75rem;
		border: 0;
		border-block-end: 1px solid var(--mp-tabla-filete);
		vertical-align: middle;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}

	& td {
		background-color: var(--mp-sabor-celda);
		white-space: nowrap;
	}

	/* Cabecera: una barra redondeada con el lavanda de «Nutriente» y el color de cada sabor. */
	& thead th {
		padding-block: 1rem;
		border-block-end: 0;
		background-color: var(--mp-sabor-cabecera);
		color: var(--wp--preset--color--contrast);
		font-weight: 500;
		line-height: 1.2;
	}

	& thead th:last-child {
		border-start-end-radius: 1rem;
		border-end-end-radius: 1rem;
	}

	/* La columna de nutrientes, fija al desplazar la tabla de lado. */
	& :is(thead, tbody) th:first-child {
		position: sticky;
		inset-inline-start: 0;
		z-index: 1;
		inline-size: 8.25rem;
		padding-inline-start: clamp(0.75rem, 0.4rem + 1vw, 1.6rem);
		text-align: start;
	}

	& thead th:first-child {
		border-start-start-radius: 1rem;
		border-end-start-radius: 1rem;
		background-color: var(--mp-tabla-lavanda);
		color: var(--wp--preset--color--morado);
	}

	& tbody th {
		background-color: #fbfbfd;
		color: var(--wp--preset--color--contrast);
		font-weight: 500;
	}

	& tbody tr:last-child :is(th, td) {
		border-block-end: 0;
	}

	& tbody tr:last-child th:first-child {
		border-end-start-radius: 1rem;
	}

	& tbody tr:last-child td:last-child {
		border-end-end-radius: 1rem;
	}
}

@media (width < 30em) {
	.mp-tabla-nutricional .mp-tabla-nutricional__dato {
		max-inline-size: none;
	}
}

@media (width >= 48em) {
	.mp-tabla-nutricional .mp-tabla-nutricional__tabla {
		min-inline-size: 0;

		& :is(thead, tbody) th:first-child {
			inline-size: 22%;
		}
	}
}

@media (forced-colors: active) {
	.mp-tabla-nutricional .mp-tabla-nutricional__dato {
		border: 1px solid CanvasText;
	}

	.mp-tabla-nutricional .mp-tabla-nutricional__dato::before {
		background-color: CanvasText;
	}
}