/* Fase 9.3 — CSS verbatim de los bloques de estilo de Pages/CCC/CuentaCobrarClienteCCCModalPage.razor. Igual que hoy, es global mientras el componente está en pantalla:
   se enlaza con <link> donde estaba el bloque. Cambios: @@ → @ y capas D-51. */
/* ── Overlay y contenedor ─────────────────────────────────────────── */
.ccc-modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: rgba(12, 22, 48, .46);
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
font-family: inherit;
}

.ccc-modal .cxc-modal {
background: #fff;
border-radius: 14px;
max-width: 1480px;
width: 96%;
max-height: calc(100vh - 36px);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 60px rgba(10, 20, 50, .30);
}

.ccc-modal .cxc-modal-head {
background: linear-gradient(135deg, #1a4fba 0%, #0f3494 100%);
color: #fff;
padding: 12px 18px;
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}

.ccc-modal .cxc-modal-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

    .ccc-modal .cxc-modal-head h3 .fas {
        color: #f0b429;
    }

.ccc-modal .cxc-modal-body {
padding: 16px 18px;
overflow: auto;
flex: 1;
background: #f7f9fd;
}

.ccc-modal .cxc-modal-foot {
padding: 10px 18px;
border-top: 1px solid #e5e7eb;
background: #fff;
display: flex;
justify-content: flex-end;
gap: 8px;
flex-shrink: 0;
}

.ccc-modal .close-x {
background: rgba(255,255,255,.14);
border: none;
color: #fff;
width: 28px;
height: 28px;
border-radius: 6px;
cursor: pointer;
}

/* ── KPIs ─────────────────────────────────────────────────────────── */
.ccc-modal .kpi-row {
display: grid;
gap: 10px;
}

.ccc-modal .kpi-card {
display: flex;
flex-direction: column;
gap: 2px;
background: #fff;
border: 1px solid #e2e8f2;
border-left: 3px solid #1a4fba;
border-radius: 8px;
padding: 10px 12px;
}

.ccc-modal .kpi-card .lbl {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5a6580;
}

.ccc-modal .kpi-card .val {
    font-size: 16px;
    font-weight: 700;
    color: #1b2436;
    line-height: 1.25;
}

.ccc-modal .kpi-card .sub {
    font-size: 10.5px;
    color: #8a94a8;
    margin-top: 2px;
}

.ccc-modal .kpi-primary { border-left-color: #1a4fba; }
.ccc-modal .kpi-success { border-left-color: #15803d; }
.ccc-modal .kpi-danger  { border-left-color: #b42318; background: #fdf4f3; }
.ccc-modal .kpi-warning { border-left-color: #a15c07; background: #fdf8ee; }
.ccc-modal .kpi-info    { border-left-color: #2d6ae0; }

/* ── Pestañas ─────────────────────────────────────────────────────── */
.ccc-modal .cxc-tabs {
background: #fff;
border: 1px solid #e2e8f2;
border-radius: 10px;
overflow: hidden;
}

.ccc-modal .tab-nav {
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 8px 10px 0;
border-bottom: 1px solid #e2e8f2;
background: #fbfcfe;
}

.ccc-modal .tab-nav button {
    border: none;
    background: none;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: #5a6580;
    cursor: pointer;
    border-radius: 7px 7px 0 0;
    border-bottom: 2px solid transparent;
    font-family: inherit;
}

    .ccc-modal .tab-nav button:hover {
        background: #eef3fb;
    }

    .ccc-modal .tab-nav button.active {
        color: #12377f;
        background: #eaf0fb;
        border-bottom-color: #1a4fba;
    }

/* ── Tarjetas de grilla ───────────────────────────────────────────── */
.ccc-modal .grid-card,
.ccc-modal .chart-card {
background: #fff;
border: 1px solid #e2e8f2;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 12px;
}

.ccc-modal .grid-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}

.ccc-modal .search-box {
position: relative;
display: flex;
align-items: center;
flex: 1;
min-width: 200px;
max-width: 340px;
}

.ccc-modal .search-box i {
    position: absolute;
    left: 10px;
    color: #98a1b3;
    font-size: 12px;
    pointer-events: none;
}

.ccc-modal .search-box .form-control {
    padding-left: 30px;
}

.ccc-modal .form-control {
width: 100%;
font-size: 13px;
padding: 6px 10px;
border: 1px solid #d5dded;
border-radius: 5px;
background: #fff;
color: #1b2436;
font-family: inherit;
}

.ccc-modal .form-control:focus {
    outline: none;
    border-color: #2d6ae0;
    box-shadow: 0 0 0 3px rgba(45,106,224,.14);
}

.ccc-modal .form-label {
font-size: 11.5px;
font-weight: 600;
color: #4b5563;
margin-bottom: 4px;
display: block;
}

.ccc-modal .grid-scroll {
overflow-x: auto;
max-height: 420px;
overflow-y: auto;
}

/* ── Tablas ───────────────────────────────────────────────────────── */
.ccc-modal .cxc-table,
.ccc-modal .mini-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}

.ccc-modal .cxc-table thead th,
.ccc-modal .mini-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eaf0fb;
    color: #12377f;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    padding: 7px 9px;
    border-top: 1px solid #c9d8f2;
    border-bottom: 1px solid #c9d8f2;
    white-space: nowrap;
}

.ccc-modal .cxc-table tbody td,
.ccc-modal .mini-table tbody td {
    padding: 7px 9px;
    border-bottom: 1px solid #eef1f7;
    color: #1b2436;
    vertical-align: middle;
}

.ccc-modal .cxc-table tbody tr:hover > td {
    background: #f7f9fd;
}

.ccc-modal .mini-table {
font-size: 11.5px;
background: #fbfcfe;
}

.ccc-modal .num-col,
.ccc-modal .num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}

.ccc-modal .center-col,
.ccc-modal .chk-cell {
text-align: center;
}

.ccc-modal .group-row > td {
background: #f0f4fb;
font-weight: 600;
}

.ccc-modal .selectable {
cursor: pointer;
}

.ccc-modal .row-toggle {
border: none;
background: none;
color: #5a6580;
cursor: pointer;
padding: 2px 5px;
transition: transform .15s ease;
}

.ccc-modal .row-toggle.expanded {
    transform: rotate(90deg);
    color: #1a4fba;
}

.ccc-modal .detail-inner {
padding: 10px 12px;
background: #fbfcfe;
border-left: 3px solid #c9d8f2;
}

.ccc-modal .table-sm td,
.ccc-modal .table-sm th {
padding: 5px 8px;
}

/* ── Badges ───────────────────────────────────────────────────────── */
.ccc-modal .badge-cxc {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .03em;
background: #f0f4fb;
color: #12377f;
border: 1px solid #dbe5f7;
white-space: nowrap;
}

.ccc-modal .badge-danger {
background: #fdf4f3;
color: #b42318;
border-color: #f0c9c4;
}

.ccc-modal .badge-warning {
background: #fdf8ee;
color: #a15c07;
border-color: #eddbb4;
}

.ccc-modal .badge-neutral {
background: #f3f4f6;
color: #4b5563;
border-color: #e5e7eb;
}

/* ── Gráfico de barras ────────────────────────────────────────────── */
.ccc-modal .chart-title {
font-size: 12.5px;
font-weight: 700;
color: #1b2436;
margin-bottom: 12px;
}

.ccc-modal .bars {
display: flex;
align-items: flex-end;
gap: 24px;
height: 140px;
padding: 0 8px;
border-bottom: 1px solid #e2e8f2;
}

.ccc-modal .bar-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1;
}

.ccc-modal .bar-set {
display: flex;
align-items: flex-end;
height: 118px;
width: 100%;
justify-content: center;
}

.ccc-modal .bar {
width: 38px;
border-radius: 4px 4px 0 0;
min-height: 4px;
}

.ccc-modal .glabel {
font-size: 10.5px;
color: #5a6580;
text-align: center;
}

.ccc-modal .chart-legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 10px;
font-size: 11px;
color: #5a6580;
}

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

