/* ==========================================================================
   1. CABECERA Y LOGOTIPO (ADAPTABLE A MÓVILES)
   ========================================================================== */
.pkp_site_name img {
    max-height: 200px !important;
    width: auto !important;
    max-width: 100% !important; /* Evita desbordamiento horizontal */
    margin: 0 auto !important;
    display: block !important;
}

.pkp_site_name {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    font-family: "Montserrat", "Arial", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #222222 !important; 
    margin-top: 10px !important;
}

/* ==========================================================================
   2. TIPOGRAFÍA Y ACCESIBILIDAD TEXTUAL (WCAG AA)
   ========================================================================== */
body, p, li {
    font-family: "Merriweather", "Georgia", serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #1A1A1A !important; /* Negro óptimo para lectura */
}

/* Encabezados legibles */
h1, h2, h3, h4 {
    font-family: "Montserrat", "Arial", sans-serif !important;
    font-weight: 700 !important;
    color: #593E83 !important; /* MORADO REEMPLAZADO */
    margin-bottom: 0.5em !important;
}

h1 { font-size: 28px !important; }
h2 { font-size: 24px !important; }
h3 { font-size: 20px !important; }

/* Enlaces generales del cuerpo del texto */
a {
    color: #593E83 !important; /* MORADO REEMPLAZADO */
    text-decoration: underline !important; 
}
a:hover, a:focus {
    color: #1A1A1A !important;
    text-decoration: none !important;
    outline: 2px solid #593E83 !important; /* MORADO REEMPLAZADO */
}


/* ==========================================================================
   3. MENÚ DE NAVEGACIÓN PRINCIPAL (PESTAÑAS MORADAS)
   ========================================================================== */
.pkp_navigation_primary_wrapper {
    background-color: #EDEDED !important; 
    border-bottom: 4px solid #593E83 !important; /* MORADO REEMPLAZADO */
}

.pkp_navigation_primary {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

/* PESTAÑAS PRINCIPALES: Forzadas estrictamente a Morado */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > a span {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #593E83 !important; /* MORADO REEMPLAZADO */
    letter-spacing: 0.5px !important;
    margin: 8px 12px !important; 
    display: inline-block !important;
    text-decoration: none !important; 
}

/* Efecto Hover en menú principal */
.pkp_navigation_primary > li > a:hover, 
.pkp_navigation_primary > li > a:focus {
    color: #1A1A1A !important;
    background-color: #DBDBDB !important; 
    border-radius: 4px !important;
}

/* Submenús del menú principal (Garantiza que hereden morado) */
.pkp_navigation_primary ul a {
    color: #593E83 !important; /* MORADO REEMPLAZADO */
}


/* ==========================================================================
   4. BARRA Y BOTÓN DE USUARIO (LOGUEADO / TEXTO BLANCO)
   ========================================================================== */
/* Fuerza color blanco únicamente al área de perfil de usuario superior */
.pkp_navigation_user,
.pkp_navigation_user a,
.pkp_navigation_user span,
.pkp_navigation_user > li > a,
.pkp_navigation_user > li > a span {
    color: #FFFFFF !important; /* TEXTO DE USUARIO SIEMPRE BLANCO */
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Efecto hover exclusivo para el botón de usuario */
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_navigation_user > li > a:hover span,
.pkp_navigation_user > li > a:focus span {
    color: #EDEDED !important; 
    text-decoration: underline !important;
}

/* Caja de submenú desplegable del usuario (Perfil / Cerrar Sesión) */
.pkp_navigation_user ul {
    background-color: #593E83 !important; /* MORADO REEMPLAZADO */
    border: 1px solid #593E83 !important;
    display: block !important;
}

.pkp_navigation_user ul li a {
    color: #FFFFFF !important;
    display: block !important;
    padding: 10px 15px !important;
}

.pkp_navigation_user ul li a:hover {
    background-color: #593E83 !important; 
    color: #FFFFFF !important;
}


/* ==========================================================================
   5. OPTIMIZACIÓN EXCLUSIVA PARA CELULARES
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* Menú principal vertical */
    .pkp_navigation_primary {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 20px !important;
    }

    .pkp_navigation_primary > li {
        width: 100% !important;
        border-bottom: 1px solid #D0D0D0 !important; 
        text-align: left !important;
    }

    .pkp_navigation_primary > li > a {
        margin: 0 !important;
        padding: 14px 0 !important; 
        width: 100% !important;
        display: block !important;
    }

    /* Menú de usuario vertical en móviles */
    .pkp_navigation_user {
        background-color: #593E83 !important; /* MORADO REEMPLAZADO */
        padding: 10px !important;
    }
    
    .pkp_navigation_user ul {
        box-shadow: none !important;
        padding-left: 15px !important;
        background-color: #382452 !important; 
    }
    
    .pkp_navigation_user > li > a,
    .pkp_navigation_user ul li a {
        padding: 12px 0 !important;
        display: block !important;
        width: 100% !important;
    }
}