/* SPDX-License-Identifier: Apache-2.0 · Copyright 2026 UtopiaIA */
/* Modo texto: maquetación y los pocos tokens que no trae ../modern.css. La paleta, el fondo, la aurora
   y los botones (.go, .ghost, .swap) son los de modern.css, que se carga después: si el restyle la
   cambia, esta página la hereda. El texto pequeño va solo sobre --bg o --panel (4,5:1 o más). */
:root {
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --err: #f4a29a;          /* 5,8:1 sobre --bg; el --rec del modo voz da 2,9 */
  --edge: #8790ae;         /* borde del campo de texto: 3,7:1 sobre --bg (--line da 1,6) */
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.45;
  background: var(--bg); color: var(--fg); min-height: 100vh; display: flex; flex-direction: column;
  overflow-wrap: anywhere;
}
@supports (min-height: 100dvh) { body { min-height: 100dvh; } }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ── cabecera: la del modo voz ── */
header { padding: 14px max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left)); padding-top: max(14px, env(safe-area-inset-top));
  display: flex; align-items: baseline; gap: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header h1 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .2px; }
header .sub { font-size: .68rem; color: var(--mut); text-transform: uppercase; letter-spacing: .16em; }
header .hnav { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
header .hnav a { color: var(--accent); text-decoration: none; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid transparent; padding-bottom: 1px; }
header .hnav a:hover { border-color: var(--accent); }

main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 22px max(24px, env(safe-area-inset-right)) 28px max(24px, env(safe-area-inset-left)); flex: 1 0 auto; }

