/* =====================================================================
   ventana.css — Diseño moderno común de TODAS las pantallas
   (barra de título azul oscuro, tarjetas blancas, campos grises claros).
   Se carga después de estilos.css desde base.html.
   ===================================================================== */
/* =====================================================================
   VENTANA MODERNA (.vw) — diseño común de TODAS las pantallas
   Mismo estilo que "Información de Crédito" y "Crédito / Desembolso":
   barra de título azul oscuro con logo, fondo gris azulado, tarjetas
   blancas redondeadas, campos grises claros e íconos azules.
   ===================================================================== */
.vw { background: #eef2f7; border: 1px solid #d6dee8; border-radius: 10px; margin-bottom: 1rem; }
.vw-head { background: #13294b; color: #fff; padding: 10px 16px; display: flex; justify-content: space-between;
           align-items: center; flex-wrap: wrap; gap: 8px; border-radius: 9px 9px 0 0; }
.vw-logo { display: inline-grid; grid-template-columns: 11px 11px; gap: 2px; flex-shrink: 0; }
.vw-logo span { width: 11px; height: 11px; display: block; }
.vw-logo span:nth-child(1) { background: #e74c3c; } .vw-logo span:nth-child(2) { background: #2e86de; }
.vw-logo span:nth-child(3) { background: #27ae60; } .vw-logo span:nth-child(4) { background: #f1c40f; }
.vw-head-t { font-weight: 700; font-size: 1.05rem; letter-spacing: .3px; text-transform: uppercase; }
.vw-head-t .text-danger, .vw-head-t .text-primary, .vw-head-t .text-warning { color: inherit !important; }
.vw-head-u { font-size: .85rem; color: #dfe6ef; white-space: nowrap; } .vw-head-u b { color: #5fb0ff; }
.vw-chip { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: .3px; color: #fff; }
.vw-chip.gris { background: #5b6b80; } .vw-chip.azul { background: #1d7bf2; } .vw-chip.rojo { background: #dc3545; }
.vw-chip.verde { background: #198754; } .vw-chip.naranja { background: #f0a030; color: #1b2530; }
.vw-body { padding: 14px; }
.vw-body > *:last-child { margin-bottom: 0 !important; }

/* Barra de herramientas: descripción a la izquierda, botones a la derecha */
.vw-toolbar { background: #fff; border: 1px solid #e1e7ef; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
              display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.vw-toolbar .vw-sub { color: #34465e; font-size: .88rem; min-width: 0; flex: 1 1 280px; }
.vw-toolbar .vw-sub p { margin: 0 !important; }
.vw-toolbar .vw-sub p + p { margin-top: 4px !important; }
.vw-toolbar .vw-sub .text-muted { color: #5b6b80 !important; }
.vw-toolbar .vw-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vw-toolbar .vw-btns form { margin: 0; }
.vw-ident { display: flex; align-items: center; gap: 12px; }
.vw-ident-ico { width: 40px; height: 40px; border-radius: 10px; background: #1d6fe0; color: #fff; display: inline-flex;
                align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

/* Tarjetas: toda .card dentro de la ventana toma el aspecto de tarjeta blanca */
.vw-body .card, .vw-card { background: #fff; border: 1px solid #e1e7ef !important; border-radius: 10px; box-shadow: none; }
.vw-card { padding: 14px 16px; }
.vw-body .card-header { background: #fff; border-bottom: 1px solid #edf1f6; font-weight: 700; color: #1b2a41;
                        border-radius: 10px 10px 0 0 !important; padding: 10px 16px; }
.vw-body .card-footer { background: #fbfcfe; border-top: 1px solid #edf1f6; border-radius: 0 0 10px 10px !important; }
.vw-card-h, .vw-body .card h5.fw-bold, .vw-body .card h6.fw-bold {
    color: #1b2a41; }
.vw-card-h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem;
             border-bottom: 1px solid #edf1f6; padding-bottom: 10px; margin-bottom: 12px; }
.vw-ico { width: 34px; height: 34px; border-radius: 8px; background: #e8f0fb; color: #1d5fc4; display: inline-flex;
          align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
/* Tarjetas KPI (cifras) */
.vw-body .card-kpi .text-muted.small:has(+ .kpi-valor), .vw-body .card-kpi .small.text-muted:has(+ .kpi-valor) { color: #5b6b80 !important; font-weight: 600;
    text-transform: uppercase; font-size: .72rem; letter-spacing: .4px; }
.vw-body .card-kpi .kpi-valor { color: #13294b; font-variant-numeric: tabular-nums; }
.vw-body .card-kpi .kpi-valor.text-danger { color: #b3161f !important; }
.vw-body .card-kpi .kpi-valor.text-success { color: #157347 !important; }

/* Campos: gris claro, borde suave, esquinas redondeadas */
.vw-body .form-label, .vw-body label.small { font-size: .85rem; color: #34465e; font-weight: 500; margin-bottom: 4px; }
.vw-body .form-control, .vw-body .form-select, .vw-body .input-group-text {
    background-color: #f5f7fb; border: 1px solid #dfe5ee; border-radius: 6px; color: #1b2a41; font-size: .9rem; min-height: 34px; }
.vw-body .form-control:focus, .vw-body .form-select:focus { background-color: #fff; border-color: #86b3f0;
    box-shadow: 0 0 0 3px rgba(29,111,224,.15); }
.vw-body .form-control[readonly], .vw-body .form-control:disabled, .vw-body .form-select:disabled { background-color: #eef2f6; color: #3d4d63; }
.vw-body .input-group-text { color: #1d5fc4; background-color: #eef3fa; }
.vw-body .input-group > .form-control, .vw-body .input-group > .form-select { border-radius: 0; }
.vw-body .input-group > :first-child { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; }
.vw-body .input-group > :last-child { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; }
.vw-body .form-control-sm, .vw-body .form-select-sm { min-height: 30px; font-size: .85rem; }
.vw-body .form-check-input:checked { background-color: #1d6fe0; border-color: #1d6fe0; }
.vw-body .form-text { color: #6b7a90; font-size: .78rem; }

/* Tablas: encabezado gris claro con bordes finos, filas limpias */
.vw-body .table { --bs-table-bg: transparent; color: #1b2a41; font-size: .9rem; margin-bottom: 0; }
.vw-body .table > thead th, .vw-body .table > thead td { background: #f1f4f8; color: #1b2a41; font-weight: 700; font-size: .82rem;
    border-bottom: 1px solid #dfe5ee; border-top: 0; white-space: nowrap; padding-top: .55rem; padding-bottom: .55rem; }
.vw-body .table > tbody td { border-color: #edf1f6; vertical-align: middle; }
.vw-body .table > tfoot td, .vw-body .table > tfoot th { background: #f5f7fb; font-weight: 700; border-top: 1px solid #dfe5ee; }
.vw-body .table-hover > tbody > tr:hover > * { --bs-table-bg-state: #eef4fd; }
.vw-body .table a:not(.btn) { color: #1d5fc4; font-weight: 600; text-decoration: none; }
.vw-body .table a:not(.btn):hover { text-decoration: underline; }
.vw-body .card > .table:first-child > thead > tr:first-child > th:first-child,
.vw-body .card > .tabla-auto-scroll:first-child .table thead tr:first-child th:first-child,
.vw-body .card > .table-responsive:first-child .table thead tr:first-child th:first-child { border-top-left-radius: 10px; }
.vw-body .card > .table:first-child > thead > tr:first-child > th:last-child,
.vw-body .card > .tabla-auto-scroll:first-child .table thead tr:first-child th:last-child,
.vw-body .card > .table-responsive:first-child .table thead tr:first-child th:last-child { border-top-right-radius: 10px; }
.vw-body .table-light, .vw-body .table-light > th, .vw-body .table-light > td { --bs-table-bg: #f1f4f8; }

/* Botones: blancos con borde azul claro (como los del diseño); los primarios en azul */
.vw .btn { border-radius: 8px; font-weight: 600; }
.vw-body .btn-outline-primary, .vw-body .btn-outline-secondary, .vw-body .btn-outline-dark, .vw-body .btn-light,
.vw-toolbar .btn-outline-primary, .vw-toolbar .btn-outline-secondary {
    background: #fff; border: 1px solid #b9cbe6; color: #0f3d7a; }
.vw-body .btn-outline-primary:hover, .vw-body .btn-outline-secondary:hover, .vw-body .btn-outline-dark:hover, .vw-body .btn-light:hover {
    background: #eef4fd; border-color: #9fbbe6; color: #0f3d7a; }
.vw-body .btn-outline-primary i, .vw-body .btn-outline-secondary i, .vw-body .btn-outline-dark i { color: #1d5fc4; }
.vw-body .btn-outline-success { background: #fff; border-color: #b5dcc4; color: #146c43; }
.vw-body .btn-outline-success:hover { background: #eaf7ef; color: #146c43; }
.vw-body .btn-outline-danger { background: #fff; border-color: #f1b9b9; color: #b3161f; }
.vw-body .btn-outline-danger:hover { background: #fdeeee; color: #b3161f; }
.vw-body .btn-outline-warning { background: #fff; border-color: #f5d08a; color: #9a5b00; }
.vw-body .btn-outline-warning:hover { background: #fff4e5; color: #9a5b00; }
.vw-body .btn-outline-info { background: #fff; border-color: #a9dbe8; color: #0b6b82; }
.vw-body .btn-primary { background: #1d6fe0; border-color: #1d6fe0; }
.vw-body .btn-primary:hover { background: #155ec4; border-color: #155ec4; }
.vw-body .btn-dark { background: #13294b; border-color: #13294b; }
.vw-body .btn-group > .btn { border-radius: 0; }
.vw-body .btn-group > .btn:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.vw-body .btn-group > .btn:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.vw-body .btn-sm { border-radius: 6px; }

/* Pestañas: como las de "Crédito" (Generales / Garantías / ...) */
.vw-body .nav-tabs { border-bottom: 1px solid #d6dee8; gap: 3px; }
.vw-body .nav-tabs .nav-link { background: #e6ecf4; color: #34465e; border: 1px solid #d6dee8; border-bottom: none;
    border-radius: 8px 8px 0 0; font-weight: 600; }
.vw-body .nav-tabs .nav-link:hover { background: #dde5f0; }
.vw-body .nav-tabs .nav-link.active { background: #fff; color: #1d5fc4; box-shadow: inset 0 3px 0 #1d6fe0; }
.vw-body .nav-pills .nav-link.active { background: #1d6fe0; }

/* Avisos y distintivos */
.vw-body .alert { border-radius: 10px; font-size: .9rem; }
.vw-body .alert-info { background: #eaf2fc; border-color: #cddcf0; color: #13294b; }
.vw-body .badge { font-weight: 600; letter-spacing: .2px; }
.vw-body > p.text-muted, .vw-body > .text-muted.small { color: #5b6b80 !important; }
.vw-body .breadcrumb { margin-bottom: 0; }
.vw-body .list-group-item { border-color: #edf1f6; }
.vw-body .pagination .page-link { color: #1d5fc4; }
.vw-body .pagination .active > .page-link { background: #1d6fe0; border-color: #1d6fe0; color: #fff; }

/* Mensajes centrados (clave de módulo, sucursal, etc.) */
.vw.vw-angosta { max-width: 560px; margin-left: auto; margin-right: auto; }
.vw.vw-media { max-width: 860px; }

@media (max-width: 575.98px) {
    .vw-body { padding: 8px; }
    .vw-toolbar { padding: 10px; }
    .vw-toolbar .vw-btns { width: 100%; }
    .vw-toolbar .vw-btns > .btn, .vw-toolbar .vw-btns > a.btn { flex: 1 1 auto; }
    .vw-head-t { font-size: .95rem; }
    .vw-head-u { display: none; }
}
/* Botón activo (filtros tipo "Todos / Vigentes / En mora") */
.vw-body .btn-outline-primary.active, .vw-body .btn-outline-secondary.active, .vw-body .btn-outline-dark.active {
    background: #1d6fe0; border-color: #1d6fe0; color: #fff; }
.vw-body .btn-outline-success.active { background: #198754; border-color: #198754; color: #fff; }
.vw-body .btn-outline-danger.active { background: #dc3545; border-color: #dc3545; color: #fff; }
.vw-body .btn.active i { color: inherit !important; }
/* Barra sin descripción: los botones se alinean a la derecha */
.vw-toolbar .vw-sub:empty { display: none; }
.vw-toolbar:has(> .vw-sub:empty) { justify-content: flex-end; }
.vw-toolbar .vw-btns:only-child, .vw-toolbar .vw-sub:empty + .vw-btns { margin-left: auto; }

/* ===== MENÚ LATERAL EN CELULAR / TABLET (se desliza desde la izquierda con ☰) ===== */
.topbar-mobile { background: #13294b; position: sticky; top: 0; z-index: 1030; }
.sidebar-overlay { display: none; }
@media (max-width: 991.98px) {
    #sidebarNav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1050; overflow-y: auto;
                  transform: translateX(-100%); transition: transform .25s ease; min-height: 0; }
    #sidebarNav.mostrar { transform: translateX(0); box-shadow: 4px 0 18px rgba(0,0,0,.35); }
    .sidebar-overlay.mostrar { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1040; }
}