/* ==========================================================================
   SECCIÓN 1 (PADRE): El contenedor total. 
   Es más alto (85px) para dar aire arriba, pero es transparente.
   ========================================================================== */

/* ==========================================================================
   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 {
    bottom: 0;
    left: 0;
    pointer-events: none; /* Hace que la zona transparente deje pasar los clics al fondo de la app */
    justify-content: flex-end;
    position: fixed;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 65px; /* La altura real de tu barra */
    background-color: #000; /* Aquí sí va el fondo */
    opacity: 0.9;
    box-shadow: 0 -4px 12px rgba(37, 99, 235, 0.7);
    z-index: 1300;
    visibility: visible;
}
    /* Estado Visible (Activa animación al mostrar) */
    .tab-buttons.visible {
        opacity: 0.9;
        left: 50%; /* Mueve el borde izquierdo al centro exacto */
        transform: translate(-50%, 0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out, visibility 0s linear 0s;
    }

    /* Estado Oculto (Activa animación hacia abajo) */
    .tab-buttons.hidden {
        opacity: 0;
        transform: translate(-50%, 100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out, visibility 0s linear 0.35s;
    }

/* 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;
    user-select: none;
}

/* 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);
}






/* === 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;
    user-select: none;
}

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

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

    .tab-btn.active .tab-text {
        color: #ffff;
        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));
    }


@media (min-width: 600px) {
    .tab-buttons {
        max-width: 500px;
        left: 50%; /* Mueve el borde izquierdo al centro exacto */
        transform: translateX(-50%); /* Recula la mitad del ancho del elemento para centrarlo perfecto */
        border-radius: 15px 15px 0 0; /* Redondeado solo arriba */
    }
}