.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #bcdaef;
    height: 48px;
    padding: 0 1rem;
    width: 100%;
  }
  
  .navbar-left {
    display: flex;
    align-items: center;
  }
  
  .sidebar-toggle {
    color: #343a40;
    margin-right: 0.5rem;
  }
  
  .app-title {
    font-weight: bold;
    color: #0a2847;
    font-size: 1rem;
  }
  
  .navbar-right {
    display: flex;
    align-items: center;
  }
  
  .user-name {
    margin-right: 0.5rem;
    font-size: 0.9rem;
    color: #0a2847;
  }
  
  .logout-button {
    color: #0a2847;
  }
  
  /* Page header styles */
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #fff;
  }
  
  .page-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #495057;
  }
  
  .breadcrumb-container {
    font-size: 0.875rem;
    color: #6c757d;
  }
  
  .breadcrumb-link {
    color: #0088cc;
    text-decoration: none;
  }
  
  .breadcrumb-link:hover {
    text-decoration: underline;
  }
  
  .breadcrumb-separator {
    margin: 0 0.25rem;
  }
  
  .breadcrumb-current {
    color: #6c757d;
  }
  
  /* Sobrescribir estilos de PrimeNG para los botones en el navbar */
  :host ::ng-deep .p-button.p-button-text {
    padding: 0.5rem;
    color: #0a2847;
    
    &:focus {
      box-shadow: none;
    }
    
    .p-button-icon {
      font-size: 1rem;
    }
  }