/* Reset e base */
html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  
}

body {
  
  background: #fff;
  
}

*, *::before, *::after {
  box-sizing: inherit;
}
/* HEADER */
header {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  background: linear-gradient(to bottom, #022957, #0055bc);
  border-bottom: 2px solid #f2f2f2;
  color: white;
  padding: 0 20px;
  border-radius: 0 0 25px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  overflow: visible;
  z-index: 2;
  height: 60px;
  box-shadow: 0 4px 3px -3px rgba(0, 0, 0, 0.8);
  margin-bottom: 20px;;
}
.mensagem-header {
  display: none;}

.login-header {
  position: absolute;
  right: 50px;             /* cola no canto direito */
  bottom: 12px;        /* sobresai o header */
  width: 100px;
  z-index: 10;
  background: linear-gradient(to bottom, #d4d4d4, #f4f4f4);
  border: 2px solid white;
  border-radius: 5px;
  color: rgb(47, 39, 39);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  overflow: visible;
  
  height: 30px;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
  font-size: 12px;
  font-weight: bold;
  
}
/* Submenu dentro do botão Login */
.submenu-login {
  display: none;
  position: absolute;
  top: 107%;       /* logo abaixo do botão */
  right: -5px;
  background: linear-gradient(to bottom, #e3e3e3, #f4f4f4);
  border: 2px solid white;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  width: 130px;
  z-index: 10;
  overflow: hidden;
}

/* Links do submenu */
.submenu-login a {
  display: block;
  padding: 8px 12px;
  color: #022957;
  text-decoration: none;
  
  font-size: 13px;
  text-align: left;
}

.submenu-login a:hover {
  background-color: #0077ff;
  color: white;
}

/* Exibe o submenu ao passar o mouse */
.login-header:hover .submenu-login {
  display: block;
}

header img.logo {
  position: absolute;
  bottom: -10px;
  left: 30px;
  height: 55px;
  z-index: 15;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.9));
}


/* MENU PRINCIPAL */
nav.menu-topo {
  position: fixed;
  display: flex;
  gap: 5px;
  justify-content: space-between;
  left: 50%;
  transform: translateX(-50%);
  top: 15px;
  z-index: 10;
  
  width: auto;
  padding: 0 10px;
  
  
}
nav.menu-topo a {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
}

nav.menu-topo a:hover {
  transform: translateY(1px); 
}


.menu-item {
  position: relative;
  width: auto;
   display: hidden;
}

.menu-link {
  display: flex;
  width: 170px;
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  
  box-sizing: border-box;
  margin: 0;
  margin-bottom: 0;
  
  text-shadow: 0 0 5px #404040;
  
}

.menu-link:hover {
  
  text-shadow: 0 0 5px #404040;
  box-shadow: 0 0 10px 1px rgb(255, 255, 255)
}

/* SUBMENU */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  width: 250px;
  z-index: 9999;
}

.submenu a {
  display: block;
  padding: 5px;
  color: #0174BD;
  text-decoration: none;
  font-size: 13px;
  
  text-align: left;
  border-radius: 5px;
  margin: 10px 5px;
}

.submenu a:hover {
  background-color: #009dff;
  color: white;
}

.menu-item:hover .submenu {
  display: block;
}

.contato-header {
  display: flex;
  align-items: center;
  gap: 75px;
  color: white;
  
  font-size: 11px;
  white-space: pre;

}

.contato-header .item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.contato-header i {
  color: #ffffff;
  font-size: 16px;
}
.contato-header a.item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;           /* força cor branca */
  text-decoration: none;    /* remove sublinhado */
  font-size: 13px;
  
}

.contato-header a.item:hover {
  color: #25d366;           /* verde no hover (opcional) */
}

.contato-header a.item i {
  color: #25d366;           /* ícone verde */
  font-size: 14px;
}
/* === MENU MOBILE (MJ CONTABILIDADE) === */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  position: absolute;
  top: -10px;
  right: -40px;
  z-index: 20;
}

/* Painel lateral */
.menu-lateral {
  position: fixed;
  top: 0;
  left: -280px;
  width: 230px !important;
  height: 100%;
  background: linear-gradient(to bottom, #022957, #0055bc);
  box-shadow: 2px 0 10px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  padding: 20px;
  transition: left 0.3s ease;
  z-index: 9999;
}

.menu-lateral a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.menu-lateral a:hover {
  color: #ffd000;
}

.menu-lateral .fechar {
  position: absolute;
  top: 0;
  right: -80px !important;
  font-size: 28px;    /* reduz o tamanho do X */
  line-height: 1;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.menu-lateral .fechar:hover {
  transform: rotate(90deg);
  color: #ffd000;      /* realce visual ao passar o mouse */
}

/* Fundo escurecido */
.fundo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9998;
}

/* Estado ativo */
.menu-ativo .menu-lateral { left: 0; }
.menu-ativo #overlay { opacity: 1; pointer-events: auto; }

/* Itens e submenus */
.mobile-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.mobile-item > a {
  padding: 12px 0;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.mobile-item > a:hover {
  color: #ffd000;
}

/* Submenus */
.submenu-mobile {
  display: none;
  flex-direction: column;
  padding-left: 10px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid #ffd000;
}

.submenu-mobile a {
  font-weight: normal;
  color: #f4f4f4;
  padding: 8px 0;
}

.submenu-mobile a:hover {
  color: #ffd000;
}

/* === RESPONSIVO === */
@media (max-width: 768px) {
  nav.menu-topo,
  .login-header,
  .contato-header {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  header img.logo {
    height: 60px !important;
    left: 15px;
    bottom: -5px;
  }
  header {
    height: 50px !important;
    border-radius: 0 0 15px 15px;
  }
}
/* força todos os submenus a iniciarem fechados */
.submenu-mobile {
  display: none;
  flex-direction: column !important;
}

/* evita herança de flex do container */
.submenu-mobile a {
  display: block !important;
}