/* ============================================================
   KERNEL X ENGINEERING INSTITUTE — Custom Theme  (v2)
   AZUL MARINO OSCURO + ANIMACIONES
   + FIX del menú desplegable (z-index)
   + Oculta la marca "OMP / PKP" del footer
   Plataforma: OMP / OJS 3.x (Default Theme - PKP)
   ------------------------------------------------------------
   Subir desde: Settings > Website > Appearance > Setup
                campo "Custom Stylesheet"
   ============================================================ */

/* ---------- COLOR INSTITUCIONAL ÚNICO ---------- */
:root {
  --kx-navy: #0A1F44;
  --kx-text: #1f2d3d;
  --kx-bg-soft: #f4f7fb;
  --kx-white: #ffffff;
}

/* ===========================================================
   0. ANIMACIONES
   =========================================================== */
@keyframes kxFadeUp   { from { opacity:0; transform:translateY(24px);} to { opacity:1; transform:translateY(0);} }
@keyframes kxFadeIn   { from { opacity:0;} to { opacity:1;} }
@keyframes kxFadeDown { from { opacity:0; transform:translateY(-20px);} to { opacity:1; transform:translateY(0);} }
@keyframes kxZoomIn   { from { opacity:0; transform:scale(.94);} to { opacity:1; transform:scale(1);} }

/* ===========================================================
   1. BASE
   =========================================================== */
body {
  color: var(--kx-text);
  background: var(--kx-bg-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { color: var(--kx-navy); letter-spacing:-0.01em; }
a { color: var(--kx-navy); transition: opacity .2s ease; }
a:hover, a:focus { opacity:.75; color: var(--kx-navy); }

/* ===========================================================
   2. HEADER  (azul marino + entrada animada)
   *** z-index alto para que el menú NO quede tapado ***
   =========================================================== */
.pkp_structure_head {
  background: var(--kx-navy) !important;
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  animation: kxFadeDown .6s ease both;
  position: relative;
  z-index: 1000;           /* <-- clave: header por encima del contenido */
}

.pkp_head_wrapper .pkp_site_name,
.pkp_head_wrapper .pkp_site_name a,
.pkp_site_name_wrapper a { color: var(--kx-white) !important; }

/* Barra de navegación */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary,
nav.pkp_navigation_primary_row {
  background: var(--kx-navy) !important;
  border: none !important;
  position: relative;
  z-index: 1000;
}

.pkp_navigation_primary a {
  color: var(--kx-white) !important;
  font-weight: 600;
  border-radius: 4px;
  transition: background .25s ease, transform .2s ease;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: rgba(255,255,255,.15);
  color: var(--kx-white) !important;
  transform: translateY(-1px);
}

/* ===========================================================
   2b. *** FIX DEL MENÚ DESPLEGABLE ***
   El submenú aparecía DETRÁS del banner / sidebar.
   Lo forzamos arriba, con fondo sólido y ancho legible.
   =========================================================== */
.pkp_navigation_primary li { position: relative; }

.pkp_navigation_primary ul {
  background: var(--kx-navy) !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  border-radius: 0 0 8px 8px;
  min-width: 220px;
  padding: 4px 0;
  z-index: 9999 !important;     /* por encima de TODO */
  animation: kxFadeUp .22s ease both;
}
.pkp_navigation_primary ul li { width: 100%; }
.pkp_navigation_primary ul a {
  display: block;
  color: var(--kx-white) !important;
  padding: .6em 1.1em !important;
  white-space: nowrap;
  border-radius: 0;
}
.pkp_navigation_primary ul a:hover {
  background: rgba(255,255,255,.15) !important;
}

/* Búsqueda y usuario */
.pkp_navigation_user a,
.pkp_search input { color: var(--kx-white) !important; }
.pkp_search input::placeholder { color: rgba(255,255,255,.7); }

/* ===========================================================
   3. CONTENIDO + SIDEBAR  (entrada animada)
   z-index normal para que el menú pase por encima
   =========================================================== */
.pkp_structure_main { animation: kxFadeUp .7s ease both; position: relative; z-index: 1; }
.pkp_structure_sidebar { animation: kxFadeIn .9s ease both; position: relative; z-index: 1; }

.pkp_structure_sidebar .pkp_block {
  background: var(--kx-white);
  border: 1px solid #e3e9f1;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 2px 10px rgba(10,31,68,.05);
  animation: kxFadeUp .6s ease both;
  transition: box-shadow .25s ease, transform .25s ease;
}
.pkp_structure_sidebar .pkp_block:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(10,31,68,.12);
}
.pkp_structure_sidebar .pkp_block:nth-child(1){animation-delay:.05s;}
.pkp_structure_sidebar .pkp_block:nth-child(2){animation-delay:.15s;}
.pkp_structure_sidebar .pkp_block:nth-child(3){animation-delay:.25s;}
.pkp_structure_sidebar .pkp_block:nth-child(4){animation-delay:.35s;}
.pkp_structure_sidebar .pkp_block:nth-child(5){animation-delay:.45s;}

.pkp_block .title,
.pkp_block h2 {
  color: var(--kx-navy);
  border-bottom: 2px solid var(--kx-navy);
  padding-bottom: .4rem;
  margin-bottom: .8rem;
  font-size: 1.05rem;
}

/* ===========================================================
   4. FOOTER  (azul marino sólido)
   + OCULTAR marca "Platform & workflow by OMP / PKP"
   =========================================================== */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  background: var(--kx-navy) !important;
  color: var(--kx-white);
  border-top: none;
}
.pkp_structure_footer,
.pkp_structure_footer p,
.pkp_structure_footer li,
.pkp_footer_content { color: rgba(255,255,255,.9); }
.pkp_structure_footer a {
  color: var(--kx-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pkp_structure_footer a:hover { opacity:.8; }

/* >>> Oculta el sello OMP/PKP del pie <<< */
.pkp_brand_footer,
.pkp_structure_footer .pkp_brand,
.pkp_footer_content .pkp_brand_footer {
  display: none !important;
}

/* ===========================================================
   5. BOTONES
   =========================================================== */
.pkp_button,
.cmp_button,
button.submit,
.pkp_block a.action,
input[type="submit"],
.pkp_block.pkp_block_make_submission a,
.pkp_submission a,
.obj_monograph_full .download a {
  background: var(--kx-navy) !important;
  border: none !important;
  color: var(--kx-white) !important;
  border-radius: 6px !important;
  font-weight: 600;
  padding: .65em 1.4em;
  box-shadow: 0 3px 8px rgba(10,31,68,.25);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pkp_button:hover,
.cmp_button:hover,
button.submit:hover,
input[type="submit"]:hover,
.pkp_block.pkp_block_make_submission a:hover,
.obj_monograph_full .download a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(10,31,68,.4);
}

/* ===========================================================
   6. CATÁLOGO
   =========================================================== */
.cmp_catalog, .pkp_catalog, .catalog { animation: kxFadeIn .6s ease both; }

.obj_monograph_summary {
  background: var(--kx-white);
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  padding: 1.1rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 3px 12px rgba(10,31,68,.06);
  animation: kxFadeUp .6s ease both;
  transition: transform .3s ease, box-shadow .3s ease;
}
.obj_monograph_summary:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(10,31,68,.16);
}
.obj_monograph_summary:nth-child(1){animation-delay:.05s;}
.obj_monograph_summary:nth-child(2){animation-delay:.12s;}
.obj_monograph_summary:nth-child(3){animation-delay:.19s;}
.obj_monograph_summary:nth-child(4){animation-delay:.26s;}
.obj_monograph_summary:nth-child(5){animation-delay:.33s;}
.obj_monograph_summary:nth-child(6){animation-delay:.40s;}
.obj_monograph_summary:nth-child(7){animation-delay:.47s;}
.obj_monograph_summary:nth-child(8){animation-delay:.54s;}

.obj_monograph_summary .title a { color: var(--kx-navy); font-weight: 700; }

.obj_monograph_summary .cover img,
.cover img {
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(10,31,68,.18);
  transition: transform .3s ease, box-shadow .3s ease;
}
.obj_monograph_summary:hover .cover img,
.cover img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 26px rgba(10,31,68,.28);
}

