/* =====================================================
   WIZARD - NUEVO CASO
   ===================================================== */

:root{

    --wizard-bg:#060b17;
    --wizard-sidebar:#081221;
    --wizard-card:#0d1628;
    --wizard-card-hover:#12203b;

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

    --wizard-primary:#2563eb;
    --wizard-primary-hover:#1d4ed8;

    --wizard-success:#10b981;
    --wizard-danger:#dc2626;
    --wizard-warning:#f59e0b;

    --wizard-text:#ffffff;
    --wizard-text-soft:#cbd5e1;
    --wizard-text-muted:#94a3b8;

    --wizard-radius:22px;

    --wizard-transition:.25s;

}

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

.process-shell{

    width:100%;

    min-height:calc(90vh - 20px);

    display:grid;

    grid-template-columns:320px 1fr;

    gap:30px;

}

.process-sidebar{

    background:var(--wizard-sidebar);

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

    border-radius:24px;

    padding:30px;

    display:flex;

    flex-direction:column;

}

.sidebar-top{

    margin-bottom:35px;

}

.sidebar-top h1{

    font-size:34px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:10px;

}

.gradient-text{

    color:#60a5fa;

}

.sidebar-top p{

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

    line-height:1.7;

    font-size:14px;

}

.process-steps{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.step-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:16px;

    transition:var(--wizard-transition);

    border:1px solid transparent;

}

.step-item span{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#10203d;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    color:white;

    flex-shrink:0;

}

.step-item p{

    font-size:15px;

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

}

.step-item.active{

    background:#10203d;

    border-color:#2563eb;

}

.step-item.active span{

    background:#2563eb;

}

.step-item.active p{

    color:white;

}

/* =====================================================
   CONTENT
===================================================== */

.process-card{

    background:var(--wizard-card);

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

    border-radius:24px;

    padding:34px;

    display:flex;

    flex-direction:column;

    min-height:760px;

}

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

.top-progress{

    margin-bottom:35px;

}

.progress-line{

    width:100%;

    height:8px;

    border-radius:999px;

    background:#132544;

    overflow:hidden;

}

.progress-fill-line{

    width:0;

    height:100%;

    background:#2563eb;

    transition:.35s;

}

.progress-points{

    margin-top:18px;

    display:grid;

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

}

.progress-point{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#132544;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;

}

.progress-point.active{

    background:#2563eb;

}

/* =====================================================
   PANELS
===================================================== */

.wizard-panel{

    display:none;

    animation:wizardFade .25s ease;

}

.wizard-panel.active{

    display:block;

}

@keyframes wizardFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.panel-heading{

    margin-bottom:28px;

}

.panel-kicker{

    display:inline-block;

    margin-bottom:10px;

    color:#60a5fa;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.panel-heading h2{

    font-size:30px;

    margin-bottom:10px;

}

.panel-heading p{

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

    line-height:1.7;

}

/* =====================================================
   STEP 1
===================================================== */

.data-sections{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

}

.data-card{

    background:#101c33;

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

    border-radius:20px;

    padding:24px;

    min-height:120px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    transition:.25s;

}

.data-card:hover{

    transform:translateY(-3px);

    border-color:#2563eb;

    background:#132544;

}

.data-card h3{

    font-size:18px;

    color:white;

    margin-bottom:8px;

}

.data-card p{

    color:#94a3b8;

    font-size:14px;

}

.data-card span{

    font-size:28px;

    color:#60a5fa;

}

/* =====================================================
   CATEGORY GRID
===================================================== */

.category-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(280px,1fr));

    gap:22px;

}

.category-card{

    background:#101c33;

    border:2px solid transparent;

    border-radius:22px;

    padding:26px;

    cursor:pointer;

    transition:.25s;

    text-align:left;

}

.category-card:hover{

    transform:translateY(-4px);

    border-color:#2563eb;

    background:#132544;

}

.category-card.selected{

    border-color:#2563eb;

    background:#19315b;

}

.category-card h3{

    font-size:21px;

    color:white;

    margin-bottom:12px;

}

