/* Los paneles de conciliar-panels.js, donde sea que los monte su anfitrión: la página Conciliar
   en su columna, o el modal de Datos. Todo cuelga de .cp para que ninguna de las dos pantallas
   pise los estilos de la otra; los colores son los tokens de app.css. */
.cp { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.cp .stack { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.cp .num { font-variant-numeric: tabular-nums; }
.cp-msg:empty { display: none; }

.cp-cols { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cp-col { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.cp-col input[type="search"] { flex: 1; min-width: 6rem; }

/* Las listas son largas por naturaleza (todo el pool del ejercicio): scroll propio, para que la
   selección y los botones de confirmar no se vayan fuera de la pantalla. */
.cp-lista { max-height: 15rem; overflow: auto; border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius-sm); padding: .3rem .4rem; background: var(--card); }
.cp-editar-lista { max-height: 28rem; }
.cp-fila { margin: 0; padding: .4rem .3rem; line-height: 1.4; gap: .5rem; border-bottom: 1px solid hsl(var(--dt-line) / .5); align-items: flex-start; }
.cp-fila.sel { background: var(--bg); border-radius: var(--radius-sm); }
.cp-fila span { overflow-wrap: anywhere; }

.cp-sel { border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius-sm); padding: .5rem .6rem; background: var(--card); }
/* Lo ya decidido sobre lo marcado (la regla, el pago abierto): va antes que las listas, porque
   es lo que evita la búsqueda a mano. */
.cp-prop { border: 1px solid hsl(var(--dt-line)); border-left: 3px solid hsl(var(--primary)); border-radius: var(--radius-sm); padding: .4rem .6rem; background: var(--card); }
.cp-prop .row { justify-content: space-between; gap: .5rem; align-items: center; }
.cp-prop .row.izq { justify-content: flex-start; gap: .6rem; }
/* Un <p> sin resetear trae el margen de 1em del navegador: con .stack ya poniendo el espacio
   entre título, nota y caja, ese margen extra duplicaba el hueco. */
.cp-prop p { margin: 0; }

/* El pago que este panel va a ligar de paso (abierto desde una tarjeta «sin propuesta»): mismo
   acento que .cp-prop pero en el color de aviso, para que se note que es lo que trajo aquí al
   operador y no una propuesta más del pool. */
.cp-pago-ctx { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  border: 1px solid hsl(var(--dt-line)); border-left: 3px solid var(--warn); border-radius: var(--radius-sm);
  padding: .4rem .6rem; background: var(--card); }
.cp-pago-ctx .cp-monto { margin-left: 0; }
.cp-pago-ctx button { margin-left: auto; }

.cp-rep { align-items: flex-end; }
.cp-rep label { margin-bottom: 0; }
.cp-rep input[type="number"] { width: 7rem; }

.cp-card { border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); padding: .5rem .7rem; margin: 0; }
.cp-card legend { font-weight: 600; font-size: var(--fs-md); }
.cp-card ul { margin: .2rem 0; padding-left: 1.1rem; }
.cp-card li { overflow-wrap: anywhere; }

.cp-tag { font-size: var(--fs-sm); padding: .05rem .4rem; margin-left: .3rem; border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius-pill); color: var(--muted); }

/* Íconos lucide dentro de los botones: el ícono y su texto en una sola línea. */
.cp button { display: inline-flex; align-items: center; gap: .4rem; }
.cp-ico { display: inline-flex; flex: none; }
.cp-ico svg { display: block; }

/* La tarjeta de Editar: el mismo lenguaje que Vincular manual (marco de 6px, cabecera en versalitas,
   renglones compactos y las acciones a la derecha bajo una línea), una por conciliación o asignación. */
