/* ===== Página de búsqueda (CAMBIOS para la página que devuelve los resultdos de las búsquedas) ===== */

/****************************************************
 * SOLO para la página /search (Drupal añade .path-search) ESTO LO CONSIGO MODIFICANDO el hook en sub_exea.theme
 ****************************************************/

/* El formulario en /search no debe forzar una sola línea */
.path-search #search-form {
  white-space: normal;
  width: auto;
  display: block;
}

/* El wrapper inmediato del input + icono: referencia y alineación */
.path-search #search-form .container-inline {
  position: relative;  /* referencia para posicionar el icono dentro */
  display: flex;       /* alinea verticalmente con el input */
  align-items: center;
}

/* Input: caja de búsqueda principal en la pág. search */
#edit-keys.form-control {
  background-color: #f5f7ff;
  border-color: #cfd6e4;
  color: #1b263b;
  border-radius: .5rem;
  height: 35px;
  transition: border-color .15s ease, box-shadow .15s ease;
  position: relative;
  z-index: 1;
}

/* Placeholder y foco accesibles */
#edit-keys::placeholder {
  color: #6c7a91;
  opacity: 1;
}
#edit-keys:focus {
  outline: 0;
  border-color: #7aa2ff;
  box-shadow: 0 0 0 .2rem rgba(122,162,255, .25);
  background-color: #eef3ff;
}

/* Icono en en la pág. search: dentro del input, alineado */
.path-search #search-form .container-inline .icon {
  position: absolute;
  top: 55%;                  /* posiciona la cajita de la lupa verticalmenete donde yo quiero en el centro del input */
  left: 10px !important;     /* ← fija la izquierda en /search */
  right: auto !important;    /* ← anula reglas globales tipo #search-form .icon { right:10px } */
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  z-index: 5;
  padding: 0% !important;
}

/* INPUT caja donde escribo lo que quiero buscar: deja hueco a la izquierda para que el texto no pise la lupa */
.path-search #search-form #edit-keys.form-control {
  padding-left: 20px;
  padding-right: .75rem;     /* conserva el padding a la derecha */
  padding-bottom: 0px;
  height: 44px;              /* opcional, solo para homogeneizar */
  border-left: 50px solid #5a5a5a;
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
}

/* SOLO en /search PARA CAMBIAR EL COLOR A LA LUPA */
.path-search #search-form .container-inline .icon svg {
  fill: #eef3ff;   /* para iconos sólidos */
  stroke: #eef3ff; /* si el SVG es de trazo */
}

/* SOLO en /search — Ajusta el filtro según el color que queremos, para cambiar el color de la lupa en la página de búsqueda */
.path-search #search-form .container-inline .icon {
  filter: brightness(0) invert(1) saturate(0%) contrast(120%) brightness(105%) !important;
}
/* FIN SOLO en /search PARA CAMBIAR EL COLOR A LA LUPA */


/*****************************************************
 * PÁGINA DE RESULTADOS /search  (Bootstrap Barrio)
 *****************************************************/

/* Paleta y tokens ligeros para mantener coherencia */
.path-search {
  --sr-accent: #0071b3;        /* color de acento (links, líneas) */
  --sr-accent-2: #2f55d4;      /* acento en hover/focus */
  --sr-card-bg: #f9fbff;       /* fondo de las tarjetas */
  --sr-card-border: #e2e8f4;   /* borde de las tarjetas */
  --sr-title: #1b2741;         /* color títulos */
  --sr-text: #2c3b54;          /* color párrafos */
  --sr-muted: #5c6a82;         /* textos secundarios */
}

/* ===== /search: limitar el ancho global al 80% y centrar ===== */
.path-search #main.container-fluid {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* Evitar desbordes en contenidos internos (imágenes, listas, etc.) */
.path-search #main.container-fluid * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Espaciado general */
.path-search #main-wrapper {
  padding-top: 1rem;
}

/* Resalta la etiqueta del campo de búsqueda */
.path-search label[for="edit-keys"] {
  font-weight: 700;
  color: #1b2741;
  padding: 0 .1rem;
}

/*  Título "Resultados de la búsqueda" más jerárquico */
.path-search h2 {
  display: inline-block;
  color: var(--sr-title);
  font-weight: 700;
  margin: .75rem 0 1rem;
  border-bottom: 2px solid var(--sr-card-border);
  padding-bottom: .4rem;
  text-align: left !important;
}

/*  Lista de resultados como “tarjetas” separadas */
.path-search .node_search-results {
  /* Elimina estilos list-group que compactan demasiado */
  padding-left: 0;
  margin: 1rem 0 2rem;
  list-style: none;            /* ocultar numeración <ol> por defecto */
  display: grid;
  gap: 14px;                   /* separación entre resultados */
}

/* Tarjeta base */
.path-search .node_search-results .list-group-item {
  margin: 0;                                  /* que no sume al gap */
  padding: 1rem 1.25rem;
  border: 1px solid var(--sr-card-border);    /* borde sutil en los 4 lados */
  background: var(--sr-card-bg);
  border-radius: .6rem;
  color: var(--sr-text);
  box-shadow: 0 1px 3px rgba(17, 24, 39, .05); /* profundidad suave */
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* Hover y foco accesibles (teclado) */
.path-search .node_search-results .list-group-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(17, 24, 39, .08);
  border-color: #d6deef;
}
.path-search .node_search-results .list-group-item:focus-within {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(74, 110, 224, .18);
  border-color: var(--sr-accent);
}

/*  Título del resultado (h3 + enlace) */
.path-search .node_search-results h3 {
  margin: 0 0 .4rem;
  font-size: 1.1rem;
  line-height: 1.3;
}
.path-search .node_search-results h3 a {
  color: var(--sr-title);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.path-search .node_search-results h3 a:hover,
.path-search .node_search-results h3 a:focus {
  color: var(--sr-accent-2);
  border-bottom-color: var(--sr-accent-2);
}

/*  Resumen/fragmento (párrafos) */
.path-search .node_search-results p {
  margin: 0 0 .25rem;
  color: var(--sr-text);
}

/* Muted para párrafos vacíos o secundarios */
.path-search .node_search-results p em {
  color: var(--sr-muted);
}

/*  Resaltar el término de búsqueda (el core envuelve coincidencias en <strong>) */
.path-search .node_search-results p strong {
  background: #fff0a6;        /* amarillo suave para highlight */
  color: inherit;
  padding: 0 .2em;
  border-radius: .25rem;
}

/*  Badges de idioma usando el atributo lang del h3 */
.path-search .node_search-results h3:lang(en)::after {
  content: "EN";
  display: inline-block;
  margin-left: .5rem;
  font-size: .72rem;
  font-weight: 700;
  color: #234;
  background: #e8eefc;
  border: 1px solid #cfd8f3;
  border-radius: .25rem;
  padding: .05rem .35rem;
  vertical-align: middle;
}

/* numeración bonita */
.path-search .node_search-results {
  counter-reset: res;
}

.path-search .node_search-results .list-group-item {
  counter-increment: res;
  position: relative;
  padding-left: 3rem;  /* deja sitio al número */
}

.path-search .node_search-results .list-group-item {
  position: relative;
  padding-left: 3.25rem;
}


.path-search .node_search-results .list-group-item::before {
  content: counter(res);
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: #fff;
  background: var(--sr-accent);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(74,110,224,.25);
}

.path-search .node_search-results .list-group-item {
  min-width: 0;
}


/*  El enlace “Acerca de la búsqueda” más integrado */
.path-search a.search-help-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--sr-accent);
  font-size: .95rem;
  margin-left: .25rem;
}
.path-search a.search-help-link:hover {
  text-decoration: underline;
}

.path-search .node_search-results h3 a:visited {
  color: #6a5acd;  /* morado suave */
  border-bottom-color: transparent;
}


/* ===== /search: paleta de enlaces (solo contenido principal) ===== */
.path-search #main.container-fluid {
  --link: #0071b3;          /* color de enlace NO visitado (antes de visitarse) */
  --link-visited: #1f3db8;  /* color enlace visitado (opcional) */
  --link-hover: #1f3db8;    /* hover/focus */
}

/* 1) Enlaces generales SOLO en el contenido principal */
.path-search #main.container-fluid a:link {
  color: var(--link);
}
.path-search #main.container-fluid a:visited {
  color: var(--link-visited);
}
.path-search #main.container-fluid a:hover,
.path-search #main.container-fluid a:focus {
  color: var(--link-hover);
  text-decoration: underline;
  outline: none;
}

/* 2) Enlaces de los títulos de resultados (se mantienen específicos) */
.path-search .node_search-results h3 a:link {
  color: var(--link);
  text-decoration: none;              /* limpia subrayado si lo hubiera */
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.path-search .node_search-results h3 a:visited {
  color: var(--link-visited);
}
.path-search .node_search-results h3 a:hover,
.path-search .node_search-results h3 a:focus {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

/* 3) Enlace “Acerca de la búsqueda” junto al formulario (limitado a contenido principal) */
.path-search #main.container-fluid a.search-help-link{padding-bottom: 1rem;}
.path-search #main.container-fluid a.search-help-link:link {
  color: var(--link);
}
.path-search #main.container-fluid a.search-help-link:visited {
  color: var(--link-visited);
}
.path-search #main.container-fluid a.search-help-link:hover,
.path-search #main.container-fluid a.search-help-link:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Usar sólo text-decoration para el hover en títulos (sin border-bottom) */
.path-search #main.container-fluid .node_search-results h3 a,
.path-search #main.container-fluid .node_search_results h3 a {
  border-bottom: 0; /* quita la línea extra */
  margin-left: .75rem; /* súbelo a .75rem si quieres más aire */
}

