/* partial-Datos.html's styles, on the console's tokens (app.css). No inline style anywhere: CSP.
   The legacy sheet was written against front-conciliar's shadcn-style `hsl(var(--border))`
   variables, which this stack does not have; every rule below is the same layout expressed in
   app.css's --bg/--card/--ink/--muted/--line/--accent/--ok/--bad. */
/* Ancho completo, como la BD de precios: la tabla tiene hasta 8 columnas y a 1240px sobraba
   pantalla a los lados mientras `Nombre` y `Señales` se partían en tres renglones. */
#dt-pane { max-width: none; width: 100%; padding-inline: 1.25rem; }
#dt-pane .dt-sub { color: var(--muted); margin: 0 0 14px; }
/* El título de la pantalla, del mismo tamaño que el de Cuentas Bancarias (.ed-pagina). */
.dt-pagina { font-size: var(--fs-2xl); margin: 0 0 .2rem; }

/* Selector de fuente: las mismas pestañas que Cuentas Bancarias (.ed-tabs / .ed-tab en edc.css) —
   pista con borde y la activa en verde. Se parten en renglones si la ventana es angosta. */
.dt-srcs { display: flex; flex-wrap: wrap; gap: .15rem; width: fit-content; max-width: 100%; padding: .2rem; margin-bottom: 12px;
  background: var(--card); border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); }
.dt-src { display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: 1px solid transparent;
  color: var(--muted); border-radius: var(--radius-sm); padding: .35rem 1rem; font-size: var(--fs-md); font-weight: 500; }
.dt-src.active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.dt-src.active:hover { background: hsl(var(--primary) / .88); }

.dt-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.dt-search { flex: 1; min-width: 200px; }

/* Estado chips double as the estado filter AND the per-estado counts, so the operator sees the
   shape of the whole (filtered) set without a round trip per chip. */
.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dt-chips[hidden] { display: none; }
/* Estilo shadcn (Toggle outline): 32px, radio de 6px, borde fino, fondo transparente; el hover
   sólo tiñe (accent) y el activo se rellena. El conteo va en una insignia mono aparte. */
.dt-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: var(--fs-base); font-weight: 500;
  border-radius: var(--radius-sm); border: 1px solid hsl(var(--dt-line-strong)); background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px hsl(var(--dt-shadow) / .05); transition: background-color .12s, color .12s, border-color .12s; }
.dt-chip:hover { background: hsl(var(--foreground) / .06); }
.dt-chip .dt-chip-ico { flex: none; color: var(--muted); }
.dt-chip .dt-n { min-width: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: hsl(var(--foreground) / .07);
  font-size: var(--fs-xs); font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; opacity: 1; }
.dt-chip.active { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none; }
.dt-chip.active:hover { background: hsl(var(--foreground) / .88); }
.dt-chip.active .dt-chip-ico { color: inherit; }
.dt-chip.active .dt-n { background: hsl(var(--background) / .2); }
.dt-chip.empty { opacity: .45; }
/* Flag chips: a second, independent filter row. Activos en verde de marca (tinte + borde) en vez de
   rellenos, para que nunca se lean como "otro estado" — los dos ejes se apilan, no se reemplazan. */
.dt-flags { margin-top: -4px; }
.dt-flagchip.active { background: hsl(var(--primary) / .12); border-color: hsl(var(--primary) / .5); color: var(--accent); }
.dt-flagchip.active:hover { background: hsl(var(--primary) / .18); }
.dt-flagchip.active .dt-n { background: hsl(var(--primary) / .18); }