.cp-pc { border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.cp-pc.abierta { border-color: hsl(var(--primary) / .5); }
.cp-pc-head { display: flex; align-items: baseline; gap: .7rem; padding: .5rem .6rem;
  background: hsl(var(--foreground) / .035); border-bottom: 1px solid hsl(var(--dt-line)); }
.cp-pc-tit { min-width: 0; flex: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; }
.cp-pc-tit > b { font-size: var(--fs-md); font-weight: 600; }
.cp-pc-sub { color: var(--muted); font-size: var(--fs-base); }
.cp-pc-dot { color: var(--muted); }
/* Ver / quitar, como íconos sueltos en la misma línea del título — no esperan a los detalles. */
.cp-pc-quick { display: flex; align-items: center; align-self: center; gap: .15rem; flex: none; }
.cp-pc-total { margin-left: auto; font-weight: 600; font-size: var(--fs-lg); font-variant-numeric: tabular-nums;
  font-family: var(--font-mono); white-space: nowrap; }
/* El resumen sin abrir «Detalles»: qué movimiento contra cuántos CFDI, o el sujeto contra sus partidas. */
.cp-pc-resumen { padding: .35rem .6rem 0; }
.cp-pc-body { display: flex; flex-direction: column; gap: .5rem; padding: .5rem .6rem; }
.cp-pc-body > .stack:empty { display: none; }
.cp-pc-fac { display: flex; gap: .3rem .6rem; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-base);
  padding: .45rem .6rem; border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius);
  background: hsl(var(--foreground) / .02); overflow-wrap: anywhere; }
.cp-pc-fac .cp-tag { margin-left: 0; }
.cp-pc-fac .cp-pc-sub { flex: 1; min-width: 0; }
.cp-mono { font-family: var(--font-mono); }
.cp-monto { margin-left: auto; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.cp-pc-dims { color: var(--ink); font-size: var(--fs-base); }
.cp-tag.ing { color: hsl(142 65% 25%); border-color: hsl(142 50% 45% / .6); background: hsl(142 60% 40% / .1); }
.cp-tag.egr { color: hsl(15 70% 32%); border-color: hsl(15 70% 50% / .6); background: hsl(15 80% 55% / .1); }
.cp-fila .cp-tag { margin: 0 .5rem 0 0; flex: none; }
.cp-tag.warn { color: var(--warn); border-color: var(--warn); }
.cp-tag.ok { color: hsl(var(--primary-ink)); border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .12); }
.cp-editar-lista { max-height: none; overflow: visible; border: 0; padding: 0; background: none; display: flex; flex-direction: column; gap: .6rem; }
.cp-editar .row.small > input[type="search"] { flex: 1; min-width: 12rem; }
.cp-editar > .row.small:last-child { justify-content: space-between; align-items: center; }
/* El reparto abierto: como la zona «Selección» de Vincular manual, con su propio marco y su «Guardar». */
.cp-rep-zona { border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius-sm); padding: .5rem .6rem; background: var(--card); }
.cp-rep-zona > .cp-bal { padding: 0; background: none; }
.cp-pc-body .cp-acts { padding-top: .5rem; }

/* Conciliar desde un renglón: con propuesta del matcher NxM se ocultan las listas manuales
   hasta que se pida «Elegir a mano». */
.cp .cp-a-mano { display: none; }
.cp-auto .cp-a-mano { display: inline-flex; }
.cp-auto .cp-cols { display: none; }

/* ── Conciliar: la selección, dos lados frente a frente ──────────────────────
   Banco a la izquierda, CFDI a la derecha, cada lado con su suma y, en medio, si cuadran. */
