.cartera-page {
    --cartera-blue: #003f88;
    --cartera-blue-2: #0b62bd;
    --cartera-navy: #061b39;
    --cartera-orange: #ff8300;
    --cartera-orange-2: #ffb000;
    --cartera-green: #00a651;
    --cartera-yellow: #f5c542;
    --cartera-red: #e32626;
    --cartera-ink: #05182e;
    --cartera-muted: #63758a;
    --cartera-line: #d7e6f4;
    --cartera-soft: #f4f8fc;
    max-width: 1700px;
}

body.modal-open {
    overflow: hidden;
}

.cartera-page *,
.cartera-modal-card * {
    box-sizing: border-box;
}

.cartera-page button,
.cartera-page select,
.cartera-page input,
.cartera-modal-card button,
.cartera-modal-card select,
.cartera-modal-card input {
    font: inherit;
}

.cartera-page button,
.cartera-modal-card button {
    cursor: pointer;
}

.cartera-page .hidden,
.cartera-modal-card .hidden,
.q-modal.hidden {
    display: none !important;
}

@keyframes carteraFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes carteraPop {
    from { opacity: 0; transform: scale(.975); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes carteraShine {
    from { transform: translateX(-130%); }
    to { transform: translateX(180%); }
}

.cartera-page .top-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.cartera-page .top-nav-tabs a {
    padding: 10px 16px;
    border: 1px solid var(--cartera-line);
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: var(--cartera-blue);
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(0,63,136,.08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cartera-page .top-nav-tabs a:hover {
    transform: translateY(-2px);
    border-color: rgba(255,131,0,.45);
    box-shadow: 0 16px 34px rgba(0,63,136,.14);
}

.cartera-page .top-nav-tabs a.active {
    background: linear-gradient(135deg, var(--cartera-blue), var(--cartera-orange));
    color: #fff;
    border-color: transparent;
}

.cartera-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
    padding: 24px 28px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--cartera-navy), var(--cartera-blue) 58%, var(--cartera-orange));
    color: #fff;
    box-shadow: 0 26px 80px rgba(0,63,136,.24);
    animation: carteraFadeUp .45s ease both;
}

.cartera-hero::before,
.cartera-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cartera-hero::before {
    width: 360px;
    height: 360px;
    right: -120px;
    top: -170px;
    background: rgba(255,255,255,.12);
}

.cartera-hero::after {
    width: 250px;
    height: 250px;
    left: 38%;
    bottom: -170px;
    background: rgba(255,176,0,.16);
}

.cartera-hero-copy,
.cartera-hero-side {
    position: relative;
    z-index: 1;
}

.cartera-hero .eyebrow {
    margin: 0 0 6px;
    color: #ffe1b8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cartera-hero h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 62px);
    line-height: .98;
    letter-spacing: -1.8px;
    font-weight: 950;
}

.cartera-hero .subtitle {
    max-width: 850px;
    margin: 10px 0 0;
    color: #dbefff;
    font-weight: 700;
}

.cartera-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.cartera-hero-meta span {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #eef7ff;
    font-size: 12px;
}

.cartera-hero-side {
    min-width: 300px;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 108px;
    gap: 12px;
    align-items: stretch;
}

.cartera-hero-total {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 22px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    text-align: center;
}

.cartera-hero-total span {
    color: #ffe1b8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cartera-hero-total strong {
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1;
}

.cartera-hero-total small {
    color: #dbefff;
    font-weight: 700;
}

.cartera-hero-side img {
    width: 108px;
    height: 100%;
    min-height: 108px;
    object-fit: contain;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

.cartera-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--cartera-line);
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 45px rgba(0,63,136,.08);
}

.cartera-filters label {
    display: grid;
    gap: 5px;
}

.cartera-filters label > span {
    color: var(--cartera-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cartera-filters select,
.cartera-filters input {
    min-width: 128px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid #c8d7e6;
    border-radius: 14px;
    background: #fff;
    color: var(--cartera-ink);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cartera-filters select:focus,
.cartera-filters input:focus {
    border-color: var(--cartera-orange);
    box-shadow: 0 0 0 4px rgba(255,131,0,.12);
}

.cartera-filters .cartera-client-filter select {
    min-width: 260px;
    max-width: 420px;
}

.cartera-filters button {
    height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cartera-orange), var(--cartera-orange-2));
    color: #211500;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(255,131,0,.25);
}

.cartera-filters button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(255,131,0,.32);
}

