/*<style>*/
	/* Estilos generales de la página */
	h1 {
		padding: 2em 0 1em 0;
		text-align: center;
		display: none;
	}
/*</style>*/
/*<style>*/
	/* Área global de trabajo */
	#area-global {
		max-width: var(--tp-max-ancho);
		min-width: calc(var(--tp-min-ancho) - (2 * var(--tp-margen)));
		width: 100%; /* calc(100% - (2 * var(--tp-margen))); */

		margin: 0 auto;

		display: grid;
		grid-template-areas:
			"a-resumen a-resumen a-resumen"
			". . ."
			"a-asistente . a-material"
			". . ."
			"a-imagenes . a-trabajo"
			". . ."
			"a-carga . a-enlaces";

		grid-template-columns: calc((var(--tp-min-ancho) / 3) * 2) var(--tp-margen-05) auto;
		grid-template-rows: auto var(--tp-margen) auto var(--tp-margen) 1fr var(--tp-margen) auto;

		position: relative;

		--el-columnas-ventana-superior: 1 / 4;
		/*
		--el-filas-ventana-superior: 5 / 6;
		*/
		--el-filas-ventana-superior: 3 / 6;
	}
	#area-global > * {
		padding: 1rem;
	}

	#area-global::after {
		display: block;
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background-color: canvas;
		opacity: 0.75;
	}

	@media screen and (max-width:calc(480px + (2 * 1rem) - 1px)) {
		#area-global {
			grid-template-areas:
				"a-asistente"
				"a-resumen"
				"."
				"a-material"
				"."
				"a-imagenes"
				"a-carga"
				"a-trabajo"
				"."
				"a-enlaces";
			grid-template-columns: auto;
			max-height: unset;
			grid-template-rows: auto auto var(--tp-margen) auto var(--tp-margen) auto auto auto var(--tp-margen) auto;

			--el-columnas-ventana-superior: 1 / 1;
			--el-filas-ventana-superior: 2 / 9;
			--el-columnas-internas-asistente: 1;
		}
	}
	@media screen and (min-width:calc(480px + (2 * 1rem))) and (max-width:calc(640px + (2 * 1rem) - 1px)) {
		#area-global {
			grid-template-areas:
				"a-asistente a-asistente a-asistente"
				"a-resumen a-resumen a-resumen"
				". . ."
				"a-material a-material a-material"
				". . ."
				"a-imagenes . a-trabajo"
				". . ."
				"a-carga . a-enlaces";
			max-height: unset;
			grid-template-rows: auto auto var(--tp-margen) auto var(--tp-margen) auto var(--tp-margen) auto;

			--el-columnas-ventana-superior: 1 / 4;
			--el-filas-ventana-superior: 2 / 7;
			--el-columnas-internas-asistente: 1;
		}
	}
/*</style>*/
/*<style>*/
	/* Área de Resumen */
	#area-resumen {
		grid-area: a-resumen;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;

		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);

		overflow: hidden;
		gap: var(--tp-margen);
	}
	#area-resumen > fieldset {
		padding: 0;
		margin: 0;
		border: none;

		display: flex;
		flex-grow: calc(max(var(--tp-es-tamano-xs), var(--tp-es-tamano-sm), var(--tp-es-tamano-md)) + 0);
		flex-basis: var(--tp-val-auto-md, var(--tp-val-auto-lg, var(--tp-val-auto-xl, 60%)));
		gap: calc((max(var(--tp-es-tamano-xs), var(--tp-es-tamano-sm)) + 0) * var(--tp-margen));
	}
	#area-resumen .lista-campos {
		font-size: small;
		flex-grow: 1;
	}
	#area-resumen .lista-campos:not(:first-of-type) > dt {
		margin-left: calc(var(--tp-margen-05) * (1 - max(var(--tp-es-tamano-xs), var(--tp-es-tamano-sm), 0)));
	}
	#area-resumen .lista-campos > dd {
		min-width: 4rem;
	}
	#area-resumen .lista-campos.columna {
		flex-direction: var(--tp-val-column-sm, --tp-val-column-xs, row);
	}
	#area-resumen #boton-ordenar {
		font-size: medium;
		align-self: flex-end;
		flex-grow: 1;
		max-width: calc(var(--tp-min-ancho) * 0.5);
		font-weight: bold;
		/* background-color: var(--dtf-color-resaltado-claro); */
		color: var(--dtf-color-claro);
	}
	#area-resumen #boton-ordenar:not(:disabled) {
		background-color: var(--dtf-color-resaltado-claro);
	}
/*</style>*/
/*<style>*/
	/* Área de Asistente */
	#area-boton-asistente {
		display: flex;
		justify-content: center;
		align-items: end;
		grid-area: a-asistente;
	}
	#area-boton-asistente #boton-asistente {
		width: 100%;
		max-width: var(--tp-min-ancho);
	}
