/*=================================
=            Variables            =
===================================*/

:root {
    --calendario-dorado: #b39b73;
    --calendario-gris-oscuro:#777c80;
    --calendario-gris-claro:#d5dce0;
}

/*======  End of Variables  ======*/


.acuarel-calendario-wrapper div.ui-datepicker {
    font-size:20px !important;
    width:98% !important;
}

#calendario-bchm .ui-datepicker-inline {
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

#calendario-bchm .ui-datepicker-header {
    border-radius: 0 !important;
    background: white !important;
    color: var(--calendario-gris-oscuro) !important;
    border: none;
    padding: 0 !important;

    display: flex;
    justify-content: space-between;
}

#calendario-bchm a:hover {
    cursor:default !important;
}

.ui-datepicker-calendar {
    margin: 0 !important;
    border: 0 !important;
}

/*=============================================
=            Estilos de las flechas            =
=============================================*/

.ui-datepicker-prev.ui-state-hover, .ui-datepicker-next.ui-state-hover { /*AL PONER EL RATÓN ENCIMA DE LAS FLECHAS DE LOS MESES*/
    transition: all .3s ease;
    background: var(--calendario-gris-claro) !important;
    border: none !important;
    border-radius: 0 !important;
    border-color: 0 !important;
    color: var(--calendario-gris-oscuro) !important;
}

.ui-datepicker-prev.ui-state-hover span, .ui-datepicker-next.ui-state-hover span {
    color: var(--calendario-gris-oscuro) !important;
}

.ui-datepicker-prev, .ui-datepicker-next {
    top: 0 !important;
    bottom: 0 !important;
}

.ui-datepicker-prev {
    left: 0 !important;
}

.ui-datepicker-next {
    right: 0 !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: none !important; /* Oculta los símbolos originales */
}

.ui-datepicker-next,
.ui-datepicker-prev {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ui-datepicker-prev::before {
    font-family: "Font Awesome 5 Free";
    content: "\f104";
    font-weight: 900;

    color: var(--calendario-gris-oscuro) !important;
}
  
.ui-datepicker-next::before {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;

    color: var(--calendario-gris-oscuro) !important;
}

.ui-corner-all.ui-state-disabled::before{
    display: none !important;
}

.ui-state-default {
    padding: .25rem .5rem 0 0 !important;
}

/*=====  End of Estilos de las flechas  ======*/

td > .ui-state-default {
    border: none !important;
    background: white !important;
}

a.ui-state-default {
    color: var(--calendario-gris-oscuro) !important;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled {
    opacity: 100% !important;
}

span.ui-state-default {
    opacity: 100% !important;
    background: #d5dce0 !important;
    color: var(--calendario-gris-oscuro) !important;
}

.ui-datepicker-unselectable > * {
    color: black !important;
}

.ui-datepicker-calendar td .ui-state-default.ui-state-hover {
    color: var(--calendario-gris-oscuro) !important;
}

.ui-datepicker-calendar thead {
    color:var(--calendario-gris-oscuro) !important;
}

#calendario-bchm td {
    max-height: 50px !important;
    max-width: 50px !important;
}

#calendario-bchm td > * {
    height: 60px !important;
}

/*=============================================
=            Estilos de la leyenda            =
=============================================*/

.calendario-leyenda {
    margin-top: 1rem !important;
    list-style: none !important;

    display: flex;
    justify-content: flex-start;
    gap: 2rem;
}

.calendario-leyenda li {
    display: flex;
    align-items: center;
}

.calendario-leyenda li span {
    display: inline-block;
    width: 12px !important;
    height: 12px !important;
    margin-right: 5px !important;
    border: 2px solid black !important;
}

.dia-actual {
    background-color:var(--calendario-gris-oscuro);
}

.barco-ocupado {
    background-color:var(--calendario-gris-claro);
}	

/*=====  End of Estilos de la leyenda  ======*/