/* Kirava · buscador y resultados
   Es la puerta de entrada del producto: lo primero que ve alguien que llega. */

@layer components {

/* La caja de búsqueda vive en la barra superior (topbar.css). Aquí solo
   quedan los filtros y los resultados. */

.finder { margin-bottom: var(--sp-4); }

/* --- Filtros ----------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}

.filter { display: grid; gap: 3px; }
.filter > span {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  padding-inline-start: var(--sp-1);
}
.filter select {
  appearance: none;
  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
  max-width: 190px;
  /* Flecha en data: URI — la CSP prohíbe hosts externos y no queremos un fichero
     suelto para 12 píxeles. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239a9083' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  transition: border-color var(--dur-fast);
}
.filter select:hover { border-color: var(--ink-3); }
.filter select:not([value=""]) { font-weight: 500; }

.filter-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: .82rem;
  cursor: pointer;
  align-self: end;
}
.filter-check:hover { border-color: var(--ink-3); }
.filter-check input { accent-color: var(--secondary); width: 15px; height: 15px; cursor: pointer; }
.filter-check span { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--ink-2); padding: 0; }
.filter-check:has(input:checked) { border-color: var(--secondary); background: var(--secondary-wash); }
.filter-check:has(input:checked) span { color: var(--secondary-ink); font-weight: 600; }

.filter-reset {
  align-self: end;
  padding: var(--sp-2) var(--sp-3);
  font-size: .8rem;
  color: var(--primary-ink);
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.filter-reset:hover { color: var(--ink); }

/* --- Cabecera de resultados -------------------------------------------- */

.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.count { font-size: .95rem; color: var(--ink-2); }
.count strong { color: var(--ink); font-size: 1.15rem; font-weight: 700; }
.took { font-family: var(--font-num); font-size: .72rem; color: var(--ink-3); margin-inline-start: var(--sp-2); }

/* El puente entre idiomas, explicado.
   Ver una carta japonesa al buscar "charmander" tiene que leerse como la función
   que es, no como un fallo del buscador. */
.bridge { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-inline-start: auto; }
.bridge-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  background: var(--primary-wash);
  font-size: .78rem;
}
.bridge-item strong { color: var(--primary-ink); font-weight: 650; }
.bridge .dex { color: var(--ink-3); font-family: var(--font-num); font-size: .7rem; }
.bridge .langs { display: inline-flex; gap: 3px; }
.lang-dot {
  font-size: .64rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--primary-ink);
}

/* --- Rejilla de resultados --------------------------------------------- */

.hits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-5)) var(--sp-4);
  /* Sin content-visibility a propósito.
     ------------------------------------------------------------------------
     Lo tenía puesto de cuando la rejilla podía traer miles de cartas de golpe.
     Ahora se pagina de 24 en 24 y de 9 en 9, así que no ahorra nada — y sí
     rompe algo: un elemento dentro de un subárbol con content-visibility
     puede quedar sin renderizar en el momento en que el navegador toma la
     instantánea de la View Transition, y entonces la carta no crece desde su
     sitio: la ficha aparece de golpe. El zoom es de lo mejor que tiene esto;
     no se sacrifica por una optimización que ya no hace falta. */
}

.hit {
  display: grid;

  /* minmax(0, 1fr) y no la columna implícita `auto`.
     ---------------------------------------------------------------------
     `.card` pide `width: 100%` con `aspect-ratio`. En una pista `auto` ese
     100% no tiene contra qué resolverse, así que el navegador saca el ancho
     del alto del contenido y le salían 136px dentro de una celda de 114: la
     última columna de resultados se salía de la pantalla y el móvil quedaba
     con diez píxeles de scroll horizontal. Con una pista definida, el 100%
     resuelve contra ella y la carta encaja. */
  grid-template-columns: minmax(0, 1fr);

  gap: var(--sp-1);
  align-content: start;
  border-radius: 10px;
}

.hit-card { position: relative; }

/* `--aura` va delante y por defecto vale «ninguna sombra».
   ---------------------------------------------------------------------------
   Es el hueco por el que holo.css mete el halo irisado de las cartas
   holográficas sin tener que reescribir estas dos reglas ni depender de en qué
   orden se carguen las hojas. Una carta normal deja el valor por defecto y se
   queda exactamente como estaba. */
.hit .card {
  border-radius: 7px;
  box-shadow: var(--aura, 0 0 rgb(0 0 0 / 0)), var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.hit:hover .card,
.hit:focus-visible .card {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--aura, 0 0 rgb(0 0 0 / 0)), var(--shadow-3);
}

