/* Máquina — base común
   Blanco y negro de máquina de escribir; un solo acento de color (#ff0066). */

:root {
  --papel: #fbfbf9;
  --papel-2: #efefec;
  --tinta: #151514;
  --tinta-suave: #4b4b49;
  --tinta-tenue: #6e6e6a;   /* 4.9:1 sobre el papel (AA) */
  --cinta: #ff0066;
  --linea: rgba(20, 20, 19, 0.16);
  --sombra: 0 1px 2px rgba(0, 0, 0, .10), 0 8px 24px rgba(0, 0, 0, .08);
  --fondo-visor: #e3e3e0;

  --mono: "Special Elite", "Courier Prime", "Courier New", Courier, monospace;
  --mono-limpia: "Courier Prime", "Courier New", Courier, monospace;

  --gutter: 16px;
  --barra-alto: 52px;
  color-scheme: light dark;
}

/* Papel carbón */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #121212;
    --papel-2: #1d1d1c;
    --tinta: #ededeb;
    --tinta-suave: #b5b5b1;
    --tinta-tenue: #8f8f8b;
    --cinta: #ff0066;
    --linea: rgba(237, 237, 235, 0.15);
    --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
    --fondo-visor: #0a0a0a;
  }
}
:root[data-theme="dark"] {
  --papel: #121212;
  --papel-2: #1d1d1c;
  --tinta: #ededeb;
  --tinta-suave: #b5b5b1;
  --tinta-tenue: #8f8f8b;
  --cinta: #ff0066;
  --linea: rgba(237, 237, 235, 0.15);
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
  --fondo-visor: #0a0a0a;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--cinta); text-underline-offset: 3px; }
a:hover { color: var(--cinta); }

button, input, select { font: inherit; color: inherit; }

/* Botón tipo tecla */
.tecla {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  min-width: 40px; min-height: 40px;
  padding: 0 .7em;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--linea);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, box-shadow .06s ease, background .15s;
}
.tecla:hover { background: var(--papel-2); }
.tecla:active, .tecla[aria-pressed="true"] { transform: translateY(2px); box-shadow: 0 0 0 var(--linea); }
.tecla[aria-pressed="true"] { color: var(--cinta); }
.tecla:disabled { opacity: .35; cursor: default; }
.tecla:focus-visible { outline: 2px solid var(--cinta); outline-offset: 2px; }

/* Selector de idioma: palabras tecleadas, la activa subrayada con cinta */
.idiomas { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.idioma {
  appearance: none; background: none; border: 0; cursor: pointer;
  min-height: 36px; padding: 0 .45em;
  font-family: var(--mono); font-size: 14px; line-height: 1;
  color: var(--tinta-suave);
  text-decoration: none; border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}
.idioma:hover { color: var(--cinta); }
.idioma[aria-pressed="true"] { color: var(--tinta); text-decoration: underline 2px var(--cinta); text-underline-offset: 5px; }
.idioma:focus-visible { outline: 2px solid var(--cinta); outline-offset: 1px; }
.idioma + .idioma::before { content: none; }
.idiomas-lista { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
/* versión compacta: botón "es ▾" con lista desplegable */
.idiomas-compacto { position: relative; }
.idiomas-compacto .idioma-actual { gap: .3em; padding: 0 .6em; text-transform: none; }
.idiomas-compacto .idioma-actual .flecha { font-size: .75em; opacity: .7; transition: transform .15s; }
.idiomas-compacto.abierto .idioma-actual .flecha { transform: rotate(180deg); }
.idiomas-compacto .idiomas-lista {
  display: none; position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
  flex-direction: column; align-items: stretch; gap: 0; min-width: 11rem; padding: 6px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; box-shadow: var(--sombra);
}
.idiomas-compacto.abierto .idiomas-lista { display: flex; }
.idiomas-compacto .idioma { display: flex; align-items: center; justify-content: flex-start; text-align: left; min-height: 40px; padding: 0 .8em; border-radius: 6px; }
.idiomas-compacto .idioma:hover { background: var(--papel-2); }
.nota-traduccion { color: var(--tinta-tenue); font-size: .8rem; }

/* Dedos: áreas táctiles de al menos 44 px en pantallas táctiles */
@media (pointer: coarse) {
  .tecla { min-width: 44px; min-height: 44px; }
  .idioma { min-width: 44px; min-height: 44px; }
}

/* Utilidades */
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cinta { color: var(--cinta); }
.tachado { text-decoration: line-through; text-decoration-color: var(--cinta); }

/* Tinta irregular: aplicar a contenedores de texto "mecanografiado" */
.tecleado { letter-spacing: .02em; }

/* Texto transcrito (lector y portada) */
.transcripcion { max-width: 68ch; margin: 0 auto; }
.transcripcion p { margin: 0 0 1.1em; }
.transcripcion del { text-decoration: none; color: var(--tinta-tenue); }
.transcripcion .nota { color: var(--tinta-tenue); font-style: normal; }
.transcripcion .derecha { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}