.category-card p{

    color:#cbd5e1;

    line-height:1.6;

}

/* =====================================================
   SUBCATEGORY GRID
===================================================== */

.subcategory-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(260px,1fr));

    gap:18px;

}

.subcategory-card{

    background:#101c33;

    border:2px solid transparent;

    border-radius:18px;

    padding:22px;

    cursor:pointer;

    transition:.25s;

}

.subcategory-card:hover{

    border-color:#2563eb;

    background:#132544;

}

.subcategory-card.selected{

    border-color:#2563eb;

    background:#19315b;

}

/* =====================================================
   REASON GRID
===================================================== */

.reason-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(260px,1fr));

    gap:18px;

}

.reason-card{

    background:#101c33;

    border:2px solid transparent;

    border-radius:18px;

    padding:22px;

    cursor:pointer;

    transition:.25s;

}

.reason-card:hover{

    border-color:#2563eb;

    background:#132544;

}

.reason-card.selected{

    border-color:#2563eb;

    background:#19315b;

}

.selected-summary{

    margin-bottom:24px;

    padding:18px 20px;

    border-radius:16px;

    background:#09111f;

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

}

.selected-summary span{

    display:block;

    color:#94a3b8;

    font-size:13px;

    margin-bottom:6px;

}

.selected-summary strong{

    color:white;

    font-size:18px;

}

/* =====================================================
   WIZARD ACTIONS
===================================================== */

.wizard-actions{

    margin-top:auto;

    padding-top:35px;

    display:flex;

    justify-content:space-between;

    gap:18px;

}

.secondary-action{

    min-width:180px;

    height:52px;

    border:none;

    border-radius:14px;

    background:#101c33;

    color:white;

    cursor:pointer;

    font-weight:700;

    transition:.25s;

}

.secondary-action:hover{

    background:#16294a;

}

.primary-action{

    min-width:220px;

    height:52px;

    border:none;

    border-radius:14px;

    background:#2563eb;

    color:white;

    cursor:pointer;

    font-weight:700;

    transition:.25s;

}

.primary-action:hover{

    background:#1d4ed8;

}

/* =====================================================
   MODALS
===================================================== */

.modal-overlay{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(4px);

    z-index:999999;

    padding:30px;

}

.modal-overlay.active{

    display:flex;

}

.modal-card{

    width:min(900px,95vw);

    max-height:90vh;

    overflow-y:auto;

    background:#0d1628;

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

    border-radius:24px;

    padding:30px;

    animation:modalOpen .25s ease;

}

.modal-large{

    width:min(1100px,95vw);

}

@keyframes modalOpen{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

    padding-bottom:20px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.modal-header h2{

    color:white;

    font-size:28px;

    font-weight:700;

}

.close-modal{

    width:44px;

    height:44px;

    border:none;

    border-radius:12px;

    background:#101c33;

    color:white;

    font-size:24px;

    cursor:pointer;

    transition:.25s;

}

.close-modal:hover{

    background:#dc2626;

}

/* =====================================================
   FORMS
===================================================== */

.form-grid{

    display:grid;

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

    gap:18px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group.full{

    grid-column:1/-1;

}

.form-group label{

    color:white;

    font-size:14px;

    font-weight:600;

}

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    min-height:48px;

    padding:12px 14px;

    background:#09111f;

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

    border-radius:12px;

    color:white;

    font-size:14px;

    transition:.25s;

}

.form-group textarea{

    resize:vertical;

    min-height:120px;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:
    0 0 0 3px rgba(37,99,235,.18);

}

.form-group input[type=file]{

    padding:10px;

    cursor:pointer;

}

/* =====================================================
   CHECKBOX
===================================================== */

.checkbox-group{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:24px;

    margin-bottom:28px;

}

.checkbox-group label{

    display:flex;

    align-items:flex-start;

    gap:10px;

    cursor:pointer;

    color:#cbd5e1;

    line-height:1.6;

}

.checkbox-group input{

    margin-top:3px;

}

/* =====================================================
   SAVE BUTTON
===================================================== */

.save-modal-btn{

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    background:#2563eb;

    color:white;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.save-modal-btn:hover{

    background:#1d4ed8;

}

/* =====================================================
   REPRESENTATION
===================================================== */

#representedPersonSection{

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.08);

}

