/* Reservations presentation. Uses Orders tokens; does not change data or actions. */
body.ts2 #reservationsSection.ts-module {
  --reservation-control-height: 40px;
  min-width: 0;
}
body.ts2 #reservationsSection.ts-module [hidden] { display: none !important; }
/* Preserve the existing permission and conditional visibility flags. */
body.ts2 #reservationsSection.ts-module :is([style*="display: none"], [style*="display:none"]) { display: none !important; }
body.ts2 #reservationsSection.ts-module :is(#reservationScopeField, #commercialLedgerScopeField):is([style*="display: none"], [style*="display:none"]) { display: none !important; }
body.ts2 #reservationsSection.ts-module .reservations-tabs > button:is([hidden], [style*="display: none"], [style*="display:none"]) { display: none !important; }
body.ts2 #reservationsSection.ts-module :is(.reservations-panel, .reservations-list-surface, .reservations-history-surface) { min-width: 0 !important; }
body.ts2 #reservationsSection.ts-module :is(.reservation-create-card, .reservations-history-surface, .reservations-list-surface, .reservation-monthly-surface) {
  width: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important;
}
body.ts2 #reservationsSection.ts-module .reservation-surface-head {
  width: 100% !important; min-height: 0 !important; padding: 0 0 20px !important; margin: 0 !important;
  border: 0 !important; background: transparent !important; text-align: left !important;
}
body.ts2 #reservationsSection.ts-module .reservation-surface-head h2 { font: 650 17px/1.4 var(--ts-font) !important; margin: 0 !important; }
body.ts2 #reservationsSection.ts-module :is(.reservation-history-head, .reservation-history-title) { justify-content: flex-start !important; align-items: center !important; text-align: left !important; }
body.ts2 #reservationsSection.ts-module .reservations-page-header {
  padding: 4px 0 24px !important;
  align-items: center !important;
  gap: 24px !important;
}
body.ts2 #reservationsSection.ts-module .reservations-global-filter {
  width: 210px !important;
  min-width: 0 !important;
  gap: 6px !important;
}
body.ts2 #reservationsSection.ts-module .reservations-tabs {
  gap: 0 !important;
  margin: 0 0 24px !important;
  width: 100% !important;
}
body.ts2 #reservationsSection.ts-module .reservations-tabs > button {
  padding: 12px 9px !important;
  gap: 8px !important;
}
body.ts2 #reservationsSection.ts-module .reservations-tabs > button:hover {
  background: var(--ts-brand-tint) !important;
  color: var(--ts-brand) !important;
}
body.ts2 #reservationsSection.ts-module .reservations-tab .reservations-tab-icon {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
}
body.ts2 #reservationsSection.ts-module .reservations-tab svg { width: 16px !important; height: 16px !important; min-width: 16px !important; }

/* Flex tracks naturally close the space when a permission hides a filter. */
body.ts2 #reservationsSection.ts-module :is(.reservation-history-filters, .reservation-filter-panel) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end !important;
  gap: 12px !important;
  padding: 0 0 20px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  width: 100% !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservation-history-filters, .reservation-filter-panel) > .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 158px;
  min-width: 0;
  margin: 0 !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservation-history-filters, .reservation-filter-panel) > :is(.reservation-history-search, .reservation-search-field) {
  flex: 1 1 300px;
}
body.ts2 #reservationsSection.ts-module #commercialLedgerScopeField { flex-basis: 200px; }
body.ts2 #reservationsSection.ts-module :is(.reservation-history-filters, .reservation-filter-panel) label {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservation-history-filters, .reservation-filter-panel, .reservations-global-filter) :is(input, select) {
  box-sizing: border-box;
  width: 100% !important;
  height: var(--reservation-control-height) !important;
  min-height: var(--reservation-control-height) !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 6px !important;
  background-color: var(--ts-surface) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
body.ts2 #reservationsSection.ts-module .reservation-history-search-control { height: var(--reservation-control-height); width: 100%; }
body.ts2 #reservationsSection.ts-module .reservation-history-search-control input { padding-left: 38px !important; }
body.ts2 #reservationsSection.ts-module :is(.reservation-refresh-btn, .ts-filter-action) {
  flex: 0 0 var(--reservation-control-height);
  width: var(--reservation-control-height) !important;
  min-width: var(--reservation-control-height) !important;
  height: var(--reservation-control-height) !important;
  min-height: var(--reservation-control-height) !important;
  align-self: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
}
body.ts2 #reservationsSection.ts-module .reservation-summary-grid-compact {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 0 20px !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 8px !important;
  min-height: 0;
}
body.ts2 #reservationsSection.ts-module .reservation-summary-item {
  padding: 14px 18px !important;
  border: 0 !important;
}
body.ts2 #reservationsSection.ts-module .reservation-summary-item + .reservation-summary-item { border-left: 1px solid var(--ts-border) !important; }
body.ts2 #reservationsSection.ts-module .reservation-summary-item strong { font-size: 24px !important; margin: 5px 0 0 !important; }
body.ts2 #reservationsSection.ts-module .commercial-ledger-header { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; padding: 0 0 20px !important; margin: 0 !important; width: 100% !important; min-height: 0 !important; background: transparent !important; border: 0 !important; }
body.ts2 #reservationsSection.ts-module .commercial-ledger-header > div { min-width: 0; }
body.ts2 #reservationsSection.ts-module #openCommercialRecordBtn { flex: 0 0 auto !important; width: auto !important; padding: 8px 14px !important; }
body.ts2 #reservationsSection.ts-module .reservation-conformation-tabs { gap: 24px; margin: 0 0 12px !important; padding: 0 !important; min-height: 42px; }
body.ts2 #reservationsSection.ts-module .reservation-conformation-tabs > button { min-height: 42px; font-size: 12px; font-weight: 600; }

