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

:root {
    --white: #fff;

    --gray-50: #f1f1f1;
    --gray-150: #ddd;
    --gray-200: #d0d0d0;
    --gray-300: #a3a3a3;
    --gray-400: #898989;
    --gray-500: #716f6f;
    --gray-600: #595959;
    --gray-700: #333;
    
    --red-100: #d9534f;
    --red-200: #c12e2a;

    --orange-100: #efceb7;
    --orange-300: #Ca6212;

    --green-300: #4CAF50;
    --green-400: #45a049;

    --blue-100: #87CEEB;
    --blue-200: #00BFE0;
    --blue-300: #0073aa;
    --blue-400: #005177;
}

html, body {
    height: 100%;
    background: linear-gradient(to top, var(--blue-100), var(--blue-300)) no-repeat center center fixed, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%2300BFFF" fill-opacity="1" d="M0,128L34.3,154.7C68.6,181,137,235,206,245.3C274.3,256,343,224,411,213.3C480,203,549,213,617,213.3C685.7,213,754,203,823,186.7C891.4,171,960,149,1029,149.3C1097.1,149,1166,171,1234,186.7C1302.9,203,1371,213,1406,218.7L1440,224L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"></path></svg>') no-repeat center center fixed;
}

@media (max-width: 1080px) {
    html {
        font-size: 93.75%;
    }
    /*body {
        flex-direction: column;
    }*/
    header, footer {
        padding: 1rem;
    }
}

@media (max-width: 720px) {
    html {
        font-size: 81.5%;
    }
    header, footer {
        padding: 0.5rem;
    }
	#loginForm {
        width: 100%; /* Flexível em telas pequenas */
        padding: 1rem;
    }
    #userListContainer {
        width: 100%;
    }
    #mainButton {
        padding: 0.75rem 1rem;
        width: 100%; /* Ajusta o botão para ocupar toda a largura */
    }		
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

header {
    width: 100%;
    text-align: center;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
}

footer {
    width: 100%;
    background: var(--blue-300);
    text-align: center;
    padding: 0.5rem;
    position: relative;
    bottom: 0;
    /*width: 100%;*/
    color: var(--white);
}

.esenha {
    margin-top: 0.5rem;
    text-align: right;
}

.esenha > a {
    text-decoration: none;
}

.tituloPagina {
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------------------------
-- inicio: style page Header ------------------------------------------------------------ */
.headerContainer {
    display: flex; 
    justify-content: space-between;
    padding: 0.5rem;
    background-color: var(--blue-100);
    flex-wrap: wrap; /* Permite que os itens se reorganizem em telas menores */
}

#headerPrimary {
    display: flex;
    align-items: center;
    font-size: 1.2rem; /* Ajusta o tamanho da fonte para melhor visualização */
}

#headerDadosUser > span {
    margin-right: 1rem;
    font-weight: bold;
}

#headerDadosUser > button {
    background-color: var(--red-100);
    padding: 0.3rem 0.9rem;
    border-radius: 5px;
    color: var(--white);
    border: none;
    cursor: pointer;
    height: 2rem;
    width: 4rem;
    transition: background-color 0.3s;
}

#headerDadosUser button:hover {
    background-color: var(--red-200);
}

/* Ajustes para telas menores */
@media (max-width: 720px) {
    .headerContainer {
        flex-direction: column; /* Reorganiza os itens em coluna */
        align-items: center;
    }

    #headerPrimary {
        padding: 0.5rem;
        font-size: 1rem; /* Reduz o tamanho da fonte em telas menores */
    }

    #headerDadosUser > button {
        width: 100%; /* O botão ocupa toda a largura disponível */
        padding: 0.5rem;
        height: auto; /* Ajusta a altura para se adaptar ao conteúdo */
    }

    #headerDadosUser > span {
        margin-right: 0;
        text-align: center; /* Centraliza o texto em telas menores */
    }
}

/* --------------------------------fim: style page Header -------------------------------- */


/* ---------------------------------------------------------------------------------------
------------------------------------ inicio: style page Login ---------------------------- */
.sectionLogin {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;  
}

#loginFormContainer > h1 {
    flex: 1;  
    color: var(--gray-50);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Ajusta o tamanho do texto para telas pequenas */
}

#loginForm {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.1);
    width: 100%; /* Flexível para se ajustar a telas pequenas */
    max-width: 20rem;
    margin: 0 auto;
}

#loginForm label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

#loginForm input[type="text"],
#loginForm input[type="password"] {
    width: 100%; 
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.2rem;
}

#loginForm button {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--blue-300);
    border: none;
    color: var(--white);
    font-weight: bold;
    border-radius: 0.2rem;
    cursor: pointer;
}

#loginForm button:hover {
    background-color: var(--blue-400);
}

/* Responsividade para telas menores */
@media (max-width: 600px) {
    #loginFormContainer > h1 {
        font-size: 1.2rem; /* Reduz o tamanho do título para telas muito pequenas */
    }
    
    #loginForm {
        padding: 1rem; /* Reduz o padding para telas pequenas */
        max-width: 18rem; /* Ajuste de largura máxima para dispositivos móveis */
    }
}

/* -------------------------------fim: style page Login ------------------------------- */


/* ---------------------------------------------------------------------------------------
------------------------------------ inicio: style page usuarios ------------------------- */
.sectionUsuarios {
    flex: 1;
    display: flex;
    flex-direction: column; /* Adicionado para stack verticalmente em telas pequenas */
    justify-content: center;
    align-items: center;
    padding: 1rem; /* Adicionado padding para espaçamento em telas pequenas */
    max-width: 50rem;
    margin: 0 auto;
}

.divHeaderUsers, .divHeaderUser {
    display: flex;
    justify-content: space-between;
    /* flex-direction: column; Adicionado para stack verticalmente em telas pequenas */
    align-items: center; /* Alinha itens ao centro em telas pequenas */
    //padding: 0.75rem;
    gap: 0.5rem;
    width: 100%; /* Garantir que os elementos ocupem toda a largura disponível */
}

#divFilter {
    display: flex;
    flex-direction: column; /* Adicionado para stack verticalmente em telas pequenas */
    align-items: center; /* Alinha itens ao centro em telas pequenas */
    margin-bottom: 0.5rem;
    width: 100%; /* Garantir que o filtro ocupe toda a largura disponível */
}

#divFilter > input {
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.5rem; /* Adicionado margem inferior para espaçamento em telas pequenas */
    border: 1px solid var(--gray-200);
    border-radius: 0.2rem;
    width: 100%; /* Flexível em telas pequenas */
    max-width: 18rem; /* Define um máximo para evitar que o campo fique muito largo */
}

#divFilter > button {
    border-radius: 5px;
    color: var(--gray-600);
    border: none;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    background: var(--gray-200);
    transition: background-color 0.3s;
    width: 100%; /* Flexível em telas pequenas */
    max-width: 18rem; /* Define um máximo para o botão */
}

#divFilter button:hover {
    background-color: var(--gray-300);
    color: var(--white);
}

.avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--orange-100);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: var(--white);
}

#userList {
    max-height: 36rem;
    overflow-y: auto;
    width: 100%; /* Garantir que a lista ocupe toda a largura disponível */
}

.user-info {
    flex-grow: 1;
    margin-right: 2.5rem;
}

#users > li {
    padding: 0.5rem 0;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap; /* Flexível para quebra em múltiplas linhas */
    width: 100%; /* Garantir que os itens ocupem toda a largura disponível */
	flex-direction: row;
}

#users > li:hover {
    background-color: var(--gray-50);
    border-radius: 5px;
}

#userListContainer {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.1);
    width: 100%; /* Flexível em telas pequenas */
    max-width: 100%; /* Evita que o contêiner exceda a largura disponível */
    margin: 0 auto;
}

.divHeaderUsers > button,
.user-actions > button {
    padding: 0.5rem;
    border-radius: 5px;
    color: var(--white);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%; /* Flexível em telas pequenas */
    //max-width: 10rem; /* Define um máximo para os botões */
    margin-bottom: 0.5rem; /* Adicionado margem inferior para espaçamento em telas pequenas */
}

