/* --- INICIO DEL CSS ACTUALIZADO (Paleta #241e51 / #6e6b8d + Footer Blanco) --- */

/* 1. IMPORTAR FUENTE MODERNA */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* 2. ESTILOS GENERALES */
body {
    font-family: 'Inter', sans-serif !important;
    background-color: #f4f6f9;
    color: #333;
}

/* Títulos generales (H1-H5) en color secundario (#6e6b8d) */
h1, h2, h3, h4, h5 {
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #6e6b8d; 
}

/* 3. CABECERA (HEADER) */
.pkp_structure_head {
    background-color: #241e51; /* Color Principal */
    border-bottom: 4px solid #6e6b8d; 
    box-shadow: 0 4px 15px rgba(36, 30, 81, 0.25);
}

.pkp_site_name .is_text {
    color: #ffffff !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 4. MENÚ DE NAVEGACIÓN */
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #ffffff !important;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_user > li > a:hover {
    background-color: #6e6b8d; /* Hover secundario */
    border-radius: 4px;
    color: #fff !important;
    opacity: 1;
}

/* 5. ARTÍCULOS COMO TARJETAS */
.obj_article_summary {
    background: #ffffff;
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #A7A8AA; 
    transition: all 0.3s ease;
}

.obj_article_summary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(36, 30, 81, 0.15);
    border-left-color: #241e51; 
}

.obj_article_summary .title a {
    text-decoration: none;
    color: #6e6b8d; 
    font-size: 1.25rem;
    font-weight: 700;
}

.obj_article_summary .title a:hover {
    color: #241e51; 
}

/* 6. BOTONES DE PDF */
a.obj_galley_link, 
.obj_article_details .galleys .obj_galley_link {
    background-color: #241e51;
    color: #ffffff !important;
    padding: 10px 22px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    border: 2px solid #241e51;
    transition: all 0.3s ease;
}

a.obj_galley_link:hover {
    background-color: #ffffff;
    color: #241e51 !important;
    border-color: #241e51;
    box-shadow: 0 5px 15px rgba(36, 30, 81, 0.3);
}

/* 7. BARRA LATERAL (SIDEBAR) */
.pkp_block {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.pkp_block .title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #6e6b8d; 
    border-bottom: 2px solid #241e51; 
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* 8. PIE DE PÁGINA (FOOTER) - TODO BLANCO */
.pkp_structure_footer {
    background: #241e51; /* Fondo oscuro */
    color: #ffffff !important; /* Texto base blanco */
    padding: 50px 0;
    text-align: center;
    border-top: 6px solid #6e6b8d; 
}

/* Forzar que CUALQUIER texto dentro del footer sea blanco */
.pkp_structure_footer a,
.pkp_structure_footer p,
.pkp_structure_footer li,
.pkp_structure_footer span,
.pkp_structure_footer div,
.pkp_structure_footer h1, 
.pkp_structure_footer h2, 
.pkp_structure_footer h3, 
.pkp_structure_footer h4, 
.pkp_structure_footer h5 {
    color: #ffffff !important;
    text-decoration: none;
}

/* Efecto hover en los enlaces del footer */
.pkp_structure_footer a:hover {
    color: #ffffff !important;
    text-decoration: underline;
    opacity: 0.8;
}

/* 9. GRÁFICO DE ESTADÍSTICAS */
.usageStatsGraph .bar {
    fill: #241e51 !important;
    stroke: #6e6b8d !important;
}

.item.usage_stats_graph {
    border-left: 5px solid #241e51;
    box-shadow: 0 4px 10px rgba(36, 30, 81, 0.1);
}

/* --- ESTILOS DE REDES SOCIALES (VERSIÓN IMAGEN) --- */

/* Contenedor flexible */
.sidebar-social-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 15px 0;
}

/* El círculo azul de fondo */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;  /* Tamaño del círculo */
    height: 45px;
    background-color: #241e51; /* TU COLOR AZUL */
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    border: 2px solid #241e51; /* Borde para suavizar */
}

/* La IMAGEN dentro del círculo */
.social-icon img {
    width: 22px !important; /* Tamaño del icono */
    height: 22px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* Efecto al pasar el mouse */
.social-icon:hover {
    background-color: #6e6b8d; /* CAMBIA AL COLOR SECUNDARIO */
    border-color: #6e6b8d;
    transform: translateY(-4px); /* Sube un poquito */
    box-shadow: 0 6px 12px rgba(36, 30, 81, 0.25);
}

/* --- VIDEO LOCAL RESPONSIVO --- */

.video-local-wrapper {
    margin-bottom: 15px;
    background: #000; /* Fondo negro estético */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Para que el video no se salga de los bordes redondos */
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra suave */
}

.video-local-wrapper video {
    width: 100%;       /* Ocupa todo el ancho de la columna */
    height: auto;      /* La altura se ajusta sola */
    display: block;    /* Elimina espacios extra abajo */
    object-fit: cover; /* Asegura que se vea bien */
}

/* Estilo para el texto del ISSN (Igual que antes) */
.issn-sidebar {
    text-align: center;
    font-size: 0.95rem;
    color: #333;
    padding: 10px;
    background: #f4f6f9;
    border-radius: 6px;
    border: 1px dashed #6e6b8d;
}

.issn-sidebar strong {
    color: #241e51;
}
/* --- FIN DEL CSS --- */