/* =====================================================
   LISTA DE PRESENÇA
   Estilo responsivo para celular e desktop
   ===================================================== */


/* =====================================================
   CONFIGURAÇÃO GERAL
   ===================================================== */

* {

    box-sizing: border-box;

}



body {

    margin: 0;

    padding: 20px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f2f2f2;

}



/* =====================================================
   CONTAINER PRINCIPAL
   ===================================================== */

.container {

    width: 100%;

    max-width: 500px;

    margin: auto;

    background: #ffffff;

    padding: 25px;

    border-radius: 12px;

}



/* =====================================================
   TÍTULO
   ===================================================== */

h1 {

    text-align: center;

    margin-top: 0;

    font-size: 28px;

}



/* =====================================================
   CAMPOS
   ===================================================== */

.campo {

    margin-bottom: 20px;

}



label {

    display: block;

    font-weight: bold;

    margin-bottom: 8px;

}



select {

    width: 100%;

    padding: 12px;

    font-size: 16px;

    border-radius: 8px;

    border: 1px solid #ccc;

}



/* =====================================================
   BOTÕES SUPERIORES
   ===================================================== */

.botoes {

    display: flex;

    gap: 10px;

    margin-bottom: 20px;

}



button {

    flex: 1;

    padding: 14px;

    border: none;

    border-radius: 8px;

    font-size: 16px;

    cursor: pointer;

}



/* =====================================================
   BOTÃO MARCAR TODOS
   ===================================================== */

#marcarTodos {

    background: #198754;

    color: white;

}



/* =====================================================
   BOTÃO DESMARCAR TODOS
   ===================================================== */

#desmarcarTodos {

    background: #dc3545;

    color: white;

}



/* =====================================================
   LISTA DE ALUNOS
   ===================================================== */

.lista {

    border: 1px solid #ddd;

    border-radius: 10px;

    padding: 15px;

    margin-bottom: 20px;

}



.lista h2 {

    margin-top: 0;

    font-size: 20px;

}



.aluno {

    display: flex;

    align-items: center;

    padding: 12px 5px;

    border-bottom: 1px solid #eee;

    font-size: 18px;

}



.aluno:last-child {

    border-bottom: none;

}



.aluno input {

    width: 22px;

    height: 22px;

    margin-right: 12px;

}



/* =====================================================
   BOTÃO EMBARQUE
   ===================================================== */

#embarque {

    width: 100%;

    background: #6f42c1;

    color: white;

    font-weight: bold;

    font-size: 18px;

    margin-bottom: 10px;

}



#embarque:hover {

    opacity: 0.9;

}



/* =====================================================
   BOTÃO SALVAR PRESENÇA
   ===================================================== */

#salvar {

    width: 100%;

    background: #0d6efd;

    color: white;

    font-weight: bold;

    font-size: 18px;

}



#salvar:hover {

    opacity: 0.9;

}



/* =====================================================
   MENSAGEM
   ===================================================== */

#mensagem {

    margin-top: 20px;

    text-align: center;

    font-weight: bold;

}



/* =====================================================
   AJUSTE PARA TELAS PEQUENAS
   ===================================================== */

@media(max-width:400px){

    body {

        padding: 10px;

    }


    .container {

        padding: 15px;

    }


    h1 {

        font-size: 22px;

    }


    .botoes {

        flex-direction: column;

    }


    button {

        width: 100%;

    }

}