/* =========================================================
   CANOPUS V8 — ENTREGA 3: DASHBOARD PREMIUM
   Cargar después de style.css, header-v8.css y hero-left-v8.css
   ========================================================= */

.cp-visual{
    position:relative;
    min-height:785px;
    padding-top:10px;
    perspective:1800px;
}

.cp-dashboard-v8{
    width:815px;
    display:grid;
    grid-template-columns:118px 1fr;

    background:rgba(255,255,255,.98);
    border:1px solid #e1e8f2;
    border-radius:28px;
    box-shadow:0 36px 82px rgba(30,87,165,.17);
    overflow:hidden;

    transform:rotate(-1.15deg);
    transform-origin:center center;
}

.cp-dashboard-v8__sidebar{
    padding:27px 14px 24px;
    background:#fff;
    border-right:1px solid #e6edf5;
}

.cp-dashboard-v8__brand{
    display:flex;
    align-items:center;
    gap:7px;
    margin:0 5px 27px;
    color:#0a1d46;
    font-size:13px;
}

.cp-mini-star{
    color:#176ce8;
    font-size:23px;
}

.cp-dashboard-v8__menu{
    display:grid;
    gap:7px;
}

.cp-dashboard-v8__menu a{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:35px;
    padding:0 10px;

    border-radius:9px;
    color:#58657a;
    font-size:10px;
    font-weight:600;
}

.cp-dashboard-v8__menu a span{
    width:15px;
    text-align:center;
    color:#216bd0;
}

