/* ==========================================================================
   STHEFANY — gaveta de navegação
   gaveta.css · v0.11.0
   --------------------------------------------------------------------------
   Um só painel, dois comportamentos.

   No desktop entra pela esquerda, colada na altura toda: é gaveta.
   Abaixo de 60rem sobe de baixo, com cantos arredondados no topo e apoio de
   arraste: é folha de aplicativo, e para no limite da barra de abas.

   Um painel só evita a duplicação clássica — menu de desktop e menu de
   celular com listas que envelhecem em ritmos diferentes.
   ========================================================================== */

.sp-gaveta__fundo {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 3, 3, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sp-transicao);
}
.sp-gaveta__fundo[data-aberto="sim"] { opacity: 1; pointer-events: auto; }

.sp-gaveta {
  position: fixed;
  z-index: 71;
  display: flex;
  flex-direction: column;
  background: var(--sp-fundo);
  color: var(--sp-texto);
  --sp-tinta:       var(--sp-texto);
  --sp-tinta-2:     var(--sp-texto-2);
  --sp-tinta-3:     var(--sp-texto-3);
  --sp-linha-clara: var(--sp-linha);
  --sp-acento-texto: var(--sp-acento-claro);
  visibility: hidden;
  transition: transform var(--sp-transicao), visibility var(--sp-transicao);
}
.sp-gaveta[data-aberto="sim"] { visibility: visible; transform: none; }

/* --- desktop: entra pela esquerda ---------------------------------------- */

@media (min-width: 60.0625rem) {
  .sp-gaveta {
    inset: 0 auto 0 0;
    width: min(27rem, 92vw);
    padding: var(--sp-e-6) var(--sp-e-7) var(--sp-e-7);
    border-inline-end: 1px solid var(--sp-linha);
    transform: translateX(-100%);
    overflow-y: auto;
  }
}

/* --- topo do painel ------------------------------------------------------- */

.sp-gaveta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-e-4);
  margin-block-end: var(--sp-e-7);
}

.sp-gaveta__marca { color: var(--sp-texto); line-height: 0; }
.sp-gaveta__marca svg { height: 2.75rem; width: auto; }

/* Círculo, e `flex: 0 0 auto`.

   O raio: até a 0.78.3 este botão era um quadrado arredondado, e ele era o
   único assim no projeto — o visor de fotos, o painel de filtros e o overlay
   de busca já usam círculo para controle que é só ícone. Quando a lupa entrou
   ao lado dele, o par ficou com duas formas diferentes lado a lado e a
   incoerência ficou impossível de não ver. O errado era ele.

   O `flex`: ao envolver os dois botões num contêiner flex eu não travei o
   encolhimento, e o fechar apertou — virou um oval mais estreito que a lupa.
   Botão de ícone nunca deve encolher: a área de toque é o produto. */
.sp-gaveta__fechar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--sp-linha);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 0;
  cursor: pointer;
  transition: border-color var(--sp-transicao), background var(--sp-transicao);
}
.sp-gaveta__fechar:hover {
  border-color: var(--sp-texto);
  background: rgba(255, 255, 255, .06);
}

/* --- listas --------------------------------------------------------------- */

/* --- ações do topo ---------------------------------------------------------
   Buscar e fechar, lado a lado. A busca era um `<form>` com campo até a
   0.78.2, e saiu por dois motivos.

   Conceito: digitar aqui para digitar de novo no overlay é o mesmo campo duas
   vezes. Na 0.78.3 saiu também o rótulo — a lupa no alto de um painel é
   convenção conhecida, e ali ela competia com sete links nomeados.

   Mecânica, que foi o que quebrou: a gaveta torna `inert` tudo que é irmão
   dela, e o `<dialog>` do overlay é irmão. Ele abria inerte — nada respondia e
   só o Esc saía. A gaveta já fecha sozinha ao clique em qualquer `<a>` dela,
   então o link resolve sem código novo. */
.sp-gaveta__acoes {
  display: flex;
  align-items: center;
  gap: var(--sp-e-3);
}

/* Mesma caixa do fechar: são dois ícones vizinhos, e tamanhos diferentes ali
   leem como erro de alinhamento. */
.sp-gaveta__buscar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--sp-linha);
  border-radius: 50%;
  color: var(--sp-texto-2);
  font-size: 1.25rem;
  line-height: 0;
  transition: border-color var(--sp-transicao), color var(--sp-transicao),
              background var(--sp-transicao);
}

.sp-gaveta__buscar:hover,
.sp-gaveta__buscar:focus-visible {
  border-color: var(--sp-acento-texto);
  color: var(--sp-texto);
  background: rgba(255, 255, 255, .06);
}