#representedPersonSection h3{

    margin-bottom:20px;

    color:#60a5fa;

}

#powerAttorneyUpload{

    margin-top:20px;

}

/* =====================================================
   VALIDATION
===================================================== */

.validation-grid{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.question-card{

    background:#101c33;

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

    border-radius:20px;

    padding:24px;

}

.question-card h3{

    color:white;

    font-size:20px;

    margin-bottom:20px;

    line-height:1.5;

}

.question-options{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.question-option{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    border-radius:14px;

    background:#09111f;

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

    cursor:pointer;

    transition:.25s;

}

.question-option:hover{

    border-color:#2563eb;

    background:#132544;

}

.question-option input{

    width:18px;

    height:18px;

}

.question-card textarea{

    width:100%;

    margin-top:18px;

    min-height:120px;

    resize:vertical;

}

/* =====================================================
   DOCUMENTS
===================================================== */

.upload-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(300px,1fr));

    gap:22px;

}

.upload-card{

    background:#101c33;

    border:2px dashed rgba(255,255,255,.15);

    border-radius:22px;

    padding:28px;

    text-align:center;

    transition:.25s;

}

.upload-card:hover{

    border-color:#2563eb;

    background:#132544;

}

.upload-card h3{

    color:white;

    margin-bottom:12px;

}

.upload-card p{

    color:#94a3b8;

    line-height:1.6;

    margin-bottom:18px;

}

.upload-card input[type=file]{

    width:100%;

}

/* =====================================================
   PLANS
===================================================== */

.plan-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:22px;

}

.plan-card{

    background:#101c33;

    border:2px solid transparent;

    border-radius:24px;

    padding:28px;

    text-align:left;

    cursor:pointer;

    transition:.25s;

}

.plan-card:hover{

    transform:translateY(-5px);

    border-color:#2563eb;

    background:#132544;

}

.plan-card.selected{

    border-color:#2563eb;

    background:#19315b;

}

.plan-tag{

    display:inline-flex;

    padding:8px 14px;

    border-radius:999px;

    background:#2563eb;

    color:white;

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;

}

.plan-card h3{

    color:white;

    font-size:22px;

    margin-bottom:14px;

}

.plan-card p{

    color:#cbd5e1;

    line-height:1.7;

    margin-bottom:20px;

}

.plan-card strong{

    color:#60a5fa;

}

/* =====================================================
   SUCCESS
===================================================== */

.success-box{

    max-width:720px;

    margin:80px auto;

    text-align:center;

}

.success-icon{

    width:110px;

    height:110px;

    margin:auto;

    margin-bottom:30px;

    border-radius:50%;

    background:#10b981;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:48px;

    font-weight:700;

}

.success-box h2{

    font-size:34px;

    margin-bottom:18px;

}

.success-box p{

    color:#cbd5e1;

    font-size:17px;

    line-height:1.8;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1200px){

    .process-shell{

        grid-template-columns:1fr;

    }

    .process-sidebar{

        order:2;

    }

    .process-card{

        order:1;

    }

}

@media(max-width:900px){

    .form-grid{

        grid-template-columns:1fr;

    }

    .category-grid,

    .subcategory-grid,

    .reason-grid,

    .plan-grid,

    .upload-grid{

        grid-template-columns:1fr;

    }

    .wizard-actions{

        flex-direction:column;

    }

    .secondary-action,

    .primary-action{

        width:100%;

    }

}

@media(max-width:640px){

    .process-card{

        padding:22px;

    }

    .process-sidebar{

        padding:22px;

    }

    .panel-heading h2{

        font-size:24px;

    }

    .sidebar-top h1{

        font-size:28px;

    }

    .modal-card{

        padding:20px;

    }

}