/* =====================================================
   CENTINELA - CENTRO DE CONTROL BI
   ===================================================== */

.bi-cc{
    --bi-blue:#0b7ff2;
    --bi-navy:#082f59;
    --bi-red:#ef4444;
    --bi-orange:#f59e0b;
    --bi-green:#10b981;
    --bi-bg:#f4f7fb;
    --bi-line:#dce6f0;

    width:100%;
    box-sizing:border-box;
    padding:24px 26px 30px;
    background:var(--bi-bg);
    color:#092f56;
    font-family:"Segoe UI",Arial,sans-serif;
}

.bi-cc *{
    box-sizing:border-box;
}

.bi-cc-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:20px;
}

.bi-cc-title h1{
    margin:0;
    font-size:34px;
    line-height:1;
    color:#082f59;
    font-weight:900;
}

.bi-cc-title p{
    margin:7px 0 0;
    color:#657f99;
    font-size:14px;
}

.bi-cc-controls{
    display:flex;
    align-items:end;
    gap:10px;
}

.bi-cc-control{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.bi-cc-control label{
    font-size:10px;
    color:#607892;
    font-weight:800;
    text-transform:uppercase;
}

.bi-cc select,
.bi-cc button{
    height:38px;
    border:1px solid #ccdceb;
    border-radius:8px;
    background:#fff;
    color:#123b61;
    padding:0 12px;
    font-weight:700;
}

.bi-cc-export{
    border-color:var(--bi-blue)!important;
    background:var(--bi-blue)!important;
    color:#fff!important;
    cursor:pointer;
}

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

.bi-kpi{
    min-height:104px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px;
    background:#fff;
    border:1px solid var(--bi-line);
    border-radius:14px;
    box-shadow:0 3px 14px rgba(18,55,88,.04);
}

.bi-kpi-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e4f2ff;
    font-size:22px;
}

.bi-kpi.danger .bi-kpi-icon{
    background:#ffe5e8;
}

.bi-kpi-copy{
    min-width:0;
}

.bi-kpi-label{
    color:#5d7590;
    font-size:12px;
    font-weight:700;
}

.bi-kpi-value{
    margin-top:3px;
    color:#082f59;
    font-size:28px;
    line-height:1;
    font-weight:900;
}

.bi-kpi-note{
    margin-top:6px;
    color:#8aa0b6;
    font-size:10px;
}

.bi-grid-top{
    display:grid;
    grid-template-columns:1.35fr .9fr .95fr;
    gap:14px;
    margin-bottom:14px;
}

.bi-grid-bottom{
    display:grid;
    grid-template-columns:.85fr 1.15fr 1fr;
    gap:14px;
}

.bi-card{
    min-width:0;
    background:#fff;
    border:1px solid var(--bi-line);
    border-radius:14px;
    box-shadow:0 3px 15px rgba(18,55,88,.04);
    overflow:hidden;
}

.bi-card-head{
    min-height:49px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    border-bottom:1px solid #e6edf4;
}

.bi-card-title{
    color:#0b3158;
    font-size:15px;
    font-weight:900;
}

.bi-card-link{
    border:0!important;
    height:auto!important;
    padding:0!important;
    background:transparent!important;
    color:var(--bi-blue)!important;
    font-size:11px;
    cursor:pointer;
}

.bi-card-body{
    padding:14px;
}

.bi-chart{
    height:215px;
    position:relative;
}

.bi-chart svg{
    width:100%;
    height:100%;
    display:block;
}

.bi-axis-text{
    fill:#71879d;
    font-size:9px;
}

.bi-grid-line{
    stroke:#e4ebf2;
    stroke-width:1;
}

.bi-line-path{
    fill:none;
    stroke:#1688f4;
    stroke-width:3;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.bi-area-path{
    fill:rgba(22,136,244,.11);
}

.bi-dot{
    fill:#1688f4;
    stroke:#fff;
    stroke-width:2;
}

.bi-donut-wrap{
    min-height:215px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
}

.bi-donut{
    width:142px;
    height:142px;
    flex:0 0 142px;
    border-radius:50%;
    position:relative;
}

.bi-donut::after{
    content:"";
    position:absolute;
    inset:28px;
    border-radius:50%;
    background:#fff;
}

.bi-donut-center{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.bi-donut-center strong{
    font-size:26px;
    color:#0c335a;
}

.bi-donut-center span{
    font-size:9px;
    color:#73899e;
}

.bi-legend{
    min-width:125px;
}

.bi-legend-row{
    display:flex;
    align-items:center;
    gap:7px;
    margin:8px 0;
    color:#375979;
    font-size:11px;
}

.bi-legend-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    flex:none;
}

.bi-user-bars{
    min-height:205px;
}

.bi-user-bar-row{
    display:grid;
    grid-template-columns:95px 1fr 28px;
    align-items:center;
    gap:8px;
    margin:12px 0;
}

.bi-user-bar-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:11px;
    color:#385876;
}

