/* Pagos dentro de la consola: sólo lo que las clases de la consola (.card, .fila, .chip, dt-tbl) no traen. */
#vPagos .pg-busca { flex: 1 1 240px; min-width: 180px; width: auto; }
#vPagos select { width: auto; }
.pg-row { cursor: pointer; }
.pg-row:hover td { background: hsl(var(--mutedbg)); }
.pg-row.pg-off td { opacity: .55; }
#vPagos td.num, #pg-prop td.num, .pg-mini td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-egreso { color: var(--rojo); }
.pg-ingreso { color: var(--verde); }
.pg-msg { margin: 8px 0 0; font-size: 13px; color: var(--muted); min-height: 1em; }
.pg-msg.err { color: var(--rojo); }
.pg-msg.ok { color: var(--verde); }
#pg-resumen { font-size: 13px; color: var(--muted); }
#pg-dlg, #pg-prop, #pg-hoja, #pg-ligar, #pg-cancel { max-height: calc(100vh - 48px); overflow: auto; }
#pg-dlg { width: min(760px, calc(100vw - 32px)); }
#pg-prop { width: min(980px, calc(100vw - 32px)); }
#pg-hoja { width: min(560px, calc(100vw - 32px)); }
#pg-ligar, #pg-cancel { width: min(480px, calc(100vw - 32px)); }
#pg-dlg .pg-grid, #pg-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
#pg-dlg .pg-pie, #pg-prop .pg-pie { margin-top: 14px; }
#pg-dup { margin-top: 10px; padding: 10px 12px; border-radius: calc(var(--radius) - 2px); background: var(--ambarBg); color: var(--ambar); font-size: 13px; }
#pg-persona-res { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#pg-persona-sel { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#pg-prop .pg-scroll { max-height: 50vh; overflow: auto; margin-top: 8px; display: flex; flex-direction: column; gap: .6rem; }
/* Las tarjetas de Conciliar en lote (.cn-pc) con la tripleta de color ya resuelta, como en conciliar-consola.css. */
#pg-prop .cn-pc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden;
  box-shadow: 0 1px 2px hsl(var(--foreground) / .06); transition: border-color .12s, box-shadow .12s; flex: none; }
#pg-prop .cn-pc.marcada { border-color: hsl(var(--primary) / .55); box-shadow: 0 0 0 1px hsl(var(--primary) / .25); }
#pg-prop .cn-pc-head { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .9rem;
  background: hsl(var(--foreground) / .035); border-bottom: 1px solid var(--line); }
#pg-prop .cn-pc-head .check { display: flex; flex-direction: row; line-height: 1.3; margin: 0; align-items: flex-start; flex: 1; min-width: 0; gap: .6rem; }
#pg-prop .cn-pc-tit { min-width: 0; display: block; }
#pg-prop .cn-pc-tit > b { font-size: var(--fs-lg); font-family: var(--font-mono); letter-spacing: -.01em; margin-right: .45rem; }
#pg-prop .cn-pc-sub { color: var(--muted); font-size: var(--fs-base); margin-top: .2rem; overflow-wrap: anywhere; }
#pg-prop .cn-pc-total { margin-left: auto; font-weight: 700; font-size: var(--fs-xl); font-variant-numeric: tabular-nums;
  font-family: var(--font-mono); white-space: nowrap; }
#pg-prop .cn-pc-body { padding: .7rem .9rem .8rem; }
#pg-prop .cn-tag { display: inline-block; font-size: var(--fs-sm); font-weight: 600; padding: .1rem .45rem; margin-right: .3rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); vertical-align: 2px; }
#pg-prop .cn-tag.ok { color: hsl(var(--primary-ink)); border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .12); }
#pg-prop .cn-tag.warn { color: var(--warn); border-color: var(--warn); }
#pg-prop .cn-opt-fija { display: flex; padding: .6rem .7rem; border: 1px solid var(--line); border-left: 3px solid hsl(var(--primary));
  border-radius: var(--radius); background: hsl(var(--primary) / .07); font-size: var(--fs-base); overflow-wrap: anywhere; }
