/* Caderno do Condutor: folha pautada, marca-texto e abas coloridas para os quatro assuntos da prova. */

:root {
  --papel: #fbf8f1;
  --papel-fundo: #efe9dc;
  --folha-cor: #fffefa;
  --pauta: #dbe4ef;
  --margem-vermelha: #eba7a7;
  --tinta: #1d2431;
  --tinta-leve: #536077;
  --grafite: #39404f;
  --risco: #d8d0bf;
  --grifo: #fff176;
  --grifo-forte: #ffe14d;
  --ambar: #a86b00;
  --ambar-claro: #fff3d1;
  --rubi: #b0213a;
  --rubi-claro: #fde8ec;
  --anil: #2b48a8;
  --anil-claro: #e7ecfc;
  --musgo: #2f6f2b;
  --musgo-claro: #e6f3e2;
  --contracapa: #2a2f3a;
  --contracapa-texto: #e9e4d8;
  --foco: #2b48a8;
  --sombra: 0 1px 2px rgba(29, 36, 49, .08), 0 6px 18px rgba(29, 36, 49, .07);
  --raio: 14px;
  --corpo: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif;
  --titulo: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mao: "Segoe Print", "Bradley Hand", "Comic Neue", ui-rounded, cursive;
  --entrelinha: 1.75rem;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --papel: #171a21;
    --papel-fundo: #12151b;
    --folha-cor: #1e222b;
    --pauta: #272d39;
    --margem-vermelha: #6b3239;
    --tinta: #ece8de;
    --tinta-leve: #aab2c2;
    --grafite: #cfd4de;
    --risco: #363d4b;
    --grifo: rgba(255, 225, 77, .26);
    --grifo-forte: rgba(255, 225, 77, .42);
    --ambar: #f2b740;
    --ambar-claro: #2f2716;
    --rubi: #ff7a90;
    --rubi-claro: #33191f;
    --anil: #93a9ff;
    --anil-claro: #1c2440;
    --musgo: #86cf7b;
    --musgo-claro: #18291a;
    --contracapa: #0e1015;
    --contracapa-texto: #d6d1c4;
    --foco: #93a9ff;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

html { box-sizing: border-box; }
*, ::before, ::after { box-sizing: inherit; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--papel-fundo);
  color: var(--tinta);
  font: 1.0625rem/var(--entrelinha) var(--corpo);
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--anil); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover, a:active { text-decoration-thickness: .14em; }
a.fora::after { content: " ↗"; font-size: .8em; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }

.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--tinta); color: var(--folha-cor); padding: .5rem .9rem; border-radius: 8px;
}
.pular:focus, .pular:focus-visible { top: .8rem; }

/* Capa: a barra de cima, com o selo e o índice do caderno */
.capa {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  padding: .65rem max(1rem, calc((100vw - 68rem) / 2));
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--risco);
}
.marca { display: flex; align-items: center; gap: .6rem; color: var(--tinta); text-decoration: none; }
.marca img { width: 44px; height: 44px; }
.marca-nome { font: 700 1.15rem/1.1 var(--titulo); letter-spacing: -.01em; }
.marca-nome em { font-style: normal; color: var(--rubi); }
.sumario-geral { margin-left: auto; }
.sumario-geral ul { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.sumario-geral a {
  display: block; padding: .3rem .7rem; border-radius: 999px;
  color: var(--grafite); text-decoration: none; font-size: .95rem; line-height: 1.5rem;
}
.sumario-geral a:hover { background: var(--grifo); }
.sumario-geral a[aria-current="page"] { background: var(--tinta); color: var(--folha-cor); }

/* A folha: papel pautado com margem vermelha e furos da espiral no topo */
.folha {
  position: relative;
  max-width: 52rem;
  margin: 2.2rem auto 3rem;
  padding: 3.2rem clamp(1.1rem, 4vw, 3.4rem) 3rem clamp(1.1rem, 6vw, 4.6rem);
  background-color: var(--folha-cor);
  background-image:
    linear-gradient(90deg, transparent clamp(.55rem, 4.2vw, 3.2rem), var(--margem-vermelha) clamp(.55rem, 4.2vw, 3.2rem),
                    var(--margem-vermelha) calc(clamp(.55rem, 4.2vw, 3.2rem) + 2px), transparent calc(clamp(.55rem, 4.2vw, 3.2rem) + 2px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--entrelinha) - 1px), var(--pauta) calc(var(--entrelinha) - 1px) var(--entrelinha));
  background-position: 0 0, 0 2.4rem;
  border-radius: 6px var(--raio) var(--raio) 6px;
  box-shadow: var(--sombra);
}
.folha::before {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: .9rem; height: .9rem;
  background: radial-gradient(circle at center, var(--papel-fundo) 0 .32rem, transparent .36rem) 0 0 / 2.1rem .9rem repeat-x;
}

