/* IMPORTANTE: utilizar una de las opciones (medium o large) y el color elegido */

/*-- AJUSTES GENERALES --*/

/*------ SIZE GRANDE --------*/

/* tamaño mas grande */
.datePicker-large .ui-datepicker{
    border: none !important;
    border-radius: 1rem;
    width: 25rem;
}

/* header */
.datePicker-large .ui-datepicker .ui-datepicker-header{
    padding: .5rem 0 !important;
}

/* contenedor select mes y año */
.datePicker-large .ui-datepicker .ui-datepicker-title{
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* selects mes y año */
.datePicker-large .ui-datepicker select.ui-datepicker-month,
.datePicker-large .ui-datepicker select.ui-datepicker-year{
    height: 2rem;
    border: none !important;
    border-radius: .5rem;
    font-size: 1rem;
    text-align: center;
    max-height: 20rem;
}

/* celdas numeros habilitados */
.datePicker-large .ui-datepicker .ui-datepicker-calendar td a{
    font-size: 1rem;
}

/* celdas numeros deshabilitados */
.datePicker-large .ui-datepicker .ui-datepicker-calendar td span{
    font-size: .9rem;
}

/* scrollbar WebKit (Chrome, Safari) */
.datePicker-large select::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
}

.datePicker-large select::-webkit-scrollbar-thumb {
    background-color: #777; /* Color del bloque */
    border-radius: 1rem; /* Bordes redondeados */
    border: 3px solid var(--color-white-bold); /* Borde del bloque */
}

.datePicker-large select::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.datePicker-large select::-webkit-scrollbar-track {
    border-radius: 0 .5rem .5rem 0 !important;
    background-color: var(--color-white-bold); /* Color de fondo de la pista */
}

/*------- SIZE MEDIANO -------*/

.datePicker-medium .ui-datepicker{
    border: none !important;
    border-radius: 1rem;
}

/* header */
.datePicker-medium .ui-datepicker .ui-datepicker-header{
    padding: .4rem 0 !important;
}

