/* ============================================================
   Ayuda - Base compartida (Flat Moderno)
   Usa variables --fp-flat-* de paleta-global.php
   Se carga DESPUÉS del CSS de cada módulo para sobrescribir.
   ============================================================ */

body {
    background: var(--fp-flat-body) !important;
    color: var(--fp-flat-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
}

.ayuda-header {
    background: var(--fp-flat-titulo-bg) !important;
    border-bottom: 1px solid var(--fp-flat-border) !important;
}
.ayuda-header-icon { color: #fff !important; }
.ayuda-header-text h1 { color: #fff !important; font-size: 1.5rem !important; }
.ayuda-header-text p { color: rgba(255,255,255,0.85) !important; font-size: 0.95rem !important; }
.btn-volver {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    color: #fff !important;
    font-size: 0.9rem !important;
}
.btn-volver:hover { background: rgba(255,255,255,0.25) !important; color: #fff !important; }
.btn-volver-menu { margin-right: 8px !important; background: rgba(255,255,255,0.25) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 12px !important; border-radius: 6px !important; }

/* ============================================================
   MENÚ LATERAL GLOBAL DE AYUDA (_menu_ayuda.php)
   ============================================================ */
.ayuda-menu-lateral {
    background: var(--fp-flat-surface);
    border: 1px solid var(--fp-flat-border);
    border-radius: 8px;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
    width: 260px;
    align-self: flex-start;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    flex-shrink: 0;
}
.aml-header { padding-bottom: 8px; border-bottom: 1px solid var(--fp-flat-border); margin-bottom: 8px; }
.aml-inicio {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 6px;
    color: var(--fp-flat-accent);
    font-weight: 600;
    text-decoration: none;
    background: var(--fp-flat-accent-soft, rgba(0,71,171,0.08));
    border: 1px solid rgba(0,71,171,0.2);
}
.aml-inicio:hover { background: var(--fp-flat-accent); color: #fff; }
.aml-inicio i { font-size: 1rem; }

.aml-buscar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    margin-bottom: 10px;
    background: var(--fp-flat-input-bg);
    border: 1px solid var(--fp-flat-border);
    border-radius: 6px;
}
.aml-buscar i { color: var(--fp-flat-text-muted); font-size: 14px; }
.aml-buscar input { border: none; background: transparent; outline: none; font-size: 13px; color: var(--fp-flat-text); width: 100%; font-family: Arial, Helvetica, sans-serif; }

.aml-grupo { margin-bottom: 10px; }
.aml-grupo-titulo {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fp-flat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 6px 4px 6px;
    border-bottom: 1px solid var(--fp-flat-border);
    margin-bottom: 4px;
}
.aml-items { list-style: none; margin: 0; padding: 0; }
.aml-item { margin: 0; padding: 0; }
.aml-modulo-link {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; margin: 1px 0;
    color: var(--fp-flat-text);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    font-size: 0.88rem;
}
.aml-modulo-link:hover {
    background: var(--fp-flat-row-hover);
    color: var(--fp-flat-accent);
}
.aml-modulo-link i { color: var(--fp-flat-accent); font-size: 0.95rem; min-width: 16px; text-align: center; }
.aml-item.activo > .aml-modulo-link {
    background: var(--fp-flat-accent);
    color: #fff;
    font-weight: 700;
}
.aml-item.activo > .aml-modulo-link i { color: #fff; }

.aml-temas {
    list-style: none;
    margin: 2px 0 6px 24px;
    padding-left: 8px;
    border-left: 2px solid var(--fp-flat-border);
}
.aml-temas li { margin: 0; }
.aml-temas a {
    display: block;
    padding: 3px 8px;
    color: var(--fp-flat-text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    border-radius: 4px;
    line-height: 1.35;
}
.aml-temas a:hover { background: var(--fp-flat-row-hover); color: var(--fp-flat-accent); }
.aml-item.activo .aml-temas a { color: var(--fp-flat-text); }
.aml-item.activo .aml-temas a:hover { color: var(--fp-flat-accent); }
.aml-temas-colapsado { display: none; }
.aml-item:hover .aml-temas-colapsado,
.aml-item:focus-within .aml-temas-colapsado { display: block; }

/* Layout: menú lateral + contenido */
.ayuda-layout-con-menu {
    display: flex;
    gap: 16px;
    padding: 12px;
    align-items: flex-start;
}
.ayuda-layout-con-menu .ayuda-content,
.ayuda-layout-con-menu .ayuda-layout { flex: 1; min-width: 0; }

@media (max-width: 980px) {
    .ayuda-menu-lateral {
        position: static;
        width: 100%;
        max-height: 320px;
    }
    .ayuda-layout-con-menu { flex-direction: column; }
}

/* TOC Sidebar */
.ayuda-toc {
    background: var(--fp-flat-surface) !important;
    border: 1px solid var(--fp-flat-border) !important;
}
.toc-buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--fp-flat-input-bg);
    border: 1px solid var(--fp-flat-border);
    border-radius: 6px;
}
.toc-buscar i { color: var(--fp-flat-text-muted); font-size: 14px; }
.toc-buscar input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--fp-flat-text);
    width: 100%;
}
.toc-buscar input::placeholder { color: var(--fp-flat-text-muted); }
.toc-title { color: var(--fp-flat-accent) !important; font-size: 0.9rem !important; }
.toc-grupo { color: var(--fp-flat-text-muted) !important; }
.toc-list a {
    color: var(--fp-flat-text) !important;
    font-size: 0.9rem !important;
    font-weight: 500;
}
.toc-list a:hover {
    background: var(--fp-flat-row-hover) !important;
    color: var(--fp-flat-accent) !important;
}
.toc-list a.active {
    background: var(--fp-flat-row-hover) !important;
    color: var(--fp-flat-accent) !important;
    font-weight: 700;
    border-left: 3px solid var(--fp-flat-accent);
}
.toc-list a i { color: var(--fp-flat-accent) !important; font-size: 0.95rem !important; }
.toc-toggle { color: var(--fp-flat-accent) !important; font-size: 0.9rem !important; }

/* Secciones */
.seccion h2 {
    color: var(--fp-flat-text) !important;
    font-size: 1.25rem !important;
    border-bottom: 2px solid var(--fp-flat-accent) !important;
}
.seccion h2 i { color: var(--fp-flat-accent) !important; }
.seccion h3 { color: var(--fp-flat-accent) !important; font-size: 1.05rem !important; }
.fecha-actualizacion {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--fp-flat-text-muted) !important;
    background: var(--fp-flat-row-alt);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--fp-flat-border);
    margin-left: 8px;
    vertical-align: middle;
}
.seccion h4 { color: var(--fp-flat-text) !important; font-size: 1rem !important; }
.seccion p,
.seccion li,
.seccion td,
.seccion dd,
.seccion dt {
    color: var(--fp-flat-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}
.seccion strong { color: var(--fp-flat-accent) !important; font-weight: 700 !important; }
.seccion li::marker { color: var(--fp-flat-accent); }
.seccion code,
code {
    background: rgba(0,71,171,0.08) !important;
    color: var(--fp-flat-accent) !important;
    border: 1px solid rgba(0,71,171,0.2) !important;
    font-size: 0.9rem !important;
    padding: 1px 6px;
    border-radius: 4px;
}
.seccion a { color: var(--fp-flat-accent); }
.seccion a:hover { color: #003380; }

/* Cajas destacadas */
.box {
    background: var(--fp-flat-surface) !important;
    border: 1px solid var(--fp-flat-border) !important;
    border-left: 4px solid var(--fp-flat-accent) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: var(--fp-flat-text) !important;
}
.box strong { color: var(--fp-flat-text) !important; }
.box-info   { border-left-color: #3b82f6 !important; }
.box-info strong { color: #1d4ed8 !important; }
.box-tip    { border-left-color: #10b981 !important; }
.box-tip strong { color: #059669 !important; }
.box-warn   { border-left-color: #f59e0b !important; background: #fffbeb !important; }
.box-warn strong { color: #b45309 !important; }
.box-danger { border-left-color: #ef4444 !important; background: #fef2f2 !important; }
.box-danger strong { color: #dc2626 !important; }

/* Tablas */
.tabla-comp {
    background: var(--fp-flat-surface) !important;
    border: 1px solid var(--fp-flat-border) !important;
    font-size: 0.9rem !important;
}
.tabla-comp th {
    background: var(--fp-flat-th-bg) !important;
    color: var(--fp-flat-th-text) !important;
    border-bottom: 2px solid var(--fp-flat-border-strong) !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tabla-comp td {
    color: var(--fp-flat-text) !important;
    border-bottom: 1px solid var(--fp-flat-border) !important;
    font-size: 0.9rem !important;
}
.tabla-comp tr:hover td { background: var(--fp-flat-row-hover) !important; }

/* Pasos numerados */
.pasos li {
    color: var(--fp-flat-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}
.pasos li::before {
    background: var(--fp-flat-titulo-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--fp-flat-accent) !important;
}

/* Badges genéricos */
[class*="badge-"] {
    font-size: 0.85rem !important;
    font-weight: 700;
}

/* Fallback: fuentes heredadas */
.ayuda-content, .ayuda-content * {
    min-height: 0;
}
.ayuda-content p,
.ayuda-content span,
.ayuda-content div,
.ayuda-content label {
    font-size: inherit;
}

/* Dark mode overrides */
body.dark-mode .box-warn { background: #1c1507 !important; }
body.dark-mode .box-warn strong { color: #fbbf24 !important; }
body.dark-mode .box-danger { background: #1c0707 !important; }
body.dark-mode .box-danger strong { color: #f87171 !important; }
body.dark-mode .seccion a { color: #60a5fa; }
body.dark-mode .seccion a:hover { color: #93c5fd; }
body.dark-mode .seccion code,
body.dark-mode code {
    background: rgba(59,130,246,0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59,130,246,0.3) !important;
}