.cp-dashboard-v8__menu a.is-active{
    color:#fff;
    background:linear-gradient(135deg,#0a347e,#075edc);
    box-shadow:0 8px 18px rgba(9,75,180,.22);
}

.cp-dashboard-v8__menu a.is-active span{
    color:#fff;
}

.cp-dashboard-v8__main{
    padding:25px 24px 24px;
    background:#fbfcff;
}

.cp-dashboard-v8__topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.cp-dashboard-v8__topbar h2{
    margin:0;
    font-family:Manrope,Inter,sans-serif;
    font-size:19px;
    letter-spacing:-.5px;
}

.cp-dashboard-v8__tools{
    display:flex;
    align-items:center;
    gap:10px;
}

.cp-period,
.cp-tool-button{
    border:0;
    background:transparent;
    color:#58657a;
    font-size:8px;
}

.cp-period{
    display:flex;
    gap:4px;
    align-items:center;
}

.cp-tool-button{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:7px;
    cursor:pointer;
}

.cp-admin-v8{
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:2px;
}

.cp-admin-v8__avatar{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;

    border-radius:50%;
    background:linear-gradient(135deg,#244772,#94aac5);
    color:#fff;
    font-size:8px;
}

.cp-admin-v8 strong,
.cp-admin-v8 small{
    display:block;
}

.cp-admin-v8 strong{
    font-size:8px;
}

.cp-admin-v8 small{
    color:#99a4b4;
    font-size:6px;
}

.cp-admin-v8__arrow{
    color:#7e8a9d;
    font-size:8px;
}

.cp-kpis-v8{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:13px;
}

.cp-kpis-v8 article{
    position:relative;
    min-height:104px;
    padding:14px 12px;

    background:#fff;
    border:1px solid #e9eef5;
    border-radius:13px;
    box-shadow:0 8px 18px rgba(44,82,132,.045);
}

.cp-kpi-v8__icon{
    position:absolute;
    top:13px;
    left:11px;

    width:22px;
    height:22px;
    display:grid;
    place-items:center;

    border-radius:8px;
    font-size:10px;
}

.cp-kpi-v8__icon--blue{
    background:#e9f3ff;
    color:#126ff2;
}

.cp-kpi-v8__icon--green{
    background:#e9fbef;
    color:#18b963;
}

.cp-kpi-v8__icon--violet{
    background:#f1eaff;
    color:#8a56ef;
}

.cp-kpi-v8__icon--orange{
    background:#fff0e4;
    color:#ff8733;
}

.cp-kpi-v8__label{
    margin:2px 0 8px 29px;
    color:#647087;
    font-size:8px;
}

.cp-kpis-v8 strong{
    display:block;
    font-size:14px;
    letter-spacing:-.55px;
}

.cp-kpis-v8 small{
    display:block;
    margin-top:9px;
    font-size:7px;
}

.cp-kpis-v8 small.is-positive{
    color:#18b963;
}

.cp-kpis-v8 small b{
    color:#97a2b3;
    font-weight:500;
}

.cp-dashboard-v8__charts{
    display:grid;
    grid-template-columns:1.6fr .78fr;
    gap:12px;
}

.cp-panel-v8{
    min-height:282px;
    padding:15px;

    background:#fff;
    border:1px solid #e6edf5;
    border-radius:14px;
}

.cp-panel-v8 h3{
    margin:0;
    font-size:10px;
}

.cp-chart-v8{
    position:relative;
    height:238px;
    margin-top:7px;
    padding-left:36px;
}

.cp-chart-v8__ylabels{
    position:absolute;
    left:0;
    top:20px;
    bottom:28px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    color:#9aa5b4;
    font-size:7px;
}

.cp-chart-v8 svg{
    width:100%;
    height:205px;
}

.cp-chart-v8__grid line{
    stroke:#e9eef5;
    stroke-width:1;
}

.cp-chart-v8__area{
    fill:url(#areaV8);
}

.cp-chart-v8__line{
    fill:none;
    stroke:#1f78ff;
    stroke-width:3.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.cp-chart-v8__points circle{
    fill:#fff;
    stroke:#1f78ff;
    stroke-width:3;
}

.cp-chart-v8__months{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    align-items:center;
    margin-top:-3px;

    color:#8995a7;
    font-size:7px;
    text-align:center;
}

.cp-chart-v8__months .is-active{
    width:25px;
    height:17px;
    display:grid;
    place-items:center;
    justify-self:center;

    border-radius:5px;
    background:#0b67e8;
    color:#fff;
    font-weight:700;
}

.cp-panel-v8--donut{
    padding-bottom:13px;
}

.cp-donut-v8{
    width:126px;
    height:126px;
    display:grid;
    place-items:center;
    margin:20px auto 16px;

    border-radius:50%;
    background:conic-gradient(
        #0a58de 0 48%,
        #1499e7 48% 80%,
        #d5e6fb 80% 100%
    );
    position:relative;
}

.cp-donut-v8::after{
    content:"";
    position:absolute;
    width:73px;
    height:73px;

    border-radius:50%;
    background:#fff;
}

.cp-donut-v8 > div{
    position:relative;
    z-index:2;
    text-align:center;
}

.cp-donut-v8 strong,
.cp-donut-v8 small{
    display:block;
}

.cp-donut-v8 strong{
    font-size:13px;
}

.cp-donut-v8 small{
    color:#8e99aa;
    font-size:7px;
}

.cp-legend-v8{
    display:grid;
    gap:9px;
}

.cp-legend-v8 span{
    display:grid;
    grid-template-columns:8px 1fr auto;
    align-items:center;
    gap:7px;

    color:#59667b;
    font-size:8px;
}

.cp-legend-v8 i{
    width:7px;
    height:7px;
    border-radius:50%;
}

.cp-legend-v8 i.one{background:#0a58de}
.cp-legend-v8 i.two{background:#d0926c}
.cp-legend-v8 i.three{background:#cadcf6}

.cp-legend-v8 b{
    color:#6d788b;
    font-weight:600;
}

/* TARJETAS INFERIORES */

.cp-dashboard-v8__lower{
    position:absolute;
    left:-26px;
    top:548px;

    width:815px;
    display:grid;
    grid-template-columns:1.18fr .75fr .75fr .92fr;
    gap:12px;

    transform:rotate(2.1deg);
}

.cp-dashboard-v8__lower article{
    min-height:258px;

    background:rgba(255,255,255,.985);
    border:1px solid #e0e8f3;
    border-radius:20px;
    box-shadow:0 22px 48px rgba(26,76,147,.14);
}

.cp-orion-v8{
    padding:18px;
}

.cp-orion-v8 header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.cp-orion-v8 header strong{
    color:#1548aa;
    font-size:13px;
    font-style:italic;
}

.cp-orion-v8 header button{
    border:0;
    background:transparent;
    color:#8b96a7;
}

.cp-orion-v8__result{
    display:flex;
    gap:11px;
    margin:27px 0 18px;
}

.cp-orion-v8__face{
    width:32px;
    height:32px;
    flex:0 0 auto;
    display:grid;
    place-items:center;

    border-radius:50%;
    background:#061d55;
    color:#1db6ff;
    font-size:10px;
    box-shadow:0 0 0 5px #dceeff;
}

.cp-orion-v8__result small,
.cp-orion-v8__result strong{
    display:block;
}

.cp-orion-v8__result > div > small{
    font-size:9px;
}

.cp-orion-v8__result strong{
    margin-top:3px;
    font-size:10px;
}

.cp-orion-v8__result strong em{
    color:#18bd5a;
    font-style:normal;
}

.cp-orion-v8__result p{
    margin:14px 0 0;
    font-size:9px;
    line-height:1.5;
}

.cp-orion-v8__result p span{
    width:18px;
    height:18px;
    display:inline-grid;
    place-items:center;
    margin-right:6px;

    border-radius:50%;
    background:#18bd5a;
    color:#fff;
}

.cp-orion-v8__result p small{
    display:inline;
    color:#7e899a;
}

.cp-orion-v8__input{
    height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-left:12px;

    border:1px solid #e6edf6;
    border-radius:10px;
    background:#fafcff;

    color:#a1abbb;
    font-size:8px;
}

.cp-orion-v8__input button{
    width:34px;
    height:30px;
    margin-right:3px;

    border:0;
    border-radius:8px;
    background:#0c63dc;
    color:#fff;
}

.cp-stat-v8{
    padding:24px 20px;
}

.cp-stat-v8__icon{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;

    border-radius:50%;
    background:#eaf5ff;
    color:#1181ef;
    font-size:20px;
}

.cp-stat-v8__icon--violet{
    background:#f1ebff;
    color:#7950ea;
}

.cp-stat-v8 > strong{
    display:block;
    margin:22px 0 26px;
    font-size:12px;
}

.cp-stat-v8 > b{
    display:block;
    font-family:Manrope,Inter,sans-serif;
    font-size:28px;
}

.cp-stat-v8 > small{
    display:block;
    margin-top:7px;
    color:#758198;
    font-size:8px;
}

.cp-stat-v8 svg{
    width:100%;
    margin-top:25px;
}

.cp-stat-v8 svg path{
    fill:none;
    stroke:#126cf0;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.cp-stat-v8:nth-child(2) svg path{stroke:#17ba58}
.cp-stat-v8:nth-child(4) svg path{stroke:#774bea}

@media (max-width:1250px){
    .cp-dashboard-v8{
        width:760px;
    }

    .cp-dashboard-v8__lower{
        width:760px;
    }
}

@media (max-width:1050px){
    .cp-visual{
        width:815px;
        transform:scale(.9);
        transform-origin:top left;
        margin-top:25px;
    }
}

@media (max-width:700px){
    .cp-visual{
        transform:scale(.58);
        margin-bottom:-300px;
    }
}