/* DSU Facturación — autofacturación del cliente.
 * Estilos neutros: heredan tipografía y colores del tema (currentColor, em) y usan las clases
 * de botón del tema (.button / .wp-element-button). */

.dsu-fact {
	--dsu-fact-borde: color-mix(in srgb, currentColor 18%, transparent);
	--dsu-fact-fondo: color-mix(in srgb, currentColor 4%, transparent);
	--dsu-fact-ok: #1a7f37;
	--dsu-fact-error: #b32d2e;
	max-width: 52rem;
	margin: 0 0 2em;
}

.dsu-fact *,
.dsu-fact *::before,
.dsu-fact *::after {
	box-sizing: border-box;
}

.dsu-fact-titulo {
	margin: 1.25em 0 .5em;
	font-size: 1.2em;
}

.dsu-fact-pasos {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.5em;
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0 0 .75em;
	border-bottom: 1px solid var(--dsu-fact-borde);
	font-size: .95em;
}

.dsu-fact-pasos li {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	opacity: .55;
}

.dsu-fact-pasos li span {
	display: inline-grid;
	place-items: center;
	width: 1.8em;
	height: 1.8em;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: .85em;
}

.dsu-fact-pasos li.actual {
	opacity: 1;
	font-weight: 600;
}

.dsu-fact-pasos li.hecho {
	opacity: .8;
}


.dsu-fact-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25em;
}

.dsu-fact-campo {
	display: flex;
	flex-direction: column;
	gap: .35em;
	margin: 0 0 1em;
}

.dsu-fact-campo--ancho {
	grid-column: 1 / -1;
}

.dsu-fact-campo label {
	font-weight: 600;
}

.dsu-fact-campo input,
.dsu-fact-campo select {
	width: 100%;
	max-width: 100%;
	min-height: 2.6em;
	padding: .5em .65em;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 4px;
}

.dsu-fact-campo select option {
	color: #1e1e1e;
}

.dsu-fact-campo input:focus,
.dsu-fact-campo select:focus {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.dsu-fact-mayus {
	text-transform: uppercase;
}

.dsu-fact-ayuda {
	font-size: .875em;
	opacity: .75;
	margin: 0 0 .75em;
}

.dsu-fact-campo .dsu-fact-ayuda {
	margin: 0;
}

.dsu-fact-aviso {
	margin: 0 0 1.25em;
	padding: .75em 1em;
	border: 1px solid var(--dsu-fact-borde);
	border-left-width: 4px;
	border-radius: 4px;
	background: var(--dsu-fact-fondo);
}

.dsu-fact-aviso--error {
	border-left-color: var(--dsu-fact-error);
}

.dsu-fact-aviso--info {
	border-left-color: currentColor;
}

.dsu-fact-pedido,
.dsu-fact-rfc {
	margin: 0 0 1em;
}

.dsu-fact-tabla-envoltura {
	overflow-x: auto;
	margin: 0 0 1.25em;
}

.dsu-fact-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: .95em;
}

.dsu-fact-tabla th,
.dsu-fact-tabla td {
	padding: .6em .5em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--dsu-fact-borde);
}

.dsu-fact-tabla thead th {
	font-weight: 600;
	border-bottom-width: 2px;
}

.dsu-fact-tabla .num {
	text-align: right;
	white-space: nowrap;
}

.dsu-fact-tabla tfoot th {
	text-align: right;
	font-weight: 400;
}

.dsu-fact-tabla tfoot tr.total th,
.dsu-fact-tabla tfoot tr.total td {
	font-weight: 700;
	border-bottom: 0;
}

.dsu-fact-tabla small {
	opacity: .7;
}

.dsu-fact-datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75em 1.5em;
	margin: 0 0 1em;
}

.dsu-fact-datos div {
	margin: 0;
}

.dsu-fact-datos dt {
	font-size: .85em;
	opacity: .7;
	margin: 0;
}

.dsu-fact-datos dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.dsu-fact-uuid {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .95em;
}

.dsu-fact-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.dsu-fact-boton--chico {
	padding: .35em .9em !important;
	font-size: .9em !important;
}

.dsu-fact-boton--secundario {
	background: transparent !important;
	color: inherit !important;
	border: 1px solid currentColor !important;
}

.dsu-fact-boton[disabled] {
	opacity: .6;
	cursor: progress;
}

.dsu-fact-descargas {
	display: flex;
	flex-wrap: wrap;
	gap: .75em;
}

.dsu-fact-resultado {
	padding: 1.25em;
	border: 1px solid var(--dsu-fact-borde);
	border-top: 4px solid var(--dsu-fact-ok);
	border-radius: 4px;
	margin: 0 0 1.25em;
}

.dsu-fact-resultado .dsu-fact-titulo {
	margin-top: 0;
}

.dsu-fact-estado {
	font-size: .9em;
	opacity: .75;
}

.dsu-fact-estado--ok {
	color: var(--dsu-fact-ok);
	opacity: 1;
	font-weight: 600;
}

.dsu-fact-enlace {
	white-space: nowrap;
}

@media (max-width: 600px) {
	.dsu-fact-campos,
	.dsu-fact-datos {
		grid-template-columns: 1fr;
	}

	.dsu-fact-tabla,
	.dsu-fact-tabla tbody,
	.dsu-fact-tabla tfoot {
		display: block;
		width: 100%;
	}

	.dsu-fact-tabla thead {
		display: none;
	}

	.dsu-fact-tabla tbody tr {
		display: block;
		padding: .5em 0;
		border-bottom: 1px solid var(--dsu-fact-borde);
	}

	.dsu-fact-tabla tbody td {
		display: flex;
		justify-content: space-between;
		gap: 1em;
		padding: .2em 0;
		border: 0;
		text-align: right;
	}

	.dsu-fact-tabla tbody td::before {
		content: attr(data-titulo);
		font-weight: 600;
		text-align: left;
	}

	/* Primera celda (concepto o pedido): encabezado del renglón, sin etiqueta. */
	.dsu-fact-tabla tbody td:first-child {
		display: block;
		text-align: left;
		font-weight: 600;
	}

	.dsu-fact-tabla tbody td:first-child::before {
		content: none;
	}

	.dsu-fact-tabla tbody td:first-child small {
		display: block;
		font-weight: 400;
	}

	.dsu-fact-tabla tfoot tr {
		display: flex;
		justify-content: space-between;
		gap: 1em;
		border-bottom: 1px solid var(--dsu-fact-borde);
	}

	.dsu-fact-tabla tfoot th,
	.dsu-fact-tabla tfoot td {
		display: block;
		padding: .45em 0;
		border: 0;
		text-align: left;
	}

	.dsu-fact-tabla tfoot td {
		text-align: right;
	}

	.dsu-fact-acciones {
		flex-direction: column-reverse;
		align-items: stretch;
		text-align: center;
	}
}