/* SPDX-License-Identifier: Apache-2.0 · Copyright 2026 UtopiaIA */
/* Las pestañas «Audio | Solo texto», justo debajo de la cabecera, en el mismo sitio y del mismo tamaño en
   las dos páginas (las dos cargan esta hoja la última). En el escritorio, pestañas con una raya dorada bajo
   la actual; en el móvil (720 px o menos), un control segmentado a todo el ancho, con la actual en una
   pastilla algo más clara y su raya dorada corta (el relleno dorado era el de «Empezar» y, en plena
   conversación, lo que más llamaba la atención). La actual no es un enlace: pulsarla no recarga nada (ni
   corta una conversación). Solo los colores de modern.css (--bg, --panel, --line, --fg, --mut, --accent,
   --accent-2) y mezclas de ellos.
   Contraste de la etiqueta de la otra pestaña, medido en píxeles sobre el fondo de verdad (la aurora, que
   se mueve, y en la de voz también el brillo que sigue al ratón; sobre --bg liso salía más): en el
   escritorio, 6,1:1 o más en la de voz (5,3 con el ratón sobre la tira) y 7,4 en la de texto; en el móvil,
   sobre su tira, 5,6 y 5,8. La actual, --fg: 10,3:1 sobre --bg y 8,8 sobre --panel; la raya dorada, 5,9 y
   5,1. */

/* ── La cabecera de encima, igual en las dos: una sola línea, sin raya (la pone la tira de pestañas) y con
   la misma frase; en el móvil los enlaces van al pie. Si no, las dos cabeceras miden distinto y las
   pestañas saltan al cambiar de página. ── */
header { flex-wrap: nowrap; line-height: 1.45; padding-bottom: 8px; border-bottom: 0; }
header h1, header .hnav { flex: none; }
/* En la página de voz, .sub es también cada frase de la conversación: aquí, sin su raya, su relleno ni su
   entrada. El recorte con «…» solo es la última red (una letra enorme, por ejemplo): de 721 a 800 px la
   frase no cabe junto a los enlaces y se quita entera, en las dos páginas a la vez. */
header .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; max-width: none; animation: none; }
/* Hasta 840 px la frase no cabe entera al lado del título con la marca (en castellano, se cortaba hasta 813). */
@media (min-width: 721px) and (max-width: 840px) { header .sub { display: none; } }
/* La marca de Elffuss (../elffuss-mark.css, igual en todos los sitios) abre el título: «[hoja] Elffuss» es el
   enlace a elffuss.com y «Translator» sigue en texto. Aquí solo se ajusta al título: el tamaño de su letra, la hoja
   algo mayor pero sin que cuente en la altura de la línea (la cabecera no crece) y «Elffuss» en la misma línea
   base que «Translator». Va con más especificidad porque elffuss-mark.css se carga después. */
/* El margen derecho de .2em: el anillo de foco de la marca sale 6 px (4 de separación y 2 de grosor) y el espacio
   antes de «Translator» mide menos, así que sin él el anillo pisaba la «T». */
header h1 .elffuss-mark { position: relative; font-size: inherit; margin: -.4em .2em -.4em 0; --accent: #c8a06a; }  /* la hoja, en el latón de la marca (aquí --accent es otro dorado) */
header h1 .elffuss-mark svg { width: 1.5em; height: 1.5em; margin: -.3em 0; }
/* Sin esto la línea base de la marca sería el pie de la hoja y «Elffuss» quedaría más alto que «Translator». */
header h1 .elffuss-mark .word { align-self: baseline; }
/* En el móvil se pulsa en 44 px de alto aunque la línea tenga 27: un área invisible que acaba justo encima de la
   tira de pestañas (no les quita ni un píxel) y sube hasta el borde de la pantalla. */
@media (max-width: 720px) {
  header h1 .elffuss-mark::before { content: ""; position: absolute; left: -4px; right: -4px; bottom: -9px; height: 44px; }
}

/* ── Las pestañas ── */
.modes {
  --modes-hover: var(--panel);
  --modes-track: var(--bg);
  flex: none; display: flex; align-items: stretch; gap: 4px;
  /* La primera etiqueta cae justo bajo el nombre de la cabecera (24 px menos el relleno de la pestaña). */
  padding: 2px max(10px, env(safe-area-inset-right) - 14px) 0 max(10px, env(safe-area-inset-left) - 14px);
  border-bottom: 1px solid var(--line);
  /* Una pulsación larga no selecciona «Audio». */
  -webkit-user-select: none; user-select: none;
}
.modes > * {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 10px 10px 0 0;
  color: var(--mut); font-size: .95rem; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
/* La otra pestaña, entre --mut y --fg: con --mut a secas no llegaba a 4,5:1 sobre la aurora de la página de
   voz. La tira del móvil, --bg casi opaco: más oscura que los selectores de idioma de debajo. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .modes { --modes-hover: color-mix(in srgb, var(--fg) 7%, transparent); --modes-track: color-mix(in srgb, var(--bg) 70%, transparent); }
  .modes > a { color: color-mix(in srgb, var(--fg) 65%, var(--mut)); }
}
.modes svg { flex: none; width: 18px; height: 18px; }
.modes > a { transition: color .15s, background-color .15s; }
/* Al pasar el ratón (solo donde lo hay: en el móvil se quedaría pegado tras el toque) y al pulsar. Solo el
   color de fondo: en el móvil el fondo va recortado por dentro del borde. */
@media (hover: hover) { .modes > a:hover { color: var(--fg); background-color: var(--modes-hover); } }
.modes > a:active { color: var(--fg); background-color: var(--modes-hover); }
.modes > a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; border-radius: 10px; }
.modes > [aria-current="page"] { color: var(--fg); }
.modes > [aria-current="page"] svg { color: var(--accent); }
.modes > [aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--accent);
}