/* contenedor select mes y año */
.datePicker-medium .ui-datepicker .ui-datepicker-title{
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* selects mes y año */
.datePicker-medium .ui-datepicker select.ui-datepicker-month,
.datePicker-medium .ui-datepicker select.ui-datepicker-year{
    height: 2rem;
    border: none !important;
    border-radius: .5rem;
    font-size: .8rem;
    text-align: center;
    max-height: 15rem;
}

/* scrollbar WebKit (Chrome, Safari) */
.datePicker-medium select::-webkit-scrollbar {
    width: .75rem;
    height: .75rem;
}

.datePicker-medium select::-webkit-scrollbar-thumb {
    background-color: #777; /* Color del bloque */
    border-radius: 1rem; /* Bordes redondeados */
    border: 2px solid var(--color-white-bold); /* Borde del bloque */
}

.datePicker-medium select::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.datePicker-medium select::-webkit-scrollbar-track {
    border-radius: 0 .5rem .5rem 0 !important;
    background-color: var(--color-white-bold); /* Color de fondo de la pista */
}

/*-- AJUSTES ESPECIFICOS --*/

/*--------- orange -------------*/

/* contenedor principal */
.datePicker-orange .ui-datepicker{
    background: linear-gradient(180deg, #ffa238,#e5842a);
}

.datePicker-orange select option:focus{
    background-color: var(--color-orange) !important;
}

.datePicker-orange .ui-datepicker select.ui-datepicker-month:focus,
.datePicker-orange .ui-datepicker select.ui-datepicker-year:focus{
    border: none !important;
    outline: none !important;
}

/* flechas de navegacion */
.datePicker-orange .ui-datepicker-prev,
.datePicker-orange .ui-datepicker-next{
    color: black !important;
}

.datePicker-orange .ui-datepicker-prev:hover,
.datePicker-orange .ui-datepicker-next:hover{
    color: var(--color-orange-hover) !important;
}

/* encabezado dias de la semana */
.datePicker-orange .ui-datepicker .ui-datepicker-calendar th{
    font-weight: bold;
    color: var(--color-blue-title);
}

/* celdas numeros habilitados */
.datePicker-orange .ui-datepicker .ui-datepicker-calendar td a{
    color: black;
}

.datePicker-orange .ui-datepicker .ui-datepicker-calendar td a:hover{
    background-color: #D7791B;
}

/* dia actual */
.datePicker-orange .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a{
    background: linear-gradient(180deg, #ffa238,#e5842a);
}

/* dia seleccionado */
.datePicker-orange .ui-datepicker .ui-datepicker-calendar td a.ui-state-active{
    background-color: var(--color-orange-hover);
}

/*------ TIME PICKER --------*/

/*--  AJUSTES GENERALES --*/

/* contenedor */
.timePicker-base .ui-datepicker{
    border-radius: .5rem;
    min-width: fit-content;
    width: fit-content;
}

/* time picker */
.timePicker-base .ui-timepicker{
    min-width: fit-content;
    width: fit-content;
}

/* hora picker */
.timePicker-base .ui-hour-picker{
    margin: 0 !important;
}

/*-- AJUSTES ESPECIFICOS --*/

/* flechas subir y bajar */
.timePicker-orange .ui-picker-up,
.timePicker-orange .ui-picker-down{
    color: var(--color-orange) !important;
}

.timePicker-orange .ui-picker-up:hover,
.timePicker-orange .ui-picker-down:hover{
    color: var(--color-orange-hover) !important;
}

/*-- MES - AñO --*/

/*-- AJUSTES GENERALES --*/

/*-- SIZE MEDIANO --*/

.monthPicker-medium .ui-datepicker{
    border: none !important;
    border-radius: 1rem;
}

/* header */
.monthPicker-medium .ui-datepicker .ui-datepicker-header{
    padding: .4rem 0 !important;
}

/* contenedor select año */
.monthPicker-medium .ui-datepicker .ui-datepicker-title{
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* select año */
.monthPicker-medium .ui-datepicker .ui-datepicker-title .ui-datepicker-year{
    margin: 0;
    height: 2rem;
    border: none !important;
    border-radius: .5rem;
    font-size: 1rem;
    text-align: center;
    max-height: 15rem;
}

/* scrollbar WebKit (Chrome, Safari) */
.monthPicker-medium select::-webkit-scrollbar {
    width: .75rem;
    height: .75rem;
}

.monthPicker-medium select::-webkit-scrollbar-thumb {
    background-color: #777; /* Color del bloque */
    border-radius: 1rem; /* Bordes redondeados */
    border: 2px solid var(--color-white-bold); /* Borde del bloque */
}

.monthPicker-medium select::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.monthPicker-medium select::-webkit-scrollbar-track {
    border-radius: 0 .5rem .5rem 0 !important;
    background-color: var(--color-white-bold); /* Color de fondo de la pista */
}

/*-- AJUSTES ESPECIFICOS --*/

/*--------- orange -------------*/

/* contenedor principal */
.monthPicker-orange .ui-datepicker{
    background: linear-gradient(180deg, #ffa238,#e5842a);
}

.monthPicker-orange select option:focus{
    background-color: var(--color-orange) !important;
}

/* select año */
.monthPicker-orange .ui-datepicker .ui-datepicker-year:focus{
    border: none !important;
    outline: none !important;
}

/* flechas de navegacion */
.monthPicker-orange .ui-datepicker-prev,
.monthPicker-orange .ui-datepicker-next{
    color: black !important;
}

.monthPicker-orange .ui-datepicker-prev:hover,
.monthPicker-orange .ui-datepicker-next:hover{
    color: var(--color-orange-hover) !important;
}

/* celdas numeros habilitados */
.monthPicker-orange .ui-datepicker .ui-monthpicker a{
    color: black;
}

.monthPicker-orange .ui-datepicker .ui-monthpicker a:hover{
    background-color: #D7791B;
}

/* dia seleccionado */
.monthPicker-orange .ui-datepicker .ui-monthpicker a.ui-state-active{
    background-color: var(--color-orange-hover);
}