/* Un buscador para todo (718): /buscar y la paleta de Ctrl+K. SCHEMA 718. */

/* ── La fila de un resultado (las dos lo pintan con el mismo molde) ── */
.bs-fila {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  min-height: 56px;
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
}

/* En la paleta una acción es un botón y no un enlace: misma fila. */
button.bs-fila {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bs-fila:hover,
.bs-fila[aria-selected='true'] {
  background: var(--ice);
}

.bs-fila:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

.bs-foto {
  flex: none;
  width: 36px;
  height: 50px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  object-fit: cover;
}

.bs-foto.bs-sin-foto {
  visibility: hidden;
}

.bs-icono,
.bs-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-mid);
}

.bs-avatar {
  background-position: center;
  background-size: cover;
  color: var(--blanco-fijo);
  font-size: var(--t-sm);
  font-weight: 700;
}

.bs-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.bs-texto b,
.bs-texto small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-texto b {
  font-weight: 600;
}

.bs-texto small {
  color: var(--text-mid);
  font-size: var(--t-sm);
}

.bs-marca:empty {
  display: none;
}

.bs-precio {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bs-seccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--e-lg) 0 var(--e-xs);
  padding: 0 var(--e-md);
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── /buscar ── */
.bs-titulo {
  margin: var(--e-lg) 0 var(--e-md);
}

.bs-caja {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  min-height: 52px;
  padding: 0 var(--e-xs) 0 var(--e-lg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.bs-caja:focus-within {
  border-color: var(--navy);
  box-shadow: var(--shadow-ring);
}

.bs-lupa {
  display: flex;
  color: var(--text-mid);
}

/* La caja ya es el contorno: el campo de dentro no lleva el suyo (y
   tiene que ganar a `input[type='search']:focus` de style.css). */
input.bs-input[type='search'],
input.bs-input[type='search']:focus {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: var(--t-md);
}

.bs-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--e-sm);
  margin: var(--e-md) 0 var(--e-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.bs-chips::-webkit-scrollbar {
  display: none;
}

.bs-chips > * {
  flex: 0 0 auto;
}

.bs-recientes {
  display: flex;
  flex-direction: column;
}

.bs-reciente {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  min-height: 44px;
  padding: 0 var(--e-md);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bs-reciente svg {
  color: var(--text-mid);
}

.bs-reciente:hover {
  background: var(--ice);
}

.bs-borrar,
.bs-mas {
  min-height: 44px;
  padding: 0 var(--e-md);
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.bs-aviso {
  padding: 0 var(--e-md);
  color: var(--text-mid);
}

#searchResults.bs-cargando {
  opacity: 0.6;
}

/* ── La paleta (Ctrl+K) ── */
.paleta {
  width: min(640px, calc(100vw - 2 * var(--e-lg)));
  max-height: min(560px, calc(100vh - 2 * var(--e-2xl)));
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.paleta[open] {
  display: flex;
  flex-direction: column;
}

.paleta::backdrop {
  background: rgb(0 0 0 / 0.35);
}

.paleta-caja {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  padding: var(--e-sm) var(--e-lg);
  border-bottom: 1px solid var(--border);
  color: var(--text-mid);
}

.paleta-caja input.bs-input[type='search'] {
  min-height: 48px;
}

.paleta-lista {
  flex: 1;
  overflow-y: auto;
  padding: var(--e-xs) var(--e-sm) var(--e-sm);
}

.paleta-pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-lg);
  padding: var(--e-sm) var(--e-lg);
  border-top: 1px solid var(--border);
  color: var(--text-mid);
  font-size: var(--t-xs);
}

.paleta-pie kbd,
.paleta-caja kbd {
  padding: 0 var(--e-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font: inherit;
}

.paleta-pie a {
  margin-left: auto;
  color: var(--navy);
}

.paleta-nada {
  padding: var(--e-lg);
  color: var(--text-mid);
}

/* ── La ayuda de los atajos (723) ── */
.atajos-cuerpo {
  overflow-y: auto;
  padding: var(--e-lg) var(--e-xl);
}

.atajos-cuerpo h2 {
  margin: 0 0 var(--e-md);
  font-size: var(--t-lg);
}

.atajos-cuerpo table {
  width: 100%;
  border-collapse: collapse;
}

.atajos-cuerpo td {
  padding: var(--e-xs) 0;
  border-bottom: 1px solid var(--border);
}

.atajos-cuerpo td:first-child {
  width: 40%;
  white-space: nowrap;
}

.atajos-cuerpo kbd {
  display: inline-block;
  min-width: 24px;
  padding: 0 var(--e-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font: inherit;
  font-size: var(--t-sm);
  text-align: center;
}

.atajos-cuerpo form {
  margin-top: var(--e-lg);
  text-align: right;
}

/* ── La carta al pasar el ratón (724) ── */
.vista-carta {
  position: absolute;
  z-index: 60;
  display: flex;
  gap: var(--e-md);
  width: 300px;
  padding: var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.vista-carta img {
  flex: none;
  width: 96px;
  height: 134px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  object-fit: cover;
}

.vista-carta-datos {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  min-width: 0;
}

.vista-carta-datos small {
  color: var(--text-mid);
}

.vista-carta-precio {
  font-size: var(--t-sm);
}

.vista-carta-sube {
  color: var(--success);
}

.vista-carta-baja {
  color: var(--danger);
}

.vista-carta-tengo {
  align-self: flex-start;
  padding: 0 var(--e-sm);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-weight: 600;
}

.vista-carta-tengo.si {
  background: var(--success-bg);
  color: var(--success);
}

/* Solo cartas, por expansión (909): la cuenta arriba y una cabecera por set. */
.bs-cuenta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-xs) var(--e-md);
  margin: 0 0 var(--e-xs);
  padding: 0 var(--e-md);
  color: var(--text-mid);
  font-size: var(--t-sm);
}

.bs-cuenta a.bs-mas {
  display: inline-flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
}

.bs-set {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  margin: var(--e-lg) 0 var(--e-xs);
  padding: var(--e-sm) var(--e-md);
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: var(--t-sm);
}

.bs-set small {
  font-weight: 400;
}

.bs-set-logo:empty {
  display: none;
}

.bs-set-logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 36px;
}

.bs-set-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 968: la foto de un producto es cuadrada; entera, dentro del hueco. */
.bs-foto-producto {
  object-fit: contain;
}

/* 972: expansiones, el mejor resultado, Japón y la cuenta de las chapas
   (SCHEMA 972). */
.bs-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 36px;
}

.bs-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bs-mejor {
  border: 2px solid var(--navy);
  background: var(--white);
}

.bs-mejor .bs-foto {
  width: 64px;
  height: 90px;
}

.bs-mejor .bs-texto b {
  font-size: var(--t-lg);
}

/* El japonés va después de «Ver todas las cartas» y en pequeño: buscas en
   tu catálogo, lo otro es secundario (1146b). */
.bs-japon {
  justify-content: space-between;
  color: var(--text-mid);
  font-size: var(--t-sm);
}

.bs-japon-n {
  color: var(--navy);
  font-weight: 600;
}

/* «Ver todas las cartas», en grande debajo de la rejilla (1146b). */
.bs-mas.bs-mas-cartas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 2 * var(--e-md));
  min-height: 48px;
  margin: var(--e-sm) var(--e-md) var(--e-xs);
  border-radius: var(--radius-md);
  background: var(--ice);
  font-size: var(--t-md);
  text-decoration: none;
}

