/* ============================================================================
   NAV INFERIOR — barra fija de navegación del área de miembros
   ----------------------------------------------------------------------------
   Componente compartido (miembros / tratamiento / comunidad / perfil).
   Se monta vía js/nav.js SOLO con sesión activa: el body recibe la clase
   .con-nav-inferior, que reserva el espacio para que el contenido no quede
   escondido detrás de la barra.
   ============================================================================ */
:root{
  --nav-inf-altura: calc(62px + env(safe-area-inset-bottom, 0px));
}

.nav-inferior{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  /* fondo sólido (sin backdrop-filter): Safari iOS no pinta elementos fijos
     con blur hasta el primer scroll — la barra "aparecía" solo al deslizar */
  background:var(--blanco);
  border-top:1px solid var(--borde);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  transform:translateZ(0); /* fuerza capa propia: pintado inmediato en iOS */
}
.nav-inferior-items{
  max-width:520px;margin:0 auto;
  /* columnas automáticas: la barra se adapta sola a 4 o 5 pestañas sin tocar
     este archivo cada vez que se agrega una */
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 2px 7px;
  color:var(--tinta-suave);font-family:var(--f-sans);font-size:var(--t-micro);
  font-weight:600;letter-spacing:.02em;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .18s;position:relative;
  min-width:0; /* deja que el texto se recorte en vez de romper la grilla */
}
/* con 5 pestañas en pantallas angostas, "Tratamiento" no cabe: se recorta
   en lugar de empujar a las vecinas */
.nav-item span{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:360px){
  .nav-item{letter-spacing:0}
  .nav-item svg{width:21px;height:21px}
}
.nav-item svg{width:23px;height:23px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s}
.nav-item:active svg{transform:scale(.9)}
.nav-item.activa{color:var(--salvia)}
/* indicador sutil de pestaña activa */
.nav-item.activa::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--salvia);
}

/* el contenido de la página respira sobre la barra */
body.con-nav-inferior{padding-bottom:var(--nav-inf-altura)}

/* elementos que viven pegados al borde inferior suben junto con la barra */
body.con-nav-inferior .ti-toast{bottom:calc(var(--nav-inf-altura) + 16px)}
@media(max-width:560px){
  body.con-nav-inferior .q-nav{bottom:var(--nav-inf-altura)}
}

/* mini aviso "Muy pronto" del propio componente */
.nav-aviso{
  position:fixed;left:50%;bottom:calc(var(--nav-inf-altura) + 16px);z-index:60;
  transform:translateX(-50%);
  background:var(--tinta);color:var(--crema);font-family:var(--f-sans);
  font-size:var(--t-caption);font-weight:500;
  padding:10px 18px;border-radius:var(--r-pill);box-shadow:var(--sombra-m);
  white-space:nowrap;animation:subir .18s ease-out;
}