/* La pantalla Conciliar. Los paneles traen su propio archivo (conciliar-panels.css) porque
   Datos los monta también; aquí sólo está lo que es de ESTA página: filtros, pestañas y las
   tarjetas del matcher, de Terminal, de Pagos y de egresos netos. */
@import url("/conciliar-panels.css");

/* Ancho completo de la pantalla, como Datos: sin el tope de 1200px de `main` en app.css. */
#cn-pane { max-width: none; width: 100%; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .7rem; }
#cn-pane > p:empty { display: none; }

.cn-filtros { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cn-filtros select, .cn-filtros input { min-width: 8rem; }

.cn-tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid hsl(var(--line)); padding-bottom: .4rem; }
.cn-tabs button[aria-pressed="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* El título de la pantalla, del mismo tamaño que Datos y Cuentas Bancarias (.dt-pagina / .ed-pagina). */
.cn-pagina { font-size: var(--fs-2xl); margin: 0; }
.cn-titulo { display: flex; align-items: center; gap: .6rem; margin: 0 0 .2rem; }
.cn-ajustes-btn { display: inline-flex; align-items: center; justify-content: center; height: 2.1rem; width: 2.1rem; padding: 0; }
/* Sólo el engrane, como el de Cuentas Bancarias (.ed-ico): sin caja, gris y oscuro al pasar. */
button.cn-ajustes-btn, button.cn-ajustes-btn:hover { background: transparent; border-color: transparent; }
button.cn-ajustes-btn { color: var(--muted); }
button.cn-ajustes-btn:hover { color: var(--ink); }

.cn-panel { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.cn-panel > p:empty { display: none; }
.cn-panel .stack { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
/* Acciones del lote: al pie del panel, a la derecha y siempre a la vista aunque la lista sea larga. */
.cn-barra { position: sticky; bottom: 0; z-index: 15; justify-content: flex-end; align-items: center;
  padding: .55rem 0; background: var(--bg); border-top: 1px solid hsl(var(--line)); }
.cn-barra:not(:has(> :not([hidden]))) { display: none; }

.cn-card { border: 1px solid hsl(var(--line)); border-radius: var(--radius); padding: .5rem .8rem; margin: 0; background: var(--card); }
.cn-card legend { font-weight: 600; font-size: var(--fs-md); }
.cn-card label.check { margin-bottom: 0; align-items: flex-start; }
.cn-card ul { margin: .2rem 0; padding-left: 1.1rem; font-size: var(--fs-md); }
.cn-card li { overflow-wrap: anywhere; }
.cn-fila { margin: 0; padding: .15rem 0; align-items: flex-start; }
.cn-tag { font-size: var(--fs-sm); padding: .05rem .4rem; margin-left: .4rem; border: 1px solid hsl(var(--line)); border-radius: var(--radius-pill); color: var(--muted); }
.cn-tag.error { color: var(--bad); border-color: var(--bad); }

/* ── La barra de Conciliar ───────────────────────────────────────────────────
   Filtros y, a la derecha, las acciones que abren un panel. Barra y sub-pestañas se
   quedan pegadas arriba: en un mes con cien tarjetas, «Conciliar seleccionadas» está al
   final de la lista y había que subir del todo para ver en qué pestaña se estaba. */
.cn-sticky { position: sticky; top: var(--pg-bar-h, 0px); z-index: 20; display: flex; flex-direction: column; gap: .5rem;
  padding: .6rem 0 .5rem; margin: 0; background: var(--bg); border-bottom: 1px solid hsl(var(--line)); }
.cn-sticky > p:empty { display: none; }
.cn-toolbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .55rem .7rem; border: 1px solid hsl(var(--line)); border-radius: var(--radius); background: var(--card); }
.cn-toolbar .input { min-width: 8rem; }
.cn-toolbar button, .cn-toolbar .btn-link { padding: .3rem .7rem; font-size: var(--fs-md); }
.cn-badge { font-size: var(--fs-sm); padding: .1rem .5rem; border-radius: var(--radius-pill); border: 1px solid hsl(var(--line-strong)); color: var(--muted); }
.btn-link { display: inline-flex; align-items: center; border: 1px solid hsl(var(--line-strong)); border-radius: var(--radius);
  color: hsl(var(--primary-ink)); text-decoration: none; font-weight: 600; white-space: nowrap; }
.btn-link:hover { background: hsl(var(--primary) / .12); }
.cn-spin { display: none; width: .8rem; height: .8rem; margin-right: .4rem; vertical-align: -1px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: cn-giro .6s linear infinite; }
#cn-cargar.ocupado .cn-spin, .cn-toolbar button.ocupado .cn-spin { display: inline-block; }
#cn-cargar:disabled, .cn-toolbar button.ocupado { cursor: progress; }
@keyframes cn-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cn-spin { animation-duration: 2s; } }
/* Los iconos de la barra: el mismo ritmo que los botones de acción de Datos. */
.cn-toolbar .cn-btn-ico { display: inline-flex; align-items: center; gap: .35rem; }
.cn-toolbar .cn-btn-ico svg { flex: none; }

/* El modal de Vincular manual / Mov. sin CFDI / Editar / Cancelar CFDI: el mismo de Datos (.dt-modal). */
.dt-modal { width: min(1080px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); margin: auto; padding: 0;
  border: 1px solid hsl(var(--line)); border-radius: var(--radius); background: var(--card); color: var(--ink);
  overflow: hidden; box-shadow: 0 24px 60px -12px hsl(var(--shadow) / calc(var(--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(--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); }

/* Las sub-pestañas, con el número de cada una. */
.cn-tab { display: inline-flex; align-items: center; gap: .5rem; background: var(--bg); color: var(--ink);
  border: 1px solid hsl(var(--line-strong)); font-size: var(--fs-md); }
.cn-tab:hover { background: hsl(var(--primary) / .1); }
.cn-tab[aria-current="page"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.cn-tab-n { font-size: var(--fs-sm); padding: 0 .4rem; border-radius: var(--radius-pill); background: hsl(var(--foreground) / .1); }
.cn-tab[aria-current="page"] .cn-tab-n { background: hsl(var(--primary-foreground) / .25); }
.cn-tabs { border-bottom: 0; gap: .45rem; justify-content: center; }

/* ── Propuestas por regla ────────────────────────────────────────────────────
   Un bloque por regla, con su franja de color a la izquierda: veinte movimientos se
   leen como las cinco reglas que los explican. El color lo pone el script (un tono
   por grupo), así que aquí sólo va la forma. */
.cn-reg-grupo { border: 1px solid hsl(var(--line)); border-left: 4px solid hsl(var(--line-strong)); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; gap: .5rem; padding-bottom: .6rem; }
.cn-reg-grupo-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .45rem .7rem; }
.cn-reg-grupo-head > b { font-size: var(--fs-xl); }
.cn-reg-grupo-desc { flex-basis: 100%; }
.cn-reg-badge { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: hsl(var(--primary-foreground)); padding: .1rem .45rem; border-radius: var(--radius-sm); }
.cn-reg-grupo > .cn-pc { margin: 0 .7rem; }

.cn-pc.neg .cn-pc-total { color: var(--bad); }

/* ── Las cinco listas, una sola tarjeta ──────────────────────────────────────
   Pagos, Reglas, Terminal, Neto $0 y Matches piden lo mismo: mirar una cosa y decidir si
   se concilia. Es la tarjeta de front-conciliar: una franja de cabecera con el sujeto
   (casilla, folio, sus etiquetas y el monto a la derecha), y debajo, ya dentro del cuerpo,
   cada opción como su propio bloque con una barra de acento a la izquierda. */
.cn-pc { border: 1px solid hsl(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; }
.cn-pc:hover { border-color: hsl(var(--line-strong)); }
.cn-pc:has(input[data-incluir]:checked) { border-color: hsl(var(--primary) / .55);
  box-shadow: 0 0 0 1px hsl(var(--primary) / .25); }

.cn-pc-head { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .9rem;
  background: hsl(var(--foreground) / .035); border-bottom: 1px solid hsl(var(--line)); }
.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; }
.cn-pc-tit { min-width: 0; display: block; }
.cn-pc-tit > b { font-size: var(--fs-lg); font-family: var(--font-mono);
  letter-spacing: -.01em; margin-right: .45rem; }
.cn-pc-sub, .cn-pc-desc { color: var(--muted); font-size: var(--fs-base); margin-top: .2rem; }
.cn-pc-desc { overflow-wrap: anywhere; }
.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; }
.cn-pc.neg .cn-pc-total { color: var(--bad); }
.cn-pc-body { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .9rem .8rem; }
.cn-pc-body:empty { display: none; }
.cn-pc-body > .stack:empty { display: none; }

/* Las etiquetas de la cabecera: la clase de la tarjeta, el «✓ regla + CFDI», el «ambiguo». */
.cn-tag { display: inline-block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0;
  padding: .1rem .45rem; margin-left: 0; margin-right: .3rem;
  border: 1px solid hsl(var(--line-strong)); border-radius: var(--radius-sm); color: var(--muted); vertical-align: 2px; }
.cn-tag.ok { color: hsl(var(--primary-ink)); border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .12); }
.cn-tag.error { color: var(--bad); border-color: var(--bad); background: hsl(0 70% 50% / .1); }
/* El CFDI no venía ligado al pago: lo propuso el pool y hay que verlo antes de confirmar. */
.cn-tag.warn { color: var(--warn); border-color: var(--warn); background: hsl(var(--foreground) / .03); }

/* Una opción de la tarjeta: la propuesta del matcher, la factura candidata del cobro. Es un
   bloque propio con su barra de acento — la elegida se ve de un vistazo sin leer el radio. */
.cn-opt { display: flex; flex-direction: row; align-items: flex-start; gap: .6rem; margin: 0; font-size: var(--fs-base);
  padding: .6rem .7rem; border: 1px solid hsl(var(--line)); border-left: 3px solid hsl(var(--line-strong));
  border-radius: var(--radius); background: hsl(var(--foreground) / .02); overflow-wrap: anywhere; cursor: pointer;
  transition: border-color .12s, background .12s; }
.cn-opt:hover { background: hsl(var(--foreground) / .05); }
.cn-opt:has(input:checked) { border-color: hsl(var(--primary) / .35); border-left-color: hsl(var(--primary));
  background: hsl(var(--primary) / .07); }
.cn-opt input { margin-top: .3rem; flex: none; width: auto; }
.cn-opt.error { color: var(--bad); border-left-color: var(--bad); }

/* El CFDI de la propuesta, dentro de su bloque: caja propia con el monto a la derecha. */
.cn-opt > span { min-width: 0; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.cn-opt-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: var(--fs-md); }
.cn-opt-head .cn-tag { margin: 0; }

.cn-pc-lista { margin: .1rem 0; padding-left: 1.05rem; font-size: var(--fs-base); color: var(--muted); }
.cn-pc-lista li { overflow-wrap: anywhere; }
.cn-pc-lista.rep li { color: var(--ink); }

/* ── El reparto, en rejilla ──────────────────────────────────────────────────
   conciliar-panels.js pinta cada línea como <label>Proyecto <select>…: aquí esas parejas se
   vuelven columnas con su rótulo en versalitas encima, que es como se leen cuatro dimensiones
   seguidas sin contarlas. */
.cn-pc-body .cp-rep { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem;
  padding: .55rem .6rem; border: 1px solid hsl(var(--line)); border-radius: var(--radius);
  background: hsl(var(--foreground) / .02); }
.cn-pc-body .cp-rep > label { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 9rem; min-width: 0;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.cn-pc-body .cp-rep > label select, .cn-pc-body .cp-rep > label input { width: 100%; font-size: var(--fs-md);
  text-transform: none; letter-spacing: 0; color: var(--ink); }
.cn-pc-body .cp-rep > label:has(input[data-campo="monto"]) { flex: 0 1 7rem; }
.cn-pc-body .cp-rep > button { flex: none; align-self: flex-end; }
.cn-pc-body > .stack > strong { font-size: var(--fs-base); }
.cn-fac-uuid { font-family: var(--font-mono); }
.cn-fac-monto { margin-left: auto; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ── Los rezagados: pagos que todavía no forman tarjeta ──────────────────────
   La cabecera de la lista: cuántos hay y qué hacer con ellos. Cada uno se pinta abajo con la
   misma tarjeta (.cn-pc) que un pago con propuesta, sus botones en vez de un reparto ya resuelto. */
.cn-pend { display: flex; flex-direction: column; gap: .4rem; padding: .7rem .8rem;
  border: 1px solid hsl(var(--line)); border-radius: var(--radius); background: hsl(var(--foreground) / .02); }
.cn-pend-head { display: flex; align-items: center; gap: .1rem; }
.cn-pend > p { margin: 0; }
.cn-pend + .cn-pc { margin-top: .6rem; }
/* Los dos botones de Pagos son los chips de Datos (Todos, Pendiente…): mismo alto, borde y conteo en insignia. */
.cn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-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(--line-strong)); background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px hsl(var(--shadow) / .05); transition: background-color .12s, color .12s, border-color .12s; }
.cn-chip:hover { background: hsl(var(--foreground) / .06); }
.cn-chip-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; }
.cn-chip.active { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none; }
.cn-chip.active:hover { background: hsl(var(--foreground) / .88); }
.cn-chip.active .cn-chip-n { background: hsl(var(--background) / .2); }
.cn-chip.empty { opacity: .45; }

/* El modal de Ajustes (Reglas | Dimensiones): la forma del de Cuentas bancarias (.ficha: cabecera fija con título y ✕); debajo la pantalla de
   la consola en un marco de altura fija que se desplaza por dentro, para que el modal no llene la ventana. */
.cn-modal { width: min(960px, calc(100vw - 2rem)); height: min(72vh, 620px); max-height: calc(100vh - 2rem); overflow: hidden; }
.cn-modal[open] { display: flex; flex-direction: column; }
.cn-modal .ficha-cab { flex: none; }
.cn-modal iframe { display: block; flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: transparent; }

/* Una tarjeta con algún renglón fuera del pool: no se marca ni se confirma. */
.cn-pc.bloq { border-color: hsl(var(--bad-h) / .55); }
.cn-pc.bloq .cn-pc-head { background: hsl(var(--bad-h) / .07); }
.cn-pc.bloq input[data-incluir] { cursor: not-allowed; }

.cn-cancel { width: min(30rem, calc(100vw - 2rem)); }
.cn-cancel::backdrop { background: rgb(0 0 0 / .35); }
.cn-cancel h2 { margin: 0 0 .5rem; font-size: var(--fs-xl); }
.cn-cancel label { display: flex; flex-direction: column; gap: .25rem; margin: .6rem 0; }
.cn-cancel .row { display: flex; gap: .5rem; justify-content: flex-end; }
.cn-mono { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* ── El tablero de cada tarjeta: el de «Vincular manual» ─────────────────────
   Banco | = | CFDI, con las clases de conciliar-panels.css (.cp-board, .cp-side, .cp-item…). Aquí sólo
   lo que la tarjeta añade: el estado y las acciones de Datos dentro de cada caja, el porqué de un
   renglón fuera del pool, y las opciones (una propuesta del matcher) dentro del lado de los CFDI. */
.cn-pc-body .cp-board { align-items: stretch; }
.cn-pc-body .cp-igual { align-self: center; }
.cp-item-tags { align-items: center; }
.cp-item-est .dt-badge { margin: 0; }
.cp-item-acts { display: inline-flex; gap: .1rem; }
.cp-item.bloq { border-color: var(--bad); }
.cn-caja-why { grid-column: 1 / -1; margin: 0; color: var(--bad); font-size: var(--fs-sm); }
.cn-caja-why::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; margin-inline-end: .3em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.cn-pc button.cp-x { display: inline-flex; padding: .1rem .3rem; border-color: transparent; color: var(--muted); }
.cn-pc button.cp-x:hover { color: var(--ink); }
.cn-pc button.cp-x.danger:hover { color: var(--bad); }
.cn-pc .cp-x svg { display: block; }
.cn-opt .cp-evid, .cn-opt .cp-bal { margin: 0; }
.cn-opt-suma { margin-left: auto; font-size: var(--fs-lg); }
.cn-pc .cp-prop .row { justify-content: space-between; gap: .5rem; align-items: center; }
.cn-pc .cp-prop .row.izq { justify-content: flex-start; gap: .6rem; }
.cn-pc .cp-acts { padding-top: .6rem; }
.cn-pc .cp-acts button { display: inline-flex; align-items: center; gap: .4rem; }

/* Movimientos y CFDI de las tarjetas: un clic abre su hoja de detalle (la de Datos). */
.cn-hoja-abre { cursor: pointer; }
.cn-hoja-abre:hover { border-color: hsl(var(--foreground) / .35); }
.cn-hoja { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; }
.cn-hoja::backdrop { background: transparent; }
.cn-hoja iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; }

/* La hoja lateral de un pago: mismo aspecto que .dt-sheet de Datos (datos.css). */
.cn-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(--line)); border-radius: 0;
  background: var(--card); color: var(--ink); flex-direction: column;
  box-shadow: -24px 0 60px -12px hsl(var(--shadow) / calc(var(--shadow-a) * 2)); }
