/* ============================================================
   CIENCIAS ADMINISTRATIVAS. TEORÍA Y PRAXIS
   OJS 3.3 + MANUSCRIPT
   Diseño académico contemporáneo
   ============================================================ */


/* ============================================================
   1. PALETA Y VARIABLES
   ============================================================ */

:root {
    /* Identidad principal */
    --color-primary: #5f246b;
    --color-primary-dark: #43194c;
    --color-primary-light: #8d5a96;

    /* Acento académico */
    --color-accent: #c6a15b;
    --color-accent-soft: #e8dcc5;

    /* Fondos */
    --color-bg: #f7f5f8;
    --color-surface: #ffffff;
    --color-surface-soft: #f2eef3;

    /* Texto */
    --color-text: #262326;
    --color-text-soft: #696469;
    --color-text-light: #ffffff;

    /* Bordes */
    --color-border: #ddd6e2;

    /* Footer */
    --color-footer: #e5d7e7;

    /* Estados */
    --color-hover: #43194c;

    /* Sombras */
    --shadow-soft: 0 3px 12px rgba(54, 28, 58, 0.08);
    --shadow-card: 0 4px 18px rgba(54, 28, 58, 0.10);

    /* Radios */
    --radius-small: 4px;
    --radius-medium: 7px;
}


/* ============================================================
   2. BASE GENERAL
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

a {
    color: var(--color-primary);
    word-wrap: break-word;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--color-primary-dark);
}

p,
li {
    line-height: 1.65;
}

.pkp_structure_main {
    padding-top: 0;
}


/* ============================================================
   3. CABECERA
   ============================================================ */

.pkp_structure_head {
    background-color: var(--color-surface);
    border-bottom: 3px solid var(--color-primary);
}

.has_site_logo .pkp_site_name {
    padding: 0;
}

.pkp_site_name_wrapper,
.pkp_head_wrapper {
    background: var(--color-surface);
}


/* ============================================================
   4. LOGO / NOMBRE DE REVISTA
   ============================================================ */

.pkp_site_name .is_img img {
    max-height: 100%;
}

.pkp_site_name .is_img {
    padding-top: 0;
    padding-bottom: 0;
}


/* ============================================================
   5. NAVEGACIÓN PRINCIPAL
   ============================================================ */

#navigationPrimary > li > a,
.pkp_head_wrapper .pkp_search .search_controls .search_prompt {
    padding-bottom: 6px;
    border-bottom-width: 3px;
    text-transform: none;
    font-size: 15px;
    font-weight: 600;
}

#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus {
    border-color: var(--color-accent);
}


/* Submenús */

#navigationPrimary ul {
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

#navigationPrimary ul a,
.pkp_nav_list ul a {
    color: var(--color-text);
    text-transform: none;
    font-size: 14px;
}

#navigationPrimary ul a:hover,
#navigationPrimary ul a:focus,
.pkp_nav_list ul a:hover,
.pkp_nav_list ul a:focus {
    color: var(--color-primary);
    background: var(--color-surface-soft);
}


/* ============================================================
   6. BUSCADOR
   ============================================================ */

.pkp_search.is_open .search_controls .search_prompt {
    padding-bottom: 10px;
    text-transform: none;
    font-size: 15px;
    background: var(--color-primary) !important;
    color: var(--color-text-light);
    font-weight: 600;
}


/* ============================================================
   7. BOTONES GENERALES
   ============================================================ */

.cmp_button,
.cmp_form .buttons button,
.pkp_search button[type="submit"],
.page_lost_password .buttons button,
.page_search .submit button,
.block_make_submission a {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-top-color: var(--color-primary);
    color: var(--color-text-light);
    border-radius: var(--radius-small);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.cmp_button:hover,
.cmp_button:focus,
.cmp_form .buttons button:hover,
.cmp_form .buttons button:focus,
.pkp_search button[type="submit"]:hover,
.page_lost_password .buttons button:hover,
.page_search .submit button:hover,
.block_make_submission a:hover,
.block_make_submission a:focus {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}


/* ============================================================
   8. BOTONES PDF / GALERADAS
   ============================================================ */

.cmp_button_wire,
.obj_galley_link {
    display: inline-block;
    padding: 0 1em;
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-small);
    font-size: 14px;
    line-height: 30px;
    color: var(--color-primary);
    text-decoration: none;
    text-align: center;
}

.cmp_button_wire:hover,
.cmp_button_wire:focus,
.obj_galley_link:hover,
.obj_galley_link:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}


/* ============================================================
   9. PORTADA - AVISOS
   ============================================================ */

.pkp_page_index .cmp_announcements {
    border-bottom: none;
}

.pkp_page_index .cmp_announcements > .more:before,
.pkp_page_index .cmp_announcements > .obj_announcement_summary:before {
    border: none;
}

.obj_announcement_summary {
    margin-bottom: 20px;
}

.obj_announcement_summary .read_more {
    color: var(--color-primary);
    font-weight: 600;
}

