/* LÁ FAMÍLIA 3D · PHP55 · Carrossel de ícones do rodapé.
   Edite somente este arquivo para alterar o visual do menu em todas as páginas. */
.dock-wrap {
  position:fixed;
  left:0;
  right:0;
  bottom:14px;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  pointer-events:auto;
  visibility:visible;
  opacity:1;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.dock-hint {
  display:flex;
  align-items:center;
  gap:9px;
  color:#bdcdb2;
  background:#111813ed;
  border:1px solid #bdd59e24;
  border-radius:999px;
  padding:4px 12px;
  font-size:8px;
  font-weight:500;
  letter-spacing:1.4px;
  line-height:1.4;
  box-shadow:0 3px 14px #0004;
}
.dock-hint span { font-size:13px; letter-spacing:0; line-height:1; color:var(--lime); }
.dock {
  /* A largura limitada mantém o menu deslizante também no computador. */
  width:484px;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:4px;
  padding:9px 5px 8px;
  border:1px solid #b3d38f45;
  border-radius:29px;
  background:#18221cf2;
  background:linear-gradient(150deg,#273322f5,#172119f5);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 14px 46px #0009,inset 0 1px #e0f3c912;
  pointer-events:auto;
  visibility:visible;
  opacity:1;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  isolation:isolate;
}
.dock-viewport { min-width:0; flex:1; position:relative; overflow:hidden; padding-bottom:7px; min-height:82px; }
.dock-scroll {
  display:flex;
  align-items:center;
  width:100%;
  max-width:none;
  position:relative;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  /* Rolagem nativa contínua: não trava entre ícones ou após pequenos arrastes. */
  scroll-snap-type:none;
  scroll-behavior:auto;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}
.dock-scroll::-webkit-scrollbar { display:none; }
.dock-scroll.can-scroll-right { -webkit-mask-image:none; mask-image:none; }
.dock-scroll.can-scroll-left { -webkit-mask-image:none; mask-image:none; }
.dock-scroll.can-scroll-left.can-scroll-right { -webkit-mask-image:none; mask-image:none; }
.dock-scroll.is-dragging { cursor:grabbing; }
.dock-scroll.is-dragging .dock-link { cursor:grabbing; }
.dock-link {
  flex:0 0 88px;
  width:88px;
  min-width:88px;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  padding:5px 2px;
  position:relative;
  border:1px solid transparent;
  border-radius:19px;
  background:transparent;
  color:#a7b49e;
  font-size:10px;
  line-height:1.2;
  -webkit-user-drag:none;
  transition:color .18s,background .18s;
}
/* Neutraliza a barra ativa da versão anterior. */
.dock-link::after { display:none; }
.dock-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex-shrink:0;
  border:1px solid #d5eabc23;
  border-radius:50%;
  background:#ddeaca08;
  box-shadow:inset 0 1px #e6f5d609;
  pointer-events:none;
  transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;
}
.dock-icon svg { width:24px; height:24px; stroke-width:1.7; }
.dock-label {
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}
.dock-link.active { color:var(--lime); border-color:transparent; background:transparent; }
.dock-link.active .dock-icon {
  color:#172313;
  background:var(--lime);
  border-color:var(--lime);
  box-shadow:0 3px 18px #c2ec8624,inset 0 1px #f6ffea60;
}
.dock-link.active .dock-label { font-weight:600; }
.dock-link:focus-visible { outline:2px solid var(--lime); outline-offset:-3px; }
.dock-arrow {
  display:grid;
  place-items:center;
  flex:0 0 40px;
  width:40px;
  height:56px;
  padding:0;
  color:#c5dbb4;
  background:transparent;
  border:1px solid transparent;
  border-radius:19px;
  transition:background .18s,opacity .18s;
}
.dock-arrow svg { width:18px; height:18px; }
.dock-arrow:disabled { opacity:.22; cursor:default; }
.dock-arrow:focus-visible { outline-offset:-2px; }
.dock-progress {
  position:absolute;
  bottom:0;
  left:10px;
  right:10px;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:#c2ec8616;
  pointer-events:none;
}
.dock-progress span {
  display:block;
  height:100%;
  width:40%;
  background:#c2ec8699;
  border-radius:999px;
  will-change:transform;
}
.toast { bottom:calc(145px + env(safe-area-inset-bottom, 0px)); }
.footer { padding-bottom:calc(152px + env(safe-area-inset-bottom, 0px)); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .dock { background:#1b241df2; }
}
@supports (-webkit-touch-callout:none) {
  .dock-wrap { bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .dock { box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.05); }
}

@media (hover:hover) and (pointer:fine) {
  .dock-link:hover { color:var(--ink); background:#e4f5ca05; }
  .dock-link:hover .dock-icon { transform:translateY(-2px); border-color:#d5eabc66; }
  .dock-link.active:hover { color:var(--lime); }
  .dock-arrow:hover:not(:disabled) { background:#c2ec8614; }
}
@media (max-width:560px) {
  .dock-wrap { padding-inline:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); gap:6px; }
  .dock { width:100%; max-width:420px; padding:7px 3px 6px; gap:2px; border-radius:26px; }
  .dock-scroll { gap:6px; }
  .dock-link { flex-basis:80px; width:80px; min-width:80px; min-height:69px; padding:4px 1px; gap:5px; font-size:9px; border-radius:17px; }
  .dock-icon { width:41px; height:41px; }
  .dock-icon svg { width:23px; height:23px; }
  .dock-arrow { flex-basis:36px; width:36px; height:56px; }
  .dock-arrow svg { width:17px; height:17px; }
  .dock-hint { font-size:7px; letter-spacing:1.2px; }
}
@media (prefers-reduced-motion:reduce) {
  .dock-link,.dock-icon,.dock-arrow { transition:none; }
  .dock-link:hover .dock-icon { transform:none; }
}

/* Compatibility: a painted fallback and margin spacing work without flex gap. */
.dock { background-color:#1b241d; }
.dock-icon svg, .dock-arrow svg { display:block; width:22px; height:22px; flex-shrink:0; }
.dock-scroll { gap:0; }
.dock-link + .dock-link { margin-left:8px; }
.dock-link { -webkit-tap-highlight-color:transparent; }
.dock-icon { margin-bottom:6px; }
.dock-link { gap:0; }
@media (max-width:480px) {
  .dock-link + .dock-link { margin-left:6px; }
}