Utility rail

Columna de íconos a la derecha para acciones rápidas alcanzables desde cualquier página (filtros, comentarios, actividad). Clase base .cl-rail, agrupada en .cl-rail-section, con botones .cl-rail-btn (activo: .is-active). Combinala con .cl-layout--with-rail para un grid de 3 columnas (barra lateral / contenido / riel de 56px). Reemplaza la columna de utilidades heredada de SAP.

Riel con secciones

Cada .cl-rail-section agrupa botones relacionados; una línea separa secciones consecutivas. .cl-rail-btn-badge muestra un conteo y .cl-rail-btn-dot un indicador simple de novedad.

<div style="display: grid; grid-template-columns: 1fr 56px; border: 1px solid var(--border-1); border-radius: var(--radius-3); overflow: hidden; background: var(--bg-app); height: 240px">
  <div style="padding: 16px; color: var(--fg-3); font-size: var(--fs-small)">← Contenido de la página</div>
  <div class="cl-rail">
    <div class="cl-rail-section">
      <button class="cl-rail-btn is-active" title="Filtros"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18l-7 9v6l-4-2v-4z"/></svg></button>
      <button class="cl-rail-btn" title="Comentarios"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2H4.5z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg><span class="cl-rail-btn-badge">3</span></button>
      <button class="cl-rail-btn" title="Actividad"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></svg><span class="cl-rail-btn-dot"></span></button>
    </div>
    <div class="cl-rail-section">
      <button class="cl-rail-btn" title="Ayuda"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></svg></button>
      <button class="cl-rail-btn" title="Configuración"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2.8"/><path d="M19.4 13.5l1.6.9-1.6 2.8-1.8-.4a7 7 0 0 1-1.7 1l-.3 1.8h-3.2l-.3-1.8a7 7 0 0 1-1.7-1l-1.8.4-1.6-2.8 1.6-.9a7 7 0 0 1 0-2l-1.6-.9 1.6-2.8 1.8.4a7 7 0 0 1 1.7-1l.3-1.8h3.2l.3 1.8c.6.2 1.2.5 1.7 1l1.8-.4 1.6 2.8-1.6.9a7 7 0 0 1 0 2z"/></svg></button>
    </div>
  </div>
</div>

Solo un grupo

Una única .cl-rail-section alcanza cuando el riel tiene un solo propósito (por ejemplo, filtros). El botón activo usa .is-active.

<div class="cl-rail">
  <div class="cl-rail-section">
    <button class="cl-rail-btn is-active" title="Filtros"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18l-7 9v6l-4-2v-4z"/></svg></button>
    <button class="cl-rail-btn" title="Comentarios"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2H4.5z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg><span class="cl-rail-btn-badge">3</span></button>
    <button class="cl-rail-btn" title="Actividad"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></svg><span class="cl-rail-btn-dot"></span></button>
  </div>
</div>