/* ═══════════════════════════════════════════════════════════════════════════
   A BARRA INFERIOR DO APLICATIVO

   Só existe dentro da casca (o layout só renderiza a partial lá). O motivo
   está em AplicativoNavegacaoHelper: num aparelho de mão toda a navegação do
   SGP estava no topo, e a zona do polegar estava vazia.

   TRÊS COISAS QUE ESTE ARQUIVO RESOLVE E QUE SÓ APARECEM NO APARELHO:

   1. `env(safe-area-inset-bottom)` — sem isso a barra fica embaixo do risco
      do gesto de sistema, e o dedo toca no Android em vez de no SGP.
   2. `min-height: 3.25rem` no item — 52px é o alvo mínimo de toque; o menu
      lateral tinha alvos de 32px, medidos.
   3. `padding-bottom` no corpo da aplicação, senão o último item de qualquer
      lista fica para sempre debaixo da barra.
   ═══════════════════════════════════════════════════════════════════════════ */

.barra-app {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--cor-fundo-elevado) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--cor-borda);
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* A barra é cromo: ela não é impressa nem entra em captura de tela longa. */
  print-color-adjust: exact;
}

@media print { .barra-app { display: none; } }

.barra-app__lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.barra-app__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 3.25rem;
  width: 100%;
  padding: 6px 2px 4px;
  border: 0;
  background: none;
  color: var(--cor-texto-suave);
  font: inherit;
  font-size: var(--texto-2xs);
  text-decoration: none;
  cursor: pointer;
  /* O realce de toque do Android pinta um retângulo cinza sobre o item; o
     estado ativo abaixo já diz o que foi tocado, e com a cor certa. */
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease;
}

.barra-app__item:hover { color: var(--cor-texto); }

.barra-app__item--ativo { color: var(--cor-acao); font-weight: 600; }

/* O traço em cima do destino ativo — a mesma gramática da barra lateral, que
   marca o item ativo com uma faixa, e não com fundo cheio. */
.barra-app__item--ativo::before {
  content: "";
  position: absolute;
  margin-top: -6px;
  width: 1.75rem;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--cor-acao);
}

.barra-app__item:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: -3px;
  border-radius: var(--raio-md, 8px);
}

.barra-app__icone { display: block; line-height: 0; }
.barra-app__icone svg { width: 22px; height: 22px; }
.barra-app__rotulo { line-height: 1.1; }

/* ── o botão de ação rápida ────────────────────────────────────────────────
   Fica ACIMA da barra, à direita: no aparelho o polegar chega ali sem cobrir
   o conteúdo, e ele não disputa espaço com os cinco destinos. */

.barra-app__mais {
  position: absolute;
  right: 16px;
  bottom: calc(100% + 14px);
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--cor-acao);
  color: var(--cor-acao-contraste);
  box-shadow: 0 6px 20px rgba(14, 151, 190, .35), 0 2px 6px rgba(0, 0, 0, .18);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease;
}

.barra-app__mais svg { width: 24px; height: 24px; }
.barra-app__mais:active { transform: scale(.94); }
.barra-app__mais[aria-expanded="true"] { transform: rotate(45deg); }

/* `[hidden]` VENCE A CLASSE — e não vencia.
   O atributo `hidden` do HTML é `display: none` na folha do navegador, que
   perde para QUALQUER regra de classe com `display`. Sem esta linha o menu de
   ações nascia aberto por cima da lista, em toda tela — flagrado na primeira
   medição depois de escrever a barra. */
.barra-app__acoes[hidden] { display: none; }

.barra-app__acoes {
  position: absolute;
  right: 16px;
  bottom: calc(100% + 5.25rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.barra-app__acao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: 2.75rem;
  border-radius: 999px;
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  color: var(--cor-texto);
  font-size: var(--texto-md);
  font-weight: 600;
  text-decoration: none;
  /* Cada ação entra escalonada, de baixo para cima — o mesmo movimento do
     botão do aplicativo nativo, que a casca tinha perdido. */
  animation: barra-app-sobe .18s cubic-bezier(.2, .8, .2, 1) both;
}

.barra-app__acao:nth-child(2) { animation-delay: .04s; }
.barra-app__acao:nth-child(3) { animation-delay: .08s; }
.barra-app__acao-icone { line-height: 0; color: var(--cor-acao); }
.barra-app__acao-icone svg { width: 18px; height: 18px; }

@keyframes barra-app-sobe {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-app__acao { animation: none; }
  .barra-app__mais, .barra-app__item { transition: none; }
}

/* ── o corpo cede o espaço da barra ───────────────────────────────────────
   Sem isto o último item de toda lista nasce debaixo da barra e não há
   rolagem que o alcance. */

.corpo-aplicacao--com-barra-app .conteudo {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
}