/* ==========================================================================
   Acpt — assets/css/drawer.css
   O MENU DO FONE: o botao que o abre (hamburguer), o painel que desliza, o veu
   atras dele (scrim), a lista de links e o rodape (acoes + bloco de perfil).

   POR QUE ESTE ARQUIVO EXISTE
   Estas mesmas regras estavam INLINE e repetidas em 9 HTML (app, agenda,
   atendimentos, clientes, config, lembretes, super, index, login), com QUATRO
   variacoes diferentes entre si. Todo conserto de menu tinha que ser feito 9
   vezes e o bug voltava na tela esquecida. Agora e' um arquivo so'.

   O que NAO esta' aqui: a nav de DESKTOP (`.nav__links`, `.nav__link`, o
   `.nav__theme` e a barra de 2px do item ativo) continua em app.css — este
   arquivo so' cuida do menu do fone e do que vive dentro dele. Os rotulos da
   barra deixaram de ser uma pilula segmentada em 20/09 (o dono reprovou o
   "pill grosso mint"); a UNICA regra deste arquivo que serve o desktop e' a
   secao 6/6.1 abaixo (o menu vira barra: `position:static`, gaps e o respiro
   entre os grupos).

   ORDEM E ESPECIFICIDADE
   Este arquivo entra DEPOIS de app.css, entao regra de mesma especificidade
   aqui vence. Mesmo assim as regras do drawer usam `.nav-drawer.open …`
   (0,3,0) de proposito: e' a mesma defesa que existia antes contra as regras
   que ainda moram no <style> de cada pagina.

   ESTRUTURA (o HTML vive em cada .html; o painel do sino e' criado pelo
   assets/js/sino.js e pendurado no <body>, por isso nao aparece aqui):

     <div class="nav-drawer" id="drawer">
       <div class="nav-drawer__backdrop" id="drawer-backdrop"></div>
       <div class="nav-drawer__panel">
         <div class="nav-drawer__top">  … logo Acpt …                </div>
         <div class="nav__links">       … um <a class="nav__link"> por tela … </div>
         <div class="nav__meta">
           <div class="nav__acoes">     … sino + tema …              </div>
           <div class="nav__perfil">    … #user-badge + Sair …       </div>
         </div>
       </div>
     </div>

   Depois de 48rem (768px) o `.nav-drawer` perde o position:fixed e volta a ser
   a barra de sempre: sem painel, sem veu, com os links na horizontal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. O BOTAO DO MENU (hamburguer)
   O tamanho de 44px no fone vem de app.css (`button.hamburger`, 0,1,1); aqui
   fica so' a forma. O z-index 60 e' o que mantem o X acima do painel (50).
   -------------------------------------------------------------------------- */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 60;
  position: relative;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 200ms var(--ease), opacity 160ms var(--ease);
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   2. O VEU (scrim) E O PAINEL
   O veu e' `inset:0` dentro do `.nav-drawer` (position:fixed; inset:0), entao
   ele cobre a JANELA inteira — largura e altura medidas, nao "100vw" chutado.
   -------------------------------------------------------------------------- */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;

  /* --- icones dos links (ver secao 4) --- */
  --ico-painel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.6' height='7.6' rx='1.8'/%3E%3Crect x='13.4' y='3' width='7.6' height='7.6' rx='1.8'/%3E%3Crect x='3' y='13.4' width='7.6' height='7.6' rx='1.8'/%3E%3Crect x='13.4' y='13.4' width='7.6' height='7.6' rx='1.8'/%3E%3C/svg%3E");
  --ico-agenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.6'/%3E%3Cpath d='M8 3v4M16 3v4M3 10.5h18'/%3E%3C/svg%3E");
  --ico-atendimentos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.5h10.5M9.5 12h10.5M9.5 17.5h10.5'/%3E%3Cpath d='M3.5 6.2l1.3 1.3 2.3-2.5'/%3E%3Cpath d='M3.5 11.7l1.3 1.3 2.3-2.5'/%3E%3Cpath d='M3.5 17.2l1.3 1.3 2.3-2.5'/%3E%3C/svg%3E");
  --ico-lembretes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
  --ico-clientes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7.5' r='3.8'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.6a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
  --ico-config: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3'/%3E%3Cpath d='M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
  --ico-super: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  /* Rede de seguranca: link que nao casa com nenhum href conhecido (o "Super"
     que o JS pendura na tela do dono, por exemplo) ganha um marcador neutro em
     vez de um buraco de 20px. */
  --ico-padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3C/svg%3E");
}

