/* ==========================================================================
   REVISTAS USTA TUNJA — Hoja de estilo institucional
   OJS 3.5.0.4 · tema "default"
   Paleta: navy #0b3a6f · dorado #f4d000 · rojo acento #c8102e
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

:root{
    --usta-navy: #0b3a6f;
    --usta-navy-dark: #082c54;
    --usta-gold: #f4d000;
    --usta-red: #c8102e;
    --usta-bg: #f4f6f8;
    --usta-text: #333333;
    --usta-text-muted: #666666;
    --usta-border: #e0e3e8;
    --usta-radius: 10px;
}

*{
    box-sizing: border-box;
}

body,
button,
input,
select,
textarea{
    font-family: "Sora", "Segoe UI", Arial, sans-serif;
}

body{
    background: var(--usta-bg);
    color: var(--usta-text);
}

a{
    transition: color .2s ease, background-color .2s ease;
}

/* ==========================================================================
   1. HEADER
   ========================================================================== */

header.pkp_structure_head#headerNavigationContainer{
    /* Tornasol 100% en tonos azules + blanco, sin rojo: se ve más
       institucional/serio y el blanco aporta el brillo "tornasol"
       en vez de un color ajeno a la marca. */
    background: linear-gradient(
        115deg,
        var(--usta-navy-dark) 0%,
        var(--usta-navy) 22%,
        #1c4f8f 38%,
        #3f7fc9 50%,
        #dce8f7 58%,
        #3f7fc9 66%,
        var(--usta-navy) 82%,
        var(--usta-navy-dark) 100%
    );
    background-size: 300% 300%;
    animation: usta-tornasol 14s ease-in-out infinite;
    border-top: 5px solid var(--usta-gold);
    padding: 0;
}

@keyframes usta-tornasol{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce){
    header.pkp_structure_head#headerNavigationContainer{
        animation: none;
        background-position: 0% 50%;
    }
}

header.pkp_structure_head#headerNavigationContainer{
    position: relative;
    overflow: hidden;
}

header.pkp_structure_head#headerNavigationContainer::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255,255,255,.16) 45%,
        rgba(255,255,255,.28) 50%,
        rgba(255,255,255,.16) 55%,
        transparent 70%
    );
    background-size: 250% 100%;
    animation: usta-shine 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes usta-shine{
    0%{ background-position: 200% 0; }
    100%{ background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce){
    header.pkp_structure_head#headerNavigationContainer::before{
        animation: none;
        display: none;
    }
}

.pkp_head_wrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 30px 0;
}

.pkp_site_name_wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pkp_site_name a.is_text{
    color: #ffffff;
    font-family: "Playfair Display", "Segoe UI", serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none;
    line-height: 1.25;
}

.pkp_site_name a.is_text:hover{
    color: var(--usta-gold);
}

button.pkp_site_nav_toggle{
    display: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,.4);
    color: #ffffff;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
}

nav.pkp_site_nav_menu{
    margin-top: 18px;
    /* la franja "Inicio / Administración" traía un azul plano propio
       del tema base de OJS que no se veía en nuestro CSS anterior pero
       sí cortaba el degradado tornasol de golpe. La hacemos
       transparente para que el degradado del header se vea continuo
       por debajo de este menú también. */
    background: transparent !important;
}

.pkp_navigation_primary_row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,.25);
    padding-top: 4px;
}

.pkp_navigation_user_wrapper{
    background: transparent !important;
}

ul#navigationPrimary.pkp_navigation_primary{
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

#navigationPrimary a{
    display: inline-block;
    color: #ffffff;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
}

#navigationPrimary a:hover{
    background: rgba(255,255,255,.10);
    color: var(--usta-gold);
}

.pkp_navigation_user_wrapper{
    padding: 6px 0 14px;
}

ul#navigationUser.pkp_navigation_user{
    list-style: none;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 0;
}

#navigationUser > li.profile{
    position: relative;
}

#navigationUser > li.profile > a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--usta-navy);
    background: var(--usta-gold);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
}

#navigationUser > li.profile > a:hover{
    background: #ffffff;
}

#navigationUser .task_count{
    background: var(--usta-red);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 4px;
}

#navigationUser > li.profile > ul{
    list-style: none;
    margin: 0;
    padding: 6px 0;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    min-width: 190px;
    display: none;
    z-index: 200;
}

#navigationUser > li.profile:hover > ul,
#navigationUser > li.profile:focus-within > ul{
    display: block;
}

#navigationUser > li.profile > ul > li > a{
    display: block;
    padding: 9px 16px;
    color: var(--usta-text);
    font-size: 13px;
    text-decoration: none;
}

