/* estilo.css — segue DESIGN.md.
   5 cores · 1 família · escala 4px · fio 1px · sem sombra · sem emoji.

   A IDEIA: desafinado é onda, afinado é linha reta.
   Todo desenho do app é a mesma linha em estados diferentes — na marca, nos sinais
   das telas, na régua do afinômetro e no gráfico da voz. Nada de ícone decorativo. */

:root {
  --tinta: #1A1A18;
  --fundo: #FAF8F5;
  --acao: #1F4B43;
  --alerta: #A8431E;
  --papel: #FFFFFF;
  /* fio e véu derivados, como no tema.css do Ressoar Disartria — nunca hex solto */
  --linha: color-mix(in srgb, var(--tinta) 15%, var(--fundo));
  --veu: color-mix(in srgb, var(--acao) 6%, var(--fundo));
  --brando: color-mix(in srgb, var(--tinta) 72%, var(--fundo));
  --degrade: linear-gradient(135deg, #1F4B43 0%, #2E6F63 100%);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 20px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.envolucro {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

/* ---------- marca ---------- */
.topo { margin-bottom: 56px; }
.marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}
.marca .assinatura { display: flex; align-items: center; gap: 12px; }
.marca .nome {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin: 0;
}
.marca .selo {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brando);
  white-space: nowrap;
}
.sinal { display: block; color: var(--acao); flex: none; }

/* ---------- telas ---------- */
.tela { display: none; }
.tela.ativa { display: block; }

h2 {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin: 0 0 12px;
}
.ajuda { font-size: 20px; margin: 0 0 48px; max-width: 44ch; }
.rotulo {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acao);
  margin: 0 0 16px;
}

/* ---------- lista de escolhas ---------- */
.escolha {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: start;
  gap: 20px;
  width: 100%;
  min-height: 64px;
  padding: 24px;
  margin-bottom: 16px;
  text-align: left;
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 4px;
  cursor: pointer;
}
.escolha .sinal { margin-top: 4px; }
.escolha .titulo { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.012em; }
.escolha .nota { display: block; font-size: 17px; margin-top: 4px; color: var(--brando); }
.escolha:hover, .escolha:focus-visible { border-color: var(--acao); background: var(--veu); outline: none; }

/* ---------- botões ---------- */
.botao {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 16px 24px;
  margin-bottom: 16px;
  font-family: var(--fonte);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--papel);
  background: var(--degrade);
  border: 1px solid var(--acao);
  border-radius: 4px;
  cursor: pointer;
}
.botao.calmo { color: var(--tinta); background: transparent; border-color: var(--linha); }
.botao.calmo:hover { border-color: var(--acao); background: var(--veu); }
/* Desligado não pode virar fantasma: aos 70 anos "apagado" lê como quebrado,
   não como "espere". Some o preenchimento, o texto continua legível. */
.botao:disabled {
  color: var(--brando);
  background: var(--veu);
  border-color: var(--linha);
  cursor: default;
}
.dupla { display: flex; gap: 16px; }
.dupla .botao { text-align: center; }
.voltar { margin-top: 40px; }

/* ---------- painel ---------- */
.painel {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 32px 24px;
  margin-bottom: 40px;
}

.gigante {
  font-size: 88px;
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 4px;
}
.sob { text-align: center; font-size: 17px; color: var(--brando); margin: 0 0 40px; }

/* estado do exercício: a mesma linha da marca, não um emoji */
.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  justify-content: center;
  margin-bottom: 24px;
}
.estado .dizer { font-size: 20px; color: var(--brando); }
.estado .sinal { color: var(--acao); }

/* ---------- régua do afinômetro ---------- */
.regua { position: relative; height: 64px; margin-bottom: 12px; }
.regua .zona {
  position: absolute; left: 40%; width: 20%; top: 4px; bottom: 4px;
  background: var(--veu); border-left: 1px solid var(--linha); border-right: 1px solid var(--linha);
}
.regua .eixo { position: absolute; left: 0; right: 0; top: 31px; height: 1px; background: var(--linha); }
.regua .t { position: absolute; top: 26px; width: 1px; height: 11px; background: var(--linha); }
.regua .t.alta { top: 20px; height: 23px; }
.regua .t.zero { top: 10px; height: 43px; background: var(--tinta); }
.agulha {
  position: absolute; top: 4px; bottom: 4px; width: 3px;
  background: var(--alerta);
  left: 50%;
  transform: translateX(-1px);
  transition: left 90ms linear;
}
.agulha.ok { background: var(--degrade); }
.marcas {
  display: flex; justify-content: space-between;
  font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brando);
}
.veredito {
  text-align: center; font-size: 22px; font-weight: 600;
  margin: 32px 0 0; min-height: 34px;
}
.veredito.ok { color: var(--acao); }
.veredito.fora { color: var(--alerta); }

/* ---------- exercícios ---------- */
.passo {
  font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; color: var(--brando); margin: 0 0 32px;
}
.resposta { font-size: 20px; font-weight: 600; margin: 0; min-height: 62px; text-align: center; }
.resposta.ok { color: var(--acao); }
.resposta.fora { color: var(--alerta); }

/* sequência: três casas ligadas pelo mesmo fio da marca */
.trilha {
  position: relative;
  display: flex; gap: 12px; justify-content: center;
  margin: 8px 0 32px;
}
.trilha::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%;
  height: 1px; background: var(--linha);
}
.trilha span {
  position: relative;
  width: 88px; height: 72px; line-height: 70px; text-align: center;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: 4px;
  font-size: 18px; color: var(--brando);
}
.trilha span.cheio { border-color: var(--acao); color: var(--acao); font-weight: 600; }

canvas {
  display: block; width: 100%; height: 140px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 4px;
}

/* ---------- relatório ---------- */
table { width: 100%; border-collapse: collapse; font-size: 17px; }
td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
td:first-child { width: 34%; white-space: nowrap; padding-right: 16px; color: var(--brando); }
td strong { font-size: 19px; }
tr:last-child td { border-bottom: 0; }

.rodape {
  font-size: 16px;
  color: var(--brando);
  border-top: 1px solid var(--linha);
  padding-top: 24px;
  margin-top: 96px;
}

/* "em construção" — deixa claro que a obra segue, sem parecer inacabada */
.obra { margin-top: 48px; }
.obra ul { list-style: none; margin: 0; padding: 0; }
.obra li {
  position: relative;
  font-size: 17px;
  color: var(--brando);
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--linha);
}
.obra li:last-child { border-bottom: 0; }
.obra li::before {
  content: ''; position: absolute; left: 0; top: 24px;
  width: 16px; height: 1px; background: var(--acao);
}

@media (max-width: 380px) {
  .trilha span { width: 76px; }
  .gigante { font-size: 72px; }
}