.trilha { font-size: .9rem; color: var(--tinta-leve); margin-bottom: .4rem; }
.trilha a { color: inherit; text-decoration-color: var(--risco); }

.folha-topo { margin-bottom: 1.6rem; }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.2; letter-spacing: -.012em; }
h1 { font-size: clamp(1.85rem, 4.6vw, 2.6rem); margin: .2rem 0 .7rem; text-wrap: balance; }
.olho { font-size: 1.15rem; color: var(--grafite); margin: 0 0 .6rem; max-width: 42rem; }
.carimbo {
  display: inline-block; margin: .2rem 0 0; padding: .05rem .6rem;
  font: .82rem/1.6rem var(--corpo); color: var(--tinta-leve);
  border: 1.5px dashed var(--risco); border-radius: 6px; transform: rotate(-1deg);
}

.texto > * + * { margin-top: 1rem; }
.texto p, .texto li { max-width: 44rem; }
.texto h2 {
  width: fit-content; margin: 2.4rem 0 .4rem; padding: 0 .2rem;
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  background-image: linear-gradient(transparent 58%, var(--grifo) 58%, var(--grifo) 94%, transparent 94%);
}
.texto h3 { font-size: 1.2rem; margin: 1.8rem 0 .2rem; color: var(--grafite); }
mark { background: var(--grifo); color: inherit; padding: 0 .15em; border-radius: 3px; }
strong { font-weight: 650; }

.topicos, .passos { padding-left: 1.4rem; }
.topicos li::marker { content: "✎  "; color: var(--tinta-leve); }
.topicos li + li, .passos li + li { margin-top: .35rem; }
.passos { counter-reset: passo; list-style: none; padding-left: 0; }
.passos li { counter-increment: passo; position: relative; padding-left: 2.6rem; min-height: 2rem; }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: -.05rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  font: 700 .95rem/1 var(--titulo); color: var(--folha-cor); background: var(--grafite); border-radius: 50%;
}

.sumario {
  margin: 0 0 1.8rem; padding: .8rem 1.1rem; max-width: 30rem;
  background: var(--papel); border: 1px solid var(--risco); border-radius: 10px;
}
.sumario p { margin: 0 0 .2rem; font: 700 .8rem/1.4rem var(--corpo); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-leve); }
.sumario ol { margin: 0; padding-left: 1.2rem; }

/* Lembretes: notas adesivas com a cor do tipo */
.lembrete {
  --cor: var(--ambar); --fundo: var(--ambar-claro);
  position: relative; max-width: 44rem;
  padding: .9rem 1.1rem 1rem 1.25rem;
  background: var(--fundo); border-left: 5px solid var(--cor); border-radius: 4px 12px 12px 4px;
}
.lembrete::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 1.1rem; height: 1.1rem;
  background: linear-gradient(315deg, var(--folha-cor) 50%, color-mix(in srgb, var(--cor) 25%, transparent) 50%);
  border-radius: 0 0 12px 0;
}
.lembrete-atencao { --cor: var(--rubi); --fundo: var(--rubi-claro); }
.lembrete-lei { --cor: var(--anil); --fundo: var(--anil-claro); }
.lembrete-dica { --cor: var(--musgo); --fundo: var(--musgo-claro); }
.lembrete-tipo { margin: 0; font: 700 .76rem/1.3rem var(--corpo); text-transform: uppercase; letter-spacing: .09em; color: var(--cor); }
.lembrete-titulo { margin: .1rem 0 .3rem; font: 700 1.05rem/1.45 var(--titulo); }
.lembrete p:last-child, .lembrete ul { margin-bottom: 0; }

.trecho { margin-left: 0; margin-right: 0; max-width: 44rem; }
.trecho blockquote {
  margin: 0; padding: .3rem 0 .3rem 1.2rem;
  border-left: 3px solid var(--risco); font-style: italic; color: var(--grafite);
}
.trecho blockquote p { margin: 0; }
.trecho figcaption { margin-top: .35rem; padding-left: 1.2rem; font-size: .9rem; color: var(--tinta-leve); }
.trecho figcaption::before { content: "— "; }

