/*
 * Logos Unilentes + MaxHD no topo de todas as telas (cliente e admin).
 * Incluído depois do <style> de cada página, então sobrescreve o antigo
 * "ponto amarelo + UNILENTES".
 *
 * As versões "-branco" dos logos foram geradas a partir dos originais para
 * aparecerem sobre o fundo azul-marinho do topo (o texto cinza/azul-escuro
 * virou branco; as partes em azul claro/gradiente foram mantidas).
 */

.brand-mark{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.brand-mark .dot{ display:none; }

.logo-topo-unilentes{
  display:block;
  height:24px;
  width:auto;
}
.logo-topo-maxhd{
  display:block;
  height:30px;
  width:auto;
}

/* Bloco do MaxHD no lado direito, separado do nome/usuário por um traço. */
.topbar-logo-maxhd{
  display:flex;
  align-items:center;
  padding-right:14px;
  border-right:1px solid rgba(255,255,255,.2);
  flex-shrink:0;
}

.topbar-nome{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:260px;
}

/* Tela de login do cliente (painel azul à esquerda). */
.login-marcas{
  display:flex;
  align-items:center;
  gap:16px;
}
.login-marcas .logo-topo-unilentes{ height:28px; }
.login-marcas .logo-topo-maxhd{ height:36px; }
.login-marcas .divisor{
  width:1px;
  height:28px;
  background:rgba(255,255,255,.25);
}

@media (max-width: 900px){
  .topbar-nome{ max-width:160px; }
}

@media (max-width: 640px){
  .topbar{ padding:0 16px !important; gap:12px; }
  .topbar-right{ gap:10px !important; }
  .logo-topo-unilentes{ height:19px; }
  .logo-topo-maxhd{ height:24px; }
  .topbar-logo-maxhd{ padding-right:10px; }
  /* No celular não cabe o nome da ótica/usuário: fica só o avatar + Sair. */
  .topbar-nome{ display:none; }
  .link-logout{ padding-left:10px !important; }
  .brand-mark .tag{ font-size:9.5px; padding:1px 6px; }
}

@media (max-width: 360px){
  .logo-topo-unilentes{ height:16px; }
  .logo-topo-maxhd{ height:20px; }
}

/* ---------- Painel admin ----------
 * Mesmo topo do painel do cliente: logo + menu à esquerda (item ativo
 * sublinhado em âmbar) e, à direita, MaxHD | nome, avatar e Sair.
 * No celular o menu desce pra uma segunda linha (o admin não tem a barra
 * de navegação inferior do cliente). */
.topbar-admin .topbar-left{ display:flex; align-items:center; gap:40px; min-width:0; }
.topbar-admin nav.main-nav{ display:flex; gap:28px; }
.topbar-admin nav.main-nav a{
  color:rgba(255,255,255,.68);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  padding:10px 2px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.topbar-admin nav.main-nav a.active{ color:#fff; border-bottom-color:var(--amber, #F2A93C); }
.topbar-admin nav.main-nav a:hover{ color:#fff; }
.topbar-admin .topbar-nome-link{ color:inherit; text-decoration:none; }
.topbar-admin .topbar-nome-link:hover{ color:#fff; text-decoration:underline; }
.topbar-admin .avatar{ text-decoration:none;
  width:30px; height:30px; border-radius:50%;
  background:var(--navy-soft, #1C4E82);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora', sans-serif; font-weight:600; font-size:13px;
  color:#fff; flex-shrink:0;
}
@media (max-width: 760px){
  .topbar-admin{
    flex-wrap:wrap;
    height:auto !important;
    padding:10px 16px 0 !important;
    row-gap:4px;
  }
  /* logo e menu viram itens soltos do topo pra o menu poder ir pra linha de baixo */
  .topbar-admin .topbar-left{ display:contents; }
  .topbar-admin nav.main-nav{
    order:3;
    width:100%;
    gap:22px;
    border-top:1px solid rgba(255,255,255,.12);
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .topbar-admin nav.main-nav::-webkit-scrollbar{ display:none; }
  .topbar-admin nav.main-nav a{ padding:10px 2px 8px; white-space:nowrap; flex:none; }
  /* 1ª linha: logo + ADMIN à esquerda e MaxHD | avatar | Sair à direita, sem quebrar */
  .topbar-admin{ column-gap:8px !important; }
  .topbar-admin .brand-mark{ gap:6px; }
  .topbar-admin .brand-mark .tag{ margin-left:0; }
  .topbar-admin .logo-topo-unilentes{ height:17px; }
  .topbar-admin .topbar-right{ margin-left:auto; gap:8px !important; }
  .topbar-admin .topbar-logo-maxhd{ padding-right:8px; }
  .topbar-admin .logo-topo-maxhd{ height:22px; }
  .topbar-admin .link-logout{ padding-left:8px !important; }
}
@media (max-width: 350px){
  .topbar-admin .brand-mark .tag{ display:none; }
}

/* Pesquisa rápida no topo do admin (todas as páginas, menos a lista) */
.topo-busca{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:0 12px; height:34px; color:rgba(255,255,255,.7); transition:background .15s, border-color .15s; }
.topo-busca:focus-within{ background:#fff; border-color:#fff; color:#1C4E82; }
.topo-busca input{ border:none; outline:none; background:transparent; color:#fff; font-family:'Inter', sans-serif; font-size:13px; width:190px; }
.topo-busca:focus-within input{ color:#0A2540; }
.topo-busca input::placeholder{ color:rgba(255,255,255,.6); }
.topo-busca:focus-within input::placeholder{ color:#8A929C; }
@media (max-width: 1100px){ .topo-busca input{ width:130px; } }
@media (max-width: 760px){ .topo-busca{ display:none; } }