/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY — Poppins (headings) + Mulish (body)
   Fonts loaded globally via index*.html — no @import needed.
   ══════════════════════════════════════════════════════════════ */
.enix-finance-header,
.enix-page-title,
.enix-payment-summary__header,
.enix-itin-topbar__breadcrumb {
  font-family: 'Poppins', system-ui, sans-serif;
}

.enix-payment-form,
.enix-payment-summary__item,
.enix-payment-summary__row,
.enix-payment-summary__total,
.enix-pagos-wrap {
  font-family: 'Mulish', system-ui, sans-serif;
}

/* Enix 3.0 Finance Modules — Stage 5
   --------------------------------------------------------------
   Source of truth: Enix3Proto (1).html
     · Comisiones  CSS  lines 405–492
     · Presupuestos CSS lines 582–590
     · Pagos        CSS lines 787–805 and 834–873
   Depends on: enix-tokens.css, enix-layout.css, enix-booking.css,
   enix-reservas.css (loaded before, in that order).

   Only var(--*) tokens are used here. Literal pixel sizes are kept
   only where the prototype has no exact token match (10.5px,
   11.5px, 12.5px, 9.5px, etc.).

   Class prefix: .enix-*  — namespaced so existing Bootstrap and
   Telerik/Kendo rules do not collide.
   -------------------------------------------------------------- */


/* ══════════════════════════════════════════════════════════════
   1. SHARED FINANCE PAGE CHROME
   ══════════════════════════════════════════════════════════════ */
.enix-finance-wrap {
  padding: 0 24px 48px;
}
.enix-finance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 0 16px;
}

/* .enix-page-title is also defined in enix-reservas.css — kept
   identical here so finance pages don't depend on reservas being
   present on the page tree. */
.enix-finance-wrap .enix-page-title,
.enix-pagos-wrap .enix-page-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-black);
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ══════════════════════════════════════════════════════════════
   2. KPI STAT CARDS (top of Comisiones / Pagos)
   ══════════════════════════════════════════════════════════════ */
.enix-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.enix-stat-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
}
.enix-stat-card__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--gray400);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.enix-stat-card__value {
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  color: var(--navy);
  line-height: 1.1;
}
.enix-stat-card__sub {
  font-size: 11px;
  color: var(--gray500);
  margin-top: 3px;
}
.enix-stat-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  margin-top: 4px;
}
.enix-stat-card__delta--up   { color: var(--green); }
.enix-stat-card__delta--down { color: var(--red); }

/* Accent variants — left-border highlight + colored value */
.enix-stat-card--blue   { border-left: 3px solid var(--blue); }
.enix-stat-card--blue   .enix-stat-card__value { color: var(--blue); }
.enix-stat-card--green  { border-left: 3px solid var(--green); }
.enix-stat-card--green  .enix-stat-card__value { color: var(--green); }
.enix-stat-card--amber  { border-left: 3px solid var(--amber); }
.enix-stat-card--amber  .enix-stat-card__value { color: var(--amber); }
.enix-stat-card--purple { border-left: 3px solid var(--purple); }
.enix-stat-card--purple .enix-stat-card__value { color: var(--purple); }
.enix-stat-card--teal   { border-left: 3px solid var(--teal); }
.enix-stat-card--teal   .enix-stat-card__value { color: var(--teal); }
.enix-stat-card--emerald{ border-left: 3px solid var(--emerald); }
.enix-stat-card--emerald .enix-stat-card__value { color: var(--emerald); }
.enix-stat-card--red    { border-left: 3px solid var(--red); }
.enix-stat-card--red    .enix-stat-card__value { color: var(--red); }


/* ══════════════════════════════════════════════════════════════
   3. PERIOD SELECTOR (week / month / quarter / year)
   ══════════════════════════════════════════════════════════════ */
.enix-period-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.enix-period-btn {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--gray200);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--gray600);
  background: var(--surface-card);
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
  white-space: nowrap;
}
.enix-period-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.enix-period-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}


/* ══════════════════════════════════════════════════════════════
   4. COMMISSION LAYOUT (main list + right sidebar)
   ══════════════════════════════════════════════════════════════ */
.enix-comm-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
}
.enix-comm-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.enix-comm-sidebar__card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  padding: 16px;
}
.enix-comm-sidebar__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: 12px;
}

/* Section divider inside the list */
.enix-comm-section-title {
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--gray400);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.enix-comm-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--surface-border);
}


/* ══════════════════════════════════════════════════════════════
   5. COMMISSION ITEMS (collapsible accordion)
   ══════════════════════════════════════════════════════════════ */
.enix-comm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.enix-comm-item {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .18s;
}
.enix-comm-item:hover { box-shadow: var(--sh-sm); }

.enix-comm-head {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .18s;
}
.enix-comm-head:hover { background: var(--gray50); }

.enix-comm-head__icon {
  width: 20px;
  font-size: 18px;
  flex-shrink: 0;
  text-align: center;
}
.enix-comm-head__info {
  flex: 1;
  min-width: 0;
}
.enix-comm-head__name {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--navy);
}
.enix-comm-head__sub {
  font-size: var(--text-sm);
  color: var(--gray500);
  margin-top: 2px;
}
.enix-comm-head__amount {
  font-size: var(--text-lg);
  font-weight: var(--fw-black);
  color: var(--navy);
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.enix-comm-head__badge {
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 2px 7px;
  border-radius: var(--r-full);
  margin-top: 3px;
  display: inline-block;
}
.enix-comm-head__badge--paid     { background: var(--badge-success-bg); color: var(--badge-success-text); }
.enix-comm-head__badge--pending  { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.enix-comm-head__badge--received { background: var(--badge-info-bg);    color: var(--badge-info-text); }

.enix-comm-head__chevron {
  color: var(--gray400);
  font-size: 13px;
  margin-left: 8px;
  transition: transform .18s;
  flex-shrink: 0;
}
.enix-comm-item.open .enix-comm-head__chevron { transform: rotate(180deg); }

.enix-comm-body {
  display: none;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--surface-border);
  background: var(--gray50);
}
.enix-comm-item.open .enix-comm-body { display: block; }

.enix-comm-math {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--gray600);
}
.enix-comm-math strong { color: var(--navy); font-size: var(--text-base); }
.enix-comm-math .enix-comm-math__arrow { color: var(--gray400); }
.enix-comm-math .enix-comm-math__pill {
  background: var(--purple-lt);
  color: var(--purple);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-weight: var(--fw-bold);
  font-size: 12px;
}


/* ══════════════════════════════════════════════════════════════
   6. PRESUPUESTOS (quotes) — warning banner + reuses .enix-table
   ══════════════════════════════════════════════════════════════ */
.enix-presup-warning {
  background: var(--amber-lt);
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: var(--text-sm);
  color: var(--amber);
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.45;
}
.enix-presup-warning strong { color: var(--yellow); }

/* Status variants for presupuestos rows — reuses .enix-status
   from enix-reservas.css; thin aliases are provided so the
   markup can use semantic names without leaking into Bootstrap. */
.enix-status--active    { background: var(--badge-success-bg); color: var(--badge-success-text); }
.enix-status--expired   { background: var(--badge-error-bg);   color: var(--badge-error-text); }
.enix-status--converted { background: var(--badge-info-bg);    color: var(--badge-info-text); }

/* Marca de presupuesto convertido en la lista de MyQuotes (primera columna, que estaba libre).
   Verde: es un estado logrado, no una advertencia — mismo criterio que el badge del editor. */
.enix-qconv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  box-shadow: 0 0 0 3px #d1fae5;
}


/* ══════════════════════════════════════════════════════════════
   7. PAGOS (payments) — page wrapper + cards
   ══════════════════════════════════════════════════════════════ */
.enix-pagos-wrap {
  padding: 0 24px 48px;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

/* Top action bar — "Generar link de pago" primary CTA (aligned with enix-btn-primary
   for visual consistency across the app). */
.enix-pay-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background .18s;
  font-family: inherit;
}
.enix-pay-link-btn:hover { background: var(--btn-primary-hover); }

/* Generic payment card (Stripe, Pix, manual, etc.) */
.enix-payment-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 16px;
}
.enix-payment-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.enix-payment-card__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.enix-payment-card__amount {
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  color: var(--navy);
  line-height: 1.1;
}
.enix-payment-card__amount--green  { color: var(--green); }
.enix-payment-card__amount--amber  { color: var(--amber); }
.enix-payment-card__amount--red    { color: var(--red); }

