/* =========================================================
   OMI — Tema OJS 3.5 (CSS reemplazo completo)
   ========================================================= */

/* ---------------------------------
   0) Variables y tokens de color
---------------------------------- */
:root{
  --omi-primary: #0A4E80;
  --omi-primary-dark: #07385F;
  --omi-text-on-primary: #FFFFFF;
  --omi-link-on-primary: #CFE7FF;

  --omi-accent: #0b5cad;
  --omi-accent-hover: #08498a;

  --omi-page-max: 1140px; /* ancho visual alineado */
}

/* ---------------------------------
   1) Base: tipografía y fondos
---------------------------------- */
html, body{
  background:#fff !important;   /* costados y fondo siempre blancos */
  color: rgba(0,0,0,.87);
}

/* Asegura blanco en wrappers de página */
#pkp_content,
.pkp_structure_page, .pkp_structure_content, .pkp_structure_main,
.pkp_page, .pkp_page_index, .pkp_page_section, .pkp_body{
  background:#fff !important;
}

/* Enlaces y estados */
a, a:visited{ color: var(--omi-accent); }
a:hover, a:focus{ color: var(--omi-accent-hover); text-decoration: underline; }

/* Botones */
.pkp_button, .pkp_button_primary{
  background: var(--omi-primary) !important;
  border-color: var(--omi-primary) !important;
  color: var(--omi-text-on-primary) !important;
}
.pkp_button:hover, .pkp_button:focus,
.pkp_button_primary:hover, .pkp_button_primary:focus{
  background: var(--omi-primary-dark) !important;
  border-color: var(--omi-primary-dark) !important;
}

