.bottom-bar {
      position: fixed;
      top: 56px;
      width: 100%;
      background-color: var(--btnbar-bg);
      z-index: 1050;
      height: 40px;
      border-bottom: 1px solid #ccc;
    }
    #messagePanel.offcanvas-end {
      top: 86px !important;
      height: calc(100vh - 86px);
    }
    /* Offcanvas de filtros (izquierda) y notificaciones (derecha) debajo del topbar+botonera */
    #filtersPanel.offcanvas-start {
      top: 86px !important;
      height: calc(100vh - 86px);
      overflow-y: auto;
    }
    /* soporte retro si existía sidePanel */
    #sidePanel.offcanvas-start {
      top: 86px !important;
      height: calc(100vh - 86px);
      overflow-y: auto;
    }
    .bottom-bar .btn-custom1 {
       background-color: var(--btnbar-bg);
       border: 1px solid var(--logo-T);
       color: var(--btn-text);
    }
    .icon-highlight{
      color: var(--logo-T)
    }
    .bottom-bar .btn-custom2{
       background-color: var(--btnbar-bg);
       border: 1px solid var(--logo-X);
       color: var(--btn-text);
    }
    .bottom-bar .btn-custom3{
       background-color: var(--btnbar-bg);
       border: 1px solid var(--logo-MH);
       color: var(--topbar-bg);
    }
    /* Base styles for the toggle buttons */
    .btn-toggle {
    transition: background-color 0.2s ease;
    }
    /* Hover effect */
    .btn-toggle:hover {
    background-color: #e0e0e0; /* Replace with your desired hover color */
    }
    /* Active state (when panel is open) */
    .btn-toggle.active {
    background-color: #e0e0e0; /* Same as hover to keep consistent */
    box-shadow: inset 0 0 0 2px #bbb; /* Optional, adds a subtle pressed look */
    }