/**
 * Selector del producto «DTF por metros».
 *
 * Colores neutros que heredan del tema: esto vive dentro de la ficha de un
 * producto de WooCommerce, no debe pelearse con ella.
 */

.masdtf-meters {
	--mm-line: #dfe3ea;
	--mm-ink: #101828;
	--mm-muted: #667085;
	--mm-ok: #2563eb;
	--mm-okbg: #eff4ff;
	--mm-error: #b91c1c;
	/* Acento de marca para los avisos (hora límite y «¿No sabes cuál elegir?»). */
	--mm-brand: #e11d74;
	--mm-brandbg: #fdf2f8;
	--mm-brandline: #fbcfe8;

	display: grid;
	gap: 12px;
	max-width: 560px;
	color: var(--mm-ink);
}

.masdtf-meters,
.masdtf-meters * {
	box-sizing: border-box;
	font-family: inherit;
}

/* El display de las reglas de abajo pisa al atributo hidden del navegador:
   sin esto, los paneles ocultos se veían todos a la vez. */
.masdtf-meters [hidden],
.masdtf-meters__send[hidden] {
	display: none !important;
}

.masdtf-meters__title {
	margin: 0;
	font-size: 1.15rem;
	text-align: center;
}

.masdtf-meters__options {
	display: grid;
	gap: 10px;
}

.masdtf-meters__option {
	display: grid;
	gap: 2px;
	text-align: left;
	border: 2px solid var(--mm-line);
	border-radius: 10px;
	background: #fff;
	padding: 13px 15px;
	cursor: pointer;
	color: var(--mm-ink);
}

.masdtf-meters__option span {
	font-size: .85rem;
	color: var(--mm-muted);
}

.masdtf-meters__option.is-on {
	border-color: var(--mm-ok);
	background: var(--mm-okbg);
}

.masdtf-meters .masdtf-button {
	display: inline-block;
	border: 1px solid var(--mm-line);
	border-radius: 8px;
	background: #fff;
	color: var(--mm-ink);
	padding: 11px 16px;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.masdtf-meters .masdtf-button--primary {
	background: var(--mm-ok);
	border-color: var(--mm-ok);
	color: #fff;
	width: 100%;
}

.masdtf-meters .masdtf-button:disabled {
	opacity: .55;
	cursor: default;
}

.masdtf-meters__send {
	border: 1px solid var(--mm-line);
	border-radius: 10px;
	padding: 16px;
	display: grid;
	gap: 10px;
}

.masdtf-meters__send h4 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
}

.masdtf-meters__badge {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mm-ink);
	color: #fff;
	font-size: .8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.masdtf-meters__sub {
	margin: 0;
	font-size: .85rem;
	color: var(--mm-muted);
}

.masdtf-meters__tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.masdtf-meters__tabs button {
	border: 1px solid var(--mm-line);
	border-radius: 8px;
	background: #fff;
	padding: 9px 6px;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--mm-ink);
}

.masdtf-meters__tabs button.is-on {
	border-color: var(--mm-ok);
	color: var(--mm-ok);
	background: var(--mm-okbg);
}

.masdtf-meters__pane {
	display: grid;
	gap: 10px;
}

.masdtf-meters__drop {
	display: grid;
	gap: 6px;
	text-align: center;
	border: 2px dashed var(--mm-line);
	border-radius: 10px;
	padding: 22px 14px;
	cursor: pointer;
}

.masdtf-meters__drop.is-over {
	border-color: var(--mm-ok);
	background: var(--mm-okbg);
}

.masdtf-meters__drop input {
	display: none;
}

.masdtf-meters__drop span {
	font-size: .78rem;
	color: var(--mm-muted);
}

.masdtf-meters__tip {
	margin: 0;
	font-size: .8rem;
	color: var(--mm-muted);
}

.masdtf-meters__tip strong {
	color: var(--mm-ink);
	white-space: nowrap;
}

.masdtf-meters__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
	font-size: .85rem;
}

.masdtf-meters__list:empty {
	display: none;
}

.masdtf-meters__item--ok { color: var(--mm-ok); }
.masdtf-meters__item--error { color: var(--mm-error); }
.masdtf-meters__item--busy { color: var(--mm-muted); }

.masdtf-meters__note {
	margin: 0;
	font-size: .8rem;
	color: var(--mm-muted);
}

.masdtf-meters__note.is-ok { color: var(--mm-ok); }
.masdtf-meters__note.is-error { color: var(--mm-error); }

.masdtf-meters__hint {
	font-size: .8rem;
	color: var(--mm-muted);
}

.masdtf-meters__linklabel {
	display: grid;
	gap: 4px;
	font-size: .85rem;
}

.masdtf-meters__linklabel input {
	border: 1px solid var(--mm-line);
	border-radius: 8px;
	padding: 10px 12px;
	min-width: 0;
	width: 100%;
}

/* ------------------------------------------- Archivos adjuntos (paso 2) -- */

