/* IMPORTANTE: poner el id autocomplete en el p:autocomplete
                afecta el scrollbar y la lista desplegable de items

    <p:autocomplete id="autocomplete-colorx" styleclass="autocomplete-base autocomplete-colorx"/>

    para evitar id duplicados, puede comenzar con cualquier cosa, mientras termine en autocomplete-colorx

 */

/* como agrega el panel como hijo de body en DOM no se puede seleccionar por la clase directamente

   selector de exp reg de sufijo, selecciona todos los id que finalizan en "autocomplete-colorx_panel"

   el _panel lo agrega JSF al id indicado en el p:autocomplete

*/

/*-- AJUSTES GENERALES --*/

/* contenedor */
.autocomplete-base{
    background: transparent !important;
    width: 100% !important;
    height: 3rem;
    display: flex !important;
}

/* autocomplete input */
.autocomplete-base .ui-autocomplete-input{
    height: 100% !important;
    width: 100% !important;
    flex: 1;
    padding: .75rem !important;
    background: transparent !important;
    border-radius: 0.5rem;
    border-right: none !important;
}

/* flecha desplegable */
.autocomplete-base .ui-autocomplete-dropdown{
    height: 100% !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    border:none;
}

.autocomplete-base .ui-autocomplete-dropdown:focus{
    border: none !important;
    outline: none !important;
}

/*-- AJUSTES ESPECIFICOS --*/

/* scrolling autocomplete */

    /* color nuevo, agregar el selector */

/* Solo funciona para Firefox */
@-moz-document url-prefix()  {
    [id$="autocomplete-orange_panel"],
    [id$="autocomplete-lightblue_panel"] {
        scrollbar-width: thin !important;
        scrollbar-color: #666 #f1f1f1 !important;
    }
}

/* chromium */

/* Estilo del fondo de la barra de desplazamiento */
[id$="autocomplete-orange_panel"]::-webkit-scrollbar,
[id$="autocomplete-lightblue_panel"]::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
}

/* Estilo del track (pista) de la barra de desplazamiento */
[id$="autocomplete-orange_panel"]::-webkit-scrollbar-track,
[id$="autocomplete-lightblue_panel"]::-webkit-scrollbar-track {
    border-radius: 0 .5rem .5rem 0 !important;
    background-color: var(--color-white-bold); /* Color de fondo de la pista */
}

/* Estilo del thumb (el bloque que se mueve dentro de la barra) */
[id$="autocomplete-orange_panel"]::-webkit-scrollbar-thumb,
[id$="autocomplete-lightblue_panel"]::-webkit-scrollbar-thumb {
    background-color: #777; /* Color del bloque */
    border-radius: 1rem; /* Bordes redondeados */
    border: 3px solid var(--color-white-bold); /* Borde del bloque */
}

/* Estilo del thumb al hacer hover */
[id$="autocomplete-orange_panel"]::-webkit-scrollbar-thumb:hover,
[id$="autocomplete-lightblue_panel"]::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Cambia el color al pasar el cursor */
}

/*-- ORANGE --*/

/* autocomplete input */
.autocomplete-orange .ui-autocomplete-input{
    border: 2px solid var(--color-orange) !important;
}

/* flecha desplegable */
.autocomplete-orange .ui-autocomplete-dropdown{
    background: var(--color-orange-hover) !important;
}

/* contenedor items desplegados */
[id$="autocomplete-orange_panel"] {
    width: fit-content !important;
    max-width: 20rem;
}

/* items post filtrado */
[id$="autocomplete-orange_panel"] .ui-autocomplete-query{
    background-color: transparent;
}

/* item lista desplegable */
[id$="autocomplete-orange_panel"]  .ui-autocomplete-item{
}

/* item lista hover */
[id$="autocomplete-orange_panel"]  .ui-autocomplete-items .ui-autocomplete-item.ui-state-highlight{
    background-color: var(--color-orange-hover) !important;
}

/*-- LIGHTBLUE --*/

/* autocomplete input */
.autocomplete-lightblue .ui-autocomplete-input{
    border: 2px solid var(--color-lightblue) !important;
}

/* flecha desplegable */
.autocomplete-lightblue .ui-autocomplete-dropdown{
    background: var(--color-lightblue) !important;
}

/* contenedor items desplegados */
[id$="autocomplete-lightblue_panel"] {
    width: fit-content !important;
    max-width: 20rem;
}

/* items post filtrado */
[id$="autocomplete-lightblue_panel"] .ui-autocomplete-query{
    background-color: transparent;
}

/* item lista desplegable */
[id$="autocomplete-lightblue_panel"]  .ui-autocomplete-item{
}

/* item lista hover */
[id$="autocomplete-lightblue_panel"]  .ui-autocomplete-items .ui-autocomplete-item.ui-state-highlight{
    background-color: var(--color-lightblue) !important;
}