.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

#categoryDropdown {
    border: 1px solid #ced4da;
    color: #888;
    background-color: white;
}

#categoryDropdown:hover {
    background-color: var(--color-primary);
    color: white;
}

#categoryDropdown:has(+ .dropdown-menu.show),
#categoryDropdown:hover {
    background-color: var(--color-primary);
    color: black;
}

.bi-check-circle-fill{
    color: #008000;
    font-size: 18px;
    margin-right: 3px;
    margin-left: 0px;
}

.bi-x-lg{
    color: #ff0000;
    font-weight: bold;
    position: absolute;
    right: 20px;
}

.search-btn {
    background-color: var(--color-primary);
    color: black;
}

.search-btn:hover {
    
    color: white;
}

.search-input {
    align-self: end;
}

.search-btn {
    align-self: end;
}


@media (max-width: 769px){
    .search-input { 
        width: 200px !important;
    }
}

@media (max-width: 769px){
    .sv-pag{
        display: block;
        text-align: center;
    }

    .dropdown span {
        display: none;
    }



    .sv-pag button {
        margin-top: 10px;
    }
    .search-input {
        width: 100% !important  ;
    }


}

/* HERO COMPACTO SOLO PARA SERVICIOS */
.breadcrumbs .page-header.hero-servicios {
  padding: 20px 0 !important;     /* mucho más bajo que los 60px por defecto */
  min-height: auto !important;    /* evitamos el 20vh que lo hace enorme */
  background-color: var(--color-primary) !important; /* amarillo */
}

/* Texto del cartel más proporcionado */
.breadcrumbs .page-header.hero-servicios h2 {
  font-size: 28px;
  margin-bottom: 5px;
  color: var(--black);
}

.breadcrumbs .page-header.hero-servicios p {
  font-size: 16px;
  margin-bottom: 0;
  color: var(--black);
}