/* PRUEBA DE DISEÑO — diseno-archivo.css. Usa los tokens de diseno.css.
   Archivo: Proformas, Ventas pagadas, Ventas por cobrar, Notas y Programadas.
   Todo va colgado de .dn-archivo, la raíz de esas cinco pantallas. */

/* La raíz lleva .tarjeta por compatibilidad, pero no se ve como tarjeta:
   las tarjetas son la lista y el panel de adentro. */
.tarjeta.dn-archivo {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  display: grid;
  gap: 14px;
  min-width: 0;
}
.dn-archivo .dn-cabecera { margin-bottom: 0; }
.dn-archivo .dn-cabecera > div:first-child { min-width: 0; max-width: 70ch; }

/* ------------------------------------------------ la tarjeta de la lista -- */
.dn-archivo .dn-lista {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-chica);
  min-width: 0;
  overflow: hidden;
}
.dn-archivo .dn-filtros { gap: 8px 12px; padding: 12px 14px; align-items: flex-end; }
.dn-archivo .dn-filtros > div { min-width: 0; }
.dn-archivo .dn-filtros label,
.dn-archivo .dn-filtros .etiqueta { font-size: 12px; }
.dn-archivo .dn-contador { margin-left: auto; align-self: center; white-space: nowrap; }
.dn-archivo .dn-lista .envoltorio-tabla { border: 0; border-radius: 0; }
.dn-archivo .dn-lista table { margin: 0; }
.dn-archivo td.numero { text-align: center; font-variant-numeric: tabular-nums; }

/* Los filtros: el buscador ancho, el desplegable de «Cuáles» con su aire y las
   dos fechas juntas. En la compu van en una fila que se envuelve; en el
   teléfono, de dos en dos (más abajo). */
.dn-archivo .dn-filtros > .dn-f-buscar { min-width: 200px; }
.dn-archivo .dn-filtros > .dn-f-ancho { min-width: 170px; }
/* En Cobrar el buscador se queda con el ancho que sobra, y el interruptor a su lado. */
.dn-cobrar .dn-filtros > .dn-f-buscar { flex: 1; }
/* COMPACTOS (informe del 6/10/2026: «los filtros compactos arriba de la lista;
   el resultado primero»): un poco más bajos y con la letra de una nota, para
   que los seis de Notas quepan en una fila a 1280 y la lista arranque antes. */