#pg-prop .cn-opt-fija > span { min-width: 0; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
#pg-prop .cn-opt-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: var(--fs-md); }
#pg-prop .cn-opt-suma { margin-left: auto; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
#pg-prop .pg-uuid { font-family: var(--font-mono); }
#pg-prop input[type=checkbox] { width: auto; }
.pg-kv { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pg-h3 { font-size: 13px; margin: 16px 0 6px; }
.pg-mini { width: 100%; }
button.sm { padding: 4px 10px; font-size: 12px; }

/* El atributo hidden gana a los display de la consola (button.sec, .fila…). */
#vPagos [hidden], #pg-hoja [hidden], #pg-dlg [hidden], #pg-ligar [hidden], #pg-cancel [hidden], #pg-prop [hidden] { display: none !important; }
/* Los desplegables de la consola son el widget de select.js (.sx-trigger): en una fila de filtros no se estiran. */
#vPagos .fila .sx-trigger, #vPagos .fila select { width: auto; min-width: 150px; flex: 0 1 auto; }
#vPagos .fila .pg-busca { flex: 1 1 240px; width: auto; }
/* La tabla de datos.css es de ancho fijo (columnas de Base administrativa): aquí se reparte sola, como en Base dentro de la consola. */
#vPagos .dt-tbl, #pg-prop .dt-tbl, #pg-hoja .dt-tbl { width: 100%; min-width: 0; table-layout: auto; border-collapse: collapse; }
#vPagos .dt-tbl th, #pg-prop .dt-tbl th { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; background: transparent; position: static; text-align: left; }
#vPagos .dt-tbl th.num, #pg-prop .dt-tbl th.num { text-align: right; }
#vPagos .dt-tbl td, #pg-prop .dt-tbl td, #pg-hoja .dt-tbl td { vertical-align: top; }

/* El detalle de un pago es una hoja lateral, como la de Conciliar en lote. */
#pg-hoja { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: none;
  border-radius: 0; border-width: 0 0 0 1px; }
#pg-hoja[open] { animation: pg-hoja-in .22s cubic-bezier(.32, .72, 0, 1); }
#pg-prop .cn-hoja-abre { cursor: pointer; }
#pg-prop .cn-pc-head.cn-hoja-abre:hover, #pg-prop .cn-opt-fija.cn-hoja-abre:hover { background: hsl(var(--foreground) / .06); }
#pg-prop .cn-pc-head .check { cursor: pointer; }
@keyframes pg-hoja-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #pg-hoja[open] { animation: none; } }
#pg-hoja .pg-propuesta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .6rem .7rem; margin-top: 6px;
  border: 1px solid var(--line); border-left: 3px solid hsl(var(--primary)); border-radius: var(--radius); background: hsl(var(--primary) / .07); }
#pg-prop .pg-uuid { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
#pg-hoja .pg-prop-dato { min-width: 0; flex: 1; }
#pg-hoja .pg-prop-tit { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
#pg-hoja .pg-prop-suma { margin-left: auto; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
#pg-hoja .pg-uuid { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; margin-top: .3rem; }
/* La insignia de «CFDI propuesto»: un círculo con el eslabón, montado en la esquina superior derecha de la pastilla «espera factura». */
.pg-pill { position: relative; display: inline-block; }
.pg-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); }
.pg-prop-ico svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pg-ligar .pg-propuesta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .6rem .7rem; margin-top: 6px;
  border: 1px solid var(--line); border-left: 3px solid hsl(var(--primary)); border-radius: var(--radius); background: hsl(var(--primary) / .07); }
#pg-ligar .pg-prop-dato { min-width: 0; flex: 1; }
#pg-ligar .pg-prop-tit { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
#pg-ligar .pg-prop-suma { margin-left: auto; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
#pg-ligar .pg-uuid { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; margin-top: .3rem; }
/* Las acciones de la hoja quedan fijas al pie del panel; el detalle es lo que se desplaza. */
#pg-hoja .pg-pie { position: sticky; bottom: calc(-1 * var(--ficha-py)); z-index: 5; margin: 14px calc(-1 * var(--ficha-px)) 0;
  padding: 12px var(--ficha-px) calc(12px + var(--ficha-py)); background: var(--card); border-top: 1px solid var(--line); }
