/*
 * Admin redesign — tokens compartilhados.
 *
 * Fonte da verdade: identidade visual do approvita.com.br (Sora/DM Sans,
 * rosa/verde-água), adaptada para os componentes de admin (mockup aprovado
 * em conversa com o usuário). Ver docs/admin-redesign.md para o inventário
 * completo e o checklist de migração por página.
 *
 * Escopo: carregado globalmente (via cabecalho.php), mas as regras aqui
 * dentro só devem afetar elementos que já foram migrados para esta nova
 * identidade (hoje: nenhum — este arquivo só declara tokens). Nunca usar
 * seletores genéricos (body, .btn, .form-control, etc.) que vazem para
 * páginas ainda não migradas.
 */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/sora-variable.woff2') format('woff2');
}

:root {
  /* Superfícies (tema claro — único modo em produção por enquanto) */
  --am-paper: #ffffff;
  --am-canvas: #f7f8fa;
  --am-surface: #ffffff;

  /* Sidebar — tema escuro (padrão). Para testar o tema claro, ver
     `.admin-modern-sidebar--light` mais abaixo e a variável $sidebar_tema
     no topo do menu.php — trocar só ali é reversível, nada aqui muda. */
  --am-sidebar: #0a0a0c;
  --am-sidebar-line: rgba(255, 255, 255, .08);
  --am-sidebar-line-strong: rgba(255, 255, 255, .16);
  --am-sidebar-ink: #f0f0f2;
  --am-sidebar-ink-dim: #8d8f99;
  --am-sidebar-hover: rgba(255, 255, 255, .06);
  --am-sidebar-active: rgba(255, 255, 255, .1);
  --am-active-pill-bg: transparent;
  --am-active-pill-ink: var(--am-teal);

  /* Texto */
  --am-ink: #12131a;
  --am-ink-2: #5c5f6b;
  --am-ink-3: #9598a2;

  /* Bordas */
  --am-line: #e7e8ee;
  --am-line-strong: #d7d9e1;

  /* Marca */
  --am-pink: #ff2d6b;
  --am-pink-tint: #ffe6ee;
  --am-pink-ink: #a3123f;
  --am-teal: #00c9a7;
  --am-teal-tint: #dcf7f1;
  --am-teal-ink: #04705c;

  /* Semântico */
  --am-success: #1fae6e;
  --am-success-tint: #e3f6ec;
  --am-success-ink: #146b45;
  --am-warning: #c8790a;
  --am-warning-tint: #fdf1de;
  --am-warning-ink: #8a5405;
  --am-danger: #e14a4a;
  --am-danger-tint: #fdeaea;
  --am-danger-ink: #992f2f;

  /* Layout */
  --am-radius-sm: 8px;
  --am-radius-md: 12px;
  --am-radius-lg: 16px;
  --am-shadow-card: 0 1px 2px rgba(18, 19, 26, .04), 0 6px 20px rgba(18, 19, 26, .05);
  --am-shadow-pop: 0 10px 32px rgba(18, 19, 26, .14);

  /* Tipografia */
  --am-font-display: 'Sora', system-ui, sans-serif;
  --am-font-body: 'DM Sans', system-ui, sans-serif;

  /* Sidebar */
  --am-sidebar-width: 220px;
}

/* ==========================================================================
   Sidebar (menu.php) — primeira peça migrada.
   Escopado em `.admin-modern-sidebar`, classe adicionada ao wrapper
   `.compact-light-sidebar` existente. Não remove nenhuma classe/id/atributo
   funcional (data-toggle="collapse", href="#dropdown-N", .travar-tela,
   $menu_selecionado) — só restilo. Ver docs/admin-redesign.md.
   ========================================================================== */