/*</style>*/
/*<style>*/
	/* Área de Material */
	#area-material {
		grid-area: a-material;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--tp-margen);

		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
	}
	#area-material > * {
		width: min-content;
	}
	#area-material #selector-material {
		flex-grow: 1;
		min-width: 40%;
	}
	#area-material #selector-material > option:disabled {
		display: none;
	}
	#area-material #selector-material > option:disabled:first-child:last-child {
		display: initial;
	}
	#area-material > .lista-campos {
		font-size: x-small;
	}
	#area-material > .lista-campos dd + dt {
		margin-left: var(--tp-margen-05);
	}
	@media screen and (max-width:910px) {
		#area-material {
			flex-wrap: wrap;
		}
		#area-material #selector-material {
			min-width: 100%;
		}
		#area-material > .lista-campos {
			display: grid;
			grid-auto-flow: column;
			grid-template-rows: auto auto;
			width: 100%;
			gap: 0 var(--tp-margen-05);
			max-width: var(--tp-min-ancho);
		}
		#area-material > .lista-campos dd + dt {
			margin-left: 0;
		}
	}
/*</style>*/
/*<style>*/
	/* Área de Imágenes */
	#area-imagenes {
		grid-area: a-imagenes;
		padding: 0;
		position: relative;
	}
	#lista-imagenes {
		margin: 0;
		list-style: none;

		scrollbar-width: thin;
		overflow-y: auto;
		padding: 0 calc((1 - max(var(--tp-es-tamano-xs), var(--tp-es-tamano-sm), 0)) * var(--tp-margen-05)) 0 0;

		--el-alto-max-imagen-base: calc(var(--tp-min-ancho) * 1.5);
		--el-alto-max-inalcanzable: calc(100 * var(--el-alto-max-imagen-base));
		max-height: max(calc((max(var(--tp-es-tamano-xs), var(--tp-es-tamano-sm), 0)) * var(--el-alto-max-inalcanzable)), calc(var(--el-alto-max-imagen-base) + (3 * var(--tp-margen))));

		counter-reset: contador-imagenes;
	}
	#lista-imagenes:empty {
		height: 100%;
		overflow-y: hidden;
		border: 1px solid var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		display: none;
	}
	#lista-imagenes:empty::before {
		content: 'NO HAY IMÁGENES CARGADAS';
		display: block;
		text-align: center;
		padding: var(--tp-margen);
		font-size: smaller;
		opacity: 0.35;
	}
	#lista-imagenes > li {
		list-style: none;
		padding: 0;
		margin: 0;
		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen-05);
		counter-increment: contador-imagenes;
	}
	#lista-imagenes > li + li {
		margin-top: var(--tp-margen);
	}

	#lista-imagenes .imagen-base {
		overflow: hidden;

		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--tp-margen) var(--tp-margen-05);

		position: relative;
	}
	#lista-imagenes .imagen-base > * {
		width: 100%;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	#lista-imagenes .imagen-base hgroup {
		display: flex;
		justify-content: center;
		grid-column: 1 / span 3;
		margin: 0 calc(var(--tp-margen) * 1.25) calc(-1 * var(--tp-margen-05)) calc(var(--tp-margen) * 1.25);
		position: relative;
		overflow: visible;
		height: calc(var(--tp-margen) * 1.25);
		align-items: center;
		width: auto;
	}
	#lista-imagenes .imagen-base hgroup > h3 {
		font-size: medium;
	}
	#lista-imagenes .imagen-base hgroup > p {
		color: transparent;
	}
	#lista-imagenes .imagen-base hgroup > p::after {
		font-weight: bold;
		color: initial;
		content: counter(contador-imagenes, upper-alpha);
	}
	#lista-imagenes .imagen-base > label.seleccion-imagen-base-actual,
	#lista-imagenes .imagen-base > input[name="seleccion-imagen-base"] ~ label[for="seleccion-imagen-base-ninguna"] > i {
		position: absolute;
		display: inline-block;
		width: calc(var(--tp-margen) * 1.25);
		height: calc(var(--tp-margen) * 1.25);
		top: var(--tp-margen-05);
		border-radius: 50%;
		text-align: center;
		vertical-align: middle;
		line-height: 1;
		background-color: ButtonFace;
		border: 1px solid ButtonBorder;
		right: var(--tp-margen-05);
		cursor: pointer;
		order: 100;
		overflow: hidden;
		user-select: none;
	}
	#lista-imagenes .imagen-base > input[name="seleccion-imagen-base"] ~ label[for="seleccion-imagen-base-ninguna"] {
		position: absolute;
		display: block;
		top: 0; left: 0;
		width: 100%; height: 100%;
		background-color: var(--dtf-color-resaltado-claro);
		border-radius: inherit;
		display: none;
		z-index: 0;
	}
	#lista-imagenes .imagen-base > input[name="seleccion-imagen-base"]:checked ~ label[for="seleccion-imagen-base-ninguna"] {
		display: block;
	}
	#lista-imagenes .imagen-base > input[name="seleccion-imagen-base"]:checked ~ label[for="seleccion-imagen-base-ninguna"] > i {
		line-height: 1.15;
	}
	#lista-imagenes .imagen-base > input[name="seleccion-imagen-base"]:checked ~ label.seleccion-imagen-base-actual {
		display: none;
	}

	#lista-imagenes .imagen-base figure {
		display: flex;
		justify-content: center;
		align-items: center;

		grid-column: 1 / span 3;
		margin: 0;
		padding: 0;
		/* background-color: canvas; */
		background-image: url('../img/fondo-pliego-oscuro.png');
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen-05);

		max-height: calc((var(--tp-min-ancho) * 0.5) + (var(--tp-margen-05) * 3));
	}
	#lista-imagenes .imagen-base figure img {
		width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
	#lista-imagenes .imagen-base .lista-campos {
		font-size: smaller;
	}
	#lista-imagenes .imagen-base .lista-campos :is(.campo-tamano, .campo-alto, .campo-ancho) {
		font-size: x-small;
		line-height: 1.5em;
	}
	#lista-imagenes .imagen-base > fieldset {
		grid-column: 1 / span 3;

		font-size: smaller;
		justify-self: stretch;

		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0 var(--tp-margen-05);
	}
	#lista-imagenes .imagen-base > fieldset > .campo {
		font-size: smaller;
	}
	#lista-imagenes .imagen-base > fieldset > .campo > input {
		padding: calc(var(--tp-margen-05, 0.5rem) - 1px);
	}
	#lista-imagenes .imagen-base > fieldset > .campo,
	#lista-imagenes .imagen-base > fieldset > .lista-campos {
		--el-num-columnas: 3;
		width: calc((100% - var(--tp-margen-05) * (var(--el-num-columnas) - 1)) / var(--el-num-columnas));
	}
	#lista-imagenes .imagen-base fieldset {
		padding: 0;
		margin: 0;
		border: none;
	}
	#lista-imagenes .imagen-base fieldset > legend {
		font-weight: bold;
		text-align: center;
		display: block;
		width: 100%;
		margin-bottom: var(--tp-margen-05);
	}
	#lista-imagenes .imagen-base fieldset > button {
		flex-grow: 1;
		flex-basis: 0;
	}
	#lista-imagenes .imagen-base fieldset > button > i {
		font-size: medium;
		vertical-align: text-bottom;
	}

	#lista-imagenes .imagen-base label {
		display: flex;
		align-items: center;
	}
	#lista-imagenes .imagen-base label input[type="checkbox"] {
		width: 1.25rem;
		height: 1.25rem;
		margin-right: var(--tp-margen-05);
	}

	/*
	#lista-imagenes .imagen-base.error-cantidad input[name="cantidad-total"] {
		--el-color-parpadeo: yellow;
		animation: animacion-borde-parpadeo 1s infinite;
	}
	*/
	#lista-imagenes .imagen-base.error-tamano :is(.campo-alto, .campo-ancho) {
		--el-color-parpadeo: red;
		animation: animacion-borde-parpadeo 1s infinite;
	}
	@keyframes animacion-borde-parpadeo {
		0%, 100% { border-color: var(--el-color-parpadeo, initial); }
		50% { border-color: transparent; }
	}

	#area-imagenes #lista-imagenes:not(:empty) + #area-paso-a-paso {
		display: none;
	}

	#area-imagenes #area-paso-a-paso {
		padding: var(--tp-margen);
		margin: 0 calc((1 - max(var(--tp-es-tamano-xs), var(--tp-es-tamano-sm), 0))* var(--tp-margen-05)) 0 0;
		height: 100%;
		border: 1px solid var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
	}
	#area-imagenes #area-paso-a-paso h2 {
		margin: 0;
		font-size: medium;
		text-align: center;
	}
	#area-imagenes #area-paso-a-paso p {
		margin: var(--tp-margen) 0;
		line-height: 1.25;
	}
	#area-imagenes #lista-pasos-asistente {
		counter-reset: contador-pasos-asistente;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	#area-imagenes #lista-pasos-asistente > li {
		padding: 0;
		list-style: none;
		position: relative;
		counter-increment: contador-pasos-asistente;
		margin: 2.75rem 0 0 0;
	}
	#area-imagenes #lista-pasos-asistente > li::after {
		content: counter(contador-pasos-asistente);
		position: absolute;
		top: -1.75rem;
		left: 2.5rem;
		width: 1.5rem;
		height: 1.5rem;
		line-height: 1.6;
		text-align: center;
		border-radius: 50%;
		background-color: var(--dtf-color-resaltado-claro);
		color: var(--dtf-color-claro);
		font-weight: bold;
	}
	#area-imagenes #lista-pasos-asistente > li::before {
		content: 'PASO';
		position: absolute;
		top: -1.4rem;
		left: 0;
		font-weight: bold;
		font-size: smaller;
	}