.obj_announcement_summary .read_more:hover,
.obj_announcement_summary .read_more:focus {
    color: var(--color-primary-dark);
}


/* ============================================================
   10. PORTADA - NÚMERO ACTUAL
   ============================================================ */

.pkp_page_index .current_issue {
    margin-top: 25px;
}

.pkp_page_index .current_issue .read_more {
    color: var(--color-primary);
    font-weight: 600;
}

.pkp_page_index .current_issue .read_more:hover,
.pkp_page_index .current_issue .read_more:focus {
    color: var(--color-primary-dark);
}

.pkp_page_index .additional_content {
    border-top: none;
}


/* ============================================================
   11. SECCIONES DEL NÚMERO
   ============================================================ */

.obj_issue_toc .section > h3 {
    display: inline-block;
    position: relative;
    left: 0;
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 0 0 6px 0;

    background: transparent;

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 20px;
    font-weight: 650;
    line-height: 30px;

    color: var(--color-primary-dark);

    border-bottom: 3px solid var(--color-accent);
}


/* ============================================================
   12. ARTÍCULOS
   ============================================================ */

.obj_article_summary {
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
}

.obj_article_summary > .title a {
    text-decoration: none;
    color: var(--color-primary-dark);

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}

.obj_article_summary > .title a:hover,
.obj_article_summary > .title a:focus {
    color: var(--color-primary);
}

.obj_article_summary .authors {
    padding-right: 5em;
    color: var(--color-text-soft);

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 15px;
    line-height: 1.5;
}


/* ============================================================
   13. DETALLE DEL ARTÍCULO
   ============================================================ */

.main_entry .abstract {
    line-height: 1.7;
}

.obj_article_details .main_entry .item.doi .label,
.obj_article_details .main_entry .item.keywords .label,
.obj_article_details .authors {
    font-size: 15px;

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;
}

.abstract,
.copyright,
.pkp_page_about,
.page_information {
    text-align: justify;
}

.abstract {
    white-space: pre-line;
}

.author_bios .sub_item .value,
.pkp_page_codigoetica {
    line-height: 1.7 !important;
    text-align: justify;
}


/* ============================================================
   14. NÚMEROS / ARCHIVOS
   ============================================================ */

.obj_issue_summary .title {
    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary-dark);
}


/* ============================================================
   15. PÁGINAS INFORMATIVAS
   ============================================================ */

.page_submissions .submission_checklist ul,
.page_submissions:not(h2),
.page_privacy,
.page_contact,
.page_information {
    font-size: 14.5px;
    line-height: 1.75;
}


/* ============================================================
   16. NOTIFICACIONES
   ============================================================ */

.cmp_notification {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary) !important;
    border-radius: var(--radius-small);
}


/* ============================================================
   17. BARRA LATERAL
   ============================================================ */

.pkp_structure_sidebar {
    font-size: 14px;
}


/* Títulos de bloques */

.pkp_block .title {
    display: block;
    width: 100%;

    margin-bottom: 12px;
    padding-bottom: 8px;

    color: var(--color-primary-dark);

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-weight: 650;
    font-size: 16px;
    text-transform: none;

    border-bottom: 2px solid var(--color-accent);
}


/* Contenido */

.pkp_block .content p {
    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

.pkp_block .content p:first-child {
    margin-top: 0;
}

.block_information a,
.block_language_toggle a,
.pkp_block .content p a {
    font-size: 14px;
    color: var(--color-primary);
}

.block_information a:hover,
.block_language_toggle a:hover,
.pkp_block .content p a:hover {
    color: var(--color-primary-dark);
}


/* Imágenes de indexación */

.pkp_block img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   18. BLOQUES DE INICIO DE SESIÓN / REGISTRO / ENVÍO
   ============================================================ */

#customblock-iniciarsesion p a,
#customblock-registrarse p a,
.block_make_submission a {
    display: inline-block;

    width: 100% !important;
    max-width: 220px;

    padding: 7px 10px !important;

    background: var(--color-surface-soft) !important;

    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-medium) !important;

    color: var(--color-primary-dark);

    text-align: center !important;
    text-transform: none;

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-weight: 500;
    font-size: 14px;

    line-height: 28px;

    box-shadow: none;
}

#customblock-iniciarsesion p a:hover,
#customblock-registrarse p a:hover,
.block_make_submission a:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

#customblock-iniciarsesion,
.block_make_submission {
    padding-bottom: 0;
}


/* ============================================================
   19. FOOTER
   ============================================================ */

.pkp_structure_footer_wrapper {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: none;
}

.pkp_structure_footer {
    width: 100%;
    padding: 0;
}

.pkp_footer_content {
    padding: 32px;

    background: var(--color-footer);

    color: var(--color-text);

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    text-align: justify;
}

.pkp_footer_content a {
    color: var(--color-primary-dark);
}