.admin-modern-sidebar {
  background: var(--am-sidebar) !important;
  width: var(--am-sidebar-width);
  min-width: var(--am-sidebar-width) !important;
  max-width: var(--am-sidebar-width) !important;
  border-right: 1px solid var(--am-sidebar-line);
  overflow: hidden;
  /* Sidebar por cima do topbar (era o contrário: topbar 1000 > sidebar 999,
     por isso o topo do menu ficava encoberto). Cobre o canto superior
     esquerdo do topbar (onde ficavam o hambúrguer antigo e parte da logo);
     o toggle agora mora na própria sidebar (abaixo). */
  z-index: 1000 !important;
}
/* Topbar (barra_topo.php) abaixo da sidebar. */
.navbar.fixed-top {
  z-index: 999 !important;
}

.admin-modern-sidebar .am-brand-rail {
  height: 3px;
  background: linear-gradient(90deg, var(--am-pink), var(--am-teal));
}

/* ---------- Tema claro da sidebar (teste) ----------
   Reversível: como toda cor da sidebar já é lida via variável, redefinir
   só essas aqui (em vez de duplicar regras) troca a sidebar inteira pro
   claro. Pra voltar ao escuro, tirar a classe `--light` (ver $sidebar_tema
   no topo do menu.php) — nenhuma regra abaixo precisa mudar. */
.admin-modern-sidebar--light {
  --am-sidebar: var(--am-canvas);
  --am-sidebar-line: var(--am-line);
  --am-sidebar-line-strong: var(--am-line-strong);
  --am-sidebar-ink: var(--am-ink);
  --am-sidebar-ink-dim: var(--am-ink-2);
  --am-sidebar-hover: rgba(18, 19, 26, .045);
  --am-sidebar-active: rgba(18, 19, 26, .06);
  --am-active-pill-bg: var(--am-pink-tint);
  --am-active-pill-ink: var(--am-pink-ink);
}

.admin-modern-sidebar > .side-navbar {
  min-width: var(--am-sidebar-width) !important;
  max-width: var(--am-sidebar-width) !important;
  margin-left: 0 !important;
  /* A sidebar agora cobre o topbar nessa área (z-index acima, ver .admin-modern-sidebar),
     então não precisa mais reservar espaço pro topbar — só o suficiente pro
     próprio botão de collapse (.am-toggle), que é fixed e fica alinhado aqui. */
  padding: 16px 10px 12px !important;
  font-family: var(--am-font-body);
}

/* admin.css tem uma regra @media (max-width:1200px) que encolhe
   `.compact-light-sidebar > .side-navbar` para uma barra de 115px com
   margin-left negativo (modo ícone antigo). Nosso design não tem modo
   ícone-apenas (os rótulos são essenciais), então mantemos a largura fixa
   em qualquer viewport aqui; o comportamento de esconder/mostrar em telas
   pequenas é tratado à parte via `.side-navbar.shrinked`. */
@media (max-width: 1200px) {
  .admin-modern-sidebar > .side-navbar {
    margin-left: 0 !important;
    min-width: var(--am-sidebar-width) !important;
    max-width: var(--am-sidebar-width) !important;
  }
}

.admin-modern-sidebar .am-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.admin-modern-sidebar .nav-label {
  display: block;
  text-align: left !important;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--am-sidebar-ink-dim);
  padding: 10px 10px 6px;
}

.admin-modern-sidebar > .side-navbar ul.list-unstyled {
  padding: 0;
  margin: 0;
}

/* Sub-cabeçalho dentro de um accordion que agrupa vários assuntos num só
   dropdown (ex: "Exclusivo Approvita" reúne Gerencial/Básicos/Manuais/
   Parâmetros) — divisor visual não-clicável. Fica mais à esquerda que os
   itens (recuo 10px, igual ao `.nav-label` do topo) pra se destacar como
   categoria e não como mais um item da lista; só os itens (`ul ul a`)
   mantêm o recuo de 30px. */
.admin-modern-sidebar > .side-navbar ul ul li.am-subgroup-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--am-sidebar-ink-dim);
}
.admin-modern-sidebar > .side-navbar ul ul li.am-subgroup-label:first-child {
  padding-top: 6px;
}
.admin-modern-sidebar > .side-navbar ul ul li.am-subgroup-label .am-subgroup-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--am-pink);
  flex: none;
}