.path-search #main.container-fluid .node_search-results h3 a:hover,
.path-search #main.container-fluid .node_search_results h3 a:hover,
.path-search #main.container-fluid .node_search-results h3 a:focus,
.path-search #main.container-fluid .node_search_results h3 a:focus {
  text-decoration: underline;
  border-bottom: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .path-search .node_search-results {
    gap: 12px;
  }
  .path-search .node_search-results .list-group-item {
    padding: .95rem 1.1rem;
    }
}

@media (max-width: 576px) {
  .path-search .node_search-results {
    gap: 10px;
  }
  .path-search .node_search-results .list-group-item {
    padding: .85rem 1rem;
     border-radius: .55rem;
    box-shadow: 0 1px 8px rgba(17, 24, 39, .07);
  }
  .path-search .node_search-results h3 {
    font-size: 1.02rem;
  }
  .path-search .node_search-results p {
    font-size: .95rem;
    line-height: 1.45;
  }
  .path-search #main.container-fluid .node_search-results h3 {
    margin-left: .4rem;
  }
}

/* Solo para la Ruta: search.help_node_search -> https://exea.csic.es/es/search/node/help */

/* UL con margen y separación entre LI */
.is-search-help #block-sub-exea-content {
  margin: 2rem auto; width: 80%;}

.is-search-help #block-sub-exea-content .item-list .list-group {
  margin: 1rem 2rem;      /* margen del <ul> */
  display: flex;
  flex-direction: column;
  gap: 12px;              /* separación vertical entre <li> (ajusta a tu gusto) */
  padding-left: 0;        /* opcional: quitar padding por defecto del UL */
}

/* LI como “tarjetitas” con borde propio en los 4 lados */
.is-search-help #block-sub-exea-content .list-group-item {
  margin: 0;                          /* que no sume a gap */
  padding: 1rem 1.25rem;              /* más aire interno */
  border: 1px solid #e2e8f4;          /* borde visible en todos los lados */
  border-radius: .5rem;
  background: #f9fbff;
  /* opcional: acento a la izquierda */
  box-shadow: inset 4px 0 0 #5a5a5a;
}

/* para añadir espacio debajo de la cabecera */
body.is-search-help #main-wrapper { padding-top: 1.25rem; }

/* FIN Solo para la Ruta: search.help_node_search -> https://exea.csic.es/es/search/node/help */

/* =========Estilos responsive Breakpoint lg y abajo (<= 992px) ========= */
@media (max-width: 992px) {
  .is-search-help #block-sub-exea-content {
    width: 90%;
    margin: 1.5rem auto;   /* un poco menos de margen global */
  }
  .is-search-help #block-sub-exea-content .item-list .list-group {
    margin: .75rem 1.5rem;
    gap: 12px;             /* mantiene separación cómoda */
  }
}

/* ========= Breakpoint sm y abajo (<= 576px) ========= */
@media (max-width: 576px) {
  /* Contenedor principal casi a full width */
  .is-search-help #block-sub-exea-content {
    width: 100%;
    margin: 1rem auto;
  }

  /* Menos margen lateral y un poco menos de separación entre ítems */
  .is-search-help #block-sub-exea-content .item-list .list-group {
    margin: .5rem 1rem;
    gap: 10px;
  }

  /* Ítems más compactos para móvil */
  .is-search-help #block-sub-exea-content .list-group-item {
    padding: .875rem 1rem;
    border-radius: .5rem;
    box-shadow: inset 3px 0 0 #5a5a5a;  /* acento algo más fino en móvil */
    font-size: .95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;  /* evita desbordes en palabras largas */
  }

  /* Buscador: tamaño táctil y prevención zoom iOS (font-size >= 16px) */
  .is-search-help #search-form #edit-keys.form-control {
    height: 40px;
    font-size: 16px;
    padding-left: 40px;      /* deja hueco para la lupa a la izquierda */
    padding-right: .75rem;
  }
  .is-search-help #search-form .container-inline .icon {
    left: 10px;              /* lupa un pelín más adentro en pantallas estrechas */
  }
  .is-search-help #search-form .container-inline .icon i.better_search {
    font-size: 16px;         /* icono acorde a la altura del input */
  }

  .is-search-help a.search-help-link {
    font-size: .9rem;
  }
}

/* ========= Breakpoint muy pequeño (<= 360px) ========= */
@media (max-width: 360px) {
  .is-search-help #block-sub-exea-content .item-list .list-group {
    margin: .5rem .75rem;
    gap: 8px;
  }
  .is-search-help #block-sub-exea-content .list-group-item {
    padding: .75rem .875rem;
    box-shadow: inset 2px 0 0 #5a5a5a;
    font-size: .93rem;
  }
  .is-search-help #search-form .container-inline .icon { left: 8px; }
  .is-search-help #search-form #edit-keys.form-control { padding-left: 36px; }
}


@media (max-width: 990px) {
  .path-search .node_search-results .list-group-item {
    padding-left: 0;
  }

  .path-search .node_search-results .list-group-item::before {
    position: static;
    margin-bottom: .5rem;
  }
}