/* =================================================== */
/* Estilos para el Buscador con Autocompletado (g502) */
/* =================================================== */

/* Contenedor principal que envuelve el input y el dropdown */

/* --- DISEÑO RESPONSIVE PARA EL HEADER DE DON JORGITO --- */
@media (max-width: 768px) {
    /* Fondo oscuro estilo Amazon */
    .main-header {
        background-color: #232f3e !important;
        padding-bottom: 5px;
    }

    /* Contenedor principal en móvil */
    .header-content {
        display: grid;
        grid-template-columns: auto 1fr auto; /* Logo | Espacio | Acciones */
        grid-template-areas: 
            "logo . actions"
            "search search search"
            "nav nav nav";
        gap: 5px;
        padding: 8px 12px;
        align-items: center;
    }

    /* Logo */
    .header-logo {
        grid-area: logo;
    }
    .header-logo img {
        width: 100px; /* Tamaño compacto tipo Amazon */
        height: auto;
        filter: brightness(0) invert(1); /* Si tu logo es oscuro, esto lo pone blanco */
    }

    /* Ocultar elementos innecesarios en móvil */
    .header-slogan, .header-user-actions span {
        display: none;
    }

    /* Acciones (Iconos de cuenta y carrito) */
    .header-user-actions {
        grid-area: actions;
        display: flex;
        gap: 15px;
    }
    .header-user-actions svg {
        color: white !important;
        width: 28px;
        height: 28px;
    }

    /* BARRA DE BÚSQUEDA (El corazón de Amazon) */
    .header-search {
        grid-area: search;
        width: 100%;
        margin: 5px 0;
    }

    .search-container {
        display: flex;
        background-color: white;
        border-radius: 6px;
        overflow: hidden;
        height: 45px;
    }

    .search-input {
        flex-grow: 1;
        border: none;
        padding: 0 15px;
        font-size: 16px; /* Evita zoom automático en iPhone */
        color: #111;
    }

    .search-icon {
        background-color: white; /* El color naranja clásico de Amazon */
        border: none;
        width: 50px;
        color: #232f3e;
        font-size: 1.2rem;
    }

    /* Categorías: Las movemos debajo o las integramos */
    .header-dropdown-menu {
        display: none; /* Amazon suele ocultarlas tras un menú hamburguesa o el buscador */
    }

    /* Navegación secundaria (Scroll horizontal oscuro) */
    /* Navegación secundaria - El contenedor */
    .secondary-nav {
        grid-area: nav;
        background-color: #232f3e;
        margin: 0 -12px;
        padding: 0; /* Quitamos padding para que no se vea el hueco si está cerrado */
        overflow: hidden; /* Importante para el efecto de cerrar */
        max-height: 0; /* Lo escondemos por completo */
        transition: max-height 0.3s ease-out; /* Animación suave de bajada */
    }

    /* Cuando el JS le pone la clase .abierto, se despliega */
    .secondary-nav.abierto {
        max-height: 500px; /* Un valor alto para que quepan todos los links */
        padding: 10px 0;
    }

    .secondary-nav ul {
        display: flex;
        flex-direction: column; /* Cambiamos de horizontal a VERTICAL */
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .secondary-nav ul li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Línea sutil entre opciones */
    }

    .secondary-nav ul li a {
        display: block; /* Para que todo el ancho sea clickeable */
        color: white;
        text-decoration: none;
        font-size: 16px;
        padding: 12px 20px;
        font-weight: 500;
        text-align: left; /* Alineado a la izquierda como Amazon */
    }
}
    /* Esto va FUERA del @media para que en PC no se vea el botón */
#boton-menu {
    display: none;
}

@media (max-width: 768px) {
    #boton-menu {
        display: block; /* Solo se ve en celular */
        color: white;
        cursor: pointer;
        padding: 12px;
        background: #37475a;
        text-align: center;
        font-weight: bold;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}

/* Pruebadddddddddddddddddddd*/
.autocomplete-wrapper {
    position: relative; 
    z-index: 1000; /* Prioriza esto sobre otros elementos del header */
}

/* Estilos para la caja de resultados flotante (#resultados-busqueda) */
.autocomplete-dropdown {
    display: none; /* Inicia oculto, el JS lo muestra/oculta */
    position: absolute; 
    top: 100%; /* Empieza justo debajo del input */
    left: 0;
    right: 0;
    width: 100%; /* Ocupa todo el ancho del contenedor */
    background-color: #fff; 
    border: 1px solid #ddd; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra más definida */
    max-height: 350px; /* Altura máxima con scroll si hay muchos resultados */
    overflow-y: auto; 
    z-index: 1001; /* Debe estar por encima del wrapper */
    border-radius: 0 0 5px 5px; /* Bordes redondeados solo en la parte inferior */
    margin-top: -1px; /* Para que el borde se solape con el del input */
}

/* Estilos para cada item de resultado (enlaces con imagen) */
.resultado-item {
    display: flex; /* Para alinear imagen y texto */
    align-items: center; /* Centrar verticalmente */
    padding: 10px 15px; 
    text-decoration: none; 
    color: #333; 
    border-bottom: 1px solid #eee; 
    transition: background-color 0.2s ease; 
}

.resultado-item:last-child {
    border-bottom: none; 
}

/* Efecto hover */
.resultado-item:hover {
    background-color: #f5f5f5; 
    color: #232f3e; /* Color oscuro al pasar el mouse */
}

/* Estilos de la miniatura de la imagen */
.resultado-item img {
    width: 45px;
    height: 45px;
    object-fit: cover; /* Recorta la imagen para que llene el espacio sin distorsión */
    margin-right: 12px;
    border-radius: 3px; 
    flex-shrink: 0; /* Evita que se encoja */
    border: 1px solid #eee; /* Borde sutil para destacar */
}

/* Estilos del texto del producto */
.resultado-item span {
    flex-grow: 1; 
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

/* Estilo para el mensaje de "No hay coincidencias" o "Error" */
.autocomplete-dropdown p {
    margin: 15px;
    color: #777;
    text-align: center;
}