/* ============================================================
   nav.css — barra de navegación inferior y sistema de vistas
   ============================================================ */

/* Deja espacio para la barra fija inferior (incluye zona segura del móvil). */
.app { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

.vistas { padding-top: 18px; padding-bottom: 24px; }

.vista { display: none; }
.vista.activa { display: block; animation: aparecer-vista .22s ease; }

@keyframes aparecer-vista {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* La vista de retiro apila sus tarjetas. */
#vista-retiro { display: none; }
#vista-retiro.activa { display: grid; gap: 16px; }

/* ---------- Barra inferior ---------- */

.nav-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(13, 20, 36, .92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: 0;
  border-radius: var(--radio-m);
  padding: 8px 4px;
  color: var(--texto-tenue);
  font-family: var(--fuente-texto);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item:hover { color: var(--texto-suave); }

.nav-item.activa {
  color: var(--azul-claro);
  background: rgba(59, 130, 246, .12);
}

/* En pantallas anchas, centramos y limitamos el ancho de la barra. */
@media (min-width: 720px) {
  .nav-inferior {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 460px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    bottom: 16px;
    padding: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  }
  .app { padding-bottom: 96px; }
}