/*</style>*/
/*<style>*/
	/* Área de Trabajo */
	#area-trabajo {
		grid-area: a-trabajo;
		min-height: calc(((var(--tp-max-ancho) / 5 * 3) / 4 * 3) + (3 * var(--tp-margen)));
		border-radius: var(--tp-margen-05);
		padding: 0;

		display: flex;
		flex-direction: column;
		justify-content: stretch;
	}

	#area-diseno,
	#area-asistente,
	#area-pliego,
	#area-imagen,
	#area-materiales {
		display: none;
		flex-grow: 1;
	}

	#seleccion-imagen-base-ninguna:not(:checked) ~ * #area-imagen,
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-imagen:checked ~ * #area-imagen,
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-diseno:checked ~ * #area-diseno,
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-pliego:checked ~ * #area-pliego,
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-material:checked ~ * #area-materiales,
	#boton-editor-asistente:checked ~ * #area-asistente {
		display: flex;
	}
/*</style>*/
/*<style>*/
	/* Área de Diseño */
	#area-diseno {
		position: relative;
	}

	#lista-pliegos {
		margin: 0;
		padding: 0 calc((1 - max(var(--tp-es-tamano-xs), var(--tp-es-tamano-sm), 0)) * var(--tp-margen-05)) 0 0;
		list-style: none;
		width: 100%;

		overflow-y: scroll;
		scrollbar-width: thin;

		position: absolute;
		top: 0;
		bottom: 0;

		counter-reset: contador-pliegos;

		--lc-num-columnas: 1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(calc(100% / (var(--lc-num-columnas, 3) + 1)), 1fr));
		grid-auto-rows: max-content;

		list-style: none;
		gap: var(--tp-margen-05);

		border-radius: var(--tp-margen-05);
	}

	#lista-pliegos:empty {
		overflow-y: hidden;
		border: 1px solid var(--dtf-color-fondo-destacado, initial);
	}
	#lista-pliegos:empty::before {
		content: 'NO HAY PLIEGOS EN EL DISEÑO';
		display: block;
		text-align: center;
		padding: var(--tp-margen);
		font-size: smaller;
		opacity: 0.35;
	}

	#lista-pliegos > li {
		list-style: none;
		padding: 0;
		margin: 0;
		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen-05);
		counter-increment: contador-pliegos;
	}

	#lista-pliegos > li.arrastrando,
	#lista-pliegos > li:has(.arrastrando),
	#lista-pliegos.arrastrando > li {
		border: 1px solid var(--dtf-color-resaltado-claro);
	}

	#lista-pliegos .pliego-base {
		--el-pliego-ancho: 1000;
		--el-pliego-alto: 570;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--tp-margen-05);

		--el-switch-relacion-aspecto: max(calc(100000 * clamp(-0.00001, calc((var(--el-pliego-ancho) / var(--el-pliego-alto)) - (5 / 3)), 0.00001)), 0);
		--el-alto-max-pliego: 33.5rem;
		--el-ancho-max-aspecto: max(calc(100% * max(var(--el-switch-relacion-aspecto), var(--tp-es-tamano-sm, 0))), calc((1 - var(--el-switch-relacion-aspecto)) * ((var(--el-alto-max-pliego) * var(--el-pliego-ancho)) / var(--el-pliego-alto))));
		max-width: var(--el-ancho-max-aspecto);
		margin-left: max(0px, calc((100% - var(--el-ancho-max-aspecto)) * 0.5));
	}
	#lista-pliegos .pliego-base figure {
		margin: 0;
		padding: 0;
		object-fit: contain;
		grid-column: 1 / span 3;

		display: grid;
		grid-template-areas:
			"canvas ancho"
			"largo .";
		grid-template-columns: 1fr 1rem;
		grid-template-rows: auto 1rem;
	}
	#lista-pliegos .pliego-base figure canvas {
		width: 100%;
		height: auto;
		background-color: canvas;
		grid-area: canvas;
		aspect-ratio: var(--el-pliego-ancho, 100) / var(--el-pliego-alto, 57);
		background-image: url('../img/fondo-pliego-oscuro.png');
	}
	#lista-pliegos .pliego-base figure figcaption {
		font-size: x-small;
		text-align: center;
	}
	#lista-pliegos .pliego-base figure figcaption.largo {
		grid-area: largo;
		align-self: end;
	}
	#lista-pliegos .pliego-base figure figcaption.ancho {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		grid-area: ancho;
	}
	#lista-pliegos .pliego-base > fieldset {
		padding: 0;
		margin: 0;
		border: none;
		display: flex;
		flex-wrap: wrap;
		grid-column: 1 / span 3;
		gap: var(--tp-margen-05) 0;
		justify-self: end;
	}
	#lista-pliegos .pliego-base > fieldset > .lista-campos {
		font-size: x-small;
		margin: 0 var(--tp-margen) 0 auto;
	}

	@media all and (max-width: calc(480px - 1px)) {
		#lista-pliegos {
			position: relative;
			overflow-y: auto;
		}
	}
	@media screen and (min-width:480px) and (max-width:calc(480px + (2 * 1rem) - 1px)) {
		#lista-pliegos {
			--lc-num-columnas: 2;
		}
	}
	@media all and (min-width: 700px) {
		#lista-pliegos {
			--lc-num-columnas: 2;
		}
	}
	@media all and (min-width: calc(910px + 1px)) {
		#lista-pliegos {
			--lc-num-columnas: 3;
		}
	}