.rolagem { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: .97rem; background: var(--folha-cor); }
th, td { padding: .5rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--risco); line-height: 1.5; }
thead th { font: 700 .85rem/1.4 var(--corpo); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-leve); border-bottom: 2px solid var(--grafite); }

/* Abas dos quatro assuntos */
.abas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; padding: 0; margin: 1.4rem 0; list-style: none; }
.aba { --cor: var(--ambar); --fundo: var(--ambar-claro); position: relative; }
.aba a {
  display: flex; flex-direction: column; gap: .3rem; height: 100%;
  padding: 1.5rem 1.2rem 1.1rem; border-radius: 4px 4px var(--raio) var(--raio);
  background: var(--fundo); color: var(--tinta); text-decoration: none;
  border-top: 6px solid var(--cor); box-shadow: var(--sombra);
  transition: transform .15s ease;
}
.aba a:hover { transform: translateY(-3px); }
.aba::before {
  content: ""; position: absolute; top: -.85rem; left: 1rem; width: 4.5rem; height: .9rem;
  background: var(--cor); border-radius: 8px 8px 0 0;
}
.aba-nome { font: 700 1.15rem/1.3 var(--titulo); }
.aba-conta { font-size: .9rem; color: var(--tinta-leve); }
.aba-ambar { --cor: var(--ambar); --fundo: var(--ambar-claro); }
.aba-rubi { --cor: var(--rubi); --fundo: var(--rubi-claro); }
.aba-anil { --cor: var(--anil); --fundo: var(--anil-claro); }
.aba-musgo { --cor: var(--musgo); --fundo: var(--musgo-claro); }

.assunto-ambar .folha { border-top: 8px solid var(--ambar); }
.assunto-rubi .folha { border-top: 8px solid var(--rubi); }
.assunto-anil .folha { border-top: 8px solid var(--anil); }
.assunto-musgo .folha { border-top: 8px solid var(--musgo); }

/* Página inicial */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .8rem; padding: 0; list-style: none; }
.numeros li { padding: .9rem 1rem; background: var(--papel); border: 1px solid var(--risco); border-radius: 12px; }
.numeros strong { display: block; font: 800 2rem/1.1 var(--titulo); color: var(--rubi); }

.botoes { display: flex; flex-wrap: wrap; gap: .7rem; }
.botao, .simulado button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .65rem 1.2rem; border-radius: 999px; border: 2px solid var(--tinta);
  font: 650 1rem/1.4 var(--corpo); text-decoration: none; cursor: pointer;
  background: var(--tinta); color: var(--folha-cor);
}
.botao-leve, .simulado button.botao-leve { background: transparent; color: var(--tinta); }
.botao:hover, .simulado button:hover { filter: brightness(1.12); }

/* Questões no formato de cartão-resposta */
.questao {
  margin: 1.4rem 0; padding: 1.1rem 1.2rem 1rem;
  background: var(--folha-cor); border: 1px solid var(--risco); border-radius: var(--raio); box-shadow: var(--sombra);
}
.questao fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.questao legend { padding: 0; margin-bottom: .7rem; font-weight: 600; line-height: 1.55; }
.questao-numero {
  display: inline-block; margin-right: .4rem; padding: 0 .55rem;
  font: 700 .8rem/1.5rem var(--corpo); letter-spacing: .04em; text-transform: uppercase;
  color: var(--folha-cor); background: var(--grafite); border-radius: 6px;
}
.opcao {
  position: relative; display: flex; align-items: flex-start; gap: .75rem;
  padding: .5rem .6rem; margin: .2rem 0; border-radius: 10px; cursor: pointer; line-height: 1.5;
}
.opcao:hover { background: var(--papel); }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bolha {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  font: 700 .9rem/1 var(--titulo); border: 2px solid var(--grafite); border-radius: 50%; color: var(--grafite);
}
.opcao-texto { padding-top: .15rem; }
.opcao:has(input:checked) .bolha { background: var(--grafite); color: var(--folha-cor); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 1px; }
.opcao:has(input:disabled) { cursor: default; }
.opcao.era-esta { background: var(--musgo-claro); }
.opcao.era-esta .bolha { border-color: var(--musgo); color: var(--musgo); }
.questao .opcao.acertou .bolha { background: var(--musgo); border-color: var(--musgo); color: var(--folha-cor); }
.opcao.errou { background: var(--rubi-claro); }
.questao .opcao.errou .bolha { background: var(--rubi); border-color: var(--rubi); color: var(--folha-cor); }
.veredito { margin: .6rem 0 0; font-weight: 700; }
.questao-certa .veredito { color: var(--musgo); }
.questao-errada .veredito { color: var(--rubi); }
.comentario { margin-top: .7rem; border-top: 1px dashed var(--risco); padding-top: .5rem; }
.comentario summary { cursor: pointer; font-weight: 650; color: var(--anil); width: fit-content; }
.comentario p { margin: .55rem 0 0; }
.comentario-base { font-size: .92rem; color: var(--tinta-leve); }
.refazer { margin-top: .6rem; background: none; border: 0; padding: 0; color: var(--anil); font: inherit; text-decoration: underline; cursor: pointer; }