/* Same row rhythm, borders, badges and button sizes as Orders. */
body.ts2 #reservationsSection.ts-module :is(.reservations-history-surface, .reservations-list-surface) .orders-table-scroll {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 8px !important;
  background: var(--ts-surface) !important;
  overflow: auto !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: visible !important;
}
body.ts2 #reservationsSection.ts-module .reservations-history-table { min-width: 1080px !important; }
body.ts2 #reservationsSection.ts-module .reservations-ledger-table { min-width: 1100px !important; }
body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) th {
  width: auto !important;
  padding: 12px !important;
  height: 40px;
  background: var(--ts-subtle) !important;
  color: var(--ts-muted) !important;
  font: 600 11px/1.4 var(--ts-font) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  border: 0 !important;
  border-bottom: 1px solid var(--ts-border) !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) td {
  padding: 14px 12px !important;
  height: auto !important;
  min-height: 0 !important;
  font: 400 12px/1.45 var(--ts-font) !important;
  color: var(--ts-text) !important;
  background: var(--ts-surface);
  border: 0 !important;
  border-bottom: 1px solid var(--ts-border) !important;
  vertical-align: middle !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) tbody tr:last-child td { border-bottom: 0 !important; }
body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) tbody tr:hover td { background: #fafbfc; }
body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) strong { font-size: 12px !important; font-weight: 600 !important; }
body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) small { font-size: 11px !important; line-height: 1.45 !important; color: var(--ts-muted) !important; }
body.ts2 #reservationsSection.ts-module :is(.reservation-main-cell, .reservation-client-cell) { gap: 4px; min-width: 0; }
body.ts2 #reservationsSection.ts-module :is(.reservation-property-cell, .reservation-owner-cell) { min-width: 130px; }
body.ts2 #reservationsSection.ts-module td:is([data-label="Importe"], [data-label="Importe total"], [data-label="Valor propiedad"], [data-label="Fecha"]) { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; font-variant-numeric: tabular-nums; }
body.ts2 #reservationsSection.ts-module .reservations-ledger-table td[data-label="Inmueble"] { min-width: 130px; max-width: 220px; word-break: normal; }
body.ts2 #reservationsSection.ts-module .reservations-ledger-table td[data-label="Reserva"] { min-width: 110px; }
body.ts2 #reservationsSection.ts-module .reservations-ledger-table td:is([data-label="Cliente"], [data-label="Vendedora"]) { min-width: 120px; }
body.ts2 #reservationsSection.ts-module .reservations-ledger-table td[data-label="Comisiones"] { min-width: 164px; }
body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) :is(th, td):last-child { width: 1% !important; min-width: 0 !important; white-space: nowrap; }
body.ts2 #reservationsSection.ts-module :is(.reservation-actions-cell, .reservation-ledger-actions) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: max-content;
  min-height: 36px !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservation-actions-cell, .reservation-ledger-actions) .table-btn {
  flex: 0 0 auto !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 6px !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 4px !important;
  color: var(--ts-text) !important;
  background: var(--ts-surface) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservation-actions-cell, .reservation-ledger-actions) .table-btn:has(span),
