/* Definición de variables CSS para los colores personalizados */
:root {
    --color-primary: #152b45; /* Azul intermedio para elementos principales (navbar, headings, botones) */
    --color-secondary: #0f1525; /* Azul muy oscuro para texto principal y fondos de alto contraste (ej. footer) */
    --color-accent: #28a745; /* Verde para acciones destacadas (botones de acción, links importantes). Puedes cambiarlo si tienes otro color de acento. */
    --color-background: #f9f9f9; /* Blanco roto/crema para el fondo general de la página */
    --color-text-dark: #0f1525; /* Azul muy oscuro para el texto del cuerpo */
    --color-text-light: #ffffff; /* Blanco puro para texto sobre fondos oscuros */
    --color-border: #efefef; /* Gris muy claro para bordes y separadores sutiles */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-dark);
}

/* Estilos para la barra de navegación */
.navbar-default {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: 0; /* Elimina bordes redondeados por defecto de Bootstrap */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra para darle profundidad */
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: var(--color-text-light);
    font-weight: 600; /* Un poco más de peso para la legibilidad */
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--color-text-light);
    background-color: #0f1525; /* El azul más oscuro para el hover/activo */
}

/* Estilos para botones */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: 8px; /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave y pequeño efecto al presionar */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0f1525; /* Azul más oscuro en hover */
    border-color: #0f1525;
    transform: translateY(-1px); /* Ligero levantamiento al pasar el ratón */
}

.btn-success { /* Para acciones destacadas como "Enviar Artículo" */
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #218838; /* Tono más oscuro del verde en hover */
    border-color: #218838;
    transform: translateY(-1px);
}

.btn-default { /* Botones secundarios, como "Ver todos los Números" */
    background-color: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text-dark);
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--color-border);
    border-color: var(--color-secondary);
    transform: translateY(-1px);
}


/* Estilos para paneles o bloques de contenido */
.panel-default {
    border-color: var(--color-border);
    border-radius: 10px; /* Bordes más redondeados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* Sombra más pronunciada */
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen bien */
}

.panel-default > .panel-heading {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
    padding: 15px 20px; /* Más padding en el encabezado */
    font-size: 1.2em; /* Título un poco más grande */
    font-weight: 700;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.panel-body {
    padding: 20px;
}

/* Estilos para el pie de página */
.footer {
    background-color: var(--color-background); /* Fondo claro para el footer, como en la imagen */
    color: var(--color-text-dark); /* Texto oscuro para el footer para asegurar contraste */
    padding: 30px 0;
    margin-top: 50px;
    text-align: center;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

/* --- CORRECCIÓN CLAVE PARA LA LEGIBILIDAD DEL TEXTO EN EL FOOTER Y ÁREAS SIMILARES --- */
/* Asegurar que todos los elementos de texto dentro del footer tengan el color oscuro de contraste */
.footer p,
.footer span,
.footer a,
.footer li,
.footer div { /* Incluimos div por si el texto está en un div */
    color: var(--color-text-dark) !important; /* Usar !important para sobrescribir cualquier regla menos específica */
    opacity: 1 !important; /* Asegurar que no haya opacidad baja aplicada */
}
/* Si hay un elemento específico como el de "Platform & workflow by OJS / PKP" que necesita un ajuste,
   y no está cubierto por lo anterior, se podría añadir una regla más específica aquí.
   Por ejemplo, si fuera una clase '.ojs-pkp-info':
   .ojs-pkp-info { color: var(--color-text-dark) !important; }
*/
/* --- FIN DE LA CORRECCIÓN CLAVE --- */


/* Ajustes para el contenedor principal */
.container {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Estilos para enlaces generales */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-secondary); /* Cambia al azul más oscuro en hover */
    text-decoration: underline;
}

/* Pequeño ajuste para el título de la revista en el navbar */
.navbar-brand {
    font-weight: 700;
    font-size: 1.5em; /* Título de marca un poco más grande */
}

/* Estilos para los títulos de los artículos */
h4 {
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
}

hr {
    border-top: 1px solid var(--color-border);
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Responsividad básica para el menú de navegación */
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: var(--color-text-dark); /* Color de texto para elementos del menú desplegable en móvil */
    }
    .navbar-default .navbar-toggle {
        border-color: var(--color-text-light);
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: var(--color-text-light);
    }
}