.nav-drawer.open { pointer-events: auto; }

.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 220ms var(--ease);
  /* Desfoque leve: o suficiente para a pagina virar fundo sem apagar o
     contexto. Fica aqui (e nao so' no .open) para o veu nao "nascer" nitido
     e desfocado no meio da animacao. */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.nav-drawer.open .nav-drawer__backdrop { opacity: 1; }

.nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  /* Nao e' 100% da tela: sobra uma faixa de pagina (com veu) a esquerda, que e'
     o que da' a leitura de painel deslizante em vez de pagina trocada. */
  width: min(20rem, 84vw);
  padding: var(--space-4);
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform 260ms var(--ease);
}

.nav-drawer.open .nav-drawer__panel { transform: translateX(0); }

/* --------------------------------------------------------------------------
   3. O RODAPE (`.nav__meta`) — DOIS GRUPOS, NAO QUATRO BOTOES SOLTOS
   `.nav__acoes` = sino + tema, um controle so'. `.nav__perfil` = avatar +
   nome + Sair, uma caixa so'. Sem isso o rodape era uma fila de quatro itens
   sem relacao entre si.
   -------------------------------------------------------------------------- */
.nav__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.nav__acoes,
.nav__perfil {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.nav-drawer .nav__meta { gap: var(--space-3); }

/* --------------------------------------------------------------------------
   4. O CHIP DO USUARIO (`#user-badge`)
   Quem escreve dentro dele e' o script inline de cada pagina (auth.me() →
   avatar + nome). Aqui ele deixa de ser um <span> com estilo inline e vira um
   bloco de perfil. O `display:none` inicial e' o mesmo de antes: o JS troca
   para inline-flex quando sabe quem entrou.
   -------------------------------------------------------------------------- */
#user-badge {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* O chip virou <button> em 20/09 (card p1-nav-perfil-menu-nao-config): o
     clique nele agora ABRE O MENU de perfil em vez de navegar para
     config.html. Um <button> traz o visual do sistema (borda 2px, fundo do
     botao e a fonte do sistema) que o <span> nao tinha — as tres linhas abaixo
     devolvem exatamente o desenho anterior. O `font-family: inherit` e' a que
     importa: sem ele o NOME DO USUARIO sairia em Arial, e nao na fonte do app. */
  border: 0;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

#user-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O avatar e' montado pelo JS com style inline (width/height 24px), entao a
   medida daqui precisa de `!important` para valer. */
#user-badge img {
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 999px !important;
  object-fit: cover;
  flex: 0 0 auto;
}

/* Sem foto (`avatar_url` vazio) o JS nao cria <img>: o circulo com o glifo
   entra no lugar, para o bloco de perfil nao ficar com o nome solto. O MESMO
   glifo serve o avatar do MENU de perfil (`.perfil__avatar`, secao 7): o
   seletor e' compartilhado de proposito — o data URI do SVG teria que ser
   copiado, e duas copias da mesma constante divergem. O tamanho do menu e' o
   unico ajuste (36px contra 28px), e vive na secao 7. */