/* Franja al borde del renglón: se ve la situación al recorrer la tabla, sin leer la etiqueta. */
.dt-tbl tbody tr.dt-est-conciliado > td, .dt-tbl tbody tr.dt-est-asignado > td, .dt-tbl tbody tr.dt-est-compensado > td { background: color-mix(in srgb, var(--ok) 9%, transparent); }
.dt-tbl tbody tr.dt-est-conciliado.dt-con-dif > td { background: hsl(var(--parcial) / .09); }
.dt-tbl tbody tr.dt-est-parcial > td { background: hsl(var(--parcial) / .09); }
.dt-tbl tbody tr.dt-est-conciliado > td:first-child, .dt-tbl tbody tr.dt-est-asignado > td:first-child, .dt-tbl tbody tr.dt-est-compensado > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.dt-tbl tbody tr.dt-est-conciliado.dt-con-dif > td:first-child { box-shadow: inset 3px 0 0 hsl(var(--parcial)); }
.dt-tbl tbody tr.dt-est-parcial > td:first-child { box-shadow: inset 3px 0 0 hsl(var(--parcial)); }
/* Recuadro del bloque «Conciliación» de la hoja lateral, con el mismo código de color. */
.dt-callout { padding: 10px 12px; border-radius: var(--radius); border: 1px solid; border-left-width: 4px; }
.dt-callout.ok { border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .09); }
.dt-callout.parcial { border-color: hsl(var(--parcial) / .6); background: hsl(var(--parcial) / .12); }
/* Document-kind chip inside a link list. Muted on purpose: it labels the line, it is not a
   second estado. The complemento de pago gets its own colour because it is the one whose
   amount must NOT be read as extra money. */
.dt-kind { display: inline-block; padding: 0 6px; font-size: var(--fs-xs); line-height: 17px; border-radius: var(--radius-pill);
  border: 1px solid hsl(var(--dt-line)); background: var(--bg); color: var(--muted); vertical-align: 1px; }
.dt-kind.pago { border-color: var(--accent); color: var(--accent); }
.dt-linksfoot { margin-top: 4px; }

.dt-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-base); table-layout: fixed; }
.dt-tbl th { text-align: left; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid hsl(var(--dt-line)); }
.dt-tbl td { padding: 8px 10px; border-bottom: 1px solid hsl(var(--dt-line)); vertical-align: middle; }
/* app.css pone `td { white-space: nowrap }`, y con eso `overflow-wrap` no hace nada: un serie-folio o
   un nombre largo se salía de su celda y se encimaba con la columna de al lado. Las celdas parten
   renglón; sólo lo que es un dato corto e indivisible (fecha, RFC, monto, estado) lo evita. */
.dt-tbl td { white-space: normal; }
.dt-tbl td.dt-nw { white-space: nowrap; }
/* Piso de ancho: por debajo de esto los porcentajes ya no alcanzan para una fecha o un monto, así que
   la tabla deja de encogerse y `.scroll` (el contenedor) pone el scroll horizontal en vez de encimar. */
.dt-tbl { min-width: 1000px; }
.dt-tbl tbody tr[data-id] { cursor: pointer; }
/* Hover: velo tenue del color del texto encima del fondo del renglón (background-image), así se nota
   en renglones blancos y también conserva el tinte verde/ámbar de los estados. */
.dt-tbl tbody tr[data-id]:hover > td { background-image: linear-gradient(hsl(var(--foreground) / .05), hsl(var(--foreground) / .05)); }
/* Reparto fijo del ancho: todas las columnas caben en la pantalla, sin scroll horizontal. Los
   porcentajes son por fuente porque el número de columnas cambia (8 en los CFDI, 7 en estado de
   cuenta y terminal). El texto largo parte renglón dentro de su celda; `.scroll` sigue ahí como
   red por si la ventana es muy angosta.
   Señales y Estado son columnas distintas a propósito: una dice en qué punto está el renglón y
   la otra qué queda por hacer; envuelven cada una por su lado. */