/* ── barra de idiomas ── */
.langbar { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); grid-template-areas: "lsl . ltl" "ssl swp stl" "det . ."; gap: 6px 12px; align-items: center; margin-bottom: 14px; }
.lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; color: var(--mut); }
.lsl { grid-area: lsl; } .ltl { grid-area: ltl; } .ssl { grid-area: ssl; } .stl { grid-area: stl; } #swap { grid-area: swp; } .det { grid-area: det; }
.sel { width: 100%; min-width: 0; min-height: 44px; background: var(--panel); color: var(--fg); border: 1px solid var(--edge); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 16px; }
#swap { width: 48px; min-height: 44px; padding: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; justify-self: center; }
.det { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 1.2em; min-width: 0; }
.detected { font-size: .8rem; color: var(--mut); }
.detected:empty { display: none; }
/* «¿Está en español? Traducir del español»: un enlace con cuerpo de botón (5,9:1 sobre --bg). */
.hint { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .8rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.hint:hover { color: var(--accent-2); }

/* ── los dos paneles ── */
.panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.panel { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.psrc { border-color: var(--edge); }
.psrc:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
#src { display: block; width: 100%; min-height: max(28vh, 220px); max-height: 60vh; field-sizing: content; resize: none; border: 0; outline: none; background: transparent;
  color: var(--fg); font: inherit; font-size: 1.15rem; line-height: 1.5; padding: 16px 56px 12px 16px; border-radius: 14px 14px 0 0; }
#src::placeholder { color: var(--mut); opacity: 1; }
.clear { position: absolute; top: 6px; right: 6px; min-width: 44px; min-height: 44px; padding: 0; font: inherit; font-size: 1rem; cursor: pointer; }
.out { flex: 1 1 auto; min-height: max(28vh, 220px); padding: 16px; font-size: 1.15rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 14px 14px 0 0; }
.out:focus-visible { outline-offset: -2px; }
/* Vacía, dice qué va ahí (--mut sobre --panel, 5,3:1); con la pregunta, la franja o el aviso, no. */
.out:empty::before { content: attr(data-ph); color: var(--mut); }
.out[aria-busy="true"]:empty::before, .pdst:has(> .ask:not([hidden])) .out:empty::before, .pdst:has(> .offer:not([hidden])) .out:empty::before { content: none; }
/* …y entonces la salida vacía no ocupa sitio: la pregunta o la franja suben (con el teclado del móvil
   abierto, cada línea cuenta). */
.pdst:has(> .ask:not([hidden])) .out:empty, .pdst:has(> .offer:not([hidden])) .out:empty { min-height: 0; padding: 0; height: 12px; }
/* Sin traducción, la franja o el aviso suben junto a ella; el pie del panel se queda abajo. */
.out:empty { flex: 0 0 auto; min-height: 64px; }
.pdst .pfoot { margin-top: auto; }
.out .stale { opacity: .72; }      /* 5,44:1 sobre --panel */
.pfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 8px 12px 10px 16px; border-top: 1px solid var(--line); min-height: 60px; }
.count, .engine { font-size: .75rem; color: var(--mut); }
.count { margin-left: auto; font-variant-numeric: tabular-nums; }
.acts { display: flex; gap: 8px; margin-left: auto; }
.acts button, .offer button { min-height: 44px; padding: 0 16px; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.acts button:disabled { opacity: .55; cursor: default; }
/* Los .ghost de modern.css (--mut, y --accent al pasar) dan 4,4:1 y 3,6:1 sobre --panel: aquí, --fg
   (7,4:1) y --accent-2 al pasar (4,9:1). */
.panel .ghost { color: var(--fg); }
.panel .ghost:hover { color: var(--accent-2); }
.note { margin: 0 16px 12px; font-size: .86rem; color: var(--fg); }
.note.err { color: var(--err); }
.notebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.notebar .note { flex: 1 1 200px; }
.notebar .note[hidden] + button:not([hidden]) { margin-left: 16px; }
#retry { margin: 0 16px 12px 0; min-height: 44px; padding: 0 16px; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
/* «Traduciendo…»: aparece si tarda (no se anuncia: la salida ya lleva aria-busy y la traducción se lee al acabar). */
.busy { margin: 0 16px 12px; font-size: .82rem; color: var(--mut); display: flex; align-items: center; gap: 8px; }
.busy::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: latido 1.1s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .25; transform: scale(.7); } }
/* La pregunta del idioma: en el panel de la traducción, con los más probables a un toque. */
.ask { margin: 0 12px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: .9rem; }
.askbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.askbtns button { min-height: 44px; padding: 0 16px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.pfoot .note { margin: 0; font-size: .78rem; color: var(--warn); }
.cachenote { margin: 14px 0 0; color: var(--warn); }

/* ── la franja de permiso y la barra de progreso ── */
.offer { margin: 0 12px 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--bg); font-size: .88rem; line-height: 1.5; }
.offer .detail { margin-top: 6px; font-size: .8rem; color: var(--mut); }
.offer .warn { margin-top: 8px; font-size: .8rem; color: var(--warn); }
.offer .warn p + p { margin-top: 4px; }
.offerbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.offer.line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.offer.line .offerbtns { margin-top: 0; }
.offer [aria-disabled="true"] { opacity: .6; cursor: default; }
.dl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 16px 12px; font-size: .78rem; color: var(--warn); }
.dl .bar { flex: 1 1 120px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; min-width: 80px; position: relative; }
.dl .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .25s var(--ease); }
.dl.indet .bar i { width: 35%; animation: indet 1.4s ease-in-out infinite; }
.dl .dlstop { flex-basis: 100%; color: var(--mut); }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* ── pie ── */
footer { text-align: center; font-size: .72rem; color: var(--mut); line-height: 1.6; padding: 14px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); }
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .attrib { margin: 6px auto 0; max-width: 900px; font-size: .68rem; }

/* Móvil: con el teclado abierto apenas quedan 450 px, y la traducción (o la franja de descarga) tiene
   que verse debajo del texto. La cabecera se queda en el nombre, con las pestañas debajo (las dos, y su
   relleno, en ../modes.css: iguales en la página de voz); los enlaces están en el pie. El campo empieza
   con unas cuatro líneas y crece con el texto, y «Detectado…» ocupa el ancho. */
@media (max-width: 720px) {
  header .hnav { display: none; }
  main { padding: 12px max(16px, env(safe-area-inset-right)) 22px max(16px, env(safe-area-inset-left)); }
  /* «Origen» y «Destino» siguen ahí para los lectores de pantalla; a la vista, los dos selectores. */
  .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .langbar { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); grid-template-areas: "ssl swp stl" "det det det"; gap: 4px 8px; margin-bottom: 10px; }
  #swap { width: 44px; }
  .hint { min-height: 44px; }
  .panels { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #src { min-height: 6.5em; font-size: 1.05rem; padding: 12px 52px 8px 14px; }
  .psrc .pfoot { min-height: 40px; padding: 4px 12px 6px 14px; }
  .out { min-height: 4.5em; font-size: 1.05rem; }
}
@media (max-width: 560px) { header .sub { display: none; } header { gap: 8px 12px; } }
@media (prefers-reduced-motion: reduce) {
  .dl .bar i { transition: none; }
  .dl.indet .bar i { animation: none; width: 100%; opacity: .5; }
  .busy::before { animation: none; }
}