/*!
 * @file css/base.css
 * @description Estilos globais: reset, layout header/main/footer, notificações (aria-live),
 *              responsividade e navegação. Base comum aos perfis Aluno e Professor.
 * @author Giselle Cristina Cardoso, André Lucas Novaes, Débora Zumkeller Sabonaro
 * @since 2025-11
 * @license Todos os direitos reservados aos autores; uso acadêmico/educacional autorizado.
 */

 
 /* Reset Básico */ 
 * { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%; /* Garante que o body ocupe a altura total */
    margin: 0; /* Remove margens padrão */
    font-family: Arial, sans-serif; /* Fonte global */
    background-color: #A5D6A7; /* Fundo padrão */
    color: #333; /* Cor global do texto */
    overflow-y: auto; /* Barra de rolagem apenas quando necessário */
    padding:0px;
    display: flex;
    flex-direction: column;
  }


/* ========================= */
/* Cabeçalho */
/* ========================= */
header {
    position: fixed; /* Fixa o cabeçalho no topo */
    top: 0; /* Garante que está na parte superior */
    left: 0;
    right: 0;
    z-index: 1000; /* Garante que está acima de outros elementos */
    background-color: #F5F5F5;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between; /* Ajusta o espaço entre logo e menu */
    align-items: center; /* Alinha verticalmente */
    border-bottom: 4px solid #CCCCCC; /* Linha cinza clara */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    height:100px; /* Altura fixa para evitar problemas */
  }
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  nav ul {
    list-style: none;
    display: flex;
    gap: 20px; /* Espaçamento uniforme entre as opções do menu */
    margin: 0;
    padding: 0;
    text-decoration: none;
  }

  /* Rodapé */
footer {
    text-align: center;
    padding: 10px 0;
    background-color: #F5F5F5;
    position: relative; 
    bottom:0;
    width: 100%;
    z-index: 999; /* Garante que o rodapé fique acima */
    font-size: 14px;
    border-top: 4px solid #CCCCCC; /* Linha cinza clara */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    margin-top: auto; /* Garante que o rodapé fique na parte inferior */
  }
  
  .logos {
    display: flex;              /* Ativa o Flexbox */
    justify-content: center;    /* Alinhamento horizontal central */
    align-items: center;        /* Alinhamento vertical central */
    gap: 20px;                  /* Espaçamento entre os logos */
  }
  
  .logos img {
    margin: 0 10px;
    width: 60px;
    height: auto;
  }

  .navbar {
    display: flex; /* Coloca o logo e o menu na mesma linha */
    align-items: center; /* Alinha verticalmente */
    justify-content: space-between; /* Espaça os itens do cabeçalho */
    padding: 10px 20px;
  }
  
  .logo-container img {
    width: 100px; /* Ajuste conforme necessário */
    height: auto;
  }
  
  .nav-links {
    display: flex; /* Coloca os links na mesma linha */
    list-style: none;
    gap: 20px; /* Espaçamento entre os links */
  }
  
  nav ul li a {
    color:rgb(248, 48, 3); /* Laranja vibrante */
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  nav ul li a:hover {
    color:rgb(210, 51, 3); /* Laranja mais escuro no hover */
  }
  

/* ========================= */
/* Estilos Globais */
/* ========================= */

body { 
  display: flex;
  flex-direction: column; 
  min-height: 100vh; /* Garante altura mínima da viewport para o layout flex funcionar corretamente */
  overflow-y: auto; /* Garante que a barra de rolagem apareça, se necessário */
  background: linear-gradient(120deg, #004D40, #A5D6A7); /* Azul-esverdeado para verde-menta */
 }


/* ========================= */
/* Layout Principal */
/* ========================= */
main {    
  flex: 1; /* Faz o main ocupar o espaço disponível */
  display: flex; /* Ativa o Flexbox */
  justify-content: space-between; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  margin-top: 100px; /* Espaço suficiente para o cabeçalho */
  padding: 20px; /* Adiciona padding para o conteúdo */
  height: 120vh; /* Altura total menos cabeçalho e rodapé */
}  

#notifier{
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.notify{
  min-width: 280px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: #fff !important;
  border-left: 6px solid #64748b!important; /* default */
  font-size: 14px;
}
.notify .title{ font-weight: 600; margin-bottom: 2px; }
.notify .close{
  margin-left: auto; background: none; border: 0;
  font-size: 18px; line-height: 1; cursor: pointer; color: #475569;
}
.notify.warn   { border-color: #f59e0b !important; } /* alerta */
.notify.error  { border-color: #ef4444 !important; } /* erro   */
.notify.success{ border-color: #16a34a !important; } /* ok     */
.notify.info   { border-color: #0ea5e9 !important; } /* info   */


 /* Responsividade global  */
@media (max-width: 768px) {
  body {
    font-size: 14px; /* Ajusta o tamanho da fonte para telas menores */
  }

  html, body {
    overflow-x: hidden; /* Previne barras de rolagem horizontais em telas pequenas */
  }
  main {
    flex-direction: column; /* Empilha elementos em telas menores */
    padding: 10px; /* Reduz o espaçamento interno */
  }
}


/* ========================= */
/* Ajustes de Responsividade */
/* ========================= */
@media (max-width: 768px) {
  .sidebar {
      width: 80px;
  }

  .sidebar nav ul li a {
      font-size: 14px;
      padding: 8px;
  }

  .logout-btn {
      font-size: 14px;
      padding: 8px;
  }
}