/* Estilos personalizados para el efecto Liquid Glass (iOS 26) */
.liquid-glass {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Hover: Muestra la píldora en el icono y mantiene la sombra y transformación */
.nav-item:hover {
    box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.3); /* Sombra más fuerte al flotar */
    transform: translateY(0) translateX(-4px) scale(1.02); /* Ligeramente flota hacia el centro */
    /* background-color: #007aff; */ /* Fondo azul eliminado */
}

/* Efecto de píldora en el hover para el icono */
.nav-item:hover .icon-wrapper {
    background-color: #007aff;
    border-radius: 18px; /* Igual que la barra inferior */
    padding: 4px 10px; /* Igual que la barra inferior */
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
    color: white; /* Esto hará que el stroke del SVG sea blanco */
}

/* Ocultar el texto por defecto en los elementos NO ABIERTOS */
.nav-item:not(.open) .item-text {
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: width 0.3s ease-in-out, opacity 0.3s ease, visibility 0s 0.3s;
}

/* Mostrar y expandir el texto en hover o en el estado abierto */
.nav-item:hover .item-text, 
.nav-item.open .item-text { 
    width: 100%; 
    opacity: 1;
    visibility: visible;
    color: white !important; /* Forzar blanco sobre Tailwind */
    text-shadow: 0 1px 4px rgba(0,0,0,0.7); /* Sombra para legibilidad */
    transition: width 0.3s ease-in-out, opacity 0.3s ease;
}

/* Aseguramos que la transición de ancho sea suave en el ítem completo */
.nav-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Curva de transición más elegante */
    overflow: hidden; 
    text-decoration: none; 
}

/* Estilo para los SVG (Lucide) para que se comporten de forma consistente */
.icon-wrapper svg {
    width: 1rem; /* Reducido de 1.25rem */
    height: 1rem; /* Reducido de 1.25rem */
    /* Los iconos de Lucide usan stroke (contorno) en lugar de fill (relleno) */
    stroke: currentColor;
    transition: stroke 0.3s ease-in-out; /* Transición para el color del stroke */
    position: relative;
    right: 1px; /* Pequeño ajuste para centrar visualmente el icono */
    color: #888; /* Unificar color con barra inferior */
}
/* Contenedor del icono para asegurar el centrado */
.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem; /* Reducido de 1.25rem */
    height: 1rem; /* Reducido de 1.25rem */
    flex-shrink: 0; /* Evita que el contenedor se encoja */
}