/* Variables CSS para responsividad */
:root {
  --hdr-maxw: 1200px;
  --padX: clamp(12px, 3vw, 28px);
  --padY: clamp(10px, 2.2vw, 18px);
  --bg-card: #7d3e3f1c;
  --txt: #1f2027;
  --muted: #6b6b6b;
  --brand: #7d3e3f;
  --radius: 18px;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
}

body {
  background-image: url('https://inmatia.es/images/recifit/horizontal.svg');
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.pkp_structure_content {
   width: 94% !important;
}

.pkp_structure_main {
   padding-left: clamp(2%, 6%, 6%);
   padding-right: clamp(2%, 6%, 6%);
}

/* Ajustes para móviles */
@media (max-width: 640px) {
  .pkp_structure_content {
    width: 100% !important;
  }
  .pkp_structure_main {
    padding-left: 2%;
    padding-right: 2%;
  }
  .logo-puce {
    display: none !important;
  }
}

.pkp_block, .panel {
  background-color: #fff9;
}

/* -- Header Responsivo -- */
.header-container {
  position: relative;
  text-align: center;
  z-index: 2;
  padding-bottom: 0.1rem;
  margin: 0;
}

.header-background {
  width: 100%;
  height: auto;
  display: block;
}

.image-links {
  position: absolute;
  left: clamp(-5.85%, -2.85%, 0%);
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  transform: translateY(-33%);
  top: 50%;
}

.image-links a {
  margin: 0 10px;
  padding-left: clamp(20px, 5vw, 40px);
}

.image-links a img {
  height: clamp(50px, 10vw, 95px);
  width: auto;
  display: block;
}

.doi-issn {
  position: absolute;
  bottom: clamp(10px, 2vw, 17px);
  right: clamp(10px, 5vw, 48px);
  color: white;
  text-align: right;
  font-size: clamp(12px, 2vw, 14px);
}

.doi-issn a {
  color: white;
  text-decoration: none;
}

.doi-issn a:hover {
  text-decoration: underline;
}

.doi-issn .flags {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
  margin-left: 3.5rem;
}

.doi-issn .flags img {
  height: clamp(14px, 2.5vw, 20px);
  width: clamp(30px, 5vw, 34px);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  transition: transform 0.2s;
}

.doi-issn .flags img:hover {
  transform: scale(1.1);
}

/* Header responsivo - Tablets */
@media (max-width: 980px) {
  .header-container {
    padding: 0px;
  }
  
  .image-links {
    left: 0;
    transform: translateY(-25%);
  }
  
  .image-links a {
    padding-left: clamp(10px, 3vw, 20px);
  }
  
  .doi-issn {
    right: clamp(10px, 2vw, 20px);
    font-size: clamp(11px, 1.8vw, 13px);
  }
  
  .doi-issn .flags {
    margin-left: 2rem;
  }
}

/* Header responsivo - Móviles */
@media (max-width: 640px) {
  .header-container {
    padding-bottom: 0.2rem;
  }
  
  .header-background {
    height: auto;
    min-height: 150px;
  }
  
  .image-links {
    position: static;
    transform: none;
    margin-top: 10px;
    left: 0;
    padding-left: 0;
  }
  
  .image-links a {
    padding-left: 0;
    margin: 0 auto;
  }
  
  .image-links a img {
    height: clamp(60px, 15vw, 80px);
  }
  
  .doi-issn {
    position: static;
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
  }
  
  .doi-issn a {
    color: #144382;
    font-weight: bold;
  }
  
  .doi-issn .flags {
    justify-content: center;
    margin-left: 0;
    gap: 8px;
  }
  
  .doi-issn .flags img {
    height: 18px;
    width: 32px;
  }
}

/* Ocultar header en vista de artículo */
.pkp_page_article.pkp_op_view > .header-container {
  display: none;
}

header.navbar.navbar-default > div.container-fluid:first-child > div.row {
    position: absolute;
    top: -20rem;
    left: 0;
    width: 100%;
    padding: 6px;
    z-index: 1000;
}

/* Ajuste del header en móviles */
@media (max-width: 640px) {
  header.navbar.navbar-default > div.container-fluid:first-child > div.row {
    top: -5vw;
  }
}

.navbar-brand.navbar-brand-logo {
    display: none !important;
}

.nav-pills > li > a {
    padding-top: 3px;
}

.galley-link.btn.btn-primary.pdf {
   margin-right: 6px;
   border-radius: 4px !important;
   background-color: #7d3e3f !important;
}

.galley-link.btn.btn-primary.file, .btn-primary {
    background-color: #7d3e3f !important;
}

#htmlContainer {
   margin-top: clamp(10rem, 30vw, 24rem);
}

.pkp_page_article.pkp_op_view > div.header-container {
   display: none;
}

.col-md-4 {
   width: 25%;
}

.col-md-8 {
   width: 75%;
}

/* Responsive correction Main */
.pkp_structure_main.col-xs-12.col-sm-10.col-md-8,
.pkp_structure_sidebar.left.col-xs-12.col-sm-2.col-md-4 {
    width: 100% !important;
}
@media (min-width: 1200px) {
    .pkp_structure_main.col-xs-12.col-sm-10.col-md-8 {
        width: 75% !important;
    }
    .pkp_structure_sidebar.left.col-xs-12.col-sm-2.col-md-4 {
        width: 25% !important;
    }
}

/* Responsive correction Publications */
article.article-details .row section.article-sidebar.col-md-4,
article.article-details .row .col-md-8 {
   width: 100% !important;
}
@media (min-width: 768px) and (max-width: 991px) {
    article.article-details .row section.article-sidebar.col-md-4 {
        width: 41.66666667% !important;
    }
    article.article-details .row .col-md-8 {
        width: 58.33333332% !important;
    }
}
@media (min-width: 992px) {
  article.article-details .row section.article-sidebar.col-md-4 {
    width: 25% !important; 
  }
  article.article-details .row .col-md-8 {
        width: 75% !important;
   }
}

header .container-fluid {
    background-color: #144382 !important;
}

.navbar-default .nav > li > a, .navbar-default .navbar-nav > li > a {
    color: #fff !important;
    font-weight: bold !important;
}

.dropdown-toggle:hover, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background: #eeeeee61 !important;
}

footer.footer .col-md-10 {
   width: 100%;
}

footer.footer .col-md-2 {
   display: none;
}

.footer {
    padding: 0px !important;
}

.footer .container {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    width: 100% !important;
}

.footer .container .row .col-md-10 p {
    margin: 0px !important;
}

.journal-description {
    display: flex;
}

/* -- Footer Responsivo -- */
.parent {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "logo info contact license";
  align-items: center;
  gap: clamp(15px, 3vw, 25px);
  padding: clamp(15px, 3vw, 20px);
  max-width: var(--hdr-maxw);
  margin: 0 auto;
}

.parent .div1 {
  grid-area: logo;
}

.parent .div1 img {
  max-height: clamp(3rem, 8vw, 4.5rem);
  width: auto;
  display: block;
}

.parent .div2 {
  grid-area: info;
  font-size: clamp(12px, 2vw, 14px);
  line-height: 1.4;
}

.parent .div2 p {
  margin: 0.25rem 0;
}

.parent .div3 {
  grid-area: contact;
  font-size: clamp(12px, 2vw, 14px);
}

.parent .div3 p {
  margin: 0.25rem 0;
}

.parent .div3 a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.2s;
}

.parent .div3 a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.parent .div3 img {
  height: clamp(15px, 3vw, 17px);
  width: auto;
}

.parent .div4 {
  grid-area: license;
}

.parent .div4 img {
  max-width: 100%;
  height: auto;
  max-height: clamp(60px, 10vw, 88px);
}

/* Footer responsivo - Tablets */
@media (max-width: 980px) {
  .parent {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo info"
      "contact license";
    gap: clamp(12px, 2.5vw, 20px);
  }
  
  .parent .div3,
  .parent .div4 {
    justify-self: start;
  }
}

