/* barra superior de las ventanas SAP igual a SAP GUI (referencia: Transport Management System).
   Fondo azul marino liso y, a la derecha, el logo SAP con el diagonal y la textura de agua (img/sap-bar-logo.png, recortado de la referencia).
   Archivo independiente: para volver al aspecto anterior basta con sacar su <link> de index.html. */
html .window--sap .sapx__menu { height: 30px; min-height: 30px; padding: 0 8px; background: #182873; overflow: hidden; }
html .window--sap .sapx__logo { flex: none; align-self: stretch; width: 105px; margin: 0 -8px 0 auto; padding: 0; color: transparent; font-size: 0; line-height: 0; text-shadow: none; background: #182873 url('../img/sap-bar-logo.png') no-repeat right center / 100% 100%; image-rendering: auto; }

/* el logo SAP de la barra azul medía siempre 105x30 pero se veía de distinto tamaño: iba pegado al final del menú con margin-left:auto y, como cada pantalla
   tiene un menú de distinto largo (en celular casi no hay lugar), lo empujaba fuera de la barra y lo recortaba distinto en cada pantalla.
   Ahora va fijo contra el borde derecho, siempre entero e igual en todas las pantallas SAP (Easy Access, PA30, SE38, dump, debugger, PE02, PC00, SE09/SE10).
   Si el menú es más largo que el lugar disponible, el texto queda tapado por el logo (no al revés). En celular se achica el espacio entre opciones para que entren.
   Para revertir: borrar este bloque. */
html .window--sap .sapx__menu { position: relative; }
html .window--sap .sapx__menu > span { position: relative; z-index: 0; }
html .window--sap .sapx__logo { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 105px; height: 30px; margin: 0; align-self: auto; }
@media (max-width: 600px) {
  html .window--sap .sapx__menu { gap: 6px; }
  html .window--sap .sapx__logo { top: 3px; bottom: auto; width: 84px; height: 24px; }   /* mismo logo, proporcional (378x108), igual en todas las pantallas */
}