/* Estilo base — inspirado no layout fornecido pelo usuário */
:root{
  --bg:#010318;
  --nav:#02031a;
  --btn:#0f0066;
  --tiktok-blue:rgb(112, 145, 165);
  --accent:white;
  --card:#000000;
}
*{box-sizing:border-box}
body{font-family: Poppins, sans-serif; background:var(--bg); color:#fff; margin:0; -webkit-font-smoothing:antialiased}
.navbar{position:fixed; top:0; left:0; width:100%; background:var(--nav); padding:10px 20px; display:flex; justify-content:space-between; align-items:center; z-index:10}
.container{padding-top:80px; width:50%; max-width:800px; margin:40px auto; }
.titulo-pagina{color:#ffcccc; margin-bottom:12px}


.alunos img {
  width: 28%;
  border-radius: 1.5rem;
  margin: 1rem 0 0;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  transform: translate(10%);
 top:20%;

}

.sessao-card {  left:40%; position:absolute;  background: rgba(255,255,255,0.05); padding: 20px; border-radius: 15px; cursor: pointer; border: 1px solid #00e6e6; transition: 0.3s; width: 10%; }
.sessao-card:hover { background: #00e6e6; color: #0d054d; }
@keyframes glow { 0% { box-shadow: 0 0 5px #ffd700; } 50% { box-shadow: 0 0 20px #ffd700; } 100% { box-shadow: 0 0 5px #ffd700; } }

/* cursos list */
.turmas{display:flex; flex-direction:column; gap:12px}
.turma-btn{background:var(--btn); padding:12px 18px; border-radius:12px; display:flex; justify-content:space-between; align-items:center; text-decoration:none; color:#fff; border:1px solid var(--accent)}
.turma-texto{font-weight:600}
.turma-btn:hover{transform:translateY(-3px); background:#13b7e9}

.check{color:var(--tiktok-blue); font-size:18px}

.inativo{opacity:0.35; pointer-events:none}

/* Auth pages */
.auth{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}

/* Ajustes para celular */
@media (max-width:480px){
  .auth {
    padding: 10px;
  }
  .card {
    width: 100%;
    max-width: 100%;
    padding: 16px;
    margin: 0 10px;
  }
  .card input, .card select, .card button {
    font-size: 16px; /* Inputs maiores */
  }
}


 /* botão selecionar curso */ 
.card h2{margin-bottom:10px}
.card label{display:block; margin-top:10px; font-size:14px}
.card input, .card select{width:100%; padding:10px; margin-top:6px; border-radius:8px; border:1px solid rgba(4, 21, 97, 0.842); background:black; color:#fff}
.card button{margin-top:14px; width:100%; padding:12px; border-radius:10px; background:var(--accent); color:#003; border:none; font-weight:700}
#cadastrar:hover{
background-color: rgb(112, 145, 165);;
}

/* ... (Seu código anterior mantido) ... */

.card button {
  margin-top: 14px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: var(--accent); /* Branco */
  color: #003;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}

.card button:hover {
  background-color: var(--tiktok-blue);
  transform: translateY(-2px);
}

/* Estilo exclusivo para o Botão Visitar */
.btn-visitar {
  background: transparent !important;
  color: white !important;
  border: 1px solid var(--accent) !important;
  margin-top: 5px !important;
}

.btn-visitar:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Melhoria nos Links */
.links {
  color: white;
  text-decoration: none;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 5px;
  transition: 0.3s;
}

.links:hover {
  background-color: rgba(12, 27, 93, 0.5);
}

/* Lógica de Inativos (Cursos Bloqueados) */
.turma-btn.inativo {
opacity: 0.4;
pointer-events: none;
filter: grayscale(1);
cursor: not-allowed;
border-color: #333;
}

.turma-btn.inativo .check {
display: none;
}



/* responsive */
@media (max-width:480px){
  .card{padding:16px}
}

/* curso page - classe list */
.grid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:700px){ .grid{grid-template-columns:1fr 1fr} }

.links{
  color:white;
}
.links:hover{
  background-color: rgba(12, 27, 93, 0.534);
}
/*==== inativos====*/

.turma-btn.inativo {
  opacity: 0.5;
  pointer-events: none; /* Impede o clique */
  filter: grayscale(1); /* Fica cinza */
  cursor: not-allowed;
}
.turma-btn.inativo .check {
  display: none; /* Esconde o check de quem não é do curso */
}