/* style.css */
body {
   font-family: sans-serif;
   background-color: #121212; /* Cor de fundo escura */
   color: #ffffff; /* Cor do texto clara */
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
}

header {
   background-color: #1e1e1e; /* Cabeçalho um pouco mais claro */
   padding: 20px 0;
   text-align: center;
   width: 100%;
   border-bottom: 2px solid #6a1b9a; /* Borda inferior roxa */
}

img {
   margin-bottom: 10px;
   max-width: 150px; /* Ajuste conforme necessário */
   height: auto;
   }

h1 {
   color: #f0f0f0;
   margin: 0;
}

main {
   width: 80%;
   max-width: 900px;
   padding: 20px;
   margin-top: 20px;
   margin-bottom: 40px; /* Aumentar a margem inferior para o footer aparecer abaixo */
}

footer {
   background-color: #1e1e1e;
   padding: 20px 0;
   text-align: center;
   width: 100%;
   border-top: 2px solid #6a1b9a; /* Borda superior roxa */
   position: fixed; /* Fixar no rodapé */
   bottom: 0;
}

.action-button, .submit-button, .cancel-button, .add-button, #btn-inicio-footer, .btn-inicio {
   padding: 10px 20px;
   margin: 10px;
   border: none;
   border-radius: 5px;
   color: #ffffff;
   background-color: #6a1b9a; /* Botões roxos */
   cursor: pointer;
   font-size: 1em;
   transition: background-color 0.3s ease;
}

.action-button:hover, .submit-button:hover, .cancel-button:hover, .add-button:hover, #btn-inicio-footer:hover, .btn-inicio:hover {
   background-color: #8e44ad; /* Roxo mais claro no hover */
}

.form-section {
   display: none; /* Inicialmente escondido */
   background-color: #1e1e1e;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   margin-bottom: 20px;
}

.form-section.active {
   display: block; /* Exibir se tiver a classe 'active' */
}

.form-group {
   margin-bottom: 15px;
}

.form-group label {
   display: block;
   margin-bottom: 5px;
   color: #eee;
}

.form-group input, .form-group select {
   width: 100%;
   padding: 10px;
   border: 1px solid #444;
   border-radius: 4px;
   background-color: #333;
   color: #fff;
   box-sizing: border-box; /* Para o padding não aumentar o tamanho total */
}

.response-area {
   margin-top: 20px;
   padding: 15px;
   background-color: #2a2a2a;
   border-radius: 4px;
   color: #fff;
   word-wrap: break-word; /* Evita que o texto saia do container */
   overflow-x: auto; /* Adiciona scroll horizontal se necessário */
}

/* Estilos específicos para 'metrics-container' e métricas adicionadas */
#metrics-container {
   margin-top: 10px;
   border: 1px dashed #555;
   padding: 10px;
   border-radius: 4px;
}

.metric-item {
   background-color: #252525;
   padding: 15px;
   margin-bottom: 10px;
   border-radius: 4px;
   border: 1px solid #444;
}

.metric-item h4 {
   margin-top: 0;
   color: #ddd;
}

.metric-item .form-group label {
   color: #ccc;
}

.metric-remove-button {
   background-color: #d32f2f; /* Vermelho para remover */
   color: white;
   border: none;
   padding: 8px 15px;
   border-radius: 4px;
   cursor: pointer;
   float: right; /* Alinha à direita */
   margin-top: -10px; /* Ajusta a posição vertical */
   transition: background-color 0.3s ease;
}

.metric-remove-button:hover {
   background-color: #f44336; /* Vermelho mais claro no hover */
}

.add-button {
   background-color: #43a047; /* Verde para adicionar */
}

.add-button:hover {
   background-color: #66bb6a; /* Verde mais claro no hover */
}


/* Estilo para a seção de botões iniciais */
#initial-buttons {
   text-align: center;
}

#initial-buttons.active {
   display: flex; /* Exibe os botões horizontalmente */
   flex-direction: column; /* Alinha os botões verticalmente */
   align-items: center; /* Centraliza os botões horizontalmente */
}

#initial-buttons button {
   margin: 10px 0; /* Espaçamento vertical entre os botões */
   width: 200px; /* Largura fixa para os botões */
}


/* Remover a classe 'active' da seção inicial e adicionar às seções de formulário */
#initial-buttons.active + .form-section,
#initial-buttons.active + .form-section + .form-section,
#initial-buttons.active + .form-section + .form-section + .form-section {
   display: none; /* Esconde as seções de formulário quando 'initial-buttons' está ativo */
}