/* Con poco contenido el pie se queda abajo de la ventana, no debajo del último renglón. */
#pg-hoja[open] { display: flex; flex-direction: column; }
#pg-hoja #pg-hoja-cuerpo { flex: 1 0 auto; }
#pg-hoja .pg-pie { margin-top: auto; }
.pg-prop-ico { box-sizing: border-box; padding: 0; line-height: 0; }
.pg-prop-ico svg { display: block; margin: 0; flex: none; }
#pg-hoja .pg-pie { border-top: 0; }
#pg-hoja .pg-hoja-quien { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
#pg-hoja .pg-hoja-quien h2 { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
#pg-hoja #pg-hoja-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#pg-hoja .pg-folio-etq, #pg-prop .pg-folio-etq { color: var(--muted); font-weight: 500; font-size: var(--fs-md); }
#pg-hoja .pg-folio, #pg-prop .pg-folio { font-family: var(--font-mono); font-weight: 700; padding: .05rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: hsl(var(--foreground) / .04); }
/* Campo obligatorio: asterisco rojo tras la etiqueta. */
#pg-dlg .pg-req { color: var(--rojo, #c0392b); font-weight: 700; margin-left: .2rem; }
/* La descripción de la tabla: un solo renglón, con «…» si no cabe (completa en el detalle y al pasar el cursor). */
#pg-tbody .pg-desc { max-width: min(36rem, 38vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pg-dlg .pg-et { display: block; }
/* La cabecera de la tarjeta de propuesta: «Pago», el id y la fecha en una sola línea, centrados entre sí; el contacto debajo. */
#pg-prop .cn-pc-tit { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .45rem; }
#pg-prop .cn-pc-tit .cn-tag { margin: 0; vertical-align: baseline; }
#pg-prop .cn-pc-tit .pg-folio { line-height: 1.4; }
#pg-prop .cn-pc-tit .cn-pc-sub { flex-basis: 100%; margin-top: 0; }

/* Fase 8b: lo que le falta a cada pago (chips del encabezado, marcas por renglón), el movimiento del banco que lo cerraría y las dimensiones sugeridas. */
.pg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.pg-chips .spacer { flex: 1; }
.pg-chip { font-size: 13px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.pg-chip.hay { border-color: var(--ambar); color: var(--ambar); }
.pg-chip.on { background: var(--ambarBg); font-weight: 600; }
#vPagos td.pg-marcas { white-space: nowrap; letter-spacing: .2em; }
.pg-marca.ok { color: var(--verde); }
.pg-marca.no { color: var(--muted); }
.pg-seguros-res { margin: 6px 0; font-size: 13px; }
.pg-seguros-res ul { margin: 6px 0 0 18px; color: var(--rojo); }
.pg-sug { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.pg-sug:empty { display: none; }
.pg-ayuda { margin: 6px 0; font-size: 13px; }
.pg-ayuda ol { margin: 4px 0 4px 18px; }

.pg-seg-card { border: 1px solid var(--linea, #ddd); border-radius: 10px; padding: 10px 12px; }
.pg-seg-cab { display: flex; align-items: center; gap: 10px; }
.pg-seg-cab input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; }
.pg-seg-quien { flex: 1 1 auto; min-width: 0; }
.pg-seg-cuerpo { display: flex; align-items: stretch; gap: 10px; margin-top: 8px; }
.pg-seg-lado { flex: 1 1 0; min-width: 0; }
.pg-seg-tit { font-size: 12px; text-transform: uppercase; margin-bottom: 4px; }
.pg-seg-caja { border: 1px solid var(--linea, #ddd); border-radius: 8px; padding: 6px 10px; margin-bottom: 4px; font-size: 13px; }
.pg-seg-igual { align-self: center; font-size: 18px; color: var(--muted, #888); }
.pg-seg-lig { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; }
.pg-seg-lig input { width: 16px; height: 16px; margin: 0; }
.pg-mini th.num { text-align: right; }
.pg-mini th { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }