/* Virgen de Medjugorje · /buscar: el buscador de todo el sitio.
   Usa los tokens y los componentes de sitio.css (campo, boton, chips, etiqueta, enlace, aviso) y
   no redefine ninguno. Todo lo propio lleva el prefijo bus-.

   Composición: una columna de lectura (46rem) con el formulario y los resultados. Desde 1024 px,
   a la derecha queda fija una columna angosta con el enlace al buscador de los mensajes y la lista
   de secciones donde aparece la palabra; en celular, eso mismo va antes de los resultados. */

.bus { padding-bottom: var(--e-8); }
.bus-cabecera { padding-bottom: var(--e-5); }

/* ==========================================================================
   El formulario
   ========================================================================== */

.bus-form { max-width: 46rem; }
.bus-form__campo { margin-bottom: 0; }
.bus-form__fila { display: flex; gap: var(--e-2); }
.bus-form__fila input { flex: 1 1 auto; min-width: 0; }
.bus-form__fila .boton { flex: none; }
/* Las teclas solo se anuncian donde hay teclado */
.bus-teclas { display: none; }
.bus-teclas kbd { font-family: var(--f-texto); font-size: inherit; }
@media (hover: hover) and (pointer: fine) {
  .bus-teclas { display: inline; }
}

/* ==========================================================================
   Sin consulta: búsquedas frecuentes y dónde busca
   ========================================================================== */

.bus-inicio { max-width: 46rem; margin-top: var(--e-6); }
.bus-inicio .etiqueta, .bus-vacio .etiqueta { margin-bottom: var(--e-3); }
.bus-inicio__donde {
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
  color: var(--tinta-2);
  transition: border-color var(--dur-tema) ease;
}
.bus-inicio__donde p { max-width: var(--ancho-texto); margin-bottom: .6em; }
.bus-inicio__ir { margin: 0; }

/* ==========================================================================
   Con consulta: el resumen, la columna lateral y los resultados
   ========================================================================== */

.bus-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.bus-estado {
  max-width: 46rem;
  margin: var(--e-5) 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
.bus-estado:empty { display: none; }
.bus-resultados, .bus-vacio, .bus-fallo { min-width: 0; max-width: 46rem; }
.bus-resultados:empty { display: none; }

/* La columna lateral */
.bus-lado {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  min-width: 0;
  max-width: 46rem;
  margin-bottom: var(--e-5);
}
.bus-saltos { min-width: 0; }
.bus-mensajes {
  padding: var(--e-1) 0 var(--e-1) var(--e-4);
  border-left: 3px solid var(--lit);
  transition: border-color var(--dur-tema) ease;
}
.bus-mensajes__t {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}
.bus-mensajes__texto { margin: var(--e-1) 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); }
.bus-mensajes__ir { margin: 0; line-height: 1.35; }
.bus-mensajes__ir .enlace { padding-block: .45rem .2rem; }

.bus-saltos .etiqueta { margin-bottom: var(--e-2); }
/* En celular, una sola fila que se desliza hacia los lados (como la subnavegación del sitio) */
.bus-saltos__lista {
  display: flex;
  gap: var(--e-2);
  margin: 0 calc(-1 * var(--margen));
  padding: 2px var(--margen);
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}
.bus-saltos__lista::-webkit-scrollbar { display: none; }
.bus-saltos__lista li { flex: none; }
.bus-salto {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .375rem 1rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.bus-salto:hover { border-color: var(--tinta); color: var(--tinta); text-decoration: none; }
.bus-salto:focus-visible { border-radius: 999px; }
.bus-salto__cuenta { color: var(--tinta-3); font-variant-numeric: lining-nums tabular-nums; }

/* Cada sección con resultados */
.bus-grupo { margin-top: var(--e-7); }
.bus-grupo:first-child { margin-top: var(--e-2); }
.bus-grupo__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--tinta);
  transition: border-color var(--dur-tema) ease;
}
/* Las secciones y las páginas llevan la letra de los títulos, sean h2, h3 o h4 */
.bus-grupo__titulo, .bus-res__titulo { font-family: var(--f-titulo); letter-spacing: -.01em; }
.bus-grupo__titulo { font-size: var(--t-lg); font-weight: 500; line-height: 1.1; }
.bus-grupo__titulo:focus { outline: none; }
.bus-grupo__titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.bus-grupo__cuenta {
  flex: none;
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--tinta-3);
  font-variant-numeric: lining-nums tabular-nums;
}
.bus-grupo__mas { margin-top: var(--e-4); }

