/* Enix 3.0 Itinerary Detail Module
   --------------------------------------------------------------
   Source of truth: ID_OpenReservation_preview.html (approved design).
   Depends on: enix-tokens.css, enix-layout.css, enix-booking.css,
               enix-reservas.css (loaded before).
   Only var(--*) tokens are used; no hardcoded hex values.

   Class prefix: .enix-itin-*
   -------------------------------------------------------------- */

/* ══════════════════════════════════════════════════════════════
   0. TYPOGRAPHY — Poppins (headings) + Mulish (body)
      Fonts are loaded globally via index*.html — no @import needed.
   ══════════════════════════════════════════════════════════════ */
:root {
  --itin-font-head: 'Poppins', system-ui, sans-serif;
  --itin-font-body: 'Mulish', system-ui, sans-serif;
}

/* Headings / labels */
.enix-itin-col-title,
.enix-itin-header__status-label,
.enix-itin-header__filenumber,
.enix-itin-menu-section,
.enix-itin-section-label,
.enix-itin-inline-panel__title,
.enix-itin-badge,
.enix-itin-card__name {
  font-family: var(--itin-font-head);
}

/* Body / data text */
.enix-itin-meta-row,
.enix-itin-pax-row,
.enix-itin-detail-field,
.enix-itin-menu-action,
.enix-itin-card__sub,
.enix-itin-payment-row,
.enix-itin-markup-table,
.enix-itin-topbar {
  font-family: var(--itin-font-body);
}

/* Root override — the whole itinerary detail view uses Mulish + Poppins.
   Enable subpixel/antialiased rendering + legibility so Mulish looks clean
   at the small sizes used in tables and labels. */
.itinerary-detail,
.enix-itin-page,
.enix-itin-layout,
.enix-itin-layout aside,
.enix-itin-layout main {
  font-family: var(--itin-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.itinerary-detail h1,
.itinerary-detail h2,
.itinerary-detail h3,
.itinerary-detail h4,
.itinerary-detail h5,
.itinerary-detail h6,
.itinerary-detail .fw-bold,
.itinerary-detail .fw-bolder {
  font-family: var(--itin-font-head);
}
/* Tabular numerics wherever we render prices/amounts in this module */
.enix-itin-card__price,
.enix-itin-payment-row .amount,
.enix-itin-price-total__main {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ══════════════════════════════════════════════════════════════
   1. PAGE LAYOUT
   ══════════════════════════════════════════════════════════════ */
.enix-itin-page {
  padding: 24px 0 48px;
}

/* ── Top bar (breadcrumb + close button) ── */
.enix-itin-topbar {
  background: var(--surface-card);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 24px;
  margin-bottom: 20px;
}
.enix-itin-topbar__breadcrumb {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--gray500);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.enix-itin-topbar__breadcrumb span { color: var(--navy); }
/* Vuelta al presupuesto de origen (solo si el file salió de una conversión, ver Quotes_Enix) */
.enix-itin-topbar__quote {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 3px 9px;
  background: var(--surface-card);
  color: var(--blue);
  font-size: 11px;
  font-weight: var(--fw-bold);
  border: 1.5px solid var(--gray300);
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  transition: all .16s;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: middle;
}
.enix-itin-topbar__quote:hover { border-color: var(--blue); background: #eef4fb; }
.enix-itin-topbar__quote span { color: var(--blue); }

.enix-itin-topbar__close {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--surface-card);
  color: var(--gray600);
  font-size: 12px;
  font-weight: var(--fw-bold);
  border: 1.5px solid var(--gray300);
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  transition: all .16s;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.enix-itin-topbar__close:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--surface-card);
}


/* ══════════════════════════════════════════════════════════════
   2. HEADER CARD
   ══════════════════════════════════════════════════════════════ */
.enix-itin-header {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  box-shadow: var(--sh);
  margin-bottom: 24px;
  overflow: hidden;
}

/* Navy gradient strip at the very top */
.enix-itin-header__strip {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.enix-itin-header__filenumber {
  font-size: 19px;
  font-weight: var(--fw-black);
  color: var(--white);
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.enix-itin-header__filenumber i {
  font-size: 15px;
  opacity: .6;
}
.enix-itin-header__filenumber span {
  color: var(--gold);
}
.enix-itin-header__status-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.enix-itin-header__status-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Three-column body */
.enix-itin-header__body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 900px) {
  .enix-itin-header__body { grid-template-columns: 1fr; }
}

.enix-itin-header__col {
  padding: 18px 22px;
  border-right: 1px solid var(--gray100);
}
.enix-itin-header__col:last-child {
  border-right: none;
  background: var(--gray50);
}

/* Column section label */
.enix-itin-col-title {
  font-size: 11.5px;
  font-weight: var(--fw-black, 900);
  color: var(--gray600);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.enix-itin-col-title i { color: var(--gray400); }

/* Meta rows inside columns */
.enix-itin-meta-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  font-size: var(--text-sm);
}
.enix-itin-meta-row .lbl {
  font-size: 11px;
  font-weight: var(--fw-black, 900);
  color: var(--gray600);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  min-width: 68px;
  flex-shrink: 0;
}
/* Neutralise Bootstrap's .fw-bolder !important on values — labels should read
   as strong, values as medium-body. */
.enix-itin-meta-row .val,
.enix-itin-meta-row .val.fw-bolder {
  color: var(--gray800, #1e293b);
  font-weight: var(--fw-semibold) !important;
}

/* Pax section */
.enix-itin-mainpax {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.enix-itin-mainpax i { font-size: 13px; color: var(--gray400); }

.enix-itin-pax-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--gray700);
  margin-bottom: 5px;
}
.enix-itin-pax-type {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--blue-md);
  color: var(--blue);
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.enix-itin-pax-type--chd { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.enix-itin-pax-type--inf { background: var(--badge-success-bg); color: var(--badge-success-text); }

/* Payment summary column */
.enix-itin-payment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--gray600);
  padding: 5px 0;
  border-bottom: 1px solid var(--gray100);
}
.enix-itin-payment-row:last-of-type { border-bottom: none; }
.enix-itin-payment-row .amount {
  font-weight: var(--fw-bold);
  color: var(--navy);
}
.enix-itin-payment-row--balance .amount { color: var(--red); }
.enix-itin-payment-row--balance { color: var(--red); }

.enix-itin-view-payments {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--blue);
  cursor: pointer;
  text-decoration: none;
}
.enix-itin-view-payments:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════
   3. TWO-COLUMN BODY LAYOUT (sidebar + content)
   ══════════════════════════════════════════════════════════════ */
.enix-itin-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  align-items: start;
}
.enix-itin-layout > main,
.enix-itin-layout > aside { min-width: 0; }
@media (max-width: 900px) {
  .enix-itin-layout { grid-template-columns: 1fr; }
}

