.tabla-wrap {
  width: 100%;
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.tabla th,
.tabla td {
  padding: 16px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: middle;
}

.tabla th {
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}

.tabla td span {
  display: block;
  margin-top: 4px;
  font-size: 0.92rem;
  opacity: 0.75;
}

.tabla tbody tr:hover {
  background: rgba(0, 0, 0, 0.035);
}

.tabla-action {
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .tabla,
  .tabla thead,
  .tabla tbody,
  .tabla th,
  .tabla td,
  .tabla tr {
    display: block;
  }

  .tabla thead {
    display: none;
  }

  .tabla tr {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
  }

  .tabla td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: right;
  }

  .tabla td::before {
    content: attr(data-label);
    flex: 0 0 36%;
    font-weight: 700;
    text-align: left;
  }

  .tabla td:last-child {
    border-bottom: 0;
  }

  .tabla-action {
    display: block;
    padding-top: 14px !important;
    text-align: center;
  }

  .tabla-action::before {
    display: none;
  }

  .tabla-action .btn {
    width: 100%;
  }
}