/* PRUEBA DE DISEÑO — diseno-gastos.css. Usa los tokens de diseno.css.
   Pantallas: Aceptar XML y Gastos aceptados (recibidos.js), Compras sin
   factura electrónica, Retenciones e Histórico de precios de compra. Todo
   va acotado a .gx-pantalla / .gx-simple para no tocar otras pantallas. */

/* ================================================ Aceptar XML / Gastos -- */
/* Bandeja de correo: lista a la izquierda, detalle a la derecha. Es la
   misma idea de .dn-dividido, pero armada sobre los hijos DIRECTOS de la
   pantalla (la barra, el cuadro de soltar y la tabla siguen siendo
   hermanos: así lo miden las pruebas). */
/* A UNA SOLA COLUMNA (Mario, 18/9/2026): la lista de comprobantes a todo el
   ancho «para ver mejor los detalles de las facturas», y el detalle debajo,
   después del pie con los totales. */
.gx-pantalla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cab" "barra" "soltar" "avance" "lista" "pie" "panel" "leyenda";
  align-items: start;
}
.gx-pantalla > .gx-detalle { position: static; max-height: none; margin-top: 12px; }
.gx-pantalla > .dn-cabecera { grid-area: cab; }
.gx-pantalla > .gx-barra    { grid-area: barra; }
.gx-pantalla > .soltar-xml  { grid-area: soltar; }
.gx-pantalla > .aviso-fijo  { grid-area: avance; margin: 0 0 12px !important; }
.gx-pantalla > .gx-lista    { grid-area: lista; }
.gx-pantalla > .gx-pie      { grid-area: pie; }
.gx-pantalla > .gx-leyenda  { grid-area: leyenda; }
.gx-pantalla > .gx-detalle  { grid-area: panel; }

.gx-pantalla .dn-cabecera p { font-size: 13px; }

/* La barra: pestañas (o filtros) sin la franja de tarjeta de estilo.css. */
.gx-pantalla > .gx-barra {
  position: relative;
  padding: 0 0 12px;
  border-bottom: 0;
  align-items: center;
}
.gx-pantalla > .gx-barra > .gx-buscar { flex: 1 1 260px; }
.gx-pantalla > .gx-barra .dn-segmentos { max-width: 100%; }

/* El desplegable de la bandeja sigue ahí (lo usan los descartes y las
   pruebas) pero no se ve: las pestañas lo manejan. */
