/* Ayuda (ayuda.html): lectura cómoda, una columna */
.ay { max-width: 760px; }
.ay-cab h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.ay-cab p { color: var(--text2); margin-bottom: 14px; }
.ay-como { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); margin-bottom: 14px; }
.ay-como select { max-width: 340px; }
.ay-indice { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.ay-indice a { font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border2); color: var(--text); text-decoration: none; }
.ay-indice a:hover { border-color: var(--accent); color: var(--accent); }
.ay-cap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; scroll-margin-top: 16px; }
.ay-cap h2 { font-size: 17px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ay-cap ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.55; font-size: 14px; }
.ay-cap li::marker { color: var(--accent); font-weight: 600; }
.ay-nivel { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface2); color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.ay-nivel.editar { color: var(--accent); }
.ay-nota { margin-top: 10px; font-size: 13px; color: var(--text2); }
.ay-pie { font-size: 13px; color: var(--text2); margin-top: 18px; }