/* En una búsqueda que cruza idiomas, el idioma es el dato que más se mira.
   Va con color propio para que la mezcla se lea de un vistazo, pero debajo de
   la carta: encima tapaba justo el nombre impreso en la ilustración. */
.hit-lang {
  flex: none;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--primary-wash);
  color: var(--primary-ink);
}
.hit-lang[data-lang="ja"] { background: var(--secondary-wash); color: var(--secondary-ink); }
.hit-lang[data-lang="es"] { background: var(--accent-wash);    color: var(--accent-ink); }

.hit-name {
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.25;
  margin-top: var(--sp-1);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Envuelve: desde que cada variante es su propia ficha, la fila lleva un dato
   más y en las fichas estrechas el nombre del set se quedaba en «P..». Antes
   que recortar el set —que es lo que uno mira para saber de qué edición es—,
   que baje a la línea siguiente. */
.hit-meta {
  display: flex; flex-wrap: wrap; gap: 2px var(--sp-2);
  font-size: .72rem; color: var(--ink-3);
}
.hit-set {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hit-num { font-family: var(--font-num); flex: none; }

/* La variante: normal, holo, reverse holo, primera edición.
   ------------------------------------------------------------------------
   Una búsqueda de "charizard" saca la misma carta varias veces seguidas, una
   por acabado. Sin distintivo eso parece un fallo de la web; con él es
   exactamente la información que hace falta antes de comprar, porque en una
   tienda esas tres cartas cuestan cosas muy distintas y se parecen mucho.

   Va en toda la fila, también en la normal: marcar solo las especiales
   dejaría a la normal sin nombre y volvería a leerse como un duplicado.

   La normal se queda en gris y las especiales llevan color, así el ojo salta
   directo a los acabados sin tener que leer. El texto no es decorativo: es
   parte del nombre completo de la carta, así que también va en el alt. */
.hit-variant {
  flex: none;
  margin-left: auto;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-3);
}
.hit-variant[data-variant="holo"] {
  background: var(--secondary-wash);
  color: var(--secondary-ink);
}
.hit-variant[data-variant="reverse"] {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.hit-variant[data-variant="firstEdition"] {
  background: var(--primary-wash);
  color: var(--primary-ink);
}

/* --- Paginación -------------------------------------------------------- */

.results-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}

/* Mientras llega la petición, los resultados viejos se atenúan en vez de
   desaparecer: si parpadean a blanco en cada tecla, marea. */
.results.is-loading { opacity: .5; transition: opacity var(--dur-fast); }

@media (max-width: 560px) {
  /* Dos por fila, fijas, y no `auto-fill`.
     ---------------------------------------------------------------------
     Con auto-fill y un mínimo de 104px caben TRES en un móvil de 390, y a ese
     tamaño la carta mide poco más de un centímetro: no se distingue el
     Pokémon, ni el número, ni la rareza — que es justo para lo que se mira una
     lista de cartas. El nombre de debajo, además, no cabía en una línea y se
     montaba con el de al lado.

     Fijando dos, cada carta casi dobla su tamaño. Se ven menos de golpe y hay
     que bajar más; merece la pena, porque bajar es gratis y entrecerrar los
     ojos no. */
  .hits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }
  .hit-name { font-size: .82rem; }
  .filters { gap: var(--sp-2); }
  .filter select { max-width: 140px; font-size: .8rem; }
  .bridge { margin-inline-start: 0; }
}

}

@layer components {

/* --- Filtros plegados ----------------------------------------------------
   Cerrados por defecto: la mayoría de las búsquedas no los usan y ocupaban
   media pantalla por encima de los resultados. Se abren solos si vienes con
   filtros puestos en la URL. */

.filters-wrap { margin-bottom: var(--sp-3); }
.filters-summary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .84rem; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary:hover { border-color: var(--ink-3); color: var(--ink); }
.filters-wrap[open] .filters-summary { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-wash); }
.filters-count {
  font-family: var(--font-num); font-size: .68rem; font-weight: 700;
  min-width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 999px; background: var(--secondary); color: #fff;
}
.filters-wrap[open] .filters { margin-top: var(--sp-4); }


