/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* Cabeçalho fixo */
header {
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
}

/* Menu horizontal */
.menu-horizontal {
  position: fixed;
  top: 80px;        /* continua logo abaixo do header de 80 px */
  left: 0;
  width: 100%;
  height: 50px;     /* ← novo valor */
  background-color: #555;
  overflow-x: auto;
  white-space: nowrap;
  z-index: 999;
}

.menu-horizontal ul {
  display: flex;
  list-style: none;
  height: 100%;
}

.menu-horizontal li a {
  color: white;
  text-decoration: none;
  padding: 0 15px;
  line-height: 50px;
  display: block;
  white-space: nowrap;
}

/* Wrapper principal */
.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Conteúdo principal */
main.conteudo {
  padding-top: 130px; /* cabeçalho + menu */
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Colunas padrão */
.coluna {
  padding: 0px;
  overflow-y: auto;
  width: 100%;
}

.coluna .conteudo-scroll {
padding: 0 15px 20px; /* devolve respiro lateral só no conteúdo, se desejar */
  padding-bottom: 20px;
}

.coluna.esquerda .conteudo-scroll {
  padding-top: 10px;          /* pequeno respiro */
}


/* Rodapé padrão */
footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: auto; /* Isso garante que o rodapé fique no fundo */
  display:none;
}

/* Botões de rolagem */
.scroll-btn {
  background: #333;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-bottom: 15px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
}

.col-header {
  height: 50px;
  background: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  position: sticky;   /* gruda no topo da coluna */
  top: 0;
  z-index: 2;         /* acima do conteúdo da coluna */
}













/* Layout para desktop */
@media (min-width: 769px) {
  main.conteudo {
    flex-direction: row;
    height: calc(100vh - 130px); /* Subtrai a altura do cabeçalho e menu */
  }

  .coluna {
    height: calc(100vh - 130px); /* Usa toda a altura disponível */
    overflow-y: auto;
  }

  .coluna.esquerda {
    width: 40%;
   max-height: calc(100vh - 130px);      /* mantém limite externo */
    display: flex;
    flex-direction: column;
  }

  .coluna.esquerda .conteudo-scroll {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 130px - 50px); /* 50 px do cabeçalho interno */
  }

  .coluna.direita {
    width: 40%;
  }

  .coluna.centro {
    width: 20%;
    display: block;
    background-color: #f5f5f5;
  }

  .scroll-btn {
    display: none;
  }
}























/* Layout para mobile */
/* Layout para mobile */
@media (max-width: 768px) {
  main.conteudo {
    flex-direction: column;   /* Empilha as colunas A, B, C */
    height: auto;
  }

  .coluna {
    width: 100%;  /* Faz com que todas as colunas ocupem 100% da largura */
    height: auto;
    overflow-y: visible;
  }

  /* Coluna C agora visível e abaixo das outras */
  .coluna.centro {
    display: block;  /* Garantir que a coluna C seja exibida no mobile */
    background-color: #f5f5f5;  /* Cor de fundo da coluna C */
  }

  .scroll-btn {
    display: inline-block;  /* Os botões de rolagem continuam visíveis */
  }

  .coluna.esquerda .conteudo-scroll {
    overflow-y: visible;   /* usa rolagem da página */
    padding: 50px 15px 20px; 
  }

  .coluna.esquerda .col-header {
     position: fixed; 
    top: 130px;      /* 80 px cabeçalho + 50 px menu */
    z-index: 998;    /* abaixo do menu (999) e acima do conteúdo */
   left: 0;
    width: 100%;
  }


}