/* ==========================================================================
   Top 5 de frecuencia y pistas de vocabulario.

   El bloque va antes de los resultados y tiene que leerse como otra cosa,
   no como cinco tarjetas más: por eso es una lista numerada, compacta, con
   la cuenta a la derecha alineada en columna y una barra que deja comparar
   los cinco de un vistazo sin tener que restar números mentalmente.
   ========================================================================== */

.top5{
  margin:0 0 var(--e5);
  padding:var(--e5);
  border:1px solid var(--borde);
  border-radius:var(--radio-lg);
  background:
    linear-gradient(180deg,var(--acento-suave) 0%,transparent 120px),
    var(--superficie);
  box-shadow:var(--sombra-sm);
}

.top5-cab h2{
  margin:0;
  font-size:var(--t-h3);
  line-height:1.25;
  letter-spacing:-.01em;
}
.top5-cab h2 em{font-style:normal;color:var(--azul-700);}
.top5-cab p{
  margin:var(--e2) 0 0;
  font-size:var(--t-meta);
  color:var(--texto-suave);
  max-width:62ch;
}

.top5-lista{
  list-style:none;
  margin:var(--e4) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.top5-fila{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  /* Alineado arriba y no al centro: en móvil el título ocupa dos renglones y
     el número quedaba flotando a media fila, sin nada a su lado con lo que
     emparejarse. Contra el título, se leen juntos. */
  align-items:start;
  gap:var(--e4);
  padding:var(--e3);
  border:0;
  border-radius:var(--radio);
  background:transparent;
  text-align:left;
  font-family:inherit;
  color:inherit;
  cursor:pointer;
  transition:background var(--transicion),transform var(--transicion);
}
.top5-fila:hover{background:var(--gris-25);}
.top5-fila:active{transform:scale(.995);}
.top5-fila:focus-visible{outline:2px solid var(--acento-oscuro);outline-offset:2px;}

/* El puesto es dato, no adorno: quien mira la lista quiere saber si está
   viendo el primero o el cuarto sin contar las filas. */
.top5-puesto{
  display:grid;
  place-items:center;
  width:28px;height:28px;
  margin-top:1px;
  border-radius:var(--radio-pill);
  background:var(--azul-800);
  color:var(--blanco);
  font-size:var(--t-meta);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
/* Sólo el primero se destaca. `.top5-fila:first-child` no sirve: la fila es
   hija única de su <li> y coincidiría en las cinco. */
.top5-lista li:first-child .top5-puesto{background:var(--acento-oscuro);}

.top5-cuerpo{display:block;min-width:0;}

.top5-titulo{
  display:block;
  font-size:var(--t-body);
  font-weight:600;
  line-height:1.3;
  color:var(--texto);
}

.top5-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e2);
  margin-top:2px;
  font-size:var(--t-micro);
  color:var(--texto-suave);
}
/* El separador cuelga del elemento anterior, no del siguiente: puesto en el
   siguiente, al partirse la línea en móvil el renglón empezaba con un «·»
   suelto. */
.top5-meta span:not(:last-child)::after{content:"·";margin-left:var(--e2);}

/* La barra no lleva número encima a propósito: el número ya está a la
   derecha. Aquí sólo hace falta la proporción. */
.top5-barra{
  display:block;
  height:5px;
  margin-top:var(--e2);
  max-width:420px;
  border-radius:var(--radio-pill);
  background:var(--gris-100);
  overflow:hidden;
}
.top5-barra i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--acento-oscuro),var(--acento));
}

/* El desglose por término y el aviso de relacionados comparten renglón: son
   la letra pequeña de la fila y en dos líneas separadas la estiraban 30 px
   cada una, hasta hacer del Top 5 una pantalla entera. */
.top5-pistas{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--e2) var(--e3);
  margin-top:var(--e2);
  font-size:var(--t-micro);
  color:var(--texto-suave);
}
.top5-relacion{color:var(--azul-600);}

.top5-veces{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1;
}
.top5-veces strong{
  font-size:25px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--azul-800);
}
.top5-veces small{
  margin-top:3px;
  font-size:var(--t-micro);
  color:var(--texto-suave);
}

