/* === BARRA DE NAVEGAÇÃO INFERIOR MOBILE === */
/* Variáveis em design-tokens.css (:root) */

/*
 * Estiliza o custom element e a classe: a barra chrome pinta assim que o tag
 * existe no DOM (antes/durante o connectedCallback), evitando o “piscar”.
 */
bottom-navigation,
.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  height: var(--bottom-nav-occupied);
  padding-bottom: var(--wpc-safe-bottom);
  background: var(--surface-base);
  border-top: var(--chrome-edge-border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  backdrop-filter: none;
  box-shadow: 0 -4px 20px var(--black-30);
}

/* Botões da navegação inferior — tamanho fixo via tokens */
.bottom-nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-primary);
  padding: 0;
  border-radius: var(--chrome-button-radius, 10px);
  width: var(--mobile-button-size);
  height: var(--mobile-button-size);
  min-width: var(--mobile-button-size);
  min-height: var(--mobile-button-size);
  position: relative;
  overflow: visible;
  outline: none;
  border: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

/* Ícones dos botões */
.nav-icon {
  width: var(--mobile-button-size);
  height: var(--mobile-button-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-nested);
  border-radius: var(--chrome-button-radius, 12px);
}

.nav-icon i {
  font-size: var(--chrome-icon-fs, 1.2rem);
  color: var(--text-primary);
}

/* Estados hover e active - sem animações */
@media (hover: hover) {
  .bottom-nav-button:hover {
  color: var(--text-primary);
}
}

@media (hover: hover) {
  .bottom-nav-button:hover .nav-icon i {
  color: var(--primary);
}
}

/* Focus states para acessibilidade - removido para evitar efeito quadrado */
.bottom-nav-button:focus {
  outline: none;
}

/* Estado ativo do botão */
.bottom-nav-button.active .nav-icon {
  background: var(--primary-glow) !important;
}

.bottom-nav-button.active .nav-icon i {
  color: var(--primary) !important;
}

/* Garantir que o estado ativo seja visível mesmo no hover */
@media (hover: hover) {
  .bottom-nav-button.active:hover .nav-icon {
  background: var(--primary-glow-40) !important;
}
}

@media (hover: hover) {
  .bottom-nav-button.active:hover .nav-icon i {
  color: var(--primary) !important;
}
}

/* Tooltips dos botões - sem animações */
.nav-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black-90);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1001;
  margin-bottom: 8px;
}

/* Seta do tooltip */
.nav-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--black-90);
}

/* Mostrar tooltip no hover */
@media (hover: hover) {
  .bottom-nav-button:hover .nav-tooltip {
  opacity: 1;
  visibility: visible;
}
}

/*
 * Espaço do conteúdo acima da nav fixa: mesma base que --bottom-nav-occupied + folga.
 * Evita conteúdo “por baixo” da barra quando dvh / teclado / safe-area mudam no PWA.
 */
main {
  padding-bottom: calc(var(--bottom-nav-occupied) + 24px) !important;
}

@media (display-mode: standalone) {
  main {
    padding-bottom: calc(var(--bottom-nav-occupied) + 28px) !important;
  }
}

/* Só folga horizontal em telas estreitas — tamanho dos botões continua fixo */
@media screen and (max-width: 480px) {
  bottom-navigation,
  .bottom-navigation {
    padding-left: 4px;
    padding-right: 4px;
  }

  .nav-tooltip {
    font-size: 0.7rem;
    padding: 4px 8px;
    margin-bottom: 6px;
  }

  .nav-tooltip::after {
    border-width: 4px;
  }
}

/* Ajustes para app Capacitor */
.is-app bottom-navigation,
.is-app .bottom-navigation {
  background: var(--surface-base);
}

/* Header = mesma cor base da bottom nav (folha carregada em todas as páginas) */
header,
.container header {
  background: var(--surface-base) !important;
  background-color: var(--surface-base) !important;
  background-image: none !important;
  border-bottom: var(--chrome-edge-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Sem animações - navegação estática */