body.ts2 #reservationsSection.ts-module .reservation-ledger-actions .commercial-ledger-finalize-btn {
  width: auto !important;
  padding-inline: 10px !important;
  gap: 6px !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservation-actions-cell, .reservation-ledger-actions) .table-btn:hover { background: var(--ts-subtle) !important; border-color: #bcc4cc !important; }
body.ts2 #reservationsSection.ts-module :is(.reservation-actions-cell, .reservation-ledger-actions) :is(.reservation-preview-btn, .commercial-source-preview-btn) {
  width: auto !important;
  min-width: 48px !important;
  padding-inline: 12px !important;
  background: #17212b !important;
  border-color: #17212b !important;
  color: #fff !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservation-actions-cell, .reservation-ledger-actions) :is(.reservation-preview-btn, .commercial-source-preview-btn):hover { background: #2d3c4c !important; }
body.ts2 #reservationsSection.ts-module .reservation-actions-cell .reservation-pdf-btn {
  color: var(--ts-brand) !important;
  border-color: #efd7ca !important;
  background: #fffaf7 !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservation-actions-cell, .reservation-ledger-actions) svg { width: 16px !important; min-width: 16px !important; height: 16px !important; stroke-width: 1.8 !important; }
body.ts2 #reservationsSection.ts-module .reservation-conformation-badge {
  min-height: 0 !important;
  padding: 4px 6px !important;
  border-radius: 4px !important;
  font: 600 11px/1.35 var(--ts-font) !important;
}
body.ts2 #reservationsSection.ts-module :is(.reservation-missing-commission, .reservation-historical-commission) { width: fit-content; margin-top: 4px; border-radius: 4px; font-size: 10px; }
body.ts2 #reservationsSection.ts-module .commercial-ledger-table tr > :last-child { box-shadow: -1px 0 0 var(--ts-border); }
body.ts2 #reservationsSection.ts-module .commercial-ledger-table tr > :last-child { position: sticky !important; right: 0; }
body.ts2 #reservationsSection.ts-module :is(.pagination, .reservations-pagination) { padding: 16px 0 !important; gap: 12px !important; }

/* Secondary actions stay in the original row; the popover avoids scroll clipping. */
body.ts2 #reservationsSection.ts-module .reservation-row-menu {
  position: fixed;
  inset: auto;
  width: min(260px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  background: var(--ts-surface);
  box-shadow: var(--ts-shadow-overlay);
}
body.ts2 #reservationsSection.ts-module .reservation-row-menu:popover-open { display: flex; flex-direction: column; gap: 2px; }
body.ts2 #reservationsSection.ts-module .reservation-row-menu .table-btn,
body.ts2 #reservationsSection.ts-module .reservation-row-menu .table-btn:has(span),
body.ts2 #reservationsSection.ts-module .reservation-row-menu .commercial-ledger-finalize-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 10px !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 0 !important;
  text-align: left;
  white-space: normal !important;
  line-height: 1.4 !important;
}
body.ts2 #reservationsSection.ts-module .reservation-row-menu .table-btn svg { flex: 0 0 16px; }
body.ts2 #reservationsSection.ts-module .reservation-row-menu .reservation-menu-danger { color: var(--ts-danger) !important; }
body.ts2 #reservationsSection.ts-module .reservation-row-menu .table-btn:focus-visible { outline-offset: -2px !important; }

/* Form groups have one clear heading and one consistent field grid. */
body.ts2 #reservationsSection.ts-module .reservation-primary-fields {
  max-width: none;
  width: 100% !important;
  padding: 18px 20px !important;
  margin: 0 0 4px !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 8px !important;
  background: var(--ts-surface) !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 20px !important;
}
body.ts2 #reservationsSection.ts-module .reservation-primary-fields > .field { margin: 0 !important; }
body.ts2 #reservationsSection.ts-module .reservation-form-section {
  grid-template-columns: 150px minmax(0, 1fr) !important;
  padding: 24px 20px !important;
  gap: 28px !important;
}
body.ts2 #reservationsSection.ts-module .reservation-form-section > h3 { margin: 24px 0 0 !important; font-size: 14px !important; }
body.ts2 #reservationsSection.ts-module .reservation-fields-grid { gap: 18px 20px !important; }
body.ts2 #reservationsSection.ts-module .reservation-fields-grid > .field { margin: 0 !important; }
body.ts2 #reservationsSection.ts-module .reservation-fields-grid :is(input:not([type="hidden"]):not([type="checkbox"]), select) { min-height: 42px !important; }
body.ts2 #reservationsSection.ts-module .reservation-actions { padding: 20px !important; gap: 12px; }

/* Monthly controls wrap as units, keeping their buttons on the input baseline. */
body.ts2 #reservationsSection.ts-module .reservation-monthly-heading { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
body.ts2 #reservationsSection.ts-module .reservation-monthly-heading h2 { font: 650 17px/1.4 var(--ts-font); }
body.ts2 #reservationsSection.ts-module .reservation-monthly-controls { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 0; border: 0; background: transparent; }
body.ts2 #reservationsSection.ts-module .reservation-monthly-filter { display: flex; flex-direction: column; gap: 6px; width: auto; min-width: 100px; }
body.ts2 #reservationsSection.ts-module .reservation-monthly-filter label { margin: 0; font-size: 12px; line-height: 18px; font-weight: 500; }
body.ts2 #reservationsSection.ts-module .reservation-monthly-controls :is(select, button) { height: 40px !important; min-height: 40px !important; margin: 0 !important; }
body.ts2 #reservationsSection.ts-module .reservation-monthly-controls > button:not(.reservation-report-btn) { width: 40px !important; min-width: 40px !important; padding: 8px !important; }