/*</style>*/
/*<style>*/
	/* Área de Imagen */
	#area-imagen {
		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen);
		flex-direction: column;
	}
	#area-imagen > main {
		margin-top: var(--tp-margen);
		flex-grow: 1;

		display: grid;
		gap: var(--tp-margen-05);
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto 1fr auto auto;
	}
	#area-imagen > main #mostrar-imagen-detalle-ajustada {
		position: absolute;
		display: none;
	}
	#area-imagen > main figure > img {
		height: auto;
	}
	#area-imagen > main #mostrar-imagen-detalle-ajustada:checked ~ figure > img {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	#area-imagen > main label[for="mostrar-imagen-detalle-ajustada"] {
		position: absolute;
		left: 0;

		display: inline-block;
		width: calc(var(--tp-margen) * 1.25);
		height: calc(var(--tp-margen) * 1.25);

		border-radius: 50%;
		text-align: center;
		vertical-align: middle;
		line-height: 1;
		background-color: ButtonFace;
		border: 1px solid ButtonBorder;
		/* right: var(--tp-margen-05); */
		cursor: pointer;
		overflow: hidden;
		user-select: none;
	}

	#area-imagen > main label[for="mostrar-imagen-detalle-ajustada"] > i {
		display: inline-block;
		font-size: 1.15rem;
	}

	#area-imagen > main #mostrar-imagen-detalle-ajustada:checked ~ hgroup > label[for="mostrar-imagen-detalle-ajustada"] > i:not(.ajustada) {
		display: none;
	}

	#area-imagen > main #mostrar-imagen-detalle-ajustada:not(:checked) ~ hgroup > label[for="mostrar-imagen-detalle-ajustada"] > i.ajustada {
		display: none;
	}

	#area-imagen > main hgroup {
		grid-column: 1 / span 4;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	#area-imagen > main hgroup .identificador-imagen {
		font-size: large;
		margin: 0 var(--tp-margen);
		font-weight: bold;
	}
	#area-imagen > main figure {
		grid-column: 1 / span 4;
		/* display: flex; */
		position: relative;

		margin: 0;
		background-color: canvas;
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen-05);

		scrollbar-width: thin;
		overflow: auto;

		height: auto;
		aspect-ratio: 1;
	}

	#area-imagen > main .lista-campos {
		grid-column: auto / span calc(1 + max(var(--tp-es-tamano-md), var(--tp-es-tamano-sm), var(--tp-es-tamano-xs)));
		font-size: smaller;
	}
	#area-imagen > main .campo-transparencia dd,
	#area-imagen > main .campo-carga dd {
		padding: var(--tp-margen-025);
		display: flex;
		justify-content: stretch;
		align-items: center;
	}
	#area-imagen > main .campo-transparencia input,
	#area-imagen > main .campo-carga progress {
		height: 1.5rem;
		margin: 0;
		padding: 0;
		flex-grow: 1;
	}
	#area-imagen > main fieldset.campo-carga {
		grid-column: calc(1 + (2 * max(var(--tp-es-tamano-lg), var(--tp-es-tamano-xl)))) / -1;
		display: flex;
		align-items: flex-end;
		gap: var(--tp-margen-05);
		margin: 0;
		padding: 0;
		border: none;
	}

	#area-imagen > main .campo-carga {
		flex-grow: 1;
	}

	#area-imagen > main fieldset .campo-carga data {
		margin-left: var(--tp-margen-05);
	}
