/* ==========================================================================
   Flipbook viewer — own-brand visual layer
   Clean, institutional, framework-free. Self-contained (no CDN, no web fonts).
   Product register: restrained palette, one accent, state-rich controls.
   STYLING ONLY — every id/class is wired by viewer.js and must stay intact.
   ========================================================================== */

:root {
  /* Stage — neutral cool grey "surface" the book sits on */
  --stage: #4c4f55;
  --stage-edge: #3c3e43;

  /* Chrome — light bars and panels */
  --chrome: #fbfbfd;
  --chrome-sunk: #f1f1f4;
  --line: rgba(20, 22, 28, 0.10);

  /* Ink */
  --ink: #1c1d21;
  --ink-soft: #565a63;   /* >= 4.5:1 on --chrome */
  --ink-faint: #6b6f78;  /* >= 4.5:1 sobre --chrome; #80848d se quedaba en 3.63 */

  /* Accent — restrained institutional slate-blue (focus, active, current) */
  --accent: #2f6e9e;     /* ~4.7:1 on white */
  --accent-soft: rgba(47, 110, 158, 0.12);

  /* Search highlight — soft yellow. --hit-color can be overridden per publication
     (config searchHighlight); falls back to the default --hit. */
  --hit: rgba(255, 209, 84, 0.5);
  --hit-color: var(--hit);
  --hit-edge: rgba(196, 142, 0, 0.45);

  /* Book hard-cover edge colour (config book.edgeColor); transparent = no change. */
  --book-edge: transparent;

  /* ── Skin / appearance regions (Fase 3). Defaults reproduce the current look;
        a publication's appearance/skin overrides these via an inline <style>. ── */
  --fb-window-bg: transparent;      /* solid colour behind the window image */
  --fb-bg-image:                    /* window background image layer */
    radial-gradient(120% 90% at 50% 38%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(var(--stage), var(--stage-edge));
  --fb-window-fg: #fff;             /* nav arrows / icons over the window */
  --fb-topbar-bg: var(--chrome);
  --fb-topbar-fg: var(--ink);
  /* Default bottom bar is translucent "glass" (see .bottombar backdrop-filter);
     a skin may override this with a solid colour. */
  --fb-bottombar-bg: rgba(251, 251, 253, 0.72);
  --fb-bottombar-fg: var(--ink);
  --fb-panel-bg: var(--chrome);
  --fb-panel-fg: var(--ink);

  /* Geometry */
  --bar-h: 52px;
  /* Side panel column width (also the distance the stage is pushed when open). */
  --panel-w: clamp(264px, 82vw, 330px);
  --radius: 10px;
  --radius-sm: 8px;
  --ctrl: 40px;          /* control box; 44px tap target via padding/min-size */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out-quint */
  --t-fast: 140ms;
  --t: 190ms;

  /* Shadows */
  --shadow-bar: 0 1px 2px rgba(20, 22, 28, 0.06);
  --shadow-book: 0 22px 48px -16px rgba(0, 0, 0, 0.55),
                 0 6px 14px -8px rgba(0, 0, 0, 0.4);
  --shadow-panel: 8px 0 28px -10px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 10px 30px -10px rgba(0, 0, 0, 0.35);

  /* Semantic z-index scale */
  --z-stage: 1;
  --z-nav: 5;
  --z-chrome: 10;
  --z-panel: 20;

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  background: var(--stage);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ Bars -- */

.topbar,
.bottombar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar { background: var(--fb-topbar-bg); color: var(--fb-topbar-fg); }

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-chrome);
  min-height: var(--bar-h);
  padding: 0 clamp(0.75rem, 2vw, 1.25rem);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-bar);
}

