/* ==========================================================================
   Listas — leídas como tablas: un contenedor, filas separadas por línea
   ========================================================================== */
.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Una lista vacía no deja una caja vacía en pantalla. */
.lista:empty { display: none; }

.lista > li {
  display: flex;
  align-items: center;
  gap: var(--size-sm);
  padding: var(--size-sm) var(--size);
  border-bottom: 1px solid var(--color-border-secondary);
}
.lista > li:last-child { border-bottom: none; }

.banco, .banco-todos, .cliente, .deuda, .efectivizacion { cursor: pointer; }
.banco:hover, .banco-todos:hover, .cliente:hover, .deuda:hover, .efectivizacion:hover {
  background: var(--color-fill-tertiary);
}

/* La fila que las flechas tienen puesta encima, en cualquier buscador. Más
   marcada que el hover a propósito: el mouse señala dónde está el puntero y esto
   dice qué se lleva el Enter, que es una decisión y no un paseo. La barra de la
   izquierda es lo que la distingue cuando el dedo también está encima de otra. */
.lista > li.resaltado {
  background: var(--color-primary-bg);
  box-shadow: inset 2px 0 0 var(--color-primary);
}

.lista-pendientes {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-xxs);
}
.banco-pendiente {
  display: flex;
  align-items: center;
  gap: var(--size-xs);
  padding: var(--size-xxs) 0 var(--size-xxs) var(--size-sm);
  border-left: 2px solid var(--color-warning-border);
  font-size: var(--font-size-sm);
  color: var(--color-warning-text);
}

/* Movimientos, categorías y POS comparten fila: `.tx` tolera filas de una sola
   línea de texto y filas de cuatro columnas.

   El hueco del botón de borrar se reserva siempre (padding + botón absoluto)
   porque no todas las filas lo llevan: las de una efectivización traen en su
   lugar una marca. Sin el hueco fijo, fecha y monto quedaban desalineados entre
   unas filas y otras, que es justo lo que una tabla no debe hacer. */
/* `.lista > li` fija el padding y le gana en especificidad a `.tx` a secas: sin
   repetir el descendiente aquí, el hueco no se reserva y el botón se monta
   encima del monto. */
.lista > li.tx {
  position: relative;
  padding-right: 44px;
}
/* «Cuadrado contra el extracto». Primero de la fila y con `order` propio como el
   resto: el orden de esta lista lo fija el CSS, no el DOM. */