/*</style>*/
/*<style>*/
	/* Área de Pliegos */
	#area-pliego {
		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen);
		flex-direction: column;
	}
	#area-pliego > main {
		margin-top: var(--tp-margen);
		flex-grow: 1;

		display: grid;
		gap: var(--tp-margen-05);
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	#area-pliego > main hgroup {
		grid-column: 1 / span 4;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#area-pliego > main figure {
		margin: 0;
		padding: 0;
		grid-column: 1 / span 4;
		object-fit: contain;

		display: grid;
		grid-template-areas:
			"largo ."
			"canvas ancho";
		grid-template-columns: 1fr 1rem;
		grid-template-rows: 1rem auto;
	}
	#area-pliego > main figure canvas {
		width: 100%;
		background-color: canvas;
		grid-area: canvas;
	}
	#area-pliego > main figure figcaption {
		font-size: x-small;
		text-align: center;
	}
	#area-pliego > main figure figcaption.largo {
		grid-area: largo;
	}
	#area-pliego > main figure figcaption.ancho {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		grid-area: ancho;
	}
/*</style>*/
/*<style>*/
	/* Área de Materiales */
	#area-materiales {
		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen);
		flex-direction: column;
		position: relative;
		gap: var(--tp-margen);
		z-index: 20;
		grid-area: a-trabajo;
		grid-column: var(--el-columnas-ventana-superior, 1 / span 3);
		grid-row: var(--el-filas-ventana-superior, 2 / 6);
	}
	#area-materiales > main {
		margin: var(--tp-margen) auto var(--tp-margen-2) auto;
		padding: 0 calc((1 - max(var(--tp-es-tamano-xs), var(--tp-es-tamano-sm), 0)) * var(--tp-margen-05)) 0 0;
	}
	#area-materiales > main > fieldset {
		width: 100%;
		border: none;

		display: grid;
		gap: var(--tp-margen);
		grid-template-columns: 1fr;
		grid-auto-rows: auto;

		align-content: start;
		justify-items: end;
	}
	#area-materiales > main > fieldset dd {
		min-width: 6rem;
	}
	#area-materiales > main > fieldset + fieldset {
		border-top: 1px solid;
		margin-top: var(--tp-margen);
		padding-top: calc(var(--tp-margen) * 1.25);
	}
	#area-materiales > footer {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--tp-margen);
	}
	#area-materiales > main > fieldset .campo-carga {
		display: flex;
		gap: 0 var(--tp-margen-05);
		border: none;
		padding: 0;
		flex-grow: 1;
	}
	#area-materiales > main > fieldset .campo-carga dd {
		margin: 0;
		padding: 0 var(--tp-margen-05) 0 0;
		flex-grow: 1;
		display: flex;
		align-items: center;
		width: calc(var(--tp-min-ancho) * 0.55);
	}
	#area-materiales > main > fieldset .campo-carga progress {
		/*
		width: 100%;
		padding: var(--tp-margen-05);
		*/
		height: 1.5rem;
		margin: var(--tp-margen-025) var(--tp-margen-05) var(--tp-margen-025) var(--tp-margen-05);
		flex-grow: 1;
	}
	#area-materiales > main > fieldset .campo-carga #boton-cargar-imagenes {
		align-self: end;
	}
	#area-materiales > main > div {
		border: 2px solid;
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen-2);
		text-align: center;
		line-height: 2.5;
		background-color: canvas;
	}
	#area-materiales > main.error > div {
		border-color: red;
	}
	#area-materiales > main.procesada > div {
		border-color: forestgreen;
	}
	#area-materiales > main em {
		font-size: larger;
		font-weight: bold;
		font-style: normal;
	}
	#area-materiales > main em > i {
		font-size: 3rem;
		line-height: 2;
	}
	#area-materiales > main.error em {
		color: red;
	}
	#area-materiales > main.procesada em {
		color: forestgreen;
	}
	#area-materiales > main > div .campo-num-orden {
		font-size: 2rem;
		font-weight: bold;
		line-height: 1.5;
	}
	#area-materiales #boton-procesar-orden:not(:disabled) {
		background-color: var(--dtf-color-resaltado-claro, initial);
		color: var(--dtf-color-claro, initial);
	}
	#area-materiales input[name="estado-materiales"] {
		display: none;
	}
	#area-materiales #boton-estado-materiales-normal:checked ~ *:not(.normal).error,
	#area-materiales #boton-estado-materiales-normal:checked ~ *:not(.normal).procesada,
	#area-materiales #boton-estado-materiales-error:checked ~ *:not(.error).normal,
	#area-materiales #boton-estado-materiales-error:checked ~ *:not(.error).procesada,
	#area-materiales #boton-estado-materiales-procesada:checked ~ *:not(.procesada).normal,
	#area-materiales #boton-estado-materiales-procesada:checked ~ *:not(.procesada).error {
		display: none;
	}
	#area-materiales footer > :is(label.boton, #boton-procesar-orden, #boton-procesar-pago) {
		font-size: medium;
	}

	/*
	area-materiales boton-estado-materiales-normal estado-materiales
	*/
	#boton-editor-material:checked ~ #area-global::after {
		content: '';
		z-index: 15;
	}