.title {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  /* Long titles must not push the controls off-screen */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-indicator {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: inherit;   /* follow the top bar fg (skin-aware) */
}
.page-label { white-space: nowrap; }
/* Editable "go to page" field */
.page-input {
  width: 2.7rem;
  text-align: center;
  font: inherit;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--chrome-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.25rem;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.page-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.client-badge {
  margin-left: auto;
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: inherit;   /* follow the top bar fg (skin-aware) */
  white-space: nowrap;
}

/* Bottom bar — minimal floating control cluster, centered.
   Glassmorphism: translucent fill + backdrop blur/saturate (Instagram-style).
   The default --fb-bottombar-bg is an rgba so the blur shows through; a skin may
   set a solid colour, in which case the bar simply reads as solid. */
.bottombar {
  position: fixed;
  left: 50%;
  bottom: clamp(0.6rem, 2vw, 1rem);
  transform: translateX(-50%);
  z-index: var(--z-chrome);
  gap: 0.15rem;
  padding: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  background: var(--fb-bottombar-bg);
  color: var(--fb-bottombar-fg);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
}
/* Fallback for browsers without backdrop-filter: use the opaque chrome colour so
   the default bar stays legible (no blur to lean on). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bottombar { background: var(--chrome); }
}

/* ----------------------------------------------------------- Controls ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: var(--ctrl);
  height: var(--ctrl);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;   /* follow the bar's --fb-*-fg so skins theme the icons */
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn:hover { background: var(--chrome-sunk); color: var(--ink); }
.btn:active { transform: scale(0.92); }

/* Keyboard focus — visible on every control */
.btn:focus-visible,
.nav:focus-visible,
.panel a:focus-visible,
.panel button:focus-visible,
.panel img:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Tooltips — reveal each icon control's label on hover/focus (the glyphs alone
   are ambiguous). Pure CSS, sourced from the existing aria-label so there's a
   single source of truth. Bottom-bar/top-search tips sit above/below the button. */
.bottombar .btn,
.topbar .btn { position: relative; }

.bottombar .btn::after,
.topbar .btn::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: rgba(28, 29, 33, 0.94);
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-chrome);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.bottombar .btn::after { bottom: calc(100% + 8px); }   /* above the floating bar */
.topbar .btn::after    { top: calc(100% + 8px); }       /* below the sticky top bar */

.bottombar .btn:hover::after,
.bottombar .btn:focus-visible::after,
.topbar .btn:hover::after,
.topbar .btn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bottombar .btn::after,
  .topbar .btn::after { transition: none; transform: translateX(-50%); }
}

/* ------------------------------------------------------- Stage & book ---- */

.stage {
  position: relative;
  z-index: var(--z-stage);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--bar-h));
  /* Open side panels push the stage right on wide screens (margin animates). */
  margin-left: 0;
  transition: margin-left var(--t) var(--ease);
  padding: clamp(1rem, 3vw, 2.25rem) clamp(0.5rem, 4vw, 3rem);
  /* Window background — skin-overridable (solid colour + optional image). */
  background-color: var(--fb-window-bg);
  background-image: var(--fb-bg-image);
  background-size: var(--fb-bg-size, cover);
  background-position: var(--fb-bg-position, center);
  background-repeat: var(--fb-bg-repeat, no-repeat);
}

/* The frame is the fitted box (JS sets max-width + height each layout pass).
   #book fills it; StPageFlip forces width:100% on #book, so the cap must live
   on this parent. Centered as a flex item by the stage. */
.book-frame {
  position: relative;
  width: 100%;
  max-width: 96vw;   /* JS narrows this to the fitted spread width */
}
/* StPageFlip controls the book/page dimensions in JS mode (size:'stretch').
   Keep this resilient — never hard-code book pixel sizes here. */
.book { width: 100%; }

/* Side navigation arrows */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-nav);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--fb-window-fg);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.nav:hover { background: rgba(255, 255, 255, 0.22); }
.nav:active { transform: translateY(-50%) scale(0.92); }
.nav.prev { left: clamp(0.4rem, 2vw, 1.25rem); }
.nav.next { right: clamp(0.4rem, 2vw, 1.25rem); }

/* Corner shortcuts: jump to first / last page (bottom corners of the book area),
   FlippingBook-style. Hidden by JS on the cover (first) and back page (last). */
.corner-nav {
  position: absolute;
  bottom: clamp(0.6rem, 2vw, 1.1rem);
  z-index: var(--z-nav);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--fb-window-fg);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.corner-nav:hover { background: rgba(255, 255, 255, 0.22); }
