/*----- selectOneMenu ----*/

/* IMPORTANTE */

/* se aplica en un contenedor superior al <selectOneMenu> */
/*
    <p:outputPanel styleClass="select-orange">
        <p:selectOneMenu/>
    </p:outputPanel>
*/

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

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

    para evitar id duplicados, puede comenzar con cualquier cosa, mientras termine en select-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 "select-colorx_panel"

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

*/

/* AJUSTES GENERALES */

.select-base .ui-selectonemenu-panel{
    border-radius: 0 0 .5rem .5rem;
    border: none !important;
}

.select-base .ui-selectonemenu{
    border: none !important;
}

/* label seleccionado */
.select-base .ui-selectonemenu .ui-selectonemenu-label{
    font-size: 1rem;
    padding: .75rem;
    border-radius: 0.5rem 0 0 0.5rem !important;
    border-right: none !important;
}

/* hover label seleccionado */
.select-base .ui-selectonemenu .ui-selectonemenu-label:hover{
    border-radius: 0.5rem 0 0 0.5rem !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* flecha desplegable container */
.select-base .ui-selectonemenu .ui-selectonemenu-trigger{
    background: transparent !important;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* AJUSTES ESPECIFICOS */

/* orange */

.select-orange .ui-selectonemenu-panel{
    box-shadow: 0 0 0 .05rem var(--color-orange) !important;
}

/* label seleccionado */
.select-orange .ui-selectonemenu .ui-selectonemenu-label{
    border: 2px solid var(--color-orange) !important;
    border-right: none !important;
}

/* flecha desplegable container */
.select-orange .ui-selectonemenu .ui-selectonemenu-trigger{
    border-top: 2px solid var(--color-orange) !important;
    border-bottom: 2px solid var(--color-orange) !important;
    border-right: 2px solid var(--color-orange) !important;
}

/* flecha desplegable */
.select-orange .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon{
    color: var(--color-orange) !important;
}

/* filtro busqueda input */
[id$="select-orange_panel"] .ui-selectonemenu-filter-container .ui-selectonemenu-filter.ui-inputfield{
    border-radius: .25rem !important;
}

/* filtro busqueda focus */
[id$="select-orange_panel"] .ui-selectonemenu-filter-container .ui-selectonemenu-filter.ui-inputfield:focus{
    border-color: var(--color-orange) !important;
}

/* filtro busqueda icono */
[id$="select-orange_panel"] .ui-selectonemenu-filter-container .ui-icon{
    color: var(--color-orange) !important;
}

/* contenedor nivel 1 de los items desplegados */
[id$="select-orange_panel"] .ui-selectonemenu-items-wrapper{
    max-width: 90vw;
}

/* items deplegable container nivel 2 */
[id$="select-orange_panel"] .ui-selectonemenu-items{
    background-color: var(--color-white-bold);
    border-left: 1px solid var(--color-light-grey);
    height: fit-content !important;
}

/* item del desplegale */
[id$="select-orange_panel"] .ui-selectonemenu-items .ui-selectonemenu-item{
    white-space: normal;
    line-height: 1.25;
}

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

/* list item desplegable hover */
[id$="select-orange_panel"] .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-hover{
    background-color: #d3d3d3 !important;
}

/* lightblue */

.select-lightblue .ui-selectonemenu-panel{
    box-shadow: 0 0 0 .05rem var(--color-lightblue) !important;
}

/* label seleccionado */
.select-lightblue .ui-selectonemenu .ui-selectonemenu-label{
    border: 2px solid var(--color-lightblue) !important;
    border-right: none !important;
}

/* flecha desplegable container */
.select-lightblue .ui-selectonemenu .ui-selectonemenu-trigger{
    border-top: 2px solid var(--color-lightblue) !important;
    border-bottom: 2px solid var(--color-lightblue) !important;
    border-right: 2px solid var(--color-lightblue) !important;
}

/* flecha desplegable */
.select-lightblue .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon{
    color: var(--color-lightblue) !important;
}

/* filtro busqueda input */
[id$="select-lightblue_panel"] .ui-selectonemenu-filter-container .ui-selectonemenu-filter.ui-inputfield{
    border-radius: .25rem !important;
}

/* filtro busqueda focus */
[id$="select-lightblue_panel"] .ui-selectonemenu-filter-container .ui-selectonemenu-filter.ui-inputfield:focus{
    border-color: var(--color-lightblue) !important;
}

/* filtro busqueda icono */
[id$="select-lightblue_panel"] .ui-selectonemenu-filter-container .ui-icon{
    color: var(--color-lightblue) !important;
}

/* contenedor nivel 1 de los items desplegados */
[id$="select-lightblue_panel"] .ui-selectonemenu-items-wrapper{
    max-width: 90vw;
}

/* items deplegable container nivel 2 */
[id$="select-lightblue_panel"] .ui-selectonemenu-items{
    background-color: var(--color-white-bold);
    border-left: 1px solid var(--color-light-grey);
    height: fit-content !important;
}

/* item del desplegale */
[id$="select-lightblue_panel"] .ui-selectonemenu-items .ui-selectonemenu-item{
    white-space: normal;
    line-height: 1.25;
}

/* list item desplegable seleccionado */
[id$="select-lightblue_panel"] .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight{
    background-color: var(--color-lightblue) !important;
}

/* list item desplegable hover */
[id$="select-lightblue_panel"] .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-hover{
    background-color: #d3d3d3 !important;
}

/* Scrollbar */

/* color nuevo, agregar el selector */

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

/* Estilo del track (pista) de la barra de desplazamiento */
[id$="select-orange_panel"] .ui-selectonemenu-items-wrapper::-webkit-scrollbar-track,
[id$="select-lightblue_panel"] .ui-selectonemenu-items-wrapper::-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$="select-orange_panel"] .ui-selectonemenu-items-wrapper::-webkit-scrollbar-thumb,
[id$="select-lightblue_panel"] .ui-selectonemenu-items-wrapper::-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$="select-orange_panel"] .ui-selectonemenu-items-wrapper::-webkit-scrollbar-thumb:hover,
[id$="select-lightblue_panel"] .ui-selectonemenu-items-wrapper::-webkit-scrollbar-thumb:hover{
    background-color: #555; /* Cambia el color al pasar el cursor */
}