.gx-oculto {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* El cuadro de soltar: una franja punteada, todo él es clic. */
.gx-pantalla > .gx-soltar {
  margin: 0 0 12px;
  padding: 12px 16px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  border-color: var(--borde-fuerte);
  border-radius: var(--radio-grande);
  background: var(--papel);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.gx-pantalla > .gx-soltar:hover { border-color: var(--azul); background: var(--azul-suave); color: var(--azul); }
.gx-pantalla > .gx-soltar.encima { border-color: var(--verde); background: var(--verde-suave); color: var(--sobre-acento-suave); }

/* La lista: una tarjeta con la tabla adentro. */
.gx-pantalla > .gx-lista {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-chica);
}
.gx-lista table { width: 100%; }
.gx-lista th:first-child { border-top-left-radius: var(--radio-grande); }
.gx-lista th:last-child { border-top-right-radius: var(--radio-grande); }
.gx-lista td { vertical-align: top; }
/* TODO CENTRADO (Mario, 24/9/2026: «plazo vencido no está centrado ni los
   totales ni ninguna de esas letras y números de cada columna»). Va después
   de `td.numero` de estilo.css por especificidad, no por orden. */
.gx-lista th, .gx-lista td, .gx-lista td.numero { text-align: center; }
.gx-lista .gx-tipo { font-size: 12px; font-weight: 650; white-space: nowrap; }
.gx-fila { cursor: pointer; }
.gx-fila:focus-visible { outline-offset: -2px; }
.gx-lista tbody tr.activa td { background: var(--azul-suave); }
.gx-lista tbody tr.activa td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
.gx-monto {
  font: 650 15.5px/1.3 var(--fuente-titulo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gx-lista td.numero .nota { white-space: nowrap; font-family: var(--fuente-texto); font-variant-numeric: tabular-nums; }
.gx-lista td:last-child { width: 1%; }
.gx-lista .gx-acciones-fila { flex-wrap: wrap; justify-content: center; min-width: 96px; max-width: 150px; margin: 0 auto; }

/* Acciones de fila discretas: se leen, no gritan. */
.gx-acciones-fila, .gx-simple td .acciones { flex-wrap: nowrap; gap: 4px; align-items: center; justify-content: center; }
.gx-simple td .acciones .boton.chico,
.gx-acciones-fila .boton.chico { padding: 3px 8px; font-weight: 550; }
.gx-acciones-fila .boton.texto.gx-peligro,
.gx-simple td .acciones .boton.gx-peligro,
.gx-acciones-fila .boton.gx-peligro { color: var(--rojo); }
.gx-simple td .acciones .boton.gx-peligro:hover:not(:disabled),
.gx-acciones-fila .boton.texto.gx-peligro:hover:not(:disabled) { background: var(--rojo-suave); color: var(--rojo); }

/* El total del período, pegado al pie de la lista mientras se baja. */
.gx-pantalla > .gx-pie {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 8px;
  padding: 10px 16px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  display: grid;
  gap: 4px;
}
.gx-total { display: flex; justify-content: center; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; text-align: center; }
.gx-total > b {
  font: 650 17px/1.3 var(--fuente-titulo);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.gx-pantalla > .gx-leyenda { margin: 8px 4px 0; font-size: 12px; }

/* El detalle al lado. Sin min-width:0 la clave larga ensancha la rejilla y
   todo se sale por la derecha. */
.gx-detalle { margin-bottom: 12px; min-width: 0; }
.gx-detalle > .dn-cuerpo { grid-template-columns: minmax(0, 1fr); }
.gx-detalle > .dn-cuerpo > * { min-width: 0; }
.gx-detalle > header h3 { overflow-wrap: anywhere; }
.gx-detalle > header .entre { align-items: start; }
.gx-detalle > header p { margin: 0; }
.gx-detalle > header .mono { font-size: 12px; }
.gx-pastillas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gx-detalle .aviso-fijo strong { display: block; }
.gx-detalle .aviso-fijo.ok { background: var(--verde-suave); }
.gx-detalle .aviso-fijo.ok strong { color: var(--sobre-acento-suave); }
.gx-detalle .aviso-fijo.alerta { background: var(--ambar-suave); }
.gx-detalle .aviso-fijo.alerta strong { color: var(--ambar); }
.gx-detalle h4 { margin: 4px 0 0; font-size: 13px; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.gx-detalle table { width: 100%; font-size: 13px; }
.gx-lineas td .nota { font-size: 12px; }
/* Las líneas, sin el mínimo de 760 px de `.envoltorio-tabla table` (tanda
   1-10c): en el teléfono la tabla medía 760 en un marco de 317 y el IVA y el
   Total no se veían sin correr de lado. Gana por especificidad. */
.gx-detalle .envoltorio-tabla table.gx-lineas { min-width: 0; }
/* «Preguntar ahora», debajo de «En proceso en Hacienda». */
.gx-lista .boton.gx-preguntar { display: block; margin: 2px auto 0; }

.gx-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 12px 14px;
  background: var(--papel-2);
  border-radius: var(--radio);
}
.gx-datos > div { display: grid; gap: 1px; min-width: 0; }
.gx-datos small { color: var(--tenue); font-size: 12px; }
.gx-datos .numero span { font-variant-numeric: tabular-nums; }
.gx-datos .gx-grande span { font: 650 20px/1.2 var(--fuente-titulo); font-variant-numeric: tabular-nums; }
.gx-datos .gx-ancho { grid-column: 1 / -1; }
.gx-datos .mono span { overflow-wrap: anywhere; word-break: break-all; }

.gx-responder { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--borde); }
.gx-responder .nota { margin: 0; }
.gx-responder .boton.primario { flex: 1 1 auto; }

/* ====================================== la lista, en la cara de la v3 -- */
/* (fase 4, 7/10/2026; fichas 44 y 47 y la lámina 05.) Cargando, vacío y error
   viven fuera de la tabla; la respuesta y lo que dijo Hacienda de ella son dos
   pastillas, una debajo de la otra; y en el teléfono la MISMA tabla se lee como
   tarjetas. Todo con la escala de diseno.css. */
.gx-lista > .gx-estado { padding: var(--e-4); }
.gx-lista > .gx-estado .dn-huesos .dn-hueso-caja { border: 0; padding: 0; }
.gx-estados { display: grid; gap: var(--e-1); justify-items: center; }
.gx-c-tipo .pastilla { margin-top: var(--e-1); }
/* Un estado no se parte en dos renglones. */
.gx-lista .pastilla { white-space: nowrap; }
/* «ACEPTAR» Y «RECHAZAR ANTE HACIENDA», DIRECTOS, SON DEL TELÉFONO (Mario,
   7/10/2026: «prefiero q sea directo»). En la compu el renglón sigue con
   «Responder»: aquí los dos directos no se ven. */
.gx-acciones-fila .boton.gx-directo { display: none; }
/* LA FICHA, DE VISITA EN LA LISTA (a 1000 px o menos sale bajo el renglón
   tocado): no hereda el 1 % de ancho que la lista le da a su última columna,
   la de las acciones. */
.gx-lista tr.dn-fila-panel > td,
.gx-lista .gx-detalle td:last-child { width: auto; }

@media (max-width: 700px) {
  /* LA MISMA TABLA, COMO 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»). Arriba, el proveedor y el total;
     debajo, qué es, su número corto y su fecha; después el plazo y los
     estados; y al pie lo que se toca. La tabla medía 760 px en una caja de
     353: ya no corre de lado. Los títulos de columna quedan para el lector de
     pantalla. */
  .gx-pantalla > .gx-lista { overflow-x: visible; position: relative; }
  .gx-lista > table { display: block; min-width: 0; }
  .gx-lista > table > thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .gx-lista > table > tbody { display: block; }
  .gx-lista > table > tbody > tr.gx-fila {
    /* Dos columnas: el nombre cede y el total mide lo que pide. Los renglones
       de abajo son de lado a lado y cada uno lo comparten dos celdas, una en
       cada punta: así un estado largo no le quita ancho al total de arriba. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: var(--e-2) var(--e-2);
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borde);
  }
  .gx-lista > table > tbody > tr.gx-fila:last-child { border-bottom: 0; }
  /* Sin la zebra ni el azulito del ratón: cada comprobante es su tarjeta. */
  .gx-lista > table > tbody > tr.gx-fila:nth-child(even),
  .gx-lista > table > tbody > tr.gx-fila:hover td { background: transparent; }
  .gx-lista > table > tbody > tr.gx-fila.activa { background: var(--azul-suave); box-shadow: inset 3px 0 0 var(--azul); }
  .gx-lista > table > tbody > tr.gx-fila.activa td:first-child { box-shadow: none; }
  .gx-lista > table > tbody > tr.gx-fila > td {
    display: block; padding: 0; border: 0; background: transparent; width: auto;
    font-size: var(--t-nota); color: var(--tenue); min-width: 0;
  }
  /* CON EL CAMINO ENTERO: la celda base de la tarjeta (arriba) pesa más que
     una regla corta, y con «.gx-lista td.gx-c-proveedor» el nombre salía en
     el gris tenue y a 12.5 px (ronda de corrección, 7/10/2026). */
  .gx-lista > table > tbody > tr.gx-fila > td.gx-c-proveedor {
    grid-area: 1 / 1; text-align: left;
    color: var(--texto); font: 650 14.5px/1.3 var(--fuente-titulo); overflow-wrap: anywhere;
  }
  .gx-lista td.gx-c-proveedor .nota {
    margin: 1px 0 0; font: 450 12px/1.35 var(--fuente-texto); color: var(--tenue); white-space: normal;
  }
  .gx-lista td.gx-c-total { grid-area: 1 / 2; text-align: right; padding-left: var(--e-2); }
  .gx-lista td.gx-c-total .gx-monto { color: var(--texto); font-size: 15px; }
  /* «Factura · N.º 3024», en un renglón; su acuse, al lado. */
  .gx-lista > table > tbody > tr.gx-fila > td.gx-c-tipo {
    grid-area: 2 / 1 / auto / -1; justify-self: start; text-align: left;
    /* Lo que le deja a la fecha, que va en la otra punta del renglón. */
    max-width: calc(100% - 84px);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-2);
  }
  .gx-lista td.gx-c-tipo .gx-tipo { font-weight: 450; }
  .gx-lista td.gx-c-tipo .pastilla { margin-top: 0; }
  /* El número corto (Mario, 4/10/2026: «solo 3024»). El consecutivo sigue en
     la celda —lo lee el lector y sale al posarse—; aquí se ve el corto. */
  .gx-lista .gx-numero { font-size: 0; }
  .gx-lista .gx-numero::before { content: "N.º "; font: 450 13px var(--fuente-texto); color: var(--tenue); }
  .gx-lista .gx-numero::after { content: attr(data-corto); font: 650 13.5px var(--fuente-texto); color: var(--texto); }
  .gx-lista td.gx-c-fecha { grid-area: 2 / 1 / auto / -1; justify-self: end; text-align: right; line-height: 22px; }
  /* El plazo a la izquierda y los estados a la derecha, en el mismo renglón;
     las dos pastillas de la respuesta, una al lado de la otra mientras quepan. */
  .gx-lista td.gx-c-plazo { grid-area: 3 / 1 / auto / -1; justify-self: start; text-align: left; }
  .gx-lista td.gx-c-estado { grid-area: 3 / 1 / auto / -1; justify-self: end; text-align: right; max-width: calc(100% - 116px); }
  .gx-lista .gx-estados { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--e-1) var(--e-2); }
  /* El consecutivo de la respuesta está en la ficha: en la tarjeta sobra. */
  .gx-lista .gx-de-mas { display: none; }
  .gx-lista td.gx-c-acciones { grid-area: 4 / 1 / auto / -1; }
  /* LO QUE SE TOCA MIDE AL MENOS 40 PX y se reparte el ancho de la tarjeta. */
  .gx-lista .gx-acciones-fila {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
    gap: var(--e-2); min-width: 0; max-width: none; margin: 0;
  }
  .gx-lista .gx-acciones-fila .boton,
  .gx-lista .gx-acciones-fila .icono-doc {
    min-height: 40px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .gx-lista .gx-acciones-fila .boton.chico { flex: 1 1 auto; padding: 8px 14px; font-size: 13.5px; }
  /* LOS DOS DIRECTOS (Mario, 7/10/2026: «prefiero q sea directo»): «Aceptar»,
     en el verde de la acción, y «Rechazar ante Hacienda», sobrio —no es el
     rojo de borrar—. Van primero y se reparten el renglón, de 40 px y a 12 px
     uno del otro; si no caben lado a lado (a 320), uno debajo del otro. El
     PDF y el XML bajan al renglón siguiente. «Responder» es el de la compu. */
  .gx-lista .gx-acciones-fila { gap: var(--e-3); }
  .gx-lista .gx-acciones-fila .boton.gx-en-compu { display: none; }
  .gx-lista .gx-acciones-fila .boton.gx-directo { display: inline-flex; order: 0; flex: 1 1 40%; min-width: max-content; }
  .gx-lista .gx-acciones-fila .icono-doc,
  .gx-lista .gx-acciones-fila .boton.texto.chico { order: 1; }
  .gx-lista .gx-acciones-fila .boton.texto.chico { flex: 0 0 auto; border-color: var(--borde-tarjeta); }
  .gx-lista .boton.gx-preguntar { min-height: 40px; margin: 0; padding-inline: var(--e-3); }

  /* La ficha, bajo la tarjeta tocada (ver `panelBajoElRenglon`, ui.js). */
  .gx-lista > table > tbody > tr.dn-fila-panel,
  .gx-lista > table > tbody > tr.dn-fila-panel > td { display: block; }
  .gx-lista > table > tbody > tr.dn-fila-panel { border-bottom: 1px solid var(--borde); }
  .gx-lista .dn-panel-marco > .gx-detalle { margin: 0; }

  /* «RESPONDER LO QUE ENTRÓ» CABE A 320: sus tablitas se pasaban entre 28 y 42
     px del cuadrito. Cada documento, en dos renglones: el proveedor arriba, a
     lo ancho y partido por palabras; debajo la fecha y, en la otra punta, el
     total, alineado con los demás. */
  .cuadrito-entrada .cuadrito,
  .cuadrito-entrada .cuadrito-plegable { min-width: 0; max-width: 100%; }
  .cuadrito-entrada .cuadrito { padding-inline: var(--e-3); }
  .envoltorio-tabla.cuadrito-detalle { overflow-x: hidden; }
  .envoltorio-tabla.cuadrito-detalle table,
  .envoltorio-tabla.cuadrito-detalle tbody { display: block; }
  .envoltorio-tabla.cuadrito-detalle thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .envoltorio-tabla.cuadrito-detalle tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--e-2);
    padding: var(--e-2) var(--e-1); border-bottom: 1px solid var(--borde);
  }
  .envoltorio-tabla.cuadrito-detalle tr:last-child { border-bottom: 0; }
  .envoltorio-tabla.cuadrito-detalle td { display: block; padding: 0; border: 0; background: transparent; }
  .envoltorio-tabla.cuadrito-detalle td:nth-child(2) { grid-area: 1 / 1 / auto / -1; font-weight: 600; text-align: center; overflow-wrap: break-word; }
  .envoltorio-tabla.cuadrito-detalle td:first-child { grid-area: 2 / 1; text-align: left; color: var(--tenue); }
  .envoltorio-tabla.cuadrito-detalle td.numero { grid-area: 2 / 2; text-align: right; white-space: nowrap; }

  /* La cabecera: lo que se toca, de 40 px y repartido en renglones parejos. */
  .gx-pantalla > .dn-cabecera .dn-acciones { width: 100%; justify-content: center; }
  .gx-pantalla > .dn-cabecera .dn-acciones .boton { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .gx-pantalla > .dn-cabecera .dn-acciones > button.boton:not(.texto) { flex: 1 1 auto; }
  .gx-pantalla > .gx-barra .dn-segmento { min-height: 40px; }
  .gx-pantalla > .gx-soltar > .boton { min-height: 40px; }
  /* En la ficha, los botones de responder: uno por renglón, de 40 px. */
  .gx-detalle .acciones .boton,
  .gx-detalle > header .boton { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .gx-detalle > header .boton { min-width: 40px; }
  .gx-responder .acciones { display: grid; gap: var(--e-2); }
  /* El total del período: la cuenta arriba y la cifra debajo, sin apretarse. */
  .gx-pantalla > .gx-pie { padding: var(--e-3); }
}
/* En el teléfono más angosto, «En proceso en Hacienda» no cabe junto al plazo:
   los estados bajan a su propio renglón. */
@media (max-width: 359px) {
  .gx-lista td.gx-c-estado { grid-row: 4; max-width: 100%; justify-self: start; text-align: left; }
  .gx-lista .gx-estados { justify-content: flex-start; }
  .gx-lista td.gx-c-acciones { grid-row: 5; }
  /* Los dos directos, uno por renglón; el PDF y el XML, juntos en el suyo
     (sin esto el PDF subía junto a «Rechazar ante Hacienda» y el XML quedaba solo). */
  .gx-lista .gx-acciones-fila .boton.gx-directo { flex: 1 1 100%; }
  /* Las tres pestañas, en un renglón. */
  .gx-pantalla > .gx-barra .dn-segmento { padding-inline: 6px; font-size: 13px; }
}

/* A una columna: el detalle va debajo de la lista. */
@media (max-width: 1000px) {
  .gx-pantalla {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cab" "barra" "soltar" "avance" "lista" "pie" "leyenda" "panel";
    grid-template-rows: none;
  }
  .gx-pantalla > .gx-detalle { margin-top: 12px; }
}
@media (max-width: 560px) {
  .gx-pantalla > .gx-barra .dn-segmentos { display: flex; }
  .gx-pantalla > .gx-barra .dn-segmentos button { flex: 1 1 auto; }
  .gx-datos { grid-template-columns: minmax(0, 1fr); }
  .gx-pantalla > .gx-pie { position: static; }
  /* Cada línea, una tarjeta: el detalle (con cantidad × precio) arriba, y el
     IVA y el Total abajo con su rótulo. Todo centrado. */
  .gx-detalle .gx-lineas, .gx-detalle .gx-lineas tbody { display: block; }
  .gx-detalle .gx-lineas thead { display: none; }
  .gx-detalle .gx-lineas tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--borde);
  }
  .gx-detalle .gx-lineas td, .gx-detalle .gx-lineas td.numero { display: block; padding: 0; border: 0; text-align: center; }
  .gx-detalle .gx-lineas td:first-child { grid-column: 1 / -1; }
  .gx-detalle .gx-lineas td[data-rotulo]::before {
    content: attr(data-rotulo); display: block;
    color: var(--tenue); font: 12px var(--fuente-texto);
  }
}

/* ======================= Compras, Retenciones, Histórico de precios -- */
.gx-simple .dn-cabecera > div:first-child { flex: 1 1 380px; max-width: 760px; }
.gx-simple .dn-cabecera p { font-size: 13px; line-height: 1.5; }
.gx-simple > .tarjeta { overflow: hidden; }
.gx-simple .cabecera-doc { align-items: flex-end; }
.gx-simple .gx-casilla { min-width: 0; }
.gx-simple td { vertical-align: top; }
.gx-simple .dn-vacio { padding: 28px 16px; }

.gx-resumen .totales {
  position: static;
  padding: 12px 16px;
  border-top: 1px solid var(--borde);
  background: var(--papel-2);
  display: grid;
  gap: 0;
}
.gx-resumen .totales:empty { display: none; }
.gx-resumen .totales .fila span:last-child { font-family: var(--fuente-titulo); font-weight: 650; }

/* Histórico: el buscador grande arriba; la barra del gráfico, más tenue. */
.gx-busqueda .gx-buscar { flex: 1 1 320px; }
.gx-buscador { width: 100%; font-size: 15px; padding-block: 9px; }
.gx-grafico-barra { background: var(--papel-2); align-items: flex-end; }
.gx-grafico-barra > p.nota { flex: 1 1 100%; margin: 0; }
.gx-grafico-barra > div.acciones { min-width: 0; }

/* El gráfico del precio (se abre en su ventana). */
.modal .grafico .reja { stroke: var(--borde); stroke-dasharray: 3 4; }
.modal .grafico .eje { fill: var(--tenue); font-size: 10.5px; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .gx-simple .dn-acciones { width: 100%; }
  .gx-simple .dn-acciones .boton.primario { flex: 1 1 auto; }
  .gx-simple .cabecera-doc > div { min-width: 0; flex: 1 1 140px; }
}
.gx-datos .mono small { font-family: var(--fuente-texto); font-size: 12px; }

/* El vacío dentro de una tabla que corre de lado queda a la vista. */
.gx-simple td .dn-vacio,
.gx-lista td .dn-vacio { position: sticky; left: 0; max-width: calc(100vw - 56px); }
@media (max-width: 560px) {
  .gx-simple .gx-busqueda > .gx-buscar { flex-basis: 100%; }
}

/* ========================= lo demás de Gastos, en la cara de la v3 -- */
/* (fase 4, 7/10/2026; fichas 46 a 52 del informe y la lámina 05.) */

/* LA FICHA DEL COMPROBANTE, CENTRADA como lo demás de la casa: el nombre y sus
   pastillas arriba, y cada dato con su rótulo encima, al centro de su casilla.
   Las cifras quedan una debajo de la otra, en la misma columna. */
.gx-detalle > header { justify-items: center; text-align: center; position: relative; }
.gx-detalle > header .entre { justify-content: center; }
.gx-detalle > header .entre > .boton { position: absolute; top: var(--e-3); right: var(--e-3); }
.gx-detalle > header h3 { padding-inline: 64px; }
.gx-pastillas { justify-content: center; }
.gx-datos > div { justify-items: center; text-align: center; }
.gx-detalle h4 { text-align: center; }
.gx-detalle .dn-cuerpo > .acciones,
.gx-responder .acciones { justify-content: center; }
.gx-responder .nota,
.gx-detalle .dn-cuerpo > .nota { text-align: center; }

/* LOS TOTALES DEL PIE, ALINEADOS ENTRE SÍ: cada rótulo termina en el eje del
   cuadro y cada cifra termina en la misma raya, una debajo de la otra. Con el
   par centrado renglón por renglón, las cifras caían cada una en su lugar. */
.gx-resumen .totales .fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gx-resumen .totales .fila > span:first-child { justify-self: end; text-align: right; }
.gx-resumen .totales .fila > span:last-child { justify-self: start; min-width: 15ch; text-align: right; }

/* Las listas sencillas: vacío y error fuera de la tabla, y lo que se toca. */
.gx-simple .gx-estado { padding: var(--e-2) var(--e-4); }
.gx-simple .gx-estado .dn-error { margin-block: var(--e-2); }
/* Un número no se parte en dos renglones; la nota que lo acompaña («al tipo de
   cambio…») sí, como antes: sin partirse ensanchaba la columna del Total. */
.gx-simple td.numero { white-space: nowrap; }
.gx-simple td.numero > .nota { white-space: normal; }
/* «Lo emitió», en el visor de un XML: el nombre y la cédula, cada uno en su renglón. */
textarea.gx-leido { text-align: center; resize: none; overflow: hidden; }

@media (max-width: 700px) {
  /* LA MISMA TABLA, COMO TARJETAS (sugerencia 1, aceptada por Mario el
     4/10/2026), con la pieza de Reportes: cada celda trae su papel
     (`data-papel`) y el título de su columna (`data-rotulo`). Arriba, el
     título de la tarjeta; debajo los datos, en un renglón corrido; después los
     importes, uno por renglón —el rótulo a la izquierda y la cifra a la
     derecha, alineadas entre sí—; y al pie lo que se toca, de 40 px. */
  .gx-simple .tarjeta > .envoltorio-tabla { overflow-x: visible; position: relative; }
  .gx-simple .tarjeta > .envoltorio-tabla > table { display: block; min-width: 0; width: 100%; }
  .gx-simple .tarjeta > .envoltorio-tabla > table > thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .gx-simple .tarjeta > .envoltorio-tabla > table > tbody { display: block; }
  .gx-simple .tarjeta > .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);
  }
  .gx-simple .tarjeta > .envoltorio-tabla > table > tbody > tr:last-child { border-bottom: 0; }
  .gx-simple .tarjeta > .envoltorio-tabla > table > tbody > tr:nth-child(even),
  .gx-simple .tarjeta > .envoltorio-tabla > table > tbody > tr:hover > td { background: transparent; }
  /* Con `:where` la celda base pesa lo que una sola clase: cada papel la afina
     debajo sin tener que repetir el camino entero. */
  .gx-simple :where(.tarjeta > .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;
  }
  .gx-simple td:empty { display: none; }
  .gx-simple td[data-papel="titulo"] {
    order: 0; flex: 1 1 100%;
    font: 650 14.5px/1.3 var(--fuente-titulo); color: var(--texto);
  }
  .gx-simple td[data-papel="titulo"] .nota { font: 450 12px/1.35 var(--fuente-texto); color: var(--tenue); }
  .gx-simple td[data-papel="estado"] { order: 1; }
  .gx-simple td[data-papel="estado"] .nota { margin-top: 2px; }
  .gx-simple td[data-papel="dato"] { order: 1; color: var(--tenue); }
  .gx-simple td[data-papel="dato"]::before { content: attr(data-rotulo) ": "; font-family: var(--fuente-texto); }
  /* El interruptor de un filtro («Ver las anuladas», «Ver apagados»), bajo su rótulo. */
  .gx-simple .gx-casilla input[type=checkbox] { display: block; margin-inline: auto; }
  .gx-simple td[data-papel="dato"] > div { display: inline; }
  /* Solo la segunda línea de un dato (un `div.nota`): con «.nota» a secas el
     puntito le salía también al aviso «sin documento» de Retenciones. */
  .gx-simple td[data-papel="dato"] > div.nota::before { content: " · "; }
  .gx-simple td[data-papel="monto"],
  .gx-simple td[data-papel="total"],
  .gx-simple td[data-papel="marca"] {
    order: 2; flex: 1 1 100%;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--e-3);
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .gx-simple td[data-papel="monto"]::before,
  .gx-simple td[data-papel="total"]::before,
  .gx-simple td[data-papel="marca"]::before {
    content: attr(data-rotulo);
    font: 450 13px var(--fuente-texto); color: var(--tenue); text-align: left;
  }
  .gx-simple td[data-papel="total"] { font-weight: 650; color: var(--texto); }
  /* La nota de un importe («al tipo de cambio…», «por kg»), bajo su cifra. */
  .gx-simple td[data-papel="monto"] > .nota,
  .gx-simple td[data-papel="total"] > .nota { flex: 1 1 100%; text-align: right; font-weight: 450; white-space: normal; }
  /* El interruptor del gráfico, en su renglón de 40 px. Lo que marca es el
     interruptor; tocar su rótulo abre el historial, como el resto de la tarjeta. */
  .gx-simple td[data-papel="marca"] { order: 3; align-items: center; min-height: 40px; }
  .gx-simple td[data-papel="accion"] { order: 4; flex: 1 1 100%; margin-top: var(--e-1); }
  /* A 16 px uno del otro: «Borrar» y «Anular» van al lado de «Corregir». */
  .gx-simple td[data-papel="accion"] .acciones { display: flex; gap: var(--e-4); justify-content: center; }
  /* Un botón solo («Editar») ocupa el renglón, como los que van de dos en dos. */
  .gx-simple td[data-papel="accion"] > .boton { width: 100%; }
  .gx-simple td[data-papel="accion"] .boton {
    flex: 1 1 0; min-height: 40px; border-color: var(--borde-tarjeta);
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Arriba: lo que se toca y lo que se llena, de 40 px. */
  .gx-simple .boton { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .gx-simple .dn-cabecera .dn-acciones { width: 100%; justify-content: center; }
  .gx-simple .cabecera-doc input:not([type=checkbox]),
  .gx-simple .cabecera-doc select,
  .gx-pantalla > .gx-barra input:not([type=checkbox]) { min-height: 40px; }
  .gx-simple .cabecera-doc { justify-content: center; }
  /* Los cuatro botones del gráfico, parejos: de dos en dos y del mismo ancho. */
  .gx-simple .gx-grafico-barra .acciones {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); width: 100%;
  }
  /* Cada pareja en su renglón (revisión de Codex del 7/10/2026, V01: a 375 px
     las cuatro caían en una sola fila, de unos 72 px cada una, y «Gráfico del
     precio» y «Marcar los que se ven» salían cortados y montados). Y si aun
     así no cabe, el texto se parte en vez de cortarse. */
  .gx-simple .gx-grafico-barra .acciones { flex: 1 1 100%; }
  .gx-simple .gx-grafico-barra .acciones .boton { width: 100%; padding-inline: var(--e-2); white-space: normal; }
  /* «Gastos aceptados»: el buscador a lo ancho y, debajo, «Desde» y «Hasta» lado a lado. */
  .gx-pantalla > .gx-barra > .gx-buscar { flex: 1 1 100%; }
  .gx-pantalla.gx-aceptados > .gx-barra { justify-content: center; }
  .gx-pantalla.gx-aceptados > .gx-barra > .campo { flex: 1 1 0; min-width: 0; }
  .gx-pantalla.gx-aceptados > .gx-barra > .campo input { width: 100%; }

  /* EL VISOR DE UN XML, legible: cada línea es una tarjeta —el detalle arriba y
     debajo sus cuatro cifras con su rótulo—, y no una tabla de 760 px en un
     cuadro de 340. */
  .envoltorio-tabla > table.gx-visor-lineas { display: block; min-width: 0; }
  .gx-visor-lineas thead { display: none; }
  .gx-visor-lineas tbody { display: block; }
  .gx-visor-lineas tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-1) var(--e-3);
    padding: var(--e-2) var(--e-1); border-bottom: 1px solid var(--borde);
  }
  .gx-visor-lineas td, .gx-visor-lineas td.numero { display: block; padding: 0; border: 0; text-align: center; background: transparent; }
  .gx-visor-lineas td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .gx-visor-lineas td[data-rotulo]::before {
    content: attr(data-rotulo); display: block;
    color: var(--tenue); font: 12px var(--fuente-texto);
  }
}

/* Mario, 17/9/2026: el cuadro de soltar XML del doble de alto, con el texto
   arriba y el botón «Cargar XML» centrado debajo.
   EL DOBLE DE LO QUE PIDE SU CONTENIDO (regla del 16/9/2026), medido en Edge
   (tests/recibidos-soltar-en-edge.test.ts): relleno y borde 28 px, el texto,
   10 px de espacio y el botón 38 px. Con el texto en un renglón pide 97.5 px
   (el doble, 196); en el teléfono el texto va en dos (se parte por debajo de
   ~510 px) y pide 119.25 (el doble, 240). 128 px no llegaba en ninguno. */
.gx-pantalla > .gx-soltar {
  min-height: 196px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
.gx-pantalla > .gx-soltar > button { align-self: center; }
/* El corte va con holgura sobre los ~510 px: la letra del teléfono no es la
   de Windows y puede partir el texto un poco antes. */
/* 244 y no 240 (fase 4 de la v3, 7/10/2026): en el teléfono «Cargar XML» mide
   40 px —lo que se toca— y no 38, y el contenido pide 121.5: su doble son 243. */
@media (max-width: 600px) {
  .gx-pantalla > .gx-soltar { min-height: 244px; }
}