.pkp_footer_content a:hover {
    color: var(--color-primary);
}


/* ============================================================
   20. CARRUSEL
   Conservado del CSS original
   ============================================================ */

.slider {
    width: 100%;
    margin: auto;
    overflow: hidden;
    text-align: center;
}

.slider ul {
    display: flex;
    width: 700% !important;

    margin-top: 0;
    padding: 0;

    animation: cambio 60s infinite alternate;
}

.slider li {
    width: 100%;
    list-style: none;
}

.slider img {
    width: 100%;
    height: auto;
}

@keyframes cambio {

    0% {
        margin-left: 0%;
    }

    11.1% {
        margin-left: -100%;
    }

    22.2% {
        margin-left: -100%;
    }

    33.3% {
        margin-left: -200%;
    }

    44.4% {
        margin-left: -200%;
    }

    55.5% {
        margin-left: -300%;
    }

    66.6% {
        margin-left: -300%;
    }

    77.7% {
        margin-left: -400%;
    }

    88.8% {
        margin-left: -400%;
    }

    100% {
        margin-left: -500%;
    }
}


/* ============================================================
   21. LOGOS Y PIE INSTITUCIONAL
   ============================================================ */

.redes {
    margin-top: 20px;
    margin-bottom: 100px;
}

.logos {
    text-align: center;
}

.div-largo {
    width: 60%;
    float: left;
}

.div-corto {
    width: 40%;
    float: left;
}

.div-corto h3 {
    text-align: center;
}

.div-ubicacion {
    background-image:
        url("/public/site/images/admin/ico-ubicacion.png");

    background-position: left center;
    background-repeat: no-repeat;

    padding-left: 40px;

    line-height: 20px;
    font-size: 18px;
}


/* ============================================================
   22. CITAS
   ============================================================ */

#citationOutput .csl-bib-body .csl-entry i::first-letter {
    text-transform: lowercase;
}


/* ============================================================
   23. ESCRITORIO
   ============================================================ */

@media (min-width: 992px) {

    .pkp_navigation_primary_row {
        background: var(--color-primary);
    }

    #navigationPrimary > li > a,
    .pkp_head_wrapper .pkp_search .search_controls .search_prompt {
        color: #fff;
    }

    #navigationPrimary a:hover,
    #navigationPrimary a:focus {
        color: #fff;
    }

    .pkp_navigation_user > li > a,
    .pkp_navigation_user > li.in_focus > a,
    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        color: var(--color-text);
    }

    .pkp_navigation_user_wrapper {
        width: auto;
    }

    .pkp_site_name_wrapper,
    .pkp_head_wrapper {
        width: 100% !important;
        padding: 0;
    }

    .has_site_logo .pkp_head_wrapper {
        padding-top: 0;
    }

    .pkp_navigation_primary {
        max-width: 90%;
    }
}


/* ============================================================
   24. TABLET Y MÓVIL
   ============================================================ */

@media (max-width: 992px) {

    #navigationPrimary > li > a {
        padding-bottom: 6px;
        border-bottom-width: 3px;

        text-transform: none;

        font-size: 15px;
        font-weight: 600;

        color: #fff;
    }
}


@media (max-width: 600px) {

    .pkp_site_name_wrapper {
        height: auto;
        min-height: 90px;
    }

    .pkp_site_name .is_img img {
        max-height: 100%;
        width: 100%;
        height: auto;
    }

    .obj_article_summary .authors {
        padding-right: 0;
    }

    .pkp_footer_content {
        padding: 22px;
    }

    #customblock-iniciarsesion p a,
    #customblock-registrarse p a,
    .block_make_submission a {
        max-width: 100%;
    }
}


@media (max-width: 500px) {

    .div-largo,
    .div-corto {
        width: 100%;
        float: none;
    }

    .logos {
        padding-top: 20px;
    }
}


@media (max-width: 400px) {

    .pkp_site_name_wrapper {
        min-height: 60px;
    }
}


/* ============================================================
   25. IMÁGENES DEL FOOTER
   ============================================================ */

@media (min-width: 500px) {

    .pkp_footer_content > p > img {
        width: 500px;
        max-width: 100%;
        height: auto;
    }
}


/* ============================================================
   26. ACCESIBILIDAD / FOCUS
   ============================================================ */

.pkp_navigation_primary [aria-haspopup]:focus {
    background-color: transparent;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline-color: var(--color-accent);
}


/* ============================================================
   27. PEQUEÑOS DETALLES VISUALES
   ============================================================ */

/* Separadores más suaves */

.obj_issue_toc {
    border-color: var(--color-border);
}


/* Títulos generales */

.pkp_page_index h2,
.page h1,
.page h2 {
    color: var(--color-primary-dark);
}


/* Links destacados */

.pkp_page_index a:hover {
    text-decoration-color: var(--color-accent);
}


/* Suaviza imágenes */

img {
    max-width: 100%;
}


/* ============================================================
   FIN
   ============================================================ */