*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#eef2f7;
    color:#222;
}

/* HEADER */

header{

    height:70px;

    background:#2563eb;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

    box-shadow:0 2px 10px rgba(0,0,0,.15);

}

.logo{

    font-size:24px;

    font-weight:bold;

}

.usuario{

    display:flex;

    align-items:center;

    gap:20px;

}

.btnLogout{

    background:#dc2626;

    color:#fff;

    text-decoration:none;

    padding:10px 18px;

    border-radius:8px;

    transition:.2s;

}

.btnLogout:hover{

    background:#b91c1c;

}

/* CONTEÚDO */

main{

    max-width:1400px;

    margin:auto;

    padding:30px;

}

/* TOPO CALENDÁRIO */

.calendario-topo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin-bottom:20px;

}

.calendario-topo button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    font-size:20px;

    cursor:pointer;

}

.calendario-topo button:hover{

    background:#1d4ed8;

}

#tituloMes{

    min-width:240px;

    text-align:center;

}

/* DIAS */

.diasSemana{

    display:grid;

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

    gap:12px;

    margin-bottom:12px;

}

.diasSemana div{

    text-align:center;

    font-weight:bold;

    color:#666;

}

/* CALENDÁRIO */

#calendario{

    display:grid;

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

    gap:12px;

}

.dia{

    background:#fff;

    border-radius:12px;

    min-height:150px;

    padding:10px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    transition:.2s;

    cursor:pointer;

}

.dia:hover{

    transform:translateY(-2px);

    box-shadow:0 6px 20px rgba(0,0,0,.15);

}

.numero{

    font-size:22px;

    font-weight:bold;

    margin-bottom:12px;

}

/* LINHAS DOS LINKS */

.linha-codigo{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:8px;

}

/* STATUS */

.status{

    width:10px;

    height:10px;

    border-radius:50%;

    flex-shrink:0;

}

.feito{

    background:#22c55e;

}

.nao-feito{

    background:#ef4444;

}

.parcial{

    background:#facc15;

}

/* CÓDIGO */

.codigo{

    background:#2563eb;

    color:white;

    border-radius:5px;

    padding:4px 8px;

    font-size:13px;

    min-width:42px;

    text-align:center;

}

/* LINK */

.link-btn{
    text-decoration:none;
    color:#2563eb;
    font-size:12px;
}

.link-btn:hover{

    color:#1d4ed8;

}

/* MODAL */

.modal{

    display:none;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

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

    justify-content:center;

    align-items:center;

    z-index:999;

}

.modalBox{

    background:#fff;

    width:700px;

    max-width:95%;

    border-radius:12px;

    padding:25px;

}

.modalHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.fechar{
    font-size:30px;
    cursor:pointer;
	color: red;
}

.cardLink{

    border:1px solid #ddd;

    border-radius:8px;

    padding:15px;

    margin-bottom:15px;

}

.cardLink h3{

    margin-bottom:12px;

}

.cardLink label{

    display:block;

    margin-bottom:5px;

    font-weight:bold;

}

.cardLink input{

    width:100%;

    padding:10px;

    margin-bottom:12px;

    border:1px solid #ccc;

    border-radius:6px;

}

.cardLink select{

    width:100%;

    padding:10px;

    margin-bottom:12px;

    border:1px solid #ccc;

    border-radius:6px;

}

.rodapeModal{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:20px;

}

.btnSalvar{

    background:#22c55e;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:8px;

    cursor:pointer;

}

.btnSalvar:hover{

    background:#16a34a;

}

.btnCancelar{

    background:#ef4444;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:8px;

    cursor:pointer;

}

.btnCancelar:hover{

    background:#dc2626;

}

/* RESPONSIVO */

@media(max-width:900px){

    #calendario{

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

    }

    .diasSemana{

        display:none;

    }

}

/* ========================= */
/* LOGIN */
/* ========================= */

body{

    background:#eef2f7;

}

.login-box{

    width:400px;

    max-width:95%;

    margin:100px auto;

    background:#fff;

    padding:35px;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.login-box h2{

    text-align:center;

    margin-bottom:30px;

    color:#2563eb;

}

.login-box input[type=text],
.login-box input[type=password]{

    width:100%;

    padding:12px;

    border:1px solid #ccc;

    border-radius:8px;

    margin-bottom:15px;

    font-size:15px;

}

.login-box label{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

    color:#666;

    font-size:14px;

}

.login-box button{

    width:100%;

    background:#2563eb;

    color:white;

    border:none;

    padding:12px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    transition:.2s;

}

.login-box button:hover{

    background:#1d4ed8;

}

.login-box p{

    text-align:center;

    margin-top:20px;

}

.login-box a{

    color:#2563eb;

    text-decoration:none;

}

.login-box a:hover{

    text-decoration:underline;

}

.erro{

    background:#fee2e2;

    color:#b91c1c;

    padding:10px;

    border-radius:8px;

    text-align:center;

    margin-bottom:20px;

}