/* ==========================================================================
   CreditFlow · Estilos base
   Bootstrap 5.3 + variables propias (prefijo --cf-). Para cambiar la marca,
   basta con ajustar las variables de :root.
   ========================================================================== */

:root {
    --cf-primary: #1d4ed8;
    --cf-primary-hover: #1e40af;
    --cf-primary-rgb: 29, 78, 216;

    --cf-sidebar-bg: #0f1b2d;
    --cf-menu-bg-arriba: #1d4ed8;
    --cf-menu-bg-abajo: #1e3a8a;
    --cf-sidebar-text: #a9b6c8;
    --cf-sidebar-text-hover: #ffffff;
    --cf-sidebar-active-bg: rgba(255, 255, 255, .08);
    --cf-sidebar-section: #64748b;
    --cf-sidebar-width: 260px;

    --cf-body-bg: #f4f6fa;
    --cf-surface: #ffffff;
    --cf-border: #e3e8ef;
    --cf-text: #1e293b;
    --cf-text-muted: #64748b;

    --cf-topbar-height: 64px;
    --cf-radius: .75rem;

    --bs-primary: var(--cf-primary);
    --bs-primary-rgb: var(--cf-primary-rgb);
    --bs-link-color: var(--cf-primary);
    --bs-link-color-rgb: var(--cf-primary-rgb);
    --bs-link-hover-color: var(--cf-primary-hover);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--cf-text);
    --bs-body-bg: var(--cf-body-bg);
    --bs-border-color: var(--cf-border);
    --bs-secondary-color: var(--cf-text-muted);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --cf-primary: #3b82f6;
        --cf-primary-hover: #60a5fa;
        --cf-primary-rgb: 59, 130, 246;

        --cf-sidebar-bg: #0b1220;
        --cf-menu-bg-arriba: #1e40af;
        --cf-menu-bg-abajo: #172554;
        --cf-body-bg: #0f172a;
        --cf-surface: #162033;
        --cf-border: #263247;
        --cf-text: #e2e8f0;
        --cf-text-muted: #94a3b8;

        --bs-body-bg: var(--cf-body-bg);
        --bs-body-color: var(--cf-text);
        --bs-emphasis-color: #f8fafc;
        --bs-secondary-bg: #1c2840;
        --bs-tertiary-bg: #1a2539;
        --bs-card-bg: var(--cf-surface);
    }

    .form-control, .form-select, .input-group-text {
        background-color: #0f172a;
        border-color: var(--cf-border);
        color: var(--cf-text);
    }

    .dropdown-menu {
        --bs-dropdown-bg: var(--cf-surface);
        --bs-dropdown-color: var(--cf-text);
        --bs-dropdown-link-color: var(--cf-text);
        --bs-dropdown-link-hover-bg: #1f2b42;
        --bs-dropdown-border-color: var(--cf-border);
    }

    .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(100%) brightness(200%); }
}

html, body { min-height: 100%; }
body { background-color: var(--cf-body-bg); color: var(--cf-text); }

.btn-primary {
    --bs-btn-bg: var(--cf-primary);
    --bs-btn-border-color: var(--cf-primary);
    --bs-btn-hover-bg: var(--cf-primary-hover);
    --bs-btn-hover-border-color: var(--cf-primary-hover);
    --bs-btn-active-bg: var(--cf-primary-hover);
    --bs-btn-active-border-color: var(--cf-primary-hover);
    --bs-btn-disabled-bg: var(--cf-primary);
    --bs-btn-disabled-border-color: var(--cf-primary);
}

.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible {
    border-color: rgba(var(--cf-primary-rgb), .6);
    box-shadow: 0 0 0 .2rem rgba(var(--cf-primary-rgb), .2);
}

.form-check-input:checked { background-color: var(--cf-primary); border-color: var(--cf-primary); }

