#reservas{
    width: 100%;
}
#reservas h2{
    text-align: center;
}
#disponibles{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#disponibles p{
    display: block;
    margin: 0;
    font-size: larger;
}
#lugaresRestantes{
    font-size: larger;
}

#botonReservar{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#botonReservar button{
    width: 60%;
    color: #fff;
    background-color: green;
    height: 50px;
    border-radius: 25px;
    border: none;
}
#btnReservar{
    font-size: 1.5rem;
}
#btnReservar.cancelar{
    background-color:#c62828;
}

.copas {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;

    justify-items: center;
    align-items: center;

    margin-top: 25px;
}


.copa{

    width:100%;

    display:flex;

    justify-content:center;
    align-items:center;

    opacity:.25;

    transition:opacity .3s ease;
}

.copa img{

    width:40px;

    height:auto;

    display:block;

}

.copa.ocupada{

    opacity:1;

    transform:scale(1.15);

}

.form-reserva{

    display:flex;
    flex-direction:column;
    gap:12px;

    margin-top:20px;

}

.form-reserva input{

    width:100%;
    padding:12px;

    border-radius:10px;
    border:1px solid #555;

    font-size:1rem;

}

.oculto{
    display:none;
}


#btnConfirmar{

    padding:14px;

    border:none;
    border-radius:10px;

    cursor:pointer;

}

/*==========================================
TOAST
==========================================*/

#mensajeReserva{

    position:fixed;

    left:50%;
    bottom:30px;

    transform:translateX(-50%) translateY(120px);

    min-width:280px;
    max-width:90%;

    padding:16px 22px;

    border-radius:12px;

    color:#fff;

    text-align:center;

    font-weight:600;

    opacity:0;

    transition:.35s ease;

    z-index:9999;

    pointer-events:none;

}

/* Visible */

#mensajeReserva.visible{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

/* Éxito */

#mensajeReserva.exito{

    background:#2e7d32;

}

/* Error */

#mensajeReserva.error{

    background:#c62828;

}
#btnConfirmar{

    transition:.25s;

}

#btnConfirmar:disabled{

    opacity:.6;

    cursor:not-allowed;

}
/*==========================================
VALIDACIÓN
==========================================*/

.form-reserva input{

    transition:.25s;

}

.form-reserva input.error{

    border:2px solid #c62828;

    box-shadow:0 0 10px rgba(198,40,40,.25);

}