/* ===========================================================
   7. PÁGINA INTERNA DEL LIBRO
   =========================================================== */
.obj_monograph_full {
  background: var(--kx-white);
  border-radius: 16px;
  box-shadow: 0 6px 26px rgba(10,31,68,.08);
  padding: 2rem;
  margin-top: 1rem;
  animation: kxZoomIn .5s ease both;
}
.obj_monograph_full .row { gap: 1.5rem; }
.obj_monograph_full .main_entry { animation: kxFadeUp .6s ease both; animation-delay:.1s; }
.obj_monograph_full .cover img { border-radius: 10px; box-shadow: 0 10px 30px rgba(10,31,68,.25); }
.obj_monograph_full .title { color: var(--kx-navy); font-size: 1.9rem; font-weight: 800; line-height: 1.2; margin-bottom:.4rem; }
.obj_monograph_full .author { color:#56657a; font-size: 1.05rem; margin-bottom: 1.2rem; }
.obj_monograph_full .description {
  font-size: 1rem; line-height: 1.7; color: var(--kx-text);
  border-top: 1px solid #e6ebf2; padding-top: 1.2rem; margin-top: 1.2rem;
}
.obj_monograph_full .item {
  background: var(--kx-bg-soft);
  border-left: 4px solid var(--kx-navy);
  border-radius: 8px; padding: .8rem 1rem; margin-bottom: .9rem;
  animation: kxFadeUp .5s ease both;
}
.obj_monograph_full .item .label {
  color: var(--kx-navy); font-weight: 700; text-transform: uppercase;
  font-size: .8rem; letter-spacing: .03em;
}
.obj_monograph_full .chapters,
.obj_monograph_full .files { margin-top: 1.5rem; border-top: 2px solid #e6ebf2; padding-top: 1.2rem; }
.obj_monograph_full .chapters h2,
.obj_monograph_full .files h2 { color: var(--kx-navy); font-size: 1.2rem; margin-bottom: .8rem; }
.obj_monograph_full .chapters .chapter,
.obj_monograph_full .files .pub_format_single { padding: .7rem .9rem; border-radius: 8px; transition: background .2s ease; }
.obj_monograph_full .chapters .chapter:hover,
.obj_monograph_full .files .pub_format_single:hover { background: var(--kx-bg-soft); }

/* ===========================================================
   8. DETALLES
   =========================================================== */
hr { border-top: 1px solid #d8e1ec; }
.pkp_structure_main h1 { position: relative; display: inline-block; }
.pkp_structure_main h1::after {
  content:""; display:block; width:60px; height:4px;
  background: var(--kx-navy); border-radius:4px; margin:.6rem auto 0;
}
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-thumb { background: var(--kx-navy); border-radius:6px; }
::-webkit-scrollbar-track { background:#e6edf5; }

@media (max-width: 768px) {
  .pkp_navigation_primary a { padding:.7em 1em; }
  .pkp_navigation_primary ul { min-width: 180px; }
  .obj_monograph_full { padding:1.2rem; }
  .obj_monograph_full .title { font-size:1.5rem; }
}

/* ===========================================================
   9. ACCESIBILIDAD
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}