.dn-archivo .dn-filtros input:not([type="checkbox"]),
.dn-archivo .dn-filtros select { padding-block: 6px; font-size: 13.5px; }
.dn-archivo .dn-entre-fechas { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-archivo .dn-entre-fechas input[type="date"] { width: auto; }

/* ------------------------------------ la lista de comprobantes (v3) -- */
/* EL RENGLÓN, COMO LO PIDIÓ MARIO DEL 4 AL 6/10/2026: el número corto («3024»,
   no los veinte dígitos), sin las columnas «Tipo» ni «Detalle», el estado de
   pago debajo del de Hacienda y los iconitos a la derecha en dos renglones.
   El ancho que soltaron las dos columnas se lo queda el nombre del cliente:
   las demás celdas miden lo que dicen (`width: 1%` y sin partir) y la del
   cliente se lleva el resto. `.dn-docs` la llevan Ventas, Notas y Proformas. */
.dn-archivo .dn-docs { width: 100%; }
.dn-archivo .dn-docs td { vertical-align: middle; }
.dn-archivo .dn-docs .dn-d-numero,
.dn-archivo .dn-docs .dn-d-fecha,
.dn-archivo .dn-docs .dn-d-vence,
.dn-archivo .dn-docs .dn-d-total,
.dn-archivo .dn-docs .dn-d-estado,
.dn-archivo .dn-docs .dn-d-acciones { width: 1%; white-space: nowrap; }
/* Los botones de una proforma llevan palabra: van en dos renglones (tres y
   dos), en una caja del ancho justo para eso. Sin ese mínimo la celda los
   apilaría de uno en uno; con más, le quitaría el ancho al nombre del cliente. */
.dn-archivo.dn-proformas .dn-docs .dn-d-acciones { white-space: normal; }
.dn-archivo.dn-proformas .dn-docs .dn-d-acciones > .acciones { min-width: 236px; }
/* LOS IMPORTES, ALINEADOS ENTRE SÍ (informe del 6/10/2026; el diseño de la v3
   toma eso del informe y deja lo demás centrado, como la casa). La columna
   mide lo que su importe más largo, así que ese queda centrado bajo «Total» y
   los demás terminan en su misma raya: los céntimos de todos, uno debajo del
   otro. Igual el saldo de cada factura en Cobrar, que usa esta misma tabla. */
.dn-archivo .dn-docs td.dn-d-total { text-align: right; }
.dn-archivo .dn-docs td.dn-d-cliente { font-weight: 600; overflow-wrap: anywhere; }
.dn-archivo .dn-docs td.dn-d-cliente .nota { font-weight: 400; }
.dn-archivo .dn-docs td.dn-d-total { font-weight: 600; }
.dn-archivo .dn-numero-corto { font: 650 15px var(--fuente-titulo); font-variant-numeric: tabular-nums; color: var(--texto); }
/* La palabra del tipo y la hora: chicas, debajo de lo suyo. */
.dn-archivo .dn-tipo-doc,
.dn-archivo .dn-hora,
.dn-archivo .dn-d-fecha .nota { display: block; margin: 0; font-size: 12px; font-weight: 400; color: var(--tenue); white-space: nowrap; }
/* Los dos estados, uno debajo del otro: el de Hacienda y el de pago. */
.dn-archivo .dn-estados { display: grid; gap: 4px; justify-items: center; }
/* La zona de toque de la pastilla de Hacienda (`pastillaLista`, documentos.js):
   en la compu mide lo que la pastilla; en el teléfono se estira (más abajo). */
.dn-archivo .dn-zona { display: inline-flex; }
/* La pastilla de un estado que no es rechazo también se aprieta (Mario,
   5/10/2026), pero no grita: sin el contorno ni el subrayado del rechazo, y
   con su propio color al posarse (el de estilo.css es el rojo del rechazo). */
.dn-archivo .pastilla.apretable:not(.malo) { border-color: transparent; text-decoration: none; }
.dn-archivo .pastilla.apretable:not(.malo):hover { background: color-mix(in srgb, currentColor 16%, var(--papel)); }

/* LOS ICONITOS, EN DOS RENGLONES PAREJOS (Mario, 6/10/2026, con la captura de
   catorce en una torre: «deberían aparecer hacia la derecha, tal vez en 2
   renglones porque son muchos, pero no así como se ve ahorita»). Una rejilla
   de columnas fijas de 28 px: cuántas van por renglón lo dice la caja
   (`--por-renglon`, documentos.js: la mitad de los que trae; siete si no lo
   dice), así que por angosta que sea la celda nunca caen de uno en uno. */
.dn-archivo .acciones-doc {
  --por-renglon: 7;
  display: grid;
  grid-template-columns: repeat(var(--por-renglon), 28px);
  gap: 4px;
  justify-content: center;
}

/* ------------------------------------------- la ficha del comprobante -- */
/* (Vive en la capa de las ventanas, fuera de `.dn-archivo`: sin ese prefijo.)
   «RESPUESTA DE HACIENDA», COMO DETALLE QUE SE ABRE (informe del 6/10/2026,
   ficha 86): cerrada, una franja de un renglón pegada a la causa; abierta, el
   texto exacto de Hacienda en letra de máquina, que baja de renglón en vez de
   ensanchar la ficha y tiene su tope de alto. */
.dn-respuesta-hacienda {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel-2);
  padding: var(--e-2) var(--e-3);
}
.dn-respuesta-hacienda > summary { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.dn-texto-exacto {
  margin: var(--e-2) 0 0;
  max-height: 14rem; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font: 12.5px/1.5 var(--mono);
  color: var(--tenue);
}
.rejilla > .dn-de-lado-a-lado { grid-column: 1 / -1; min-width: 0; }

/* Sin panel abierto, la lista usa todo el ancho. */
.dn-archivo .dn-dividido.sin-detalle { grid-template-columns: minmax(0, 1fr); }
.dn-archivo .dn-detalle[hidden] { display: none; }

/* Fila que se toca para abrir el panel. */
.dn-archivo tr.dn-fila { cursor: pointer; }
.dn-archivo tr.dn-fila:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.dn-archivo tr.dn-elegida > td { background: var(--azul-suave); }
.dn-archivo tr.dn-elegida > td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
/* Sobre el azul suave del renglón escogido, la pastilla azul («Pagada», «En
   camino») se quedaba sin fondo: ahí va sobre papel. */
.dn-archivo tr.dn-elegida .pastilla.camino,
.dn-archivo tr.pf-elegida .pastilla.camino { background: var(--papel); }
/* Igual la gris («Vigente», «Anulada») sobre el renglón sombreado de la zebra. */
.dn-archivo .dn-docs tbody > tr:nth-child(even) .pastilla.neutro { background: var(--papel); }

/* EL TOTAL DE LA LISTA, EN LA RAYA DE LOS IMPORTES (revisión de la fase 3,
   7/10/2026). Es el pie de la misma tabla (su `<tfoot>`, documentos.js) y su
   cifra va en la columna «Total», con la letra de los importes de arriba: los
   céntimos de la suma quedan bajo los céntimos de lo que suma. El rótulo va
   pegado a su cifra, y la nota, al centro, debajo. (Las otras dos listas del
   Archivo —Proformas y Cobrar— siguen con su cuadro de totales de siempre.)
   En la compu son renglones de la tabla; en el teléfono, más abajo, un renglón
   bajo las tarjetas. */
@media (min-width: 701px) {
  .dn-archivo .dn-docs > tfoot > tr > td { background: var(--azul-suave); border: 0; padding-block: var(--e-1); }
  .dn-archivo .dn-docs > tfoot > tr:first-child > td { border-top: 2px solid var(--azul); padding-top: var(--e-3); }
  .dn-archivo .dn-docs > tfoot > tr:last-child > td { padding-bottom: var(--e-3); }
}
.dn-archivo .dn-docs > tfoot .dn-t-rotulo { text-align: right; color: var(--texto); font-size: 13.5px; font-weight: 600; }
/* LO VENCIDO, EN ROJO (Mario, 15/10/2026: «que eso salga en rojo, lo vencido
   para alarmar»): el rótulo y la cifra. En cero no lleva la clase. */
.dn-archivo .dn-docs > tfoot > tr.dn-vencido > td.dn-t-rotulo,
.dn-archivo .dn-docs > tfoot > tr.dn-vencido > td.dn-d-total { color: var(--rojo); font-weight: 700; }
.dn-archivo .dn-docs > tfoot td.dn-d-total { font-weight: 650; color: var(--texto); }
.dn-archivo .dn-docs > tfoot .nota { margin: 0; text-align: center; }

/* Totales al pie: una línea por moneda, cifras tabulares, sin pegarse arriba. */
.dn-archivo .totales.dn-pie {
  position: static;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--borde);
  background: var(--papel-2);
}
.dn-archivo .dn-pie .fila { padding: 2px 0; }
.dn-archivo .dn-pie .fila span:last-child { font: 650 15px var(--fuente-titulo); font-variant-numeric: tabular-nums; }
.dn-archivo .dn-pie .nota { margin: 4px 0 0; text-align: center; }

