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

html,
body{
    font-family:Arial, sans-serif;
    background: #d1f8dd;
/*    background:#f5f5f5;*/
    height: 100%;
}

body{
    display:flex;
    flex-direction:column;
}

main{
    flex:1;
    padding:20px;
    /*min-height:70vh; */
}



header{
    /*background2:#1e293b; */
    background: #3faa4f;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px;
}


footer{
    background: #3faa4f;
/*    background:#1e293b; */
    color:#fff;
    text-align:center;
    padding:15px;
    margin-top:auto;
}



/*
.logo {
    max-width: 120px;
    height: auto;
}
*/

.logo {
    max-width:120px;
    max-height:55px;
    height:auto;
}

.titulo {
    font-size: 2rem;
    font-weight: bold;
}

/*
@media (max-width: 768px) {
    .logo {
        max-width: 90px;
        margin-bottom: 10px;
    }
    .titulo {
        font-size: 1.5rem;
    }
    .topo p {
        font-size: 0.9rem;
    }
    .dropdown {
        margin-top: 10px;
    }
}
*/

@media (max-width:768px){

    .logo{

        max-width:55px;

        max-height:55px;

        margin-bottom:0;

    }

    .titulo{

        font-size:1.35rem;

        margin:0;

    }

    .topo p{

        display:none;

    }

    .dropdown{

        margin-top:0;

    }

    .dropdown .btn span{

        display:none;

    }

}


.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.card{
    /*background:#fff; */
    background: #f8fafc;
    border-radius:8px;
    padding:20px;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
}

@media(max-width:768px){

    header{
        flex-direction:column;
    }

    .menu{
        width:100%;
    }

}

#dropArea
{
    border:2px dashed #0d6efd;

    border-radius:10px;

    padding:40px;

    text-align:center;

    cursor:pointer;

    background:#f8f9fa;

    transition:0.3s;
}

#dropArea:hover
{
    background:#eef5ff;
}

#dropArea.dragover
{
    background:#dbeafe;

    border-color:#198754;
}

#dropTexto
{
    font-size:18px;

    color:#555;
}

#previewBanner
{
    max-width:300px;

    margin-top:15px;

    border-radius:8px;

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






.tarefa-card{

    border:1px solid #ddd;

    border-radius:8px;

    margin-bottom:10px;

    background:#fff;

}

.tarefa-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    padding:10px;

}

.tarefa-titulo{

    font-weight:bold;

}

.tarefa-data{

    font-size:.85rem;

    color:#666;

    margin-right:10px;

}

.tarefa-resumo{

    padding:0 10px 10px 42px;

    color:#555;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


.tarefa-card.aberto
.tarefa-resumo{

    display:none;

}


.tarefa-expandir{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

}

.tarefa-detalhes{

    display:none;

    padding:10px 15px;

    border-top:1px solid #eee;

}

.tarefa-card.aberto
.tarefa-detalhes{

    display:block;

}