/*====================================================================
MAXALUD
AGENDA MÉDICA
10-schedule.css
====================================================================*/

#scheduleContainer {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

#scheduleContainer h4 {
    margin: 28px 0 16px;

    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 500;

    color: #3D4652;
}

/*====================================================================
CONTENEDOR DE HORAS
====================================================================*/

#scheduleContainer .mx-schedule {

    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 10px;

    width: 100%;
}

/*====================================================================
BOTONES DE HORA
====================================================================*/

#scheduleContainer button {
    width: 100%;
    min-height: 44px;

    padding: 8px 12px;

    border: 1px solid #D9DEE8;
    border-radius: 8px;

    background: #FFFFFF;

    color: #3D4652;

    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

/*====================================================================
HOVER
====================================================================*/

#scheduleContainer button:hover {
    border-color: #0D2A94;
    color: #0D2A94;

    transform: translateY(-1px);
}

/*====================================================================
HORA SELECCIONADA
====================================================================*/

#scheduleContainer button.selected,
#scheduleContainer button.active,
#scheduleContainer button.mx-time-selected {
    background: #0D2A94;

    border-color: #0D2A94;

    color: #FFFFFF;
}

/*====================================================================
HORA DESHABILITADA
====================================================================*/

#scheduleContainer button:disabled {
    opacity: .45;

    cursor: not-allowed;

    transform: none;
}

/*====================================================================
RESPONSIVE
====================================================================*/

@media (max-width: 600px) {

    #scheduleContainer {
        max-width: 100%;
    }

    #scheduleContainer .mx-schedule-grid,
    #scheduleContainer .schedule-grid,
    #scheduleContainer .mx-time-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

}