/* ======================================================
   CUATRO87 STRATEGIC DIAGNOSTIC
   VERSION: 1.0
   FILE: diagnostico.css
   ====================================================== */

#cuatro87-diagnostic-app,
#cuatro87-diagnostic-app *{
    box-sizing:border-box;
}

#cuatro87-diagnostic-app{

    --c87-black:#08090c;
    --c87-black-2:#111318;
    --c87-black-3:#171a21;

    --c87-green:#b0f900;
    --c87-green-dark:#8bc600;

    --c87-white:#ffffff;

    --c87-border:rgba(255,255,255,.08);

    --c87-text:rgba(255,255,255,.92);
    --c87-text-soft:rgba(255,255,255,.65);

    --c87-shadow:
        0 20px 40px rgba(0,0,0,.25);

    --c87-radius:20px;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    color:var(--c87-text);

    width:100%;

    min-height:100vh;

    background:
        radial-gradient(
            circle at top right,
            rgba(176,249,0,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(176,249,0,.05),
            transparent 25%
        ),
        var(--c87-black);

    padding:40px;
}

/* ======================================================
   LAYOUT
   ====================================================== */

#cuatro87-diagnostic-app .c87-layout{

    width:100%;

    max-width:1440px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        35%
        65%;

    gap:32px;

    align-items:start;
}

/* ======================================================
   SIDEBAR
   ====================================================== */

#cuatro87-diagnostic-app .c87-sidebar{

    position:sticky;

    top:30px;
}

#cuatro87-diagnostic-app .c87-sidebar-inner{

    display:flex;

    flex-direction:column;

    gap:24px;
}

#cuatro87-diagnostic-app .c87-logo{

    width:220px;

    height:auto;
}

#cuatro87-diagnostic-app .c87-sidebar-card{

    background:var(--c87-black-2);

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

    border-radius:var(--c87-radius);

    padding:28px;

    box-shadow:var(--c87-shadow);
}

#cuatro87-diagnostic-app .c87-sidebar-card h2,
#cuatro87-diagnostic-app .c87-sidebar-card h3{

    margin:0 0 16px;

    color:var(--c87-white);
}

#cuatro87-diagnostic-app .c87-sidebar-card p{

    margin:0;

    color:var(--c87-text-soft);

    line-height:1.8;
}

#cuatro87-diagnostic-app .c87-sidebar-card ul{

    margin:0;

    padding-left:20px;
}

#cuatro87-diagnostic-app .c87-sidebar-card li{

    margin-bottom:10px;

    color:var(--c87-text-soft);
}

/* ======================================================
   MAIN
   ====================================================== */

#cuatro87-diagnostic-app .c87-main{

    width:100%;
}

#cuatro87-diagnostic-app .c87-content{

    margin-top:24px;
}

#cuatro87-diagnostic-app .c87-step-card{

    background:var(--c87-black-2);

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

    border-radius:var(--c87-radius);

    padding:40px;

    box-shadow:var(--c87-shadow);
}

/* ======================================================
   TITLES
   ====================================================== */

#cuatro87-diagnostic-app .c87-title{

    margin:0;

    font-size:40px;

    font-weight:800;

    line-height:1.2;
}

#cuatro87-diagnostic-app .c87-subtitle{

    margin-top:12px;

    margin-bottom:32px;

    color:var(--c87-text-soft);

    font-size:16px;

    line-height:1.8;
}

/* ======================================================
   PROGRESS
   ====================================================== */

#cuatro87-diagnostic-app .c87-progress-wrap{

    background:var(--c87-black-2);

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

    border-radius:16px;

    padding:20px 24px;
}

#cuatro87-diagnostic-app .c87-progress-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:14px;

    font-size:14px;

    color:var(--c87-text-soft);
}

#cuatro87-diagnostic-app .c87-progress-bar{

    width:100%;

    height:10px;

    background:rgba(255,255,255,.05);

    border-radius:999px;

    overflow:hidden;
}

#cuatro87-diagnostic-app .c87-progress-fill{

    height:100%;

    background:var(--c87-green);

    box-shadow:
        0 0 25px rgba(176,249,0,.5);

    border-radius:999px;

    transition:.3s ease;
}

/* ======================================================
   FORM
   ====================================================== */

#cuatro87-diagnostic-app .c87-fields{

    display:flex;

    flex-direction:column;

    gap:24px;
}

#cuatro87-diagnostic-app .c87-field{

    width:100%;
}

#cuatro87-diagnostic-app .c87-field label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;
}

#cuatro87-diagnostic-app input,
#cuatro87-diagnostic-app select,
#cuatro87-diagnostic-app textarea{

    width:100%;

    background:var(--c87-black-3);

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

    border-radius:14px;

    padding:16px;

    color:var(--c87-white);

    font-size:15px;

    outline:none;

    transition:.3s ease;
}

