/* Manual de uso (usa los colores de cuenta.css) */
.ayuda { max-width: 1180px; margin: 0 auto; padding: 28px 16px 40px; }
.ayuda-cab { text-align: center; margin-bottom: 26px; }
.ayuda-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; font-weight: 700; }
.ayuda-cab h1 { font-size: 2rem; margin: 14px 0 4px; }
.ayuda-sub { color: var(--suave); margin: 0 0 16px; }
.ayuda-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 16px; }
.ayuda-acciones .boton { width: auto; padding: 10px 18px; }
.ayuda-buscar { width: 100%; max-width: 560px; padding: 11px 14px; font: inherit; color: var(--texto); background: var(--campo); border: 1px solid var(--borde); border-radius: 10px; outline: none; }
.ayuda-buscar:focus { border-color: var(--acento); }
.ayuda-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.ayuda-indice { position: sticky; top: 16px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 14px 10px; max-height: calc(100vh - 32px); overflow-y: auto; }
.ayuda-indice-tit { font-weight: 700; margin: 0 0 8px; font-size: .9rem; }
.ayuda-indice ol { margin: 0; padding-left: 20px; font-size: .88rem; }
.ayuda-indice li { margin-bottom: 6px; }
.ayuda-indice a { color: var(--suave); text-decoration: none; }
.ayuda-indice a:hover, .ayuda-indice a.activo { color: var(--acento); }
:root:not([data-tema="light"]) .ayuda-indice a:hover, :root:not([data-tema="light"]) .ayuda-indice a.activo { color: #a5b4fc; }
.ayuda-texto section { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 22px 24px; margin-bottom: 18px; line-height: 1.6; scroll-margin-top: 16px; }
.ayuda-texto h2 { font-size: 1.35rem; margin: 0 0 12px; }
.ayuda-texto h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.ayuda-texto p, .ayuda-texto li, .ayuda-texto dd { color: var(--texto); }
.ayuda-texto ul, .ayuda-texto ol { padding-left: 22px; }
.ayuda-texto li { margin-bottom: 6px; }
.ayuda-texto a { color: var(--acento); }
:root:not([data-tema="light"]) .ayuda-texto a { color: #a5b4fc; }
.ayuda-texto code { font-size: .9em; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--acento) 12%, transparent); }
.ayuda-texto dt { font-weight: 700; margin-top: 12px; }
.ayuda-texto dd { margin: 4px 0 0; }
figure { margin: 16px 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--borde); box-shadow: var(--sombra); }
figure.fig-movil img { max-width: 300px; margin: 0 auto; }
/* Fila: captura del ordenador y del móvil una al lado de la otra, a la misma altura */
.fig-fila { display: flex; justify-content: center; align-items: flex-start; gap: 18px; margin: 16px 0; }
.fig-fila figure { margin: 0; flex: 0 1 auto; min-width: 0; }
.fig-fila figure img, .fig-fila figure.fig-movil img { height: 380px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 760px) {
    .fig-fila { flex-direction: column; align-items: center; }
    .fig-fila figure img { height: auto; }
    .fig-fila figure.fig-movil img { max-width: 260px; }
}
figcaption { text-align: center; color: var(--suave); font-size: .85rem; margin-top: 6px; }
.ayuda .pie-legal { margin-top: 24px; }
section[hidden], .ayuda-indice li[hidden] { display: none; }
mark { background: #fde68a; color: #111; border-radius: 3px; padding: 0 2px; }
@media (max-width: 900px) {
    .ayuda-cuerpo { grid-template-columns: 1fr; }
    .ayuda-indice { position: static; max-height: none; }
    .ayuda-texto section { padding: 18px 16px; }
    .ayuda-cab h1 { font-size: 1.6rem; }
}
/* Versión para el PDF (ayuda.php?imprimir=1) */
body.imprimir { background: #fff; }
body.imprimir .ayuda { max-width: none; padding: 0; }
body.imprimir .ayuda-cuerpo { display: block; }
body.imprimir .ayuda-indice { position: static; max-height: none; border: 0; padding: 0 0 10px; page-break-after: always; }
body.imprimir .ayuda-indice ol { font-size: 1rem; columns: 1; }
body.imprimir .ayuda-texto section { border: 0; padding: 0; margin: 0 0 8px; break-before: page; }
body.imprimir .ayuda-texto section:first-child { break-before: auto; }
body.imprimir figure { break-inside: avoid; }
body.imprimir figure img { box-shadow: none; max-height: 125mm; width: auto; max-width: 100%; margin: 0 auto; }
body.imprimir figure.fig-movil img { max-height: 115mm; }
body.imprimir h2, body.imprimir h3 { break-after: avoid; }
body.imprimir .ayuda-cab { margin: 60mm 0 0; page-break-after: always; }
body.imprimir .ayuda-cab h1 { font-size: 2.6rem; }
body.imprimir .ayuda-marca img { width: 110px; height: 110px; }
body.imprimir .ayuda-marca { flex-direction: column; font-size: 1.4rem; }