.top5-nota{
  margin:var(--e4) 0 0;
  padding-top:var(--e3);
  border-top:1px solid var(--borde);
  font-size:var(--t-meta);
  color:var(--texto-suave);
}

.top5-sinonimo{
  display:inline-block;
  margin:var(--e1) var(--e1) 0 0;
  padding:3px 10px;
  border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-pill);
  background:var(--superficie);
  font-family:inherit;
  font-size:var(--t-micro);
  color:var(--azul-700);
  cursor:pointer;
  transition:background var(--transicion),border-color var(--transicion);
}
.top5-sinonimo:hover{background:var(--acento-suave);border-color:var(--acento-oscuro);}
.top5-sinonimo:focus-visible{outline:2px solid var(--acento-oscuro);outline-offset:2px;}

.sin-resultados-pistas{
  margin-top:var(--e4);
  text-align:center;
}
.sin-resultados-pistas p{
  margin:0 0 var(--e2);
  font-size:var(--t-meta);
  color:var(--texto-suave);
}

/* Por qué apareció un documento que no dice la palabra buscada. */
.doc-card-motivo{
  display:inline-block;
  margin-top:var(--e2);
  padding:2px 8px;
  border-radius:var(--radio-pill);
  background:var(--acento-suave);
  font-size:var(--t-micro);
  color:var(--acento-oscuro);
}

@media(max-width:720px){
  .top5{padding:var(--e4);}
  .top5-fila{gap:var(--e3);padding:var(--e2);}
  .top5-veces strong{font-size:var(--t-h3);}
  .top5-barra{max-width:none;}
}

/* ==========================================================================
   Búsqueda Inteligente — el módulo de la portada.

   Va en la primera pantalla porque es la puerta de entrada al fondo: quien
   abre la biblioteca casi nunca sabe la norma que necesita, sabe la palabra.
   El campo tiene el peso visual del titular a propósito; los accesos a la
   estantería y al instrumento quedan como acciones secundarias.
   ========================================================================== */

.bqi{
  position:relative;
  z-index:1;
  margin-top:26px;
  /* La misma medida del párrafo de arriba: el titular, el texto y el campo
     comparten borde izquierdo y ancho, y el bloque se lee como uno solo. */
  max-width:680px;
}

.bqi-caja{
  display:flex;
  align-items:center;
  gap:var(--e3);
  padding:7px 7px 7px var(--e4);
  border:1px solid var(--apple-line,var(--borde));
  border-radius:var(--radio-pill);
  background:var(--apple-solid,var(--superficie));
  box-shadow:0 10px 30px rgba(36,63,92,.10);
  transition:box-shadow var(--transicion),border-color var(--transicion);
}
.bqi-caja:focus-within{
  border-color:var(--apple-blue,var(--acento));
  box-shadow:0 12px 36px rgba(0,113,227,.20);
}

.bqi-caja > svg{
  flex:none;
  width:20px;height:20px;
  color:var(--texto-suave);
}

.bqi-caja input{
  flex:1;
  min-width:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:var(--t-lead);
  color:var(--texto);
}
.bqi-caja input:focus{outline:none;}
.bqi-caja input::placeholder{color:var(--texto-suave);}
/* Safari dibuja su propia «x» en los campos de tipo search y se solapa con
   el botón redondo. */
.bqi-caja input::-webkit-search-decoration,
.bqi-caja input::-webkit-search-cancel-button{-webkit-appearance:none;}

.bqi-caja .btn{
  flex:none;
  border-radius:var(--radio-pill);
  padding-left:var(--e5);
  padding-right:var(--e5);
}

.bqi-ejemplos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--e2);
  margin:var(--e3) 0 0;
  padding-left:var(--e3);
  font-size:var(--t-meta);
  color:var(--texto-suave);
}
.bqi-ejemplos button{
  padding:4px 12px;
  border:1px solid var(--apple-line,var(--borde));
  border-radius:var(--radio-pill);
  background:var(--apple-solid,var(--superficie));
  font-family:inherit;
  font-size:var(--t-meta);
  color:var(--apple-blue,var(--acento));
  cursor:pointer;
  transition:background var(--transicion),border-color var(--transicion);
}
.bqi-ejemplos button:hover{
  background:var(--acento-suave);
  border-color:var(--apple-blue,var(--acento));
}
.bqi-ejemplos button:focus-visible{outline:2px solid var(--apple-blue,var(--acento));outline-offset:2px;}