/* Simulado */
.sem-script { padding: .7rem 1rem; background: var(--papel); border-radius: 10px; }
.com-script .sem-script { display: none; }
.simulado-painel {
  padding: 1.2rem 1.3rem; margin: 1rem 0 1.6rem;
  background: var(--anil-claro); border: 1px solid color-mix(in srgb, var(--anil) 30%, transparent); border-radius: var(--raio);
}
.simulado-painel h2 { margin: 0 0 .4rem; font-size: 1.4rem; background: none; }
.simulado-painel label.tempo-dobrado { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0 1rem; }
.simulado-painel input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .3rem; accent-color: var(--anil); }
.simulado-barra {
  position: sticky; top: 4.6rem; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
  padding: .7rem 1rem; margin: 0 0 1rem; background: var(--tinta); color: var(--folha-cor); border-radius: 12px;
}
.simulado-barra .relogio { font: 700 1.25rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.simulado-barra .relogio.pouco-tempo { color: #ffb4c0; }
.simulado-barra button { margin-left: auto; background: var(--grifo-forte); color: #1d2431; border-color: var(--grifo-forte); }
.cartao-resposta { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0 0 1.2rem; list-style: none; }
.cartao-resposta a {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 2px solid var(--risco); color: var(--grafite); text-decoration: none; font: 650 .85rem/1 var(--corpo);
}
.cartao-resposta a.marcada { background: var(--grafite); border-color: var(--grafite); color: var(--folha-cor); }
.cartao-resposta a.certa { background: var(--musgo); border-color: var(--musgo); color: var(--folha-cor); }
.cartao-resposta a.errada { background: var(--rubi); border-color: var(--rubi); color: var(--folha-cor); }
.em-prova .comentario { display: none; }
.resultado {
  padding: 1.2rem 1.3rem; margin: 0 0 1.4rem; border-radius: var(--raio);
  background: var(--papel); border: 2px solid var(--grafite);
}
.resultado h2 { margin: 0 0 .3rem; background: none; }
.resultado .placar { font: 800 2.4rem/1.1 var(--titulo); }
.resultado ul { padding-left: 1.2rem; }

/* Dados da empresa */
.dados-empresa { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 1rem 0; }
.dados-empresa dt { font-weight: 700; color: var(--tinta-leve); }
.dados-empresa dd { margin: 0; }

/* Contracapa */
.contracapa { background: var(--contracapa); color: var(--contracapa-texto); padding: 2.4rem 1rem 2.8rem; font-size: .95rem; line-height: 1.6; }
.contracapa-miolo { max-width: 52rem; margin: 0 auto; }
.contracapa a { color: inherit; }
.contracapa-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; padding: 0; margin: 1rem 0; list-style: none; }
.contracapa-fontes, .contracapa-ano { color: color-mix(in srgb, var(--contracapa-texto) 72%, transparent); }

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .capa { position: static; }
  .sumario-geral { margin-left: 0; width: 100%; }
  .sumario-geral a { padding: .25rem .6rem; font-size: .92rem; }
  .folha { margin: 1rem .5rem 2rem; border-radius: 6px; }
  html { scroll-padding-top: 8rem; }
  .simulado-barra { top: .4rem; gap: .35rem .8rem; padding: .5rem .75rem; }
  .simulado-barra .relogio { font-size: 1.1rem; }
  .simulado-barra button { padding: .35rem .9rem; font-size: .92rem; }
  .dados-empresa { grid-template-columns: 1fr; }
  .dados-empresa dd { margin-bottom: .5rem; }
}

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

@media print {
  .capa, .contracapa nav, .simulado-painel, .simulado-barra, .cartao-resposta, .pular { display: none; }
  body, .folha { background: #fff; box-shadow: none; }
  .comentario { display: block; }
}