/* ============================================================
   ENEM em Foco — estilos customizados
   (Tailwind cobre o utilitário; aqui só o que Tailwind não faz bem)
   ============================================================ */

:root { color-scheme: light; }
html.dark { color-scheme: dark; }

* { scrollbar-width: thin; scrollbar-color: #D9A404 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D9A404; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 2px solid #D9A404;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body { -webkit-tap-highlight-color: transparent; }

/* ---------- navegação ---------- */
.nav-item, .nav-item-desktop {
  color: #7C88AA;
  transition: color .15s ease;
}
html.dark .nav-item, html.dark .nav-item-desktop { color: #7C88AA; }
.nav-item.ativo, .nav-item-desktop.ativo {
  color: #1C2541;
}
html.dark .nav-item.ativo, html.dark .nav-item-desktop.ativo {
  color: #F7F5EF;
}
.nav-item-desktop.ativo {
  background: #EFEBE0;
}
html.dark .nav-item-desktop.ativo {
  background: #232C48;
}

/* ---------- cartão-resposta: bolhas de alternativa ---------- */
.bolha {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 9999px;
  border: 2px solid #7C88AA;
  display: grid;
  place-items: center;
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1C2541;
  background: transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
  flex-shrink: 0;
}
html.dark .bolha { color: #F7F5EF; border-color: #7C88AA; }

.alternativa {
  transition: border-color .18s ease, background-color .18s ease;
}

.alternativa.selecionada .bolha {
  background: #1C2541;
  border-color: #1C2541;
  color: #F7F5EF;
  transform: scale(1.04);
}
html.dark .alternativa.selecionada .bolha {
  background: #D9A404;
  border-color: #D9A404;
  color: #1C2541;
}
.alternativa.selecionada {
  border-color: #1C2541 !important;
}
html.dark .alternativa.selecionada { border-color: #D9A404 !important; }

.alternativa.correta .bolha {
  background: #2E7D5B;
  border-color: #2E7D5B;
  color: #fff;
}
.alternativa.correta { border-color: #2E7D5B !important; background: rgba(46,125,91,0.08); }

.alternativa.errada .bolha {
  background: #B23A3A;
  border-color: #B23A3A;
  color: #fff;
}
.alternativa.errada { border-color: #B23A3A !important; background: rgba(178,58,58,0.08); }

.alternativa.desabilitada { pointer-events: none; }

/* preenchimento animado da bolha ao confirmar */
@keyframes marcar {
  from { transform: scale(0.85); }
  to { transform: scale(1); }
}
.alternativa.correta .bolha, .alternativa.errada .bolha {
  animation: marcar .22s ease;
}

/* ---------- textura sutil de papel no card de questão ---------- */
.cartao-papel {
  background-image:
    repeating-linear-gradient(180deg, rgba(28,37,65,0.028) 0px, rgba(28,37,65,0.028) 1px, transparent 1px, transparent 28px);
}
html.dark .cartao-papel {
  background-image:
    repeating-linear-gradient(180deg, rgba(247,245,239,0.035) 0px, rgba(247,245,239,0.035) 1px, transparent 1px, transparent 28px);
}

/* lombada colorida por área (usa a cor definida em --cor-area) */
.lombada { border-left: 5px solid var(--cor-area, #D9A404); }

/* ---------- toasts ---------- */
.toast { animation: subir .22s ease; }
@keyframes subir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- barra de progresso por matéria ---------- */
.barra-fundo { background: #E3DDCB; }
html.dark .barra-fundo { background: #232C48; }

/* ---------- loading spinner (geração via IA) ---------- */
.girando { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- select customizado (o nativo do Windows/Chrome não combinava) ---------- */
select.campo-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #1C2541;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231C2541' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}
select.campo-select option {
  color: #1C2541;
  background-color: #FFFFFF;
}
html.dark select.campo-select {
  color: #F7F5EF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F7F5EF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html.dark select.campo-select option {
  color: #F7F5EF;
  background-color: #232C48;
}

/* ---------- layout desktop: afasta o conteúdo da barra lateral fixa ---------- */
@media (min-width: 768px) {
  #conteudo, #barra-conteudo {
    margin-left: max(14rem, calc(50% - 24rem));
    margin-right: auto;
  }
}

/* ---------- utilitário: esconder no print ---------- */
@media print {
  header, nav, aside, #toasts { display: none !important; }
}