/* ==========================================================================
   SECCIÓN 1 (PADRE): El contenedor total. 
   Es más alto (85px) para dar aire arriba, pero es transparente.
   ========================================================================== */
.navbar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Aumentamos la altura para albergar el círculo flotante */
    background-color: transparent; /* ¡Clave! Debe ser transparente */
    z-index: 90000;
    pointer-events: none; /* Hace que la zona transparente deje pasar los clics al fondo de la app */
    /* Usamos flex en columna para empujar la barra blanca hacia el fondo */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ==========================================================================
   SECCIÓN 2 (HIJO): La barra blanca real de navegación.
   Aquí se dibuja el fondo, la línea gris y la sombra.
   ========================================================================== */
.tab-buttons {
    margin-top: 10px;
    position: relative; /* Cambiado de fixed a relative para que respete al padre */
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 65px; /* La altura real de tu barra */
    background-color: #ffffff; /* Aquí sí va el fondo blanco */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
}

/* Contenedor de cada pestaña para asegurar distribución perfecta */
.tab-item-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    pointer-events: auto; /* Reactiva los clics que el padre desactivó */
}

/* Etiqueta: <div class="tab-btn"> */
/* Contenedor relativo para posicionar los iconos superpuestos exactamente en el mismo punto */
.tab-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
}

/* Propiedades base de tus SVGs */
.tab-icon {
    width: 24px; /* Ajusta al tamaño preferido */
    height: 24px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* Estado Inicial por Defecto (Inactivo) */
.tab-btn .icon-filled {
    position: absolute;
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
}

.tab-btn .icon-outline {
    opacity: 1;
    transform: scale(1);
}

/* Estado Activo: Animación y activación del Relieve 3D */
.tab-btn.active .icon-outline {
    opacity: 0;
    transform: scale(0.7);
}

.tab-btn.active .icon-filled {
    position: static; /* Retoma su posición en el flujo normal */
    opacity: 1;
    transform: scale(1.1); /* Efecto pop sutil al activarse */
}

/* Animación opcional de rebote al pulsar el botón */
.tab-btn:active .tab-icon {
    transform: scale(0.9);
}

/* === DISEÑO ESPECIAL PARA WA-CHAT (BOTÓN CENTRAL FLOTANTE) === */
.tab-btn[name="btn-wachat"] {
    position: center;
    align-content: center;
    bottom: 8px; /* Lo empuja hacia arriba rompiendo la barra */
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00e676 0%, #0d6efd 100%); /* Gradiente premium */
    padding: 10px;
    border-top: 2px solid #fff;
}

    /* Ajuste de texto para el botón flotante Wa-Chat */
    .tab-btn[name="btn-wachat"] .tab-text {
        color: #ffffff !important;
        font-size: 10px;
        margin-top: 1px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    /* Fuerza a los SVG de Wa-Chat a verse limpios y contrastados en el círculo */
    .tab-btn[name="btn-wachat"] .tab-icon {
        width: 26px;
        height: 26px;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    }

        .tab-btn[name="btn-wachat"] .tab-icon path {
            fill: #ffffff !important; /* Mantiene los puntitos y burbuja blancos */
        }

/* === ICONOS GENERALES (Efecto Estilizado) === */
.tab-icon {
    width: 23px;
    height: 23px;
    transition: transform 0.2s ease;
}

/* Animación sutil al hacer click (Feedback táctil) */
.tab-btn:active .tab-icon {
    transform: scale(0.9);
}

/* Gestión de estados de los Iconos */
.tab-btn .icon-filled {
    display: none;
}

.tab-btn .icon-outline {
    display: block;
    color: #6c757d;
}

/* Etiqueta: <span class="tab-text"> */
.tab-text {
    font-size: 11px;
    margin-top: 4px;
    font-family: Corbel, sans-serif;
}

/* === ESTADO ACTIVO (Para los botones normales) === */
.tab-btn.active:not([name="btn-wachat"]) {
    color: #0d6efd;
}

.tab-btn.active .tab-text {
    color: #000000;
    font-weight: bold;
}

.tab-btn.active .icon-outline {
    display: none;
}

.tab-btn.active .icon-filled {
    display: block;
    /* Efecto 3D sutil en los iconos activos normales */
    filter: drop-shadow(0 2px 4px rgba(13, 110, 253, 0.25));
}

/* Estado activo específico para Wa-Chat (para que no se rompa su diseño) */
.tab-btn.active[name="btn-wachat"] {
    /* Efecto 3D Profesional: Sombra exterior pesada y un brillo sutil arriba */
    box-shadow: 0 8px 16px rgba(0, 165, 79, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid #ffffff; /* Esto crea el efecto visual de "curva metida" en la barra blanca */
}