* {box-sizing: border-box;}
body {background-color: #eee;font-family: 'Open Sans', sans-serif !important;}
.container {position: relative;}
#logout {font-size: 12px;color: white;white-space: nowrap;}
#logout a {color: white;display: inline-block;text-decoration: underline;text-underline-offset: 0.2em;text-decoration-style: dotted;text-decoration-thickness: 0.05em;}
#logout a:hover,#logout a:active,#logout a:focus {text-decoration: none;opacity: 0.8;}
h1.titulo {text-align: center;font-weight: bold;background-color: #563d7c;color: white;padding: 1.7em 0 1em;margin: 0;font-size: 28px;}
#grid #detalle {text-align: left;font-size: 14px;display: flex;flex: 0 0 100%;flex-wrap: nowrap;flex-direction: row;align-items: flex-start;}
#grid #detalle .detalle-viendo {vertical-align: middle;line-height: 1;display: inline-block;line-height: 20px;background-color: hsl(0 0% 86% / 1);border-radius: 4px 0 0 4px;padding: 6px 10px;}
#main {text-align: center;display: flex;justify-content: center;align-items: flex-start;align-content: flex-start;flex-wrap: nowrap;flex-direction: row;}
#aside {width: 320px;position: relative;padding: 1rem 1rem 1rem 0;height: auto;bottom: 0;margin-right: 1rem;text-align: left;}
#grid {text-align: center;position: relative;width: 920px;text-align: left;vertical-align: top;gap: 2rem 1%;padding: 1rem 0 0;justify-content: space-between;flex-wrap: wrap;*/}
#page_header_right_content {position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.home-centered {width: 100%;text-align: center;}

#clear-filtro {display: inline-block;position: relative;border-radius: 0 4px 4px 0;padding: 10px 6px;line-height: 12px;font-size: 11px;font-weight: 600;cursor: pointer;vertical-align: middle;text-align: center;background-color: hsl(0 0% 75% / 1);margin: 0;}
#clear-filtro:hover {background-color: hsl(0 0% 66% / 1);}
#clear-filtro:active {background-color: hsl(0 0% 60% / 1);}
#clear-filtro > span {top: 2px;}
#temas {margin: 0 0 5px;max-height: 400px;overflow: auto;}
#temas .tema {display: inline-block;background-color: #ddd;padding: 3px 5px;margin: 1px 5px 0px 0;cursor: pointer;color: #000;font-size: 11px;font-weight: bold;font-size: 11px;border-radius: 5px;white-space: pre;text-align: left;overflow: hidden;}

#temas .tema .gris {color: #888;}
#temas .tema:hover {background-color: #ccc;}
#temas .tema.on {background-color: hsl(263.81deg 34.05% 36.27%);color: white;}
#temas .tema.on:hover {background-color: hsl(264 34% 30% / 1);}
#temas .tema:before {}
#filtros-ver-mas {display: none;}
#random {position: relative;display: inline-block;white-space: nowrap;font-weight: bold;text-decoration: none;font-size: 11px;background: #553d7b;color: white;padding: 5px 9px;border-radius: 4px;margin: 2em 0 0;width: auto;}

#random:hover {background-color: #452d6b;}
#random:active {background-color: #351d5b;}
#random img {width: 1.3em;position: relative;top: 0px;}
#random .shuffle-white {display: none;}
#random:hover .shuffle {display: none;}
#random:hover .shuffle-white {display: inline-block;}

#grid h3 {background-color:#563d7c;color:white;font-size: 1rem;padding: 0.7rem 0.5rem;border-radius: 0.3rem;text-align: center;margin: 0;width: calc(100%);}

.inner-grid {display: flex;gap: 1rem;padding: 1rem 0 0;flex-wrap: wrap;margin: 0 0 3rem;justify-content: flex-start;}
#ultimos-subidos {}
#ultimos-leidos {}
#recomendaciones {}
/*#recomendaciones:not(:has(.grid-item)) {justify-content: center;}*/
#masleidos {}

#libros-por-materias {margin: 1rem 0 0;}
#libros-por-materias span.materia-cursando {display: inline-block;padding: 3px 5px;margin: 1px 5px 0px 0;font-size: 11px;border-radius: 5px;white-space: pre;font-weight: bold;overflow: hidden;cursor: pointer;}
#libros-por-materias span.materia-cursando i {display: none;margin-right: 0.4em;}
#libros-por-materias span.materia-cursando:hover {opacity: 0.9;}
#libros-por-materias span.materia-cursando.carrera-tdg {background-color:#ffbf4d;}
#libros-por-materias span.materia-cursando.carrera-pop {background-color:#e864b2;color:white;}
#libros-por-materias span.materia-cursando.carrera-tav {background-color:#067ac1;color:white;}

#libros-por-materias:has(span.materia-cursando.on) span.materia-cursando:not(.on) {background-color: #ddd;color:black;}
#seleccionarTodasMaterias {padding: 0.4em 0.5em;border-radius: 5px;width: 100%;color: #111;font-size: 14px;margin: 2px 0 0;border: 1px solid #ccc;background-color: transparent;font-size: 12px;}
#libros-por-materias span.materia-cursando.on i {display: inline-block;}
.grid-item {display: inline-block;padding: 0;width: calc(20% - 1rem);position: relative;background-color: #fff;position: relative;border-radius: 3px;}
.grid-item:HOVER {text-decoration: none;box-shadow: 0px 0px 3px rgb(0 0 0 / 50%);transition: 0.1s;}
.grid-item a {text-decoration: none;position: relative;}
.grid-item .tapa {padding: 0;width: 100%;height: auto;aspect-ratio: 4/5;display: block;object-fit: cover;position: relative;background-color: white;overflow: hidden;border-radius: 3px 3px 0 0;border-bottom: 1px solid #eee;    }
.grid-item .tapa-default {background: linear-gradient(45deg, #009688, #4CAF50);}
.grid-item .tapa-default:before {
    content: "EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV  EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV  EPAV EPAV EPAV EPAV EPAV EPAV EPAV EPAV  EPAV EPAV EPAV EPAV";
    position: absolute;top: 0;left: -15%;right: 0;bottom: 0;margin: auto;width: 130%;height: 120%;color: white;opacity: 0.08;line-height: 1.3;font-size: 20px;font-weight: 600;transform-origin: center center;transform: rotate(-10deg);word-break: break-all;}

.grid-item .tapa div {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;}
.grid-item .tapa div span:nth-of-type(1) {font-size: 130%;display: block;color: #888;font-weight: bold;display: none;}
.grid-item .tapa div span:nth-of-type(2) {font-size: 23px;display: block;color: #666;color: #FFFFFF;font-weight: 800;line-height: 1.1;}
.grid-item .date-created {position:absolute;top: 0;left: 50%;transform: translate(-50%,-30%);background-color: #ffffff;color:#000;padding:0.2em 0.5em;border-radius: 0.2em;font-size:11px;font-weight:bold;}
.grid-item h4 {font-size: 12px;line-height: 1.2;height: calc(13px * 3 * 1.2);overflow: hidden;text-wrap: pretty;margin-top: 0;padding-bottom: 3px;font-weight: bold;color: #444;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.grid-item h5 {text-align: left;font-size: 11px;margin-bottom: 0px;margin-top: 3px;color: #666;}
.grid-item .autor {position: relative;height: 1.4em;padding: 0.1em 0;display: inline-block;overflow: hidden;width: 100%;white-space: nowrap;text-overflow: ellipsis;}
.grid-item .autor .get-autor:hover, .grid-item .autor .get-autor2:hover {background-color: #eee;}
.grid-item .hover {display: none;opacity: 0;color: #222;font-size: 10px;position: absolute;bottom: 11px;font-weight: bold;text-transform: uppercase;}
.grid-item:hover .hover {opacity: 1;}
.grid-item .info {padding: 8px 8px 10px;}
#seleccionarAutor {padding: 0.4em 0.5em;border-radius: 5px;width: 100%;color: #111;font-size: 14px;margin: 8px 0;border: 1px solid #ccc;}
input#buscador {text-align: left;display: inline-block;width: 100%;border: 1px solid #ccc;border-radius: 5px;padding: 0.4em 0.5em;background-color: white;margin: 0;font-size: 14px;}
#documento-form {text-align: left;background-color: #FFFFFF;}
#documento-form .row {margin: 0;}
#documento-form .row > div {float: unset;margin: 10px auto;}
#buscador #clear-filtro:hover {background-color: #777;}
footer {text-align: center;margin-top: 100px;}
#advertencia {position: fixed;padding: 2em;z-index: 10;width: 100%;height: 100%;top: 0%;left: 0%;background: rgba(0,0,0,0.5);display: none;}
#advertencia.on {display: block;}
#advertencia h3 {margin: 0 0 0.5em;font-weight: bold;}
#advertencia > div {position: fixed;padding: 2em 2em 1.5em;width: 42%;top: 48%;left: 50%;transform: translateX(-50%) translateY(-50%);background: #fafafa;border-radius: 4px;box-shadow: 1px 1px 10px rgba(0,0,0,0.4);}
#advertencia > div ul {padding-left: 1em;max-height: 70vh;overflow: auto;}
#advertencia > div ul li {padding-bottom: 0.5em;}
#advertencia > div button {margin: 0;}
#up {position: fixed;right: 30px;bottom: 30px;background-color: #ccc;border-radius: 50%;padding: 13px 15px 17px;line-height: 1;font-size: 20px;width: 50px;cursor: pointer;z-index: 3;visibility: hidden;}
#up.on {visibility: visible;}
#up:hover {background-color: #c5c5c5;}
#up:active {background-color: #c0c0c0;}
@media screen and (min-width: 1500px) {
    #aside {width:360px;}
    #grid {width: 1060px;}
    #random {}
}

@media screen and (max-width: 768px) {
    #logout {font-size: 11px;right: 10px;position: relative;}
    #advertencia {left: 0;padding: 0;}
    #advertencia h3 {font-size: 20px;margin-bottom: 1em;}
    #advertencia > div {width: calc(100% - 2rem);transform: translateX(-50%) translateY(-50%);padding: 1.5em 1em;}
    #advertencia > div li {font-size: 12px;line-height: 1.5;text-wrap: pretty;}
    #main {flex-wrap: wrap;flex-direction: column;}
    #aside {width: 100%;position: relative;padding: 1rem 10px 0;max-height: 20vh;overflow: hidden;}
    #aside.on {max-height: 200vh;transition: 0.3s;transition-timing-function: ease-in-out;}
    #aside:after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 15vh;background: linear-gradient(0deg, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 100%);z-index: 1;}
    #aside.on:after {height: 0;transition: 0.2s;}
    #temas {max-height:25vh;/* overflow:auto; */}
    #temas .tema {margin: 1px 5px 1px 0;padding: 5px 5px;}
    #filtros-ver-mas {display: block;/* width: 100%; */margin: 0 auto;text-align: center;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);z-index: 1;font-weight: bold;font-size: 72%;background: #ccc;color: #444;padding: 0.7em 1.7em;border-radius: 0.3em;line-height: 1;border: 0;z-index: 2;/* border: 1px solid; */}
    #aside.on #filtros-ver-mas {opacity: 0;visibility: hidden;transition: 0.2s;}
    #random {position: relative;bottom: unset;left: unset;transform: unset;font-size: 11px;margin: 1em 0 0;}
    #ultimos-subidos {}
    #ultimos-subidos .grid-item:nth-child(9),
    #ultimos-subidos .grid-item:nth-child(10) {display:none;}
    #ultimos-leidos {}
    #ultimos-leidos .grid-item:nth-child(5) {display:none;}

    #masleidos {}
    #grid {padding: 0 10px;width: 100%;text-align: center;vertical-align: unset;margin: 2rem 0 0;overflow-x: hidden;}
    #buscador input {width: 80%;}
    .grid-item .tapa div span:nth-of-type(2) {font-size: 20px;}
    .grid-item .tapa:before {font-size: 17px;overflow: hidden;line-height: 1.4;}
    #grid #detalle {padding: 0;}
    .inner-grid {/* gap: 0.5rem; */}
    .grid-item {padding: 0px 0px 5px;margin: 0;min-height: 250px;width: calc(50% - 0.5rem);;text-align: left;}
    .grid-item h4 {font-size: 12px;}
    .grid-item .tapa {}
    .grid-item .info {position: relative;}
    #buscador #clear-filtro {left: 80%;}
}