/* CONTENIDO reservar varios */
.content .varios {
    background-color: var(--primary100);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    padding: 20px;
}
.content .varios h2 {margin-bottom: 10px; color: var(--primary900);}
.content .varios .visibilidad,
.content .varios .select,
.content .varios .items-juegos {grid-column: span 4;}
.content .varios .select .select-games,
.content .varios .select .list > h3 {color: var(--primary800);}
.content .varios .select .select-games ul {list-style: none;}
.content .varios .select .select-games > ul,
.content .varios .select .list > ul {color: var(--primary50);}

/* CONTENIDO reservar varios form */
.content .varios .visibilidad {padding: 10px 0;}
.content .varios .visibilidad form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.content .varios .visibilidad form .input {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.content .varios .visibilidad form .group .tiempo {display: flex; gap: 10px;}
.content .varios .visibilidad form .input input {
    border: 1px solid var(--secundary800);
    border-radius: 10px;
    padding: 10px;
}
.content .varios .visibilidad .input input[type="submit"] {
    width: 150px;
    background-color: var(--primary500);
    color: var(--primary50);
    cursor: pointer;
    transition: 0.3s;
}
.content .varios .visibilidad .input input[type="submit"]:hover {background-color: var(--primary600);}

/* CONTENIDO reservar varios lista */
.content .varios .select {
    background-color: var(--primary400);
    border-radius: 10px;
    padding: 10px;
    position: relative;
}
.content .varios .select .list {
    height: calc(100vh - 320px);
    overflow-y: auto;
    margin-bottom: 20px;
}
.content .varios .select ul {padding-left: 20px; color: var(--primary900);}
.content .varios .select > a {
    position: absolute;
    left: 10px;
    bottom: 10px;
    text-decoration: none;
    padding: 8px;
    background-color: var(--primary50);
    color: var(--secundary800);
    border: 1px solid var(--secundary800);
    border-radius: 10px;
    transition: 0.3s;
}
.content .varios .select > a:hover {background-color: var(--primary600); color: var(--primary50);}

/* CONTENIDO reservar varios items */
.content .varios .items-juegos {padding: 10px 0;}
.content .varios .items-juegos h2 {display: inline-block; margin-right: 10px;}
.content .varios .items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100vh - 270px);
    overflow-y: auto;
}
.content .varios .items-juegos .items .item {
    display: flex;
    align-content: center;
    align-items: center;
    gap: 10px;
    background-color: var(--primary300);
    color: var(--secundary700);
    border: 1px solid var(--secundary800);
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.content .varios .items-juegos .items .item:hover,
.content .varios .items-juegos .items .item.select {background-color: var(--primary500); color: var(--primary50);}
.content .varios .items-juegos .items .item .img {width: 70px; height: 70px;}
.content .varios .items-juegos .items .item .img img {width: 100%; height: 100%;}