html,
body {
    font-family: Arial, sans-serif;
    background-color: #f5f5ff;
    color: #FFFF;
    font-size: 16px;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

* {
    box-sizing: border-box;
    transition: all 0.35s ease-in-out;
}

.contenedor {
    width: 100vw;
    height: 100vh;
    padding: 1rem;
    overflow: hidden;
}

.imgTitle {
    object-fit: contain;
    height: 14vh;
    margin-bottom: .5rem;
}

.imgTitle.has-expanded-book {
    height: 8vh;
}

.shelf {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: calc(100vh - 2.5rem - 14vh);
    gap: 7px;
}

.shelf.has-expanded-book {
    transition: all 0.3s ease-in-out;
    height: calc(100vh - 2.5rem - 8vh);
}

.book {
    flex: 1;
    transition: all 0.6s ease-in-out;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: fill;
    display: flex;
    justify-content: center;
    align-items: start;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.88);
}

.book h4 {
    color: #fff;
    text-align: center;
    align-self: center;
    justify-self: center;
    writing-mode: vertical-lr;
}

.book.expanded {
    transition: all 0.6s ease-in-out;
    flex: 0 0 70vw;
    background-color: #dbdbdb;
    justify-content: left;
}

.book-content {
    flex: 1;
    position: relative;
    text-align: start;
    height: 100%;
    padding: 20px;
    display: none;
    font-size: .75rem;
    color: #343a40;
    background-color: #f0f0f0;
    border-radius: 0 8px 8px 0;
    transition: all 0.6s ease-in-out;
    cursor: default;
    overflow-y: auto;
}

li::marker {
    content: "→";
    color: #114579;
    margin-left: .5rem;
    font-weight: bold;
}

.book.expanded .book-content {
    display: block;
}

.parrafo {
    margin: 0;
}

.linkBoton {
    display: inline-block;
    padding: 5px 8px;
    background-color: #114579;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    max-width: 130px;
    margin-bottom: 1rem;
}

.linkBoton:hover {
    background-color: #0d3b5c;
    color: #FFFF;
}

/* Pacientes */
.pacientes {
    background-image: url(img/bg_login.jpg);
    background-position: left;
}

.telemedicinaIMG {
    object-fit: contain;
    width: 265px;
    height: auto;
}

.colApps {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.appIcon {
    object-fit: contain;
    width: 75px;
}

.appDownload {
    object-fit: contain;
    width: 125px;
}

.deviceImg {
    position: absolute;
    bottom: 0px;
    right: 10px;
    object-fit: contain;
    width: 250px;
}

/* Doctores */
.doctores {
    background-image: url(img/fondo2.png);
    background-position: left;
}

.expedienteImg {
    align-self: normal;
    object-fit: contain;
    height: fit-content;
    width: 225px;
    display: flex;
    justify-self: flex-end;
}

/* Clinicas */
.clinicas {
    background-image: url(img/bg_lab.jpg);
    background-position: left;
}

/* Universidades */
.universidades {
    background-image: url(img/banner_expAcademico.jpg);
    background-position: center;
}

.academicoIMG {
    position: absolute;
    top: 20px;
    right: 20px;
    object-fit: contain;
    width: 250px;
}

/* Estilos responsivos para tablet */
@media (max-width: 900px) {

    html,
    body {
        margin: 0;
        padding: 0;
        min-height: 100dvh;
        width: 100dvw;
        font-size: 15px;
    }

    .contenedor {
        width: 100dvw;
        min-height: 100dvh;
        overflow: hidden;
    }

    .imgTitle {
        height: 12dvh;
    }

    .imgTitle.has-expanded-book {
        height: 7dvh;
    }

    .shelf {
        flex-direction: column;
        height: calc(100dvh - 2.5rem - 12dvh);
        gap: 10px;
        flex-wrap: nowrap;
    }

    .shelf.has-expanded-book {
        height: calc(100dvh - 2.5rem - 7dvh);
    }

    .book {
        flex: 1 1 100%;
        height: fit-content;
        border-radius: 10px;
    }

    .book h4 {
        margin-top: 10px;
        writing-mode: horizontal-tb;
        text-align: center;
        justify-self: center;
    }

    .book.expanded {
        transition: all 0.6s ease-in-out;
        display: block;
        justify-content: left;
    }

    .book.expanded .book-content {
        height: fit-content;
        border-radius: 0 0 10px 10px;
    }

    .book-content {
        flex: 1;
        padding: 15px;
        min-height: 450px;
        max-height: 600px;
    }

    .deviceImg {
        width: 150px;
    }

    .expedienteImg {
        width: calc(90% / 3 );
    }

    .academicoIMG {
        position: absolute;
        width: 150px;
        top: auto;
        bottom: 10px;
    }
}