.cartera-filters .auto-filter-note {
    align-self: center;
    color: var(--cartera-muted);
    font-size: 12px;
    font-weight: 700;
}

.cartera-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.cartera-kpi,
.cartera-aging-card {
    position: relative;
    overflow: hidden;
    min-height: 154px;
    padding: 16px;
    border: 1px solid var(--cartera-line);
    border-top: 7px solid var(--cartera-blue-2);
    border-radius: 24px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    color: var(--cartera-ink);
    text-align: left;
    box-shadow: 0 20px 52px rgba(0,63,136,.10);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    animation: carteraFadeUp .48s ease both;
}

.cartera-kpi::after,
.cartera-aging-card::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    transform: translateX(-130%);
    pointer-events: none;
}

.cartera-kpi:hover,
.cartera-aging-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,131,0,.45);
    box-shadow: 0 28px 70px rgba(0,63,136,.17);
}

.cartera-kpi:hover::after,
.cartera-aging-card:hover::after {
    animation: carteraShine .8s ease;
}

.cartera-kpi.info { border-top-color: var(--cartera-blue-2); }
.cartera-kpi.ok { border-top-color: var(--cartera-green); }
.cartera-kpi.alerta { border-top-color: var(--cartera-yellow); }
.cartera-kpi.critico { border-top-color: var(--cartera-red); }

