/* ==========================================================================
   Tablas — la misma caja que `.lista`, con columnas de verdad.

   Se usa cuando lo que hay que leer es una comparación entre columnas y no una
   fila detrás de otra: alinear con anchos fijos dentro de un flex funciona
   hasta que una celda queda vacía y la columna se corre sola.
   ========================================================================== */
.tabla-envoltura {
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  /* La tabla se lleva su propio scroll en pantallas angostas; sin esto, es el
     `body` el que se desplaza en horizontal y arrastra la pantalla entera. */
  overflow-x: auto;
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  /* `fixed` no: las columnas se reparten por su contenido, que es lo que deja
     al nombre del banco todo el ancho que sobra. */
}
.tabla th,
.tabla td {
  padding: var(--size-sm) var(--size);
  text-align: left;
  border-bottom: 1px solid var(--color-border-secondary);
}
/* El encabezado no compite con los datos: es el rótulo de la columna, no el
   dato. Va en el texto secundario y en peso normal. */
.tabla thead th {
  font-weight: 400;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.tabla tbody tr:last-child > * { border-bottom: none; }
/* Los números a la derecha y con cifras de ancho fijo: es lo que hace que dos
   montos de la misma columna se puedan comparar de un vistazo. */
.tabla .col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* El pie es un total, no una fila más: se despega con una línea entera y pesa
   más que las de arriba. */
.tabla tfoot > tr > * {
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  font-weight: 600;
  background: var(--color-fill-tertiary);
}
.tabla tfoot th { text-align: left; }

/* La fila que las flechas tienen puesta encima. Misma señal que
   `.lista > li.resaltado` (03-listas.css), que no alcanza a un `tr`: el
   `box-shadow` no se ve sobre una fila de tabla, así que la barra de la
   izquierda se dibuja como borde de la primera celda. */
.tabla tbody tr.resaltado { background: var(--color-primary-bg); }
.tabla tbody tr.resaltado > td:first-child {
  box-shadow: inset 2px 0 0 var(--color-primary);
}

/* Clientes: el nombre se queda con el ancho sobrante; los dos conteos y el
   badge de confianza no se parten en dos líneas. */
.tabla-clientes .cliente-nombre { width: 100%; font-weight: 500; }
.tabla-clientes .cliente-dni,
.tabla-clientes .cliente-telefono {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Bancos: el nombre se queda con el ancho sobrante y las tres cifras a la
   derecha quedan en columna, fila tras fila. */
.tabla-envoltura .banco-nombre { width: 100%; font-weight: 500; }
.tabla-envoltura .banco-saldo { font-weight: 600; white-space: nowrap; }

/* Arqueo: contar la plata que hay de verdad contra la que dice el sistema. El
   campo vive dentro de la columna «Actual», pegado al saldo que se compara. */
.celda-actual { cursor: auto; }
.banco-actual {
  width: 112px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* «Contado el …»: solo aparece cuando el conteo es de otro día. Debajo del
   campo y en chico, porque matiza la cifra de al lado sin ser una cifra. */
.banco-contado {
  display: block;
  margin-top: var(--size-xxs);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.grupo-titulo {
  margin: 0;
  font-size: var(--font-size);
  font-weight: 600;
}
/* Ajustes: lo que cobra cada cuenta. Las cifras son de la misma tarifa y se
   comparan hacia abajo, cuenta contra cuenta, así que van alineadas a la derecha
   y con el mismo ancho —una más angosta que la otra haría creer que una vale
   menos que la otra. */
.comision-banco {
  width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.banco-diferencia { white-space: nowrap; }
.banco-diferencia-cuadra { color: var(--color-success-text); }
.banco-diferencia-falta { color: var(--color-error-text); }
.banco-diferencia-sobra { color: var(--color-warning-text); }
.banco-diferencia-invalido {
  color: var(--color-text-tertiary);
  font-weight: 400;
  font-size: var(--font-size-sm);
}

/* Todas las cuentas juntas. Va primera y en cursiva porque no es una cuenta:
   sin la distinción se lee como un banco más que alguien dio de alta. */
.banco-todos .banco-nombre { font-style: italic; color: var(--color-text-secondary); }

/* Los abonos que todavía no llegaron cuelgan del banco: una fila propia que
   cruza las cuatro columnas, sin la línea de arriba, para que se lea pegada a
   la cuenta de la que cuelga y no como una cuenta más. */
.banco-fila-pendientes > td {
  padding-top: 0;
  padding-left: var(--size-lg);
}

/* Un punto rojo sobre un botón: hay algo escrito ahí dentro. Es la única señal
   de que existe una nota sin abrirla, así que va pegado al texto del botón y no
   flotando en una esquina donde se confundiría con un adorno. */
.punto-aviso {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: var(--size-xxs);
  border-radius: 50%;
  background: var(--color-error);
  vertical-align: middle;
}

/* La columna de las tres acciones: la última, angosta y sin partirse. No se
   estira —el ancho sobrante es del nombre de la cuenta— y el relleno lateral es
   menor que el de una celda de datos, que si no los iconos quedan flotando
   lejos de la cifra de la que cuelgan. */
.tabla .col-acciones {
  width: 1%;
  padding-left: var(--size-xs);
  padding-right: var(--size-xs);
  white-space: nowrap;
}

/* La marca de ficha, a la izquierda del nombre: angosta y vacía si no tiene. */
.tabla-clientes .col-ficha {
  width: 1.5em;
  padding-right: 0;
  color: var(--color-primary);
  text-align: center;
}

/* Deudas, cuotas por mes de «Yo debo»: la fila del mes se toca y despliega sus
   cuotas, que van como texto secundario y no como otra fila de datos. */
.dm-fila { cursor: pointer; }
.dm-fila:hover { background: var(--color-fill-tertiary); }
.dc-detalle td {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.dc-detalle.dc-atrasada td:nth-child(4),
.dc-texto-atrasado { color: var(--color-error-text); }
#deudas-cuotas { display: grid; gap: var(--size); }
#btn-dc-tabla { justify-self: start; }
#deudas-cuotas[hidden] { display: none; }
#deudas-cuotas .col-num { white-space: nowrap; }
@media (max-width: 860px) {
  #deudas-cuotas .tabla th,
  #deudas-cuotas .tabla td { padding-inline: var(--size-xxs); }
  #deudas-cuotas .tabla :is(th, td):first-child { padding-left: var(--size-xs); }
  #deudas-cuotas .tabla :is(th, td):last-child { padding-right: var(--size-xs); }
  #deudas-cuotas .dc-moneda { display: none; }
  /* Un nombre largo («CONTRERAS») fijaba el ancho mínimo de la columna y la tabla no entraba. */
  #deudas-cuotas .dc-detalle td:first-child { overflow-wrap: anywhere; }
}
.dc-grafico-caja { padding: var(--size); overflow: visible; }
/* Azul, rojo y gris: verde contra rojo no se distingue con daltonismo. */
.dc-barra-pagado { fill: var(--color-primary); }
.dc-barra-atrasado { fill: var(--color-error-text); }
.dc-barra-falta { fill: var(--color-border); }
.dc-muestra-pagado { background: var(--color-primary); }
.dc-muestra-atrasado { background: var(--color-error-text); }
.dc-muestra-falta { background: var(--color-border); }