/* ==========================================
   1. FONDO PREMIUM Y MODERNO CON TEXTURA
   ========================================== */
.pkp_navigation_user_wrapper, 
.pkp_structure_head {
    background: radial-gradient(circle at 50% 30%, #1e6498 0%, #11466d 70%, #0a3352 100%) !important;
    position: relative;
    overflow: visible !important; 
}

/* Sombra inferior elegante */
.pkp_structure_head {
    box-shadow: 0 10px 30px rgba(10, 51, 82, 0.15) !important;
}

/* Espacio arriba y abajo del logo (Escritorio) */
.pkp_site_name_wrapper {
    padding-top: 60px !important;   
    padding-bottom: 50px !important; 
    display: flex;
    justify-content: center; 
}

/* Evita que el logo se estire o pierda su proporción */
.pkp_site_name_wrapper img {
    max-width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); 
    object-fit: contain !important;
}


/* ==========================================
   2. AJUSTES PARA ESCRITORIO
   ========================================== */
@media (min-width: 992px) {

    /* 
     * PROFILE (Menú de usuario):
     * Lo posicionamos arriba a la derecha. 
     * El cálculo max() asegura que se alinee perfectamente con el final de la barra (1170px)
     * pero nunca se salga de la pantalla en monitores más pequeños.
     */
    .pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 25px !important; /* Visible y seguro en la zona superior */
        right: max(20px, calc((100% - 1170px) / 2)) !important; 
        left: auto !important;
        transform: none !important;
        background: transparent !important;
        z-index: 999 !important;
        width: auto !important;
    }

    .pkp_navigation_user {
        display: flex !important;
        justify-content: flex-end !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_user > li > a {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500 !important;
    }

    /* Opciones desplegables del usuario en Computadora */
    .pkp_navigation_user ul {
        background: #11466d !important;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
        border-radius: 4px;
        z-index: 9999 !important;
        outline: none !important;
    }

    .pkp_navigation_user ul a {
        color: #ffffff !important;
        font-weight: 500 !important;
        display: block !important;
        padding: 8px 15px !important;
    }

    .pkp_navigation_user ul a:hover {
        background: #1e6498 !important;
        color: #4fc3f7 !important;
    }

    /* 
     * CORRECCIÓN DEFINITIVA: 
     * Elimina el cuadrado blanco y bordes al hacer clic/foco en CUALQUIER botón de usuario.
     */
    .pkp_navigation_user a:focus,
    .pkp_navigation_user a:active,
    .pkp_navigation_user a:visited,
    .pkp_navigation_user li:focus-within {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Para botones principales en modo incógnito (Registrarse / Entrar) */
    .pkp_navigation_user > li > a:focus,
    .pkp_navigation_user > li > a:active {
        background: transparent !important; /* Evita el fondo blanco */
        color: #4fc3f7 !important;           /* Cambia a celeste elegante al hacer clic */
    }

    /* Para submenús cuando estás logueado */
    .pkp_navigation_user ul a:focus,
    .pkp_navigation_user ul a:active {
        background: #11466d !important;
        color: #4fc3f7 !important;
    }

    /* MENÚ PRINCIPAL CENTRADO */
    .pkp_navigation_primary_wrapper {
        border-top: 1px solid rgba(255, 255, 255, 0.12); 
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        display: flex !important;
        justify-content: center !important; 
        position: relative !important;
        overflow: visible !important; 
        max-width: 1170px; 
        margin: 0 auto !important; 
    }

    .pkp_navigation_primary {
        display: flex !important;
        justify-content: center !important;
        gap: 45px !important; 
        float: none !important;
        width: auto !important;
        overflow: visible !important;
    }

    .pkp_navigation_primary > li > a {
        font-weight: 600 !important; 
        font-size: 1.05rem !important; 
        letter-spacing: 0.5px; 
        color: rgba(255, 255, 255, 0.9) !important; 
        position: relative;
        padding: 8px 0 !important;
        transition: color 0.3s ease !important;
    }

    /* Hover del menú principal */
    .pkp_navigation_primary > li > a:hover {
        color: #4fc3f7 !important; 
        text-decoration: none !important;
    }

    .pkp_navigation_primary > li > a::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #4fc3f7;
        transform-origin: bottom center;
        transition: transform 0.25s ease-out;
    }

    .pkp_navigation_primary > li > a:hover::after {
        transform: scaleX(1);
    }

    /* Submenú de navegación principal (Acerca de) */
    .pkp_navigation_primary ul {
        background: #11466d !important; 
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
        border-radius: 4px;
        z-index: 9999 !important;
    }
    
    .pkp_navigation_primary ul a {
        font-weight: 500 !important;
        color: #ffffff !important;
        padding: 10px 15px !important;
    }
    
    .pkp_navigation_primary ul a:hover {
        background: #1e6498 !important;
        color: #4fc3f7 !important;
    }

    /* 
     * BUSCADOR (Search):
     * Lo posicionamos exactamente en el extremo derecho del contenedor principal (1170px),
     * alineado horizontalmente con el menú de navegación principal.
     */
    .pkp_navigation_search_wrapper {
        position: absolute !important;
        bottom: 12px !important; /* Alineado verticalmente con el menú principal */
        right: max(20px, calc((100% - 1170px) / 2)) !important; 
        left: auto !important;
        margin: 0 !important;
        z-index: 999 !important;
    }

    .pkp_navigation_search {
        margin: 0 !important;
    }

    .pkp_navigation_search a {
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        background: rgba(255, 255, 255, 0.1); 
        padding: 6px 15px !important;
        border-radius: 20px;
        transition: all 0.25s ease;
        display: inline-block !important;
    }

    .pkp_navigation_search a:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.2);
    }
}


/* ==========================================
   3. COMPORTAMIENTO MÓVIL OPTIMIZADO (¡No tocar!)
   ========================================== */
@media (max-width: 991px) {
    /* El bloque azul móvil y el logo quedan como ya se definieron */
    .pkp_site_name_wrapper {
        min-height: 5.7rem !important; 
        padding-top: 30px !important;   
        padding-bottom: 30px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        display: flex !important;       
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .pkp_site_name {
        left: 3.5rem !important; 
        right: 15px !important;
        max-width: 80% !important; 
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .pkp_site_name_wrapper .is_img {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    .pkp_site_name_wrapper .is_img img {
        width: auto !important; 
        max-width: 100% !important; 
        height: auto !important; 
        max-height: 75px !important; 
        object-fit: contain !important; 
    }

    .pkp_navigation_user_wrapper,
    .pkp_navigation_user,
    .pkp_navigation_user ul,
    .pkp_navigation_user ul a {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
}