/* Manual de usuario: páginas de ayuda (su propio layout, sin el menú del sitio) y el botón flotante de ayuda. */

.encabezado-ayuda { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
                     padding: .75rem 1.5rem; background: var(--verde-oscuro); color: #fff; }
.acciones-ayuda { display: flex; gap: .5rem; flex-wrap: wrap; }
.boton-enlace-ayuda { background: none; border: 1px solid #fff; color: #fff; padding: .2rem .7rem; border-radius: 4px;
                      cursor: pointer; font: inherit; font-size: .9rem; text-decoration: none; display: inline-block; }
.boton-enlace-ayuda:hover { background: rgba(255,255,255,.15); }

.manual-contenido { padding: 1.25rem 1.5rem 3rem; max-width: 780px; margin: 0 auto; }
.miga-ayuda { color: #555; font-weight: 600; margin-bottom: 0; text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; }
.resumen-ayuda { font-size: 1.1rem; color: #333; }
.lista-temas { list-style: none; padding: 0; }
.lista-temas li { padding: .6rem 0; border-bottom: 1px solid var(--borde); }
.lista-temas li p { margin: .2rem 0 0; color: #444; }
.volver-ayuda { margin-top: 2rem; border-top: 1px solid var(--borde); padding-top: 1rem; }
.manual-contenido li { margin-bottom: .35rem; }

/* Recuadros de ejemplo y de advertencia dentro de un tema */
.recuadro-ayuda { border-left: 4px solid; border-radius: 4px; padding: .6rem .9rem; margin: .9rem 0; }
.recuadro-ayuda p { margin: 0; white-space: pre-line; }
.recuadro-ayuda .titulo-recuadro { font-weight: 700; margin-bottom: .25rem; white-space: normal; }
.ejemplo-ayuda { background: #ecf5ec; border-color: #1f7a2e; }
.importante-ayuda { background: #fff6e1; border-color: #c48400; }
@media print {
    .recuadro-ayuda { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media print {
    .encabezado-ayuda, .volver-ayuda, .saltar { display: none !important; }
    .manual-contenido { max-width: none; padding: 0; }
}

/* Botón flotante de ayuda, presente en todas las pantallas del sistema */
.ayuda-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 3rem; height: 3rem; border-radius: 50%;
                  background: var(--verde-oscuro); color: #fff; display: grid; place-items: center; font-size: 1.4rem;
                  font-weight: 700; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.3); z-index: 20; }
.ayuda-flotante:hover { background: var(--verde); }
.ayuda-flotante:focus-visible { outline: 3px solid #f0a500; outline-offset: 2px; }

@media print {
    .ayuda-flotante { display: none !important; }
}