/* ============================================================
   ayuda.css
   Bloque de ayuda online por página (función io_ayuda_online()).
   Desplegable nativo <details> con descripción + enlace al manual.
   ============================================================ */

.io-ayuda {
    margin: 0 0 1rem 0;
    border: 1px solid var(--io-color-border, #ccc);
    border-left: 4px solid var(--io-color-primary, #0072BC);
    border-radius: 6px;
    background: var(--io-color-bg-header-light, #e8f4fc);
    overflow: hidden;
}

.io-ayuda > summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .6rem 1rem;
    font-weight: 600;
    color: var(--io-color-primary-dark, #005a96);
}
.io-ayuda > summary::-webkit-details-marker { display: none; }
.io-ayuda > summary::after {
    content: "\25BC";          /* ▼ */
    margin-left: auto;
    font-size: .75em;
    color: var(--io-color-primary, #0072BC);
    transition: transform .15s ease;
}
.io-ayuda[open] > summary::after { transform: rotate(180deg); }
.io-ayuda > summary:hover { background: var(--io-color-bg-header-hover, #d8ecfb); }

.io-ayuda-icono { font-size: 1.15em; line-height: 1; }

.io-ayuda-cuerpo {
    padding: .75rem 1rem 1rem;
    background: #fff;
}
.io-ayuda-desc {
    margin: 0 0 .75rem;
    color: var(--io-color-text, #333);
    line-height: 1.5;
}
.io-ayuda-enlace {
    display: inline-block;
    font-weight: 600;
    color: var(--io-color-primary, #0072BC);
    text-decoration: none;
}
.io-ayuda-enlace:hover { text-decoration: underline; }