/* Navegação inferior (src/shared/hud-navegacao.js): dock flutuante, equilibrada e discreta.
   Unidade visual acima de tudo: seis itens iguais em tamanho e peso; ícones de contorno simples de uma cor.
   A personalidade vem da interface — superfície off-white quente, rosa-salmão como acento, espaçamento,
   grupos, tipografia e estados —, não dos desenhos. Movimento só em cor/fundo/1px/escala, 150–220 ms.
   --hud-nav-reserva: espaço que o conteúdo deixa livre embaixo; outras camadas fixas no rodapé
   (status do Snoopy, barra DEV do foco) sobem por ela. */

.tem-hud-nav {
  /* Paleta derivada do salmão */
  --nav-rosa: var(--color-primary-strong);
  --nav-rosa-claro: var(--color-primary-soft);
  --nav-rosa-suave: rgb(var(--color-primary-rgb) / .12);
  --nav-rosa-leve: rgb(var(--color-primary-rgb) / .07);
  --nav-superficie: rgb(255 253 252 / .84);
  --nav-branco: var(--color-surface);
  --nav-texto: var(--color-text);
  --nav-texto-2: var(--color-text-secondary);
  --nav-borda: var(--color-border);

  --hud-nav-altura: 62px;
  --hud-nav-margem: 12px;
  --hud-nav-base: calc(var(--hud-nav-margem) + env(safe-area-inset-bottom, 0px));
  --hud-nav-reserva: calc(var(--hud-nav-altura) + var(--hud-nav-base) + 16px);
  padding-bottom: var(--hud-nav-reserva);
}

/* Dock. (styles.css dá display: flex a todo <nav>; aqui volta a block.) */
.hud-nav {
  position: fixed; z-index: 30; left: 50%; bottom: var(--hud-nav-base); transform: translateX(-50%);
  display: block; width: min(540px, calc(100% - 20px)); box-sizing: border-box; padding: 6px 8px;
  font: inherit; letter-spacing: normal;
  border: 1px solid var(--nav-borda); border-radius: 26px;
  background: var(--nav-superficie); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgb(var(--color-text-rgb) / .05), 0 14px 34px -12px rgb(var(--color-text-rgb) / .16);
}
/* Detalhe: um fio salmão quase imperceptível no alto, como luz na borda. */
.hud-nav::before {
  content: ""; position: absolute; top: -1px; left: 24%; right: 24%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--color-primary-rgb) / .34), transparent);
}

.hud-nav-lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.hud-nav-lista li { position: relative; flex: 1 1 0; min-width: 0; }
/* Grupos (dia · snoopy · carinho): uma divisória fina que some nas pontas, com um pontinho salmão. */
.hud-nav-lista li.is-novo-grupo { padding-left: 6px; }
.hud-nav-lista li.is-novo-grupo::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 28px; transform: translateY(-50%);
  background: linear-gradient(to bottom, transparent, rgb(var(--color-text-rgb) / .15), transparent);
}
.hud-nav-lista li.is-novo-grupo::after {
  content: ""; position: absolute; left: -1px; top: 50%; width: 3px; height: 3px; border-radius: 50%; transform: translateY(-50%);
  background: var(--nav-rosa-claro);
}

/* Item: cápsula inteira (ícone + rótulo) é a área de toque e o que recebe fundo/estado. */
.hud-nav-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-sizing: border-box; height: calc(var(--hud-nav-altura) - 12px); min-height: 44px; margin: 0 2px; padding: 0 2px;
  border-radius: 18px; color: var(--nav-texto-2); text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
  transition: color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hud-nav-icone { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.hud-nav-icone svg { width: 21px; height: 21px; display: block; }
/* Emoji (ESTILO_ICONES = "emoji"): todos na MESMA escala, numa caixa fixa; nada anima o emoji em si.
   Em repouso um pouco mais baixos (opacidade); hover/ativo trazem para 100%. */
.hud-nav-emoji {
  display: block; width: 24px; height: 24px; font: 21px/24px "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  text-align: center; opacity: .82; transition: opacity .18s ease;
}
.hud-nav-rotulo {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 .66rem/1.1 var(--font-sans); letter-spacing: .015em;
}

/* Hover: cor salmão, fundo suave, 1px acima. */
@media (hover: hover) {
  .hud-nav-item:not([aria-disabled="true"]):hover { color: var(--nav-rosa); background: var(--nav-rosa-leve); transform: translateY(-1px); }
  .hud-nav-item:not([aria-disabled="true"]):hover .hud-nav-rotulo { color: var(--nav-texto); }
  .hud-nav-item:not([aria-disabled="true"]):hover .hud-nav-emoji { opacity: 1; }
}
/* Pressionado: 0.97 e volta. */
.hud-nav-item:not([aria-disabled="true"]):active { transform: scale(.97); transition-duration: .08s; }
.hud-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nav-branco), 0 0 0 3.5px var(--nav-rosa); }

/* Ativo: ícone salmão + fundo salmão suave + rótulo mais forte. Mesmo tamanho de sempre. */
.hud-nav-item[aria-current="page"] {
  color: var(--nav-rosa); background: var(--nav-rosa-suave); box-shadow: inset 0 0 0 1px rgb(var(--color-primary-rgb) / .12);
  animation: hud-nav-ativo .22s ease-out;
}
.hud-nav-item[aria-current="page"] .hud-nav-rotulo { color: var(--nav-texto); font-weight: 600; }
.hud-nav-item[aria-current="page"] .hud-nav-emoji { opacity: 1; }
.hud-nav-item[aria-current="page"]:focus-visible { box-shadow: inset 0 0 0 1px rgb(var(--color-primary-rgb) / .12), 0 0 0 2px var(--nav-branco), 0 0 0 3.5px var(--nav-rosa); }

/* Desabilitado ("em breve"): presente, calmo, sem reação. */
.hud-nav-item[aria-disabled="true"] { opacity: .4; cursor: default; }

/* Selo de novidade: pontinho salmão com anel claro, sem número. */
.hud-nav-selo {
  position: absolute; top: -1px; right: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--nav-rosa); box-shadow: 0 0 0 2px var(--nav-branco);
}
.hud-nav-selo[hidden] { display: none; }

@keyframes hud-nav-ativo { from { background-color: transparent; box-shadow: none; } }

@media (max-width: 639px) {
  .hud-nav { width: calc(100% - 16px); padding: 6px 5px; }
  .hud-nav-item { margin: 0 1px; padding: 0; }
  .hud-nav-icone svg { width: 22px; height: 22px; }
  .hud-nav-emoji { font-size: 22px; }
  .hud-nav-rotulo { font-size: .64rem; letter-spacing: 0; }
  .hud-nav-lista li.is-novo-grupo { padding-left: 4px; }
}
@media (max-width: 380px) {
  .hud-nav { width: calc(100% - 12px); padding: 6px 4px; }
  .hud-nav-item { margin: 0 1px; }
  .hud-nav-rotulo { font-size: .6rem; letter-spacing: 0; }
  .hud-nav-lista li.is-novo-grupo { padding-left: 4px; }
}
@media (min-width: 640px) {
  .tem-hud-nav { --hud-nav-margem: 20px; }
  .hud-nav { padding: 7px 10px; border-radius: 28px; }
  .hud-nav-lista li.is-novo-grupo { padding-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-nav-item, .hud-nav-emoji { transition: none; animation: none !important; }
  .hud-nav-item:hover, .hud-nav-item:active { transform: none; }
}