/* BOTTOM NAV */
.bottomnav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: var(--altura-bottomnav);
  padding-bottom: var(--safe-bottom);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
  z-index: 100;
}

@media (min-width: 768px) {
  .bottomnav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 var(--raio-card) var(--raio-card);
  }
}

.bottomnav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-xxs);
  color: var(--cor-texto-secundario);
  transition: color var(--trans-rapida);
  position: relative;
  min-height: var(--alvo-min);
}

.bottomnav__btn .icone {
  width: 20px;
  height: 20px;
}

.bottomnav__btn-label {
  font-size: var(--texto-xxs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  line-height: 1;
}

.bottomnav__btn--ativo {
  color: var(--cor-accent-texto);
}

.bottomnav__btn--ativo::before {
  content: '';
  position: absolute;
  inset: 6px 12px;
  background: var(--cor-accent);
  border-radius: var(--raio-chip);
  z-index: -1;
  transition: inset var(--trans-rapida);
}

.bottomnav__btn:active {
  opacity: 0.7;
}

.bottomnav__btn--ativo .icone,
.bottomnav__btn--ativo .bottomnav__btn-label {
  color: var(--cor-accent-texto);
}