.cp-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: start; }
.cp-side { display: flex; flex-direction: column; gap: .4rem; min-width: 0; padding: .5rem; border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); background: hsl(var(--foreground) / .02); }
.cp-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: 0 .15rem .15rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cp-side-head .cp-monto { font-size: var(--fs-lg); letter-spacing: 0; text-transform: none; color: var(--ink); }
.cp-side-vacio { margin: 0; padding: .3rem .15rem; }
.cp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .25rem .5rem; align-items: center; background: var(--card); }
.cp-item-tags { grid-column: 1 / -1; display: flex; gap: .3rem; flex-wrap: wrap; }
.cp-item .cp-tag { margin: 0; }
.cp-item-txt { min-width: 0; overflow-wrap: anywhere; }
.cp-item .cp-monto { margin-left: 0; white-space: nowrap; }
.cp .cp-x { padding: .1rem .3rem; border-color: transparent; color: var(--muted); }
.cp .cp-x:hover { color: var(--ink); }
.cp-igual { align-self: center; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-pill); font-weight: 700;
  border: 1px solid hsl(var(--dt-line-strong)); color: var(--muted); background: var(--card); }
.cp-igual.ok { color: hsl(var(--primary-ink)); border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .12); }
.cp-igual.mal { color: var(--bad); border-color: var(--bad); }
.cp-evid { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.cp-evid .cp-tag { margin: 0; }
.cp-tag.cerca { color: hsl(30 90% 22%); background: hsl(40 95% 88%); border-color: hsl(35 90% 45%); border-style: dashed; }
.cp-tag.cp-veredicto { font-size: var(--fs-md); font-weight: 600; padding: .1rem .6rem; }
.cp-tag.cp-veredicto.mal { color: var(--bad); border-color: var(--bad); }
.cp-tag.cp-veredicto.v-casi { color: #fff; background: hsl(142 65% 30%); border-color: hsl(142 65% 30%); }
.cp-tag.cp-veredicto.v-probable { color: hsl(210 85% 25%); background: hsl(210 90% 88%); border-color: hsl(210 70% 45%); }
.cp-tag.cp-veredicto.v-posible { color: hsl(30 90% 22%); background: hsl(40 95% 82%); border-color: hsl(35 90% 45%); }
.cp-tag.cp-veredicto.v-no { color: #fff; background: hsl(0 70% 42%); border-color: hsl(0 70% 42%); }
.cp-bal { margin: 0; padding: .4rem .7rem; border-radius: var(--radius); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.cp-bal.ok { color: hsl(var(--primary-ink)); background: hsl(var(--primary) / .1); }
.cp-bal.mal { color: var(--bad); background: hsl(0 70% 50% / .08); }
/* Mov. sin CFDI: un solo lado (el banco), sin el «=» ni el lado de los CFDI. */
.cp-board.cp-board-uno { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .cp-board { grid-template-columns: 1fr; } .cp-igual { justify-self: center; } }

/* El reparto usa todo el ancho: cada dimensión se estira, el monto queda angosto. */
.cp .cp-rep { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; padding: .55rem .6rem;
  border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); background: hsl(var(--foreground) / .02); }
.cp .cp-rep > label { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 12rem; min-width: 0; margin: 0;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cp .cp-rep > label select, .cp .cp-rep > label input { width: 100%; font-size: var(--fs-md); text-transform: none; letter-spacing: 0; color: var(--ink); }
.cp .cp-rep > label:has(input[data-campo="monto"]) { flex: 0 1 9rem; }
.cp .cp-rep > label:has(select[data-campo="target"]) { flex: 2 1 18rem; }
.cp .cp-rep > button { flex: none; align-self: flex-end; }

/* Varios objetivos (en el panel .cp y en las tarjetas del lote .cn-pc-body): una tarjeta por CFDI; cabecera con su nombre y monto, filas con la misma rejilla. */
.cp .cp-rep-grupo, .cn-pc-body .cp-rep-grupo { display: flex; flex-direction: column; gap: .5rem; padding: .6rem .7rem;
  border: 1px solid hsl(var(--dt-line)); border-radius: var(--radius); background: hsl(var(--foreground) / .02); }
.cp .cp-rep-head, .cn-pc-body .cp-rep-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; }
.cp .cp-rep-obj, .cn-pc-body .cp-rep-obj { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; min-width: 0; flex: 1 1 14rem; font-size: var(--fs-md); overflow-wrap: anywhere; }
.cp .cp-rep-obj .cp-monto, .cn-pc-body .cp-rep-obj .cp-monto { margin-left: 0; color: var(--muted); font-weight: 500; white-space: nowrap; }
.cp .cp-rep-acts, .cn-pc-body .cp-rep-acts { display: flex; gap: .35rem; flex: none; }
.cp .cp-rep-acts button, .cn-pc-body .cp-rep-acts button { font-size: var(--fs-sm); padding: .25rem .55rem; }
.cp .cp-rep-fila, .cn-pc-body .cp-rep-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.cp .cp-rep-fila > label, .cn-pc-body .cp-rep-fila > label { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 9rem; min-width: 0; margin: 0;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cp .cp-rep-fila > label select, .cp .cp-rep-fila > label input,
.cn-pc-body .cp-rep-fila > label select, .cn-pc-body .cp-rep-fila > label input { width: 100%; font-size: var(--fs-md); text-transform: none; letter-spacing: 0; color: var(--ink); }
.cp .cp-rep-fila > label:has(input[data-campo="monto"]), .cn-pc-body .cp-rep-fila > label:has(input[data-campo="monto"]) { flex: 0 1 8rem; }
.cp .cp-rep-fila > button, .cn-pc-body .cp-rep-fila > button { flex: none; }

/* Las acciones, a la derecha; la principal al final. */
.cp-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding-top: .6rem; border-top: 1px solid hsl(var(--dt-line)); }

/* El mensaje del panel, como aviso. */
.cp .cp-msg { margin: 0; padding: .5rem .8rem; border-radius: var(--radius); font-size: var(--fs-md);
  background: hsl(var(--primary) / .08); color: var(--ink); }
.cp .cp-msg.error { background: hsl(0 70% 50% / .08); color: var(--bad); }

/* Cancelar CFDI: el botón principal es de peligro, como el de la confirmación. */
.cp button.cp-peligro { background: var(--bad); color: hsl(var(--primary-foreground)); }
.cp button.cp-peligro:hover:not(:disabled) { background: var(--bad); filter: brightness(.92); }
.cp button.cp-peligro:disabled { opacity: .5; }
.cp-cancelar .cp-lista .cp-pc-fac { margin-bottom: .3rem; }
.cp-cancelar textarea { width: 100%; }
/* Las dos vistas de Cancelar CFDI, como pestañas arriba (las mismas de la barra de Conciliar). */
.cp-tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.cp .cp-tab { background: var(--bg); color: var(--ink); border: 1px solid hsl(var(--dt-line-strong)); font-size: var(--fs-md); }
.cp .cp-tab:hover { background: hsl(var(--primary) / .1); }
.cp .cp-tab[aria-current="page"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.cp-tab-n { font-size: var(--fs-sm); padding: 0 .4rem; border-radius: var(--radius-pill); background: hsl(var(--foreground) / .1); }
.cp-tab[aria-current="page"] .cp-tab-n { background: hsl(var(--primary-foreground) / .25); }
.cp-vista[hidden] { display: none; }
.cp-cancelar .row > input[type="search"] { flex: 1; min-width: 0; }
.cp-fila-acts { display: inline-flex; gap: .4rem; margin-left: auto; flex: none; }
.cp-cancelar .cp-pc-fac .cp-motivo-in { flex: 1; min-width: 10rem; }

.cp-orden { display: flex; flex-wrap: wrap; gap: .2rem; margin: .4rem 0 .2rem; }
.cp-th { padding: .15rem .5rem; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.cp-th.on { color: hsl(var(--primary-ink)); font-weight: 600; }

/* Dimensión que depende de otra: sin el padre elegido sólo se ve la nota que lo explica. */
.dep-nota { display: none; }
.dep-oculta > :not(.dep-nota) { display: none; }
.dep-oculta > .dep-nota { display: block; }