/*
 * Base visual do curso: cores, letra, espaço, forma, sombra e movimento, num arquivo só.
 * Toda tela liga este arquivo primeiro. Cor, medida e duração novas entram aqui, como variável, nunca soltas numa tela.
 *
 * Cores da identidade da Quati Educação (as mesmas do Faro Quati). Regras:
 *   - texto sobre fundo: pelo menos 7 para 1; texto branco só sobre cor que dê 4,5 para 1 ou mais;
 *   - a cor do módulo aparece só na moldura (faixa do alto, sumário, progresso); os blocos de conteúdo não mudam de cor;
 *   - certo e errado vêm sempre com ícone e palavra, nunca só com cor.
 */
:root {
  --fundo: #F3EEE6;
  --superficie: #FDFBF7;
  --rebaixo: #F8F3EB;
  --tinta: #2E1B0D;
  --apoio: #6B5748;
  --fio: #E2D6C6;
  --fio-forte: #C9B8A3;
  --marca: #4A2810;
  --bronze: #D6A67B;
  --botao: #AA4465;
  --botao-forte: #8E3553;
  --destaque: #A23F60;
  --destaque-fundo: #F8E6EC;
  --ok: #17676A;
  --ok-fundo: #E3F1F0;
  --erro: #A93415;
  --erro-fundo: #F9E4DD;
  --aviso: #85490A;
  --aviso-fundo: #FBEBD3;
  --foco: #1F7A7C;

  /* a cor do módulo: cada tela troca estas três pelo módulo aberto */
  --modulo: var(--marca);
  --modulo-claro: #EADFD3;
  --modulo-sobre: #FFFFFF;

  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  /* escala de letra, em rem: nada em px fixo, para acompanhar o tamanho que a pessoa escolheu no navegador */
  --t-1: 0.8125rem;
  --t0: 0.9375rem;
  --t1: 1.0625rem;
  --t2: 1.1875rem;
  --t3: 1.4375rem;
  --t4: 1.875rem;
  --t5: 2.375rem;

  /* escala de espaço */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1.25rem;
  --e5: 2rem;
  --e6: 3rem;
  --e7: 4.5rem;

  --raio-p: 6px;
  --raio: 10px;
  --raio-g: 16px;
  --pilula: 999px;

  /* sombra só em quem flutua ou se clica */
  --sombra-flutua: 0 8px 24px rgb(46 27 13 / .14);
  --sombra-cartao: 0 1px 2px rgb(46 27 13 / .06), 0 4px 14px rgb(46 27 13 / .06);

  /* movimento: resposta a uma ação, nunca enfeite */
  --rapido: 120ms;
  --medio: 200ms;
  --lento: 320ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

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

html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t1);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; color: var(--marca); text-wrap: balance; }
p { margin: 0 0 var(--e3); }
a { color: var(--destaque); text-underline-offset: 0.18em; }
a:hover { color: var(--botao-forte); }
strong { font-weight: 650; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

/* O foco de teclado aparece sempre, em qualquer coisa que se clica. */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--raio-p); }

.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pular {
  position: absolute; left: var(--e3); top: -4rem; z-index: 100;
  padding: var(--e2) var(--e4); background: var(--marca); color: #fff; border-radius: var(--raio);
  transition: top var(--medio) var(--curva);
}
.pular:focus { top: var(--e3); color: #fff; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 2.75rem; padding: 0 var(--e4);
  font: inherit; font-weight: 600; font-size: var(--t0); line-height: 1.2; text-decoration: none;
  color: #fff; background: var(--botao); border: 1px solid var(--botao); border-radius: var(--raio);
  cursor: pointer;
  transition: background-color var(--medio) var(--curva), border-color var(--medio) var(--curva), color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.botao:hover { background: var(--botao-forte); border-color: var(--botao-forte); color: #fff; }
.botao:active { box-shadow: inset 0 2px 4px rgb(0 0 0 / .2); }
.botao[disabled], .botao[aria-disabled="true"] { background: var(--fio); border-color: var(--fio); color: var(--apoio); cursor: not-allowed; }
.botao.secundario { background: var(--superficie); color: var(--marca); border-color: var(--fio-forte); }
.botao.secundario:hover { background: var(--rebaixo); border-color: var(--marca); color: var(--marca); }
.botao.discreto { background: transparent; border-color: transparent; color: var(--destaque); padding: 0 var(--e2); min-height: 2.25rem; }
.botao.discreto:hover { background: var(--destaque-fundo); color: var(--botao-forte); }
.botao.largo { width: 100%; }
.botao svg { flex: none; }

/* ---------- Campos ---------- */
.campo { display: block; margin-bottom: var(--e4); }
.campo > span, .rotulo { display: block; margin-bottom: var(--e1); font-size: var(--t0); font-weight: 600; color: var(--marca); }
.campo small, .ajuda { display: block; margin-top: var(--e1); font-size: var(--t-1); color: var(--apoio); }
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%; padding: 0.65rem 0.8rem;
  font: inherit; color: var(--tinta); background: #fff;
  border: 1px solid var(--fio-forte); border-radius: var(--raio);
  transition: border-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
input:hover, textarea:hover, select:hover { border-color: var(--apoio); }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--foco); }
textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--botao); flex: none; }
.marcar { display: flex; align-items: flex-start; gap: var(--e2); font-size: var(--t0); cursor: pointer; }
.marcar input { margin-top: 0.2rem; }

/* ---------- Avisos ---------- */
.aviso { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e3) var(--e4); border-radius: var(--raio); font-size: var(--t0); background: var(--aviso-fundo); color: var(--aviso); border: 1px solid #EBCB99; }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); border-color: #E8BFB1; }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); border-color: #B5D9D7; }
.aviso svg { flex: none; margin-top: 0.15rem; }
.aviso:empty { display: none; }

/* ---------- Cartão ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--fio); border-radius: var(--raio-g); box-shadow: var(--sombra-cartao); }

.etiqueta { display: inline-flex; align-items: center; gap: var(--e1); padding: 0.1rem 0.6rem; border-radius: var(--pilula); font-size: var(--t-1); font-weight: 600; background: var(--rebaixo); color: var(--apoio); border: 1px solid var(--fio); }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); border-color: #B5D9D7; }
.etiqueta.atencao { background: var(--aviso-fundo); color: var(--aviso); border-color: #EBCB99; }
.etiqueta.erro { background: var(--erro-fundo); color: var(--erro); border-color: #E8BFB1; }

.barra-de-progresso { height: 0.5rem; background: var(--fio); border-radius: var(--pilula); overflow: hidden; }
.barra-de-progresso > i { display: block; height: 100%; width: 0; background: var(--modulo); border-radius: var(--pilula); transition: width var(--lento) var(--curva); }

/* Quem pediu menos movimento no sistema recebe troca instantânea, em tudo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  body { background: #fff; }
  .nao-imprime { display: none !important; }
}