#navigationUser > li.profile > ul > li > a:hover{
    background: var(--usta-bg);
    color: var(--usta-navy);
}

@media (max-width: 780px){
    button.pkp_site_nav_toggle{ display: inline-block; }
    ul#navigationPrimary.pkp_navigation_primary{ flex-direction: column; gap: 0; }
    ul#navigationUser.pkp_navigation_user{ justify-content: flex-start; }
}

/* ==========================================================================
   1.b MENÚ DE IDIOMA — VERSIÓN 100% CSS (sin JS)
   Se movió al header con position:fixed, pero al quedar en top:16px
   con right:110px terminaba tapado por el header/perfil o fuera del
   viewport en varias resoluciones, por eso "se perdía". Se ancla ahora
   dentro del propio header (position:absolute respecto al wrapper del
   header, que ya es position:relative) junto al bloque de perfil, para
   que siempre sea visible sin depender de cálculos de píxeles fijos.
   ========================================================================== */

/* OJO: en el HTML real, .pkp_block.block_language vive DENTRO de
   .pkp_structure_sidebar.left (no dentro del header). Como ese sidebar
   se oculta más abajo, no sirve anclarlo con position:absolute a
   .pkp_head_wrapper (quedaría "atado" a un contenedor invisible que
   nunca se pinta, y su hijo tampoco). Se usa position:fixed respecto
   al viewport para que sea visible siempre, sin importar en qué
   contenedor real viva en el DOM. */