.user-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-actions > button {
    margin-left: 0.4rem;
}

.divHeaderUsers button[type="new"] {
    background-color: var(--blue-300);
    /*padding: 0 1.5rem;*/
}

.divHeaderUsers button[type="new"]:hover {
    background-color: var(--blue-400);
}

.user-actions button[type="edit"] {
    background-color: var(--green-300);
}

.user-actions button[type="edit"]:hover {
    background-color: var(--green-400);
}

.user-actions button[type="delete"] {
    background-color: var(--red-100);
}

.user-actions button[type="delete"]:hover {
    background-color: var(--red-200);
}

/* Media Queries para Responsividade */
@media (max-width: 1080px) {
    .sectionUsuarios {
        padding: 0.5rem; /* Reduzir padding em telas médias */
    }
}

@media (max-width: 720px) {
    .sectionUsuarios {
        padding: 0.5rem; /* Reduzir padding em telas pequenas */
    }

    .divHeaderUsers, .divHeaderUser {
        flex-direction: column; /* Stack verticalmente em telas pequenas */
        align-items: stretch; /* Esticar itens para preencher a largura disponível */
    }
}
/* ------------fim: style page usuarios ------------- */


/* ---------------------------------------------------------------------------------------
------------------------------------ inicio: style page usuario -------------------------- */
.sectionUsuario {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem; /* Adicionado padding para espaçamento em telas pequenas */
}

.sec02 {
    width: 100%;
    max-width: 40rem;
    background-color: var(--white);
    padding: 1.5rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin: 0 auto; /* Centraliza o contêiner em relação ao pai */
}

.sec02 span {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--gray-700);
}

.classAlign > div {
    gap: 0.5rem;
}

#userForm{
    display: flex;
    flex-direction: column;
}

.classAlign {
	display: flex;
    flex-direction: column; /* Adicionado para empilhar verticalmente em telas pequenas */
    gap: 0.5rem;
}

.classAlign > div > label {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.classAlign div > input {
	width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    margin-bottom: 1rem;
}

#btSave, #btCancel {
    //padding: 0.75rem;
    color: var(--white);
    border: none;
    cursor: pointer;
    border-radius: 4px;
    //font-size: 1rem;
    width: 100%; /* Flexível para se ajustar a telas pequenas */
    /*max-width: 12rem;  Define um máximo para evitar que o botão fique muito largo */
    //margin-top: 0.5rem; /* Adicionado para espaçamento entre botões */
}

#btCancel {
    //height: 2.5rem;
    background-color: var(--red-100);
}

#btSave {
    background-color: var(--green-300);
}

#btSave:hover {
    background-color: var(--green-400);
}

#btCancel:hover {
    background-color: var(--red-200);
}

/* Media Queries para Responsividade */
@media (max-width: 1080px) {
    .sec02 {
        padding: 1rem; /* Reduzir padding em telas médias */
    }
}

@media (max-width: 720px) {
    .sec02 {
        padding: 0.5rem; /* Reduzir padding em telas pequenas */
    }

    .classAlign {
        flex-direction: column; /* Empilha verticalmente em telas pequenas */
    }

    #btSave, #new, #btCancel {
        width: 100%; /* Ajusta os botões para ocupar toda a largura disponível */
        max-width: 100%; /* Evita que os botões excedam a largura disponível */
    }
}

/* ---------------------------------fim: style page usuario ------------------------------ */

/* ---------------------------------------------------------------------------------------
------------------------------------ inicio: style page presencas ------------------------- */
.sectionPresencas {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 1rem; /* Adicionado padding para espaçamento em telas pequenas */
}

.dvBotoes {
    padding: 0.5rem;
    transition: background-color 0.3s;
    display: flex; /* Alterado para flexível para melhor controle de layout em telas pequenas */
    justify-content: center;
    gap: 0.5rem; /* Adicionado espaçamento entre botões */
}

