.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;
    }
  }

  /* Responsive para contraer navbar en md y sm */
@media (max-width: 991.98px) {
  /* .navbar-left, */
  .navbar-right {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .navbar-right {
    justify-content: flex-end;
  }

  .app-title {
    width: 208px;
    max-width: 100%;
    white-space: normal;
  }
}

/* Responsive para ocultar título para resoluciones sm */
  @media (max-width: 767.98px) {
    .app-title {
      display: none;
    }
  }

  .logo-img {
    max-height: 50px;
    width: auto;
    opacity: 0.8;
  }

  @media (max-width: 576px) {
    .logo-img {
      max-height: 35px;
    }
  }