/* public/css/portal-topbar.css */
:root {
  --portal-accent: #6F2DBD; /* roxinho da barra superior */
  --portal-icon: #6b6b6b;   /* cinza dos ícones/links */
}

.topbar-accent {
  height: 4px;
  background: var(--portal-accent);
}

.portal-navbar {
  border-bottom: 1px solid #eee;
  padding-top: .65rem;
  padding-bottom: .65rem;
  padding-left:70px; 
  padding-right:70px;
  
}

.portal-logo {
  height: 38px;
  width: auto;
  display: block;
}

.portal-brand-text {
  font-size: 1.1rem;
  letter-spacing: .2px;
}

.portal-center-nav .nav-link {
  color: var(--portal-icon);
  font-weight: 400 !important;
}

.portal-center-nav .nav-link:hover {
  color: #111;
}

.nav-link svg { opacity: .9; }
.btn.btn-outline-dark {
  border-radius: .6rem;
  padding: .45rem .9rem;
}

.portal-btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;                 /* ajuste opcional */
  padding: 0 .9rem;             /* laterais confortáveis */
  background: transparent;      /* sem cor de fundo */
  color: #333;                  /* texto escuro (ajuste se o topo for escuro) */
  border: 1px solid #ddd;       /* borda cinza claro */
  border-radius: 8px;           /* cantos suaves */
  text-decoration: none;        /* remove sublinhado em <a> */
  font-weight: 500;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* hover/focus: leve destaque mantendo transparência */
.portal-btn-login:hover,
.portal-btn-login:focus {
  background: rgba(0,0,0,0.04); /* leve filme */
  border-color: #ccc;           /* um tom acima no hover */
  outline: none;
}

/* active: feedback de clique */
.portal-btn-login:active {
  background: rgba(0,0,0,0.06);
  border-color: #c2c2c2;
}

/* estados desabilitado (se algum dia aplicar) */
.portal-btn-login[disabled],
.portal-btn-login.disabled {
  opacity: .6;
  pointer-events: none;
}

/* Bloco de autenticação no topo (Olá, Fulano / Sair / Entrar) */
.portal-auth-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.portal-user-greeting span {
  line-height: 1;
  font-size: 0.95rem;
}

/* Botão Sair mais compacto e alinhado */
.portal-logout-btn {
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.1;
}

/* ============= NAVBAR MOBILE – OVERLAY ============= */

@media (max-width: 991.98px) {
  .portal-navbar {
    position: sticky;
    top: 0;
    z-index: 1030; /* acima da galeria */
  }

  /* Quando o menu abre, a .navbar-collapse vira um painel sobreposto */
  .portal-navbar .navbar-collapse {
    position: fixed;
    top: 64px;              /* altura aproximada da navbar */
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 16px 24px 24px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  /* Garante que quando estiver fechado some mesmo */
  .portal-navbar .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  /* Deixa os itens do menu em coluna com mais espaço */
  .portal-center-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
  }

  /* Bloco de usuário e login em coluna no mobile */
  .portal-auth-area {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
  }

  .portal-logout-btn,
  .portal-auth-area .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 991.98px) {
.portal-navbar {
  border-bottom: 1px solid #eee;
  padding-top: .65rem;
  padding-bottom: .65rem;
  padding-left:20px; 
  padding-right:20px;
  
  }


/* esse é exatamente o wrapper do seu trecho */
  .navbar-collapse .d-flex.align-items-center.gap-3 {
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,.08);
  }

  /* Favoritos vira item “de menu” */
  .navbar-collapse .portal-action-link {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* blocos de auth (deslogado e logado) viram coluna */
  .navbar-collapse .portal-auth-area {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* botões ocupam a largura toda e alinham texto/ícone à esquerda */
  .navbar-collapse .portal-auth-area > a.btn,
  .navbar-collapse .portal-logout-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
  }

  /* “Olá, usuário” vira linha alinhada e com respiro */
  .navbar-collapse .portal-user-greeting {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0,0,0,.04);
  }

  /* ícones com largura fixa pra tudo ficar perfeitamente alinhado */
  .navbar-collapse .portal-action-icon,
  .navbar-collapse .portal-btn-icon {
    width: 20px;
    text-align: center;
    flex: 0 0 20px;
  }

  
.navbar-collapse .portal-auth-area {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* ✅ só garante flex quando estiver visível (não estiver d-none) */
  .navbar-collapse .portal-auth-area:not(.d-none) {
    display: flex;
  }







}