/* ========================================================================
   CSS LIMPIO Y OPTIMIZADO PARA REVISTA METIS
   Versión depurada - Febrero 2026
   ======================================================================== */

/* === VARIABLES DE COLOR (Paleta 3) === */
:root {
    --color-principal: #001B2E;      /* Azul muy oscuro - Enlaces, títulos */
    --color-secundario: #294C60;     /* Teal/Azul petróleo - Barra menú, hover */
    --color-fondo-suave: #BCAA99;    /* Beige - Fondos sutiles */
    --color-acento-activo: #1DD3B0;  /* Verde agua - Hover/Active especial */
    --color-fondo-pagina: #f6f5ee;
}

/* === COLORES GENERALES === */
html, body {
    background: var(--color-fondo-pagina);
}

/* Enlaces principales */
a, 
.pkp_block a, 
.pkp_navigation_primary ul a, 
.obj_article_summary > .title a {
   color: var(--color-principal);
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
}

a:hover, 
a:active, 
a:focus {
    color: var(--color-principal);
}

.pkp_site_name a {
    color: var(--color-principal);
}

/* === ESTRUCTURA Y FONDOS === */
.pkp_structure_head {
    background: white;
    box-shadow: 10px 5px 30px -19px #333;
}

.pkp_structure_content,
.pkp_structure_main {
    background: #ffffff !important;
}

.pkp_site_name_wrapper {
    background-color: transparent !important;
}

