/* Base compartida por todas las páginas: reinicio, cuerpo y barra de navegación.
   Todos los valores vienen de tokens.css (ver la skill design-tokens). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-chrome);
  height: var(--nav-h);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl);
  padding: 0 var(--gutter-edge);
  font-size: var(--text-md);
  background: var(--color-bg); color: var(--color-text);
  border-bottom: var(--border-hair) solid var(--color-rule);
}
.nav-name { font-weight: var(--weight-bold); letter-spacing: var(--tracking-name); white-space: nowrap; transition: color var(--dur-fast) var(--ease); }
.nav nav { display: flex; gap: var(--gap-nav); }
.nav a { color: inherit; text-decoration: none; }
.nav a[href]:hover, .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.nav a[aria-current="page"] { text-decoration-color: var(--color-accent); }
.nav a[aria-disabled="true"] { cursor: default; opacity: 0.9; }
/* el nombre, al pasar el ratón, se vuelve rojo (sin subrayado) */
.nav a.nav-name:hover { color: var(--color-accent); text-decoration: none; }
/* paraguas rojo junto al nombre: se inclina un poco según dónde está el ratón */
.nav-name { display: inline-flex; align-items: center; gap: var(--space-2xs); min-width: 0; }
.nav-umbrella {
  flex: none; width: var(--nav-umbrella); height: var(--nav-umbrella);
  transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 50%;
  transition: transform var(--dur-base) var(--ease);
}
.nav-umbrella .canopy { fill: var(--color-accent); }
.nav-umbrella .stick { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* Sonido: un altavoz; tachado (✕) y tenue si está apagado, con ondas si está encendido */
.sound { display: inline-flex; align-items: center; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; opacity: 0.6; }
.sound[aria-pressed="true"] { opacity: 1; }
.sound-icon { width: var(--nav-sound-icon); height: var(--nav-sound-icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-icon .spk { fill: currentColor; stroke: none; }
.sound[aria-pressed="true"] .mute, .sound[aria-pressed="false"] .waves { display: none; }

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Idiomas ---------- */
.lang { display: flex; gap: var(--space-2xs); padding-left: var(--space-md); border-left: var(--border-hair) solid var(--color-rule); }
.lang a { opacity: 0.55; }
.lang a[aria-current="page"] { opacity: 1; font-weight: var(--weight-bold); text-decoration: none; }
.lang a:hover { opacity: 1; }

/* Texto seleccionado: en rojo en toda la web */
::selection { background: var(--selection-bg); color: var(--selection-text); }

/* Aviso de traducción: idioma original y enlace al original */
.translated { margin: 0 0 var(--space-xl); font-size: var(--text-sm); color: var(--color-text-soft); }
.translated a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: var(--underline-offset); }
.translated a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

/* ---------- Tablet y móvil ---------- */
@media (max-width: 820px) {
  .nav { font-size: var(--text-sm); }
  .nav-name .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* en móviles muy estrechos solo queda el paraguas (el nombre sigue ahí para lectores de pantalla) */
@media (max-width: 360px) {
  .nav-name .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-umbrella { width: calc(var(--nav-umbrella) * 1.25); height: calc(var(--nav-umbrella) * 1.25); }
}
@media (max-width: 600px) {
  .nav { height: var(--nav-h-mobile); padding: 0 var(--space-xl); font-size: var(--text-xs); gap: var(--space-sm); }
  .nav nav { gap: var(--space-md); }
  .lang { padding-left: var(--space-xs); gap: var(--space-2xs); }
}
/* móviles estrechos: con cuatro enlaces y el idioma, todo un poco más junto */
@media (max-width: 400px) {
  .nav { padding: 0 var(--space-md); gap: var(--space-xs); }
  .nav nav { gap: var(--space-sm); }
  .lang { padding-left: var(--space-2xs); gap: var(--space-3xs); }
  .sound-icon { width: var(--nav-sound-icon-small); height: var(--nav-sound-icon-small); }
}
/* móviles muy estrechos (y después de las reglas anteriores, para que estas manden) */
@media (max-width: 360px) {
  .nav-name { flex: none; }
  .nav { padding: 0 var(--space-sm); font-size: var(--text-nav-tiny); gap: var(--space-2xs); }
  .nav nav { gap: var(--space-3xs); }
  .lang { border-left: 0; }
  .sound-icon { width: var(--nav-sound-icon-tiny); height: var(--nav-sound-icon-tiny); }
}

/* En pantallas táctiles los enlaces pequeños tienen una zona de toque más grande, sin cambiar cómo se ven */
@media (pointer: coarse) {
  .nav a, .sound, .back {
    padding: var(--tap-pad-y) var(--tap-pad-x);
    margin: calc(-1 * var(--tap-pad-y)) calc(-1 * var(--tap-pad-x));
  }
}