/* ---- PARTE SUPERIOR ---- */
.encabezado-superior {
    background-color: #1ea161;
    padding: 15px;
    text-align: center;
}

.encabezado-superior h1 {
    color: #fecc30;
    font-size: clamp(18px, 4vw, 28px);
    margin: 0;
    font-weight: bold;
}

/* ---- PARTE INFERIOR ---- */
.encabezado-inferior {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 2px solid #1ea161;
    flex-wrap: wrap;  /* ❤️ PERMITE QUE TODO SE ADAPTE */
    gap: 15px;
}

/* LOGO */
.logo {
    width: clamp(120px, 25vw, 300px); /* ❤️ SE REDUCE SOLO */
    height: auto;
}

/* ---- BUSCADOR ---- */
.buscador-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

#busqueda {
    padding: 8px;
    width: clamp(120px, 30vw, 250px);
    border: 2px solid #1ea161;
    border-radius: 5px 0 0 5px;
    font-size: clamp(12px, 1.5vw, 16px);
}

.selector-productos {
    padding: 8px;
    border: 2px solid #1ea161;
    border-radius: 0 5px 5px 0;
    background-color: white;
    font-size: clamp(12px, 1.5vw, 16px);
    cursor: pointer;
}

/* ---- CONTACTO ---- */
.contacto-derecha {
    display: flex;
    align-items: center;
    gap: 15px;
}

.telefono {
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: bold;
    color: #1ea161;
}

.bandera {
    width: clamp(24px, 5vw, 40px);
}

/* ---- TOOLTIP ---- */
.bandera-tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: #1ea161;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.bandera-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ---- MÓVIL ---- */
@media (max-width: 800px) {

    .encabezado-inferior {
        justify-content: center;
        text-align: center;
    }

    .buscador-container {
        flex-direction: column;
    }

    #busqueda,
    .selector-productos {
        width: 100%;
        border-radius: 5px;
    }
}

/* OCULTAR BUSCADOR POR LETRAS EN CELULAR */
@media (max-width: 800px) {
    .buscador-letras {
        display: none !important;
    }
}

/* ---- LISTA DE SUGERENCIAS ---- */
.lista-sugerencias {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 999;
}

.lista-sugerencias li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.lista-sugerencias li:hover {
    background-color: #1ea161;
    color: white;
}

/* Imagen circular del producto */
.lista-sugerencias .img-mini {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #1ea161;
}

.buscador-letras {
    position: relative;   /* ⭐ NECESARIO PARA QUE EL UL SE COLOQUE DEBAJO */
    width: fit-content;
}

.buscador-letras {
    display: inline-block;
}

.buscador-letras {
    position: relative;
    display: inline-block;
}