.tx-verificado {
  order: -1;
  flex: none;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.tx-desc { order: 0; flex: 1; min-width: 0; }
.tx-efectivizacion {
  order: 1;
  flex: none;
  font-size: var(--font-size-sm);
  color: var(--color-warning-text);
}
/* De qué cuenta es el movimiento. Solo aparece en el consolidado, pegado a la
   fecha y en el mismo gris: es de dónde salió la cifra, no la cifra. */
.tx-banco {
  order: 2;
  flex: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}
.tx-fecha {
  order: 3;
  flex: none;
  width: 92px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.tx-monto {
  order: 4;
  flex: none;
  width: 112px;
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tx-ingreso .tx-monto { color: var(--color-success-text); }
.tx-gasto .tx-monto { color: var(--color-error-text); }
.tx-pendiente { background: var(--color-warning-bg); }

/* El respaldo del movimiento, después de la cifra. Va último porque se busca
   cuando el monto no cierra, no al recorrer la lista: adelante empujaría fecha
   y monto de sitio en las pocas filas que traen papel. */
.tx > .lista-comprobantes {
  order: 5;
  flex: none;
  font-size: var(--font-size-sm);
}

/* Una efectivización plegada: el `li` no pone relleno ni fila, lo ponen el
   resumen y las filas de adentro. El triángulo ocupa el lugar de la casilla de
   revisado, así la descripción arranca en la misma columna que las demás. */
.lista > li.tx-grupo { display: block; padding: 0; }
.tx-grupo summary.tx,
.tx-grupo-lista > li.tx {
  display: flex;
  align-items: center;
  gap: var(--size-sm);
  position: relative;
  padding: var(--size-sm) 44px var(--size-sm) var(--size);
}
.tx-grupo summary.tx { cursor: pointer; list-style: none; }
.tx-grupo summary.tx::-webkit-details-marker { display: none; }
.tx-grupo summary.tx::before {
  content: '▸';
  order: -1;
  flex: none;
  width: 20px;
  color: var(--color-text-tertiary);
  transition: transform .15s;
}
.tx-grupo details[open] > summary.tx::before { transform: rotate(90deg); }
.tx-grupo summary.tx:hover { background: var(--color-fill-tertiary); }
.tx-grupo summary .tx-desc { font-weight: 500; }
.tx-grupo summary .tx-efectivizacion { color: var(--color-text-tertiary); }
.tx-grupo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-secondary);
  background: var(--color-bg-layout);
}
.tx-grupo-lista > li.tx { border-bottom: 1px solid var(--color-border-secondary); }
.tx-grupo-lista > li.tx:last-child { border-bottom: none; }

/* Acción de fila: discreta hasta que la buscás. */
.tx-eliminar {
  margin-left: auto;
  flex: none;
  padding: 0;
  width: 24px;
  min-height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-tertiary);
  line-height: 1;
}
.tx > .tx-eliminar {
  position: absolute;
  right: var(--size-sm);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.tx-eliminar:hover,
.tx-eliminar:active {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.lista-vacia {
  color: var(--color-text-tertiary);
  cursor: default;
}
.lista-vacia:hover { background: none; }

/* Clientes */
/* Ancho fijo en DNI y teléfono en vez de `space-between`: el teléfono es opcional
   y cuando falta el span queda de ancho cero, así que el DNI se corría de fila a
   fila y las dos columnas dejaban de leerse como columnas. */
.cliente-nombre { flex: 1; min-width: 0; font-weight: 500; }
.cliente-dni,
.cliente-telefono {
  flex: none;
  text-align: right;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.lista > li.cliente > .cliente-dni { width: 84px; }
.lista > li.cliente > .cliente-telefono { width: 92px; }

/* Abonos */
.abono { justify-content: space-between; }
.pago-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pago-montos { font-variant-numeric: tabular-nums; }
.pago-acciones {
  display: flex;
  align-items: center;
  gap: var(--size-sm);
  flex: none;
}
/* Ver, Adjuntar, Editar y Pagar valen lo mismo dentro de una fila, así que se
   ven igual. Antes convivían un enlace de 12px, un botón con borde de 32px —el
   elemento más alto de la fila, para la acción menos importante— y el aspa: tres
   pesos para tres cosas del mismo rango. El aspa sí sigue aparte: es la única
   que no se puede deshacer.

   `.accion-fila` es un <button>, así que hay que apagarle lo que hereda del
   primario o vuelve a ser un rectángulo azul. */
.pago-ver,
.pago-adjuntar,
.accion-fila {
  flex: none;
  padding: 0;
  min-height: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.pago-ver:hover,
.pago-adjuntar:hover,
.accion-fila:hover,
.accion-fila:active {
  background: none;
  color: var(--color-primary-hover);
}
/* Mientras el archivo está encima del «Adjuntar» de la fila. Es del tamaño de
   una palabra: sin marcarlo no se sabe si se está soltando sobre el gasto
   correcto o sobre el de arriba. */
.pago-adjuntar.encima {
  outline: 1px dashed var(--color-primary);
  outline-offset: var(--size-xxs);
  color: var(--color-primary-active);
}
.abono-descripcion {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-decoration: underline dotted;
}

/* Deudas */
/* El campo de la persona: rótulo, buscador, resultados y el alta, apilados como
   un campo más del formulario. La lista vacía no ocupa —`.lista:empty`— así que
   el hueco de los resultados solo aparece cuando hay algo que mostrar. */
.buscador-persona {
  display: grid;
  gap: var(--size-xs);
}
.buscador-persona > button { justify-self: start; }

.deuda-persona { font-weight: 500; }
.deuda-motivo {
  flex: 1;
  min-width: 0;
  color: var(--color-text-tertiary);
}
/* Lo que falta manda y el avance lo acompaña: son dos lecturas del mismo dato, y
   al mismo tamaño competían entre ellas. En columna cuando están las dos, para
   no dejar dos cifras pegadas en una línea. */
.deuda-montos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.deuda-falta { font-weight: 600; }
.deuda-avance {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}
.deuda-resumen { margin: 0; color: var(--color-text-secondary); }

/* ==========================================================================
   Etiquetas de estado — una sola forma para «en qué situación está esto»

   La comparten las deudas, las cuotas de un cronograma y las tarjetas de los
   clientes: son la misma pregunta y tres formas distintas se leerían como tres
   cosas distintas. El color lo pone siempre la fila, no la etiqueta.
   ========================================================================== */
.deuda-estado,
.cuota-estado,
.tc-estado,
.tc-avisado,
.tc-pagado,
.confianza {
  flex: none;
  padding: 0 var(--size-xs);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 20px;
}

/* Verde por defecto: una deuda activa sin vencimiento próximo está bien así.
   Ámbar y rojo son las dos alertas que sí necesitan llamar la atención. */
.deuda-estado {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.deuda-por-vencer .deuda-estado {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.deuda-vencida .deuda-estado {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}
/* Neutra, no verde: la reestructurada convive con las pagadas en la lista de
   cerradas, y en verde se leerían como lo mismo. Ésta no se pagó —el acreedor
   la cambió por otra—, así que no es un logro que anunciar. */
.deuda-reestructurada .deuda-estado {
  background: var(--color-fill-tertiary);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* Cronograma de cuotas. El banco y la fecha se eligen una sola vez arriba y
   valen para cualquier cuota que se pague: repetirlos en cada fila sería el
   mismo par de campos doce veces. */
.cuota-controles {
  display: flex;
  align-items: flex-end;
  gap: var(--size-sm);
  max-width: var(--ancho-formulario);
}
.cuota-controles label { flex: 1; font-size: var(--font-size-sm); }

/* Una cuota dice su estado con la misma etiqueta que una deuda —es el mismo
   hecho y estaban contados distinto en dos pantallas seguidas— más una barra a
   la izquierda, que es lo que deja ver de un vistazo dónde está la línea entre
   lo pagado y lo que falta cuando son doce filas iguales. La barra transparente
   en las demás mantiene el texto alineado.

   El fondo de color se fue: con la etiqueta puesta era una tercera señal
   diciendo lo mismo, y el fondo de fila queda para lo pendiente de abono. */
.lista > li.cuota {
  border-left: 3px solid transparent;
  padding-left: calc(var(--size) - 3px);
}
/* Cuatro columnas, como una deuda: qué cuota es, qué pasó con ella, cuánto y en
   qué situación está. El detalle se lleva el hueco sobrante para que el monto y
   la etiqueta caigan en la misma vertical en las doce filas. */
.cuota-numero { flex: none; font-weight: 500; }
.cuota-detalle {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}
.cuota-monto {
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Gris mientras falte: una cuota que todavía no vence no es una alerta. */
.cuota-estado {
  border-color: var(--color-border);
  background: var(--color-fill-tertiary);
  color: var(--color-text-secondary);
}
.lista > li.cuota-pagada { border-left-color: var(--color-success-border); }
.cuota-pagada .cuota-estado {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.lista > li.cuota-proxima { border-left-color: var(--color-warning-border); }
.cuota-proxima .cuota-estado {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.lista > li.cuota-vencida { border-left-color: var(--color-error-border); }
.cuota-vencida .cuota-estado {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error-text);
}