/* ── Escritorio: la tira pegada al nombre. Con ella, «Empezar» acababa bajo el pie en una pantalla de
   portátil (1536×730). Con ratón y sin pantalla táctil, pestañas de 40 px; con el dedo, 44. ── */
@media (min-width: 721px) {
  header { padding-bottom: 2px; }
  .modes { padding-top: 0; }
}
@media (min-width: 721px) and (pointer: fine) and (not (any-pointer: coarse)) {
  .modes > * { min-height: 40px; }
}

/* ── Móvil: el nombre arriba y, debajo, el control a todo el ancho (cada mitad, 44 px de alto). ── */
@media (max-width: 720px) {
  header { padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
  header .hnav { display: none; }
  .modes {
    margin: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    padding: 0; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--modes-track);
  }
  /* La pastilla de la actual, y el fondo al pulsar la otra, van 3 px por dentro de cada mitad: un borde
     transparente, que también se toca (la mitad entera sigue midiendo 44 px). */
  .modes > * { flex: 1 1 0; min-width: 0; padding: 0 8px; border: 3px solid transparent; border-radius: 11px; background-clip: padding-box; }
  /* Sobre la tira oscura, la otra en --mut ya pasa de 4,5:1, y así se distingue mejor de la actual. */
  .modes > a { color: var(--mut); }
  .modes > a:focus-visible { border-radius: 11px; outline-offset: -4px; }
  .modes > [aria-current="page"] { background-color: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .modes > [aria-current="page"]::after { left: 30%; right: 30%; bottom: 0; }
}
@media (max-width: 560px) { header .sub { display: none; } }

/* Alto contraste (forced colors) quita los fondos: la raya y la pastilla no se verían, así que la actual va
   subrayada, con su icono del color del texto. El borde transparente del móvil se pintaría con el color del
   texto: va del color del fondo. */
@media (forced-colors: active) {
  .modes > * { border-color: Canvas; }
  .modes > [aria-current="page"] { text-decoration-line: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .modes > [aria-current="page"] svg { color: inherit; }
  .modes > [aria-current="page"]::after { content: none; }
}

/* ── Cambiar de pestaña (View Transitions entre documentos, mismo origen): la cabecera y la tira no se
   funden, cambian en el primer fotograma, y solo el contenido se funde, en 0,18 s. En el escritorio la raya
   dorada se desliza de una pestaña a la otra; en el móvil la pastilla y su raya saltan juntas (si la raya
   se deslizaba, quedaba un momento fuera de la pastilla). Con «reducir movimiento», el cambio es seco. Las
   dos páginas repiten el @view-transition en un <style> de su <head>: servida por el service worker, esta
   hoja llegaba a veces después de que Chrome mirase si la página lo pide, y entonces no había transición. ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  header { view-transition-name: tr-header; }
  .modes { view-transition-name: tr-tabs; }
}
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .modes > [aria-current="page"]::after { view-transition-name: tr-ink; }
}
::view-transition-group(root) { animation-duration: .18s; }
::view-transition-group(tr-header), ::view-transition-group(tr-tabs) { animation: none; }
::view-transition-old(tr-header), ::view-transition-old(tr-tabs) { display: none; }
::view-transition-new(tr-header), ::view-transition-new(tr-tabs) { animation: none; }
::view-transition-group(tr-ink) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }