/* ============================================================
   REDISEÑO LIMPIO DEL DASHBOARD
============================================================ */

.rent-dashboard-vn{
    /* background:#f5f7fb; */
    height:calc(100vh - 135px);
    min-height:620px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    color:#111827;
}

.rent-dashboard-sticky-header-vn{
    position:sticky;
    top:0;
    z-index:30;
    background:#f5f7fb;
    padding:16px 22px 14px;
    border-bottom:1px solid #e5e7eb;
    box-shadow:0 6px 16px rgba(15,23,42,.05);
}

.rent-dashboard-scroll-body-vn{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px 22px;
}

.rent-dashboard-header-vn{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:12px;
}

.rent-dashboard-title-box-vn h2{
    margin:0;
    font-size:24px;
    font-weight:900;
    line-height:1.15;
    color:#111827;
}

.rent-dashboard-subtitle-vn{
    margin-top:5px;
    color:#4b5563;
    font-size:13px;
    font-weight:700;
}

.rent-dashboard-period-vn{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:10px 14px;
    font-size:13px;
    font-weight:900;
    color:#374151;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.rent-currency-pill-vn{
    display:inline-block;
    margin-left:8px;
    padding:3px 9px;
    border-radius:999px;
    background:#eef2ff;
    color:#3730a3;
    font-size:12px;
    font-weight:900;
}

/* Filtros */
.rent-dashboard-filters-vn{
    display:grid;
    grid-template-columns:1fr 1fr .8fr 1fr 1.15fr .85fr;
    gap:12px;
    align-items:end;
}

.filter-item-vn label{
    display:block;
    margin-bottom:4px;
    font-size:12px;
    font-weight:900;
    color:#374151;
}

.filter-item-vn .form-control{
    height:40px;
    border-radius:10px;
    border:1px solid #d1d5db;
    box-shadow:none;
    font-size:13px;
    font-weight:800;
    color:#111827;
}

.filter-actions-vn .btn{
    height:40px;
    border-radius:10px;
    font-size:14px;
    font-weight:900;
}

/* KPIs */
.rent-kpi-grid-vn{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-bottom:20px;
}

.rent-kpi-card-vn{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
    min-height:104px;
}