/* Guarantee the itinerary detail section is tall enough to push the site
   footer to the bottom of the viewport, even when the selected sidebar
   panel (e.g. Desglose de Precios, Vouchers) has short content. */
.itinerary-detail {
  min-height: calc(100vh - var(--nav-navbar-height, 0px) - 48px - 120px);
}

/* Bump readability of shared .enix-table when embedded in itinerary panels.
   The default 10px header + 12.5px cells looked scaly at these sizes. */
.itinerary-detail .enix-table th {
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--gray500);
}
.itinerary-detail .enix-table td {
  font-size: 13.5px;
  color: var(--gray700);
}


/* ══════════════════════════════════════════════════════════════
   4. SIDEBAR MENU
   ══════════════════════════════════════════════════════════════ */
.enix-itin-menu {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

/* The aside itself sticks — kept below all nav bars via z-index: 0 */
.enix-itin-layout > aside {
  position: sticky;
  top: calc(var(--nav-navbar-height) + var(--nav-modulebar-height) + 12px);
  align-self: start;
  z-index: 0;
}

/* Group header (SERVICIOS, PAGOS) — clearly a header, not a clickable item:
   soft gray-100 strip with strong navy uppercase label. Gives the sidebar
   the visual weight it needs while staying distinct from the active state. */
.enix-itin-menu-section {
  background: var(--gray100);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 16px;
  font-size: 11.5px;
  font-weight: var(--fw-black, 900);
  color: var(--navy);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gray200);
  border-top: 1px solid var(--gray200);
  cursor: default;
  user-select: none;
}
.enix-itin-menu-section:first-child { border-top: none; }
.enix-itin-menu-section i { font-size: 11px; color: var(--gray500); }

.enix-itin-menu-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--gray700);
  cursor: pointer;
  border-bottom: 1px solid var(--gray100);
  transition: background .14s, color .14s;
  text-decoration: none;
  background: var(--surface-card);
  width: 100%;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: inherit;
  text-align: left;
}
.enix-itin-menu-action:last-child { border-bottom: none; }
/* Hover — soft neutral (no bright web-link blue), acts as a preview cue only */
.enix-itin-menu-action:hover {
  background: var(--gray50);
  color: var(--navy);
}
.enix-itin-menu-action i.enix-itin-menu-icon {
  font-size: 12px;
  color: var(--gray400);
  margin-right: 8px;
  width: 14px;
  text-align: center;
}
.enix-itin-menu-action:hover i.enix-itin-menu-icon { color: var(--navy); }
.enix-itin-menu-action i.enix-itin-menu-chevron {
  font-size: 11px;
  color: var(--gray300);
}
.enix-itin-menu-action:hover i.enix-itin-menu-chevron { color: var(--gray500); }
/* Active — the real "selected" signal, reserved for the current view.
   Left accent bar + blue background so it's unmistakably distinct from hover. */
.enix-itin-menu-action.active {
  background: var(--blue-lt);
  color: var(--blue);
  font-weight: var(--fw-bold);
  box-shadow: inset 3px 0 0 var(--blue);
}
.enix-itin-menu-action.active i.enix-itin-menu-icon,
.enix-itin-menu-action.active i.enix-itin-menu-chevron { color: var(--blue); }
.enix-itin-menu-action.disabled,
.enix-itin-menu-action[disabled] {
  opacity: .4;
  pointer-events: none;
  cursor: default;
}


/* ══════════════════════════════════════════════════════════════
   5. PRODUCT / SERVICE CARDS
   ══════════════════════════════════════════════════════════════ */
.enix-itin-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.enix-itin-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  position: relative;
  font-family: var(--itin-font-body);
}
/* Hover / open — only change the three non-accent borders so the coloured left bar is preserved */
.enix-itin-card:hover {
  box-shadow: 0 6px 18px rgba(14,24,54,.08), 0 1px 3px rgba(14,24,54,.05);
  border-top-color: var(--blue-md);
  border-right-color: var(--blue-md);
  border-bottom-color: var(--blue-md);
}
.enix-itin-card.open {
  box-shadow: 0 8px 24px rgba(14,24,54,.10), 0 1px 3px rgba(14,24,54,.06);
  border-top-color: var(--blue-md);
  border-right-color: var(--blue-md);
  border-bottom-color: var(--blue-md);
}
/* Footer toggle — persistent, elegant "Ver detalles" button at card bottom */
.enix-itin-card__footer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 16px;
  background: var(--gray50);
  border: none;
  border-top: 1px solid var(--gray100);
  color: var(--gray600);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.enix-itin-card__footer-toggle i {
  font-size: 10px;
  transition: transform .18s ease;
}
.enix-itin-card__footer-toggle:hover {
  background: var(--blue-lt);
  color: var(--blue);
}
.enix-itin-card.open .enix-itin-card__footer-toggle {
  background: #fff;
  color: var(--blue);
  border-top-color: var(--blue-md);
}