.masdtf-meters__attached {
	border-top: 1px solid var(--mm-line);
	padding-top: 12px;
	display: grid;
	gap: 10px;
}

.masdtf-meters__files {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.masdtf-meters__file {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	border: 1px solid var(--mm-line);
	border-radius: 9px;
	padding: 8px 10px;
}

.masdtf-meters__thumb {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	background: repeating-conic-gradient(#eef0f4 0% 25%, #fff 0% 50%) 50% / 10px 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-size: .7rem;
	font-weight: 700;
	color: var(--mm-muted);
}

.masdtf-meters__thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.masdtf-meters__fileinfo {
	display: grid;
	gap: 2px;
	font-size: .84rem;
	min-width: 0;
}

.masdtf-meters__filename {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.masdtf-meters__fileinfo > span {
	color: var(--mm-muted);
}

.masdtf-meters__qline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .78rem;
}

.masdtf-meters__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}

.masdtf-meters__remove {
	border: 1px solid var(--mm-line);
	border-radius: 50%;
	background: #fff;
	width: 28px;
	height: 28px;
	line-height: 1;
	font-size: 1rem;
	cursor: pointer;
	color: var(--mm-muted);
}

.masdtf-meters__remove:hover {
	color: var(--mm-error);
	border-color: var(--mm-error);
}

.masdtf-meters__totals {
	display: grid;
	gap: 4px;
	border-top: 2px solid var(--mm-ink);
	padding-top: 8px;
	font-size: .9rem;
}

.masdtf-meters__totalrow {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.masdtf-meters__totalrow strong {
	text-align: right;
}

.masdtf-meters__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.masdtf-meters__actions .masdtf-button {
	width: 100%;
}

/* ------------------------------ Ventana «Archivo cargado correctamente» -- */

.masdtf-meters__veil {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(15, 23, 42, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow: auto;
}

.masdtf-meters__confirm {
	background: #fff;
	border-radius: 12px;
	padding: 22px;
	width: min(420px, 100%);
	max-height: calc(100vh - 32px);
	overflow: auto;
	text-align: center;
	box-shadow: 0 20px 60px rgba(16, 24, 40, .3);
	display: grid;
	gap: 8px;
	color: #101828;
	font-family: inherit;
}

.masdtf-meters__confirm--file {
	width: min(640px, 100%);
	text-align: left;
}

.masdtf-meters__confirm--file h4,
.masdtf-meters__confirm--file > p:first-of-type {
	text-align: center;
}

.masdtf-meters__confirm h4 {
	margin: 0;
	font-size: 1.05rem;
}

.masdtf-meters__confirm p {
	margin: 0;
	font-size: .9rem;
}

.masdtf-meters__fname {
	word-break: break-all;
}

.masdtf-meters__confirmbody {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin-top: 6px;
}

.masdtf-meters__preview {
	min-height: 200px;
	max-height: 320px;
	border-radius: 8px;
	background: repeating-conic-gradient(#eef0f4 0% 25%, #fff 0% 50%) 50% / 12px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #667085;
	font-weight: 700;
}

.masdtf-meters__preview img {
	max-width: 100%;
	max-height: 320px;
	object-fit: contain;
	display: block;
}

.masdtf-meters__form {
	display: grid;
	gap: 8px;
}

.masdtf-meters__qual {
	display: flex;
	align-items: center;
	gap: 6px;
}

.masdtf-meters__legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
	font-size: .76rem;
	color: #667085;
}

.masdtf-meters__legend li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.masdtf-meters__size {
	font-size: .84rem !important;
	color: #667085;
}

.masdtf-meters__field {
	display: grid;
	gap: 4px;
	font-size: .85rem;
	font-weight: 600;
}

.masdtf-meters__unit {
	display: flex;
	align-items: center;
	gap: 8px;
}

.masdtf-meters__unit input,
.masdtf-meters__field--copies input {
	border: 1px solid #dfe3ea;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 1.1rem;
	font-weight: 700;
	width: 140px;
	max-width: 100%;
	min-width: 0;
	font-family: inherit;
	color: #101828;
	background: #fff;
}

.masdtf-meters__unit b {
	font-size: 1rem;
}

.masdtf-meters__use {
	border: 0;
	background: none;
	padding: 0;
	color: #2563eb;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

.masdtf-meters__err {
	color: #b91c1c;
	font-weight: 600;
}

.masdtf-meters__confirm .masdtf-meters__tip {
	border-top: 1px solid #dfe3ea;
	padding-top: 8px;
	margin-top: 4px;
}

.masdtf-meters__confirmrow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 8px;
}

/* La ventana cuelga de <body>, fuera de .masdtf-meters: sus botones llevan
   estilo propio o saldrían con el del navegador. */
.masdtf-meters__confirm .masdtf-button {
	display: inline-block;
	border: 1px solid #dfe3ea;
	border-radius: 8px;
	background: #fff;
	color: #101828;
	padding: 11px 10px;
	font-size: .9rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
}

.masdtf-meters__confirm .masdtf-button--primary {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

.masdtf-meters__confirm .masdtf-button:disabled {
	opacity: .55;
	cursor: default;
}

@media (max-width: 600px) {
	.masdtf-meters__confirmbody {
		grid-template-columns: 1fr;
	}

	.masdtf-meters__preview {
		min-height: 140px;
		max-height: 200px;
	}

	.masdtf-meters__actions {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------ Hora límite y «¿No sabes cuál elegir?» -- */

.masdtf-meters__cutoff {
	display: flex;
	gap: 12px;
	align-items: center;
	border: 1px solid var(--mm-brandline);
	border-radius: 10px;
	background: var(--mm-brandbg);
	padding: 12px 14px;
}

.masdtf-meters__clock {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--mm-brand);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.masdtf-meters__clock svg {
	width: 22px;
	height: 22px;
}

.masdtf-meters__cutoff strong {
	display: block;
	font-size: .95rem;
}

.masdtf-meters__cutoff div > span {
	display: block;
	font-size: .82rem;
	color: var(--mm-muted);
}

.masdtf-meters__help {
	border: 1px solid var(--mm-brandline);
	border-radius: 10px;
	background: var(--mm-brandbg);
	padding: 12px 14px;
	display: grid;
	gap: 6px;
}

.masdtf-meters__help h4 {
	margin: 0;
	font-size: .95rem;
	display: flex;
	align-items: center;
	gap: 8px;
}

.masdtf-meters__info {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mm-brand);
	color: #fff;
	font: italic 700 .75rem/1 Georgia, "Times New Roman", serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.masdtf-meters__help p {
	margin: 0;
	font-size: .84rem;
	color: var(--mm-muted);
}

.masdtf-meters__help p strong {
	color: var(--mm-ink);
}

/* ------------------------------------------ Aviso de verificación de metros -- */

/* Fuera del ámbito de .masdtf-meters a propósito: también sale en la ventana
   de confirmación, que cuelga de <body>. */
.masdtf-meters__warn {
	margin: 0;
	font-size: .82rem;
	line-height: 1.4;
	color: #9a3412;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 8px;
	padding: 8px 10px;
}

/* ------------------------------- Metros en total sin archivo (SMASH / después) -- */

.masdtf-meters__pending {
	display: grid;
	gap: 8px;
	border-top: 1px solid var(--mm-line);
	padding-top: 12px;
}

.masdtf-meters__pending .masdtf-meters__hint:empty {
	display: none;
}

.masdtf-meters__pane .masdtf-meters__sub a {
	color: var(--mm-ok);
}

/* ---------------------------- Cambiar copias o metros desde la lista -- */

.masdtf-meters__thumbbtn,
.masdtf-meters__namebtn {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.masdtf-meters__thumbbtn {
	line-height: 0;
	border-radius: 6px;
}

.masdtf-meters__thumbbtn:hover .masdtf-meters__thumb,
.masdtf-meters__thumbbtn:focus-visible .masdtf-meters__thumb {
	outline: 2px solid var(--mm-ok);
	outline-offset: 2px;
}

.masdtf-meters__namebtn {
	font-weight: 700;
	max-width: 100%;
}

.masdtf-meters__namebtn:hover,
.masdtf-meters__namebtn:focus-visible {
	color: var(--mm-ok);
	text-decoration: underline;
}

.masdtf-meters__fileinfo .masdtf-meters__use {
	justify-self: start;
	font-size: .78rem;
}

/* Enlace «Más información» del aviso del mismo día. */
.masdtf-meters__more {
	display: inline-block;
	margin-top: 4px;
	font-size: .8rem;
	font-weight: 600;
	color: var(--mm-brand);
}

/* ------------------------------------------------- Vista «envío» (0.18.4) -- */

/* [masdtf_metros vista="envio"]: solo el panel de envío, dentro de una página
   que ya ha hecho la pregunta por su cuenta (el pedido rápido). Sin borde
   propio ni numeración de pasos: los pone la página que lo aloja. */
.masdtf-meters--envio {
	max-width: none;
}

.masdtf-meters--envio .masdtf-meters__send {
	border: 0;
	border-radius: 0;
	padding: 0;
}

.masdtf-meters--envio .masdtf-meters__badge {
	display: none;
}

/* ------------------------------------ Metros deducidos del archivo (0.18.5) -- */

.masdtf-meters__detected {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--mm-line, #dfe3ea);
	border-radius: 10px;
	background: var(--mm-okbg, #eff4ff);
	font-size: .9rem;
}

.masdtf-meters__detected strong {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--mm-ok, #2563eb);
	font-variant-numeric: tabular-nums;
}

.masdtf-meters__confirm .masdtf-meters__fix {
	width: 100%;
	font-weight: 600;
}

/* La ventana cuelga de <body>: el atributo hidden tiene que ganar también aquí
   (el display de .masdtf-meters__field lo pisaba y el campo de metros salía
   aunque estuviera oculto). */
.masdtf-meters__confirm [hidden] {
	display: none !important;
}