#cuatro87-diagnostic-app input:focus,
#cuatro87-diagnostic-app select:focus,
#cuatro87-diagnostic-app textarea:focus{

    border-color:var(--c87-green);

    box-shadow:
        0 0 0 3px rgba(176,249,0,.15);
}

#cuatro87-diagnostic-app textarea{

    min-height:140px;

    resize:vertical;
}

#cuatro87-diagnostic-app .c87-error{

    border-color:#ff4d4d !important;
}
/* ======================================================
   CHECKBOX GROUPS
   ====================================================== */

#cuatro87-diagnostic-app .c87-checkbox-group,
#cuatro87-diagnostic-app .c87-radio-group{

    display:flex;

    flex-direction:column;

    gap:12px;
}

#cuatro87-diagnostic-app .c87-check,
#cuatro87-diagnostic-app .c87-radio{

    display:flex;

    align-items:center;

    gap:14px;

    background:var(--c87-black-3);

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

    border-radius:14px;

    padding:16px 18px;

    cursor:pointer;

    transition:.25s ease;
}

#cuatro87-diagnostic-app .c87-check:hover,
#cuatro87-diagnostic-app .c87-radio:hover{

    border-color:rgba(176,249,0,.35);

    transform:translateY(-1px);
}

#cuatro87-diagnostic-app .c87-check input,
#cuatro87-diagnostic-app .c87-radio input{

    width:auto;

    margin:0;

    accent-color:var(--c87-green);
}

#cuatro87-diagnostic-app .c87-check span,
#cuatro87-diagnostic-app .c87-radio span{

    color:var(--c87-text);

    font-size:15px;
}

/* ======================================================
   NAVIGATION
   ====================================================== */

#cuatro87-diagnostic-app .c87-navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:24px;

    gap:16px;
}

#cuatro87-diagnostic-app .c87-btn-primary,
#cuatro87-diagnostic-app .c87-btn-secondary{

    border:none;

    border-radius:14px;

    padding:16px 28px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}

#cuatro87-diagnostic-app .c87-btn-primary{

    background:var(--c87-green);

    color:#000;

    box-shadow:
        0 0 30px rgba(176,249,0,.30),
        0 12px 25px rgba(176,249,0,.15);
}

#cuatro87-diagnostic-app .c87-btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 40px rgba(176,249,0,.45),
        0 18px 35px rgba(176,249,0,.20);
}

#cuatro87-diagnostic-app .c87-btn-secondary{

    background:transparent;

    color:var(--c87-white);

    border:1px solid var(--c87-border);
}

#cuatro87-diagnostic-app .c87-btn-secondary:hover{

    background:rgba(255,255,255,.04);
}

#cuatro87-diagnostic-app .c87-btn-secondary:disabled{

    opacity:.35;

    cursor:not-allowed;
}

/* ======================================================
   LOADER
   ====================================================== */

#cuatro87-diagnostic-app .c87-loader-screen{

    min-height:75vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:20px;
}

#cuatro87-diagnostic-app .c87-loader-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.08);

    border-top:4px solid var(--c87-green);

    animation:c87Spin 1s linear infinite;
}

@keyframes c87Spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

#cuatro87-diagnostic-app .c87-loader-screen h2{

    margin:0;

    font-size:34px;

    font-weight:800;
}

#cuatro87-diagnostic-app .c87-loader-screen p{

    margin:0;

    color:var(--c87-text-soft);

    font-size:16px;
}

/* ======================================================
   RESULTS
   ====================================================== */

#cuatro87-diagnostic-app .c87-results-screen{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:24px;
}

#cuatro87-diagnostic-app .c87-score-card{

    background:var(--c87-black-2);

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

    border-radius:24px;

    padding:40px;

    text-align:center;
}

#cuatro87-diagnostic-app .c87-score-value{

    font-size:72px;

    font-weight:800;

    line-height:1;

    color:var(--c87-green);
}

#cuatro87-diagnostic-app .c87-score-label{

    margin-top:10px;

    font-size:18px;

    color:var(--c87-text-soft);
}

#cuatro87-diagnostic-app .c87-summary-card{

    background:var(--c87-black-2);

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

    border-radius:24px;

    padding:32px;
}

#cuatro87-diagnostic-app .c87-summary-card h2{

    margin-top:0;

    margin-bottom:16px;
}

#cuatro87-diagnostic-app .c87-summary-card p{

    margin:0;

    color:var(--c87-text-soft);

    line-height:1.9;
}

/* ======================================================
   KPI GRID
   ====================================================== */

#cuatro87-diagnostic-app .c87-kpi-grid{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:20px;
}

#cuatro87-diagnostic-app .c87-kpi-card{

    background:var(--c87-black-2);

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

    border-radius:20px;

    padding:24px;

    text-align:center;
}

