/*==================================================
  RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Inter',sans-serif;
    background:#F5F7FB;
    color:#1E293B;

}

.container{

    max-width:1500px;
    margin:auto;
    padding:24px;

}


/*==================================================
  HEADER
==================================================*/

.header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;

}

.header-left{

    display:flex;
    flex-direction:column;

}

.title{

    font-size:42px;
    font-weight:700;
    color:#0F172A;

}

.subtitle{

    margin-top:5px;

    font-size:16px;
    color:#64748B;

}

.header-right{

    display:flex;
    align-items:center;
    gap:16px;

}

/*============================================*/

.update-info{

    display:flex;
    align-items:center;
    gap:14px;

    background:white;

    border-radius:16px;

    padding:14px 18px;

    border:1px solid #E8EDF5;

    box-shadow:0 5px 18px rgba(15,23,42,.05);

}

.update-icon{

    width:42px;
    height:42px;

    border-radius:12px;

    background:#EFF6FF;

    display:flex;
    justify-content:center;
    align-items:center;

}

.update-icon i{

    color:#2563EB;
    font-size:18px;

}

.update-text{

    display:flex;
    flex-direction:column;

}

.update-text span{

    font-size:12px;
    color:#94A3B8;

}

.update-text strong{

    font-size:14px;
    color:#0F172A;

}

.btn-refresh{

    height:70px;

    padding:0 24px;

    border:none;

    border-radius:16px;

    background:white;

    border:1px solid #E8EDF5;

    cursor:pointer;

    display:flex;
    align-items:center;
    gap:10px;

    font-size:14px;
    font-weight:600;

    transition:.25s;

    box-shadow:0 5px 18px rgba(15,23,42,.05);

}

.btn-refresh:hover{

    background:#2563EB;
    color:white;

}


/*==================================================
  PANEL SUPERIOR
==================================================*/

.top-panel{

    display:grid;

    grid-template-columns:1.35fr 1fr;

    gap:20px;

}


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

.card{

    background:white;

    border-radius:20px;

    padding:20px;

    border:1px solid #EEF2F7;

    box-shadow:0 8px 24px rgba(15,23,42,.05);

}

.card-title{

    font-size:12px;

    font-weight:700;

    color:#64748B;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:20px;

}


/*==================================================
  ESTADO GENERAL
==================================================*/

.status-body{

    display:flex;

    align-items:center;

    gap:28px;

}

.status-chart{

    width:190px;

    min-width:190px;

}

.status-info{

    flex:1;

}

.label{

    display:inline-block;

    background:#EEF4FF;

    color:#2563EB;

    padding:6px 12px;

    border-radius:50px;

    font-size:11px;

    font-weight:700;

    margin-bottom:14px;

}

.status-info h2{

    font-size:24px;

    margin-bottom:12px;

    color:#0F172A;

}

.status-info p{

    font-size:14px;

    color:#64748B;

    line-height:1.6;

    margin-bottom:22px;

}

.next-goal{

    display:flex;

    gap:16px;

    padding:16px;

    background:#F8FBFF;

    border:1px solid #E6F0FF;

    border-radius:16px;

}