.cartera-kpi span,
.cartera-aging-card span {
    display: block;
    color: var(--cartera-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cartera-kpi strong,
.cartera-aging-card strong {
    display: block;
    margin: 14px 0 8px;
    color: var(--cartera-blue);
    font-size: clamp(22px, 2vw, 31px);
    line-height: 1;
    letter-spacing: -.8px;
}

.cartera-kpi small,
.cartera-aging-card small {
    display: block;
    min-height: 34px;
    color: var(--cartera-muted);
    font-size: 12px;
    font-weight: 700;
}

.cartera-kpi i,
.cartera-aging-card i {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #e8f3ff;
    color: var(--cartera-blue);
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
}

.cartera-kpi.ok i { background: #d9f7e8; color: #006b37; }
.cartera-kpi.alerta i { background: #fff1a8; color: #735100; }
.cartera-kpi.critico i { background: #ffe0de; color: #a40000; }

.cartera-panel {
    margin-top: 18px;
    border: 1px solid var(--cartera-line);
    border-radius: 28px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 22px 60px rgba(0,63,136,.10);
    overflow: hidden;
    animation: carteraFadeUp .5s ease both;
}

.cartera-section-head,
.cartera-page .section-title {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: linear-gradient(100deg, var(--cartera-navy), var(--cartera-blue) 68%, var(--cartera-orange));
    color: #fff;
}

.cartera-section-head h2,
.cartera-page .section-title > span,
.cartera-page .section-title:not(.section-title-actions) {
    margin: 0;
    font-size: 15px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cartera-section-head p {
    margin: 4px 0 0;
    color: #dbefff;
    font-size: 13px;
    font-weight: 650;
}

.projection-actions,
.view-toggle,
.mini-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.special-graph-btn,
.view-toggle button,
.mini-btn,
.document-open-btn {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-weight: 850;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.special-graph-btn:hover,
.view-toggle button:hover,
.mini-btn:hover,
.document-open-btn:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.23);
}

.view-toggle button.active {
    background: linear-gradient(135deg, var(--cartera-orange), var(--cartera-orange-2));
    color: #241600;
    border-color: transparent;
}

.chart-controls {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cartera-line);
    background: #f4f9ff;
}

.chart-controls label,
.modal-chart-controls label,
.modal-filterbar label,
.invoice-expand-head label {
    display: grid;
    gap: 5px;
    color: var(--cartera-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.chart-controls select,
.modal-chart-controls select,
.modal-filterbar select,
.modal-filterbar input,
.invoice-expand-head select,
.cxc-select,
.cxc-search {
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #c8d7e6;
    border-radius: 12px;
    background: #fff;
    color: var(--cartera-ink);
    outline: none;
}

.cartera-board-wrap {
    overflow: auto;
    padding: 14px;
    background: linear-gradient(180deg, #f5f9fd, #edf6ff);
}

.cartera-board-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: 13px;
}

.cartera-board-table th {
    padding: 12px 10px;
    background: linear-gradient(180deg, #0a4f94, var(--cartera-blue));
    color: #fff;
    text-align: center;
    font-weight: 900;
}

.cartera-board-table th:first-child {
    min-width: 300px;
    border-radius: 16px 0 0 16px;
    text-align: left;
}

.cartera-board-table th:last-child {
    border-radius: 0 16px 16px 0;
}

.cartera-board-table th b,
.cartera-board-table th span {
    display: block;
}

.cartera-board-table th span {
    margin-top: 4px;
    color: #dbefff;
    font-size: 10px;
    font-weight: 650;
}

.cartera-board-table td {
    padding: 11px 10px;
    border-top: 1px solid #d5e5f2;
    border-bottom: 1px solid #d5e5f2;
    background: #fff;
    text-align: center;
}

.cartera-board-table tr td:first-child {
    border-left: 1px solid #d5e5f2;
    border-radius: 16px 0 0 16px;
    text-align: left;
}

.cartera-board-table tr td:last-child {
    border-right: 1px solid #d5e5f2;
    border-radius: 0 16px 16px 0;
}

.cartera-board-table tbody tr:nth-child(even) td {
    background: #f8fbff;
}

.cartera-board-table tbody tr:hover td {
    background: #fff8ed;
}

.cartera-board-table .client-name {
    color: var(--cartera-ink);
    font-weight: 900;
    cursor: pointer;
}

.cartera-board-table .total-col {
    background: #d7ebff !important;
}

.cartera-board-table .totals-row td {
    background: #b8d7f4 !important;
    color: #061b39;
    font-weight: 950;
    border-top: 2px solid #2a7aa8;
    border-bottom: 2px solid #2a7aa8;
}

.amount-link {
    border: 0;
    background: transparent;
    color: var(--cartera-blue);
    font-weight: 900;
    text-decoration: underline;
    text-decoration-color: rgba(0,63,136,.28);
    text-underline-offset: 3px;
}

.amount-link:hover {
    color: var(--cartera-orange);
}

.projection-chart-wrap {
    padding: 16px;
    background: #fff;
}

.modal-chart-wrap,
.client-chart-box {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 1px solid var(--cartera-line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.modal-chart-wrap canvas,
.client-chart-box canvas,
.projection-chart-wrap canvas {
    display: block;
    width: 100%;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 12px 0;
    color: var(--cartera-muted);
    font-size: 12px;
    font-weight: 750;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chart-legend i {
    display: inline-block;
    width: 18px;
    height: 5px;
    border-radius: 999px;
}

.legend-bar { background: var(--cartera-blue); }
.legend-line { background: var(--cartera-green); }
.legend-trend { background: var(--cartera-orange); }

.chart-data-panel {
    margin-top: 14px;
    overflow: auto;
    border: 1px solid var(--cartera-line);
    border-radius: 16px;
}

.chart-data-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 12px;
}

.chart-data-table th {
    padding: 9px 10px;
    background: #e8f4ff;
    color: var(--cartera-blue);
    text-align: left;
    font-weight: 900;
}

.chart-data-table td {
    padding: 8px 10px;
    border-top: 1px solid #e8eff6;
}

.cartera-weekly .section-title {
    justify-content: center;
}

.weekly-table-scroll,
.client-board-body,
.cxc-detail-scroll {
    overflow: auto;
}

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

.cxc-table th {
    padding: 11px 10px;
    background: #e8f4ff;
    color: var(--cartera-blue);
    text-align: left;
    font-weight: 900;
    white-space: nowrap;
}

.cxc-table td {
    padding: 10px;
    border-bottom: 1px solid #edf3f8;
    vertical-align: middle;
}

.cxc-table tbody tr:hover td {
    background: #fffaf2;
}

.num {
    text-align: right !important;
    white-space: nowrap;
    color: var(--cartera-blue);
    font-weight: 850;
}

.strong-value {
    font-weight: 950 !important;
}

.clickable-row {
    cursor: pointer;
}

.weekly-mobile-cards {
    display: none;
}

.cartera-aging-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.cartera-aging-card.d30 { border-top-color: var(--cartera-green); }
.cartera-aging-card.d60 { border-top-color: var(--cartera-yellow); }
.cartera-aging-card.d90 { border-top-color: var(--cartera-orange); }
.cartera-aging-card.d120 { border-top-color: var(--cartera-red); }

.cartera-aging-card.d30 i { background: #d9f7e8; color: #006b37; }
.cartera-aging-card.d60 i { background: #fff1a8; color: #735100; }
.cartera-aging-card.d90 i { background: #ffe8d0; color: #874100; }
.cartera-aging-card.d120 i { background: #ffe0de; color: #a40000; }

.section-title-actions {
    flex-wrap: wrap;
}

.cxc-bottom-board .mini-actions .mini-btn {
    color: #fff;
}

.cxc-bottom-board .mini-actions .cxc-select,
.cxc-bottom-board .mini-actions .cxc-search {
    min-width: 150px;
}

.client-main-row {
    cursor: pointer;
}

.client-name-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.expand-btn {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: #e8f3ff;
    color: var(--cartera-blue);
    font-size: 19px;
    font-weight: 950;
}

.client-detail-cell {
    padding: 14px !important;
    background: #f5f9fd !important;
}

.client-invoices-container {
    padding: 14px;
    border: 1px solid var(--cartera-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.invoice-expand-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.invoice-expand-head > div span,
.invoice-expand-head > div small {
    display: block;
    color: var(--cartera-muted);
    font-size: 11px;
    font-weight: 750;
}

.invoice-expand-head > div b {
    display: block;
    color: var(--cartera-blue);
    font-size: 22px;
}

.invoice-expand-head .mini-btn,
.document-open-btn,
.modal-actions .mini-btn {
    border-color: transparent;
    background: linear-gradient(135deg, var(--cartera-blue), var(--cartera-blue-2));
    color: #fff;
    box-shadow: 0 10px 22px rgba(0,63,136,.18);
}

.invoice-expand-head .mini-btn:hover,
.document-open-btn:hover,
.modal-actions .mini-btn:hover {
    background: linear-gradient(135deg, var(--cartera-blue-2), var(--cartera-orange));
}

.status-pill,
.aging-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pill.ok,
.aging-pill.ok {
    background: #d9f7e8;
    color: #006b37;
}

.status-pill.alerta,
.aging-pill.alerta {
    background: #fff1a8;
    color: #735100;
}

.status-pill.critico,
.aging-pill.critico {
    background: #ffe0de;
    color: #a40000;
}

.status-pill.info,
.aging-pill.info {
    background: #e8f3ff;
    color: var(--cartera-blue);
}

.cartera-document-row small {
    display: block;
    margin-top: 3px;
    color: var(--cartera-muted);
    font-size: 10px;
}

.cartera-document-row.ok td { background: #f5fff9; }
.cartera-document-row.alerta td { background: #fffdf1; }
.cartera-document-row.critico td { background: #fff7f7; }
.cartera-document-row.info td { background: #f6fbff; }

.q-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2,12,25,.66);
    backdrop-filter: blur(5px);
}

.cartera-modal-card {
    position: relative;
    width: min(1480px, 97vw);
    max-height: 92vh;
    overflow: auto;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 38px 120px rgba(0,0,0,.40);
    outline: none;
    animation: carteraPop .22s ease both;
}

.cartera-modal-card > h2 {
    margin: 0 60px 18px 0;
    color: var(--cartera-blue);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1;
    letter-spacing: -.6px;
    text-transform: uppercase;
}

.modal-x {
    position: sticky;
    float: right;
    top: 0;
    z-index: 20;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cartera-orange), var(--cartera-orange-2));
    color: #251600;
    font-size: 27px;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(255,131,0,.28);
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.modal-actions .mini-btn.ghost {
    background: #eef6ff;
    color: var(--cartera-blue);
    box-shadow: none;
}

.modal-actions > span {
    margin-left: auto;
    color: var(--cartera-muted);
    font-size: 12px;
    font-weight: 750;
}

.cxc-modal-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.cxc-modal-summary article {
    padding: 12px;
    border: 1px solid var(--cartera-line);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.cxc-modal-summary span {
    display: block;
    color: var(--cartera-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cxc-modal-summary b {
    display: block;
    margin-top: 7px;
    color: var(--cartera-blue);
    font-size: 18px;
}

.modal-chart-controls,
.modal-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--cartera-line);
    border-radius: 16px;
    background: #f5f9fd;
}

.modal-filterbar label:first-child {
    flex: 1 1 320px;
}

.modal-filterbar input {
    width: 100%;
}

.modal-visible-count {
    margin-left: auto;
    padding: 10px 12px;
    border-radius: 999px;
    background: #e8f3ff;
    color: var(--cartera-blue);
    font-size: 11px;
    font-weight: 900;
}

.modal-document-section {
    margin-top: 14px;
}

.modal-document-section > h3,
.modal-support-detail summary {
    margin: 0;
    color: var(--cartera-blue);
    font-size: 14px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.modal-document-section > p {
    margin: 5px 0 12px;
    color: var(--cartera-muted);
}

.modal-support-detail {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--cartera-line);
    border-radius: 18px;
    background: #fbfdff;
}

.modal-support-detail summary {
    cursor: pointer;
}

.modal-support-detail[open] summary {
    margin-bottom: 12px;
}

.empty-state {
    padding: 28px !important;
    color: var(--cartera-muted);
    text-align: center !important;
    font-weight: 750;
}

.document-status-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 22px;
    color: #fff;
}

.document-status-banner.ok {
    background: linear-gradient(135deg, #006b37, var(--cartera-green));
}

.document-status-banner.alerta {
    background: linear-gradient(135deg, #8b6100, var(--cartera-orange));
}

.document-status-banner.critico {
    background: linear-gradient(135deg, #8f0f0f, var(--cartera-red));
}

.document-status-banner.info {
    background: linear-gradient(135deg, var(--cartera-navy), var(--cartera-blue-2));
}

.document-status-banner > div {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    background: rgba(255,255,255,.10);
}

.document-status-banner span,
.document-status-banner small {
    display: block;
    color: rgba(255,255,255,.84);
    font-size: 11px;
    font-weight: 750;
}

.document-status-banner strong {
    display: block;
    margin: 5px 0;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1;
}

.document-detail-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.document-detail-card {
    padding: 16px;
    border: 1px solid var(--cartera-line);
    border-radius: 20px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 12px 30px rgba(0,63,136,.07);
}

.document-card-title {
    display: block;
    margin-bottom: 10px;
    color: var(--cartera-orange);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.document-detail-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 0;
}

.document-detail-card dl > div {
    min-width: 0;
    padding: 9px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #edf2f7;
}

.document-detail-card dl > div.wide {
    grid-column: 1 / -1;
}

.document-detail-card dt {
    color: var(--cartera-muted);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.document-detail-card dd {
    margin: 4px 0 0;
    color: var(--cartera-ink);
    font-weight: 800;
}

.break-value {
    overflow-wrap: anywhere;
}

.document-financial-section {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.4fr);
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--cartera-line);
    border-radius: 22px;
    background: linear-gradient(135deg, #f7fbff, #fff8ee);
}

.document-financial-copy > span {
    color: var(--cartera-orange);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.document-financial-copy h3 {
    margin: 8px 0;
    color: var(--cartera-blue);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
}

.document-financial-copy p {
    color: var(--cartera-muted);
    font-weight: 650;
}

.document-progress {
    overflow: hidden;
    height: 12px;
    border-radius: 999px;
    background: #dbe8f4;
}

.document-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cartera-green), var(--cartera-blue-2));
}

.document-financial-copy > small {
    display: block;
    margin-top: 6px;
    color: var(--cartera-blue);
    font-weight: 850;
}

.document-financial-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.document-financial-values article {
    padding: 13px;
    border: 1px solid var(--cartera-line);
    border-left: 6px solid var(--cartera-blue-2);
    border-radius: 16px;
    background: #fff;
}

.document-financial-values article.ok { border-left-color: var(--cartera-green); }
.document-financial-values article.alerta { border-left-color: var(--cartera-yellow); }
.document-financial-values article.critico { border-left-color: var(--cartera-red); }
.document-financial-values article.info { border-left-color: var(--cartera-blue-2); }

.document-financial-values span,
.document-financial-values small {
    display: block;
    color: var(--cartera-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.document-financial-values strong {
    display: block;
    margin: 6px 0;
    color: var(--cartera-blue);
    font-size: 20px;
}

.document-chart-wrap {
    grid-column: 1 / -1;
}

.cartera-chart-tooltip {
    position: fixed;
    z-index: 2000;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;
    background: rgba(6,27,57,.95);
    color: #fff;
    box-shadow: 0 14px 38px rgba(0,0,0,.28);
    pointer-events: none;
}

.cartera-chart-tooltip strong,
.cartera-chart-tooltip span {
    display: block;
}

.cartera-chart-tooltip strong {
    color: #ffe1b8;
    font-size: 11px;
    text-transform: uppercase;
}

.cartera-chart-tooltip span {
    margin-top: 4px;
    font-weight: 900;
}

.ns-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 3000;
    max-width: min(420px, calc(100vw - 44px));
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--cartera-navy);
    color: #fff;
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.ns-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.cartera-page button:focus-visible,
.cartera-page a:focus-visible,
.cartera-page input:focus-visible,
.cartera-page select:focus-visible,
.cartera-modal-card button:focus-visible,
.cartera-modal-card input:focus-visible,
.cartera-modal-card select:focus-visible {
    outline: 3px solid rgba(255,131,0,.45);
    outline-offset: 2px;
}

@media (max-width: 1450px) {
    .cartera-kpis {
        grid-template-columns: repeat(3, 1fr);
    }

    .document-detail-layout {
        grid-template-columns: 1fr 1fr;
    }

    .document-detail-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1180px) {
    .cartera-hero {
        flex-direction: column;
    }

    .cartera-hero-side {
        grid-template-columns: 1fr 108px;
        min-width: 0;
    }

    .cartera-aging-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .cxc-modal-summary {
        grid-template-columns: repeat(3, 1fr);
    }

    .document-financial-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .cartera-page {
        padding: 12px;
    }

    .cartera-kpis,
    .cartera-aging-cards {
        grid-template-columns: 1fr 1fr;
    }

    .cartera-section-head,
    .cartera-page .section-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .cartera-hero-side {
        grid-template-columns: 1fr;
    }

    .cartera-hero-side img {
        display: none;
    }

    .cartera-filters label,
    .cartera-filters select,
    .cartera-filters input,
    .cartera-filters .cartera-client-filter select {
        width: 100%;
        max-width: none;
    }

    .cartera-filters label {
        flex: 1 1 220px;
    }

    .weekly-table-scroll {
        display: none;
    }

    .weekly-mobile-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
    }

    .weekly-mobile-card {
        padding: 14px;
        border: 1px solid var(--cartera-line);
        border-left: 7px solid var(--cartera-blue-2);
        border-radius: 18px;
        background: #fff;
        text-align: left;
        box-shadow: 0 12px 30px rgba(0,63,136,.08);
    }

    .weekly-mobile-card span,
    .weekly-mobile-card small,
    .weekly-mobile-card em {
        display: block;
    }

    .weekly-mobile-card span {
        color: var(--cartera-blue);
        font-weight: 950;
    }

    .weekly-mobile-card b,
    .weekly-mobile-card small,
    .weekly-mobile-card em {
        margin-top: 5px;
        color: var(--cartera-muted);
        font-size: 11px;
        font-style: normal;
    }

    .weekly-mobile-card strong {
        display: block;
        margin-top: 3px;
        color: var(--cartera-blue);
    }

    .document-detail-layout {
        grid-template-columns: 1fr;
    }

    .document-detail-card:last-child {
        grid-column: auto;
    }

    .document-status-banner {
        grid-template-columns: 1fr;
    }

    .cxc-modal-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .cartera-modal-card {
        padding: 16px;
    }

    .modal-actions > span {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 560px) {
    .cartera-kpis,
    .cartera-aging-cards,
    .weekly-mobile-cards,
    .cxc-modal-summary,
    .document-financial-values {
        grid-template-columns: 1fr;
    }

    .cartera-hero {
        padding: 20px;
        border-radius: 24px;
    }

    .cartera-hero h1 {
        font-size: 34px;
    }

    .cartera-filters {
        padding: 12px;
    }

    .cartera-modal-card {
        width: 100%;
        max-height: 96vh;
        border-radius: 20px;
    }

    .modal-filterbar,
    .modal-chart-controls,
    .invoice-expand-head {
        align-items: stretch;
        flex-direction: column;
    }

    .modal-filterbar label,
    .modal-chart-controls label,
    .invoice-expand-head label,
    .modal-filterbar select,
    .modal-chart-controls select,
    .invoice-expand-head select {
        width: 100%;
    }

    .document-detail-card dl {
        grid-template-columns: 1fr;
    }

    .document-detail-card dl > div.wide {
        grid-column: auto;
    }
}