/*</style>*/
/*<style>*/
	/* Área de Asistente */
	#area-asistente {
		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		position: absolute;
		grid-column: var(--el-columnas-ventana-superior, 1 / span 3);
		grid-row: var(--el-filas-ventana-superior, 2 / 6);
		width: 100%;
		top: 0; bottom: 0;
		z-index: 10;
		flex-direction: column;
	}
	#area-asistente > #boton-asistente {
		font-size: medium;
	}
	#boton-editor-asistente:checked ~ #area-global::after {
		content: '';
	}

	#area-asistente > main > ol {
		counter-reset: contador-pasos-asistente 0;
		flex-direction: column;
		gap: var(--tp-margen);
		list-style: none;
		padding: 0;

		display: grid;
		grid-template-columns: repeat(var(--el-columnas-internas-asistente, 2), 1fr);
		grid-template-rows: 1fr auto;
		height: calc(100% - (2 * var(--tp-margen)));
	}
	#area-asistente > main > ol > li {
		position: relative;
		counter-increment: contador-pasos-asistente;

		padding: var(--tp-margen);
		border-radius: var(--tp-margen);
		/* border: 1px solid var(--dtf-color-resaltado-claro, initial); */
		background-color: canvas;
		align-content: start;

		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: 1fr;
		gap: 0 var(--tp-margen);
	}
	#area-asistente > main > ol > li > * {
		grid-column: 2 / -1;
		align-content: center;
	}
	#area-asistente > main > ol > li > p {
		margin-bottom: var(--tp-margen-05);
	}
	#area-asistente > main > ol > li::before {
		content: counter(contador-pasos-asistente);
		display: inline-block;
		position: relative;
		width: calc(2 * var(--tp-margen));
		height: calc(2 * var(--tp-margen));
		font-size: 1.5rem;
		line-height: calc(2 * var(--tp-margen));
		text-align: center;
		vertical-align: middle;
		border-radius: 50%;
		background-color: var(--dtf-color-resaltado-claro, initial);
		color: var(--dtf-color-claro, initial);
	}
	#area-asistente > main > ol > li > main {
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr;
		justify-items: end;
		gap: var(--tp-margen);
	}
	#area-asistente > main > ol > li > main dt {
		padding-right: var(--tp-margen);
		text-align: right;
	}
	#area-asistente > main > ol > li > main dd {
		min-width: 5rem;
	}
	#area-asistente > main > ol > li > footer {
		display: flex;
		gap: var(--tp-margen-05);
		justify-content: center;
		margin-top: var(--tp-margen-2);
		flex-wrap: wrap;
		grid-column-start: 1;
	}
	#area-asistente #boton-organizar-asistente {
		background-color: var(--dtf-color-resaltado-claro, initial);
		color: var(--dtf-color-claro, initial);
	}
	#area-asistente > main label[for="carga-imagenes"] {
		border: 1px dashed ButtonBorder;
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen-05);
		text-align: center;

		/*
		min-height: 3rem;

		position: absolute;
		top: var(--tp-margen);
		width: 100%;
		bottom: var(--tp-margen);
		*/
	}
	#area-asistente label[for="carga-imagenes"].arrastrando {
		border-width: 2px;
		color: var(--dtf-color-resaltado-claro, initial);
	}
	#area-asistente #selector-material-asistente {
		width: 100%;
	}
	#area-asistente #selector-material-asistente > option:disabled {
		display: none;
	}
	#area-asistente #selector-material-asistente > option:disabled:first-child:last-child {
		display: initial;
	}
	#area-asistente #lista-imagenes-asistente {
		display: flex;
		gap: 0 var(--tp-margen);
		grid-column: 1 / 3;
		/*
		padding: var(--tp-margen) 0 var(--tp-margen-05) 0;
		*/
		margin-top: var(--tp-margen);
		padding: 0 0 var(--tp-margen-05) 0;
		width: 100%;

		overflow-x: scroll;
		scrollbar-width: thin;
	}
	#area-asistente #lista-imagenes-asistente:empty {
		overflow-x: hidden;
		border: 1px solid var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		min-height: calc(var(--tp-min-ancho) * 0.63);
	}
	#area-asistente #lista-imagenes-asistente:empty::before {
		content: 'NO HAY IMÁGENES CARGADAS';
		display: block;
		text-align: center;
		padding: var(--tp-margen);
		font-size: smaller;
		opacity: 0.35;
		width: 100%;
	}
	#area-asistente #lista-imagenes-asistente .imagen-base {
		flex-shrink: 0;

		display: grid;
		grid-template-areas: "a-imagen a-campo-alto" "a-imagen a-campo-ancho" "a-imagen a-extraer" "a-cantidad-total a-cantidad-total";
		grid-template-rows: auto auto 1fr auto;
		grid-template-columns: 1fr auto;

		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		padding: var(--tp-margen-05);

		width: calc(var(--tp-min-ancho) * 0.5);
		overflow: hidden;

		--el-num-columnas: 2;
		--el-ancho-columna: max(calc(var(--tp-min-ancho) * 0.73), calc((100% - (var(--tp-margen) * (var(--el-num-columnas) - 1))) / var(--el-num-columnas, 1)));
		flex-basis: max(calc(100% * (max(var(--tp-es-tamano-xs), var(--tp-es-tamano-sm), 0))), var(--el-ancho-columna));

		gap: var(--tp-margen-05);
		align-items: start;

		/*
		flex-basis: min(100%, calc((100% - (var(--tp-margen) * (var(--el-num-columnas) - 1))) / var(--el-num-columnas, 1)));
		*/
		/*
		flex-basis: min(100%, calc((100% - (var(--tp-margen) * (var(--tp-num-columnas) - 1))) / var(--tp-num-columnas, 1)));
		width: clamp(var(--tp-min-ancho), calc((100% - (var(--tp-margen) * (var(--tp-num-columnas) - 1))) / var(--tp-num-columnas, 1)), 100%);
		*/
		/* --el-num-columnas: var(--tp-num-columnas); */
		/* flex-basis: max(calc(var(--tp-min-ancho) * 0.75), calc((100% - (var(--tp-margen) * (var(--el-num-columnas) - 1))) / var(--el-num-columnas, 1))); */
		/*
		flex-basis: clamp(calc(var(--tp-min-ancho) * 0.65), calc((100% - (var(--tp-margen) * (var(--el-num-columnas) - 1))) / var(--el-num-columnas, 1)), 100%);
		*/
		/*
		flex-basis: clamp(calc(var(--tp-min-ancho) * 0.5), calc((100% - (var(--tp-margen) * (var(--el-num-columnas) - 1))) / var(--el-num-columnas, 1)), 100%);
		*/
	}
	#area-asistente #lista-imagenes-asistente .imagen-base > figure {
		/* width: calc(var(--tp-min-ancho) * 0.45); */
		height: calc(var(--tp-min-ancho) * 0.4);
		/* background-color: canvas;*/
		border-radius: var(--tp-margen-05);
		overflow: hidden;
		grid-column: 1 / span 2;
		grid-area: a-imagen;
		padding: 0;
		margin: 0;
		background-image: url('../img/fondo-pliego-oscuro.png');
	}
	#area-asistente #lista-imagenes-asistente .imagen-base > figure > img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	#area-asistente #lista-imagenes-asistente .imagen-base > .lista-campos > * {
		font-size: x-small;
	}
	#area-asistente #lista-imagenes-asistente .imagen-base > fieldset {
		border: none;
		padding: 0;
		flex-wrap: nowrap;
		grid-area: a-cantidad-total;
	}
	#area-asistente #lista-imagenes-asistente .imagen-base > fieldset.campo > input {
		margin-top: 0;
	}
	#area-asistente #lista-imagenes-asistente .imagen-base > button[name="eliminar-imagen-base"] {
		width: min-content;
		justify-self: center;
		align-self: center;
	}
