/* =====================================================
   SISGCOE COMPONENTS - CARDS
===================================================== */

/* ===== BASE CARD ===== */

.card-base{

    background:var(--bg-surface);

    border:1px solid var(--border-soft);

    border-radius:24px;

    box-shadow:var(--shadow-card);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;

}

/* Hover seguro */
.card-base:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(0,0,0,.18);

}

/* ===== KPI CARD ===== */

.kpi-card{

    position:relative;

    overflow:hidden;

    padding:24px;

    min-height:130px;

}

/* Glow topo */
.kpi-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        transparent
    );

    opacity:.9;

}

/* ===== CHART CARD ===== */

/* ===== INSIGHT CARD ===== */

.insight-card{

    padding:18px 20px;

    display:flex;

    align-items:center;

    gap:12px;

}

/* ===== STATUS CARD ===== */

.status-card{

    padding:18px 20px;

}

/* ===== CHART CARD ===== */

.chart-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.01)
        ),
        rgba(17,28,51,.88);

    border:1px solid rgba(255,255,255,.05);

    border-radius:30px;

    padding:26px;

    backdrop-filter:blur(18px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.04);

    min-height:420px;

    display:flex;

    flex-direction:column;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.chart-card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 22px 55px rgba(0,0,0,.40);
}

.chart-card h3{
    margin:0 0 18px;
    font-size:18px;
    color:white;
}

.chart-wrapper,
.chart-wrap{
    position:relative;
    flex:1;
    min-height:320px;
}

.chart-wrapper canvas,
.chart-wrap canvas{
    position:absolute;
    inset:0;
}

/* ===== INSIGHT CARD ENTERPRISE ===== */

.insight-card{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:54px;
    padding:10px 14px;
    border-radius:18px;
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    font-size:13px;
    line-height:1.4;
    color:#dbeafe;
    overflow:hidden;
}

.insight-card span{
    font-size:18px;
    flex-shrink:0;
}

.insight-card strong{
    color:white;
}

/* ===== NOC CARD / DASHBOARD PANEL ===== */

.noc-card{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),
        rgba(17,28,51,.88);
    border:1px solid rgba(255,255,255,.05);
    border-radius:30px;
    padding:26px;
    backdrop-filter:blur(18px);
    box-shadow:
        0 15px 40px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.04);
    min-height:420px;
    display:flex;
    flex-direction:column;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.noc-card:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 55px rgba(0,0,0,.40);
}

.noc-card h3{
    margin:0 0 18px;
    font-size:18px;
    color:white;
}