/* Manual del usuario: índice lateral fijo y contenido a la derecha. */

.ayuda {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.ayuda-lateral {
  position: sticky;
  top: calc(var(--alto-cabecera, 4rem) + 1rem);
  max-height: calc(100vh - var(--alto-cabecera, 4rem) - 2rem);
  overflow-y: auto;
  font-size: 0.92rem;
}

.ayuda-indice summary {
  display: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--acento-oscuro);
}
.ayuda-indice ul { list-style: none; margin: 0; padding: 0; }
.ayuda-indice ul ul { margin: 0.1rem 0 0.4rem; padding-left: 0.8rem; font-size: 0.88rem; }
.ayuda-indice a {
  display: block;
  padding: 0.25rem 0.6rem;
  border-left: 3px solid transparent;
  color: var(--tinta);
  text-decoration: none;
}
.ayuda-indice a:hover { color: var(--acento); }
.ayuda-indice a[aria-current] {
  border-left-color: var(--acento);
  color: var(--acento-oscuro);
  font-weight: 700;
}

.ayuda-pdf { display: inline-block; margin: 0.9rem 0 0.2rem 0.6rem; }

.ayuda-contenido h1 { margin-top: 0; }
.ayuda-contenido h2 {
  margin-top: 2.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--borde);
}
.ayuda-contenido h3 { margin-top: 1.8rem; }

.ayuda-contenido figure { margin: 1.5rem 0; }
.ayuda-contenido img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--borde);
  border-radius: 6px;
}
.ayuda-contenido figcaption,
.ayuda-pie {
  margin-top: 0.5rem;
  color: var(--tinta-suave);
  font-size: 0.88rem;
}

/* Tablas y código anchos se desplazan dentro de su bloque, no la página. */
.ayuda-tabla { overflow-x: auto; margin: 1rem 0 0; }
.ayuda-contenido pre {
  overflow-x: auto;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: #0e1b26;
  color: #cde7dc;
  font-size: 0.85rem;
}
.ayuda-contenido pre code { padding: 0; background: none; color: inherit; }

@media (max-width: 56rem) {
  .ayuda { display: block; }
  .ayuda-lateral {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 1.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--tarjeta);
  }
  .ayuda-indice summary { display: list-item; }
  .ayuda-indice[open] summary { margin-bottom: 0.5rem; }
  .ayuda-pdf { margin-left: 0; }
}

@media print {
  .ayuda { display: block; }
  .ayuda-lateral { display: none; }
}