.dt-tbl th, .dt-tbl td { overflow-wrap: anywhere; }
.dt-tbl[data-src="cfdi"] th:nth-child(1), .dt-tbl[data-src="cfdi"] td:nth-child(1) { width: 8%; }
.dt-tbl[data-src="cfdi"] th:nth-child(2), .dt-tbl[data-src="cfdi"] td:nth-child(2) { width: 10%; }
.dt-tbl[data-src="cfdi"] th:nth-child(3), .dt-tbl[data-src="cfdi"] td:nth-child(3) { width: 9%; }
.dt-tbl[data-src="cfdi"] th:nth-child(4), .dt-tbl[data-src="cfdi"] td:nth-child(4) { width: 8%; }
.dt-tbl[data-src="cfdi"] th:nth-child(5), .dt-tbl[data-src="cfdi"] td:nth-child(5) { width: 9%; }
.dt-tbl[data-src="cfdi"] th:nth-child(6), .dt-tbl[data-src="cfdi"] td:nth-child(6) { width: 11%; }
.dt-tbl[data-src="cfdi"] th:nth-child(7), .dt-tbl[data-src="cfdi"] td:nth-child(7) { width: 35%; }
.dt-tbl[data-src="cfdi"] th:nth-child(8), .dt-tbl[data-src="cfdi"] td:nth-child(8) { width: 10%; }
.dt-tbl[data-src="edc"] th:nth-child(1), .dt-tbl[data-src="edc"] td:nth-child(1) { width: 8%; }
.dt-tbl[data-src="edc"] th:nth-child(2), .dt-tbl[data-src="edc"] td:nth-child(2) { width: 11%; }
.dt-tbl[data-src="edc"] th:nth-child(3), .dt-tbl[data-src="edc"] td:nth-child(3) { width: 8%; }
.dt-tbl[data-src="edc"] th:nth-child(4), .dt-tbl[data-src="edc"] td:nth-child(4) { width: 9%; }
.dt-tbl[data-src="edc"] th:nth-child(5), .dt-tbl[data-src="edc"] td:nth-child(5) { width: 9%; }
.dt-tbl[data-src="edc"] th:nth-child(6), .dt-tbl[data-src="edc"] td:nth-child(6) { width: 43%; }
.dt-tbl[data-src="edc"] th:nth-child(7), .dt-tbl[data-src="edc"] td:nth-child(7) { width: 12%; }
.dt-tbl[data-src="terminal"] th:nth-child(1), .dt-tbl[data-src="terminal"] td:nth-child(1) { width: 8%; }
.dt-tbl[data-src="terminal"] th:nth-child(2), .dt-tbl[data-src="terminal"] td:nth-child(2) { width: 11%; }
.dt-tbl[data-src="terminal"] th:nth-child(3), .dt-tbl[data-src="terminal"] td:nth-child(3) { width: 8%; }
.dt-tbl[data-src="terminal"] th:nth-child(4), .dt-tbl[data-src="terminal"] td:nth-child(4) { width: 9%; }
.dt-tbl[data-src="terminal"] th:nth-child(5), .dt-tbl[data-src="terminal"] td:nth-child(5) { width: 10%; }
.dt-tbl[data-src="terminal"] th:nth-child(6), .dt-tbl[data-src="terminal"] td:nth-child(6) { width: 42%; }
.dt-tbl[data-src="terminal"] th:nth-child(7), .dt-tbl[data-src="terminal"] td:nth-child(7) { width: 12%; }
/* `.dt-tbl th { text-align: left }` gana en especificidad: sin esto el encabezado de Total/Monto/Importe
   queda a la izquierda mientras sus cifras van a la derecha. */
.dt-tbl th.dt-num { text-align: right; }

/* El modal de Conciliar / Asignar / Editar: mismo esqueleto que la hoja del detalle (cabecera con
   filete, cuerpo sobre el fondo de la página), centrado y ancho para que las tarjetas respiren. */
.dt-modal { width: min(1080px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); margin: auto; padding: 0;
  border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); background: var(--card); color: var(--ink);
  overflow: hidden; box-shadow: 0 24px 60px -12px hsl(var(--dt-shadow) / calc(var(--dt-shadow-a) * 2)); }
.dt-modal[open] { display: flex; flex-direction: column; }
.dt-modal::backdrop { background: rgb(0 0 0 / .4); }
.dt-modal-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid hsl(var(--dt-line)); }
.dt-modal-head h2 { margin: 0; flex: 1; font-size: var(--fs-lg); font-weight: 600; }
button.dt-modal-x { flex: none; padding: .25rem .5rem; border-color: transparent; color: var(--muted); display: inline-flex; }
button.dt-modal-x:hover { background: hsl(var(--foreground) / .06); color: var(--ink); }
.dt-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 24px; background: var(--bg); }

/* Detalle de un renglón: hoja lateral (shadcn Sheet, lado derecho) sobre un <dialog> modal. */
.dt-det { font-size: var(--fs-sm); }
/* Cuál renglón abriste: queda marcado en la tabla mientras la hoja está abierta. */
.dt-tbl tbody tr.dt-open > td { background: var(--bg); font-weight: 500; }
.dt-tbl tbody tr.dt-open > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.dt-sheet { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(560px, 100vw); max-width: 100vw;
  height: 100dvh; max-height: none; border: 0; border-left: 1px solid hsl(var(--dt-line)); border-radius: 0;
  background: var(--card); color: var(--ink); flex-direction: column;
  box-shadow: -24px 0 60px -12px hsl(var(--dt-shadow) / calc(var(--dt-shadow-a) * 2)); }
.dt-sheet[open] { display: flex; animation: dt-sheet-in .22s cubic-bezier(.32, .72, 0, 1); }
.dt-sheet::backdrop { background: rgb(0 0 0 / .4); }
@keyframes dt-sheet-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .dt-sheet[open] { animation: none; } }
.dt-sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid hsl(var(--dt-line)); flex: none; }
.dt-sheet-who { min-width: 0; flex: 1; }
.dt-sheet-head h2 { margin: 0 0 6px; font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.dt-sheet-sub { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
button.dt-sheet-x { flex: none; padding: .25rem .5rem; border-color: transparent; color: var(--muted); }
button.dt-sheet-x:hover { background: hsl(var(--foreground) / .06); color: var(--ink); }
.dt-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 24px; background: var(--bg); }
.dt-sheet-body [hidden] { display: none; }
/* Acciones (Conciliar / Cancelar / Editar): fijas al pie de la hoja, alineadas a la derecha. */
.dt-sheet-msg { flex: none; margin: 0; padding: 10px 20px; border-top: 1px solid var(--bad); background: var(--card); color: var(--bad); font-size: var(--fs-base); line-height: 1.45; }
.dt-sheet-msg[hidden] { display: none; }
.dt-sheet-foot { flex: none; padding: 12px 20px; border-top: 1px solid hsl(var(--dt-line)); background: var(--card); }
.dt-sheet-foot[hidden] { display: none; }
.dt-sheet-foot .dt-acts { margin-top: 0; justify-content: flex-end; }
.dt-det-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* app.css deja los td en `white-space: nowrap`; el detalle lleva sus propias tablas (conceptos), así
   que se devuelve el salto de línea. `min-width: 0` es la otra mitad: sin él la columna del grid se
   mide por su contenido más largo. */
.dt-det, .dt-det-grid > * { white-space: normal; }
.dt-det-grid > * { min-width: 0; overflow-wrap: anywhere; }
.dt-det h4 { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); }
.dt-card { padding: 10px 12px; border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); background: var(--card); }
.dt-card > * + .dt-muted { margin-top: 4px; }
.dt-acts-end { justify-content: flex-end; }
.dt-kv-wrap { padding: 4px 12px; border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); background: var(--card); }
.dt-kv { display: grid; grid-template-columns: max-content 1fr; gap: 0 16px; margin: 0; }
.dt-kv dt, .dt-kv dd { margin: 0; padding: 6px 0; border-bottom: 1px solid hsl(var(--dt-line)); }
.dt-kv dt:nth-last-of-type(1), .dt-kv dd:last-of-type { border-bottom: 0; }
.dt-kv dt { color: var(--muted); }
.dt-kv dd { overflow-wrap: anywhere; }
.dt-det ul { margin: 0; padding-left: 16px; }
.dt-det li { margin: 1px 0; }
.dt-acts-com .dt-why { flex: 1; min-width: 0; }
.dt-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.dt-why { font-size: var(--fs-xs); color: var(--muted); }
.dt-why.error { color: var(--bad); }

/* El reparto por dimensión, editable dentro del detalle: una tarjeta por partida, cada select con su
   etiqueta encima — la hoja mide 560px, una tabla de monto + N dimensiones no cabe. */
.dt-dimed { display: grid; gap: 8px; margin-top: 8px; }
/* Grid, no flex: cada columna es un campo (Monto a su ancho fijo, una `1fr` por dimensión, y —con
   más de una partida— el bote de basura), con su cuenta puesta en línea por `pintarDimEd` — así el
   renglón usa TODO el ancho de la hoja en vez de encimarse a la izquierda con hueco a la derecha. */
