/* ===========================================================================
   AYUDA — TEMA NAVY (mismo look que los módulos navy de FactuPOS)
   Se carga DESPUÉS de _base_ayuda.css (lo inyecta _menu_ayuda.php), por eso
   pisa lo anterior. Tokens tomados de los módulos navy (requisiciones.css).
   =========================================================================== */
:root{
    --ay-navy1:#1a4d80; --ay-navy2:#143d66; --ay-body:#eef3fa;
    --ay-card:#ffffff;  --ay-border:#cbd9ea; --ay-ink:#0f2438; --ay-muted:#5a7088;
    --ay-accent:#2563eb; --ay-head-row:#dde8f5; --ay-hover:#f0f6ff;
}

/* ---- Base ---- */
body{
    background:var(--ay-body) !important;
    color:var(--ay-ink) !important;
    font-family:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif !important;
    font-size:15px !important;
}

/* ---- Header full-bleed navy ----
   🪤 Estaba en `display:block`, así que el `gap` de acá abajo no hacía nada y el bloque de
   texto ocupaba el 100 %: los botones caían a un RENGLÓN APARTE y la franja se comía ~50 px
   de alto en los 284 manuales. En fila los botones vuelven a la derecha, que es donde el
   diseño los suponía. */
.ayuda-header{
    background:linear-gradient(135deg,var(--ay-navy1),var(--ay-navy2)) !important;
    color:#fff !important; border:0 !important;
    display:flex !important; align-items:center !important; flex-wrap:wrap !important;
    padding:8px 16px !important; gap:10px !important;
    box-shadow:0 2px 10px rgba(8,20,40,.2) !important;
}
/* El texto se estira y empuja los botones al extremo; `min-width:0` evita que un título
   largo desborde en vez de cortarse. */
