/* ==========================================================================
   Cuidados Paliativos — Teste de Avaliação
   Disciplina de Oncologia · FCM · UERJ
   ========================================================================== */

:root {
  --bg:            #f4f2ed;
  --superficie:    #ffffff;
  --superficie-2:  #faf9f6;
  --tinta:         #1b2422;
  --tinta-suave:   #55635f;
  --borda:         #e0ddd5;
  --marca:         #14625f;
  --marca-clara:   #e6f0ef;
  --acerto:        #1f7a4d;
  --acerto-fundo:  #e8f4ed;
  --erro:          #a8322a;
  --erro-fundo:    #fbecea;
  --sombra:        0 1px 2px rgba(27, 36, 34, .06), 0 8px 24px rgba(27, 36, 34, .05);
  --raio:          14px;
  --largura:       min(100% - 2.5rem, 46rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #121614;
    --superficie:    #1a201e;
    --superficie-2:  #212927;
    --tinta:         #e9edeb;
    --tinta-suave:   #a2b0ac;
    --borda:         #2d3634;
    --marca:         #5fbfb5;
    --marca-clara:   #1c2f2d;
    --acerto:        #63c48d;
    --acerto-fundo:  #162b21;
    --erro:          #f08a80;
    --erro-fundo:    #2d1a18;
    --sombra:        0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container { width: var(--largura); margin-inline: auto; }

/* --------------------------------------------------------------- cabeçalho */

.cabecalho {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 2.75rem 0 2.25rem;
  text-align: center;
}

.logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.logos img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.logos .logo-retrato {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--borda);
}

.supra {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.cabecalho h1 {
  margin: .35rem 0 .2rem;
  font-size: clamp(2rem, 7vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--marca);
}

.subtitulo {
  margin: 0;
  font-size: 1.05rem;
  color: var(--tinta-suave);
  font-style: italic;
}

.abertura {
  margin: 2rem auto 0;
  max-width: 38rem;
  text-align: left;
}

.abertura p { margin: 0 0 .9rem; }
.abertura p:last-child { margin-bottom: 0; }

.abertura strong { color: var(--marca); font-weight: 600; }

.aviso {
  margin-top: 1.25rem !important;
  padding: .7rem .95rem;
  background: var(--marca-clara);
  border-left: 3px solid var(--marca);
  border-radius: 0 8px 8px 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------- progresso */

.barra-progresso {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 4px;
  background: var(--borda);
}

.barra-progresso__preenchimento {
  height: 100%;
  width: 0;
  background: var(--marca);
  transition: width .35s ease;
}

.contador {
  margin: 2rem 0 1.25rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ----------------------------------------------------------------- questões */

.questoes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.questao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.5rem 1.5rem 1.25rem;
  margin-bottom: 1.25rem;
}

.questao__numero {
  display: inline-block;
  margin-bottom: .6rem;
  padding: .2rem .6rem;
  background: var(--marca-clara);
  border-radius: 999px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marca);
}

.questao__enunciado {
  margin: 0 0 1.1rem;
  font-size: 1.09rem;
  font-weight: 600;
  line-height: 1.5;
}

.alternativas {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.alternativas legend {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.alternativa {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem .9rem;
  background: var(--superficie-2);
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.alternativa input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

.alternativa__letra {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid var(--borda);
  border-radius: 50%;
  background: var(--superficie);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--tinta-suave);
  transition: inherit;
}

.alternativa__texto { flex: 1; line-height: 1.5; }

.alternativa__marca {
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0;
}

/* estados — antes de responder */
.questao:not(.respondida) .alternativa:hover {
  border-color: var(--marca);
  background: var(--marca-clara);
}

.alternativa:focus-within {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* estados — depois de responder */
.questao.respondida .alternativa { cursor: default; }

.questao.respondida .alternativa:not(.correta):not(.escolhida-errada) {
  opacity: .5;
}

.alternativa.correta {
  border-color: var(--acerto);
  background: var(--acerto-fundo);
}
.alternativa.correta .alternativa__letra {
  border-color: var(--acerto);
  color: var(--acerto);
}
.alternativa.correta .alternativa__marca { opacity: 1; color: var(--acerto); }

.alternativa.escolhida-errada {
  border-color: var(--erro);
  background: var(--erro-fundo);
}
.alternativa.escolhida-errada .alternativa__letra {
  border-color: var(--erro);
  color: var(--erro);
}
.alternativa.escolhida-errada .alternativa__marca { opacity: 1; color: var(--erro); }

/* -------------------------------------------------------------- comentário */

.comentario {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: var(--superficie-2);
  border-left: 3px solid var(--marca);
  animation: surgir .3s ease;
}

.comentario__veredito {
  margin: 0 0 .4rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.comentario.certo { border-left-color: var(--acerto); }
.comentario.certo .comentario__veredito { color: var(--acerto); }
.comentario.errado { border-left-color: var(--erro); }
.comentario.errado .comentario__veredito { color: var(--erro); }

.comentario__texto { margin: 0; font-size: .975rem; line-height: 1.6; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

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

/* ---------------------------------------------------------------- resultado */

.resultado {
  margin: 2.5rem 0 1rem;
  padding: 2.25rem 1.75rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-align: center;
  animation: surgir .4s ease;
}

.resultado:focus { outline: none; }

.resultado__rotulo {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.resultado__nota {
  margin: .35rem 0 .25rem;
  font-size: 3.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--marca);
}

.resultado__total {
  font-size: 1.75rem;
  color: var(--tinta-suave);
}

.resultado__mensagem {
  margin: 0 auto;
  max-width: 30rem;
  color: var(--tinta-suave);
}

.resultado__mapa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.resultado__mapa li {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .8125rem;
  font-weight: 700;
}

.resultado__mapa .ok  { background: var(--acerto-fundo); color: var(--acerto); border: 1.5px solid var(--acerto); }
.resultado__mapa .nao { background: var(--erro-fundo);   color: var(--erro);   border: 1.5px solid var(--erro); }

.botao {
  appearance: none;
  padding: .7rem 1.6rem;
  background: var(--marca);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s;
}

.botao:hover { filter: brightness(1.12); }
.botao:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

@media (prefers-color-scheme: dark) {
  .botao { color: #0d1514; }
}

/* ------------------------------------------------------------------ rodapé */

.rodape {
  margin-top: 3rem;
  padding: 1.75rem 0 2.5rem;
  border-top: 1px solid var(--borda);
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .8125rem;
  color: var(--tinta-suave);
}

.rodape p { margin: 0 0 .25rem; }
.rodape__creditos { opacity: .8; }

/* ------------------------------------------------------------------- telas */

@media (max-width: 34rem) {
  body { font-size: 1rem; }
  .cabecalho { padding: 2rem 0 1.75rem; }
  .logos { gap: 1.1rem; }
  .logos img { width: 52px; height: 52px; }
  .questao { padding: 1.25rem 1.1rem 1rem; }
  .alternativa { padding: .7rem .75rem; gap: .6rem; }
  .resultado { padding: 1.75rem 1.1rem; }
}