/*</style>*/
/*<style>*/
	/* Área de Carga */
	#area-carga {
		grid-area: a-carga;
		display: flex;
		justify-content: center;
		align-items: start;
	}
	#area-carga label[for="carga-imagenes"] {
		background-color: ButtonFace;
		width: 100%;
		max-width: var(--tp-min-ancho);
		text-align: center;
		font-size: medium;
	}
/*</style>*/
/*<style>*/
	/* Área de Enlaces */
	#area-enlaces {
		grid-area: a-enlaces;
		background-color: var(--dtf-color-fondo-destacado, initial);
		border-radius: var(--tp-margen-05);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--tp-margen) 0;
	}

	#area-enlaces label {
		margin: 0 var(--tp-margen-05);
		border-radius: calc(var(--tp-margen) * 1.5);
		border: 1px solid ButtonBorder;
		padding: var(--tp-margen-05) var(--tp-margen);
		position: relative;
		min-height: 1.5em;
		padding-left: 3em;
		display: block;
		flex-grow: 1;
		flex-basis: calc(25%  - var(--tp-margen));
		background-color: ButtonFace;
		color: light-dark(var(--dtf-color-oscuro), var(--dtf-color-claro));
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;

		max-width: calc(clamp(8rem, 20vw, 30rem) + ((1 - max(var(--tp-es-tamano-lg), var(--tp-es-tamano-xl), 0)) * 100%));
		min-width: clamp(8rem, 20%, 30rem);
	}
	#area-enlaces label i {
		background-color: var(--dtf-color-resaltado-claro);
		padding: var(--tp-margen-025);
		font-size: 1.5em;
		position: absolute;
		border-radius: 0.75em;
		top: 0;
		left: 0;
		height: calc(1.5em - 2px);
		width: calc(1.5em - 2px);
		text-align: center;
		line-height: 1.15em;
		vertical-align: middle;
		color: var(--dtf-color-claro);
	}
