/* =============================================================
   Avaliação Otimizada — estilo
   Referência visual: a folha óptica. Papel levemente acinzentado,
   tinta azul-grafite, e a bolha preenchida como marca do que está ativo.
   ============================================================= */

:root {
  /* Escala de azuis: do papel quase branco à tinta marinho. As cores de
     acerto, erro e aviso ficam fora dela de propósito — precisam significar
     alguma coisa, e não se confundir com o azul da interface. */
  --papel:      #EEF3FA;
  --superficie: #FFFFFF;
  --tinta:      #0E2745;
  --grafite:    #46608A;
  --apagado:    #7B92B4;
  --linha:      #D5E1F0;
  --linha-forte:#B4C8E1;
  --caneta:     #1B4F9C;
  --caneta-escura:#143C78;
  --caneta-clara:#E4EDFA;
  --acerto:     #16794C;
  --erro:       #B3352C;
  --aviso:      #A4691B;
  --raio:       6px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--caneta); }
a:hover { color: var(--caneta-escura); }

/* ---------- Estrutura ---------- */

.moldura { display: flex; min-height: 100vh; }

.lateral {
  width: 232px;
  flex: 0 0 232px;
  background: var(--superficie);
  border-right: 1px solid var(--linha-forte);
  padding: 22px 0 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marca {
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 14px;
}
.marca strong { display: block; font-size: 15px; letter-spacing: -0.01em; }
.marca span { display: block; font-size: 12.5px; color: var(--apagado); }

.menu { list-style: none; margin: 0; padding: 0 10px; }
.menu li { margin: 1px 0; }
.menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--raio);
  color: var(--tinta);
  text-decoration: none;
  font-size: 14.5px;
}
.menu a:hover { background: var(--papel); }

/* A bolha: vazia por padrão, preenchida no item ativo. */
.menu a::before {
  content: "";
  width: 11px; height: 11px;
  flex: 0 0 11px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 50%;
  background: transparent;
}
.menu a.ativo { background: var(--caneta-clara); color: var(--caneta); font-weight: 600; }
.menu a.ativo::before { border-color: var(--caneta); background: var(--caneta); }

.rodape-lateral {
  margin-top: 22px;
  padding: 14px 20px 0;
  border-top: 1px solid var(--linha);
  font-size: 13px;
  color: var(--apagado);
}
.rodape-lateral a { display: inline-block; margin-top: 4px; }

.conteudo { flex: 1; min-width: 0; padding: 30px 34px 64px; }
.faixa { max-width: 1080px; }

.titulo-pagina { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.02em; }
.subtitulo { margin: 0 0 26px; color: var(--grafite); }

/* ---------- Blocos ---------- */

.bloco {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.bloco > h2 { margin: 0 0 3px; font-size: 17px; }
.bloco > h2 + p { margin: 0 0 16px; color: var(--grafite); font-size: 14px; }

.grade { display: grid; gap: 16px; }
.grade.duas { grid-template-columns: 1fr 1fr; }
.grade.tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
  .grade.duas, .grade.tres { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .conteudo { padding: 20px 16px 48px; }
}

/* ---------- Formulário ---------- */

.campo { margin-bottom: 15px; }
.campo > label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.campo .dica { display: block; font-weight: 400; color: var(--apagado); font-size: 12.5px; margin-top: 3px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  font: inherit;
  color: inherit;
  background: var(--superficie);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--caneta);
  outline-offset: -1px;
  border-color: var(--caneta);
}
textarea { min-height: 90px; resize: vertical; }
input[type=file] { font-size: 14px; }

.linha-campos { display: flex; gap: 14px; flex-wrap: wrap; }
.linha-campos .campo { flex: 1 1 190px; }

