/* Interacción común a todas las páginas del sitio: menú del celular, botón para volver arriba,
   respuesta al tocar y la transición entre páginas. Lo usan la portada (site.css) y las páginas de
   consulta (style.css); los colores salen de docs/05_DISENO.md. Sin JS nada de esto aparece y el
   sitio funciona igual. */
:root { --i-ink: #2c2b46; --i-ground: #f7f8f5; --i-primary: #99c637; --i-ease: cubic-bezier(.2, .7, .2, 1); }

/* Respuesta al tocar: todo lo que se pulsa baja un poco. */
.btn, .chip, .lang, .menu-btn, .to-top-btn { transition: background-color .18s var(--i-ease), color .18s var(--i-ease), border-color .18s var(--i-ease), transform .12s var(--i-ease); }
.btn:active, .lang:active, .menu-btn:active, .to-top-btn:active { transform: scale(.98); }
nav a:not(.btn):active, footer a:active, .toc a:active, .link:active { opacity: .72; }

/* Menú del celular: el mismo nav de la barra se vuelve un panel bajo ella. */
.menu-btn { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid #c9ccd2; border-radius: 999px; background: transparent; color: var(--i-ink); cursor: pointer; }
.menu-btn:hover { border-color: var(--i-ink); }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .x, .menu-btn[aria-expanded="true"] .bars { display: none; }
.menu-btn[aria-expanded="true"] .x { display: block; }
.menu-scrim { position: fixed; inset: 0; z-index: 18; background: rgba(44, 43, 70, .4); opacity: 0; visibility: hidden; transition: opacity .2s var(--i-ease), visibility 0s .2s; }

header.compact { position: relative; z-index: 20; }
header.compact .menu-btn { display: inline-flex; order: 3; }
header.compact .logo, header.compact .brand { margin-right: auto; }
header.compact nav { position: fixed; left: 0; right: 0; top: var(--menu-top, 68px); z-index: 19; max-height: calc(100svh - var(--menu-top, 68px)); overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 24px; background: var(--i-ground); border-bottom: 1px solid #e5e7eb; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s var(--i-ease), transform .2s var(--i-ease), visibility 0s .2s; }
header.compact nav a:not(.btn):not(.lang), header.compact nav .hide-md, header.compact nav .hide-sm { display: flex; align-items: center; justify-content: flex-start; min-height: 56px; padding: 0 4px; border-bottom: 1px solid #e5e7eb; font-size: 1.1875rem; font-weight: 800; color: var(--i-ink); text-decoration: none; }
header.compact nav .lang { align-self: flex-start; margin-top: 20px; }
header.menu-open nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--i-ease), transform .2s var(--i-ease); }
header.menu-open ~ .menu-scrim, .menu-scrim.on { opacity: 1; visibility: visible; transition: opacity .2s var(--i-ease); }
html.menu-lock { overflow: hidden; }

/* Volver arriba: aparece después de la primera pantalla. */
.to-top-btn { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 15; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 2px solid var(--i-ground); border-radius: 999px; background: var(--i-ink); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s var(--i-ease), transform .2s var(--i-ease), background-color .18s var(--i-ease), visibility 0s .2s; }
.to-top-btn.on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--i-ease), transform .2s var(--i-ease), background-color .18s var(--i-ease); }
.to-top-btn:hover { background: #3a3957; }
.to-top-btn:focus-visible { outline: 3px solid var(--i-primary); outline-offset: 3px; }
.to-top-btn svg { width: 22px; height: 22px; }

/* Entre páginas: un fundido corto en vez del parpadeo blanco (Chrome, Edge y Safari recientes). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--i-ease); }

@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .lang, .menu-btn, .to-top-btn, header.compact nav, .menu-scrim { transition: none; }
  .btn:active, .lang:active, .menu-btn:active, .to-top-btn:active { transform: none; }
  header.compact nav, .to-top-btn { transform: none; }
  @view-transition { navigation: none; }
}