#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Transparencia */
    z-index: 90;
    top: 0px;
    left: 0px;
}
.PU_showRes {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    z-index: 91;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    background-color: #fff;
    padding: 20px; /* Espacio interior */
    font-family: "Roboto Mono", serif;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
}
.showRes {
    background-color: #ffffff;
    padding: 20px; /* Más padding para mejorar la presentación */
    font-family: "Roboto Mono", serif;
    font-size: 14px; /* Tamaño de fuente acorde al sitio */
    line-height: 1.7; /* Mejorar la legibilidad */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    color: #666666;
}
.titBoxRes {
    font-size: 18px; /* Tamaño de fuente acorde al sitio */
    font-weight: bold;
    margin-bottom: 10px; /* Espacio debajo del título */
    color: #000; /* Color del título */
    font-family: "Aldrich", sans-serif; /* Tipografía del título */
}
.res {
    display: flex;
    align-items: center;
    margin-left: 0px; /* Eliminado el margen izquierdo */
    padding: 10px; /* Padding aumentado */
    background-color: #f9f9f9; /* Fondo suave */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave para el hover */
    margin-bottom: 10px; /* Espacio entre resultados */
}
.res:hover {
    background-color: #f1f1f1; /* Fondo un poco más oscuro al hacer hover */
}
.res a {
    text-decoration: none; /* Sin subrayado en los enlaces */
    color: #009fd9; /* Color de texto acorde al sitio */
}
.res a:hover {
    text-decoration: underline; /* Subrayado al hacer hover */
    color: #316dca; /* Color de hover acorde al sitio */
}
.res-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 4px;
    object-fit: cover;
}
.res-details {
    flex: 1; /* Ocupa el resto del espacio */
}
.res-date {
    color: #999; /* Color más claro para la fecha */
    font-size: 12px;
    margin-top: 5px; /* Espacio superior para separar del título */
}
.recommended-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #091640; /* Color azul oscuro */
    font-family: "Aldrich", sans-serif; /* Tipografía del título */
}
.recommended-res {
    display: flex;
    align-items: center;
    margin-left: 0px;
    padding: 10px;
    background-color: #dcecff; /* Fondo azul claro */
    border: 1px solid #b3c7e6; /* Borde azul claro */
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}
.recommended-res a {
    text-decoration: none;
    color: #091640; /* Color del texto azul oscuro */
}
.recommended-res a:hover {
    text-decoration: underline;
    color: #316dca;
}
.recommended-res .res-details {
    flex: 1;
    color: #000; /* Color del texto negro */
}
.recommended-res .res-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 4px;
    object-fit: cover;
}
.recommended-res .res-description {
    color: #5d5d5d; /* Color de la descripción */
    font-size: 12px;
    margin-top: 5px;
}
.related-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #091640; /* Color azul oscuro */
    font-family: "Aldrich", sans-serif; /* Tipografía del título */
}
@media only screen and (min-width: 768px) {
    .PU_showRes {
        top: 20px;
        left: 0px;
        width: 50%;
        margin-left: 25%;
        border-radius: 8px; /* Bordes redondeados */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    }
}