#cuatro87-diagnostic-app .c87-kpi-title{

    font-size:13px;

    color:var(--c87-text-soft);

    margin-bottom:10px;

    text-transform:uppercase;

    letter-spacing:.05em;
}

#cuatro87-diagnostic-app .c87-kpi-value{

    font-size:36px;

    font-weight:800;

    color:var(--c87-green);
}
/* ======================================================
   OPPORTUNITIES
   ====================================================== */

#cuatro87-diagnostic-app .c87-opportunities{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:20px;
}

#cuatro87-diagnostic-app .c87-opportunity{

    background:var(--c87-black-2);

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

    border-radius:20px;

    padding:24px;

    text-align:center;

    font-weight:700;

    transition:.25s ease;
}

#cuatro87-diagnostic-app .c87-opportunity:hover{

    border-color:rgba(176,249,0,.35);

    transform:translateY(-2px);
}

/* ======================================================
   SERVICES
   ====================================================== */

#cuatro87-diagnostic-app .c87-services{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:20px;
}

#cuatro87-diagnostic-app .c87-service-card{

    background:linear-gradient(
        180deg,
        rgba(176,249,0,.06),
        rgba(176,249,0,.02)
    );

    border:1px solid rgba(176,249,0,.15);

    border-radius:20px;

    padding:28px;

    transition:.25s ease;
}

#cuatro87-diagnostic-app .c87-service-card:hover{

    transform:translateY(-3px);

    border-color:rgba(176,249,0,.35);
}

#cuatro87-diagnostic-app .c87-service-card h3{

    margin-top:0;

    margin-bottom:12px;

    color:var(--c87-white);
}

#cuatro87-diagnostic-app .c87-service-card p{

    margin:0;

    color:var(--c87-text-soft);

    line-height:1.7;
}

/* ======================================================
   CALENDAR
   ====================================================== */

#cuatro87-diagnostic-app .c87-calendar-section{

    background:var(--c87-black-2);

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

    border-radius:24px;

    padding:32px;
}

#cuatro87-diagnostic-app .c87-calendar-section h2{

    margin-top:0;

    margin-bottom:20px;
}

#cuatro87-diagnostic-app .c87-calendar-wrap{

    width:100%;

    min-height:700px;

    background:var(--c87-black-3);

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

    border-radius:20px;

    overflow:hidden;
}

/* ======================================================
   PLACEHOLDER
   ====================================================== */

#cuatro87-diagnostic-app .c87-placeholder{

    padding:24px;

    border-radius:16px;

    background:rgba(255,255,255,.03);

    border:1px dashed var(--c87-border);
}

#cuatro87-diagnostic-app .c87-placeholder p{

    margin:0;

    color:var(--c87-text-soft);
}

/* ======================================================
   TABLET
   ====================================================== */

@media (max-width: 1024px){

    #cuatro87-diagnostic-app{

        padding:24px;
    }

    #cuatro87-diagnostic-app .c87-layout{

        grid-template-columns:1fr;
    }

    #cuatro87-diagnostic-app .c87-sidebar{

        position:relative;

        top:auto;
    }

    #cuatro87-diagnostic-app .c87-kpi-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    #cuatro87-diagnostic-app .c87-services{

        grid-template-columns:1fr;
    }

    #cuatro87-diagnostic-app .c87-opportunities{

        grid-template-columns:1fr;
    }
}

/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 768px){

    #cuatro87-diagnostic-app{

        padding:18px;
    }

    #cuatro87-diagnostic-app .c87-sidebar{

        display:none;
    }

    #cuatro87-diagnostic-app .c87-step-card{

        padding:24px;
    }

    #cuatro87-diagnostic-app .c87-title{

        font-size:28px;
    }

    #cuatro87-diagnostic-app .c87-navigation{

        flex-direction:column;
    }

    #cuatro87-diagnostic-app .c87-btn-primary,
    #cuatro87-diagnostic-app .c87-btn-secondary{

        width:100%;
    }

    #cuatro87-diagnostic-app .c87-kpi-grid{

        grid-template-columns:1fr;
    }

    #cuatro87-diagnostic-app .c87-score-value{

        font-size:56px;
    }

    #cuatro87-diagnostic-app .c87-loader-screen h2{

        font-size:26px;
    }

    #cuatro87-diagnostic-app .c87-calendar-wrap{

        min-height:500px;
    }
}

/* ======================================================
   SMALL MOBILE
   ====================================================== */

@media (max-width: 480px){

    #cuatro87-diagnostic-app .c87-step-card{

        padding:20px;
    }

    #cuatro87-diagnostic-app .c87-title{

        font-size:24px;
    }

    #cuatro87-diagnostic-app input,
    #cuatro87-diagnostic-app select,
    #cuatro87-diagnostic-app textarea{

        padding:14px;
    }

    #cuatro87-diagnostic-app .c87-score-value{

        font-size:48px;
    }
}

/* ======================================================
   END FILE
   VERSION 1.0
   ====================================================== */