/* ==========================================================
   BARRA DE NAVEGACIÓN INFERIOR
   ==========================================================
   Barra de navegación principal de la aplicación.

   Permite cambiar entre las tres vistas disponibles:

   • Mapa
   • Explorar
   • Información

   Se mantiene fija en la parte inferior de la pantalla
   durante toda la navegación.
   ========================================================== */


/* ==========================================================
   CONTENEDOR PRINCIPAL
   ========================================================== */

/* Barra inferior fija */
.bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:var(--nav-height);

    background:#fff;

    display:flex;
    justify-content:space-around;
    align-items:center;

    box-shadow:0 -4px 20px rgba(0,0,0,.04);
    z-index:15000;

    /* Compatibilidad con dispositivos con notch */
    padding-bottom:env(safe-area-inset-bottom);

    /* Bordes superiores redondeados */
    border-top-left-radius:20px;
    border-top-right-radius:20px;
}


/* ==========================================================
   BOTONES DE NAVEGACIÓN
   ==========================================================
   Cada botón representa una sección de la aplicación.
   Está compuesto por un icono SVG y un texto.
   ========================================================== */

.nav-item{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    width:100%;
    height:100%;

    background:none;
    border:none;

    color:#b2bec3;
    font-size:10px;
    font-weight:600;

    transition:all .2s ease;
}


/* ==========================================================
   ICONOS SVG
   ========================================================== */

/* Icono de cada botón */
.nav-item svg{
    width:22px;
    height:22px;
    margin-bottom:4px;

    fill:#b2bec3;

    transition:fill .2s, transform .2s;
}


/* ==========================================================
   BOTÓN ACTIVO
   ==========================================================
   Indica la vista actualmente seleccionada.
   ========================================================== */

/* Cambia el color del texto */
.nav-item.active{
    color:var(--primary);
}

/* Cambia el color y eleva ligeramente el icono */
.nav-item.active svg{
    fill:var(--primary);
    transform:translateY(-2px);
}