/* Preserve left accent bar on hover — must come AFTER the generic :hover rule */
.enix-itin-card--hotel:hover     { border-left-color: var(--blue); }
.enix-itin-card--disney:hover    { border-left-color: #7c3aed; }
.enix-itin-card--transfer:hover  { border-left-color: #0ea5e9; }
.enix-itin-card--admission:hover { border-left-color: var(--accent); }
.enix-itin-card--car:hover       { border-left-color: var(--emerald); }
.enix-itin-card--excursion:hover { border-left-color: var(--amber); }
.enix-itin-card--house:hover     { border-left-color: var(--emerald); }
.enix-itin-card--cruise:hover    { border-left-color: var(--blue); }
.enix-itin-card--other:hover     { border-left-color: var(--gray400); }
.enix-itin-card--tour:hover      { border-left-color: var(--amber); }

/* left color bar per reservation type */
.enix-itin-card--hotel     { border-left: 4px solid var(--blue); }
.enix-itin-card--disney    { border-left: 4px solid #7c3aed; }
.enix-itin-card--transfer  { border-left: 4px solid #0ea5e9; }
.enix-itin-card--admission { border-left: 4px solid var(--accent); }
.enix-itin-card--car       { border-left: 4px solid var(--emerald); }
.enix-itin-card--excursion { border-left: 4px solid var(--amber); }
.enix-itin-card--house     { border-left: 4px solid var(--emerald); }
.enix-itin-card--cruise    { border-left: 4px solid var(--blue); }
.enix-itin-card--other     { border-left: 4px solid var(--gray400); }
.enix-itin-card--tour      { border-left: 4px solid var(--amber); }

/* card toggle button */
.enix-itin-card__toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
}

/* card header row */
.enix-itin-card__header {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.enix-itin-card__icon {
  width: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--gray50) 0%, #fff 100%);
  border-right: 1px solid var(--gray100);
  font-size: 18px;
  color: var(--gray400);
  transition: color .18s ease;
}
.enix-itin-card:hover .enix-itin-card__icon { color: var(--blue); }
.enix-itin-card__body {
  flex: 1;
  min-width: 0;
  padding: 15px 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.enix-itin-card__name {
  font-family: var(--itin-font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Nombre del room/tarifa del alojamiento (debajo del nombre del hotel) */
.enix-itin-card__room {
  font-family: var(--itin-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray700, #334155);
  line-height: 1.35;
  margin-top: 1px;
}
.enix-itin-card__sub {
  font-family: var(--itin-font-body);
  font-size: 12.5px;
  color: var(--gray600);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  line-height: 1.45;
  font-weight: 500;
}
.enix-itin-card__sub i { font-size: 10px; color: var(--gray400); }

/* Third row inside the collapsed card body — pax + inline actions */
.enix-itin-card__meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--gray100);
  font-family: var(--itin-font-body);
  font-size: 12px;
  color: var(--gray600);
}
.enix-itin-card__pax {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.enix-itin-card__pax i { color: var(--gray400); font-size: 11px; margin-top: 4px; }
.enix-itin-card__pax-list {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-weight: 600;
  color: var(--gray700);
}
.enix-itin-card__pax-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray50);
  border: 1px solid var(--gray100);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gray600);
  letter-spacing: .04em;
  flex-shrink: 0;
}
.enix-itin-card__inline-cancel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid #fecaca;
  background: #fff;
  color: #dc2626;
  font-family: var(--itin-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.enix-itin-card__inline-cancel:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.enix-itin-card__inline-cancel:disabled,
.enix-itin-card__inline-cancel.is-locked {
  opacity: .55;
  cursor: not-allowed;
}
.enix-itin-card__inline-cancel--override {
  border-color: #f59e0b;
  color: #b45309;
  border-style: dashed;
}
.enix-itin-card__inline-cancel--override:hover {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

/* ── Products strip (counter row, matches sidebar SERVICIOS header height) ── */
.enix-itin-products__strip {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  margin: 0 0 10px;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  font-family: var(--itin-font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--gray500);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.enix-itin-products__strip-title { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); }
.enix-itin-products__strip-title i { font-size: 12px; color: var(--gray400); }
.enix-itin-products__strip-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-lt);
  color: var(--blue);
  font-size: 10.5px;
  letter-spacing: .05em;
}

/* Provider badge — highlighted (admin only) */
.enix-itin-card__provider {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(110deg, var(--navy) 0%, var(--blue) 100%);
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(13,42,92,.25);
}
.enix-itin-card__provider i { font-size: 10px; color: rgba(255,255,255,.85); }

.enix-itin-card__meta {
  font-size: var(--text-xs);
  color: var(--gray400);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.enix-itin-card__right {
  padding: 14px 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-width: 118px;
  flex-shrink: 0;
  border-left: 1px dashed var(--gray100);
}
/* Tighter status badge above the price */
.enix-itin-card__right .enix-itin-badge {
  margin-bottom: 2px;
}
.enix-itin-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.enix-itin-card__status .enix-itin-badge {
  margin-bottom: 0;
}
.enix-itin-card__paid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--badge-success-bg,#dcfce7);
  color: var(--badge-success-text,#16a34a);
  font-size: 14px;
}
.enix-itin-card__price {
  font-family: var(--itin-font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  text-align: right;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.enix-itin-card__price small,
.enix-itin-card__price .enix-itin-card__price-cents {
  font-size: 12px;
  font-weight: 700;
  vertical-align: super;
  margin-left: 1px;
  color: var(--navy);
}
.enix-itin-card__price-sub {
  font-family: var(--itin-font-body);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray500);
  text-align: right;
  letter-spacing: .02em;
  line-height: 1.35;
}

/* ── Inline Ref # editor (in header meta rows) ──────────────── */
.enix-inline-edit__input {
  font: inherit;
  font-weight: var(--fw-bold);
  color: var(--navy);
  padding: 3px 8px;
  border: 1px solid var(--blue-md);
  border-radius: 5px;
  background: #fff;
  outline: none;
  min-width: 120px;
  max-width: 180px;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
  transition: border-color .15s, box-shadow .15s;
}
.enix-inline-edit__input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.enix-inline-edit__input:disabled { opacity: .6; }
.enix-inline-edit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--surface-border);
  border-radius: 5px;
  background: #fff;
  color: var(--gray500);
  cursor: pointer;
  font-size: 11px;
  transition: background .15s, color .15s, border-color .15s;
}
.enix-inline-edit__btn:hover { background: var(--gray50); }
.enix-inline-edit__btn--save { color: var(--green, #16a34a); border-color: var(--green, #16a34a); }
.enix-inline-edit__btn--save:hover:not(:disabled) { background: var(--green, #16a34a); color: #fff; }
.enix-inline-edit__btn--cancel { color: var(--red, #dc2626); }
.enix-inline-edit__btn--cancel:hover:not(:disabled) { background: #fef2f2; border-color: var(--red, #dc2626); }
.enix-inline-edit__btn:disabled { opacity: .55; cursor: not-allowed; }

/* detail panel */
.enix-itin-card__details {
  background: var(--gray50);
  border-top: 1px solid var(--gray100);
  padding: 16px 20px;
}
.enix-itin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 12px;
}
.enix-itin-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.enix-itin-detail-field--full {
  grid-column: span 2;
}
.enix-itin-detail-field .lbl {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--gray400);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.enix-itin-detail-field .val {
  font-size: 12.5px;
  color: var(--gray700);
  line-height: 1.45;
}
.enix-itin-detail-field .val--danger { color: var(--red); }
.enix-itin-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-top: 4px;
  min-width: 100px;
}
/* Par de acciones que van lado a lado dentro de la columna de acciones.
   El contenedor apila en columna; los botones que tienen que convivir en una
   misma linea (Emitir a la izquierda de Cancelar) se agrupan aca. */
.enix-itin-detail-actions__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* status badges inside cards */
.enix-itin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.enix-itin-badge--confirmed { background: var(--badge-success-bg,#dcfce7); color: var(--badge-success-text,#16a34a); }
.enix-itin-badge--request   { background: var(--badge-warning-bg,#fef3c7); color: var(--badge-warning-text,#d97706); }
.enix-itin-badge--cancelled { background: var(--badge-danger-bg,#fee2e2);  color: var(--badge-danger-text,#dc2626); }
.enix-itin-badge--partial   { background: var(--blue-lt,#eff6ff);          color: var(--blue,#1e5fa8); }

/* cancelled card styling */
/* Cancelled card — keep text fully legible, only visually mark the
   header/icon area and strike-through the price. */
.enix-itin-card--cancelled {
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 12px,
    #fafbfc 12px,
    #fafbfc 22px
  );
}
.enix-itin-card--cancelled .enix-itin-card__icon {
  background: #f3f4f6;
  color: var(--gray400);
}
.enix-itin-card--cancelled .enix-itin-card__name {
  color: var(--gray700);
}
.enix-itin-card--cancelled .enix-itin-card__price {
  text-decoration: line-through;
  color: var(--gray500);
}
.enix-itin-card--cancelled .enix-itin-card__details {
  background: #fafbfc;
}
/* Detail fields stay fully readable — override the module-wide muted look */
.enix-itin-card--cancelled .enix-itin-detail-field .lbl { color: var(--gray500); }
.enix-itin-card--cancelled .enix-itin-detail-field .val { color: var(--gray800, #1f2937); }
.enix-itin-card--cancelled .enix-itin-card__sub { color: var(--gray700); }


/* ══════════════════════════════════════════════════════════════
   6. SECTION DIVIDER
   ══════════════════════════════════════════════════════════════ */
.enix-itin-section-label {
  font-size: 12px;
  font-weight: var(--fw-black, 900);
  color: var(--gray500);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 10px;
}
.enix-itin-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray200);
}


/* ══════════════════════════════════════════════════════════════
   7. GRAND TOTAL
   ══════════════════════════════════════════════════════════════ */
.enix-itin-total {
  background: linear-gradient(135deg, var(--blue-lt) 0%, var(--surface-card) 100%);
  border: 1px solid var(--blue-md);
  border-radius: var(--r);
  padding: 18px 22px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.enix-itin-total__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--gray500);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 3px;
}
.enix-itin-total__sub {
  font-size: var(--text-sm);
  color: var(--gray500);
}
.enix-itin-total__amount {
  font-size: 22px;
  font-weight: var(--fw-black);
  color: var(--navy);
  text-align: right;
}
.enix-itin-total__status {
  font-size: var(--text-sm);
  color: var(--green);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 2px;
}

/* BRL / multi-currency totals */
.enix-itin-total-extra {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  padding: 14px 22px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.enix-itin-total-extra__img { display: flex; align-items: center; }
.enix-itin-total-extra__amount {
  font-size: 20px;
  font-weight: var(--fw-black);
  color: var(--accent);
  text-align: right;
}
.enix-itin-total-extra__sub {
  font-size: var(--text-sm);
  color: var(--gray500);
  text-align: right;
  margin-top: 2px;
}

/* Admin detail rows below totals */
.enix-itin-total-admin {
  font-size: var(--text-sm);
  color: var(--gray500);
  text-align: right;
  margin-top: 6px;
}
.enix-itin-total-admin strong { color: var(--navy); }



/* ══════════════════════════════════════════════════════════════
   9. INLINE PANELS (finalize form, payments detail, etc.)
   ══════════════════════════════════════════════════════════════ */
.enix-itin-inline-panel {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  padding: 24px;
  margin-bottom: 20px;
}
.enix-itin-inline-panel__title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.enix-itin-inline-panel__title i { color: var(--blue); font-size: 14px; }
.enix-itin-inline-panel__sub {
  font-size: var(--text-sm);
  color: var(--gray500);
  margin-bottom: 20px;
}

/* Cancel / confirm dialog rendered inline inside a product card */
.enix-itin-dialog {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  padding: 24px 28px;
  text-align: center;
  margin: 8px 0;
}
.enix-itin-dialog__title {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: 12px;
}
.enix-itin-dialog__icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}
.enix-itin-dialog__message {
  font-size: var(--text-sm);
  color: var(--gray600);
  margin-bottom: 20px;
  font-weight: var(--fw-semibold);
}
.enix-itin-dialog__footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Payments inline table */
.enix-itin-payments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: 16px;
}
.enix-itin-payments-table thead th {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--gray400);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 8px 12px;
  border-bottom: 2px solid var(--gray200);
  text-align: left;
}
.enix-itin-payments-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray100);
  color: var(--gray700);
  vertical-align: middle;
}
.enix-itin-payments-table tbody tr:last-child td { border-bottom: none; }
.enix-itin-payments-table tbody tr:hover td { background: var(--gray50); }
.enix-itin-payments-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--gray200);
}
.enix-itin-payments-summary__row {
  display: flex;
  gap: 24px;
  font-size: var(--text-sm);
  color: var(--gray600);
}
.enix-itin-payments-summary__row strong { color: var(--navy); font-weight: var(--fw-bold); }
.enix-itin-payments-summary__row--total {
  font-size: 15px;
  font-weight: var(--fw-black);
  color: var(--navy);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   10. PRICE BREAKDOWN (Desglose de Precios)
   ══════════════════════════════════════════════════════════════ */

/* Markup editable table */
.enix-itin-markup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: 16px;
}
.enix-itin-markup-table thead tr {
  background: var(--gray50);
  border-bottom: 2px solid var(--gray200);
}
.enix-itin-markup-table thead th {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--gray500);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border: none;
}
.enix-itin-markup-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--gray100);
  color: var(--gray700);
  vertical-align: middle;
  border-top: none;
  border-left: none;
  border-right: none;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
/* First column (Servicio description) — make it stand out over generic text */
.enix-itin-markup-table tbody td:first-child {
  color: var(--navy);
  font-weight: var(--fw-semibold);
  font-variant-numeric: normal;
}
.enix-itin-markup-table tbody tr:last-child td { border-bottom: none; }
.enix-itin-markup-table tbody tr:hover td { background: var(--gray50); }

/* Informational note below table — soft neutral tone (not an error). */
.enix-itin-markup-warning {
  font-size: 12px;
  color: var(--gray600);
  padding: 8px 12px;
  background: var(--gray50);
  border-radius: var(--r-sm, 6px);
  border-left: 3px solid var(--blue);
  margin-bottom: 16px;
  line-height: 1.5;
}
.enix-itin-markup-warning i {
  color: var(--blue);
  margin-right: 4px;
}

/* Price totals footer */
.enix-itin-price-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 28px;
  background: linear-gradient(135deg, var(--blue-lt) 0%, #fff 100%);
  border: 1px solid var(--blue-md);
  border-radius: var(--r);
  margin: 16px 0 8px;
}
.enix-itin-price-total__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.enix-itin-price-total__label-title {
  font-size: 12.5px;
  font-weight: var(--fw-black, 900);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.enix-itin-price-total__label-sub {
  font-size: 12.5px;
  color: var(--gray500);
}
.enix-itin-price-total__amounts {
  text-align: right;
}
.enix-itin-price-total__main {
  font-size: 24px;
  font-weight: var(--fw-black, 900);
  color: var(--navy);
  line-height: 1.2;
}
.enix-itin-price-total__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  margin-top: 4px;
  color: var(--emerald, #059669);
}
.enix-itin-price-total__badge--pending   { color: var(--amber, #d97706); }
.enix-itin-price-total__badge--cancelled { color: var(--red, #dc2626); }
/* Detail lines (Sale / Net / Cost) — shown for admin */
.enix-itin-price-footer {
  display: flex;
  justify-content: flex-end;
  gap: 2px 20px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--gray200);
  margin-top: 10px;
}
.enix-itin-price-footer__item {
  font-size: 13px;
  color: var(--gray700);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.enix-itin-price-footer__item strong {
  color: var(--navy);
  font-weight: var(--fw-black, 900);
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 12px;
  margin-right: 4px;
}

/* Cascade styles for inner legacy elements inside enix-itin-price-total */
.enix-itin-price-total .title {
  font-size: var(--text-sm);
  color: var(--gray600);
  display: flex;
  align-items: center;
}
.enix-itin-price-total > .row,
.enix-itin-price-total .text-end {
  text-align: right !important;
}
.enix-itin-price-total h3 {
  font-size: 22px;
  font-weight: 900;
}
.enix-itin-price-total small {
  display: block;
  font-size: var(--text-sm);
  color: var(--gray500);
}
.enix-itin-price-total .cost {
  font-size: var(--text-sm);
  color: var(--gray600);
  text-align: right;
}
/* Panel footer with action buttons */
.enix-itin-panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--surface-border);
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 10px;
}
.enix-itin-panel-footer--right { justify-content: flex-end; }

/* Payments summary card — Ver Pagos "Subtotal / Saldo / Total".
   Higher hierarchy: gradient background, bolder numerics, semantic colours. */
.enix-itin-payments-summary-card {
  margin: 20px 0 4px auto;
  min-width: 300px;
  max-width: 380px;
  background: linear-gradient(135deg, var(--blue-lt) 0%, var(--surface-card) 100%);
  border: 1px solid var(--blue-md);
  border-radius: var(--r);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.enix-itin-payments-summary-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.enix-itin-payments-summary-card__label {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--gray600);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.enix-itin-payments-summary-card__value {
  font-size: 15px;
  font-weight: var(--fw-black, 900);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.enix-itin-payments-summary-card__value--paid    { color: var(--green); }
.enix-itin-payments-summary-card__value--pending { color: var(--red); }
.enix-itin-payments-summary-card__row--total {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 2px solid var(--blue-md);
}
.enix-itin-payments-summary-card__row--total .enix-itin-payments-summary-card__label {
  color: var(--navy);
  font-size: 13px;
  letter-spacing: .07em;
}
.enix-itin-payments-summary-card__row--total .enix-itin-payments-summary-card__value {
  font-size: 20px;
}

/* ══════════════════════════════════════════════════════════════
   11. VOUCHERS
   ══════════════════════════════════════════════════════════════ */
.enix-itin-voucher-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.enix-itin-voucher-frame {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--surface-border);
  background: var(--gray50);
  min-height: 340px;
}
.enix-itin-voucher-frame iframe {
  width: 100%;
  min-height: 340px;
  border: none;
  display: block;
}
.enix-itin-url-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.enix-itin-url-row label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--gray500);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* Iframe shimmer overlay — replaces the legacy /img/loading.gif spinner.
   OcultarLoader() clears background-image, which stops the shimmer and
   reveals the iframe content underneath. */
.enix-iframe-shimmer,
.iframe-loading {
  background-image: linear-gradient(90deg,
    var(--gray100) 0%,
    var(--gray200) 50%,
    var(--gray100) 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: enix-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm, 6px);
}

/* ══════════════════════════════════════════════════════════════
   8. PAYMENT SECTION
   ══════════════════════════════════════════════════════════════ */

/* Checkbox estilizado */
.enix-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--blue);
}

/* Fila seleccionada en tabla */
.enix-table__row--selected {
  background: var(--blue-lt) !important;
}
.enix-table__row--selected td { color: var(--navy); }

/* Barra de métodos de pago */
.enix-itin-pay-methods {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
}
.enix-itin-pay-methods__label {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--gray600);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.enix-itin-pay-methods__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Empty state */
.enix-itin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  gap: 10px;
}
.enix-itin-empty-state__icon {
  font-size: 36px;
  color: var(--green);
}
.enix-itin-empty-state__text {
  font-size: 14px;
  color: var(--gray500);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   9. IQ WINDOW BAR
   ══════════════════════════════════════════════════════════════ */

/* Sticky bar shown when a file is open */
.enix-iq-bar {
  position: sticky;
  top: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  height: 52px;
  background: #fe8736;
  border-bottom: 3px solid var(--navy);
  box-shadow: var(--sh);
}

/* Left section */
.enix-iq-bar__info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.enix-iq-bar__icon {
  color: var(--navy);
  font-size: 15px;
  flex-shrink: 0;
}
.enix-iq-bar__title {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: #fff;
  white-space: nowrap;
}
.enix-iq-bar__title strong { color: var(--navy); }
.enix-iq-bar__sub {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}

/* Right section */
.enix-iq-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Outline button sobre fondo naranja */
.enix-iq-bar .enix-btn-sm--outline {
  border-color: rgba(255,255,255,.5);
  color: #fff;
  background: transparent;
}
.enix-iq-bar .enix-btn-sm--outline:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}

/* Dropdown wrapper */
.enix-iq-dropdown {
  position: relative;
}
.enix-iq-dropdown__trigger {
  cursor: pointer;
}
/* Panel hidden by default, shown on hover */
.enix-iq-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  z-index: 9999;
  overflow: hidden;
}
.enix-iq-dropdown:hover .enix-iq-panel,
.enix-iq-dropdown:focus-within .enix-iq-panel {
  display: block;
}

/* Panel header */
.enix-iq-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray100);
  background: var(--surface-bg);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--gray700);
}

/* Scrollable list */
.enix-iq-panel__list {
  max-height: 52vh;
  overflow-y: auto;
  padding: 8px 0;
}

/* Individual service row */
.enix-iq-service {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray100);
  transition: background .12s;
}
.enix-iq-service:last-child { border-bottom: none; }
.enix-iq-service:hover { background: var(--blue-lt); }

.enix-iq-service__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-bg);
  border: 1px solid var(--gray100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 11px;
}
.enix-iq-service__body { flex: 1; min-width: 0; }
.enix-iq-service__name {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--gray800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enix-iq-service__detail { font-weight: 400; color: var(--gray500); }
.enix-iq-service__meta {
  font-size: 11px;
  color: var(--gray500);
  margin: 2px 0 4px;
}
.enix-iq-service__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.enix-iq-service__price {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--navy);
}

