/* Barra de navegacao de baixo (dock.js). Incluida em todas as telas. */
:root { --dock-h: 58px; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: grid; grid-template-columns: repeat(6, 1fr);
  height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--elevado); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--separador); }
.dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--texto-3); text-decoration: none; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dock a svg { width: 25px; height: 25px; }
.dock a.ativo { color: var(--acento); }
.dock a:active { opacity: .6; }
@media (min-width: 900px) {
  .dock { left: 50%; right: auto; bottom: 14px; transform: translateX(-50%); width: 600px;
    height: var(--dock-h); padding-bottom: 0; border-radius: 18px; border: .5px solid var(--separador);
    box-shadow: var(--sombra); }
}

/* O conteudo e tudo que flutua embaixo sobe acima da barra */
body.com-dock { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
body.com-dock .toast { bottom: calc(var(--dock-h) + 14px + env(safe-area-inset-bottom)); }
/* escondido, o toast desce o tanto que subiu, senao espia por cima da barra */
body.com-dock .toast:not(.visivel) { transform: translate(-50%, calc(100% + var(--dock-h) + 40px)); }
body.com-dock .tr-barra-plano { bottom: calc(var(--dock-h) + 10px + env(safe-area-inset-bottom)); }
body.com-dock .tr-aviso { bottom: calc(var(--dock-h) + 14px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  body.com-dock .toast, body.com-dock .tr-aviso { bottom: calc(var(--dock-h) + 28px); }
  body.com-dock .tr-barra-plano { bottom: calc(var(--dock-h) + 24px); }
}