.dvBotoes > button {
    padding: 0.35rem 1.5rem;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.dvBotoes > button:hover {
    background-color: var(--orange-100);
    color: var(--orange-300);
}

.divHeaderUser {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.classAlign > button,
.divHeaderUser > button {
    padding: 0.5rem;
}

.dadosGetPresencas {
    display: flex;
    /*flex-direction: column;  Empilha verticalmente em telas menores */
    align-items: center; /* Alinha ao centro em telas menores */
	justify-content: center;
    border: 1px solid var(--gray-200);
    border-radius: 5px;
    padding: 0.5rem;
    margin-bottom: 1rem;
    width: 100%; /* Flexível para se ajustar a telas pequenas */
    /*max-width: 30rem;  Define um máximo para evitar que o contêiner fique muito largo */
	
}

#ano {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.2rem;
    margin-right: 1rem;
    text-align: center;
    width: 100%; /* Flexível para se ajustar a telas pequenas */
    max-width: 8rem; /* Define um máximo para evitar que o campo fique muito largo */
}

#slcMes {
    padding: 0.25rem;
    font-size: 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    width: 100%; /* Flexível para se ajustar a telas pequenas */
    max-width: 8rem; /* Define um máximo para evitar que o campo fique muito largo */
	margin-right: 1rem;
}

#btBuscarPresencas {
    border-radius: 5px;
    color: var(--gray-600);
    border: none;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    background: var(--gray-200);
    transition: background-color 0.3s;
    width: 100%; /* Flexível para se ajustar a telas pequenas */
    max-width: 12rem; /* Define um máximo para evitar que o botão fique muito largo */
    margin-top: 0.5rem; /* Adicionado para espaçamento acima do botão */
}

#btBuscarPresencas:hover {
    background-color: var(--gray-300);
    color: var(--white);
}

.presenceListContainer {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.1);
    width: 100%; /* Flexível para se ajustar a telas pequenas */
    max-width: 50rem; /* Define um máximo para evitar que o contêiner fique muito largo */
    margin: 0 auto;
}

#presenceList {
    max-height: 70rem;
    overflow-y: auto;
}

.presencas-info {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

.diasDeAula {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens se movam para a linha seguinte em telas menores */
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Flexível para se ajustar a telas pequenas */
    max-width: 100%; /* Define um máximo para evitar que o contêiner fique muito largo */
}

.diasDeAula > div {
    margin-left: 2rem;
    flex: 1 1 auto; /* Permite que os itens se ajustem e quebrem em múltiplas linhas */
    text-align: center; /* Adicionado para alinhar o texto ao centro */
    padding: 0.5rem; /* Adicionado padding para espaçamento */
}

.diasDeAula div:hover {
    border-radius: 5px;
    background-color: var(--blue-100);
    color: var(--blue-400);
}

/* Media Queries para Responsividade */
@media (max-width: 1080px) {
    .dvBotoes {
        gap: 0.5rem; /* Ajusta o espaçamento entre botões em telas médias */
    }

    .dadosGetPresencas {
        padding: 1rem; /* Ajusta o padding para telas médias */
    }

    #btBuscarPresencas {
        padding: 0.75rem; /* Ajusta o padding para telas médias */
    }
}

@media (max-width: 720px) {
    .sectionPresencas {
        padding: 0.5rem; /* Reduz o padding em telas pequenas */
    }

    .dadosGetPresencas {
        padding: 0.5rem; /* Ajusta o padding para telas pequenas */
    }

    #btBuscarPresencas {
        padding: 0.75rem; /* Ajusta o padding para telas pequenas */
    }

    .diasDeAula {
        flex-direction: column; /* Empilha verticalmente em telas pequenas */
        align-items: flex-start; /* Alinha itens ao início em telas pequenas */
    }

    .diasDeAula > div {
        margin-left: 0; /* Remove o margin-left para telas pequenas */
        margin-bottom: 0.5rem; /* Adicionado margin-bottom para espaçamento entre itens */
        width: 100%; /* Flexível para se ajustar a telas pequenas */
    }
}

/* ------------fim: style page presencas ------------- */