.dt-dimed-row { display: grid; gap: 8px; align-items: end; padding: 8px 10px;
  border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); background: var(--card); }
.dt-dimed-row label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--fs-xs); color: var(--muted); min-width: 0; }
.dt-dimed-row input, .dt-dimed-row select { font-size: var(--fs-sm); width: 100%; max-width: 100%; }
.dt-dimed-row input { text-align: right; font-variant-numeric: tabular-nums; }
.dt-dimed-row input[readonly] { background: var(--bg); }
/* Quitar esta partida: sólo el ícono, sin botón alrededor (como .dt-copy) y siempre en rojo —
   `background`/`border` en 'none'/0 pisan el relleno y el borde que trae `button` por defecto. */
.dt-dim-quitar, .dt-dim-quitar:hover, .dt-dim-quitar:focus-visible {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--bad); }
.dt-dim-quitar svg { display: block; }
/* Dividir se queda a la izquierda de `.dt-acts`; Cancelar se empuja con margin-left: auto y se
   lleva a Guardar (el siguiente en el flex) con él, los dos a la derecha, Cancelar primero. */
.dt-dim-cancelar { margin-left: auto; }
.dt-com { width: 100%; box-sizing: border-box; }

/* The uuid card on top of the detail: the whole uuid (it left the table), a copy button, and
   the CFDI's conceptos on demand. */
.dt-idcard { margin-bottom: 10px; padding: 8px 10px; border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); background: var(--card); }
.dt-idcard-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dt-uuid { font-family: var(--font-mono); font-size: var(--fs-xs); word-break: break-all; }
button.dt-copy { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
  border: 0; background: none; box-shadow: none; color: var(--muted); }
button.dt-copy:hover { background: none; color: var(--ink); }
.dt-copy svg { display: block; }
.dt-cc { margin-top: 8px; }
.dt-cc[hidden] { display: none; }
.dt-cc table { font-size: var(--fs-xs); table-layout: fixed; width: 100%; }
.dt-cc th, .dt-cc td { padding-left: 6px; padding-right: 6px; }
.dt-cc th { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dt-cc td { vertical-align: top; }
/* app.css alinea todo `th` a la izquierda: encabezado y valor de las columnas numéricas comparten
   la alineación derecha, y las columnas tienen ancho propio. */
.dt-cc th.dt-num, .dt-cc td.dt-num { text-align: right; }
.dt-cc th:nth-child(1) { width: 16%; }
.dt-cc th:nth-child(3) { width: 9%; }
.dt-cc th:nth-child(4), .dt-cc th:nth-child(5) { width: 24%; }
.dt-cc td:nth-child(2) { white-space: normal; }

.dt-tbl-wrap[aria-busy="true"] { opacity: .55; }
.dt-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }

/* El motivo de la cancelación se pide DENTRO del diálogo: era un window.prompt encadenado
   detrás, que en el móvil salía como una alerta del navegador sin relación visible con lo que
   se estaba cancelando. */
#dt-cancel textarea { width: 100%; box-sizing: border-box; }
#dt-cancel .dt-uuid { display: block; margin: 6px 0; }
#dt-cancel .dt-cancel-acts { justify-content: flex-end; }