.enix-payment-card__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  margin-top: 10px;
}
.enix-payment-card__meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.enix-payment-card__meta-label {
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  color: var(--gray500);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.enix-payment-card__meta-value {
  font-size: 14.5px;
  font-weight: var(--fw-bold);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Payment method selector pills (Credit card / Pix / Manual) */
.enix-payment-methods {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.enix-payment-method-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--surface-border);
  background: var(--surface-card);
  color: var(--gray600);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
}
.enix-payment-method-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.enix-payment-method-pill.active,
.enix-payment-method-pill--active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Payment row (inline list of payments) — mirrors proto .payment-row */
.enix-payment-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray100);
}
.enix-payment-row:last-child { border-bottom: none; }
.enix-payment-row__ref {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--navy);
  min-width: 80px;
}
.enix-payment-row__desc {
  flex: 1;
  font-size: var(--text-md);
  color: var(--gray600);
}
.enix-payment-row__due {
  font-size: 11.5px;
  color: var(--gray500);
}
.enix-payment-row__amount {
  font-size: var(--text-lg);
  font-weight: var(--fw-black);
  color: var(--navy);
  min-width: 80px;
  text-align: right;
}
.enix-payment-row__status {
  min-width: 90px;
  text-align: center;
}

/* Payment status badges (specialized aliases of .enix-status) */
.enix-status--paid    { background: var(--emerald-lt); color: var(--emerald); }
.enix-status--overdue { background: var(--red-lt);     color: var(--red); }
.enix-status--partial { background: var(--blue-lt);    color: var(--blue); }

/* Progress bar for partial payments */
.enix-pay-progress {
  height: 5px;
  background: var(--gray100);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: 4px;
  width: 80px;
}
.enix-pay-progress__fill {
  height: 100%;
  background: var(--blue);
  border-radius: var(--r-full);
}

/* Stripe vendor badge */
.enix-stripe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: var(--fw-black);
  color: var(--purple);
  background: var(--purple-lt);
  padding: 2px 7px;
  border-radius: 4px;
}


/* ══════════════════════════════════════════════════════════════
   8. EXTERNAL SOURCES / INTEGRATIONS (DTA, VAX, Gmail import…)
   ══════════════════════════════════════════════════════════════ */
.enix-ext-sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.enix-ext-card {
  background: var(--surface-card);
  border: 1.5px solid var(--surface-border);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all .18s;
}
.enix-ext-card:hover {
  border-color: var(--blue);
  background: var(--blue-lt);
}
.enix-ext-card__icon {
  font-size: 24px;
  flex-shrink: 0;
}
.enix-ext-card__info {
  flex: 1;
  min-width: 0;
}
.enix-ext-card__name {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--navy);
}
.enix-ext-card__sub {
  font-size: 11px;
  color: var(--gray500);
  margin-top: 1px;
}
.enix-ext-card__status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   9. MOBILE BREAKPOINTS (≤ 768 px / ≤ 480 px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .enix-finance-wrap,
  .enix-pagos-wrap    { padding: 0 16px 32px; }

  .enix-stat-row      { grid-template-columns: 1fr 1fr; }
  .enix-comm-layout   { grid-template-columns: 1fr; }
  .enix-comm-sidebar  { width: 100%; }

  .enix-payment-card__meta { grid-template-columns: 1fr; }
  .enix-ext-sources        { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .enix-stat-row { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   10. CONFIG / ADMIN (Phase 7)  —  Markups, Reports, ChangeAgency
   --------------------------------------------------------------
   Source of truth: Enix3Proto (1).html #screen-config (CSS 494–534).
   The proto config screen also mocks module-toggles, providers,
   email-parsing and whitelabel cards that have NO real page — those
   are intentionally not built. Only the patterns that back real
   pages are ported here: settings card, toggle switch, markup row,
   plus a Telerik TabStrip override scoped to .enix-reports-wrap.
   Appended to enix-finance.css (already loaded last on every tenant)
   to avoid editing the 20 index*.html files for a new <link>.
   ══════════════════════════════════════════════════════════════ */

/* Page wrapper reuses .enix-finance-wrap. 2-column settings grid: */
.enix-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Generic settings card (proto .card / .card__head / .card__body) */
.enix-config-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  overflow: hidden;
}
.enix-config-card--full { grid-column: 1 / -1; }
.enix-config-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-border);
}
.enix-config-card__title {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.enix-config-card__body { padding: 20px; }

/* Toggle switch (Net⇄Markups, module on/off) — proto .toggle-sw */
.enix-toggle-sw {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  vertical-align: middle;
}
.enix-toggle-sw input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.enix-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: var(--gray200);
  cursor: pointer;
  transition: background .2s;
}
.enix-toggle-track::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.enix-toggle-sw input:checked + .enix-toggle-track { background: var(--blue); }
.enix-toggle-sw input:checked + .enix-toggle-track::before { transform: translateX(18px); }
.enix-toggle-sw input:checked + .enix-toggle-track.enix-toggle-track--purple  { background: var(--purple); }
.enix-toggle-sw input:checked + .enix-toggle-track.enix-toggle-track--green   { background: var(--green); }
.enix-toggle-sw input:checked + .enix-toggle-track.enix-toggle-track--emerald { background: var(--emerald); }
.enix-toggle-sw input:checked + .enix-toggle-track.enix-toggle-track--teal    { background: var(--teal); }
.enix-toggle-sw input:checked + .enix-toggle-track.enix-toggle-track--indigo  { background: var(--indigo); }
.enix-toggle-sw input:checked + .enix-toggle-track.enix-toggle-track--amber   { background: var(--amber); }