.corner-nav:active { transform: scale(0.92); }
.corner-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.corner-nav.first { left: clamp(0.4rem, 2vw, 1.25rem); }
.corner-nav.last  { right: clamp(0.4rem, 2vw, 1.25rem); }
.corner-nav[hidden] { display: none; }

/* Label tooltip on hover/focus (single source of truth = aria-label). */
.corner-nav::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: rgba(28, 29, 33, 0.94);
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.corner-nav:hover::after,
.corner-nav:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------ Page = image + text layer ---- */

.page {
  position: relative;
  background: #fff;
  box-shadow: var(--shadow-book);
}
.page picture { display: block; }
.page img {
  display: block;
  width: 100%;
  height: auto;
}

/* Transparent, selectable text overlay — MUST stay invisible to the eye. */
.text-layer { position: absolute; inset: 0; }
.text-layer span {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
}
/* The only visible part of the text layer: a tasteful search highlight. */
.text-layer span.hit {
  background: var(--hit-color);
  box-shadow: 0 0 0 1px var(--hit-edge);
  border-radius: 2px;
}

/* Hard cover/back edge tint (only visible when book.edgeColor is set). */
.page[data-density="hard"] {
  outline: 2px solid var(--book-edge);
  outline-offset: -2px;
}

/* ── Contact button (top bar) ─────────────────────────────────────────── */
.contact-btn {
  font-size: 13px;
  color: inherit;   /* follow the top bar fg (skin-aware) */
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.contact-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Preloader overlay (config preloader) ─────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--chrome);
  color: var(--ink);
}
.preloader-logo { max-width: 200px; max-height: 96px; object-fit: contain; }
.preloader-title { font-size: 18px; font-weight: 600; }
.preloader-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid currentColor;
  border-top-color: transparent;
  opacity: 0.55;
  animation: fb-spin 0.8s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- Side panels --- */

.panel {
  position: fixed;
  /* Start below the top bar so the panel never covers the publication title. */
  top: var(--bar-h);
  bottom: 0;
  left: 0;
  z-index: var(--z-panel);
  width: var(--panel-w);
  background: var(--fb-panel-bg);
  color: var(--fb-panel-fg);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
  overscroll-behavior: contain;
}
/* A column of header + scrolling body. Scope the flex to the visible state so
   `display:flex` doesn't outrank the UA `[hidden]{display:none}` rule and force
   the panel open. */
.panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  animation: panel-in var(--t) var(--ease);
}
@keyframes panel-in {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Wide screens: an open panel PUSHES the book right instead of overlaying it
   (FlippingBook model). Below this width the panel overlays (no push) so the book
   keeps usable room. The viewer refits the book whenever this margin changes. */
@media (min-width: 761px) {
  body.panel-open .stage { margin-left: var(--panel-w); }
}

/* Panel header: identifying icon (mirrors the toolbar) + name + close — like
   the reference viewer. Sticky-feeling: fixed height, never scrolls. */
.panel-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  min-height: var(--bar-h);
  padding: 0 0.4rem 0 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--fb-panel-bg);
}
.panel-icon {
  flex: none;
  font-size: 1.15rem;
  line-height: 1;
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.panel-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: inherit;
}
.panel-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctrl);
  height: var(--ctrl);
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.panel-close:hover { background: var(--chrome-sunk); color: var(--ink); }

/* Scrolling content area below the header. */
.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.85rem;
}

/* Thumbnails — magazine layout: cover/back alone, interior pages as 2-up
   spreads with a central spine shadow; page number under each. */
#panelThumbsBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.thumb-spread {
  display: flex;
  justify-content: center;
  gap: 0;                 /* inner edges meet at the spine */
  width: 100%;
}
.thumb {
  margin: 0;
  width: 44%;
  max-width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  /* Es un <button>: fuera el aspecto nativo, que aqui solo estorba. */
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.thumb:focus-visible {
  outline: none; /* el foco se dibuja sobre la imagen, ver .thumb:focus-visible img */
}
.thumb:focus-visible img {
  outline-color: var(--accent);
  transform: translateY(-1px);
}
.thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* Square the inner edges and cast a spine shadow where two pages meet. */
.thumb-spread:not(.is-cover):not(.is-lone) .thumb:first-child img {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), inset -7px 0 9px -7px rgba(0, 0, 0, 0.5);
}
.thumb-spread:not(.is-cover):not(.is-lone) .thumb:nth-child(2) img {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), inset 7px 0 9px -7px rgba(0, 0, 0, 0.5);
}
.thumb-caption {
  margin-top: 4px;
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.65;
}
.thumb:hover img { transform: translateY(-1px); outline-color: var(--accent); }
.thumb.is-current img { outline-color: var(--accent); }
.thumb.is-current .thumb-caption { opacity: 1; font-weight: 700; color: var(--accent); }

/* Search result list */
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { margin: 0; }

#searchResults button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#searchResults button:hover { background: var(--accent-soft); color: var(--accent); }

/* ---- Table of contents: title + page number, collapsible nested groups ---- */
#panelTocBody { padding: 0; }   /* rows span the full panel width */
.toc-list,
.toc-children { list-style: none; margin: 0; padding: 0; }
.toc-children { display: none; --toc-indent: 1.5rem; }   /* collapsed by default */
.toc-item.open > .toc-children { display: block; }
.toc-children .toc-children { --toc-indent: 3rem; }      /* deeper level */

.toc-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.toc-twisty,
.toc-twisty-spacer {
  flex: none;
  width: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toc-twisty {
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.toc-twisty:hover { color: var(--accent); }

.toc-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem 0.55rem calc(0.1rem + var(--toc-indent, 0rem));
  color: color-mix(in srgb, currentColor 85%, transparent);
  font-size: 0.85rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.toc-link:hover { background: var(--accent-soft); color: var(--accent); }
.toc-title { flex: 1 1 auto; min-width: 0; }
.toc-page {
  flex: none;
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.toc-link:hover .toc-page { color: var(--accent); }

/* Search input */
#searchInput {
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.9375rem;
  color: inherit;
  background: var(--chrome-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
#searchInput::placeholder { color: color-mix(in srgb, currentColor 60%, transparent); }
#searchInput:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --------------------------------------------------- No-JS baseline ------ */
/* When JS is off, pages stack vertically as an accessible reading gallery. */
.no-js .bottombar,
.no-js .corner-nav,
.no-js .nav { display: none; }
.no-js .stage {
  display: block;
  padding: clamp(1rem, 4vw, 2.5rem) 1rem;
}
.no-js .book-frame,
.no-js .book { max-width: none; height: auto; }
.no-js .book .page {
  margin: 0 auto 1.5rem;
  max-width: 800px;
  width: 100%;
}

/* ---------------------------------------------------------- Responsive --- */

@media (max-width: 640px) {
  .client-badge { display: none; }       /* keep the bar uncluttered on phones */
  .page-indicator { margin-left: auto; }
  .stage { padding-bottom: 4.5rem; }      /* room for the floating bottom bar */
}

/* --------------------------------------------------- Reduced motion ------ */

@media (prefers-reduced-motion: reduce) {
  *,
  .panel:not([hidden]) {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active { transform: none; }
  .corner-nav:active { transform: none; }
  .corner-nav::after { transition: none; transform: translateX(-50%); }
  /* Keep the arrow vertically centered; suppress only the press-scale. */
  .nav:active { transform: translateY(-50%); }
}

/* Visible solo para lectores de pantalla: etiquetas y avisos de estado que no
   deben ocupar sitio en pantalla pero sí deben existir en el DOM. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace a la versión en texto. Discreto pero real: es la alternativa accesible
   de la publicación, así que tiene que estar en el DOM y ser alcanzable con Tab,
   no escondido tras un menú. */
.text-version-link {
  margin: 0;
  padding: 0.5rem 1rem 1rem;
  text-align: center;
  font-size: 0.8rem;
}
.text-version-link a { color: var(--fb-window-fg, var(--ink-soft)); opacity: 0.75; }
.text-version-link a:hover, .text-version-link a:focus-visible { opacity: 1; }