* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: #f4f4f4;
}

.menu-navegacao {
	display: flex;
	justify-content: space-between;
	background-color: #333;
	color: white;
	padding: 5px 15px;
	align-items: center;
	/*box-shadow:0 3px 0 #FF0077; /* linha vermelha */
	/*box-shadow:0 3px 0 #FFF44F ; /* linha vibrante */
	/*box-shadow:0 3px 0 #FFF700; /* amarelo limao */
	/*box-shadow:0 3px 0 #FBE790 ; /* linha vibrante */
	box-shadow:0 3px 0 #7DF9FF; /* eletric blue */
	/* position: fixed; */
}

.nav-links {
	display: flex;
	list-style: none;
}

.nav-links li a {
	color: white;
	text-decoration: none; /* tira linha de link debaixo do menu */
	padding: 5px 10px;
	display: block;
}

.nav-links li a:hover {
	background-color: #00BFFF; /* cor de foco do menu */
	/*background-color: #575757; */
}

/* Escondendo o checkbox e ícone mobile */
#menu-toggle, .menu-icone {
	display: none;
}

/* Dropdown */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #444;
	box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
}
.dropdown:hover .dropdown-content {
	display: block;
}
.dropdown-content li a {
	padding: 10px 12px;
}

.botao-estilizado {
  background-color: #007bff; /* Cor de fundo */
  color: white;              /* Cor do texto */
  padding: 10px 20px;       /* Espaçamento interno */
  border: none;             /* Remove borda padrão */
  border-radius: 9px;       /* Cantos arredondados */
  cursor: pointer;          /* Muda o cursor para mãozinha */
  font-size: 16px;
  transition: background-color 0.3s; /* Transição suave */
  text-decoration: none;	/* retira o risco debaixo do link */
}
/* Efeito ao passar o mouse */
.botao-estilizado:hover {
  background-color: #0056b3;
}
/* Efeito ao clicar */
.botao-estilizado:active {
  transform: scale(0.98); /* Reduz levemente o tamanho */
}

.campo-personalizado {
  width: 90%;                  /* Largura do campo */
  max-width: 400px;             /* Largura máxima */
  padding: 1px 12px;           /* Espaçamento interno */
  font-size: 16px;              /* Tamanho da fonte */
  font-family: Arial, sans-serif; /* Tipo da fonte */
  color: #333;                  /* Cor do texto digitado */
  background-color: #f9f9f9;    /* Cor de fundo */
  border: 4px solid #ccc;       /* Estilo da borda */
  border-radius: 8px;           /* Cantos arredondados */
  outline: none;                /* Remove a borda padrão do navegador ao clicar */
  box-sizing: border-box;       /* Garante que o padding não aumente o tamanho total */
  transition: all 0.3s ease;    /* Suaviza a animação */
}
/* Efeito ao passar o mouse por cima */
.campo-personalizado:hover {
  border-color: #888;
}
/* Efeito quando o campo está selecionado/ativo */
.campo-personalizado:focus {
  border-color: #4CAF50;        /* Cor da borda ao focar */
  background-color: #fff;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); /* Efeito de brilho */
}
/* Estilizando o texto do Placeholder (dica) */
.campo-personalizado::placeholder {
	color: #999;
	font-style: italic;
}

.select-estilizado {
	width: 90%;  /* dimensão horizontal */
	appearance: base-select; /* Habilita a estilização nativa avançada */
	max-width: 400px;        /* Largura máxima */
	background-color: #f0f4f8;
	border: 2px solid #3182ce;
	border-radius: 8px;
	padding: 1px 12px;
	font-size: 16px;
	color: #2d3748;
	cursor: pointer;
}
.select-estilizado:focus {
	outline: none;
	border-color: #2b6cb0;
	box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
}

.select-estilizado2 {
	appearance: base-select; /* Habilita a estilização nativa avançada */
	max-width: 400px;        /* Largura máxima */
	background-color: #f0f4f8;
	border: 2px solid #3182ce;
	border-radius: 8px;
	padding: 1px 12px;
	font-size: 16px;
	color: #2d3748;
	cursor: pointer;
}

.meu-input-data {
	width: 90%;  /* dimensão horizontal */
	height: 25px;
	padding: 5px;  /* vh: porcentagem da altura visível da tela do navegador */
	border: 1px solid #3498db;
	border-radius: 8px;   /* arredonda os cantos de um elemento (ex: border-radius: 15px;) arredonda os quatro cantos por igual - Usar 50% em um quadrado transforma a caixa perfeitamente em um círculo  */
	font-size: 16px;
	color: #333;
	outline: none;
	/* width: 250px;*/
}
/* Remove o ícone de calendário nativo em alguns navegadores */
.meu-input-data::-webkit-calendar-picker-indicator {
	cursor: pointer;
	filter: invert(0.5); /* Altera a cor do ícone */
}
/* Efeito ao focar no campo */
.meu-input-data:focus {
	border-color: #2980b9;
	box-shadow: 0 0 8px rgba(52, 152, 219, 0.3); /* adiciona efeitos de sombra ao redor de elementos HTML */
}

.tabela-padrao {
	width: 50%;  /* dimensão horizontal */
}
.grid-padrao {
	width: 50%;  /* dimensão horizontal */
}


/* Responsividade (Telas menores) */
@media (max-width: 768px) {
	.nav-links {
		display: none;
		flex-direction: column;
		width: 100%;
		position: absolute;
		top: 40px;
		left: 0;
		background-color: #333;
	}
	  
	.menu-icone {
		display: block;
		font-size: 24px;
		cursor: pointer;
	}
	  
	/* Exibe o menu quando o checkbox é marcado */
	#menu-toggle:checked ~ .nav-links {
		display: flex;
	}

	.dropdown-content {
		position: relative;
		box-shadow: none;
	}

	.dropdown:hover .dropdown-content {
		display: none;
	}

	#menu-toggle:checked ~ .nav-links .dropdown-content {
		display: block;
	}

	.tabela-padrao {
		width: 96%;  /* dimensão horizontal */
	}
	.grid-padrao {
		width: 96%;  /* dimensão horizontal */
	}
}