/* Screen-only corrections; printed statements retain their document styles. */ @media screen { html[data-theme="dark"] body.workspace-ui #authGate { background: var(--page-gradient) !important; color: var(--text-1); } html[data-theme="dark"] #authGate .auth-card { background: #171412 !important; border-color: var(--border); } html[data-theme="dark"] #authGate .auth-panel { background: #171412; color: var(--text-1); } html[data-theme="dark"] #authGate :is(h1,h2,label,.auth-brand strong,.auth-setup strong) { color: var(--text-1) !important; } html[data-theme="dark"] #authGate :is(.auth-copy p,.auth-brand span,.auth-visual-copy p,.auth-loading,.auth-message,.auth-setup) { color: var(--text-2) !important; } html[data-theme="dark"] #authGate .eyebrow { color: var(--brand-soft) !important; } html[data-theme="dark"] #authGate .auth-message[data-kind="error"] { color: var(--danger) !important; } html[data-theme="dark"] #authGate input { background: #292320 !important; color: var(--text-1) !important; caret-color: var(--text-1); border-color: var(--control-border) !important; color-scheme: dark; } html[data-theme="dark"] #authGate input::placeholder { color: var(--text-2) !important; opacity: 1; } html[data-theme="dark"] #authGate input:-webkit-autofill { -webkit-text-fill-color: var(--text-1) !important; -webkit-box-shadow: 0 0 0 1000px #292320 inset !important; caret-color: var(--text-1); } html[data-theme="dark"] body.workspace-ui :is(.report-filter-card,.report-column-picker) { background: var(--bg-surface) !important; color: var(--text-1) !important; border-color: var(--border) !important; } html[data-theme="dark"] body.workspace-ui .report-filter-card :is(label,legend) { color: var(--text-1) !important; } html[data-theme="dark"] body.workspace-ui .report-filter-card :is(input:not([type="checkbox"]),select,textarea) { background: #292320 !important; color: var(--text-1) !important; border-color: var(--control-border) !important; color-scheme: dark; } html[data-theme="dark"] body.workspace-ui .report-filter-card option { background: #292320; color: var(--text-1); } html[data-theme="dark"] body.workspace-ui .report-filter-card input::placeholder { color: var(--text-2) !important; opacity: 1; } html[data-theme="dark"] body.workspace-ui .report-column-picker label { background: var(--bg-raised) !important; border-color: var(--border) !important; } html[data-theme="dark"] body.workspace-ui .report-filter-actions { border-color: var(--border) !important; } html[data-theme="dark"] body.workspace-ui :is(#paymentsDialog,.supplier-card-ledger,.report-preview) :is(td,th) { color: var(--text-1) !important; border-color: var(--border) !important; } html[data-theme="dark"] body.workspace-ui :is(#paymentsDialog,.supplier-card-ledger) td::before { color: var(--text-2) !important; } html[data-theme="dark"] body.workspace-ui :is(.report-document-head,.report-preview-table,.report-totals,.report-total-card,.report-preview-actions) { background: var(--bg-surface) !important; color: var(--text-1) !important; border-color: var(--border) !important; } html[data-theme="dark"] body.workspace-ui .report-preview :is(table,thead,tbody,tr,td,th) { background: transparent !important; } html[data-theme="dark"] body.workspace-ui .report-preview :is(strong,h3) { color: var(--text-1) !important; } html[data-theme="dark"] body.workspace-ui .report-preview :is(p,small,.report-total-card span,.report-document-meta) { color: var(--text-2) !important; } html[data-theme="dark"] body.workspace-ui :is(#paymentsDialog .amount,.supplier-card-amount) { color: var(--ok) !important; } html[data-theme="dark"] body.workspace-ui #upcomingEventsTable .event-type { color: var(--info) !important; background: var(--bg-info) !important; } html[data-theme="dark"] body.workspace-ui #upcomingEventsTable .reservation-code-subtitle { color: var(--ok) !important; background: var(--bg-ok) !important; } html[data-theme="dark"] body.workspace-ui #reservationSidePanel { background: #171412 !important; } body.workspace-ui .cash-cut-correction { grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr)); } body.workspace-ui .cash-cut-correction :is(label,input,button) { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; } body.workspace-ui .cash-cut-correction button { white-space: normal; } } @media screen and (max-width:720px) { body.workspace-ui #paymentsDialog .modal-table-wrap { flex: 0 0 auto; min-height: 0; height: auto; overflow: visible; border: 0; background: transparent; } body.workspace-ui :is(#paymentsDialog table,.supplier-card-ledger,.supplier-card-ledger tbody,#reservationPaymentRows) { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100%; } body.workspace-ui :is(#paymentsDialog,.supplier-card-ledger) thead { display: none !important; } body.workspace-ui :is(#reservationPaymentRows,#supplierCardsRows) > tr { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 10px 12px; padding: 16px !important; margin-bottom: 12px; border: 1px solid var(--border,var(--line)) !important; border-radius: 8px; background: var(--bg-surface,#fff) !important; } body.workspace-ui :is(#reservationPaymentRows,#supplierCardsRows) > tr > td { display: block !important; grid-column: 1 / -1; width: auto !important; min-width: 0 !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 14px; line-height: 1.5; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; color: var(--text-1,var(--ink)) !important; } body.workspace-ui :is(#reservationPaymentRows,#supplierCardsRows) > tr > td::before { display:none !important; } body.workspace-ui #reservationPaymentRows > tr > td:nth-child(3) { grid-row:1; grid-column:2; font-size:20px; font-weight:800; color:var(--ok,var(--accent)) !important; } body.workspace-ui #reservationPaymentRows > tr > td:first-child { grid-row:1; grid-column:1; } body.workspace-ui #reservationPaymentRows > tr > td:last-child .payment-row-actions { justify-content:flex-end; gap:8px; } body.workspace-ui #reservationPaymentRows > tr > td:empty { display:none !important; } body.workspace-ui #supplierCardsRows > tr > td:nth-child(2) { grid-row:1; font-size:20px; font-weight:800; } body.workspace-ui #supplierCardsRows > tr > td:nth-child(5) { grid-row:2; font-size:18px; font-weight:700; } body.workspace-ui #supplierCardsRows > tr > td:nth-child(7) { font-size:22px; font-weight:800; color:var(--ok,var(--accent)) !important; border-top:1px solid var(--border,var(--line)) !important; padding-top:10px !important; } body.workspace-ui #supplierCardsRows > tr > td:nth-child(8) { display:none !important; } body.workspace-ui #supplierCardsRows > tr > td:nth-child(6) { display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } body.workspace-ui #supplierCardsRows :is(button,a) { max-width:100%; width:auto; min-height:44px; white-space:normal; word-break:normal; } body.workspace-ui .supplier-card-ledger-wrap { border:0; background:transparent !important; overflow:visible; } body.workspace-ui .cash-cut-correction { grid-template-columns:minmax(0,1fr); } body.workspace-ui #paymentsDialog .dialog-actions { flex-wrap:wrap; gap:10px; } } /* Flight alert uses the same dark surfaces as the workspace, including its header. */ @media screen { html[data-theme="dark"] body.workspace-ui #flightAlertDialog { background:var(--bg-page); color:var(--text-1); border-color:var(--border); } html[data-theme="dark"] body.workspace-ui #flightAlertDialog :is(.flight-alert-head,.dialog-actions,.flight-alert-item) { background:var(--bg-surface); border-color:var(--border); color:var(--text-1); } html[data-theme="dark"] body.workspace-ui #flightAlertDialog :is(h2,.flight-alert-item strong) { color:var(--text-1); } html[data-theme="dark"] body.workspace-ui #flightAlertDialog :is(.flight-alert-item span,.flight-alert-item small,#flightAlertDescription) { color:var(--text-2); } html[data-theme="dark"] body.workspace-ui #flightAlertDialog .eyebrow { color:var(--brand-soft); } html[data-theme="dark"] body.workspace-ui #flightAlertDialog .days-counter { background:var(--bg-warn); border-color:var(--warn); } html[data-theme="dark"] body.workspace-ui #flightAlertDialog .days-counter :is(strong,span) { color:var(--warn); } html[data-theme="dark"] body.workspace-ui #flightAlertDialog :is(.icon-btn,#dismissFlightAlertsBtn) { background:var(--bg-raised); border-color:var(--border); color:var(--text-1); } } /* Check-in controls inherit the active theme and wrap within the existing form. */ .checkin-fields { min-width:0; margin:0; padding:1rem; border:1px solid var(--border,var(--line)); border-radius:8px; } .checkin-fields legend { color:var(--text-1,var(--ink)); font-weight:700; padding:0 .4rem; } .checkin-fields .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; } .checkin-fields label { min-width:0; } .checkin-fields :is(input,select,button) { min-width:0; max-width:100%; } .checkin-note { color:var(--text-2,var(--muted)); } #flightAlertDialog .checkin-status { color:var(--text-2,var(--muted)); } html[data-theme] body.workspace-ui #flightAlertDialog #flightAlertList .checkin-status[data-state="open"], html[data-theme] body.workspace-ui #flightAlertDialog #flightAlertList .checkin-status[data-state="done"] { color:var(--ok,#19745b); } html[data-theme] body.workspace-ui #flightAlertDialog #flightAlertList .checkin-status[data-state="unknown"] { color:var(--warn,#8b5d0b); } #flightAlertDialog .checkin-edit { justify-self:start; width:auto; font-size:.8rem; padding:.4rem .6rem; border:1px solid var(--border,var(--line)); border-radius:6px; cursor:pointer; } .insurance-ages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #recordDialog .insurance-field { min-width:0; border-color:var(--border, #dce5e3); } #recordDialog .insurance-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #recordDialog .insurance-form-grid label { min-width:0; overflow-wrap:anywhere; } #recordDialog .insurance-form-grid input, #recordDialog .insurance-form-grid select { width:100%; min-width:0; } .purchase-module-pill.insurance { background:#176a63; color:#fff; } #reservationSidePanel[data-table-id="insurancesTable"] .reservation-identity-description { color:var(--text-2, #596c68); } body.workspace-ui #insurancesTable tr.expandable > td.amount, body.workspace-ui #insurancesTable tr.expandable > td.amount .mobile-card-value { color:var(--warn, #986400) !important; } body.workspace-ui #insurancesTable tr.expandable[data-status="paid"] > td.amount, body.workspace-ui #insurancesTable tr.expandable[data-status="paid"] > td.amount .mobile-card-value { color:var(--ok, #176448) !important; } @media(max-width:720px) { #recordDialog .insurance-form-grid { grid-template-columns:minmax(0,1fr); } .insurance-ages { grid-template-columns:repeat(2,minmax(0,1fr)); } #reservationSidePanel[data-table-id="insurancesTable"] .reservation-main-detail-box { display:grid; grid-template-columns:minmax(0,1fr); } #reservationSidePanel[data-table-id="insurancesTable"] .reservation-main-detail-box > section { grid-column:1 / -1; width:100%; min-width:0; max-width:100%; } #reservationSidePanel[data-table-id="insurancesTable"] .dates-detail ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } } .package-component-cards { display:none; } @media(max-width:720px) { body.workspace-ui .package-components-table { display:none !important; } body.workspace-ui .package-component-cards { display:grid; gap:12px; min-width:0; width:100%; } body.workspace-ui .package-component-card { min-width:0; padding:14px; border:1px solid var(--border, #dce5e3); border-radius:8px; background:var(--bg-surface, #fff); color:var(--text-1, #203832); text-align:left; } body.workspace-ui .package-component-card header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; } body.workspace-ui .package-component-card header strong { font-size:18px; overflow-wrap:anywhere; } body.workspace-ui .package-component-card p { color:var(--text-2, #596c68); white-space:normal; overflow-wrap:anywhere; margin:12px 0; } body.workspace-ui .package-component-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding-top:12px; border-top:1px solid var(--border, #dce5e3); } body.workspace-ui .package-component-card dt { font-size:12px; color:var(--text-2, #596c68); } body.workspace-ui .package-component-card dd { margin:4px 0 0; font-weight:700; overflow-wrap:anywhere; } body.workspace-ui .package-component-card .component-balance { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:8px; } body.workspace-ui .package-component-card .is-pending dd { color:var(--warn, #986400); } body.workspace-ui .package-component-card .is-paid dd { color:var(--ok, #176448); } } #authGate .session-loading { display:none; } #authGate[data-state="loading"] { background:var(--bg-surface, #f5f7f8); color:var(--text-1, #203832); } #authGate[data-state="loading"] .auth-card { display:none; } #authGate[data-state="loading"] .session-loading { display:block; padding:24px; font-size:16px; } #flightAlertDialog .checkin-status-row { display:flex; align-items:center; flex-wrap:nowrap; gap:.5rem; min-width:0; } #flightAlertDialog .checkin-status-row .checkin-status { flex:1 1 0; min-width:0; font-size:12px; line-height:1.35; overflow-wrap:anywhere; } #flightAlertDialog .checkin-toggle { flex:0 1 auto; width:auto; max-width:50%; min-width:0; min-height:0; margin:0; font:inherit; font-size:12px; line-height:1.35; padding:2px 6px; border:1px solid var(--border,var(--line)); border-radius:4px; cursor:pointer; white-space:normal; overflow-wrap:anywhere; } body.workspace-ui #flightAlertDialog .checkin-toggle[aria-pressed="true"] { background:#e4f4ed !important; color:#176448 !important; border-color:#458269 !important; } html[data-theme="dark"] body.workspace-ui #flightAlertDialog .checkin-toggle[aria-pressed="true"] { background:rgba(29,158,117,.2) !important; color:var(--ok) !important; border-color:var(--ok) !important; } @media(max-width:720px) { .checkin-fields .form-grid { grid-template-columns:minmax(0,1fr); } } /* Reservation detail: scoped to hotel and flight panels, not forms or vouchers. */ #reservationSidePanel.reservation-detail-refresh { --detail-line: var(--border, #dce5e2); --detail-text: var(--text-1, #203c34); --detail-muted: var(--text-2, #596c65); --detail-ok: var(--ok, #176b50); width: min(700px, 100vw) !important; max-width: 100vw !important; display: block !important; overflow-y: auto !important; overscroll-behavior: contain; color: var(--detail-text); } #reservationSidePanel.reservation-detail-refresh[hidden] { display: none !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-head { position: relative; padding: 14px 24px !important; border: 0; background: transparent !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-context { padding: 4px 24px 20px !important; background: transparent !important; } #reservationSidePanel.reservation-detail-refresh .reservation-identity { padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-label { display: block; color: var(--detail-muted); font-size: 13px; font-weight: 500; margin-top: 8px; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-head { align-items: center; margin-bottom: 14px; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-head h2 { font-size: 30px !important; line-height: 1.2; margin: 3px 0 0; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-client { font-size: 19px; line-height: 1.4; margin-top: 4px; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-description { font-size: 14px; margin: 12px 0 18px; color: var(--detail-muted); } #reservationSidePanel.reservation-detail-refresh .reservation-identity-balance { border-color: var(--detail-line); padding-top: 16px; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-balance strong { font-size: 28px; color: var(--detail-ok) !important; } #reservationSidePanel.reservation-detail-refresh .reservation-coverage { display: block; appearance: none; width: 100%; height: 6px; margin: 12px 0 8px; border: 0; border-radius: 4px; overflow: hidden; background: var(--detail-line); } #reservationSidePanel.reservation-detail-refresh .reservation-coverage::-webkit-progress-bar { background: var(--detail-line); } #reservationSidePanel.reservation-detail-refresh .reservation-coverage::-webkit-progress-value { background: var(--detail-ok); } #reservationSidePanel.reservation-detail-refresh .reservation-coverage::-moz-progress-bar { background: var(--detail-ok); } #reservationSidePanel.reservation-detail-refresh .reservation-coverage-caption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--detail-muted); font-size: 12px; } #reservationSidePanel.reservation-detail-refresh #reservationSidePanelActions { padding: 0 24px 16px !important; gap: 12px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-action-row-primary, #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-provider-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-quick-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; } #reservationSidePanel.reservation-detail-refresh #reservationSidePanelActions button { width: 100% !important; min-height: 48px !important; font-size: 14px !important; } #reservationSidePanel.reservation-detail-refresh #reservationSidePanelActions .reservation-side-panel-quick-actions button { flex-direction: column !important; min-height: 68px !important; padding: 8px 3px !important; font-size: 12px !important; color: var(--detail-text) !important; border-color: var(--detail-line) !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-nav { margin: 0 24px 8px !important; border-color: var(--detail-line) !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-nav .side-panel-nav-chip { font-size: 14px !important; min-height: 44px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-nav .side-panel-nav-chip.is-active { color: var(--brand, #b3441c) !important; border-color: var(--brand, #b3441c) !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-body { height: auto !important; overflow: visible !important; padding: 0 24px 32px !important; background: transparent !important; } #reservationSidePanel.reservation-detail-refresh :is(.detail-grid, .reservation-main-detail-box) { display: contents !important; } #reservationSidePanel.reservation-detail-refresh .side-panel-universal-section { padding: 20px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--detail-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0; width: 100%; } #reservationSidePanel.reservation-detail-refresh :is(h3, .record-timeline-head strong) { margin: 0 0 14px; font-size: 17px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--detail-text) !important; } #reservationSidePanel.reservation-detail-refresh :is(ul, .reservation-total-breakdown) { list-style: none; padding: 0; margin: 0; } #reservationSidePanel.reservation-detail-refresh .reservation-info-section ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } #reservationSidePanel.reservation-detail-refresh .reservation-info-section li { min-width: 0; padding: 8px 0 !important; margin: 0; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--detail-text) !important; font-size: 14px !important; line-height: 1.5; overflow-wrap: anywhere; } #reservationSidePanel.reservation-detail-refresh .reservation-detail-field { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; } #reservationSidePanel.reservation-detail-refresh .reservation-detail-field > strong { color: var(--detail-muted) !important; font-size: 13px !important; font-weight: 500; text-transform: none; } #reservationSidePanel.reservation-detail-refresh .reservation-detail-value { text-align: right; min-width: 0; } #reservationSidePanel.reservation-detail-refresh .dates-detail ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field { flex-direction: column; gap: 4px; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-value { text-align: left; font-size: 16px; font-weight: 600; } #reservationSidePanel.reservation-detail-refresh .dates-detail .deadline-detail-value { grid-column: 1 / -1; border-top: 1px solid var(--detail-line) !important; } #reservationSidePanel.reservation-detail-refresh .people-detail li { display: flex !important; align-items: center; gap: 12px; } #reservationSidePanel.reservation-detail-refresh .reservation-person-avatar { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--bg-ok, #eaf4ef); color: var(--detail-ok); font-size: 13px; font-weight: 700; } #reservationSidePanel.reservation-detail-refresh .provider-key-value { border-color: var(--detail-line) !important; } #reservationSidePanel.reservation-detail-refresh .provider-key-value > strong { color: var(--detail-muted) !important; font-size: 14px !important; text-transform: none; } #reservationSidePanel.reservation-detail-refresh .provider-row-value { color: var(--detail-text); font-size: 14px !important; white-space: normal !important; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: transparent !important; border: 0 !important; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--detail-line); border-radius: 0; background: transparent !important; font-size: 14px; color: var(--detail-muted); } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown strong { color: var(--detail-text); font-size: 16px; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span:last-child strong { color: var(--detail-ok) !important; } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary dt { color: var(--detail-muted); font-size: 12px; } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary dd { margin: 6px 0 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; } #reservationSidePanel.reservation-detail-refresh [hidden] { display: none !important; } html[data-theme="dark"] body.workspace-ui #reservationSidePanel.reservation-detail-refresh :is(.reservation-identity, .side-panel-universal-section, .reservation-side-panel-context, .reservation-side-panel-body, .reservation-info-section li) { background: transparent !important; } @media (max-width: 720px) { #reservationSidePanel.reservation-detail-refresh { width: 100vw !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-head { padding: 12px 16px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-context { padding: 4px 16px 20px !important; } #reservationSidePanel.reservation-detail-refresh #reservationSidePanelActions { padding-inline: 16px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-nav { margin-inline: 16px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-body { padding: 0 16px 24px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary dl { grid-template-columns: minmax(0, 1fr); } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary dl > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } #reservationSidePanel.reservation-detail-refresh .provider-key-value { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* ===== Iconografía del detalle y agenda de próximas salidas (2026-10-05) ===== */ :root { --kind-ida: #2563a6; --kind-ida-bg: #e7f0fa; --kind-regreso: #6b4bb8; --kind-regreso-bg: #efe9fb; --kind-entrada: #17734f; --kind-entrada-bg: #e2f3eb; --kind-salida: #93560a; --kind-salida-bg: #fbefd9; --kind-traslado: #b9441a; --kind-traslado-bg: #fdeae1; --kind-actividad: #a8346f; --kind-actividad-bg: #fae6f0; --kind-seguro: #41606a; --kind-seguro-bg: #e6eef0; --kind-otro: #5b6a66; --kind-otro-bg: #eef1f0; --tone-ok: #17734f; --tone-ok-bg: #e2f3eb; --tone-warn: #93560a; --tone-warn-bg: #fbefd9; --tone-info: #2563a6; --tone-info-bg: #e7f0fa; --tone-brand: #b9441a; --tone-brand-bg: #fdeae1; --tone-muted: #55645f; --tone-muted-bg: #eef2f0; } html[data-theme="dark"] { --kind-ida: #8DB8EC; --kind-ida-bg: rgba(80,140,210,.18); --kind-regreso: #BBA3F0; --kind-regreso-bg: rgba(140,110,220,.18); --kind-entrada: #5DCAA5; --kind-entrada-bg: rgba(29,158,117,.16); --kind-salida: #FAC775; --kind-salida-bg: rgba(239,159,39,.16); --kind-traslado: #F0997B; --kind-traslado-bg: rgba(216,90,48,.16); --kind-actividad: #F0A3CB; --kind-actividad-bg: rgba(210,90,150,.16); --kind-seguro: #A9C3CB; --kind-seguro-bg: rgba(120,150,160,.16); --kind-otro: #B5A49C; --kind-otro-bg: rgba(255,255,255,.08); --tone-ok: #5DCAA5; --tone-ok-bg: rgba(29,158,117,.16); --tone-warn: #FAC775; --tone-warn-bg: rgba(239,159,39,.16); --tone-info: #8DB8EC; --tone-info-bg: rgba(80,140,210,.16); --tone-brand: #F0997B; --tone-brand-bg: rgba(216,90,48,.16); --tone-muted: #CDBFB8; --tone-muted-bg: rgba(255,255,255,.07); } svg.detail-icon { width: var(--detail-icon-size, 16px) !important; height: var(--detail-icon-size, 16px) !important; flex: none; fill: none !important; stroke: currentColor !important; display: inline-block; vertical-align: middle; } .detail-field-icon { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; color: var(--tone-muted); background: var(--tone-muted-bg); } .detail-field-icon.tone-ok { color: var(--tone-ok); background: var(--tone-ok-bg); } .detail-field-icon.tone-warn { color: var(--tone-warn); background: var(--tone-warn-bg); } .detail-field-icon.tone-info { color: var(--tone-info); background: var(--tone-info-bg); } .detail-field-icon.tone-brand { color: var(--tone-brand); background: var(--tone-brand-bg); } .detail-copy { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; min-height: 0 !important; margin: 0 0 0 6px; padding: 0 !important; border-radius: 9px; border: 1px solid var(--border, #dce5e2) !important; background: transparent !important; color: var(--text-2, #596c65) !important; cursor: pointer; vertical-align: middle; } .detail-copy:hover { color: var(--text-1, #203c34) !important; border-color: var(--border-hover, #b9c6c1) !important; } .detail-copy:focus-visible { outline: 2px solid var(--theme-focus, #f5824e); outline-offset: 2px; } .detail-copy.is-copied { color: var(--tone-ok) !important; border-color: var(--tone-ok) !important; } .detail-code { font-weight: 700; letter-spacing: .04em; } /* Encabezado: ruta tipo pase de abordar y chips */ #reservationSidePanel.reservation-detail-refresh .reservation-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; } .reservation-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; border-radius: 9px; background: var(--tone-muted-bg); color: var(--text-1, #203c34); font-size: 13px; font-weight: 500; line-height: 1.25; max-width: 100%; } .reservation-chip > span { min-width: 0; overflow-wrap: anywhere; } .reservation-chip .detail-icon { color: var(--text-2, #596c65); } .flight-route-visual { display: flex; align-items: center; gap: 10px; min-width: 0; } .flight-route-point { display: flex; flex-direction: column; min-width: 0; } .flight-route-point.is-end { align-items: flex-end; text-align: right; } .flight-route-point strong { font-size: 28px; font-weight: 800; letter-spacing: .04em; line-height: 1.05; color: var(--text-1, #203c34); } .flight-route-point small { font-size: 12px; color: var(--text-2, #596c65); overflow-wrap: anywhere; } .flight-route-line { flex: 1 1 auto; min-width: 36px; display: flex; align-items: center; gap: 6px; color: var(--kind-ida); } .flight-route-line i { flex: 1; border-top: 2px dashed currentColor; opacity: .45; } #reservationSidePanel.reservation-detail-refresh .flight-route-visual.is-identity { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--tone-muted-bg); } #reservationSidePanel.reservation-detail-refresh .flight-route-visual.is-identity + .reservation-chips { margin-top: 10px; } /* Secciones y campos */ #reservationSidePanel.reservation-detail-refresh h3.has-detail-icon { display: flex; align-items: center; gap: 8px; } #reservationSidePanel.reservation-detail-refresh h3.has-detail-icon > .detail-icon { color: var(--text-2, #596c65); } #reservationSidePanel.reservation-detail-refresh .reservation-detail-field > strong, #reservationSidePanel.reservation-detail-refresh .provider-key-value > strong { display: inline-flex !important; align-items: center; gap: 10px; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field { display: grid !important; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field > strong { display: contents !important; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field > strong > .detail-field-icon { grid-row: 1 / span 2; grid-column: 1; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-value { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; } #reservationSidePanel.reservation-detail-refresh .reservation-detail-field.has-copy .reservation-detail-value, #reservationSidePanel.reservation-detail-refresh .provider-key-value.has-copy .provider-row-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field.has-copy .reservation-detail-value { justify-content: flex-start; } #reservationSidePanel.reservation-detail-refresh .provider-key-value { align-items: center !important; } #reservationSidePanel.reservation-detail-refresh .provider-key-value.is-deduction .provider-row-value { color: var(--tone-warn) !important; } #reservationSidePanel.reservation-detail-refresh .provider-key-value.is-paid .provider-row-value { color: var(--tone-ok) !important; } #reservationSidePanel.reservation-detail-refresh .provider-key-value.is-settled .provider-row-value { color: var(--tone-ok) !important; font-weight: 800; } #reservationSidePanel.reservation-detail-refresh .provider-key-value.is-pending .provider-row-value { color: var(--tone-brand) !important; font-weight: 800; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span { align-items: center; } #reservationSidePanel.reservation-detail-refresh .reservation-breakdown-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span.is-total .reservation-breakdown-label { color: var(--detail-text); font-weight: 700; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span.is-paid strong { color: var(--tone-ok) !important; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span.is-balance { margin-top: 10px; padding: 12px !important; border: 0 !important; border-radius: 12px !important; background: var(--tone-muted-bg) !important; color: var(--detail-text); font-weight: 700; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span.is-balance strong { font-size: 20px; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span.is-balance.is-pending strong { color: var(--tone-brand) !important; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span.is-balance.is-settled strong { color: var(--tone-ok) !important; } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary dt { display: flex; align-items: center; gap: 8px; } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary dt .detail-field-icon { width: 26px; height: 26px; border-radius: 8px; } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary .is-profit { padding: 10px 12px; border-radius: 12px; background: var(--tone-ok-bg); } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary .is-profit dd { color: var(--tone-ok); } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary .is-loss { padding: 10px 12px; border-radius: 12px; background: var(--tone-brand-bg); } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary .is-loss dd { color: var(--tone-brand); } .reservation-profit-margin { font-size: 12px; font-weight: 700; margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: var(--tone-ok-bg); } #reservationSidePanel.reservation-detail-refresh .detail-empty { color: var(--detail-muted) !important; font-style: normal; } /* ===== Agenda del panel ===== */ .upcoming-agenda { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 8px; min-width: 0; } .agenda-filters { display: flex; flex-wrap: wrap; gap: 8px; } .agenda-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border, #dce5e2); background: var(--surface, #fff); color: var(--text-1, #203c34); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .agenda-filter:hover { border-color: var(--border-hover, #b9c6c1); } .agenda-filter:focus-visible, .agenda-week-day:focus-visible, .agenda-event-open:focus-visible, .agenda-more:focus-visible { outline: 2px solid var(--theme-focus, #f5824e); outline-offset: 2px; } .agenda-filter.is-active { border-color: var(--brand, #d85a30); background: var(--bg-active, #fdeae1); color: var(--text-1, #203c34); } .agenda-filter-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; margin-left: -4px; } .agenda-filter-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--tone-muted-bg); color: var(--text-2, #596c65); font-size: 12px; text-align: center; } .agenda-filter.is-active .agenda-filter-count { background: var(--brand, #d85a30); color: #fff; } .agenda-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .agenda-week-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 76px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--border, #dce5e2); background: var(--surface, #fff); color: var(--text-1, #203c34); font: inherit; cursor: pointer; } .agenda-week-day:disabled { cursor: default; opacity: .55; } .agenda-week-day.is-today { border-color: var(--brand, #d85a30); background: var(--bg-active, #fdeae1); } .agenda-week-dow { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--text-2, #596c65); } .agenda-week-day.is-today .agenda-week-dow { color: var(--brand, #d85a30); } .agenda-week-day strong { font-size: 20px; line-height: 1; } .agenda-week-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 8px; } .agenda-week-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--kind-otro); } .agenda-week-dots em { font-size: 10px; font-style: normal; font-weight: 700; color: var(--text-2, #596c65); line-height: 8px; } .agenda-days { display: flex; flex-direction: column; gap: 20px; } .agenda-day { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 90px; } .agenda-day-head { display: flex; align-items: center; gap: 12px; } .agenda-day-head::after { content: ""; flex: 1; height: 1px; background: var(--border, #dce5e2); } .agenda-day-head h3 { margin: 0; font-size: 17px; font-weight: 800; } .agenda-day-head span { font-size: 13px; color: var(--text-2, #596c65); } .agenda-day-events { display: flex; flex-direction: column; gap: 8px; } .agenda-event { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border, #dce5e2); background: var(--surface, #fff); min-width: 0; } .agenda-event-open { flex: 1 1 520px; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 4px; margin: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } div.agenda-event-open { cursor: default; } button.agenda-event-open:hover .agenda-event-client { text-decoration: underline; text-underline-offset: 3px; } .agenda-event-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--kind-otro); background: var(--kind-otro-bg); } .agenda-event-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .agenda-event-type { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kind-otro); } .agenda-event-client { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text-1, #203c34); overflow-wrap: anywhere; } .agenda-event-folio { font-size: 12px; color: var(--text-2, #596c65); } .agenda-event-service { flex: 1 1 240px; min-width: 0; } .agenda-event-service .flight-route-point strong { font-size: 19px; } .agenda-event-service .flight-route-line { max-width: 120px; } .agenda-event-place { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--text-2, #596c65); } .agenda-event-place strong { font-size: 15px; color: var(--text-1, #203c34); } .agenda-event-place span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .agenda-event-code { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 3px 3px 3px 10px; border-radius: 10px; background: var(--tone-ok-bg); color: var(--tone-ok); font-size: 13px; } .agenda-event-code .detail-copy { border: 0 !important; color: var(--tone-ok) !important; margin-left: 2px; } .agenda-event-nocode { padding-right: 8px; color: var(--text-2, #596c65); font-size: 12px; } .agenda-empty { margin: 8px 0; color: var(--text-2, #596c65); } .agenda-more { align-self: center; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px dashed var(--border-hover, #b9c6c1); background: transparent; color: var(--text-1, #203c34); font: inherit; font-weight: 700; cursor: pointer; } .upcoming-reservations-panel .upcoming-agenda .days-counter { flex: none; } /* Color por tipo de evento */ :is(.agenda-event, .agenda-filter, .agenda-week-dots i).kind-ida { --kind-c: var(--kind-ida); --kind-b: var(--kind-ida-bg); } :is(.agenda-event, .agenda-filter, .agenda-week-dots i).kind-regreso { --kind-c: var(--kind-regreso); --kind-b: var(--kind-regreso-bg); } :is(.agenda-event, .agenda-filter, .agenda-week-dots i).kind-entrada { --kind-c: var(--kind-entrada); --kind-b: var(--kind-entrada-bg); } :is(.agenda-event, .agenda-filter, .agenda-week-dots i).kind-salida { --kind-c: var(--kind-salida); --kind-b: var(--kind-salida-bg); } :is(.agenda-event, .agenda-filter, .agenda-week-dots i).kind-traslado { --kind-c: var(--kind-traslado); --kind-b: var(--kind-traslado-bg); } :is(.agenda-event, .agenda-filter, .agenda-week-dots i).kind-actividad { --kind-c: var(--kind-actividad); --kind-b: var(--kind-actividad-bg); } :is(.agenda-event, .agenda-filter, .agenda-week-dots i).kind-seguro { --kind-c: var(--kind-seguro); --kind-b: var(--kind-seguro-bg); } .agenda-week-dots i[class*="kind-"] { background: var(--kind-c, var(--kind-otro)); } .agenda-event[class*="kind-"] .agenda-event-icon { color: var(--kind-c, var(--kind-otro)); background: var(--kind-b, var(--kind-otro-bg)); } .agenda-event[class*="kind-"] .agenda-event-type { color: var(--kind-c, var(--kind-otro)); } .agenda-event[class*="kind-"] .flight-route-line { color: var(--kind-c, var(--kind-ida)); } .agenda-filter[class*="kind-"] .agenda-filter-icon { color: var(--kind-c); background: var(--kind-b); } html[data-theme="dark"] body.workspace-ui :is(.agenda-filter, .agenda-week-day, .agenda-event) { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-1) !important; } html[data-theme="dark"] body.workspace-ui :is(.agenda-filter.is-active, .agenda-week-day.is-today) { background: var(--bg-active) !important; border-color: var(--brand) !important; } html[data-theme="dark"] body.workspace-ui .agenda-event-folio, html[data-theme="dark"] body.workspace-ui .agenda-event-place { color: var(--text-2) !important; } html[data-theme="dark"] body.workspace-ui .reservation-chip { color: var(--text-1) !important; } @media (max-width: 720px) { .agenda-week { gap: 4px; } .agenda-week-day { min-height: 64px; padding: 6px 2px; border-radius: 10px; } .agenda-week-day strong { font-size: 17px; } .agenda-event { padding: 10px; } .agenda-event-open { gap: 8px 12px; } .agenda-event-service { flex-basis: 100%; padding-left: 56px; } .agenda-event-code { margin-left: 56px; } .flight-route-point strong { font-size: 24px; } } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field.has-copy { grid-column: 1 / -1; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field { align-self: start; } html[data-theme="dark"] body.workspace-ui .agenda-event-open { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--text-1) !important; } html[data-theme="dark"] body.workspace-ui .agenda-more { background: transparent !important; color: var(--text-1) !important; border-color: var(--border-hover) !important; } html[data-theme="dark"] body.workspace-ui #upcomingAgenda button.agenda-event-open { background: transparent !important; border: 0 !important; color: var(--text-1) !important; } html[data-theme="dark"] body.workspace-ui #upcomingAgenda :is(button.agenda-filter, button.agenda-week-day) { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-1) !important; } html[data-theme="dark"] body.workspace-ui #upcomingAgenda :is(button.agenda-filter.is-active, button.agenda-week-day.is-today) { background: var(--bg-active) !important; border-color: var(--brand) !important; } html[data-theme="dark"] body.workspace-ui #upcomingAgenda button.agenda-more { background: transparent !important; border-color: var(--border-hover) !important; color: var(--text-1) !important; } html[data-theme="dark"] body.workspace-ui :is(#upcomingAgenda, #reservationSidePanel) button.detail-copy { background: transparent !important; } html[data-theme="dark"] body.workspace-ui #upcomingAgenda .agenda-event-code button.detail-copy { color: var(--tone-ok) !important; border: 0 !important; } /* Selected day is distinct from today's calendar marker. */ #upcomingAgenda .agenda-week-day[aria-pressed="true"] { outline: 2px solid var(--brand, #b3441c); outline-offset: -2px; background: var(--bg-active, #fff0e9) !important; opacity: 1; } /* ===== Detalle de reservación: versión escritorio compacta (2026-10-06) ===== Solo pantallas anchas; móvil y tableta conservan el diseño anterior. */ @media (min-width: 1025px) { #reservationSidePanel.reservation-detail-refresh { width: min(760px, 100vw) !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-head { padding: 12px 24px !important; min-height: 0 !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-head :is(button, summary) { width: 36px !important; height: 36px !important; min-height: 36px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-context { padding: 0 24px 14px !important; } /* Encabezado en dos columnas: identidad a la izquierda, saldo a la derecha */ #reservationSidePanel.reservation-detail-refresh .reservation-identity { display: grid !important; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 24px; row-gap: 0; align-items: start; } #reservationSidePanel.reservation-detail-refresh .reservation-identity > * { grid-column: 1; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-head { margin-bottom: 6px; justify-content: flex-start !important; gap: 12px; align-items: flex-end; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-head h2 { font-size: 26px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-head .status { margin-bottom: 4px; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-label { margin-top: 4px; font-size: 12px; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-client { font-size: 17px; margin-top: 0; } #reservationSidePanel.reservation-detail-refresh .reservation-identity .reservation-chips { margin: 8px 0 0; gap: 6px; } #reservationSidePanel.reservation-detail-refresh .reservation-identity .reservation-chip { min-height: 26px; padding: 3px 9px; font-size: 12.5px; } #reservationSidePanel.reservation-detail-refresh .flight-route-visual.is-identity { margin-top: 8px; padding: 10px 14px; } #reservationSidePanel.reservation-detail-refresh .flight-route-visual.is-identity .flight-route-point strong { font-size: 24px; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-description { margin: 6px 0 0; } #reservationSidePanel.reservation-detail-refresh :is(.reservation-identity-balance, .reservation-coverage, .reservation-coverage-caption) { grid-column: 2; padding-left: 18px; border-left: 1px solid var(--detail-line); } #reservationSidePanel.reservation-detail-refresh .reservation-identity-balance { grid-row: 1; display: flex; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 2px; border-top: 0 !important; padding-top: 4px !important; margin: 0 !important; min-height: 66px; } #reservationSidePanel.reservation-detail-refresh .reservation-identity-balance span { font-size: 13px; color: var(--detail-muted); } #reservationSidePanel.reservation-detail-refresh .reservation-identity-balance strong { font-size: 26px; line-height: 1.1; } #reservationSidePanel.reservation-detail-refresh .reservation-coverage { grid-row: 2; margin: 8px 0 6px; width: 100% !important; box-sizing: border-box; background-clip: content-box; } #reservationSidePanel.reservation-detail-refresh .reservation-coverage-caption { grid-row: 3; font-size: 11.5px; padding-bottom: 2px; } /* Acciones: botones de altura normal; accesos rápidos en línea con icono al lado */ #reservationSidePanel.reservation-detail-refresh #reservationSidePanelActions { padding: 0 24px 12px !important; gap: 8px !important; } #reservationSidePanel.reservation-detail-refresh #reservationSidePanelActions button { min-height: 38px !important; height: 38px !important; padding: 0 12px !important; font-size: 13.5px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-action-row-primary, #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-provider-actions { gap: 8px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-quick-actions { gap: 8px !important; } #reservationSidePanel.reservation-detail-refresh #reservationSidePanelActions .reservation-side-panel-quick-actions button { flex-direction: row !important; gap: 6px !important; min-height: 36px !important; height: 36px !important; padding: 0 8px !important; font-size: 12.5px !important; } #reservationSidePanel.reservation-detail-refresh #reservationSidePanelActions .reservation-side-panel-provider-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } #reservationSidePanel.reservation-detail-refresh #reservationSidePanelActions button svg { width: 16px !important; height: 16px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-nav { margin: 0 24px 4px !important; padding: 3px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-nav .side-panel-nav-chip { min-height: 34px !important; height: 34px !important; font-size: 13.5px !important; } /* Secciones más densas */ #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-body { padding: 0 24px 24px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-content: start; } #reservationSidePanel.reservation-detail-refresh .side-panel-universal-section { padding: 14px 0 !important; grid-column: 1 / -1; } #reservationSidePanel.reservation-detail-refresh :is(h3, .record-timeline-head strong) { margin: 0 0 10px; font-size: 15px !important; } #reservationSidePanel.reservation-detail-refresh .detail-field-icon { width: 26px; height: 26px; border-radius: 8px; } #reservationSidePanel.reservation-detail-refresh .detail-field-icon svg.detail-icon { --detail-icon-size: 14px; } #reservationSidePanel.reservation-detail-refresh .reservation-info-section li { padding: 4px 0 !important; font-size: 13.5px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-info-section ul { gap: 4px; } /* Fechas: 4 columnas */ #reservationSidePanel.reservation-detail-refresh .dates-detail ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; } #reservationSidePanel.reservation-detail-refresh .dates-detail .deadline-detail-value { grid-column: auto; border-top: 0 !important; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field.has-copy { grid-column: span 2; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-field > strong { font-size: 12px !important; } #reservationSidePanel.reservation-detail-refresh .dates-detail .reservation-detail-value { font-size: 14px; } #reservationSidePanel.reservation-detail-refresh .detail-copy { width: 28px; height: 28px; border-radius: 7px; } /* Orden en escritorio: ruta + comentarios, fechas, pasajeros */ #reservationSidePanel.reservation-detail-refresh .route-detail { order: 1; grid-column: auto !important; } #reservationSidePanel.reservation-detail-refresh .flight-comments-detail { order: 2; grid-column: auto !important; grid-row: auto !important; } #reservationSidePanel.reservation-detail-refresh .dates-detail { order: 3; } #reservationSidePanel.reservation-detail-refresh .people-detail { order: 4; } #reservationSidePanel.reservation-detail-refresh .side-panel-universal-section:not(.route-detail, .flight-comments-detail, .dates-detail, .people-detail) { order: 10; } #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-body:not(:has(.flight-comments-detail)) .route-detail, #reservationSidePanel.reservation-detail-refresh .reservation-side-panel-body:not(:has(.route-detail)) .flight-comments-detail { grid-column: 1 / -1 !important; } #reservationSidePanel.reservation-detail-refresh .people-detail ul { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } #reservationSidePanel.reservation-detail-refresh .reservation-person-avatar { flex-basis: 30px; height: 30px; font-size: 12px; } #reservationSidePanel.reservation-detail-refresh .people-detail li { gap: 10px; } #reservationSidePanel.reservation-detail-refresh .provider-payments-detail .table-empty-state { min-height: 0 !important; padding: 12px !important; font-size: 13px; } #reservationSidePanel.reservation-detail-refresh .provider-payments-detail .table-empty-state::before { display: none !important; } /* Importes: dos columnas, saldo destacado a todo el ancho */ #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span { padding: 8px 0 !important; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown > span.is-balance { grid-column: 1 / -1; margin-top: 8px; padding: 10px 12px !important; } #reservationSidePanel.reservation-detail-refresh .reservation-total-breakdown strong { font-size: 15px; } #reservationSidePanel.reservation-detail-refresh .reservation-extra-list.is-empty { margin-top: 6px; font-size: 12.5px; } /* Compra / proveedor: datos en dos columnas */ #reservationSidePanel.reservation-detail-refresh :is(.reservation-provider-purchase-detail, .reservation-provider-amounts-detail) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } #reservationSidePanel.reservation-detail-refresh .provider-key-value { padding: 7px 0 !important; min-height: 0 !important; display: flex !important; justify-content: space-between; align-items: center !important; gap: 10px; } #reservationSidePanel.reservation-detail-refresh .provider-key-value > strong { font-size: 13px !important; gap: 8px; } #reservationSidePanel.reservation-detail-refresh .provider-row-value { font-size: 13.5px !important; text-align: right; } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary dl > div { padding: 8px 10px; } #reservationSidePanel.reservation-detail-refresh .reservation-profit-summary dd { font-size: 16px; margin-top: 4px; } #reservationSidePanel.reservation-detail-refresh .record-timeline-empty { padding: 10px 12px !important; } }