#user-badge:not(:has(img))::before,
.perfil__avatar:not(:has(img))::before {
  content: "";
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--brand) 35%, transparent);
  background-color: color-mix(in oklch, var(--brand) 16%, var(--surface-2));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.9'/%3E%3Cpath d='M4.6 20.4a7.6 7.6 0 0 1 14.8 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.05rem;
  /* O glifo acompanha a cor da marca nos dois temas (data URI nao aceita
     currentColor): o filtro troca o preto do SVG pelo ciano do tema claro. */
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   5. FONE (ate' 48rem/768px): o menu e' um painel deslizante
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  /* Topo do painel: a logo Acpt inteira. O `padding-right` e' o espaco do X,
     que vive no cabecalho (z-index 60) e por isso cai POR CIMA do painel. */
  .nav-drawer__top {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding-right: 3.5rem;
    margin-bottom: var(--space-3);
  }

  /* No painel a logo e' menor que a do cabecalho: em 360px a de 2.75rem
     (243px de largura) nao caberia ao lado do espaco do X. */
  .nav-drawer__top .brand__logo {
    height: 2.25rem;
  }

  .nav-drawer.open .nav-drawer__panel {
    padding-top: var(--space-3);
    padding-bottom: var(--space-4);
    overflow: hidden;
  }

  /* A lista de links e' a unica parte elastica: ela rola, o rodape fica preso.
     `min-height:0` e' obrigatorio — sem ele o minimo automatico do item de
     flex e' o tamanho do conteudo e a lista empurra o rodape para fora. */
  .nav-drawer.open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: var(--space-3);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Uma linha inteira por link: 44px de alvo, icone a esquerda. */
  .nav-drawer.open .nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: var(--fs-md);
    font-weight: 500;
  }

  /* Qual icone cada link recebe. O casamento e' pelo `href`, nao pela posicao
     nem pelo texto: a lista muda de pagina para pagina (o `aria-current` anda)
     e o "Super" e' pendurado pelo JS so' na tela do dono. Quem nao casar com
     nada fica com o `--ico-padrao`, que e' o fallback la' em cima. */
  .nav-drawer.open .nav__link[href$="app.html"]          { --nav-ico: var(--ico-painel); }
  .nav-drawer.open .nav__link[href$="agenda.html"]       { --nav-ico: var(--ico-agenda); }
  .nav-drawer.open .nav__link[href$="atendimentos.html"] { --nav-ico: var(--ico-atendimentos); }
  .nav-drawer.open .nav__link[href$="lembretes.html"]    { --nav-ico: var(--ico-lembretes); }
  .nav-drawer.open .nav__link[href$="clientes.html"]     { --nav-ico: var(--ico-clientes); }
  .nav-drawer.open .nav__link[href$="config.html"]       { --nav-ico: var(--ico-config); }
  .nav-drawer.open .nav__link[href$="super.html"]        { --nav-ico: var(--ico-super); }

  .nav-drawer.open .nav__link::before {
    content: "";
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask: var(--nav-ico, var(--ico-padrao)) center / contain no-repeat;
    mask: var(--nav-ico, var(--ico-padrao)) center / contain no-repeat;
  }

  /* ATIVO e HOVER vestem o MESMO par solido da pilula do desktop: fundo da
     marca + tinta da marca. `--brand-ink` e' escura no tema escuro e clara no
     claro, entao o rotulo nunca fica na cor do fundo. O tingido de 13% com
     texto `var(--brand)` era mint sobre mint no tema escuro — o "pill vazio"
     do print. O icone e' `::before` com `background-color: currentColor`,
     entao ele acompanha sozinho. Hover igual ao ativo e' de proposito: foi o
     que o humano pediu, nada de um terceiro estado. */
  @media (hover: hover) and (pointer: fine) {
    /* Guardado como a pilula do desktop: no dedo nao existe hover e o toque
       nao pode deixar uma pilula presa depois de navegar. */
    .nav-drawer.open .nav__link:hover {
      color: var(--brand-ink);
      background: var(--brand);
      font-weight: 600;
    }
  }

  /* O destaque de lugar NUNCA depende de hover: quem marca e' o aria-current.
     Vem DEPOIS do bloco de hover de proposito — no empate de especificidade
     (0,4,0 nos dois) quem vence e' a ordem no arquivo, e o lugar manda. */
  .nav-drawer.open .nav__link[aria-current="page"] {
    color: var(--brand-ink);
    background: var(--brand);
    font-weight: 600;
  }

  .nav-drawer.open .nav__link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* Rodape: sino + tema em cima (um controle so'), bloco de perfil embaixo
     (o lugar natural do dedo). O pe' respeita a area segura do aparelho. */
  .nav-drawer.open .nav__meta {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding-top: var(--space-4);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--border);
  }

  /* O rodape so' desce para o fim quando existe lista de links para empurrar.
     Nas telas sem lista (index, login) ele e' o menu inteiro e fica no topo. */
  .nav-drawer.open .nav__links ~ .nav__meta { margin-top: auto; }

  .nav-drawer.open .nav__acoes {
    display: inline-flex;
    align-self: flex-start;
    gap: var(--space-1);
    padding: var(--space-1);
    background: color-mix(in oklch, var(--surface-2) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  /* Dentro do grupo os botoes perdem borda e sombra: quem desenha a caixa e' o
     grupo, senao viram dois botoes com borda dentro de uma caixa com borda. */
  .nav-drawer.open .nav__acoes .btn {
    border: 0;
    border-radius: 999px;
    box-shadow: none;
  }

  .nav-drawer.open .nav__perfil {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    background: color-mix(in oklch, var(--surface-2) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  /* O card do perfil e' uma ROW (avatar | nome | Sair) centrada na vertical. Sem
     o `align-items: center` os tres esticavam para a altura do mais alto.

     O `max-width: 100%` e' a segunda metade do mesmo conserto, e sem ele o Sair
     continua CORTADO: com nome longo a row pedia 320.6px dentro de um `.nav__meta`
     de 287 (chip 249.7 + gap 8 + Sair 48.8 + padding 12 + borda 2 = 321), o card
     transbordava 24.6px para fora da area de conteudo do painel e o
     `overflow: hidden` do painel cortava o Sair na borda — medido: `sair.r` 398.6
     contra 374 do conteudo e 390 do proprio painel. Era ESSE corte que se lia
     como "Sair flutuando por cima da borda", e nao a caixa de 8px a mais. Com o
     card limitado a largura do grupo, quem cede e' o chip, que ja' corta o nome
     com reticencias (medido: chip 249.7 -> 216.2, Sair passa a sobrar 9px ate a
     borda em vez de faltar 24.6). */
  .nav-drawer.open .nav__perfil {
    align-items: center;
    max-width: 100%;
  }

  /* A MESMA regra que o `.nav__acoes` ja tinha, e que o grupo do perfil nunca
     ganhou. Medido no 105, drawer aberto a 390: o Sair pintava o proprio fundo
     (`oklch(0.15 0.01 260 / 0.55)`) com borda e raio 6px DENTRO de um card que ja
     pinta fundo (`/0.7`), borda e raio 12px — caixa dentro de caixa, quase na
     mesma cor — e media 44px contra 36px do chip da mesma row. Sao esses 8px e
     esse contorno que se leem como "flutuando/overlay" sem nada estar em
     `position:absolute` (o `position` ja estava certo e nao foi tocado). Quem
     desenha a caixa e' o card; o botao so' ocupa a altura do chip. */
  .nav-drawer.open .nav__perfil .btn {
    height: 2.25rem;
    min-height: 0;
    padding-block: 0;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    background: transparent;
  }

  .nav-drawer.open .nav__perfil #user-badge {
    flex: 1 1 auto;
    font-size: var(--fs-md);
  }

  .nav-drawer.open .nav__perfil #user-badge img,
  .nav-drawer.open .nav__perfil #user-badge:not(:has(img))::before {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  /* Telas sem lista de links (index, login): o `.nav__meta` E' o menu, entao
     ele e' uma coluna de botoes de largura cheia, no topo. */
  .nav-drawer.open .nav-drawer__panel > .nav__meta:first-child {
    align-items: stretch;
    gap: var(--space-2);
  }

  .nav-drawer.open .nav-drawer__panel > .nav__meta:first-child .btn {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   6. DESKTOP (a partir de 48.0625rem/769px): o menu some e vira a barra
   -------------------------------------------------------------------------- */
@media (min-width: 48.0625rem) {
  .hamburger { display: none; }

  .nav-drawer {
    position: static;
    inset: auto;
    z-index: auto;
    pointer-events: auto;
  }

  .nav-drawer__backdrop { display: none; }

  .nav-drawer__panel {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    flex-direction: row;
    align-items: center;
    /* O respiro entre o pill e as acoes entra na secao 6.1: ele so' vale onde
       CABE na mesma linha. */
    gap: 0;
    overflow: visible;
  }

  /* Quem mostra a logo na barra e' o cabecalho. */
  .nav-drawer__top { display: none; }

  /* O chip nao pode encostar nos botoes: medido a 390px era 8px, que o humano
     leu como "colado". */
  .navbar .nav-drawer .nav__meta { gap: var(--space-3); }

  /* 12px e' o numero que o dono pediu para a direita da barra (13:21Z: "gap
     12") — antes era 8px aqui, dentro do grupo. Vale so' no DESKTOP: o pe' do
     menu do fone tem os proprios gaps no bloco `.nav-drawer.open` acima. */
  .nav-drawer .nav__acoes,
  .nav-drawer .nav__perfil { gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   6.1 O RESPIRO ENTRE O PILL DOS LINKS E AS ACOES — SO' ONDE ELE CABE
   --------------------------------------------------------------------------
   Queixa do dono (13:03Z): "nav COLADO no sino, horrível, menu amador, parece
   toolbar de plugin". No desktop o painel e' UMA LINHA com dois filhos:
   `.nav__links` (o pill) e `.nav__meta` (sino + tema + avatar + Sair). Com
   `gap:0` o pill terminava exatamente na borda esquerda do sino — medido
   0.0px a 1280x800 — e como o sino e o tema sao circulos com o MESMO fundo
   translucido do pill, os tres liam como uma barra de ferramentas unica.

   POR QUE O RESPIRO COMECA SO' EM 1280px: os 24px custam largura. Medido numa
   carga limpa (HTML real, logo de verdade, este CSS), altura da barra com uma
   linha = 61px, duas = 117px, tres = 169/173px:

     largura   sem os 24px           com os 24px forcados
     1024      61px (1 linha)        117px (2 linhas)
     1031      117px (2 linhas)      117px (2 linhas)
     1040      117px (2 linhas)      —
     1060      —                     117px (2 linhas)
     1080      61px (1 linha)        117px (2 linhas)
     1100      —                     61px (1 linha)
     1119      61px (1 linha)        61px (1 linha)
     1280      61px (1 linha)        61px (1 linha)

   Ou seja: SEM os 24px a linha so' fecha a partir de 1080px (abaixo disso ela
   ja' quebra sozinha — a 1031 a barra vai a 117px com ou sem respiro, e no CSS
   publicado e' igual: 125px). COM os 24px ela fecha a partir de 1100px. O
   respiro esta' em 1280px por margem, nao por necessidade: nessa faixa a folga
   e' de poucos px (a 1280 a linha termina a ~1.6px do fim) e o chip cresce com
   o nome do usuario. A 1024 e' onde o bloco 769-1024px de app.css deixa o pill
   quebrar por dentro de proposito — nao e' aqui que se mexe nela.
   24px = --space-5, dentro dos 16-24px pedidos. */
@media (min-width: 80rem) {
  .nav-drawer__panel { gap: var(--space-5); }

  /* O respiro depois da logo (o `gap` de 12px do `.container` sozinho fica
     justo com um wordmark ao lado). Fica AQUI, e nao no bloco de 48.0625rem,
     porque largura e' o que escasseia na faixa do notebook: a 1031px com os 7
     links o painel fecha a linha com ~13px de folga, e 12px de padding a mais
     empurrariam a barra para 2 linhas. Acima de 1280px sobra espaco. */
  .nav-drawer__panel { padding-left: var(--space-3); }
}

/* ==========================================================================
   7. O MENU DE PERFIL (`.perfil` + `#perfil-veu`) — o painel do chip
   (card p1-nav-perfil-menu-nao-config)
   ==========================================================================
   Nasceu do pedido do dono (14:18Z): *"clicar no nome (Diego) TA indo pra aba
   Config. Quer profissional: MENU/MODAL."* O painel e' criado por
   `assets/js/nav.js` e pendurado no `<body>` — o MESMO painel serve o desktop
   (onde o chip vive na barra) e o fone (onde ele vive no RODAPE do drawer), com
   a posicao calculada em JS pela mesma mecanica do painel do sino. Por isso
   nada aqui e' `position:absolute` em relacao ao chip: `.perfil` e'
   `position:fixed`, com `left`/`top` em px escritos pelo JS.

   O VE U (`#perfil-veu`) e' o alvo do "clique fora" que fecha o menu — e' o
   pedido literal do dono ("overlay clicado fecha"). Ele NAO escurece nada:
   fundo transparente. Existe para haver um alvo clicavel acima do drawer (50) e
   do X (60) sem roubar o clique do resto da pagina quando o menu esta' fechado
   (fechado ele fica `hidden`, ou seja, `display:none`).

   A FAMILIA VISUAL e' a do painel do sino (mesmo `--surface`, mesma borda de
   1px, mesmo raio): os dois sao paineis flutuantes do mesmo cabecalho, e nao
   podem ler como duas pecas de produtos diferentes.
   ========================================================================== */
#perfil-veu {
  position: fixed;
  inset: 0;
  z-index: 199;      /* abaixo do painel (200), acima do drawer (50) e do X (60) */
  background: transparent;
}

#perfil-veu[hidden] {
  display: none;
}

.perfil {
  position: fixed;
  z-index: 200;      /* a mesma camada do painel do sino: os dois nao se cruzam */
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  max-width: calc(100vw - 1.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* `display: grid` ganha do `[hidden]` do navegador (que e' `display: none` com
   especificidade de folha do usuario): sem esta linha o painel ficaria visivel
   com o atributo `hidden` ligado — o mesmo cuidado que o sino.css toma com
   `.sino__painel--oculto`. */
.perfil[hidden] {
  display: none;
}

/* O painel recebe o foco ao abrir (leitor de tela anuncia o dialogo). O foco e'
   programatico, nao e' navegacao por Tab: anel de foco aqui so' poluiria. */
.perfil:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   7.1 Quem e' quem: avatar + nome + email
   -------------------------------------------------------------------------- */
.perfil__topo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* O `display:flex` NAO e' enfeite: e' a causa raiz do avatar sumido no menu
   (card acpt-modal-perfil, defeitos 1 e 2).

   O circulo sem foto e' o `::before` da regra compartilhada da secao 4, e um
   `::before` de pai em `display:block` nasce `display:inline` — inline NAO
   aceita `width`/`height`, entao o `36px` do glifo era ignorado e o que sobrava
   era a pintura do fundo (tingido de marca + borda mint) numa caixa de largura
   ZERO, cortada pelo `overflow:hidden` do pai. Medido no slot do avatar, tema
   escuro, 390: **283 pixels pintados numa caixa de 2 x 11pt** — uma barra
   vertical mint do lado do nome, e o avatar "sumido". Era UM defeito com duas
   caras, nao dois.

   O chip NAO tem esse problema porque `#user-badge` e' `inline-flex` (o JS poe)
   e no drawer `flex: 1 1 auto`: sendo container flex, o `::before` dele e'
   BLOCKIFICADO e as medidas valem. Aqui o pai tambem vira container flex, pelo
   mesmo motivo — a peca continua UMA so' (mesma regra compartilhada do glifo,
   mesmo `img`), muda so' o tamanho.

   Armadilha para quem for medir de novo: `getComputedStyle(el,'::before').width`
   devolve o valor ESPECIFICADO mesmo quando o pseudo e' inline e a largura nao
   se aplica. Foi isso que quase me fez declarar "o avatar desenha" com o defeito
   de pe'. Prova de avatar e' pixel, nao estilo computado. */
.perfil__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;      /* 48px: o pedido do dono e' 48-56px (o chip do drawer mede 36px) */
  height: 3rem;
  border-radius: 999px;
  overflow: hidden;
}

.perfil__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O circulo sem foto tem o glifo do chip: o seletor esta' compartilhado na
   secao 4, e aqui so' o TAMANHO muda. A proporcao glifo/circulo e' a mesma da
   secao 4 e da regra do drawer (1.05/1.75 = 0.6): 48 x 0.6 = 28.8px. */
.perfil__avatar:not(:has(img))::before {
  width: 3rem;
  height: 3rem;
  background-size: 1.8rem;
}

.perfil__identificacao {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.perfil__nome {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.perfil__email {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   7.2 Empresa e Plano — LEITURA. O Plano nao ganha segunda fonte de verdade:
   o rotulo sai do `plan`/`plan_status` do `me()`, que e' o mesmo campo que
   `config.html` mostra. Editar continua sendo la'.
   -------------------------------------------------------------------------- */
.perfil__dados {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.perfil__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  min-width: 0;
}

.perfil__rotulo {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.perfil__valor {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.perfil__plano {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7.3 As duas acoes: Configuracoes (leva para `config.html`) e Sair.
   44px de altura nos DOIS (o alvo de toque do fone, e o mesmo padrao da barra):
   a regra vale nas duas larguras de proposito — o painel e' o mesmo.
   -------------------------------------------------------------------------- */
.perfil__acoes {
  display: grid;
  gap: var(--space-2);
}

.perfil__acoes .btn {
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
}

/* --------------------------------------------------------------------------
   7.4 UM SAIR SO' NA TELA COM O MENU ABERTO (card acpt-modal-perfil,
   defeito 3) — o dono deixou a escolha e a escolha esta' aqui.
   --------------------------------------------------------------------------
   Das duas saidas que ele ofereceu (o chip de baixo perde o Sair OU o chip
   fecha), fico com a PRIMEIRA: **o Sair do drawer/barra fica invisivel
   enquanto o menu esta' aberto.** Por que:

   1. Nao contradiz uma ordem anterior dele. As 13:14Z a ordem foi "chip SEMPRE
      visivel". Fechar o chip e' exatamente desfazer isso — e o chip e' quem
      ancora o menu (`posicionarMenu()` le' `chip.getBoundingClientRect()`) e
      quem carrega o `aria-expanded` que este CSS usa. Some com a ancora e o
      painel fica pendurado em nada no proximo resize/rotate.
   2. O defeito que ele apontou e' o SAIR duplicado, nao o chip. O conserto
      minimo que mata a duplicata e' esconder a segunda peca duplicada.
   3. `visibility:hidden` e nao `display:none` DE PROPOSITO: `visibility` nao
      mexe no layout, entao o card do perfil nao muda de forma quando o menu
      abre (e o chip, que e' `flex: 1 1 auto`, NAO cresce para ocupar o vao).
      O elemento tambem sai da ordem de foco e do leitor de tela, que e' o que
      interessa: dois botoes "Sair" alcancaveis e' o mesmo defeito para quem
      navega por teclado. Se fosse `display:none` a barra do desktop e o card do
      fone dariam um pulo visivel toda vez que o menu abre.

   O gancho e' o `aria-expanded` do chip, que o `nav.js` ja' mantem em dia
   (`abrirMenu`/`fecharMenu`): nenhuma linha de JS a mais, nenhum estado novo. */
.nav__perfil #user-badge[aria-expanded="true"] ~ .btn {
  visibility: hidden;
}
