/* ---- barra inferior de 5 (mockup) ---- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:calc(var(--nav-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
  background:linear-gradient(180deg, rgba(10,23,48,.78), rgba(7,17,42,.96));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--hairline);
}

/* >>> FIX DE LA FRANJA: el atributo hidden del navegador era pisado por el
   display:grid de arriba, así que la barra se pintaba VACÍA en la bienvenida
   (esa era la "franja azul" del borde inferior). Esta regla, más específica,
   garantiza que hidden signifique hidden. Una línea, cero efectos colaterales:
   donde la barra toca (chat, fotos, ruta, más) se sigue viendo igual. <<< */
.bottom-nav[hidden]{display:none}

.navitem{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--text-faint); padding:8px 4px; border-radius:var(--r-sm);
  transition:color .2s ease, transform .15s ease;
}
.navitem__icon{width:22px; height:22px}
.navitem__icon svg{width:100%; height:100%}
.navitem__label{font-size:10px; font-weight:500; letter-spacing:.2px}
.navitem.is-active{color:var(--gold)}                 /* item activo en dorado, como el mockup */
.navitem:active{transform:scale(.94)}
.navitem:focus-visible{outline:2px solid var(--peach-300); outline-offset:2px}

/* ---- topbar interna ---- */
.topbar{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:calc(14px + var(--safe-t)) 16px 10px;
}
.topbar__title{font-size:22px; color:var(--text)}
.topbar__sub{font-size:12px; color:var(--text-dim); font-family:var(--font-ui); font-weight:500}

/* ---- botón píldora melocotón (Entrar / CTAs) ---- */
.btn--pill{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 26px; border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--peach-300),var(--peach-500));
  color:#2A160C; font-weight:600; font-size:15px; letter-spacing:.3px;
  box-shadow:var(--glow-peach); border:1px solid rgba(255,255,255,.18);
  transition:transform .15s ease, filter .2s ease;
}
.btn--pill svg{width:18px; height:18px}
.btn--pill:active{transform:translateY(1px) scale(.99); filter:brightness(.97)}
.btn--pill:focus-visible{outline:2px solid var(--gold-soft); outline-offset:3px}

/* ---- tarjeta redondeada genérica (se reutilizará en chat/fotos/ruta) ---- */
.card{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
}