/* una sola columna angosta, casi sin cajas: los dígitos son lo único grande */
:root {
  color-scheme: light;
  --bg: #eaf5fa;
  --paper: #ffffff;
  --fg: #13303d;
  --dim: #6d8c99;
  --accent: #1f7aa3;
  --accent-fg: #ffffff;
  --bad: #c2413a;
  --good: #1d8a5b;
  --line: #c9e5f0;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b1820; --paper: #11232d; --fg: #e3f1f7; --dim: #7f9fad;
    --accent: #5fc0ea; --accent-fg: #06202b; --bad: #f07a72; --good: #4cc98e;
    --line: #22424f;
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
  padding:
    max(8px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(32px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.page { max-width: 26rem; margin-inline: auto; display: grid; gap: 28px; }
a { color: inherit; }
p { margin: 0; }
.dim { color: var(--dim); }

header { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; }
.home { font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.idiomas { font-size: .9rem; color: var(--dim); }
.idiomas a { color: var(--dim); }
.idiomas b { color: var(--fg); font-weight: 600; }

/* desafío | práctica */
.modos { display: flex; gap: 20px; border-bottom: 1px solid var(--line); }
.modos button {
  font: 500 1rem var(--sans);
  color: var(--dim);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 8px;
  cursor: pointer;
}
.modos button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

.vista { display: grid; gap: 20px; }

.rastro {
  font: 2rem/1.3 var(--mono);
  letter-spacing: .02em;
  word-break: break-all;
  max-height: 5.2em;
  overflow-y: auto;
  min-height: 1.3em;
}
.rastro s { color: var(--bad); text-decoration-thickness: 3px; }
#estado { font-size: .9rem; color: var(--dim); font-variant-numeric: tabular-nums; margin-top: -12px; min-height: 1.5em; }

/* la meta: un número editable subrayado, seguido de "decimales" */
.meta { display: flex; align-items: baseline; gap: 10px; }
.meta label { color: var(--dim); font-size: 1.1rem; }
.meta input {
  font: 600 1.6rem var(--mono);
  width: 4ch;
  padding: 0 0 2px;
  text-align: center;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.meta input:focus { border-bottom-color: var(--accent); outline: none; }
.meta input::-webkit-inner-spin-button,
.meta input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.bloque { display: grid; gap: 14px; }

button.principal {
  font: 600 1rem var(--sans);
  color: var(--accent-fg);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  min-height: 48px;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.teclado { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.teclado button {
  font: 500 1.4rem var(--mono);
  min-height: 56px;
  color: var(--fg);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.teclado button:active { background: var(--line); }

.mal { color: var(--bad); }
.bien { color: var(--good); }

/* práctica: cards de a dos dígitos. --cols es cuántas entran por fila (máx. 5) */
.tramo {
  --cols: 3;
  --ancho: min(100vw - 32px, 26rem);
  --wn: min(6.5rem, calc((var(--ancho) - (var(--cols) - 1) * 8px) / var(--cols)));
  display: grid;
  gap: 16px;
}
#tramo-pos { font-size: .9rem; font-variant-numeric: tabular-nums; }
.pares {
  --w: var(--wn);
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--w));
  gap: 8px;
}
.pares .par {
  display: block;
  padding: .3em 0;
  text-align: center;
  font: 600 calc(var(--w) / 2.2)/1.1 var(--mono);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.pares:not(.antes) { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pares.antes { --w: calc(var(--wn) * .6); gap: 6px; }
.pares.antes .par { color: var(--dim); background: transparent; border-style: dashed; }
.flechas { display: grid; grid-template-columns: 1fr 2fr; gap: 6px; }
.flechas button { min-height: 56px; font-size: 1.05rem; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#ant {
  font: 500 1rem var(--sans);
  color: var(--fg);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
#ant:active { background: var(--line); }
.flechas button:disabled { opacity: .35; cursor: default; }

.tabla details summary { color: var(--dim); cursor: pointer; font-size: .9rem; }
.tabla details pre { font: .95rem/1.7 var(--mono); margin: 12px 0 0; overflow-x: auto; }
.tabla .n { color: var(--dim); }