/* === CABECERA === */
.pkp_head_wrapper {
    background: url(https://revistas.comillas.edu/public/journals/14/Fondo-metis.jpg) no-repeat center bottom !important;
    background-size: 190% !important;
}
/* Tablet y móvil */
@media (max-width: 991px) {
    .pkp_head_wrapper {
        background: url(https://revistas.comillas.edu/public/journals/14/Fondo-metis.jpg) no-repeat center bottom !important;
        background-size: cover !important;
    }
}

@media (min-width: 992px) {
    .pkp_head_wrapper {
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 30px;
        background-position: calc(50% + 480px) center !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .has_site_logo .pkp_head_wrapper {
        width: 100%;
    }
}

/* Logo */
.pkp_site_name {
    text-align: left !important;
}

@media (min-width: 992px) {
    .pkp_site_name {
        margin-left: 20px !important;
    }
}

.pkp_site_name .is_img img {
    display: block;
    max-height: 80px;
    max-width: 100%;
    width: auto;
    height: auto;
    background-color: rgb(255,255,255, 0.8);
    border: 3px solid rgb(255,255,255, 0.3);
}

@media (max-width: 992px) {
    .pkp_site_name {
        background-color: rgb(255,255,255, 0.8);
        border: 3px solid rgb(255,255,255, 0.3);
    }
    .pkp_site_name a {
        padding: 0;
    }
}

/* === NAVEGACIÓN === */

/* Barra superior de usuario */
.pkp_navigation_user_wrapper {
    background: var(--color-secundario) !important;
}

@media (min-width: 992px) {
    .pkp_navigation_user_wrapper {
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-right: 2.143rem !important;
        width: 100% !important;
        top: 0;
    }
    
    .pkp_navigation_user {
        z-index: 2 !important;
        position: relative;
    }
    
    .pkp_navigation_user > li:first-child {
        float: left;
    }
    
    .pkp_navigation_user > li {
        float: right;
    }
    
    .pkp_navigation_user > li > a {
        color: #ffffff !important;
    }
}

@media screen and (max-width: 768px) {
    .pkp_navigation_user_wrapper {
        background: var(--color-secundario) !important;
    }
    
    .pkp_navigation_user_wrapper a {
        color: #ffffff;
        z-index: 2;
    }
}

/* Botón "Revistas Comillas" con icono */
@media (min-width: 992px) {
    .pkp_navigation_user > li:first-child > a {
        text-align: left;
        float: left;
        background-repeat: no-repeat;
        background-position: left center;
        padding: 4px 20px 0px 15px;
        margin-left: 10px;
        color: #ffffff !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center;
    }
    
    .pkp_navigation_user > li:first-child > a::before {
        background-image: none !important;
        background-color: #ffffff !important;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zm-6-2h5v-9.15L12 4.12 6 9.85V19h5v-4h2v4z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zm-6-2h5v-9.15L12 4.12 6 9.85V19h5v-4h2v4z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        width: 18px;
        height: 18px;
        margin-right: 8px;
        content: "" !important;
        display: inline-block;
        vertical-align: middle;
        transition: background-color 0.2s ease !important;
    }
    
    .pkp_navigation_user > li:first-child > a:hover,
    .pkp_navigation_user > li:first-child > a:active,
    .pkp_navigation_user > li:first-child > a:focus {
        background-color: #ffffff !important;
        color: var(--color-secundario) !important;
    }
    
    .pkp_navigation_user > li:first-child > a:hover::before,
    .pkp_navigation_user > li:first-child > a:active::before,
    .pkp_navigation_user > li:first-child > a:focus::before {
        background-color: var(--color-secundario) !important;
    }
}

/* Menú primario */
@media (min-width: 992px) {
    .pkp_navigation_primary_wrapper {
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .pkp_navigation_primary {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    .pkp_navigation_primary_row {
        margin-top: 20px;
    }
}

.pkp_navigation_primary > li > a {
    color: var(--color-principal) !important;
    border-bottom: 1px solid var(--color-principal) !important;
}

.pkp_navigation_primary > li > a:hover {
    color: var(--color-secundario) !important;
    border-bottom: 1px solid var(--color-secundario) !important;
}

.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a:active {
    border-color: var(--color-acento-activo) !important;
    color: var(--color-principal) !important;
}

/* Dropdowns del menú */
@media (min-width: 992px) {
    .pkp_navigation_primary ul {
        background-color: var(--color-secundario) !important;
        border: none !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
        padding: 3px 0 !important;
    }
    
    .pkp_navigation_primary ul li a {
        color: #ffffff !important;
        padding: 10px 20px !important;
    }
    
    .pkp_navigation_primary ul li a:hover {
        background-color: rgba(255,255,255,0.2) !important;
        color: var(--color-acento-activo) !important;
    }
}

/* === BÚSQUEDA === */
.pkp_head_wrapper .pkp_search button,
.pkp_head_wrapper .pkp_search .search_prompt,
.pkp_head_wrapper .pkp_search a {
    color: var(--color-principal) !important;
}

@media (min-width: 992px) {
    .pkp_head_wrapper .pkp_search .search_controls {
        display: inline-block;
        background: rgba(252, 252, 252, 0.88);
    }
    
    .pkp_head_wrapper .pkp_search.is_open {
        min-width: 100%;
        background: #fff;
        border-top: 1px solid var(--color-fondo-suave);
        border-left: 3px solid var(--color-principal);
    }
    
    .pkp_head_wrapper .pkp_search.is_open .search_prompt {
        color: var(--color-principal);
    }
}

.page_search .submit button {
    color: var(--color-principal);
}

.page_search .submit button:after,
.page_search .submit button:hover:after {
    background: var(--color-principal);
}

/* === BOTONES === */

/* Botón enviar artículo */
.submit button, 
.block_make_submission a {
    border-radius: 4px;
    border: 4px solid var(--color-principal) !important;
    color: var(--color-principal) !important;
    background: #ffffff !important;
    text-align: center;
    text-transform: uppercase;
    padding: 5px;
    width: 200px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 5px;
    box-shadow: none;
} 

.submit button:hover, 
.block_make_submission a:hover {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    background: var(--color-secundario) !important;
    border-color: var(--color-secundario) !important;
    box-shadow: 0px 5px 20px -10px rgba(0,0,0,0.57);
}

/* Botones con borde (PDF, HTML, etc.) */
.cmp_button_wire, 
.obj_galley_link { 
   border: 1px solid var(--color-principal) !important;
   color: var(--color-principal) !important;
   background: #ffffff !important;
   transition: all 0.3s ease;
}

.cmp_button_wire:hover, 
.cmp_button_wire:focus, 
.obj_galley_link:hover, 
.obj_galley_link:focus {
    border: 1px solid var(--color-acento-activo) !important;
    color: #ffffff !important;
    background-color: var(--color-acento-activo) !important;
}

.obj_galley_link.restricted:before {
    color: var(--color-principal) !important;
}

/* === LAYOUT BOXED === */
@media (min-width: 992px) {
    .pkp_structure_content {
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .pkp_structure_footer {
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* === SIDEBAR === */
@media (min-width: 992px) {
    .pkp_structure_sidebar.left {
        background-color: rgba(188, 170, 153, 0.05) !important;
    }
}

/* === ARCHIVO DE NÚMEROS === */
@media (min-width: 480px) {
    .page_issue_archive .issues_archive {
        margin-left: -20px;
        margin-right: -20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .page_issue_archive .issues_archive,
    .page_issue_archive .issues_archive ul li {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

.obj_issue_summary .cover {
    display: none;
}

/* === ARTÍCULOS === */
@media (min-width: 992px) {
    .cmp_article_list, 
    .obj_issue_toc .articles {
        margin: 30px 0 !important;
    }
}

@media (min-width: 768px) {
    .obj_issue_toc .galleys > h2, 
    .obj_issue_toc .section > h2, 
    .obj_issue_toc .galleys > h3, 
    .obj_issue_toc .section > h3 {
        font-size: 1.5rem;
        margin-top: 1em;
    }
}

/* Hover en títulos de artículos */
.obj_article_summary h3 a {
    transition: color 0.3s ease;
}

.obj_article_summary h3 a:hover {
    color: var(--color-secundario) !important;
}

/* Subrayado decorativo en hover */
.pkp_block a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-acento-activo);
    text-decoration-thickness: 2px;
}

/* === ENLACES ESPECIALES === */
.obj_article_details .orcid a, 
.obj_article_details .doi a {
    color: var(--color-principal) !important;
}

/* === NOTIFICACIONES === */
.cmp_notification {
    border-left: 5px solid var(--color-principal) !important;
}

/* === FOOTER === */
.pkp_brand_footer {
    visibility: hidden !important;
    display: none !important;
}
/* ========================================================================
   FIX PARA DROPDOWN - ELIMINAR GAP ENTRE BOTÓN Y MENÚ
   ======================================================================== */

@media (min-width: 992px) {
    
    /* SOLUCIÓN 1: Reducir el desplazamiento vertical del dropdown */
    /* El problema está en translate3d(16px, 35px, 0px) - hay 35px de separación */
    .pkp_navigation_primary > li:hover ul {
        position: absolute !important;
        transform: translate3d(0px, 0px, 0px) !important; /* Eliminar desplazamiento */
        top: 100% !important; /* Posicionar justo debajo del botón */
        left: 0 !important;
        will-change: transform;
    }
    
    /* SOLUCIÓN 2 (Alternativa): Crear un "puente invisible" que cubra el gap */
    /* Usa esta si la Solución 1 no funciona bien visualmente */
    /*
    .pkp_navigation_primary > li::before {
        content: "";
        position: absolute;
        bottom: -35px;
        left: 0;
        right: 0;
        height: 35px;
        background: transparent;
        display: none;
        z-index: 1;
    }
    
    .pkp_navigation_primary > li:hover::before {
        display: block;
    }
    
    .pkp_navigation_primary > li:hover ul {
        z-index: 2;
    }
    */
    
    /* Asegurar que el dropdown tiene padding pero sin gap */
    .pkp_navigation_primary ul {
        margin-top: 0 !important;
    }
}