/* Pagos - Modern Tabs & Cards Structure */
.pagos-futuros-alert {
    background-color: var(--color-bg-alert-info);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 15px 20px;
    box-shadow: var(--shadow-colored-primary);
}

.pagos-futuros-alert-text {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--color-text-main);
    line-height: 1.5;
}

.pagos-total-badge {
    background: var(--color-success);
    color: white;
    padding: 10px 25px;
    border-radius: var(--radius-pill);
    display: inline-block;
    margin-top: 5px;
    box-shadow: var(--shadow-colored-success);
}

.pagos-total-label {
    font-size: var(--font-size-md);
    opacity: 0.9;
    text-transform: uppercase;
}

.pagos-total-amount {
    font-size: var(--font-size-display-4);
    margin-left: 10px;
}

.pagos-total-usd {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    margin-top: 4px;
}

/* Common Card Containers */
.pago-card-panel {
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 30px;
}

.pago-card-heading {
    background: var(--color-text-main) !important;
    padding: 12px 20px !important;
}

.pago-card-heading .panel-title {
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.pago-list-item {
    border-left: none;
    border-right: none;
    padding: 15px 20px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pago-list-item-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.pago-icon-container {
    width: 45px;
    flex-shrink: 0;
    margin-top: 3px;
}

.pago-content-container {
    flex-grow: 1;
    min-width: 0;
    display: block;
}

.pago-amount-block {
    float: right;
    margin-left: 10px;
    margin-bottom: 5px;
}

.pago-amount-value {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1;
    margin-top: 2px;
}

.pago-client-name {
    margin: 0 0 4px 0;
    font-weight: 700;
    color: var(--color-text-main);
    font-size: var(--font-size-lg);
    word-break: break-word;
}

.pago-client-details {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

.pago-detail-badge {
    font-size: var(--font-size-xs);
    padding: 3px 8px;
    border-radius: 20px;
}

.pago-note-container {
    margin-top: 5px;
    font-size: var(--font-size-sm);
    color: var(--color-warning);
    background: var(--color-bg-note);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.pago-secondary-text {
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    margin-top: 2px;
}

.pago-secondary-text-strong {
    color: var(--color-text-main);
    margin-top: 3px;
    font-size: var(--font-size-sm);
}

.pago-tertiary-text {
    color: var(--color-primary);
    margin-top: 3px;
    font-size: var(--font-size-sm);
}

/* ── Info alert (Tab Pagos realizados) ───────────────────── */
.pagos-info-alert {
    margin-top: 20px;
    background-color: var(--color-bg-alert-info);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
}

.pagos-info-text {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--color-text-main);
}

.pagos-sort-note {
    display: inline-block;
}

.pagos-export-btn {
    margin-top: 5px;
    box-shadow: var(--shadow-sm);
}

.pagos-export-btn img {
    margin-right: 5px;
}

/* ── Filters panel ───────────────────────────────────────── */
.pagos-filters-panel {
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.pagos-filters-panel .panel-body {
    padding: 15px;
}

.pagos-filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}

.pagos-filter-dates {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
}

.date-picker-group {
    flex: 1 1 50%;
    min-width: 0;
}

.pagos-filter-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagos-filter-options {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
}

.clientes-action-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    width: 100%;
}

.clientes-action-search {
    position: relative;
    flex: 1 1 150px;
    min-width: 0;
}

.clientes-action-search .form-control,
.cliente-filter-combo .form-control {
    width: 100%;
}

.cliente-filter-combo {
    flex: 1 1 130px;
    min-width: 0;
}

/* ── Totals summary ──────────────────────────────────────── */
.pagos-summary-row {
    margin-bottom: 25px;
}

.pagos-count-card {
    background: white;
    padding: 15px 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-primary);
    display: inline-block;
}

.pagos-count-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    font-weight: 600;
    display: block;
}

.pagos-count-value {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-text-main);
}

.pagos-summary-right {
    display: inline-block;
    text-align: right;
}

.pagos-debt-warning {
    display: block;
    font-size: var(--font-size-md);
    font-weight: 600;
}

/* ── Sort bar ────────────────────────────────────────────── */
.pagos-sort-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: 15px;
}

.pagos-sort-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 12px;
    letter-spacing: 0.5px;
}

.pagos-sort-label .fa {
    margin-right: 5px;
}

.pagos-sort-select-wrap {
    position: relative;
}

.pagos-sort-select {
    width: 260px;
    display: inline-block;
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text-main);
    background-color: white;
    box-shadow: var(--shadow-sm);
    padding-right: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-card);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.pagos-sort-chevron {
    position: absolute;
    right: 12px;
    top: 12px;
    color: var(--color-text-light);
    pointer-events: none;
    font-size: var(--font-size-sm);
}

/* ── Payment card extras ─────────────────────────────────── */
.pago-card-heading .panel-title .fa {
    margin-right: 8px;
}

.pago-card-panel .list-group {
    margin: 0;
}

/* New Grid Layout for Payments on Desktop */
@media (min-width: 992px) {
    .pago-grid-layout .list-group {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    .pago-grid-layout .list-group .list-group-item {
        width: 50%;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        margin-bottom: 0;
    }

    /* Remove right border for the second item in each row */
    .pago-grid-layout .list-group .list-group-item:nth-child(2n) {
        border-right: none;
    }

    /* Handle last item border if odd number of items */
    .pago-grid-layout .list-group .list-group-item:last-child {
        border-bottom: 1px solid #ddd;
    }
}

/* ── Historial KPI layout ────────────────────────────────── */
.historial-kpi-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.historial-kpi-group-wide {
    flex: 2;
    min-width: 280px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
    background: rgba(52, 152, 219, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(52, 152, 219, 0.2);
    box-sizing: border-box;
}

.historial-kpi-inner {
    flex: 1;
    min-width: 0;
}

.historial-kpi-col {
    flex: 1;
    min-width: 160px;
    padding: 0 15px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .historial-kpi-group-wide {
        width: 100%;
        flex: none;
        min-width: 0;
    }

    .historial-kpi-col {
        flex: 1 1 calc(50% - 30px);
        min-width: 0;
    }
}

/* ── Mobile scrollable tabs ──────────────────────────────── */
@media (max-width: 767px) {
    .pagos-tabset > .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid #ddd;
    }

    .pagos-tabset > .nav-tabs > li {
        flex-shrink: 0;
    }

    .pagos-tabset > .nav-tabs > li > a {
        white-space: nowrap;
    }
}