/*
RAYCA - Encabezado responsivo para OJS 3.3 (Tema por defecto)
Sustituye al archivo anterior de ampliación del encabezado.
*/

/* ESCRITORIO: 992 px o más
   Banner a todo el ancho de la ventana sin modificar el ancho del menú */
@media (min-width: 992px) {
    .pkp_site_name_wrapper {
        height: auto !important;
        overflow: visible !important;
    }

    .pkp_site_name {
        position: relative !important;
        left: auto !important;
        right: auto !important;

        /* Sale únicamente del contenedor central de OJS */
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: 0 !important;

        /* El banner queda pegado a los bordes de su zona */
        padding: 0 !important;
        box-sizing: border-box !important;

        text-align: center !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .pkp_site_name .is_img {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_site_name .is_img img {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
    }
}

/* TABLETA Y CELULAR: menos de 992 px */
@media (max-width: 991px) {
    .pkp_site_name_wrapper {
        height: auto !important;
        min-height: 0 !important;
    }

    .pkp_site_name {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 8px 48px 8px 52px !important;
        text-align: center !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .pkp_site_name .is_img {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_site_name .is_img img {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 150px !important;
        margin: 0 auto !important;
    }

    .pkp_site_nav_toggle {
        z-index: 1001 !important;
    }
}

/* CELULARES PEQUEÑOS */
@media (max-width: 480px) {
    .pkp_site_name {
        padding: 7px 42px 7px 48px !important;
    }

    .pkp_site_name .is_img img {
        max-height: 135px !important;
    }
}

/* =========================================================
   RAYCA - Identidad cromática del encabezado
   Color guinda aproximado de la imagen de referencia: #76072B
   ========================================================= */

/* Sustituye el azul visible del encabezado por guinda */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_navigation_user_wrapper,
.pkp_site_nav_menu,
.pkp_navigation_primary_wrapper,
.pkp_search_wrapper {
    background-color: #76072B !important;
}

/* Mantiene el área del logo integrada con el mismo color
   cuando haya espacio visible alrededor del banner */
.pkp_site_name_wrapper {
    background-color: #76072B !important;
}

/* Enlaces principales y navegación de usuario en blanco */
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_search_wrapper a {
    color: #FFFFFF !important;
}

/* Estados hover y focus: contraste suave sin perder legibilidad */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_search_wrapper a:hover,
.pkp_search_wrapper a:focus {
    color: #F3D9E2 !important;
}

/* Botón del menú móvil */
.pkp_site_nav_toggle {
    color: #FFFFFF !important;
}

/* Conserva los submenús desplegables claros y legibles */
.pkp_navigation_primary ul {
    background-color: #FFFFFF !important;
}

.pkp_navigation_primary ul a {
    color: #333333 !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
    color: #76072B !important;
}