/* Inline labelled toggle (e.g. "Markups ⟷ Net" on the Markups page) */
.enix-toggle-field {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--surface-card);
}
.enix-toggle-field__label {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--gray500);
}
.enix-toggle-field__label--active {
  color: var(--navy);
  font-weight: var(--fw-bold);
}

/* Markup defaults rows — proto .markup-row.
   The real page keeps two Syncfusion SfNumericTextBox per row
   (Fixed $ + Percentage %); the grid just positions them. */
.enix-markup-list { display: flex; flex-direction: column; }
.enix-markup-group {
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--gray400);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 18px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.enix-markup-group::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--surface-border);
}
.enix-markup-row {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray100);
}
.enix-markup-row:last-child { border-bottom: none; }
.enix-markup-row--head { padding-bottom: 4px; border-bottom: none; }
.enix-markup-label {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--navy);
}
.enix-markup-colhead {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--gray400);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
}

.enix-mk-wrap { display: flex; flex-direction: column; gap: 10px; }
.enix-mk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.enix-mk-search { flex: 1; min-width: 200px; max-width: 420px; height: 34px; padding: 4px 12px; border: 1px solid var(--surface-border); border-radius: 6px; font-size: 13px; color: var(--navy); }
.enix-mk-search:focus { outline: none; border-color: var(--primary); }
.enix-mk-link { background: none; border: none; padding: 0; font-size: 12px; font-weight: var(--fw-semibold); color: var(--primary); cursor: pointer; }
.enix-mk-group { border: 1px solid color-mix(in srgb, var(--c) 30%, var(--surface-border)); border-left: 5px solid var(--c); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(18, 38, 63, .06); }
.enix-mk-group-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; background: color-mix(in srgb, var(--c) 12%, white); border: none; text-align: left; cursor: pointer; }
.enix-mk-group-h:hover { background: color-mix(in srgb, var(--c) 18%, white); }
.enix-mk-group-h strong { font-size: 14px; font-weight: var(--fw-semibold); color: color-mix(in srgb, var(--c) 75%, black); }
.enix-mk-count { font-size: 11px; font-weight: var(--fw-semibold); color: #fff; background: var(--c); border-radius: 10px; padding: 1px 8px; }
.enix-mk-chev { margin-left: auto; font-size: 11px; color: var(--c); transition: transform .15s; }
.enix-mk-chev.open { transform: rotate(90deg); }
.enix-mk-body { padding: 0 14px 4px; background: #fff; }
.enix-mk-row { display: flex; align-items: center; gap: 16px; padding: 3px 8px; margin: 0 -8px; border-bottom: 1px solid var(--gray100); }
.enix-mk-row:last-child { border-bottom: none; }
.enix-mk-row:not(.enix-mk-head):hover { background: color-mix(in srgb, var(--c) 6%, white); }
.enix-mk-row label { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enix-mk-head { padding-top: 6px; padding-bottom: 4px; border-bottom: 2px solid color-mix(in srgb, var(--c) 25%, white); }
.enix-mk-head span { font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, var(--c) 70%, black); text-align: center; }
.enix-mk-num { width: 120px; flex: none; }
.enix-mk-net { width: 100px; flex: none; text-align: center; font-size: 12px; font-weight: var(--fw-semibold); color: color-mix(in srgb, var(--c) 70%, black); }
.enix-mk-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--gray500); }

