/* -------------------------------------------------------------------------- */
/* 1. ESTILOS GLOBAIS E BASE (Do seu código) */
/* -------------------------------------------------------------------------- */
/* Variáveis de Cores */
:root {
  --color-primary: #000080; /* Azul Escuro Principal */
  --color-van: #1a1bad;
  --color-secondary: #1a1a9a; /* Azul Secundário para botões/destaques */
  --color-dark: #000000;
  --color-light: #ffffff;
  --color-accent: #3333ff; /* Azul Mais Brilhante/Destaque */
  --color-menu: #0494ea;
  --color-footer: #252525;
  --color-save-button: #3ca707;
  --color-sair: #d70808;
  --color-left_side: #333333;
  --color-buttom_back:#dedbdb;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Montserrat', sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Garante que body e html ocupem toda a altura */
  font-family: var(--font-body);
  background-color: #f4f7f6;
  color: #333;
  overflow-x: hidden; /* Previne scroll horizontal em qualquer caso */
}

.page-container {
  /* Mantém a largura máxima e a centralização do seu código */
  max-width: 1300px;
  margin: 0 auto;
  /* min-height: 100vh; */
  background-color: var(--color-light, #ffffff);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 17px 17px;

  /* NOVO: Configuração Grid para DESKTOP (> 480px) */
  display: grid;
  /* Colunas: 250px para sidebar e 1fr (o restante) para o conteúdo principal */
  grid-template-columns: 250px 1fr;
  /* Linhas: "auto" para a altura do header e "1fr" para o conteúdo restante */
  grid-template-rows: auto 1fr;

  /* Mapeamento das áreas do grid (Sidebar | Header/Conteúdo) */
  grid-template-areas:
    'sidebar header'
    'sidebar content';
}

/* -------------------------------------------------------------------------- */
/* 2. HEADER (main-header-top) */
/* -------------------------------------------------------------------------- */
.main-header-top {
  grid-area: header; /* Posição no Grid (Topo da Coluna Direita) */

  /* Estilos mesclados do seu código e do Grid */
  background-color: #ffffff; /* Fundo branco do seu código */
  padding: 15px 0; /* Seu padding vertical */
  border-bottom: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Seu box-shadow */
  z-index: 10;
  width: 100%;
  box-sizing: border-box; /* Adicionado por segurança */
}

.main-header-top .page-width-container {
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.main-nav li {
  margin-left: 20px;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-van, #1a1bad); /* Usando fallback */
  font-weight: bold;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: #0056b3;
}

/* -------------------------------------------------------------------------- */
/* 4. CONTEÚDO PRINCIPAL (main-content-area) */
/* -------------------------------------------------------------------------- */
.main-content-area {
  grid-area: content; /* Posição no Grid (Parte inferior da Coluna Direita) */

  /* Seu código */
  display: flex;
  flex-direction: column;
  background-color: var(--color-light, #ffffff);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
 /* overflow-y: auto; /* Permite scroll no conteúdo principal */

  /* NOTA: Removido 'width: 75%' pois o Grid já define a largura como 1fr */
  border-radius: 0 0 10px 0;
}

.page-content-wrapper {
  /* Seu código */
  padding: 30px 0 10px;
  /* Removido: overflow-y: auto; pois o scroll já está no .main-content-area */

  /* Novo/Atualizado *
    flex-grow: 1; /* Permite que esta seção cresça e ocupe o espaço */
  width: 100%;
  box-sizing: border-box;
}

.page-width-container {
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  max-width: 90%;
}

/* -------------------------------------------------------------------------- */
/* 3. SIDEBAR ESQUERDA (sidebar-left) */
/* -------------------------------------------------------------------------- */
.sidebar-left {
  grid-area: sidebar; /* Posição no Grid (Coluna Esquerda Completa) */

  /* Estilos de aparência do seu código */
  background-color: #333333;
  color: #ffffff;
  padding: 20px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* Permite scroll se o conteúdo for muito grande */
  border-radius: 0 0 17px 17px;

  /* NOTA: Removido 'width: 25%', 'position: sticky', 'height: 100vh' pois o Grid
       (grid-template-columns: 250px 1fr) já define a largura e altura. */
  /* margin-bottom: 8px; */
}

.sidebar-logo,
.footer_logo {
  text-align: center;
  margin-bottom: 25px;
}

.sidebar-logo img {
  max-width: 63%;
  height: auto;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li a {
  display: block;
  padding: 10px 20px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.sidebar-nav li a:hover,
.sidebar-nav li a.active {
  background-color: #555;
}

/* Estilos para o conteúdo interno da sidebar */
.sidebar-content {
  padding: 0 20px;
}

.sidebar-content .status-bar {
  background-color: #444;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 15px;
  font-size: 0.8rem;
}

.sidebar-content .status-bar span {
  display: block;
  margin-bottom: 5px;
}

.sidebar-content .status-bar strong {
  color: #fff;
}

.sidebar-content .status-bar .logout-link-pages,
.sidebar-content .status-bar .logout-link {
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}

.sidebar-content .status-bar .arrows {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

.sidebar-content .status-bar .arrows a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 5px;
  border-radius: 3px;
  transition: background-color 0.2s;
  font-weight: 700;
}

.sidebar-content .status-bar .arrows a:hover {
  background-color: #666;
}

/* .sidebar-content .status-bar .arrows svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
} */

.sidebar-content .status-bar .indice {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: 15px;
  font-size: 1.1rem;
  color: #bbb;
}

.sidebar-content .status-bar .indice .pageNumbers {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  margin-right: 5px;
}

.sidebar-content .sub-menu {
  background-color: #555;
  padding: 15px;
  border-radius: 5px;
  color: #eee;
  font-size: 0.9rem;
}

.sidebar-content .sub-menu h3 {
  color: #fff;
  margin-top: 0;
}

/* -------------------------------------------------------------------------- */
/* 6. ESTILOS DE COMPONENTES DE CONTEÚDO */
/* -------------------------------------------------------------------------- */

.iconesBlock {
  display: flex;
  /* justify-content: space-around; */
}

.iconesLider {
  position: relative;
  font-size: 0.8rem;
  line-height: 1.2;
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 17px;
}

.iconesLider a {
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--color-van, #1a1bad);
  font-weight: 600;
  line-height: 1;
}

.iconesLider img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 17px;
  border: 2px solid var(--color-van, #1a1bad);
}

.iconesLider p {
  margin-top: 10px;
  max-width: 250px;
  margin: 0 auto;
}

.iconesLider h3 {
  margin-bottom: 5px;
  line-height: 1.1;
  font-size: 1.2rem !important;
}

.iconesLider .mais_info {
  font-size: 1.1rem;
  width: fit-content;
  padding: 5px 9px;
  font-style: italic;
  background-color: var(--color-light, #ffffff);
  border-radius: 17px;
  color: var(--color-van, #1a1bad);
}

.botaoHub, .botaoMapeamento {
  background-color: orange;
  color: var(--color-van, #1a1bad);
  border-radius: 17px;
  width: fit-content;
  margin: 0 auto;
  padding: 7px 15px;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 20px;
  border: 2px solid orange;
  line-height: 1.1;
}

.botaoHub a, .botaoMapeamento a {
  text-decoration: none;
  color: inherit;
}

.botaoHub:hover, .botaoMapeamento:hover {
  border: 2px solid var(--color-van, #1a1bad);
  transform: translateY(-2px);
}

.botaoMapeamento {
  margin-top: 34px !important;
  border: 2px solid orange;
  margin-bottom: 50px;
}

.content-acor {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.5s ease;
  opacity: 0;
  padding: 10px 15px !important;
}

.content-acor ul,
.content-acor ol {
  margin: 10px 0 0 40px;
}

.subtitle-acor {
  font-weight: bold;
  margin-top: 10px;
}

/* Garante que o container-conteudo tenha position: relative */
.container-conteudo.iconesLider {
  position: relative;
  /* Outros estilos como width, margin, padding etc. */
}

.container-conteudo.iconesLider h3 {
  text-align: center; /* Exemplo: centralizar o texto */
  margin-top: 5px; /* Espaçamento acima do título */
  font-size: 1.4rem;
  color: var(--color-van);
  /* Adicione outros estilos conforme necessário */
}

/* -------------------------------------------------------------------------- */
/* Estilos para o conteúdo do acordeão - Necessários para a animação de altura */
/* -------------------------------------------------------------------------- */
.mais_info {
  position: absolute;
  top: 20px;
  right: 34px;
  transform: translate(50%, -50%);
  background-color: #007bff;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Estilos básicos para o acordeão */
/* Oculta o acordeão inteiro por padrão */
.accordion {
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden;
  display: none;
  /* Isso ocultará o acordeão inteiro (título e conteúdo) */
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.accordion .title {
  background-color: #f7f7f7;
  padding: 15px;
  cursor: pointer;
  margin: 0;

  position: relative;
  /* Adicionado: Essencial para z-index, se necessário, e para garantir contexto de empilhamento */
  z-index: 1;
  /* Adicionado: Para garantir que não esteja escondido por algo inesperado */
  /* Garante que o background-color seja transparente quando o acordeão não está visível */
  transition: background-color 0.5s ease-out;
  /* Adicionado: para uma transição suave do background */
}

/* Força o background do título a ser transparente quando o acordeão não está visível */
/* Isso é uma medida de segurança se a opacidade do pai não for suficiente */
.accordion:not(.visible) .title {
  background-color: transparent;
  /* Adicionado: Torna o background transparente quando não visível */
  /* Também pode querer esconder o texto */
  color: transparent;
  /* Adicionado: Esconde o texto do título também */
}

/* Quando o acordeão está visível, o título volta ao normal */
.accordion.visible .title {
  background-color: #f7f7f7;
  /* Volta à cor normal */
  color: #333;
  /* Volta à cor normal do texto */
}

.accordion .title a.accordion-trigger {
  display: block;
  /* Para que o link ocupe todo o espaço do título */
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.accordion .content-acor {
  padding: 0 15px;
  /* Padding horizontal */
  max-height: 0;
  /* Começa oculto */
  opacity: 0;
  /* Começa transparente */
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out,
    padding 0.5s ease-out;
  /* Transição suave */
  overflow: hidden;
}

.accordion.active .content-acor {
  max-height: 1000px;
  /* Um valor grande o suficiente para o conteúdo aparecer */
  opacity: 1;
  /* Torna visível */
  padding: 15px;
  /* Adiciona padding vertical quando ativo */
  text-align: left;
}

/* Quando o acordeão é ativado pelo JS, ele se torna visível */
.accordion.visible {
  /* Torna o acordeão visível */
  opacity: 1;
  /* background-color: #f7f7f7; */
  padding: 15px;
  cursor: pointer;
  margin: 0;
  /* Adicione uma transição de cor de fundo se quiser que ela "desapareça" */
  transition: background-color 0.3s ease-in-out;
}