.pkp_block.block_language{
    position: fixed !important;
    top: 22px !important;
    right: 30px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 999999 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_block.block_language .title{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 6px 14px !important;
    background: var(--usta-gold) !important;
    color: var(--usta-navy) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 20px !important;
    cursor: pointer !important;
}

.pkp_block.block_language .title::before{
    content: "" !important;
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.5' fill='none' stroke='%230b3a6f' stroke-width='2'/%3E%3Cellipse cx='16' cy='16' rx='6.2' ry='14.5' fill='none' stroke='%230b3a6f' stroke-width='1.6'/%3E%3Cline x1='1.5' y1='16' x2='30.5' y2='16' stroke='%230b3a6f' stroke-width='1.6'/%3E%3Cpath d='M3.5,10 C10,13 22,13 28.5,10' fill='none' stroke='%230b3a6f' stroke-width='1.3'/%3E%3Cpath d='M3.5,22 C10,19 22,19 28.5,22' fill='none' stroke='%230b3a6f' stroke-width='1.3'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.pkp_block.block_language:hover .title,
.pkp_block.block_language:focus-within .title{
    background: #ffffff !important;
}

.pkp_block.block_language .content{
    display: none !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: calc(100% + 6px) !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
    min-width: 160px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
}

.pkp_block.block_language:hover .content,
.pkp_block.block_language:focus-within .content{
    display: block !important;
}

.pkp_block.block_language .content ul{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_block.block_language .content li{
    padding: 0 !important;
}

.pkp_block.block_language .content a{
    display: block !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    color: var(--usta-text) !important;
    text-decoration: none !important;
}

.pkp_block.block_language .content a:hover{
    background: var(--usta-bg) !important;
    color: var(--usta-navy) !important;
}

.pkp_block.block_language .content li.current a{
    color: var(--usta-navy) !important;
    font-weight: 700 !important;
}

/* como ya no queda nada útil en la barra lateral izquierda, la ocultamos
   por completo y forzamos por MÚLTIPLES rutas por si el tema le pone
   estilos con más prioridad — así no se pierde el bloque de idioma
   mostrándose "suelto" en medio de la página. */
/* display:none en el sidebar también apagaría el bloque de idioma que
   vive adentro (aunque sea position:fixed, un ancestro con
   display:none no se renderiza y sus hijos tampoco). Por eso NO usamos
   display:none aquí: colapsamos el sidebar visualmente (0 ancho/alto,
   overflow oculto) pero lo dejamos "renderizado" para que su hijo
   fixed sí aparezca en el viewport. */
/* IMPORTANTE: el sidebar izquierdo NO siempre es "solo idioma". En la
   página de inicio sí (por eso antes lo colapsábamos siempre), pero al
   entrar a una revista ese mismo sidebar trae bloques reales y útiles
   (Enviar un artículo, Open Journal Systems, Palabras clave, Navegar,
   etc.). Colapsarlo siempre a 0×0 rompía esos bloques ahí también
   (se veían como cajas blancas vacías/rotas).
   Ahora solo colapsamos el sidebar cuando NO contiene ningún .pkp_block
   aparte del de idioma — así el idioma nunca "contamina" ni afecta el
   layout de las páginas que sí necesitan su sidebar completo. */
.pkp_structure_sidebar.left:not(:has(.pkp_block:not(.block_language))){
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.pkp_structure_content.has_sidebar:has(
    .pkp_structure_sidebar.left:not(:has(.pkp_block:not(.block_language)))
){
    display: block !important;
}

.pkp_structure_content.has_sidebar:has(
    .pkp_structure_sidebar.left:not(:has(.pkp_block:not(.block_language)))
) .pkp_structure_main{
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 780px){
    .pkp_block.block_language{
        top: 14px !important;
        right: 16px !important;
    }
}

/* ==========================================================================
   2. LAYOUT PRINCIPAL (contenido + barra lateral)
   ========================================================================== */

.pkp_structure_content.has_sidebar{
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 60px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.pkp_structure_main{
    flex: 1;
    min-width: 0;
}

.pkp_structure_sidebar.left{
    width: 230px;
    flex-shrink: 0;
}

@media (max-width: 900px){
    .pkp_structure_content.has_sidebar{
        flex-direction: column;
    }
    .pkp_structure_sidebar.left{
        width: 100%;
    }
}

/* Nota: el sidebar izquierdo ahora se oculta siempre desde la sección 1.b
   (ya no depende de una clase que agregaría el JS que no podemos usar). */

.about_site{
    background: #ffffff;
    border-left: 4px solid var(--usta-navy);
    border-radius: 6px;
    padding: 14px 20px;
    margin-bottom: 30px;
    color: var(--usta-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.pkp_block{
    background: #ffffff;
    border: 1px solid var(--usta-border);
    border-radius: var(--usta-radius);
    padding: 16px 18px;
    margin-bottom: 20px;
}

.pkp_block .title{
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--usta-gold);
    color: var(--usta-navy);
    font-size: 14px;
    font-weight: 700;
}

.pkp_block .content ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.pkp_block .content li{
    padding: 5px 0;
}

.pkp_block .content a{
    color: var(--usta-text-muted);
    font-size: 13px;
    text-decoration: none;
}

.pkp_block .content a:hover{
    color: var(--usta-red);
}

.pkp_block .content li.current a{
    color: var(--usta-navy);
    font-weight: 700;
}

/* ==========================================================================
   3. LISTADO DE REVISTAS (página de inicio)
   ========================================================================== */

.journals h2{
    color: var(--usta-navy);
    font-weight: 700;
    font-size: 22px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--usta-red);
    margin: 0 0 24px;
    display: inline-block;
}

/* ---- GRID: 3 columnas fijas en desktop, 2 en tablet, 1 en móvil ---- */
.journals > ul{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 100px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 900px){
    .journals > ul{
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
    }
}

@media (max-width: 560px){
    .journals > ul{
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }
}

/* IMPORTANTE: usamos ">" (hijo directo) y no un descendiente genérico.
   Antes ".journals ul li" también capturaba los <li> internos de
   "Ver revista" / "Número actual" (que viven dentro de otro <ul> anidado),
   por eso cada botón terminaba metido en su propia cajita con borde
   y con el rectángulo gris/azul encima. */
.journals > ul > li{
    position: relative !important;
    float: none !important;
    width: auto !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    /* overflow:hidden es la red de seguridad real contra el desborde:
       aunque el overlay de .description falle o crezca de más, el <li>
       jamás deja salir nada fuera de su propia caja. */
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    border: 1px solid #e2e2e2;
    /* sombra permanente (no solo en hover): con el gap grande entre
       tarjetas, sin sombra propia se veían "flotando" en el mismo
       plano y por eso parecían pegadas aunque tuvieran espacio real.
       La sombra le da volumen a cada tarjeta y refuerza que son
       piezas separadas. */
    box-shadow: 0 4px 14px rgba(11,58,111,.08), 0 1px 3px rgba(0,0,0,.06);
    padding: 18px 18px 20px !important;
    transition: box-shadow .25s ease, transform .25s ease;

    /* animación de entrada: aparecen con fundido + deslizamiento hacia
       arriba, una tarjeta después de otra (efecto escalonado), pero
       rápido — el total no debe demorar más de medio segundo aprox. */
    opacity: 0;
    animation: usta-card-in .4s ease forwards;
}

/* escalonado corto: cada tarjeta entra apenas un poco después que la
   anterior, cubre hasta 12 tarjetas (de sobra para el listado actual) */
.journals > ul > li:nth-child(1){ animation-delay: .02s; }
.journals > ul > li:nth-child(2){ animation-delay: .06s; }
.journals > ul > li:nth-child(3){ animation-delay: .10s; }
.journals > ul > li:nth-child(4){ animation-delay: .14s; }
.journals > ul > li:nth-child(5){ animation-delay: .18s; }
.journals > ul > li:nth-child(6){ animation-delay: .22s; }
.journals > ul > li:nth-child(7){ animation-delay: .26s; }
.journals > ul > li:nth-child(8){ animation-delay: .30s; }
.journals > ul > li:nth-child(9){ animation-delay: .34s; }
.journals > ul > li:nth-child(10){ animation-delay: .38s; }
.journals > ul > li:nth-child(11){ animation-delay: .42s; }
.journals > ul > li:nth-child(12){ animation-delay: .46s; }

@keyframes usta-card-in{
    from{
        opacity: 0;
        transform: translateY(16px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce){
    .journals > ul > li{
        opacity: 1;
        animation: none;
    }
}

.journals > ul > li:hover{
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 16px 30px rgba(11,58,111,.16), 0 4px 10px rgba(0,0,0,.08);
}

/* la portada también reacciona un poco al pasar el mouse por la
   tarjeta, para reforzar la sensación de interactividad */
.journals .thumb img{
    transition: transform .35s ease;
}

.journals > ul > li:hover .thumb img{
    transform: scale(1.04);
}

/* los botones "laten" muy levemente al pasar el mouse, en vez de
   solo cambiar de color de golpe */
.journals .links a,
.journals .links::after{
    transition: background-color .2s ease, transform .15s ease;
}

.journals .links a:hover,
.journals .links:hover::after{
    transform: translateY(-1px);
}

.journals .thumb{
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 220px !important;
    margin: 0 auto 18px !important;
    overflow: hidden;
    background: transparent;
    line-height: 0;
    border-radius: 4px;
}

.journals .thumb a{
    display: block !important;
}

.journals .thumb img{
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
}

.journals > ul > li:hover .thumb img{
    transform: none;
}

/* Se eliminó por completo el rectángulo/placeholder decorativo que iba
   antes de cada tarjeta: era la causa del recuadro gris/azul feo y
   además se estaba colando dentro de los botones por el bug de arriba.
   Si una revista no tiene portada, simplemente no se muestra nada ahí. */

.journals .body{
    float: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1;
    padding: 0 !important;
    gap: 10px;
    text-align: center;
}

.journals .body h3{
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    min-height: 42px;
    display: flex;
    align-items: center;
}

.journals .body h3 a{
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: none;
}

.journals .body h3 a:hover{
    color: var(--usta-red);
}

/* ---- Descripción: se despliega como panel superpuesto (overlay) al pasar
   el mouse sobre el botón "Descripción". Se limita SIEMPRE al alto de la
   tarjeta (top/left/right/bottom:0 sobre .journals > ul > li, que tiene
   position:relative) con overflow-y:auto para scroll interno — así el
   texto largo nunca se desborda ni tapa las tarjetas de al lado. ---- */
.journals .description{
    display: none;
    width: 100%;
    overflow: hidden;
    text-align: left;
}

.journals .description p{
    margin: 0 0 6px;
}

/* dentro de la descripción desplegada seguimos ocultando convocatorias/imagenes/links embebidos */
.journals .description h4,
.journals .description img,
.journals .description a{
    display: none;
}

/* ---- Botones "Ver revista" / "Descripción" / "Número actual" ----
   El botón "Descripción" se genera 100% con CSS (::after), sin JS.
   Usamos "order" para que quede en medio de los otros dos, visualmente
   igual a un botón real. Se activa con :has() más abajo. ---- */
.journals .links{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding-top: 0 !important;
    width: 100% !important;
    list-style: none !important;
    position: relative;
    z-index: 60;
}

.journals .links li{
    flex: none !important;
    width: 100% !important;
    float: none !important;
    list-style: none;
}

.journals .links li.view{ order: 1; }
.journals .links li.current{ order: 3; }

/* botón falso "Descripción" en medio, generado con contenido CSS */
.journals .links::after{
    content: "Descripción";
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 38px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;

    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;

    background: #1a1a1a;
    color: #ffffff;
    cursor: pointer;
}

.journals .links:hover::after{
    background: var(--usta-navy);
}

.journals .links a{
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 38px;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 6px;

    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: normal;

    background: #1a1a1a;
    color: #ffffff !important;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 2;
}

.journals .links li.current a{
    background: #1a1a1a;
    color: #ffffff !important;
}

.journals .links a:hover{
    background: var(--usta-navy);
    color: #ffffff !important;
}

.journals .links li.current a:hover{
    background: var(--usta-navy);
    color: #ffffff !important;
}

/* ---- Activa la descripción SOLO al pasar/tocar el botón "Descripción".
   FIX: antes usaba max-height:700px sin límite real de contenedor, así
   que en descripciones largas el panel crecía más allá de la tarjeta y
   se montaba sobre las tarjetas vecinas. Ahora el overlay se ancla a
   los 4 bordes de la tarjeta (top/left/right/bottom:0) y usa
   max-height:100% + overflow-y:auto, por lo que nunca sobrepasa el
   tamaño de su propia tarjeta: si el texto es largo, hace scroll
   interno en vez de desbordarse. ---- */
/* Contenedor de cada tarjeta (listado principal Y cualquier otra vista
   que reuse .description, p.ej. dentro de una revista individual):
   cualquier <li> o <div> ancestro directo que tenga .description debe
   recortar overflow, si no ya lo trae. Esto es una red de seguridad
   genérica además de la regla explícita de .journals > ul > li. */
li:has(> .body > .description),
li:has(> .description){
    position: relative !important;
    overflow: hidden !important;
}

/* El botón "Descripción" es contenido generado (::after) de .links, así
   que hovear ESE botón cuenta como hover directo sobre .links (no
   sobre ningún <li> hijo). Antes usábamos ".links:hover" a secas, pero
   como .links es el contenedor de los 3 botones, pasar el mouse por
   "Ver revista" o "Número actual" TAMBIÉN cuenta como hover de .links
   (son hijos suyos) — por eso se abría la descripción con cualquiera
   de los 3 botones. Ahora excluimos explícitamente esos dos casos con
   :not(:has(...:hover)), así solo el botón central del medio la abre. */
.journals > ul > li:has(.links:hover):not(:has(.links li.view:hover)):not(:has(.links li.current:hover)) .description,
.journals > ul > li .description.is-open,
li:has(> .body > .description.is-open) .description.is-open,
li:has(> .description.is-open) .description.is-open{
    display: block !important;
    overflow-y: auto !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 100% !important;
    z-index: 40 !important;

    /* semitransparente: se nota que es un panel flotando sobre la
       tarjeta, y se alcanza a leer/intuir lo que hay detrás */
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(2px);
    padding: 18px !important;
    border-radius: 10px !important;
    margin: 0 !important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.12),
        0 4px 10px rgba(0,0,0,.06) !important;
    border: 1px solid rgba(0,0,0,.06) !important;

    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: #2f2f2f !important;
    text-align: left !important;
}

/* Contenido HTML libre del editor (Ingenio Magno, In Vestigium Ire, etc.
   traen estilos inline y <h4> de convocatorias): forzamos que ninguna
   imagen o elemento interno pueda ser más ancho que el overlay, para
   que el overflow-y:auto sea siempre vertical y nunca horizontal. */
.description *{
    max-width: 100% !important;
}

/* Mientras la descripción está abierta (hover sobre el botón central,
   o clase .is-open), los botones "Ver revista" y "Número actual"
   quedan visualmente apagados/transparentes: dejan de competir por
   atención y solo se ve el texto de la descripción encima. */
.journals > ul > li:has(.links:hover):not(:has(.links li.view:hover)):not(:has(.links li.current:hover)) .links a,
.journals > ul > li:has(.links:hover):not(:has(.links li.view:hover)):not(:has(.links li.current:hover)) .links::after{
    opacity: .15 !important;
}

/* ==========================================================================
   4. PÁGINA DE REVISTA INDIVIDUAL — listado de artículos
   ========================================================================== */

.article-summary,
.obj_article_summary{
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--usta-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.article-summary:hover,
.obj_article_summary:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.article-summary h3,
.obj_article_summary .title{
    margin: 0;
    padding: 10px 14px;
    background: var(--usta-navy);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.article-summary h3 a,
.obj_article_summary .title a{
    color: #ffffff !important;
}

.article-summary .authors,
.obj_article_summary .authors{
    font-size: 13px;
    color: var(--usta-text-muted);
    padding: 10px 14px 0;
}

.galley-link{
    margin: 10px 14px 14px;
    align-self: flex-start;

    background: #f5f7fa;
    color: var(--usta-navy) !important;
    border: 1px solid var(--usta-border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.galley-link:hover{
    background: #e9edf2;
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */

.pkp_structure_footer_wrapper{
    background: var(--usta-navy);
    margin-top: 50px;
}

.pkp_footer_content{
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 10px;
    text-align: center;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    line-height: 1.7;
}

.pkp_footer_content strong{
    color: var(--usta-gold);
}

.pkp_brand_footer{
    text-align: center;
    padding: 10px 20px 26px;
}

.pkp_brand_footer img{
    max-width: 170px;
    opacity: .85;
}