/**
 * Plantilla CSS Personalizada para OJS
 * Revista: Inteligencia Colectiva - SAPHIR
 * Color principal: #0f7472 (Cian oscuro)
 * Color secundario: #4b4b4b (Gris oscuro)
 */

/* =========================================
   1. Variables de Color y Tipografía
   ========================================= */
:root {
    --color-primario: #0f7472;
    --color-primario-hover: #0b5a58;
    --color-secundario: #4b4b4b;
    --color-fondo: #f9f9f9;
    --color-texto: #333333;
    --fuente-principal: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    font-family: var(--fuente-principal);
    color: var(--color-texto);
    background-color: var(--color-fondo);
}

/* =========================================
   2. Encabezado y Navegación (Header)
   ========================================= */
.pkp_structure_head {
    background-color: #ffffff;
    border-bottom: 3px solid var(--color-primario);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.pkp_navigation_primary a, 
.pkp_navigation_user a {
    color: var(--color-secundario);
    font-weight: 500;
    transition: color 0.3s ease;
}

.pkp_navigation_primary a:hover, 
.pkp_navigation_primary a:focus,
.pkp_navigation_user a:hover {
    color: var(--color-primario);
}

/* =========================================
   3. Botones y Elementos de Acción
   ========================================= */
.cmp_button, 
button, 
.pkp_button {
    background-color: var(--color-primario);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

.cmp_button:hover, 
button:hover, 
.pkp_button:hover {
    background-color: var(--color-primario-hover);
    color: #ffffff;
}

/* Enlaces generales */
a {
    color: var(--color-primario);
    text-decoration: none;
}

a:hover {
    color: var(--color-primario-hover);
    text-decoration: underline;
}

/* =========================================
   4. Listado de Artículos y Títulos
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-secundario);
}

.obj_article_summary .title a {
    color: var(--color-primario);
    font-size: 1.2rem;
    font-weight: bold;
}

.obj_article_summary .title a:hover {
    color: var(--color-primario-hover);
}

/* Etiquetas de PDF/HTML (Galleys) */
.obj_galley_link {
    background-color: var(--color-secundario);
    color: #ffffff;
    border-radius: 3px;
    padding: 5px 10px;
}

.obj_galley_link:hover {
    background-color: var(--color-primario);
    color: #ffffff;
}

/* =========================================
   5. Pie de Página (Footer)
   ========================================= */
.pkp_structure_footer {
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    padding: 40px 0;
    margin-top: 50px;
}

.pkp_structure_footer h3 {
    color: var(--color-primario);
}