body{
font-family: Arial, sans-serif;
margin:0;
background:#f5f5f5;
}

header{
background:#1e3a8a;
color:white;
padding:20px;
display:flex;
justify-content:space-between;
}

nav a{
color:white;
margin-left:20px;
text-decoration:none;
}

.hero{
text-align:center;
padding:80px;
background:white;
}

.hero h2{
font-size:32px;
}

.btn{
background:#2563eb;
color:white;
padding:12px 20px;
text-decoration:none;
border-radius:5px;
}

.features{
padding:40px;
text-align:center;
}

.feature{
margin:20px;
padding:20px;
background:white;
display:inline-block;
width:250px;
border-radius:5px;
}
footer{
margin-top:60px;
padding:20px;
text-align:center;
background:#f0f0f0;
}

.footer-text{
font-size:14px;
color:#555;
}

.login-container{

width:350px;
margin:80px auto;
background:white;
padding:40px;
border-radius:8px;
text-align:center;

}

.login-container input{

width:100%;
padding:10px;
margin:10px 0;
border:1px solid #ccc;
border-radius:5px;

}

.volver{

display:block;
margin-top:15px;
color:#2563eb;
text-decoration:none;

}

body{
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f3f4f6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header{
    background: #1e3a8a;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1{
    margin: 0;
}

nav a{
    color: white;
    margin-left: 20px;
    text-decoration: none;
}

.login-container{
    width: 360px;
    margin: 70px auto;
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.login-container h2{
    margin-bottom: 10px;
}

.login-subtitle{
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}

.login-container form{
    text-align: left;
}

.login-container label{
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

.login-container input{
    width: 100%;
    padding: 10px;
    margin-bottom: 18px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

.btn{
    display: inline-block;
    background: #2563eb;
    color: white;
    padding: 10px 22px;
    text-decoration: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn:hover{
    background: #1d4ed8;
}

.volver{
    display: block;
    margin-top: 18px;
    color: #2563eb;
    text-decoration: none;
    text-align: center;
}

footer{
    margin-top: auto;
    padding: 20px;
    text-align: center;
    background: #f0f0f0;
}

.footer-text{
    font-size: 14px;
    color: #555;
    margin: 0;
}




.dashboard-page{
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

.dashboard-header{
    margin-bottom: 30px;
}

.dashboard-header h2{
    margin-bottom: 8px;
    color: #111827;
}

.dashboard-subtitle{
    color: #4b5563;
    font-size: 15px;
}

.summary-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card{
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    text-align: center;
}

.summary-card h3{
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    color: #1e3a8a;
}

.summary-card p{
    margin: 0;
    color: #374151;
    font-weight: bold;
}

.dashboard-content{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.dashboard-panel{
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.dashboard-panel h3{
    margin-top: 0;
    margin-bottom: 18px;
    color: #1e3a8a;
}

.task-list{
    padding-left: 20px;
    margin: 0;
}

.task-list li{
    margin-bottom: 12px;
    color: #374151;
}

.quick-links{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.quick-btn{
    display: block;
    text-align: center;
    background: #2563eb;
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
}

.quick-btn:hover{
    background: #1d4ed8;
}

@media (max-width: 900px){
    .summary-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-content{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px){
    .summary-grid{
        grid-template-columns: 1fr;
    }

    .quick-links{
        grid-template-columns: 1fr;
    }
}



.board-page{
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
}

.board-header{
    margin-bottom: 25px;
}

.board-header h2{
    margin-bottom: 8px;
    color: #111827;
}

.board-subtitle{
    color: #4b5563;
    font-size: 15px;
}

.board-columns{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    align-items: start;
}

.board-column{
    background: #e5e7eb;
    border-radius: 14px;
    padding: 15px;
    min-height: 420px;
}

.board-column h3{
    text-align: center;
    color: #1e3a8a;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
}

.task-card{
    background: white;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.task-card h4{
    margin: 8px 0;
    font-size: 16px;
    color: #111827;
}

.task-card p{
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 10px;
}

.task-card small{
    color: #1e3a8a;
    font-weight: bold;
}

.task-tag{
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 20px;
}

@media (max-width: 1200px){
    .board-columns{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px){
    .board-columns{
        grid-template-columns: 1fr;
    }
}



.projects-page{
    max-width: 1150px;
    margin: 40px auto;
    padding: 0 20px;
}

.projects-header{
    margin-bottom: 25px;
}

.projects-header h2{
    margin-bottom: 8px;
    color: #111827;
}

.projects-subtitle{
    color: #4b5563;
    font-size: 15px;
}

.project-main-card{
    background: white;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    margin-bottom: 25px;
}

.project-title-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.project-title-row h3{
    margin: 0 0 10px 0;
    color: #1e3a8a;
    font-size: 28px;
}

.project-description{
    margin: 0;
    color: #4b5563;
    line-height: 1.6;
    max-width: 750px;
}

.project-status{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.status-progress{
    background: #dbeafe;
    color: #1d4ed8;
}

.project-info-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.project-info-card{
    background: #f9fafb;
    border-radius: 12px;
    padding: 18px;
}

.project-info-card h4{
    margin: 0 0 8px 0;
    color: #1e3a8a;
    font-size: 16px;
}

.project-info-card p{
    margin: 0;
    color: #374151;
    font-weight: bold;
}

.project-sections-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.project-panel{
    background: white;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    margin-bottom: 25px;
}

.project-panel h3{
    margin-top: 0;
    margin-bottom: 15px;
    color: #1e3a8a;
}

.project-panel p{
    color: #374151;
    line-height: 1.7;
}

.project-list{
    margin: 0;
    padding-left: 20px;
    color: #374151;
}

.project-list li{
    margin-bottom: 10px;
}

.progress-area{
    margin-bottom: 25px;
}

.progress-label{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #374151;
}

.progress-bar{
    width: 100%;
    height: 14px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill{
    height: 100%;
    background: #2563eb;
    border-radius: 999px;
}

.deliverables-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.deliverable-card{
    background: #f9fafb;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
}

.deliverable-card h4{
    margin: 0 0 8px 0;
    color: #1e3a8a;
}

.deliverable-card p{
    margin: 0;
    font-weight: bold;
    color: #374151;
}

@media (max-width: 950px){
    .project-info-grid,
    .deliverables-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .project-sections-grid{
        grid-template-columns: 1fr;
    }

    .project-title-row{
        flex-direction: column;
    }
}

@media (max-width: 600px){
    .project-info-grid,
    .deliverables-grid{
        grid-template-columns: 1fr;
    }
}


.teams-page{
    max-width: 1150px;
    margin: 40px auto;
    padding: 0 20px;
}

.teams-header{
    margin-bottom: 25px;
}

.teams-header h2{
    margin-bottom: 8px;
    color: #111827;
}

.teams-subtitle{
    color: #4b5563;
    font-size: 15px;
}

.team-main-card{
    background: white;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    margin-bottom: 25px;
}

.team-title-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.team-title-row h3{
    margin: 0 0 10px 0;
    color: #1e3a8a;
    font-size: 28px;
}

.team-description{
    margin: 0;
    color: #4b5563;
    line-height: 1.6;
    max-width: 750px;
}

.team-status{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.status-active{
    background: #dcfce7;
    color: #15803d;
}

.team-info-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.team-info-card{
    background: #f9fafb;
    border-radius: 12px;
    padding: 18px;
}

.team-info-card h4{
    margin: 0 0 8px 0;
    color: #1e3a8a;
    font-size: 16px;
}

.team-info-card p{
    margin: 0;
    color: #374151;
    font-weight: bold;
}

.members-panel{
    background: white;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    margin-bottom: 25px;
}

.members-panel h3{
    margin-top: 0;
    margin-bottom: 20px;
    color: #1e3a8a;
}

.members-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.member-card{
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
}

.member-card h4{
    margin: 0 0 10px 0;
    color: #111827;
}

.member-role{
    display: inline-block;
    margin-bottom: 12px;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

.member-card p{
    margin: 0;
    color: #4b5563;
    line-height: 1.6;
}

.responsibilities-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.team-panel{
    background: white;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.team-panel h3{
    margin-top: 0;
    margin-bottom: 15px;
    color: #1e3a8a;
}

.team-panel p{
    color: #374151;
    line-height: 1.7;
}

.team-list{
    margin: 0;
    padding-left: 20px;
    color: #374151;
}

.team-list li{
    margin-bottom: 10px;
}

@media (max-width: 950px){
    .team-info-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .members-grid,
    .responsibilities-grid{
        grid-template-columns: 1fr;
    }

    .team-title-row{
        flex-direction: column;
    }
}

@media (max-width: 600px){
    .team-info-grid{
        grid-template-columns: 1fr;
    }
}