/* Una página: su título, su bajada si la palabra está ahí, y sus partes */
.bus-lista { margin: 0; padding: 0; list-style: none; }
.bus-res {
  padding: var(--e-4) 0 var(--e-5);
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.bus-res__titulo { font-size: var(--t-md); font-weight: 600; line-height: 1.2; text-wrap: pretty; }
.bus-res__titulo a { color: var(--tinta); text-decoration: none; }
.bus-res__titulo a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
.bus-res__bajada { margin: var(--e-1) 0 0; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.bus-res__partes {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-3) 0 0;
  padding: 0 0 0 var(--e-4);
  border-left: 1px solid var(--linea-fuerte);
  list-style: none;
  transition: border-color var(--dur-tema) ease;
}
.bus-parte { min-width: 0; }
.bus-parte__titulo {
  display: inline-block;
  padding-block: .2rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--enlace);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.bus-parte__titulo:hover { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
/* El fragmento: texto literal de la página. Los puntos suspensivos dicen que el párrafo está
   cortado; el punto medio separa dos celdas de una misma fila. */
.bus-parte__texto { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.bus-corte, .bus-sep { color: var(--tinta-3); }
.bus-parte__pie { margin: 0; font-size: var(--t-sm); line-height: 1.35; }
.bus-parte__ir {
  display: inline-block;
  padding-block: .35rem;
  color: var(--enlace);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.bus-parte__ir:hover { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.bus mark {
  padding: 0 .08em;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--vela) 34%, transparent);
  color: inherit;
}
.bus-mas {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: var(--e-2) 0 calc(-1 * var(--e-2));
  padding: 0 0 0 var(--e-4);
  border: 0;
  background: none;
  color: var(--enlace);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.bus-mas:hover { text-decoration-color: currentColor; }

/* Lo que queda detrás del botón: las páginas que traen las palabras, pero no seguidas */
.bus-sueltas { margin-top: var(--e-6); }
.bus-sueltas__titulo { margin: var(--e-7) 0 0; }
.bus-sueltas__titulo:focus { outline: none; }
.bus-sueltas__titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.bus-sueltas .bus-grupo:first-of-type { margin-top: var(--e-4); }

/* Los mensajes, por fecha */
.bus-fechas__titulo {
  margin-top: var(--e-5);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--tinta-2);
}
.bus-fechas { margin: 0; padding: 0; list-style: none; }
.bus-fecha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--e-4);
  padding: .55rem 0 .6rem;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.bus-fecha__enlace {
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
  text-decoration: none;
  font-variant-numeric: lining-nums;
}
.bus-fecha__enlace:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
.bus-fecha__datos { font-size: var(--t-sm); line-height: 1.35; color: var(--tinta-3); }
@media (min-width: 640px) {
  .bus-fecha { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
}

/* Sin resultados y sin índice */
.bus-vacio, .bus-fallo { color: var(--tinta-2); }
.bus-vacio .chips { margin-bottom: var(--e-5); }
.bus-vacio__ir { margin: 0; }

/* En celular y tableta, con una consulta escrita: la cabecera se encoge y el aviso de los mensajes
   se queda en su pregunta y su enlace, para que el primer resultado se vea sin bajar tanto. */
@media (max-width: 1023.98px) {
  main[data-buscando] .bus-cabecera { padding-bottom: var(--e-4); }
  main[data-buscando] .bus-cabecera .bajada { display: none; }
  .bus-mensajes__texto { display: none; }
}

/* Desde 1024 px: los resultados a la izquierda y, a la derecha, la columna lateral, que se queda
   a la vista al bajar. */
@media (min-width: 1024px) {
  .bus-cuerpo {
    grid-template-columns: minmax(0, 46rem) minmax(15rem, 19rem);
    column-gap: var(--e-8);
    align-items: start;
  }
  .bus-estado { grid-column: 1; grid-row: 1; }
  .bus-resultados { grid-column: 1; grid-row: 2; }
  .bus-vacio { grid-column: 1; grid-row: 3; }
  .bus-fallo { grid-column: 1; grid-row: 4; }
  .bus-lado {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: calc(var(--alto-cabecera) + var(--e-5));
    gap: var(--e-6);
    margin: var(--e-5) 0 0;
  }
  .bus-saltos__lista {
    display: block;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-top: 1px solid var(--linea);
    transition: border-color var(--dur-tema) ease;
  }
  .bus-salto {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    border: 0;
    border-bottom: 1px solid var(--linea);
    border-radius: 0;
    font-size: 1rem;
  }
  .bus-salto:hover { border-color: var(--linea-fuerte); }
  .bus-salto:focus-visible { border-radius: 2px; }
}

@media print {
  .bus-form, .bus-inicio, .bus-lado, .bus-mas, .bus-grupo__mas, .bus-vacio, .bus-fallo { display: none !important; }
  .bus-res, .bus-fecha { break-inside: avoid; }
}