/* Filter row for the report components (replaces .row/.col-lg-N) */
.enix-report-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
}
.enix-report-filters .enix-field { min-width: 150px; }
.enix-report-filters__actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.enix-report-filters--secondary {
  padding-top: 16px;
  border-top: 1px solid var(--gray100);
}
.enix-report-filters__grow { flex: 1 1 260px; max-width: 420px; }
.enix-report-filters .enix-input { height: var(--input-height); }
.enix-report-filters__range { min-width: 260px; }

.enix-report-note {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--blue-lt);
  color: var(--gray600);
  font-size: var(--text-sm);
}

.enix-report-title {
  margin: 0 0 12px;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--navy);
}
.enix-report-title--spaced { margin-top: 28px; }

.enix-report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.enix-report-toolbar .enix-report-title { margin: 0; }
.enix-report-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.enix-report-chips .enix-pay-period-chip:disabled { opacity: .55; cursor: default; }

.enix-report-grid { margin-top: 4px; }
.enix-report-empty { margin: 8px 0 0; }

.enix-report-skel {
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-card);
}
.enix-report-skel__toolbar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-border);
}
.enix-report-skel__head,
.enix-report-skel__row {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 0 14px;
}
.enix-report-skel__head {
  height: 40px;
  background: var(--gray100);
  border-bottom: 1px solid var(--surface-border);
}
.enix-report-skel__row {
  height: 44px;
  border-bottom: 1px solid var(--gray100);
}
.enix-report-skel__row:last-child { border-bottom: none; }

.enix-reports-wrap .k-grid-toolbar {
  background: var(--surface-card);
  border-bottom: 1px solid var(--surface-border);
  padding: 10px 14px;
}
.enix-reports-wrap .k-grid-toolbar .k-button {
  background: #1d6f42;
  border: none;
  border-radius: 9px;
  color: var(--white);
  font-size: 12px;
  font-weight: var(--fw-bold);
  padding: 7px 14px;
  box-shadow: none;
}
.enix-reports-wrap .k-grid-toolbar .k-button:hover { background: #17663a; }
.enix-reports-wrap .k-grid-footer td {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--navy);
  background: var(--gray100);
}

@media (max-width: 768px) {
  .enix-report-filters .enix-field,
  .enix-report-filters__grow { flex: 1 1 100%; max-width: none; }
  .enix-report-filters__actions,
  .enix-report-filters__actions .enix-btn-search { width: 100%; }
  .enix-report-skel { overflow-x: auto; }
}

/* Telerik TabStrip override — scoped to the Reports page wrapper so
   it never leaks into other Telerik tab strips. */
