/* Bottom Navigation Bar Styles - Simple & Standard */
.bottom-nav {
    position: absolute; /* O fixed, dependiendo de la estructura de #mobile-frame */
    bottom: 0;
    left: 0;
    width: 100%;
    /* Altura estándar de 58px según las guías UX + área segura para iOS */
    height: calc(58px + env(safe-area-inset-bottom, 0));
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    border-top: 1px solid #E5E7EB; /* Borde sutil superior en lugar de sombra pesada */
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
    z-index: 50;
    padding: 0 12px; /* 12px de padding lateral según la imagen */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centramos verticalmente el contenido dentro de los 58px */
    flex: 1; /* Para que ocupen todo el ancho de forma equitativa */
    height: 58px;
    text-decoration: none;
    color: #9CA3AF; /* Gris estándar para inactivos, o puedes usar tu #306859 */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ESTADO ACTIVO: Simplemente cambia el color */
.nav-item.active {
    color: #1F2937; /* Color oscuro/negro para el seleccionado */
}

.nav-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; /* Tamaño del icono 24px */
    height: 24px;
    margin-bottom: 4px; /* Separación entre el icono y el texto (aprox 6px visuales) */
}

.nav-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 0.2s ease, stroke-width 0.2s ease;
}

/* El icono activo se vuelve un poco más grueso para destacarlo mejor */
.nav-item.active .nav-icon {
    stroke-width: 2.2;
}

.nav-label {
    font-size: 11px; /* Entre 10 y 12px como indica la guía */
    font-weight: 500;
    line-height: 1;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

/* El texto activo se vuelve un poco más fuerte */
.nav-item.active .nav-label {
    font-weight: 700;
}