/* ===========================================================================
   AYUDA — SUB-ÍNDICE HOMOLOGADO
   ---------------------------------------------------------------------------
   Cada manual traía su propio CSS y el sub-índice salía distinto en cada uno:
   unos como tarjeta lateral (el molde de FactuDesk) y otros como una lista de
   viñetas tirada arriba del contenido. Acá se fija UNA sola forma para los 81.

   Lo carga _menu_ayuda.php después de _ayuda_navy.css, así le gana al CSS
   propio de cada página sin tener que editarlas una por una. Por eso lleva
   !important: es una homologación, no una sugerencia.

   Molde: tarjeta blanca de 260px pegada a la izquierda del contenido, con
   buscador arriba, temas agrupados por bloque y el tema activo resaltado.
   =========================================================================== */

/* ── Dos columnas: sub-índice + contenido ── */
.ayuda-layout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 14px !important;
    max-width: none !important;
    margin: 0 !important;
}
.ayuda-content { flex: 1 !important; min-width: 0 !important; }

/* ── El sub-índice como tarjeta lateral ── */
.ayuda-toc {
    width: 258px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 12px !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    padding: 12px !important;
    background: var(--ay-card, #fff) !important;
    border: 1px solid var(--ay-border, #cbd9ea) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(15, 36, 56, .06) !important;
}
.ayuda-toc::-webkit-scrollbar { width: 6px; }
.ayuda-toc::-webkit-scrollbar-track { background: transparent; }
.ayuda-toc::-webkit-scrollbar-thumb { background: var(--ay-border, #cbd9ea); border-radius: 4px; }

/* ── Buscador (lo inyecta _menu_ayuda.php en las páginas que no lo traían) ── */
.toc-buscar {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 10px !important;
    margin: 0 0 10px !important;
    background: var(--ay-body, #eef3fa) !important;
    border: 1px solid var(--ay-border, #cbd9ea) !important;
    border-radius: 7px !important;
}
.toc-buscar:focus-within { border-color: var(--ay-accent, #2563eb) !important; }
.toc-buscar i { color: var(--ay-muted, #5a7088) !important; font-size: 12px !important; }
.toc-buscar input {
    border: 0 !important; outline: none !important; background: transparent !important;
    width: 100% !important; font-family: inherit !important;
    font-size: 12.5px !important; color: var(--ay-ink, #0f2438) !important;
}

/* El botón "Contenido" solo sirve en pantalla chica */
.toc-toggle { display: none !important; }

/* ── Lista de temas ── */
.toc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.toc-list li { margin: 0 0 1px !important; list-style: none !important; }
.toc-list a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--ay-ink, #0f2438) !important;
    text-decoration: none !important;
    transition: background .12s, color .12s !important;
}
.toc-list a:hover { background: var(--ay-hover, #f0f6ff) !important; color: var(--ay-navy1, #1a4d80) !important; }
.toc-list a.active {
    background: var(--ay-navy1, #1a4d80) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.toc-list a i { font-size: 12px !important; width: 16px !important; text-align: center !important; flex-shrink: 0 !important; }
.toc-list a.active i { color: #fff !important; }

/* ── Separador de grupo ── */
.toc-grupo {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: var(--ay-navy1, #1a4d80) !important;
    padding: 10px 8px 4px !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--ay-border, #cbd9ea) !important;
}
.toc-grupo:first-child { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }

/* ── Pantalla chica: el sub-índice se colapsa arriba ── */
@media (max-width: 820px) {
    .ayuda-layout { flex-direction: column !important; padding: 10px !important; gap: 10px !important; }
    .ayuda-toc {
        width: 100% !important;
        position: static !important;
        max-height: none !important;
    }
    .toc-toggle {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        padding: 8px 10px !important;
        margin-bottom: 8px !important;
        background: var(--ay-body, #eef3fa) !important;
        border: 1px solid var(--ay-border, #cbd9ea) !important;
        border-radius: 7px !important;
        font: inherit !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: var(--ay-navy1, #1a4d80) !important;
        cursor: pointer !important;
    }
    .toc-list.collapsed { display: none !important; }
}