/* ---------------------------------
   2) Contenedores alineados OMI
---------------------------------- */
/* Centramos y limitamos ancho de cabecera, contenido y pie sin romper grid del core */
.pkp_site_name_wrapper,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user,
.pkp_structure_content,
.pkp_structure_footer,
.pkp_head_wrapper{
  max-width: var(--omi-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------
   3) Cabecera (header)
---------------------------------- */
/* Color de banda superior */
.pkp_structure_head{
  background-color: var(--omi-primary) !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}

/* Título / logo siempre en blanco */
.pkp_site_name, .pkp_site_name a{ color: var(--omi-text-on-primary) !important; }

/* Enlaces de navegación principales en blanco (desktop) */
@media (min-width: 992px){
  .pkp_navigation_primary > li > a{
    color: var(--omi-text-on-primary) !important;
    border-bottom-color: transparent !important;
  }
  .pkp_navigation_primary > li > a:hover{
    color: var(--omi-text-on-primary) !important;
    border-color: var(--omi-text-on-primary) !important;
  }
}

/* Alinear menú a la izquierda y BUSCAR a la derecha (desktop) */
@media (min-width: 992px){
  /* El core centra el menú; lo llevamos a la izquierda */
  .pkp_navigation_primary{ text-align: left !important; }

  /* Wrapper del buscador a la derecha */
  .pkp_navigation_search_wrapper{
    float: right !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
  }
}

/* Cobertura adicional: si el buscador apareciera embebido en el menú (algunas variantes) */
.pkp_site_nav_menu .pkp_search,
.pkp_site_nav_menu [class*="pkp_search"],
.pkp_head_wrapper > .pkp_search,
.pkp_head_wrapper form[action*="search"]{
  margin-left: auto !important;
  order: 99 !important;
  float: none !important;
}

/* ---------------------------------
   4) Contenido: eliminar “rieles” grises del core
---------------------------------- */
/* El core dibuja líneas laterales con pseudo-elementos en breakpoints.
   Los apagamos para conservar costados limpios. */
@media (min-width: 768px){
  .pkp_structure_main:before,
  .pkp_structure_main:after{
    background: transparent !important;
  }
}
@media (min-width: 992px){
  .pkp_structure_main{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .pkp_structure_main:after{
    background: transparent !important;
  }
}

/* ---------------------------------
   5) Pie de página (footer) full-bleed azul
---------------------------------- */
/* El core pinta gris en .pkp_structure_footer_wrapper: lo forzamos a azul */
.pkp_structure_footer_wrapper{
  background: var(--omi-primary) !important;
}

/* Fondo interno transparente y tipografía legible */
.pkp_structure_footer,
.pkp_footer_content{
  background: transparent !important;
  color: var(--omi-text-on-primary) !important;
  text-align: left !important;
}

/* Enlaces dentro del pie */
.pkp_structure_footer a{
  color: var(--omi-link-on-primary) !important;
  text-decoration: none;
}
.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus{
  color:#fff !important;
  text-decoration: underline;
}

/* Sello OJS/PKP a la derecha e invertido a blanco (sin posición absoluta para no romper responsive) */
.pkp_brand_footer{ padding-top: 0 !important; }
.pkp_brand_footer a{ float: right !important; }
.pkp_brand_footer img{
  filter: brightness(0) invert(1) contrast(105%) !important;
  opacity: .95 !important;
  max-width: 150px !important;
  height: auto !important;
}

/* ---------------------------------
   6) Detalles de componentes comunes
---------------------------------- */
/* Galerías, enlaces y botones tipo wire mantienen paleta */
.obj_galley_link,
.cmp_button_wire{
  border-color: var(--omi-primary) !important;
  color: var(--omi-primary) !important;
  background:#fff !important;
}
.obj_galley_link:hover, .obj_galley_link:focus,
.cmp_button_wire:hover, .cmp_button_wire:focus{
  background: var(--omi-primary) !important;
  color: #fff !important;
}

/* Breadcrumbs, links menores */
.cmp_breadcrumbs .current{ color: rgba(255,255,255,.75); }

/* ---------------------------------
   7) Ajustes responsive del pie para aire del sello
---------------------------------- */
@media (max-width: 1024px){
  .pkp_brand_footer img{ max-width: 120px !important; }
}
@media (max-width: 768px){
  .pkp_brand_footer a{ float:none !important; display:block !important; text-align:right; }
  .pkp_brand_footer img{ max-width: 100px !important; }
}

/* ---------------------------------
   8) “Hardening” contra estilos del core
---------------------------------- */
/* Si algún wrapper vuelve a inyectar fondos/bordes, los anulamos aquí. */
.pkp_structure_footer, .pkp_footer_content, .pkp_structure_footer_wrapper,
.pkp_structure_head, .pkp_head_wrapper{
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Asegurar que ningún otro wrapper pinte gris en el pie */
.pkp_structure_footer_wrapper *{
  background: transparent !important;
}

/* OMI – Forzar color blanco en el link "Buscar" del header */
header.pkp_structure_head .pkp_navigation_search_wrapper a,
header.pkp_structure_head .pkp_site_nav_menu .pkp_search a {
  color: #fff !important;
}

header.pkp_structure_head .pkp_navigation_search_wrapper a:hover,
header.pkp_structure_head .pkp_navigation_search_wrapper a:focus,
header.pkp_structure_head .pkp_site_nav_menu .pkp_search a:hover,
header.pkp_structure_head .pkp_site_nav_menu .pkp_search a:focus {
  color: #fff !important;
  text-decoration: underline;
  border-color: transparent !important;
  background: transparent !important;
}

/* Si en móvil aparece un campo input de búsqueda, asegurar contraste */
header.pkp_structure_head .pkp_search input[type="text"] {
  color: #fff !important;
  background: transparent !important;
  border-color: rgba(255,255,255,.35) !important;
}
header.pkp_structure_head .pkp_search input[type="text"]::placeholder {
  color: rgba(255,255,255,.9) !important;
}

/* === OMI: Sidebar arriba, alineada con el contenido (desktop) === */
@media (min-width: 992px){

  /* Asegura contenedor normal (no flex/grid) */
  .pkp_structure_content{ display:block !important; }

  /* Dos columnas por float con anchos explícitos */
  .pkp_structure_main{
    float:left !important;
    width: calc(100% - 300px) !important; /* deja sitio fijo para la sidebar */
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .pkp_structure_sidebar{
    float:right !important;
    width: 300px !important;
    clear: none !important;
    margin-top: 0 !important;     /* quita cualquier empuje hacia abajo */
    padding-top: 0 !important;
    position: static !important;   /* evita desplazamientos por sticky */
    transform: none !important;    /* por si algún tema aplica translateY */
  }

  /* Primer bloque de la barra sin márgenes superiores “heredados” */
  .pkp_structure_sidebar > *:first-child{
    margin-top: 0 !important;
  }
}

/* OMI — Separación entre columna principal y sidebar (desktop) */
@media (min-width: 992px){
  /* deja 24px de canal a la derecha del contenido */
  .pkp_structure_main{
    margin-right: 24px !important;
    width: calc(100% - 300px - 24px) !important; /* respeta el ancho total */
  }
  /* opcional: un poco de aire interno en la sidebar */
  .pkp_structure_sidebar{
    padding-left: 4px; /* puedes subirlo a 8–12px si lo prefieres */
  }
}

/* Fin del tema OMI */