/* estilo.css - padrão azul e branco */

/* Define a fonte, cor de fundo e cor do texto da página */
body {
  font-family: Arial, sans-serif;           /* Fonte principal */
  background-color: #ffffff;                /* Cor de fundo branca */
  color: #003366;                           /* Cor do texto: azul escuro */
  margin: 20px;                             /* Espaçamento externo */
  font-size: 14px;                          /* Tamanho padrão da fonte */
}

/* Centraliza e limita a largura do conteúdo */
.container {
  max-width: 400px;                         /* Largura máxima */
  margin: 0 auto;                           /* Centraliza horizontalmente */
}

/* Estilo para títulos */
h2 {
  text-align: center;                       /* Centraliza o texto */
  color: #003366;                           /* Cor do texto */
  font-size: 20px;                          /* Tamanho do título */
}

/* Estilo da caixa de formulário */
.formulario {
  background-color: #f4f8ff;                /* Fundo azul muito claro */
  padding: 16px;                            /* Espaçamento interno */
  border-radius: 6px;                       /* Cantos arredondados */
  border: 1px solid #cce0ff;                /* Borda azul clara */
  box-shadow: 0 0 6px rgba(0, 51, 102, 0.05); /* Sombra suave */
  font-size: 13px;                          /* Fonte um pouco menor */
}

/* Estilo para rótulos dos inputs */
.formulario label {
  display: block;                           /* Cada label ocupa uma linha */
  margin-bottom: 8px;                       /* Espaçamento abaixo */
  font-weight: bold;                        /* Texto em negrito */
}

/* Estilo para campos de texto, e-mail e senha */
.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="password"] {
  width: 100%;                              /* Ocupa toda a largura disponível */
  padding: 6px;                             /* Espaçamento interno */
  border: 1px solid #3399ff;                /* Borda azul */
  border-radius: 4px;                       /* Cantos arredondados */
  outline: none;                            /* Remove borda de foco padrão */
  box-sizing: border-box;                   /* Inclui padding e border no width */
  margin-top: 3px;                          /* Espaçamento acima */
  font-size: 13px;                          /* Tamanho da fonte */
}

/* Estilo para botões */
.formulario button,
.formulario input[type="submit"] {
  background-color: #3399ff;                /* Fundo azul */
  color: white;                             /* Cor do texto */
  padding: 8px 14px;                        /* Espaçamento interno */
  border: none;                             /* Remove borda padrão */
  border-radius: 4px;                       /* Cantos arredondados */
  cursor: pointer;                          /* Cursor de clique */
  margin-top: 12px;                         /* Espaço acima */
  font-size: 13px;                          /* Tamanho do texto */
}

/* Hover para botões */
.formulario button:hover,
.formulario input[type="submit"]:hover {
  background-color: #267acc;                /* Azul um pouco mais escuro */
}

/* Mensagens de erro com destaque */
.mensagem-erro {
  background-color: #ffdddd;                /* Fundo vermelho claro */
  border-left: 4px solid #ff5c5c;           /* Borda vermelha à esquerda */
  color: #cc0000;                           /* Texto vermelho escuro */
  padding: 8px;                             /* Espaçamento interno */
  margin-bottom: 12px;                      /* Espaço abaixo */
  border-radius: 4px;                       /* Cantos arredondados */
  font-size: 13px;                          /* Tamanho da fonte */
}

/* ===================== */
/* Estilos para Listagem */
/* ===================== */

/* Estilo para o formulário de busca */
.busca {
  margin-bottom: 20px;                      /* Espaço abaixo do formulário */
  display: flex;                            /* Alinha os itens lado a lado */
  gap: 10px;                                /* Espaço entre input e select */
  align-items: center;                      /* Alinha verticalmente ao centro */
}

/* Estilo para campo de texto e dropdown */
.busca input[type="text"],
.busca select {
  padding: 6px;                             /* Espaço interno */
  border-radius: 4px;                       /* Cantos arredondados */
  border: 1px solid #3399ff;                /* Borda azul */
  font-size: 13px;                          /* Tamanho do texto */
}

/* Estilo para botão de busca */
.busca button {
  padding: 6px 12px;                        /* Espaço interno */
  background-color: #3399ff;                /* Cor de fundo azul */
  color: #fff;                              /* Cor do texto branco */
  border: none;                             /* Sem borda */
  border-radius: 4px;                       /* Cantos arredondados */
  cursor: pointer;                          /* Cursor de clique */
}

/* Hover do botão de busca */
.busca button:hover {
  background-color: #267acc;                /* Azul mais escuro ao passar o mouse */
}

/* Estilo da tabela */
table {
  width: 100%;                              /* Ocupa toda a largura */
  border-collapse: collapse;                /* Remove espaçamento entre células */
}

/* Células da tabela */
th, td {
  padding: 8px;                             /* Espaço interno das células */
  border: 1px solid #ccc;                   /* Borda cinza clara */
  text-align: left;                         /* Alinhamento do conteúdo */
}

/* Botões de ação (editar, excluir) */
.btn {
  padding: 5px 10px;                        /* Espaço interno */
  border: none;                             /* Sem borda */
  color: #fff;                              /* Texto branco */
  cursor: pointer;                          /* Cursor de clique */
  text-decoration: none;                    /* Remove sublinhado */
}

/* Botão editar (azul) */
.btn-editar {
  background-color: #007BFF;                /* Azul padrão */
}

/* Botão excluir (vermelho) */
.btn-excluir {
  background-color: #DC3545;                /* Vermelho padrão */
}

/* Estilo da paginação */
.paginacao {
  margin-top: 15px;                         /* Espaço acima */
  text-align: center;                       /* Centraliza os links */
}

/* Links da paginação */
.paginacao a {
  padding: 6px 12px;                        /* Espaço interno */
  margin: 0 2px;                            /* Espaço entre os links */
  background-color: #f0f0f0;                /* Fundo cinza claro */
  border: 1px solid #ccc;                   /* Borda cinza */
  text-decoration: none;                    /* Remove sublinhado */
  color: #333;                              /* Texto escuro */
}

/* Hover nos links de paginação */
.paginacao a:hover {
  background-color: #ddd;                   /* Fundo cinza mais escuro */
}

/* Define largura proporcional para campos menores */
.campo-pequeno {
  width: 150px;
}

.campo-medio {
  width: 250px;
}

.campo-grande {
  width: 100%; /* continua ocupando toda a largura */
}