.card {
    --bs-card-bg: var(--cf-surface);
    --bs-card-border-color: var(--cf-border);
    --bs-card-border-radius: var(--cf-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.cf-skip {
    position: absolute; z-index: 2000; top: .5rem; left: .5rem;
    padding: .5rem 1rem; background: var(--cf-surface); border-radius: .5rem;
}

/* ---------- Marca ---------- */
.cf-brand {
    display: inline-flex; align-items: center; gap: .625rem;
    text-decoration: none; color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: .01em;
}
.cf-brand-mark {
    display: inline-grid; place-items: center;
    width: 2.25rem; height: 2.25rem; border-radius: .6rem;
    background: var(--cf-primary); color: #fff; font-size: 1.1rem;
}
.cf-brand-lg { font-size: 1.5rem; }
.cf-brand-lg .cf-brand-mark { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; }

/* ---------- Barra lateral ---------- */
/* El menú lleva el azul principal de la marca (de #1d4ed8 a un azul más oscuro hacia abajo) con
   letras blancas. --cf-sidebar-bg sigue siendo el fondo oscuro de la pantalla de inicio de sesión. */
.cf-sidebar {
    --cf-sidebar-text: #e0e7ff;
    --cf-sidebar-text-hover: #ffffff;
    --cf-sidebar-active-bg: rgba(255, 255, 255, .14);
    --cf-sidebar-section: rgba(255, 255, 255, .72);
    background: linear-gradient(180deg, var(--cf-menu-bg-arriba) 0%, var(--cf-menu-bg-abajo) 100%);
    color: var(--cf-sidebar-text);
    --bs-offcanvas-width: var(--cf-sidebar-width);
    --bs-offcanvas-bg: var(--cf-menu-bg-arriba);
}
.cf-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--cf-topbar-height); padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.cf-sidebar .cf-brand-mark { background: #fff; color: var(--cf-menu-bg-arriba); }
.cf-sidebar-body { padding: 1rem .75rem; overflow-y: auto; }

.cf-nav-section {
    margin: 1rem .75rem .375rem;
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: var(--cf-sidebar-section);
}
.cf-nav-section:first-child { margin-top: 0; }

/* Sección que se abre y se cierra (Views/Shared/Components/Menu): botón con flecha. */
.cf-nav-toggle {
    display: flex; align-items: center; justify-content: space-between; width: calc(100% - 1.5rem);
    margin: .75rem .75rem .25rem; padding: .35rem 0; border: 0; background: none; text-align: left;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: var(--cf-sidebar-section);
}
.cf-nav-toggle:hover, .cf-nav-toggle:focus-visible { color: #fff; }
.cf-nav-toggle .bi { transition: transform .2s; }
.cf-nav-toggle[aria-expanded="true"] .bi { transform: rotate(90deg); }

.cf-nav .nav-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem; margin-bottom: 2px; border-radius: .5rem;
    color: var(--cf-sidebar-text); font-weight: 500;
    transition: background-color .15s, color .15s;
}
.cf-nav .nav-link .bi { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.cf-nav .nav-link:hover { color: var(--cf-sidebar-text-hover); background: var(--cf-sidebar-active-bg); }
.cf-nav .nav-link.active {
    color: #fff; background: rgba(255, 255, 255, .24); font-weight: 600;
}
.cf-nav .nav-link.disabled { color: var(--cf-sidebar-text); opacity: .55; }
.cf-badge-pronto {
    background: rgba(255, 255, 255, .1); color: var(--cf-sidebar-text);
    font-weight: 500; font-size: .65rem;
}

@media (min-width: 992px) {
    .cf-sidebar {
        position: fixed; inset: 0 auto 0 0;
        width: var(--cf-sidebar-width);
        display: flex; flex-direction: column;
        z-index: 1030;
    }
    /* Bootstrap (.offcanvas-lg .offcanvas-body) quita el scroll en pantallas grandes: el menú
       ocupa el alto que queda bajo el encabezado y se desplaza si no cabe. */
    .cf-sidebar .cf-sidebar-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .cf-main { margin-left: var(--cf-sidebar-width); }
}

/* ---------- Contenido principal ---------- */
.cf-main { min-height: 100vh; display: flex; flex-direction: column; }

.cf-topbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: .75rem;
    height: var(--cf-topbar-height); padding: 0 1rem;
    background: var(--cf-surface);
    border-bottom: 1px solid var(--cf-border);
}
@media (min-width: 768px) { .cf-topbar { padding: 0 1.75rem; } }

.cf-page-title {
    margin: 0; font-size: 1.125rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cf-icon-btn { font-size: 1.5rem; line-height: 1; padding: .25rem .5rem; color: var(--cf-text); }

.cf-user-btn { display: inline-flex; align-items: center; gap: .5rem; color: var(--cf-text); border: 0; }
.cf-avatar {
    display: inline-grid; place-items: center;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: rgba(var(--cf-primary-rgb), .12); color: var(--cf-primary);
    font-weight: 600; font-size: .85rem;
}

.cf-content { flex: 1; padding: 1.25rem 1rem; }
@media (min-width: 768px) { .cf-content { padding: 1.75rem; } }

.cf-footer {
    padding: 1rem 1.75rem; font-size: .8rem; color: var(--cf-text-muted);
    border-top: 1px solid var(--cf-border);
}

/* ---------- Componentes ---------- */
.cf-kpi-label { font-size: .8rem; font-weight: 500; color: var(--cf-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.cf-kpi-value { font-size: 1.75rem; font-weight: 700; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.cf-kpi-icon {
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: .65rem; font-size: 1.25rem;
}

.cf-card-header {
    background: transparent; font-weight: 600;
    padding: .875rem 1.25rem; border-bottom-color: var(--cf-border);
}
.cf-table { --bs-table-bg: transparent; }
.cf-table > thead th {
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--cf-text-muted); border-bottom-color: var(--cf-border);
}
.cf-table > :not(caption) > * > * { padding: .8rem 1.25rem; border-bottom-color: var(--cf-border); }
.cf-table > tbody > tr:last-child > * { border-bottom: 0; }
.cf-item-movil { background: transparent; border-color: var(--cf-border); padding: .9rem 1.25rem; }
.cf-ventana-icono { color: var(--cf-primary); margin-right: .6rem; font-size: 1.05rem; }
.cf-contador { color: var(--cf-text-muted); font-weight: 500; background: var(--cf-surface) !important; }

.cf-badge-rol {
    font-weight: 500; font-size: .78rem; padding: .4em .7em;
    background: rgba(var(--cf-primary-rgb), .1); color: var(--cf-primary);
}
.cf-badge-sistema { background: rgba(100, 116, 139, .14); color: var(--cf-text); }
.cf-badge-inactivo { background: transparent; color: var(--cf-text-muted); border: 1px dashed var(--cf-border); }

.cf-estado { font-weight: 500; font-size: .78rem; padding: .4em .7em; }
.cf-estado .bi { font-size: .55rem; vertical-align: .1em; }
.cf-estado-activo { background: rgba(22, 163, 74, .12); color: #15803d; }
.cf-estado-inactivo { background: rgba(100, 116, 139, .14); color: var(--cf-text-muted); }
@media (prefers-color-scheme: dark) { .cf-estado-activo { color: #4ade80; } }
.cf-fila-inactiva > td:not(:last-child), .cf-fila-inactiva .fw-medium { color: var(--cf-text-muted); }

.cf-grupo-ventanas { border: 1px solid var(--cf-border); border-radius: .5rem; overflow: hidden; }
.cf-grupo-titulo { margin: 0; padding: .55rem .75rem .55rem 2.25rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--cf-border); }
.cf-grupo-items { padding: .5rem .75rem .25rem 2.25rem; }
.cf-grupo-items .form-check { margin-bottom: .4rem; }

.modal-content { --bs-modal-bg: var(--cf-surface); --bs-modal-border-color: var(--cf-border); }
/* Modales con <form> entre modal-content y modal-body/footer: mantiene el scroll
   dentro del cuerpo y el pie (botones) siempre visible. */
.modal-dialog-scrollable .modal-content > form {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.cf-seccion-restablecer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--cf-border); }
.cf-busqueda { max-width: 32rem; }
.cf-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cf-form-seccion {
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--cf-text-muted); margin: 0 0 .75rem;
}

.cf-empty { text-align: center; max-width: 32rem; margin: 2rem auto; }
.cf-empty-icon { display: block; font-size: 3rem; color: var(--cf-text-muted); margin-bottom: .75rem; }

/* ---------- Pantalla de acceso ---------- */
.cf-auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .cf-auth-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.cf-auth-brand {
    flex-direction: column; justify-content: space-between;
    padding: 3rem; color: #cbd5e1;
    background:
        radial-gradient(circle at 20% 15%, rgba(var(--cf-primary-rgb), .35), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(14, 165, 233, .18), transparent 40%),
        var(--cf-sidebar-bg);
}
.cf-auth-lead { font-size: 1.75rem; font-weight: 600; color: #fff; line-height: 1.3; max-width: 22rem; }
.cf-auth-features { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.cf-auth-features li { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.cf-auth-features .bi {
    display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: .5rem;
    background: rgba(255, 255, 255, .08); color: #fff;
}
.cf-auth-foot { color: #64748b; }

.cf-auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.cf-auth-card { width: 100%; max-width: 24rem; }

/* Depósitos y tasas de cambio */
.cf-estado-anulado { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.cf-estado-futura { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
@media (prefers-color-scheme: dark) { .cf-estado-anulado { color: #f87171; } .cf-estado-futura { color: #93c5fd; } }
.cf-estado-mora { background: rgba(217, 119, 6, .14); color: #b45309; }
.cf-estado-pagado { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
@media (prefers-color-scheme: dark) { .cf-estado-mora { color: #fbbf24; } .cf-estado-pagado { color: #93c5fd; } }
.cf-socio-resultados { max-height: 14rem; overflow-y: auto; }
.cf-resultados-flotantes { position: absolute; z-index: 5; min-width: 18rem; }
.cf-saldos-socio { background: var(--bs-tertiary-bg); border: 1px solid var(--cf-border); border-radius: .5rem; padding: .6rem .75rem; }

/* Formulario en página (no en modal), ej. Empresa: ancho cómodo de lectura. */
.cf-form-pagina {
    max-width: 46rem;
}

/* Vista previa del plan de cuotas en la modal Nuevo préstamo. */
.cf-plan-previa { max-height: 16rem; overflow-y: auto; }

/* Dashboard: gráfico de barras colocado vs. recuperado (alturas calculadas en Views/Home/Index). */
.cf-grafico { display: flex; align-items: flex-end; gap: .35rem; height: 190px; overflow-x: auto; padding-bottom: .25rem; }
.cf-grafico-periodo { flex: 1 0 1.6rem; display: flex; flex-direction: column; align-items: center; height: 100%; }
.cf-barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--cf-border); }
.cf-barra { width: 40%; max-width: 14px; min-height: 1px; border-radius: 2px 2px 0 0; }
.cf-barra-colocado { background: var(--bs-primary); }
.cf-barra-recuperado { background: var(--bs-success); }
.cf-grafico-etiqueta { font-size: .68rem; color: var(--cf-text-muted); white-space: nowrap; margin-top: .2rem; }
.cf-leyenda { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .3rem; vertical-align: -.05rem; }

/* Reportes: al imprimir solo sale el contenido del reporte, en hoja carta. */
.cf-reporte-encabezado { border-bottom: 1px solid var(--cf-border); padding-bottom: .5rem; }
.cf-tabla-reporte { font-size: .82rem; }
.cf-tabla-reporte td, .cf-tabla-reporte th { white-space: nowrap; }
.cf-fila-subtotal td { font-weight: 600; background: var(--bs-tertiary-bg); }
@media print {
    @page { size: letter; margin: 12mm; }
    .cf-sidebar, .cf-topbar, .cf-footer, .cf-no-imprimir, #cfAvisos { display: none !important; }
    .cf-main, .cf-content { margin: 0 !important; padding: 0 !important; }
    .card { border: 0 !important; box-shadow: none !important; }
    .table-responsive { overflow: visible !important; }
    .cf-tabla-reporte { font-size: 9pt; }
}