/* Footer responsivo - Móviles */
@media (max-width: 640px) {
  .parent {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "logo license"
      "info contact" !important;
    gap: 1rem !important;
    max-height: none !important;
    padding: clamp(12px, 4vw, 20px) !important;
    text-align: center;
  }

  /* Resetear posiciones fijas de los hijos que vienen con grid-area inline */
  .parent > .div1,
  .parent > .div2,
  .parent > .div3,
  .parent > .div4 {
    grid-area: auto !important;
    justify-self: center;
    text-align: center;
  }

  .parent .div1 {
    grid-area: logo !important;
  }

  .parent .div2 {
    grid-area: info !important;
    font-size: clamp(11px, 3.2vw, 12.1px) !important;
  }

  .parent .div3 {
    grid-area: contact !important;
  }

  .parent .div4 {
    grid-area: license !important;
  }

  /* Asegurar que las imágenes no desborden */
  .parent img {
    max-width: 100%;
    height: auto;
  }

  .parent .div1 img {
    max-height: 3rem;
  }

  .parent .div4 img {
    max-height: 70px;
  }

  .parent .div3 a {
    justify-content: center;
  }
}

/* Equipo Editorial */

.investigadores {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.investigador {
  display: flex;
  align-items: stretch;  /* Stretch both foto and info to same height */
  background-color: white;
  border: 1px solid #ddd;
  padding: 4px 5px;
  border-radius: 8px;
  gap: 20px;
}

.foto {
  flex: 0 0 clamp(100px, 15vw, 150px);      /* Responsive width for photo container */
  display: flex;
}

.foto img {
  width: 100%;         /* Fill container width */
  height: 100%;        /* Match container height */
  object-fit: cover;   /* Crop overflow */
  border-radius: 4px;
  max-height: clamp(12rem, 25vw, 17.5rem);
}

/* Equipo Editorial - Móviles */
@media (max-width: 640px) {
  .investigador {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }
  
  .foto {
    flex: 0 0 auto;
    width: 100%;
    max-width: 200px;
  }
}

.info {
  flex: 1;
  padding: 10px 0;
}

.info h3 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: #333;
  margin-bottom: 5px;
}

.role {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: bold;
  color: #666;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre el texto del rol y los iconos */
  flex-wrap: wrap;
  justify-content: center;
}

/* Ajuste de rol en móviles */
@media (max-width: 640px) {
  .role {
    justify-content: center;
  }
}

.role a {
  display: inline-flex;
  align-items: center;
}

.role a img {
  width: 20px; /* Tamaño del icono */
  height: 20px;
}

.info p {
  margin-bottom: 10px;
  color: #555;
  line-height: 1.5;
  font-size: clamp(0.9rem, 2.5vw, 1.25rem);
}

.info a {
  color: #007bff;
  text-decoration: none;
}

.info a:hover {
  text-decoration: underline;
}

/* Comité Científico */

section.comite-cientifico {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.miembro {
    display: flex;
    background-color: white;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    align-items: flex-start;
    gap: 20px; /* Espacio entre la imagen y el contenido */
}

.miembro h3 {
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    color: #333;
    margin-bottom: 10px;
    margin-top: 0px;
}

.miembro p {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
    font-weight: unset !important;
}

/* Comité Científico - Móviles */
@media (max-width: 768px) {
  .miembro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }
}

.miembro a {
    color: #007bff;
    text-decoration: none;
}

.miembro a:hover {
    text-decoration: underline;
}

.miembro .icon-link {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.miembro .icon-link img {
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.miembro p:last-child {
    margin-bottom: 0;
}

.miembro-foto {
  width: clamp(10rem, 20vw, 14rem);
  height: auto;
  object-fit: cover;
  max-height: clamp(12rem, 25vw, 17.5rem);
}

footer.footer .col-md-10 {
    padding-right: 0px;
}

/* Mejoras para navegación en móviles */
@media (max-width: 640px) {
  ul#navigationUser {
    position: absolute;
    margin-top: 2.5rem;
    margin-left: 4rem;
  }
  
  #sidebar {
    width: 100% !important;
    margin-top: 1rem;
  }
  
  .navbar-default .navbar-nav {
    margin: 0;
  }
  
  .navbar-default .navbar-nav > li > a {
    padding: 10px 15px;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }
}

/* Ajustes para tablets */
@media (min-width: 641px) and (max-width: 980px) {
  .pkp_structure_main {
    padding-left: 4%;
    padding-right: 4%;
  }
  
  .investigador, .miembro {
    gap: 15px;
    padding: 15px;
  }
}

/* Asegurar legibilidad en pantallas pequeñas */
@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
  
  .pkp_block .title {
    font-size: 1.5rem !important;
  }
  
  .panel-heading {
    font-size: 1.1rem;
  }
}