/* Remove as margens e espaçamentos padrão dos elementos e faz o tamanho incluir a borda e o preenchimento */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

/* Define as configurações gerais do corpo da pagina */
body {
background-color: #05052d;
color: white;
font-family: Arial, sans-serif;
min-height: 100vh;
}

.barra-rodape {
  background-color: #0e0e4d; /* Define a cor de fundo do rodape */
  color: #ffffff; /* Define a cor do texto do rodape */
  text-align: center; /* Centraliza o texto do rodape */
  padding: 10px; /** Define o espaçamento interno do rodape */
  display: flex; /** Define o modelo de layout flexível para o rodape */
  position: fixed;/** Define a posição fixa do rodape */
  left: 0; /* Define a posição do rodape à esquerda da tela */
  right: 0; /* Garante o preenchimento total nas duas pontas */
  bottom: 0;/* Define a posição do rodape na parte inferior da tela */
  font-size: 12px; /* Define o tamanho da fonte do rodape */
  width: 100%;/* Garante que o rodape ocupe toda a largura da tela */
  
  /* Centraliza o texto/conteúdo dentro do rodape */
  justify-content: center; 
  align-items: center; 
}

/* Organiza a caixa principal usando o modelo flexível e ocupa toda a altura da tela */
.caixa-principal {
display: flex;
min-height: 100vh;
}

/* Define o tamanho e a aparência do menu lateral */
.menu {
width: 105px;
min-height: 100vh;
border-right: 1px solid #18d9e8;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
padding: 5px;
}

/* Define o tamanho, posição e forma da imagem da logo */
.logo {
width: 90px;
height: 85px;
object-fit: cover;
margin-bottom: 5px;
}

/* Define a aparência dos links dentro do menu */
.menu a {
display: block;
color: #35c9e9;
text-decoration: none;
font-size: 13px;
font-weight: bold;
padding: 6px 2px;
border-radius: 5px;
}


.texto input {
  background-color: #6baafd;
}

/* Define a aparência e o espaço reservado para os ícones do menu */
.icone {
display: inline-block;
width: 18px;
font-size: 14px;
}

/* Define a organização e o espaço da área principal do conteúdo */
.conteudo {
flex: 1;
padding: 10px;
max-width: 900px;
}

/* Define o tamanho, borda, formato e posição da barra */
.barra {
width: 175px;
height: 14px;
border: 1px solid #30308d;
border-radius: 10px;
margin: 0 auto 10px auto;
color: #7777aa;
font-size: 9px;
padding-left: 7px;
}



/* Define a aparência geral das caixas de conteúdo */
.caixa {
border: 1px solid #3131a0;
border-radius: 5px;
padding: 10px;
margin-bottom: 6px;
}

/* Define a aparência dos títulos principais */
.titulo {
color: #91a0ee;
text-align: center;
font-size: 20px;
margin-bottom: 5px;
}

/* Define a aparência dos títulos que ficam alinhados à esquerda */
.titulo-esquerda {
color: rgb(101, 135, 228);
font-size: 17px;
margin-bottom: 5px;
}

/* Define a aparência dos subtítulos */
.subtitulo {
color: #91a0ee;
font-size: 13px;
font-weight: bold;
text-align: center;
margin-bottom: 8px;
}

/* Define o tamanho e o espaçamento das linhas dos textos */
.texto {
font-size: 13px;
line-height: 1.35;
}

/* Define o espaçamento e o tamanho dos textos da lista */
.lista {
padding-left: 18px;
font-size: 12px;
line-height: 1.8;
}

/* Organiza os elementos da linha lado a lado usando flexbox */
.linha {
display: flex;
gap: 6px;
}

/* Faz com que as colunas ocupem o espaço disponível de forma igual */
.coluna {
flex: 1;
}

/* Define a aparência dos numeros */
.numero {
color: #91a0ee;
font-weight: bold;
}

/* Cria e configura o circulo usado na pagina */
.circulo {
width: 62px;
height: 62px;
border-radius: 50%;
background-color: #8997ed;
margin: 8px auto;
display: flex;
align-items: center;
justify-content: center;
color: #05052d;
font-weight: bold;
}

/* Define a aparência dos botões e links que utilizam a classe "botao" */
.botao {
display: inline-block;
padding: 7px 12px;
background-color: #15156b;
border: 1px solid #30d8e8;
border-radius: 5px;
color: white;
text-decoration: none;
margin-top: 8px;
}

/* Altera a cor de fundo do botão quando o mouse passa sobre ele */
.botao:hover {
background-color: #22228a;
}

/* Link normal com uma linha inferior customizada */
a {
  text-decoration: none;
  border-bottom: 2px solid #007BFF; /* Linha mais afastada e controlavel */
  padding-bottom: 2px;             /* Espaço entre o texto e a linha */
}

/* Esconde a linha ou muda de cor no hover */
a:hover {
  border-bottom-color: #6933ff;    /* Muda a cor da linha ao passar o mouse */
}