.enix-reports-wrap {
  min-height: calc(100vh - var(--navbar-height, 120px));
  --kendo-color-primary: var(--blue);
  --kendo-color-primary-hover: var(--btn-primary-hover);
  --kendo-color-primary-active: var(--navy);
  --kendo-color-primary-emphasis: var(--blue-md);
  --kendo-color-primary-on-surface: var(--blue);
  --kendo-color-primary-on-subtle: var(--blue);
  --kendo-color-primary-subtle: var(--blue-lt);
  --kendo-color-primary-subtle-hover: var(--blue-md);
  --kendo-color-primary-subtle-active: var(--blue-md);
}
.enix-reports-wrap .k-tabstrip-items-wrapper { border-color: var(--surface-border); }
.enix-reports-wrap .k-tabstrip-items-wrapper .k-item {
  color: var(--gray500);
  font-weight: var(--fw-semibold);
}
.enix-reports-wrap .k-tabstrip-items-wrapper .k-item:hover,
.enix-reports-wrap .k-tabstrip-items-wrapper .k-item.k-hover { color: var(--navy); }
.enix-reports-wrap .k-tabstrip-items-wrapper .k-item.k-active {
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.enix-reports-wrap .k-tabstrip-items .k-item {
  color: var(--gray500);
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
}
.enix-reports-wrap .k-tabstrip-items .k-item:hover,
.enix-reports-wrap .k-tabstrip-items .k-item.k-hover { color: var(--blue); }
.enix-reports-wrap .k-tabstrip-items .k-item.k-active { color: var(--blue); }

/* Telerik grid overrides scoped to the Reports page (ReportSales /
   ReportCommissions / ReportPenalties). CSS-only — gives the 3 report
   grids the Enix look. The Telerik datepicker filter rows inside each
   component still need a VS live-preview pass to restructure safely. */
.enix-reports-wrap .k-grid {
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-card);
}
.enix-reports-wrap .k-grid-header,
.enix-reports-wrap .k-grid-header-wrap {
  background: var(--gray100);
  border-bottom: 1px solid var(--surface-border);
}
.enix-reports-wrap .k-grid-header th,
.enix-reports-wrap .k-grid-header .k-header {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--gray500);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--gray100);
}
.enix-reports-wrap .k-grid-content tr:hover td,
.enix-reports-wrap .k-grid-content tr.k-hover td { background: var(--blue-lt); }
.enix-reports-wrap .k-grid-content td { font-size: 12.5px; color: var(--gray700); }
.enix-reports-wrap .k-grid-pager,
.enix-reports-wrap .k-pager-wrap {
  background: var(--surface-card);
  border-top: 1px solid var(--surface-border);
  color: var(--gray600);
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .enix-config-grid { grid-template-columns: 1fr; }
  .enix-markup-row  { grid-template-columns: 1fr 1fr 1fr; }
  .enix-mk-num { width: 90px; }
  .enix-mk-net { width: 70px; }
  .enix-mk-row { gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════
   PAYMENT PAGES (CreditCard / PIX / Manual)
   ══════════════════════════════════════════════════════════════ */

/* Two-column layout: form + summary sidebar */
.enix-payment-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
.enix-payment-form {
  min-width: 0;
}

/* Payment skeleton placeholder */
.enix-pay-sk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.enix-pay-sk-field { display: flex; flex-direction: column; }
@media (max-width: 768px) {
  .enix-pay-sk-grid { grid-template-columns: 1fr; }
}

/* Payment summary sidebar */
.enix-payment-summary {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  overflow: hidden;
  position: sticky;
  top: 80px;
}
.enix-payment-summary__header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}
.enix-payment-summary__header i { color: var(--gold) !important; }
.enix-payment-summary__items {
  padding: 8px 0;
  max-height: 40vh;
  overflow-y: auto;
}
.enix-payment-summary__item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray100);
}
.enix-payment-summary__item:last-child { border-bottom: none; }
.enix-payment-summary__item-name {
  font-size: 12px;
  color: var(--gray700);
  margin-bottom: 4px;
  line-height: 1.4;
}
.enix-payment-summary__item-price {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--navy);
}
.enix-payment-summary__totals {
  border-top: 2px solid var(--gray100);
  padding: 10px 16px;
  background: var(--surface-bg);
}
.enix-payment-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--gray600);
  padding: 3px 0;
}
.enix-payment-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 2px;
  border-top: 1px solid var(--gray200);
  margin-top: 6px;
  font-size: 13px;
  color: var(--gray600);
}
.enix-payment-summary__total strong {
  font-size: 18px;
  font-weight: var(--fw-black);
  color: var(--navy);
}

/* PIX copy-to-clipboard row — full width, button + textarea + check */
.enix-pix-copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.enix-pix-copy-row__text {
  flex: 1;
  min-width: 0;
  height: 36px;
  resize: none;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--gray700);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-sm);
  background: var(--surface-bg);
  overflow: hidden;
  white-space: nowrap;
  font-family: monospace;
}

/* Compact inputs inside payment forms */
.enix-pagos-wrap .form-control,
.enix-pagos-wrap .form-select {
  padding: 5px 10px;
  font-size: 13px;
  height: auto;
  min-height: 34px;
}
.enix-pagos-wrap .form-label {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--gray600);
  margin-bottom: 3px;
}

@media (max-width: 900px) {
  .enix-payment-layout { grid-template-columns: 1fr; }
  .enix-payment-summary { position: static; }
  .enix-pagos-wrap { max-width: 100%; }
}