/* Panel de vista previa del buscador de un campo (js/buscador-previa.js). Lo usan la 404 y
   chollos. Quien lo incluye pone `position: relative` en el contenedor del campo. */
.kvp {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; text-align: left;
  background: #fff; border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .3); padding: 8px; max-height: 420px; overflow-y: auto;
}
.kvp-grupo { padding: 10px 12px 6px; font: 700 11.5px/1 'Inter', 'Open Sans', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #999; }
.kvp-fila { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: #111; text-decoration: none; cursor: pointer; }
.kvp-fila:hover, .kvp-fila:focus { background: #fff4ec; color: #111; text-decoration: none; outline: 0; }
.kvp-ico { flex: none; width: 40px; height: 40px; border-radius: 8px; background: #fff4ec; display: grid; place-items: center; color: #ff7300; font-size: 15px; }
.kvp-mini { flex: none; width: 56px; height: 40px; border-radius: 6px; background: #eee center/cover no-repeat; }
.kvp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kvp-txt b { font: 600 14.5px/1.3 'Inter', 'Open Sans', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kvp-txt span { font-size: 12.5px; color: #777; }
.kvp-precio { flex: none; font-size: 12px; color: #777; white-space: nowrap; }
.kvp-precio b { font: 700 15px/1 'Inter', 'Open Sans', sans-serif; color: #111; }
.kvp-todos { display: block; margin: 6px 4px 4px; padding: 11px; border-top: 1px solid #eee; text-align: center; font: 600 14px/1 'Inter', 'Open Sans', sans-serif; color: #ff7300; text-decoration: none; }
.kvp-todos:hover { color: #ff8419; text-decoration: underline; }
.kvp-nada { padding: 16px 12px; font-size: 14px; color: #555; }
@media (max-width: 640px) {
  .kvp { max-height: 60vh; }
  .kvp-precio { display: none; }
}