/* ---------------------------------------------------- el panel lateral -- */
.dn-archivo .dn-detalle > header { gap: 6px; }
.dn-archivo .dn-panel-arriba { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dn-archivo .dn-panel-arriba h3 { margin: 0; font-size: 17px; }
.dn-archivo .dn-tipo {
  font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue);
}
.dn-archivo .boton.dn-cerrar { font-size: 16px; line-height: 1; padding: 4px 8px; color: var(--tenue); }
.dn-archivo .dn-detalle h3.mono { font-size: 15px; word-break: break-all; }
.dn-archivo .dn-cliente { display: grid; gap: 1px; font-weight: 600; }
.dn-archivo .dn-total-grande {
  font: 650 26px/1.15 var(--fuente-titulo);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  margin-top: 2px;
}
.dn-archivo .dn-grupo { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-archivo .dn-grupo .boton { font-size: 13px; padding: 6px 11px; }
.dn-archivo .dn-mas { border-top: 1px solid var(--borde); padding-top: 8px; gap: 2px; }
.dn-archivo .dn-mas .boton.texto { font-size: 12.5px; padding: 4px 8px; }
.dn-archivo .boton.dn-boton-cobrar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.dn-archivo .dn-billete { display: inline-flex; color: var(--verde); }
.dn-archivo .dn-quien { padding: 10px 18px 14px; border-top: 1px solid var(--borde); }

/* EL PANEL DE VENTAS, TODO CENTRADO (Mario, 1/10/2026, con la captura: «debería
   salir bien centrada la información. todos los cuadritos y todo, hasta lo de
   factura, y el numero y nombre, todo todo»). Solo `.dn-panel-doc`: Gastos y
   Cobrar comparten `.dn-detalle` y `.dn-grupo` y no se tocan. El rótulo
   «FACTURA» queda al medio y la ✕ se cuelga de la esquina; las filas de
   botones ocupan todo el ancho para centrarse en él y bajan de renglón
   centradas, que en el teléfono es lo que importa. */
.dn-archivo .dn-panel-doc { text-align: center; }
.dn-archivo .dn-panel-doc > header { justify-items: center; }
.dn-archivo .dn-panel-doc .dn-panel-arriba { position: relative; justify-content: center; width: 100%; min-height: 28px; }
.dn-archivo .dn-panel-doc .dn-cerrar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.dn-archivo .dn-panel-doc .dn-cliente { justify-items: center; }
.dn-archivo .dn-panel-doc > .dn-cuerpo { justify-items: center; }
.dn-archivo .dn-panel-doc .dn-grupo { justify-content: center; width: 100%; }

/* ------------------------------------------------ Ventas por cobrar -- */
/* CUATRO TARJETAS (Mario, 6/10/2026: «quitemos más de 90 días, y dejemos solo 4
   tarjetas, que la ultima sea más de 60 días»). De cuatro en cuatro en la
   compu; de dos en dos en el teléfono, sin que ninguna quede sola. */
.dn-cobrar .dn-tramos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.dn-cobrar .dn-tramo {
  font: inherit;
  /* CENTRADO (Mario, 22/9/2026: «todos los cuadritos de arriba q dicen al día,
     1 a 30 días, esos 5 cuadritos, deberían salir centrados, la información q
     dice adentro bien centrada en cada cuadrito»). Es la misma regla de la
     casa que ya siguen los cuadros de cifras del Inicio. */
  text-align: center;
  justify-items: center;
  cursor: pointer;
  background: var(--papel);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px 12px;
  display: grid;
  gap: 2px;
  min-width: 0;
  box-shadow: var(--sombra-chica);
  --raya: var(--borde-fuerte);
}
.dn-cobrar .dn-tramo.ok { --raya: var(--verde); }
.dn-cobrar .dn-tramo.camino { --raya: var(--azul); }
.dn-cobrar .dn-tramo.aviso { --raya: var(--ambar); }
.dn-cobrar .dn-tramo.malo { --raya: var(--rojo); }
.dn-cobrar .dn-tramo small { color: var(--tenue); font-size: 12px; }
.dn-cobrar .dn-tramo b { font: 650 16px/1.2 var(--fuente-titulo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dn-cobrar .dn-tramo-cuantas { font-size: 11.5px; color: var(--tenue); }
.dn-cobrar .dn-tramo i { display: block; width: 100%; height: 4px; border-radius: 2px; margin-top: 6px; background: var(--raya); }
.dn-cobrar .dn-tramo:hover { border-color: var(--raya); }
.dn-cobrar .dn-tramo[aria-pressed="true"] {
  border-color: var(--raya);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--raya) 35%, transparent);
}
.dn-cobrar .dn-segmentos[hidden] { display: none; }
.dn-cobrar .dn-facturas-cliente td { vertical-align: top; }
.dn-cobrar .dn-facturas-cliente .nota { font-size: 12px; }
.dn-cobrar .boton.dn-cobrar-cliente { width: 100%; }
.dn-cobrar .dn-por-aplicar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--borde);
}
.dn-cobrar .dn-panel-cliente .dn-vacio { padding: 28px 16px; }
/* Avisos y «Por aplicar» de abajo: en su tarjeta, como la lista. */
.dn-cobrar > .aviso-fijo, .dn-cobrar > div > .aviso-fijo { margin: 0 0 8px !important; }
.dn-cobrar .dn-cobros-periodo { padding-top: 12px; }

@media (max-width: 560px) {
  .dn-cobrar .dn-tramos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-archivo .dn-contador { margin-left: 0; }
  .dn-archivo .dn-cabecera .dn-acciones { width: 100%; }
}

/* ------------------------------------------------- Proformas hechas -- */
/* En la compu no hay panel: los botones van en la fila, a la vista. El panel
   solo se ve bajo el renglón tocado, a 1000 px o menos (`panelBajoElRenglon`,
   ui.js); en su lugar de espera, al pie de la lista, nunca. Por eso el renglón
   solo se anuncia como tocable, y se marca, en el teléfono. */
.dn-proformas .dn-lista > .dn-panel-doc { display: none; }
@media (max-width: 1000px) {
  .dn-proformas tr.pf-fila { cursor: pointer; }
  .dn-proformas tr.pf-elegida > td { background: var(--azul-suave); }
  .dn-proformas tr.pf-elegida > td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
}

/* ------------------------------------------------ Ventas programadas -- */
.dn-archivo .dn-programadas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}
.dn-archivo .dn-programada {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-chica);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.dn-archivo .dn-programada.pausada { background: var(--papel-2); }
.dn-archivo .dn-programada > header { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.dn-archivo .dn-programada h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.dn-archivo .dn-programada-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.dn-archivo .dn-programada-datos > div { display: grid; gap: 1px; }
.dn-archivo .dn-programada-datos small { color: var(--tenue); font-size: 11.5px; }
.dn-archivo .dn-programada-datos b { font-variant-numeric: tabular-nums; }
.dn-archivo .dn-programada .dn-acciones { border-top: 1px solid var(--borde); padding-top: 10px; }
/* El vacío y el error ocupan toda la rejilla, no una columna de tarjeta. */
.dn-archivo > .dn-programadas > .dn-error { grid-column: 1 / -1; }
.dn-archivo > .dn-programadas > .dn-vacio {
  grid-column: 1 / -1;
  background: var(--papel);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-grande);
}

/* La tabla de facturas del panel cabe en el panel (la regla general pide 760 px). */
.dn-cobrar .envoltorio-tabla table.dn-facturas-cliente { min-width: 0; width: 100%; }
.dn-cobrar .dn-facturas-cliente td, .dn-cobrar .dn-facturas-cliente th { text-align: center; padding: 8px 6px; }
.dn-cobrar .dn-facturas-cliente td.numero { text-align: center; white-space: nowrap; }
.dn-cobrar .dn-facturas-cliente th.numero { text-align: center; white-space: nowrap; }
.dn-cobrar .dn-facturas-cliente td:first-child { width: 1%; }
/* Bajo el renglón del cliente (teléfono) el panel es más angosto: celdas más
   apretadas, y el «de ₡…» del saldo puede bajar de renglón. Medido a 320 px
   (tests/panel-bajo-el-renglon-medido-en-edge.test.ts). */
.dn-cobrar .dn-panel-marco .dn-facturas-cliente td, .dn-cobrar .dn-panel-marco .dn-facturas-cliente th { padding-inline: 3px; }
.dn-cobrar .dn-panel-marco .dn-facturas-cliente td.numero .nota { white-space: normal; }
/* Los totales de «Cobros del período» respiran como los de la lista. */
.dn-cobrar .dn-cobros-periodo > .totales { position: static; padding: 10px 16px 12px; border-top: 1px solid var(--borde); background: var(--papel-2); }

/* «COBROS DEL PERÍODO», PLEGADO CON SU «VER» (Mario, 6/10/2026: «los cobros del
   periodo también, con eso q dice ver»). Es un <details>: el título a la
   izquierda y el botoncito en la esquina, que dice «Ver» cerrado y «Ocultar»
   abierto. Toda la franja se toca, no solo el botoncito. */
.dn-cobrar .dn-cobros-periodo { padding-top: 0; }
.dn-cobrar .dn-cobros-periodo > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  list-style: none;
}
.dn-cobrar .dn-cobros-periodo > summary::-webkit-details-marker { display: none; }
.dn-cobrar .dn-cobros-periodo > summary h3 { margin: 0; font-size: var(--t-titulo); }
.dn-cobrar .dn-cobros-periodo > summary:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.dn-cobrar .dn-cobros-periodo > summary:hover .dn-ver { border-color: var(--texto); }
.dn-cobrar .dn-cobros-periodo[open] > summary { border-bottom: 1px solid var(--borde); margin-bottom: var(--e-3); }
.dn-cobrar .dn-ver { padding: 4px 14px; font-size: 13px; pointer-events: none; }
.dn-cobros-periodo[open] .dn-al-cerrado,
.dn-cobros-periodo:not([open]) .dn-al-abierto { display: none; }
/* Con el panel abierto AL LADO, los iconitos de la fila sobran: las mismas
   acciones están en el panel, y la lista no se estira hacia abajo. En Cobrar
   (`.apilado`) el cuadro va DEBAJO y es el del cliente: ahí se quedan. */
.dn-archivo .dn-dividido:not(.sin-detalle):not(.apilado) .dn-lista .dn-d-acciones { display: none; }
.dn-archivo .dn-dividido:not(.sin-detalle):not(.apilado) .dn-lista > .envoltorio-tabla > table { min-width: 560px; }

/* ============================================================ el teléfono == */
/* EN EL TELÉFONO, TARJETAS (sugerencia 1, aceptada por Mario el 4/10/2026: «me
   gusta como se ve pero el numero de factura debe ser visible, solo el
   consecutivo final»). La tabla de Ventas medía 1,036 px en un marco de 353: el
   total, el estado y los iconitos quedaban escondidos a la derecha. Es la MISMA
   tabla (`.dn-docs`): aquí cada renglón se acomoda como una tarjeta —el
   cliente y el total arriba; el número corto, la fecha y los dos estados
   abajo— y los títulos de columna quedan solo para el lector de pantalla. Los
   iconitos no van en la tarjeta: al tocarla, las mismas acciones salen debajo,
   en el panel (`panelBajoElRenglon`, ui.js). El sombreado de zebra entre una y
   otra se queda (Mario, 15/9/2026). En la compu sigue la tabla.

   Y BAJITA (Mario, 15/9/2026: «que el renglón de la factura no sea tan re
   ancho a como está, se ve horrible»): los dos estados van en la columna del
   total, debajo de él, y el nombre del cliente ocupa esa misma altura a la
   izquierda; así una tarjeta mide unos 100 px con el nombre en uno, dos o tres
   renglones. La cédula no va en la tarjeta: sale en el panel, al tocarla. */
@media (max-width: 700px) {
  .dn-archivo .envoltorio-tabla table.dn-docs { display: block; min-width: 0; }
  /* Con el panel abierto la tabla de la compu pide 560 px: aquí las tarjetas
     siguen midiendo lo que la ventana, o se saldrían de lado al tocarlas. */
  .dn-archivo .dn-dividido:not(.sin-detalle) .dn-lista > .envoltorio-tabla > table.dn-docs { min-width: 0; }
  .dn-archivo .dn-docs > thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .dn-archivo .envoltorio-tabla:has(> .dn-docs) { position: relative; }
  .dn-archivo .dn-docs > tbody,
  .dn-archivo .dn-docs > tbody > tr,
  .dn-archivo .dn-docs > tbody > tr > td { display: block; }
  .dn-archivo .dn-docs > tbody > tr.dn-fila,
  .dn-archivo .dn-docs > tbody > tr.pf-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "cliente cliente total"
      "cliente cliente estado"
      "numero  fecha   estado";
    align-items: start;
    gap: 6px var(--e-2);
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borde);
  }
  /* Proformas: un solo estado, y el vencimiento en su propio renglón. */
  .dn-archivo.dn-proformas .dn-docs > tbody > tr.pf-fila {
    grid-template-areas:
      "cliente cliente total"
      "numero  fecha   estado"
      "vence   vence   estado";
  }
  .dn-archivo .dn-docs > tbody > tr.dn-fila > td,
  .dn-archivo .dn-docs > tbody > tr.pf-fila > td {
    width: auto; padding: 0; border: 0; background: transparent; box-shadow: none;
    text-align: left; white-space: normal; font-size: var(--t-nota); font-weight: 400; color: var(--tenue);
  }
  .dn-archivo .dn-docs > tbody > tr > td.dn-d-cliente {
    grid-area: cliente;
    color: var(--texto); font: 650 14px/1.3 var(--fuente-titulo); overflow-wrap: anywhere;
  }
  .dn-archivo .dn-docs > tbody > tr > td.dn-d-cliente .nota { display: none; }
  .dn-archivo .dn-docs > tbody > tr > td.dn-d-total {
    grid-area: total; padding-left: var(--e-2); text-align: right; white-space: nowrap;
    color: var(--texto); font-size: 15px; font-weight: 650;
  }
  /* Abajo: «N.º 3024 · 06/10/2026» a la izquierda y los estados a la derecha. */
  .dn-archivo .dn-docs > tbody > tr > td.dn-d-numero { grid-area: numero; white-space: nowrap; }
  .dn-archivo .dn-docs > tbody > tr:not(.dn-fila-panel) .dn-numero-corto { font-size: 13.5px; }
  .dn-archivo .dn-docs > tbody > tr:not(.dn-fila-panel) .dn-numero-corto::before { content: "N.º "; font-weight: 450; color: var(--tenue); }
  .dn-archivo .dn-docs > tbody > tr > td.dn-d-fecha { grid-area: fecha; white-space: nowrap; }
  /* El puntito, con el mismo aire a los dos lados (7/10/2026): antes llevaba
     el hueco de la rejilla a la izquierda (8 px) y un espacio a la derecha (3). */
  .dn-archivo .dn-docs td.dn-d-fecha::before { content: "·"; margin-inline: calc(var(--e-1) - var(--e-2)) var(--e-1); }
  /* Y el número y la fecha, sobre el mismo renglón de letra: el número es más
     grande, y arrancando parejos por arriba la fecha quedaba un pelo más alta. */
  .dn-archivo .dn-docs > tbody > tr > td.dn-d-numero,
  .dn-archivo .dn-docs > tbody > tr > td.dn-d-fecha,
  .dn-archivo .dn-docs tr.dn-fila:has(.dn-tipo-doc) .dn-numero-corto { align-self: baseline; }

  /* CUANDO EL RENGLÓN DICE EL TIPO («Tiquete», «Nota de crédito», «Factura de
     compra»), la palabra va en SU renglón, encima del número (revisión de la
     fase 3, 7/10/2026). En un solo renglón —«Factura de compra N.º 3015 ·
     05/10/2026»— no cabía junto a la pastilla del estado: la revisión midió en
     Edge, a 320 px, que la pastilla tapaba 37 px de la fecha en todas las notas
     y 59 px con una factura de compra, y a 375 también. Así el renglón de abajo es el mismo de
     toda tarjeta, «N.º 17 · 05/10/2026», y la palabra ocupa el que ya estaba
     libre junto al primer estado. La celda del número se deshace
     (`display: contents`) para que la palabra y el número sean dos piezas de la
     tarjeta, cada una en su lugar. Si alguna vez la palabra no cupiera, baja de
     renglón: nunca se mete debajo de la pastilla. */
  .dn-archivo .dn-docs > tbody > tr.dn-fila:has(.dn-tipo-doc) {
    grid-template-areas:
      "cliente cliente total"
      "tipo    tipo    estado"
      "numero  fecha   estado";
  }
  .dn-archivo .dn-docs > tbody > tr.dn-fila:has(.dn-tipo-doc) > td.dn-d-numero { display: contents; }
  .dn-archivo .dn-docs tr.dn-fila:has(.dn-tipo-doc) .dn-numero-corto { grid-area: numero; white-space: nowrap; }
  .dn-archivo .dn-docs tr.dn-fila .dn-tipo-doc {
    grid-area: tipo; min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: var(--t-nota);
  }
  .dn-archivo .dn-docs .dn-hora { display: none; }
  .dn-archivo .dn-docs > tbody > tr > td.dn-d-vence { grid-area: vence; white-space: nowrap; }
  .dn-archivo .dn-docs td.dn-d-vence::before { content: "Vence: "; }
  .dn-archivo .dn-docs > tbody > tr > td.dn-d-estado { grid-area: estado; justify-self: end; align-self: end; text-align: right; }
  .dn-archivo.dn-proformas .dn-docs > tbody > tr > td.dn-d-estado { align-self: start; }
  /* Solo los de la tarjeta: los del panel, que aquí vive dentro de la tabla, siguen centrados. */
  .dn-archivo .dn-docs td.dn-d-estado > .dn-estados { justify-items: end; }
  .dn-archivo .dn-docs .dn-d-acciones { display: none; }
  /* La tarjeta tocada: toda en azul suave, con su raya a la izquierda. */
  .dn-archivo .dn-docs > tbody > tr.dn-elegida,
  .dn-archivo .dn-docs > tbody > tr.pf-elegida { background: var(--azul-suave); box-shadow: inset 3px 0 0 var(--azul); }

  /* El total de la lista, bajo los totales de las tarjetas: el rótulo a la
     izquierda y la cifra a la derecha, con el mismo margen que ellas. */
  .dn-archivo .dn-docs > tfoot,
  .dn-archivo .dn-docs > tfoot > tr,
  .dn-archivo .dn-docs > tfoot > tr > td { display: block; }
  .dn-archivo .dn-docs > tfoot { background: var(--azul-suave); border-top: 2px solid var(--azul); padding-block: var(--e-3); }
  .dn-archivo .dn-docs > tfoot > tr > td,
  .dn-archivo .dn-docs > tfoot > tr > td.dn-d-total { width: auto; padding: 0; border: 0; }
  .dn-archivo .dn-docs > tfoot > tr.dn-total-lista {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
    padding: var(--e-1) var(--e-4);
  }
  .dn-archivo .dn-docs > tfoot .dn-t-rotulo { text-align: left; font-size: var(--t-nota); }
  .dn-archivo .dn-docs > tfoot td.dn-d-total { font-size: 15px; }
  .dn-archivo .dn-docs > tfoot .dn-t-resto { display: none; }
  .dn-archivo .dn-docs > tfoot > tr.dn-total-nota { padding: var(--e-1) var(--e-4) 0; }

  /* ZONAS DE TOQUE DE 40 PX (revisión de la fase 3, 7/10/2026). Lo que en el
     teléfono se aprieta con el dedo y medía menos: los filtros (34 px), los
     botones del panel (34), los iconitos de cada factura en el panel de Cobrar
     (28) y la pastilla del estado de Hacienda (21), que desde el 5/10 se
     aprieta siempre. A la pastilla no se le agranda el dibujo: se le estira la
     zona que la envuelve, hacia arriba —donde no hay nada que se apriete— y
     apenas hasta el estado de pago por abajo. */
  .dn-archivo .dn-zona { padding: 15px 0 var(--e-1); margin: -15px 0 calc(-1 * var(--e-1)); cursor: pointer; }
  .dn-archivo .dn-detalle .boton { min-height: 40px; }
  /* La ✕ crece hacia el margen del panel, no hacia el nombre: sin esto le quitaba
     ancho al título y «Grupo Veterinario de Ejemplo S.R.L.» se partía en dos. */
  .dn-archivo .dn-detalle .boton.dn-cerrar { min-width: 40px; margin-block: -6px; }
  .dn-cobrar .dn-panel-cliente .boton.dn-cerrar { margin-inline-end: -10px; }

  /* LOS ICONITOS DE CADA FACTURA, EN EL PANEL DE COBRAR: DOS RENGLONES Y EL
     DIBUJO CHICO (Mario, 7/10/2026, al verlos de 40 px en tres renglones:
     «Prefiero 2 renglones más chicos.»). El dibujo se queda en 28 px y van 8 y
     7. Lo que crece es la ZONA DE TOQUE de cada uno, como en la pastilla de
     Hacienda: cada casilla de la rejilla mide el ancho del panel entre los que
     van por renglón —lo más que cabe sin pasar a un tercero, hasta 40 px— por
     40 de alto, y el iconito responde en toda su casilla aunque se dibuje en el
     centro. La casilla es su `::after` (el del XML ya son sus paréntesis: ahí
     es el de su palabra). Sin hueco entre casillas: una zona no se monta sobre
     el dibujo del vecino. */
  .dn-cobrar .dn-iconos-caja { container-type: inline-size; }
  .dn-cobrar .dn-iconos-factura .acciones-doc {
    --zona: 30px;
    grid-template-columns: repeat(var(--por-renglon), var(--zona));
    grid-auto-rows: 40px;
    gap: 0; min-width: 0;
    justify-items: center; align-items: center;
  }
  @supports (width: 1cqw) {
    .dn-cobrar .dn-iconos-factura .acciones-doc { --zona: min(40px, calc(100cqw / var(--por-renglon))); }
  }
  .dn-cobrar .dn-iconos-factura .icono-doc { position: relative; }
  .dn-cobrar .dn-iconos-factura .icono-doc:not(.icono-xml)::after,
  .dn-cobrar .dn-iconos-factura .icono-xml > .xml-mini::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: var(--zona); height: 40px; transform: translate(-50%, -50%);
  }
  /* (La palabra «XML» va corrida 2 px para abajo y no atiende al dedo: su zona sí.) */
  .dn-cobrar .dn-iconos-factura .icono-xml > .xml-mini::after {
    transform: translate(-50%, calc(-50% - 2px)); pointer-events: auto;
  }

  /* LOS FILTROS, COMPACTOS (informe del 6/10/2026: «los filtros compactos
     arriba de la lista; el resultado primero»). Uno por renglón eran 330 px
     antes de ver la primera venta: aquí el buscador va a todo el ancho y los
     demás de dos en dos, con las dos fechas en su propia fila. */
  .dn-archivo .dn-filtros {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense;
    gap: var(--e-2); padding: var(--e-3);
  }
  /* (`.dn-f-ancho` también: su mínimo de la compu, 170 px, no cabe en media
     fila de un teléfono y dejaba el desplegable cortado contra el borde.) */
  .dn-archivo .dn-filtros > *,
  .dn-archivo .dn-filtros > .dn-f-ancho { min-width: 0; }
  .dn-archivo .dn-filtros > .dn-f-buscar,
  .dn-archivo .dn-filtros > .dn-f-entero,
  .dn-archivo .dn-filtros > .dn-entre-fechas,
  .dn-archivo .dn-filtros > .dn-contador { grid-column: 1 / -1; min-width: 0; }
  .dn-archivo .dn-filtros > .dn-contador { text-align: center; white-space: normal; }
  .dn-archivo .dn-filtros input:not([type="checkbox"]),
  .dn-archivo .dn-filtros select { width: 100%; min-width: 0; min-height: 40px; }
  .dn-archivo .dn-entre-fechas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  .dn-archivo .dn-entre-fechas input[type="date"] { width: 100%; }
  /* Cobrar: el buscador a todo el ancho —su rótulo de adentro, «Cédula o nombre
     del cliente…», cabe entero (Mario, 22/9/2026)— y «Solo las vencidas» en su
     renglón, con el interruptor al lado del rótulo y no debajo. */
  .dn-cobrar .dn-filtros > .dn-f-buscar input { max-width: none; }
  .dn-cobrar .dn-filtros > .dn-f-vencidas { grid-column: 1 / -1; }
  .dn-cobrar .dn-filtros > .dn-f-vencidas > .campo {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--e-2);
  }
  .dn-cobrar .dn-filtros > .dn-f-vencidas label { margin: 0; }

  /* COBRAR: CADA FACTURA, LA TARJETA DE VENTAS PAGADAS (Mario, 15/10/2026: «el
     mismo formato q en ventas pagadas»). Arriba el cliente y el saldo; abajo
     el número y la fecha, y en su renglón cuándo vence, como en Proformas; el
     estado («Al día», «6 días vencida») a la derecha. */
  .dn-archivo.dn-cobrar .dn-docs > tbody > tr.dn-fila {
    grid-template-areas:
      "cliente cliente total"
      "numero  fecha   estado"
      "vence   vence   estado";
  }
  .dn-archivo.dn-cobrar .dn-docs > tbody > tr.dn-fila:has(.dn-tipo-doc) {
    grid-template-areas:
      "cliente cliente total"
      "tipo    tipo    estado"
      "numero  fecha   estado"
      "vence   vence   estado";
  }
}

/* EL TELÉFONO MÁS ANGOSTO (320 px). Lo que a 375 cabe en un renglón y aquí no:
   en el panel del cliente, «120 día(s) vencida» al lado de un saldo de
   millones, que lo sacaba 28 px de su marco. La pastilla de los días se parte
   en dos renglones. (Los iconitos
   del panel van en dos renglones en todo teléfono, con el dibujo de 28 px y la
   zona de toque que quepa: ver arriba.) */
@media (max-width: 360px) {
  /* Las dos fechas de los filtros: en media fila de 320 px, «dd/mm/aaaa» quedaba
     cortado contra el iconito del calendario. Con menos relleno cabe entero. */
  .dn-archivo .dn-entre-fechas input[type="date"] { padding-inline: var(--e-1); }
  .dn-cobrar .dn-panel-marco .dn-facturas-cliente .pastilla { white-space: normal; border-radius: var(--radio-grande); }
}