/* ==========================================================
   teclado.virtual — base compartilhada pelas duas páginas
   cores e temas, topo com abas, barra de progresso e teclas
   ========================================================== */
:root {
  /* tema escuro (padrão) */
  --bg: #0d1726;
  --ink: #e8eef6;
  /* texto digitado e títulos */
  --muted: #8fa3bf;
  /* opções e números secundários */
  --dim: #5d7190;
  /* palavras ainda não digitadas */
  --line: #22324c;
  /* contornos */
  --track: #12203a;
  /* fundo da barra */
  --accent: #ff8a1f;
  /* laranja */
  --accent-ink: #1a0d00;
  /* texto sobre o laranja */
  --accent-soft: rgba(255, 138, 31, .14);
  --error: #ff5c7a;
  --error-dim: #b84660;
  --overlay: rgba(13, 23, 38, .82);

  --u: 40px;
  /* unidade de tecla */
  --g: 6px;
  /* espaço entre teclas */
  --kh: 38px;
  /* altura da tecla */

  --sans: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Fragment Mono', 'JetBrains Mono', Consolas, monospace;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #eef1f5;
  --ink: #0d1726;
  --muted: #4f6180;
  --dim: #7f8ea6;
  --line: #c9d3df;
  --track: #dde4ec;
  --accent: #e06a00;
  --accent-ink: #ffffff;
  --accent-soft: rgba(224, 106, 0, .12);
  --error: #d6284a;
  --error-dim: #e07a8f;
  --overlay: rgba(238, 241, 245, .85);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

button {
  font-family: inherit;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.page {
  width: 100%;
  max-width: 1000px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 26px 32px 22px;
  display: flex;
  flex-direction: column;
}

/* ---------- topo ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.brand {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.01em;
}

.brand span {
  color: var(--accent);
}

/* abas entre as páginas */
.brand-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 36px;
}

.tabs {
  display: flex;
  gap: 22px;
}

.tabs a {
  padding: 10px 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}

.tabs a:hover {
  color: var(--ink);
}

.tabs a[aria-current="page"] {
  color: var(--accent);
  font-weight: 800;
  border-bottom-color: var(--accent);
}

.tabs a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.opt {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 6px;
  cursor: pointer;
  transition: color .15s;
}

.opt:hover {
  color: var(--ink);
}

.opt.active,
.opt[aria-pressed="true"] {
  color: var(--accent);
  font-weight: 800;
}

.opt.icon {
  display: inline-flex;
  align-items: center;
}

.opt.icon svg {
  width: 17px;
  height: 17px;
}

.opt .moon {
  display: none;
}

:root[data-theme="light"] .opt .sun {
  display: none;
}

:root[data-theme="light"] .opt .moon {
  display: block;
}

/* ---------- área central ---------- */
.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0 32px;
}

.track {
  position: relative;
  height: 8px;
  margin-bottom: 10px;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}

.track::before {
  content: "";
  position: absolute;
  inset: 3px 0 auto 0;
  border-top: 2px dashed var(--line);
}

.track-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  border-radius: 4px;
  transition: width .1s linear;
}

/* ---------- teclas ---------- */
.key {
  --w: 1;
  width: calc(var(--u) * var(--w) + var(--g) * (var(--w) - 1));
  height: var(--kh);
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  user-select: none;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}

.key.mod {
  color: var(--dim);
  font-size: 11px;
}

.key.homing::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: .6;
}

.key.hint {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}

.key.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.key.wrong {
  border-color: var(--error);
  background: var(--error);
  color: var(--accent-ink);
}

.credit {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--dim);
}

.footnote {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

kbd {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 7px;
}

/* ---------- telas (uma visível por vez) ---------- */
.tela {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.tela[hidden],
:root[data-tela="teclado"] #telaDigitacao,
:root:not([data-tela="teclado"]) #telaTeclado {
  display: none;
}

/* opções de duração, acentos e dica só aparecem no teste de digitação */
:root[data-tela="teclado"] .so-digitacao {
  display: none;
}

/* ---------- telas menores ---------- */
@media (max-width: 760px) {
  :root {
    --g: 4px;
    --u: calc((100vw - 32px - 14 * var(--g)) / 15);
    --kh: calc(var(--u) * 1.35);
  }

  .page {
    padding: 18px 16px;
  }

  .stage {
    padding: 28px 0 24px;
  }

  .key {
    font-size: 11px;
    border-radius: 5px;
  }

  .key.mod {
    font-size: 8px;
  }

  .footnote {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .key,
  .track-fill,
  .opt,
  .tabs a {
    transition: none;
  }
}