/* Verificar vigencia en el SAT: un botón arriba que abre un modal. */
.dt-top { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.dt-top .dt-sub { margin: 0; flex: 1 1 32rem; }
.dt-top button { flex: none; }
.dt-top-acts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.dt-btn-ico { display: inline-flex; align-items: center; gap: .35rem; }
.dt-btn-ico svg { flex: none; }
#dt-vig { width: min(900px, calc(100vw - 2rem)); }
.dt-vig-desc { color: var(--muted); font-size: var(--fs-md); margin: 0 0 .8rem; max-width: 80ch; }
.dt-vig-body { display: grid; gap: .6rem; }
.dt-linea { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dt-linea > label { flex-direction: row; align-items: center; margin: 0; color: var(--muted); font-size: var(--fs-md); }
.dt-linea > input { flex: 1 1 22rem; min-width: 0; font-variant-numeric: tabular-nums; }
.dt-vig-out { max-height: 24rem; overflow: auto; }
.dt-vig-out td { white-space: normal; }
.dt-vig-out code { font-size: .8em; }
.dt-prog { display: flex; gap: .6rem; align-items: center; font-size: var(--fs-md); color: var(--muted); }
.dt-alert:empty { display: none; }
.dt-alert { border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius-sm); padding: .5rem .7rem; font-size: var(--fs-md); white-space: pre-line; background: var(--bg); }
.dt-alert.ok { border-color: var(--ok); color: var(--ok); }
.dt-alert.error { border-color: var(--bad); color: var(--bad); }
#dt-vig-conf { width: min(420px, calc(100vw - 2rem)); }

/* Botones de acción con icono lucide: icono + texto alineados, el icono hereda el color del texto. */
.dt-act, .dt-dim-edit { display: inline-flex; align-items: center; gap: 6px; }
.dt-act-ico { flex: none; }

/* El botón de una acción mientras carga (Conciliar espera al matcher antes de abrir su modal). */
.dt-act:disabled { opacity: .75; cursor: progress; }
.dt-act .dt-spin { animation: dt-spin .8s linear infinite; vertical-align: -3px; margin-right: 2px; }
@keyframes dt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dt-act .dt-spin { animation-duration: 2s; } }

/* Botones con ícono: ícono y texto centrados en la misma línea. */
.dt-match-del, .dt-act { display: inline-flex; align-items: center; gap: .4rem; }
.dt-match-del svg, .dt-act svg { flex: none; }
.dt-act .dt-spin { vertical-align: baseline; margin-right: 0; }

/* Modo hoja (Conciliar la abre en un marco): sólo la hoja lateral, sin la tabla ni sus filtros. */
html[data-hoja] main#dt-pane { display: none !important; }

