/* Tablas: estilo general, modo tarjeta en celular (DISENO.md R12) y tablas de cifras. */

/* --- Tablas (R12) ------------------------------------------------------------ */

table {
  margin-bottom: 0;
}

th {
  color: var(--texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

td.numero,
th.numero {
  text-align: right;
  white-space: nowrap;
}

/* Si la tarjeta que la contiene es angosta (celular o grilla de varias columnas), cada fila de
   una .tabla-tarjetas pasa a ser una tarjeta con etiquetas (data-etiqueta). */
@container (max-width: 25rem) {
  .tabla-tarjetas thead {
    display: none;
  }

  .tabla-tarjetas tr {
    display: block;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--borde);
  }

  .tabla-tarjetas td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0;
    border: 0;
    background: transparent;
    text-align: right;
  }

  .tabla-tarjetas td::before {
    content: attr(data-etiqueta);
    color: var(--texto-suave);
    font-weight: normal;
    text-align: left;
  }

  .tabla-tarjetas td:first-child {
    display: block;
    font-weight: 600;
    text-align: left;
  }

  .tabla-tarjetas td:first-child::before {
    content: none;
  }
}

/* --- Tablas de cifras: concepto a la izquierda, monto a la derecha (cobro, turno, caja) --- */

.cifras {
  width: 100%;
  margin-bottom: 1rem;
}

.cifras th {
  padding-left: 0;
  font-size: 0.85rem;
  text-transform: none;
}

.cifras td {
  text-align: right;
}

.cifras.montos td {
  white-space: nowrap;
}