/* =====================================================================
   ELEVA AMAPÁ — SIMULADO FINAL ENEM (100 questões)
   Segue o mesmo design system dos simulados de 30 questões:
   fundo zinc-950, destaques amber-500, emerald e violet.
===================================================================== */

#auth-checking {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #09090b;
}

/* IMPORTANTE: #auth-checking usa seletor de ID (especificidade alta) com
   display:flex direto nele. A classe .hidden do Tailwind (via CDN) é só
   `display: none` sem !important, então uma classe sozinha nunca vence
   um ID no CSS puro — o elemento nunca sumia mesmo com o JS aplicando
   .hidden corretamente. Esta regra força a prioridade certa. */
#auth-checking.hidden {
  display: none;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(245, 158, 11, 0.2);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------
   TELA DE INTRODUÇÃO
--------------------------------------------------------------------- */
.intro-card {
  background: linear-gradient(180deg, rgba(24,24,27,0.9) 0%, rgba(9,9,11,0.9) 100%);
  border: 1px solid rgba(63,63,70,0.6);
}

.stat-box {
  background: rgba(39,39,42,0.5);
  border: 1px solid rgba(63,63,70,0.5);
}

/* ---------------------------------------------------------------------
   BARRA DE PROGRESSO
--------------------------------------------------------------------- */
.progress-track {
  background: rgba(39,39,42,0.8);
}

.progress-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  transition: width 0.35s ease;
}

/* ---------------------------------------------------------------------
   BADGES DE ÁREA E DIFICULDADE
--------------------------------------------------------------------- */
.badge-area {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
}

.badge-dificuldade {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 800;
}

.badge-dificuldade.facil {
  background: rgba(16,185,129,0.15);
  color: #34d399;
  border: 1px solid rgba(16,185,129,0.3);
}

.badge-dificuldade.media {
  background: rgba(245,158,11,0.15);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,0.3);
}

.badge-dificuldade.dificil {
  background: rgba(239,68,68,0.15);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.3);
}

/* ---------------------------------------------------------------------
   ALTERNATIVAS
--------------------------------------------------------------------- */
.alternativa {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(24,24,27,0.7);
  border: 1.5px solid rgba(63,63,70,0.6);
  color: #d4d4d8;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.alternativa:hover {
  border-color: rgba(245,158,11,0.4);
  background: rgba(39,39,42,0.7);
}

.alternativa.selecionada {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.1);
  color: #fef3c7;
}

.alternativa-letra {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgba(63,63,70,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #a1a1aa;
}

.alternativa.selecionada .alternativa-letra {
  background: #f59e0b;
  color: #09090b;
}

/* ---------------------------------------------------------------------
   MODAL (confirmação de finalizar)
--------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1.25rem;
}

.modal-box {
  background: #18181b;
  border: 1px solid rgba(63,63,70,0.6);
}

/* ---------------------------------------------------------------------
   TELA DE RESULTADO
--------------------------------------------------------------------- */
.resultado-card {
  background: linear-gradient(180deg, rgba(24,24,27,0.9) 0%, rgba(9,9,11,0.9) 100%);
  border: 1px solid rgba(63,63,70,0.6);
}

.resultado-card.aprovado {
  border-color: rgba(16,185,129,0.4);
}

.resultado-card.reprovado {
  border-color: rgba(239,68,68,0.4);
}

.area-desempenho-box {
  background: rgba(39,39,42,0.5);
  border: 1px solid rgba(63,63,70,0.5);
  border-radius: 0.85rem;
  padding: 0.9rem;
}

.area-desempenho-box .nome-area {
  font-size: 0.7rem;
  font-weight: 700;
  color: #a1a1aa;
  margin-bottom: 0.25rem;
}

.area-desempenho-box .valor-area {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

/* ---------------------------------------------------------------------
   RESPONSIVIDADE MOBILE-FIRST
--------------------------------------------------------------------- */
@media (max-width: 640px) {
  .alternativa {
    font-size: 0.85rem;
    padding: 0.85rem 1rem;
  }
}