/* =========================================================================
   Bestiarium — manual online
   CSS propio. Se carga DESPUÉS del Play CDN de Tailwind y se limita a lo que
   las utilidades de Tailwind no cubren (ver CONTEXTO.md 2.1):
     · comportamiento de scroll de respaldo
     · scrollbar
     · foco visible para navegación por teclado
     · estados de los links de navegación (scrollspy) y de los links inline
     · estilos de impresión

   Paleta (CONTEXTO.md 2.3) — los mismos hex que el tailwind.config inline:
     dominante  #F4EDE0   (60%)
     secundario #2F3B2C   (30%)
     acento     #B8862B   (10%)
   Unidad base de espaciado: 8px. Todos los valores de abajo son múltiplos
   de 8 (las excepciones son anchos de borde de 1-4px, que no son layout).
   ========================================================================= */

:root {
  --dominante: #F4EDE0;
  --secundario: #2F3B2C;
  --acento: #B8862B;
}

/* --------------------------------------------------- scroll de respaldo --
   El scroll dirigido lo hace js/main.js con scrollIntoView({behavior:'smooth'}).
   Esto cubre el caso de que el JS no cargue: los anclas nativos siguen
   deslizándose en vez de saltar de golpe.                                  */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px; /* alto de la topbar */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 134, 43, 0.6) rgba(47, 59, 44, 0.08);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: rgba(47, 59, 44, 0.08);
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(184, 134, 43, 0.6);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--acento);
}

/* ---------------------------------------------- foco visible (teclado) --
   Nunca se elimina el foco: se refuerza con el color de acento, que es
   exactamente el rol de "llamado de atención puntual" de la paleta.        */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Enlace de salto: invisible hasta que recibe foco por teclado. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--secundario);
  color: var(--dominante);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ------------------------------------------ links de navegación (sidebar)
   Fondo de la sidebar = secundario (#2F3B2C, verde oscuro), así que el texto
   tiene que ser claro para verse. Inactivo: pergamino al 78% (~7:1 de
   contraste). Activo (scrollspy): pergamino pleno + barra y número en acento.
   El acento se usa solo como marca puntual, nunca como fondo extenso.       */
.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-left: 4px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(244, 237, 224, 0.78);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
  color: var(--dominante);
  background-color: rgba(244, 237, 224, 0.08);
}

.nav-link.is-active {
  color: var(--dominante);
  background-color: rgba(244, 237, 224, 0.12);
  border-left-color: var(--acento);
}

.nav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(184, 134, 43, 0.85);
}

.nav-link:hover .nav-num,
.nav-link.is-active .nav-num {
  color: var(--acento);
}

/* --------------------------------------------------- links de contenido --
   El rol de "link" corresponde al color de acento (CONTEXTO.md 2.3). Se
   refuerzan con negrita y subrayado permanente para que no dependan solo del
   color: así siguen siendo identificables sobre el fondo pergamino y para
   quien no distingue bien el dorado.                                        */
.enlace {
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.enlace:hover,
.enlace:focus-visible {
  color: var(--secundario);
  text-decoration-color: var(--acento);
}

/* Los links de la topbar y el footer viven sobre fondo secundario oscuro. */
header a,
footer a {
  font-weight: 700;
}

/* ------------------------------------------------------------ impresión --
   El manual se debe poder imprimir en limpio: sin topbar, sin sidebar, sin
   panel flotante y sin los márgenes que esos elementos reservaban.          */
@media print {
  header,
  nav#sidebar,
  aside#refpanel,
  #overlay,
  #refoverlay,
  .skip-link,
  footer {
    display: none !important;
  }

  main {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }

  html,
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 12pt;
  }

  section {
    page-break-inside: avoid;
    break-inside: avoid;
    border: none !important;
    background: #FFFFFF !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  table,
  figure,
  img {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  img {
    max-width: 320px;
  }

  /* Al imprimir, un link en papel no se puede pulsar: se expone la URL. */
  .enlace {
    color: #000000;
    text-decoration: underline;
  }

  a[href^="#"]::after {
    content: " (ver «" attr(href) "»)";
    font-size: 10pt;
    font-weight: 400;
  }
}