.sp-gaveta__lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-gaveta__link {
  display: flex;
  align-items: center;
  gap: var(--sp-e-4);
  padding-block: var(--sp-e-4);
  border-block-end: 1px solid var(--sp-linha);
  font-family: var(--sp-fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--sp-texto-2);
  transition: color var(--sp-transicao), gap var(--sp-transicao);
}
.sp-gaveta__link:hover { color: var(--sp-texto); gap: var(--sp-e-5); }
.sp-gaveta__link[aria-current="page"] { color: var(--sp-acento-texto); }

.sp-gaveta__link i {
  font-size: 1.375rem;
  color: var(--sp-texto-3);
  transition: color var(--sp-transicao);
}
.sp-gaveta__link:hover i { color: var(--sp-acento-texto); }

.sp-gaveta__secundarias {
  margin-block-start: var(--sp-e-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-3);
}

.sp-gaveta__secundaria {
  display: flex;
  align-items: center;
  gap: var(--sp-e-3);
  font-size: var(--sp-t-peq);
  text-decoration: none;
  color: var(--sp-texto-3);
  transition: color var(--sp-transicao);
}
.sp-gaveta__secundaria:hover { color: var(--sp-texto); }
.sp-gaveta__secundaria i { font-size: 1.125rem; }

.sp-gaveta__rodape {
  margin-block-start: auto;
  padding-block-start: var(--sp-e-6);
}

.sp-gaveta__acao { width: 100%; justify-content: center; }

.sp-gaveta__redes {
  display: flex;
  gap: var(--sp-e-4);
  margin-block-start: var(--sp-e-5);
}

.sp-gaveta__rede {
  color: var(--sp-texto-3);
  font-size: 1.375rem;
  line-height: 0;
  transition: color var(--sp-transicao);
}
.sp-gaveta__rede:hover { color: var(--sp-texto); }


/* --- celular e tablet: sobe de baixo --------------------------------------
   Este bloco fica no fim do arquivo de propósito: ele sobrescreve as regras
   base acima, e com especificidade igual quem vem depois vence. Na versão
   anterior ele estava antes e não valia nada. */

@media (max-width: 60rem) {
  .sp-gaveta {
    inset: auto 0 0 0;
    max-height: 82svh;
    padding: var(--sp-e-4) var(--sp-margem)
             calc(var(--sp-abas) + env(safe-area-inset-bottom, 0px) + var(--sp-e-5));
    border-radius: 22px 22px 0 0;
    border-block-start: 1px solid var(--sp-linha);
    transform: translateY(100%);
    overflow-y: auto;
  }

  /* Puxador. Não arrasta — é a affordance que diz que o painel veio de baixo
     e fecha para baixo. Substitui o topo com marca e botão de fechar, que é
     linguagem de gaveta, não de folha. */
  .sp-gaveta::before {
    content: "";
    flex: 0 0 auto;
    width: 2.75rem;
    height: 4px;
    margin: var(--sp-e-2) auto var(--sp-e-6);
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
  }

  /* O topo perde a marca e o fechar — a marca já está no cabeçalho atrás e o
     fechar é a alça de arrastar — mas NÃO some inteiro, porque a lupa está
     nele desde a 0.78.3. No celular a lupa do cabeçalho fica escondida, então
     esta é a única porta visível da busca: esconder o topo aqui a fecharia
     justamente onde ela mais importa. Ela vai para a direita, alinhada com a
     alça. */
  .sp-gaveta__topo {
    justify-content: flex-end;
    margin-block-end: var(--sp-e-5);
  }
  .sp-gaveta__marca,
  .sp-gaveta__fechar { display: none; }

  .sp-gaveta__link { font-size: 1.375rem; padding-block: var(--sp-e-4); }

  .sp-gaveta__rodape { margin-block-start: var(--sp-e-6); }
}

/* --- item da gaveta --------------------------------------------------------
   Credenciado, o item deixa de convidar e passa a informar quem está logado e
   como sair — de qualquer página, que é o ponto de a sessão existir. */
.sp-gaveta__sessao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-e-3);
}

.sp-gaveta__quem {
  display: block;
  margin-block-start: 2px;
  color: var(--sp-acento-texto);
  font-size: var(--sp-t-mini);
  font-weight: 500;
}

.sp-gaveta__sair {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-e-2);
  padding: var(--sp-e-2) var(--sp-e-3);
  border: 1px solid var(--sp-linha);
  border-radius: var(--sp-raio-botao);
  background: none;
  color: var(--sp-texto-2);
  font-family: inherit;
  font-size: var(--sp-t-mini);
  cursor: pointer;
  transition: color var(--sp-transicao), border-color var(--sp-transicao);
}

.sp-gaveta__sair:hover { color: var(--sp-texto); border-color: currentColor; }