/* ── Pagos & Cobros ── */
.enix-pay-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #f8fafc;
    font-family: 'Mulish', sans-serif;
    overflow-y: auto;
    /* Evita que el footer suba a media pantalla con pocas filas.
       124px = alto del header (~46) más el del footer (~76). */
    min-height: calc(100vh - 124px);
}

.enix-pay-topbar {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    gap: 12px;
}

.enix-pay-topbar__title {
    font-family: 'Poppins', 'Mulish', sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #3f4a5a;
    margin: 0;
    flex: 1;
}

.enix-pay-topbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.enix-pay-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: 'Mulish', sans-serif;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.enix-pay-btn:hover { opacity: 0.88; }
.enix-pay-btn--primary { background: #0d2240; color: #fff; }
.enix-pay-btn--filter  { background: #0d2240; color: #fff; align-self: flex-end; }

/* Stats */
.enix-pay-stats {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.enix-pay-stat {
    flex: 1;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    border-top: 3px solid transparent;
}

.enix-pay-stat--green  { border-top-color: #16a34a; }
.enix-pay-stat--amber  { border-top-color: #d97706; }
.enix-pay-stat--red    { border-top-color: #dc2626; }
.enix-pay-stat--blue   { border-top-color: #2563eb; }
.enix-pay-stat--navy   { border-top-color: #0d2240; }
.enix-pay-stat--violet { border-top-color: #7c3aed; }
.enix-pay-stat--orange { border-top-color: #ea580c; }

.enix-pay-stat__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 6px;
}

.enix-pay-stat__value {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #0d2240;
    line-height: 1;
    margin-bottom: 4px;
}

.enix-pay-stat--green  .enix-pay-stat__value { color: #16a34a; }
.enix-pay-stat--amber  .enix-pay-stat__value { color: #d97706; }
.enix-pay-stat--red    .enix-pay-stat__value { color: #dc2626; }
.enix-pay-stat--violet .enix-pay-stat__value { color: #7c3aed; }
.enix-pay-stat--orange .enix-pay-stat__value { color: #ea580c; }

.enix-pay-stat__sub {
    font-size: 11px;
    color: #94a3b8;
}

.enix-pay-period-chip {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1.5px solid #e2e8f0;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    white-space: nowrap;
}

    .enix-pay-period-chip:hover {
        border-color: #4f8ef7;
        color: #4f8ef7;
    }

.enix-pay-period-chip--active {
    background: #4f8ef7;
    border-color: #4f8ef7;
    color: #fff;
}

    .enix-pay-period-chip--active:hover {
        color: #fff;
    }

/* Modifier: .enix-btn-excel es compartido con ItineraryDetail. */
.enix-pay-btn-excel {
    padding: 10px 16px;
    border-radius: 5px;
    font-size: 12.5px;
}

.enix-pay-table-meta .enix-export-msg {
    display: inline;
    margin-top: 0;
    text-align: right;
    white-space: nowrap;
}

/* Se apunta desde el padre porque el JS del datepicker pisa el class del div raíz. */
.enix-pay-period-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

    .enix-pay-period-row > .enix-dp {
        width: 290px;
        min-width: 0;
    }

/* El período mide sobre la fecha de VIAJE, no sobre la de cobro / liquidación. Sin el cartel,
   un rango que cae en el futuro devuelve vacío y se lee como un bug. */
.enix-pay-period-hint {
    margin-right: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
}

/* Filas desplegables */
.enix-pay-row--master {
    cursor: pointer;
}

    .enix-pay-row--master:hover td {
        background: #f8fafc;
    }

.enix-pay-row--open td {
    background: #f8fafc;
}

.enix-pay-expander {
    display: inline-block;
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.15s;
}

.enix-pay-expander--open {
    transform: rotate(90deg);
    color: #4f8ef7;
}

.enix-pay-row--detail > td {
    background: #f8fafc;
    padding: 0 14px 12px;
}

.enix-pay-subtable {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

    .enix-pay-subtable th {
        text-align: left;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #94a3b8;
        font-weight: 700;
        padding: 8px 12px;
        border-bottom: 1px solid #e2e8f0;
        background: #fcfdfe;
    }

    .enix-pay-subtable td {
        padding: 10px 12px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: top;
    }

    .enix-pay-subtable tr:last-child td {
        border-bottom: none;
    }

/* Filters */
.enix-pay-filters {
    display: flex;
    gap: 12px;
    padding: 14px 24px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    align-items: flex-end;
    flex-wrap: wrap;
}

.enix-pay-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 140px;
}

.enix-pay-filter-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
}

.enix-pay-filter-select,
.enix-pay-filter-input {
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Mulish', sans-serif;
    color: #0d2240;
    background: #fff;
    outline: none;
    cursor: pointer;
    /* Sin esto el input suma padding y borde al ancho ya estirado, se pasa 22px de su
       grupo y mete scroll horizontal en toda la página. */
    box-sizing: border-box;
    min-width: 0;
}

.enix-pay-filter-select:focus,
.enix-pay-filter-input:focus { border-color: #4f8ef7; }

/* Table */
.enix-pay-table-section {
    padding: 16px 24px;
}

.enix-pay-table-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    color: #64748b;
}

.enix-pay-table-meta__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.enix-pay-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.enix-pay-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}

.enix-pay-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f8fafc;
    vertical-align: middle;
    color: #374151;
}

.enix-pay-table tr:hover td { background: #fafbfc; }
.enix-pay-table tr:last-child td { border-bottom: none; }

.enix-pay-res-num { font-weight: 700; color: #0d2240; }
.enix-pay-agency  { font-weight: 600; color: #0d2240; font-size: 13px; }
.enix-pay-client  { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.enix-pay-service { display: flex; align-items: center; gap: 6px; color: #64748b; }

.enix-pay-amount-total     { font-weight: 600; color: #0d2240; }
.enix-pay-amount-collected { color: #64748b; }
.enix-pay-amount-balance--due  { color: #d97706; font-weight: 600; }
.enix-pay-amount-balance--zero { color: #16a34a; font-weight: 600; }
/* Saldo a favor: pagó de más, no es un error. */
.enix-pay-amount-balance--over { color: #1d4ed8; font-weight: 600; }

/* Status badges */
.enix-pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* El ancho lo fija la píldora, así la fecha se centra debajo en mobile. */
.enix-pay-state-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
}

.enix-pay-badge-date {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

.enix-pay-badge--paid    { background: #dcfce7; color: #15803d; }
.enix-pay-badge--pending { background: #fef9c3; color: #b45309; }
.enix-pay-badge--overdue { background: #fee2e2; color: #b91c1c; }
.enix-pay-badge--partial { background: #dbeafe; color: #1d4ed8; }

/* Estados de la comision del agente (SN_Commissions). Van aparte de --pending/--paid a proposito:
   esos los comparte la pantalla de cobranzas, donde "pendiente" tiene que seguir siendo amarillo.
   Acá la escala es otra: cobrada = verde, procesando el pago = amarillo/naranja, y sin procesar
   todavia = rojo (para el agente es la plata que ni siquiera empezaron a liquidarle). */
.enix-pay-badge--comm-processing { background: #fef9c3; color: #b45309; }
.enix-pay-badge--comm-pending    { background: #fee2e2; color: #b91c1c; }

/* Action buttons */
.enix-pay-action-btn {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Mulish', sans-serif;
    transition: opacity 0.15s;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #0d2240;
}

.enix-pay-action-btn:hover { opacity: 0.85; }
.enix-pay-action-btn--link  { background: #fff; border: 1px solid #e2e8f0; color: #0d2240; }
.enix-pay-action-btn--ghost { background: transparent; border: none; color: #94a3b8; cursor: pointer; }

.enix-pay-actions { display: flex; align-items: center; gap: 6px; }

/* Links section */
.enix-pay-links-section {
    margin: 0 24px 24px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

.enix-pay-links-header {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.enix-pay-links-title {
    font-size: 14px;
    font-weight: 700;
    color: #0d2240;
    font-family: 'Poppins', sans-serif;
}

.enix-pay-links-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.enix-pay-links-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
    border-bottom: 1px solid #f1f5f9;
}

.enix-pay-links-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f8fafc;
    color: #374151;
}

.enix-pay-links-table tr:last-child td { border-bottom: none; }
.enix-pay-links-table tr:hover td { background: #fafbfc; }

.enix-pay-expires--soon { color: #d97706; font-weight: 600; }

.enix-pay-link-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
}

/* Outline y nunca verde: el verde lleno ya es el estado "Cobrado". */
.enix-pay-link-badge--sent    { background: #fef3c7; color: #b45309; }
.enix-pay-link-badge--open    { background: transparent; border: 1px solid #bfdbfe; color: #1d4ed8; }
.enix-pay-link-badge--expired { background: transparent; border: 1px solid #e2e8f0; color: #94a3b8; }
.enix-pay-link-badge--used    { background: transparent; border: 1px dashed #cbd5e1; color: #64748b; }

.enix-pay-copy-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'Mulish', sans-serif;
    color: #64748b;
    transition: border-color 0.15s;
}

.enix-pay-copy-btn:hover { border-color: #4f8ef7; color: #4f8ef7; }

/* ── Pagination ── */
.enix-pay-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 0 8px;
}

.enix-pay-page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.enix-pay-page-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #4f8ef7;
    color: #1e40af;
}

.enix-pay-page-btn--active {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: #fff;
}

.enix-pay-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.enix-pay-showing {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    padding-bottom: 8px;
}

/* ── Link modal ── */
.enix-pay-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.enix-pay-modal {
    background: #fff;
    border-radius: 14px;
    padding: 28px 28px 24px;
    width: 420px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.enix-pay-modal__title {
    font-size: 17px;
    font-weight: 700;
    color: #1e3a5f;
    margin-bottom: 6px;
}

.enix-pay-modal__sub {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
}

.enix-pay-modal__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #475569;
    margin-bottom: 14px;
}

.enix-pay-modal__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.enix-pay-modal__field label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.enix-pay-modal__input,
.enix-pay-modal__select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: 'Mulish', sans-serif;
    color: #1e293b;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.enix-pay-modal__input:focus,
.enix-pay-modal__select:focus { border-color: #4f8ef7; }

.enix-pay-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.enix-pay-modal__btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s;
}

.enix-pay-modal__btn--primary {
    background: #1e3a5f;
    color: #fff;
}

.enix-pay-modal__btn--primary:hover { background: #163050; }

.enix-pay-modal__btn--ghost {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.enix-pay-modal__btn--ghost:hover { background: #f1f5f9; }

.enix-pay-modal__btn--wa {
    background: #25d366;
    color: #fff;
}

.enix-pay-modal__btn--wa:hover { background: #1ebe5d; }

/* ── Payment link box ── */
.enix-pay-link-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 4px;
}

.enix-pay-link-box__url {
    flex: 1;
    font-size: 12px;
    color: #475569;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.enix-pay-link-box__copy {
    flex-shrink: 0;
    background: #1e3a5f;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.enix-pay-link-box__copy:hover { background: #163050; }

/* ── New-request / simplified page helpers ── */
.enix-pay-empty {
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
    font-family: 'Mulish', sans-serif;
}

.enix-pay-client-name {
    font-size: 13px;
    font-weight: 600;
    color: #0d2240;
    font-family: 'Mulish', sans-serif;
}

.enix-pay-client-phone {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.enix-pay-concept {
    font-size: 13px;
    color: #374151;
    font-family: 'Mulish', sans-serif;
    max-width: 260px;
}

.enix-pay-date {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.enix-pay-amount {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0d2240;
}

/* ════════════════════════════════════════════════════════════
   MOBILE (max-width:768px)
   --------------------------------------------------------------
   Mismo criterio que enix-reservas-mobile.css: sin duplicar markup,
   la tabla se reordena como cards con grid-template-areas y la clave
   de cada dato sale de data-label.
   ════════════════════════════════════════════════════════════ */

@media (max-width:768px), sin duplicar markup. La tabla se
   reordena como cards con grid-template-areas sobre las clases
   que ya tienen los <td>, y la clave de cada dato sale de
   data-label. El desktop no se toca.

   Se carga después de enix-pay.css.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── 1. TOPBAR: título arriba, chips de período scrolleables ── */
    .enix-pay-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 12px 12px;
    }

    .enix-pay-topbar__title {
        font-size: 19px;
    }

    .enix-pay-topbar__actions {
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

        .enix-pay-topbar__actions::-webkit-scrollbar {
            display: none;
        }

    .enix-pay-period-chip {
        flex: 0 0 auto;
        padding: 7px 13px;
    }

    /* A ancho completo, como los filtros. El cartel de "fecha de viaje" pasa a su propio
       renglón: compartiendo la fila le come el ancho al datepicker. */
    .enix-pay-period-row {
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 12px;
    }

        .enix-pay-period-row > .enix-dp {
            width: 100%;
        }

    /* ── 2. TARJETAS: 2 por fila, no 5 apretadas ── */
    .enix-pay-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
    }

    .enix-pay-stat {
        padding: 11px 13px;
    }

        /* La quinta queda sola: que ocupe el ancho completo. */
        .enix-pay-stat:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }

    .enix-pay-stat__label {
        font-size: 10px;
    }

    .enix-pay-stat__value {
        font-size: 19px;
    }

    /* ── 3. FILTROS: uno por línea, sin apretar ── */
    .enix-pay-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .enix-pay-filter-group {
        flex: 1 1 auto !important;
        min-width: 0;
        width: 100%;
    }

    .enix-pay-filter-input,
    .enix-pay-filter-select {
        width: 100%;
    }

    /* ── 4. BARRA DE RESULTADOS + EXPORT ── */
    .enix-pay-table-section {
        padding: 16px 12px 20px;
    }

    .enix-pay-table-meta {
        flex-wrap: wrap;
        align-items: center;
        gap: 9px 10px;
        margin-bottom: 14px;
        font-size: 12px;
    }

    .enix-pay-table-meta__actions {
        display: contents;
    }

    .enix-pay-table-meta > span:first-child:not(.enix-skeleton) {
        order: 1;
        flex: 1 1 auto;
    }

    .enix-pay-table-meta .enix-pay-btn-excel {
        order: 2;
        flex: 0 0 auto;
        width: auto;
        padding: 8px 13px;
    }

    .enix-pay-table-meta .enix-export-msg {
        order: 4;
        flex: 1 1 100%;
        text-align: left;
        white-space: normal;
    }

    /* ── 5. TABLA → CARDS ──────────────────────────────────────
       Aplica igual a las filas reales y a las del skeleton, porque
       comparten las mismas clases de <td>. */
    .enix-pay-table thead {
        display: none;
    }

    .enix-pay-table,
    .enix-pay-table tbody {
        display: block;
        width: 100%;
    }

    /* La fila de plata (total / cobrado / saldo) se lee de corrido. */
    .enix-pay-table tbody tr.enix-pay-row--master {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "enix     enix       actions"
            "client   client     client"
            "total    collected  balance"
            "arrival  link       link"
            "exp      exp        exp";
        align-items: start;
        gap: 9px 10px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        padding: 11px 12px 0;
        box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px -18px rgba(15,23,42,.18);
    }

        .enix-pay-table tbody tr.enix-pay-row--master:hover td,
        .enix-pay-table tbody tr.enix-pay-row--open td {
            background: transparent;
        }

    .enix-pay-table tbody tr.enix-pay-row--master > td {
        display: block;
        border-bottom: none;
        padding: 0;
        text-align: left !important;
        min-width: 0;
    }

    /* Clave del dato (ARRIBO, SALDO, …) arriba de cada valor. */
    .enix-pay-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 9.5px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 2px;
    }

        /* En el skeleton la clave se reemplaza por una barra. Necesita el mismo
           prefijo que la regla de arriba para ganarle en especificidad. */
        .enix-pay-table tbody tr.enix-pay-row--skel td[data-label]::before {
            content: "";
            display: block;
            height: 9px;
            width: 55%;
            margin-bottom: 4px;
            border-radius: 3px;
            background: #eef1f6;
        }

    .enix-pay-td--enix      { grid-area: enix; }
    .enix-pay-td--client    { grid-area: client; }
    .enix-pay-td--arrival   { grid-area: arrival; }
    .enix-pay-td--total     { grid-area: total; }
    .enix-pay-td--collected { grid-area: collected; }
    .enix-pay-td--balance   { grid-area: balance; }
    .enix-pay-td--link      { grid-area: link; }
    .enix-pay-td--actions   { grid-area: actions; }
    .enix-pay-td--exp       { grid-area: exp; }

    .enix-pay-td--actions .enix-pay-actions {
        justify-content: flex-end;
    }

    .enix-pay-td--client {
        border-top: 1px solid #f1f5f9;
        padding-top: 9px !important;
    }

    .enix-pay-td--arrival,
    .enix-pay-td--total,
    .enix-pay-td--collected,
    .enix-pay-td--balance {
        font-size: 12.5px;
        line-height: 1.3;
    }

    .enix-pay-table tbody tr.enix-pay-row--master > td.enix-pay-td--exp {
        margin: 0 -12px;
        padding: 7px 0;
        text-align: center !important;
        background: #f8fafc;
        border-top: 1px solid #f1f5f9;
    }

    /* La card se toca entera: el triángulo indica abrir / cerrar. */
    .enix-pay-expander {
        font-size: 11px;
        transform: rotate(90deg);
    }

    .enix-pay-expander--open {
        transform: rotate(-90deg);
    }

    /* ── 6. DETALLE: se pega a la card de arriba ── */
    .enix-pay-table tbody tr.enix-pay-row--master:has(+ .enix-pay-row--detail) {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .enix-pay-table tbody tr.enix-pay-row--detail {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #e2e8f0;
        border-top: none;
        border-radius: 0 0 10px 10px;
        overflow: hidden;
    }

        .enix-pay-table tbody tr.enix-pay-row--detail > td {
            display: block;
            padding: 10px 12px;
        }

            .enix-pay-table tbody tr.enix-pay-row--detail > td:first-child {
                display: none;
            }

    /* ── 7. MOVIMIENTOS → una card chica por movimiento ── */
    .enix-pay-subtable,
    .enix-pay-subtable tbody {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
        border-radius: 0;
    }

    .enix-pay-subtable thead {
        display: none;
    }

    .enix-pay-subtable tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 10px;
        padding: 11px 12px;
        margin-bottom: 8px;
        background: #fff;
        border: 1px solid #e9edf3;
        border-radius: 8px;
    }

        .enix-pay-subtable tbody tr:last-child {
            margin-bottom: 0;
            border-bottom: 1px solid #e9edf3;
        }

    .enix-pay-subtable tbody td {
        display: block;
        padding: 0;
        border-bottom: none;
        min-width: 0;
        font-size: 12.5px;
        line-height: 1.3;
    }

    .enix-pay-subtable td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 9.5px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 1px;
    }

    .enix-pay-sub--concept {
        grid-column: 1 / -1;
        order: 1;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #f4f6f9;
    }

    .enix-pay-sub--date   { order: 2; }
    /* Pisa el text-align:right inline, que acá desalinea el valor. */
    .enix-pay-sub--amount { order: 3; text-align: left !important; }
    .enix-pay-sub--state  { order: 4; }

        /* Columna angosta: la fecha baja centrada bajo la píldora. */
        .enix-pay-sub--state .enix-pay-state-stack {
            flex-direction: column;
            align-items: center;
            gap: 3px;
        }
    .enix-pay-sub--link   { grid-column: 1 / -1; order: 5; }

        .enix-pay-sub--link .enix-pay-link-badge {
            display: inline-block;
        }

    .enix-pay-sub--actions {
        grid-column: 1 / -1;
        order: 6;
    }

        .enix-pay-sub--actions .enix-pay-action-btn {
            width: 100%;
            justify-content: center;
        }

    /* ── 8. PAGINADO ── */
    .enix-pay-pagination {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ── 9. MODAL DEL LINK ── */
    .enix-pay-modal {
        width: calc(100vw - 24px);
        max-width: none;
        padding: 16px;
    }

    .enix-pay-link-box__url {
        font-size: 11px;
        word-break: break-all;
    }
}