/********************************************/
/*****	Estilos calendario datepiker	*****/
/********************************************/

:root {
/* 	texts	*/
	--text-scale-cal: 1;
	
/*	Colours*/
	--main-bg-color-cal: #FFF;
	--main-details-color-cal: #D3135A;
	--second-details-color-cal-2: #F7F8FB;
	--main-text-cal-color: #000;
	--second-text-cal-color1: #667790;
	--second-text-cal-color2: #EFF2F7;
}

/*-------------------------*/
/*---	General style	---*/
/*-------------------------*/

#datepicker{
	margin: auto;
    width: fit-content;
}

.ui-widget-content, .ui-widget-header {
    background: var(--main-bg-color-cal);
    color: var(--main-text-cal-color);
    font-weight: normal;
}

.ui-widget.ui-widget-content {
	border: none;
}

/*-------------------------*/
/*---	Header style	---*/
/*-------------------------*/
.ui-widget-header {
	border: none;
    color: var(--main-details-color-cal);
}
.ui-widget-header .ui-icon {
	background-image: url(images/ui-icons_D3135A_256x240.png);
}
.ui-state-hover .ui-icon,.ui-state-focus .ui-icon {
	background-image: url(images/ui-icons_ffffff_256x240.png);
}
.ui-icon-circle-triangle-e {
    background-position: -32px 0;
}
.ui-icon-circle-triangle-w {
    background-position: -96px 0;
}
.ui-datepicker-next, .ui-datepicker-prev{
	background-color: var(--second-details-color-cal-2);
}
.ui-state-hover,  .ui-datepicker-next:hover,  .ui-datepicker-prev:hover{
	background-color: var(--main-details-color-cal);
	border: none;	
}

/*---------------------------------*/
/*---	Calendar days style		---*/
/*---------------------------------*/

#cntTabCenter2 .ui-datepicker .diaLibre a, #cntTabCenter2 .ui-datepicker .diaPasado span, #cntTabCenter2 .ui-datepicker .diaOcupado span {
	background: var(--main-bg-color-cal);
	border: none;
	padding: .4em;
	text-align: center;
	opacity: 1;
}

#cntTabCenter2 .ui-datepicker .diaLibre a {
    color: var(--main-text-cal-color);
}

#cntTabCenter2 .ui-datepicker .diaOcupado span, #cntTabCenter2 .ui-datepicker .diaPasado span {
    color: var(--second-text-cal-color1);
}
#cntTabCenter2 .ui-datepicker .diaLibre .ui-state-hover, 
#cntTabCenter2 .ui-datepicker .diaLibre .ui-state-active {
	background-color: var(--main-details-color-cal);
	color: var(--main-bg-color-cal);
	border-radius: 16px;
}

#calendarioDia, #calendarioTarde {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

#calendarioDia span,
#calendarioTarde span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5em .75em;
    border: 1px solid var(--tables-border-row);
    border-radius: 5px;
    margin: 0;
}


@media (hover: hover) {
    #calendarioDia span:not(.body-franja-ocupada):hover,
    #calendarioTarde span:not(.body-franja-ocupada):hover {
        background-color: var(--main-details-color-cal);
        color: var(--main-bg-color-cal);
    }
}

#calendarioDia span:not(.body-franja-ocupada).selected,
#calendarioTarde span:not(.body-franja-ocupada).selected {
	background-color: var(--main-details-color-cal);
    color: var(--main-bg-color-cal);
}

@media (max-width: 355px) {
	#cntTabCenter2 .ui-datepicker {
		display: contents !important;
	}
	#datepicker {
	    width: auto; 
	}
	#datepicker th, #datepicker td{
	    padding: 0 2%; 
	}
	#cntTabCenter2 .ui-datepicker .diaLibre a, #cntTabCenter2 .ui-datepicker .diaPasado span, #cntTabCenter2 .ui-datepicker .diaOcupado span {
	    padding: .2em;
	    width: 10vw; 
	}
}

.body-franja-ocupada {
	background-color: var(--second-text-cal-color1);
    color: var(--main-bg-color-cal);
}

.ui-datepicker-prev, .ui-datepicker-next, .body-franja-libre {
	cursor: pointer;
}