/*</style>*/
/*<style>*/
	input[type="radio"][name="modo-editor"],
	input[type="radio"][name="seleccion-imagen-base"] {
		display: none;
	}

	#boton-editor-imagen:checked ~ * #area-enlaces label[for="boton-editor-imagen"],
	#seleccion-imagen-base-ninguna:not(:checked) ~ * #area-enlaces label[for="boton-editor-imagen"],
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-diseno:checked ~ * #area-enlaces label[for="boton-editor-diseno"],
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-pliego:checked ~ * #area-enlaces label[for="boton-editor-pliego"],
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-material:checked ~ * #area-enlaces label[for="boton-editor-material"] {
		background-color: var(--dtf-color-resaltado-claro);
		color: var(--dtf-color-claro);
		border-color: light-dark(ButtonBorder, var(--dtf-color-resaltado-claro));
	}
	#boton-editor-imagen:checked ~ * #area-enlaces label[for="boton-editor-imagen"] > i,
	#seleccion-imagen-base-ninguna:not(:checked) ~ * #area-enlaces label[for="boton-editor-imagen"] > i,
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-diseno:checked ~ * #area-enlaces label[for="boton-editor-diseno"] > i,
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-pliego:checked ~ * #area-enlaces label[for="boton-editor-pliego"] > i,
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-material:checked ~ * #area-enlaces label[for="boton-editor-material"] > i {
		background-color: ButtonFace;
		color: light-dark(var(--dtf-color-resaltado-claro), var(--dtf-color-claro));
	}
/*</style>*/
/*<style>*/
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-diseno:checked ~ * #lista-imagenes .imagen-base *.vista-editor-imagen:not(.vista-editor-diseno),
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-pliego:checked ~ * #lista-imagenes .imagen-base *.vista-editor-imagen:not(.vista-editor-pliego),
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-diseno:not(:checked) ~ * #lista-imagenes .imagen-base *.vista-editor-diseno:not(.vista-editor-imagen),
	#seleccion-imagen-base-ninguna:checked ~ #boton-editor-pliego:not(:checked) ~ * #lista-imagenes .imagen-base *.vista-editor-pliego:not(.vista-editor-imagen),
	#seleccion-imagen-base-ninguna:not(:checked) ~ #boton-editor-pliego ~ * #lista-imagenes .imagen-base :is(fieldset, .lista-campos, span).vista-editor-pliego:not(.vista-editor-imagen),
	#seleccion-imagen-base-ninguna:not(:checked) ~ #boton-editor-diseno ~ * #lista-imagenes .imagen-base :is(fieldset, .lista-campos, span).vista-editor-diseno:not(.vista-editor-imagen) {
		display: none;
	}
/*</style>*/
/*<style>*/
#selector-modo-color {
	display: none;
}
/*</style>*/
/*<style>*/
body {
	min-height: unset;
}
/*</style>*/
/*<style>*/
	/* Ajustes visuales versión Beta */
	label[for="boton-editor-pliego"] {
		display: none !important;
	}
/*</style>*/