/* =========================================
   ESTILOS DE PREBÚSQUEDA (Typeahead)
   ========================================= */

/* 1. Contenedor Principal Flotante */
#resultadosBusqueda {
    margin-top: 8px; /* Separación sutil del input */
    border-radius: 16px; /* Bordes más redondeados y modernos */
    border: 1px solid rgba(0,0,0,0.08); /* Borde casi invisible */
    box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important; /* Sombra premium difusa */
    overflow: hidden; /* Para que el contenido respete los bordes */
    background-color: #ffffff;
    animation: slideDown 0.2s ease-out;
}

/* Animación de entrada suave */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Items de Producto (Generados por JS) */
.resultado-item {
    padding: 12px 16px !important; /* Más aire para que respire */
    border-bottom: 1px solid #f3f4f6 !important; /* Línea divisoria muy sutil */
    transition: all 0.2s ease;
    background-color: #fff;
}

    .resultado-item:hover {
        background-color: #f8fafc; /* Gris muy suave al pasar el mouse */
        padding-left: 20px !important; /* Pequeño desplazamiento a la derecha (efecto premium) */
    }

    /* Imagen del producto */
    .resultado-item img {
        border-radius: 8px !important; /* Suavizar esquinas de la foto */
        border: 1px solid #e5e7eb; /* Marco fino para definir la imagen */
        background-color: #fff;
    }

    /* Nombre del producto */
    .resultado-item .fw-semibold {
        color: #1e293b; /* Gris oscuro (casi negro) para lectura clara */
        font-size: 0.95rem;
        margin-bottom: 2px;
        display: block; /* Asegura que el precio baje de línea */
    }

    /* Precio */
    .resultado-item .text-primary {
        color: #0026a7 !important; /* Tu azul corporativo */
        font-weight: 700;
        font-size: 0.9rem;
    }

/* 3. Sugerencia "¿Quisiste decir...?" */
.p-2.text-muted.fst-italic {
    background-color: #fffbeb; /* Fondo amarillo muy tenue para llamar atención sutilmente */
    color: #b45309 !important; /* Texto ámbar oscuro */
    border-bottom: 1px solid #fef3c7;
    padding: 10px 16px !important;
}

.sugerencia {
    color: #0026a7 !important;
    text-decoration: underline;
    text-decoration-color: rgba(26, 115, 232, 0.3);
}

/* 4. Botón "Ver todos los productos" */
.resultado-ver-todos {
    background-color: #f8fafc;
    color: #475569 !important; /* Gris medio, no azul chillón */
    font-weight: 600;
    font-size: 0.85rem;
    padding: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    border-top: 1px solid #e2e8f0;
}

    .resultado-ver-todos:hover {
        background-color: #0026a7; /* Al hover se vuelve azul corporativo */
        color: #ffffff !important; /* Texto blanco */
    }