/* Ayuda - Requisiciones (IN-040) | AY-036 */

/* Un respiro entre la franja del menú lateral y el contenido */
.ayuda-layout-con-menu { gap: 26px; }
.ayuda-layout-con-menu > .ayuda-layout { padding-left: 10px; }
.ayuda-breadcrumb { padding-left: 16px; }
@media (max-width: 980px) {
    .ayuda-layout-con-menu { gap: 14px; }
    .ayuda-layout-con-menu > .ayuda-layout { padding-left: 0; }
}

.modulo-codigo-in,
.modulo-codigo-cl,
.modulo-codigo-sa,
.modulo-codigo-cx,
.modulo-codigo-cp,
.modulo-codigo-co { background:#cffafe;color:#0e7490;padding:2px 8px;border-radius:4px;font-size:0.78rem;font-weight:700;margin-left:8px; }
/* Las variantes por área (cl, sa, cx, cp, co) se usaban en 126 lugares SIN regla propia:
   salían como texto pelado. Comparten la del catálogo (-in) para que la píldora pinte. */
.permiso-pill { background:#f3f4f6;color:#111827;padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:700;margin-left:6px; }

/* Tira de datos del encabezado */
.header-meta-strip { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }
.meta-pill { background:rgba(255,255,255,0.18);color:#fff;padding:2px 9px;border-radius:12px;font-size:0.7rem;font-weight:600;display:inline-flex;align-items:center;gap:4px; }
.meta-pill.meta-code { background:rgba(255,255,255,0.32); }

/* Accesos rápidos */
.quick-ref { display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:8px;margin:0 0 22px 0; }
.quick-ref-item { display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;border-left:3px solid #06b6d4;border-radius:6px;padding:9px 11px;text-decoration:none;color:#0f172a;font-size:0.82rem;font-weight:600;transition:all .15s; }
.quick-ref-item:hover { background:#ecfeff;border-left-color:#0891b2;transform:translateY(-1px); }
.quick-ref-item i { color:#0891b2;font-size:1rem; }

/* Pasos numerados grandes */
.paso-card { display:flex;gap:14px;align-items:flex-start;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px 16px;margin:12px 0; }
.paso-num { flex:0 0 34px;height:34px;border-radius:50%;background:#0891b2;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem; }
.paso-card h4 { margin:0 0 6px 0;font-size:1rem;color:#0f172a; }
.paso-card p:last-child { margin-bottom:0; }

/* Puntos de estado */
.dot { display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:5px; }
.dot-borrador { background:#f59e0b; }
.dot-aplicada { background:#22c55e; }

/* Botones citados dentro del texto */
.btn-ui { display:inline-block;background:#1e293b;color:#fff;padding:1px 8px;border-radius:4px;font-size:0.78rem;font-weight:700;white-space:nowrap; }
.btn-ui.verde { background:#16a34a; }
.btn-ui.rojo  { background:#dc2626; }
.btn-ui.gris  { background:#94a3b8; }

@media print {
    .ayuda-toc, .ayuda-menu-lateral, .btn-volver, .quick-ref { display:none !important; }
}

/* Puntos de estado extra (otros módulos) */
.dot-proceso  { background:#3b82f6; }
.dot-devuelto { background:#8b5cf6; }
.dot-gris     { background:#94a3b8; }

/* Mini tarjetas de "qué hace cada pantalla" */
.mod-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:12px 0; }
.mod-card { background:#fff;border:1px solid #e2e8f0;border-top:3px solid #0891b2;border-radius:7px;padding:12px 14px; }
.mod-card h4 { margin:0 0 5px 0;font-size:0.93rem;color:#0f172a; }
.mod-card p  { margin:0;font-size:0.82rem;color:#475569;line-height:1.5; }
.mod-card .cod { display:inline-block;background:#cffafe;color:#0e7490;padding:1px 6px;border-radius:4px;font-size:0.7rem;font-weight:700;margin-left:5px; }