@media (max-width: 1100px) and (min-width: 721px) {
  body.ts2 #reservationsSection.ts-module .reservation-history-filters > .reservation-history-search { flex-basis: 100%; }
  body.ts2 #reservationsSection.ts-module .reservation-history-filters > .field:not(.reservation-history-search) { flex: 1 1 150px; }
  body.ts2 #reservationsSection.ts-module .reservation-form-section { grid-template-columns: 130px minmax(0, 1fr) !important; gap: 20px !important; padding-inline: 0 !important; }
}
@media (max-width: 720px) {
  body.ts2 #reservationsSection.ts-module { --reservation-control-height: 44px; }
  body.ts2 #reservationsSection.ts-module .reservations-page-header { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
  body.ts2 #reservationsSection.ts-module .reservations-global-filter { width: 100% !important; grid-template-rows: auto 44px !important; }
  body.ts2 #reservationsSection.ts-module .reservations-tabs { gap: 0 !important; }
  body.ts2 #reservationsSection.ts-module :is(.reservation-history-filters, .reservation-filter-panel) > .field { flex: 1 1 calc(50% - 12px); width: auto !important; }
  body.ts2 #reservationsSection.ts-module :is(.reservation-history-filters, .reservation-filter-panel) > :is(.reservation-history-search, .reservation-search-field) { flex-basis: 100%; }
  body.ts2 #reservationsSection.ts-module :is(.reservation-history-filters, .reservation-filter-panel) :is(input, select) { font-size: 16px !important; }
  body.ts2 #reservationsSection.ts-module .reservation-summary-item { padding: 12px !important; }
  body.ts2 #reservationsSection.ts-module .reservation-summary-item span { font-size: 11px !important; }
  body.ts2 #reservationsSection.ts-module .reservation-summary-item strong { font-size: 22px !important; }
  body.ts2 #reservationsSection.ts-module .reservation-primary-fields { grid-template-columns: 1fr !important; padding: 16px !important; }
  body.ts2 #reservationsSection.ts-module .reservation-form-section { grid-template-columns: 1fr !important; padding: 24px 0 !important; gap: 16px !important; }
  body.ts2 #reservationsSection.ts-module .reservation-form-section > h3 { margin: 0 !important; }
  body.ts2 #reservationsSection.ts-module .reservation-fields-grid { grid-template-columns: 1fr !important; }
  body.ts2 #reservationsSection.ts-module .reservation-actions { padding: 20px 0 !important; }
  body.ts2 #reservationsSection.ts-module .reservation-monthly-controls { width: 100%; }
  body.ts2 #reservationsSection.ts-module .reservation-monthly-filter { flex: 1 1 110px; }
  body.ts2 #reservationsSection.ts-module .reservation-monthly-controls .reservation-report-btn { flex: 1 1 auto; }
  body.ts2 #reservationsSection.ts-module .reservation-monthly-controls :is(select, button) { height: 44px !important; min-height: 44px !important; }
  body.ts2 #reservationsSection.ts-module .reservation-conformation-tabs { gap: 16px; overflow-x: auto; }
  body.ts2 #reservationsSection.ts-module .commercial-ledger-header { flex-wrap: wrap; }
  body.ts2.mobile-ios-body #reservationsSection.ts-module #openCommercialRecordBtn { flex: 0 0 auto !important; width: auto !important; padding: 8px 14px !important; }

  /* Each mobile row keeps every value and every existing action. */
  body.ts2 #reservationsSection.ts-module :is(.reservations-history-surface, .reservations-list-surface) .orders-table-scroll { border: 0 !important; background: transparent !important; overflow: visible !important; padding: 0 !important; }
  body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) { display: block !important; min-width: 0 !important; }
  body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) thead { display: none !important; }
  body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) tbody { display: grid !important; gap: 12px !important; }
  body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) tbody tr {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important; padding: 16px !important; margin: 0 !important;
    border: 1px solid var(--ts-border) !important; border-radius: 8px !important; background: var(--ts-surface) !important; box-shadow: none !important;
  }
  body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) tbody td {
    display: block !important; min-width: 0 !important; width: auto !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important; position: static !important; box-shadow: none !important; white-space: normal !important; overflow-wrap: anywhere; grid-column: auto !important; grid-row: auto !important;
  }
  body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) tbody td::before {
    display: block !important; position: static !important; width: auto !important; content: attr(data-label);
    margin-bottom: 5px; color: var(--ts-muted); font-size: 10px; font-weight: 500; text-transform: none;
  }
  body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) td:is([data-label="Inmueble"], [data-label="Comisiones"], [data-label="Acciones"], [colspan]) { grid-column: 1 / -1 !important; }
  body.ts2 #reservationsSection.ts-module :is(.reservations-history-table, .reservations-ledger-table) tbody :is(th, td):last-child { width: 100% !important; min-width: 0 !important; position: static !important; padding: 0 !important; margin: 0 !important; }
  body.ts2 #reservationsSection.ts-module :is(.reservation-property-cell, .reservation-owner-cell) { min-width: 0; }
  body.ts2 #reservationsSection.ts-module :is(.reservation-actions-cell, .reservation-ledger-actions) { width: 100%; min-width: 0; flex-wrap: wrap !important; }
  body.ts2 #reservationsSection.ts-module :is(.reservation-actions-cell, .reservation-ledger-actions) .table-btn { min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
  body.ts2 #reservationsSection.ts-module .reservation-row-menu .table-btn { width: 100% !important; height: auto !important; min-height: 44px !important; }
}

