/* V2.6.6 — cabeçalho alinhado ao padrão visual do DRE. */
@media (min-width: 1101px) {
  .topbar {
    grid-template-columns: minmax(150px, .8fr) minmax(300px, 1.1fr) minmax(460px, 1.8fr);
    grid-template-areas: "user brand links";
    align-items: center;
    min-height: 96px;
    gap: 12px;
  }
  .topbar .top-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 76px;
    height: auto;
    text-align: center;
  }
  .topbar .brand-copy.has-header-logos { display: none; }
  .topbar .header-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: min(100%, 400px);
    max-width: 400px;
    height: 76px;
    margin-inline: auto;
  }
  .topbar .header-logos .logo-vaga {
    display: flex;
    flex: 0 1 88px;
    justify-content: center;
    align-items: center;
    min-width: 0;
    width: 88px;
    height: 72px;
    padding: 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .topbar .header-logos .empresa-logo-cabecalho {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 66px;
    max-height: 66px;
    object-fit: contain;
    transform: none;
  }
  .topbar .top-links {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .topbar .top-links > a,
  .topbar .top-links > details > summary,
  .topbar .top-links .nav-logout button {
    padding-inline: 7px;
    white-space: nowrap;
    font-size: 10px;
  }
}

@media (max-width: 1100px) {
  .topbar .top-brand {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    max-width: none;
    min-height: 68px;
    margin-inline: auto;
  }
  .topbar .brand-copy.has-header-logos { display: none; }
  .topbar .header-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: min(100%, 400px);
    max-width: 400px;
    height: 68px;
    margin-inline: auto;
  }
  .topbar .header-logos .logo-vaga {
    display: flex;
    flex: 0 1 88px;
    justify-content: center;
    align-items: center;
    min-width: 0;
    width: 88px;
    height: 64px;
    padding: 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .topbar .header-logos .empresa-logo-cabecalho {
    width: 100%;
    max-width: 100%;
    height: 58px;
    max-height: 58px;
    object-fit: contain;
    transform: none;
  }
}

@media (max-width: 700px) {
  .topbar .top-brand {
    justify-items: stretch;
    gap: 5px;
  }
  .topbar .brand-copy,
  .topbar .brand-copy.has-header-logos {
    display: block;
    text-align: center;
  }
  .topbar .brand-copy strong { font-size: 12px; }
  .topbar .brand-copy small { font-size: 10px; }
  .topbar .header-logos {
    width: min(100%, 380px);
    max-width: 380px;
    height: 56px;
    gap: 5px;
  }
  .topbar .header-logos .logo-vaga {
    flex-basis: 76px;
    width: 76px;
    height: 52px;
    padding: 0;
  }
  .topbar .header-logos .empresa-logo-cabecalho {
    height: 48px;
    max-height: 48px;
  }
}