/* Estilo para o cabeçalho */
  .titulo-quadrado {
    background-color: #007bff; /* Azul */
    color: white;
    width: 100%; /* Preenche toda a largura */
    padding: 10px; /* Espaçamento interno */
    border-radius: 15px 15px 0 0; /* Arredondar apenas o topo */

    margin: 0; /* Removendo margens para que ocupe toda a largura */
    font-size: 20px; 
    font-weight: 600;
  }


  







  .countdown {
    display: flex;
    justify-content: space-between; /* Espaça os itens uniformemente */
    margin-top: 20px; /* Margem superior para espaçamento */
  }
  
  .box {
    width: 45%; /* Garante que duas boxes caibam lado a lado sem ultrapassar */
    max-width: 100px; /* Ajuste fino para evitar que fiquem muito largas */
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    transition: transform 0.3s ease;
    text-align: center;
    margin-bottom: 10px;
}

.box:hover {
    transform: scale(1.05);
}

/* Garante que os boxes fiquem dentro da div e não ultrapassem */
.conteudo div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px; /* Ajuste do espaçamento */
}

  
  .value {
    font-size: 2.5em; /* Tamanho da contagem */
    font-weight: bold;
    color:rgb(1, 7, 14); /* Cor azul */
  }
  
  .name {
    display: block; /* Faz com que o nome ocupe a linha inteira */
    font-size: 16px; /* Tamanho da fonte para o nome */
    background-color: black; /* Cor de fundo */
    color: white; /* Cor do texto */
    padding: 5px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas para o quadrado */
    width: 100%; /* Largura do quadrado */
    text-align: center; /* Centraliza o texto dentro do quadrado */
    margin-top: 5px; /* Espaçamento superior */
  }






    .titulo-quadrado2 {
      background-color: #28a745; /* Verde */
      margin: 10px; /* Adiciona espaço nas laterais e entre as linhas de quadrados */
      color: white; /* Texto branco */
      width: 100%; /* Preenche toda a largura */
      padding: 10px; /* Espaçamento interno */
      border-radius: 15px 15px 0 0; /* Arredondar apenas o topo */
      margin: 0; /* Remover margens para que ocupe toda a largura */
      font-size: 20px; 
      font-weight: 600;
      
      

    }


    .titulo-quadrado3 {
      background-color: #6f2c91; /* Verde */
      color: white; /* Texto branco */
      width: 100%; /* Preenche toda a largura */
      padding: 10px; /* Espaçamento interno */
      border-radius: 15px 15px 0 0; /* Arredondar apenas o topo */
      margin: 0; /* Remover margens para que ocupe toda a largura */
      font-size: 20px; 
      font-weight: 600;

    }


    .titulo-quadrado4 {
      background-color: #8B0000; /* Verde */
      color: white; /* Texto branco */
      width: 100%; /* Preenche toda a largura */
      padding: 10px; /* Espaçamento interno */
      border-radius: 15px 15px 0 0; /* Arredondar apenas o topo */
      margin: 0; /* Remover margens para que ocupe toda a largura */
      font-size: 20px; 
      font-weight: 600;
    }

    .titulo-quadrado5 {
      background-color: #FF7F7F; /* Verde */
      color: white; /* Texto branco */
      width: 100%; /* Preenche toda a largura */
      padding: 10px; /* Espaçamento interno */
      border-radius: 15px 15px 0 0; /* Arredondar apenas o topo */
      margin: 0; /* Remover margens para que ocupe toda a largura */
   
      font-weight: 600;
 
  font-size: 20px; 
    }




    .conteudo {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      padding: 0;
    }
    
  .conteudo2 {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
  }

/* Estilos da área principal */
   .conteudo-principal {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; /* Cria espaço entre os itens */
      gap: 50px; /* Reduz o espaço entre os quadrados */
      margin: 0 100px; /* Reduz o espaço nas laterais */
      margin-bottom: 20px;
  }
/* Estilos dos quadrados */
.container-quadrado {
    width: 48%; /* Faz com que dois quadrados caibam por linha */
    max-width: 100%; /* Limita o tamanho máximo */
    height: 500px; /* Ajuste na altura */
    background-color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden; 
 
}


.tabela-container {
  width: 100%; /* Certifica-se de que ocupa a largura completa */
  max-width: 100%; /* Não ultrapassa o tamanho máximo do container */
  overflow-x: auto; /* Permite rolagem horizontal quando necessário */
  overflow-y: hidden; /* Impede rolagem vertical extra */
}

