/* Contenedores del cuerpo de la página de busqueda de productos */
.contenedor-buscador,
.contenedor-buscador-resultados {
    padding: 20px;
}

/* Input de búsqueda de producto */
#buscadorModal:focus,
#buscadorBody:focus {
    border-color: var(--color-green-fixi) !important;
    box-shadow: none !important;
}

/* Botón de sumbit de busqueda de producto */
.btn-submit-search {
    background-color: var(--color-green-fixi);
}

.btn-submit-search i {
    background-color: var(--color-green-fixi);
    color: #fff;
}

/* Botón flotante de búsqueda */
.search-fab {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translateX(-50%);

    width: 64px;
    height: 64px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid var(--color-blue-dipromedic) !important;
    border-radius: 50%;

    background-color: #fff;
    color: var(--color-blue-dipromedic);
    font-size: 24px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    z-index: 4;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.search-fab:focus {
    border: 2px solid var(--color-blue-dipromedic) !important;
}

.search-fab:hover {
    color: #fff;
    background-color: var(--color-blue-dipromedic);
    box-shadow:
        0 0 0 4px rgba(37, 211, 102, 0.18),
        0 0 18px rgba(37, 211, 102, 0.45),
        0 0 34px rgba(37, 211, 102, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.28);
    filter: brightness(1.05);

    transform: translateX(-50%) translateY(-2px);
}

.search-fab:focus-visible {
    outline: 3px solid rgba(255, 0, 0, 0.35);
    outline-offset: 4px;
}

/* Mensaje temporal del buscador */
.search-fab-hint {
    position: absolute;
    right: calc(100% + 14px);
    bottom: calc(100% + 26px);

    min-height: 42px;
    padding: 9px 28px 9px 10px;

    display: flex;
    align-items: center;
    gap: 8px;

    border-radius: 12px;
    background-color: #fff;
    color: var(--color-blue-dipromedic);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;

    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transform: translateX(8px);
    animation: searchHintVisibility 6s ease forwards;
}

.search-fab-hint::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    width: 14px;
    height: 14px;
    background-color: #fff;
    transform: translateY(-50%) rotate(45deg);
}

.search-fab-hint img,
.search-fab-hint span {
    position: relative;
    z-index: 1;
}

.search-fab-hint img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 20px;
}

@keyframes searchHintVisibility {
    0% {
        opacity: 0;
        transform: translateX(8px);
    }

    10%,
    80% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(8px);
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-fab-hint {
        animation-name: searchHintVisibilityReduced;
    }

    @keyframes searchHintVisibilityReduced {

        0%,
        80% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            visibility: hidden;
        }
    }
}

/* Resultado de la busqueda */
.resultado {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #cccccc;
}

.resultado-imagen {
    width: 200px;
    height: 200px;
}

.resultado-detalle {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.resultado-detalle > h5 {
    color: var(--color-blue-dipromedic);
}

.resultado-detalle > h5 > small {
    font-size: 20px;
}

.resultado-detalle > p {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
}

.resultado-detalle > span {
    color: var(--color-blue-dipromedic);
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
}

.resultado-detalle > a.btn-gradient {
    width: 144px;
}