.ccc-modal .dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}

/* ── Estados: vacío, carga, error ─────────────────────────────────── */
.ccc-modal .empty-state {
padding: 26px 16px;
text-align: center;
color: #8a94a8;
font-size: 12.5px;
}

.ccc-modal .loading-overlay {
position: absolute;
inset: 0;
background: rgba(255,255,255,.88);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 5;
font-size: 13px;
color: #12377f;
font-weight: 600;
}

.ccc-modal .loading-spinner,
.ccc-modal .spin-ic {
width: 16px;
height: 16px;
border: 2px solid #dbe5f7;
border-top-color: #1a4fba;
border-radius: 50%;
display: inline-block;
animation: cccSpin .8s linear infinite;
}

.ccc-modal .loading-spinner {
width: 30px;
height: 30px;
border-width: 3px;
}

@keyframes cccSpin {
to {
    transform: rotate(360deg);
}
}

.ccc-modal .err-box,
.ccc-modal .sim-warn-box {
padding: 9px 12px;
border-radius: 6px;
font-size: 12.5px;
margin-bottom: 10px;
background: #fdf4f3;
border: 1px solid #f0c9c4;
color: #b42318;
}

.ccc-modal .sim-warn-box {
background: #fdf8ee;
border-color: #eddbb4;
color: #a15c07;
}