.goal-icon{

    width:42px;

    height:42px;

    background:#2563EB;

    color:white;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.next-goal strong{

    display:block;

    font-size:13px;

    margin-bottom:6px;

}

.next-goal span{

    font-size:13px;

    color:#64748B;

    line-height:1.5;

}


/*==================================================
  ROADMAP
==================================================*/

.roadmap{

    overflow:hidden;

}

.roadmap-container{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;

    margin-top:10px;

}

.road-phase{

    flex:1;

    text-align:center;

}

.road-phase h4{

    font-size:15px;

    font-weight:700;

    color:#0F172A;

    line-height:1.4;

    margin-bottom:10px;

}

.road-phase p{

    font-size:13px;

    color:#64748B;

    line-height:1.6;

    margin-bottom:22px;

}

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

@media (max-width: 768px) {

    .roadmap-container{

        display:flex !important;
        flex-direction:column !important;
        gap:25px;
        width:100%;

    }

    .road-phase{

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;

        width:100%;

        text-align:left;

        padding-bottom:20px;

        border-bottom:1px solid #E5E7EB;

    }

    .road-phase:last-child{

        border-bottom:none;
        padding-bottom:0;

    }

    .road-phase h4{

        width:100%;

        font-size:18px;

        margin-bottom:8px;

        line-height:1.3;

    }

    .road-phase p{

        width:100%;

        margin-bottom:15px;

        font-size:14px;

        line-height:1.6;

    }

    .phase-icon{

        width:54px;
        height:54px;

        margin-bottom:12px;

        position:static !important;

    }

    .phase-progress{

        display:none !important;

    }

    .phase-percent{

        margin-top:0;

        font-size:22px;

        font-weight:700;

        color:#2563EB;

    }

}


/*==============================================
ICONO
==============================================*/

.phase-icon{

    width:54px;

    height:54px;

    margin:auto;

    border-radius:50%;

    background:#2563EB;

    color:#FFFFFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    position:relative;

    z-index:2;

}

.phase-icon.disabled{

    background:#EEF2F7;

    color:#64748B;

}


/*==============================================
LINEA
==============================================*/

.phase-progress{

    width:100%;

    height:6px;

    border-radius:20px;

    background:#E8EDF5;

    margin-top:-3px;

    position:relative;

    z-index:1;

}

.phase-progress.active{

    background:#2563EB;

}


/*==============================================
PORCENTAJE
==============================================*/

.phase-percent{

    margin-top:12px;

    font-size:26px;

    font-weight:700;

    color:#2563EB;

}

.road-phase:not(.completed) .phase-percent{

    color:#64748B;

}


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

@media(max-width:900px){

    .roadmap-container{

        flex-direction:column;

        gap:35px;

    }

    .phase-progress{

        display:none;

    }

}


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

@media(max-width:1100px){

    .header{

        flex-direction:column;
        align-items:flex-start;
        gap:20px;

    }

    .header-right{

        width:100%;
        justify-content:space-between;

    }

    .top-panel{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .status-body{

        flex-direction:column;

    }

    .header-right{

        flex-direction:column;

        width:100%;

    }

    .btn-refresh{

        width:100%;
        justify-content:center;

    }

}


/*==================================================
=            AVANCE POR ÁREA
==================================================*/

.areas-grid{

    display:grid;

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

    gap:16px;

    margin-top:18px;

}

/*==============================================*/

.area-card{

    background:#FFFFFF;

    border:1px solid #E8EDF5;

    border-radius:16px;

    padding:16px;

    transition:.25s;

}

.area-card:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(15,23,42,.08);

}

/*==============================================*/

.area-header{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:18px;

}

.area-header h3{

    font-size:18px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:8px;

}

/*==============================================*/

.area-icon{

    width:54px;

    height:54px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

}

.area-icon i{

    font-size:24px;

}

.area-icon.purple{

    color:#7C3AED;

}

.area-icon.orange{

    color:#F97316;

}

.area-icon.green{

    color:#16A34A;

}

.area-icon.blue{

    color:#2563EB;

}

/*==============================================*/

.status{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}

.status i{

    font-size:11px;

}

.approved{

    background:#DCFCE7;

    color:#15803D;

}

.validation{

    background:#FEF3C7;

    color:#B45309;

}

.design{

    background:#DBEAFE;

    color:#2563EB;

}

.pending{

    background:#F1F5F9;

    color:#64748B;

}

/*==============================================*/

.progress-bar{

    width:100%;

    height:7px;

    border-radius:20px;

    background:#E8EDF5;

    overflow:hidden;

    margin-bottom:14px;

}

.progress{

    height:100%;

    border-radius:20px;

}

.progress.green{

    background:#16A34A;

}

.progress.yellow{

    background:#F59E0B;

}

.progress.blue{

    background:#2563EB;

}

.progress.gray{

    background:#CBD5E1;

}

/*==============================================*/

.progress-value{

    font-size:28px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:4px;

}

.area-date{

    font-size:12px;

    color:#64748B;

    margin-bottom:18px;

    line-height:1.5;

}

/*==============================================*/

.area-card hr{

    border:none;

    border-top:1px solid #EDF2F7;

    margin-bottom:14px;

}

/*==============================================*/

.area-footer{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.area-footer small{

    color:#94A3B8;

    font-size:12px;

}

.area-footer span{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#0F172A;

    font-weight:500;

}


/*==================================================
=            OBJETIVOS DEL PROYECTO
==================================================*/

.objectives{

    margin:22px 0;

}

.objectives-grid{

    display:grid;

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

    gap:18px;

    margin-top:18px;

}

/*==============================================*/

.objective-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px;

    border:1px solid #EDF2F7;

    border-radius:16px;

    background:#FFFFFF;

    transition:.25s;

}

.objective-item:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(15,23,42,.06);

}

/*==============================================*/

.objective-icon{

    width:54px;

    height:54px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    background:#F8FAFC;

}

.objective-icon i{

    font-size:24px;

}

/*==============================================*/

.objective-icon.blue{

    color:#2563EB;

}

.objective-icon.indigo{

    color:#4F46E5;

}

.objective-icon.cyan{

    color:#0891B2;

}

.objective-icon.green{

    color:#16A34A;

}

