/* --- 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;
}

/* --- ESTILO DEL BOTÓN PERSONALIZADO --- */

/* 1. Quitamos márgenes molestos del contenedor */
.pkp_block.block_custom .content .contenedor-boton-envio {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* 2. El diseño del botón */
a.mi-boton-envio {
    display: flex; /* Para centrar icono y texto */
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #241e51; /* TU COLOR PRINCIPAL */
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    padding: 18px 10px;
    border-radius: 8px;
    border: 2px solid #241e51;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(36, 30, 81, 0.2);
    box-sizing: border-box; /* Evita que se salga del ancho */
}

/* 3. El icono de la flecha */
.icono-boton {
    margin-right: 10px;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* 4. Efecto Hover (Al pasar el mouse) */
a.mi-boton-envio:hover {
    background-color: #ffffff;
    color: #241e51 !important; /* Texto azul */
    border-color: #6e6b8d; /* Borde secundario */
    transform: translateY(-3px);
}

a.mi-boton-envio:hover .icono-boton {
    transform: translateX(5px); /* La flecha se mueve */
    color: #6e6b8d;
}

/* --- CONTADOR DE VISITAS MODERNO --- */

/* 1. La tarjeta contenedora */
.contador-visitas-moderno {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px; /* Bordes muy redondeados */
    padding: 15px;
    text-align: center; /* Centra todo */
    box-shadow: 0 4px 12px rgba(36, 30, 81, 0.08); /* Sombra suave con tu azul */
    border-top: 5px solid #241e51; /* Tu color principal arriba */
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

/* 2. Efecto al pasar el mouse sobre la tarjeta */
.contador-visitas-moderno:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(36, 30, 81, 0.15);
}

/* 3. Título pequeño y elegante */
.titulo-contador {
    font-size: 0.85rem;
    font-weight: 700;
    color: #6e6b8d; /* Tu color secundario */
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 8px;
}

/* 4. Hacemos la imagen Responsive */
.contador-visitas-moderno img.img-responsive {
    max-width: 100%; /* Nunca será más ancha que la columna */
    height: auto;    /* Mantiene la proporción */
    border-radius: 6px; /* Suaviza las esquinas de la imagen */
    display: inline-block;
}

/* --- BLOQUE RSS/ATOM MODERNO (VERSIÓN FINAL) --- */

/* 1. Ocultamos la imagen fea que trae OJS por defecto */
.pkp_block.block_web_feed .content li a img {
    display: none !important;
}

/* 2. Estilo base del botón */
.pkp_block.block_web_feed .content li a {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 12px 15px;
    border-radius: 6px;
    text-decoration: none;
    color: #6e6b8d !important; /* Tu color secundario */
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 3. Insertamos el ÍCONO MODERNO (RSS Waves) */
.pkp_block.block_web_feed .content li a::before {
    content: ""; /* Caja vacía para la imagen */
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Usamos el icono oficial de RSS en tu color exacto #6e6b8d */
    background-image: url('https://img.icons8.com/ios-filled/50/6e6b8d/rss.png');
    transition: all 0.3s ease;
}

/* 4. INYECTAMOS LOS NOMBRES (Atom / RSS) */
.pkp_block.block_web_feed .content li a[href*="atom"]::after { content: "ATOM Feed"; }
.pkp_block.block_web_feed .content li a[href*="rss2"]::after { content: "RSS 2.0"; }
.pkp_block.block_web_feed .content li a[href*="rss"]::after { content: "RSS 1.0"; }
/* Corrección de prioridad */
.pkp_block.block_web_feed .content li a[href*="rss2"]::after { content: "RSS 2.0" !important; }

/* 5. EFECTO HOVER (Al pasar el mouse) */
.pkp_block.block_web_feed .content li a:hover {
    background-color: #241e51; /* Fondo Azul Principal */
    color: #ffffff !important; /* Texto Blanco */
    border-color: #241e51;
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(36, 30, 81, 0.2);
}

/* Magia: El icono se vuelve blanco al pasar el mouse */
.pkp_block.block_web_feed .content li a:hover::before {
    filter: brightness(0) invert(1); /* Invierte el color a blanco puro */
}

/* --- BLOQUE INDEXACIONES (COMPACTO Y A COLOR) --- */

/* 1. Contenedor Flexible */
.indexaciones-modernas {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Menos espacio entre una tarjeta y otra */
    width: 100%;
}

/* 2. La Tarjeta (Más bajita y compacta) */
a.index-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 5px; /* REDUCIDO: Mucho menos relleno arriba y abajo */
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* 3. Contenedor del Logo */
.index-icon {
    width: 100%;
    height: 60px; /* REDUCIDO: Antes 80px. Mantiene el logo grande pero la caja es más chica */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px; /* REDUCIDO: Menos distancia entre imagen y texto */
    background-color: transparent;
}

/* 4. La Imagen (A TODO COLOR) */
.index-icon img {
    max-width: 160px; /* Ligeramente ajustado para la nueva altura */
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none !important; /* Colores originales siempre */
    opacity: 1;
    transition: all 0.3s ease;
}

/* 5. El Texto (Más compacto) */
.index-label {
    font-size: 0.9rem; /* Texto un poquito más fino para ahorrar espacio */
    font-weight: 700;
    color: #6e6b8d;
    line-height: 1.1;
    transition: all 0.3s ease;
}

/* --- EFECTO AL PASAR EL MOUSE --- */
a.index-card:hover {
    background-color: #241e51; /* Fondo azul */
    border-color: #241e51;
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(36, 30, 81, 0.2);
}

a.index-card:hover .index-icon img {
    transform: scale(1.05); /* Pequeño zoom */
    filter: none !important;
}

a.index-card:hover .index-label {
    color: #ffffff !important; /* Texto blanco */
}

/* --- BLOQUES IDIOMA E INFORMACIÓN MODERNOS --- */

/* 1. Estilo General de las "Tarjetas" (Contenedores) */
.pkp_block.block_language,
.pkp_block.block_information {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding-bottom: 10px;
    box-shadow: 0 4px 10px rgba(36, 30, 81, 0.08);
    margin-bottom: 20px;
}

/* 2. Limpieza de las listas */
.pkp_block.block_language ul,
.pkp_block.block_information ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pkp_block.block_language li,
.pkp_block.block_information li {
    margin-bottom: 8px;
}

/* 3. Convertir enlaces de texto en BOTONES */
.pkp_block.block_language a,
.pkp_block.block_information a {
    display: block;
    background-color: #f8f9fa;
    color: #6e6b8d !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    position: relative;
    /* Flexbox ayuda a alinear icono y texto verticalmente */
    display: flex; 
    align-items: center; 
}

/* 4. EFECTO AL PASAR EL MOUSE (HOVER EN EL BOTÓN) */
.pkp_block.block_language a:hover,
.pkp_block.block_information a:hover {
    background-color: #241e51; /* Fondo Azul Oscuro */
    color: #ffffff !important; /* Texto Blanco */
    border-color: #241e51;
    transform: translateX(5px); /* Se mueve un poco a la derecha */
    box-shadow: 0 4px 8px rgba(36, 30, 81, 0.2);
}

/* --- ICONOS (Decoración) --- */

/* Estilo base compartido */
.pkp_block.block_information a::before,
.pkp_block.block_language a::before {
    margin-right: 12px;
    font-size: 1.3rem; 
    line-height: 1;
    transition: all 0.3s ease;
}

/* 1. CONFIGURACIÓN DEL GLOBO (Emoji) */
.pkp_block.block_language a::before {
    content: "🌐"; 
    filter: grayscale(100%); /* Empieza gris */
    opacity: 0.6;
}

/* 2. CONFIGURACIÓN DE INFORMACIÓN (Texto 'i') */
.pkp_block.block_information a::before {
    content: "ⓘ"; 
    color: #6e6b8d; /* Color grisáceo inicial (igual que el texto del botón) */
    font-weight: 400;
    vertical-align: middle;
    /* No usamos filter grayscale aquí, controlamos el color directo */
}

/* --- EFECTO AL PASAR EL MOUSE (HOVER) --- */

/* Efecto para el GLOBO: Recupera su color original */
.pkp_block.block_language a:hover::before {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.15);
}

/* Efecto para la INFO: Se vuelve BLANCA */
.pkp_block.block_information a:hover::before {
    color: #ffffff !important; /* ¡Aquí forzamos el blanco! */
    transform: scale(1.15);
}
/* --- FIN DEL CSS --- */