.admin-modern-sidebar > .side-navbar ul a {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 8px 10px !important;
  border-radius: var(--am-radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--am-sidebar-ink-dim) !important;
  font-family: var(--am-font-body);
  text-align: left !important;
}

/* Ícone "?" (vídeo de exemplo) ao lado de itens que têm um vídeo cadastrado
   em $videos_menu (ver menu.php). Vive como <a> irmão do link principal
   dentro do mesmo <li> — não pode ficar aninhado dentro do <a> principal,
   que já ocupa a linha toda, então o <li> vira flex row via :has(). */
.admin-modern-sidebar > .side-navbar ul li:has(> a.am-help) {
  display: flex;
  align-items: center;
}
.admin-modern-sidebar > .side-navbar ul li:has(> a.am-help) > a.travar-tela {
  flex: 1;
  min-width: 0;
}
.admin-modern-sidebar > .side-navbar ul a.am-help {
  flex: none;
  width: 24px;
  padding: 4px !important;
  justify-content: center;
  margin-right: 2px;
}
.admin-modern-sidebar > .side-navbar ul a.am-help .am-icon {
  width: 13px;
  height: 13px;
}

/* Selo "só perfil Approvita" — ícone de escudo decorativo (não clicável,
   ao contrário do .am-help), ao lado de itens/grupos restritos a esse
   perfil. Sozinho, empurra-se pro fim da linha com margin-left:auto; dentro
   de um trigger de accordion (que já tem a seta com margin-left:auto
   própria), fica agrupado com a seta via .am-trigger-end, senão os dois
   auto-margins dividiriam o espaço e abririam um vão entre eles. */
.admin-modern-sidebar > .side-navbar .am-shield-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--am-pink);
  opacity: .6;
  margin-left: auto;
}
.admin-modern-sidebar > .side-navbar .am-shield-badge .am-icon {
  width: 12px;
  height: 12px;
}
.admin-modern-sidebar > .side-navbar ul a .am-trigger-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.admin-modern-sidebar > .side-navbar ul a .am-trigger-end .am-shield-badge,
.admin-modern-sidebar > .side-navbar ul a .am-trigger-end .am-chev {
  margin-left: 0;
}

/* O tema base (variante "compact" com tooltip no hover) esconde o <span>
   do rótulo por padrão (position:absolute + opacity:0) e só revela ao
   passar o mouse — ver .side-navbar ul a span em css.min.css. Aqui os
   rótulos devem ficar sempre visíveis. */
.admin-modern-sidebar > .side-navbar ul a span {
  position: static !important;
  opacity: 1 !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  transition: none !important;
  text-align: left !important;
  white-space: nowrap;
}

.admin-modern-sidebar > .side-navbar ul a:hover {
  background: var(--am-sidebar-hover);
  color: var(--am-sidebar-ink) !important;
}
.admin-modern-sidebar > .side-navbar ul a:hover i,
.admin-modern-sidebar > .side-navbar ul a:hover .am-icon {
  color: var(--am-sidebar-ink);
}

/* O tema base pinta `ul ul` (qualquer lista aninhada) com fundo branco e
   cantos arredondados embaixo — é o "flyout" do submenu expandido na versão
   original. Isso também pega o grupo "Geral" (que agora é uma ul aninhada
   sempre visível, sem <a> de trigger). Neutraliza em toda a sidebar. */
.admin-modern-sidebar > .side-navbar ul ul {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Item de nível 2 (dentro de um dropdown aberto) — recuo + marcador */
.admin-modern-sidebar > .side-navbar ul ul a {
  padding-left: 30px !important;
  font-size: 12.5px;
}
.admin-modern-sidebar > .side-navbar ul ul a.travar-tela::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  flex: none;
}