.bi-user-bar-track{
    height:14px;
    border-radius:4px;
    overflow:hidden;
    background:#edf3f9;
}

.bi-user-bar-fill{
    height:100%;
    border-radius:4px;
    background:linear-gradient(90deg,#79b7f8,#318df2);
}

.bi-user-bar-count{
    font-size:11px;
    color:#173f64;
    font-weight:800;
}

.bi-geo{
    min-height:280px;
    position:relative;
    overflow:hidden;
    border-radius:10px;
    background:
        linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
        linear-gradient(30deg,#d6ebdd 12%,transparent 12.5%,transparent 87%,#d6ebdd 87.5%,#d6ebdd),
        linear-gradient(150deg,#d8e8f8 12%,transparent 12.5%,transparent 87%,#d8e8f8 87.5%,#d8e8f8);
    background-size:auto,70px 120px,70px 120px;
    border:1px solid #dce8f2;
}

.bi-geo-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(62,117,165,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(62,117,165,.08) 1px,transparent 1px);
    background-size:35px 35px;
}

.bi-geo-marker{
    position:absolute;
    width:18px;
    height:18px;
    transform:translate(-50%,-50%);
    border:4px solid #fff;
    border-radius:50% 50% 50% 0;
    background:#1688f4;
    box-shadow:0 2px 8px rgba(4,44,80,.25);
    rotate:-45deg;
}

.bi-geo-marker.alert{
    background:#ef4444;
}

.bi-geo-caption{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    padding:9px 10px;
    border-radius:8px;
    background:rgba(255,255,255,.90);
    color:#375979;
    font-size:10px;
    backdrop-filter:blur(4px);
}

.bi-table-wrap{
    overflow:auto;
}

.bi-table{
    width:100%;
    border-collapse:collapse;
    font-size:10px;
}

.bi-table th{
    padding:8px 7px;
    text-align:left;
    color:#637b94;
    background:#f5f8fb;
    font-size:9px;
}

.bi-table td{
    padding:8px 7px;
    border-bottom:1px solid #e5edf4;
    color:#264b6b;
    vertical-align:top;
}

.bi-risk{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:9px;
    white-space:nowrap;
}

.bi-risk.low{
    color:#296394;
    background:#e4f0fb;
}

.bi-risk.medium{
    color:#a46900;
    background:#fff0c3;
}

.bi-risk.high{
    color:#c92b38;
    background:#ffe0e4;
}

.bi-alert{
    display:grid;
    grid-template-columns:36px 1fr auto;
    gap:9px;
    align-items:start;
    padding:10px 0;
    border-bottom:1px solid #e6edf4;
}

.bi-alert:last-child{
    border-bottom:0;
}

.bi-alert-icon{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff0c6;
    font-size:16px;
}

.bi-alert.high .bi-alert-icon{
    background:#ffe3e6;
}

.bi-alert-user{
    color:#133c62;
    font-size:10px;
    font-weight:900;
}

.bi-alert-title{
    margin-top:2px;
    color:#294e6e;
    font-size:10px;
}

.bi-alert-detail{
    margin-top:3px;
    color:#7b91a7;
    font-size:9px;
}

.bi-alert-time{
    color:#71879c;
    font-size:8px;
    white-space:nowrap;
}

.bi-empty{
    padding:30px 10px;
    color:#8399ae;
    font-size:11px;
    text-align:center;
}

.bi-cc-nav{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    margin:5px 12px!important;
    padding:11px 13px!important;
    border-radius:9px!important;
    background:#11609e!important;
    color:#fff!important;
    text-decoration:none!important;
    font-weight:800!important;
}

@media(max-width:1350px){
    .bi-kpis{
        grid-template-columns:repeat(3,1fr);
    }
    .bi-grid-top,
    .bi-grid-bottom{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:900px){
    .bi-cc{
        padding:16px;
    }
    .bi-cc-head{
        flex-direction:column;
    }
    .bi-kpis,
    .bi-grid-top,
    .bi-grid-bottom{
        grid-template-columns:1fr;
    }
    .bi-cc-controls{
        width:100%;
        flex-wrap:wrap;
    }
}