/* --- Barra de idiomas -----------------------------------------------------
   Vive SOBRE los resultados y fuera del panel plegable.

   POR QUÉ NO ESTÁ DENTRO DE «FILTROS»
   ------------------------------------------------------------------------
   En cuanto el idioma se recuerda entre visitas, un filtro que vive dentro de
   un panel cerrado por defecto se convierte en una trampa: vuelves mañana,
   buscas «pikachu», ves cuarenta resultados en vez de cuatrocientos y no hay
   nada en pantalla que lo explique. Con un solo idioma elegido se esconde más
   del ochenta por ciento del catálogo. La barra siempre visible no es una
   preferencia estética: es la condición para que la memoria se pueda tener.

   Y está dentro de #results —el bloque que el JS sustituye entero en cada
   refresco— para que el mando y las cifras no puedan desincronizarse de lo que
   se está mirando. */

.langbar {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.langbar-say {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  font-size: .78rem;
  color: var(--ink-2);
}
.langbar-say strong { color: var(--ink); font-weight: 650; }

/* «Recordado de tu última búsqueda». En voz baja, pero dicho: es la única
   diferencia entre un filtro que has puesto tú y uno que te has encontrado
   puesto, y esa diferencia decide si el resultado se lee como un filtro o como
   un buscador roto. */
.langbar-memo { font-size: .72rem; color: var(--ink-3); }

.langbar-out {
  margin-inline-start: auto;
  font-size: .78rem;
  color: var(--primary-ink);
  border-bottom: 1px solid currentColor;
}
.langbar-out:hover { color: var(--ink); }

.langpills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* «Todos» es la salida, no un idioma más: se separa del grupo para que se lea
   como lo que es. */
.langpills > li:first-child { margin-inline-end: var(--sp-2); }

.langpill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: border-color var(--dur-fast), color var(--dur-fast),
              background-color var(--dur-fast);
}
.langpill:hover { border-color: var(--ink-3); color: var(--ink); }

/* El primario está definido en tokens.css literalmente como «interacción, foco,
   IDIOMA»: aquí toca los tres a la vez. Y es la misma forma que .lang-tab: en
   esta web «pastilla con borde fino que se rellena» ya significa «esto está
   puesto», y estrenar una forma para el mismo gesto obliga a aprenderlo otra
   vez. */
.langpill.is-on {
  border-color: var(--primary);
  background: var(--primary-wash);
  color: var(--primary-ink);
  font-weight: 650;
}

/* La cifra es el motivo por el que existe la pastilla. Que se lea «TH 1» es
   justo la gracia: te enteras de que existe una sola carta tailandesa de ese
   Pokémon. Y que se lea «ES 0» mientras ES está encendido es lo que convierte
   el cero en una señal en vez de en un muro. */
.langpill-n { font-family: var(--font-num); font-size: .72em; color: var(--ink-3); }
.langpill.is-on .langpill-n { color: var(--primary-ink); }

/* Sin nada elegido, «Todos» está puesto: cero idiomas y todos los idiomas son
   el mismo resultado, así que se pintan como el mismo estado. En reposo lleva
   el borde discontinuo para distinguirse de un idioma antes de leerlo. */
.langpill-all { border-style: dashed; }
.langpill-all.is-on { border-style: solid; }

/* Aplicar: solo sin JavaScript. Hasta ahora `.finder` no tenía ningún control
   de envío, así que con el JS desactivado el panel de filtros era literalmente
   inaplicable. Mismo mecanismo que el botón de buscar de la barra superior. */
.finder-go {
  align-self: end;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  background: var(--brand-gradient);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: 0;
}
:root[data-js="on"] .finder-go { display: none; }

@media (max-width: 560px) {
  /* Una fila que se desliza, no cuatro filas de pastillas.
     ---------------------------------------------------------------------
     Doce pastillas envueltas son más de cien píxeles por encima de la rejilla
     en un móvil: casi un tercio de lo que se ve, gastado en un mando, justo
     encima de lo que se ha venido a mirar. En tira se queda en cuarenta y no
     se esconde nada — todo sigue ahí, a un gesto.

     Lo que queda fuera de pantalla es el final de la fila, nunca lo que está
     puesto: la frase de arriba NOMBRA los idiomas activos en palabras, y el JS
     desliza la tira hasta el primero encendido después de cada refresco. */
  .langpills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--sp-3) * -1);
    padding-inline: var(--sp-3);
    padding-block-end: var(--sp-1);
  }
  .langpills::-webkit-scrollbar { display: none; }
  .langpills > li { flex: none; scroll-snap-align: start; }
  .langbar-out { margin-inline-start: 0; }
}

}