.objective-icon.orange{

    color:#EA580C;

}

/*==============================================*/

.objective-content{

    display:flex;

    flex-direction:column;

}

.objective-content h4{

    font-size:15px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:4px;

}

.objective-content p{

    font-size:13px;

    color:#64748B;

    line-height:1.4;

}


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

@media (max-width:1200px){

    .objectives-grid{

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

    }

}

@media (max-width:768px){

    .objectives-grid{

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

    }

}

@media (max-width:520px){

    .objectives-grid{

        grid-template-columns:1fr;

    }

    .objective-item{

        padding:14px;

    }

}

/*==================================================
=            ENTREGABLES
==================================================*/

@media (max-width:768px){

    .deliverables{

        overflow-x:auto;

    }

    .deliverables-table{

        min-width:700px;

    }

}

.deliverables{

    margin-top:22px;

}

.deliverables-table{

    width:100%;

    border-collapse:collapse;

    margin-top:18px;

}

.deliverables-table thead{

    background:#F8FAFC;

}

.deliverables-table th{

    text-align:left;

    padding:16px;

    font-size:13px;

    font-weight:600;

    color:#64748B;

    border-bottom:1px solid #E8EDF5;

}

.deliverables-table td{

    padding:16px;

    font-size:14px;

    color:#0F172A;

    border-bottom:1px solid #EEF2F7;

}

.deliverables-table tbody tr{

    transition:.25s;

}

.deliverables-table tbody tr:hover{

    background:#FAFBFD;

}

/*==================================================
=            BADGES
==================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}

.badge i{

    font-size:11px;

}

.badge.success{

    background:#DCFCE7;

    color:#15803D;

}

.badge.warning{

    background:#FEF3C7;

    color:#B45309;

}

.badge.info{

    background:#DBEAFE;

    color:#2563EB;

}

.badge.pending{

    background:#F1F5F9;

    color:#64748B;

}

/*==================================================
=            PANEL INFERIOR
==================================================*/
.bottom-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:22px;

}

@media(max-width:768px){

    .bottom-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
=            PRÓXIMAS ACTIVIDADES
==================================================*/

.task-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:18px;

}

/*==============================================*/

.task-item{

    position:relative;

    background:#FFFFFF;

    border:1px solid #E8EDF5;

    border-radius:14px;

    padding:18px 18px 18px 22px;

    transition:.25s;

}

.task-item:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(15,23,42,.06);

}

.task-item::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;

    height:100%;

    background:#2563EB;

    border-radius:14px 0 0 14px;

}

/*==============================================*/

.task-header{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:14px;

}

.task-header i{

    color:#2563EB;

    font-size:10px;

    margin-top:7px;

    flex-shrink:0;

}

.task-header span{

    flex:1;

    font-size:17px;

    font-weight:600;

    color:#0F172A;

    line-height:1.45;

}

/*==============================================*/

.task-info{

    margin-left:20px;

    display:flex;

    gap:24px;

    flex-wrap:wrap;

}

.task-info span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#64748B;

    font-size:14px;

}

.task-info i{

    color:#475569;

    width:16px;

    text-align:center;

}

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

@media(max-width:992px){

    .task-header span{

        font-size:16px;

    }

}

@media(max-width:768px){

    .task-item{

        padding:16px;

    }

    .task-header{

        margin-bottom:12px;

    }

    .task-header span{

        font-size:15px;

    }

    .task-info{

        margin-left:18px;

        flex-direction:column;

        gap:8px;

    }

    .task-info span{

        font-size:13px;

    }

}

@media(max-width:480px){

    .task-item{

        padding:14px;

    }

    .task-header span{

        font-size:14px;

    }

    .task-info{

        margin-left:16px;

    }

    .task-info span{

        font-size:12px;

    }

}

/*==================================================
=            BLOQUEOS
==================================================*/

.block-list{

    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:12px;

}

.block-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;

}

@media(max-width:768px){

    .block-item{

        flex-direction:column;

        align-items:flex-start;

    }

    .level{

        align-self:flex-start;

    }

}

.task-header span,
.block-item strong{

    word-break:break-word;

}

.block-item:last-child{

    border:none;
    padding-bottom:0;

}

.block-item strong{

    display:block;

    font-size:14px;

    color:#0F172A;

    margin-bottom:6px;

}

.block-item small{

    display:flex;

    align-items:center;

    gap:6px;

    color:#64748B;

    font-size:13px;

}

/*==================================================
=            NIVELES
==================================================*/

.level{

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.level.high{

    background:#FEE2E2;

    color:#DC2626;

}

.level.medium{

    background:#FEF3C7;

    color:#B45309;

}

.level.low{

    background:#DCFCE7;

    color:#15803D;

}