/* Grupo aberto (accordion Bootstrap nativo) */
.admin-modern-sidebar > .side-navbar a[aria-expanded="true"] {
  background: var(--am-sidebar-active) !important;
  border-radius: var(--am-radius-sm) !important;
  margin: 0 !important;
  color: var(--am-sidebar-ink) !important;
}
.admin-modern-sidebar > .side-navbar a[aria-expanded="true"] i,
.admin-modern-sidebar > .side-navbar a[aria-expanded="true"] .am-icon {
  color: var(--am-sidebar-ink);
}

/* Suprime a seta antiga (ionicons); a nova (SVG) gira via aria-expanded */
.admin-modern-sidebar > .side-navbar a[data-toggle="collapse"]::before {
  content: none !important;
}
.admin-modern-sidebar .am-chev {
  margin-left: auto;
  color: var(--am-sidebar-ink-dim);
  transition: transform .15s ease;
}
.admin-modern-sidebar a[aria-expanded="true"] .am-chev {
  transform: rotate(90deg);
  color: var(--am-sidebar-ink);
}

/* Item ativo (página atual) — pill vazio (só texto) no escuro; no claro vira
   uma pill rosa (ver .admin-modern-sidebar--light), via --am-active-pill-*. */
.admin-modern-sidebar > .side-navbar ul li a.active,
.admin-modern-sidebar > .side-navbar ul li.active > a[data-toggle="collapse"] {
  color: var(--am-active-pill-ink) !important;
  background: var(--am-active-pill-bg) !important;
}
.admin-modern-sidebar > .side-navbar > ul.list-unstyled > li.active > a[data-toggle="collapse"] {
  background: var(--am-sidebar-active) !important;
  color: var(--am-sidebar-ink) !important;
}

/* Espaçamento entre seções = padrão único, ~2x o espaço entre itens dentro
   do "Geral" (que tem padding 6px 10px, ver #dropdown-1 > li > a abaixo). */
.admin-modern-sidebar .sidebar-separator {
  /* O tema base deixa esse <span> como inline-block; nesse modo o
     line-height (21px) reserva espaço mesmo com height:0. display:block
     elimina isso — só a margin abaixo controla o espaçamento. */
  display: block !important;
  background: transparent !important;
  height: 0 !important;
  line-height: 0 !important;
  width: calc(100% - 20px) !important;
  margin: 12px auto !important;
  opacity: 1 !important;
}

/* Grupo "Geral" — sempre visível, sem accordion (ver docs/admin-redesign.md).
   Sem trigger, então os itens ficam no mesmo nível de aninhamento que os
   itens internos dos outros grupos (ul ul a) — essas regras restauram a
   aparência de item de topo (sem recuo, sem marcador, ícone normal). */
.admin-modern-sidebar #dropdown-1 {
  padding: 0;
}
.admin-modern-sidebar #dropdown-1 > li > a {
  padding: 6px 10px !important;
  font-size: 13px;
}
.admin-modern-sidebar #dropdown-1 > li > a.travar-tela::before {
  content: none;
}

/* Offset do conteúdo para a nova largura da sidebar (substitui admin.css:212-215).
   `.admin-modern-sidebar` (no wrapper .compact-light-sidebar) e `.content-inner.compact`
   são irmãos diretos dentro de `.page-content` — ver menu.php. */
.admin-modern-sidebar ~ .content-inner.compact {
  margin-left: var(--am-sidebar-width) !important;
  width: calc(100% - var(--am-sidebar-width)) !important;
}

/* ---------- Esconder/mostrar (botão hamburguer do topbar, #toggle-btn) ----------
   O JS existente (vendor) só alterna a classe `.shrinked` em `.side-navbar` —
   nenhum JS novo foi criado. O design novo não tem um modo "só ícone" que
   caiba bem (os rótulos são essenciais), então em vez de encolher para uma
   barra de 90px como antes, a sidebar inteira esconde fora da tela. */
.admin-modern-sidebar {
  transition: width .2s ease, min-width .2s ease, max-width .2s ease;
}
.admin-modern-sidebar:has(> .side-navbar.shrinked) {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border-right: none;
}
.admin-modern-sidebar:has(> .side-navbar.shrinked) ~ .content-inner.compact {
  margin-left: 0 !important;
  width: 100% !important;
  transition: margin-left .2s ease, width .2s ease;
}

/* #toggle-btn agora mora dentro da sidebar (.am-toggle, mais abaixo) — não
   no topbar. Ver docs/admin-redesign.md. */

/* ---------- Mobile (≤576px, mesmo limite que o JS usa pra fechar o menu
   ao clicar fora — ver admin.js): a sidebar e o conteúdo são irmãos num
   flex row (menu.php), então por padrão a sidebar aberta *empurra* o
   conteúdo — nessa largura de tela isso não deixa quase nada de espaço.
   Aqui ela sai do fluxo (position:fixed) e passa a flutuar por cima,
   como uma gaveta, sem afetar a largura do conteúdo. */
@media (max-width: 576px) {
  .admin-modern-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    box-shadow: var(--am-shadow-pop);
  }
  .admin-modern-sidebar ~ .content-inner.compact {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ---------- Layout em coluna (cabeçalho fixo + lista rolável + rodapé fixo) ---------- */
.admin-modern-sidebar > .side-navbar {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden !important;
}
.admin-modern-sidebar > .side-navbar > ul.list-unstyled {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- Botão de collapse (movido do topbar pra dentro da sidebar) ----------
   position:fixed (não é filho do flex da nav) — assim continua clicável
   mesmo quando a sidebar fecha (width:0). Quando aberta, fica encostado na
   direita do cabeçalho (à direita da logo/nome da empresa); quando fecha,
   "pula" pro canto esquerdo (onde a sidebar estava) — do contrário ficaria
   flutuando longe da borda, no meio do conteúdo. Mesmo #toggle-btn/JS de
   sempre (só o ícone interno e a posição mudaram). */
.am-toggle {
  /* `.side-navbar a{position:relative}` (tema base) tem mais especificidade
     que `.am-toggle` sozinho — !important garante o fixed. */
  position: fixed !important;
  /* Alinhado com o centro vertical de .am-org-mark (medido empiricamente). */
  top: 16px !important;
  /* Aberta: encostado na direita do cabeçalho (largura da sidebar - botão - respiro). */
  left: calc(var(--am-sidebar-width) - 48px) !important;
  z-index: 1001 !important;
  width: 34px;
  height: 34px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* Mesmo par de cores já usado nas pills "ativas" do menu (tint rosa +
     tinta rosa) — dá destaque sem virar um bloco sólido saturado que
     destoa do resto da tela (cartões pastel, gradientes suaves).
     `.compact-light-sidebar > .side-navbar a{color:inherit}` (tema base)
     tem mais especificidade que `.am-toggle` sozinho — !important de novo. */
  background: var(--am-pink-tint);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--am-pink-ink) !important;
  box-shadow: var(--am-shadow-card);
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0;
}
/* Fechada: "left: direita da sidebar" ficaria solto no meio do conteúdo —
   volta pro canto esquerdo, onde a sidebar estava. */
.side-navbar.shrinked .am-toggle {
  left: 14px !important;
}
.am-toggle:hover {
  background: var(--am-pink);
  color: #fff !important;
}
.am-toggle .am-icon {
  width: 17px;
  height: 17px;
  /* Seta de recolher (aberta, aponta pra esquerda) — vira seta de abrir
     (fechada, aponta pra direita) espelhando no eixo X. Ver am-i-arrow. */
  transform: none;
  transition: transform .15s ease;
}
.side-navbar.shrinked .am-toggle .am-icon {
  transform: scaleX(-1);
}
/* Reseta a animação antiga de 3 barras — não é mais usada (ícone SVG estático agora). */
.am-toggle span {
  display: none;
}

/* ---------- Cabeçalho (marca da empresa) ---------- */
.admin-modern-sidebar .am-org {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  /* padding-right reserva espaço pro botão fixo à direita (34px + respiro) */
  padding: 0 50px 14px 10px;
}
.admin-modern-sidebar .am-org-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--am-radius-sm);
  flex: none;
  object-fit: cover;
}
.admin-modern-sidebar .am-org-mark-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--am-pink), var(--am-teal));
  color: #0a0a0c;
  font-family: var(--am-font-display);
  font-weight: 800;
  font-size: 13px;
}
.admin-modern-sidebar .am-org-name {
  flex: 1;
  min-width: 0;
  font-family: var(--am-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--am-sidebar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Rodapé (usuário logado) ---------- */
.admin-modern-sidebar .am-user-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--am-sidebar-line);
  margin: 8px -10px -12px;
  padding: 10px;
}
.admin-modern-sidebar .am-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}
.admin-modern-sidebar .am-user-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--am-teal-tint);
  color: var(--am-teal-ink);
  font-family: var(--am-font-display);
  font-weight: 700;
  font-size: 11px;
}
.admin-modern-sidebar .am-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.35;
}
.admin-modern-sidebar .am-user-name {
  display: block;
  width: 100%;
  text-align: left !important;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--am-sidebar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-modern-sidebar .am-user-role {
  display: block;
  width: 100%;
  text-align: left !important;
  font-size: 11px;
  color: var(--am-sidebar-ink-dim);
}
.admin-modern-sidebar .am-user-signout {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: var(--am-radius-sm);
  color: var(--am-sidebar-ink-dim) !important;
}
.admin-modern-sidebar .am-user-signout:hover {
  background: var(--am-sidebar-hover);
  color: var(--am-sidebar-ink) !important;
}

/* ==========================================================================
   Topbar (barra_topo.php) — avatar do usuário.
   Mesmo padrão de fallback do rodapé da sidebar (.am-user-avatar-fallback):
   se ss()['imagem'] apontar pra uma URL que não carrega, o <img> some e dá
   lugar a um círculo com as iniciais, em vez do ícone de imagem quebrada.
   ========================================================================== */
.am-topbar-avatar-fallback {
  /* `nav.navbar .nav-item>a span{position:absolute;top:20px;right:10px;
     border:3px solid #fff}` (tema base) é a regra do badge de notificação
     (bolinha no canto de um ícone) — como esse fallback também é um <span>
     filho direto de um <a> dentro de .nav-item, ele "herdava" esse
     posicionamento sem querer, cortado no canto em vez de centralizado.
     Precisa voltar a ser um elemento normal no fluxo. */
  position: static !important;
  border: none !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  /* inline-flex (não flex): o <img> original é inline e se centraliza
     verticalmente pela line-height do link (igual o ícone de sino ao lado);
     um <span> display:flex vira nível bloco e ignora essa centralização —
     inline-flex resolve isso sem perder a centralização interna do texto.
     SEM !important de propósito: o onerror inline (barra_topo.php) alterna
     entre style="display:none" (estado normal, foto carregou) e
     style="display:inline-flex" (fallback) no próprio elemento — como os
     dois valores batem exatamente com o que teria sido herdado daqui, não
     há conflito de especificidade. Um !important aqui venceria o
     "display:none" também, deixando o fallback sempre visível por cima da
     foto real. */
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: var(--am-teal-tint);
  color: var(--am-teal-ink);
  font-family: var(--am-font-display);
  font-weight: 700;
}
/* Avatar pequeno (gatilho do dropdown na topbar) — mesmo tamanho de
   `nav.navbar .avatar` no tema base (40x40). */
a#user .am-topbar-avatar-fallback {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
/* Avatar grande (cabeçalho "Bem-vindo" dentro do dropdown aberto) — mesmo
   tamanho de `nav.navbar .user-size .welcome img` no tema base (80x80). */
.am-topbar-avatar-fallback-lg {
  /* Bloco, não inline — diferente do avatar pequeno: o <img> original aqui
     já é display:block (tema base) e se centraliza por margin:auto, que só
     funciona em elementos de bloco. O onerror (barra_topo.php) já seta
     style="display:flex" pra esse, batendo com essa regra. */
  display: flex;
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
  font-size: 24px;
}