/* ============================================================
   KERNEL X PRESS — OJS Custom Stylesheet
   Tema: Bootstrap 3 Base Theme + variante "Journal"
   Aplicar en: Website Settings > Appearance > Advanced > Custom Stylesheet
   ============================================================ */

/* ─────────────────────────────────────────
   1. NAVBAR — fondo negro total
───────────────────────────────────────── */
.navbar,
.navbar-default,
nav.navbar,
#navigationUserWrapper,
.pkp_navigation_primary {
  background-color: #0a0a0a !important;
  background-image: none !important;
  border-color: #1c1c1c !important;
  border-bottom: 2px solid #f0a500 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
}

/* Links del navbar */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text,
.pkp_navigation_primary .navbar-nav > li > a {
  color: #e0e0e0 !important;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #f0a500 !important;
  background-color: transparent !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #f0a500 !important;
  background-color: rgba(240, 165, 0, 0.08) !important;
}

/* Dropdown del navbar */
.navbar-default .navbar-nav .open .dropdown-menu {
  background-color: #111111 !important;
  border: 1px solid #2a2a2a !important;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #cccccc !important;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
  color: #f0a500 !important;
  background-color: #1a1a1a !important;
}

/* ─────────────────────────────────────────
   2. LOGO — más grande y con padding
───────────────────────────────────────── */
.navbar-brand,
.pkp_navigation_primary .navbar-brand {
  height: auto !important;
  padding: 6px 15px !important;
}

.navbar-brand img,
.pkp_navigation_primary .navbar-brand img {
  max-height: 90px !important;
  height: 90px !important;
  width: auto !important;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.navbar-brand img:hover {
  opacity: 0.85;
}

/* ─────────────────────────────────────────
   3. NAVBAR TOGGLER (móvil)
───────────────────────────────────────── */
.navbar-default .navbar-toggle {
  border-color: #444444 !important;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #e0e0e0 !important;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #1a1a1a !important;
}

/* ─────────────────────────────────────────
   4. BARRA DE USUARIO (admin / login)
───────────────────────────────────────── */
#navigationUserWrapper .nav > li > a,
.pkp_navigation_user li a {
  color: #aaaaaa !important;
  font-size: 0.875rem;
}

#navigationUserWrapper .nav > li > a:hover,
.pkp_navigation_user li a:hover {
  color: #f0a500 !important;
}

/* ─────────────────────────────────────────
   5. FOOTER — fondo negro total
───────────────────────────────────────── */
footer,
.pkp_structure_footer,
footer.pkp_structure_footer,
.footer,
#pkp_content_footer {
  background-color: #0a0a0a !important;
  background-image: none !important;
  border-top: 2px solid #f0a500 !important;
  color: #888888 !important;
  padding: 2rem 0 !important;
}

footer p,
.pkp_structure_footer p,
footer span,
.pkp_structure_footer span {
  color: #888888 !important;
}

footer a,
.pkp_structure_footer a {
  color: #f0a500 !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover,
.pkp_structure_footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* ─────────────────────────────────────────
   6. SIDEBAR — índice e indexaciones
───────────────────────────────────────── */
.pkp_sidebar .pkp_block {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.pkp_sidebar .pkp_block .title {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  padding: 0.6rem 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ─────────────────────────────────────────
   7. BOTÓN PRINCIPAL (Make a Submission)
───────────────────────────────────────── */
a.pkp_button_primary,
.pkp_button_primary,
.btn-primary {
  background-color: #f0a500 !important;
  border-color: #f0a500 !important;
  color: #0a0a0a !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

a.pkp_button_primary:hover,
.pkp_button_primary:hover,
.btn-primary:hover {
  background-color: #d4920a !important;
  border-color: #d4920a !important;
  color: #000000 !important;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────
   8. RESPONSIVE — ajuste en móvil
───────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar-brand img,
  .pkp_navigation_primary .navbar-brand img {
    max-height: 55px !important;
    height: 55px !important;
  }

  .navbar-default .navbar-collapse {
    background-color: #0a0a0a !important;
    border-top: 1px solid #1c1c1c !important;
  }
}