/* Panel total row */
.enix-iq-panel__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 2px solid var(--gray100);
  background: var(--surface-bg);
  font-size: 13px;
  color: var(--gray600);
}
.enix-iq-panel__total strong {
  font-size: 14px;
  font-weight: var(--fw-black);
  color: var(--navy);
}

@media (max-width: 900px) {
  .enix-iq-bar { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 8px; }
  .enix-iq-bar__sub { display: none; }
  .enix-iq-panel { width: 92vw; right: -10px; }
}
@media (max-width: 900px) {
  .enix-itin-layout { gap: 14px; }
  .enix-itin-menu   { position: static; }
  .enix-itin-layout > aside { position: static; }
  .enix-itin-header__col { border-right: none; border-bottom: 1px solid var(--gray100); }
  .enix-itin-header__col:last-child { border-bottom: none; }
  .enix-itin-detail-grid { grid-template-columns: 1fr; }
  .enix-itin-detail-field--full { grid-column: span 1; }
}


/* ══════════════════════════════════════════════════════════════
   12. MOBILE (<= 768px)
   --------------------------------------------------------------
   Mismo corte que ItineraryDetail / enix-reservas.css, que es
   desde donde se entra a esta pantalla.

   Las clases .enix-m-* son markup que sólo se usa en mobile; en
   desktop quedan ocultas por el bloque BASE de acá abajo.
   ══════════════════════════════════════════════════════════════ */