/* Proporción del hero.

   Las acciones vuelven a alinearse por la base y no por arriba: puestas
   arriba quedaban flotando frente al titular, con un hueco muerto de media
   pantalla debajo. Alineadas abajo caen sobre el mismo renglón que los
   ejemplos y cierran el bloque.

   La columna de texto crece con el ancho disponible —el buscador ya no es un
   campo corto perdido en una caja enorme— pero se detiene en 780 px: más
   allá, la línea de lectura del párrafo se rompe y el campo empieza a parecer
   una barra de navegador. */
/* A partir de 1041 px el hero es una fila (texto | acciones). Ahí las
   acciones se alinean por la BASE: puestas arriba quedaban frente al titular
   con medio bloque muerto debajo. La columna de texto encoge lo necesario
   para que quepan a su lado en vez de empujarlas a una línea propia. */
@media(min-width:1041px){
  .bibdash-hero{align-items:flex-end;gap:clamp(20px,3vw,44px);}
  .bibdash-hero-texto{flex:1 1 auto;min-width:0;}
  .bibdash-hero-acciones{flex:none;padding-bottom:2px;}
}



/* El titular lleva un interletraje muy cerrado (-.06em) y con él las dos
   palabras se tocaban: «BúsquedaInteligente». Se le devuelve el espacio a esa
   junta y sólo a esa. */
#bibdashTitulo span{margin-left:.16em;}

@media(max-width:720px){
  .bqi{margin-top:20px;}
  .bqi-caja{
    flex-wrap:wrap;
    padding:var(--e3);
    border-radius:var(--radio-lg);
  }
  .bqi-caja input{font-size:var(--t-body);}
  .bqi-caja .btn{width:100%;}
  .bqi-ejemplos{padding-left:0;}
}

/* --- El sello y la columna de la derecha --------------------------------

   El hero es texto a la izquierda y aire a la derecha. Ese aire ahora es una
   columna de verdad —sello arriba, acciones abajo, centrada como bloque— y no
   un sello posicionado por encima de unos botones, que era lo que hacía que
   se rozaran y que el sello no llegara a estar centrado en nada.

   El tamaño lo pone la propia columna (`min(100%, …)`), así que el sello
   crece con el espacio disponible en vez de quedarse pequeño en pantallas
   anchas. Nada de chip ni borde detrás: el sello trae su propio anillo. */

.bibdash-hero-lado{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,2.4vw,32px);
}

.bqi-sello{
  display:block;
  /* Ancho definido, sin porcentaje. Con `min(100%,…)` el navegador no puede
     resolver el porcentaje mientras mide la columna, así que se queda con el
     tamaño propio del archivo —1254 px del PNG— y la columna del sello se
     comía el hero entero dejando el texto en una tira. El SVG no lo delataba
     porque no trae tamaño propio. */
  width:clamp(170px,17vw,250px);
  max-width:100%;
  height:auto;
  filter:drop-shadow(0 14px 34px rgba(36,63,92,.18));
}

@media(min-width:1041px){
  /* La columna se lleva una banda estable del hero: sin un mínimo, un título
     largo la estrujaba hasta dejar el sello del tamaño de un botón. */
  .bibdash-hero-lado{flex:0 0 auto;min-width:270px;align-self:center;}
}

/* Con el hero en columna ya no hay banda lateral. El bloque entero (sello y
   acciones) pasa a ser una fila centrada bajo el buscador: el sello a la
   izquierda, los botones a su lado, sin dejar una franja vacía. */
@media(max-width:1040px){
  .bibdash-hero-lado{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:var(--e5);
    margin-top:var(--e5);
  }
  .bqi-sello{width:clamp(96px,13vw,132px);}
}

/* En móvil el sello se retira: la columna es estrecha, los botones ocupan el
   ancho completo y el mismo sello está en la barra, dos dedos más arriba. */
@media(max-width:720px){
  .bqi-sello{display:none;}
  .bibdash-hero-lado{margin-top:var(--e4);}
}