/* Reset básico */
* {
    margin: 0; /* Remove a margem padrão */
    padding: 0; /* Remove o padding padrão */
    box-sizing: border-box; /* Garante que o padding e a borda são incluídos na largura e altura totais dos elementos */
}

/* Estilos gerais do corpo */
body {
    font-family: Arial, sans-serif; /* Define a fonte padrão como Arial */
    background-color: #f4f4f4; /* Cor de fundo da página */
    color: #333; /* Cor do texto padrão */
}
/* Container principal */
.container {
    max-width: 1000px; /* Define a largura máxima como 1000 pixels */
    margin: 0 auto; /* Centraliza o container horizontalmente */
    padding: 20px; /* Espaçamento interno do container */
    background-color: #fff; /* Cor de fundo do container */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adiciona uma sombra ao redor do container */
    border-radius: 10px; /* Bordas arredondadas do container */
}




/* Estilos para o cabeçalho */
.header {
    background: linear-gradient(-45deg, #117F1E, #00C851, #FF007F, #FF77CC, #99FF99, #117F1E);
    background-size: 600% 600%;
    animation: degradeColorido 20s ease infinite;
    color: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
    border-bottom: 3px solid #fff;
    border-radius: 0 0 12px 12px;
}

@keyframes degradeColorido {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.header h1 {
    margin: 0; /* Remove a margem do título */
    font-size: 24px; /* Define o tamanho da fonte do título */
    font-weight: bold; /* Define o título como negrito */
}

/* Navegação do cabeçalho */
.header-nav {
    margin-top: 10px; /* Espaçamento acima da navegação */
}

.header-nav ul {
    list-style: none; /* Remove os marcadores de lista */
    padding: 0; /* Remove o padding da lista */
    margin: 0; /* Remove a margem da lista */
    display: flex; /* Exibe os itens da lista em um layout flexível */
    flex-wrap: wrap; /* Permite a quebra de linha dos itens quando necessário */
    justify-content: center; /* Centraliza os itens da lista */
}

.header-nav ul li {
    margin: 5px 15px; /* Espaçamento entre os itens da lista */
}

.header-nav ul li a {
    color: #fff; /* Cor do texto dos links */
    text-decoration: none; /* Remove a sublinha dos links */
    padding: 10px 20px; /* Espaçamento interno dos links */
    border-radius: 5px; /* Bordas arredondadas dos links */
    transition: background-color 0.3s, transform 0.3s; /* Transição suave para mudanças de cor e transformação */
}

.header-nav ul li a:hover {
    background-color: #575757; /* Cor de fundo dos links ao passar o mouse */
    transform: translateY(-2px); /* Eleva o link ligeiramente ao passar o mouse */
}


/* Container de login */
/* Estilo para a div de login */
.login-container {
    /* Define a largura máxima da div como 400 pixels */
    max-width: 800px;
    /* Centraliza a div horizontalmente usando margens automáticas */
    margin: 0 auto;
    /* Adiciona um preenchimento interno de 20 pixels em todos os lados */
    padding: 20px;
    /* Define a cor de fundo da div como um tom de cinza claro */
    background-color: #0BDF44;
    /* Arredonda os cantos da div com um raio de 5 pixels */
    border-radius: 5px;
    /* Adiciona uma sombra à div para dar profundidade */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Estilo para o formulário dentro da div de login */
/* Estilo para o formulário dentro da div de login */
.login-container form {
    /* Define o formulário como um contêiner flexível */
    display: flex;
    /* Alinha os elementos do formulário lado a lado */
    flex-direction: row;
    /* Permite que os elementos do formulário quebrem para a próxima linha se necessário */
    flex-wrap: wrap;
    /* Adiciona um espaçamento entre os elementos do formulário */
    gap: 10px;
}


/* Estilo para o elemento select e os campos de entrada de email, senha e botão de envio */
.login-container select,
.login-container input[type="email"],
.login-container input[type="password"],
.login-container input[type="submit"] {
    /* Adiciona uma margem inferior de 10 pixels para separar os elementos */
    margin-bottom: 15px;
    /* Adiciona um preenchimento interno de 10 pixels em todos os lados */
    padding: 15px;
    /* Remove a borda dos elementos */
    border: none;
    /* Arredonda os cantos dos elementos com um raio de 3 pixels */
    border-radius: 3px;
}

/* Estilo específico para o elemento select */
.login-container select {
    /* Remove a aparência padrão do elemento select */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Define a cor de fundo do elemento select como branco */
    background-color: #fff;
    /* Adiciona uma imagem de seta para baixo ao fundo do elemento select */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1.4 4.4l.7-.7L6 7.6l3.9-3.9.7.7z'/%3E%3C/svg%3E");
    /* Impede a repetição da imagem de fundo */
    background-repeat: no-repeat;
    /* Posiciona a imagem de fundo à direita e centralizada verticalmente */
    background-position: right 10px center;
    /* Adiciona um preenchimento à direita para acomodar a imagem de seta */
    padding-right: 30px;
}

/* Estilo específico para os campos de entrada de email e senha */
.login-container input[type="email"],
.login-container input[type="password"] {
    /* Define a cor de fundo dos campos de entrada como branco */
    background-color: #fff;
}

/* Estilo específico para o botão de envio */
.login-container input[type="submit"] {
    /* Define a cor de fundo do botão de envio como verde */
    background-color: #4CAF50;
    /* Define a cor do texto do botão de envio como branco */
    color: #fff;
    /* Muda o cursor para um ponteiro ao passar o mouse sobre o botão de envio */
    cursor: pointer;
}

/* Media query para telas com largura máxima de 480 pixels */
@media screen and (max-width: 480px) {
    /* Ajusta a largura máxima da div de login para 100% em telas menores */
    .login-container {
        max-width: 100%;
        /* Reduz o preenchimento interno da div de login para 10 pixels em telas menores */
        padding: 10px;
    }
}
/* Estilos para o rodapé */
footer {
    background-color: #333; /* Cor de fundo do rodapé */
    color: #fff; /* Cor do texto do rodapé */
    text-align: center; /* Centraliza o texto do rodapé */
    padding: 10px 0; /* Espaçamento interno vertical do rodapé */
    position: fixed; /* Fixa o rodapé na parte inferior da página */
    bottom: 0; /* Posiciona o rodapé no final da página */
    width: 100%; /* Define a largura do rodapé para 100% */
}

/* Estilos para o menu */
.menu {
    background-color: #fff; /* Cor de fundo do menu */
    padding: 15px; /* Espaçamento interno do menu */
    border-radius: 5px; /* Bordas arredondadas do menu */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adiciona uma sombra ao redor do menu */
}

.menu h2 {
    margin-top: 0; /* Remove a margem superior do título do menu */
}

.menu ul {
    list-style: none; /* Remove os marcadores de lista */
    padding: 0; /* Remove o padding da lista */
    margin: 0; /* Remove a margem da lista */
}

.menu ul li {
    margin: 10px 0; /* Espaçamento entre os itens da lista */
}

.menu ul li a {
    text-decoration: none; /* Remove a sublinha dos links */
    color: #333; /* Cor do texto dos links */
    background-color: #eaeaea; /* Cor de fundo dos links */
    padding: 10px 15px; /* Espaçamento interno dos links */
    border-radius: 4px; /* Bordas arredondadas dos links */
    display: block; /* Exibe os links como blocos */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor */
}

.menu ul li a:hover {
    background-color: #ccc; /* Cor de fundo dos links ao passar o mouse */
}

/* Estilos para tabelas */
table {
    width: 100%; /* Largura total da tabela */
    border-collapse: collapse; /* Colapsa as bordas da tabela */
    margin: 20px 0; /* Espaçamento vertical da tabela */
    overflow-x: auto; /* Adiciona barra de rolagem horizontal se necessário */
}

table th,
table td {
    border: 1px solid #ddd; /* Bordas das células da tabela */
    padding: 8px; /* Espaçamento interno das células da tabela */
    text-align: left; /* Alinha o texto à esquerda */
}

table th {
    background-color: #009879; /* Cor de fundo do cabeçalho da tabela */
    color: #ffffff; /* Cor do texto do cabeçalho da tabela */
}

table tr:nth-child(even) {
    background-color: #f3f3f3; /* Cor de fundo das linhas pares da tabela */
}

table tr:hover {
    background-color: #f1f1f1; /* Cor de fundo das linhas ao passar o mouse */
}

.table-action {
    text-decoration: none; /* Remove a sublinha dos links de ação */
    color: #009879; /* Cor do texto dos links de ação */
    margin-right: 10px; /* Espaçamento à direita dos links de ação */
}

.table-action:hover {
    text-decoration: underline; /* Adiciona sublinha aos links de ação ao passar o mouse */
}

/* Ajuste para tabelas em dispositivos móveis */
@media (max-width: 768px) {
    .container {
        padding: 10px; /* Reduz o espaçamento interno do container em dispositivos móveis */
    }
    
    table, thead, tbody, th, td, tr {
        display: block; /* Exibe os elementos da tabela como blocos */
        width: 100%; /* Define a largura dos elementos da tabela para 100% */
    }
    
    table tr {
        margin-bottom: 15px; /* Espaçamento inferior das linhas da tabela */
    }
    
    table td {
        text-align: right; /* Alinha o texto à direita */
        padding-left: 50%; /* Espaçamento interno à esquerda das células */
        position: relative; /* Define a posição relativa das células */
    }
    
    table td::before {
        content: attr(data-label); /* Adiciona o conteúdo do atributo data-label */
        position: absolute; /* Define a posição absoluta */
        left: 10px; /* Define a posição à esquerda */
        width: calc(50% - 20px); /* Define a largura das células antes */
        padding-right: 10px; /* Adiciona padding à direita */
        white-space: nowrap; /* Evita a quebra de linha */
        text-align: left; /* Alinha o texto à esquerda */
    }
    
    table th {
        display: none; /* Esconde o cabeçalho da tabela */
    }
}

/* Estilos para mensagens de erro */
.error-message {
    color: red; /* Cor do texto das mensagens de erro */
    font-weight: bold; /* Define o texto como negrito */
}

/* Estilos para grupos de formulário */
.form-group {
    margin-bottom: 15px; /* Espaçamento inferior dos grupos de formulário */
}

.form-group label {
    display: block; /* Exibe os rótulos como blocos */
    margin-bottom: 5px; /* Espaçamento inferior dos rótulos */
    font-weight: bold; /* Define os rótulos como negrito */
}

.form-group input,
.form-group select {
    width: 100%; /* Define a largura dos inputs e selects para 100% */
    padding: 8px; /* Espaçamento interno dos campos do formulário */
    box-sizing: border-box; /* Inclui padding e borda na largura total */
}

.form-group input[type="submit"] {
    width: auto; /* Define a largura automática dos botões de envio */
    background-color: #4CAF50; /* Cor de fundo dos botões de envio */
    color: #fff; /* Cor do texto dos botões de envio */
    border: none; /* Remove as bordas dos botões de envio */
    cursor: pointer; /* Define o cursor como ponteiro ao passar o mouse sobre os botões de envio */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor */
}

.form-group input[type="submit"]:hover {
    background-color: #45a049; /* Cor de fundo dos botões de envio ao passar o mouse */
}

/* Estilos para navegação dos painéis de administração */
.admin-panel-nav ul {
    display: flex; /* Exibe os itens da lista em um layout flexível */
    flex-wrap: wrap; /* Permite a quebra de linha dos itens quando necessário */
    justify-content: center; /* Centraliza os itens da lista */
    padding: 0; /* Remove o padding da lista */
    margin: 0; /* Remove a margem da lista */
    list-style: none; /* Remove os marcadores de lista */
}

.admin-panel-nav ul li {
    flex: 1 1 calc(25% - 20px); /* Flexível para 4 itens por linha com margem */
    margin: 10px; /* Espaçamento ao redor dos itens da lista */
    text-align: center; /* Centraliza o texto dos itens */
}

.admin-panel-nav ul li a {
    background-color: #4CAF50; /* Cor de fundo dos links */
    color: white; /* Cor do texto dos links */
    padding: 15px 0; /* Espaçamento interno vertical dos links */
    border-radius: 8px; /* Bordas arredondadas dos links */
    text-decoration: none; /* Remove a sublinha dos links */
    transition: background-color 0.3s, color 0.3s, transform 0.3s; /* Transição suave para mudanças de cor e transformação */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ao redor dos links */
    display: block; /* Exibe os links como blocos */
    height: 100px; /* Define a altura fixa dos links */
    display: flex; /* Exibe os links em um layout flexível */
    align-items: center; /* Alinha os itens verticalmente no centro */
    justify-content: center; /* Centraliza os itens dentro dos links */
}

.admin-panel-nav ul li a:hover {
    background-color: #45a049; /* Cor de fundo dos links ao passar o mouse */
    transform: translateY(-2px); /* Eleva os links ligeiramente ao passar o mouse */
}

/* Ajustes para navegação em dispositivos móveis */
@media (max-width: 768px) {
    .admin-panel-nav ul li {
        flex: 1 1 calc(50% - 20px); /* Flexível para 2 itens por linha */
    }
}

@media (max-width: 480px) {
    .admin-panel-nav ul li {
        flex: 1 1 100%; /* Flexível para 1 item por linha */
    }
}

/* Dropdown container */
.dropdown {
    position: relative; /* Define a posição relativa do container */
    display: inline-block; /* Exibe o container como um bloco inline */
}

/* Dropdown button */
.dropbtn {
    background-color: #117f1e; /* Cor de fundo do botão */
    color: white; /* Cor do texto do botão */
    padding: 10px; /* Espaçamento interno do botão */
    border: none; /* Remove as bordas do botão */
    cursor: pointer; /* Define o cursor como ponteiro ao passar o mouse */
    border-radius: 5px; /* Bordas arredondadas do botão */
    transition: background-color 0.3s, transform 0.3s; /* Transição suave para mudanças de cor e transformação */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none; /* Esconde o conteúdo por padrão */
    position: absolute; /* Define a posição absoluta do conteúdo */
    background-color: #0C6741; /* Cor de fundo do conteúdo */
    min-width: 160px; /* Largura mínima do conteúdo */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Adiciona sombra ao redor do conteúdo */
    z-index: 1; /* Define a ordem de empilhamento */
    border-radius: 5px; /* Bordas arredondadas do conteúdo */
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black; /* Cor do texto dos links */
    padding: 12px 16px; /* Espaçamento interno dos links */
    text-decoration: none; /* Remove a sublinha dos links */
    display: block; /* Exibe os links como blocos */
    border-radius: 5px; /* Bordas arredondadas dos links */
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #198610; /* Cor de fundo dos links ao passar o mouse */
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block; /* Exibe o conteúdo ao passar o mouse */
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #575757; /* Cor de fundo do botão ao passar o mouse */
    transform: translateY(-2px); /* Eleva o botão ligeiramente ao passar o mouse */
}

/* CSS para a página de resultados */

/* Container centralizado */
.resultado-container {
    max-width: 600px; /* Largura máxima do container */
    margin: 50px auto; /* Espaçamento vertical e centralização horizontal do container */
    padding: 20px; /* Espaçamento interno do container */
    background-color: #fff; /* Cor de fundo do container */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adiciona uma sombra ao redor do container */
    border-radius: 10px; /* Bordas arredondadas do container */
    text-align: center; /* Centraliza o texto */
}

/* Título da página */
.resultado-container h2 {
    font-size: 24px; /* Tamanho da fonte do título */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
    color: #fff; /* Cor do texto do título */
}

/* Parágrafo de resultado */
.resultado-container p {
    font-size: 18px; /* Tamanho da fonte do parágrafo */
    color: #fff; /* Cor do texto do parágrafo */
    margin-bottom: 20px; /* Espaçamento abaixo do parágrafo */
}

/* Link para voltar ao painel */
.resultado-container a {
    display: inline-block; /* Exibe o link como bloco inline */
    background-color: #4CAF50; /* Cor de fundo do link */
    color: white; /* Cor do texto do link */
    padding: 10px 20px; /* Espaçamento interno do link */
    border-radius: 5px; /* Bordas arredondadas do link */
    text-decoration: none; /* Remove a sublinha do link */
    transition: background-color 0.3s, transform 0.3s; /* Transição suave para mudanças de cor e transformação */
}

.resultado-container a:hover {
    background-color: #45a049; /* Cor de fundo do link ao passar o mouse */
    transform: translateY(-2px); /* Eleva o link ligeiramente ao passar o mouse */
}

/* Estilos específicos para a seção de detalhes do plano de treino */
.detalhes-plano-container {
    max-width: 900px; /* Largura máxima do container */
    margin: 20px auto; /* Espaçamento vertical e centralização horizontal do container */
    padding: 20px; /* Espaçamento interno do container */
    background-color: #fff; /* Cor de fundo do container */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adiciona uma sombra ao redor do container */
    border-radius: 10px; /* Bordas arredondadas do container */
}

.detalhes-plano-container h2 {
    text-align: center; /* Centraliza o texto do título */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

.detalhes-plano-container p {
    margin: 10px 0; /* Espaçamento vertical dos parágrafos */
    line-height: 1.6; /* Altura da linha dos parágrafos */
}

.detalhes-plano-container h3 {
    margin-top: 30px; /* Espaçamento acima do subtítulo */
    margin-bottom: 20px; /* Espaçamento abaixo do subtítulo */
}

.detalhes-plano-container ul {
    list-style: none; /* Remove os marcadores de lista */
    padding: 0; /* Remove o padding da lista */
}

.detalhes-plano-container ul li {
    background-color: #f9f9f9; /* Cor de fundo dos itens da lista */
    margin-bottom: 10px; /* Espaçamento abaixo dos itens da lista */
    padding: 15px; /* Espaçamento interno dos itens da lista */
    border-left: 5px solid #4CAF50; /* Borda esquerda dos itens da lista */
    border-radius: 5px; /* Bordas arredondadas dos itens da lista */
}

.detalhes-plano-container ul li strong {
    display: block; /* Exibe os elementos como blocos */
    margin-bottom: 5px; /* Espaçamento abaixo dos elementos */
    color: #333; /* Cor do texto dos elementos */
}

.detalhes-plano-container ul li:hover {
    background-color: #e9e9e9; /* Cor de fundo dos itens da lista ao passar o mouse */
}

.detalhes-plano-container ul li:nth-child(even) {
    background-color: #f2f2f2; /* Cor de fundo dos itens pares da lista */
}

@media (max-width: 768px) {
    .detalhes-plano-container {
        padding: 10px; /* Reduz o espaçamento interno do container em dispositivos móveis */
    }
}

/* Estilos para as seções da página inicial */
.section {
    margin: 20px 0; /* Espaçamento vertical entre seções */
    padding: 20px; /* Espaçamento interno das seções */
    background-color: #fff; /* Cor de fundo das seções */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra ao redor das seções */
    border-radius: 10px; /* Bordas arredondadas das seções */
}

/* Estilos para os títulos das seções */
.section h2 {
    margin-bottom: 15px; /* Espaçamento abaixo dos títulos */
    font-size: 24px; /* Tamanho da fonte dos títulos */
    color: #333; /* Cor dos títulos */
}

/* Estilos para os artigos */
.article {
    margin-bottom: 20px; /* Espaçamento abaixo dos artigos */
}

.article h3 {
    margin-bottom: 10px; /* Espaçamento abaixo dos subtítulos dos artigos */
    font-size: 20px; /* Tamanho da fonte dos subtítulos dos artigos */
    color: #009879; /* Cor dos subtítulos dos artigos */
}

.article p {
    line-height: 1.6; /* Altura da linha dos parágrafos */
    color: #555; /* Cor dos parágrafos */
}

/* Estilos para o container do formulário */
.form-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Estilos para os grupos de formulário */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Estilos para o container do mapa */
#map-container {
    margin: 20px 0;
    height: 400px;
}

#map {
    width: 100%;
    height: 100%;
}

/* Estilos para o botão de envio */
.form-group input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-group input[type="submit"]:hover {
    background-color: #45a049;
}

/* Estilos para navegação do painel do usuário do site */
.site-panel-nav ul {
    display: flex; /* Exibe os itens da lista em um layout flexível */
    flex-wrap: wrap; /* Permite a quebra de linha dos itens quando necessário */
    justify-content: center; /* Centraliza os itens da lista */
    padding: 0; /* Remove o padding da lista */
    margin: 0; /* Remove a margem da lista */
    list-style: none; /* Remove os marcadores de lista */
}

.site-panel-nav ul li {
    flex: 1 1 calc(25% - 20px); /* Flexível para 4 itens por linha com margem */
    margin: 10px; /* Espaçamento ao redor dos itens da lista */
    text-align: center; /* Centraliza o texto dos itens */
}

.site-panel-nav ul li a {
    background-color: #4CAF50; /* Cor de fundo dos links */
    color: white; /* Cor do texto dos links */
    padding: 15px 0; /* Espaçamento interno vertical dos links */
    border-radius: 8px; /* Bordas arredondadas dos links */
    text-decoration: none; /* Remove a sublinha dos links */
    transition: background-color 0.3s, color 0.3s, transform 0.3s; /* Transição suave para mudanças de cor e transformação */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ao redor dos links */
    display: block; /* Exibe os links como blocos */
    height: 100px; /* Define a altura fixa dos links */
    align-items: center; /* Alinha os itens verticalmente no centro */
    justify-content: center; /* Centraliza os itens dentro dos links */
}

.site-panel-nav ul li a:hover {
    background-color: #45a049; /* Cor de fundo dos links ao passar o mouse */
    transform: translateY(-2px); /* Eleva os links ligeiramente ao passar o mouse */
}

/* Ajustes para navegação em dispositivos móveis */
@media (max-width: 768px) {
    .site-panel-nav ul li {
        flex: 1 1 calc(50% - 20px); /* Flexível para 2 itens por linha */
    }
}

@media (max-width: 480px) {
    .site-panel-nav ul li {
        flex: 1 1 100%; /* Flexível para 1 item por linha */
    }
}

.error {
    color: red;
}

/* Estilos para alimentos */
.alimentos-container {
    display: flex; /* Exibe os itens em um layout flexível */
    flex-wrap: wrap; /* Permite a quebra de linha dos itens */
    gap: 20px; /* Espaçamento entre os itens */
    padding: 20px; /* Espaçamento interno do container */
}

.alimento-item {
    border: 1px solid #ddd; /* Bordas dos itens */
    border-radius: 5px; /* Bordas arredondadas dos itens */
    padding: 10px; /* Espaçamento interno dos itens */
    flex: 1 1 calc(25% - 40px); /* Define a largura flexível dos itens */
    box-sizing: border-box; /* Inclui padding e borda na largura total */
    display: flex; /* Exibe os itens em um layout flexível */
    justify-content: space-between; /* Espaça os itens igualmente */
    align-items: center; /* Alinha os itens verticalmente no centro */
}

.alimento-item input {
    margin-left: 10px; /* Espaçamento à esquerda do input */
}

.form-alimentos {
    display: flex; /* Exibe os itens em um layout flexível */
    flex-direction: column; /* Define a direção dos itens como coluna */
    align-items: center; /* Alinha os itens no centro */
}

.controle-selecao {
    margin-bottom: 20px; /* Espaçamento inferior do controle de seleção */
}

.busca-form {
    display: flex; /* Exibe os itens em um layout flexível */
    justify-content: center; /* Centraliza os itens */
    margin-bottom: 20px; /* Espaçamento inferior do formulário de busca */
}

.input-busca {
    padding: 10px; /* Espaçamento interno do input */
    font-size: 16px; /* Tamanho da fonte do input */
    width: 80%; /* Largura do input */
    max-width: 500px; /* Largura máxima do input */
    border: 1px solid #ccc; /* Bordas do input */
    border-radius: 4px 0 0 4px; /* Bordas arredondadas do input */
}

.btn-busca {
    padding: 10px; /* Espaçamento interno do botão de busca */
    font-size: 16px; /* Tamanho da fonte do botão de busca */
    border: 1px solid #007BFF; /* Bordas do botão de busca */
    background-color: #007BFF; /* Cor de fundo do botão de busca */
    color: #fff; /* Cor do texto do botão de busca */
    border-radius: 0 4px 4px 0; /* Bordas arredondadas do botão de busca */
    cursor: pointer; /* Define o cursor como ponteiro ao passar o mouse sobre o botão */
}

.btn-busca:hover {
    background-color: #0056b3; /* Cor de fundo do botão de busca ao passar o mouse */
}

.form-alimentos {
    display: flex; /* Exibe os itens em um layout flexível */
    flex-direction: column; /* Define a direção dos itens como coluna */
    align-items: center; /* Alinha os itens no centro */
}

.controle-selecao {
    margin-bottom: 20px; /* Espaçamento inferior do controle de seleção */
}

.alimentos-lista {
    display: flex; /* Exibe os itens em um layout flexível */
    flex-wrap: wrap; /* Permite a quebra de linha dos itens */
    gap: 20px; /* Espaçamento entre os itens */
}

.alimento-item {
    flex: 1 1 calc(25% - 20px); /* Define a largura flexível dos itens */
    border: 1px solid #ddd; /* Bordas dos itens */
    border-radius: 5px; /* Bordas arredondadas dos itens */
    padding: 10px; /* Espaçamento interno dos itens */
    box-sizing: border-box; /* Inclui padding e borda na largura total */
    display: flex; /* Exibe os itens em um layout flexível */
    justify-content: space-between; /* Espaça os itens igualmente */
    align-items: center; /* Alinha os itens verticalmente no centro */
    background-color: #f9f9f9; /* Cor de fundo dos itens */
}

.alimento-nome {
    font-size: 16px; /* Tamanho da fonte do nome do alimento */
}

.controle-salvar {
    margin-top: 20px; /* Espaçamento superior do controle de salvar */
}

.btn-salvar {
    padding: 10px 20px; /* Espaçamento interno do botão de salvar */
    font-size: 16px; /* Tamanho da fonte do botão de salvar */
    background-color: #28a745; /* Cor de fundo do botão de salvar */
    color: #fff; /* Cor do texto do botão de salvar */
    border: none; /* Remove as bordas do botão de salvar */
    border-radius: 4px; /* Bordas arredondadas do botão de salvar */
    cursor: pointer; /* Define o cursor como ponteiro ao passar o mouse sobre o botão */
}

.btn-salvar:hover {
    background-color: #218838; /* Cor de fundo do botão de salvar ao passar o mouse */
}

.select-categoria {
    padding: 10px; /* Espaçamento interno do select de categoria */
    font-size: 16px; /* Tamanho da fonte do select de categoria */
    border: 1px solid #ccc; /* Bordas do select de categoria */
}

.btn-todos {
    padding: 10px; /* Espaçamento interno do botão todos */
    font-size: 16px; /* Tamanho da fonte do botão todos */
    border: 1px solid #007BFF; /* Bordas do botão todos */
    background-color: #007BFF; /* Cor de fundo do botão todos */
    color: #fff; /* Cor do texto do botão todos */
    border-radius: 4px; /* Bordas arredondadas do botão todos */
    cursor: pointer; /* Define o cursor como ponteiro ao passar o mouse sobre o botão */
    text-decoration: none; /* Remove a sublinha dos links */
}

.btn-todos:hover {
    background-color: #0056b3; /* Cor de fundo do botão todos ao passar o mouse */
}
/* Classe para estilizar os links dos menus */
.menu-link {
    padding: 10px 20px; /* Espaçamento interno */
    font-size: 16px; /* Tamanho da fonte */
    text-decoration: none; /* Remove a sublinha dos links */
    color: #fff; /* Cor do texto dos links */
    background-color: #007BFF; /* Cor de fundo dos links */
    border-radius: 5px; /* Bordas arredondadas dos links */
    transition: background-color 0.3s, transform 0.3s; /* Transição suave para mudanças de cor e transformação */
    display: inline-block; /* Exibe o link como um bloco inline */
    margin: 5px; /* Espaçamento ao redor dos links */
}

.menu-link:hover {
    background-color: #0056b3; /* Cor de fundo dos links ao passar o mouse */
    transform: translateY(-2px); /* Eleva o link ligeiramente ao passar o mouse */
}
/* Mensagem de sucesso */
.mensagem-sucesso {
    color: green; /* Cor verde para a mensagem de sucesso */
    font-weight: bold; /* Texto em negrito */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Alinhamento horizontal dos botões */
.botoes-horizontal {
    display: flex; /* Layout flexível */
    justify-content: space-between; /* Espaço entre os botões */
    margin-top: 20px; /* Espaçamento superior */
}

.botoes-horizontal button {
    flex: 1; /* Cada botão ocupa o mesmo espaço */
    margin: 0 10px; /* Espaçamento entre os botões */
}
a.link-detalhes-dieta {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

a.link-detalhes-dieta:hover {
    background-color: #45a049;
    transform: translateY(-2px);
}

/* Adicione seus estilos personalizados aqui */
.alimento {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
}

.alimento.selecionado {
    background-color: #4CAF50;
    color: white;
}

.dias-semana button, .refeicoes button {
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.dias-semana button:hover, .refeicoes button:hover {
    background-color: #ddd;
}

.btn-selecao {
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
}

.btn-selecao.ativo {
    background-color: #FF5733;
}

.alimentos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.alimento {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    background-color: white;
}

.alimento.selecionado {
    background-color: #4CAF50;
    color: white;
}

.filtro-categoria {
    margin: 10px 0;
}

.filtro-categoria select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.btn-selecao {
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-selecao.ativo {
    background-color: #FF5733;
}

.btn-selecao:hover {
    background-color: #45a049;
}

.alimentos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.alimento {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    background-color: white;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.alimento.selecionado {
    background-color: #4CAF50;
    color: white;
}

.alimento:hover {
    background-color: #f1f1f1;
}

.filtro-categoria {
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.filtro-categoria label {
    margin-right: 10px;
}

.filtro-categoria select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z" fill="%23333"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    font-size: 16px;
    color: #333;
    transition: border-color 0.3s ease;
}

.filtro-categoria select:focus {
    border-color: #4CAF50;
    outline: none;
}

.filtro-categoria select:hover {
    border-color: #4CAF50;
}
.btn-selecao {
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
}

.btn-selecao.ativo {
    background-color: #FF5733;
}

.alimentos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.alimento {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    background-color: white;
}

.alimento.selecionado {
    background-color: #4CAF50;
    color: white;
}

.filtro-categoria {
    margin: 10px 0;
}

.filtro-categoria select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    font-size: 16px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.filtro-categoria select:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.filtro-categoria label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-adicionar {
    background-color: #28a745; /* Cor de fundo verde */
    color: #fff; /* Cor do texto branca */
    padding: 5px 15px; /* Preenchimento pequeno para não aumentar a altura da linha */
    text-decoration: none; /* Remove sublinhado */
    border-radius: 5px; /* Arredonda os cantos */
    font-size: 14px; /* Tamanho da fonte menor */
    border: none; /* Remove a borda padrão */
    cursor: pointer; /* Define o cursor como pointer */
    transition: background-color 0.3s, transform 0.3s; /* Adiciona transições para suavizar efeitos */
}

.btn-adicionar:hover {
    background-color: #218838; /* Cor de fundo ao passar o mouse */
    transform: translateY(-2px); /* Efeito de elevação ao passar o mouse */
}
.input-quantidade {
    width: 60px; /* Largura do campo */
    padding: 5px; /* Preenchimento */
    font-size: 14px; /* Tamanho da fonte */
    border: 1px solid #ccc; /* Borda */
    border-radius: 5px; /* Arredonda os cantos */
    outline: none; /* Remove o contorno padrão */
    transition: border-color 0.3s, box-shadow 0.3s; /* Adiciona transições para suavizar efeitos */
}

.input-quantidade:focus {
    border-color: #007BFF; /* Cor da borda ao focar */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra ao focar */
}

.input-quantidade::-webkit-inner-spin-button,
.input-quantidade::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Remove os botões de spin no Chrome/Safari */
    margin: 0; /* Remove margens */
}

.input-quantidade:invalid {
    border-color: #dc3545; /* Cor da borda para valor inválido */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); /* Sombra para valor inválido */
}
.menu-categorias {
    text-align: center;
    margin: 5px auto; /* Reduz a margem para diminuir espaço em branco */
    background-color: #f8f9fa;
    padding: 5px; /* Reduz o preenchimento para diminuir espaço em branco */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    width: 100%; /* Garante que a div ocupe 100% da largura disponível */
}

.menu-categorias ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Garante que os itens se alinhem corretamente em telas menores */
    gap: 10px;
}

.menu-categorias li {
    display: inline-block;
}

.menu-categorias a {
    text-decoration: none;
    color: #fff; /* Cor do texto branca */
    font-weight: bold;
    padding: 10px 20px;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 5px;
    display: block;
    background-color: #007BFF; /* Cor de fundo azul */
}

.menu-categorias a:hover {
    background-color: #0056b3; /* Cor de fundo azul escuro ao passar o mouse */
    color: #fff; /* Mantém a cor do texto branca ao passar o mouse */
}

/* Responsivo */
@media (max-width: 768px) {
    .menu-categorias ul {
        flex-direction: row; /* Alinha os itens horizontalmente em telas menores */
        gap: 5px; /* Reduz o espaço entre os itens */
    }

    .menu-categorias a {
        padding: 8px 10px; /* Ajusta o preenchimento para caber melhor em telas menores */
        font-size: 14px; /* Ajusta o tamanho da fonte para caber melhor em telas menores */
    }
}
.search-container {
    margin: 10px 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.search-field {
    width: 80%;
    max-width: 400px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.compras-container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.compras-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.venda {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.venda.pendente {
    background-color: #f8d7da;
    color: #721c24;
}

.venda.pago {
    background-color: #d4edda;
    color: #155724;
}

.venda.cancelado {
    background-color: #fff3cd;
    color: #856404;
}

.venda h3 {
    margin: 0 0 10px 0;
    color: inherit;
}

.venda p {
    margin: 5px 0;
    color: inherit;
}

.venda ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.venda ul li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.venda ul li:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.6);
}

.venda ul li:last-child {
    border-bottom: none;
}

.venda .item-cabecalho {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.venda .item-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.venda .item-coluna {
    flex: 1;
    padding: 5px 10px;
    text-align: center;
}

.venda .item-coluna:first-child {
    flex: 2;
    text-align: left;
}

.venda .total-geral {
    text-align: right;
    font-weight: bold;
    margin-top: 10px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

@media (max-width: 768px) {
    .venda .item-cabecalho, .venda .item-linha {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
    }

    .venda .item-coluna {
        text-align: left;
        padding: 5px 0;
    }

    .venda .total-geral {
        text-align: left;
    }
}
.update-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.update-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.update-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.update-form input[type="text"],
.update-form input[type="date"],
.update-form input[type="email"],
.update-form input[type="password"],
.update-form input[type="number"],
.update-form input[type="tel"],
.update-form input[type="url"],
.update-form select,
.update-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.update-form textarea {
    height: 100px;
    resize: vertical;
}

.update-form button {
    width: 100%;
    padding: 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.update-form button:hover {
    background-color: #45a049;
}