/* =====================================================================
   Franja de disponibilidad bajo el número de cada día del calendario
   y su leyenda. El ancho y el color indican cuántas veces cabe la
   selección del cliente en los tramos libres de las distintas cabinas.
   ===================================================================== */

:root {
    --lsrm-dispo-alta: #2e9e4f;
    --lsrm-dispo-media: #e8b21c;
    --lsrm-dispo-baja: #d64545;
    --lsrm-dispo-nula: #dee2e6;
}

#calendar .lsrm-dia-numero {
    display: block;
    line-height: 1.1;
}

#calendar .lsrm-dispo {
    display: block;
    height: 4px;
    margin: 5px auto 0;
    border-radius: 2px;
}

/* La selección cabe 6 o más veces */
#calendar .lsrm-dispo--alta {
    width: 35%;
    background-color: var(--lsrm-dispo-alta);
}

/* La selección cabe entre 3 y 5 veces */
#calendar .lsrm-dispo--media {
    width: 35%;
    background-color: var(--lsrm-dispo-media);
}

/* La selección cabe una o dos veces */
#calendar .lsrm-dispo--baja {
    width: 35%;
    background-color: var(--lsrm-dispo-baja);
}

/* Sin disponibilidad */
#calendar .lsrm-dispo--nula {
    width: 50%;
    background-color: var(--lsrm-dispo-nula);
}

/* Sobre el día seleccionado el fondo es azul y hay que mantener contraste */
#calendar .selected-date .lsrm-dispo {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

/* Leyenda bajo la caja del calendario */
.lsrm-dispo-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.9rem;
    margin-top: 0.6rem;
    color: #6c757d;
    font-size: 0.75rem;
    line-height: 1.3;
}

.lsrm-dispo-leyenda__titulo {
    color: var(--bs-primary);
    font-weight: 700;
}

.lsrm-dispo-leyenda__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* Ancho fijo para que las muestras queden alineadas entre sí */
.lsrm-dispo-leyenda__pista {
    display: inline-flex;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
}

.lsrm-dispo-leyenda__barra {
    height: 4px;
    border-radius: 2px;
}

.lsrm-dispo-leyenda__barra--alta {
    width: 21px;
    background-color: var(--lsrm-dispo-alta);
}

.lsrm-dispo-leyenda__barra--media {
    width: 21px;
    background-color: var(--lsrm-dispo-media);
}

.lsrm-dispo-leyenda__barra--baja {
    width: 21px;
    background-color: var(--lsrm-dispo-baja);
}

.lsrm-dispo-leyenda__barra--nula {
    width: 21px;
    background-color: var(--lsrm-dispo-nula);
}