.escolha { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin: 5px 0; }
.escolha input { margin: 0; }

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--caneta);
  background: var(--caneta);
  color: #fff;
  border-radius: var(--raio);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.botao:hover { background: var(--caneta-escura); border-color: var(--caneta-escura); color: #fff; }
.botao.discreto { background: var(--superficie); color: var(--tinta); border-color: var(--linha-forte); }
.botao.discreto:hover { background: var(--papel); color: var(--tinta); }
.botao.perigo { background: var(--erro); border-color: var(--erro); }
.botao.perigo:hover { background: #97281F; border-color: #97281F; }
.botao.pequeno { padding: 5px 11px; font-size: 13.5px; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

/* ---------- Tabela ---------- */

table.dados { width: 100%; border-collapse: collapse; font-size: 14px; }
table.dados th, table.dados td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
table.dados th { font-size: 13px; color: var(--grafite); font-weight: 600; }
table.dados tbody tr:hover { background: var(--papel); }
table.dados td.num, table.dados th.num { text-align: right; font-variant-numeric: tabular-nums; }

.codigo { font-family: var(--mono); font-size: 13.5px; }

/* ---------- Sinalizações ---------- */

.aviso {
  padding: 11px 14px;
  border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  margin-bottom: 16px;
  font-size: 14.5px;
}
.aviso.ok   { border-color: #A9D6BE; background: #EFF8F3; color: #0E5335; }
.aviso.erro { border-color: #E3B4AF; background: #FCF1F0; color: #8A231B; }
.aviso.alerta { border-color: #E3CDA0; background: #FDF7EA; color: #7A4E10; }

.selo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--linha-forte);
  color: var(--grafite);
  background: var(--papel);
}
.selo.pronta, .selo.concluida { border-color: #A9D6BE; background: #EFF8F3; color: #0E5335; }
.selo.fila, .selo.gerando, .selo.processando { border-color: #E3CDA0; background: #FDF7EA; color: #7A4E10; }
.selo.erro { border-color: #E3B4AF; background: #FCF1F0; color: #8A231B; }

.vazio {
  padding: 34px 20px;
  text-align: center;
  color: var(--grafite);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie);
}
.vazio p { margin: 0 0 14px; }

/* ---------- Editor de questões ---------- */

.editor { border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--superficie); }
.editor-barra {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 5px; border-bottom: 1px solid var(--linha); background: var(--papel);
  border-radius: var(--raio) var(--raio) 0 0;
}
.editor-barra button {
  min-width: 30px; height: 28px; padding: 0 7px;
  border: 1px solid transparent; background: transparent;
  border-radius: 4px; cursor: pointer; font: inherit; font-size: 14px; color: var(--tinta);
}
.editor-barra button:hover { background: var(--papel); border-color: var(--linha); }
.editor-barra .separador { width: 1px; background: var(--linha); margin: 4px 4px; }
.editor-area { min-height: 110px; padding: 11px 13px; outline: none; }
.editor-area:focus { outline: 2px solid var(--caneta); outline-offset: -2px; border-radius: 0 0 var(--raio) var(--raio); }
.editor-area img { max-width: 100%; height: auto; }
.editor-area p { margin: 0 0 8px; }

/* ---------- Alternativas ---------- */

.alternativa { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.alternativa .marca-letra {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: 6px;
}
.alternativa .letra {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--linha-forte);
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px;
}
.alternativa.correta .letra { border-color: var(--acerto); background: var(--acerto); color: #fff; }
.alternativa .editor { flex: 1; min-width: 0; }

/* ---------- Seleção de questões ---------- */

.lista-selecao { max-height: 460px; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.item-selecao { display: flex; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--linha); }
.item-selecao:last-child { border-bottom: 0; }
.item-selecao:hover { background: var(--papel); }
.item-selecao .resumo { flex: 1; min-width: 0; }
.item-selecao .meta { font-size: 12.5px; color: var(--apagado); }

/* ---------- Modal ---------- */

.cortina {
  position: fixed; inset: 0; background: rgba(14,39,69,.5);
  display: grid; place-items: center; padding: 20px; z-index: 40;
}
.cortina[hidden] { display: none; }
.modal {
  background: var(--superficie); border-radius: 8px; width: min(860px, 100%);
  max-height: 88vh; overflow: auto; padding: 24px 26px;
}
.modal h2 { margin: 0 0 16px; font-size: 18px; }

/* ---------- Gráficos ---------- */

.barras { display: flex; align-items: flex-end; gap: 5px; height: 190px; padding-top: 10px; }
.barras .coluna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.barras .haste { width: 100%; background: var(--caneta); border-radius: 3px 3px 0 0; min-height: 2px; }
.barras .rotulo { font-size: 11.5px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.barras .valor { font-size: 11.5px; font-weight: 600; }

.faixa-questoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.faixa-questoes .q {
  border: 1px solid var(--linha); border-radius: 4px; padding: 5px 4px; text-align: center;
  font-size: 12px;
}
.faixa-questoes .q b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.faixa-questoes .q.baixa { border-color: #E3B4AF; background: #FCF1F0; }
.faixa-questoes .q.media { border-color: #E3CDA0; background: #FDF7EA; }
.faixa-questoes .q.alta  { border-color: #A9D6BE; background: #EFF8F3; }
.faixa-questoes .q.anulada { border-style: dashed; color: var(--apagado); background: var(--papel); }

/* ---------- Entrada ---------- */

.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.entrada .cartao { width: min(400px, 100%); background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 30px 28px; }
.entrada h1 { font-size: 21px; margin: 0 0 3px; letter-spacing: -0.02em; }
.entrada .sub { color: var(--grafite); margin: 0 0 22px; font-size: 14px; }
.entrada .botao { width: 100%; justify-content: center; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}