.table {
  width: 100%; /* Garante que a tabela ocupe 100% da largura do seu contêiner */
  table-layout: fixed; /* Fixar o layout da tabela para evitar expansão */
}


.p-3 {
  padding: 15px;
  overflow-y: auto; /* Permite rolagem vertical quando necessário */
  max-height: 300px; /* Limita a altura da área de conteúdo */
}





.imagem-funcionario {
  position: relative;
  width: 55px;
  height: 55px;
  overflow: visible; /* permite que o chapéu ultrapasse a borda de cima */
  display: inline-block;
  margin-top: 18px; 

}

.foto-funcionario {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
 
  object-fit: cover;
  border: 2px solid #007bff;



}

.chapéu {
  position: absolute;
  top: -30px; /* ajusta a altura do chapéu */
  left: 50%;
  transform: translateX(-50%);
  width: 35px;
  height: auto;
  z-index: 0; /* menor que o thead */
}

table thead {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  z-index: 1; /* ou mais, se quiser garantir que esteja sempre por cima */
}

  
  /* Ajustes para o conteúdo do calendário */

  
  /* Ajustes para o conteúdo do calendário */


  #calendar {
    width: 100% !important; /* Define a largura */
    height: 100%; /* Define a altura */
    padding: 20px 10px; /* Mantém o padding interno */
    margin: 20px auto; /* Adiciona margem externa para centralizar */
    background-color: transparent; /* Fundo transparente */
    border: 3px solid #ccc; /* Borda destacada */
    border-radius: 8px; /* Arredondamento dos cantos */
    box-sizing: border-box; /* Inclui o padding e borda no tamanho total */

  }


  .calendario-fixo {
    width: 100%;
    max-width: 450px;
  }
  
  /* Ajustes para o conteúdo do calendário */
  .calendar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    background-color: transparent; /* Fundo transparente */
    opacity: 1; /* Opacidade total */
  }
  
  /* Estilo para a barra de ferramentas do calendário */
  .calendar .fc-header-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 5px;
  }
  
  /* Estilos do título e botões na barra de ferramentas */
  .calendar .fc-toolbar h2 {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
  }
  
  .calendar .fc-toolbar .fc-button {
    background-color: #6b8e23 !important;
    border: none;
    color: white;
    padding: 2px 4px;
    font-size: 10px;
    border-radius: 4px;
    min-width: 40px;
    margin: 0 2px;
  }
  
  .calendar .fc-toolbar .fc-today-button {
    margin-left: 12px;
  }
  
  /* Estilo das células do calendário */
  .calendar .fc .fc-daygrid-day {
    padding: 0;
    background-color: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    color: #50c878;
    font-size: 12px;
  }
  
  .calendar .fc .fc-daygrid-day.fc-day-today {
    background-color: #50c878;
    color: white;
  }
  
  /* Estilo para eventos */
  .calendar .fc-event {
    background-color: #4caf50;
    color: black;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 12px;
  }
  .fc {
    width: 100% !important;
  }
  
  /* Força o conteúdo interno do grid a ocupar a largura */
  .fc-view-harness {
    width: 100% !important;
  }
  
  /* Força o grid de dias a usar toda a largura */
  .fc-daygrid-body,
  .fc-scrollgrid,
  .fc-scrollgrid-sync-table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  /* Força os nomes dos dias da semana a ocupar 100% da largura */
  .fc-col-header,
  .fc-col-header-cell,
  .fc-daygrid-week-number,
  .fc-daygrid-day,
  .fc-daygrid-day-top {
    width: 100% !important;
    table-layout: fixed !important;
  }
  
  /* Ajusta a tabela do header */
  .fc-scrollgrid-sync-table thead {
    width: 100% !important;
    display: table;
    table-layout: fixed !important;
  }
  
  /* Garante que os nomes dos dias ocupem o mesmo espaço das colunas */
  .fc-scrollgrid-sync-table th {
    width: auto !important;
    text-align: center;
  }
  

  #conteudo-calendario {
    gap: 40px;
  }
  
  @media (max-width: 768px) {
    #conteudo-calendario {
      flex-direction: column !important; /* Altera de row para column no mobile */
    }
  }
    @media (max-width: 768px) {
      .calendar-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
      }
    
    
      
    }