/* Reports, commission summaries and data editing share the Orders spacing. */
body.ts2 .reservation-report-backdrop { padding:24px; background:rgba(20,28,38,.42); }
body.ts2 .reservation-report-dialog { width:min(640px,100%); max-height:calc(100dvh - 48px); overflow:auto; border:1px solid var(--ts-border,#dfe3e8); border-radius:10px; box-shadow:0 16px 48px #17212b26; }
body.ts2 .reservation-report-head { padding:24px; align-items:flex-start; gap:20px; }
body.ts2 .reservation-report-head h2 { font:700 22px/1.3 var(--ts-font,Arial); margin:4px 0 8px; }
body.ts2 .reservation-report-head p { color:#697481; font-size:13px; line-height:1.5; margin:0; max-width:440px; }
body.ts2 .reservation-report-head > button { flex:0 0 36px; width:36px; height:36px; border-radius:5px; padding:8px; }
body.ts2 .reservation-report-form { padding:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
body.ts2 .reservation-report-form > label { min-width:0; margin:0; display:flex; flex-direction:column; gap:7px; color:#374151; font:600 12px/1.4 var(--ts-font,Arial); }
body.ts2 .reservation-report-form > label > select { width:100%; height:42px; border:1px solid #d8dde3; background:#fff; border-radius:5px; padding:0 12px; font:400 13px var(--ts-font,Arial); color:#202a35; }
body.ts2 .reservation-report-wide, body.ts2 .reservation-report-types { grid-column:1/-1; }
body.ts2 .reservation-report-types { border:0; padding:0; margin:0; min-width:0; }
body.ts2 .reservation-report-types legend { font:600 12px var(--ts-font,Arial); color:#374151; padding:0; margin-bottom:9px; }
body.ts2 .reservation-report-type-options { display:grid; grid-template-columns:.8fr 1fr 1fr 1.2fr; gap:8px; }
body.ts2 .reservation-report-type-options label { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; padding:12px 8px; margin:0; border:1px solid #dce1e5; border-radius:5px; background:#fff; font:500 12px var(--ts-font,Arial); cursor:pointer; min-width:0; }
body.ts2 .reservation-report-type-options label:has(:checked) { border-color:#eeb79c; background:#fff7f2; color:#b54309; }
body.ts2 .reservation-report-type-options input { appearance:auto!important; width:15px!important; min-width:15px!important; height:15px!important; min-height:15px!important; margin:0!important; accent-color:#d94b00; box-shadow:none!important; padding:0!important; }
body.ts2 .reservation-report-note { grid-column:1/-1; display:flex; gap:10px; padding:12px; margin:0; background:#f6f7f9; border-radius:5px; font:400 12px/1.5 var(--ts-font,Arial); color:#62707e; }
body.ts2 .reservation-report-note svg { width:17px; height:17px; flex-shrink:0; margin-top:1px; }
body.ts2 .reservation-report-actions { border-top:1px solid #e5e8ec; margin:0 -24px -24px; padding:16px 24px; gap:8px; }
body.ts2 .reservation-report-actions .btn { min-height:40px; height:40px; min-width:110px; border-radius:5px; font-size:12px; padding:0 16px; }
body.ts2 .reservation-report-actions .btn.reservation-report-preview { flex:0 0 40px!important; width:40px!important; min-width:40px!important; padding:0!important; }
body.ts2 .reservation-report-preview svg { width:18px!important; min-width:18px!important; height:18px!important; flex-shrink:0!important; }
/* The styled date popup uses the existing date input, without changing saved values. */
/* Commission page: quiet summaries, a readable matrix and bounded operation lists. */
body.ts2 #reservationsSection.ts-module #reservationCommissionReport { display:grid; gap:24px; min-width:0; }
body.ts2 #reservationsSection.ts-module .reservation-commission-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid #dfe3e8; border-radius:6px; overflow:hidden; background:#fff; margin:0; }
body.ts2 #reservationsSection.ts-module .reservation-commission-summary article { display:block; padding:20px; border:0; border-right:1px solid #e5e8ed; border-radius:0; background:#fff; box-shadow:none; min-width:0; }
body.ts2 #reservationsSection.ts-module .reservation-commission-summary article:last-child { border-right:0; }
body.ts2 #reservationsSection.ts-module .reservation-commission-card-icon { display:none; }
body.ts2 #reservationsSection.ts-module .reservation-commission-summary span { display:block; color:#66717f; font:500 12px/1.4 var(--ts-font); }
body.ts2 #reservationsSection.ts-module .reservation-commission-summary strong { display:block; color:#202932; font:700 24px/1.35 var(--ts-font); margin:8px 0 4px; font-variant-numeric:tabular-nums; }
body.ts2 #reservationsSection.ts-module .reservation-commission-summary small { color:#808995; font:400 11px/1.4 var(--ts-font); }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-report-block { margin:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; min-width:0; overflow:visible; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-monthly-table-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; margin:0; padding:0 0 14px; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-monthly-table-heading h3 { font:650 15px/1.4 var(--ts-font); margin:0; color:#252f3a; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-monthly-table-heading > span { font:400 11px var(--ts-font); color:#77818e; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport :is(.reservation-monthly-scroll,.orders-table-scroll) { border:1px solid #e0e4e9; border-radius:6px; background:#fff; overflow:auto; max-width:100%; margin:0; padding:0; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport table { border-collapse:separate; border-spacing:0; margin:0; border:0; border-radius:0; }
body.ts2 #reservationsSection.ts-module .reservation-commission-table { width:100%; min-width:1550px; table-layout:fixed; }
body.ts2 #reservationsSection.ts-module .reservation-commission-table.is-compact { min-width:540px; }
/* The sticky corner must paint above scrolling month headings, as the names do above amounts. */
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-monthly-scroll { isolation:isolate; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-monthly-scroll:focus-visible { outline:2px solid var(--ts-brand); outline-offset:3px; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-commission-table tr > :first-child { position:sticky; left:0; box-shadow:inset -1px 0 #e0e4e9; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-commission-table thead th { z-index:2; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-commission-table thead th:first-child { z-index:3; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-commission-table tbody th { z-index:1; }

body.ts2 #reservationsSection.ts-module .reservation-commission-table .reservation-person-col { width:165px; }
body.ts2 #reservationsSection.ts-module .reservation-commission-table .reservation-total-col { width:145px; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport thead th { background:#f0f2f6!important; color:#687380!important; font:600 10px/1.4 var(--ts-font)!important; text-transform:none; padding:12px 14px!important; border:0!important; border-bottom:1px solid #dfe3e8!important; letter-spacing:0; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport tbody :is(th,td) { background:#fff; border:0; border-bottom:1px solid #edf0f3; padding:14px!important; height:auto; font:400 12px/1.5 var(--ts-font); color:#34404c; vertical-align:middle; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport tbody tr:last-child :is(th,td) { border-bottom:0; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport tbody tr:hover :is(th,td) { background:#fafbfd; }
body.ts2 #reservationsSection.ts-module #reservationCommissionReport tbody th { text-align:left; background:#fff; font-weight:650; }
body.ts2 #reservationsSection.ts-module .reservation-person-avatar { display:none; }
body.ts2 #reservationsSection.ts-module .reservation-commission-table :is(td,th):not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
body.ts2 #reservationsSection.ts-module .reservation-commission-table .commission-usd { font:600 11px/1.5 var(--ts-font); color:#28343f; white-space:nowrap; }
body.ts2 #reservationsSection.ts-module .reservation-commission-table .commission-ars { display:block; font:500 11px/1.5 var(--ts-font); color:#6c7884; white-space:nowrap; }
body.ts2 #reservationsSection.ts-module .reservation-commission-table .reservation-monthly-row-total { background:#fafbfd; }
body.ts2 #reservationsSection.ts-module .reservation-history-import-table { width:100%; min-width:1000px; }
body.ts2 #reservationsSection.ts-module .reservation-history-import-table th:nth-child(3) { width:24%; }
body.ts2 #reservationsSection.ts-module .reservation-history-import-table :is(td:nth-child(1),td:nth-child(6),td:nth-child(7)) { white-space:nowrap; font-variant-numeric:tabular-nums; }
body.ts2 #reservationsSection.ts-module .reservation-history-kind { border:0; border-radius:3px; background:#f4f5f7; color:#626e7b; padding:4px 7px; font:500 10px var(--ts-font); }
body.ts2 #reservationsSection.ts-module .reservation-history-import-table .status { border-radius:3px; font-size:10px; padding:4px 7px; }
body.ts2 #reservationsSection.ts-module .reservation-operation-commission-note { display:block; color:#87909c; font-size:10px; }
body.ts2 #reservationsSection.ts-module .reservation-operations-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:14px 0 0; color:#76818e; font:400 12px var(--ts-font); }
body.ts2 #reservationsSection.ts-module .reservation-operations-pagination > div { display:flex; align-items:center; gap:12px; }
body.ts2 #reservationsSection.ts-module .reservation-operations-pagination button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:0 12px; font:600 12px var(--ts-font); color:#3c4753; border:1px solid #dce1e6; border-radius:5px; background:white; cursor:pointer; }
body.ts2 #reservationsSection.ts-module .reservation-operations-pagination button:disabled { opacity:.4; cursor:default; }
body.ts2 #reservationsSection.ts-module .reservation-operations-pagination button:not(:disabled):hover { border-color:#e79a74; background:#fff7f2; color:#b94409; }
/* Data dialog: full-width composition and distribution prevent isolated half columns. */
body.ts2 #reservationsSection.ts-module #commercialLedgerModal { padding:24px!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-modal-card { width:min(880px,calc(100vw - 48px))!important; max-width:880px!important; max-height:calc(100dvh - 48px)!important; border-radius:8px!important; overflow:auto!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-head { padding:22px 24px!important; background:#fff!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-head h3 { font:700 20px/1.3 var(--ts-font)!important; margin:4px 0 6px!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-head p { margin:0; font-size:12px; color:#75808c; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px 16px!important; padding:24px!important; align-items:start!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form > * { min-width:0; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form > .full { grid-column:1/-1!important; width:100%!important; box-sizing:border-box; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form > label { display:flex!important; flex-direction:column!important; gap:7px!important; margin:0!important; font:600 12px/1.4 var(--ts-font)!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form label small { color:#7e8894; font:400 11px/1.4 var(--ts-font); }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form :is(input:not([type="checkbox"]),select) { width:100%!important; min-width:0!important; height:40px!important; min-height:40px!important; padding:0 11px!important; border:1px solid #d8dee5!important; border-radius:5px!important; background:#fff!important; box-shadow:none!important; font:400 12px var(--ts-font)!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form :is(input,select):disabled { background:#f7f8fa!important; color:#818a96!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-money-control { display:flex; gap:8px; width:100%; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-money-control select { flex:0 0 76px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-money-control input { flex:1; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-breakdown { padding:18px!important; background:#f7f8fa!important; border:1px solid #e2e6eb!important; border-radius:6px!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-breakdown header { padding:0 0 12px; margin:0; display:flex; justify-content:space-between; align-items:center; gap:12px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-breakdown header strong { font-size:22px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-breakdown dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin:0; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-breakdown dl > div { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 0; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-breakdown-total { grid-column:1/-1; padding:12px 0 0!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation { padding:18px; border:1px solid #e0e5eb; border-radius:6px; background:#fff; box-shadow:none; gap:14px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation header { display:flex; justify-content:space-between; align-items:center; gap:24px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation header strong { font:650 16px/1.4 var(--ts-font); }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation header small { font:400 11px/1.5 var(--ts-font); color:#7b8592; max-width:440px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-add { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; width:auto; min-width:0; height:36px; min-height:36px; padding:0 12px; border-radius:5px; border:1px solid #dbe0e6; background:#fff; color:#37414d; font-size:12px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal :is(.sales-commission-column-head,.sales-commission-allocation-row) { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.9fr) 36px; gap:10px; padding:0; margin:0; border:0; background:transparent; border-radius:0; box-shadow:none; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-column-head { font-size:10px; font-weight:600; text-transform:none; letter-spacing:0; color:#788391; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-remove { height:36px; width:36px; border:1px solid #e0e4e9; border-radius:5px; background:#fff; color:#7a8592; padding:8px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-remove:hover { color:#c33829; background:#fff4f1; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding-top:14px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-summary > div { padding:4px 16px; background:transparent; border:0; border-right:1px solid #e2e6ec; border-radius:0; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-summary > div:first-child { padding-left:0; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-summary > div:last-child { border:0; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-summary strong { font:700 16px/1.4 var(--ts-font); font-variant-numeric:tabular-nums; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form > .reservation-colleague-toggle { display:flex!important; flex-direction:row!important; align-items:center!important; gap:12px!important; padding:14px 16px!important; min-height:64px!important; border:1px solid #e1e5ea; background:#fafbfd; border-radius:6px; cursor:pointer; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .reservation-colleague-toggle input { appearance:auto!important; width:18px!important; min-width:18px!important; height:18px!important; min-height:18px!important; padding:0!important; margin:0!important; accent-color:#d94b00; border-radius:3px!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .reservation-colleague-toggle > span { display:grid; gap:3px; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .reservation-colleague-toggle strong { font:600 12px var(--ts-font); }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-actions { display:flex!important; justify-content:flex-end; flex-wrap:wrap; padding:16px 24px!important; gap:8px!important; background:#fff!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-actions button { height:40px; min-width:110px; border-radius:5px; font-size:12px; }
@media(max-width:640px) {
  body.ts2 .reservation-report-backdrop { padding:12px; align-items:center; }
  body.ts2 .reservation-report-dialog { max-height:calc(100dvh - 24px); border-radius:8px; }
  body.ts2 .reservation-report-head { padding:20px; }
  body.ts2 .reservation-report-form { padding:20px; gap:18px 12px; }
  body.ts2 .reservation-report-type-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.ts2 .reservation-report-actions { margin:0 -20px -20px; padding:16px 20px; }
  body.ts2 #reservationsSection.ts-module .reservation-commission-summary { grid-template-columns:1fr; }
  body.ts2 #reservationsSection.ts-module .reservation-commission-summary article { border-right:0; border-bottom:1px solid #e5e8ed; padding:16px; }
  body.ts2 #reservationsSection.ts-module .reservation-commission-summary article:last-child { border-bottom:0; }
  body.ts2 #reservationsSection.ts-module .reservation-operations-pagination > div { width:100%; justify-content:space-between; gap:6px; }
  body.ts2 #reservationsSection.ts-module .reservation-page-position { font-size:11px; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal { padding:8px!important; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-modal-card { width:calc(100vw - 16px)!important; max-height:calc(100dvh - 16px)!important; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-head { padding:18px 16px!important; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form { grid-template-columns:1fr!important; padding:16px!important; gap:16px!important; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-breakdown dl { grid-template-columns:1fr; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-breakdown header { align-items:flex-start; flex-direction:column; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation { padding:14px; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation header { flex-direction:column; align-items:flex-start; gap:12px; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-column-head { display:none; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation-row { grid-template-columns:minmax(0,1fr) 36px; gap:8px; padding:12px 0; border-bottom:1px solid #e7eaee; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation-row [data-sales-commission-email] { grid-column:1; grid-row:1; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation-row [data-sales-commission-role] { grid-column:1; grid-row:2; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-allocation-row [data-sales-commission-amount] { grid-column:1; grid-row:3; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-remove { grid-column:2; grid-row:1; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-summary { grid-template-columns:1fr; gap:12px; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-summary > div { display:flex; justify-content:space-between; gap:12px; padding:0; border:0; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-actions { padding:14px 16px!important; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-actions button { flex:1 1 auto; min-width:90px; }
}
/* Preserve permission/conditional visibility over all dialog layout rules. */
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form [hidden],
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-actions [hidden] { display:none!important; }
@media(min-width:641px) {
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form { grid-template-columns:repeat(6,minmax(0,1fr))!important; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form > label { grid-column:span 3; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-form > label:has(#commercialLedgerDate,#commercialLedgerTemplate,#commercialLedgerNumber) { grid-column:span 2; }
}
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .reservation-date-trigger { height:40px!important; min-height:40px!important; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .reservation-calendar-head select { height:32px!important; min-height:32px!important; padding:0 4px!important; }
body.ts2 #reservationsSection.ts-module .reservation-commission-summary article::after { display:none; }
body.ts2 #reservationsSection.ts-module .reservation-commission-table tbody th strong { font:600 13px/1.5 var(--ts-font); }
body.ts2 .reservation-report-actions { grid-column:1/-1!important; }
body.ts2 .reservation-report-head > button svg,
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-remove svg { width:16px!important; height:16px!important; min-width:16px!important; flex-shrink:0; }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .commercial-ledger-modal-card { padding:0!important; }
@media(max-width:640px) {
  body.ts2 .reservation-report-actions .btn { flex:1 1 auto!important; width:auto!important; min-width:0!important; }
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .users-modal-actions button { width:auto!important; }
}

/* Adhesion commissions are independent of the buyer/seller charges. */
body.ts2 #reservationsSection.ts-module #commercialLedgerModal .sales-commission-independent-note { margin:0 0 14px; padding:10px 12px; border:1px solid #e3e7ec; border-radius:5px; background:#fafbfd; color:#65717e; font:400 12px/1.5 var(--ts-font); }
body.ts2 #reservationsSection.ts-module #commercialLedgerModal #salesCommissionNetSummary[hidden], body.ts2 #reservationsSection.ts-module #commercialLedgerModal #salesCommissionIndependentNote[hidden] { display:none!important; }

/* Keep commission history readable as cards on narrow screens. The legacy
   table rules otherwise mix table-cells with block rows and crush each value. */
@media (max-width:760px) {
  body.ts2 #reservationsSection.ts-module #reservationCommissionReport .orders-table-scroll {
    border:0!important; background:transparent!important; overflow:visible!important;
  }
  body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-history-import-table {
    display:block!important; width:100%!important; min-width:0!important;
  }
  body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-history-import-table thead { display:none!important; }
  body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-history-import-table tbody { display:grid!important; gap:12px!important; width:100%!important; }
  body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-history-import-table tbody tr {
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important;
    box-sizing:border-box!important; width:100%!important; min-width:0!important; margin:0!important; padding:16px!important;
    background:#fff!important; border:1px solid var(--ts-border,#dfe3e8)!important; border-radius:8px!important; box-shadow:none!important;
  }
  body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-history-import-table tbody td {
    display:block!important; width:auto!important; min-width:0!important; max-width:none!important;
    padding:0!important; margin:0!important; border:0!important; position:static!important; box-shadow:none!important;
    background:transparent!important; text-align:left!important; white-space:normal!important; overflow-wrap:anywhere;
  }
  body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-history-import-table tbody td::before {
    display:block!important; position:static!important; width:auto!important; min-width:0!important;
    content:attr(data-label); margin-bottom:5px; color:var(--ts-muted,#77818e); font-size:10px; font-weight:500; text-transform:none; letter-spacing:0;
  }
  body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-history-import-table td:is([data-label="Propiedad"],[data-label="Comisión"],[colspan]) { grid-column:1/-1!important; }
  body.ts2 #reservationsSection.ts-module #reservationCommissionReport .reservation-history-import-table td[colspan]::before { display:none!important; }
}