.kpi-icon-vn{
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.kpi-info-vn{
    min-width:0;
    flex:1;
}

.kpi-label-vn{
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    color:#475569;
    line-height:1.2;
    letter-spacing:.4px;
}

.kpi-value-vn{
    margin-top:4px;
    font-size:19px;
    font-weight:900;
    color:#111827;
    line-height:1.15;
    word-break:break-word;
}

.kpi-help-vn{
    margin-top:4px;
    font-size:12px;
    font-weight:700;
    color:#6b7280;
    line-height:1.2;
}

/* Colores */
.kpi-green-vn .kpi-icon-vn{background:#dcfce7;color:#15803d;}
.kpi-blue-vn .kpi-icon-vn{background:#dbeafe;color:#1d4ed8;}
.kpi-orange-vn .kpi-icon-vn{background:#ffedd5;color:#c2410c;}
.kpi-purple-vn .kpi-icon-vn{background:#ede9fe;color:#6d28d9;}
.kpi-red-vn .kpi-icon-vn{background:#fee2e2;color:#dc2626;}
.kpi-teal-vn .kpi-icon-vn{background:#ccfbf1;color:#0f766e;}
.kpi-yellow-vn .kpi-icon-vn{background:#fef3c7;color:#b45309;}
.kpi-lightred-vn .kpi-icon-vn{background:#fee2e2;color:#ef4444;}

/* Panels */
.rent-dashboard-row-vn{
    margin-bottom:18px;
}

.rent-panel-vn{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:18px;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
    min-height:100%;
}

.panel-title-vn{
    margin-bottom:14px;
    font-size:18px;
    font-weight:900;
    color:#111827;
    line-height:1.2;
}

.panel-title-vn span{
    display:block;
    margin-top:4px;
    font-size:13px;
    font-weight:700;
    color:#4b5563;
}

.rent-chart-box-vn{
    height:340px;
    min-width:100%;
}

.rent-chart-small-vn{
    height:280px;
    min-width:100%;
}

/* Alertas */
.alert-item-vn{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #f1f5f9;
    font-size:14px;
    font-weight:800;
    color:#374151;
}

.alert-item-vn:last-child{
    border-bottom:none;
}

.alert-item-vn strong{
    font-size:18px;
    font-weight:900;
    color:#dc2626;
}

/* Próximos vencimientos */
.next-due-list-vn{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.next-due-item-vn{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#f8fafc;
}

.next-due-item-vn strong{
    display:block;
    font-size:14px;
    font-weight:900;
    color:#111827;
}

.next-due-item-vn span{
    display:block;
    font-size:13px;
    font-weight:700;
    color:#475569;
}

.next-due-item-vn small{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#64748b;
}

.next-due-amount-vn{
    text-align:right;
    font-size:14px;
    font-weight:900;
    color:#111827;
    white-space:nowrap;
}

/* Tabla */
.rent-dashboard-table-vn{
    margin-bottom:0;
    font-size:13px;
}

.rent-dashboard-table-vn thead th{
    background:#f8fafc;
    color:#334155;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
    border-bottom:1px solid #e5e7eb !important;
    padding:10px 8px !important;
}

.rent-dashboard-table-vn tbody td{
    padding:9px 8px !important;
    font-size:13px;
    font-weight:700;
    color:#111827;
    vertical-align:middle !important;
}

.rent-dashboard-footer-vn{
    padding:4px 0;
    color:#6b7280;
    font-size:12px;
    font-weight:700;
}

/* Responsive */
@media (max-width: 1400px){
    .rent-kpi-grid-vn{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1200px){
    .rent-dashboard-vn{
        height:auto;
        min-height:100%;
        overflow:visible;
    }

    .rent-dashboard-sticky-header-vn{
        position:relative;
    }

    .rent-dashboard-scroll-body-vn{
        overflow:visible;
    }

    .rent-dashboard-filters-vn{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 768px){
    .rent-dashboard-header-vn{
        flex-direction:column;
    }

    .rent-dashboard-period-vn{
        width:100%;
        white-space:normal;
    }

    .rent-dashboard-filters-vn{
        grid-template-columns:1fr;
    }

    .rent-kpi-grid-vn{
        grid-template-columns:1fr;
    }
}

/* ============================================================
   AJUSTE BLOQUES SECUNDARIOS SIN ESPACIOS GRANDES
============================================================ */

.rent-secondary-grid-vn{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:18px;
    margin-bottom:18px;
    align-items:start;
}

.rent-panel-compact-vn{
    min-height:auto !important;
    height:auto !important;
}

.rent-chart-status-vn{
    height:230px;
    min-width:100%;
}

/* Reduce espacio interno solo en cards secundarias */
.rent-panel-compact-vn .panel-title-vn{
    margin-bottom:10px;
}

/* Alertas más compactas */
.rent-panel-compact-vn .alert-item-vn{
    padding:10px 0;
}

/* Próximos vencimientos más compacto */
.rent-panel-compact-vn .next-due-list-vn{
    gap:8px;
}

.rent-panel-compact-vn .next-due-item-vn{
    padding:10px 12px;
}

/* Evita que Highcharts deje demasiado aire en el donut */
#rentDashboardStatusChart,
.rent-chart-status-vn{
    max-height:230px;
}

/* En pantallas medianas, baja a 1 columna para que no se apriete */
@media(max-width:1200px){
    .rent-secondary-grid-vn{
        grid-template-columns:1fr;
    }

    .rent-chart-status-vn{
        height:260px;
    }
}

/* ============================================================
   DASHBOARD RENTAS - LAYOUT SIN HUECOS
   Gráficas a la izquierda / resumen operativo a la derecha
============================================================ */

.rent-main-grid-vn{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 360px;
    gap:18px;
    margin-bottom:18px;
    align-items:start;
}

.rent-main-left-vn{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    min-width:0;
}

.rent-main-right-vn{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    min-width:0;
}

.rent-side-panel-vn{
    min-height:auto !important;
    height:auto !important;
}

/* Gráficas principales más cómodas */
.rent-main-left-vn .rent-chart-box-vn{
    height:315px;
}

/* Donut más compacto para barra lateral */
.rent-chart-status-vn{
    height:225px;
    min-width:100%;
}

/* Reduce aire interno de cards laterales */
.rent-side-panel-vn{
    padding:16px;
}

.rent-side-panel-vn .panel-title-vn{
    margin-bottom:10px;
}

/* Alertas compactas */
.alert-list-vn{
    display:flex;
    flex-direction:column;
}

.alert-list-vn .alert-item-vn{
    padding:11px 0;
}

/* Próximos vencimientos compacto */
.rent-side-panel-vn .next-due-list-vn{
    gap:9px;
}

.rent-side-panel-vn .next-due-item-vn{
    padding:11px 12px;
}

/* Evita que Highcharts agregue espacio raro */
#rentDashboardStatusChart{
    max-height:225px;
}

/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:1350px){
    .rent-main-grid-vn{
        grid-template-columns:minmax(0, 1fr) 330px;
    }
}

@media(max-width:1150px){
    .rent-main-grid-vn{
        grid-template-columns:1fr;
    }

    .rent-main-right-vn{
        grid-template-columns:repeat(3, 1fr);
    }

    .rent-chart-status-vn{
        height:220px;
    }
}

@media(max-width:900px){
    .rent-main-right-vn{
        grid-template-columns:1fr;
    }
}

/* ============================================================
   DASHBOARD - DISTRIBUCIÓN LIMPIA
   2 gráficas arriba / 3 bloques abajo / tabla completa
============================================================ */

/* Filas del dashboard */
.rent-dashboard-row-vn{
    margin-bottom:18px;
}

/* Igualar altura visual en cada fila */
.row-eq-height-vn{
    display:flex;
    flex-wrap:wrap;
    margin-left:-9px;
    margin-right:-9px;
}

.row-eq-height-vn > [class*="col-"]{
    display:flex;
    padding-left:9px;
    padding-right:9px;
    margin-bottom:18px;
}

/* Panel general */
.rent-panel-vn{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:18px;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
    width:100%;
    display:flex;
    flex-direction:column;
}

/* Panel más compacto para fila 2 */
.rent-panel-small-vn{
    min-height:100%;
}

/* Títulos */
.panel-title-vn{
    margin-bottom:14px;
    font-size:18px;
    font-weight:900;
    color:#111827;
    line-height:1.2;
}

.panel-title-vn span{
    display:block;
    margin-top:4px;
    font-size:13px;
    font-weight:700;
    color:#4b5563;
}

/* Gráficas principales */
.rent-chart-main-vn{
    height:310px;
    min-width:100%;
}

/* Gráfica estatus */
.rent-chart-status-vn{
    height:245px;
    min-width:100%;
}

/* Alertas */
.alert-list-vn{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:2px;
}

.alert-item-vn{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #eef2f7;
    font-size:14px;
    font-weight:800;
    color:#374151;
}

.alert-item-vn:last-child{
    border-bottom:none;
}

.alert-item-vn strong{
    font-size:18px;
    font-weight:900;
    color:#dc2626;
}

/* Próximos vencimientos */
.next-due-list-vn{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:2px;
}

.next-due-item-vn{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:13px 14px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#f8fafc;
}

.next-due-item-vn strong{
    display:block;
    font-size:14px;
    font-weight:900;
    color:#111827;
    line-height:1.2;
}

.next-due-item-vn span{
    display:block;
    font-size:13px;
    font-weight:700;
    color:#475569;
    line-height:1.2;
}

.next-due-item-vn small{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#64748b;
    line-height:1.2;
}

.next-due-amount-vn{
    text-align:right;
    font-size:14px;
    font-weight:900;
    color:#111827;
    white-space:nowrap;
}

.next-due-amount-vn small{
    display:block;
    font-size:12px;
    color:#64748b;
    font-weight:800;
}

/* Responsive */
@media (max-width: 991px){
    .row-eq-height-vn{
        display:block;
    }

    .row-eq-height-vn > [class*="col-"]{
        display:block;
        margin-bottom:18px;
    }

    .rent-chart-main-vn{
        height:280px;
    }

    .rent-chart-status-vn{
        height:230px;
    }
}