/* Encabezados ordenables (como en Base de precios): en negritas, con flecha, sin resaltar al pasar el cursor. */
.dt-tbl th { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.dt-th-btn { all: unset; }
.dt-tbl .dt-th-btn:hover, .dt-tbl .dt-th-btn:active, .dt-tbl .dt-th-btn:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; color: inherit; }
.dt-th-btn { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; }
.dt-th-btn svg { opacity: .35; }
.dt-sort.on .dt-th-btn svg, .dt-th-btn:hover svg { opacity: 1; }
.dt-th-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Hoja de conceptos (segunda hoja, encima del detalle). */
.dt-cc-sheet { width: min(520px, 100vw); }
.dt-cc-sheet[open] { display: flex; animation: dt-sheet-in .22s cubic-bezier(.32, .72, 0, 1); }
.dt-cc-sheet::backdrop { background: rgb(0 0 0 / .25); }
.dt-cc-uuid { font-family: var(--font-mono); color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.dt-cc-sheet .dt-sheet-x, .dt-cc-sheet .dt-sheet-x:hover { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.dt-cc-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 14px; }
.dt-cc-dato span { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.dt-cc-dato b { display: block; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dt-cc-h3 { margin: 18px 0 8px; font-size: var(--fs-lg); }
.dt-cc-lista { display: flex; flex-direction: column; gap: 10px; }
.dt-cc-card { border: 1px solid hsl(var(--foreground) / .12); border-radius: var(--radius); padding: 10px 12px; background: var(--card); }
.dt-cc-desc { font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; }
.dt-cc-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; font-size: var(--fs-sm); }
.dt-cc-card dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.dt-cc-card dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Visor del PDF del CFDI (tercera hoja): las páginas se pintan en canvas con pdf.js. */
.dt-pdf-sheet { width: min(900px, 100vw); }
.dt-pdf-sheet[open] { display: flex; animation: dt-sheet-in .22s cubic-bezier(.32, .72, 0, 1); }
.dt-pdf-sheet::backdrop { background: rgb(0 0 0 / .25); }
.dt-pdf-sheet .dt-sheet-x, .dt-pdf-sheet .dt-sheet-x:hover { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.dt-pdf-body { display: flex; flex-direction: column; align-items: center; gap: 12px; background: hsl(var(--foreground) / .06); }
.dt-pdf-body canvas { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .25); }
.dt-pdf-body .dt-muted { align-self: stretch; }

/* Nombres propios de esta pantalla para lo que la consola (index.html) define de otra forma: ahí `--line` es un color,
   aquí se usa como tripleta HSL. En las pantallas con app.css valen lo mismo que antes; la consola los redefine en base-consola.css. */
:root, [data-theme="dark"] { --dt-line: var(--line); --dt-line-strong: var(--line-strong); --dt-shadow: var(--shadow); --dt-shadow-a: var(--shadow-a); }

/* Metadata: el reporte SAT como control de lo importado. */
[data-dt-tabla][hidden] { display: none !important; }
#dt-meta[aria-busy="true"] { opacity: .55; }
.dt-meta-tbl { table-layout: auto; }
.dt-meta-tbl td, .dt-meta-tbl th { padding: 6px 8px; }
.dt-meta-tbl th.dt-num, .dt-meta-tbl td.dt-num { text-align: right; font-variant-numeric: tabular-nums; }
.dt-meta-tbl td { white-space: normal; }
.dt-meta-tbl code { font-size: .8em; }
.dt-meta-mes { cursor: pointer; }
.dt-meta-mes:hover > td { background: hsl(var(--foreground) / .05); }
.dt-meta-mes.sel > td { background: hsl(var(--primary) / .08); }
.dt-meta-tbl td.dt-meta-clic { text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.dt-meta-tbl td.dt-meta-clic:hover { background: hsl(var(--primary) / .15); text-decoration-style: solid; }
.dt-meta-tbl td.dt-meta-clic.on { background: hsl(var(--primary) / .18); font-weight: 600; text-decoration-style: solid; }
.dt-meta-mal { color: var(--bad); font-weight: 600; }
.dt-meta-tit { font-size: var(--fs-lg, 1.05rem); margin: 14px 0 6px; }
.dt-meta-meses { margin-bottom: 8px; }
.dt-meta-tbl th { position: static; }
#dt-meta-det .dt-meta-tbl { width: 100%; min-width: 0; table-layout: auto; }
#dt-meta-det .dt-nw { white-space: nowrap; }
#dt-meta-det td.dt-meta-nom { width: 16rem; max-width: 16rem; overflow-wrap: anywhere; }
#dt-meta-aviso:not(:empty), #dt-meta-msg:not(:empty) { margin: 16px 0; }
#dt-meta-aviso { padding: .75rem 1rem; }

/* CFDI embebido: hoja ancha con fondo opaco (sin la tabla de atrás) y el iframe llenando el cuerpo. */
.dt-pdf-sheet { width: min(900px, 100vw); }
.dt-pdf-sheet[open] { display: flex; animation: dt-sheet-in .22s cubic-bezier(.32, .72, 0, 1); }
.dt-pdf-sheet::backdrop { background: var(--bg); }
.dt-pdf-sheet .dt-sheet-x, .dt-pdf-sheet .dt-sheet-x:hover { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.dt-pdf-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--bg); }
.dt-pdf-sub { flex-wrap: wrap; gap: 8px 12px; }
/* Con una hoja abierta, la página de atrás no se desplaza. */
html:has(dialog.dt-sheet[open]), html:has(dialog.dt-sheet[open]) body { overflow: hidden; }
#dt-sheet-sub .dt-pdf-btn { margin-left: auto; }

/* «Pago propuesto»: el eslabón montado en la esquina de la pastilla de estado, igual que «CFDI propuesto» en Pagos. */
.dt-pill { position: relative; display: inline-block; }
.dt-prop-ico { position: absolute; top: -7px; right: -7px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; color: hsl(var(--primary-ink)); background: var(--card); border: 1px solid hsl(var(--primary) / .6); box-shadow: 0 0 0 2px var(--card); }
.dt-prop-ico svg { width: 12px; height: 12px; }

/* Gasto de empleado: las dimensiones, separadas del resto de la ficha. */
.dt-dims { margin-top: 10px; padding-top: 8px; border-top: 1px dashed hsl(var(--line)); }
.dt-dims-h { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }