/* PRUEBA DE DISEÑO — diseno-listas.css. Usa los tokens de diseno.css.
   Reportes (.reportes), Clientes (.cli), Artículos (.art) y Listas de
   precios (.lp). Todo acotado a su pantalla. */

/* =============================================================== Reportes */
/* LA CARA DE LA VERSIÓN 3 (fase 5, 6/10/2026; fichas 53 a 65 del informe y la
   lámina 06). Arriba, qué reporte; después una franja con el período, los
   filtros y las acciones; y el resultado con su resumen antes que el detalle.
   En el teléfono nada corre de lado: cada tabla se lee como tarjetas. Todo con
   la escala de diseno.css. */

/* ---- la galería, en grupos ---- */
/* Cada familia es un grupo con su título y sus tarjetas; los grupos van uno
   al lado del otro mientras quepan. Sigue lo que pidió Mario: todo centrado
   adentro de cada tarjeta y un tono tenue por familia (17/9/2026), y la fila
   que no se llena, en el centro (18/9/2026: «los 3 de declaraciones deben ir
   centrados abajo, para q se vea más bonito»). */
.reportes .dn-galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  /* Entre grupos vecinos, lo mismo que entre tarjetas: así los renglones
     miden igual y sus orillas calzan; el tono y el título los separan. */
  gap: var(--e-4) var(--e-2);
}
.reportes .dn-rep-grupo,
.reportes .dn-rep {
  --rep-fondo: var(--papel);
  --rep-borde: var(--borde);
  --rep-rotulo: var(--azul);
}
/* Ventas en verde, Compras en naranja («simbolizando ingresos y gastos») y
   Declaraciones en morado tenue (Mario, 17/9/2026: el gris azulado se perdía
   contra el fondo). El tono es del grupo y de cada una de sus tarjetas. */
.reportes [data-familia="ventas"] { --rep-fondo: #eef7e8; --rep-borde: #7fb85c; --rep-rotulo: #2d6a0b; }
.reportes [data-familia="compras"] { --rep-fondo: #fdf1e3; --rep-borde: #e3a263; --rep-rotulo: #97470a; }
.reportes [data-familia="declaraciones"] { --rep-fondo: #f3eefb; --rep-borde: #a98bd6; --rep-rotulo: #5b3796; }
html[data-theme="oscuro"] .reportes [data-familia="ventas"] { --rep-fondo: #15251a; --rep-borde: #3f7d3a; --rep-rotulo: #93dc8c; }
html[data-theme="oscuro"] .reportes [data-familia="compras"] { --rep-fondo: #2b2014; --rep-borde: #9c6a35; --rep-rotulo: #f2b47c; }
html[data-theme="oscuro"] .reportes [data-familia="declaraciones"] { --rep-fondo: #231a33; --rep-borde: #7657a8; --rep-rotulo: #cdb6f2; }

.reportes .dn-rep-grupo { display: grid; gap: var(--e-2); justify-items: center; min-width: 0; max-width: 100%; }
.reportes .dn-rep-grupo > h3 {
  margin: 0;
  font: 650 var(--t-titulo)/1.3 var(--fuente-titulo);
  color: var(--rep-rotulo);
  text-align: center;
}
.reportes .dn-rep-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); max-width: 100%; }
.reportes .dn-rep {
  width: 184px;
  /* Tres renglones de frase: así las tarjetas de dos grupos vecinos miden igual. */
  min-height: 112px;
  display: grid;
  gap: 3px;
  align-content: start;
  justify-items: center;
  text-align: center;
  font: inherit;
  color: var(--texto);
  background: var(--rep-fondo);
  border: 1px solid var(--rep-borde);
  border-top-width: 4px;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-chica);
  padding: var(--e-3) 14px;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.reportes .dn-rep:hover { border-color: var(--azul); box-shadow: var(--sombra-media); }
/* La escogida conserva su tono y se marca con el azul de la casa, grueso. */
.reportes .dn-rep[aria-pressed="true"] {
  border-color: var(--azul);
  box-shadow: inset 0 0 0 2px var(--azul), var(--sombra-chica);
}
.reportes .dn-rep b { font: 650 var(--t-titulo)/1.3 var(--fuente-titulo); overflow-wrap: anywhere; }
.reportes .dn-rep small { color: var(--tenue); font-size: var(--t-nota); }

/* El título de la pantalla vive en .dn-cabecera, con «Ver todos los reportes»
   en la esquina cuando hay un reporte abierto. */
.reportes .dn-cabecera { margin-bottom: 0; align-items: center; }

/* ---- la franja de filtros ---- */
/* Qué reporte, de cuándo y de quién, en un renglón; debajo los atajos, «Más
   filtros» plegado y las acciones. Rótulos y campos centrados, como en toda
   la casa (Mario, 17/9/2026). */
.reportes .dn-rep-filtros > .cuerpo { display: grid; gap: var(--e-3); }
.reportes .dn-rep-franja {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: var(--e-3) var(--e-5);
}
.reportes .dn-rep-franja > .campo { flex: 0 0 auto; min-width: 0; max-width: 100%; }
/* La franja es hija de una rejilla: sin esto no baja de lo que mide su contenido sin partir, y un
   nombre largo en el cliente escogido (nowrap) la estiraba más allá de la ventana (8/10/2026). */
.reportes .dn-rep-franja { min-width: 0; }
/* El único que cede ancho: el período y el desplegable miden lo que piden. */
.reportes .dn-rep-franja > .dn-rep-cliente { flex: 1 1 240px; max-width: 380px; }
/*
 * EL CLIENTE O PROVEEDOR ESCOGIDO, DEL TAMAÑO DE LOS OTROS CAMPOS (Mario,
 * 8/10/2026: «super horrible ese cuadrito […] Q salga del mismo tamaño de los
 * otros y si no cabe pues q aparezcan unos puntitos como de q continua y si se
 * para encima uno q aparezca el nombre completo»). Era una tarjeta de 64 px
 * con el nombre, la cédula y un botón «Quitar»; ahora es UN campo de una
 * línea, del alto de «Reporte» y de las fechas (en la compu «Reporte» mide 36
 * px y las fechas nativas 38, así que mide 37, a 1 px de las dos; en el
 * teléfono, 40 como todas): el nombre al centro —como el texto de los demás filtros—, cortado
 * con «…» si no cabe, y la ✕ para quitarlo ADENTRO, a la derecha. El nombre
 * entero con su cédula sale en el `title` y en el `aria-label` (reportes.js).
 *
 * El relleno es parejo a los dos lados (36 px) para que el nombre quede al
 * centro del campo y sus puntitos no pasen por debajo de la ✕. El contorno es
 * el de los campos (--borde-tarjeta, 6 px de esquina como en diseno-lamina.css)
 * y va como sombra por dentro: así la ✕ puede medir el alto entero del campo
 * —40 px de dedo en el teléfono— sin que un borde le coma 2.
 */
.reportes .rep-elegido {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 37px;
  padding: 0 36px;
  background: var(--papel-2);
  box-shadow: inset 0 0 0 1px var(--borde-tarjeta);
  border-radius: 6px;
  color: var(--texto);
}
.reportes .rep-elegido-nombre {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.reportes .rep-elegido-quitar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: var(--tenue);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.reportes .rep-elegido-quitar:hover { color: var(--texto); }
.reportes .rep-elegido-quitar:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.reportes .dn-rep-franja .rango-fechas { flex-wrap: nowrap; }
/* El desplegable mide lo que su texto más largo y no más (Mario, 22/8/2026:
   «debe ser mucho más corto, se ve feísimo»): suelto en la franja ya no tiene
   un renglón que lo estire. */
.reportes .dn-rep-franja select.w-tipo { width: calc(var(--caracteres) + var(--marco-campo, 22px)); }

/* LOS ATAJOS DEL PERÍODO: CENTRADOS Y CON COLOR (Mario, 19/9/2026: «que en
   los reportes lo de hoy, este mes este año y todo eso, sea centrado en esa
   ventana» y «ponerlos en algun colorcito para q de contraste»). El tono es
   el azul de la casa —el mismo de las pastillas y del encabezado de las
   tablas—, que es el que ya significa «esto se toca». */
.reportes .dn-rep-atajos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.reportes .dn-rep-atajos .boton {
  border-color: var(--azul);
  background: var(--azul-suave);
  color: var(--azul);
}
.reportes .dn-rep-atajos .boton:hover:not(:disabled) {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

/* «Más filtros»: lo que se usa para buscar UN comprobante, plegado. */
.reportes .dn-rep-mas { border-top: 1px solid var(--borde); padding-top: var(--e-2); }
.reportes .dn-rep-mas > summary {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 6px var(--e-3);
  border-radius: var(--radio-control);
  font-weight: 600;
  color: var(--azul);
}
.reportes .dn-rep-mas > summary:hover { background: var(--azul-suave); }
.reportes .dn-rep-mas[open] > summary { margin-bottom: var(--e-3); }
/* «Total» e «Impuesto» son DOS grupos de tres cuadritos: con el mismo aire
   entre grupos que entre cuadritos se leían como una fila de seis. */
.reportes .dn-rep-montos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: var(--e-6); }
/* «los últimos dígitos» entero: el cuadrito era de código corto y lo cortaba. */
.reportes .dn-rep-mas input.w-codigo { --caracteres: 20ch; }

/* Las acciones, juntas y centradas: la casilla, la consulta y el Excel. */
.reportes .dn-rep-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2) var(--e-4);
}
/* La casilla de convertir: aire entre el cuadrito y el texto (19/9/2026). */
.reportes .dn-rep-colones {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}
.reportes .dn-rep-acciones .boton.primario { padding: 9px 20px; font-size: var(--t-texto); }

/* ---- el resultado ---- */
/* Qué es y de cuándo, centrado; debajo, los filtros puestos con su botón. */
.reportes .dn-rep-cabeza { display: grid; gap: 2px; justify-items: center; text-align: center; margin-bottom: var(--e-3); }
.reportes .dn-rep-cabeza h3 { margin: 0; font-size: 17px; }
.reportes .dn-rep-cabeza .nota { margin: 0; font-size: var(--t-nota); }
.reportes .dn-rep-puestos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2); margin-top: var(--e-1); color: var(--texto); }
/* Los títulos de cada parte del resultado y sus notas, centrados como lo demás. */
.reportes .dn-rep-salida h3,
.reportes .dn-rep-salida .nota { text-align: center; }
/* LAS ADVERTENCIAS, ENTERAS Y ORDENADAS (ficha 64: «reduce esfuerzo sin
   ocultar advertencias»). Siguen en rojo y a la vista, antes de la lista que
   se copia; cada una en su recuadro, con el texto corrido a la izquierda —un
   párrafo largo centrado no se lee— y el recuadro centrado en la tarjeta. */
.reportes .dn-rep-salida .nota.mala {
  max-width: 96ch;
  margin: var(--e-2) auto;
  padding: var(--e-2) var(--e-3);
  text-align: left;
  font-size: var(--t-nota);
  line-height: 1.5;
  background: var(--rojo-suave);
  border-left: 3px solid var(--rojo);
  border-radius: var(--radio-chico);
}
/* Un número no se parte en dos renglones: «−» arriba y «₡500.00» abajo. */
.reportes .dn-rep-salida td.numero { white-space: nowrap; }

/* El resumen arriba del detalle. */
.reportes .dn-rep-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: var(--e-3) 0 var(--e-4);
}
/* Centrado también a lo alto: cuando un cuadro vecino lleva dos renglones. */
.reportes .dn-rep-resumen .dn-kpi { align-content: center; }
.reportes .dn-rep-resumen .dn-kpi b { font-size: 20px; overflow-wrap: anywhere; }

/* ---- en el teléfono ---- */
@media (max-width: 700px) {
  /* El selector, usable con el pulgar: dos tarjetas por renglón, y la que
     queda sola ocupa el renglón entero. */
  .reportes .dn-galeria { display: grid; gap: var(--e-4); }
  .reportes .dn-rep-grupo { justify-items: stretch; }
  .reportes .dn-rep-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reportes .dn-rep { width: auto; min-height: 64px; padding: 10px; align-content: center; }
  .reportes .dn-rep:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .reportes .dn-rep b { font-size: 14px; }
  .reportes .dn-rep small { font-size: 12px; }

  /* Todo lo que se toca mide al menos 40 px de alto: también la casilla de convertir. */
  .reportes .boton,
  .reportes .dn-rep-colones,
  .reportes .dn-rep-mas > summary { min-height: 40px; }
  .reportes .boton { display: inline-flex; align-items: center; justify-content: center; }
  /* Los 40 px salen del renglón (28) y su relleno (6 + 6), NO de un `flex`:
     el `<summary>` tiene que seguir siendo `list-item`, o el navegador le
     quita la flechita y no se nota si «Más filtros» está abierto. */
  .reportes .dn-rep-mas > summary { line-height: 28px; }
  .reportes .dn-rep-franja > .campo { flex: 1 1 100%; }
  .reportes .dn-rep-franja .rango-fechas { flex-wrap: wrap; }
  .reportes .dn-rep-filtros select,
  .reportes .dn-rep-filtros input:not([type="checkbox"]) { min-height: 40px; }
  /* La flecha del buscador de «Cliente o proveedor» mide lo que un botón. */
  .reportes .buscador .abrir { right: 0; width: 40px; height: 40px; }
  .reportes .buscador.con-flecha input { padding-right: 40px; }
  .reportes .dn-rep-franja > .dn-rep-cliente { max-width: none; }
  /* El cliente escogido mide como los demás campos del teléfono (40 px), y su ✕, el dedo entero. */
  .reportes .rep-elegido { height: 40px; padding: 0 40px; }
  .reportes .rep-elegido-quitar { width: 40px; }
  /* Los atajos, juntos y al centro: con el margen automático de la base cada
     renglón se repartía distinto. */
  .reportes .dn-rep-atajos .atajo-fecha { margin-inline: 0; }
  /* En «Más filtros», uno por renglón: de dos en dos, a 375 el desplegable
     de la moneda medía 155 px y decía «Todas las moneda». */
  .reportes .dn-rep-mas .fila-filtros { grid-template-columns: minmax(0, 1fr); }
  .reportes .dn-rep-acciones .boton.primario { flex: 1 1 auto; }

  /* El remate del IVA («Impuesto a pagar») cabe en un renglón. */
  .reportes .dn-rep-salida .totales .fila.grande { font-size: 18px; }

  /* El resumen: de dos en dos, y el que queda solo —el total— a lo ancho. */
  .reportes .dn-rep-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  .reportes .dn-rep-resumen .dn-kpi { padding: 10px var(--e-2); }
  .reportes .dn-rep-resumen .dn-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .reportes .dn-rep-resumen .dn-kpi b { font-size: clamp(14px, 4.2vw, 20px); }

  /* LA MISMA TABLA, COMO TARJETAS (sugerencia 1, aceptada por Mario el
     4/10/2026). Cada celda trae el título de su columna (`data-rotulo`) y su
     papel (`data-papel`, ver `tabla` en reportes.js): el título de la tarjeta
     arriba; los datos en un renglón corrido; y los números uno por renglón,
     el rótulo a la izquierda y la cifra a la derecha, alineadas entre sí. Los
     títulos de columna quedan solo para el lector de pantalla. */
  .reportes .envoltorio-tabla { overflow-x: visible; position: relative; }
  /* La lista larga del detallado sigue acotada, ahora por el alto de la pantalla. */
  .reportes .envoltorio-tabla.acotado { max-height: 70vh; overflow-x: hidden; }
  .reportes .envoltorio-tabla table { display: block; min-width: 0; width: 100%; }
  .reportes .envoltorio-tabla thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .reportes .envoltorio-tabla tbody { display: grid; gap: var(--e-2); }
  .reportes .envoltorio-tabla tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 3px var(--e-3);
    padding: var(--e-3);
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
  }
  .reportes .envoltorio-tabla tbody tr:hover td { background: transparent; }
  .reportes .envoltorio-tabla tbody td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .reportes .envoltorio-tabla tbody td:empty { display: none; }
  .reportes .envoltorio-tabla td[data-papel="titulo"] {
    order: 0; flex: 1 1 100%;
    font: 650 14.5px/1.3 var(--fuente-titulo); color: var(--texto);
  }
  .reportes .envoltorio-tabla td[data-papel="dato"] { order: 1; color: var(--tenue); }
  .reportes .envoltorio-tabla td[data-papel="dato"]::before { content: attr(data-rotulo) ": "; }
  .reportes .envoltorio-tabla td[data-papel="monto"],
  .reportes .envoltorio-tabla td[data-papel="total"] {
    order: 2; flex: 1 1 100%;
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
    text-align: right; font-variant-numeric: tabular-nums;
  }
  .reportes .envoltorio-tabla td[data-papel="monto"]::before,
  .reportes .envoltorio-tabla td[data-papel="total"]::before {
    content: attr(data-rotulo);
    font: 450 13px var(--fuente-texto); color: var(--tenue); text-align: left;
  }
  .reportes .envoltorio-tabla td[data-papel="total"] { font-weight: 650; color: var(--texto); }
  .reportes .envoltorio-tabla td[data-papel="accion"] { order: 4; flex: 1 1 100%; margin-top: var(--e-1); }
  .reportes .envoltorio-tabla td[data-papel="accion"] .boton { width: 100%; }

  /* El número corto (Mario, 4/10/2026: «solo 3024»). El entero sigue en la
     celda —se copia y lo lee el lector—; aquí se ve el corto. */
  .reportes .dn-rep-consecutivo { font-size: 0; }
  .reportes .dn-rep-consecutivo::after { content: attr(data-corto); font-size: 13px; font-weight: 600; color: var(--texto); }

  /* LOS TOTALES, SIEMPRE A LA VISTA: su renglón es una tarjeta marcada, con
     lo que dice («TOTAL», «Subtotal 001 · …») de título. */
  .reportes .envoltorio-tabla tbody tr.total { background: var(--azul-suave); border-color: var(--azul); }
  .reportes .envoltorio-tabla tbody tr.total > td { border-top: 0; font-weight: 600; }
  .reportes .envoltorio-tabla tbody tr.total > td:first-child {
    order: 0; flex: 1 1 100%; display: block;
    font: 650 14.5px/1.3 var(--fuente-titulo); color: var(--texto); text-align: center;
  }
  .reportes .envoltorio-tabla tbody tr.total > td:first-child::before { content: none; }
}

/* =============================================================== Clientes */
.cli .cli-lista,
.art .tarjeta,
.lp .tarjeta { overflow: hidden; }

.cli .cli-filtros,
.art .cli-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--borde);
}
.cli .cli-filtros input[type=search],
.art .cli-filtros input[type=search] { flex: 1 1 220px; min-width: 0; }

/* «De venta» y «De compra» (6/10/2026): las dos listas de Artículos, al centro
   y encima de la tarjeta. En una pila el grupo se estira; así queda del ancho
   de sus dos botones. */
.art .art-listas { align-self: center; }

/* LOS FILTROS DE ARTÍCULOS, EN UNO O DOS RENGLONES (ronda 1, 6/10/2026). Los
   `select` heredan `width: 100%` y cada uno tomaba su fila: a 1280 px, con
   actividad y clasificación, eran cuatro renglones de ancho completo antes de
   la tabla. En escritorio llevan ancho propio; en el teléfono siguen apilados. */
@media (min-width: 601px) {
  .art .cli-filtros select { flex: 0 1 280px; width: auto; min-width: 0; }
}
/* En el teléfono «De venta» y «De compra» miden 40 px de alto (medían 32).
   Solo estas dos: el `.dn-segmento` de la casa no se toca. */
@media (max-width: 600px) {
  .art .art-listas .dn-segmento { min-height: 40px; }
}

/* estilo.css les da 760 px mínimo a las tablas: la lista (dos columnas) y la
   ficha angosta no los necesitan, y en la ficha escondían la columna del monto. */
.cli .cli-lista table,
.cli .cli-ficha table { min-width: 0; width: 100%; }
.cli .cli-fila { cursor: pointer; }
/* EL SOMBREADO ENTRE UN CLIENTE Y OTRO (Mario, 22/9/2026: «que haya un
   pequeño sombreado entre un cliente y otro para mayor facilidad de ubicación
   visual»). Es el mismo --papel-2 de la regla general de tablas
   (estilo.css), puesto aquí con nombre y apellido: la lista de clientes vive
   en su propia hoja de diseño y la general no le llegaba.

   El `:not(.dn-escogido)` NO es adorno: este selector pesa más que el del
   cliente escogido (de abajo), y sin él la fila par que uno toca se quedaba
   gris en vez de azul — justo la que hay que distinguir. */
.cli .cli-lista tbody tr.cli-fila:nth-child(even):not(.dn-escogido) > td {
  background: var(--papel-2);
}
.cli .cli-fila.dn-escogido td { background: var(--azul-suave); }
.cli .cli-fila.dn-escogido td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
/* LA LISTA DE CLIENTES, A LA IZQUIERDA (Mario, 25/9/2026, al ver el antes y
   el ahora del centrado: «los clientes se ven mejor alineados a la izquierda
   como antes, lo demás como ahora»). Es la única tabla que no se centra: los
   títulos de columna sí, como todos. */
.cli .cli-lista td { text-align: left; }
.cli .cli-nombre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cli .cli-nombre > div { min-width: 0; }
.cli .cli-nombre b { font-weight: 600; overflow-wrap: anywhere; }
.cli .cli-reactivar { margin-top: 6px; }
/* Solo el DATO va tenue: con `.cli .cli-correo` pelado también se apagaba el
   título de la columna, gris sobre el azul de la cabecera (25/9/2026). */
.cli td.cli-correo { color: var(--tenue); overflow-wrap: anywhere; }

.cli .cli-iniciales {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--sobre-tinta);
  font: 650 16px var(--fuente-titulo);
}
.cli .cli-iniciales.chica {
  width: 32px;
  height: 32px;
  font-size: 12.5px;
  background: var(--azul-suave);
  color: var(--azul);
}

.cli .cli-ficha > header { gap: 10px; }
/* LA FICHA, ORDENADA (Mario, 18/9/2026, con captura): los tres botones de
   arriba centrados, y las pestañas «Datos / Facturas / Estado de cuenta»
   centradas, más chicas y con la pinta de esos tres botones —cuadritos con
   borde— dentro de su recuadro sombreado. */
.cli .cli-ficha > header .dn-acciones { justify-content: center; }
.cli .cli-ficha > header .dn-segmentos { justify-content: center; align-self: center; gap: 6px; padding: 5px; }
.cli .cli-ficha > header .dn-segmento {
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
  background: var(--papel);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 8px;
}
.cli .cli-ficha > header .dn-segmento[aria-pressed="true"] {
  border-color: var(--texto);
  box-shadow: var(--sombra-chica);
}
/* LA CABEZA DE LA FICHA, EN COLUMNA Y CENTRADA (Mario, 1/10/2026: «q la cedula
   y si es fisico o juridico salga centrado debajo del nombre»): el círculo de
   iniciales arriba, el nombre y debajo la cédula con «Física/Jurídica», y las
   pastillas (Contado, Quitado) al final, todo sobre el mismo eje. */
.cli .cli-cabeza { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.cli .cli-cabeza h3 { overflow-wrap: anywhere; }
.cli .cli-datos { display: grid; gap: 10px; }
.cli .cli-dato { display: grid; gap: 1px; }
.cli .cli-dato span { font-size: 12px; color: var(--tenue); }
.cli .cli-dato b { font-weight: 550; overflow-wrap: anywhere; }
/* «Saldo a favor» (Mario, 7/10/2026): arriba de las pestañas, con los
   comprobantes de donde sale —el número a la izquierda, su monto a la derecha—. */
.cli .cli-a-favor {
  display: grid;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ambar-suave);
  text-align: left;
}
.cli .cli-a-favor[hidden] { display: none; }
.cli .cli-a-favor-de { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.cli .cli-a-favor-de li { display: flex; align-items: center; gap: 12px; }
.cli .cli-a-favor-de li > span:first-child { flex: 1; }
.cli .cli-a-favor-de li > span:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cli .cli-barra {
  height: 8px;
  border-radius: 99px;
  background: var(--gris-suave);
  overflow: hidden;
  margin-top: 4px;
}
.cli .cli-barra span { display: block; height: 100%; background: var(--azul); border-radius: inherit; }
.cli .cli-barra span.pasado { background: var(--rojo); }

/* ───────────────────────────────────────────────────────────────────────
   LO QUE MARIO ESCOGIÓ EL 7/10/2026, al comparar tres imágenes de Clientes
   (como estaba, a medias y con todo): «con todos los cambios pero el botón de
   descargar excel me gusta que sea solo el iconito q tenemos, sin las letras q
   dicen descargar excel.» Reemplaza su «déjalo como está actualmente» de la
   sugerencia 8 (4/10/2026) SOLO en estos dos puntos; el de Excel sigue siendo
   solo su iconito (18/9/2026) y aquí no se le toca nada.

   (1) «ESCOGÉ UN CLIENTE», CHICO: vacío, el cuadro no se lleva un tercio de la
   pantalla. La columna de la ficha se angosta y la lista aprovecha ese
   espacio; al escoger un cliente la ficha vuelve a su ancho de siempre. */
.cli .dn-dividido:has(> .cli-ficha-vacia) { grid-template-columns: minmax(0, 1fr) minmax(180px, 230px); }
.cli .cli-ficha.cli-ficha-vacia { box-shadow: var(--sombra-chica); border-style: dashed; }
.cli .cli-ficha.cli-ficha-vacia > .dn-vacio { padding: var(--e-4) var(--e-3); gap: var(--e-1); font-size: var(--t-nota); }
.cli .cli-ficha.cli-ficha-vacia > .dn-vacio b { font-size: 14px; }
@media (max-width: 1000px) {
  .cli .dn-dividido:has(> .cli-ficha-vacia) { grid-template-columns: minmax(0, 1fr); }
  .cli .cli-ficha.cli-ficha-vacia > .dn-vacio { padding: var(--e-3); }
}
/* (2) EL CLIENTE ESCOGIDO, QUE SE NOTE: la raya más gruesa (5 px), su círculo
   lleno en el azul de la casa y su nombre en ese mismo azul y más grueso. No
   depende solo del color: la raya y la negrita se ven igual sin él. */
.cli .cli-fila.dn-escogido td:first-child { box-shadow: inset 5px 0 0 var(--azul); }
.cli .cli-fila.dn-escogido .cli-iniciales.chica { background: var(--azul); color: #fff; }
html[data-theme="oscuro"] .cli .cli-fila.dn-escogido .cli-iniciales.chica { color: #0b1a33; }
.cli .cli-fila.dn-escogido .cli-nombre b { color: var(--azul); font-weight: 700; }
/* En el teléfono la raya la lleva la tarjeta entera: ver el bloque de las tarjetas, más abajo. */
/* ─────────────────────────────── fin de lo escogido el 7/10/2026 */

/* LA CARA DE LA VERSIÓN 3 (fase 4, 7/10/2026). En la compu la lista y la ficha
   NO cambian: de la sugerencia 8 (Clientes) Mario dijo «déjalo como está
   actualmente» (4/10/2026). Lo nuevo es del teléfono —cada cliente, una
   tarjeta (sugerencia 1, que sí aceptó)— y de las piezas de vacío y de error
   (sugerencia 4). */
.cli .cli-lista .cli-estado .dn-error { margin: var(--e-4); }
/* LA FICHA, DE VISITA EN LA LISTA (a 1000 px o menos sale bajo el renglón
   tocado): sus tablas siguen centradas, como a la derecha; lo de «a la
   izquierda» (25/9/2026) es de los renglones de la lista, no de ella. */
.cli .cli-lista .cli-ficha td { text-align: center; }

@media (max-width: 700px) {
  /* CADA CLIENTE, UNA TARJETA: el nombre arriba; debajo su cédula con guiones
     y su correo. Desde el 16/9/2026 el correo se escondía en el teléfono
     («vive en la ficha»): en la tarjeta cabe, y es lo que se busca al mirar la
     lista. Sin correo, la celda no pinta nada. Sigue a la izquierda (Mario,
     25/9/2026) y con su sombreado entre un cliente y otro (22/9/2026). */
  .cli .cli-lista > .envoltorio-tabla { overflow-x: visible; position: relative; }
  .cli .cli-lista > .envoltorio-tabla > table { display: block; }
  .cli .cli-lista > .envoltorio-tabla > table > thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .cli .cli-lista > .envoltorio-tabla > table > tbody { display: block; }
  .cli .cli-lista tr.cli-fila {
    display: block; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borde);
    /* Lo que se toca mide al menos 40 px, también el cliente de un solo renglón. */
    min-height: 40px;
  }
  .cli .cli-lista tr.cli-fila:last-child { border-bottom: 0; }
  .cli .cli-lista tr.cli-fila > td { display: block; padding: 0; border: 0; }
  .cli .cli-lista tr.cli-fila:nth-child(even):not(.dn-escogido) { background: var(--papel-2); }
  /* La raya, de 5 px como en la compu (Mario, 7/10/2026: el escogido, más marcado). */
  .cli .cli-lista tr.cli-fila.dn-escogido { background: var(--azul-suave); box-shadow: inset 5px 0 0 var(--azul); }
  .cli .cli-lista tr.cli-fila.dn-escogido > td:first-child { box-shadow: none; }
  .cli .cli-lista tr.cli-fila:hover > td { background: transparent; }
  /* El correo, bajo la cédula y en su misma raya: el círculo (32) y su aire (10). */
  .cli .cli-lista tr.cli-fila > td.cli-correo { padding-left: 42px; margin-top: 1px; font-size: var(--t-nota); }
  .cli .cli-lista tr.cli-fila > td.cli-correo.cli-sin-correo { display: none; }
  .cli .cli-nombre .pastilla { margin-left: auto; flex: none; }
  /* En la papelera, los dos botones del renglón: lado a lado, de 40 px y con
     16 px entre sí —uno de los dos borra para siempre—. Y EL CORREO VA ANTES
     DE ELLOS: la celda del nombre trae adentro los botones, así que el correo
     (la celda de al lado) caía debajo y pegado a «Borrar para siempre». Con
     `display: contents` el nombre y los botones se acomodan como hijos del
     renglón, y el correo entra en medio (ronda de corrección, 7/10/2026). */
  .cli .cli-lista tr.cli-fila:has(.cli-reactivar) { display: flex; flex-direction: column; }
  .cli .cli-lista tr.cli-fila:has(.cli-reactivar) > td:first-child { display: contents; }
  .cli .cli-lista tr.cli-fila:has(.cli-reactivar) > td.cli-correo { order: 1; }
  .cli .cli-lista tr.cli-fila .cli-reactivar { order: 2; }
  .cli .cli-reactivar { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-top: var(--e-3); }
  .cli .cli-reactivar .boton { flex: 1 1 0; min-width: max-content; min-height: 40px; }

  /* Arriba: lo que se toca, de 40 px; el buscador y las dos vistas, a lo ancho. */
  .cli .dn-cabecera .dn-acciones { width: 100%; justify-content: center; }
  .cli .boton { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .cli .dn-cabecera .boton.primario { flex: 1 1 auto; }
  .cli .cli-filtros { justify-content: center; }
  .cli .cli-filtros input[type=search] { flex: 1 1 100%; min-height: 40px; }
  .cli .cli-filtros .dn-segmento,
  .cli .cli-ficha > header .dn-segmento { min-height: 40px; }

  /* En la ficha, «Eliminar» y «Borrar para siempre», a 16 px de su vecino. */
  .cli .cli-ficha > header .dn-acciones { gap: var(--e-4); }
  /* La ficha, bajo el cliente tocado (ver `panelBajoElRenglon`, ui.js). */
  .cli .cli-lista tr.dn-fila-panel,
  .cli .cli-lista tr.dn-fila-panel > td { display: block; }
  .cli .cli-lista tr.dn-fila-panel { border-bottom: 1px solid var(--borde); }
}

/* ============================================================== Artículos */
.art-zona {
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: 10px 14px 14px;
  margin: 0;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.art-zona > legend {
  padding: 0 6px;
  font: 650 13px var(--fuente-titulo);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--azul);
}

/* «Borrar definitivamente» de un artículo ya usado: se ve apagado y, al
   apretarlo, explica por qué no borra. */
.art .boton.peligro[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* LA CARA DE LA VERSIÓN 3 (fase 4, 7/10/2026; fichas 75 a 77 del informe y la
   lámina 04). La ficha va en bloques —«Qué es», «Impuestos», «Precio» e
   «Inventario»—; «Otros impuestos» dice, cerrado, cuáles están marcados; y en
   el teléfono la lista se lee como tarjetas. Con la escala de diseno.css. */
.art-zona { padding: var(--e-3) var(--e-4) var(--e-4); gap: var(--e-3); }
/* Un desplegable mide lo que su opción más larga: sin esto, a 320 px «Tarifa
   del IVA» ensanchaba su bloque y lo corría 11 px del eje de los demás. */
.art-zona > *,
.art-zona .campo { min-width: 0; }
/* Los subtítulos de un bloque («Contactos que reciben copia…», «Zona franca») y
   sus botones sueltos, al centro como lo demás. */
.art-zona h4,
.art-zona p.nota { text-align: center; }
.art-zona .acciones { justify-content: center; }
/* «Otros impuestos»: su título al centro, con la flechita del navegador (por
   eso sigue siendo `list-item`), y debajo el resumen de lo marcado. */
.art-otros { border-top: 1px solid var(--borde); padding-top: var(--e-2); }
.art-otros > summary {
  display: list-item; list-style-position: inside;
  width: max-content; max-width: 100%; margin-inline: auto;
  padding: 6px var(--e-3); border-radius: var(--radio-control);
  text-align: center; font-weight: 600; color: var(--azul); cursor: pointer;
}
.art-otros > summary:hover { background: var(--azul-suave); }
.art-otros[open] > summary { margin-bottom: var(--e-2); }
.art-otros-resumen {
  display: block; margin-top: 2px;
  font: 450 var(--t-nota)/1.4 var(--fuente-texto); color: var(--tenue); white-space: normal;
}
/* Con alguno marcado, el resumen se nota: es lo que el plegado no puede callar. */
.art-otros-resumen.puesto { color: var(--ambar); font-weight: 600; }
/* Con aire antes del primer interruptor: abierto, la nota le quedaba pegada. */
.art-otros > .nota { text-align: center; margin-bottom: var(--e-3); }
/* Los siete, en una columna al centro del bloque y con sus interruptores en la
   misma raya: centrados uno por uno, cada interruptor caía en un lugar distinto. */
.art-otros > div { width: min(100%, 360px); margin-inline: auto; }
/* El IVA grande (Mario, 14/8/2026), al centro de su bloque como lo demás. */
.art-zona > .iva-articulo { justify-self: center; text-align: center; max-width: 100%; }
/* «GUARDAR», SIEMPRE A LA VISTA (ficha 76 y lámina 14: «acciones fijas en la
   parte inferior»). La ficha es más alta que la ventana; su pie se queda
   pegado abajo mientras el formulario corre. En el teléfono ya lo hacía todo
   cuadro (estilo.css, 8/9/2026); aquí es también en la compu, y solo en este.
   Baja lo que mide el aire de la capa (16 px; 8 en el teléfono): pegado a su
   borde no deja una rendija por donde se asome el formulario. */
.modal:has(.art-zona) > footer { position: sticky; bottom: -16px; z-index: 2; }
/* El cuadro, 40 px más ancho que los demás: lo que le quita el marco de cada
   bloque. Sin eso, en el del cliente la columna de la cédula bajaba de los
   26rem y «Consultar» dejaba de colgar a su derecha (30/9/2026; lo mide
   tests/cedula-centrada-medida-en-edge.test.ts). */
.modal.ancho:has(.art-zona) { max-width: 940px; }
@media (max-width: 700px) {
  .modal:has(.art-zona) > footer { bottom: -8px; }
}
/* En la tabla: una cifra no se parte en dos renglones («13.00» arriba y «%»
   abajo), y los botones de cada renglón van uno al lado del otro mientras
   quepan (Mario, 6/10/2026, de los de Ventas: «hacia la derecha, tal vez en 2
   renglones»). */
.art td.art-c-precio,
.art td.art-c-iva { white-space: nowrap; }
.art td.art-c-acciones .acciones { flex-wrap: wrap; justify-content: center; min-width: 150px; }
/* El cargando y el error de la v3 ocupan el ancho del bloque, no el de su texto. */
.art .tarjeta > .dn-vacio > .dn-huesos,
.art .tarjeta > .dn-vacio > .dn-error { width: 100%; justify-self: stretch; }
.art .tarjeta > .dn-vacio > .dn-huesos .dn-hueso-caja { border: 0; padding: 0; }

@media (max-width: 700px) {
  /* LA MISMA TABLA, COMO TARJETAS (sugerencia 1, aceptada por Mario el
     4/10/2026): el nombre arriba; debajo su CAByS, en un renglón; después el
     código y el IVA con su rótulo y, en la otra punta, el precio —alineado con
     los de las demás tarjetas—; y al pie sus botones, de 40 px. */
  .art .envoltorio-tabla { overflow-x: visible; position: relative; }
  .art .envoltorio-tabla > table { display: block; min-width: 0; }
  .art .envoltorio-tabla > table > thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .art .envoltorio-tabla > table > tbody { display: block; }
  .art tr.art-fila {
    display: grid;
    /* Dos columnas: la del precio mide lo que pide; la otra se lleva el resto. */
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    gap: var(--e-1) var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borde);
  }
  .art tr.art-fila:last-child { border-bottom: 0; }
  .art tr.art-fila:nth-child(even),
  .art tr.art-fila:hover > td { background: transparent; }
  .art tr.art-fila > td {
    display: block; padding: 0; border: 0; background: transparent; min-width: 0;
    text-align: left; font-size: var(--t-nota); color: var(--tenue);
  }
  /* Cada papel va con el camino entero: la celda base (arriba) pesa más que
     «.art td.art-c-…», y el nombre salía en el gris tenue y a 12.5 px (ronda
     de corrección, 7/10/2026). */
  .art tr.art-fila > td.art-c-nombre {
    grid-area: 1 / 1 / auto / -1;
    color: var(--texto); font: 650 14.5px/1.3 var(--fuente-titulo); overflow-wrap: anywhere;
  }
  .art tr.art-fila > td.art-c-nombre .nota { margin: 1px 0 0; font: 450 12px/1.35 var(--fuente-texto); color: var(--tenue); }
  /* El CAByS, en un renglón: el código y lo que quepa de su descripción (entera, al posarse). */
  .art tr.art-fila > td.art-c-cabys { grid-area: 2 / 1 / auto / -1; display: flex; align-items: baseline; gap: var(--e-2); font-size: 12px; }
  .art tr.art-fila > td.art-c-cabys .celda-detalle { flex: 1 1 0; min-width: 0; margin: 0; }
  /* El código va en su renglón, entero: uno de barras (13 dígitos) no cabía
     junto al IVA y partía «Código» arriba y el número abajo. Debajo, el IVA a
     la izquierda y el precio a la derecha. */
  .art tr.art-fila > td.art-c-codigo { grid-area: 3 / 1 / auto / -1; justify-self: start; color: var(--texto); overflow-wrap: anywhere; }
  .art tr.art-fila > td.art-c-iva { grid-area: 4 / 1; justify-self: start; color: var(--texto); white-space: nowrap; }
  .art tr.art-fila > td.art-c-codigo::before,
  .art tr.art-fila > td.art-c-iva::before { content: attr(data-rotulo) " "; font: 450 12px var(--fuente-texto); color: var(--tenue); }
  .art tr.art-fila > td.art-c-precio {
    grid-area: 4 / 2; justify-self: end; text-align: right; white-space: nowrap;
    color: var(--texto); font: 650 15px/1.3 var(--fuente-titulo); font-variant-numeric: tabular-nums;
  }
  .art tr.art-fila > td.art-c-acciones { grid-area: 5 / 1 / auto / -1; margin-top: var(--e-1); }
  .art tr.art-fila > td.art-c-acciones:empty { display: none; }
  /* A 16 px uno del otro: «Borrar definitivamente» va al lado de «Editar». */
  .art tr.art-fila > td.art-c-acciones .acciones { display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: center; }
  .art tr.art-fila > td.art-c-acciones .boton {
    flex: 1 1 0; min-width: max-content; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Arriba: lo que se toca, de 40 px; el buscador y los filtros, a lo ancho. */
  .art .dn-cabecera .dn-acciones { width: 100%; justify-content: center; }
  .art .dn-cabecera .boton { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .art .dn-cabecera .boton.primario { flex: 1 1 auto; }
  .art .cli-filtros { justify-content: center; }
  .art .cli-filtros input[type=search],
  .art .cli-filtros select { flex: 1 1 100%; min-height: 40px; }
  .art .dn-segmento { min-height: 40px; }
  .art .tarjeta > .dn-vacio .boton { min-height: 40px; }
}
/* La ficha en el teléfono: una columna, y campos y botones de 40 px. */
@media (max-width: 700px) {
  .art-zona { padding-inline: var(--e-3); }
  .art-zona .rejilla.c2 { grid-template-columns: minmax(0, 1fr); }
  .art-zona input:not([type=checkbox]):not([type=radio]),
  .art-zona select { min-height: 40px; }
  .art-zona .fila-precios > * { flex: 1 1 100%; max-width: none; }
  /* Los botones de adentro («Consultar», «+ Agregar contacto», «Quitar»). */
  .art-zona .boton { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  /* El código y la descripción de la actividad del cliente, uno debajo del otro. */
  .art-zona .fila-actividad { grid-template-columns: minmax(0, 1fr); }
  /* La flechita de los buscadores (el CAByS, la unidad) mide lo que un botón. */
  .art-zona .buscador .abrir { right: 0; width: 40px; height: 40px; }
  .art-zona .buscador.con-flecha input { padding-right: 40px; }
  .art-otros > summary { line-height: 28px; }
}

/* ======================================================= Listas de precios */
/* LOS PRECIOS A TODO EL ANCHO (Mario, 18/9/2026, con captura: «el cuadro de
   la derecha debería salir del ancho de la página para ver mejor los datos,
   sin tener q corrernos en la barrita»). Las listas y los grupos van arriba,
   uno al lado del otro; la tabla de precios, debajo, con la página entera. */
.lp .lp-dividido { grid-template-columns: minmax(0, 1fr); }
.lp .lp-dividido > .pila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 700px) {
  .lp .lp-dividido > .pila { grid-template-columns: 1fr; }
}
.lp .lp-columna { padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.lp .lp-columna > header,
.lp .lp-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lp .lp-columna h3,
.lp .lp-cabeza h3 { margin: 0; font-size: 16px; }
.lp .lp-opciones { display: grid; gap: 4px; }
.lp .lp-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--texto);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.lp .lp-opcion:hover { background: var(--papel-2); }
.lp .lp-opcion[aria-pressed="true"] {
  background: var(--azul-suave);
  border-color: var(--azul);
  color: var(--azul);
}
.lp .lp-opcion b { font-weight: 600; overflow-wrap: anywhere; }
.lp .lp-grupos { display: grid; gap: 6px; }
.lp .lp-grupo {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.lp .lp-grupo b { overflow-wrap: anywhere; }
.lp .lp-precios > .lp-cabeza { padding: 14px 16px 0; }
.lp .lp-buscar { padding: 10px 16px 0; display: flex; }
.lp .lp-buscar input { flex: 1; min-width: 0; }
.lp .lp-explica { padding: 0 16px; }
.lp .lp-precios .totales { padding: 0 16px 12px; }

/* ============================================================ Importadores */
/* LAS TABLAS DEL CUADRO DE IMPORTAR CABEN EN ÉL (fase 4 de la v3, 7/10/2026):
   la de las columnas del machote y la de lo que no entró heredaban los 760 px
   de mínimo de toda tabla, y en el teléfono corrían de lado dentro de un
   cuadro de 340. Lo que dicen es texto: se parte en renglones. */
.envoltorio-tabla > table.imp-tabla { min-width: 0; width: 100%; }
.imp-tabla td, .imp-tabla th { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .imp-tabla td, .imp-tabla th { padding: 6px; font-size: 13px; }
}

/* LA CARA DE LA VERSIÓN 3 (fase 4, 7/10/2026; fichas 80 a 82 del informe y la
   lámina 04). Vacío y error son las piezas de la fase 1; y en el teléfono los
   precios de la lista se leen como tarjetas, con la pieza de Reportes (cada
   celda trae su papel y el título de su columna). El acomodo de la compu es el
   que Mario pidió el 18/9/2026 y no se toca. */
.lp .lp-estado .dn-error,
.lp .lp-grupos .dn-error { margin: var(--e-3); }
.lp .lp-grupos .dn-vacio { padding: var(--e-4) var(--e-2); }
/* Un precio no se parte en dos renglones. */
.lp .lp-precios td.numero { white-space: nowrap; }

@media (max-width: 700px) {
  .lp .lp-precios > .envoltorio-tabla { overflow-x: visible; position: relative; }
  .lp .lp-precios > .envoltorio-tabla > table { display: block; min-width: 0; width: 100%; }
  .lp .lp-precios > .envoltorio-tabla > table > thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .lp .lp-precios > .envoltorio-tabla > table > tbody { display: block; }
  .lp .lp-precios :where(.envoltorio-tabla > table > tbody) > tr {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--e-1) var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borde);
  }
  .lp .lp-precios tbody > tr:nth-child(even),
  .lp .lp-precios tbody > tr:hover > td { background: transparent; }
  .lp .lp-precios :where(.envoltorio-tabla > table > tbody > tr) > td {
    display: block; padding: 0; border: 0; background: transparent; min-width: 0;
    font-size: 13px; text-align: center; white-space: normal; overflow-wrap: anywhere;
  }
  .lp .lp-precios td[data-papel="titulo"] {
    order: 0; flex: 1 1 100%;
    font: 650 14.5px/1.3 var(--fuente-titulo); color: var(--texto);
  }
  .lp .lp-precios td[data-papel="titulo"] .nota { font: 450 12px/1.35 var(--mono); color: var(--tenue); }
  /* El precio de siempre y el de la lista, uno por renglón: el rótulo a la
     izquierda y la cifra (o su casilla) a la derecha, en la misma raya. */
  .lp .lp-precios td[data-papel="monto"],
  .lp .lp-precios td[data-papel="campo"] {
    order: 1; flex: 1 1 100%;
    display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .lp .lp-precios td[data-papel="monto"]::before,
  .lp .lp-precios td[data-papel="campo"]::before {
    content: attr(data-rotulo);
    font: 450 13px var(--fuente-texto); color: var(--tenue); text-align: left; white-space: normal;
  }
  .lp .lp-precios td[data-papel="campo"] input { min-height: 40px; max-width: 60%; text-align: right; }
  .lp .lp-precios td[data-papel="estado"] { order: 2; }

  /* Lo que se toca y lo que se llena, de 40 px. */
  .lp .boton { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .lp .dn-cabecera .dn-acciones { width: 100%; }
  .lp .dn-cabecera .boton.primario { flex: 1 1 auto; }
  .lp .lp-opcion { min-height: 40px; }
  .lp .lp-buscar input { min-height: 40px; }
  .lp .lp-columna > header,
  .lp .lp-cabeza { justify-content: center; text-align: center; }
  .lp .lp-grupo { align-items: center; }
}