/* Barra inferior flotante (Inicio · + · Cuenta) */
.tabbar{
  --tb-bg:rgba(30,28,40,.72);
  --tb-line:rgba(255,255,255,.12);
  --tb-text:#f5f5f7;
  --tb-muted:#8f8d9b;
  --tb-ease:cubic-bezier(.16,1,.3,1);
  --tb-spring:cubic-bezier(.34,1.45,.64,1);
  position:fixed;z-index:60;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:min(340px,calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));height:66px;
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 8px;border-radius:999px;
  background:var(--tb-bg);-webkit-backdrop-filter:saturate(190%) blur(26px);backdrop-filter:saturate(190%) blur(26px);
  border:1px solid var(--tb-line);
  box-shadow:0 22px 50px -12px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.04) inset;
  transform:translateX(-50%);transform-origin:50% 100%;
  transition:transform .55s var(--tb-ease),height .5s var(--tb-ease),width .5s var(--tb-ease);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;isolation:isolate}
.tabbar.intro{animation:tbIn .9s var(--tb-spring) both .15s}
@keyframes tbIn{from{transform:translate(-50%,140%)}}
.tabbar.mini{transform:translateX(-50%) scale(.9);height:58px}
.tabbar.mini .tb-label{opacity:0;transform:translateY(4px)}

.tb-item{position:relative;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:999px;
  color:var(--tb-muted);text-decoration:none;transition:color .3s;outline-offset:-2px}
.tb-item svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--tb-spring)}
.tb-item:active svg{transform:scale(.82)}
.tb-label{font-size:10.5px;font-weight:600;letter-spacing:.01em;line-height:1;transition:opacity .3s,transform .4s var(--tb-ease)}
.tb-item[aria-current=page]{color:var(--tb-text)}
.tb-item[aria-current=page]::before{content:"";position:absolute;inset:0 6px;z-index:-1;border-radius:999px;background:rgba(255,255,255,.1);
  animation:tbPill .5s var(--tb-ease) both}
@keyframes tbPill{from{transform:scale(.6);opacity:0}}
.tb-item:hover{color:var(--tb-text)}
.tb-item[aria-current=page] svg.home{fill:currentColor;stroke:currentColor}

.tb-new{justify-self:center;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#8c52ff,#a66cff 50%,#e66edb);border:0;cursor:pointer;
  box-shadow:0 10px 26px -6px rgba(166,108,255,.8),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .5s var(--tb-spring),box-shadow .4s}
.tb-new svg{width:24px;height:24px;stroke:#fff;stroke-width:2.6;stroke-linecap:round;fill:none;transition:transform .55s var(--tb-spring)}
.tb-new:hover{box-shadow:0 0 0 6px rgba(166,108,255,.18),0 14px 30px -6px rgba(166,108,255,.9)}
.tb-new:hover svg{transform:rotate(90deg)}
.tb-new:active{transform:scale(.88)}
.tb-new:focus-visible{outline:2px solid #b996ff;outline-offset:3px}

.tb-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#8c52ff,#e66edb);box-shadow:0 0 0 1.5px rgba(255,255,255,.18);transition:transform .45s var(--tb-spring),box-shadow .3s}
.tb-item[aria-current=page] .tb-avatar{box-shadow:0 0 0 2px #fff}
.tb-item:active .tb-avatar{transform:scale(.85)}

body.has-tabbar{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}

@media (prefers-reduced-motion:reduce){
  .tabbar,.tabbar *{animation:none!important;transition:none!important}
}