.bs-chip-n {
  margin-left: var(--e-xs);
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}

[aria-pressed="true"] > .bs-chip-n {
  color: inherit;
}

/* En el móvil (1035, PINGU: «botones apilados que podrían ir en fila»):
   los ocho filtros en UNA fila que se desliza, y sin el «Buscar» grande:
   la caja ya dice qué es la página. */
@media (max-width: 599px) {
  /* Una fila de tres en el móvil (PINGU, 1146b): la cuarta, en «Ver todas». */
  .bs-rejilla > .bs-baldosa:nth-child(n + 4) {
    display: none;
  }

  .bs-chips {
    margin-inline: calc(-1 * var(--e-md));
    padding-inline: var(--e-md);
  }

  .bs-titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Resultados con cara (1146, W2; SCHEMA 1146): cada clase en el color de su
   sección, la gente con su punto verde y las cartas en rejilla de fotos. */
.bs-icono-guia { --k: #0f7f55; }
.bs-icono-noticia { --k: #2563c9; }
.bs-icono-tema { --k: #c62a5c; }
:root[data-theme='dark'] .bs-icono-guia { --k: #2fb47c; }
:root[data-theme='dark'] .bs-icono-noticia { --k: #6ea8ff; }
:root[data-theme='dark'] .bs-icono-tema { --k: #f06c9b; }

.bs-icono-guia,
.bs-icono-noticia,
.bs-icono-tema {
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--k) 14%, var(--white));
  color: var(--k);
}

.bs-emoji {
  font-size: var(--t-lg);
  line-height: 1;
}

.bs-avatar {
  position: relative;
}

.bs-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--e-md);
  padding: var(--e-xs) var(--e-md) var(--e-sm);
}

.bs-baldosa {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.bs-baldosa-foto {
  position: relative;
  display: block;
  aspect-ratio: 245 / 342;
  max-width: 100%;
  margin-bottom: var(--e-xs);
}

.bs-baldosa .bs-foto {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}

.bs-baldosa:hover .bs-foto {
  transform: translateY(-2px);
}

.bs-baldosa-nombre,
.bs-baldosa small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-baldosa-nombre {
  font-size: var(--t-sm);
  font-weight: 600;
}

.bs-baldosa small {
  color: var(--text-mid);
  font-size: var(--t-xs);
}

.bs-baldosa .bs-precio {
  font-size: var(--t-sm);
}

.bs-baldosa:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .bs-baldosa .bs-foto { transition: none; }
  .bs-baldosa:hover .bs-foto { transform: none; }
}

/* En el PC, la página más ancha y «Todo» a dos columnas: las cartas a la
   izquierda, lo demás a la derecha. */
@media (min-width: 1100px) {
  .bs-pagina {
    max-width: var(--container-w);
  }

  .bs-todo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--e-xl);
    align-items: start;
  }

  .bs-col {
    min-width: 0;
  }
}

/* ── 1147: una sola caja (B1), antes de escribir (B2) y te lo completa (B3); SCHEMA 1147 ── */
.bs-sugerencias {
  display: grid;
  margin: var(--e-sm) 0 0;
  padding: var(--e-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.bs-sugerencias[hidden] {
  display: none;
}

.bs-sug {
  display: flex;
  align-items: center;
}

.bs-sug-ir,
.bs-sug-copiar {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.bs-sug-ir {
  flex: 1;
  gap: var(--e-md);
  min-width: 0;
  padding: 0 var(--e-md);
  text-align: left;
}

.bs-sug-ir > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-sug-ir svg,
.bs-sug-copiar {
  color: var(--text-mid);
}

.bs-sug-tuyo {
  color: var(--text-mid);
}

.bs-sug-copiar {
  justify-content: center;
  min-width: 44px;
}

.bs-sug-ir:hover,
.bs-sug-copiar:hover {
  background: var(--ice);
}

.bs-antes {
  display: grid;
  gap: var(--e-sm);
}

.bs-antes-bloque .bs-seccion {
  margin-top: var(--e-md);
}

.bs-antes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm);
  padding: 0 var(--e-md);
}

.bs-reciente-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.bs-reciente-chip .bs-reciente {
  gap: var(--e-xs);
  padding: 0 var(--e-xs) 0 var(--e-md);
  border-radius: var(--radius-pill);
  font-size: var(--t-sm);
}

.bs-reciente-x {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
}

.bs-reciente-x:hover {
  color: var(--text);
}

.bs-antes .bs-borrar {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* B1: en el PC ancho la caja vive en la barra de arriba, en lugar de la
   pastilla; la página empieza por los filtros. El título se queda para el
   lector de pantalla. */
#navSearch.bs-en-la-barra #navSearchBtn {
  display: none;
}

#navSearch.bs-en-la-barra .bs-caja {
  width: 100%;
  min-height: 44px;
  padding-left: var(--e-md);
}

html.bs-caja-arriba .bs-titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sin título ni caja, la página empieza por los filtros (con la lateral, la
   barra de arriba ya no tapa el contenido: los 76 px eran para la otra). */
html.bs-caja-arriba .bs-pagina {
  padding-top: var(--e-lg);
}

/* ── 1148: la vista previa de la paleta en el PC (B5; SCHEMA 1148) ── */
.paleta-cuerpo {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.paleta-cuerpo .paleta-lista {
  flex: 1 1 auto;
  min-width: 0;
}

.paleta.paleta-con-previa {
  width: min(960px, calc(100vw - 2 * var(--e-lg)));
}

.paleta-previa {
  display: flex;
  flex: 0 0 300px;
  flex-direction: column;
  align-items: center;
  gap: var(--e-xs);
  padding: var(--e-lg);
  overflow-y: auto;
  border-left: 1px solid var(--border);
  text-align: center;
}

.paleta-previa[hidden] {
  display: none;
}

.paleta-previa-foto {
  position: relative;
  display: block;
  width: 140px;
  max-width: 100%;
  aspect-ratio: 245 / 342;
  margin-bottom: var(--e-sm);
}

.paleta-previa-foto .bs-foto {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.paleta-previa-nombre {
  font-family: var(--font-display);
  font-size: var(--t-lg);
}

.paleta-previa > small {
  color: var(--text-mid);
  font-size: var(--t-sm);
}

.paleta-previa-precio {
  display: grid;
  margin: var(--e-sm) 0;
  padding: var(--e-sm) var(--e-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.paleta-previa-precio small {
  color: var(--text-mid);
  font-size: var(--t-xs);
}

.paleta-previa-precio b {
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}

.paleta-previa-botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-sm);
  width: 100%;
  margin-top: var(--e-xs);
}

.paleta-previa-botones button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-xs);
  min-height: 44px;
  padding: 0 var(--e-md);
  font-size: var(--t-sm);
}

.paleta-previa-botones [data-previa='abrir'] {
  grid-column: 1 / -1;
}

.paleta-previa-botones [aria-pressed='true'] {
  color: var(--acento);
}