.ayuda-header-text{ flex:1 1 340px !important; min-width:0 !important; }
.ayuda-header .btn-volver, .ayuda-header .ayuda-compartir-btn{ flex:0 0 auto !important; }
.ayuda-header-icon{ color:#fff !important; font-size:1.5rem !important; flex:0 0 auto !important; }
.ayuda-header-text h1{ color:#fff !important; font-size:18px !important; font-weight:700 !important; line-height:1.2 !important; margin:0 !important; }
.ayuda-header-text p{ color:rgba(255,255,255,.86) !important; font-size:12px !important; margin:2px 0 0 !important; }
.header-meta-strip{ margin-top:5px !important; }
.meta-pill{
    background:rgba(255,255,255,.18) !important; color:#fff !important;
    border-radius:5px !important; font-size:10.5px !important; font-weight:600 !important; padding:2px 7px !important;
}
.meta-pill.meta-code{ background:rgba(255,255,255,.3) !important; }

/* Botones del header (mismo patrón .rq-btn) */
.btn-volver, .ayuda-compartir-btn{
    display:inline-flex !important; align-items:center !important; gap:6px !important;
    height:36px !important; padding:0 13px !important; border-radius:9px !important;
    border:1px solid rgba(255,255,255,.25) !important; background:rgba(255,255,255,.14) !important;
    color:#fff !important; font-size:12.5px !important; font-weight:600 !important;
    text-decoration:none !important; cursor:pointer !important;
}
.btn-volver:hover{ background:rgba(255,255,255,.24) !important; color:#fff !important; }
.ayuda-compartir-btn{ background:rgba(22,163,74,.9) !important; border-color:rgba(22,163,74,.95) !important; }
.ayuda-compartir-btn:hover{ background:#16a34a !important; }

/* ---- Menú lateral e índice: tarjetas navy ---- */
.ayuda-menu-lateral, .ayuda-toc{
    background:var(--ay-card) !important; border:1px solid var(--ay-border) !important;
    border-radius:10px !important; box-shadow:0 1px 4px rgba(15,36,56,.06) !important;
}
.aml-grupo-titulo, .toc-grupo{
    color:var(--ay-navy1) !important; font-weight:700 !important;
    font-size:10.5px !important; letter-spacing:.4px !important; text-transform:uppercase !important;
    padding:9px 8px 4px !important; border-top:1px solid var(--ay-border) !important; margin-top:4px !important;
}
.toc-list a, .aml-modulo-link{ color:var(--ay-ink) !important; border-radius:7px !important; font-size:12.5px !important; }
.toc-list a:hover, .aml-modulo-link:hover{ background:var(--ay-hover) !important; color:var(--ay-navy1) !important; }
.toc-list a.active, .aml-item.activo > .aml-modulo-link{
    background:var(--ay-navy1) !important; color:#fff !important; font-weight:600 !important;
}
.toc-list a.active i, .aml-item.activo > .aml-modulo-link i{ color:#fff !important; }
.aml-temas a{ color:var(--ay-muted) !important; font-size:11.5px !important; }
.aml-temas a:hover{ color:var(--ay-accent) !important; }
.aml-inicio{
    background:var(--ay-navy1) !important; color:#fff !important;
    border:0 !important; border-radius:8px !important; font-weight:600 !important;
}
.aml-inicio:hover{ background:var(--ay-navy2) !important; color:#fff !important; }
.aml-buscar input, .toc-buscar input{
    border:1.5px solid var(--ay-border) !important; border-radius:8px !important;
    background:#f8fafc !important; color:var(--ay-ink) !important;
}
.aml-buscar input:focus, .toc-buscar input:focus{ border-color:var(--ay-accent) !important; background:#fff !important; }

/* ---- Secciones como card navy ---- */
.seccion{
    background:var(--ay-card) !important; border:1px solid var(--ay-border) !important;
    border-radius:10px !important; padding:16px 18px !important; margin-bottom:14px !important;
    box-shadow:0 1px 4px rgba(15,36,56,.06) !important;
}
.seccion h2{
    color:var(--ay-navy1) !important; font-size:17px !important; font-weight:700 !important;
    border:0 !important; border-left:4px solid var(--ay-navy1) !important;
    padding:2px 0 2px 10px !important; margin:0 0 12px 0 !important; line-height:1.3 !important;
}
.seccion h2 i{ color:var(--ay-navy1) !important; }
.seccion h2 a{ color:var(--ay-navy1) !important; }
.seccion h3{
    color:var(--ay-navy2) !important; font-size:14.5px !important; font-weight:700 !important;
    margin:16px 0 7px !important; padding-bottom:4px !important; border-bottom:1px solid var(--ay-border) !important;
}
.seccion p, .seccion li, .seccion td, .seccion th{ font-size:13.5px !important; line-height:1.6 !important; }
.seccion a{ color:var(--ay-accent) !important; }
.seccion code{
    background:#eef3fa !important; color:#143d66 !important; border:1px solid var(--ay-border) !important;
    border-radius:4px !important; padding:1px 5px !important;
    font-family:'Noto Sans Mono','Courier New',monospace !important; font-size:12px !important;
}
kbd{ background:var(--ay-navy1); color:#fff; border-radius:4px; padding:1px 6px; font-size:11.5px; }

/* ---- Tablas: cabecera navy clara, como la grilla de los módulos ---- */
.tabla-comp{
    border:1px solid var(--ay-border) !important; border-radius:9px !important;
    overflow:hidden !important; border-collapse:separate !important; border-spacing:0 !important;
    width:100% !important; margin:10px 0 !important;
}
.tabla-comp th{
    background:var(--ay-head-row) !important; color:var(--ay-navy2) !important;
    font-size:11.5px !important; font-weight:700 !important; text-transform:uppercase !important;
    letter-spacing:.3px !important; padding:8px 10px !important; border-bottom:1px solid var(--ay-border) !important;
}
.tabla-comp td{
    padding:8px 10px !important; border-bottom:1px solid #e8eef7 !important; color:var(--ay-ink) !important;
}
.tabla-comp tr:last-child td{ border-bottom:0 !important; }
.tabla-comp tr:hover td{ background:var(--ay-hover) !important; }

/* ---- Avisos ---- */
.box{
    border-radius:9px !important; border:1px solid var(--ay-border) !important;
    border-left-width:4px !important; padding:11px 14px !important; margin:12px 0 !important; font-size:13px !important;
}
.box strong{ font-size:13px !important; }
.box-info { background:#eff6ff !important; border-left-color:#2563eb !important; }
.box-tip  { background:#ecfdf5 !important; border-left-color:#10b981 !important; }
.box-warn { background:#fffbeb !important; border-left-color:#f59e0b !important; }
.box-danger{ background:#fef2f2 !important; border-left-color:#ef4444 !important; }

/* ---- Pasos numerados ---- */
.pasos li{ margin-bottom:5px !important; }
.paso-card{
    background:#f7fafd !important; border:1px solid var(--ay-border) !important; border-radius:9px !important;
}
.paso-num{ background:var(--ay-navy1) !important; }
.paso-card h4{ color:var(--ay-navy1) !important; font-size:14px !important; }

/* ---- Accesos rápidos y tarjetas de módulo ---- */
.quick-ref-item{
    background:var(--ay-card) !important; border:1px solid var(--ay-border) !important;
    border-left:3px solid var(--ay-navy1) !important; border-radius:8px !important;
    color:var(--ay-ink) !important; font-size:12.5px !important;
}
.quick-ref-item:hover{ background:var(--ay-hover) !important; border-left-color:var(--ay-accent) !important; }
.quick-ref-item i{ color:var(--ay-navy1) !important; }
.mod-card{ border-top-color:var(--ay-navy1) !important; border-color:var(--ay-border) !important; border-radius:9px !important; }
.mod-card h4{ color:var(--ay-navy1) !important; }
.mod-card .cod{ background:var(--ay-head-row) !important; color:var(--ay-navy2) !important; }

/* ---- Distintivos de código y permiso ---- */
.modulo-codigo-in,
.modulo-codigo-cl,
.modulo-codigo-sa,
.modulo-codigo-cx,
.modulo-codigo-cp,
.modulo-codigo-co{ background:var(--ay-head-row) !important; color:var(--ay-navy2) !important; border-radius:5px !important; }
.permiso-pill{ background:#eef3fa !important; color:var(--ay-navy2) !important; border:1px solid var(--ay-border) !important; }
.btn-ui{ border-radius:5px !important; background:var(--ay-navy1) !important; }
.btn-ui.verde{ background:#16a34a !important; }
.btn-ui.rojo { background:#dc2626 !important; }
.btn-ui.gris { background:#94a3b8 !important; }

/* ---- Botón Inicio flotante (modo marco) ---- */
.ayuda-inicio-flot{ background:var(--ay-navy1) !important; border-radius:9px !important; }
.ayuda-inicio-flot:hover{ background:var(--ay-navy2) !important; }

/* ---- Celular ---- */
@media (max-width:700px){
    .seccion{ padding:13px 13px !important; }
    .ayuda-header-text h1{ font-size:16px !important; }
    .seccion h2{ font-size:15px !important; }
}

/* ── Avisos: solo el TÍTULO va en su propia línea ──────────────────────────
   Varios manuales traían `.box strong { display:block }`, y eso partía en
   renglones sueltos cada negrita del texto (se leía cortado y con puntos
   huérfanos). El título sigue arriba; las negritas del cuerpo van en línea. */
.box strong { display: inline !important; }
.box > strong:first-child { display: block !important; margin-bottom: 5px !important; }