.ccc-modal .sim-result {
background: #f5f8fd;
border: 1px solid #dbe5f7;
border-radius: 8px;
padding: 12px;
margin-top: 10px;
}

/* ── Reversión ────────────────────────────────────────────────────── */
.ccc-modal .rev-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 16px;
margin-bottom: 12px;
}

.ccc-modal .rev-field {
display: flex;
flex-direction: column;
gap: 1px;
}

.ccc-modal .rev-field .l {
    font-size: 10.5px;
    color: #5a6580;
    font-weight: 600;
}

.ccc-modal .rev-field .v {
    font-size: 13px;
    color: #1b2436;
}

.ccc-modal .rev-historial {
max-height: 300px;
overflow: auto;
}

/* ── Utilidades Bootstrap mínimas, por si el host no las trae ─────── */
.ccc-modal .text-muted  { color: #8a94a8; }
.ccc-modal .text-danger { color: #b42318; }
.ccc-modal .small       { font-size: 11.5px; }
.ccc-modal .shadow-sm   { box-shadow: 0 1px 3px rgba(20,30,60,.07); }

.ccc-modal .form-check {
display: flex;
align-items: center;
gap: 6px;
}

.ccc-modal .form-check-input {
width: 15px;
height: 15px;
accent-color: #1a4fba;
margin: 0;
}

.ccc-modal .form-check-label {
font-size: 12.5px;
color: #374151;
}

.ccc-modal .btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
height: 31px;
font-size: 13px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: inherit;
line-height: 1;
color: #fff;
white-space: nowrap;
}

.ccc-modal .btn:hover:not(:disabled) { filter: brightness(1.08); }
.ccc-modal .btn:disabled             { opacity: .55; cursor: default; }

.ccc-modal .btn-sm           { height: 28px; font-size: 12px; padding: 4px 10px; }
.ccc-modal .btn-success      { background: #16a34a; }
.ccc-modal .btn-danger       { background: #dc2626; }
.ccc-modal .btn-warning      { background: #d97706; }
.ccc-modal .btn-outline-dark { background: #374151; }
.ccc-modal .btn-light        { background: #fff; color: #374151; border: 1px solid #d5dded; }

/* ══════════════════════════════════════════════════════════════════════
   Reglas originales del componente — sin cambios
   ══════════════════════════════════════════════════════════════════════ */
.ccc-modal .cxc-modal{ max-width:1480px; width:96%; }
.ccc-modal-body{ max-height:76vh; overflow:auto; }
.ccc-kpi-row{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1100px){ .ccc-kpi-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .ccc-kpi-row{ grid-template-columns:1fr; } }
.action-col{ display:flex; flex-direction:column; gap:4px; align-items:stretch; min-width:96px; }



/* Botón de amortizar: va suelto en la celda, sin la clase .btn */
.ccc-modal .btn-amortizar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 64px;
    height: 27px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #cfe3d6;
    background: #f1f9f3;
    color: #15803d;
}

    .ccc-modal .btn-amortizar:hover {
        background: #e3f3e8;
        border-color: #a9d4ba;
    }

    .ccc-modal .btn-amortizar:disabled {
        opacity: .5;
        cursor: default;
    }

/* Variantes outline que faltaban */
.ccc-modal .btn-outline-danger {
    background: #fff;
    color: #b42318;
    border: 1px solid #f0c9c4;
}

    .ccc-modal .btn-outline-danger:hover:not(:disabled) {
        background: #fdf4f3;
        filter: none;
    }

.ccc-modal .btn-outline-dark {
    background: #fff;
    color: #374151;
    border: 1px solid #d5dded;
}

    .ccc-modal .btn-outline-dark:hover:not(:disabled) {
        background: #f7f9fd;
        filter: none;
    }

.ccc-modal .btn-outline-primary {
    background: #fff;
    color: #12377f;
    border: 1px solid #c9d8f2;
}

    .ccc-modal .btn-outline-primary:hover:not(:disabled) {
        background: #f5f8fd;
        filter: none;
    }

/* [2026-10-15] Acciones del documento (Amortizar / Revertir): una al lado de la otra, iconos 31×31. Clases nuevas. */
.doc-acciones{ display:inline-flex; gap:6px; align-items:center; justify-content:center; }
.doc-ic{ width:31px; height:31px; border-radius:6px; border:none; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:13px; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); padding:0; }
.doc-ic:hover{ filter:brightness(1.08); }
.doc-ic-amort{ background:#16a34a; }
.doc-ic-rev{ background:#dc2626; }