@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

body{
  height: 100vh;
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 20px;
  background-color: var(--background-doc);
}

header.cabecalho_principal{
  display: grid;
  padding: 20px;
}

header.cabecalho_principal, main.conteudo_principal{
  background-color: var(--main-background);
  border-radius: 20px;
}

header.cabecalho_principal > div.container_logo{
  padding: 30px 50px 0px 30px;
}

header.cabecalho_principal > div.container_logo > img{
  display: block;
  margin: auto;
  width: 100%;
}

div.theme-toggle-container{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

button.theme-btn{
  color: var(--main);
  font-weight: bold;
  width: 95px;
  height: 45px;
  background-color: transparent;
  border: 1px solid var(--main);
  border-radius: 8px;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

button.theme-btn:hover{
  box-shadow: 2px 4px 5px var(--main-background);
}

button.theme-btn.active{
  background-color: var(--secondary);
  border: none;
}

div.nav_menu{
  margin-bottom: 4em !important;
}

header.cabecalho_principal nav > div.nav_geral{
}

header.cabecalho_principal nav > div.nav_menu, div.nav_geral{
  width: 80%;
  margin: auto;
}

header.cabecalho_principal h2{
  margin-bottom: 1.5em;
}

header.cabecalho_principal h2{
  color: var(--icons);
}

heade.cabecalho_principal .container_link{
  background-color: #102A43;
}

header.cabecalho_principal > nav a{
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 35px;
  margin: auto;
  padding-left: 1em;
  text-decoration: none;
  color: var(--icons);
  font-size: 1.2em;
  border-left-color: transparent;
  border-left-width: 10px;
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

header.cabecalho_principal > nav a:hover{
  color: var(--secondary);
  font-weight: bold;
  border-left-color: var(--secondary);
}

/* --- ADIÇÕES PARA O BOTÃO DE LOGOUT --- */

/* Ajusta o form para não quebrar o layout */
header.cabecalho_principal nav .form-logout {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Clona o estilo da tag <a> mas remove os estilos nativos do <button> */
header.cabecalho_principal > nav button.btn-logout {
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 35px;
  margin: auto;
  padding-left: 1em;
  text-decoration: none;
  color: var(--icons);
  font-size: 1.2em;
  font-family: inherit; /* Garante que a fonte acompanhe o restante */
  border: none; /* Remove a borda padrão do botão */
  border-left-color: transparent;
  border-left-width: 10px;
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* Mantém o mesmo efeito visual no hover */
header.cabecalho_principal > nav button.btn-logout:hover {
  color: var(--secondary);
  font-weight: bold;
  border-left-color: var(--secondary);
}


header.cabecalho_principal > div:last-of-type{
  display: flex;
  justify-content: center;
  align-items: end;
}

header.cabecalho_principal p{
  color: var(--contour-form);
  font-size: 0.8em;
}