/* style.css - Dashboard Bot Monitoria atualizado */

body {
  font-family: Arial, sans-serif;
  background: #ffffff;
  margin: 0;
  padding: 20px;
  text-align: center;
}

h1 { 
  color: #333; 
  margin-bottom: 20px; 
}

.reload {
  position: fixed; 
  bottom: 20px; 
  right: 20px;
  padding: 12px 20px; 
  border-radius: 50px;
  background: #007BFF; 
  color: white;
  font-size: 16px; 
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border: none; 
  outline: none;
}

.reload:hover { 
  background: #0056b3; 
}

#filtros { 
  margin: 20px 0; 
  text-align: center; 
}

#filtros button {
  margin: 5px; 
  padding: 8px 14px; 
  border: none;
  border-radius: 8px; 
  cursor: pointer;
  background-color: #007bff; 
  color: white;
  transition: background 0.2s;
}

#filtros button:hover { 
  background-color: #0056b3; 
}

#filtros button:focus { 
  background-color: #546E7A; 
}

#listas { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 15px; 
  padding: 10px 0; 
}

.lista {
  background: #fff; 
  border-radius: 10px; 
  padding: 10px;
  width: calc(33.33% - 20px); 
  min-width: 200px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.lista:hover { 
  transform: scale(1.03); 
}

.lista h2 { 
  margin: 0 0 10px; 
  color: #444; 
}

.info { 
  font-size: 14px; 
  color: #666; 
  margin-bottom: 10px; 
}

/* Listas sem bullets */
ul {
  padding-left: 20px; 
  list-style: none;   
}

li {
  margin: 5px 0;
}

/* Estudantes clicáveis */
.estudante {
  cursor: pointer;
  color: #007BFF;
  transition: color 0.2s;
}

.estudante:hover {
  text-decoration: underline;
  color: #0056b3;
}

/* Monitores clicáveis destacados */
.monitor {
  cursor: pointer;
  font-weight: bold;          /* deixa mais evidente que é clicável */
  color: #444;                /* cinza neutro, sem azul */
  position: relative;
  padding-right: 18px;        /* espaço para o ícone */
  display: inline-block;      /* necessário para o transform funcionar bem */
  transition: color 0.2s, transform 0.2s;
}

.monitor::after {            
  position: absolute;
  right: 0;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}

.monitor:hover {
  color: #000;                /* escurece no hover */
  transform: scale(1.05);     /* aumenta levemente o texto */
}

.monitor:hover::after {
  opacity: 1;
  transform: scale(1.2);      /* ícone cresce levemente */
}

.id-estudante {
  display: block;
  margin-top: 15px;
  font-size: 12px;
  color: #999;
  text-align: left; 
}

.ativo { 
  color: green; 
  font-weight: bold; 
}

.desativado { 
  color: red; 
  font-weight: bold; 
}

.confete {
  position: fixed; 
  width: 8px; 
  height: 8px; 
  border-radius: 50%;
  pointer-events: none; 
  opacity: 0.8; 
  animation: explodir 1s forwards;
}

@keyframes explodir { 
  0% { transform: translate(0,0) rotate(0deg); opacity:1;} 
  100% { transform: translate(var(--x), var(--y)) rotate(720deg); opacity:0;} 
}

/* Modal estudante */
.modal {
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.5); 
  justify-content: center; 
  align-items: center; 
  z-index: 9999;
}

.modal-conteudo {
  background: #fff; 
  padding: 20px; 
  border-radius: 10px;
  max-width: 400px; 
  width: 90%; 
  text-align: left; 
  position: relative;
}

.fechar {
  position: absolute; 
  top: 10px; 
  right: 15px; 
  cursor: pointer;
  font-size: 18px; 
  font-weight: bold;
}

.modal-conteudo h2 { 
  margin-top: 0; 
}

.modal-conteudo p { 
  font-size: 14px; 
  color: #333; 
}

/* Monitorias com seta */
.monitoria {
  margin-left: 10px; 
}

.monitoria::before {
  content: "↳ ";
}

/* Responsividade */
@media (max-width: 900px) { 
  .lista { width: calc(50% - 15px); } 
}

@media (max-width: 500px) { 
  .lista { width: 100%; } 
}