/* ════════════════════════════════════════════════════════════════════════
   bo-agenda.css — Desktop back-office: Agenda master/detail split.
   Non-destructive layer loaded after style.css. Mobile untouched (<1024px):
   the detail pane is hidden and the bookings table renders exactly as before.
   Tokens only (DESIGN.md): matte ink, muted crimson/sage/clay, soft black shadow.
   ════════════════════════════════════════════════════════════════════════ */

/* Detail pane is desktop-only; on mobile it never shows. */
#booking-detail-pane { display: none; }

@media (min-width: 1024px) {
  /* Split the bookings sub-view into master (list) + detail (panel).
     :not(.hidden-tab) so the calendar tab's hide rule still wins. */
  #sub-view-bookings-list:not(.hidden-tab) {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
    grid-template-areas:
      "summary summary"
      "master  detail";
    gap: 24px;
    align-items: start;
  }
  #sub-view-bookings-list .bookings-summary-bar { grid-area: summary; margin-bottom: 0; }
  #sub-view-bookings-list .bookings-card { grid-area: master; margin-top: 0 !important; min-width: 0; }

  /* Detail pane: sticky under the 64px topbar, its own scroll ("todo en scrollview"). */
  #booking-detail-pane {
    grid-area: detail;
    display: block;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    padding: 22px;
    scrollbar-width: thin;
  }

  /* Master rows become selectable. */
  #bookings-tbody .booking-row { cursor: pointer; transition: background var(--transition-fast); }
  #bookings-tbody .booking-row:hover { background: var(--bg-tertiary); }
  #bookings-tbody .booking-row.selected {
    background: rgba(var(--crimson-rgb), 0.10);
    box-shadow: inset 3px 0 0 var(--crimson);
  }
}

/* ── Detail pane internals ─────────────────────────────────────────────── */
.bo-bd-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; min-height: 280px; color: var(--text-muted);
}
.bo-bd-empty i { font-size: 34px; opacity: 0.5; }
.bo-bd-empty p { font-size: 14px; max-width: 26ch; }

.bo-bd-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color);
}
.bo-bd-client { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.bo-bd-sub { margin-top: 3px; font-size: 13px; color: var(--text-secondary); }

/* Figure grid (precio / señal / método) — Space Mono numbers. */
.bo-bd-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.bo-bd-fig {
  background: var(--bg-tertiary); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.bo-bd-fig.span2 { grid-column: 1 / -1; }
.bo-bd-fig .k { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bo-bd-fig .v { margin-top: 4px; font-family: 'Space Mono', monospace; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.bo-bd-fig .v.income { color: var(--accent); }

.bo-bd-row { display: flex; align-items: baseline; gap: 8px; margin: 9px 0; font-size: 14px; }
.bo-bd-row .lbl { color: var(--text-muted); min-width: 92px; font-size: 12.5px; }
.bo-bd-row .val { color: var(--text-primary); }

.bo-bd-section-title {
  margin: 20px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}

/* Action buttons inside the pane. */
.bo-bd-actions { display: grid; gap: 9px; }
.bo-bd-actions .bo-bd-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: inherit; font-size: 14px; font-weight: 600; text-align: left;
  color: var(--text-primary); background: var(--bg-tertiary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 12px 14px; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast);
}
.bo-bd-actions .bo-bd-btn i { width: 18px; text-align: center; color: var(--text-secondary); }
.bo-bd-actions .bo-bd-btn:hover { background: var(--bg-secondary); border-color: var(--text-muted); }
.bo-bd-actions .bo-bd-btn.is-primary { background: var(--crimson); border-color: var(--crimson); color: var(--text-primary); }
.bo-bd-actions .bo-bd-btn.is-primary i { color: var(--text-primary); }
.bo-bd-actions .bo-bd-btn.is-primary:hover { background: #b53333; }
.bo-bd-actions .bo-bd-btn.is-wa i { color: #25D366; }
.bo-bd-actions .bo-bd-btn.is-danger { color: var(--danger); }
.bo-bd-actions .bo-bd-btn.is-danger i { color: var(--danger); }