/*-------- selectOneButton --------*/

/* IMPORTANTE */

/* se aplica en un contenedor superior al <selectOneButton> y en el propio <selectOneButton> */
/*
    <p:outputPanel styleClass="select-btn-base select-btn-orange">
        <p:selectOneButton styleClass="select-btn-base select-btn-orange"/>
    </p:outputPanel>
*/

/* AJUSTES GENERALES */

/* container */
.select-btn-base .ui-selectonebutton{
    border: 0 !important;
}

/* boton interno */
.select-btn-base .ui-selectbooleanbutton,
.select-btn-base .ui-buttonset:not(.ui-splitbutton)>.ui-button{
    font-size: 1rem !important;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem;
    border: 0 !important;
}

/* boton interno izquierdo (primero) */
.select-btn-base .ui-selectbooleanbutton,
.select-btn-base .ui-buttonset:not(.ui-splitbutton)>.ui-button:first-child{
    border-radius: 1.5rem 0 0 1.5rem;
    box-shadow: 0 5px 5px 0 #00000040;
}

/* boton interno derecho (segundo) */
.select-btn-base .ui-selectbooleanbutton,
.select-btn-base .ui-buttonset:not(.ui-splitbutton)>.ui-button:last-child{
    border-radius: 0 1.5rem 1.5rem 0;
    box-shadow: 0 5px 5px 0 #00000040;
}

/* AJUSTES ESPECIFICOS */

/* orange */

.select-btn-orange .ui-selectbooleanbutton,
.select-btn-orange .ui-buttonset:not(.ui-splitbutton)>.ui-button:first-child{
    border-right: 2px solid var(--color-orange) !important;
}

/* focus */
.select-btn-orange .ui-selectbooleanbutton.ui-state-active,
.select-btn-orange .ui-buttonset:not(.ui-splitbutton)>.ui-button.ui-state-active{
    background-color: var(--color-orange) !important;
    color: var(--color-white-bold) !important;
}

/* hover */
.select-btn-orange .ui-selectbooleanbutton.ui-state-active,
.select-btn-orange .ui-buttonset:not(.ui-splitbutton)>.ui-button.ui-state-active:hover{
    background-color: var(--color-orange-hover) !important;
}

/* lightblue */

.select-btn-lightblue .ui-selectbooleanbutton,
.select-btn-lightblue .ui-buttonset:not(.ui-splitbutton)>.ui-button:first-child{
    border-right: 2px solid var(--color-lightblue) !important;
}

/* focus */
.select-btn-lightblue .ui-selectbooleanbutton.ui-state-active,
.select-btn-lightblue .ui-buttonset:not(.ui-splitbutton)>.ui-button.ui-state-active{
    background-color: var(--color-lightblue) !important;
    color: var(--color-white-bold) !important;
}

/* hover */
.select-btn-lightblue .ui-selectbooleanbutton.ui-state-active,
.select-btn-lightblue .ui-buttonset:not(.ui-splitbutton)>.ui-button.ui-state-active:hover{
    background-color: var(--color-lightblue) !important;
}