.cn-sheet[open] { display: flex; animation: cn-sheet-in .22s cubic-bezier(.32, .72, 0, 1); }
.cn-sheet::backdrop { background: rgb(0 0 0 / .4); }
@keyframes cn-sheet-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cn-sheet[open] { animation: none; } }
.cn-sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid hsl(var(--line)); flex: none; }
.cn-sheet-who { min-width: 0; flex: 1; }
.cn-sheet-head h2 { margin: 0 0 6px; font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.cn-sheet-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); }
button.cn-sheet-x { flex: none; padding: .25rem .5rem; border-color: transparent; color: var(--muted); }
button.cn-sheet-x:hover { background: hsl(var(--foreground) / .06); color: var(--ink); }
.cn-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 24px; background: var(--bg); display: flex; flex-direction: column; gap: 16px; }
.cn-sheet-sec { display: flex; flex-direction: column; gap: .4rem; }
.cn-sheet-sec h4 { margin: 0; font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cn-kv { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid hsl(var(--line)); font-size: var(--fs-md); overflow-wrap: anywhere; }
.cn-kv > span:last-child { text-align: right; }

/* El ojo junto a «Pago N»: sólo el icono, sin caja de botón. */
button.cn-info, button.cn-info:hover, button.cn-info:focus-visible { border: 0; background: none; box-shadow: none; padding: 0 .25rem; line-height: 1;
  vertical-align: middle; color: var(--muted); cursor: pointer; }
button.cn-info:hover { color: var(--ink); }

/* «Posible pago ya registrado»: la misma caja que un renglón de Banco/CFDI (.cp-pc-fac.cp-item),
   con la casilla de vincular junto a la etiqueta «pago» en el renglón de arriba. */
.cp-pago-item .cp-item-tags label.check { margin: 0; }

/* En ancho el título vive en la barra fija: sin el aire extra entre ella y la botonera. */
@media (min-width: 861px) {
  #cn-pane { padding-top: 0; }
  .cn-sticky { padding-top: .15rem; }
}

/* La ✕ del modal de Ajustes: sólo el icono, sin caja de botón. */
button.cn-modal-x, button.cn-modal-x:hover, button.cn-modal-x:focus-visible { border: 0; background: none; box-shadow: none; color: var(--muted); padding: .25rem .5rem; }
button.cn-modal-x:hover { color: var(--ink); }

/* Las dos pestañas del modal de Ajustes (Reglas | Dimensiones), en la cabecera, junto al título. */
.cn-modal-tabs { display: inline-flex; gap: .25rem; margin-left: .9rem; padding: .2rem; border: 1px solid hsl(var(--line)); border-radius: var(--radius); background: hsl(var(--background)); }
button.cn-modal-tab, button.cn-modal-tab:hover { border: 0; box-shadow: none; background: transparent; color: var(--muted); }
button.cn-modal-tab:hover { color: var(--ink); }
button.cn-modal-tab[aria-selected="true"] { background: var(--card); color: hsl(var(--primary-ink)); font-weight: 600; box-shadow: 0 1px 2px hsl(var(--shadow) / .12); }

/* Ayuda de las etiquetas (veredicto, RFC, fecha, total…): un globo pegado a la etiqueta, al pasar, al enfocar o al tocar. */
.cn-ayuda { cursor: pointer; }
.cn-ayuda:hover, .cn-ayuda:focus-visible { text-decoration: underline; }
@media (pointer: coarse) { .cn-ayuda { min-height: 40px; display: inline-flex; align-items: center; } }
.cn-globo { pointer-events: none; position: fixed; z-index: 1000; width: min(calc(100vw - 16px), 20rem); display: flex; flex-direction: column; gap: .2rem; padding: .6rem .75rem;
  background: var(--card); color: var(--ink); border: 1px solid hsl(var(--line)); border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgb(0 0 0 / .18); font-size: var(--fs-sm); line-height: 1.35; }

/* Ayuda de cada pestaña: un globo pegado a la pestaña (al pasar, al enfocar o al tocar). */
.cn-tip { position: fixed; z-index: 60; max-width: min(24rem, calc(100vw - 16px)); padding: .6rem .8rem; border: 1px solid hsl(var(--line-strong));
  border-radius: var(--radius); background: var(--card); color: var(--ink); font-size: var(--fs-md); line-height: 1.45; pointer-events: none;
  box-shadow: 0 8px 24px -6px hsl(var(--shadow) / .3); }
.cn-tip[hidden] { display: none; }

/* Resumen de veredictos arriba de Matches: un botón por veredicto con su cuenta; tocarlo filtra la lista. */
.cn-seg { display: inline-flex; align-self: flex-start; max-width: 100%; gap: .5rem; padding: 0; margin: 0 0 1rem; background: none; border: 0; }
.cn-seg[hidden] { display: none; }
.cn-seg-b { display: inline-flex; align-items: center; gap: .4rem; background: var(--card); border: 1px solid hsl(var(--line)); color: var(--muted);
  border-radius: var(--radius-sm); padding: .4rem 1rem; font-size: var(--fs-md); font-weight: 500; box-shadow: none; }
.cn-seg-b:hover { background: hsl(var(--foreground) / .05); border-color: hsl(var(--line-strong)); color: var(--ink); }
.cn-seg-b.active { border-color: hsl(var(--primary)); color: var(--ink); box-shadow: 0 0 0 1px hsl(var(--primary)); }
.cn-seg-b.empty:not(.active) { opacity: .5; }
.cn-chip-n { font-size: var(--fs-sm); padding: 0 .4rem; border-radius: var(--radius-pill); background: hsl(var(--foreground) / .1); }
.cn-ver { flex-wrap: wrap; }
.cn-ver-punto { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--foreground) / .3); flex: none; }
.cn-ver-b.ok .cn-ver-punto { background: hsl(var(--primary)); }
.cn-ver-b.warn .cn-ver-punto { background: var(--warn); }
.cn-ver-b.mal .cn-ver-punto { background: var(--bad); }
.cn-ver-b:disabled { cursor: default; }
@media (pointer: coarse) { .cn-seg-b { min-height: 40px; } }
@media (max-width: 480px) { .cn-seg { display: flex; } .cn-ver .cn-ver-b { flex: 1 1 calc(50% - .25rem); justify-content: center; padding-inline: .5rem; } }