/* ── BASE (aplica en todos los anchos) ── */

/* .enix-m-sheet es el propio <aside> del menú: acá sólo se oculta
   su cromo de bottom-sheet, no el sidebar. */
.enix-m-filesum,
.enix-m-header-toggle,
.enix-m-menubtn,
.enix-m-sheet__grip,
.enix-m-sheet__head,
.enix-m-backdrop,
.enix-m-count { display: none; }

.enix-m-sheet__body { display: contents; }

/* Detalle de card: contenido | acciones */
.enix-itin-detail-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}


@media (max-width: 768px) {

  /* ── Escala tipográfica de mobile: todo el módulo cuelga de acá ── */
  .itinerary-detail,
  .enix-itin-topbar {
    --m-title: 13px;    /* nombre del servicio    */
    --m-body:  11.5px;  /* pax, valores           */
    --m-meta:  10.5px;  /* fechas, rsv, labels    */
    --m-micro: 9.5px;   /* sale/net/cost, kickers */
    --m-price: 16.5px;  /* precio de card         */
  }


  /* ── 1. TOPBAR ── */
  .enix-itin-topbar {
    height: 42px;
    padding: 0 11px;
    gap: 8px;
    margin-bottom: 0;
  }
  .enix-itin-topbar__breadcrumb {
    font-size: var(--m-meta);
    letter-spacing: .05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* font-size:0 colapsa el label y deja sólo la ×, sin tocar el markup */
  .enix-itin-topbar__close {
    width: 31px;
    height: 31px;
    padding: 0;
    flex-shrink: 0;
    justify-content: center;
    font-size: 0;
    gap: 0;
  }
  .enix-itin-topbar__close i { font-size: 13px; }

  .enix-itin-topbar__quote { padding: 3px 7px; font-size: 0; gap: 0; margin-left: 6px; }
  .enix-itin-topbar__quote i { font-size: 11px; }
  .enix-itin-topbar__quote span { display: none; }

  .itinerary-detail.container,
  .enix-itin-page.container { padding-left: 10px; padding-right: 10px; }


  /* ── 2. HEADER DEL FILE
        Las tres columnas se pliegan detrás de "Datos del file" y
        arriba queda una franja resumen. ── */
  .enix-itin-header {
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    margin-bottom: 10px;
  }
  .enix-itin-header__strip { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .enix-itin-header__filenumber { font-size: 13.5px; gap: 7px; min-width: 0; }
  .enix-itin-header__filenumber i { font-size: 11px; }
  /* el badge ya dice el estado */
  .enix-itin-header__status-label { display: none; }
  .enix-itin-header__status-area { min-width: 0; }

  .enix-m-filesum {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
  }
  .enix-m-filesum__l { min-width: 0; flex: 1; }
  .enix-m-filesum__pax {
    font-family: var(--itin-font-head);
    font-size: 12.5px;
    font-weight: var(--fw-bold);
    color: var(--navy);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .enix-m-filesum__sub {
    font-size: var(--m-meta);
    color: var(--gray500);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .enix-m-filesum__r { text-align: right; flex-shrink: 0; }
  .enix-m-filesum__total {
    font-family: var(--itin-font-head);
    font-size: 15px;
    font-weight: var(--fw-black);
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .enix-m-filesum__pay {
    font-size: var(--m-micro);
    font-weight: var(--fw-black);
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-top: 1px;
    color: var(--red);
  }
  .enix-m-filesum__pay--ok { color: var(--green); }

  .enix-m-header-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px;
    background: var(--gray50);
    border: none;
    border-top: 1px solid var(--gray100);
    color: var(--gray500);
    font-family: var(--itin-font-body);
    font-size: var(--m-micro);
    font-weight: var(--fw-bold);
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .enix-m-header-toggle i { font-size: 8px; transition: transform .2s ease; }
  .enix-itin-header.is-open .enix-m-header-toggle i { transform: rotate(180deg); }

  .enix-itin-header__body { display: none; }
  .enix-itin-header.is-open .enix-itin-header__body { display: block; }
  .enix-itin-header__col {
    padding: 11px 12px;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid var(--gray100);
  }
  .enix-itin-header__col:last-child { background: var(--gray50); }
  .enix-itin-col-title {
    font-size: var(--m-micro);
    letter-spacing: .09em;
    margin-bottom: 8px;
  }
  .enix-itin-col-title i { font-size: 9px; }
  .enix-itin-meta-row { font-size: var(--m-body); gap: 8px; margin-bottom: 4px; }
  .enix-itin-meta-row .lbl { font-size: var(--m-micro); min-width: 56px; letter-spacing: .05em; }
  .enix-itin-meta-row .val,
  .enix-itin-meta-row .val.fw-bolder { min-width: 0; overflow-wrap: anywhere; }
  .enix-itin-mainpax { font-size: 12.5px; margin-bottom: 8px; }
  .enix-itin-pax-row { font-size: var(--m-body); gap: 7px; margin-bottom: 4px; }
  .enix-itin-pax-type { font-size: var(--m-micro); padding: 1px 6px; min-width: 32px; }
  .enix-itin-payment-row { font-size: var(--m-body); padding: 4px 0; }
  .enix-itin-view-payments { font-size: var(--m-body); margin-top: 8px; }


  /* ── 3. MENÚ: el sidebar pasa a botón + bottom sheet ── */
  .enix-itin-layout { display: block; gap: 0; }

  .enix-m-menubtn {
    position: sticky;
    top: var(--nav-navbar-height, 52px);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 42px;
    padding: 0 11px;
    margin: 0 0 10px;
    background: var(--navy);
    border: none;
    border-radius: var(--r-sm);
    box-shadow: 0 2px 10px rgba(13, 34, 64, .22);
    cursor: pointer;
    font-family: var(--itin-font-body);
    text-align: left;
  }
  .enix-m-menubtn__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 16px;
    flex-shrink: 0;
  }
  .enix-m-menubtn__burger span { display: block; height: 2px; border-radius: 2px; background: #fff; }
  .enix-m-menubtn__lbl {
    font-family: var(--itin-font-head);
    font-size: 12px;
    font-weight: var(--fw-black);
    color: #fff;
    letter-spacing: .09em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .enix-m-menubtn__sep { width: 1px; height: 16px; background: rgba(255,255,255,.22); flex-shrink: 0; }
  .enix-m-menubtn__cur {
    flex: 1;
    min-width: 0;
    font-size: var(--m-body);
    font-weight: var(--fw-semibold);
    color: rgba(255,255,255,.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .enix-m-menubtn__cur b { color: #fff; font-weight: var(--fw-bold); }
  .enix-m-menubtn__chev { color: rgba(255,255,255,.6); font-size: 11px; flex-shrink: 0; }

  .enix-m-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(13, 34, 64, .5);
    z-index: 1090;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .enix-m-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* El selector repite `.enix-itin-layout > aside` para empatarle la
     especificidad al position/top del sidebar sticky de la sección 4. */
  .enix-itin-layout > aside.enix-m-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 1100;
    max-height: 84vh;
    background: var(--surface-card);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 34px rgba(13, 34, 64, .22);
    transform: translateY(102%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  }
  .enix-itin-layout > aside.enix-m-sheet.is-open { transform: translateY(0); }
  .enix-m-sheet__grip {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--gray300);
    margin: 8px auto 2px;
    flex-shrink: 0;
  }
  .enix-m-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 14px 9px;
    border-bottom: 1px solid var(--gray100);
    flex-shrink: 0;
  }
  .enix-m-sheet__title {
    font-family: var(--itin-font-head);
    font-size: 11.5px;
    font-weight: var(--fw-black);
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .09em;
  }
  .enix-m-sheet__x {
    width: 27px;
    height: 27px;
    border: 1px solid var(--gray200);
    border-radius: 7px;
    background: var(--surface-card);
    color: var(--gray500);
    font-size: 12px;
    cursor: pointer;
  }
  .enix-m-sheet__body { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .enix-m-sheet .enix-itin-menu { border: none; border-radius: 0; box-shadow: none; }
  .enix-m-sheet .enix-itin-menu-section { padding: 6px 14px; font-size: var(--m-micro); letter-spacing: .11em; }
  .enix-m-sheet .enix-itin-menu-section i { font-size: 9px; }
  .enix-m-sheet .enix-itin-menu-action { padding: 12px 14px; font-size: 12.5px; }
  .enix-m-sheet .enix-itin-menu-action i.enix-itin-menu-icon { font-size: 11px; margin-right: 10px; width: 13px; }
  .enix-m-sheet .enix-itin-menu-action i.enix-itin-menu-chevron { font-size: 10px; }


  /* ── 4. CARDS DE SERVICIO
        El nombre y el precio comparten la fila 1 del grid, y las
        metas van debajo, así la card no se estira con los pax. ── */
  .enix-itin-products__strip { display: none; }
  .enix-m-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3px 6px;
    font-family: var(--itin-font-head);
    font-size: var(--m-micro);
    font-weight: var(--fw-black);
    color: var(--gray500);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .enix-m-count b { color: var(--blue); }

  .enix-itin-products { gap: 8px; }
  .enix-itin-card { border-radius: 10px; }
  .enix-itin-card--hotel,
  .enix-itin-card--disney,
  .enix-itin-card--transfer,
  .enix-itin-card--admission,
  .enix-itin-card--car,
  .enix-itin-card--excursion,
  .enix-itin-card--house,
  .enix-itin-card--cruise,
  .enix-itin-card--other,
  .enix-itin-card--tour { border-left-width: 3px; }

  /* `display:contents` sube los hijos de __body a este grid: es lo que
     permite que el nombre y el precio compartan fila sin tocar el markup. */
  .enix-itin-card__header {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: start;
    padding: 10px 11px 9px;
  }
  .enix-itin-card__body { display: contents; }

  /* El ícono deja de ser una columna de 54px */
  .enix-itin-card__icon {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    background: none;
    border-right: none;
    font-size: 11px;
    color: var(--gray400);
    align-items: flex-start;
    padding-top: 2px;
  }

  .enix-itin-card__name {
    grid-column: 2;
    grid-row: 1;
    padding-left: 6px;
    font-size: var(--m-title);
    line-height: 1.28;
    letter-spacing: -.005em;
    /* dos renglones en vez de elipsis */
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Columna 2, no ancho completo: quedan al lado del precio */
  .enix-itin-card__sub {
    grid-column: 2;
    font-size: var(--m-meta);
    color: var(--gray500);
    gap: 3px 7px;
    line-height: 1.5;
    margin-top: 4px;
  }
  .enix-itin-card__sub i { font-size: 9px; }
  /* el proveedor deja de ser píldora: se comía un renglón entero */
  .enix-itin-card__provider {
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    color: var(--gray600);
    font-size: var(--m-meta);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
  }
  .enix-itin-card__provider i { color: var(--gray400); }

  .enix-itin-card__meta-row {
    grid-column: 1 / -1;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--gray200);
    font-size: var(--m-body);
    color: var(--gray700);
  }
  .enix-itin-card__pax { align-items: center; gap: 6px; }
  .enix-itin-card__pax i { margin-top: 0; font-size: 10px; }
  .enix-itin-card__pax-list {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    line-height: 1.4;
  }
  .enix-itin-card__pax-count { font-size: var(--m-micro); padding: 2px 7px; background: var(--gray100); }
  /* MultiRoom: el desglose por habitación sí se apila */
  .enix-itin-card__pax-count[style] { align-self: flex-start; }

  /* Abarca el nombre y las dos filas de meta: si ocupara sólo la fila 1,
     su alto (badge + precio + sale/net/cost) dejaba un hueco al lado. */
  .enix-itin-card__right {
    grid-column: 3;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 1px;
    padding: 0 0 0 8px;
    min-width: 0;
    max-width: 38vw;
    border-left: none;
  }
  /* `order` sube el importe sobre el badge sin tocar el markup */
  .enix-itin-card__price { font-size: var(--m-price); line-height: 1.05; letter-spacing: -.02em; order: 1; }
  .enix-itin-card__price small,
  .enix-itin-card__price .enix-itin-card__price-cents { font-size: 10px; }
  .enix-itin-card__right .enix-itin-badge { order: 2; margin: 1px 0 0; font-size: var(--m-micro); padding: 2px 7px; }
  .enix-itin-card__status { order: 2; gap: 4px; }
  .enix-itin-card__status .enix-itin-badge { margin: 0; }
  .enix-itin-card__paid { width: 20px; height: 20px; font-size: 11px; }
  .enix-itin-card__price-sub {
    order: 3;
    font-size: var(--m-micro);
    line-height: 1.35;
    color: var(--gray400);
    white-space: nowrap;
  }

  .enix-itin-card__footer-toggle {
    height: 26px;
    padding: 0;
    font-size: var(--m-micro);
    letter-spacing: .08em;
  }
  .enix-itin-card__footer-toggle i { font-size: 8px; }


  /* ── 5. DETALLE DESPLEGADO ── */
  .enix-itin-card__details { padding: 11px; }
  .enix-itin-detail-layout { grid-template-columns: 1fr; gap: 10px; }
  /* Las acciones encabezan el detalle: abajo quedaban pegadas a
     "Ocultar detalles" y se podía dar Cancelar sin querer. */
  .enix-itin-detail-layout > .enix-itin-detail-actions { order: -1; }
  .enix-itin-detail-grid { grid-template-columns: 1fr; gap: 9px; margin-bottom: 0; }
  .enix-itin-detail-field--full { grid-column: span 1; }
  .enix-itin-detail-field .lbl { font-size: var(--m-micro); letter-spacing: .07em; }
  .enix-itin-detail-field .val { font-size: var(--m-body); line-height: 1.45; }
  .enix-itin-detail-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    padding: 0 0 10px;
    border-top: none;
    border-bottom: 1px solid var(--gray200);
  }
  .enix-itin-detail-actions .btn { width: 100%; font-size: 11.5px; font-weight: var(--fw-black); padding: 9px 12px; }
  /* En mobile los botones van full width, asi que la fila vuelve a apilar. */
  .enix-itin-detail-actions__row { flex-direction: column; align-items: stretch; width: 100%; }


  /* ── 6. TOTALES Y PANELES: se ajustan al ancho, no se redibujan ── */
  .enix-itin-price-total { padding: 11px 13px; border-radius: 10px; margin: 10px 0 6px; gap: 10px; }
  .enix-itin-price-total__label-title { font-size: var(--m-micro); letter-spacing: .09em; }
  .enix-itin-price-total__label-sub { font-size: var(--m-meta); margin-top: 2px; }
  .enix-itin-price-total__main { font-size: 18px; line-height: 1.1; }
  .enix-itin-price-total__badge { font-size: var(--m-micro); margin-top: 2px; }
  .enix-itin-price-footer { justify-content: flex-start; gap: 2px 12px; }
  .enix-itin-price-footer__item { font-size: var(--m-meta); text-align: left; }
  .enix-itin-price-footer__item strong { font-size: var(--m-micro); }

  .enix-itin-total { padding: 13px 15px; }
  .enix-itin-total__amount { font-size: 18px; }
  .enix-itin-total-extra { padding: 11px 15px; }
  .enix-itin-total-extra__amount { font-size: 17px; }

  .enix-itin-inline-panel { padding: 14px 12px; border-radius: 10px; }
  .enix-itin-inline-panel__title { font-size: 13.5px; }
  .enix-itin-inline-panel__sub { font-size: var(--m-body); margin-bottom: 14px; }
  .enix-itin-panel-footer { flex-direction: column-reverse; align-items: stretch; }
  .enix-itin-panel-footer .btn { width: 100%; }

  .enix-itin-section-label { font-size: var(--m-micro); margin: 14px 0 8px; }

  /* El scroll va en el contenedor, nunca en la <table>: con display:block
     el colspan deja de funcionar y las filas vacías se descentran.
     enix-reservas-mobile.css pone overflow-x:visible en .enix-table-scroll
     para su vista de cards, así que acá hay que devolverlo. */
  .itinerary-detail .enix-table-scroll,
  .itinerary-detail .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Estado vacío: sin filas, el min-width de 640px y los th sólo logran
     empujar el mensaje fuera de la pantalla. */
  .itinerary-detail .enix-table:has(tbody tr:only-child > td[colspan]) {
    min-width: 0;
    width: 100%;
  }
  .itinerary-detail .enix-table:has(tbody tr:only-child > td[colspan]) thead { display: none; }

  .enix-itin-payments-summary-card { min-width: 0; max-width: none; margin: 14px 0 4px; padding: 13px 15px; }

  .enix-itin-voucher-frame,
  .enix-itin-voucher-frame iframe { min-height: 260px; }
  .enix-itin-url-row { flex-wrap: wrap; gap: 6px; }

  .enix-itin-dialog { padding: 16px 14px; }
  .enix-itin-dialog__title { font-size: 14px; }
  .enix-itin-dialog__footer .btn { flex: 1; }
}